Merge version_1 into main
Merge version_1 into main
This commit was merged in pull request #2.
This commit is contained in:
491
src/app/page.tsx
491
src/app/page.tsx
@@ -30,370 +30,153 @@ export default function LandingPage() {
|
||||
headingFontWeight="normal"
|
||||
>
|
||||
<ReactLenis root>
|
||||
<div id="nav" data-section="nav">
|
||||
<NavbarStyleApple
|
||||
navItems={[
|
||||
{
|
||||
name: "Home",
|
||||
id: "hero",
|
||||
},
|
||||
{
|
||||
name: "Performance",
|
||||
id: "metrics",
|
||||
},
|
||||
{
|
||||
name: "Products",
|
||||
id: "products",
|
||||
},
|
||||
{
|
||||
name: "Events",
|
||||
id: "team",
|
||||
},
|
||||
{
|
||||
name: "Join",
|
||||
id: "contact",
|
||||
},
|
||||
]}
|
||||
brandName="RED BULL"
|
||||
/>
|
||||
</div>
|
||||
<div id="nav" data-section="nav">
|
||||
<NavbarStyleApple
|
||||
navItems={[
|
||||
{ name: "Home", id: "hero" },
|
||||
{ name: "Performance", id: "metrics" },
|
||||
{ name: "Products", id: "products" },
|
||||
{ name: "Events", id: "team" },
|
||||
{ name: "Join", id: "contact" },
|
||||
]}
|
||||
brandName="RED BULL"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="hero" data-section="hero">
|
||||
<HeroLogoBillboard
|
||||
background={{
|
||||
variant: "gradient-bars",
|
||||
}}
|
||||
logoText="RED BULL"
|
||||
description="Unlock your potential. Energy for every challenge."
|
||||
buttons={[
|
||||
{
|
||||
text: "Explore",
|
||||
},
|
||||
{
|
||||
text: "Buy Now",
|
||||
},
|
||||
]}
|
||||
imageSrc="http://img.b2bpic.net/free-photo/man-playing-skateboard-with-jumping-ollie_53876-23058.jpg?_wi=1"
|
||||
mediaAnimation="slide-up"
|
||||
/>
|
||||
</div>
|
||||
<div id="hero" data-section="hero">
|
||||
<HeroLogoBillboard
|
||||
background={{ variant: "gradient-bars" }}
|
||||
logoText="RED BULL"
|
||||
description="Unlock your potential. Energy for every challenge."
|
||||
buttons={[{ text: "Explore" }, { text: "Buy Now" }]}
|
||||
imageSrc="http://img.b2bpic.net/free-photo/man-playing-skateboard-with-jumping-ollie_53876-23058.jpg"
|
||||
mediaAnimation="slide-up"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="metrics" data-section="metrics">
|
||||
<MetricCardOne
|
||||
animationType="depth-3d"
|
||||
textboxLayout="split"
|
||||
gridVariant="bento-grid"
|
||||
useInvertedBackground={false}
|
||||
metrics={[
|
||||
{
|
||||
id: "m1",
|
||||
value: "100%",
|
||||
title: "Energy Boost",
|
||||
description: "Immediate surge",
|
||||
icon: Zap,
|
||||
},
|
||||
{
|
||||
id: "m2",
|
||||
value: "8h",
|
||||
title: "Focus Duration",
|
||||
description: "Sustained drive",
|
||||
icon: Clock,
|
||||
},
|
||||
{
|
||||
id: "m3",
|
||||
value: "24+",
|
||||
title: "Active Countries",
|
||||
description: "Global reach",
|
||||
icon: Globe,
|
||||
},
|
||||
]}
|
||||
title="Performance Impact"
|
||||
description="Quantifiable energy performance metrics."
|
||||
/>
|
||||
</div>
|
||||
<div id="metrics" data-section="metrics">
|
||||
<MetricCardOne
|
||||
animationType="depth-3d"
|
||||
textboxLayout="split"
|
||||
gridVariant="bento-grid"
|
||||
useInvertedBackground={false}
|
||||
metrics={[
|
||||
{ id: "m1", value: "100%", title: "Energy Boost", description: "Immediate surge", icon: Zap },
|
||||
{ id: "m2", value: "8h", title: "Focus Duration", description: "Sustained drive", icon: Clock },
|
||||
{ id: "m3", value: "24+", title: "Active Countries", description: "Global reach", icon: Globe },
|
||||
]}
|
||||
title="Performance Impact"
|
||||
description="Quantifiable energy performance metrics."
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="features" data-section="features">
|
||||
<FeatureBorderGlow
|
||||
animationType="scale-rotate"
|
||||
textboxLayout="default"
|
||||
useInvertedBackground={false}
|
||||
features={[
|
||||
{
|
||||
icon: Shield,
|
||||
title: "Safe Ingredients",
|
||||
description: "Strict quality control.",
|
||||
},
|
||||
{
|
||||
icon: Zap,
|
||||
title: "Rapid Absorption",
|
||||
description: "Quick energy delivery.",
|
||||
},
|
||||
{
|
||||
icon: Star,
|
||||
title: "Premium Taste",
|
||||
description: "The original flavor.",
|
||||
},
|
||||
]}
|
||||
title="Why Red Bull"
|
||||
description="Designed for elite performance."
|
||||
/>
|
||||
</div>
|
||||
<div id="features" data-section="features">
|
||||
<FeatureBorderGlow
|
||||
animationType="scale-rotate"
|
||||
textboxLayout="default"
|
||||
useInvertedBackground={false}
|
||||
features={[
|
||||
{ icon: Shield, title: "Safe Ingredients", description: "Strict quality control." },
|
||||
{ icon: Zap, title: "Rapid Absorption", description: "Quick energy delivery." },
|
||||
{ icon: Star, title: "Premium Taste", description: "The original flavor." },
|
||||
]}
|
||||
title="Why Red Bull"
|
||||
description="Designed for elite performance."
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="products" data-section="products">
|
||||
<ProductCardThree
|
||||
textboxLayout="default"
|
||||
gridVariant="four-items-2x2-equal-grid"
|
||||
useInvertedBackground={false}
|
||||
products={[
|
||||
{
|
||||
id: "p1",
|
||||
name: "Red Bull Energy",
|
||||
price: "$3.99",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/front-view-energy-drink-cans-red-drink-alcohol-photo-darkness_140725-92767.jpg?_wi=1",
|
||||
},
|
||||
{
|
||||
id: "p2",
|
||||
name: "Red Bull Sugarfree",
|
||||
price: "$3.99",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/front-view-energy-drink-cans-red-drink-alcohol-photo-darkness_140725-92770.jpg?_wi=1",
|
||||
},
|
||||
{
|
||||
id: "p3",
|
||||
name: "Red Bull Zero",
|
||||
price: "$3.99",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/front-view-summer-concept-with-copy-space_23-2148545847.jpg?_wi=1",
|
||||
},
|
||||
{
|
||||
id: "p4",
|
||||
name: "Tropical Edition",
|
||||
price: "$4.50",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/high-angle-smoothie-blackberries_23-2148555275.jpg",
|
||||
},
|
||||
{
|
||||
id: "p5",
|
||||
name: "Watermelon Edition",
|
||||
price: "$4.50",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/close-up-metallic-tin-can_23-2151113088.jpg",
|
||||
},
|
||||
{
|
||||
id: "p6",
|
||||
name: "Blue Edition",
|
||||
price: "$4.50",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/futuristic-brightly-colored-soda-can_23-2150995323.jpg",
|
||||
},
|
||||
]}
|
||||
title="Energy Selection"
|
||||
description="Choose your energy boost."
|
||||
/>
|
||||
</div>
|
||||
<div id="products" data-section="products">
|
||||
<ProductCardThree
|
||||
animationType="slide-up"
|
||||
textboxLayout="default"
|
||||
gridVariant="four-items-2x2-equal-grid"
|
||||
useInvertedBackground={false}
|
||||
products={[
|
||||
{ id: "p1", name: "Red Bull Energy", price: "$3.99", imageSrc: "http://img.b2bpic.net/free-photo/front-view-energy-drink-cans-red-drink-alcohol-photo-darkness_140725-92767.jpg" },
|
||||
{ id: "p2", name: "Red Bull Sugarfree", price: "$3.99", imageSrc: "http://img.b2bpic.net/free-photo/front-view-energy-drink-cans-red-drink-alcohol-photo-darkness_140725-92770.jpg" },
|
||||
{ id: "p3", name: "Red Bull Zero", price: "$3.99", imageSrc: "http://img.b2bpic.net/free-photo/front-view-summer-concept-with-copy-space_23-2148545847.jpg" },
|
||||
{ id: "p4", name: "Tropical Edition", price: "$4.50", imageSrc: "http://img.b2bpic.net/free-photo/high-angle-smoothie-blackberries_23-2148555275.jpg" },
|
||||
]}
|
||||
title="Energy Selection"
|
||||
description="Choose your energy boost."
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="pricing" data-section="pricing">
|
||||
<PricingCardOne
|
||||
animationType="depth-3d"
|
||||
textboxLayout="default"
|
||||
useInvertedBackground={false}
|
||||
plans={[
|
||||
{
|
||||
id: "pr1",
|
||||
badge: "Basic",
|
||||
price: "$29/mo",
|
||||
subtitle: "Monthly supply",
|
||||
features: [
|
||||
"12 cans",
|
||||
"Free shipping",
|
||||
],
|
||||
},
|
||||
{
|
||||
id: "pr2",
|
||||
badge: "Pro",
|
||||
price: "$55/mo",
|
||||
subtitle: "Hardcore supply",
|
||||
features: [
|
||||
"24 cans",
|
||||
"Priority status",
|
||||
],
|
||||
},
|
||||
{
|
||||
id: "pr3",
|
||||
badge: "Bulk",
|
||||
price: "$99/mo",
|
||||
subtitle: "Team bulk",
|
||||
features: [
|
||||
"48 cans",
|
||||
"Exclusive perks",
|
||||
],
|
||||
},
|
||||
]}
|
||||
title="Energy Subscriptions"
|
||||
description="Never run out of power."
|
||||
/>
|
||||
</div>
|
||||
<div id="pricing" data-section="pricing">
|
||||
<PricingCardOne
|
||||
animationType="depth-3d"
|
||||
textboxLayout="default"
|
||||
useInvertedBackground={false}
|
||||
plans={[
|
||||
{ id: "pr1", badge: "Basic", price: "$29/mo", subtitle: "Monthly supply", features: ["12 cans", "Free shipping"] },
|
||||
{ id: "pr2", badge: "Pro", price: "$55/mo", subtitle: "Hardcore supply", features: ["24 cans", "Priority status"] },
|
||||
{ id: "pr3", badge: "Bulk", price: "$99/mo", subtitle: "Team bulk", features: ["48 cans", "Exclusive perks"] },
|
||||
]}
|
||||
title="Energy Subscriptions"
|
||||
description="Never run out of power."
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="team" data-section="team">
|
||||
<TeamCardTwo
|
||||
animationType="slide-up"
|
||||
textboxLayout="default"
|
||||
gridVariant="asymmetric-60-wide-40-narrow"
|
||||
useInvertedBackground={false}
|
||||
members={[
|
||||
{
|
||||
id: "a1",
|
||||
name: "Max V",
|
||||
role: "F1 Pro",
|
||||
description: "Speed expert.",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/line-graph-data-analysis-icon_53876-20801.jpg?_wi=1",
|
||||
imageAlt: "speed icon",
|
||||
},
|
||||
{
|
||||
id: "a2",
|
||||
name: "Chloe K",
|
||||
role: "Skier",
|
||||
description: "Snow legend.",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/man-playing-skateboard-with-jumping-ollie_53876-23058.jpg?_wi=2",
|
||||
imageAlt: "speed icon",
|
||||
},
|
||||
{
|
||||
id: "a3",
|
||||
name: "Tom P",
|
||||
role: "Skater",
|
||||
description: "Vertical king.",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/front-view-energy-drink-cans-red-drink-alcohol-photo-darkness_140725-92767.jpg?_wi=2",
|
||||
imageAlt: "speed icon",
|
||||
},
|
||||
]}
|
||||
title="Featured Athletes"
|
||||
description="Performance masters."
|
||||
/>
|
||||
</div>
|
||||
<div id="team" data-section="team">
|
||||
<TeamCardTwo
|
||||
animationType="slide-up"
|
||||
textboxLayout="default"
|
||||
gridVariant="asymmetric-60-wide-40-narrow"
|
||||
useInvertedBackground={false}
|
||||
members={[
|
||||
{ id: "a1", name: "Max V", role: "F1 Pro", description: "Speed expert.", imageSrc: "http://img.b2bpic.net/free-photo/line-graph-data-analysis-icon_53876-20801.jpg" },
|
||||
{ id: "a2", name: "Chloe K", role: "Skier", description: "Snow legend.", imageSrc: "http://img.b2bpic.net/free-photo/man-playing-skateboard-with-jumping-ollie_53876-23058.jpg" },
|
||||
{ id: "a3", name: "Tom P", role: "Skater", description: "Vertical king.", imageSrc: "http://img.b2bpic.net/free-photo/front-view-energy-drink-cans-red-drink-alcohol-photo-darkness_140725-92767.jpg" },
|
||||
]}
|
||||
title="Featured Athletes"
|
||||
description="Performance masters."
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="testimonials" data-section="testimonials">
|
||||
<TestimonialCardFive
|
||||
textboxLayout="default"
|
||||
useInvertedBackground={false}
|
||||
testimonials={[
|
||||
{
|
||||
id: "t1",
|
||||
name: "User 1",
|
||||
date: "2024-01-01",
|
||||
title: "Pro",
|
||||
quote: "Best drink ever.",
|
||||
tag: "athlete",
|
||||
avatarSrc: "http://img.b2bpic.net/free-photo/portrait-bearded-scuba-diver-rain-drops-snow-mountains-background_613910-10812.jpg",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/man-playing-skateboard-with-jumping-ollie_53876-23058.jpg?_wi=3",
|
||||
imageAlt: "athlete portrait",
|
||||
},
|
||||
{
|
||||
id: "t2",
|
||||
name: "User 2",
|
||||
date: "2024-01-02",
|
||||
title: "Pro",
|
||||
quote: "Pure energy.",
|
||||
tag: "athlete",
|
||||
avatarSrc: "http://img.b2bpic.net/free-photo/full-shot-man-skiing-monochrome_23-2151325977.jpg",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/line-graph-data-analysis-icon_53876-20801.jpg?_wi=2",
|
||||
imageAlt: "athlete portrait",
|
||||
},
|
||||
{
|
||||
id: "t3",
|
||||
name: "User 3",
|
||||
date: "2024-01-03",
|
||||
title: "Pro",
|
||||
quote: "Never stop.",
|
||||
tag: "athlete",
|
||||
avatarSrc: "http://img.b2bpic.net/free-photo/confident-redhead-woman-headphones-sportsbra-looking-serious-motivated-fitness-instructor-inviting-workout-gym-white-background_176420-49335.jpg",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/front-view-energy-drink-cans-red-drink-alcohol-photo-darkness_140725-92767.jpg?_wi=3",
|
||||
imageAlt: "athlete portrait",
|
||||
},
|
||||
{
|
||||
id: "t4",
|
||||
name: "User 4",
|
||||
date: "2024-01-04",
|
||||
title: "Pro",
|
||||
quote: "Game changer.",
|
||||
tag: "athlete",
|
||||
avatarSrc: "http://img.b2bpic.net/free-photo/view-young-person-practicing-rock-climbing-sport_23-2151683767.jpg",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/front-view-energy-drink-cans-red-drink-alcohol-photo-darkness_140725-92770.jpg?_wi=2",
|
||||
imageAlt: "athlete portrait",
|
||||
},
|
||||
{
|
||||
id: "t5",
|
||||
name: "User 5",
|
||||
date: "2024-01-05",
|
||||
title: "Pro",
|
||||
quote: "Legendary stuff.",
|
||||
tag: "athlete",
|
||||
avatarSrc: "http://img.b2bpic.net/free-photo/hipster-man-traveling-with-backpack_53876-15357.jpg",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/front-view-summer-concept-with-copy-space_23-2148545847.jpg?_wi=2",
|
||||
imageAlt: "athlete portrait",
|
||||
},
|
||||
]}
|
||||
title="Athlete Stories"
|
||||
description="What they say."
|
||||
/>
|
||||
</div>
|
||||
<div id="testimonials" data-section="testimonials">
|
||||
<TestimonialCardFive
|
||||
textboxLayout="default"
|
||||
useInvertedBackground={false}
|
||||
testimonials={[
|
||||
{ id: "t1", name: "User 1", date: "2024-01-01", title: "Pro", quote: "Best drink ever.", tag: "athlete", avatarSrc: "http://img.b2bpic.net/free-photo/portrait-bearded-scuba-diver-rain-drops-snow-mountains-background_613910-10812.jpg" },
|
||||
{ id: "t2", name: "User 2", date: "2024-01-02", title: "Pro", quote: "Pure energy.", tag: "athlete", avatarSrc: "http://img.b2bpic.net/free-photo/full-shot-man-skiing-monochrome_23-2151325977.jpg" },
|
||||
{ id: "t3", name: "User 3", date: "2024-01-03", title: "Pro", quote: "Never stop.", tag: "athlete", avatarSrc: "http://img.b2bpic.net/free-photo/confident-redhead-woman-headphones-sportsbra-looking-serious-motivated-fitness-instructor-inviting-workout-gym-white-background_176420-49335.jpg" },
|
||||
]}
|
||||
title="Athlete Stories"
|
||||
description="What they say."
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="socialProof" data-section="socialProof">
|
||||
<SocialProofOne
|
||||
textboxLayout="default"
|
||||
useInvertedBackground={false}
|
||||
names={[
|
||||
"F1",
|
||||
"Red Bull Racing",
|
||||
"X-Games",
|
||||
"Copa",
|
||||
"MotoGP",
|
||||
"NHL",
|
||||
"NBA",
|
||||
]}
|
||||
title="Global Partner Ecosystem"
|
||||
description="Supported by the best."
|
||||
/>
|
||||
</div>
|
||||
<div id="socialProof" data-section="socialProof">
|
||||
<SocialProofOne
|
||||
textboxLayout="default"
|
||||
useInvertedBackground={false}
|
||||
names={["F1", "Red Bull Racing", "X-Games", "Copa", "MotoGP"]}
|
||||
title="Global Partner Ecosystem"
|
||||
description="Supported by the best."
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="contact" data-section="contact">
|
||||
<ContactCenter
|
||||
useInvertedBackground={false}
|
||||
background={{
|
||||
variant: "sparkles-gradient",
|
||||
}}
|
||||
tag="Join Us"
|
||||
title="Get Exclusive Access"
|
||||
description="Sign up for updates."
|
||||
/>
|
||||
</div>
|
||||
<div id="contact" data-section="contact">
|
||||
<ContactCenter
|
||||
useInvertedBackground={false}
|
||||
background={{ variant: "sparkles-gradient" }}
|
||||
tag="Join Us"
|
||||
title="Get Exclusive Access"
|
||||
description="Sign up for updates."
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="footer" data-section="footer">
|
||||
<FooterLogoEmphasis
|
||||
columns={[
|
||||
{
|
||||
items: [
|
||||
{
|
||||
label: "Products",
|
||||
href: "#products",
|
||||
},
|
||||
{
|
||||
label: "About",
|
||||
href: "#",
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
items: [
|
||||
{
|
||||
label: "Support",
|
||||
href: "#",
|
||||
},
|
||||
{
|
||||
label: "Legal",
|
||||
href: "#",
|
||||
},
|
||||
],
|
||||
},
|
||||
]}
|
||||
logoText="RED BULL"
|
||||
/>
|
||||
</div>
|
||||
<div id="footer" data-section="footer">
|
||||
<FooterLogoEmphasis
|
||||
logoText="RED BULL"
|
||||
columns={[
|
||||
{ items: [{ label: "Products", href: "#products" }, { label: "About", href: "#" }] },
|
||||
{ items: [{ label: "Support", href: "#" }, { label: "Legal", href: "#" }] }
|
||||
]}
|
||||
/>
|
||||
</div>
|
||||
</ReactLenis>
|
||||
</ThemeProvider>
|
||||
);
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user