196 lines
10 KiB
TypeScript
196 lines
10 KiB
TypeScript
"use client";
|
|
|
|
import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
|
|
import ReactLenis from "lenis/react";
|
|
import ContactCTA from '@/components/sections/contact/ContactCTA';
|
|
import FaqSplitText from '@/components/sections/faq/FaqSplitText';
|
|
import FeatureCardSix from '@/components/sections/feature/FeatureCardSix';
|
|
import FooterBaseCard from '@/components/sections/footer/FooterBaseCard';
|
|
import HeroBillboardRotatedCarousel from '@/components/sections/hero/HeroBillboardRotatedCarousel';
|
|
import MetricCardOne from '@/components/sections/metrics/MetricCardOne';
|
|
import NavbarLayoutFloatingInline from '@/components/navbar/NavbarLayoutFloatingInline';
|
|
import PricingCardThree from '@/components/sections/pricing/PricingCardThree';
|
|
import ProductCardOne from '@/components/sections/product/ProductCardOne';
|
|
import TestimonialCardSixteen from '@/components/sections/testimonial/TestimonialCardSixteen';
|
|
import { BookOpen, PlayCircle, Zap } from "lucide-react";
|
|
|
|
export default function LandingPage() {
|
|
return (
|
|
<ThemeProvider
|
|
defaultButtonVariant="bounce-effect"
|
|
defaultTextAnimation="entrance-slide"
|
|
borderRadius="pill"
|
|
contentWidth="mediumLarge"
|
|
sizing="mediumLarge"
|
|
background="circleGradient"
|
|
cardStyle="solid"
|
|
primaryButtonStyle="primary-glow"
|
|
secondaryButtonStyle="radial-glow"
|
|
headingFontWeight="medium"
|
|
>
|
|
<ReactLenis root>
|
|
<div id="nav" data-section="nav">
|
|
<NavbarLayoutFloatingInline
|
|
navItems={[
|
|
{ name: "Home", id: "hero" },
|
|
{ name: "Features", id: "features" },
|
|
{ name: "Pricing", id: "pricing" },
|
|
{ name: "FAQ", id: "faq" }
|
|
]}
|
|
brandName="Book2Movie"
|
|
button={{ text: "Upload Book", href: "#upload" }}
|
|
/>
|
|
</div>
|
|
|
|
<div id="hero" data-section="hero">
|
|
<HeroBillboardRotatedCarousel
|
|
background={{ variant: "sparkles-gradient" }}
|
|
title="Too tired to read? Let your book become a movie."
|
|
description="Transform your favorite digital books into cinematic masterpieces with our revolutionary AI-powered platform. Watch your imagination come to life instantly."
|
|
buttons={[{ text: "Upload Your Book", href: "#upload" }]}
|
|
carouselItems={[
|
|
{ id: "c1", imageSrc: "http://img.b2bpic.net/free-photo/bronze-texture-background_24837-626.jpg", imageAlt: "Cinematic visual 1" },
|
|
{ id: "c2", imageSrc: "http://img.b2bpic.net/free-photo/robot-cyborg-ai-robotics-android-concept_53876-120443.jpg", imageAlt: "Cinematic visual 2" },
|
|
{ id: "c3", imageSrc: "http://img.b2bpic.net/free-photo/old-russian-book_1385-1036.jpg", imageAlt: "Cinematic visual 3" },
|
|
{ id: "c4", imageSrc: "http://img.b2bpic.net/free-photo/empty-concrete-room-with-neon-lights_1048-12982.jpg", imageAlt: "Cinematic visual 4" },
|
|
{ id: "c5", imageSrc: "http://img.b2bpic.net/free-photo/woman-holding-bouquet-flowers-with-glitch-effect_23-2148305003.jpg", imageAlt: "Cinematic visual 5" },
|
|
{ id: "c6", imageSrc: "http://img.b2bpic.net/free-photo/blending-futuristic-building-seamlessly-into-desert-landscape_23-2151248498.jpg", imageAlt: "Cinematic visual 6" }
|
|
]}
|
|
/>
|
|
</div>
|
|
|
|
<div id="how-it-works" data-section="how-it-works">
|
|
<FeatureCardSix
|
|
textboxLayout="split"
|
|
useInvertedBackground={false}
|
|
features={[
|
|
{ title: "Upload", description: "Drag and drop your PDF, EPUB, or TXT file or simply paste your story content.", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=mghm5c", imageAlt: "Upload step" },
|
|
{ title: "AI Processing", description: "Our AI analyzes the characters, scenes, and narration style to generate unique visuals.", imageSrc: "http://img.b2bpic.net/free-photo/3d-render-medical-background-with-male-figure-with-brain-highlighted-techno-overlay_1048-13543.jpg", imageAlt: "AI Processing step" },
|
|
{ title: "Watch", description: "Enjoy your customized movie or series right in your browser with cinematic quality.", imageSrc: "http://img.b2bpic.net/free-photo/music-background-with-phone-with-music-icon-modern-technology-concept_169016-52931.jpg", imageAlt: "Watch step" }
|
|
]}
|
|
title="How It Works"
|
|
description="Simple steps to transform your story into an cinematic adventure."
|
|
/>
|
|
</div>
|
|
|
|
<div id="features" data-section="features">
|
|
<ProductCardOne
|
|
animationType="slide-up"
|
|
textboxLayout="default"
|
|
gridVariant="three-columns-all-equal-width"
|
|
useInvertedBackground={false}
|
|
products={[
|
|
{ id: "feat1", name: "Multi-Episode Series", price: "Standard", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=zdxqdc" },
|
|
{ id: "feat2", name: "Custom Style Generator", price: "AI-Powered", imageSrc: "http://img.b2bpic.net/free-photo/conceptual-3d-illustration-basketball-player-dunking-motion-design_183364-124095.jpg" },
|
|
{ id: "feat3", name: "Cinematic Visuals", price: "4K Ultra", imageSrc: "http://img.b2bpic.net/free-vector/class-style-video-player-template-design_1017-25486.jpg" },
|
|
{ id: "feat4", name: "Character Visualization", price: "Unique", imageSrc: "http://img.b2bpic.net/free-photo/digital-illustration-cell-reflective-surface-against-black-background-with-space-text_181624-23704.jpg" },
|
|
{ id: "feat5", name: "Voice Narration Options", price: "Premium", imageSrc: "http://img.b2bpic.net/free-photo/printer-icon-front-side_187299-39561.jpg" },
|
|
{ id: "feat6", name: "Movie Poster Engine", price: "Exclusive", imageSrc: "http://img.b2bpic.net/free-vector/classic-video-player-template-design_1017-39477.jpg" }
|
|
]}
|
|
title="Platform Features"
|
|
description="Advanced tools for the ultimate storytelling experience."
|
|
/>
|
|
</div>
|
|
|
|
<div id="metrics" data-section="metrics">
|
|
<MetricCardOne
|
|
animationType="slide-up"
|
|
textboxLayout="split"
|
|
gridVariant="bento-grid"
|
|
useInvertedBackground={false}
|
|
metrics={[
|
|
{ id: "m1", value: "100K+", title: "Books Converted", description: "Stories brought to life.", icon: BookOpen },
|
|
{ id: "m2", value: "500K+", title: "Minutes Watched", description: "Total cinematic time.", icon: PlayCircle },
|
|
{ id: "m3", value: "99.9%", title: "Uptime", description: "Constant performance.", icon: Zap }
|
|
]}
|
|
title="Streaming Impact"
|
|
description="Join thousands of users creating magic every day."
|
|
/>
|
|
</div>
|
|
|
|
<div id="testimonials" data-section="testimonials">
|
|
<TestimonialCardSixteen
|
|
animationType="slide-up"
|
|
textboxLayout="split"
|
|
useInvertedBackground={false}
|
|
testimonials={[
|
|
{ id: "t1", name: "Alice M.", role: "Novelist", company: "Book2Movie", rating: 5, imageSrc: "http://img.b2bpic.net/free-photo/medium-shot-blurred-woman-reading_23-2148294004.jpg" },
|
|
{ id: "t2", name: "Bob D.", role: "Film Buff", company: "Book2Movie", rating: 5, imageSrc: "http://img.b2bpic.net/free-photo/portrait-young-woman-with-universe-projection-texture_23-2149581280.jpg" },
|
|
{ id: "t3", name: "Charlie R.", role: "Creator", company: "Book2Movie", rating: 5, imageSrc: "http://img.b2bpic.net/free-photo/girl-standing-metalic-wire-mesh_158595-4332.jpg" },
|
|
{ id: "t4", name: "David W.", role: "Artist", company: "Book2Movie", rating: 5, imageSrc: "http://img.b2bpic.net/free-photo/young-man-video-creator-working-editing-movie-montage-project_482257-126299.jpg" },
|
|
{ id: "t5", name: "Eva P.", role: "Reader", company: "Book2Movie", rating: 5, imageSrc: "http://img.b2bpic.net/free-photo/woman-sitting-board-holding-opened-book_23-2147910881.jpg" }
|
|
]}
|
|
kpiItems={[
|
|
{ value: "4.9/5", label: "Avg Rating" },
|
|
{ value: "5M+", label: "Characters Created" },
|
|
{ value: "120+", label: "Genre Styles" }
|
|
]}
|
|
title="User Reviews"
|
|
description="See what creators are saying about their new movies."
|
|
/>
|
|
</div>
|
|
|
|
<div id="pricing" data-section="pricing">
|
|
<PricingCardThree
|
|
animationType="slide-up"
|
|
textboxLayout="split"
|
|
useInvertedBackground={false}
|
|
plans={[
|
|
{ id: "basic", name: "Basic", price: "$19/mo", features: ["1 Movie/mo", "Basic Style", "Standard Quality"], buttons: [{ text: "Select Basic" }] },
|
|
{ id: "pro", name: "Professional", price: "$49/mo", features: ["5 Movies/mo", "Advanced Styles", "4K Quality"], buttons: [{ text: "Select Pro" }] },
|
|
{ id: "studio", name: "Studio", price: "$99/mo", features: ["Unlimited Movies", "Custom Styles", "Priority Render"], buttons: [{ text: "Select Studio" }] }
|
|
]}
|
|
title="Simple Plans"
|
|
description="Choose the best plan to start your movie transformation."
|
|
/>
|
|
</div>
|
|
|
|
<div id="faq" data-section="faq">
|
|
<FaqSplitText
|
|
useInvertedBackground={false}
|
|
faqs={[
|
|
{ id: "f1", title: "Is my data safe?", content: "Yes, we use industry-standard encryption for all uploads." },
|
|
{ id: "f2", title: "How fast is generation?", content: "Generation takes 5-15 minutes depending on book length." },
|
|
{ id: "f3", title: "Can I download videos?", content: "Yes, you can export your creations in high quality." }
|
|
]}
|
|
sideTitle="Common Questions"
|
|
faqsAnimation="slide-up"
|
|
/>
|
|
</div>
|
|
|
|
<div id="upload" data-section="upload">
|
|
<ContactCTA
|
|
useInvertedBackground={false}
|
|
background={{ variant: "radial-gradient" }}
|
|
tag="Get Started"
|
|
title="Ready to Transform?"
|
|
description="Paste your story below or upload a file to begin your cinematic journey."
|
|
buttons={[{ text: "Start Uploading", href: "#" }]}
|
|
/>
|
|
</div>
|
|
|
|
<div id="contact-support" data-section="contact-support">
|
|
<ContactCTA
|
|
useInvertedBackground={false}
|
|
background={{ variant: "sparkles-gradient" }}
|
|
tag="Support"
|
|
title="Need Help?"
|
|
description="Our team is here to assist you with your cinematic transformation."
|
|
buttons={[{ text: "Contact Support", href: "#" }]}
|
|
/>
|
|
</div>
|
|
|
|
<div id="footer" data-section="footer">
|
|
<FooterBaseCard
|
|
logoText="Book2Movie"
|
|
columns={[
|
|
{ title: "Product", items: [{ label: "Features", href: "#features" }, { label: "Pricing", href: "#pricing" }] },
|
|
{ title: "Company", items: [{ label: "About", href: "#" }, { label: "Support", href: "#" }] },
|
|
{ title: "Legal", items: [{ label: "Terms", href: "#" }, { label: "Privacy", href: "#" }] }
|
|
]}
|
|
/>
|
|
</div>
|
|
</ReactLenis>
|
|
</ThemeProvider>
|
|
);
|
|
} |