Update src/app/page.tsx

This commit is contained in:
2026-05-11 17:20:01 +00:00
parent 306171f57d
commit 5d9139dba6

View File

@@ -32,21 +32,13 @@ export default function LandingPage() {
<NavbarStyleCentered <NavbarStyleCentered
navItems={[ navItems={[
{ {
name: "Shop", name: "Shop", id: "#products"},
id: "#products",
},
{ {
name: "About", name: "About", id: "#about"},
id: "#about",
},
{ {
name: "Benefits", name: "Benefits", id: "#features"},
id: "#features",
},
{ {
name: "FAQ", name: "FAQ", id: "#faq"},
id: "#faq",
},
]} ]}
brandName="rhode" brandName="rhode"
/> />
@@ -55,23 +47,16 @@ export default function LandingPage() {
<div id="hero" data-section="hero"> <div id="hero" data-section="hero">
<HeroSplitKpi <HeroSplitKpi
background={{ background={{
variant: "gradient-bars", variant: "gradient-bars"}}
}}
title="Glazed skin, delivered." title="Glazed skin, delivered."
description="Rhode creates skincare essentials designed to nourish your skin barrier and give you that signature glow." description="Rhode creates skincare essentials designed to nourish your skin barrier and give you that signature glow."
kpis={[ kpis={[
{ {
value: "100%", value: "100%", label: "Clinically Tested"},
label: "Clinically Tested",
},
{ {
value: "Vegan", value: "Vegan", label: "Cruelty Free"},
label: "Cruelty Free",
},
{ {
value: "Safe", value: "Safe", label: "Dermatologist Tested"},
label: "Dermatologist Tested",
},
]} ]}
enableKpiAnimation={true} enableKpiAnimation={true}
imageSrc="http://img.b2bpic.net/free-photo/dreamy-aesthetic-cosmetic-product-with-fresh-background_23-2151382914.jpg" imageSrc="http://img.b2bpic.net/free-photo/dreamy-aesthetic-cosmetic-product-with-fresh-background_23-2151382914.jpg"
@@ -79,48 +64,28 @@ export default function LandingPage() {
mediaAnimation="slide-up" mediaAnimation="slide-up"
avatars={[ avatars={[
{ {
src: "http://img.b2bpic.net/free-photo/beautiful-sensual-brunette-standing-naked-smiling-carefree_176420-20671.jpg", src: "http://img.b2bpic.net/free-photo/beautiful-sensual-brunette-standing-naked-smiling-carefree_176420-20671.jpg", alt: "Happy customer testimonial"},
alt: "Happy customer testimonial",
},
{ {
src: "http://img.b2bpic.net/free-photo/cute-young-woman-skincare-portrait_624325-3441.jpg", src: "http://img.b2bpic.net/free-photo/cute-young-woman-skincare-portrait_624325-3441.jpg", alt: "Skincare enthusiast profile"},
alt: "Skincare enthusiast profile",
},
{ {
src: "http://img.b2bpic.net/free-photo/portrait-beautiful-woman-happy-fit-girl-sportswear-laughing_1153-7828.jpg", src: "http://img.b2bpic.net/free-photo/portrait-beautiful-woman-happy-fit-girl-sportswear-laughing_1153-7828.jpg", alt: "Glowing skin portrait"},
alt: "Glowing skin portrait",
},
{ {
src: "http://img.b2bpic.net/free-photo/happy-beautiful-blond-lady-white-dress-looking-camera-pretty-lady-posing-indoors_549566-350.jpg", src: "http://img.b2bpic.net/free-photo/happy-beautiful-blond-lady-white-dress-looking-camera-pretty-lady-posing-indoors_549566-350.jpg", alt: "Radiant skin user"},
alt: "Radiant skin user",
},
{ {
src: "http://img.b2bpic.net/free-photo/headshot-attractive-female-with-charming-smile-having-blue-eyes-dimples-cheeks-rejoicing-summer-vacations-going-spend-them-abroad-with-her-boyfriend-beauty-emotions-concept_176532-8266.jpg", src: "http://img.b2bpic.net/free-photo/headshot-attractive-female-with-charming-smile-having-blue-eyes-dimples-cheeks-rejoicing-summer-vacations-going-spend-them-abroad-with-her-boyfriend-beauty-emotions-concept_176532-8266.jpg", alt: "Rhode community member"},
alt: "Rhode community member",
},
]} ]}
avatarText="Loved by 10k+ customers" avatarText="Loved by 10k+ customers"
marqueeItems={[ marqueeItems={[
{ {
type: "text", type: "text", text: "Dermatologist Formulated"},
text: "Dermatologist Formulated",
},
{ {
type: "text", type: "text", text: "Fragrance-Free"},
text: "Fragrance-Free",
},
{ {
type: "text", type: "text", text: "Gluten-Free"},
text: "Gluten-Free",
},
{ {
type: "text", type: "text", text: "Vegan & Cruelty Free"},
text: "Vegan & Cruelty Free",
},
{ {
type: "text", type: "text", text: "Barrier Friendly"},
text: "Barrier Friendly",
},
]} ]}
/> />
</div> </div>
@@ -138,20 +103,11 @@ export default function LandingPage() {
useInvertedBackground={false} useInvertedBackground={false}
features={[ features={[
{ {
title: "Deep Hydration", title: "Deep Hydration", description: "Powerful ingredients to lock in moisture all day.", imageSrc: "http://img.b2bpic.net/free-vector/20-skin-solid-glyph-icon-presentation_1142-22865.jpg"},
description: "Powerful ingredients to lock in moisture all day.",
imageSrc: "http://img.b2bpic.net/free-vector/20-skin-solid-glyph-icon-presentation_1142-22865.jpg",
},
{ {
title: "Clean Ingredients", title: "Clean Ingredients", description: "Free from harsh chemicals and synthetic fillers.", imageSrc: "http://img.b2bpic.net/free-photo/top-view-natural-body-butter-leaves-plain-background_23-2148241839.jpg"},
description: "Free from harsh chemicals and synthetic fillers.",
imageSrc: "http://img.b2bpic.net/free-photo/top-view-natural-body-butter-leaves-plain-background_23-2148241839.jpg",
},
{ {
title: "Barrier Support", title: "Barrier Support", description: "Fortifies your skin for a healthy, radiant finish.", imageSrc: "http://img.b2bpic.net/free-photo/blooming-spring-portrait-beautiful-woman_23-2151954365.jpg"},
description: "Fortifies your skin for a healthy, radiant finish.",
imageSrc: "http://img.b2bpic.net/free-photo/blooming-spring-portrait-beautiful-woman_23-2151954365.jpg",
},
]} ]}
title="Why Rhode Works" title="Why Rhode Works"
description="Formulated with performance-based ingredients that hydrate, plump, and protect your skin." description="Formulated with performance-based ingredients that hydrate, plump, and protect your skin."
@@ -166,41 +122,17 @@ export default function LandingPage() {
useInvertedBackground={true} useInvertedBackground={true}
products={[ products={[
{ {
id: "p1", id: "p1", name: "Lip Treatment", price: "$16", imageSrc: "http://img.b2bpic.net/free-photo/top-view-natural-cosmetics-concept_23-2148578622.jpg"},
name: "Lip Treatment",
price: "$16",
imageSrc: "http://img.b2bpic.net/free-photo/top-view-natural-cosmetics-concept_23-2148578622.jpg",
},
{ {
id: "p2", id: "p2", name: "Face Cream", price: "$29", imageSrc: "http://img.b2bpic.net/free-photo/top-view-cream-leaf-with-white-background_23-2148241826.jpg"},
name: "Face Cream",
price: "$29",
imageSrc: "http://img.b2bpic.net/free-photo/top-view-cream-leaf-with-white-background_23-2148241826.jpg",
},
{ {
id: "p3", id: "p3", name: "Glazing Serum", price: "$29", imageSrc: "http://img.b2bpic.net/free-photo/different-pipettes-with-cotton-balls_23-2148317653.jpg"},
name: "Glazing Serum",
price: "$29",
imageSrc: "http://img.b2bpic.net/free-photo/different-pipettes-with-cotton-balls_23-2148317653.jpg",
},
{ {
id: "p4", id: "p4", name: "Skincare Set", price: "$68", imageSrc: "http://img.b2bpic.net/free-photo/women-s-day-still-life-with-makeup-jewelry_23-2149263168.jpg"},
name: "Skincare Set",
price: "$68",
imageSrc: "http://img.b2bpic.net/free-photo/women-s-day-still-life-with-makeup-jewelry_23-2149263168.jpg",
},
{ {
id: "p5", id: "p5", name: "Body Moisturizer", price: "$28", imageSrc: "http://img.b2bpic.net/free-photo/close-up-elegant-beauty-selfcare-treatment_23-2149238337.jpg"},
name: "Body Moisturizer",
price: "$28",
imageSrc: "http://img.b2bpic.net/free-photo/close-up-elegant-beauty-selfcare-treatment_23-2149238337.jpg",
},
{ {
id: "p6", id: "p6", name: "Facial Mist", price: "$24", imageSrc: "http://img.b2bpic.net/free-photo/packaging-concept_23-2147672777.jpg"},
name: "Facial Mist",
price: "$24",
imageSrc: "http://img.b2bpic.net/free-photo/packaging-concept_23-2147672777.jpg",
},
]} ]}
title="Shop the Essentials" title="Shop the Essentials"
description="Explore our curated collection of everyday skincare must-haves." description="Explore our curated collection of everyday skincare must-haves."
@@ -209,49 +141,26 @@ export default function LandingPage() {
<div id="testimonials" data-section="testimonials"> <div id="testimonials" data-section="testimonials">
<TestimonialCardThirteen <TestimonialCardThirteen
animationType="slide-up"
textboxLayout="default" textboxLayout="default"
useInvertedBackground={false} useInvertedBackground={false}
description="What our community says about their skincare journey."
testimonials={[ testimonials={[
{ {
id: "1", id: "1", name: "Sarah J.", handle: "@sarahskin", testimonial: "My skin has never felt better! Total game changer.", rating: 5,
name: "Sarah J.", imageSrc: "http://img.b2bpic.net/free-photo/young-pretty-woman-getting-special-skin-treatment-beautiful-girl-applying-serum-isolated-white-background-smooth-skin-without-wrinkles_657921-610.jpg"},
handle: "@sarahskin",
testimonial: "My skin has never felt better! Total game changer.",
rating: 5,
imageSrc: "http://img.b2bpic.net/free-photo/young-pretty-woman-getting-special-skin-treatment-beautiful-girl-applying-serum-isolated-white-background-smooth-skin-without-wrinkles_657921-610.jpg",
},
{ {
id: "2", id: "2", name: "Michael L.", handle: "@mlglow", testimonial: "Simple, effective, and beautiful. Obsessed.", rating: 5,
name: "Michael L.", imageSrc: "http://img.b2bpic.net/free-photo/young-girl-with-perfect-light-brown-skin-beautiful-curly-black-hair-smiling-camera-studio_633478-963.jpg"},
handle: "@mlglow",
testimonial: "Simple, effective, and beautiful. Obsessed.",
rating: 5,
imageSrc: "http://img.b2bpic.net/free-photo/young-girl-with-perfect-light-brown-skin-beautiful-curly-black-hair-smiling-camera-studio_633478-963.jpg",
},
{ {
id: "3", id: "3", name: "Emily R.", handle: "@emmy_r", testimonial: "Finally found a routine that works for my sensitive skin.", rating: 5,
name: "Emily R.", imageSrc: "http://img.b2bpic.net/free-photo/portrait-young-female-dentist-dentistry-concept-dental-treatment_169016-67039.jpg"},
handle: "@emmy_r",
testimonial: "Finally found a routine that works for my sensitive skin.",
rating: 5,
imageSrc: "http://img.b2bpic.net/free-photo/portrait-young-female-dentist-dentistry-concept-dental-treatment_169016-67039.jpg",
},
{ {
id: "4", id: "4", name: "David K.", handle: "@dk_skincare", testimonial: "Everything I need in one sleek routine. Fantastic products.", rating: 5,
name: "David K.", imageSrc: "http://img.b2bpic.net/free-photo/portrait-beautiful-blue-eyed-female-with-gym-outfit_181624-14551.jpg"},
handle: "@dk_skincare",
testimonial: "Everything I need in one sleek routine. Fantastic products.",
rating: 5,
imageSrc: "http://img.b2bpic.net/free-photo/portrait-beautiful-blue-eyed-female-with-gym-outfit_181624-14551.jpg",
},
{ {
id: "5", id: "5", name: "Jane D.", handle: "@janed_glow", testimonial: "Rhode makes my mornings so much easier and my skin glowing.", rating: 5,
name: "Jane D.", imageSrc: "http://img.b2bpic.net/free-photo/beauty-portrait-young-woman_23-2149403019.jpg"},
handle: "@janed_glow",
testimonial: "Rhode makes my mornings so much easier and my skin glowing.",
rating: 5,
imageSrc: "http://img.b2bpic.net/free-photo/beauty-portrait-young-woman_23-2149403019.jpg",
},
]} ]}
showRating={true} showRating={true}
title="Beloved by You" title="Beloved by You"
@@ -263,28 +172,14 @@ export default function LandingPage() {
animationType="slide-up" animationType="slide-up"
textboxLayout="default" textboxLayout="default"
useInvertedBackground={true} useInvertedBackground={true}
description="Clinically proven results for your skin barrier."
metrics={[ metrics={[
{ {
id: "m1", id: "m1", value: "95%", title: "Improved Hydration", description: "Across clinical trials.", imageSrc: "http://img.b2bpic.net/free-photo/drag-person-putting-makeup_23-2149256321.jpg"},
value: "95%",
title: "Improved Hydration",
description: "Across clinical trials.",
imageSrc: "http://img.b2bpic.net/free-photo/drag-person-putting-makeup_23-2149256321.jpg",
},
{ {
id: "m2", id: "m2", value: "98%", title: "Dermatologist Approved", description: "Highly trusted formulas.", imageSrc: "http://img.b2bpic.net/free-photo/top-view-hydro-alcoholic-gel-with-copy-space_23-2148775333.jpg"},
value: "98%",
title: "Dermatologist Approved",
description: "Highly trusted formulas.",
imageSrc: "http://img.b2bpic.net/free-photo/top-view-hydro-alcoholic-gel-with-copy-space_23-2148775333.jpg",
},
{ {
id: "m3", id: "m3", value: "100%", title: "Customer Satisfaction", description: "Loved by our global community.", imageSrc: "http://img.b2bpic.net/free-photo/adult-male-getting-hair-loss-treatment_23-2149152771.jpg"},
value: "100%",
title: "Customer Satisfaction",
description: "Loved by our global community.",
imageSrc: "http://img.b2bpic.net/free-photo/adult-male-getting-hair-loss-treatment_23-2149152771.jpg",
},
]} ]}
title="Proven Results" title="Proven Results"
/> />
@@ -294,22 +189,14 @@ export default function LandingPage() {
<FaqDouble <FaqDouble
textboxLayout="default" textboxLayout="default"
useInvertedBackground={false} useInvertedBackground={false}
description="Got questions? We have answers."
faqs={[ faqs={[
{ {
id: "q1", id: "q1", title: "Are Rhode products vegan?", content: "Yes, all our products are 100% vegan."},
title: "Are Rhode products vegan?",
content: "Yes, all our products are 100% vegan.",
},
{ {
id: "q2", id: "q2", title: "Is it safe for sensitive skin?", content: "Yes, our formulas are dermatologist-tested and gentle."},
title: "Is it safe for sensitive skin?",
content: "Yes, our formulas are dermatologist-tested and gentle.",
},
{ {
id: "q3", id: "q3", title: "Where can I track my order?", content: "You will receive a tracking link in your confirmation email."},
title: "Where can I track my order?",
content: "You will receive a tracking link in your confirmation email.",
},
]} ]}
title="Frequently Asked Questions" title="Frequently Asked Questions"
faqsAnimation="slide-up" faqsAnimation="slide-up"
@@ -320,14 +207,11 @@ export default function LandingPage() {
<ContactText <ContactText
useInvertedBackground={true} useInvertedBackground={true}
background={{ background={{
variant: "sparkles-gradient", variant: "sparkles-gradient"}}
}}
text="Join the Rhode community for updates, tips, and skincare secrets." text="Join the Rhode community for updates, tips, and skincare secrets."
buttons={[ buttons={[
{ {
text: "Sign Up for Newsletter", text: "Sign Up for Newsletter", href: "#"},
href: "#",
},
]} ]}
/> />
</div> </div>
@@ -338,45 +222,29 @@ export default function LandingPage() {
{ {
items: [ items: [
{ {
label: "Shop", label: "Shop", href: "#products"},
href: "#products",
},
{ {
label: "About", label: "About", href: "#about"},
href: "#about",
},
{ {
label: "FAQ", label: "FAQ", href: "#faq"},
href: "#faq",
},
], ],
}, },
{ {
items: [ items: [
{ {
label: "Instagram", label: "Instagram", href: "#"},
href: "#",
},
{ {
label: "Twitter", label: "Twitter", href: "#"},
href: "#",
},
{ {
label: "Support", label: "Support", href: "#"},
href: "#",
},
], ],
}, },
{ {
items: [ items: [
{ {
label: "Privacy Policy", label: "Privacy Policy", href: "#"},
href: "#",
},
{ {
label: "Terms of Service", label: "Terms of Service", href: "#"},
href: "#",
},
], ],
}, },
]} ]}