Update src/app/page.tsx
This commit is contained in:
246
src/app/page.tsx
246
src/app/page.tsx
@@ -32,21 +32,13 @@ export default function LandingPage() {
|
||||
<NavbarStyleCentered
|
||||
navItems={[
|
||||
{
|
||||
name: "Shop",
|
||||
id: "#products",
|
||||
},
|
||||
name: "Shop", id: "#products"},
|
||||
{
|
||||
name: "About",
|
||||
id: "#about",
|
||||
},
|
||||
name: "About", id: "#about"},
|
||||
{
|
||||
name: "Benefits",
|
||||
id: "#features",
|
||||
},
|
||||
name: "Benefits", id: "#features"},
|
||||
{
|
||||
name: "FAQ",
|
||||
id: "#faq",
|
||||
},
|
||||
name: "FAQ", id: "#faq"},
|
||||
]}
|
||||
brandName="rhode"
|
||||
/>
|
||||
@@ -55,23 +47,16 @@ export default function LandingPage() {
|
||||
<div id="hero" data-section="hero">
|
||||
<HeroSplitKpi
|
||||
background={{
|
||||
variant: "gradient-bars",
|
||||
}}
|
||||
variant: "gradient-bars"}}
|
||||
title="Glazed skin, delivered."
|
||||
description="Rhode creates skincare essentials designed to nourish your skin barrier and give you that signature glow."
|
||||
kpis={[
|
||||
{
|
||||
value: "100%",
|
||||
label: "Clinically Tested",
|
||||
},
|
||||
value: "100%", label: "Clinically Tested"},
|
||||
{
|
||||
value: "Vegan",
|
||||
label: "Cruelty Free",
|
||||
},
|
||||
value: "Vegan", label: "Cruelty Free"},
|
||||
{
|
||||
value: "Safe",
|
||||
label: "Dermatologist Tested",
|
||||
},
|
||||
value: "Safe", label: "Dermatologist Tested"},
|
||||
]}
|
||||
enableKpiAnimation={true}
|
||||
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"
|
||||
avatars={[
|
||||
{
|
||||
src: "http://img.b2bpic.net/free-photo/beautiful-sensual-brunette-standing-naked-smiling-carefree_176420-20671.jpg",
|
||||
alt: "Happy customer testimonial",
|
||||
},
|
||||
src: "http://img.b2bpic.net/free-photo/beautiful-sensual-brunette-standing-naked-smiling-carefree_176420-20671.jpg", alt: "Happy customer testimonial"},
|
||||
{
|
||||
src: "http://img.b2bpic.net/free-photo/cute-young-woman-skincare-portrait_624325-3441.jpg",
|
||||
alt: "Skincare enthusiast profile",
|
||||
},
|
||||
src: "http://img.b2bpic.net/free-photo/cute-young-woman-skincare-portrait_624325-3441.jpg", alt: "Skincare enthusiast profile"},
|
||||
{
|
||||
src: "http://img.b2bpic.net/free-photo/portrait-beautiful-woman-happy-fit-girl-sportswear-laughing_1153-7828.jpg",
|
||||
alt: "Glowing skin portrait",
|
||||
},
|
||||
src: "http://img.b2bpic.net/free-photo/portrait-beautiful-woman-happy-fit-girl-sportswear-laughing_1153-7828.jpg", 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",
|
||||
alt: "Radiant skin user",
|
||||
},
|
||||
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"},
|
||||
{
|
||||
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",
|
||||
},
|
||||
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"},
|
||||
]}
|
||||
avatarText="Loved by 10k+ customers"
|
||||
marqueeItems={[
|
||||
{
|
||||
type: "text",
|
||||
text: "Dermatologist Formulated",
|
||||
},
|
||||
type: "text", text: "Dermatologist Formulated"},
|
||||
{
|
||||
type: "text",
|
||||
text: "Fragrance-Free",
|
||||
},
|
||||
type: "text", text: "Fragrance-Free"},
|
||||
{
|
||||
type: "text",
|
||||
text: "Gluten-Free",
|
||||
},
|
||||
type: "text", text: "Gluten-Free"},
|
||||
{
|
||||
type: "text",
|
||||
text: "Vegan & Cruelty Free",
|
||||
},
|
||||
type: "text", text: "Vegan & Cruelty Free"},
|
||||
{
|
||||
type: "text",
|
||||
text: "Barrier Friendly",
|
||||
},
|
||||
type: "text", text: "Barrier Friendly"},
|
||||
]}
|
||||
/>
|
||||
</div>
|
||||
@@ -138,20 +103,11 @@ export default function LandingPage() {
|
||||
useInvertedBackground={false}
|
||||
features={[
|
||||
{
|
||||
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",
|
||||
},
|
||||
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"},
|
||||
{
|
||||
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",
|
||||
},
|
||||
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"},
|
||||
{
|
||||
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",
|
||||
},
|
||||
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"},
|
||||
]}
|
||||
title="Why Rhode Works"
|
||||
description="Formulated with performance-based ingredients that hydrate, plump, and protect your skin."
|
||||
@@ -166,41 +122,17 @@ export default function LandingPage() {
|
||||
useInvertedBackground={true}
|
||||
products={[
|
||||
{
|
||||
id: "p1",
|
||||
name: "Lip Treatment",
|
||||
price: "$16",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/top-view-natural-cosmetics-concept_23-2148578622.jpg",
|
||||
},
|
||||
id: "p1", name: "Lip Treatment", price: "$16", imageSrc: "http://img.b2bpic.net/free-photo/top-view-natural-cosmetics-concept_23-2148578622.jpg"},
|
||||
{
|
||||
id: "p2",
|
||||
name: "Face Cream",
|
||||
price: "$29",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/top-view-cream-leaf-with-white-background_23-2148241826.jpg",
|
||||
},
|
||||
id: "p2", name: "Face Cream", price: "$29", imageSrc: "http://img.b2bpic.net/free-photo/top-view-cream-leaf-with-white-background_23-2148241826.jpg"},
|
||||
{
|
||||
id: "p3",
|
||||
name: "Glazing Serum",
|
||||
price: "$29",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/different-pipettes-with-cotton-balls_23-2148317653.jpg",
|
||||
},
|
||||
id: "p3", name: "Glazing Serum", price: "$29", imageSrc: "http://img.b2bpic.net/free-photo/different-pipettes-with-cotton-balls_23-2148317653.jpg"},
|
||||
{
|
||||
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",
|
||||
},
|
||||
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"},
|
||||
{
|
||||
id: "p5",
|
||||
name: "Body Moisturizer",
|
||||
price: "$28",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/close-up-elegant-beauty-selfcare-treatment_23-2149238337.jpg",
|
||||
},
|
||||
id: "p5", name: "Body Moisturizer", price: "$28", imageSrc: "http://img.b2bpic.net/free-photo/close-up-elegant-beauty-selfcare-treatment_23-2149238337.jpg"},
|
||||
{
|
||||
id: "p6",
|
||||
name: "Facial Mist",
|
||||
price: "$24",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/packaging-concept_23-2147672777.jpg",
|
||||
},
|
||||
id: "p6", name: "Facial Mist", price: "$24", imageSrc: "http://img.b2bpic.net/free-photo/packaging-concept_23-2147672777.jpg"},
|
||||
]}
|
||||
title="Shop the Essentials"
|
||||
description="Explore our curated collection of everyday skincare must-haves."
|
||||
@@ -209,49 +141,26 @@ export default function LandingPage() {
|
||||
|
||||
<div id="testimonials" data-section="testimonials">
|
||||
<TestimonialCardThirteen
|
||||
animationType="slide-up"
|
||||
textboxLayout="default"
|
||||
useInvertedBackground={false}
|
||||
description="What our community says about their skincare journey."
|
||||
testimonials={[
|
||||
{
|
||||
id: "1",
|
||||
name: "Sarah J.",
|
||||
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: "1", name: "Sarah J.", 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",
|
||||
name: "Michael L.",
|
||||
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: "2", name: "Michael L.", 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",
|
||||
name: "Emily R.",
|
||||
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: "3", name: "Emily R.", 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",
|
||||
name: "David K.",
|
||||
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: "4", name: "David K.", 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",
|
||||
name: "Jane D.",
|
||||
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",
|
||||
},
|
||||
id: "5", name: "Jane D.", 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}
|
||||
title="Beloved by You"
|
||||
@@ -263,28 +172,14 @@ export default function LandingPage() {
|
||||
animationType="slide-up"
|
||||
textboxLayout="default"
|
||||
useInvertedBackground={true}
|
||||
description="Clinically proven results for your skin barrier."
|
||||
metrics={[
|
||||
{
|
||||
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",
|
||||
},
|
||||
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"},
|
||||
{
|
||||
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",
|
||||
},
|
||||
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"},
|
||||
{
|
||||
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",
|
||||
},
|
||||
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"},
|
||||
]}
|
||||
title="Proven Results"
|
||||
/>
|
||||
@@ -294,22 +189,14 @@ export default function LandingPage() {
|
||||
<FaqDouble
|
||||
textboxLayout="default"
|
||||
useInvertedBackground={false}
|
||||
description="Got questions? We have answers."
|
||||
faqs={[
|
||||
{
|
||||
id: "q1",
|
||||
title: "Are Rhode products vegan?",
|
||||
content: "Yes, all our products are 100% vegan.",
|
||||
},
|
||||
id: "q1", title: "Are Rhode products vegan?", content: "Yes, all our products are 100% vegan."},
|
||||
{
|
||||
id: "q2",
|
||||
title: "Is it safe for sensitive skin?",
|
||||
content: "Yes, our formulas are dermatologist-tested and gentle.",
|
||||
},
|
||||
id: "q2", title: "Is it safe for sensitive skin?", content: "Yes, our formulas are dermatologist-tested and gentle."},
|
||||
{
|
||||
id: "q3",
|
||||
title: "Where can I track my order?",
|
||||
content: "You will receive a tracking link in your confirmation email.",
|
||||
},
|
||||
id: "q3", title: "Where can I track my order?", content: "You will receive a tracking link in your confirmation email."},
|
||||
]}
|
||||
title="Frequently Asked Questions"
|
||||
faqsAnimation="slide-up"
|
||||
@@ -320,14 +207,11 @@ export default function LandingPage() {
|
||||
<ContactText
|
||||
useInvertedBackground={true}
|
||||
background={{
|
||||
variant: "sparkles-gradient",
|
||||
}}
|
||||
variant: "sparkles-gradient"}}
|
||||
text="Join the Rhode community for updates, tips, and skincare secrets."
|
||||
buttons={[
|
||||
{
|
||||
text: "Sign Up for Newsletter",
|
||||
href: "#",
|
||||
},
|
||||
text: "Sign Up for Newsletter", href: "#"},
|
||||
]}
|
||||
/>
|
||||
</div>
|
||||
@@ -338,45 +222,29 @@ export default function LandingPage() {
|
||||
{
|
||||
items: [
|
||||
{
|
||||
label: "Shop",
|
||||
href: "#products",
|
||||
},
|
||||
label: "Shop", href: "#products"},
|
||||
{
|
||||
label: "About",
|
||||
href: "#about",
|
||||
},
|
||||
label: "About", href: "#about"},
|
||||
{
|
||||
label: "FAQ",
|
||||
href: "#faq",
|
||||
},
|
||||
label: "FAQ", href: "#faq"},
|
||||
],
|
||||
},
|
||||
{
|
||||
items: [
|
||||
{
|
||||
label: "Instagram",
|
||||
href: "#",
|
||||
},
|
||||
label: "Instagram", href: "#"},
|
||||
{
|
||||
label: "Twitter",
|
||||
href: "#",
|
||||
},
|
||||
label: "Twitter", href: "#"},
|
||||
{
|
||||
label: "Support",
|
||||
href: "#",
|
||||
},
|
||||
label: "Support", href: "#"},
|
||||
],
|
||||
},
|
||||
{
|
||||
items: [
|
||||
{
|
||||
label: "Privacy Policy",
|
||||
href: "#",
|
||||
},
|
||||
label: "Privacy Policy", href: "#"},
|
||||
{
|
||||
label: "Terms of Service",
|
||||
href: "#",
|
||||
},
|
||||
label: "Terms of Service", href: "#"},
|
||||
],
|
||||
},
|
||||
]}
|
||||
|
||||
Reference in New Issue
Block a user