feat: add mobile email form (#2841)

Co-authored-by: itsNintu <[email protected]>

Author: itsNintu

apps/web/client/.env.example

@@ -51,6 +51,9 @@ EXA_API_KEY="<Your API Key from https://dashboard.exa.ai/api-keys>"
 # n8n - Automation webhooks
 N8N_WEBHOOK_URL="<Your webhook url>"
 N8N_API_KEY="<Your n8n api key>"
+N8N_LANDING_FORM_URL="https://n8n.process.onlook.com/webhook/website-landing-form"
+N8N_LANDING_FORM_HEADER_NAME="X-Onlook-Form-Token" # Optional alternative to Basic Auth
+N8N_LANDING_FORM_HEADER_VALUE="<Long random token>"
 
 # Langfuse - LLM telemetry
 LANGFUSE_SECRET_KEY=

apps/web/client/src/app/_components/hero/index.tsx

@@ -9,6 +9,7 @@ import { Create } from './create';
 import { CreateError } from './create-error';
 import { HighDemand } from './high-demand';
 import { Import } from './import';
+import { MobileEmailCapture } from './mobile-email-capture';
 import { StartBlank } from './start-blank';
 import { UnicornBackground } from './unicorn-background';
 
@@ -98,16 +99,8 @@ export function Hero() {
                         <StartBlank user={user ?? null} isCreatingProject={isCreatingProject} setIsCreatingProject={setIsCreatingProject} />
                         <Import />
                     </motion.div>
-
                 </div>
-                <motion.div className="hidden text-balance flex-col gap-4 items-center relative z-20 mx-10 text-foreground-secondary bg-foreground-secondary/10 backdrop-blur-lg rounded-lg border-[0.5px] border-foreground-secondary/20 p-4"
-                    initial={{ opacity: 0, filter: "blur(4px)" }}
-                    animate={{ opacity: 1, filter: "blur(0px)" }}
-                    transition={{ duration: 0.6, delay: 0.6, ease: "easeOut" }}
-                    style={{ willChange: "opacity, filter", transform: "translateZ(0)" }}
-                >
-                    Onlook isn't designed for Mobile – Please open on a larger screen
-                </motion.div>
+                <MobileEmailCapture />
             </div>
         </div>
     );