Merge version_1 into main #1
192
src/app/page.tsx
192
src/app/page.tsx
@@ -31,64 +31,41 @@ export default function LandingPage() {
|
||||
<NavbarStyleFullscreen
|
||||
navItems={[
|
||||
{
|
||||
name: "Shop",
|
||||
id: "#products",
|
||||
},
|
||||
name: "Shop", id: "#products"},
|
||||
{
|
||||
name: "Rituals",
|
||||
id: "#features",
|
||||
},
|
||||
name: "Rituals", id: "#features"},
|
||||
{
|
||||
name: "Community",
|
||||
id: "#testimonials",
|
||||
},
|
||||
name: "Community", id: "#testimonials"},
|
||||
]}
|
||||
brandName="Softly"
|
||||
button={{
|
||||
text: "Shop Skincare",
|
||||
href: "#products",
|
||||
}}
|
||||
text: "Shop Skincare", href: "#products"}}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="hero" data-section="hero">
|
||||
<HeroBillboardGallery
|
||||
background={{
|
||||
variant: "sparkles-gradient",
|
||||
}}
|
||||
variant: "sparkles-gradient"}}
|
||||
title="Skincare, but softly"
|
||||
description="Clinical formulas. Gentle rituals. Designed for real skin."
|
||||
buttons={[
|
||||
{
|
||||
text: "Explore Products",
|
||||
href: "#products",
|
||||
},
|
||||
text: "Explore Products", href: "#products"},
|
||||
{
|
||||
text: "Build Routine",
|
||||
href: "#",
|
||||
},
|
||||
text: "Build Routine", href: "#"},
|
||||
]}
|
||||
mediaItems={[
|
||||
{
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/young-woman-posing-with-mirror-chair-flower_23-2149409089.jpg",
|
||||
imageAlt: "minimalist skincare serum bottle",
|
||||
},
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/young-woman-posing-with-mirror-chair-flower_23-2149409089.jpg", imageAlt: "minimalist skincare serum bottle"},
|
||||
{
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/interior-design-with-flowers-high-angle_23-2149551364.jpg",
|
||||
imageAlt: "minimalist skincare serum bottle",
|
||||
},
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/interior-design-with-flowers-high-angle_23-2149551364.jpg", imageAlt: "minimalist skincare serum bottle"},
|
||||
{
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/high-angle-view-moisturizing-cream-brush-flower-alarm-marble_23-2147878918.jpg",
|
||||
imageAlt: "minimalist skincare serum bottle",
|
||||
},
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/high-angle-view-moisturizing-cream-brush-flower-alarm-marble_23-2147878918.jpg", imageAlt: "minimalist skincare serum bottle"},
|
||||
{
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/close-up-eucalyptus-plant_23-2149200310.jpg",
|
||||
imageAlt: "minimalist skincare serum bottle",
|
||||
},
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/close-up-eucalyptus-plant_23-2149200310.jpg", imageAlt: "minimalist skincare serum bottle"},
|
||||
{
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/star-shape-gingerbread-cookies-with-cup-herbal-tea-cinnamons_114579-26631.jpg",
|
||||
imageAlt: "minimalist skincare serum bottle",
|
||||
},
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/star-shape-gingerbread-cookies-with-cup-herbal-tea-cinnamons_114579-26631.jpg", imageAlt: "minimalist skincare serum bottle"},
|
||||
]}
|
||||
mediaAnimation="blur-reveal"
|
||||
/>
|
||||
@@ -100,26 +77,11 @@ export default function LandingPage() {
|
||||
useInvertedBackground={false}
|
||||
features={[
|
||||
{
|
||||
tag: "AM",
|
||||
title: "Cleanse & Hydrate",
|
||||
subtitle: "Refresh your day",
|
||||
description: "Starting the morning with soft hydration that locks in moisture.",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/girl-with-refreshing-drink-consulting-her-agenda_23-2147640373.jpg",
|
||||
},
|
||||
tag: "AM", title: "Cleanse & Hydrate", subtitle: "Refresh your day", description: "Starting the morning with soft hydration that locks in moisture.", imageSrc: "http://img.b2bpic.net/free-photo/girl-with-refreshing-drink-consulting-her-agenda_23-2147640373.jpg"},
|
||||
{
|
||||
tag: "PM",
|
||||
title: "Repair & Restore",
|
||||
subtitle: "Deep nourishment",
|
||||
description: "Rebuild your skin barrier while you sleep with rich botanical blends.",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/young-woman-preparing-her-bath-time_23-2149186323.jpg",
|
||||
},
|
||||
tag: "PM", title: "Repair & Restore", subtitle: "Deep nourishment", description: "Rebuild your skin barrier while you sleep with rich botanical blends.", imageSrc: "http://img.b2bpic.net/free-photo/young-woman-preparing-her-bath-time_23-2149186323.jpg"},
|
||||
{
|
||||
tag: "WEEKLY",
|
||||
title: "Reset Mask",
|
||||
subtitle: "A gentle reset",
|
||||
description: "Weekly deep detox to soothe and clarify your complexion gently.",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/two-caucasian-blonde-women-different-ages-are-tasting-cosmetic-product-while-sitting-white-background-skin-care-hydration-concept_197531-31442.jpg",
|
||||
},
|
||||
tag: "WEEKLY", title: "Reset Mask", subtitle: "A gentle reset", description: "Weekly deep detox to soothe and clarify your complexion gently.", imageSrc: "http://img.b2bpic.net/free-photo/two-caucasian-blonde-women-different-ages-are-tasting-cosmetic-product-while-sitting-white-background-skin-care-hydration-concept_197531-31442.jpg"},
|
||||
]}
|
||||
title="Your Daily Ritual"
|
||||
description="Carefully curated steps to help your skin breathe and reset."
|
||||
@@ -130,50 +92,21 @@ export default function LandingPage() {
|
||||
<ProductCardFour
|
||||
textboxLayout="default"
|
||||
gridVariant="three-columns-all-equal-width"
|
||||
animationType="slide-up"
|
||||
useInvertedBackground={true}
|
||||
products={[
|
||||
{
|
||||
id: "p1",
|
||||
name: "Calm Serum",
|
||||
price: "$28",
|
||||
variant: "30ml",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/top-view-delicious-drinks-summer-still-life_23-2148993820.jpg",
|
||||
},
|
||||
id: "p1", name: "Calm Serum", price: "$28", variant: "30ml", imageSrc: "http://img.b2bpic.net/free-photo/top-view-delicious-drinks-summer-still-life_23-2148993820.jpg"},
|
||||
{
|
||||
id: "p2",
|
||||
name: "Hydrate Cream",
|
||||
price: "$32",
|
||||
variant: "50ml",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/make-up-concept-with-blushes_23-2149030355.jpg",
|
||||
},
|
||||
id: "p2", name: "Hydrate Cream", price: "$32", variant: "50ml", imageSrc: "http://img.b2bpic.net/free-photo/make-up-concept-with-blushes_23-2149030355.jpg"},
|
||||
{
|
||||
id: "p3",
|
||||
name: "Gentle Cleanser",
|
||||
price: "$24",
|
||||
variant: "150ml",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/medical-dropper_187299-47450.jpg",
|
||||
},
|
||||
id: "p3", name: "Gentle Cleanser", price: "$24", variant: "150ml", imageSrc: "http://img.b2bpic.net/free-photo/medical-dropper_187299-47450.jpg"},
|
||||
{
|
||||
id: "p4",
|
||||
name: "Barrier Oil",
|
||||
price: "$38",
|
||||
variant: "30ml",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/shadow-oil-bottle-with-olives-tea-strainer-white-backdrop_23-2147853863.jpg",
|
||||
},
|
||||
id: "p4", name: "Barrier Oil", price: "$38", variant: "30ml", imageSrc: "http://img.b2bpic.net/free-photo/shadow-oil-bottle-with-olives-tea-strainer-white-backdrop_23-2147853863.jpg"},
|
||||
{
|
||||
id: "p5",
|
||||
name: "Reset Mask",
|
||||
price: "$26",
|
||||
variant: "100ml",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/skin-care-banner-concept-with-lotion_23-2149449117.jpg",
|
||||
},
|
||||
id: "p5", name: "Reset Mask", price: "$26", variant: "100ml", imageSrc: "http://img.b2bpic.net/free-photo/skin-care-banner-concept-with-lotion_23-2149449117.jpg"},
|
||||
{
|
||||
id: "p6",
|
||||
name: "Night Balm",
|
||||
price: "$34",
|
||||
variant: "50ml",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/refreshing-drink-with-peach-arrangement_23-2150928933.jpg",
|
||||
},
|
||||
id: "p6", name: "Night Balm", price: "$34", variant: "50ml", imageSrc: "http://img.b2bpic.net/free-photo/refreshing-drink-with-peach-arrangement_23-2150928933.jpg"},
|
||||
]}
|
||||
title="Our Essentials"
|
||||
description="Simple, clean formulas designed to harmonize with your skin."
|
||||
@@ -187,20 +120,11 @@ export default function LandingPage() {
|
||||
tag="Transparency"
|
||||
metrics={[
|
||||
{
|
||||
id: "m1",
|
||||
value: "98%",
|
||||
description: "Reported calmer skin",
|
||||
},
|
||||
id: "m1", value: "98%", description: "Reported calmer skin"},
|
||||
{
|
||||
id: "m2",
|
||||
value: "24h",
|
||||
description: "Lasting hydration boost",
|
||||
},
|
||||
id: "m2", value: "24h", description: "Lasting hydration boost"},
|
||||
{
|
||||
id: "m3",
|
||||
value: "100%",
|
||||
description: "Cruelty-free formulas",
|
||||
},
|
||||
id: "m3", value: "100%", description: "Cruelty-free formulas"},
|
||||
]}
|
||||
metricsAnimation="slide-up"
|
||||
/>
|
||||
@@ -212,45 +136,15 @@ export default function LandingPage() {
|
||||
useInvertedBackground={true}
|
||||
testimonials={[
|
||||
{
|
||||
id: "1",
|
||||
title: "Life Changing",
|
||||
quote: "My skin has never felt this calm.",
|
||||
name: "Emma L.",
|
||||
role: "Creative",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/close-up-topless-women-posing_23-2149123468.jpg",
|
||||
},
|
||||
id: "1", title: "Life Changing", quote: "My skin has never felt this calm.", name: "Emma L.", role: "Creative", imageSrc: "http://img.b2bpic.net/free-photo/close-up-topless-women-posing_23-2149123468.jpg"},
|
||||
{
|
||||
id: "2",
|
||||
title: "Daily Ritual",
|
||||
quote: "I actually look forward to cleansing now.",
|
||||
name: "Marcus J.",
|
||||
role: "Designer",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/front-view-young-woman-posing-with-flower_23-2150396580.jpg",
|
||||
},
|
||||
id: "2", title: "Daily Ritual", quote: "I actually look forward to cleansing now.", name: "Marcus J.", role: "Designer", imageSrc: "http://img.b2bpic.net/free-photo/front-view-young-woman-posing-with-flower_23-2150396580.jpg"},
|
||||
{
|
||||
id: "3",
|
||||
title: "So Gentle",
|
||||
quote: "Perfect for my reactive skin type.",
|
||||
name: "Sarah K.",
|
||||
role: "Teacher",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/woman-suffering-from-body-dysmorphia_23-2150879649.jpg",
|
||||
},
|
||||
id: "3", title: "So Gentle", quote: "Perfect for my reactive skin type.", name: "Sarah K.", role: "Teacher", imageSrc: "http://img.b2bpic.net/free-photo/woman-suffering-from-body-dysmorphia_23-2150879649.jpg"},
|
||||
{
|
||||
id: "4",
|
||||
title: "Pure Magic",
|
||||
quote: "Simple, clean, and truly effective.",
|
||||
name: "Alex W.",
|
||||
role: "Student",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/beautiful-natural-young-woman-portrait_23-2148994713.jpg",
|
||||
},
|
||||
id: "4", title: "Pure Magic", quote: "Simple, clean, and truly effective.", name: "Alex W.", role: "Student", imageSrc: "http://img.b2bpic.net/free-photo/beautiful-natural-young-woman-portrait_23-2148994713.jpg"},
|
||||
{
|
||||
id: "5",
|
||||
title: "Soft Glow",
|
||||
quote: "The routine really changed my morning.",
|
||||
name: "Chloe T.",
|
||||
role: "Artist",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/portrait-young-woman-with-vitiligo_23-2149012605.jpg",
|
||||
},
|
||||
id: "5", title: "Soft Glow", quote: "The routine really changed my morning.", name: "Chloe T.", role: "Artist", imageSrc: "http://img.b2bpic.net/free-photo/portrait-young-woman-with-vitiligo_23-2149012605.jpg"},
|
||||
]}
|
||||
title="Skin Notes"
|
||||
description="Real stories from our community."
|
||||
@@ -263,20 +157,11 @@ export default function LandingPage() {
|
||||
useInvertedBackground={false}
|
||||
faqs={[
|
||||
{
|
||||
id: "q1",
|
||||
title: "Is it suitable for sensitive skin?",
|
||||
content: "Yes, our formulas are tested for maximum gentleness.",
|
||||
},
|
||||
id: "q1", title: "Is it suitable for sensitive skin?", content: "Yes, our formulas are tested for maximum gentleness."},
|
||||
{
|
||||
id: "q2",
|
||||
title: "How do I build a routine?",
|
||||
content: "Start with our cleanse and hydrate serum basics.",
|
||||
},
|
||||
id: "q2", title: "How do I build a routine?", content: "Start with our cleanse and hydrate serum basics."},
|
||||
{
|
||||
id: "q3",
|
||||
title: "Are you cruelty-free?",
|
||||
content: "Absolutely. We are proud of our 100% vegan standards.",
|
||||
},
|
||||
id: "q3", title: "Are you cruelty-free?", content: "Absolutely. We are proud of our 100% vegan standards."},
|
||||
]}
|
||||
title="Common Questions"
|
||||
description="Everything you need to know about our rituals."
|
||||
@@ -288,8 +173,7 @@ export default function LandingPage() {
|
||||
<ContactSplit
|
||||
useInvertedBackground={true}
|
||||
background={{
|
||||
variant: "sparkles-gradient",
|
||||
}}
|
||||
variant: "sparkles-gradient"}}
|
||||
tag="Waitlist"
|
||||
title="Start your calm skin journey"
|
||||
description="Join our community and get access to exclusive rituals."
|
||||
@@ -302,13 +186,9 @@ export default function LandingPage() {
|
||||
<FooterLogoReveal
|
||||
logoText="SOFTLY"
|
||||
leftLink={{
|
||||
text: "Privacy Policy",
|
||||
href: "#",
|
||||
}}
|
||||
text: "Privacy Policy", href: "#"}}
|
||||
rightLink={{
|
||||
text: "© 2024 Softly Co.",
|
||||
href: "#",
|
||||
}}
|
||||
text: "© 2024 Softly Co.", href: "#"}}
|
||||
/>
|
||||
</div>
|
||||
</ReactLenis>
|
||||
|
||||
Reference in New Issue
Block a user