174 lines
8.5 KiB
TypeScript
174 lines
8.5 KiB
TypeScript
"use client";
|
|
|
|
import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
|
|
import ReactLenis from "lenis/react";
|
|
import ContactCenter from '@/components/sections/contact/ContactCenter';
|
|
import FaqDouble from '@/components/sections/faq/FaqDouble';
|
|
import FooterBase from '@/components/sections/footer/FooterBase';
|
|
import HeroBillboardScroll from '@/components/sections/hero/HeroBillboardScroll';
|
|
import NavbarStyleCentered from '@/components/navbar/NavbarStyleCentered/NavbarStyleCentered';
|
|
import PricingCardOne from '@/components/sections/pricing/PricingCardOne';
|
|
import ProductCardThree from '@/components/sections/product/ProductCardThree';
|
|
import TestimonialCardSixteen from '@/components/sections/testimonial/TestimonialCardSixteen';
|
|
|
|
export default function LandingPage() {
|
|
return (
|
|
<ThemeProvider
|
|
defaultButtonVariant="shift-hover"
|
|
defaultTextAnimation="entrance-slide"
|
|
borderRadius="rounded"
|
|
contentWidth="medium"
|
|
sizing="medium"
|
|
background="circleGradient"
|
|
cardStyle="glass-elevated"
|
|
primaryButtonStyle="gradient"
|
|
secondaryButtonStyle="glass"
|
|
headingFontWeight="bold"
|
|
>
|
|
<ReactLenis root>
|
|
<div id="nav" data-section="nav" className="text-center">
|
|
<NavbarStyleCentered
|
|
navItems={[
|
|
{ name: "Home", id: "home" },
|
|
{ name: "Anime", id: "anime" },
|
|
{ name: "Marvel", id: "marvel" },
|
|
{ name: "Lifestyle", id: "lifestyle" },
|
|
{ name: "Pricing", id: "pricing" },
|
|
]}
|
|
brandName="PosterStudio"
|
|
/>
|
|
</div>
|
|
|
|
<div id="home" data-section="home" className="text-center">
|
|
<HeroBillboardScroll
|
|
background={{ variant: "gradient-bars" }}
|
|
title="Elevate Your Space with Art"
|
|
description="Discover curated posters from anime, Marvel, lifestyle, and more. Premium quality prints for every collector."
|
|
imageSrc="http://img.b2bpic.net/free-photo/home-plant-decoration-arrangement-with-copy-space_23-2149090639.jpg"
|
|
imageAlt="poster shop interior"
|
|
/>
|
|
</div>
|
|
|
|
<div id="anime" data-section="anime" className="text-center">
|
|
<ProductCardThree
|
|
animationType="slide-up"
|
|
textboxLayout="default"
|
|
gridVariant="three-columns-all-equal-width"
|
|
useInvertedBackground={true}
|
|
buttons={[{ text: "Buy Now", href: "#" }]}
|
|
products={[
|
|
{ id: "a1", name: "Samurai Spirit", price: "$29", imageSrc: "http://img.b2bpic.net/free-photo/anime-character-near-galaxy-planet-illustration_23-2151749864.jpg", imageAlt: "anime style poster" },
|
|
{ id: "a2", name: "Cyber City", price: "$29", imageSrc: "http://img.b2bpic.net/free-photo/anime-style-character-space_23-2151134173.jpg", imageAlt: "anime style poster" },
|
|
{ id: "a3", name: "Hidden Leaf", price: "$29", imageSrc: "http://img.b2bpic.net/free-photo/anime-character-using-virtual-reality-glasses-metaverse_23-2151568904.jpg", imageAlt: "anime style poster" },
|
|
]}
|
|
title="Anime Collection"
|
|
description="Bold designs inspired by your favorite series."
|
|
/>
|
|
</div>
|
|
|
|
<div id="marvel" data-section="marvel" className="text-center">
|
|
<ProductCardThree
|
|
animationType="slide-up"
|
|
textboxLayout="default"
|
|
gridVariant="three-columns-all-equal-width"
|
|
useInvertedBackground={false}
|
|
buttons={[{ text: "Buy Now", href: "#" }]}
|
|
products={[
|
|
{ id: "m1", name: "Infinity Gauntlet", price: "$35", imageSrc: "http://img.b2bpic.net/free-photo/cartoon-superhero-illustration_23-2151732579.jpg", imageAlt: "comic book poster" },
|
|
{ id: "m2", name: "Armor Suit", price: "$35", imageSrc: "http://img.b2bpic.net/free-photo/cartoon-superhero-illustration_23-2151732573.jpg", imageAlt: "comic book poster" },
|
|
{ id: "m3", name: "Spider Web", price: "$35", imageSrc: "http://img.b2bpic.net/free-photo/conceptual-3d-illustration-basketball-player-dunking-motion-design_183364-124102.jpg", imageAlt: "comic book poster" },
|
|
]}
|
|
title="Marvel Universe"
|
|
description="Iconic heroes and legendary scenes."
|
|
/>
|
|
</div>
|
|
|
|
<div id="lifestyle" data-section="lifestyle" className="text-center">
|
|
<ProductCardThree
|
|
animationType="slide-up"
|
|
textboxLayout="default"
|
|
gridVariant="three-columns-all-equal-width"
|
|
useInvertedBackground={true}
|
|
buttons={[{ text: "Buy Now", href: "#" }]}
|
|
products={[
|
|
{ id: "l1", name: "Retro Rides", price: "$25", imageSrc: "http://img.b2bpic.net/free-photo/vintage-car-sunset_23-2148765432.jpg" },
|
|
{ id: "l2", name: "Urban Tracks", price: "$25", imageSrc: "http://img.b2bpic.net/free-photo/city-lights-lifestyle_23-2148901234.jpg" },
|
|
{ id: "l3", name: "Summer Vibes", price: "$25", imageSrc: "http://img.b2bpic.net/free-photo/summer-road-trip_23-2148912345.jpg" },
|
|
]}
|
|
title="Lifestyle Collection"
|
|
description="Capture the spirit of your favorite passions."
|
|
/>
|
|
</div>
|
|
|
|
<div id="pricing" data-section="pricing" className="text-center">
|
|
<PricingCardOne
|
|
animationType="slide-up"
|
|
textboxLayout="default"
|
|
useInvertedBackground={false}
|
|
plans={[
|
|
{ id: "p1", badge: "Standard", price: "$15", subtitle: "High-quality Matte Finish", features: ["A4 Size", "Standard Paper", "Fast Shipping"] },
|
|
{ id: "p2", badge: "Premium", price: "$29", subtitle: "Luxury Glossy Finish", features: ["A3 Size", "Thick Cardstock", "Framing Included"] },
|
|
{ id: "p3", badge: "Canvas", price: "$49", subtitle: "Gallery Quality Canvas", features: ["Large Size", "Museum Grade", "Ready to Hang"] },
|
|
]}
|
|
title="Flexible Pricing"
|
|
description="Choose the quality that fits your space."
|
|
/>
|
|
</div>
|
|
|
|
<div id="testimonials" data-section="testimonials" className="text-center">
|
|
<TestimonialCardSixteen
|
|
animationType="slide-up"
|
|
textboxLayout="default"
|
|
useInvertedBackground={true}
|
|
testimonials={[
|
|
{ id: "t1", name: "Alice M.", role: "Collector", company: "Fanbase", rating: 5, imageSrc: "http://img.b2bpic.net/free-photo/young-woman-drinking-reading-bed_23-2147896578.jpg" },
|
|
{ id: "t2", name: "John D.", role: "Designer", company: "Creative", rating: 5, imageSrc: "http://img.b2bpic.net/free-photo/woman-holding-mock-up-magazine_23-2148295436.jpg" },
|
|
]}
|
|
kpiItems={[
|
|
{ value: "5k+", label: "Happy Fans" },
|
|
{ value: "12+", label: "Countries" },
|
|
{ value: "100%", label: "Satisfaction" },
|
|
]}
|
|
title="Collector Feedback"
|
|
description="Hear from our happy art community."
|
|
/>
|
|
</div>
|
|
|
|
<div id="faq" data-section="faq" className="text-center">
|
|
<FaqDouble
|
|
textboxLayout="default"
|
|
useInvertedBackground={false}
|
|
faqs={[
|
|
{ id: "f1", title: "Can I custom print?", content: "Yes, we accept custom orders via our contact form." },
|
|
{ id: "f2", title: "What frames do you use?", content: "We offer premium solid wood frames in black, white, and natural." },
|
|
]}
|
|
title="Questions?"
|
|
description="Here is what you need to know about our posters."
|
|
faqsAnimation="slide-up"
|
|
/>
|
|
</div>
|
|
|
|
<div id="contact" data-section="contact" className="text-center">
|
|
<ContactCenter
|
|
useInvertedBackground={true}
|
|
background={{ variant: "plain" }}
|
|
title="Get in touch"
|
|
description="Reach out for custom requests or support."
|
|
tag="Contact Us"
|
|
/>
|
|
</div>
|
|
|
|
<div id="footer" data-section="footer" className="text-center">
|
|
<FooterBase
|
|
columns={[
|
|
{ title: "Shop", items: [{ label: "Anime", href: "#anime" }, { label: "Marvel", href: "#marvel" }, { label: "Lifestyle", href: "#lifestyle" }] },
|
|
{ title: "Support", items: [{ label: "FAQ", href: "#faq" }, { label: "Contact", href: "#contact" }] },
|
|
]}
|
|
logoText="PosterStudio"
|
|
/>
|
|
</div>
|
|
</ReactLenis>
|
|
</ThemeProvider>
|
|
);
|
|
}
|