Update src/app/page.tsx

This commit is contained in:
2026-05-11 16:35:34 +00:00
parent 6a532ee2ce
commit 61d7c9a06f

View File

@@ -16,387 +16,180 @@ import { Shield, Star, Zap } from "lucide-react";
export default function LandingPage() {
return (
<ThemeProvider
defaultButtonVariant="text-stagger"
defaultTextAnimation="reveal-blur"
borderRadius="rounded"
contentWidth="compact"
sizing="largeSmallSizeLargeTitles"
background="noise"
cardStyle="layered-gradient"
primaryButtonStyle="gradient"
secondaryButtonStyle="glass"
headingFontWeight="semibold"
defaultButtonVariant="text-stagger"
defaultTextAnimation="reveal-blur"
borderRadius="rounded"
contentWidth="compact"
sizing="largeSmallSizeLargeTitles"
background="noise"
cardStyle="layered-gradient"
primaryButtonStyle="gradient"
secondaryButtonStyle="glass"
headingFontWeight="semibold"
>
<ReactLenis root>
<div id="nav" data-section="nav">
<NavbarLayoutFloatingOverlay
navItems={[
{
name: "Collection",
id: "products",
},
{
name: "Innovation",
id: "features",
},
{
name: "Community",
id: "testimonials",
},
{
name: "Contact",
id: "contact",
},
]}
brandName="PULSE"
/>
</div>
<div id="nav" data-section="nav">
<NavbarLayoutFloatingOverlay
navItems={[
{ name: "Collection", id: "products" },
{ name: "Innovation", id: "features" },
{ name: "Community", id: "testimonials" },
{ name: "Contact", id: "contact" },
]}
brandName="PULSE"
/>
</div>
<div id="hero" data-section="hero">
<HeroBillboard
background={{
variant: "sparkles-gradient",
}}
title="Oversized Luxury Redefined — Pure Motion"
description="Handcrafted premium hoodies engineered for the future. Experience cinematic design meets elevated streetwear. Limited drops, infinite impact."
tag="Limited Edition"
buttons={[
{
text: "Explore Collection",
href: "#products",
},
]}
imageSrc="http://img.b2bpic.net/free-photo/man-red-hat-grey-jacket-stands-like-boxer_8353-1312.jpg?_wi=1"
imageAlt="Futuristic Luxury Hoodie Brand Hero"
mediaAnimation="blur-reveal"
avatars={[
{
src: "http://img.b2bpic.net/free-photo/side-view-smiley-woman-with-earphones_23-2149429040.jpg",
alt: "Fashion enthusiast portrait",
},
{
src: "http://img.b2bpic.net/free-photo/side-view-handsome-hacker-work-man-hood-headphones-looking-laptop-screen-typing-hacking-computer-concept_74855-24673.jpg",
alt: "Creative director portrait",
},
{
src: "http://img.b2bpic.net/free-photo/young-man-wearing-virtual-reality-goggles-his-head_23-2148815659.jpg",
alt: "Tech influencer portrait",
},
{
src: "http://img.b2bpic.net/free-photo/smart-blonde-female-photographer-trendy-clothes-posing-while-leaning-professional-camera-with-tripod-studio-looks-camera-isolated-dark-background_613910-20974.jpg",
alt: "Stylist profile shot",
},
{
src: "http://img.b2bpic.net/free-photo/portrait-young-man-2000s-fashion-style-posing-with-camera-sunglasses_23-2149442816.jpg",
alt: "Trend analyst portrait",
},
]}
avatarText="Trusted by 500+ collectors"
marqueeItems={[
{
type: "text",
text: "BRUTALIST ARCHITECTURAL CUTS",
},
{
type: "text",
text: "ENGINEERED TECH TEXTILES",
},
{
type: "text",
text: "LIMITED EDITION DROPS",
},
{
type: "text",
text: "GLOBAL EXPRESS SHIPPING",
},
{
type: "text",
text: "FUTURE-FORWARD DESIGN",
},
]}
/>
</div>
<div id="hero" data-section="hero">
<HeroBillboard
background={{ variant: "sparkles-gradient" }}
title="Oversized Luxury Redefined — Pure Motion"
description="Handcrafted premium hoodies engineered for the future. Experience cinematic design meets elevated streetwear. Limited drops, infinite impact."
tag="Limited Edition"
buttons={[{ text: "Explore Collection", href: "#products" }]}
imageSrc="http://img.b2bpic.net/free-photo/man-red-hat-grey-jacket-stands-like-boxer_8353-1312.jpg"
imageAlt="Futuristic Luxury Hoodie Brand Hero"
mediaAnimation="blur-reveal"
avatars={[
{ src: "http://img.b2bpic.net/free-photo/side-view-smiley-woman-with-earphones_23-2149429040.jpg", alt: "Fashion enthusiast portrait" },
{ src: "http://img.b2bpic.net/free-photo/side-view-handsome-hacker-work-man-hood-headphones-looking-laptop-screen-typing-hacking-computer-concept_74855-24673.jpg", alt: "Creative director portrait" },
{ src: "http://img.b2bpic.net/free-photo/young-man-wearing-virtual-reality-goggles-his-head_23-2148815659.jpg", alt: "Tech influencer portrait" },
{ src: "http://img.b2bpic.net/free-photo/smart-blonde-female-photographer-trendy-clothes-posing-while-leaning-professional-camera-with-tripod-studio-looks-camera-isolated-dark-background_613910-20974.jpg", alt: "Stylist profile shot" },
{ src: "http://img.b2bpic.net/free-photo/portrait-young-man-2000s-fashion-style-posing-with-camera-sunglasses_23-2149442816.jpg", alt: "Trend analyst portrait" },
]}
avatarText="Trusted by 500+ collectors"
marqueeItems={[
{ type: "text", text: "BRUTALIST ARCHITECTURAL CUTS" },
{ type: "text", text: "ENGINEERED TECH TEXTILES" },
{ type: "text", text: "LIMITED EDITION DROPS" },
{ type: "text", text: "GLOBAL EXPRESS SHIPPING" },
{ type: "text", text: "FUTURE-FORWARD DESIGN" },
]}
/>
</div>
<div id="features" data-section="features">
<FeatureCardTwentyFive
animationType="depth-3d"
textboxLayout="split"
useInvertedBackground={false}
features={[
{
title: "Tech-Core Textiles",
description: "Custom engineered fabrics for maximum durability and premium hand-feel.",
icon: Shield,
mediaItems: [
{
imageSrc: "http://img.b2bpic.net/free-photo/close-up-cozy-texture-clothing_23-2149432461.jpg",
},
{
imageSrc: "http://img.b2bpic.net/free-photo/black-fabric-closeup_53876-41996.jpg",
},
],
imageSrc: "http://img.b2bpic.net/free-photo/man-red-hat-grey-jacket-stands-like-boxer_8353-1312.jpg?_wi=2",
imageAlt: "luxury tech fabric detail",
},
{
title: "Brutalist Silhouette",
description: "Oversized architectural cuts designed for a timeless, modern aesthetic.",
icon: Zap,
mediaItems: [
{
imageSrc: "http://img.b2bpic.net/free-photo/side-view-senior-woman-posing-studio_23-2149956303.jpg",
},
{
imageSrc: "http://img.b2bpic.net/free-photo/front-view-woman-doing-yoga-indoors_23-2149832813.jpg",
},
],
imageSrc: "http://img.b2bpic.net/free-photo/black-white-neodymium-magnet-high-view_23-2148253575.jpg",
imageAlt: "luxury tech fabric detail",
},
{
title: "Precision Details",
description: "Hand-finished components and custom hardware for the discerning collector.",
icon: Star,
mediaItems: [
{
imageSrc: "http://img.b2bpic.net/free-photo/medium-shot-underground-hip-hop-musician_23-2150932933.jpg?_wi=1",
},
{
imageSrc: "http://img.b2bpic.net/free-photo/spiky-close-up-ferromagnetic-metal_23-2148253599.jpg",
},
],
imageSrc: "http://img.b2bpic.net/free-photo/portrait-entrepreneur-working-from-home_23-2148475547.jpg?_wi=1",
imageAlt: "luxury tech fabric detail",
},
]}
title="Engineering the Future"
description="We blend high-end fabric technology with brutalist design to create pieces that transcend traditional streetwear."
/>
</div>
<div id="features" data-section="features">
<FeatureCardTwentyFive
animationType="depth-3d"
textboxLayout="split"
useInvertedBackground={false}
features={[
{
title: "Tech-Core Textiles", description: "Custom engineered fabrics for maximum durability and premium hand-feel.", icon: Shield,
mediaItems: [
{ imageSrc: "http://img.b2bpic.net/free-photo/close-up-cozy-texture-clothing_23-2149432461.jpg" },
{ imageSrc: "http://img.b2bpic.net/free-photo/black-fabric-closeup_53876-41996.jpg" },
],
},
{
title: "Brutalist Silhouette", description: "Oversized architectural cuts designed for a timeless, modern aesthetic.", icon: Zap,
mediaItems: [
{ imageSrc: "http://img.b2bpic.net/free-photo/side-view-senior-woman-posing-studio_23-2149956303.jpg" },
{ imageSrc: "http://img.b2bpic.net/free-photo/front-view-woman-doing-yoga-indoors_23-2149832813.jpg" },
],
},
{
title: "Precision Details", description: "Hand-finished components and custom hardware for the discerning collector.", icon: Star,
mediaItems: [
{ imageSrc: "http://img.b2bpic.net/free-photo/medium-shot-underground-hip-hop-musician_23-2150932933.jpg" },
{ imageSrc: "http://img.b2bpic.net/free-photo/spiky-close-up-ferromagnetic-metal_23-2148253599.jpg" },
],
},
]}
title="Engineering the Future"
description="We blend high-end fabric technology with brutalist design to create pieces that transcend traditional streetwear."
/>
</div>
<div id="products" data-section="products">
<ProductCardOne
animationType="slide-up"
textboxLayout="default"
gridVariant="asymmetric-60-wide-40-narrow"
useInvertedBackground={false}
products={[
{
id: "p1",
name: "Phantom Oversized Hoodie",
price: "$450",
imageSrc: "http://img.b2bpic.net/free-photo/medium-shot-underground-hip-hop-musician_23-2150932933.jpg?_wi=2",
},
{
id: "p2",
name: "Chrome Tech-Hoodie",
price: "$520",
imageSrc: "http://img.b2bpic.net/free-photo/portrait-entrepreneur-working-from-home_23-2148475547.jpg?_wi=2",
},
{
id: "p3",
name: "Midnight Minimal Hoodie",
price: "$390",
imageSrc: "http://img.b2bpic.net/free-photo/person-with-closed-eyes-lights-against-dark-background_181624-32743.jpg",
},
{
id: "p4",
name: "Brutalist Gray Hoodie",
price: "$480",
imageSrc: "http://img.b2bpic.net/free-photo/medium-shot-man-wearing-hoodie_23-2149359881.jpg",
},
{
id: "p5",
name: "Iron-Thread Zip Hoodie",
price: "$610",
imageSrc: "http://img.b2bpic.net/free-photo/close-up-flannel-shirt-detail_23-2149575374.jpg",
},
{
id: "p6",
name: "Future-Vision Hoodie",
price: "$550",
imageSrc: "http://img.b2bpic.net/free-photo/beautiful-blond-girl-posing-with-loangboard_158595-2837.jpg",
},
]}
title="The Core Collection"
description="Exclusive drops defining the next generation of luxury."
/>
</div>
<div id="products" data-section="products">
<ProductCardOne
animationType="slide-up"
textboxLayout="default"
gridVariant="asymmetric-60-wide-40-narrow"
useInvertedBackground={false}
products={[
{ id: "p1", name: "Phantom Oversized Hoodie", price: "$450", imageSrc: "http://img.b2bpic.net/free-photo/medium-shot-underground-hip-hop-musician_23-2150932933.jpg" },
{ id: "p2", name: "Chrome Tech-Hoodie", price: "$520", imageSrc: "http://img.b2bpic.net/free-photo/portrait-entrepreneur-working-from-home_23-2148475547.jpg" },
{ id: "p3", name: "Midnight Minimal Hoodie", price: "$390", imageSrc: "http://img.b2bpic.net/free-photo/person-with-closed-eyes-lights-against-dark-background_181624-32743.jpg" },
{ id: "p4", name: "Brutalist Gray Hoodie", price: "$480", imageSrc: "http://img.b2bpic.net/free-photo/medium-shot-man-wearing-hoodie_23-2149359881.jpg" },
{ id: "p5", name: "Iron-Thread Zip Hoodie", price: "$610", imageSrc: "http://img.b2bpic.net/free-photo/close-up-flannel-shirt-detail_23-2149575374.jpg" },
{ id: "p6", name: "Future-Vision Hoodie", price: "$550", imageSrc: "http://img.b2bpic.net/free-photo/beautiful-blond-girl-posing-with-loangboard_158595-2837.jpg" },
]}
title="The Core Collection"
description="Exclusive drops defining the next generation of luxury."
/>
</div>
<div id="metrics" data-section="metrics">
<MetricCardTwo
animationType="depth-3d"
textboxLayout="default"
gridVariant="bento-grid"
useInvertedBackground={false}
metrics={[
{
id: "m1",
value: "15+",
description: "Countries reached",
},
{
id: "m2",
value: "8k+",
description: "Exclusive drops sold",
},
{
id: "m3",
value: "100%",
description: "Premium ethical sourcing",
},
]}
title="Impact by Design"
description="Measurable excellence in luxury production."
/>
</div>
<div id="metrics" data-section="metrics">
<MetricCardTwo
animationType="depth-3d"
textboxLayout="default"
gridVariant="bento-grid"
useInvertedBackground={false}
metrics={[
{ id: "m1", value: "15+", description: "Countries reached" },
{ id: "m2", value: "8k+", description: "Exclusive drops sold" },
{ id: "m3", value: "100%", description: "Premium ethical sourcing" },
]}
title="Impact by Design"
description="Measurable excellence in luxury production."
/>
</div>
<div id="testimonials" data-section="testimonials">
<TestimonialCardTen
textboxLayout="split"
useInvertedBackground={false}
testimonials={[
{
id: "t1",
title: "Incredible fit",
quote: "The quality is simply unmatched.",
name: "Alex Rivers",
role: "Fashion Enthusiast",
imageSrc: "http://img.b2bpic.net/free-photo/fashion-woman-casual-hipster-summer-clothes_158538-7825.jpg",
},
{
id: "t2",
title: "Future-forward",
quote: "Finally, a brand that gets architectural design right.",
name: "Jordan Lee",
role: "Creative Director",
imageSrc: "http://img.b2bpic.net/free-photo/portrait-handsome-man-with-sunglasses-eye-make-up-yellow-background_23-2149020054.jpg",
},
{
id: "t3",
title: "Worth the wait",
quote: "The limited drops are always worth it.",
name: "Sam Taylor",
role: "Stylist",
imageSrc: "http://img.b2bpic.net/free-photo/portrait-beautiful-woman-posing-with-blue-jacket_23-2149020777.jpg",
},
{
id: "t4",
title: "Top tier quality",
quote: "The craftsmanship and fabric weight are perfect.",
name: "Casey Morgan",
role: "Tech Influencer",
imageSrc: "http://img.b2bpic.net/free-photo/beautiful-blonde-woman-white-hoodie-blue-jeans-posing-against-neon-background_89887-1131.jpg",
},
{
id: "t5",
title: "New standard",
quote: "Sets a new bar for high-end luxury streetwear.",
name: "Morgan West",
role: "Collector",
imageSrc: "http://img.b2bpic.net/free-photo/woman-posing-with-projector-side-view_23-2149424949.jpg",
},
{
id: "t6",
title: "Design perfection",
quote: "Absolutely obsessed with the brutalist cuts.",
name: "Drew Smith",
role: "Trend Analyst",
imageSrc: "http://img.b2bpic.net/free-photo/abstract-store-with-futuristic-concept-architecture_23-2150862118.jpg",
},
]}
title="Culture & Community"
description="What our collectors are saying."
/>
</div>
<div id="testimonials" data-section="testimonials">
<TestimonialCardTen
textboxLayout="split"
useInvertedBackground={false}
testimonials={[
{ id: "t1", title: "Incredible fit", quote: "The quality is simply unmatched.", name: "Alex Rivers", role: "Fashion Enthusiast", imageSrc: "http://img.b2bpic.net/free-photo/fashion-woman-casual-hipster-summer-clothes_158538-7825.jpg" },
{ id: "t2", title: "Future-forward", quote: "Finally, a brand that gets architectural design right.", name: "Jordan Lee", role: "Creative Director", imageSrc: "http://img.b2bpic.net/free-photo/portrait-handsome-man-with-sunglasses-eye-make-up-yellow-background_23-2149020054.jpg" },
{ id: "t3", title: "Worth the wait", quote: "The limited drops are always worth it.", name: "Sam Taylor", role: "Stylist", imageSrc: "http://img.b2bpic.net/free-photo/portrait-beautiful-woman-posing-with-blue-jacket_23-2149020777.jpg" },
{ id: "t4", title: "Top tier quality", quote: "The craftsmanship and fabric weight are perfect.", name: "Casey Morgan", role: "Tech Influencer", imageSrc: "http://img.b2bpic.net/free-photo/beautiful-blonde-woman-white-hoodie-blue-jeans-posing-against-neon-background_89887-1131.jpg" },
{ id: "t5", title: "New standard", quote: "Sets a new bar for high-end luxury streetwear.", name: "Morgan West", role: "Collector", imageSrc: "http://img.b2bpic.net/free-photo/woman-posing-with-projector-side-view_23-2149424949.jpg" },
{ id: "t6", title: "Design perfection", quote: "Absolutely obsessed with the brutalist cuts.", name: "Drew Smith", role: "Trend Analyst", imageSrc: "http://img.b2bpic.net/free-photo/abstract-store-with-futuristic-concept-architecture_23-2150862118.jpg" },
]}
title="Culture & Community"
description="What our collectors are saying."
/>
</div>
<div id="faq" data-section="faq">
<FaqSplitMedia
textboxLayout="split"
useInvertedBackground={false}
faqs={[
{
id: "f1",
title: "How do your drops work?",
content: "We release in limited quantities to ensure exclusivity.",
},
{
id: "f2",
title: "What fabrics do you use?",
content: "We utilize premium heavyweight custom textiles.",
},
{
id: "f3",
title: "Do you offer worldwide shipping?",
content: "Yes, we ship to all major regions globally.",
},
]}
imageSrc="http://img.b2bpic.net/free-photo/stylish-urban-style-african-american-man-pink-hoodie-posed-afro-rapper-guy_627829-13427.jpg"
mediaAnimation="slide-up"
title="Common Inquiries"
description="Everything you need to know about our drops."
faqsAnimation="blur-reveal"
/>
</div>
<div id="faq" data-section="faq">
<FaqSplitMedia
textboxLayout="split"
useInvertedBackground={false}
faqs={[
{ id: "f1", title: "How do your drops work?", content: "We release in limited quantities to ensure exclusivity." },
{ id: "f2", title: "What fabrics do you use?", content: "We utilize premium heavyweight custom textiles." },
{ id: "f3", title: "Do you offer worldwide shipping?", content: "Yes, we ship to all major regions globally." },
]}
imageSrc="http://img.b2bpic.net/free-photo/stylish-urban-style-african-american-man-pink-hoodie-posed-afro-rapper-guy_627829-13427.jpg"
mediaAnimation="slide-up"
title="Common Inquiries"
description="Everything you need to know about our drops."
faqsAnimation="blur-reveal"
/>
</div>
<div id="contact" data-section="contact">
<ContactCenter
useInvertedBackground={false}
background={{
variant: "radial-gradient",
}}
tag="Stay Ahead"
title="Access First"
description="Sign up for early access to limited drops."
/>
</div>
<div id="contact" data-section="contact">
<ContactCenter
useInvertedBackground={false}
background={{ variant: "radial-gradient" }}
tag="Stay Ahead"
title="Access First"
description="Sign up for early access to limited drops."
/>
</div>
<div id="footer" data-section="footer">
<FooterBase
columns={[
{
title: "Brand",
items: [
{
label: "About",
href: "#",
},
{
label: "Sustainability",
href: "#",
},
],
},
{
title: "Support",
items: [
{
label: "Shipping",
href: "#",
},
{
label: "Returns",
href: "#",
},
],
},
{
title: "Legal",
items: [
{
label: "Privacy Policy",
href: "#",
},
{
label: "Terms of Service",
href: "#",
},
],
},
]}
logoText="PULSE"
/>
</div>
<div id="footer" data-section="footer">
<FooterBase
columns={[
{ title: "Brand", items: [{ label: "About", href: "#" }, { label: "Sustainability", href: "#" }] },
{ title: "Support", items: [{ label: "Shipping", href: "#" }, { label: "Returns", href: "#" }] },
{ title: "Legal", items: [{ label: "Privacy Policy", href: "#" }, { label: "Terms of Service", href: "#" }] },
]}
logoText="PULSE"
/>
</div>
</ReactLenis>
</ThemeProvider>
);