123 lines
4.8 KiB
TypeScript
123 lines
4.8 KiB
TypeScript
"use client";
|
|
|
|
import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
|
|
import ReactLenis from "lenis/react";
|
|
import ContactSplit from '@/components/sections/contact/ContactSplit';
|
|
import FaqBase from '@/components/sections/faq/FaqBase';
|
|
import FooterLogoEmphasis from '@/components/sections/footer/FooterLogoEmphasis';
|
|
import HeroSplit from '@/components/sections/hero/HeroSplit';
|
|
import InlineImageSplitTextAbout from '@/components/sections/about/InlineImageSplitTextAbout';
|
|
import MetricCardThree from '@/components/sections/metrics/MetricCardThree';
|
|
import NavbarStyleFullscreen from '@/components/navbar/NavbarStyleFullscreen/NavbarStyleFullscreen';
|
|
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, LayoutDashboard, Settings, CreditCard, History, User } from "lucide-react";
|
|
|
|
export default function LandingPage() {
|
|
return (
|
|
<ThemeProvider
|
|
defaultButtonVariant="icon-arrow"
|
|
defaultTextAnimation="entrance-slide"
|
|
borderRadius="rounded"
|
|
contentWidth="smallMedium"
|
|
sizing="mediumLargeSizeMediumTitles"
|
|
background="noise"
|
|
cardStyle="glass-depth"
|
|
primaryButtonStyle="flat"
|
|
secondaryButtonStyle="glass"
|
|
headingFontWeight="bold"
|
|
>
|
|
<ReactLenis root>
|
|
<div id="nav" data-section="nav">
|
|
<NavbarStyleFullscreen
|
|
navItems={[
|
|
{
|
|
name: "Home", id: "hero"},
|
|
{
|
|
name: "Library", id: "catalog"},
|
|
{
|
|
name: "Plans", id: "pricing"},
|
|
{
|
|
name: "Subscriber Portal", id: "subscriber"},
|
|
]}
|
|
brandName="CineStream"
|
|
/>
|
|
</div>
|
|
|
|
<div id="hero" data-section="hero">
|
|
<HeroSplit
|
|
background={{
|
|
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: "Browse Library", href: "#catalog"},
|
|
]}
|
|
/>
|
|
</div>
|
|
|
|
<div id="subscriber" data-section="subscriber">
|
|
<MetricCardThree
|
|
animationType="slide-up"
|
|
textboxLayout="default"
|
|
useInvertedBackground={false}
|
|
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>
|
|
|
|
<div id="catalog" data-section="catalog">
|
|
<ProductCardFour
|
|
animationType="slide-up"
|
|
textboxLayout="split-description"
|
|
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" }
|
|
]}
|
|
title="Browse Our Library"
|
|
description="Discover top-rated content across all genres."
|
|
/>
|
|
</div>
|
|
|
|
<div id="pricing" data-section="pricing">
|
|
<PricingCardNine
|
|
animationType="slide-up"
|
|
textboxLayout="default"
|
|
useInvertedBackground={false}
|
|
plans={[
|
|
{ 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="footer" data-section="footer">
|
|
<FooterLogoEmphasis
|
|
columns={[
|
|
{ items: [{ label: "Home", href: "/" }, { label: "Dashboard", href: "#subscriber" }] },
|
|
{ items: [{ label: "Support", href: "#" }, { label: "Privacy", href: "#" }] },
|
|
]}
|
|
logoText="CineStream"
|
|
/>
|
|
</div>
|
|
</ReactLenis>
|
|
</ThemeProvider>
|
|
);
|
|
} |