Merge version_1 into main #2
390
src/app/page.tsx
390
src/app/page.tsx
@@ -25,291 +25,123 @@ export default function LandingPage() {
|
||||
headingFontWeight="light"
|
||||
>
|
||||
<ReactLenis root>
|
||||
<div id="nav" data-section="nav">
|
||||
<NavbarLayoutFloatingInline
|
||||
navItems={[
|
||||
{
|
||||
name: "Shop",
|
||||
id: "categories",
|
||||
},
|
||||
{
|
||||
name: "About",
|
||||
id: "about",
|
||||
},
|
||||
{
|
||||
name: "Discover",
|
||||
id: "cta",
|
||||
},
|
||||
]}
|
||||
brandName="Rêveur"
|
||||
/>
|
||||
</div>
|
||||
<div id="nav" data-section="nav">
|
||||
<NavbarLayoutFloatingInline
|
||||
navItems={[
|
||||
{ name: "Shop", id: "categories" },
|
||||
{ name: "About", id: "about" },
|
||||
{ name: "Discover", id: "cta" },
|
||||
]}
|
||||
brandName="Rêveur"
|
||||
button={{ text: "View collection", href: "#categories" }}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="hero" data-section="hero">
|
||||
<HeroSplitKpi
|
||||
background={{
|
||||
variant: "plain",
|
||||
}}
|
||||
title="High performance kit. Honest pricing."
|
||||
description="Rêveur creates premium cycling clothing for riders who want speed, comfort, and quality without overpaying."
|
||||
kpis={[
|
||||
{
|
||||
value: "100%",
|
||||
label: "Performance Fit",
|
||||
},
|
||||
{
|
||||
value: "Premium",
|
||||
label: "Chamois Quality",
|
||||
},
|
||||
{
|
||||
value: "Direct",
|
||||
label: "Honest Pricing",
|
||||
},
|
||||
]}
|
||||
enableKpiAnimation={true}
|
||||
tag="Performance cycling apparel"
|
||||
buttons={[
|
||||
{
|
||||
text: "Shop the collection",
|
||||
href: "#categories",
|
||||
},
|
||||
{
|
||||
text: "Why Rêveur",
|
||||
href: "#about",
|
||||
},
|
||||
]}
|
||||
imageSrc="http://img.b2bpic.net/free-photo/female-cyclist-posing-with-bicycle-helmet_23-2149749657.jpg?_wi=1"
|
||||
mediaAnimation="slide-up"
|
||||
avatars={[
|
||||
{
|
||||
src: "http://img.b2bpic.net/free-photo/female-cyclist-posing-with-bicycle-helmet_23-2149749657.jpg",
|
||||
alt: "Pro Cyclist 1",
|
||||
},
|
||||
{
|
||||
src: "http://img.b2bpic.net/free-photo/athlete-standing-woods_23-2147618054.jpg",
|
||||
alt: "Pro Cyclist 2",
|
||||
},
|
||||
{
|
||||
src: "http://img.b2bpic.net/free-photo/female-cyclist-posing-with-bicycle-helmet_23-2149749654.jpg",
|
||||
alt: "Pro Cyclist 3",
|
||||
},
|
||||
{
|
||||
src: "http://img.b2bpic.net/free-photo/man-riding-bike-cold-day_23-2148775611.jpg",
|
||||
alt: "Pro Cyclist 4",
|
||||
},
|
||||
{
|
||||
src: "http://img.b2bpic.net/free-photo/man-riding-mountain-bike_23-2148775586.jpg",
|
||||
alt: "Pro Cyclist 5",
|
||||
},
|
||||
]}
|
||||
avatarText="Trusted by 500+ riders"
|
||||
marqueeItems={[
|
||||
{
|
||||
type: "text",
|
||||
text: "Ultra-lightweight",
|
||||
},
|
||||
{
|
||||
type: "text",
|
||||
text: "Aerodynamic",
|
||||
},
|
||||
{
|
||||
type: "text",
|
||||
text: "Breathable",
|
||||
},
|
||||
{
|
||||
type: "text",
|
||||
text: "Moisture-wicking",
|
||||
},
|
||||
{
|
||||
type: "text",
|
||||
text: "Performance-fit",
|
||||
},
|
||||
]}
|
||||
/>
|
||||
</div>
|
||||
<div id="hero" data-section="hero">
|
||||
<HeroSplitKpi
|
||||
background={{ variant: "plain" }}
|
||||
title="High performance kit. Honest pricing."
|
||||
description="Rêveur creates premium cycling clothing for riders who want speed, comfort, and quality without overpaying."
|
||||
kpis={[
|
||||
{ value: "100%", label: "Performance Fit" },
|
||||
{ value: "Premium", label: "Chamois Quality" },
|
||||
{ value: "Direct", label: "Honest Pricing" }
|
||||
]}
|
||||
enableKpiAnimation={true}
|
||||
tag="Performance cycling apparel"
|
||||
buttons={[
|
||||
{ text: "Shop the collection", href: "#categories" },
|
||||
{ text: "Why Rêveur", href: "#about" }
|
||||
]}
|
||||
imageSrc="http://img.b2bpic.net/free-photo/female-cyclist-posing-with-bicycle-helmet_23-2149749657.jpg"
|
||||
mediaAnimation="slide-up"
|
||||
avatars={[
|
||||
{ src: "http://img.b2bpic.net/free-photo/female-cyclist-posing-with-bicycle-helmet_23-2149749657.jpg", alt: "Pro Cyclist 1" },
|
||||
{ src: "http://img.b2bpic.net/free-photo/athlete-standing-woods_23-2147618054.jpg", alt: "Pro Cyclist 2" },
|
||||
{ src: "http://img.b2bpic.net/free-photo/female-cyclist-posing-with-bicycle-helmet_23-2149749654.jpg", alt: "Pro Cyclist 3" },
|
||||
{ src: "http://img.b2bpic.net/free-photo/man-riding-bike-cold-day_23-2148775611.jpg", alt: "Pro Cyclist 4" },
|
||||
{ src: "http://img.b2bpic.net/free-photo/man-riding-mountain-bike_23-2148775586.jpg", alt: "Pro Cyclist 5" }
|
||||
]}
|
||||
avatarText="Trusted by 500+ riders"
|
||||
marqueeItems={[
|
||||
{ type: "text", text: "Ultra-lightweight" },
|
||||
{ type: "text", text: "Aerodynamic" },
|
||||
{ type: "text", text: "Breathable" },
|
||||
{ type: "text", text: "Moisture-wicking" },
|
||||
{ type: "text", text: "Performance-fit" }
|
||||
]}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="metrics" data-section="metrics">
|
||||
<MetricCardFourteen
|
||||
useInvertedBackground={false}
|
||||
title="Why we are different"
|
||||
tag="Our core principles"
|
||||
metrics={[
|
||||
{
|
||||
id: "m1",
|
||||
value: "Performance",
|
||||
description: "Technical fabrics and ride-tested fits that perform under pressure.",
|
||||
},
|
||||
{
|
||||
id: "m2",
|
||||
value: "Endurance",
|
||||
description: "Quality materials and construction that stand up to hard training.",
|
||||
},
|
||||
{
|
||||
id: "m3",
|
||||
value: "Accessibility",
|
||||
description: "Premium feel without the inflated luxury-brand price tag.",
|
||||
},
|
||||
]}
|
||||
/>
|
||||
</div>
|
||||
<div id="metrics" data-section="metrics">
|
||||
<MetricCardFourteen
|
||||
useInvertedBackground={false}
|
||||
title="Why we are different"
|
||||
tag="Our core principles"
|
||||
metrics={[
|
||||
{ id: "m1", value: "Performance", description: "Technical fabrics and ride-tested fits that perform under pressure." },
|
||||
{ id: "m2", value: "Endurance", description: "Quality materials and construction that stand up to hard training." },
|
||||
{ id: "m3", value: "Accessibility", description: "Premium feel without the inflated luxury-brand price tag." }
|
||||
]}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="categories" data-section="categories">
|
||||
<ProductCardTwo
|
||||
animationType="slide-up"
|
||||
textboxLayout="split-description"
|
||||
gridVariant="three-columns-all-equal-width"
|
||||
useInvertedBackground={false}
|
||||
products={[
|
||||
{
|
||||
id: "p1",
|
||||
brand: "Rêveur",
|
||||
name: "Performance Jersey",
|
||||
price: "$85",
|
||||
rating: 5,
|
||||
reviewCount: "120",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/athlete-standing-woods_23-2147618054.jpg",
|
||||
},
|
||||
{
|
||||
id: "p2",
|
||||
brand: "Rêveur",
|
||||
name: "Pro Bib Shorts",
|
||||
price: "$120",
|
||||
rating: 5,
|
||||
reviewCount: "98",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/female-cyclist-posing-with-bicycle-helmet_23-2149749654.jpg",
|
||||
},
|
||||
{
|
||||
id: "p3",
|
||||
brand: "Rêveur",
|
||||
name: "Essential Kit",
|
||||
price: "$45",
|
||||
rating: 4,
|
||||
reviewCount: "56",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/view-composition-with-neatly-arranged-organized-sport-items_23-2150275217.jpg",
|
||||
},
|
||||
{
|
||||
id: "p4",
|
||||
brand: "Rêveur",
|
||||
name: "Summer Weight Jersey",
|
||||
price: "$95",
|
||||
rating: 5,
|
||||
reviewCount: "84",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/man-riding-bike-cold-day_23-2148775611.jpg",
|
||||
},
|
||||
{
|
||||
id: "p5",
|
||||
brand: "Rêveur",
|
||||
name: "Endurance Bibs",
|
||||
price: "$140",
|
||||
rating: 5,
|
||||
reviewCount: "112",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/man-riding-mountain-bike_23-2148775586.jpg",
|
||||
},
|
||||
{
|
||||
id: "p6",
|
||||
brand: "Rêveur",
|
||||
name: "Ride Accessories",
|
||||
price: "$30",
|
||||
rating: 4,
|
||||
reviewCount: "42",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/bike-repair-tools-adjustments_482257-80596.jpg",
|
||||
},
|
||||
]}
|
||||
title="Three essentials. Nothing extra."
|
||||
description="A focused lineup designed to keep the brand simple and the buying experience clear."
|
||||
/>
|
||||
</div>
|
||||
<div id="categories" data-section="categories">
|
||||
<ProductCardTwo
|
||||
animationType="slide-up"
|
||||
textboxLayout="split-description"
|
||||
gridVariant="three-columns-all-equal-width"
|
||||
useInvertedBackground={false}
|
||||
products={[
|
||||
{ id: "p1", brand: "Rêveur", name: "Performance Jersey", price: "$85", rating: 5, reviewCount: "120", imageSrc: "http://img.b2bpic.net/free-photo/athlete-standing-woods_23-2147618054.jpg" },
|
||||
{ id: "p2", brand: "Rêveur", name: "Pro Bib Shorts", price: "$120", rating: 5, reviewCount: "98", imageSrc: "http://img.b2bpic.net/free-photo/female-cyclist-posing-with-bicycle-helmet_23-2149749654.jpg" },
|
||||
{ id: "p3", brand: "Rêveur", name: "Essential Kit", price: "$45", rating: 4, reviewCount: "56", imageSrc: "http://img.b2bpic.net/free-photo/view-composition-with-neatly-arranged-organized-sport-items_23-2150275217.jpg" },
|
||||
{ id: "p4", brand: "Rêveur", name: "Summer Weight Jersey", price: "$95", rating: 5, reviewCount: "84", imageSrc: "http://img.b2bpic.net/free-photo/man-riding-bike-cold-day_23-2148775611.jpg" },
|
||||
{ id: "p5", brand: "Rêveur", name: "Endurance Bibs", price: "$140", rating: 5, reviewCount: "112", imageSrc: "http://img.b2bpic.net/free-photo/man-riding-mountain-bike_23-2148775586.jpg" },
|
||||
{ id: "p6", brand: "Rêveur", name: "Ride Accessories", price: "$30", rating: 4, reviewCount: "42", imageSrc: "http://img.b2bpic.net/free-photo/bike-repair-tools-adjustments_482257-80596.jpg" }
|
||||
]}
|
||||
title="Three essentials. Nothing extra."
|
||||
description="A focused lineup designed to keep the brand simple and the buying experience clear."
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="about" data-section="about">
|
||||
<MetricSplitMediaAbout
|
||||
useInvertedBackground={false}
|
||||
title="Premium cycling clothing without the luxury markup."
|
||||
description="Rêveur is built around a simple idea: riders should not have to choose between elite-level performance and accessible prices. By focusing only on jerseys, bibs, and accessories, we keep our range tight, our quality high, and every product purpose-driven."
|
||||
metrics={[
|
||||
{
|
||||
value: "100%",
|
||||
title: "Technical Focus",
|
||||
},
|
||||
{
|
||||
value: "Direct",
|
||||
title: "Honest Price",
|
||||
},
|
||||
]}
|
||||
imageSrc="http://img.b2bpic.net/free-photo/female-cyclist-posing-with-bicycle-helmet_23-2149749657.jpg?_wi=2"
|
||||
mediaAnimation="blur-reveal"
|
||||
metricsAnimation="slide-up"
|
||||
/>
|
||||
</div>
|
||||
<div id="about" data-section="about">
|
||||
<MetricSplitMediaAbout
|
||||
useInvertedBackground={false}
|
||||
title="Premium cycling clothing without the luxury markup."
|
||||
description="Rêveur is built around a simple idea: riders should not have to choose between elite-level performance and accessible prices. By focusing only on jerseys, bibs, and accessories, we keep our range tight, our quality high, and every product purpose-driven."
|
||||
metrics={[
|
||||
{ value: "100%", title: "Technical Focus" },
|
||||
{ value: "Direct", title: "Honest Price" }
|
||||
]}
|
||||
imageSrc="http://img.b2bpic.net/free-photo/female-cyclist-posing-with-bicycle-helmet_23-2149749657.jpg"
|
||||
mediaAnimation="blur-reveal"
|
||||
metricsAnimation="slide-up"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="cta" data-section="cta">
|
||||
<ContactCTA
|
||||
useInvertedBackground={false}
|
||||
background={{
|
||||
variant: "plain",
|
||||
}}
|
||||
tag="Ready to ride?"
|
||||
title="Ride further in kit designed to perform."
|
||||
description="Clean design, technical quality, and fair pricing for serious cyclists."
|
||||
buttons={[
|
||||
{
|
||||
text: "View collection",
|
||||
href: "#categories",
|
||||
},
|
||||
]}
|
||||
/>
|
||||
</div>
|
||||
<div id="cta" data-section="cta">
|
||||
<ContactCTA
|
||||
useInvertedBackground={false}
|
||||
background={{ variant: "plain" }}
|
||||
tag="Ready to ride?"
|
||||
title="Ride further in kit designed to perform."
|
||||
description="Clean design, technical quality, and fair pricing for serious cyclists."
|
||||
buttons={[{ text: "View collection", href: "#categories" }]}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="footer" data-section="footer">
|
||||
<FooterBase
|
||||
columns={[
|
||||
{
|
||||
title: "Shop",
|
||||
items: [
|
||||
{
|
||||
label: "Jerseys",
|
||||
href: "#categories",
|
||||
},
|
||||
{
|
||||
label: "Bibs",
|
||||
href: "#categories",
|
||||
},
|
||||
{
|
||||
label: "Accessories",
|
||||
href: "#categories",
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
title: "Company",
|
||||
items: [
|
||||
{
|
||||
label: "About Us",
|
||||
href: "#about",
|
||||
},
|
||||
{
|
||||
label: "Contact",
|
||||
href: "#cta",
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
title: "Connect",
|
||||
items: [
|
||||
{
|
||||
label: "Instagram",
|
||||
href: "#",
|
||||
},
|
||||
{
|
||||
label: "Email",
|
||||
href: "#",
|
||||
},
|
||||
],
|
||||
},
|
||||
]}
|
||||
logoText="Rêveur"
|
||||
copyrightText="© 2026 Rêveur. Performance cycling clothing."
|
||||
/>
|
||||
</div>
|
||||
<div id="footer" data-section="footer">
|
||||
<FooterBase
|
||||
columns={[
|
||||
{ title: "Shop", items: [{ label: "Jerseys", href: "#categories" }, { label: "Bibs", href: "#categories" }, { label: "Accessories", href: "#categories" }] },
|
||||
{ title: "Company", items: [{ label: "About Us", href: "#about" }, { label: "Contact", href: "#cta" }] },
|
||||
{ title: "Connect", items: [{ label: "Instagram", href: "#" }, { label: "Email", href: "#" }] }
|
||||
]}
|
||||
logoText="Rêveur"
|
||||
copyrightText="© 2026 Rêveur. Performance cycling clothing."
|
||||
/>
|
||||
</div>
|
||||
</ReactLenis>
|
||||
</ThemeProvider>
|
||||
);
|
||||
|
||||
Reference in New Issue
Block a user