295 lines
16 KiB
TypeScript
295 lines
16 KiB
TypeScript
"use client";
|
|
|
|
import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
|
|
import NavbarLayoutFloatingInline from "@/components/navbar/NavbarLayoutFloatingInline";
|
|
import HeroCentered from "@/components/sections/hero/HeroCentered";
|
|
import FeatureBento from "@/components/sections/feature/FeatureBento";
|
|
import HeroBillboardScroll from "@/components/sections/hero/HeroBillboardScroll";
|
|
import TestimonialCardFifteen from "@/components/sections/testimonial/TestimonialCardFifteen";
|
|
import PricingCardEight from "@/components/sections/pricing/PricingCardEight";
|
|
import ContactCenter from "@/components/sections/contact/ContactCenter";
|
|
import FooterBaseReveal from "@/components/sections/footer/FooterBaseReveal";
|
|
import BlogCardTwo from "@/components/sections/blog/BlogCardTwo";
|
|
import {
|
|
Mail,
|
|
MessageCircle,
|
|
Zap,
|
|
Clock,
|
|
CheckCircle,
|
|
DollarSign,
|
|
Bell,
|
|
AlertCircle,
|
|
Smartphone,
|
|
Lock,
|
|
BarChart3,
|
|
Share2,
|
|
Users,
|
|
Sparkles,
|
|
} from "lucide-react";
|
|
|
|
const handleNewsletterSignup = (email: string) => {
|
|
console.log("Newsletter signup:", email);
|
|
};
|
|
|
|
export default function LandingPage() {
|
|
return (
|
|
<ThemeProvider
|
|
defaultButtonVariant="hover-bubble"
|
|
defaultTextAnimation="entrance-slide"
|
|
borderRadius="pill"
|
|
contentWidth="medium"
|
|
sizing="medium"
|
|
background="none"
|
|
cardStyle="gradient-bordered"
|
|
primaryButtonStyle="primary-glow"
|
|
secondaryButtonStyle="layered"
|
|
headingFontWeight="medium"
|
|
>
|
|
<div id="nav" data-section="nav">
|
|
<NavbarLayoutFloatingInline
|
|
brandName="CreatorFlow"
|
|
navItems={[
|
|
{ name: "Features", id: "features" },
|
|
{ name: "Pricing", id: "pricing" },
|
|
{ name: "Testimonials", id: "testimonials" },
|
|
{ name: "Docs", id: "contact" },
|
|
]}
|
|
button={{
|
|
text: "Get Started Free", href: "https://app.creatorflow.io/signup"
|
|
}}
|
|
animateOnLoad={true}
|
|
/>
|
|
</div>
|
|
|
|
<div id="hero" data-section="hero">
|
|
<HeroCentered
|
|
title="Stop Chasing Collabs in DMs"
|
|
description="The all-in-one dashboard for teen creators to manage collaboration requests, track approvals, and never chase payment again. AI-powered parsing, one-click approvals, and smart reminders."
|
|
background={{ variant: "sparkles-gradient" }}
|
|
avatars={[
|
|
{
|
|
src: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AYfbtCZ5l0aNcatN56DdYclF2R/portrait-photo-of-a-15-16-year-old-conte-1772775425499-81ffd161.png", alt: "Teen creator Alex"
|
|
},
|
|
{
|
|
src: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AYfbtCZ5l0aNcatN56DdYclF2R/portrait-of-a-young-teen-creator-confide-1772775427139-8b25320f.png", alt: "Teen creator Jamie"
|
|
},
|
|
{
|
|
src: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AYfbtCZ5l0aNcatN56DdYclF2R/young-teen-creator-portrait-with-energet-1772775425917-e85c9147.png", alt: "Teen creator Casey"
|
|
},
|
|
]}
|
|
avatarText="Trusted by 500+ teen creators"
|
|
buttons={[
|
|
{ text: "Start Free Today", href: "https://app.creatorflow.io/signup" },
|
|
{ text: "See Demo", href: "#features" },
|
|
]}
|
|
buttonAnimation="slide-up"
|
|
ariaLabel="Hero section for CreatorFlow"
|
|
/>
|
|
</div>
|
|
|
|
<div id="features" data-section="features">
|
|
<FeatureBento
|
|
title="Everything You Need to Manage Collabs"
|
|
description="From DM chaos to organized pipeline. Automate the busywork so you can focus on creating."
|
|
tag="Core Features"
|
|
animationType="slide-up"
|
|
textboxLayout="default"
|
|
useInvertedBackground={false}
|
|
carouselMode="buttons"
|
|
features={[
|
|
{
|
|
title: "AI DM Parser", description: "Automatically scans your Discord, Instagram, and email for collaboration requests. One-tap card creation.", bentoComponent: "icon-info-cards", items: [
|
|
{ icon: Mail, label: "Emails", value: "Auto-scanned" },
|
|
{ icon: MessageCircle, label: "DMs", value: "Parsed instantly" },
|
|
{ icon: Zap, label: "Keywords", value: "AI-detected" },
|
|
],
|
|
},
|
|
{
|
|
title: "Smart Reminders", description: "Push notifications remind you when payments are due or collabs need follow-up. Never chase again.", bentoComponent: "orbiting-icons", centerIcon: Bell,
|
|
items: [
|
|
{ icon: Clock, ring: 1, duration: 8 },
|
|
{ icon: AlertCircle, ring: 2, duration: 10 },
|
|
{ icon: CheckCircle, ring: 3, duration: 12 },
|
|
],
|
|
},
|
|
{
|
|
title: "One-Click Approvals", description: "Generate contract links and send approval confirmations instantly. No back-and-forth emails.", bentoComponent: "reveal-icon", icon: CheckCircle,
|
|
},
|
|
{
|
|
title: "Approval Pipeline", description: "Drag-and-drop your collabs through Review → Approved → Paid stages. Real-time pipeline visibility.", bentoComponent: "3d-task-list", items: [
|
|
{ icon: Clock, label: "Pending Review", time: "2 requests" },
|
|
{ icon: CheckCircle, label: "Approved", time: "5 approved" },
|
|
{ icon: DollarSign, label: "Payout Due", time: "3 pending" },
|
|
],
|
|
},
|
|
]}
|
|
/>
|
|
</div>
|
|
|
|
<div id="advanced-features" data-section="advanced-features">
|
|
<HeroBillboardScroll
|
|
title="Built for Teen Creators"
|
|
description="Simple enough for solopreneurs. Powerful enough for growing channels. Experience smooth scroll-triggered animations as you explore what makes CreatorFlow unique."
|
|
tag="Why CreatorFlow"
|
|
tagAnimation="slide-up"
|
|
buttonAnimation="slide-up"
|
|
background={{ variant: "canvas-reveal" }}
|
|
imageSrc="https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AYfbtCZ5l0aNcatN56DdYclF2R/portrait-photo-of-a-15-16-year-old-conte-1772775425499-81ffd161.png?_wi=1"
|
|
imageAlt="CreatorFlow Dashboard Preview"
|
|
buttons={[
|
|
{ text: "Explore Features", href: "#features" },
|
|
{ text: "Get Started", href: "https://app.creatorflow.io/signup" },
|
|
]}
|
|
/>
|
|
</div>
|
|
|
|
<div id="blog" data-section="blog">
|
|
<BlogCardTwo
|
|
title="Creator Insights & Stories"
|
|
description="Learn from teen creators who are crushing it with CreatorFlow. Get tips, tricks, and insider perspectives on managing collaborations."
|
|
tag="Latest Articles"
|
|
tagAnimation="slide-up"
|
|
buttonAnimation="slide-up"
|
|
animationType="slide-up"
|
|
textboxLayout="default"
|
|
useInvertedBackground={false}
|
|
carouselMode="buttons"
|
|
blogs={[
|
|
{
|
|
id: "1", category: ["Creator Story", "Tips"],
|
|
title: "How Alex Chen Turned Chaos Into Cash", excerpt: "From 3 hours of DM chasing per week to 15 minutes of admin work. See how one TikTok creator saved $2k in missed payments.", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AYfbtCZ5l0aNcatN56DdYclF2R/portrait-photo-of-a-15-16-year-old-conte-1772775425499-81ffd161.png?_wi=2", imageAlt: "Alex Chen, TikTok Creator", authorName: "Alex Chen", authorAvatar: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AYfbtCZ5l0aNcatN56DdYclF2R/portrait-photo-of-a-15-16-year-old-conte-1772775425499-81ffd161.png", date: "15 Jan 2025"
|
|
},
|
|
{
|
|
id: "2", category: ["Guide", "Collaboration"],
|
|
title: "5 Red Flags to Spot in Shady Collab Offers", excerpt: "Not all brand deals are created equal. Learn how to identify legitimate collaboration requests and protect your personal brand.", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AYfbtCZ5l0aNcatN56DdYclF2R/portrait-of-a-young-teen-creator-confide-1772775427139-8b25320f.png", imageAlt: "Red flags in collaborations", authorName: "Jamie Torres", authorAvatar: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AYfbtCZ5l0aNcatN56DdYclF2R/portrait-of-a-young-teen-creator-confide-1772775427139-8b25320f.png", date: "12 Jan 2025"
|
|
},
|
|
{
|
|
id: "3", category: ["Strategy", "Growth"],
|
|
title: "Scaling Your Collab Pipeline: From 5 to 50 Requests", excerpt: "What changes when you go from managing a handful of collabs to juggling dozens? A deep dive into structuring your workflow for growth.", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AYfbtCZ5l0aNcatN56DdYclF2R/young-teen-creator-portrait-with-energet-1772775425917-e85c9147.png", imageAlt: "Scaling collaborations", authorName: "Casey Kim", authorAvatar: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AYfbtCZ5l0aNcatN56DdYclF2R/young-teen-creator-portrait-with-energet-1772775425917-e85c9147.png", date: "10 Jan 2025"
|
|
},
|
|
{
|
|
id: "4", category: ["Payment", "Legal"],
|
|
title: "Getting Paid on Time: Contracts 101 for Teen Creators", excerpt: "Why you need a contract template, what should be in it, and how CreatorFlow's auto-link system keeps everyone on the same page.", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AYfbtCZ5l0aNcatN56DdYclF2R/teen-creator-portrait-showing-diverse-re-1772775425799-73c2858b.png", imageAlt: "Creator contracts", authorName: "Morgan Lee", authorAvatar: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AYfbtCZ5l0aNcatN56DdYclF2R/teen-creator-portrait-showing-diverse-re-1772775425799-73c2858b.png", date: "8 Jan 2025"
|
|
},
|
|
]}
|
|
/>
|
|
</div>
|
|
|
|
<div id="testimonials" data-section="testimonials">
|
|
<TestimonialCardFifteen
|
|
testimonial="I was spending 3 hours a week chasing DMs for collab confirmations and payments. CreatorFlow cut that down to 15 minutes. The auto-reminder for payments alone saved me from losing $2k in September."
|
|
rating={5}
|
|
author="Alex Chen, 15 — TikTok Editor (2.3M followers)"
|
|
avatars={[
|
|
{
|
|
src: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AYfbtCZ5l0aNcatN56DdYclF2R/portrait-photo-of-a-15-16-year-old-conte-1772775425499-81ffd161.png", alt: "Alex Chen"
|
|
},
|
|
{
|
|
src: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AYfbtCZ5l0aNcatN56DdYclF2R/portrait-of-a-young-teen-creator-confide-1772775427139-8b25320f.png", alt: "Jamie Torres"
|
|
},
|
|
{
|
|
src: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AYfbtCZ5l0aNcatN56DdYclF2R/young-teen-creator-portrait-with-energet-1772775425917-e85c9147.png", alt: "Casey Kim"
|
|
},
|
|
{
|
|
src: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AYfbtCZ5l0aNcatN56DdYclF2R/teen-creator-portrait-showing-diverse-re-1772775425799-73c2858b.png", alt: "Morgan Lee"
|
|
},
|
|
]}
|
|
ratingAnimation="slide-up"
|
|
avatarsAnimation="slide-up"
|
|
useInvertedBackground={false}
|
|
/>
|
|
</div>
|
|
|
|
<div id="pricing" data-section="pricing">
|
|
<PricingCardEight
|
|
title="Simple, Creator-Friendly Pricing"
|
|
description="Start free. Upgrade anytime. No surprise fees."
|
|
tag="Pricing"
|
|
animationType="slide-up"
|
|
textboxLayout="default"
|
|
useInvertedBackground={true}
|
|
plans={[
|
|
{
|
|
id: "free", badge: "Perfect to Start", badgeIcon: Sparkles,
|
|
price: "Free", subtitle: "Everything a solo creator needs", buttons: [
|
|
{ text: "Start Free", href: "https://app.creatorflow.io/signup" },
|
|
],
|
|
features: [
|
|
"Up to 5 active collaborations", "Email + Discord DM parsing", "Basic kanban board", "One-click approval links", "Manual payment tracking", "Mobile app access"
|
|
],
|
|
},
|
|
{
|
|
id: "pro", badge: "Most Popular", badgeIcon: Zap,
|
|
price: "$2/mo", subtitle: "For growing creators juggling multiple collabs", buttons: [
|
|
{
|
|
text: "Start Free Trial", href: "https://app.creatorflow.io/signup?plan=pro"
|
|
},
|
|
],
|
|
features: [
|
|
"Unlimited collaborations", "Instagram + Telegram + Slack parsing", "AI-powered collab suggestions", "Automated payment reminders", "Google Sheets export", "Team member invites (up to 3)", "Priority support"
|
|
],
|
|
},
|
|
{
|
|
id: "team", badge: "For Studios", badgeIcon: Users,
|
|
price: "$8/mo", subtitle: "Manage entire creator networks", buttons: [
|
|
{
|
|
text: "Request Demo", href: "https://app.creatorflow.io/contact?plan=team"
|
|
},
|
|
],
|
|
features: [
|
|
"Everything in Pro", "Unlimited team members", "Advanced analytics dashboard", "Custom approval workflows", "Payout automation (Stripe/PayPal)", "API access for integrations", "Dedicated account manager"
|
|
],
|
|
},
|
|
]}
|
|
/>
|
|
</div>
|
|
|
|
<div id="contact" data-section="contact">
|
|
<ContactCenter
|
|
tag="Stay Updated"
|
|
title="Join the Creator Community"
|
|
description="Get weekly tips on managing collabs, exclusive creator interviews, and early access to new CreatorFlow features."
|
|
background={{ variant: "rotated-rays-animated-grid" }}
|
|
useInvertedBackground={true}
|
|
inputPlaceholder="your@email.com"
|
|
buttonText="Notify Me"
|
|
termsText="We'll send you weekly creator tips and updates. Unsubscribe anytime. No spam, promise."
|
|
onSubmit={handleNewsletterSignup}
|
|
/>
|
|
</div>
|
|
|
|
<div id="footer" data-section="footer">
|
|
<FooterBaseReveal
|
|
columns={[
|
|
{
|
|
title: "Product", items: [
|
|
{ label: "Features", href: "#features" },
|
|
{ label: "Pricing", href: "#pricing" },
|
|
{ label: "Roadmap", href: "#" },
|
|
{ label: "API Docs", href: "#" },
|
|
],
|
|
},
|
|
{
|
|
title: "Company", items: [
|
|
{ label: "About", href: "#" },
|
|
{ label: "Blog", href: "#blog" },
|
|
{ label: "Careers", href: "#" },
|
|
{ label: "Contact", href: "#" },
|
|
],
|
|
},
|
|
{
|
|
title: "Legal", items: [
|
|
{ label: "Privacy", href: "#" },
|
|
{ label: "Terms", href: "#" },
|
|
{ label: "DPA", href: "#" },
|
|
{ label: "Cookies", href: "#" },
|
|
],
|
|
},
|
|
]}
|
|
copyrightText="© 2025 CreatorFlow. Built by creators, for creators."
|
|
/>
|
|
</div>
|
|
</ThemeProvider>
|
|
);
|
|
}
|