Update src/app/page.tsx

Update src/app/layout.tsx
Add src/app/api/waitlist/route.ts
2026-03-06 06:18:33 +00:00 · 2026-03-06 06:18:32 +00:00 · 2026-03-06 06:18:32 +00:00 · 2026-03-06 06:13:48 +00:00 · 2026-03-06 06:13:38 +00:00 · 2026-03-06 06:13:37 +00:00
3 changed files with 127 additions and 34 deletions
--- a/src/app/api/waitlist/route.ts
+++ b/src/app/api/waitlist/route.ts
@@ -0,0 +1,69 @@
 import { NextRequest, NextResponse } from 'next/server';
 const SUPABASE_URL = process.env.NEXT_PUBLIC_SUPABASE_URL || '';
 const SUPABASE_ANON_KEY = process.env.NEXT_PUBLIC_SUPABASE_ANON_KEY || '';
 export async function POST(request: NextRequest) {
  try {
    const body = await request.json();
    const { email, instagram, tiktok } = body;
    // Validate email
    if (!email || !email.includes('@')) {
      return NextResponse.json(
        { error: 'Invalid email address' },
        { status: 400 }
      );
    }
    // Check if Supabase credentials are configured
    if (!SUPABASE_URL || !SUPABASE_ANON_KEY) {
      console.error('Supabase credentials not configured');
      // Still return success to user, but log the error
      return NextResponse.json(
        { message: 'Submission received (database pending)' },
        { status: 202 }
      );
    }
    // Insert into Supabase
    const response = await fetch(`${SUPABASE_URL}/rest/v1/waitlist`, {
      method: 'POST',
      headers: {
        'Content-Type': 'application/json',
        'apikey': SUPABASE_ANON_KEY,
        'Authorization': `Bearer ${SUPABASE_ANON_KEY}`,
      },
      body: JSON.stringify({
        email,
        instagram: instagram || null,
        tiktok: tiktok || null,
        created_at: new Date().toISOString(),
      }),
    });
    if (!response.ok) {
      console.error('Supabase error:', await response.text());
      // Check if it's a duplicate entry error
      const errorText = await response.text();
      if (errorText.includes('duplicate') || errorText.includes('unique')) {
        return NextResponse.json(
          { error: 'This email is already on the waitlist' },
          { status: 409 }
        );
      }
      throw new Error(`Supabase error: ${response.status}`);
    }
    return NextResponse.json(
      { message: 'Successfully joined the waitlist' },
      { status: 201 }
    );
  } catch (error) {
    console.error('Waitlist API error:', error);
    return NextResponse.json(
      { error: 'Failed to process waitlist submission' },
      { status: 500 }
    );
  }
 }
--- a/src/app/layout.tsx
+++ b/src/app/layout.tsx
@@ -15,6 +15,9 @@ export default function RootLayout({
 }) {
  return (
    <html lang="en">
      <head>
        <script async src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
      </head>
      <body className={inter.className}>{children}
        <script
          dangerouslySetInnerHTML={{
--- a/src/app/page.tsx
+++ b/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,9 +35,23 @@ 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) => {
+  const handleWaitlistSubmit = async (formData: WaitlistFormData) => {
    try {
      // Send to database via API
      const response = await fetch('/api/waitlist', {
        method: 'POST',
        headers: {
          'Content-Type': 'application/json',
        },
        body: JSON.stringify(formData),
      });
      if (!response.ok) {
        throw new Error('Failed to submit form');
      }
      setWaitlistData([...waitlistData, formData]);
      setFormStatus('success');
      setTimeout(() => setFormStatus('idle'), 3000);
@@ -48,6 +62,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 +93,7 @@ export default function LandingPage() {
          brandName="Clearance"
          navItems={navItems}
          button={{
-            text: "Join Waitlist",            href: "#contact"
+            text: "Join Waitlist",            onClick: handleJoinWaitlistClick
          }}
        />
      </div>
@@ -85,7 +112,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 +131,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 +260,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 +329,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>
+            <h2 className="text-3xl font-bold mb-2 break-words overflow-hidden text-ellipsis">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>
+            <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
+              <Input
                type="email"
                id="email"
                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
+              <Input
                type="text"
                id="instagram"
                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
+              <Input
                type="text"
                id="tiktok"
                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,18 +381,18 @@ 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>
Author	SHA1	Message	Date
bender	7d9e3379cc	Update src/app/page.tsx	2026-03-06 06:18:33 +00:00
bender	a255161583	Update src/app/layout.tsx	2026-03-06 06:18:32 +00:00
bender	ad8bbfecf6	Add src/app/api/waitlist/route.ts	2026-03-06 06:18:32 +00:00
bender	73710d854b	Merge version_9 into main Merge version_9 into main	2026-03-06 06:13:48 +00:00
bender	68469d88dd	Update src/app/page.tsx	2026-03-06 06:13:38 +00:00
bender	63c8304a3b	Update src/app/layout.tsx	2026-03-06 06:13:37 +00:00
bender	b956958798	Merge version_8 into main Merge version_8 into main	2026-03-06 06:07:31 +00:00
bender	e91715a197	Update src/app/page.tsx	2026-03-06 06:07:27 +00:00
bender	c75dd59c0a	Merge version_7 into main Merge version_7 into main	2026-03-06 06:05:59 +00:00
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