311 lines
16 KiB
TypeScript
311 lines
16 KiB
TypeScript
"use client";
|
|
|
|
import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
|
|
import NavbarStyleApple from '@/components/navbar/NavbarStyleApple/NavbarStyleApple';
|
|
import HeroSplitDualMedia from '@/components/sections/hero/HeroSplitDualMedia';
|
|
import FeatureCardTwelve from '@/components/sections/feature/FeatureCardTwelve';
|
|
import ProductCardThree from '@/components/sections/product/ProductCardThree';
|
|
import SplitAbout from '@/components/sections/about/SplitAbout';
|
|
import PricingCardEight from '@/components/sections/pricing/PricingCardEight';
|
|
import SocialProofOne from '@/components/sections/socialProof/SocialProofOne';
|
|
import FaqDouble from '@/components/sections/faq/FaqDouble';
|
|
import ContactCTA from '@/components/sections/contact/ContactCTA';
|
|
import FooterMedia from '@/components/sections/footer/FooterMedia';
|
|
import { BookOpen, Sparkles, Zap, Brain, BookMarked, Headphones, Lightbulb, CheckCircle, Crown, Users, Award, HelpCircle, Rocket } from "lucide-react";
|
|
|
|
export default function LandingPage() {
|
|
return (
|
|
<ThemeProvider
|
|
defaultButtonVariant="hover-magnetic"
|
|
defaultTextAnimation="background-highlight"
|
|
borderRadius="soft"
|
|
contentWidth="mediumSmall"
|
|
sizing="largeSmallSizeMediumTitles"
|
|
background="aurora"
|
|
cardStyle="subtle-shadow"
|
|
primaryButtonStyle="primary-glow"
|
|
secondaryButtonStyle="radial-glow"
|
|
headingFontWeight="bold"
|
|
>
|
|
<div id="nav" data-section="nav">
|
|
<NavbarStyleApple
|
|
brandName="BookFlow"
|
|
navItems={[
|
|
{ name: "Features", id: "features" },
|
|
{ name: "How It Works", id: "product" },
|
|
{ name: "AI Tools", id: "ai" },
|
|
{ name: "Pricing", id: "pricing" },
|
|
{ name: "FAQ", id: "faq" }
|
|
]}
|
|
/>
|
|
</div>
|
|
|
|
<div id="hero" data-section="hero">
|
|
<HeroSplitDualMedia
|
|
title="Read Like You Scroll"
|
|
description="Experience books in bite-sized chapters with the familiar feel of TikTok. Swipe through stories at your own pace, build reading streaks, and unlock achievements. Transform how you discover and complete books."
|
|
background={{ variant: "aurora" }}
|
|
tag="Reading Reimagined"
|
|
tagIcon={BookOpen}
|
|
tagAnimation="slide-up"
|
|
buttons={[
|
|
{ text: "Start Reading Free", href: "#pricing" },
|
|
{ text: "Explore Books", href: "#product" }
|
|
]}
|
|
buttonAnimation="slide-up"
|
|
mediaItems={[
|
|
{
|
|
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3Aq67yhj3FOyDsAJMTviHz2XWv9/a-sleek-mobile-phone-displaying-a-vertic-1773307672466-a0f77fec.png", imageAlt: "BookFlow reading interface on mobile"
|
|
},
|
|
{
|
|
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3Aq67yhj3FOyDsAJMTviHz2XWv9/multiple-smartphone-screens-stacked-show-1773307673151-d8917b50.png", imageAlt: "Multiple reading screens showing scroll flow"
|
|
}
|
|
]}
|
|
mediaAnimation="blur-reveal"
|
|
rating={5}
|
|
ratingText="Loved by 50K+ Readers"
|
|
ariaLabel="BookFlow hero section"
|
|
className="w-full"
|
|
useInvertedBackground={false}
|
|
/>
|
|
</div>
|
|
|
|
<div id="features" data-section="features">
|
|
<FeatureCardTwelve
|
|
title="Why Choose BookFlow"
|
|
description="Discover the features that make reading addictive and effortless"
|
|
tag="Core Features"
|
|
tagIcon={Sparkles}
|
|
tagAnimation="slide-up"
|
|
textboxLayout="default"
|
|
useInvertedBackground={true}
|
|
features={[
|
|
{
|
|
id: "vertical-scroll", label: "Swipe", title: "Familiar Vertical Scroll Interaction", items: [
|
|
"Swipe up for next chapter fragment", "Swipe down to revisit previous text", "Double tap to like passages", "Progress indicator shows chapter completion"
|
|
],
|
|
buttons: [{ text: "Learn More", href: "#" }]
|
|
},
|
|
{
|
|
id: "bite-sized", label: "Chunks", title: "Bite-Sized Reading Fragments", items: [
|
|
"5-10 sentences per scroll", "Perfect for commutes and breaks", "No commitment reading sessions", "Customizable text size and speed"
|
|
]
|
|
},
|
|
{
|
|
id: "collection", label: "Books", title: "Personalized Book Discovery", items: [
|
|
"AI-powered recommendations", "Browse by mood and genre", "Save favorite passages", "Track reading progress"
|
|
]
|
|
}
|
|
]}
|
|
animationType="slide-up"
|
|
ariaLabel="Core features section"
|
|
className="w-full"
|
|
/>
|
|
</div>
|
|
|
|
<div id="product" data-section="product">
|
|
<ProductCardThree
|
|
title="Featured Books"
|
|
description="Explore our carefully curated collection available right now"
|
|
tag="Trending Now"
|
|
tagIcon={Zap}
|
|
tagAnimation="slide-up"
|
|
textboxLayout="default"
|
|
useInvertedBackground={false}
|
|
products={[
|
|
{
|
|
id: "book-1", name: "The 48 Laws of Power", price: "$9.99", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3Aq67yhj3FOyDsAJMTviHz2XWv9/three-distinct-product-cards-showing-dif-1773307674205-f4031f18.png", imageAlt: "The 48 Laws of Power book cover", initialQuantity: 1
|
|
},
|
|
{
|
|
id: "book-2", name: "Atomic Habits", price: "$8.99", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3Aq67yhj3FOyDsAJMTviHz2XWv9/three-distinct-product-cards-showing-dif-1773307674205-f4031f18.png", imageAlt: "Atomic Habits book cover", initialQuantity: 1
|
|
},
|
|
{
|
|
id: "book-3", name: "Harry Potter Series", price: "$24.99", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3Aq67yhj3FOyDsAJMTviHz2XWv9/three-distinct-product-cards-showing-dif-1773307674205-f4031f18.png", imageAlt: "Harry Potter complete series", initialQuantity: 1
|
|
}
|
|
]}
|
|
gridVariant="three-columns-all-equal-width"
|
|
animationType="slide-up"
|
|
ariaLabel="Featured books section"
|
|
/>
|
|
</div>
|
|
|
|
<div id="ai" data-section="ai">
|
|
<SplitAbout
|
|
title="AI-Powered Reading Intelligence"
|
|
description="Unlock smarter reading with artificial intelligence that adapts to your pace and comprehension"
|
|
tag="Smart Features"
|
|
tagIcon={Brain}
|
|
tagAnimation="slide-up"
|
|
textboxLayout="default"
|
|
useInvertedBackground={true}
|
|
bulletPoints={[
|
|
{
|
|
title: "Auto-Summarization", description: "AI breaks down long chapters into digestible micro-content, transforming 50-page chapters into 5-minute reads", icon: BookMarked
|
|
},
|
|
{
|
|
title: "Audio Narration", description: "Listen to books narrated with natural AI voices while you commute, exercise, or relax", icon: Headphones
|
|
},
|
|
{
|
|
title: "Vocabulary Helper", description: "Complex words instantly explained in context, building your vocabulary without breaking reading flow", icon: Lightbulb
|
|
},
|
|
{
|
|
title: "Smart Quizzes", description: "AI generates comprehension questions after each chapter to test and reinforce your understanding", icon: CheckCircle
|
|
}
|
|
]}
|
|
imageSrc="https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3Aq67yhj3FOyDsAJMTviHz2XWv9/futuristic-ai-interface-showing-text-sum-1773307676084-54a09961.png"
|
|
imageAlt="AI features interface mockup"
|
|
mediaAnimation="slide-up"
|
|
imagePosition="right"
|
|
ariaLabel="AI features section"
|
|
/>
|
|
</div>
|
|
|
|
<div id="pricing" data-section="pricing">
|
|
<PricingCardEight
|
|
title="Simple, Transparent Pricing"
|
|
description="Choose the plan that fits your reading lifestyle"
|
|
tag="Plans"
|
|
tagIcon={Zap}
|
|
tagAnimation="slide-up"
|
|
textboxLayout="default"
|
|
useInvertedBackground={false}
|
|
plans={[
|
|
{
|
|
id: "free", badge: "Get Started", badgeIcon: Sparkles,
|
|
price: "Free", subtitle: "Perfect for casual readers", buttons: [{ text: "Start Free", href: "#" }],
|
|
features: [
|
|
"Access to 500+ popular books", "Core reading features", "Basic reading stats", "Daily limits on reading time"
|
|
]
|
|
},
|
|
{
|
|
id: "premium", badge: "Most Popular", badgeIcon: Crown,
|
|
price: "$4.99", subtitle: "Unlimited reading power", buttons: [{ text: "Subscribe Now", href: "#" }],
|
|
features: [
|
|
"Unlimited book access", "AI summaries & audio narration", "Offline reading mode", "Ad-free experience", "Reading streaks & achievements", "Priority customer support"
|
|
]
|
|
},
|
|
{
|
|
id: "family", badge: "Save 30%", badgeIcon: Users,
|
|
price: "$11.99", subtitle: "For the whole family", buttons: [{ text: "Share Reading", href: "#" }],
|
|
features: [
|
|
"Up to 6 family members", "All Premium features", "Family reading challenges", "Parental controls", "Shared library management", "Priority support"
|
|
]
|
|
}
|
|
]}
|
|
animationType="slide-up"
|
|
ariaLabel="Pricing plans section"
|
|
/>
|
|
</div>
|
|
|
|
<div id="socialproof" data-section="socialproof">
|
|
<SocialProofOne
|
|
title="Trusted by Leading Organizations"
|
|
description="BookFlow is recommended by publishers, educators, and reading enthusiasts worldwide"
|
|
tag="Partners"
|
|
tagIcon={Award}
|
|
tagAnimation="slide-up"
|
|
textboxLayout="default"
|
|
useInvertedBackground={false}
|
|
names={[
|
|
"Penguin Random House", "Simon & Schuster", "HarperCollins", "Scholastic", "Tor Publishing", "Hachette", "Audible Academy", "BookTok Community"
|
|
]}
|
|
logos={[
|
|
"http://img.b2bpic.net/free-vector/gradient-abstract-technology-company-logotype_52683-12669.jpg", "http://img.b2bpic.net/free-vector/collection-technology-logos_23-2147532076.jpg", "http://img.b2bpic.net/free-vector/collection-computer-logo-templates_23-2149003043.jpg", "http://img.b2bpic.net/free-vector/gradient-data-logo-template_23-2149211225.jpg", "http://img.b2bpic.net/free-vector/ebook_24908-54031.jpg", "http://img.b2bpic.net/free-vector/neon-landing-page-with-smartphone_23-2148345225.jpg", "http://img.b2bpic.net/free-vector/president-s-day-label-collection_23-2148408100.jpg"
|
|
]}
|
|
speed={40}
|
|
showCard={true}
|
|
ariaLabel="Social proof partners section"
|
|
/>
|
|
</div>
|
|
|
|
<div id="faq" data-section="faq">
|
|
<FaqDouble
|
|
title="Frequently Asked Questions"
|
|
description="Get answers to common questions about BookFlow and how it works"
|
|
tag="Help"
|
|
tagIcon={HelpCircle}
|
|
tagAnimation="slide-up"
|
|
textboxLayout="default"
|
|
useInvertedBackground={true}
|
|
faqs={[
|
|
{
|
|
id: "1", title: "How does the vertical scroll reading work?", content: "BookFlow breaks books into small, manageable fragments (5-10 sentences each). Simply swipe up to read the next passage, just like scrolling through social media. This creates a familiar, frictionless reading experience that keeps you engaged."
|
|
},
|
|
{
|
|
id: "2", title: "Can I download books for offline reading?", content: "Yes! Premium and Family plan members can download their favorite books and read offline without internet connection. Free plan users can read online with occasional connectivity."
|
|
},
|
|
{
|
|
id: "3", title: "What's included in the AI features?", content: "Premium AI features include book summarization, audio narration by AI voices, vocabulary helpers, and smart comprehension quizzes. These help you understand complex material faster and retain information better."
|
|
},
|
|
{
|
|
id: "4", title: "How does the reading streak system work?", content: "Log in daily and read at least one passage to maintain your reading streak. Achieve milestones like 7-day, 30-day, and 100-day streaks. Breaking streaks is easy - just read again tomorrow!"
|
|
},
|
|
{
|
|
id: "5", title: "Can I share passages with friends?", content: "Absolutely! Tap any passage you love and share it directly to social media, via email, or messaging apps. Build a community of readers and discover what others are loving."
|
|
},
|
|
{
|
|
id: "6", title: "Is there a free trial for Premium?", content: "Yes! New users get a 14-day free trial of Premium. Experience all AI features, unlimited reading, and offline mode risk-free. Cancel anytime if it's not for you."
|
|
}
|
|
]}
|
|
faqsAnimation="slide-up"
|
|
animationType="smooth"
|
|
ariaLabel="FAQ section"
|
|
/>
|
|
</div>
|
|
|
|
<div id="contact" data-section="contact">
|
|
<ContactCTA
|
|
tag="Ready to Transform Your Reading?"
|
|
tagIcon={Rocket}
|
|
tagAnimation="slide-up"
|
|
title="Start Your Reading Journey Today"
|
|
description="Join 50,000+ readers who've discovered a better way to consume books. Download BookFlow now and get instant access to thousands of titles."
|
|
buttons={[
|
|
{ text: "Download BookFlow", href: "https://apps.apple.com" },
|
|
{ text: "Join Newsletter", href: "#" }
|
|
]}
|
|
buttonAnimation="slide-up"
|
|
background={{ variant: "aurora" }}
|
|
useInvertedBackground={false}
|
|
ariaLabel="Contact and CTA section"
|
|
/>
|
|
</div>
|
|
|
|
<div id="footer" data-section="footer">
|
|
<FooterMedia
|
|
imageSrc="https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3Aq67yhj3FOyDsAJMTviHz2XWv9/beautiful-abstract-background-showing-ve-1773307672356-5b107513.png"
|
|
imageAlt="BookFlow abstract footer background"
|
|
logoText="BookFlow"
|
|
copyrightText="© 2025 BookFlow. All rights reserved."
|
|
columns={[
|
|
{
|
|
title: "Product", items: [
|
|
{ label: "Features", href: "#features" },
|
|
{ label: "Books", href: "#product" },
|
|
{ label: "Pricing", href: "#pricing" },
|
|
{ label: "Download App", href: "https://apps.apple.com" }
|
|
]
|
|
},
|
|
{
|
|
title: "Company", items: [
|
|
{ label: "About Us", href: "#" },
|
|
{ label: "Blog", href: "#" },
|
|
{ label: "Careers", href: "#" },
|
|
{ label: "Contact", href: "#contact" }
|
|
]
|
|
},
|
|
{
|
|
title: "Legal", items: [
|
|
{ label: "Privacy Policy", href: "#" },
|
|
{ label: "Terms of Service", href: "#" },
|
|
{ label: "Cookie Policy", href: "#" },
|
|
{ label: "Support", href: "#" }
|
|
]
|
|
}
|
|
]}
|
|
ariaLabel="Site footer with media"
|
|
/>
|
|
</div>
|
|
</ThemeProvider>
|
|
);
|
|
} |