Merge version_1 into main #1
483
src/app/page.tsx
483
src/app/page.tsx
@@ -28,330 +28,183 @@ export default function LandingPage() {
|
||||
headingFontWeight="semibold"
|
||||
>
|
||||
<ReactLenis root>
|
||||
<div id="nav" data-section="nav">
|
||||
<NavbarStyleCentered
|
||||
navItems={[
|
||||
{
|
||||
name: "Tasks",
|
||||
id: "tasks",
|
||||
},
|
||||
{
|
||||
name: "Stats",
|
||||
id: "stats",
|
||||
},
|
||||
{
|
||||
name: "Upgrade",
|
||||
id: "pricing",
|
||||
},
|
||||
{
|
||||
name: "Support",
|
||||
id: "contact",
|
||||
},
|
||||
]}
|
||||
brandName="TaskFlow AI"
|
||||
/>
|
||||
</div>
|
||||
<div id="nav" data-section="nav">
|
||||
<NavbarStyleCentered
|
||||
navItems={[
|
||||
{ name: "Tasks", id: "tasks" },
|
||||
{ name: "Stats", id: "stats" },
|
||||
{ name: "Upgrade", id: "pricing" },
|
||||
{ name: "Support", id: "contact" },
|
||||
]}
|
||||
brandName="TaskFlow AI"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="hero" data-section="hero">
|
||||
<HeroSplitDualMedia
|
||||
background={{
|
||||
variant: "plain",
|
||||
}}
|
||||
title="Your Workflow, Optimized."
|
||||
description="TaskFlow AI helps you organize tasks, track productivity, and schedule your day with intelligent AI assistance."
|
||||
tag="Productivity Reimagined"
|
||||
mediaItems={[
|
||||
{
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/close-up-engineer-using-tablet-sustainable-data-center-implementing-green-technologies-it_482257-132419.jpg",
|
||||
imageAlt: "Minimalist task management interface dark mode",
|
||||
},
|
||||
{
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/connection-digital-device-working-concept_53876-30346.jpg",
|
||||
imageAlt: "Checklist app interface dark mode",
|
||||
},
|
||||
{
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/high-angle-hands-holding-smartphone_23-2150671595.jpg",
|
||||
imageAlt: "High angle hands holding smartphone",
|
||||
},
|
||||
{
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/smartphone-displaying-2fa-confirmation-secure-access_23-2152029086.jpg",
|
||||
imageAlt: "Smartphone displaying 2fa confirmation for secure access",
|
||||
},
|
||||
{
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/representation-user-experience-interface-design_23-2150169854.jpg",
|
||||
imageAlt: "Representation of user experience and interface design",
|
||||
},
|
||||
]}
|
||||
mediaAnimation="blur-reveal"
|
||||
rating={5}
|
||||
ratingText="Loved by 10,000+ professionals"
|
||||
tagIcon={Sparkles}
|
||||
buttons={[
|
||||
{
|
||||
text: "Get Started",
|
||||
href: "#",
|
||||
},
|
||||
{
|
||||
text: "View Demo",
|
||||
href: "#",
|
||||
},
|
||||
]}
|
||||
/>
|
||||
</div>
|
||||
<div id="hero" data-section="hero">
|
||||
<HeroSplitDualMedia
|
||||
background={{ variant: "plain" }}
|
||||
title="Your Workflow, Optimized."
|
||||
description="TaskFlow AI helps you organize tasks, track productivity, and schedule your day with intelligent AI assistance."
|
||||
tag="Productivity Reimagined"
|
||||
mediaItems={[
|
||||
{
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/close-up-engineer-using-tablet-sustainable-data-center-implementing-green-technologies-it_482257-132419.jpg", imageAlt: "Minimalist task management interface dark mode"},
|
||||
{
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/connection-digital-device-working-concept_53876-30346.jpg", imageAlt: "Checklist app interface dark mode"}
|
||||
]}
|
||||
mediaAnimation="blur-reveal"
|
||||
rating={5}
|
||||
ratingText="Loved by 10,000+ professionals"
|
||||
tagIcon={Sparkles}
|
||||
buttons={[
|
||||
{ text: "Get Started", href: "#" },
|
||||
{ text: "View Demo", href: "#" },
|
||||
]}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="tasks" data-section="tasks">
|
||||
<FeatureCardSeven
|
||||
animationType="slide-up"
|
||||
textboxLayout="split"
|
||||
useInvertedBackground={true}
|
||||
features={[
|
||||
{
|
||||
title: "Simple Entry",
|
||||
description: "Quickly add new tasks to your list without friction.",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/topview-notebook-mobile-phone-email-table-concept_53876-30091.jpg",
|
||||
imageAlt: "Checklist app interface dark mode",
|
||||
},
|
||||
{
|
||||
title: "Done in a Click",
|
||||
description: "Mark tasks as complete and see your progress instantly.",
|
||||
imageSrc: "http://img.b2bpic.net/free-vector/list-pack_23-2147944043.jpg",
|
||||
imageAlt: "Checklist app interface dark mode",
|
||||
},
|
||||
{
|
||||
title: "Effortless Clean",
|
||||
description: "Keep your focus sharp by removing outdated or unnecessary items.",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/high-angle-hands-holding-smartphone_23-2150671597.jpg",
|
||||
imageAlt: "Checklist app interface dark mode",
|
||||
},
|
||||
]}
|
||||
title="Master Your Daily Tasks"
|
||||
description="A powerful, intuitive task manager that puts you in control. Add, complete, and organize with ease."
|
||||
/>
|
||||
</div>
|
||||
<div id="tasks" data-section="tasks">
|
||||
<FeatureCardSeven
|
||||
animationType="slide-up"
|
||||
textboxLayout="split"
|
||||
useInvertedBackground={true}
|
||||
features={[
|
||||
{
|
||||
title: "Simple Entry", description: "Quickly add new tasks to your list without friction.", imageSrc: "http://img.b2bpic.net/free-photo/topview-notebook-mobile-phone-email-table-concept_53876-30091.jpg", imageAlt: "Checklist app interface dark mode"},
|
||||
{
|
||||
title: "Done in a Click", description: "Mark tasks as complete and see your progress instantly.", imageSrc: "http://img.b2bpic.net/free-vector/list-pack_23-2147944043.jpg", imageAlt: "Checklist app interface dark mode"},
|
||||
{
|
||||
title: "Effortless Clean", description: "Keep your focus sharp by removing outdated or unnecessary items.", imageSrc: "http://img.b2bpic.net/free-photo/high-angle-hands-holding-smartphone_23-2150671597.jpg", imageAlt: "Checklist app interface dark mode"},
|
||||
]}
|
||||
title="Master Your Daily Tasks"
|
||||
description="A powerful, intuitive task manager that puts you in control. Add, complete, and organize with ease."
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="stats" data-section="stats">
|
||||
<MetricCardTwo
|
||||
textboxLayout="default"
|
||||
gridVariant="bento-grid"
|
||||
useInvertedBackground={false}
|
||||
metrics={[
|
||||
{
|
||||
id: "m1",
|
||||
value: "1,240",
|
||||
description: "Total Tasks Completed",
|
||||
},
|
||||
{
|
||||
id: "m2",
|
||||
value: "94%",
|
||||
description: "Success Rate",
|
||||
},
|
||||
{
|
||||
id: "m3",
|
||||
value: "24/7",
|
||||
description: "Peak Focus Hours",
|
||||
},
|
||||
]}
|
||||
title="Track Your Growth"
|
||||
description="See your productivity journey in real-time. Insights that help you achieve more."
|
||||
/>
|
||||
</div>
|
||||
<div id="stats" data-section="stats">
|
||||
<MetricCardTwo
|
||||
textboxLayout="default"
|
||||
gridVariant="bento-grid"
|
||||
useInvertedBackground={false}
|
||||
animationType="slide-up"
|
||||
metrics={[
|
||||
{ id: "m1", value: "1,240", description: "Total Tasks Completed" },
|
||||
{ id: "m2", value: "94%", description: "Success Rate" },
|
||||
{ id: "m3", value: "24/7", description: "Peak Focus Hours" },
|
||||
]}
|
||||
title="Track Your Growth"
|
||||
description="See your productivity journey in real-time. Insights that help you achieve more."
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="ai-features" data-section="ai-features">
|
||||
<FeatureCardSeven
|
||||
textboxLayout="split-description"
|
||||
useInvertedBackground={true}
|
||||
features={[
|
||||
{
|
||||
title: "Smart Scheduling",
|
||||
description: "Auto-generate your daily schedule with precision.",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/business-investor-analyzing-stock-market-trend-monitor-trading-capital-profit-exchange-investment-young-broker-investing-funds-using-financial-forex-market-sales-close-up-handheld-shot_482257-40948.jpg",
|
||||
imageAlt: "Productivity data visualization dashboard",
|
||||
},
|
||||
{
|
||||
title: "Priority Awareness",
|
||||
description: "Let AI decide what to do first, based on your priorities.",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/customer-marketing-sales-dashboard-graphics-concept_53876-133831.jpg",
|
||||
imageAlt: "Productivity data visualization dashboard",
|
||||
},
|
||||
{
|
||||
title: "Adaptive Flow",
|
||||
description: "The schedule updates in real-time as your day evolves.",
|
||||
imageSrc: "http://img.b2bpic.net/free-vector/admin-dashboard-panel-with-gradient-style_23-2147870229.jpg",
|
||||
imageAlt: "Productivity data visualization dashboard",
|
||||
},
|
||||
]}
|
||||
title="AI-Powered Scheduling"
|
||||
description="Upgrade to Pro and let AI schedule your day based on your tasks, energy levels, and deadlines."
|
||||
/>
|
||||
</div>
|
||||
<div id="ai-features" data-section="ai-features">
|
||||
<FeatureCardSeven
|
||||
animationType="slide-up"
|
||||
textboxLayout="split-description"
|
||||
useInvertedBackground={true}
|
||||
features={[
|
||||
{
|
||||
title: "Smart Scheduling", description: "Auto-generate your daily schedule with precision.", imageSrc: "http://img.b2bpic.net/free-photo/business-investor-analyzing-stock-market-trend-monitor-trading-capital-profit-exchange-investment-young-broker-investing-funds-using-financial-forex-market-sales-close-up-handheld-shot_482257-40948.jpg", imageAlt: "Productivity data visualization dashboard"},
|
||||
{
|
||||
title: "Priority Awareness", description: "Let AI decide what to do first, based on your priorities.", imageSrc: "http://img.b2bpic.net/free-photo/customer-marketing-sales-dashboard-graphics-concept_53876-133831.jpg", imageAlt: "Productivity data visualization dashboard"},
|
||||
{
|
||||
title: "Adaptive Flow", description: "The schedule updates in real-time as your day evolves.", imageSrc: "http://img.b2bpic.net/free-vector/admin-dashboard-panel-with-gradient-style_23-2147870229.jpg", imageAlt: "Productivity data visualization dashboard"},
|
||||
]}
|
||||
title="AI-Powered Scheduling"
|
||||
description="Upgrade to Pro and let AI schedule your day based on your tasks, energy levels, and deadlines."
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="pricing" data-section="pricing">
|
||||
<PricingCardTwo
|
||||
animationType="slide-up"
|
||||
textboxLayout="default"
|
||||
useInvertedBackground={false}
|
||||
plans={[
|
||||
{
|
||||
id: "free",
|
||||
badge: "Starter",
|
||||
price: "$0",
|
||||
subtitle: "Get organized for free",
|
||||
features: [
|
||||
"Basic Task Manager",
|
||||
"Productivity Stats",
|
||||
"Daily Reminders",
|
||||
],
|
||||
buttons: [
|
||||
{
|
||||
text: "Get Started",
|
||||
href: "#",
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
id: "pro",
|
||||
badge: "Pro",
|
||||
price: "$7.90",
|
||||
subtitle: "Unlock full AI power",
|
||||
features: [
|
||||
"AI Smart Scheduler",
|
||||
"Advanced Analytics",
|
||||
"Personal AI Coach",
|
||||
"Priority Support",
|
||||
],
|
||||
buttons: [
|
||||
{
|
||||
text: "Upgrade Now",
|
||||
href: "#",
|
||||
},
|
||||
],
|
||||
},
|
||||
]}
|
||||
title="Choose Your Plan"
|
||||
description="Start for free, or unlock premium features to optimize your productivity."
|
||||
/>
|
||||
</div>
|
||||
<div id="pricing" data-section="pricing">
|
||||
<PricingCardTwo
|
||||
animationType="slide-up"
|
||||
textboxLayout="default"
|
||||
useInvertedBackground={false}
|
||||
plans={[
|
||||
{
|
||||
id: "free", badge: "Starter", price: "$0", subtitle: "Get organized for free", features: ["Basic Task Manager", "Productivity Stats", "Daily Reminders"],
|
||||
buttons: [{ text: "Get Started", href: "#" }],
|
||||
},
|
||||
{
|
||||
id: "pro", badge: "Pro", price: "$7.90", subtitle: "Unlock full AI power", features: ["AI Smart Scheduler", "Advanced Analytics", "Personal AI Coach", "Priority Support"],
|
||||
buttons: [{ text: "Upgrade Now", href: "#" }],
|
||||
},
|
||||
]}
|
||||
title="Choose Your Plan"
|
||||
description="Start for free, or unlock premium features to optimize your productivity."
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="ai-coach" data-section="ai-coach">
|
||||
<TestimonialCardFifteen
|
||||
useInvertedBackground={true}
|
||||
testimonial="As your AI coach, I recommend taking 5 minutes to break down large tasks into smaller action items. This dramatically boosts completion rates and helps maintain steady momentum."
|
||||
rating={5}
|
||||
author="TaskFlow AI Assistant"
|
||||
avatars={[
|
||||
{
|
||||
src: "http://img.b2bpic.net/free-photo/representations-user-experience-interface-design_23-2150104513.jpg",
|
||||
alt: "AI Coach",
|
||||
},
|
||||
{
|
||||
src: "http://img.b2bpic.net/free-photo/phone-with-app-powered-with-ai_1268-21799.jpg",
|
||||
alt: "AI helper 2",
|
||||
},
|
||||
{
|
||||
src: "http://img.b2bpic.net/free-photo/phone-with-ai-chat_1268-21801.jpg",
|
||||
alt: "AI helper 3",
|
||||
},
|
||||
{
|
||||
src: "http://img.b2bpic.net/free-photo/smartphone-with-opened-ai-chat-it_1268-21623.jpg",
|
||||
alt: "AI helper 4",
|
||||
},
|
||||
{
|
||||
src: "http://img.b2bpic.net/free-photo/bucharest-romania-july-30th-2024-ai-driven-chatgpt-mobile-app_482257-123151.jpg",
|
||||
alt: "AI helper 5",
|
||||
},
|
||||
]}
|
||||
ratingAnimation="blur-reveal"
|
||||
avatarsAnimation="blur-reveal"
|
||||
/>
|
||||
</div>
|
||||
<div id="ai-coach" data-section="ai-coach">
|
||||
<TestimonialCardFifteen
|
||||
useInvertedBackground={true}
|
||||
testimonial="As your AI coach, I recommend taking 5 minutes to break down large tasks into smaller action items. This dramatically boosts completion rates and helps maintain steady momentum."
|
||||
rating={5}
|
||||
author="TaskFlow AI Assistant"
|
||||
avatars={[
|
||||
{ src: "http://img.b2bpic.net/free-photo/representations-user-experience-interface-design_23-2150104513.jpg", alt: "AI Coach" },
|
||||
{ src: "http://img.b2bpic.net/free-photo/phone-with-app-powered-with-ai_1268-21799.jpg", alt: "AI helper 2" },
|
||||
{ src: "http://img.b2bpic.net/free-photo/phone-with-ai-chat_1268-21801.jpg", alt: "AI helper 3" },
|
||||
{ src: "http://img.b2bpic.net/free-photo/smartphone-with-opened-ai-chat-it_1268-21623.jpg", alt: "AI helper 4" },
|
||||
{ src: "http://img.b2bpic.net/free-photo/bucharest-romania-july-30th-2024-ai-driven-chatgpt-mobile-app_482257-123151.jpg", alt: "AI helper 5" },
|
||||
]}
|
||||
ratingAnimation="blur-reveal"
|
||||
avatarsAnimation="blur-reveal"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="faq" data-section="faq">
|
||||
<FaqDouble
|
||||
textboxLayout="default"
|
||||
useInvertedBackground={false}
|
||||
faqs={[
|
||||
{
|
||||
id: "1",
|
||||
title: "Is the free plan truly free?",
|
||||
content: "Yes, our core task management and productivity stats are free forever.",
|
||||
},
|
||||
{
|
||||
id: "2",
|
||||
title: "How does AI scheduling work?",
|
||||
content: "Our AI analyzes your tasks and deadlines to craft the perfect daily plan.",
|
||||
},
|
||||
{
|
||||
id: "3",
|
||||
title: "Can I upgrade anytime?",
|
||||
content: "Absolutely. You can switch to Pro for smarter AI features whenever you're ready.",
|
||||
},
|
||||
]}
|
||||
title="Frequently Asked Questions"
|
||||
description="Answers to common questions about your productivity journey."
|
||||
faqsAnimation="blur-reveal"
|
||||
/>
|
||||
</div>
|
||||
<div id="faq" data-section="faq">
|
||||
<FaqDouble
|
||||
textboxLayout="default"
|
||||
useInvertedBackground={false}
|
||||
faqs={[
|
||||
{ id: "1", title: "Is the free plan truly free?", content: "Yes, our core task management and productivity stats are free forever." },
|
||||
{ id: "2", title: "How does AI scheduling work?", content: "Our AI analyzes your tasks and deadlines to craft the perfect daily plan." },
|
||||
{ id: "3", title: "Can I upgrade anytime?", content: "Absolutely. You can switch to Pro for smarter AI features whenever you're ready." },
|
||||
]}
|
||||
title="Frequently Asked Questions"
|
||||
description="Answers to common questions about your productivity journey."
|
||||
faqsAnimation="blur-reveal"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="contact" data-section="contact">
|
||||
<ContactCenter
|
||||
useInvertedBackground={true}
|
||||
background={{
|
||||
variant: "plain",
|
||||
}}
|
||||
tag="Stay Updated"
|
||||
title="Ready to master your time?"
|
||||
description="Sign up for productivity tips and news from TaskFlow AI."
|
||||
/>
|
||||
</div>
|
||||
<div id="contact" data-section="contact">
|
||||
<ContactCenter
|
||||
useInvertedBackground={true}
|
||||
background={{ variant: "plain" }}
|
||||
tag="Stay Updated"
|
||||
title="Ready to master your time?"
|
||||
description="Sign up for productivity tips and news from TaskFlow AI."
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="footer" data-section="footer">
|
||||
<FooterMedia
|
||||
imageSrc="http://img.b2bpic.net/free-photo/empty-photographer-studio-background-abstract-background-texture-beauty-dark-light-clear-blue-cold-gray-snowy-white-gradient-flat-wall-floor_1258-54160.jpg"
|
||||
logoText="TaskFlow AI"
|
||||
columns={[
|
||||
{
|
||||
title: "Product",
|
||||
items: [
|
||||
{
|
||||
label: "Features",
|
||||
href: "#",
|
||||
},
|
||||
{
|
||||
label: "Pricing",
|
||||
href: "#pricing",
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
title: "Company",
|
||||
items: [
|
||||
{
|
||||
label: "About",
|
||||
href: "#",
|
||||
},
|
||||
{
|
||||
label: "Careers",
|
||||
href: "#",
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
title: "Legal",
|
||||
items: [
|
||||
{
|
||||
label: "Privacy",
|
||||
href: "#",
|
||||
},
|
||||
{
|
||||
label: "Terms",
|
||||
href: "#",
|
||||
},
|
||||
],
|
||||
},
|
||||
]}
|
||||
imageAlt="Minimal dark workspace blurred"
|
||||
/>
|
||||
</div>
|
||||
<div id="footer" data-section="footer">
|
||||
<FooterMedia
|
||||
imageSrc="http://img.b2bpic.net/free-photo/empty-photographer-studio-background-abstract-background-texture-beauty-dark-light-clear-blue-cold-gray-snowy-white-gradient-flat-wall-floor_1258-54160.jpg"
|
||||
logoText="TaskFlow AI"
|
||||
columns={[
|
||||
{
|
||||
title: "Product", items: [
|
||||
{ label: "Features", href: "#" },
|
||||
{ label: "Pricing", href: "#pricing" },
|
||||
],
|
||||
},
|
||||
{
|
||||
title: "Company", items: [
|
||||
{ label: "About", href: "#" },
|
||||
{ label: "Careers", href: "#" },
|
||||
],
|
||||
},
|
||||
{
|
||||
title: "Legal", items: [
|
||||
{ label: "Privacy", href: "#" },
|
||||
{ label: "Terms", href: "#" },
|
||||
],
|
||||
},
|
||||
]}
|
||||
imageAlt="Minimal dark workspace blurred"
|
||||
/>
|
||||
</div>
|
||||
</ReactLenis>
|
||||
</ThemeProvider>
|
||||
);
|
||||
|
||||
Reference in New Issue
Block a user