243 lines
13 KiB
TypeScript
243 lines
13 KiB
TypeScript
"use client"
|
|
|
|
import NavbarLayoutFloatingOverlay from '@/components/navbar/NavbarLayoutFloatingOverlay/NavbarLayoutFloatingOverlay';
|
|
import HeroSplitDualMedia from '@/components/sections/hero/HeroSplitDualMedia';
|
|
import FeatureBento from '@/components/sections/feature/FeatureBento';
|
|
import MetricSplitMediaAbout from '@/components/sections/about/MetricSplitMediaAbout';
|
|
import TestimonialCardOne from '@/components/sections/testimonial/TestimonialCardOne';
|
|
import PricingCardFive from '@/components/sections/pricing/PricingCardFive';
|
|
import ContactCTA from '@/components/sections/contact/ContactCTA';
|
|
import FooterBaseCard from '@/components/sections/footer/FooterBaseCard';
|
|
import { ThemeProvider } from '@/providers/themeProvider/ThemeProvider';
|
|
import { Award, CheckCircle, Cog, DollarSign, Rocket, Sparkles, Zap } from 'lucide-react';
|
|
|
|
export default function LandingPage() {
|
|
return (
|
|
<ThemeProvider
|
|
defaultButtonVariant="shift-hover"
|
|
defaultTextAnimation="entrance-slide"
|
|
borderRadius="soft"
|
|
contentWidth="mediumLarge"
|
|
sizing="mediumLarge"
|
|
background="circleGradient"
|
|
cardStyle="glass-depth"
|
|
primaryButtonStyle="radial-glow"
|
|
secondaryButtonStyle="radial-glow"
|
|
headingFontWeight="extrabold"
|
|
>
|
|
<div id="nav" data-section="nav">
|
|
<NavbarLayoutFloatingOverlay
|
|
brandName="AIMoney"
|
|
navItems={[
|
|
{ name: "Features", id: "features" },
|
|
{ name: "Guide", id: "guide" },
|
|
{ name: "Pricing", id: "pricing" },
|
|
{ name: "Testimonials", id: "testimonials" },
|
|
{ name: "FAQ", id: "faq" }
|
|
]}
|
|
button={{
|
|
text: "Get Started Free", href: "#contact"
|
|
}}
|
|
/>
|
|
</div>
|
|
|
|
<div id="hero" data-section="hero">
|
|
<HeroSplitDualMedia
|
|
tag="AI-Powered Earnings"
|
|
tagIcon={Sparkles}
|
|
tagAnimation="slide-up"
|
|
title="Make Money Online with AI in Minutes, Not Years"
|
|
description="Join thousands of teenagers and beginners earning real income through AI-powered music creation, content generation, and automation. Start your journey to financial freedom today."
|
|
background={{ variant: "plain" }}
|
|
mediaItems={[
|
|
{
|
|
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AqMNTCJ3tyizEmyXtS1vYAjOIT/a-futuristic-ai-earnings-dashboard-inter-1773315799951-db3fc3f4.png", imageAlt: "AI earnings dashboard showing real-time income tracking"
|
|
},
|
|
{
|
|
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AqMNTCJ3tyizEmyXtS1vYAjOIT/an-upward-trending-growth-chart-visualiz-1773315800579-38ac0fae.png", imageAlt: "Growth chart showing income progression over time"
|
|
}
|
|
]}
|
|
rating={5}
|
|
ratingText="5,000+ students earning"
|
|
buttons={[
|
|
{ text: "Start Free Trial", href: "#contact" },
|
|
{ text: "Watch Demo", href: "#" }
|
|
]}
|
|
buttonAnimation="slide-up"
|
|
mediaAnimation="slide-up"
|
|
/>
|
|
</div>
|
|
|
|
<div id="features" data-section="features">
|
|
<FeatureBento
|
|
title="AI Methods to Earn Money"
|
|
description="Three proven AI strategies that teenagers and beginners are using to generate consistent income online"
|
|
tag="Methods"
|
|
tagIcon={Zap}
|
|
tagAnimation="slide-up"
|
|
features={[
|
|
{
|
|
title: "AI Music Creation", description: "Generate royalty-free music tracks instantly and monetize on streaming platforms. Earn $100-500 per track.", bentoComponent: "animated-bar-chart"
|
|
},
|
|
{
|
|
title: "Content Generation", description: "Create viral social media content, YouTube shorts, and TikTok videos using AI. Monetize through ads and sponsorships.", bentoComponent: "globe"
|
|
},
|
|
{
|
|
title: "Automation Services", description: "Build automated workflows for businesses and sell your services. Passive income from recurring clients.", bentoComponent: "marquee", centerIcon: Cog,
|
|
variant: "text", texts: ["Email Automation", "Lead Generation", "Social Media Posting", "Data Processing", "Customer Support Bots"]
|
|
}
|
|
]}
|
|
animationType="slide-up"
|
|
textboxLayout="default"
|
|
useInvertedBackground={false}
|
|
/>
|
|
</div>
|
|
|
|
<div id="guide" data-section="guide">
|
|
<MetricSplitMediaAbout
|
|
tag="Step-by-Step"
|
|
tagIcon={CheckCircle}
|
|
tagAnimation="slide-up"
|
|
title="Your Path to Your First $100 in AI Earnings"
|
|
description="Follow our proven 4-step system that has helped thousands of beginners start earning within their first week. From setup to first payment—we guide you every step."
|
|
metrics={[
|
|
{ value: "7 days", title: "Time to First Earnings" },
|
|
{ value: "100%", title: "Beginner-Friendly Process" }
|
|
]}
|
|
imageSrc="https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AqMNTCJ3tyizEmyXtS1vYAjOIT/a-step-by-step-process-flow-visualizatio-1773316045711-e89e0c24.png"
|
|
imageAlt="Step-by-step process visualization for beginners"
|
|
mediaAnimation="slide-up"
|
|
metricsAnimation="slide-up"
|
|
useInvertedBackground={false}
|
|
/>
|
|
</div>
|
|
|
|
<div id="testimonials" data-section="testimonials">
|
|
<TestimonialCardOne
|
|
title="Real Stories From Our Community"
|
|
description="See how teenagers and beginners are transforming their lives with AI-powered income streams"
|
|
tag="Success Stories"
|
|
tagIcon={Award}
|
|
tagAnimation="slide-up"
|
|
testimonials={[
|
|
{
|
|
id: "1", name: "Sarah Chen", role: "High School Student", company: "Made $2,000/month", rating: 5,
|
|
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AqMNTCJ3tyizEmyXtS1vYAjOIT/portrait-photograph-of-a-smiling-teenage-1773315798940-ea6e61ec.png", imageAlt: "Portrait of Sarah Chen"
|
|
},
|
|
{
|
|
id: "2", name: "Marcus Johnson", role: "College Freshman", company: "Earning While Studying", rating: 5,
|
|
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AqMNTCJ3tyizEmyXtS1vYAjOIT/portrait-photograph-of-a-smiling-young-m-1773315800157-095e48a4.png", imageAlt: "Portrait of Marcus Johnson"
|
|
},
|
|
{
|
|
id: "3", name: "Emma Rodriguez", role: "Part-Time Creator", company: "Quit Her Job", rating: 5,
|
|
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AqMNTCJ3tyizEmyXtS1vYAjOIT/portrait-photograph-of-a-smiling-young-w-1773315800996-d6b17d39.png", imageAlt: "Portrait of Emma Rodriguez"
|
|
},
|
|
{
|
|
id: "4", name: "Alex Thompson", role: "Beginner Developer", company: "Now Full-Time", rating: 5,
|
|
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AqMNTCJ3tyizEmyXtS1vYAjOIT/portrait-photograph-of-young-man-with-fr-1773315798867-7fe9d668.png", imageAlt: "Portrait of Alex Thompson"
|
|
},
|
|
{
|
|
id: "5", name: "Jessica Lee", role: "Digital Creator", company: "$5,000/month", rating: 5,
|
|
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AqMNTCJ3tyizEmyXtS1vYAjOIT/portrait-photograph-of-young-woman-with--1773315799706-d9b54c36.png", imageAlt: "Portrait of Jessica Lee"
|
|
},
|
|
{
|
|
id: "6", name: "David Kim", role: "Automation Expert", company: "6-Figure Income", rating: 5,
|
|
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AqMNTCJ3tyizEmyXtS1vYAjOIT/portrait-photograph-of-successful-lookin-1773315798919-5bdf2cb3.png", imageAlt: "Portrait of David Kim"
|
|
}
|
|
]}
|
|
gridVariant="uniform-all-items-equal"
|
|
animationType="slide-up"
|
|
textboxLayout="default"
|
|
useInvertedBackground={false}
|
|
/>
|
|
</div>
|
|
|
|
<div id="pricing" data-section="pricing">
|
|
<PricingCardFive
|
|
title="Simple, Transparent Pricing"
|
|
description="Choose the plan that fits your goals. All plans include lifetime access to updates and community support."
|
|
tag="Pricing"
|
|
tagIcon={DollarSign}
|
|
tagAnimation="slide-up"
|
|
plans={[
|
|
{
|
|
id: "starter", tag: "Starter Plan", tagIcon: Zap,
|
|
price: "Free", period: "forever", description: "Perfect for testing the platform and getting started", button: { text: "Get Started", href: "#contact" },
|
|
featuresTitle: "What's Included:", features: ["Access to AI music generator", "5 tracks per month", "Basic tutorials", "Community forum access"]
|
|
},
|
|
{
|
|
id: "pro", tag: "Pro Plan", tagIcon: Sparkles,
|
|
price: "$29", period: "/month", description: "For serious earners ready to scale their income", button: { text: "Start 7-Day Trial", href: "#contact" },
|
|
featuresTitle: "Everything in Starter, plus:", features: ["Unlimited AI music generation", "Content creation tools", "Advanced automation templates", "1-on-1 coaching calls", "Priority support", "Monetization guide"]
|
|
},
|
|
{
|
|
id: "elite", tag: "Elite Plan", price: "$99", period: "/month", description: "For entrepreneurs building AI-powered businesses", button: { text: "Request Demo", href: "#contact" },
|
|
featuresTitle: "Everything in Pro, plus:", features: ["White-label platform", "Custom automation workflows", "Team collaboration features", "API access", "Dedicated account manager", "Advanced analytics dashboard", "Done-for-you service setup"]
|
|
}
|
|
]}
|
|
animationType="slide-up"
|
|
textboxLayout="default"
|
|
useInvertedBackground={false}
|
|
/>
|
|
</div>
|
|
|
|
<div id="contact" data-section="contact">
|
|
<ContactCTA
|
|
tag="Ready to Earn?"
|
|
tagIcon={Rocket}
|
|
tagAnimation="slide-up"
|
|
title="Start Your AI Earnings Journey Today"
|
|
description="Join our community of successful AI creators and automation entrepreneurs. Get instant access to our complete platform, tutorials, and support community."
|
|
buttons={[
|
|
{ text: "Start Free Today", href: "https://example.com/signup" },
|
|
{ text: "Schedule a Call", href: "https://example.com/calendar" }
|
|
]}
|
|
buttonAnimation="slide-up"
|
|
background={{ variant: "plain" }}
|
|
useInvertedBackground={false}
|
|
/>
|
|
</div>
|
|
|
|
<div id="footer" data-section="footer">
|
|
<FooterBaseCard
|
|
logoText="AIMoney"
|
|
columns={[
|
|
{
|
|
title: "Product", items: [
|
|
{ label: "Features", href: "#features" },
|
|
{ label: "Pricing", href: "#pricing" },
|
|
{ label: "How It Works", href: "#guide" },
|
|
{ label: "API Docs", href: "#" }
|
|
]
|
|
},
|
|
{
|
|
title: "Learn", items: [
|
|
{ label: "Tutorials", href: "#" },
|
|
{ label: "Blog", href: "#" },
|
|
{ label: "Community", href: "#" },
|
|
{ label: "Success Stories", href: "#testimonials" }
|
|
]
|
|
},
|
|
{
|
|
title: "Company", items: [
|
|
{ label: "About Us", href: "#" },
|
|
{ label: "Contact", href: "#contact" },
|
|
{ label: "Careers", href: "#" },
|
|
{ label: "Newsletter", href: "#" }
|
|
]
|
|
},
|
|
{
|
|
title: "Legal", items: [
|
|
{ label: "Privacy Policy", href: "#" },
|
|
{ label: "Terms of Service", href: "#" },
|
|
{ label: "Cookie Policy", href: "#" },
|
|
{ label: "Disclaimer", href: "#" }
|
|
]
|
|
}
|
|
]}
|
|
copyrightText="© 2025 AIMoney. All rights reserved. Empowering teens and beginners to earn with AI."
|
|
/>
|
|
</div>
|
|
</ThemeProvider>
|
|
);
|
|
} |