bender/eb72946e-5774-4587-b030-c2ace879ed12
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Merge version_2 into main

Browse Source 
Merge version_2 into main
This commit was merged in pull request #2.
This commit is contained in:
bender
2026-05-11 17:25:06 +00:00
parent 3c4578c81d 21634e78c4
commit f53b2b65c5
2 changed files with 59 additions and 154 deletions
Download Patch File Download Diff File Expand all files Collapse all files

199
src/app/page.tsx
View File

@@ -17,28 +17,24 @@ export default function LandingPage() {
return (
<ThemeProvider
defaultButtonVariant="bounce-effect"
defaultTextAnimation="entrance-slide"
defaultTextAnimation="reveal-blur"
borderRadius="pill"
contentWidth="compact"
sizing="large"
background="grid"
cardStyle="gradient-radial"
primaryButtonStyle="primary-glow"
secondaryButtonStyle="layered"
contentWidth="medium"
sizing="medium"
background="noise"
cardStyle="glass-elevated"
primaryButtonStyle="flat"
secondaryButtonStyle="solid"
headingFontWeight="semibold"
>
<ReactLenis root>
<div id="nav" data-section="nav">
<NavbarStyleCentered
navItems={[
{
name: "Shop", id: "#products"},
{
name: "About", id: "#about"},
{
name: "Benefits", id: "#features"},
{
name: "FAQ", id: "#faq"},
{ name: "Shop", id: "#products" },
{ name: "About", id: "#about" },
{ name: "Benefits", id: "#features" },
{ name: "FAQ", id: "#faq" },
]}
brandName="rhode"
/>
@@ -46,54 +42,25 @@ export default function LandingPage() {
<div id="hero" data-section="hero">
<HeroSplitKpi
background={{
variant: "gradient-bars"}}
title="Glazed skin, delivered."
description="Rhode creates skincare essentials designed to nourish your skin barrier and give you that signature glow."
background={{ variant: "glowing-orb" }}
title="The Glow is in the Details."
description="Chic, intentional, and high-performance skincare for your barrier. Experience the Rhode aesthetic."
kpis={[
{
value: "100%", label: "Clinically Tested"},
{
value: "Vegan", label: "Cruelty Free"},
{
value: "Safe", label: "Dermatologist Tested"},
{ value: "100%", label: "Pure Ingredients" },
{ value: "Vegan", label: "Cruelty-Free" },
{ value: "Chic", label: "Skincare Essential" },
]}
enableKpiAnimation={true}
imageSrc="http://img.b2bpic.net/free-photo/dreamy-aesthetic-cosmetic-product-with-fresh-background_23-2151382914.jpg"
imageAlt="Rhode skincare product"
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/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/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"},
]}
avatarText="Loved by 10k+ customers"
marqueeItems={[
{
type: "text", text: "Dermatologist Formulated"},
{
type: "text", text: "Fragrance-Free"},
{
type: "text", text: "Gluten-Free"},
{
type: "text", text: "Vegan & Cruelty Free"},
{
type: "text", text: "Barrier Friendly"},
]}
imageSrc="http://img.b2bpic.net/free-photo/cosmetic-product-branding-with-neutral-background_23-2149504627.jpg"
imageAlt="Rhode luxury skincare"
mediaAnimation="blur-reveal"
/>
</div>
<div id="about" data-section="about">
<TextAbout
useInvertedBackground={true}
title="Less is more. We believe in simplicity."
title="Effortless beauty, redefined."
/>
</div>
@@ -102,68 +69,43 @@ export default function LandingPage() {
textboxLayout="default"
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: "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: "Glossy Finish", description: "High-shine lip care for an elevated look.", imageSrc: "http://img.b2bpic.net/free-photo/lip-gloss-product-beauty-branding_23-2149504640.jpg" },
{ title: "Rich Nutrition", description: "Nutrient-dense formulas for soft, healthy skin.", imageSrc: "http://img.b2bpic.net/free-photo/skincare-routine-essential_23-2149504660.jpg" },
{ title: "Chic Design", description: "Sophisticated packaging that looks beautiful anywhere.", imageSrc: "http://img.b2bpic.net/free-photo/skincare-luxury-branding_23-2149504655.jpg" },
]}
title="Why Rhode Works"
description="Formulated with performance-based ingredients that hydrate, plump, and protect your skin."
title="The Rhode Aesthetic"
description="Performance skincare that doubles as a chic accessory."
/>
</div>
<div id="products" data-section="products">
<ProductCardThree
animationType="slide-up"
animationType="blur-reveal"
textboxLayout="default"
gridVariant="three-columns-all-equal-width"
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: "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: "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: "p6", name: "Facial Mist", price: "$24", imageSrc: "http://img.b2bpic.net/free-photo/packaging-concept_23-2147672777.jpg"},
{ id: "p1", name: "Signature Lip Gloss", price: "$18", imageSrc: "http://img.b2bpic.net/free-photo/lip-gloss-pink-nude_23-2149504680.jpg" },
{ id: "p2", name: "Glazing Serum", price: "$32", imageSrc: "http://img.b2bpic.net/free-photo/skincare-serum-bottle_23-2149504690.jpg" },
{ id: "p3", name: "Rich Moisturizer", price: "$35", imageSrc: "http://img.b2bpic.net/free-photo/moisturizing-face-cream_23-2149504700.jpg" },
]}
title="Shop the Essentials"
description="Explore our curated collection of everyday skincare must-haves."
title="Curated Essentials"
description="Our most loved products, reimagined for your glow."
/>
</div>
<div id="testimonials" data-section="testimonials">
<TestimonialCardThirteen
animationType="slide-up"
animationType="blur-reveal"
textboxLayout="default"
useInvertedBackground={false}
description="What our community says about their skincare journey."
description="Join the global community embracing the glow."
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: "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: "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: "1", name: "Maya A.", handle: "@maya.glow", testimonial: "The lip gloss is absolutely iconic. Chic and nourishing.", rating: 5 },
{ id: "2", name: "Leo S.", handle: "@leoskin", testimonial: "Perfect routine for that effortless look. Simply expensive.", rating: 5 },
]}
showRating={true}
title="Beloved by You"
title="Loved by the Chic"
/>
</div>
@@ -172,16 +114,12 @@ export default function LandingPage() {
animationType="slide-up"
textboxLayout="default"
useInvertedBackground={true}
description="Clinically proven results for your skin barrier."
description="Elevating your daily beauty ritual with proven care."
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: "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: "m1", value: "98%", title: "Glow Index", description: "Visible radiance improvement.", imageSrc: "http://img.b2bpic.net/free-photo/skincare-product-splash_23-2149504720.jpg" },
{ id: "m2", value: "100%", title: "Chic Appeal", description: "Loved for style & performance.", imageSrc: "http://img.b2bpic.net/free-photo/beauty-product-texture_23-2149504730.jpg" },
]}
title="Proven Results"
title="Proven Glow"
/>
</div>
@@ -189,64 +127,31 @@ export default function LandingPage() {
<FaqDouble
textboxLayout="default"
useInvertedBackground={false}
description="Got questions? We have answers."
description="Everything you need to know about our signature glow."
faqs={[
{
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: "q3", title: "Where can I track my order?", content: "You will receive a tracking link in your confirmation email."},
{ id: "q1", title: "Are these glosses sticky?", content: "Not at all. Our formula is designed for smooth, glassy comfort." },
{ id: "q2", title: "Is Rhode dermatologist-tested?", content: "Yes, all our formulas are rigorously tested for your skin barrier." },
]}
title="Frequently Asked Questions"
faqsAnimation="slide-up"
title="Glossary"
faqsAnimation="blur-reveal"
/>
</div>
<div id="contact" data-section="contact">
<ContactText
useInvertedBackground={true}
background={{
variant: "sparkles-gradient"}}
text="Join the Rhode community for updates, tips, and skincare secrets."
buttons={[
{
text: "Sign Up for Newsletter", href: "#"},
]}
background={{ variant: "sparkles-gradient" }}
text="Subscribe to the Rhode journal for beauty secrets and exclusive early access."
buttons={[{ text: "Join the Circle", href: "#" }]}
/>
</div>
<div id="footer" data-section="footer">
<FooterLogoEmphasis
columns={[
{
items: [
{
label: "Shop", href: "#products"},
{
label: "About", href: "#about"},
{
label: "FAQ", href: "#faq"},
],
},
{
items: [
{
label: "Instagram", href: "#"},
{
label: "Twitter", href: "#"},
{
label: "Support", href: "#"},
],
},
{
items: [
{
label: "Privacy Policy", href: "#"},
{
label: "Terms of Service", href: "#"},
],
},
{ items: [{ label: "Shop", href: "#products" }, { label: "Journal", href: "#" }] },
{ items: [{ label: "Instagram", href: "#" }, { label: "TikTok", href: "#" }] },
{ items: [{ label: "Privacy", href: "#" }, { label: "Terms", href: "#" }] },
]}
logoText="rhode"
/>

14
src/app/styles/variables.css
View File

@@ -10,15 +10,15 @@
--accent: #ffffff;
--background-accent: #ffffff; */
--background: #f5f4ef;
--card: #dad6cd;
--foreground: #2a2928;
--primary-cta: #2a2928;
--background: #fdf8d9;
--card: #fbf2b5;
--foreground: #4b3621;
--primary-cta: #7a5c37;
--primary-cta-text: #f5f4ef;
--secondary-cta: #ecebea;
--secondary-cta: #f1e5a0;
--secondary-cta-text: #2a2928;
--accent: #ffffff;
--background-accent: #c6b180;
--accent: #d4b483;
--background-accent: #f3e5ab;
/* text sizing - set by ThemeProvider */
/* --text-2xs: clamp(0.465rem, 0.62vw, 0.62rem);