Update src/app/page.tsx

Merge version_8 into main

src/app/layout.tsx

@@ -1385,4 +1385,4 @@ export default function RootLayout({
       </body>
     </html>
   );
-}
+}

src/app/page.tsx

@@ -8,10 +8,10 @@ import FeatureBento from '@/components/sections/feature/FeatureBento';
 import ProductCardFour from '@/components/sections/product/ProductCardFour';
 import SocialProofOne from '@/components/sections/socialProof/SocialProofOne';
 import FaqBase from '@/components/sections/faq/FaqBase';
-import ContactSplit from '@/components/sections/contact/ContactSplit';
 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 = [
   { name: "Problem", id: "problem" },
@@ -35,6 +35,7 @@ interface WaitlistFormData {
 export default function LandingPage() {
   const [waitlistData, setWaitlistData] = useState<WaitlistFormData[]>([]);
   const [formStatus, setFormStatus] = useState<'idle' | 'success' | 'error'>('idle');
+  const contactFormRef = useRef<HTMLDivElement>(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 (
     <ThemeProvider
       defaultButtonVariant="text-stagger"
@@ -66,7 +80,7 @@ export default function LandingPage() {
           brandName="Clearance"
           navItems={navItems}
           button={{
-            text: "Join Waitlist",            href: "#contact"
+            text: "Join Waitlist",            onClick: handleJoinWaitlistClick
           }}
         />
       </div>
@@ -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"
@@ -104,13 +118,13 @@ export default function LandingPage() {
           animationType="slide-up"
           metrics={[
             {
-              id: "1",              value: "Brands",              title: "Run Your Content Past Expiry",              items: ["No expiration tracking", "Licenses silently expire", "Brands keep profiting—you don't"]
+              id: "1",              value: "Brands Use Expired Licenses",              title: "Content Keeps Running Past Expiry",              items: ["No expiration tracking", "Licenses silently expire", "Brands keep profiting—you don't"]
             },
             {
-              id: "2",              value: "You Never",              title: "Invoice the Renewal",              items: ["Manual renewal follow-ups", "Easy to forget", "Lost revenue disappears"]
+              id: "2",              value: "You Miss Renewal Invoices",              title: "Nobody Remembers to Bill",              items: ["Manual renewal follow-ups", "Easy to forget", "Lost revenue disappears"]
             },
             {
-              id: "3",              value: "That's Money",              title: "You'll Never See",              items: ["Average loss: $1,200/creator", "Expires quarterly", "Compounds over time"]
+              id: "3",              value: "Revenue Slips Away Silently",              title: "Money Lost to Expired Deals",              items: ["Average loss: $1,200/creator", "Expires quarterly", "Compounds over time"]
             }
           ]}
         />
@@ -233,7 +247,7 @@ export default function LandingPage() {
         />
       </div>
 
-      <div id="contact" data-section="contact">
+      <div id="contact" data-section="contact" ref={contactFormRef}>
         <WaitlistFormSection onSubmit={handleWaitlistSubmit} formStatus={formStatus} />
       </div>
 
@@ -302,51 +316,45 @@ function WaitlistFormSection({ onSubmit, formStatus }: { onSubmit: (data: Waitli
       <div className="max-w-4xl mx-auto px-4 py-12">
         <div className="bg-card rounded-lg p-8 shadow-sm">
           <div className="mb-8">
-            <h2 className="text-3xl font-bold mb-2">Get Early Access</h2>
-            <p className="text-foreground/70">Join the waitlist and be among the first to protect your IP revenue. Early adopters get lifetime discounts and 1-on-1 onboarding.</p>
+            <h2 className="text-3xl font-bold mb-2 break-words overflow-hidden text-ellipsis">Get Early Access</h2>
+            <p className="text-foreground/70 break-words overflow-hidden text-ellipsis">Join the waitlist and be among the first to protect your IP revenue. Early adopters get lifetime discounts and 1-on-1 onboarding.</p>
           </div>
 
           <form onSubmit={handleSubmit} className="space-y-4">
             <div>
-              <label htmlFor="email" className="block text-sm font-medium mb-2">
+              <label htmlFor="email" className="block text-sm font-medium mb-2 break-words overflow-hidden text-ellipsis">
                 Email Address <span className="text-primary-cta">*</span>
               </label>
-              <input
-                type="email"
-                id="email"
+              <Input
                 value={email}
-                onChange={(e) => setEmail(e.target.value)}
+                onChange={setEmail}
+                type="email"
                 placeholder="your@email.com"
                 required
-                className="w-full px-4 py-2 rounded-lg border border-accent/30 bg-background text-foreground placeholder-foreground/50 focus:outline-none focus:border-primary-cta focus:ring-1 focus:ring-primary-cta"
               />
             </div>
 
             <div>
-              <label htmlFor="instagram" className="block text-sm font-medium mb-2">
+              <label htmlFor="instagram" className="block text-sm font-medium mb-2 break-words overflow-hidden text-ellipsis">
                 Instagram Handle <span className="text-foreground/50">(optional)</span>
               </label>
-              <input
-                type="text"
-                id="instagram"
+              <Input
                 value={instagram}
-                onChange={(e) => setInstagram(e.target.value)}
+                onChange={setInstagram}
+                type="text"
                 placeholder="@yourhandle"
-                className="w-full px-4 py-2 rounded-lg border border-accent/30 bg-background text-foreground placeholder-foreground/50 focus:outline-none focus:border-primary-cta focus:ring-1 focus:ring-primary-cta"
               />
             </div>
 
             <div>
-              <label htmlFor="tiktok" className="block text-sm font-medium mb-2">
+              <label htmlFor="tiktok" className="block text-sm font-medium mb-2 break-words overflow-hidden text-ellipsis">
                 TikTok Handle <span className="text-foreground/50">(optional)</span>
               </label>
-              <input
-                type="text"
-                id="tiktok"
+              <Input
                 value={tiktok}
-                onChange={(e) => setTiktok(e.target.value)}
+                onChange={setTiktok}
+                type="text"
                 placeholder="@yourhandle"
-                className="w-full px-4 py-2 rounded-lg border border-accent/30 bg-background text-foreground placeholder-foreground/50 focus:outline-none focus:border-primary-cta focus:ring-1 focus:ring-primary-cta"
               />
             </div>
 
@@ -360,22 +368,22 @@ function WaitlistFormSection({ onSubmit, formStatus }: { onSubmit: (data: Waitli
           </form>
 
           {formStatus === 'success' && (
-            <div className="mt-4 p-4 bg-green-100/20 border border-green-500/30 rounded-lg text-green-700 text-sm">
+            <div className="mt-4 p-4 bg-green-100/20 border border-green-500/30 rounded-lg text-green-700 text-sm break-words overflow-hidden text-ellipsis">
               ✓ Successfully joined the waitlist! Check your email for confirmation.
             </div>
           )}
 
           {formStatus === 'error' && (
-            <div className="mt-4 p-4 bg-red-100/20 border border-red-500/30 rounded-lg text-red-700 text-sm">
+            <div className="mt-4 p-4 bg-red-100/20 border border-red-500/30 rounded-lg text-red-700 text-sm break-words overflow-hidden text-ellipsis">
               × Something went wrong. Please try again.
             </div>
           )}
 
-          <p className="mt-6 text-xs text-foreground/50 text-center">
+          <p className="mt-6 text-xs text-foreground/50 text-center break-words overflow-hidden text-ellipsis">
             We respect your privacy. Unsubscribe anytime. No spam, ever.
           </p>
         </div>
       </div>
     </div>
   );
-}
+}