|
|
|
|
@@ -23,22 +23,23 @@ export default function LandingPage() {
|
|
|
|
|
cardStyle="glass-elevated"
|
|
|
|
|
primaryButtonStyle="gradient"
|
|
|
|
|
secondaryButtonStyle="glass"
|
|
|
|
|
headingFontWeight="normal"
|
|
|
|
|
headingFontWeight="bold"
|
|
|
|
|
>
|
|
|
|
|
<ReactLenis root>
|
|
|
|
|
<div id="nav" data-section="nav">
|
|
|
|
|
<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">
|
|
|
|
|
<div id="home" data-section="home" className="text-center">
|
|
|
|
|
<HeroBillboardScroll
|
|
|
|
|
background={{ variant: "gradient-bars" }}
|
|
|
|
|
title="Elevate Your Space with Art"
|
|
|
|
|
@@ -48,45 +49,58 @@ export default function LandingPage() {
|
|
|
|
|
/>
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
<div id="anime" data-section="anime">
|
|
|
|
|
<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" },
|
|
|
|
|
{ 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">
|
|
|
|
|
<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" },
|
|
|
|
|
{ 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="pricing" data-section="pricing">
|
|
|
|
|
<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"
|
|
|
|
|
@@ -101,7 +115,7 @@ export default function LandingPage() {
|
|
|
|
|
/>
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
<div id="testimonials" data-section="testimonials">
|
|
|
|
|
<div id="testimonials" data-section="testimonials" className="text-center">
|
|
|
|
|
<TestimonialCardSixteen
|
|
|
|
|
animationType="slide-up"
|
|
|
|
|
textboxLayout="default"
|
|
|
|
|
@@ -109,9 +123,6 @@ export default function LandingPage() {
|
|
|
|
|
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" },
|
|
|
|
|
@@ -123,14 +134,13 @@ export default function LandingPage() {
|
|
|
|
|
/>
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
<div id="faq" data-section="faq">
|
|
|
|
|
<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." },
|
|
|
|
|
{ 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."
|
|
|
|
|
@@ -138,7 +148,7 @@ export default function LandingPage() {
|
|
|
|
|
/>
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
<div id="contact" data-section="contact">
|
|
|
|
|
<div id="contact" data-section="contact" className="text-center">
|
|
|
|
|
<ContactCenter
|
|
|
|
|
useInvertedBackground={true}
|
|
|
|
|
background={{ variant: "plain" }}
|
|
|
|
|
@@ -148,10 +158,10 @@ export default function LandingPage() {
|
|
|
|
|
/>
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
<div id="footer" data-section="footer">
|
|
|
|
|
<div id="footer" data-section="footer" className="text-center">
|
|
|
|
|
<FooterBase
|
|
|
|
|
columns={[
|
|
|
|
|
{ title: "Shop", items: [{ label: "Anime", href: "#anime" }, { label: "Marvel", href: "#marvel" }] },
|
|
|
|
|
{ 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"
|
|
|
|
|
|
