Update src/app/page.tsx

Merge version_6 into main
2026-03-06 06:05:55 +00:00 · 2026-03-06 04:57:35 +00:00 · 2026-03-06 04:57:31 +00:00 · 2026-03-06 04:53:20 +00:00 · 2026-03-06 04:53:16 +00:00 · 2026-03-06 04:53:16 +00:00
2 changed files with 159 additions and 61 deletions
--- a/src/app/layout.tsx
+++ b/src/app/layout.tsx
@@ -1,49 +1,21 @@
 import type { Metadata } from "next";
 import { Halant } from "next/font/google";
 import { Inter } from "next/font/google";
 import { Figtree } from "next/font/google";
 import "./globals.css";
 import { ServiceWrapper } from "@/components/ServiceWrapper";
 import Tag from "@/tag/Tag";
-const halant = Halant({
+const inter = Inter({ subsets: ["latin"] });
  variable: "--font-halant",  subsets: ["latin"],
  weight: ["300", "400", "500", "600", "700"],
 });
 const inter = Inter({
  variable: "--font-inter",  subsets: ["latin"],
 });
 const figtree = Figtree({
  variable: "--font-figtree",  subsets: ["latin"],
 });
 export const metadata: Metadata = {
-  title: "Clearance – Protect Your Content License Revenue",  description: "Stop losing money when your content licenses expire. Clearance automates IP protection for creators and agencies with smart license tracking and renewal invoicing.",  keywords: "content license protection, IP management, creator revenue, license tracker, renewal automation",  openGraph: {
+  title: "Clearance - Protect Your IP Revenue",  description: "Automate IP protection for creators and agencies. Track licenses, get renewal reminders, and collect payments before your content goes dark."
    title: "Clearance – Protect Your Content License Revenue",    description: "Stop losing money when your content licenses expire. Clearance automates IP protection for creators and agencies.",    siteName: "Clearance",    type: "website"},
  twitter: {
    card: "summary_large_image",    title: "Clearance – Protect Your Content License Revenue",    description: "Automate IP protection and renewal invoicing for creators and agencies."},
  robots: {
    index: true,
    follow: true,
  },
 };
 export default function RootLayout({
  children,
-}: Readonly<{
+}: {
  children: React.ReactNode;
-}>) {
+}) {
  return (
-    <html lang="en" suppressHydrationWarning>
+    <html lang="en">
-      <ServiceWrapper>
+      <body className={inter.className}>{children}
        <body
          className={`${halant.variable} ${inter.variable} ${figtree.variable} antialiased`}
        >
          <Tag />
          {children}
        <script
          dangerouslySetInnerHTML={{
            __html: `
@@ -1411,7 +1383,6 @@ export default function RootLayout({
          }}
        />
      </body>
      </ServiceWrapper>
    </html>
  );
 }
--- a/src/app/page.tsx
+++ b/src/app/page.tsx
@@ -8,9 +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, useRef } from "react";
 import Input from '@/components/form/Input';
 const navItems = [
  { name: "Problem", id: "problem" },
@@ -25,7 +26,42 @@ const socialProofLogos = [
  "http://img.b2bpic.net/free-vector/flat-minimal-technology-labels_23-2149083696.jpg",  "http://img.b2bpic.net/free-vector/hand-drawn-hub-logo-design_23-2149857667.jpg",  "http://img.b2bpic.net/free-vector/gradient-accounting-logo_23-2148844138.jpg",  "http://img.b2bpic.net/free-vector/design-artwork-logo-template_23-2149507369.jpg",  "http://img.b2bpic.net/free-vector/gradient-colored-data-logo-template_23-2149189483.jpg",  "http://img.b2bpic.net/free-vector/hand-drawn-hub-logo-design_23-2149857670.jpg",  "http://img.b2bpic.net/free-vector/hand-drawn-business-workshop-labels_23-2149422820.jpg"
 ];
 interface WaitlistFormData {
  email: string;
  instagram?: string;
  tiktok?: string;
 }
 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 {
      setWaitlistData([...waitlistData, formData]);
      setFormStatus('success');
      setTimeout(() => setFormStatus('idle'), 3000);
      console.log('Waitlist submission:', formData);
    } catch (error) {
      setFormStatus('error');
      console.error('Error submitting waitlist form:', error);
    }
  };
  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"
@@ -44,7 +80,7 @@ export default function LandingPage() {
          brandName="Clearance"
          navItems={navItems}
          button={{
-            text: "Join Waitlist",            href: "#contact"
+            text: "Join Waitlist",            onClick: handleJoinWaitlistClick
          }}
        />
      </div>
@@ -52,7 +88,7 @@ export default function LandingPage() {
      <div id="hero" data-section="hero">
        <HeroSplitKpi
          title="Stop Losing Money When Your Content License Expires"
-          description="Clearance automates IP protection for creators and agencies. Track licenses, get renewal reminders, and collect payments before your content goes dark."
+          description="Recover $1,000–$5,000+ per renewal on autopilot. Clearance automates IP protection for creators and agencies. Track licenses, get renewal reminders, and collect payments before your content goes dark."
          tag="Join 200+ creators protecting their IP"
          tagIcon={Shield}
          tagAnimation="blur-reveal"
@@ -63,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"
@@ -111,7 +147,8 @@ export default function LandingPage() {
                { label: "Import licenses", detail: "Sync with Dropbox or manual upload" },
                { label: "Set details", detail: "Price, duration, and brand info" },
                { label: "Activate", detail: "Start tracking immediately" }
-              ],              completedLabel: "Setup Complete"
+              ],
              completedLabel: "Setup Complete"
            },
            {
              title: "License Timer Runs",              description: "Real-time countdown to expiration with notifications",              bentoComponent: "animated-bar-chart"
@@ -141,19 +178,19 @@ export default function LandingPage() {
          carouselMode="buttons"
          products={[
            {
-              id: "1",              name: "Licensing Tracker",              price: "Core Feature",              variant: "Dashboard view of all active licenses",              imageSrc: heroImage,
+              id: "1",              name: "Licensing Tracker",              price: "Core Feature",              variant: "Never miss a renewal deadline again",              imageSrc: heroImage,
              imageAlt: "Licensing tracker dashboard"
            },
            {
-              id: "2",              name: "Automated Renewal Invoicing",              price: "Core Feature",              variant: "Smart billing 30 days before expiry",              imageSrc: heroImage,
+              id: "2",              name: "Automated Renewal Invoicing",              price: "Core Feature",              variant: "Get paid automatically before licenses expire",              imageSrc: heroImage,
              imageAlt: "Automated invoicing interface"
            },
            {
-              id: "3",              name: "Payment Protection",              price: "Core Feature",              variant: "Secure payment collection and tracking",              imageSrc: heroImage,
+              id: "3",              name: "Payment Protection",              price: "Core Feature",              variant: "Ensure every license renewal turns into revenue",              imageSrc: heroImage,
              imageAlt: "Payment security interface"
            },
            {
-              id: "4",              name: "Creator Dashboard",              price: "Core Feature",              variant: "Full analytics and revenue insights",              imageSrc: heroImage,
+              id: "4",              name: "Creator Dashboard",              price: "Core Feature",              variant: "Track all your IP revenue in one place",              imageSrc: heroImage,
              imageAlt: "Creator dashboard analytics"
            }
          ]}
@@ -210,22 +247,8 @@ export default function LandingPage() {
        />
      </div>
-      <div id="contact" data-section="contact">
+      <div id="contact" data-section="contact" ref={contactFormRef}>
-        <ContactSplit
+        <WaitlistFormSection onSubmit={handleWaitlistSubmit} formStatus={formStatus} />
          tag="Waitlist"
          title="Get Early Access"
          description="Join the waitlist and be among the first to protect your IP revenue. Early adopters get lifetime discounts and 1-on-1 onboarding."
          background={{ variant: "plain" }}
          useInvertedBackground={false}
          imageSrc={heroImage}
          imageAlt="Clearance waitlist early access"
          mediaAnimation="slide-up"
          mediaPosition="right"
          inputPlaceholder="Enter your email"
          buttonText="Join Waitlist"
          termsText="We respect your privacy. Unsubscribe anytime. No spam, ever."
          tagAnimation="blur-reveal"
        />
      </div>
      <div id="footer" data-section="footer">
@@ -260,3 +283,107 @@ export default function LandingPage() {
    </ThemeProvider>
  );
 }
 function WaitlistFormSection({ onSubmit, formStatus }: { onSubmit: (data: WaitlistFormData) => void; formStatus: 'idle' | 'success' | 'error' }) {
  const [email, setEmail] = useState('');
  const [instagram, setInstagram] = useState('');
  const [tiktok, setTiktok] = useState('');
  const [isSubmitting, setIsSubmitting] = useState(false);
  const handleSubmit = async (e: React.FormEvent) => {
    e.preventDefault();
    setIsSubmitting(true);
    if (!email) {
      setIsSubmitting(false);
      return;
    }
    onSubmit({
      email,
      instagram: instagram || undefined,
      tiktok: tiktok || undefined
    });
    setEmail('');
    setInstagram('');
    setTiktok('');
    setIsSubmitting(false);
  };
  return (
    <div className="w-full">
      <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>
          </div>
          <form onSubmit={handleSubmit} className="space-y-4">
            <div>
              <label htmlFor="email" className="block text-sm font-medium mb-2">
                Email Address <span className="text-primary-cta">*</span>
              </label>
              <Input
                value={email}
                onChange={setEmail}
                type="email"
                placeholder="your@email.com"
                required
              />
            </div>
            <div>
              <label htmlFor="instagram" className="block text-sm font-medium mb-2">
                Instagram Handle <span className="text-foreground/50">(optional)</span>
              </label>
              <Input
                value={instagram}
                onChange={setInstagram}
                type="text"
                placeholder="@yourhandle"
              />
            </div>
            <div>
              <label htmlFor="tiktok" className="block text-sm font-medium mb-2">
                TikTok Handle <span className="text-foreground/50">(optional)</span>
              </label>
              <Input
                value={tiktok}
                onChange={setTiktok}
                type="text"
                placeholder="@yourhandle"
              />
            </div>
            <button
              type="submit"
              disabled={isSubmitting || !email}
              className="w-full px-6 py-3 rounded-lg bg-primary-cta text-primary-cta-text font-medium hover:opacity-90 disabled:opacity-50 disabled:cursor-not-allowed transition-opacity"
            >
              {isSubmitting ? 'Joining...' : 'Join Waitlist'}
            </button>
          </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">
              ✓ 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">
              × Something went wrong. Please try again.
            </div>
          )}
          <p className="mt-6 text-xs text-foreground/50 text-center">
            We respect your privacy. Unsubscribe anytime. No spam, ever.
          </p>
        </div>
      </div>
    </div>
  );
 }
Author	SHA1	Message	Date
bender	961894778f	Update src/app/page.tsx	2026-03-06 06:05:55 +00:00
bender	cdc373f255	Merge version_6 into main Merge version_6 into main	2026-03-06 04:57:35 +00:00
bender	3e6bf968af	Update src/app/page.tsx	2026-03-06 04:57:31 +00:00
bender	bb70a5d116	Merge version_5 into main Merge version_5 into main	2026-03-06 04:53:20 +00:00
bender	e3da975fa0	Update src/app/page.tsx	2026-03-06 04:53:16 +00:00
bender	efeb65da9f	Update src/app/layout.tsx	2026-03-06 04:53:16 +00:00
bender	c54ee001f6	Merge version_4 into main Merge version_4 into main	2026-03-06 04:51:59 +00:00
bender	feadd88571	Update src/app/page.tsx	2026-03-06 04:51:55 +00:00
bender	19a3f5afd7	Update src/app/layout.tsx	2026-03-06 04:51:54 +00:00
bender	b1308f0f94	Merge version_3 into main Merge version_3 into main	2026-03-06 04:37:31 +00:00
bender	4f9adb38fc	Update src/app/page.tsx	2026-03-06 04:37:27 +00:00
bender	fd33ba8c47	Update src/app/layout.tsx	2026-03-06 04:37:27 +00:00
bender	b408dc5624	Merge version_2 into main Merge version_2 into main	2026-03-06 04:34:53 +00:00
bender	c1cbc9d2d8	Update src/app/page.tsx	2026-03-06 04:34:49 +00:00
bender	39250e937b	Update src/app/layout.tsx	2026-03-06 04:34:49 +00:00
bender	44c6e6c239	Merge version_1 into main Merge version_1 into main	2026-03-06 04:33:05 +00:00