|
|
|
|
@@ -23,10 +23,10 @@ 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" },
|
|
|
|
|
@@ -39,7 +39,7 @@ export default function LandingPage() {
|
|
|
|
|
/>
|
|
|
|
|
</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"
|
|
|
|
|
@@ -49,13 +49,13 @@ 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: "View All", href: "#" }]}
|
|
|
|
|
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" },
|
|
|
|
|
@@ -66,13 +66,13 @@ export default function LandingPage() {
|
|
|
|
|
/>
|
|
|
|
|
</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: "View All", href: "#" }]}
|
|
|
|
|
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" },
|
|
|
|
|
@@ -83,13 +83,13 @@ export default function LandingPage() {
|
|
|
|
|
/>
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
<div id="lifestyle" data-section="lifestyle">
|
|
|
|
|
<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: "View All", href: "#" }]}
|
|
|
|
|
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" },
|
|
|
|
|
@@ -100,7 +100,7 @@ export default function LandingPage() {
|
|
|
|
|
/>
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
<div id="pricing" data-section="pricing">
|
|
|
|
|
<div id="pricing" data-section="pricing" className="text-center">
|
|
|
|
|
<PricingCardOne
|
|
|
|
|
animationType="slide-up"
|
|
|
|
|
textboxLayout="default"
|
|
|
|
|
@@ -115,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"
|
|
|
|
|
@@ -134,7 +134,7 @@ 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}
|
|
|
|
|
@@ -148,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" }}
|
|
|
|
|
@@ -158,7 +158,7 @@ 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" }, { label: "Lifestyle", href: "#lifestyle" }] },
|
|
|
|
|
|