235 lines
9.8 KiB
TypeScript
235 lines
9.8 KiB
TypeScript
"use client";
|
|
|
|
import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
|
|
import ReactLenis from "lenis/react";
|
|
import ContactText from '@/components/sections/contact/ContactText';
|
|
import FaqDouble from '@/components/sections/faq/FaqDouble';
|
|
import FooterLogoEmphasis from '@/components/sections/footer/FooterLogoEmphasis';
|
|
import HeroSplit from '@/components/sections/hero/HeroSplit';
|
|
import MetricCardThree from '@/components/sections/metrics/MetricCardThree';
|
|
import NavbarStyleCentered from '@/components/navbar/NavbarStyleCentered/NavbarStyleCentered';
|
|
import ProductCardThree from '@/components/sections/product/ProductCardThree';
|
|
import SocialProofOne from '@/components/sections/socialProof/SocialProofOne';
|
|
import TestimonialCardTen from '@/components/sections/testimonial/TestimonialCardTen';
|
|
import TextAbout from '@/components/sections/about/TextAbout';
|
|
import { Globe, Layers, Users } from "lucide-react";
|
|
|
|
export default function LandingPage() {
|
|
return (
|
|
<ThemeProvider
|
|
defaultButtonVariant="bounce-effect"
|
|
defaultTextAnimation="reveal-blur"
|
|
borderRadius="rounded"
|
|
contentWidth="compact"
|
|
sizing="mediumLarge"
|
|
background="circleGradient"
|
|
cardStyle="glass-depth"
|
|
primaryButtonStyle="shadow"
|
|
secondaryButtonStyle="glass"
|
|
headingFontWeight="normal"
|
|
>
|
|
<ReactLenis root>
|
|
<div id="nav" data-section="nav">
|
|
<NavbarStyleCentered
|
|
navItems={[
|
|
{
|
|
name: "Home", id: "hero"},
|
|
{
|
|
name: "Drops", id: "products"},
|
|
{
|
|
name: "Story", id: "about"},
|
|
{
|
|
name: "FAQ", id: "faq"},
|
|
]}
|
|
brandName="RARE"
|
|
/>
|
|
</div>
|
|
|
|
<div id="hero" data-section="hero">
|
|
<HeroSplit
|
|
background={{
|
|
variant: "plain"}}
|
|
title="RARE. DEFINED BY THE UNSEEN."
|
|
description="We don't follow trends. We craft them for the bold. Experience the next evolution of high-end streetwear."
|
|
buttons={[
|
|
{
|
|
text: "Shop The Drop", href: "#products"},
|
|
]}
|
|
imageSrc="http://img.b2bpic.net/free-photo/stylish-woman-wearing-blue-wig-sitting-stairs_158595-4336.jpg"
|
|
imageAlt="urban fashion model dark theme"
|
|
mediaAnimation="blur-reveal"
|
|
avatars={[
|
|
{
|
|
src: "http://img.b2bpic.net/free-photo/stunning-african-man-posing-with-gently-smile-stairs-handsome-guy-checkered-jacket-sitting-steps-evening_197531-22068.jpg", alt: "Stunning african man posing with gently smile on stairs. Handsome guy in checkered jacket sitting on steps in evening."},
|
|
{
|
|
src: "http://img.b2bpic.net/free-photo/brutal-young-man-sunglasses-hat-island-travel_1321-3839.jpg", alt: "Brutal young man in sunglasses and a hat. Island travel."},
|
|
{
|
|
src: "http://img.b2bpic.net/free-photo/young-handsome-smiling-hipster-black-man-retro-vintage-style-suit-dancing-hip-hop-disco-night-club-having-fun_285396-10218.jpg", alt: "Young handsome smiling hipster black man in retro vintage style suit dancing hip hop in disco night club, having fun"},
|
|
{
|
|
src: "http://img.b2bpic.net/free-photo/beautiful-blonde-woman-white-hoodie-blue-jeans-posing-against-neon-background_89887-1131.jpg", alt: "Beautiful blonde woman in white hoodie and blue jeans posing against neon background"},
|
|
{
|
|
src: "http://img.b2bpic.net/free-photo/blue-jeans-fabric-details_150588-43.jpg", alt: "the blue jeans fabric details"},
|
|
]}
|
|
marqueeItems={[
|
|
{
|
|
type: "text", text: "LIMITED EDITION"},
|
|
{
|
|
type: "text", text: "RARE EXCLUSIVES"},
|
|
{
|
|
type: "text", text: "GLOBAL SHIPPING"},
|
|
{
|
|
type: "text", text: "PREMIUM FABRICS"},
|
|
{
|
|
type: "text", text: "AVANT-GARDE"},
|
|
]}
|
|
/>
|
|
</div>
|
|
|
|
<div id="about" data-section="about">
|
|
<TextAbout
|
|
useInvertedBackground={false}
|
|
title="The Philosophy of Rare"
|
|
buttons={[
|
|
{
|
|
text: "Learn More"},
|
|
]}
|
|
/>
|
|
</div>
|
|
|
|
<div id="products" data-section="products">
|
|
<ProductCardThree
|
|
textboxLayout="split"
|
|
gridVariant="uniform-all-items-equal"
|
|
animationType="slide-up"
|
|
useInvertedBackground={true}
|
|
products={[
|
|
{
|
|
id: "1", name: "Obsidian Sneaker", price: "$340", imageSrc: "http://img.b2bpic.net/free-photo/handsome-black-man-outdoor_624325-3549.jpg"},
|
|
{
|
|
id: "2", name: "Architectural Hoodie", price: "$220", imageSrc: "http://img.b2bpic.net/free-photo/fashion-portrait-young-elegant-woman_1328-2744.jpg"},
|
|
{
|
|
id: "3", name: "Tactical Utility Pant", price: "$280", imageSrc: "http://img.b2bpic.net/free-photo/medium-shot-young-man-posing-outdoors_23-2151038555.jpg"},
|
|
{
|
|
id: "4", name: "Minimalist Tee", price: "$85", imageSrc: "http://img.b2bpic.net/free-vector/happy-new-year-2025-text-typography-design-element-flyer-banner-poster-design_460848-18792.jpg"},
|
|
{
|
|
id: "5", name: "Cargo Tech Vest", price: "$190", imageSrc: "http://img.b2bpic.net/free-photo/soldier-russian-s-war-ukraine-side-view_23-2149437803.jpg"},
|
|
{
|
|
id: "6", name: "Matte Accessory", price: "$60", imageSrc: "http://img.b2bpic.net/free-photo/skater-wearing-trucker-hat_23-2149431180.jpg"},
|
|
]}
|
|
title="Current Collection"
|
|
description="Each piece is limited. Once they are gone, they remain gone."
|
|
/>
|
|
</div>
|
|
|
|
<div id="social" data-section="social">
|
|
<SocialProofOne
|
|
textboxLayout="default"
|
|
useInvertedBackground={false}
|
|
names={[
|
|
"Hypebeast", "Vogue", "GQ", "Complex", "Highsnobiety"]}
|
|
title="Seen In"
|
|
description="Cultural icons trust RARE."
|
|
/>
|
|
</div>
|
|
|
|
<div id="metrics" data-section="metrics">
|
|
<MetricCardThree
|
|
textboxLayout="split"
|
|
useInvertedBackground={true}
|
|
animationType="slide-up"
|
|
metrics={[
|
|
{
|
|
id: "m1", title: "Collectors", value: "10k+", icon: Users,
|
|
},
|
|
{
|
|
id: "m2", title: "Pieces Crafted", value: "50k+", icon: Layers,
|
|
},
|
|
{
|
|
id: "m3", title: "Global Drops", value: "120", icon: Globe,
|
|
},
|
|
]}
|
|
title="Our Impact"
|
|
description="Built for the rare enthusiast."
|
|
/>
|
|
</div>
|
|
|
|
<div id="testimonials" data-section="testimonials">
|
|
<TestimonialCardTen
|
|
textboxLayout="split"
|
|
useInvertedBackground={false}
|
|
testimonials={[
|
|
{
|
|
id: "t1", title: "Incredible Quality", quote: "The fabric quality is unmatched. Truly rare.", name: "Alex R.", role: "Creative", imageSrc: "http://img.b2bpic.net/free-photo/handsome-african-american-man-posing-outside-black-hat-beige-coat-with-folder-hand_627829-5454.jpg"},
|
|
{
|
|
id: "t2", title: "Distinct Aesthetic", quote: "Finally, streetwear that feels original.", name: "Maya S.", role: "Designer", imageSrc: "http://img.b2bpic.net/free-photo/view-young-man-smiling-camera_197531-33438.jpg"},
|
|
{
|
|
id: "t3", title: "Elite Fits", quote: "My go-to brand for unique silhouettes.", name: "Leo P.", role: "Influencer", imageSrc: "http://img.b2bpic.net/free-photo/beautiful-blonde-woman-blue-light_23-2149478943.jpg"},
|
|
{
|
|
id: "t4", title: "Fast Shipping", quote: "Surprisingly quick shipping for a high-end drop.", name: "Sam D.", role: "Collector", imageSrc: "http://img.b2bpic.net/free-photo/portrait-lone-woman-bar_53876-165211.jpg"},
|
|
{
|
|
id: "t5", title: "Pure Hype", quote: "RARE always hits different.", name: "Jo K.", role: "Artist", imageSrc: "http://img.b2bpic.net/free-photo/birthday-warm-antique-white-friendship-handmade_1418-4.jpg"},
|
|
]}
|
|
title="Voices of the Rare"
|
|
description="What our community is saying."
|
|
/>
|
|
</div>
|
|
|
|
<div id="faq" data-section="faq">
|
|
<FaqDouble
|
|
textboxLayout="split"
|
|
useInvertedBackground={true}
|
|
faqs={[
|
|
{
|
|
id: "f1", title: "How limited is each drop?", content: "Every piece is limited to 500 units worldwide."},
|
|
{
|
|
id: "f2", title: "Do you ship internationally?", content: "Yes, we ship to over 50 countries globally."},
|
|
{
|
|
id: "f3", title: "Can I return items?", content: "We offer a 14-day return window for unworn items."},
|
|
]}
|
|
title="Common Questions"
|
|
faqsAnimation="slide-up"
|
|
description="Everything you need to know about your order."
|
|
/>
|
|
</div>
|
|
|
|
<div id="contact" data-section="contact">
|
|
<ContactText
|
|
useInvertedBackground={false}
|
|
background={{
|
|
variant: "sparkles-gradient"}}
|
|
text="Join the rare circle."
|
|
buttons={[
|
|
{
|
|
text: "Contact Support", href: "mailto:support@rare.com"},
|
|
]}
|
|
/>
|
|
</div>
|
|
|
|
<div id="footer" data-section="footer">
|
|
<FooterLogoEmphasis
|
|
columns={[
|
|
{
|
|
items: [
|
|
{
|
|
label: "Shop", href: "#products"},
|
|
{
|
|
label: "About", href: "#about"},
|
|
],
|
|
},
|
|
{
|
|
items: [
|
|
{
|
|
label: "Support", href: "#contact"},
|
|
{
|
|
label: "FAQ", href: "#faq"},
|
|
],
|
|
},
|
|
]}
|
|
logoText="RARE"
|
|
/>
|
|
</div>
|
|
</ReactLenis>
|
|
</ThemeProvider>
|
|
);
|
|
}
|