Compare commits
39 Commits
| Author | SHA1 | Date | |
|---|---|---|---|
| e5fd3ec8e8 | |||
| 3eb21771d1 | |||
| 2f113b3b0f | |||
| f4eeb48f17 | |||
| 26507f4126 | |||
| 0924e85ee7 | |||
| 416688826f | |||
| e80dcca1a8 | |||
| 6b7ca8c352 | |||
| 416ab0fb9c | |||
| fc3c5dbe19 | |||
| a3258ea000 | |||
| 80eda59319 | |||
| 63f1f58dc9 | |||
| 8f96928c52 | |||
| 92065771c3 | |||
| 1792646e60 | |||
| 7d9e3379cc | |||
| a255161583 | |||
| ad8bbfecf6 | |||
| 73710d854b | |||
| 68469d88dd | |||
| 63c8304a3b | |||
| b956958798 | |||
| e91715a197 | |||
| c75dd59c0a | |||
| 961894778f | |||
| cdc373f255 | |||
| 3e6bf968af | |||
| bb70a5d116 | |||
| e3da975fa0 | |||
| efeb65da9f | |||
| c54ee001f6 | |||
| feadd88571 | |||
| 19a3f5afd7 | |||
| b1308f0f94 | |||
| 4f9adb38fc | |||
| fd33ba8c47 | |||
| b408dc5624 |
86
src/app/api/waitlist/route.ts
Normal file
86
src/app/api/waitlist/route.ts
Normal file
@@ -0,0 +1,86 @@
|
|||||||
|
import { NextRequest, NextResponse } from 'next/server';
|
||||||
|
|
||||||
|
interface WaitlistEntry {
|
||||||
|
email: string;
|
||||||
|
instagram?: string;
|
||||||
|
tiktok?: string;
|
||||||
|
createdAt: string;
|
||||||
|
}
|
||||||
|
|
||||||
|
// In-memory storage for demonstration
|
||||||
|
// In production, replace with actual database (MongoDB, PostgreSQL, etc.)
|
||||||
|
const waitlistEntries: WaitlistEntry[] = [];
|
||||||
|
|
||||||
|
export async function POST(request: NextRequest) {
|
||||||
|
try {
|
||||||
|
const body = await request.json();
|
||||||
|
const { email, instagram, tiktok } = body;
|
||||||
|
|
||||||
|
// Validate email
|
||||||
|
if (!email || typeof email !== 'string' || !email.includes('@')) {
|
||||||
|
return NextResponse.json(
|
||||||
|
{ error: 'Valid email is required' },
|
||||||
|
{ status: 400 }
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
// Check for duplicate email
|
||||||
|
if (waitlistEntries.some(entry => entry.email === email)) {
|
||||||
|
return NextResponse.json(
|
||||||
|
{ error: 'Email already registered' },
|
||||||
|
{ status: 409 }
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
// Create waitlist entry
|
||||||
|
const entry: WaitlistEntry = {
|
||||||
|
email,
|
||||||
|
instagram: instagram || undefined,
|
||||||
|
tiktok: tiktok || undefined,
|
||||||
|
createdAt: new Date().toISOString()
|
||||||
|
};
|
||||||
|
|
||||||
|
// Add to in-memory storage
|
||||||
|
waitlistEntries.push(entry);
|
||||||
|
|
||||||
|
// TODO: In production, save to database here
|
||||||
|
// Example for MongoDB:
|
||||||
|
// await db.collection('waitlist').insertOne(entry);
|
||||||
|
|
||||||
|
// TODO: Send confirmation email
|
||||||
|
// Example:
|
||||||
|
// await sendEmail({
|
||||||
|
// to: email,
|
||||||
|
// subject: 'Welcome to Clearance Waitlist',
|
||||||
|
// template: 'waitlist-confirmation'
|
||||||
|
// });
|
||||||
|
|
||||||
|
console.log('Waitlist entry created:', entry);
|
||||||
|
|
||||||
|
return NextResponse.json(
|
||||||
|
{
|
||||||
|
success: true,
|
||||||
|
message: 'Successfully joined the waitlist',
|
||||||
|
data: entry
|
||||||
|
},
|
||||||
|
{ status: 201 }
|
||||||
|
);
|
||||||
|
} catch (error) {
|
||||||
|
console.error('Waitlist API error:', error);
|
||||||
|
return NextResponse.json(
|
||||||
|
{ error: 'Internal server error' },
|
||||||
|
{ status: 500 }
|
||||||
|
);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
export async function GET() {
|
||||||
|
// Optional: Get all waitlist entries (add authentication in production)
|
||||||
|
return NextResponse.json(
|
||||||
|
{
|
||||||
|
count: waitlistEntries.length,
|
||||||
|
entries: waitlistEntries
|
||||||
|
},
|
||||||
|
{ status: 200 }
|
||||||
|
);
|
||||||
|
}
|
||||||
@@ -5,7 +5,8 @@ import "./globals.css";
|
|||||||
const inter = Inter({ subsets: ["latin"] });
|
const inter = Inter({ subsets: ["latin"] });
|
||||||
|
|
||||||
export const metadata: Metadata = {
|
export const metadata: Metadata = {
|
||||||
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 IP Revenue", description: "Automate IP protection for creators and agencies. Track licenses, get renewal reminders, and collect payments before your content goes dark."
|
||||||
|
};
|
||||||
|
|
||||||
export default function RootLayout({
|
export default function RootLayout({
|
||||||
children,
|
children,
|
||||||
@@ -14,6 +15,9 @@ export default function RootLayout({
|
|||||||
}) {
|
}) {
|
||||||
return (
|
return (
|
||||||
<html lang="en">
|
<html lang="en">
|
||||||
|
<head>
|
||||||
|
<script async src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
|
||||||
|
</head>
|
||||||
<body className={inter.className}>{children}
|
<body className={inter.className}>{children}
|
||||||
<script
|
<script
|
||||||
dangerouslySetInnerHTML={{
|
dangerouslySetInnerHTML={{
|
||||||
|
|||||||
188
src/app/page.tsx
188
src/app/page.tsx
@@ -8,9 +8,10 @@ import FeatureBento from '@/components/sections/feature/FeatureBento';
|
|||||||
import ProductCardFour from '@/components/sections/product/ProductCardFour';
|
import ProductCardFour from '@/components/sections/product/ProductCardFour';
|
||||||
import SocialProofOne from '@/components/sections/socialProof/SocialProofOne';
|
import SocialProofOne from '@/components/sections/socialProof/SocialProofOne';
|
||||||
import FaqBase from '@/components/sections/faq/FaqBase';
|
import FaqBase from '@/components/sections/faq/FaqBase';
|
||||||
import ContactSplit from '@/components/sections/contact/ContactSplit';
|
|
||||||
import FooterSimple from '@/components/sections/footer/FooterSimple';
|
import FooterSimple from '@/components/sections/footer/FooterSimple';
|
||||||
import { Shield, Zap, Clock, AlertCircle, CheckCircle, Users, Sparkles, HelpCircle } from "lucide-react";
|
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 = [
|
const navItems = [
|
||||||
{ name: "Problem", id: "problem" },
|
{ name: "Problem", id: "problem" },
|
||||||
@@ -25,7 +26,55 @@ 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"
|
"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() {
|
export default function LandingPage() {
|
||||||
|
const [waitlistData, setWaitlistData] = useState<WaitlistFormData[]>([]);
|
||||||
|
const [formStatus, setFormStatus] = useState<'idle' | 'success' | 'error'>('idle');
|
||||||
|
const contactFormRef = useRef<HTMLDivElement>(null);
|
||||||
|
|
||||||
|
const handleWaitlistSubmit = async (formData: WaitlistFormData) => {
|
||||||
|
try {
|
||||||
|
const response = await fetch('/api/waitlist', {
|
||||||
|
method: 'POST',
|
||||||
|
headers: {
|
||||||
|
'Content-Type': 'application/json',
|
||||||
|
},
|
||||||
|
body: JSON.stringify(formData),
|
||||||
|
});
|
||||||
|
|
||||||
|
if (!response.ok) {
|
||||||
|
const errorData = await response.json();
|
||||||
|
throw new Error(errorData.error || 'Failed to submit form');
|
||||||
|
}
|
||||||
|
|
||||||
|
const responseData = await response.json();
|
||||||
|
setWaitlistData([...waitlistData, formData]);
|
||||||
|
setFormStatus('success');
|
||||||
|
setTimeout(() => setFormStatus('idle'), 3000);
|
||||||
|
console.log('Waitlist submission successful:', responseData);
|
||||||
|
} catch (error) {
|
||||||
|
setFormStatus('error');
|
||||||
|
console.error('Error submitting waitlist form:', error);
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
const handleJoinWaitlistClick = () => {
|
||||||
|
if (contactFormRef.current) {
|
||||||
|
contactFormRef.current.scrollIntoView({ behavior: 'smooth' });
|
||||||
|
setTimeout(() => {
|
||||||
|
const emailInput = contactFormRef.current?.querySelector('input[type="email"]') as HTMLInputElement;
|
||||||
|
if (emailInput) {
|
||||||
|
emailInput.focus();
|
||||||
|
}
|
||||||
|
}, 300);
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<ThemeProvider
|
<ThemeProvider
|
||||||
defaultButtonVariant="text-stagger"
|
defaultButtonVariant="text-stagger"
|
||||||
@@ -44,7 +93,7 @@ export default function LandingPage() {
|
|||||||
brandName="Clearance"
|
brandName="Clearance"
|
||||||
navItems={navItems}
|
navItems={navItems}
|
||||||
button={{
|
button={{
|
||||||
text: "Join Waitlist", href: "#contact"
|
text: "Join Waitlist", onClick: handleJoinWaitlistClick
|
||||||
}}
|
}}
|
||||||
/>
|
/>
|
||||||
</div>
|
</div>
|
||||||
@@ -52,7 +101,7 @@ export default function LandingPage() {
|
|||||||
<div id="hero" data-section="hero">
|
<div id="hero" data-section="hero">
|
||||||
<HeroSplitKpi
|
<HeroSplitKpi
|
||||||
title="Stop Losing Money When Your Content License Expires"
|
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"
|
tag="Join 200+ creators protecting their IP"
|
||||||
tagIcon={Shield}
|
tagIcon={Shield}
|
||||||
tagAnimation="blur-reveal"
|
tagAnimation="blur-reveal"
|
||||||
@@ -63,7 +112,7 @@ export default function LandingPage() {
|
|||||||
{ value: "5min", label: "Setup Time" }
|
{ value: "5min", label: "Setup Time" }
|
||||||
]}
|
]}
|
||||||
enableKpiAnimation={true}
|
enableKpiAnimation={true}
|
||||||
buttons={[{ text: "Join Waitlist", href: "#contact" }]}
|
buttons={[{ text: "Join Waitlist", onClick: handleJoinWaitlistClick }]}
|
||||||
imageSrc={heroImage}
|
imageSrc={heroImage}
|
||||||
imageAlt="Clearance fintech dashboard interface"
|
imageAlt="Clearance fintech dashboard interface"
|
||||||
mediaAnimation="slide-up"
|
mediaAnimation="slide-up"
|
||||||
@@ -82,13 +131,13 @@ export default function LandingPage() {
|
|||||||
animationType="slide-up"
|
animationType="slide-up"
|
||||||
metrics={[
|
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"]
|
||||||
}
|
}
|
||||||
]}
|
]}
|
||||||
/>
|
/>
|
||||||
@@ -111,7 +160,8 @@ export default function LandingPage() {
|
|||||||
{ label: "Import licenses", detail: "Sync with Dropbox or manual upload" },
|
{ label: "Import licenses", detail: "Sync with Dropbox or manual upload" },
|
||||||
{ label: "Set details", detail: "Price, duration, and brand info" },
|
{ label: "Set details", detail: "Price, duration, and brand info" },
|
||||||
{ label: "Activate", detail: "Start tracking immediately" }
|
{ 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"
|
title: "License Timer Runs", description: "Real-time countdown to expiration with notifications", bentoComponent: "animated-bar-chart"
|
||||||
@@ -210,22 +260,8 @@ export default function LandingPage() {
|
|||||||
/>
|
/>
|
||||||
</div>
|
</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>
|
||||||
|
|
||||||
<div id="footer" data-section="footer">
|
<div id="footer" data-section="footer">
|
||||||
@@ -260,3 +296,107 @@ export default function LandingPage() {
|
|||||||
</ThemeProvider>
|
</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 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 break-words overflow-hidden text-ellipsis">
|
||||||
|
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 break-words overflow-hidden text-ellipsis">
|
||||||
|
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 break-words overflow-hidden text-ellipsis">
|
||||||
|
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 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 break-words overflow-hidden text-ellipsis">
|
||||||
|
× Something went wrong. Please try again.
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
|
||||||
|
<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>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|||||||
Reference in New Issue
Block a user