310 lines
16 KiB
TypeScript
310 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="circleGradient"
|
|
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. Watch text flow vertically as you scroll—just like your favorite social media app, but with infinite stories to explore."
|
|
background={{ variant: "plain" }}
|
|
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"
|
|
/>
|
|
</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?_wi=1", 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?_wi=2", 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?_wi=3", 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: "plain" }}
|
|
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>
|
|
);
|
|
} |