diff --git a/src/app/page.tsx b/src/app/page.tsx index 24e14c6..90303b6 100644 --- a/src/app/page.tsx +++ b/src/app/page.tsx @@ -10,7 +10,7 @@ import SocialProofOne from '@/components/sections/socialProof/SocialProofOne'; import FaqBase from '@/components/sections/faq/FaqBase'; import FooterSimple from '@/components/sections/footer/FooterSimple'; import { Shield, Zap, Clock, AlertCircle, CheckCircle, Users, Sparkles, HelpCircle } from "lucide-react"; -import { useState } from "react"; +import { useState, useRef } from "react"; import Input from '@/components/form/Input'; const navItems = [ @@ -35,6 +35,7 @@ interface WaitlistFormData { export default function LandingPage() { const [waitlistData, setWaitlistData] = useState([]); const [formStatus, setFormStatus] = useState<'idle' | 'success' | 'error'>('idle'); + const contactFormRef = useRef(null); const handleWaitlistSubmit = (formData: WaitlistFormData) => { try { @@ -48,6 +49,19 @@ export default function LandingPage() { } }; + const handleJoinWaitlistClick = () => { + if (contactFormRef.current) { + contactFormRef.current.scrollIntoView({ behavior: 'smooth' }); + // Focus on the email input after scroll + setTimeout(() => { + const emailInput = contactFormRef.current?.querySelector('input[type="email"]') as HTMLInputElement; + if (emailInput) { + emailInput.focus(); + } + }, 300); + } + }; + return ( @@ -85,7 +99,7 @@ export default function LandingPage() { { value: "5min", label: "Setup Time" } ]} enableKpiAnimation={true} - buttons={[{ text: "Join Waitlist", href: "#contact" }]} + buttons={[{ text: "Join Waitlist", onClick: handleJoinWaitlistClick }]} imageSrc={heroImage} imageAlt="Clearance fintech dashboard interface" mediaAnimation="slide-up" @@ -233,7 +247,7 @@ export default function LandingPage() { /> -
+