Merge version_1 into main #2
231
src/app/page.tsx
231
src/app/page.tsx
@@ -29,17 +29,11 @@ export default function LandingPage() {
|
||||
<NavbarStyleFullscreen
|
||||
navItems={[
|
||||
{
|
||||
name: "Flavor",
|
||||
id: "#flavor",
|
||||
},
|
||||
name: "Flavor", id: "#flavor"},
|
||||
{
|
||||
name: "Mystery",
|
||||
id: "#mystery",
|
||||
},
|
||||
name: "Mystery", id: "#mystery"},
|
||||
{
|
||||
name: "Store",
|
||||
id: "#store",
|
||||
},
|
||||
name: "Store", id: "#store"},
|
||||
]}
|
||||
brandName="Dr Pepper"
|
||||
/>
|
||||
@@ -48,106 +42,56 @@ export default function LandingPage() {
|
||||
<div id="hero" data-section="hero">
|
||||
<HeroBillboardTestimonial
|
||||
background={{
|
||||
variant: "glowing-orb",
|
||||
}}
|
||||
variant: "glowing-orb"}}
|
||||
title="Not For Everyone."
|
||||
description="23 flavors. One mystery. Are you bold enough to experience the original blend?"
|
||||
testimonials={[
|
||||
{
|
||||
name: "Alex R.",
|
||||
handle: "@drp_fan",
|
||||
testimonial: "The only drink that keeps me focused through the night.",
|
||||
rating: 5,
|
||||
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3Bedjv1MNsWpfpHt3a4duJyyEdV/a-high-end-cinematic-product-shot-of-a-c-1774853655285-466b6df2.png?_wi=1",
|
||||
imageAlt: "A high-end cinematic product shot of a cold Dr Pepper can with vibrant carbonation bubbles, floating",
|
||||
},
|
||||
name: "Alex R.", handle: "@drp_fan", testimonial: "The only drink that keeps me focused through the night.", rating: 5,
|
||||
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3Bedjv1MNsWpfpHt3a4duJyyEdV/a-high-end-cinematic-product-shot-of-a-c-1774853655285-466b6df2.png", imageAlt: "A high-end cinematic product shot of a cold Dr Pepper can with vibrant carbonation bubbles, floating"},
|
||||
{
|
||||
name: "Sam K.",
|
||||
handle: "@soda_queen",
|
||||
testimonial: "23 flavors? I taste everything and nothing at once. It's magic.",
|
||||
rating: 5,
|
||||
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3Bedjv1MNsWpfpHt3a4duJyyEdV/a-sleek-studio-shot-of-dr-pepper-origina-1774853655552-c6688952.png?_wi=1",
|
||||
imageAlt: "A sleek studio shot of Dr Pepper Original can, high quality, sharp focus, dark background.",
|
||||
},
|
||||
name: "Sam K.", handle: "@soda_queen", testimonial: "23 flavors? I taste everything and nothing at once. It's magic.", rating: 5,
|
||||
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3Bedjv1MNsWpfpHt3a4duJyyEdV/a-sleek-studio-shot-of-dr-pepper-origina-1774853655552-c6688952.png", imageAlt: "A sleek studio shot of Dr Pepper Original can, high quality, sharp focus, dark background."},
|
||||
{
|
||||
name: "Jordan P.",
|
||||
handle: "@drpepper_head",
|
||||
testimonial: "Don't even try to guess the recipe, just enjoy the ride.",
|
||||
rating: 5,
|
||||
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3Bedjv1MNsWpfpHt3a4duJyyEdV/a-sleek-studio-shot-of-dr-pepper-zero-su-1774853658632-59cca428.png?_wi=1",
|
||||
imageAlt: "A sleek studio shot of Dr Pepper Zero Sugar can, high quality, sharp focus, dark background.",
|
||||
},
|
||||
name: "Jordan P.", handle: "@drpepper_head", testimonial: "Don't even try to guess the recipe, just enjoy the ride.", rating: 5,
|
||||
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3Bedjv1MNsWpfpHt3a4duJyyEdV/a-sleek-studio-shot-of-dr-pepper-zero-su-1774853658632-59cca428.png", imageAlt: "A sleek studio shot of Dr Pepper Zero Sugar can, high quality, sharp focus, dark background."},
|
||||
{
|
||||
name: "Casey L.",
|
||||
handle: "@flavor_guru",
|
||||
testimonial: "Unconventional perfection in a can.",
|
||||
rating: 5,
|
||||
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3Bedjv1MNsWpfpHt3a4duJyyEdV/a-sleek-studio-shot-of-dr-pepper-cherry--1774853657804-1ae8945e.png?_wi=1",
|
||||
imageAlt: "A sleek studio shot of Dr Pepper Cherry can, high quality, sharp focus, dark background.",
|
||||
},
|
||||
name: "Casey L.", handle: "@flavor_guru", testimonial: "Unconventional perfection in a can.", rating: 5,
|
||||
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3Bedjv1MNsWpfpHt3a4duJyyEdV/a-sleek-studio-shot-of-dr-pepper-cherry--1774853657804-1ae8945e.png", imageAlt: "A sleek studio shot of Dr Pepper Cherry can, high quality, sharp focus, dark background."},
|
||||
{
|
||||
name: "Taylor M.",
|
||||
handle: "@pepper_addict",
|
||||
testimonial: "My tastebuds have never been this challenged or satisfied.",
|
||||
rating: 5,
|
||||
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3Bedjv1MNsWpfpHt3a4duJyyEdV/young-stylish-adult-holding-a-dr-pepper--1774853655872-ce60f2c0.png?_wi=1",
|
||||
imageAlt: "Young stylish adult holding a dr pepper can, candid, cinematic lighting, dark atmosphere.",
|
||||
},
|
||||
name: "Taylor M.", handle: "@pepper_addict", testimonial: "My tastebuds have never been this challenged or satisfied.", rating: 5,
|
||||
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3Bedjv1MNsWpfpHt3a4duJyyEdV/young-stylish-adult-holding-a-dr-pepper--1774853655872-ce60f2c0.png", imageAlt: "Young stylish adult holding a dr pepper can, candid, cinematic lighting, dark atmosphere."},
|
||||
]}
|
||||
buttons={[
|
||||
{
|
||||
text: "Shop Now",
|
||||
href: "#products",
|
||||
},
|
||||
text: "Shop Now", href: "#products"},
|
||||
{
|
||||
text: "Find Flavor",
|
||||
href: "#locator",
|
||||
},
|
||||
text: "Find Flavor", href: "#locator"},
|
||||
]}
|
||||
imageSrc="https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3Bedjv1MNsWpfpHt3a4duJyyEdV/a-high-end-cinematic-product-shot-of-a-c-1774853655285-466b6df2.png?_wi=2"
|
||||
imageSrc="https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3Bedjv1MNsWpfpHt3a4duJyyEdV/a-high-end-cinematic-product-shot-of-a-c-1774853655285-466b6df2.png"
|
||||
avatars={[
|
||||
{
|
||||
src: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3Bedjv1MNsWpfpHt3a4duJyyEdV/young-stylish-adult-holding-a-dr-pepper--1774853655872-ce60f2c0.png",
|
||||
alt: "User 1",
|
||||
},
|
||||
src: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3Bedjv1MNsWpfpHt3a4duJyyEdV/young-stylish-adult-holding-a-dr-pepper--1774853655872-ce60f2c0.png", alt: "User 1"},
|
||||
{
|
||||
src: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3Bedjv1MNsWpfpHt3a4duJyyEdV/gen-z-person-laughing-with-a-soda-can-ne-1774853655521-b55fd030.png",
|
||||
alt: "User 2",
|
||||
},
|
||||
src: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3Bedjv1MNsWpfpHt3a4duJyyEdV/gen-z-person-laughing-with-a-soda-can-ne-1774853655521-b55fd030.png", alt: "User 2"},
|
||||
{
|
||||
src: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3Bedjv1MNsWpfpHt3a4duJyyEdV/portrait-of-a-fan-enjoying-a-unique-dr-p-1774853655987-3643702d.png",
|
||||
alt: "User 3",
|
||||
},
|
||||
src: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3Bedjv1MNsWpfpHt3a4duJyyEdV/portrait-of-a-fan-enjoying-a-unique-dr-p-1774853655987-3643702d.png", alt: "User 3"},
|
||||
{
|
||||
src: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3Bedjv1MNsWpfpHt3a4duJyyEdV/close-up-hands-clinking-soda-cans-togeth-1774853655949-f32a5366.png",
|
||||
alt: "User 4",
|
||||
},
|
||||
src: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3Bedjv1MNsWpfpHt3a4duJyyEdV/close-up-hands-clinking-soda-cans-togeth-1774853655949-f32a5366.png", alt: "User 4"},
|
||||
{
|
||||
src: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3Bedjv1MNsWpfpHt3a4duJyyEdV/young-stylish-adult-holding-a-dr-pepper--1774853655872-ce60f2c0.png",
|
||||
alt: "User 5",
|
||||
},
|
||||
src: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3Bedjv1MNsWpfpHt3a4duJyyEdV/young-stylish-adult-holding-a-dr-pepper--1774853655872-ce60f2c0.png", alt: "User 5"},
|
||||
]}
|
||||
marqueeItems={[
|
||||
{
|
||||
type: "text",
|
||||
text: "23 Flavors",
|
||||
},
|
||||
type: "text", text: "23 Flavors"},
|
||||
{
|
||||
type: "text",
|
||||
text: "Deep Burgundy",
|
||||
},
|
||||
type: "text", text: "Deep Burgundy"},
|
||||
{
|
||||
type: "text",
|
||||
text: "Unique Mystery",
|
||||
},
|
||||
type: "text", text: "Unique Mystery"},
|
||||
{
|
||||
type: "text",
|
||||
text: "Bold Original",
|
||||
},
|
||||
type: "text", text: "Bold Original"},
|
||||
{
|
||||
type: "text",
|
||||
text: "Total Experience",
|
||||
},
|
||||
type: "text", text: "Total Experience"},
|
||||
]}
|
||||
/>
|
||||
</div>
|
||||
@@ -160,23 +104,11 @@ export default function LandingPage() {
|
||||
useInvertedBackground={true}
|
||||
products={[
|
||||
{
|
||||
id: "p1",
|
||||
name: "Original",
|
||||
price: "$1.99",
|
||||
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3Bedjv1MNsWpfpHt3a4duJyyEdV/a-sleek-studio-shot-of-dr-pepper-origina-1774853655552-c6688952.png?_wi=2",
|
||||
},
|
||||
id: "p1", name: "Original", price: "$1.99", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3Bedjv1MNsWpfpHt3a4duJyyEdV/a-sleek-studio-shot-of-dr-pepper-origina-1774853655552-c6688952.png"},
|
||||
{
|
||||
id: "p2",
|
||||
name: "Zero Sugar",
|
||||
price: "$1.99",
|
||||
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3Bedjv1MNsWpfpHt3a4duJyyEdV/a-sleek-studio-shot-of-dr-pepper-zero-su-1774853658632-59cca428.png?_wi=2",
|
||||
},
|
||||
id: "p2", name: "Zero Sugar", price: "$1.99", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3Bedjv1MNsWpfpHt3a4duJyyEdV/a-sleek-studio-shot-of-dr-pepper-zero-su-1774853658632-59cca428.png"},
|
||||
{
|
||||
id: "p3",
|
||||
name: "Cherry",
|
||||
price: "$2.29",
|
||||
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3Bedjv1MNsWpfpHt3a4duJyyEdV/a-sleek-studio-shot-of-dr-pepper-cherry--1774853657804-1ae8945e.png?_wi=2",
|
||||
},
|
||||
id: "p3", name: "Cherry", price: "$2.29", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3Bedjv1MNsWpfpHt3a4duJyyEdV/a-sleek-studio-shot-of-dr-pepper-cherry--1774853657804-1ae8945e.png"},
|
||||
]}
|
||||
title="Discover Your Match"
|
||||
description="From Zero to Cherry, pick your path."
|
||||
@@ -185,36 +117,22 @@ export default function LandingPage() {
|
||||
|
||||
<div id="mystery" data-section="mystery">
|
||||
<FeatureCardTwentyThree
|
||||
animationType="slide-up"
|
||||
textboxLayout="split"
|
||||
useInvertedBackground={false}
|
||||
features={[
|
||||
{
|
||||
id: "f1",
|
||||
title: "Complexity",
|
||||
tags: [
|
||||
"Deep",
|
||||
"Spicy",
|
||||
],
|
||||
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3Bedjv1MNsWpfpHt3a4duJyyEdV/a-sleek-studio-shot-of-dr-pepper-origina-1774853655552-c6688952.png?_wi=3",
|
||||
},
|
||||
id: "f1", title: "Complexity", tags: [
|
||||
"Deep", "Spicy"],
|
||||
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3Bedjv1MNsWpfpHt3a4duJyyEdV/a-sleek-studio-shot-of-dr-pepper-origina-1774853655552-c6688952.png"},
|
||||
{
|
||||
id: "f2",
|
||||
title: "Bubbles",
|
||||
tags: [
|
||||
"Fizz",
|
||||
"Bold",
|
||||
],
|
||||
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3Bedjv1MNsWpfpHt3a4duJyyEdV/a-sleek-studio-shot-of-dr-pepper-zero-su-1774853658632-59cca428.png?_wi=3",
|
||||
},
|
||||
id: "f2", title: "Bubbles", tags: [
|
||||
"Fizz", "Bold"],
|
||||
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3Bedjv1MNsWpfpHt3a4duJyyEdV/a-sleek-studio-shot-of-dr-pepper-zero-su-1774853658632-59cca428.png"},
|
||||
{
|
||||
id: "f3",
|
||||
title: "Mystery",
|
||||
tags: [
|
||||
"One-of-a-kind",
|
||||
"Secret",
|
||||
],
|
||||
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3Bedjv1MNsWpfpHt3a4duJyyEdV/a-sleek-studio-shot-of-dr-pepper-cherry--1774853657804-1ae8945e.png?_wi=3",
|
||||
},
|
||||
id: "f3", title: "Mystery", tags: [
|
||||
"One-of-a-kind", "Secret"],
|
||||
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3Bedjv1MNsWpfpHt3a4duJyyEdV/a-sleek-studio-shot-of-dr-pepper-cherry--1774853657804-1ae8945e.png"},
|
||||
]}
|
||||
title="The 23 Flavor Code"
|
||||
description="Hidden deep within the blend, 23 secret ingredients collide to create the experience."
|
||||
@@ -228,40 +146,15 @@ export default function LandingPage() {
|
||||
useInvertedBackground={true}
|
||||
testimonials={[
|
||||
{
|
||||
id: "t1",
|
||||
name: "Sarah",
|
||||
role: "Fan",
|
||||
testimonial: "Nothing else tastes like it.",
|
||||
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3Bedjv1MNsWpfpHt3a4duJyyEdV/young-stylish-adult-holding-a-dr-pepper--1774853655872-ce60f2c0.png?_wi=2",
|
||||
},
|
||||
id: "t1", name: "Sarah", role: "Fan", testimonial: "Nothing else tastes like it.", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3Bedjv1MNsWpfpHt3a4duJyyEdV/young-stylish-adult-holding-a-dr-pepper--1774853655872-ce60f2c0.png"},
|
||||
{
|
||||
id: "t2",
|
||||
name: "Mike",
|
||||
role: "Fan",
|
||||
testimonial: "My daily caffeine ritual.",
|
||||
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3Bedjv1MNsWpfpHt3a4duJyyEdV/gen-z-person-laughing-with-a-soda-can-ne-1774853655521-b55fd030.png",
|
||||
},
|
||||
id: "t2", name: "Mike", role: "Fan", testimonial: "My daily caffeine ritual.", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3Bedjv1MNsWpfpHt3a4duJyyEdV/gen-z-person-laughing-with-a-soda-can-ne-1774853655521-b55fd030.png"},
|
||||
{
|
||||
id: "t3",
|
||||
name: "Nina",
|
||||
role: "Fan",
|
||||
testimonial: "Unapologetically bold.",
|
||||
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3Bedjv1MNsWpfpHt3a4duJyyEdV/portrait-of-a-fan-enjoying-a-unique-dr-p-1774853655987-3643702d.png",
|
||||
},
|
||||
id: "t3", name: "Nina", role: "Fan", testimonial: "Unapologetically bold.", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3Bedjv1MNsWpfpHt3a4duJyyEdV/portrait-of-a-fan-enjoying-a-unique-dr-p-1774853655987-3643702d.png"},
|
||||
{
|
||||
id: "t4",
|
||||
name: "Tom",
|
||||
role: "Fan",
|
||||
testimonial: "Can't live without the 23.",
|
||||
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3Bedjv1MNsWpfpHt3a4duJyyEdV/close-up-hands-clinking-soda-cans-togeth-1774853655949-f32a5366.png",
|
||||
},
|
||||
id: "t4", name: "Tom", role: "Fan", testimonial: "Can't live without the 23.", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3Bedjv1MNsWpfpHt3a4duJyyEdV/close-up-hands-clinking-soda-cans-togeth-1774853655949-f32a5366.png"},
|
||||
{
|
||||
id: "t5",
|
||||
name: "Leo",
|
||||
role: "Fan",
|
||||
testimonial: "The only soda that makes sense.",
|
||||
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3Bedjv1MNsWpfpHt3a4duJyyEdV/young-stylish-adult-holding-a-dr-pepper--1774853655872-ce60f2c0.png?_wi=3",
|
||||
},
|
||||
id: "t5", name: "Leo", role: "Fan", testimonial: "The only soda that makes sense.", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3Bedjv1MNsWpfpHt3a4duJyyEdV/young-stylish-adult-holding-a-dr-pepper--1774853655872-ce60f2c0.png"},
|
||||
]}
|
||||
title="Built Different"
|
||||
description="Join the cult of complexity."
|
||||
@@ -274,20 +167,14 @@ export default function LandingPage() {
|
||||
useInvertedBackground={false}
|
||||
title="Frequently Asked"
|
||||
description="Answers to the mystery."
|
||||
imageSrc="https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3Bedjv1MNsWpfpHt3a4duJyyEdV/a-high-end-cinematic-product-shot-of-a-c-1774853655285-466b6df2.png?_wi=3"
|
||||
imageSrc="https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3Bedjv1MNsWpfpHt3a4duJyyEdV/a-high-end-cinematic-product-shot-of-a-c-1774853655285-466b6df2.png"
|
||||
mediaAnimation="slide-up"
|
||||
faqsAnimation="blur-reveal"
|
||||
faqs={[
|
||||
{
|
||||
id: "q1",
|
||||
title: "What are the 23 flavors?",
|
||||
content: "That is the ultimate secret!",
|
||||
},
|
||||
id: "q1", title: "What are the 23 flavors?", content: "That is the ultimate secret!"},
|
||||
{
|
||||
id: "q2",
|
||||
title: "Is Dr Pepper a cola?",
|
||||
content: "It is a unique blend all on its own.",
|
||||
},
|
||||
id: "q2", title: "Is Dr Pepper a cola?", content: "It is a unique blend all on its own."},
|
||||
]}
|
||||
/>
|
||||
</div>
|
||||
@@ -296,29 +183,19 @@ export default function LandingPage() {
|
||||
<FooterSimple
|
||||
columns={[
|
||||
{
|
||||
title: "Company",
|
||||
items: [
|
||||
title: "Company", items: [
|
||||
{
|
||||
label: "About",
|
||||
href: "#about",
|
||||
},
|
||||
label: "About", href: "#about"},
|
||||
{
|
||||
label: "Careers",
|
||||
href: "#",
|
||||
},
|
||||
label: "Careers", href: "#"},
|
||||
],
|
||||
},
|
||||
{
|
||||
title: "Legal",
|
||||
items: [
|
||||
title: "Legal", items: [
|
||||
{
|
||||
label: "Privacy",
|
||||
href: "#",
|
||||
},
|
||||
label: "Privacy", href: "#"},
|
||||
{
|
||||
label: "Terms",
|
||||
href: "#",
|
||||
},
|
||||
label: "Terms", href: "#"},
|
||||
],
|
||||
},
|
||||
]}
|
||||
|
||||
Reference in New Issue
Block a user