227 lines
18 KiB
TypeScript
227 lines
18 KiB
TypeScript
"use client";
|
||
|
||
import NavbarStyleFullscreen from '@/components/navbar/NavbarStyleFullscreen/NavbarStyleFullscreen';
|
||
import HeroOverlay from '@/components/sections/hero/HeroOverlay';
|
||
import FeatureCardTwelve from '@/components/sections/feature/FeatureCardTwelve';
|
||
import ProductCardTwo from '@/components/sections/product/ProductCardTwo';
|
||
import MetricCardFourteen from '@/components/sections/metrics/MetricCardFourteen';
|
||
import SocialProofOne from '@/components/sections/socialProof/SocialProofOne';
|
||
import TestimonialCardTen from '@/components/sections/testimonial/TestimonialCardTen';
|
||
import MediaAbout from '@/components/sections/about/MediaAbout';
|
||
import FaqSplitMedia from '@/components/sections/faq/FaqSplitMedia';
|
||
import ContactCenter from '@/components/sections/contact/ContactCenter';
|
||
import FooterSimple from '@/components/sections/footer/FooterSimple';
|
||
import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
|
||
import { Lato } from "next/font/google";
|
||
|
||
const lato = Lato({
|
||
variable: "--font-lato", subsets: ["latin"],
|
||
weight: ["100", "300", "400", "700", "900"]
|
||
});
|
||
|
||
const assetMap = [{"id":"logo","url":"http://img.b2bpic.net/free-photo/arrow-with-bright-neon-colors_23-2151205031.jpg","alt":"luxury sneaker brand logo neon"},{"id":"hero-sneaker-3d","url":"http://img.b2bpic.net/free-photo/neon-robot-vacuum-cleaner_23-2151349229.jpg","alt":"3d luxury sneaker model rotating"},{"id":"customization-interface","url":"http://img.b2bpic.net/free-photo/groom-s-classy-shoes-lie-soft-armchair_8353-8463.jpg","alt":"3d sneaker customization software"},{"id":"product-1","url":"http://img.b2bpic.net/free-photo/close-up-futuristic-sneakers_23-2151005661.jpg","alt":"luxury black sneaker neon accents"},{"id":"product-2","url":"http://img.b2bpic.net/free-photo/close-up-person-wearing-futuristic-sneakers_23-2151005702.jpg","alt":"luxury white sneaker neon pink"},{"id":"product-3","url":"http://img.b2bpic.net/free-photo/flat-lay-hard-drive-with-orange-light_23-2149413408.jpg","alt":"luxury gray sneaker electric green"},{"id":"product-4","url":"http://img.b2bpic.net/free-photo/yellow-sports-shoe-with-elegant-design-generated-by-ai_188544-19644.jpg","alt":"luxury metallic sneaker purple neon"},{"id":"product-5","url":"http://img.b2bpic.net/free-photo/close-up-person-wearing-futuristic-sneakers_23-2151005685.jpg","alt":"luxury matte black sneaker orange neon"},{"id":"product-6","url":"http://img.b2bpic.net/free-photo/side-view-leg-wearing-bowling-shoe_23-2150565686.jpg","alt":"luxury transparent sneaker glowing"},{"id":"testimonial-1","url":"http://img.b2bpic.net/free-photo/portrait-indigenous-person-integrating-society_23-2151102427.jpg","alt":"stylish man luxury fashion portrait"},{"id":"testimonial-2","url":"http://img.b2bpic.net/free-photo/modern-young-woman-grey-suit-poses-before-grey-brick-wall_8353-1577.jpg","alt":"chic woman luxury fashion portrait"},{"id":"testimonial-3","url":"http://img.b2bpic.net/free-photo/portrait-beautiful-woman-posing-blue-jacket-with-paint-brush-stroke_23-2149020779.jpg","alt":"stylish person avant-garde fashion"},{"id":"testimonial-4","url":"http://img.b2bpic.net/free-photo/beautiful-attractive-woman-dressed-black-dress-posing-pier-luxury-resort-hotel-summer-vacation-tropical-beach_285396-6330.jpg","alt":"dynamic individual luxury athletic wear"},{"id":"testimonial-5","url":"http://img.b2bpic.net/free-photo/young-beautiful-woman-business-suit_1303-17722.jpg","alt":"fashion critic luxury portrait dark"},{"id":"company-history","url":"http://img.b2bpic.net/free-photo/3d-shoe-shape-glowing-with-bright-holographic-colors_23-2151037288.jpg","alt":"futuristic sneaker craftsmanship neon"},{"id":"faq-support","url":"http://img.b2bpic.net/free-photo/medium-shot-woman-working-late-night_23-2150170757.jpg","alt":"futuristic customer support interface"},{"id":"avatar-1","url":"http://img.b2bpic.net/free-photo/close-up-portrait-attractive-male-model-color-flash-light_158595-5113.jpg","alt":"modern confident man avatar"},{"id":"avatar-2","url":"http://img.b2bpic.net/free-photo/young-girl-with-pink-hairs-looks-stressed_114579-21997.jpg","alt":"modern stylish woman avatar"},{"id":"avatar-3","url":"http://img.b2bpic.net/free-photo/portrait-man-cartoon-style_23-2151133982.jpg","alt":"dynamic person avatar"},{"id":"avatar-4","url":"http://img.b2bpic.net/free-photo/pixel-art-design-portrait-bitmap_23-2149232484.jpg","alt":"creative person avatar"}];
|
||
|
||
const getAssetUrl = (id) => {
|
||
const asset = assetMap.find(a => a.id === id);
|
||
return asset ? asset.url : "";
|
||
};
|
||
|
||
const getAssetAlt = (id, fallbackAlt) => {
|
||
const asset = assetMap.find(a => a.id === id);
|
||
return asset ? asset.alt : fallbackAlt;
|
||
};
|
||
|
||
export default function LandingPage() {
|
||
return (
|
||
<ThemeProvider
|
||
defaultButtonVariant={"directional-hover"}
|
||
defaultTextAnimation={"entrance-slide"}
|
||
borderRadius={"soft"}
|
||
contentWidth={"smallMedium"}
|
||
sizing={"largeSmallSizeLargeTitles"}
|
||
background={"noise"}
|
||
cardStyle={"layered-gradient"}
|
||
primaryButtonStyle={"flat"}
|
||
secondaryButtonStyle={"glass"}
|
||
headingFontWeight={"normal"}
|
||
>
|
||
<div id="nav" data-section="nav">
|
||
<NavbarStyleFullscreen
|
||
brandName={"Apex Kicks"}
|
||
logoSrc={getAssetUrl("logo")}
|
||
logoAlt={getAssetAlt("logo", "Apex Kicks Logo")}
|
||
navItems={[
|
||
{ name: "Home", id: "#home" },
|
||
{ name: "Collections", id: "#collections" },
|
||
{ name: "Customize", id: "#customize" },
|
||
{ name: "Reviews", id: "#reviews" },
|
||
{ name: "About", id: "#about" },
|
||
{ name: "Contact", id: "#contact" }
|
||
]}
|
||
/>
|
||
</div>
|
||
|
||
<div id="home" data-section="home">
|
||
<HeroOverlay
|
||
title={"Future. Elevated."}
|
||
description={"Experience the next dimension of luxury footwear. Immerse yourself in our exclusive collection of 3D-showcased sneakers, crafted for unparalleled style and performance."}
|
||
tag={"Apex Kicks"}
|
||
buttons={[
|
||
{ text: "Shop Now", href: "#collections" },
|
||
{ text: "Customize Your Pair", href: "#customize" }
|
||
]}
|
||
avatars={[
|
||
{ src: getAssetUrl("avatar-1"), alt: getAssetAlt("avatar-1", "Customer 1") },
|
||
{ src: getAssetUrl("avatar-2"), alt: getAssetAlt("avatar-2", "Customer 2") },
|
||
{ src: getAssetUrl("avatar-3"), alt: getAssetAlt("avatar-3", "Customer 3") },
|
||
{ src: getAssetUrl("avatar-4"), alt: getAssetAlt("avatar-4", "Customer 4") }
|
||
]}
|
||
avatarText={"Join 50k+ Sneakerheads"}
|
||
videoSrc={getAssetUrl("hero-sneaker-3d")}
|
||
imageAlt={getAssetAlt("hero-sneaker-3d", "3D luxury sneaker model rotating")}
|
||
videoAriaLabel={"Animated 3D sneaker showcase"}
|
||
showDimOverlay={true}
|
||
showBlur={true}
|
||
textPosition={"bottom"}
|
||
/>
|
||
</div>
|
||
|
||
<div id="customize" data-section="customize">
|
||
<FeatureCardTwelve
|
||
title={"Unleash Your Vision"}
|
||
description={"Design your dream pair with our intuitive 3D customization studio. Select colors, materials, and laces in real-time to create a sneaker that’s uniquely yours."}
|
||
features={[
|
||
{ id: "f1", label: "Real-time 3D Preview", title: "Visualize Instantly", items: ["See changes applied to your sneaker model in high-fidelity 3D, instantly.", "Rotate, zoom, and inspect every angle of your personalized design.", "Experience dynamic lighting and shadow updates as you customize."] },
|
||
{ id: "f2", label: "Premium Material Library", title: "Select Excellence", items: ["Choose from an exclusive selection of virtual leathers, suedes, and performance fabrics.", "Access cutting-edge, realistic material textures for unparalleled detail.", "Experiment with exotic and limited-edition finishes for a truly unique look."] },
|
||
{ id: "f3", label: "Exclusive Color Palettes", title: "Curate Your Shade", items: ["Explore a curated palette of luxury colors, including neon accents and iridescent finishes.", "Mix and match distinct color zones to create intricate and striking designs.", "Save and share your favorite color combinations with the Apex community."] }
|
||
]}
|
||
animationType={"slide-up"}
|
||
textboxLayout={"default"}
|
||
useInvertedBackground={false}
|
||
/>
|
||
</div>
|
||
|
||
<div id="collections" data-section="collections">
|
||
<ProductCardTwo
|
||
title={"Explore Our Apex Collections"}
|
||
description={"Discover limited-edition drops and iconic designs. Each pair is a masterpiece, engineered for the elite, showcasing innovative craftsmanship and futuristic aesthetics."}
|
||
products={[
|
||
{ id: "p1", brand: "Apex Kicks", name: "Quantum Stride", price: "$799", rating: 5, reviewCount: "245", imageSrc: getAssetUrl("product-1"), imageAlt: getAssetAlt("product-1", "Quantum Stride black sneaker") },
|
||
{ id: "p2", brand: "Apex Kicks", name: "Nebula Glide", price: "$899", rating: 5, reviewCount: "180", imageSrc: getAssetUrl("product-2"), imageAlt: getAssetAlt("product-2", "Nebula Glide white sneaker") },
|
||
{ id: "p3", brand: "Apex Kicks", name: "Pulsar Dash", price: "$749", rating: 4.5, reviewCount: "310", imageSrc: getAssetUrl("product-3"), imageAlt: getAssetAlt("product-3", "Pulsar Dash gray sneaker") },
|
||
{ id: "p4", brand: "Apex Kicks", name: "Chroma Flux", price: "$999", rating: 5, reviewCount: "120", imageSrc: getAssetUrl("product-4"), imageAlt: getAssetAlt("product-4", "Chroma Flux silver sneaker") },
|
||
{ id: "p5", brand: "Apex Kicks", name: "Zenith Runner", price: "$699", rating: 4, reviewCount: "450", imageSrc: getAssetUrl("product-5"), imageAlt: getAssetAlt("product-5", "Zenith Runner matte black sneaker") },
|
||
{ id: "p6", brand: "Apex Kicks", name: "Spectra Ghost", price: "$1199", rating: 5, reviewCount: "88", imageSrc: getAssetUrl("product-6"), imageAlt: getAssetAlt("product-6", "Spectra Ghost transparent sneaker") }
|
||
]}
|
||
carouselMode={"buttons"}
|
||
gridVariant={"uniform-all-items-equal"}
|
||
animationType={"slide-up"}
|
||
textboxLayout={"default"}
|
||
useInvertedBackground={true}
|
||
/>
|
||
</div>
|
||
|
||
<div id="metrics" data-section="metrics">
|
||
<MetricCardFourteen
|
||
title={"Setting New Standards in Luxury Footwear"}
|
||
tag={"Our Impact"}
|
||
metrics={[
|
||
{ id: "m1", value: "50,000+", description: "Satisfied Global Customers" },
|
||
{ id: "m2", value: "100+", description: "Exclusive Sneaker Designs" },
|
||
{ id: "m3", value: "5-Star", description: "Average Customer Rating" },
|
||
{ id: "m4", value: "10M+", description: "Customization Combinations" }
|
||
]}
|
||
metricsAnimation={"blur-reveal"}
|
||
useInvertedBackground={false}
|
||
/>
|
||
</div>
|
||
|
||
<div id="social-proof" data-section="social-proof">
|
||
<SocialProofOne
|
||
names={["Vogue", "Highsnobiety", "Balenciaga", "Complex", "Hypebeast", "Louis Vuitton", "Gucci", "Off-White", "Dior"]}
|
||
title={"Trusted by Icons. Featured in Prestige."}
|
||
description={"Our designs are recognized by top fashion influencers and acclaimed in leading luxury publications, setting trends in high-end footwear."}
|
||
textboxLayout={"default"}
|
||
useInvertedBackground={true}
|
||
speed={50}
|
||
/>
|
||
</div>
|
||
|
||
<div id="reviews" data-section="reviews">
|
||
<TestimonialCardTen
|
||
testimonials={[
|
||
{ id: "t1", title: "Unmatched Quality & Design", quote: "Apex Kicks has truly set a new standard for luxury sneakers. The Quantum Stride is not just a shoe; it's a statement piece. The attention to detail and futuristic design is simply unmatched.", name: "Jordan P.", role: "Fashion Editor", imageSrc: getAssetUrl("testimonial-1"), imageAlt: getAssetAlt("testimonial-1", "Jordan P.") },
|
||
{ id: "t2", title: "The Future of Footwear", quote: "The Nebula Glide feels like walking on air, with a style that turns heads everywhere I go. The customization options allowed me to create a pair that perfectly matches my personal vision. Absolutely revolutionary!", name: "Sarah L.", role: "Creative Director", imageSrc: getAssetUrl("testimonial-2"), imageAlt: getAssetAlt("testimonial-2", "Sarah L.") },
|
||
{ id: "t3", title: "Immersive Customization", quote: "Designing my own pair was an incredibly immersive experience. The 3D preview is so realistic, I felt like I was holding the shoe. My customized Pulsar Dash is now my go-to for both style and comfort.", name: "Alex K.", role: "Sneaker Collector", imageSrc: getAssetUrl("testimonial-3"), imageAlt: getAssetAlt("testimonial-3", "Alex K.") },
|
||
{ id: "t4", title: "Beyond Expectation", quote: "I've never encountered a brand that combines luxury, technology, and performance so flawlessly. The Zenith Runner exceeded all my expectations – durable, stylish, and supremely comfortable. A true investment.", name: "Marcus V.", role: "Athlete & Entrepreneur", imageSrc: getAssetUrl("testimonial-4"), imageAlt: getAssetAlt("testimonial-4", "Marcus V.") },
|
||
{ id: "t5", title: "Aesthetic & Innovation", quote: "Apex Kicks embodies the perfect synergy of aesthetic brilliance and technological innovation. My Chroma Flux pair are a testament to forward-thinking design. I receive compliments every time I wear them.", name: "Chloe B.", role: "Luxury Lifestyle Influencer", imageSrc: getAssetUrl("testimonial-5"), imageAlt: getAssetAlt("testimonial-5", "Chloe B.") }
|
||
]}
|
||
title={"What Our Visionaries Say"}
|
||
description={"Hear from our global community of sneaker enthusiasts who experience the Apex difference – from unparalleled design to cutting-edge performance and seamless customization."}
|
||
textboxLayout={"default"}
|
||
useInvertedBackground={false}
|
||
/>
|
||
</div>
|
||
|
||
<div id="about" data-section="about">
|
||
<MediaAbout
|
||
title={"The Apex Story: Crafting the Future of Footwear"}
|
||
description={"At Apex Kicks, we fuse cutting-edge technology with artisanal craftsmanship to redefine luxury footwear. Our journey is driven by innovation, exclusivity, and a relentless passion for pushing the boundaries of design and performance."}
|
||
tag={"Our Philosophy"}
|
||
buttons={[
|
||
{ text: "Learn More", href: "#" }
|
||
]}
|
||
imageSrc={getAssetUrl("company-history")}
|
||
imageAlt={getAssetAlt("company-history", "Traditional craftsmanship meets futuristic design for sneaker production")}
|
||
useInvertedBackground={true}
|
||
/>
|
||
</div>
|
||
|
||
<div id="faq" data-section="faq">
|
||
<FaqSplitMedia
|
||
faqs={[
|
||
{ id: "q1", title: "How does the 3D customization work?", content: "Our interactive 3D studio allows you to change colors, materials, and laces on a realistic 3D model in real-time. Simply select your desired options, and watch your unique sneaker come to life before your eyes. You can rotate and zoom to inspect every detail." },
|
||
{ id: "q2", title: "What materials are available for customization?", content: "We offer an exclusive library of premium virtual materials, including various grades of vegan leather, performance suedes, breathable mesh fabrics, and unique metallic or iridescent finishes. Each material is rendered with exceptional realism for an accurate preview." },
|
||
{ id: "q3", title: "What is your shipping and return policy?", content: "We offer worldwide express shipping for all orders. For customized pairs, due to their unique nature, returns are handled on a case-by-case basis, generally only for manufacturing defects. Uncustomized collection pieces follow our standard 30-day return policy. Please refer to our full T&Cs for details." },
|
||
{ id: "q4", title: "Are Apex Kicks sneakers truly sustainable?", content: "Sustainability is a core pillar of Apex Kicks. We prioritize the use of ethically sourced, high-performance vegan materials and minimize waste through our on-demand customization model. Our goal is to craft luxury footwear with a reduced environmental footprint without compromising on quality or design." }
|
||
]}
|
||
imageSrc={getAssetUrl("faq-support")}
|
||
imageAlt={getAssetAlt("faq-support", "Futuristic customer support interface")}
|
||
mediaAnimation={"slide-up"}
|
||
mediaPosition={"left"}
|
||
title={"Your Questions. Answered."}
|
||
description={"Find quick answers to common inquiries about our products, 3D customization process, shipping, and brand philosophy."}
|
||
faqsAnimation={"opacity"}
|
||
textboxLayout={"default"}
|
||
useInvertedBackground={false}
|
||
/>
|
||
</div>
|
||
|
||
<div id="contact" data-section="contact">
|
||
<ContactCenter
|
||
tag={"Connect With Us"}
|
||
title={"Beyond the Horizon"}
|
||
description={"Have a unique request, collaboration idea, or need personalized assistance? Our dedicated team is ready to assist you in pushing the boundaries of sneaker innovation and luxury experience."}
|
||
background={{"variant":"downward-rays-animated"}}
|
||
useInvertedBackground={true}
|
||
inputPlaceholder={"Enter your email"}
|
||
buttonText={"Send Inquiry"}
|
||
termsText={"By sending an inquiry, you agree to our Terms and Conditions and Privacy Policy."}
|
||
/>
|
||
</div>
|
||
|
||
<div id="footer" data-section="footer">
|
||
<FooterSimple
|
||
columns={[
|
||
{ title: "Shop", items: [{ label: "Collections", href: "#collections" }, { label: "Customize", href: "#customize" }, { label: "New Arrivals", href: "#" }, { label: "Sale", href: "#" }] },
|
||
{ title: "Company", items: [{ label: "About Us", href: "#about" }, { label: "Our Story", href: "#about" }, { label: "Careers", href: "#" }, { label: "Press", href: "#" }] },
|
||
{ title: "Support", items: [{ label: "FAQ", href: "#faq" }, { label: "Contact Us", href: "#contact" }, { label: "Shipping & Returns", href: "#" }, { label: "Warranty", href: "#" }] },
|
||
{ title: "Legal", items: [{ label: "Privacy Policy", href: "#" }, { label: "Terms of Service", href: "#" }, { label: "Cookie Policy", href: "#" }] }
|
||
]}
|
||
bottomLeftText={"© 2024 Apex Kicks. All rights reserved."}
|
||
bottomRightText={"Crafted for the Future."}
|
||
/>
|
||
</div>
|
||
</ThemeProvider>
|
||
);
|
||
} |