255 lines
14 KiB
TypeScript
255 lines
14 KiB
TypeScript
"use client"
|
|
|
|
import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
|
|
import NavbarLayoutFloatingOverlay from '@/components/navbar/NavbarLayoutFloatingOverlay/NavbarLayoutFloatingOverlay';
|
|
import HeroSplitTestimonial from '@/components/sections/hero/HeroSplitTestimonial';
|
|
import FeatureCardTwentyOne from '@/components/sections/feature/FeatureCardTwentyOne';
|
|
import ProductCardOne from '@/components/sections/product/ProductCardOne';
|
|
import TestimonialCardTwo from '@/components/sections/testimonial/TestimonialCardTwo';
|
|
import MetricCardFourteen from '@/components/sections/metrics/MetricCardFourteen';
|
|
import FaqSplitMedia from '@/components/sections/faq/FaqSplitMedia';
|
|
import ContactCenter from '@/components/sections/contact/ContactCenter';
|
|
import FooterLogoReveal from '@/components/sections/footer/FooterLogoReveal';
|
|
import { BookOpen, Sparkles, Zap, Heart, HelpCircle, Mail } from 'lucide-react';
|
|
|
|
export default function LandingPage() {
|
|
return (
|
|
<ThemeProvider
|
|
defaultButtonVariant="shift-hover"
|
|
defaultTextAnimation="entrance-slide"
|
|
borderRadius="pill"
|
|
contentWidth="medium"
|
|
sizing="mediumLarge"
|
|
background="fluid"
|
|
cardStyle="gradient-mesh"
|
|
primaryButtonStyle="radial-glow"
|
|
secondaryButtonStyle="layered"
|
|
headingFontWeight="semibold"
|
|
>
|
|
<div id="nav" data-section="nav">
|
|
<NavbarLayoutFloatingOverlay
|
|
brandName="StudyFlow"
|
|
navItems={[
|
|
{ name: "Features", id: "features" },
|
|
{ name: "How It Works", id: "product" },
|
|
{ name: "Testimonials", id: "testimonials" },
|
|
{ name: "FAQ", id: "faq" },
|
|
{ name: "Contact", id: "contact" }
|
|
]}
|
|
button={{ text: "Start Tracking", href: "contact" }}
|
|
/>
|
|
</div>
|
|
|
|
<div id="hero" data-section="hero">
|
|
<HeroSplitTestimonial
|
|
title="Master Your Studies, Track Your Progress"
|
|
description="Beautiful interactive platform to manage your studies, visualize progress across books and chapters, and celebrate every learning milestone with stunning animated graphs and insightful analytics."
|
|
tag="Study Smart"
|
|
tagIcon={BookOpen}
|
|
tagAnimation="slide-up"
|
|
background={{ variant: "fluid" }}
|
|
useInvertedBackground={false}
|
|
imageSrc="https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3Angoy2QVuRBJK0K90pnHPyoD0r/a-modern-study-dashboard-interface-with--1773234004473-3dd0706c.png"
|
|
imageAlt="Study Flow Dashboard"
|
|
mediaAnimation="slide-up"
|
|
imagePosition="right"
|
|
testimonials={[
|
|
{
|
|
name: "Sarah Chen", handle: "Graduate Student", testimonial: "StudyFlow transformed how I track my reading. The visual progress graphs keep me motivated!", rating: 5,
|
|
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3Angoy2QVuRBJK0K90pnHPyoD0r/portrait-of-a-confident-university-stude-1773234003424-777fb6c6.png"
|
|
},
|
|
{
|
|
name: "Marcus Johnson", handle: "Book Enthusiast", testimonial: "Finally a platform that celebrates every chapter completed. The animations are so satisfying!", rating: 5,
|
|
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3Angoy2QVuRBJK0K90pnHPyoD0r/portrait-of-a-young-professional-or-grad-1773234003212-e591fadb.png"
|
|
}
|
|
]}
|
|
testimonialRotationInterval={5000}
|
|
buttons={[
|
|
{ text: "Start Tracking Now", href: "contact" },
|
|
{ text: "See Demo", href: "product" }
|
|
]}
|
|
buttonAnimation="slide-up"
|
|
/>
|
|
</div>
|
|
|
|
<div id="features" data-section="features">
|
|
<FeatureCardTwentyOne
|
|
title="Powerful Study Management Tools"
|
|
description="Everything you need to organize, track, and visualize your reading journey"
|
|
tag="Features"
|
|
tagIcon={Sparkles}
|
|
tagAnimation="slide-up"
|
|
imageSrc="https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3Angoy2QVuRBJK0K90pnHPyoD0r/close-up-of-an-interactive-study-tracker-1773234004496-c0868520.png"
|
|
imageAlt="Study Tracking Features"
|
|
mediaAnimation="slide-up"
|
|
useInvertedBackground={false}
|
|
mediaPosition="left"
|
|
accordionItems={[
|
|
{
|
|
id: "1", title: "Interactive Progress Tracking", content: "Visualize your reading progress with beautiful animated charts and completion percentages for each book and chapter. Watch your progress grow in real-time with smooth, satisfying animations."
|
|
},
|
|
{
|
|
id: "2", title: "Smart Study Analytics", content: "Get detailed insights into your study habits, reading speed, time spent per chapter, and completion rates. Make data-driven decisions to optimize your learning strategy."
|
|
},
|
|
{
|
|
id: "3", title: "Chapter-Level Organization", content: "Organize your books into detailed chapters with custom notes, highlights, and completion tracking. Never lose track of where you are in your reading journey."
|
|
},
|
|
{
|
|
id: "4", title: "Achievement Badges & Milestones", content: "Celebrate every milestone with beautiful achievement badges. Get rewarded for consistency and watch your accomplishments grow throughout your study journey."
|
|
}
|
|
]}
|
|
buttons={[
|
|
{ text: "Learn More", href: "contact" }
|
|
]}
|
|
buttonAnimation="slide-up"
|
|
/>
|
|
</div>
|
|
|
|
<div id="product" data-section="product">
|
|
<ProductCardOne
|
|
title="How StudyFlow Works"
|
|
description="Experience the seamless workflow that makes study tracking beautiful and intuitive"
|
|
tag="Workflow"
|
|
tagIcon={Zap}
|
|
tagAnimation="slide-up"
|
|
products={[
|
|
{
|
|
id: "1", name: "Add Your Books", price: "Step 1", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3Angoy2QVuRBJK0K90pnHPyoD0r/a-modern-study-dashboard-interface-with--1773234004473-3dd0706c.png", imageAlt: "Step 1 - Add Your Books"
|
|
},
|
|
{
|
|
id: "2", name: "Track Chapters", price: "Step 2", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3Angoy2QVuRBJK0K90pnHPyoD0r/close-up-of-an-interactive-study-tracker-1773234004496-c0868520.png", imageAlt: "Step 2 - Track Chapters"
|
|
},
|
|
{
|
|
id: "3", name: "Visualize Progress", price: "Step 3", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3Angoy2QVuRBJK0K90pnHPyoD0r/illustration-of-a-student-studying-with--1773234004357-84429c73.png", imageAlt: "Step 3 - Visualize Progress"
|
|
}
|
|
]}
|
|
gridVariant="three-columns-all-equal-width"
|
|
animationType="slide-up"
|
|
textboxLayout="default"
|
|
useInvertedBackground={false}
|
|
buttons={[
|
|
{ text: "Get Started", href: "contact" }
|
|
]}
|
|
buttonAnimation="slide-up"
|
|
/>
|
|
</div>
|
|
|
|
<div id="testimonials" data-section="testimonials">
|
|
<TestimonialCardTwo
|
|
testimonials={[
|
|
{
|
|
id: "1", name: "Emma Rodriguez", role: "PhD Candidate", testimonial: "StudyFlow helped me organize my dissertation research across 50+ academic papers. The progress visualization keeps me motivated.", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3Angoy2QVuRBJK0K90pnHPyoD0r/portrait-of-a-confident-university-stude-1773234003424-777fb6c6.png", imageAlt: "Emma Rodriguez"
|
|
},
|
|
{
|
|
id: "2", name: "David Kim", role: "Language Learner", testimonial: "I've been using StudyFlow to track my reading in three languages. The interface is intuitive and the animations make studying fun.", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3Angoy2QVuRBJK0K90pnHPyoD0r/portrait-of-a-young-professional-or-grad-1773234003212-e591fadb.png", imageAlt: "David Kim"
|
|
},
|
|
{
|
|
id: "3", name: "Lisa Thompson", role: "Book Club Organizer", testimonial: "Our book club loves using StudyFlow to coordinate reading schedules and discuss chapters. Best platform for group study coordination.", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3Angoy2QVuRBJK0K90pnHPyoD0r/portrait-of-an-academic-professional-or--1773234003813-e29d4fcb.png", imageAlt: "Lisa Thompson"
|
|
},
|
|
{
|
|
id: "4", name: "Alex Patel", role: "Professional Developer", testimonial: "As someone learning new technical skills daily, StudyFlow's analytics help me optimize my study sessions and track real progress.", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3Angoy2QVuRBJK0K90pnHPyoD0r/portrait-of-a-student-or-learner-warm-sm-1773234004450-e2470e64.png", imageAlt: "Alex Patel"
|
|
}
|
|
]}
|
|
title="Loved by Students & Scholars"
|
|
description="Join thousands of learners who use StudyFlow to master their studies"
|
|
tag="Testimonials"
|
|
tagIcon={Heart}
|
|
tagAnimation="slide-up"
|
|
animationType="slide-up"
|
|
textboxLayout="default"
|
|
useInvertedBackground={false}
|
|
buttons={[
|
|
{ text: "Share Your Story", href: "contact" }
|
|
]}
|
|
buttonAnimation="slide-up"
|
|
/>
|
|
</div>
|
|
|
|
<div id="metrics" data-section="metrics">
|
|
<MetricCardFourteen
|
|
title="Join Thousands of Learners Tracking Their Progress"
|
|
tag="Impact"
|
|
tagAnimation="slide-up"
|
|
metrics={[
|
|
{
|
|
id: "1", value: "50K+", description: "Active users tracking their study progress every day across the platform"
|
|
},
|
|
{
|
|
id: "2", value: "2M+", description: "Chapters tracked and completed by our community of dedicated learners"
|
|
},
|
|
{
|
|
id: "3", value: "98%", description: "User satisfaction rate with StudyFlow's intuitive design and features"
|
|
},
|
|
{
|
|
id: "4", value: "24/7", description: "Access to your study data with automatic syncing across all your devices"
|
|
}
|
|
]}
|
|
metricsAnimation="slide-up"
|
|
useInvertedBackground={false}
|
|
/>
|
|
</div>
|
|
|
|
<div id="faq" data-section="faq">
|
|
<FaqSplitMedia
|
|
faqs={[
|
|
{
|
|
id: "1", title: "Can I track multiple books simultaneously?", content: "Absolutely! StudyFlow is designed to handle unlimited books and chapters. Organize your entire library and track progress across all titles in real-time with our advanced analytics."
|
|
},
|
|
{
|
|
id: "2", title: "How does the progress visualization work?", content: "Our system generates beautiful animated graphs showing your completion percentage, reading speed, and chapter-by-chapter progress. Watch your achievements grow with smooth, satisfying animations."
|
|
},
|
|
{
|
|
id: "3", title: "Is my data secure and backed up?", content: "Yes! All your study data is encrypted and automatically backed up to our secure servers. You can access your progress from any device, anywhere, anytime."
|
|
},
|
|
{
|
|
id: "4", title: "Can I export my study statistics?", content: "StudyFlow allows you to export your progress reports as PDF or CSV. Perfect for sharing achievements or analyzing your study patterns over time."
|
|
},
|
|
{
|
|
id: "5", title: "Do you offer collaboration features?", content: "Yes! Create study groups, share reading lists, and track collective progress with friends and colleagues. Perfect for book clubs, study circles, and group learning."
|
|
}
|
|
]}
|
|
imageSrc="https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3Angoy2QVuRBJK0K90pnHPyoD0r/illustration-of-a-student-studying-with--1773234004357-84429c73.png"
|
|
imageAlt="Study Tips and Support"
|
|
mediaAnimation="slide-up"
|
|
mediaPosition="left"
|
|
title="Frequently Asked Questions"
|
|
description="Everything you need to know about StudyFlow"
|
|
tag="Help"
|
|
tagIcon={HelpCircle}
|
|
tagAnimation="slide-up"
|
|
faqsAnimation="slide-up"
|
|
textboxLayout="default"
|
|
useInvertedBackground={false}
|
|
animationType="smooth"
|
|
buttons={[
|
|
{ text: "Contact Support", href: "contact" }
|
|
]}
|
|
buttonAnimation="slide-up"
|
|
/>
|
|
</div>
|
|
|
|
<div id="contact" data-section="contact">
|
|
<ContactCenter
|
|
tag="Get Started"
|
|
title="Ready to Transform Your Study Habits?"
|
|
description="Join thousands of learners using StudyFlow to track their progress and stay motivated. Sign up today and get instant access to beautiful study tracking."
|
|
tagIcon={Mail}
|
|
tagAnimation="slide-up"
|
|
background={{ variant: "fluid" }}
|
|
useInvertedBackground={false}
|
|
inputPlaceholder="Enter your email"
|
|
buttonText="Start Free Trial"
|
|
termsText="We respect your privacy. Unsubscribe at any time. No spam, just study updates."
|
|
/>
|
|
</div>
|
|
|
|
<div id="footer" data-section="footer">
|
|
<FooterLogoReveal
|
|
logoText="StudyFlow"
|
|
leftLink={{ text: "Privacy Policy", href: "#" }}
|
|
rightLink={{ text: "Terms of Service", href: "#" }}
|
|
/>
|
|
</div>
|
|
</ThemeProvider>
|
|
);
|
|
} |