Merge version_1 into main #1
512
src/app/page.tsx
512
src/app/page.tsx
@@ -14,395 +14,149 @@ import TestimonialCardSixteen from '@/components/sections/testimonial/Testimonia
|
||||
export default function LandingPage() {
|
||||
return (
|
||||
<ThemeProvider
|
||||
defaultButtonVariant="shift-hover"
|
||||
defaultTextAnimation="entrance-slide"
|
||||
borderRadius="rounded"
|
||||
defaultButtonVariant="shift-hover"
|
||||
defaultTextAnimation="entrance-slide"
|
||||
borderRadius="rounded"
|
||||
contentWidth="medium"
|
||||
sizing="medium"
|
||||
background="circleGradient"
|
||||
cardStyle="glass-elevated"
|
||||
primaryButtonStyle="gradient"
|
||||
secondaryButtonStyle="glass"
|
||||
headingFontWeight="normal"
|
||||
>
|
||||
<ReactLenis root>
|
||||
<div id="nav" data-section="nav">
|
||||
<NavbarStyleCentered
|
||||
navItems={[
|
||||
{
|
||||
name: "Home",
|
||||
id: "home",
|
||||
},
|
||||
{
|
||||
name: "Anime",
|
||||
id: "anime",
|
||||
},
|
||||
{
|
||||
name: "Marvel",
|
||||
id: "marvel",
|
||||
},
|
||||
{
|
||||
name: "Pricing",
|
||||
id: "pricing",
|
||||
},
|
||||
]}
|
||||
brandName="PosterStudio"
|
||||
/>
|
||||
</div>
|
||||
<div id="nav" data-section="nav">
|
||||
<NavbarStyleCentered
|
||||
navItems={[
|
||||
{ name: "Home", id: "home" },
|
||||
{ name: "Anime", id: "anime" },
|
||||
{ name: "Marvel", id: "marvel" },
|
||||
{ name: "Pricing", id: "pricing" },
|
||||
]}
|
||||
brandName="PosterStudio"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="home" data-section="home">
|
||||
<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="home" data-section="home">
|
||||
<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">
|
||||
<ProductCardThree
|
||||
animationType="slide-up"
|
||||
textboxLayout="default"
|
||||
gridVariant="three-columns-all-equal-width"
|
||||
useInvertedBackground={true}
|
||||
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",
|
||||
},
|
||||
{
|
||||
id: "a4",
|
||||
name: "Moonlight Magic",
|
||||
price: "$29",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/anime-style-character-space_23-2151134316.jpg",
|
||||
imageAlt: "anime style poster",
|
||||
},
|
||||
{
|
||||
id: "a5",
|
||||
name: "Titan Fight",
|
||||
price: "$29",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/anime-casino-illustration_23-2151726871.jpg",
|
||||
imageAlt: "anime style poster",
|
||||
},
|
||||
{
|
||||
id: "a6",
|
||||
name: "Soul Eater",
|
||||
price: "$29",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/3d-rendering-cat-lady-illustration_23-2151904629.jpg",
|
||||
imageAlt: "anime style poster",
|
||||
},
|
||||
]}
|
||||
title="Anime Collection"
|
||||
description="Bold designs inspired by your favorite series."
|
||||
/>
|
||||
</div>
|
||||
<div id="anime" data-section="anime">
|
||||
<ProductCardThree
|
||||
animationType="slide-up"
|
||||
textboxLayout="default"
|
||||
gridVariant="three-columns-all-equal-width"
|
||||
useInvertedBackground={true}
|
||||
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" },
|
||||
{ id: "a4", name: "Moonlight Magic", price: "$29", imageSrc: "http://img.b2bpic.net/free-photo/anime-style-character-space_23-2151134316.jpg", imageAlt: "anime style poster" },
|
||||
{ id: "a5", name: "Titan Fight", price: "$29", imageSrc: "http://img.b2bpic.net/free-photo/anime-casino-illustration_23-2151726871.jpg", imageAlt: "anime style poster" },
|
||||
{ id: "a6", name: "Soul Eater", price: "$29", imageSrc: "http://img.b2bpic.net/free-photo/3d-rendering-cat-lady-illustration_23-2151904629.jpg", imageAlt: "anime style poster" },
|
||||
]}
|
||||
title="Anime Collection"
|
||||
description="Bold designs inspired by your favorite series."
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="marvel" data-section="marvel">
|
||||
<ProductCardThree
|
||||
animationType="slide-up"
|
||||
textboxLayout="default"
|
||||
gridVariant="three-columns-all-equal-width"
|
||||
useInvertedBackground={false}
|
||||
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",
|
||||
},
|
||||
{
|
||||
id: "m4",
|
||||
name: "Thunder God",
|
||||
price: "$35",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/cartoon-superhero-illustration_23-2151732578.jpg",
|
||||
imageAlt: "comic book poster",
|
||||
},
|
||||
{
|
||||
id: "m5",
|
||||
name: "Galactic Guardian",
|
||||
price: "$35",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/3d-rendering-tropical-bird-illustration_23-2151875096.jpg",
|
||||
imageAlt: "comic book poster",
|
||||
},
|
||||
{
|
||||
id: "m6",
|
||||
name: "Witch Magic",
|
||||
price: "$35",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/3d-rendering-tropical-bird-illustration_23-2151875080.jpg",
|
||||
imageAlt: "comic book poster",
|
||||
},
|
||||
]}
|
||||
title="Marvel Universe"
|
||||
description="Iconic heroes and legendary scenes."
|
||||
/>
|
||||
</div>
|
||||
<div id="marvel" data-section="marvel">
|
||||
<ProductCardThree
|
||||
animationType="slide-up"
|
||||
textboxLayout="default"
|
||||
gridVariant="three-columns-all-equal-width"
|
||||
useInvertedBackground={false}
|
||||
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" },
|
||||
{ id: "m4", name: "Thunder God", price: "$35", imageSrc: "http://img.b2bpic.net/free-photo/cartoon-superhero-illustration_23-2151732578.jpg", imageAlt: "comic book poster" },
|
||||
{ id: "m5", name: "Galactic Guardian", price: "$35", imageSrc: "http://img.b2bpic.net/free-photo/3d-rendering-tropical-bird-illustration_23-2151875096.jpg", imageAlt: "comic book poster" },
|
||||
{ id: "m6", name: "Witch Magic", price: "$35", imageSrc: "http://img.b2bpic.net/free-photo/3d-rendering-tropical-bird-illustration_23-2151875080.jpg", imageAlt: "comic book poster" },
|
||||
]}
|
||||
title="Marvel Universe"
|
||||
description="Iconic heroes and legendary scenes."
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="lifestyle" data-section="lifestyle">
|
||||
<ProductCardThree
|
||||
animationType="slide-up"
|
||||
textboxLayout="default"
|
||||
gridVariant="three-columns-all-equal-width"
|
||||
useInvertedBackground={true}
|
||||
products={[
|
||||
{
|
||||
id: "l1",
|
||||
name: "Classic Vintage Car",
|
||||
price: "$25",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/back-view-woman-arranging-painting_23-2148304990.jpg",
|
||||
imageAlt: "minimalist poster design",
|
||||
},
|
||||
{
|
||||
id: "l2",
|
||||
name: "Sport Bike",
|
||||
price: "$25",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/three-golden-frames-modern-setting_187299-47561.jpg",
|
||||
imageAlt: "minimalist poster design",
|
||||
},
|
||||
{
|
||||
id: "l3",
|
||||
name: "Jazz Night",
|
||||
price: "$25",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/woman-holding-flower-painting_23-2148372185.jpg",
|
||||
imageAlt: "minimalist poster design",
|
||||
},
|
||||
{
|
||||
id: "l4",
|
||||
name: "Vinyl Beats",
|
||||
price: "$25",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/stack-rolled-papers-white-background_9975-134433.jpg",
|
||||
imageAlt: "minimalist poster design",
|
||||
},
|
||||
{
|
||||
id: "l5",
|
||||
name: "Highway Drive",
|
||||
price: "$25",
|
||||
imageSrc: "http://img.b2bpic.net/free-psd/vertical-poster-minimal-style-art-gallery-with-man_23-2148821381.jpg",
|
||||
imageAlt: "minimalist poster design",
|
||||
},
|
||||
{
|
||||
id: "l6",
|
||||
name: "Bass Drop",
|
||||
price: "$25",
|
||||
imageSrc: "http://img.b2bpic.net/free-vector/flat-mosaic-brochure-template_1142-13967.jpg",
|
||||
imageAlt: "minimalist poster design",
|
||||
},
|
||||
]}
|
||||
title="Lifestyle Posters"
|
||||
description="Cars, bikes, and music inspired art."
|
||||
/>
|
||||
</div>
|
||||
<div id="pricing" data-section="pricing">
|
||||
<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="pricing" data-section="pricing">
|
||||
<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">
|
||||
<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" },
|
||||
{ id: "t3", name: "Sara K.", role: "Fan", company: "Otaku", rating: 5, imageSrc: "http://img.b2bpic.net/free-photo/androgynous-avatar-non-binary-queer-person_23-2151100186.jpg" },
|
||||
{ id: "t4", name: "Mark L.", role: "Buyer", company: "MarvelClub", rating: 5, imageSrc: "http://img.b2bpic.net/free-photo/3d-render-cartoon-woman-hand-with-thumbs-gesture-asking-lift_460848-7446.jpg" },
|
||||
{ id: "t5", name: "Jane P.", role: "Artist", company: "Studios", rating: 5, imageSrc: "http://img.b2bpic.net/free-photo/high-angle-woman-floor-with-brush_23-2148263478.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="testimonials" data-section="testimonials">
|
||||
<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",
|
||||
},
|
||||
{
|
||||
id: "t3",
|
||||
name: "Sara K.",
|
||||
role: "Fan",
|
||||
company: "Otaku",
|
||||
rating: 5,
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/androgynous-avatar-non-binary-queer-person_23-2151100186.jpg",
|
||||
},
|
||||
{
|
||||
id: "t4",
|
||||
name: "Mark L.",
|
||||
role: "Buyer",
|
||||
company: "MarvelClub",
|
||||
rating: 5,
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/3d-render-cartoon-woman-hand-with-thumbs-gesture-asking-lift_460848-7446.jpg",
|
||||
},
|
||||
{
|
||||
id: "t5",
|
||||
name: "Jane P.",
|
||||
role: "Artist",
|
||||
company: "Studios",
|
||||
rating: 5,
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/high-angle-woman-floor-with-brush_23-2148263478.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">
|
||||
<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." },
|
||||
{ id: "f3", title: "Can I change pricing?", content: "Our store management allows dynamic pricing updates for individual sellers." },
|
||||
]}
|
||||
title="Questions?"
|
||||
description="Here is what you need to know about our posters."
|
||||
faqsAnimation="slide-up"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="faq" data-section="faq">
|
||||
<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.",
|
||||
},
|
||||
{
|
||||
id: "f3",
|
||||
title: "Can I change pricing?",
|
||||
content: "Our store management allows dynamic pricing updates for individual sellers.",
|
||||
},
|
||||
]}
|
||||
title="Questions?"
|
||||
description="Here is what you need to know about our posters."
|
||||
faqsAnimation="slide-up"
|
||||
/>
|
||||
</div>
|
||||
<div id="contact" data-section="contact">
|
||||
<ContactCenter
|
||||
useInvertedBackground={true}
|
||||
background={{ variant: "plain" }}
|
||||
title="Get in touch"
|
||||
description="Reach out for custom requests or support."
|
||||
tag="Contact Us"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="contact" data-section="contact">
|
||||
<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">
|
||||
<FooterBase
|
||||
columns={[
|
||||
{
|
||||
title: "Shop",
|
||||
items: [
|
||||
{
|
||||
label: "Anime",
|
||||
href: "#anime",
|
||||
},
|
||||
{
|
||||
label: "Marvel",
|
||||
href: "#marvel",
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
title: "Support",
|
||||
items: [
|
||||
{
|
||||
label: "FAQ",
|
||||
href: "#faq",
|
||||
},
|
||||
{
|
||||
label: "Contact",
|
||||
href: "#contact",
|
||||
},
|
||||
],
|
||||
},
|
||||
]}
|
||||
logoText="PosterStudio"
|
||||
/>
|
||||
</div>
|
||||
<div id="footer" data-section="footer">
|
||||
<FooterBase
|
||||
columns={[
|
||||
{ title: "Shop", items: [{ label: "Anime", href: "#anime" }, { label: "Marvel", href: "#marvel" }] },
|
||||
{ title: "Support", items: [{ label: "FAQ", href: "#faq" }, { label: "Contact", href: "#contact" }] },
|
||||
]}
|
||||
logoText="PosterStudio"
|
||||
/>
|
||||
</div>
|
||||
</ReactLenis>
|
||||
</ThemeProvider>
|
||||
);
|
||||
|
||||
Reference in New Issue
Block a user