Compare commits
2 Commits
| Author | SHA1 | Date | |
|---|---|---|---|
| dca839f3cf | |||
| 2dc2c59247 |
357
src/app/page.tsx
357
src/app/page.tsx
@@ -12,7 +12,7 @@ import NavbarStyleFullscreen from '@/components/navbar/NavbarStyleFullscreen/Nav
|
||||
import PricingCardNine from '@/components/sections/pricing/PricingCardNine';
|
||||
import ProductCardFour from '@/components/sections/product/ProductCardFour';
|
||||
import TestimonialCardSixteen from '@/components/sections/testimonial/TestimonialCardSixteen';
|
||||
import { Award, Film, Users } from "lucide-react";
|
||||
import { Award, Film, Users, LayoutDashboard, Settings, CreditCard, History, User } from "lucide-react";
|
||||
|
||||
export default function LandingPage() {
|
||||
return (
|
||||
@@ -33,21 +33,13 @@ export default function LandingPage() {
|
||||
<NavbarStyleFullscreen
|
||||
navItems={[
|
||||
{
|
||||
name: "Home",
|
||||
id: "hero",
|
||||
},
|
||||
name: "Home", id: "hero"},
|
||||
{
|
||||
name: "Library",
|
||||
id: "catalog",
|
||||
},
|
||||
name: "Library", id: "catalog"},
|
||||
{
|
||||
name: "Plans",
|
||||
id: "pricing",
|
||||
},
|
||||
name: "Plans", id: "pricing"},
|
||||
{
|
||||
name: "Support",
|
||||
id: "faq",
|
||||
},
|
||||
name: "Subscriber Portal", id: "subscriber"},
|
||||
]}
|
||||
brandName="CineStream"
|
||||
/>
|
||||
@@ -56,84 +48,34 @@ export default function LandingPage() {
|
||||
<div id="hero" data-section="hero">
|
||||
<HeroSplit
|
||||
background={{
|
||||
variant: "gradient-bars",
|
||||
}}
|
||||
variant: "gradient-bars"}}
|
||||
title="Experience Cinematic Excellence"
|
||||
description="Unlimited movies and series in high-definition quality. Start your journey today."
|
||||
imageSrc="http://img.b2bpic.net/free-photo/dark-vip-cinema-studio-still-life_23-2149500618.jpg?_wi=1"
|
||||
mediaAnimation="slide-up"
|
||||
buttons={[
|
||||
{
|
||||
text: "Get Started",
|
||||
href: "#pricing",
|
||||
},
|
||||
text: "Get Started", href: "#pricing"},
|
||||
{
|
||||
text: "Browse Library",
|
||||
href: "#catalog",
|
||||
},
|
||||
]}
|
||||
avatars={[
|
||||
{
|
||||
src: "http://img.b2bpic.net/free-photo/dark-vip-cinema-studio-still-life_23-2149500591.jpg",
|
||||
alt: "Viewer 1",
|
||||
},
|
||||
{
|
||||
src: "http://img.b2bpic.net/free-photo/luxury-movie-theater-with-modern-design-lighting-generated-by-ai_188544-33089.jpg",
|
||||
alt: "Viewer 2",
|
||||
},
|
||||
{
|
||||
src: "http://img.b2bpic.net/free-photo/people-relaxing-countryside_23-2151335934.jpg",
|
||||
alt: "Viewer 3",
|
||||
},
|
||||
{
|
||||
src: "http://img.b2bpic.net/free-photo/man-enjoying-scenery-shots-snowy-landscape-filled-with-ice-vod-channel_482257-87122.jpg",
|
||||
alt: "Viewer 4",
|
||||
},
|
||||
{
|
||||
src: "http://img.b2bpic.net/free-photo/happy-man-holding-remote-control-chatting-smartphone_482257-126615.jpg",
|
||||
alt: "Viewer 5",
|
||||
},
|
||||
]}
|
||||
avatarText="Join 1M+ movie lovers"
|
||||
marqueeItems={[
|
||||
{
|
||||
type: "text",
|
||||
text: "4K Ultra HD",
|
||||
},
|
||||
{
|
||||
type: "text",
|
||||
text: "Ad-free experience",
|
||||
},
|
||||
{
|
||||
type: "text",
|
||||
text: "Offline downloads",
|
||||
},
|
||||
{
|
||||
type: "text",
|
||||
text: "Any device",
|
||||
},
|
||||
{
|
||||
type: "text",
|
||||
text: "Cancel anytime",
|
||||
},
|
||||
text: "Browse Library", href: "#catalog"},
|
||||
]}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="about" data-section="about">
|
||||
<InlineImageSplitTextAbout
|
||||
<div id="subscriber" data-section="subscriber">
|
||||
<MetricCardThree
|
||||
animationType="slide-up"
|
||||
textboxLayout="default"
|
||||
useInvertedBackground={false}
|
||||
heading={[
|
||||
{
|
||||
type: "text",
|
||||
content: "The Future of Digital Entertainment",
|
||||
},
|
||||
{
|
||||
type: "image",
|
||||
src: "http://img.b2bpic.net/free-photo/frowning-man-watching-sports-match-tv-flabbergasted-by-goal-conceded_482257-119914.jpg",
|
||||
alt: "Cinematic experience",
|
||||
},
|
||||
metrics={[
|
||||
{ id: "dashboard", icon: LayoutDashboard, title: "Dashboard", value: "View Status" },
|
||||
{ id: "profile", icon: User, title: "My Profile", value: "Manage Info" },
|
||||
{ id: "subscription", icon: CreditCard, title: "Subscription", value: "Active Pro" },
|
||||
{ id: "history", icon: History, title: "Billing", value: "Past Invoices" },
|
||||
{ id: "settings", icon: Settings, title: "Settings", value: "Config" }
|
||||
]}
|
||||
title="Subscriber Management"
|
||||
description="Manage your account, subscription status, and billing preferences all in one place."
|
||||
/>
|
||||
</div>
|
||||
|
||||
@@ -144,48 +86,8 @@ export default function LandingPage() {
|
||||
gridVariant="four-items-2x2-equal-grid"
|
||||
useInvertedBackground={false}
|
||||
products={[
|
||||
{
|
||||
id: "1",
|
||||
name: "Nebula Voyager",
|
||||
price: "4K UHD",
|
||||
variant: "Sci-Fi",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/space-travel-collage-design_23-2150163777.jpg",
|
||||
},
|
||||
{
|
||||
id: "2",
|
||||
name: "Shadow Files",
|
||||
price: "HD",
|
||||
variant: "Thriller",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/dark-fantasy-scene_23-2151136117.jpg",
|
||||
},
|
||||
{
|
||||
id: "3",
|
||||
name: "Wild Frontiers",
|
||||
price: "4K",
|
||||
variant: "Adventure",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/3d-glasses-movies-clapper-board-view_23-2149558755.jpg",
|
||||
},
|
||||
{
|
||||
id: "4",
|
||||
name: "Laughing Out Loud",
|
||||
price: "HD",
|
||||
variant: "Comedy",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/funny-image-with-young-woman_23-2151179386.jpg",
|
||||
},
|
||||
{
|
||||
id: "5",
|
||||
name: "Galaxy Knights",
|
||||
price: "4K",
|
||||
variant: "Sci-Fi",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/couple-back-back-with-eyes-closed_23-2148261302.jpg",
|
||||
},
|
||||
{
|
||||
id: "6",
|
||||
name: "Victorian Era",
|
||||
price: "HD",
|
||||
variant: "Drama",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/vintage-view-horses-meadow_1160-625.jpg",
|
||||
},
|
||||
{ id: "1", name: "Nebula Voyager", price: "4K UHD", variant: "Sci-Fi", imageSrc: "http://img.b2bpic.net/free-photo/space-travel-collage-design_23-2150163777.jpg" },
|
||||
{ id: "2", name: "Shadow Files", price: "HD", variant: "Thriller", imageSrc: "http://img.b2bpic.net/free-photo/dark-fantasy-scene_23-2151136117.jpg" }
|
||||
]}
|
||||
title="Browse Our Library"
|
||||
description="Discover top-rated content across all genres."
|
||||
@@ -198,224 +100,19 @@ export default function LandingPage() {
|
||||
textboxLayout="default"
|
||||
useInvertedBackground={false}
|
||||
plans={[
|
||||
{
|
||||
id: "basic",
|
||||
title: "Basic Plan",
|
||||
price: "$9.99",
|
||||
period: "/mo",
|
||||
features: [
|
||||
"Standard Definition",
|
||||
"1 Device",
|
||||
"Ads included",
|
||||
],
|
||||
button: {
|
||||
text: "Subscribe",
|
||||
},
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/man-laying-down-hugging-pillow-watching-tv-heartbroken-by-upsetting-movie-plot_482257-120062.jpg",
|
||||
imageAlt: "Man laying down hugging pillow watching TV heartbroken by upsetting movie plot",
|
||||
},
|
||||
{
|
||||
id: "pro",
|
||||
title: "Pro Plan",
|
||||
price: "$14.99",
|
||||
period: "/mo",
|
||||
features: [
|
||||
"Full HD",
|
||||
"3 Devices",
|
||||
"Ad-free experience",
|
||||
],
|
||||
button: {
|
||||
text: "Subscribe",
|
||||
},
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/dark-vip-cinema-studio-still-life_23-2149500618.jpg?_wi=2",
|
||||
imageAlt: "Man laying down hugging pillow watching TV heartbroken by upsetting movie plot",
|
||||
},
|
||||
{
|
||||
id: "ultra",
|
||||
title: "Ultra Plan",
|
||||
price: "$19.99",
|
||||
period: "/mo",
|
||||
features: [
|
||||
"4K UHD",
|
||||
"5 Devices",
|
||||
"Offline downloads",
|
||||
],
|
||||
button: {
|
||||
text: "Subscribe",
|
||||
},
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/frowning-man-watching-sports-match-tv-flabbergasted-by-goal-conceded_482257-119914.jpg",
|
||||
imageAlt: "Man laying down hugging pillow watching TV heartbroken by upsetting movie plot",
|
||||
},
|
||||
{ id: "basic", title: "Basic", price: "$9.99", period: "/mo", features: ["Standard Definition", "1 Device"], button: { text: "Subscribe" } },
|
||||
{ id: "pro", title: "Pro", price: "$14.99", period: "/mo", features: ["Full HD", "3 Devices"], button: { text: "Subscribe" } }
|
||||
]}
|
||||
title="Select Your Access"
|
||||
description="Choose the perfect plan to get started."
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="metrics" data-section="metrics">
|
||||
<MetricCardThree
|
||||
animationType="slide-up"
|
||||
textboxLayout="default"
|
||||
useInvertedBackground={false}
|
||||
metrics={[
|
||||
{
|
||||
id: "m1",
|
||||
icon: Users,
|
||||
title: "Active Users",
|
||||
value: "1M+",
|
||||
},
|
||||
{
|
||||
id: "m2",
|
||||
icon: Film,
|
||||
title: "Movies Library",
|
||||
value: "5,000+",
|
||||
},
|
||||
{
|
||||
id: "m3",
|
||||
icon: Award,
|
||||
title: "Awards Won",
|
||||
value: "250+",
|
||||
},
|
||||
]}
|
||||
title="Global Success"
|
||||
description="Trusted by viewers across the globe."
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="testimonials" data-section="testimonials">
|
||||
<TestimonialCardSixteen
|
||||
animationType="slide-up"
|
||||
textboxLayout="default"
|
||||
useInvertedBackground={false}
|
||||
testimonials={[
|
||||
{
|
||||
id: "1",
|
||||
name: "Alice Johnson",
|
||||
role: "Film Buff",
|
||||
company: "CinemaClub",
|
||||
rating: 5,
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/handsome-latin-man-portrait-outdoor_624325-3644.jpg",
|
||||
},
|
||||
{
|
||||
id: "2",
|
||||
name: "Bob Smith",
|
||||
role: "Critic",
|
||||
company: "ReviewWeekly",
|
||||
rating: 5,
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/portrait-woman_1098-12705.jpg",
|
||||
},
|
||||
{
|
||||
id: "3",
|
||||
name: "Carol White",
|
||||
role: "Designer",
|
||||
company: "CreativeOps",
|
||||
rating: 5,
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/close-up-friend-video-call-tablet_23-2148860652.jpg",
|
||||
},
|
||||
{
|
||||
id: "4",
|
||||
name: "David Brown",
|
||||
role: "Dev",
|
||||
company: "TechStream",
|
||||
rating: 5,
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/happy-young-couple-doing-online-shopping-laptop-couple-sitting-couch-drinking-soda-eating-chips_482257-22400.jpg",
|
||||
},
|
||||
{
|
||||
id: "5",
|
||||
name: "Eve Davis",
|
||||
role: "Student",
|
||||
company: "UniStudy",
|
||||
rating: 5,
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/remote-employee-holding-chroma-key-device-analyzing-business-graphics_482257-82851.jpg",
|
||||
},
|
||||
]}
|
||||
kpiItems={[
|
||||
{
|
||||
value: "4.9/5",
|
||||
label: "Average Rating",
|
||||
},
|
||||
{
|
||||
value: "100K+",
|
||||
label: "5-Star Reviews",
|
||||
},
|
||||
{
|
||||
value: "98%",
|
||||
label: "Customer Satisfaction",
|
||||
},
|
||||
]}
|
||||
title="Loved by Viewers"
|
||||
description="Join our growing community."
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="faq" data-section="faq">
|
||||
<FaqBase
|
||||
textboxLayout="default"
|
||||
useInvertedBackground={false}
|
||||
faqs={[
|
||||
{
|
||||
id: "q1",
|
||||
title: "Is it HD?",
|
||||
content: "Yes, all plans include high-definition options.",
|
||||
},
|
||||
{
|
||||
id: "q2",
|
||||
title: "Cancel anytime?",
|
||||
content: "Yes, you can cancel your subscription at any time.",
|
||||
},
|
||||
{
|
||||
id: "q3",
|
||||
title: "Do you support mobile?",
|
||||
content: "Our platform works across all modern mobile and desktop browsers.",
|
||||
},
|
||||
]}
|
||||
title="Common Questions"
|
||||
description="We are here to help."
|
||||
faqsAnimation="slide-up"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="contact" data-section="contact">
|
||||
<ContactSplit
|
||||
useInvertedBackground={false}
|
||||
background={{
|
||||
variant: "plain",
|
||||
}}
|
||||
tag="Get in touch"
|
||||
title="Ready to Watch?"
|
||||
description="Sign up and explore thousands of titles today."
|
||||
mediaAnimation="slide-up"
|
||||
imageSrc="http://img.b2bpic.net/free-photo/movie-concept-with-clapperboard-remote-control_23-2147681332.jpg"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="footer" data-section="footer">
|
||||
<FooterLogoEmphasis
|
||||
columns={[
|
||||
{
|
||||
items: [
|
||||
{
|
||||
label: "Home",
|
||||
href: "/",
|
||||
},
|
||||
{
|
||||
label: "About",
|
||||
href: "#",
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
items: [
|
||||
{
|
||||
label: "Support",
|
||||
href: "#",
|
||||
},
|
||||
{
|
||||
label: "Privacy",
|
||||
href: "#",
|
||||
},
|
||||
],
|
||||
},
|
||||
{ items: [{ label: "Home", href: "/" }, { label: "Dashboard", href: "#subscriber" }] },
|
||||
{ items: [{ label: "Support", href: "#" }, { label: "Privacy", href: "#" }] },
|
||||
]}
|
||||
logoText="CineStream"
|
||||
/>
|
||||
@@ -423,4 +120,4 @@ export default function LandingPage() {
|
||||
</ReactLenis>
|
||||
</ThemeProvider>
|
||||
);
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user