201 lines
12 KiB
TypeScript
201 lines
12 KiB
TypeScript
"use client";
|
|
|
|
import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
|
|
import ReactLenis from "lenis/react";
|
|
import BlogCardOne from '@/components/sections/blog/BlogCardOne';
|
|
import ContactSplit from '@/components/sections/contact/ContactSplit';
|
|
import FeatureCardTwentyFive from '@/components/sections/feature/FeatureCardTwentyFive';
|
|
import FooterSimple from '@/components/sections/footer/FooterSimple';
|
|
import HeroBillboardTestimonial from '@/components/sections/hero/HeroBillboardTestimonial';
|
|
import MetricCardThree from '@/components/sections/metrics/MetricCardThree';
|
|
import MetricSplitMediaAbout from '@/components/sections/about/MetricSplitMediaAbout';
|
|
import NavbarLayoutFloatingOverlay from '@/components/navbar/NavbarLayoutFloatingOverlay/NavbarLayoutFloatingOverlay';
|
|
import ProductCardFour from '@/components/sections/product/ProductCardFour';
|
|
import { Award, CheckCircle, Shield, Star, Zap } from "lucide-react";
|
|
|
|
export default function LandingPage() {
|
|
return (
|
|
<ThemeProvider
|
|
defaultButtonVariant="directional-hover"
|
|
defaultTextAnimation="entrance-slide"
|
|
borderRadius="soft"
|
|
contentWidth="small"
|
|
sizing="medium"
|
|
background="floatingGradient"
|
|
cardStyle="glass-elevated"
|
|
primaryButtonStyle="diagonal-gradient"
|
|
secondaryButtonStyle="layered"
|
|
headingFontWeight="medium"
|
|
>
|
|
<ReactLenis root>
|
|
<div id="nav" data-section="nav">
|
|
<NavbarLayoutFloatingOverlay
|
|
navItems={[
|
|
{ name: "Home", id: "hero" },
|
|
{ name: "Shop", id: "products" },
|
|
{ name: "About", id: "about" },
|
|
{ name: "Contact", id: "contact" },
|
|
]}
|
|
brandName="STELLY"
|
|
/>
|
|
</div>
|
|
|
|
<div id="hero" data-section="hero">
|
|
<HeroBillboardTestimonial
|
|
background={{ variant: "gradient-bars" }}
|
|
title="STELLY — WEAR THE FUTURE"
|
|
description="Experience the next evolution of luxury streetwear. Our future-forward designs prioritize high-performance materials and unmatched versatility, ensuring you move through the world with effortless style and resilience."
|
|
testimonials={[
|
|
{ name: "Alex Rivier", handle: "@alexr", testimonial: "The best quality streetwear I have ever owned. Truly future-forward.", rating: 5, imageSrc: "http://img.b2bpic.net/free-photo/woman-sitting-hanging-glass-chair_1303-12358.jpg?_wi=1" },
|
|
{ name: "Sam Chen", handle: "@samchen", testimonial: "Futuristic design meets unparalleled comfort. Stelly is everything.", rating: 5, imageSrc: "http://img.b2bpic.net/free-photo/happy-man-smiling-camera_197531-33440.jpg" },
|
|
{ name: "Jordan P.", handle: "@jordp", testimonial: "Incredible aesthetic. I get compliments everywhere I go.", rating: 5, imageSrc: "http://img.b2bpic.net/free-photo/thoughtful-teenage-girl-dressed-striped-jumper-trousers-looks-away-poses-longboard-contemplates-about-something-poses-against-urban-building-likes-extreme-sport_273609-55258.jpg" },
|
|
{ name: "Taylor M.", handle: "@taym", testimonial: "High fashion, streetwear heart. Stelly delivers every time.", rating: 5, imageSrc: "http://img.b2bpic.net/free-photo/fashion-photo-young-magnificent-woman-blue-shirt_158595-896.jpg" },
|
|
{ name: "Jamie Lee", handle: "@jlee", testimonial: "Sophisticated, modern, and perfectly crafted. My go-to brand.", rating: 5, imageSrc: "http://img.b2bpic.net/free-photo/full-shot-woman-holding-tablet_23-2149403414.jpg" },
|
|
{ name: "Casey K.", handle: "@ckay", testimonial: "The aesthetic is just unmatched. Future of fashion right here.", rating: 5, imageSrc: "http://img.b2bpic.net/free-photo/pretty-asian-girl-looking-camera-contrast-portrait_633478-538.jpg" },
|
|
]}
|
|
buttons={[{ text: "Shop Now", href: "#products" }, { text: "New Collection", href: "#products" }]}
|
|
imageSrc="http://img.b2bpic.net/free-photo/pisces-portrait-beautiful-woman_23-2149275094.jpg"
|
|
imageAlt="Futuristic fashion banner"
|
|
avatars={[
|
|
{ src: "http://img.b2bpic.net/free-photo/beautiful-portrait-teenager-woman_23-2149453354.jpg", alt: "Fashion enthusiast portrait" },
|
|
{ src: "http://img.b2bpic.net/free-photo/portrait-young-man-posing_23-2148916393.jpg", alt: "Fashion influencer portrait" },
|
|
{ src: "http://img.b2bpic.net/free-photo/portrait-young-man-posing_23-2148916388.jpg", alt: "Street style visionary" },
|
|
{ src: "http://img.b2bpic.net/free-photo/portrait-young-beautiful-brunette-woman_176420-16845.jpg", alt: "Luxury fashion advocate" },
|
|
{ src: "http://img.b2bpic.net/free-photo/young-man-portrait_23-2148830347.jpg", alt: "Modern trendsetter" },
|
|
]}
|
|
marqueeItems={[
|
|
{ type: "text", text: "LIMITED EDITION" },
|
|
{ type: "text-icon", text: "TECHWEAR", icon: Zap },
|
|
{ type: "text", text: "FUTURE FASHION" },
|
|
{ type: "text-icon", text: "PREMIUM", icon: Shield },
|
|
{ type: "text", text: "EXCLUSIVE DROPS" },
|
|
]}
|
|
/>
|
|
</div>
|
|
|
|
<div id="about" data-section="about">
|
|
<MetricSplitMediaAbout
|
|
useInvertedBackground={true}
|
|
title="The Stelly Philosophy"
|
|
description="We blend architectural minimalism with high-end luxury streetwear to create apparel that transcends seasons and trends."
|
|
metrics={[
|
|
{ value: "2024", title: "Collection Launch" },
|
|
{ value: "100%", title: "Premium Quality" },
|
|
{ value: "10k+", title: "Community Members" },
|
|
]}
|
|
imageSrc="http://img.b2bpic.net/free-photo/young-attractive-woman-dark-background-loneliness-concept_169016-66019.jpg"
|
|
mediaAnimation="blur-reveal"
|
|
metricsAnimation="slide-up"
|
|
/>
|
|
</div>
|
|
|
|
<div id="features" data-section="features">
|
|
<FeatureCardTwentyFive
|
|
animationType="depth-3d"
|
|
textboxLayout="split"
|
|
useInvertedBackground={false}
|
|
features={[
|
|
{
|
|
title: "Premium Materials", description: "Sourced from the finest technical fibers.", icon: Shield,
|
|
mediaItems: [
|
|
{ imageSrc: "http://img.b2bpic.net/free-photo/stylish-hipster-arab-man-guy-posed-outdoor-street-style-rap-singer_627829-2776.jpg" },
|
|
{ imageSrc: "http://img.b2bpic.net/free-photo/view-beige-tone-colored-pants_23-2150773397.jpg" },
|
|
],
|
|
},
|
|
{
|
|
title: "Futuristic Silhouette", description: "Innovative cuts for a modern aesthetic.", icon: Zap,
|
|
mediaItems: [
|
|
{ imageSrc: "http://img.b2bpic.net/free-photo/bearded-hipster-man-wearing-sunglasses-standing-isolated_171337-13928.jpg" },
|
|
{ imageSrc: "http://img.b2bpic.net/free-photo/full-shot-asian-model-posing_23-2148750326.jpg" },
|
|
],
|
|
},
|
|
{
|
|
title: "Limited Drops", description: "Exclusive pieces produced in small batches.", icon: Star,
|
|
mediaItems: [
|
|
{ imageSrc: "http://img.b2bpic.net/free-photo/pink-hair-girl-avantgarde-style-wearing-sunglasses_114579-19319.jpg" },
|
|
{ imageSrc: "http://img.b2bpic.net/free-photo/woman-sitting-hanging-glass-chair_1303-12358.jpg?_wi=2" },
|
|
],
|
|
},
|
|
]}
|
|
title="Luxury Standard"
|
|
description="Excellence in every stitch, design, and detail."
|
|
/>
|
|
</div>
|
|
|
|
<div id="products" data-section="products">
|
|
<ProductCardFour
|
|
animationType="slide-up"
|
|
textboxLayout="default"
|
|
gridVariant="bento-grid"
|
|
useInvertedBackground={true}
|
|
products={[
|
|
{ id: "p1", name: "Oversized Stealth Hoodie", price: "$150", variant: "Charcoal", imageSrc: "http://img.b2bpic.net/free-photo/man-with-tattoos-drinking-coffee-cafe_23-2149052885.jpg" },
|
|
{ id: "p2", name: "Apex Cargo Pants", price: "$120", variant: "Black", imageSrc: "http://img.b2bpic.net/free-photo/digital-art-style-fashion-design-sketch-paper_23-2151487050.jpg" },
|
|
{ id: "p3", name: "Technical Base Tee", price: "$60", variant: "Grey", imageSrc: "http://img.b2bpic.net/free-photo/shirt-mockup-concept-with-plain-clothing_23-2149448774.jpg" },
|
|
{ id: "p4", name: "Velocity Runners", price: "$190", variant: "Silver", imageSrc: "http://img.b2bpic.net/free-photo/stylish-woman-wearing-blue-wig-sitting-stairs_158595-4336.jpg" },
|
|
{ id: "p5", name: "Streetwear Track Set", price: "$240", variant: "Black", imageSrc: "http://img.b2bpic.net/free-photo/portrait-modern-female-grey-coat_613910-7088.jpg" },
|
|
{ id: "p6", name: "Urban Tech Jacket", price: "$280", variant: "Charcoal", imageSrc: "http://img.b2bpic.net/free-photo/stylish-hipster-arab-man-guy-posed-outdoor-street-style-rap-singer-against-steel-wall_627829-2800.jpg" },
|
|
]}
|
|
title="New Collection"
|
|
description="Shop the latest arrivals in luxury streetwear."
|
|
/>
|
|
</div>
|
|
|
|
<div id="metrics" data-section="metrics">
|
|
<MetricCardThree
|
|
animationType="depth-3d"
|
|
textboxLayout="default"
|
|
useInvertedBackground={false}
|
|
metrics={[
|
|
{ id: "m1", icon: Award, title: "Editor's Choice", value: "2024" },
|
|
{ id: "m2", icon: Zap, title: "Fast Shipping", value: "24h" },
|
|
{ id: "m3", icon: CheckCircle, title: "Quality Score", value: "100%" },
|
|
]}
|
|
title="Brand Impact"
|
|
description="Defining the culture of tomorrow."
|
|
/>
|
|
</div>
|
|
|
|
<div id="blog" data-section="blog">
|
|
<BlogCardOne
|
|
animationType="slide-up"
|
|
textboxLayout="default"
|
|
useInvertedBackground={false}
|
|
title="Fashion Editorials"
|
|
description="Exploring the intersection of technology and fashion."
|
|
blogs={[
|
|
{ id: "b1", category: "Trends", title: "The Future of Techwear", excerpt: "How innovation changes how we dress.", imageSrc: "http://img.b2bpic.net/free-photo/young-woman-working-her-worshop_23-2149536314.jpg", authorName: "Stelly Editor", authorAvatar: "http://img.b2bpic.net/free-photo/portrait-beautiful-woman-posing-with-blue-jacket_23-2149020774.jpg", date: "Oct 20, 2024" },
|
|
{ id: "b2", category: "Lifestyle", title: "Minimalist Streetwear", excerpt: "Finding elegance in simplicity.", imageSrc: "http://img.b2bpic.net/free-photo/young-person-getting-ready-doing-sport-night_23-2149287995.jpg", authorName: "Stelly Editor", authorAvatar: "http://img.b2bpic.net/free-photo/front-view-woman-with-hijab-posing_23-2149522161.jpg", date: "Oct 15, 2024" },
|
|
{ id: "b3", category: "Design", title: "Crafting the Future", excerpt: "Behind the scenes of our latest drops.", imageSrc: "http://img.b2bpic.net/free-photo/school-scene-with-queer-teens_23-2150379366.jpg", authorName: "Stelly Editor", authorAvatar: "http://img.b2bpic.net/free-photo/man-suit-posing-against-orange-architectural-facade_24972-2943.jpg", date: "Oct 10, 2024" },
|
|
]}
|
|
/>
|
|
</div>
|
|
|
|
<div id="contact" data-section="contact">
|
|
<ContactSplit
|
|
useInvertedBackground={true}
|
|
background={{ variant: "rotated-rays-static" }}
|
|
tag="Newsletter"
|
|
title="Join the Elite"
|
|
description="Be the first to hear about our limited edition drops and private sales."
|
|
imageSrc="http://img.b2bpic.net/free-photo/single-orange-table-tennis-ball-against-solid-black-background_1308-189582.jpg"
|
|
mediaAnimation="opacity"
|
|
/>
|
|
</div>
|
|
|
|
<div id="footer" data-section="footer">
|
|
<FooterSimple
|
|
columns={[
|
|
{ title: "Shop", items: [{ label: "All Products", href: "#products" }, { label: "New Arrivals", href: "#products" }, { label: "Best Sellers", href: "#products" }] },
|
|
{ title: "Company", items: [{ label: "About Us", href: "#about" }, { label: "Contact", href: "#contact" }, { label: "Careers", href: "#" }] },
|
|
{ title: "Support", items: [{ label: "FAQ", href: "#" }, { label: "Shipping", href: "#" }, { label: "Returns", href: "#" }] },
|
|
]}
|
|
bottomLeftText="© 2024 STELLY. All rights reserved."
|
|
bottomRightText="Privacy Policy | Terms of Service"
|
|
/>
|
|
</div>
|
|
</ReactLenis>
|
|
</ThemeProvider>
|
|
);
|
|
}
|