Merge version_2 into main #2
104
src/app/page.tsx
104
src/app/page.tsx
@@ -4,7 +4,7 @@ import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
|
||||
import ReactLenis from "lenis/react";
|
||||
import ContactSplit from '@/components/sections/contact/ContactSplit';
|
||||
import FaqBase from '@/components/sections/faq/FaqBase';
|
||||
import FeatureCardNineteen from '@/components/sections/feature/FeatureCardNineteen';
|
||||
import FeatureCardTwentySeven from '@/components/sections/feature/FeatureCardTwentySeven';
|
||||
import FooterLogoReveal from '@/components/sections/footer/FooterLogoReveal';
|
||||
import HeroBillboardGallery from '@/components/sections/hero/HeroBillboardGallery';
|
||||
import MetricCardFourteen from '@/components/sections/metrics/MetricCardFourteen';
|
||||
@@ -30,61 +30,45 @@ export default function LandingPage() {
|
||||
<div id="nav" data-section="nav">
|
||||
<NavbarStyleFullscreen
|
||||
navItems={[
|
||||
{
|
||||
name: "Shop", id: "#products"},
|
||||
{
|
||||
name: "Rituals", id: "#features"},
|
||||
{
|
||||
name: "Community", id: "#testimonials"},
|
||||
{ name: "Shop", id: "#products" },
|
||||
{ name: "Rituals", id: "#features" },
|
||||
{ name: "Community", id: "#testimonials" },
|
||||
]}
|
||||
brandName="Softly"
|
||||
button={{
|
||||
text: "Shop Skincare", href: "#products"}}
|
||||
button={{ text: "Shop Skincare", href: "#products" }}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="hero" data-section="hero">
|
||||
<HeroBillboardGallery
|
||||
background={{
|
||||
variant: "sparkles-gradient"}}
|
||||
background={{ variant: "sparkles-gradient" }}
|
||||
title="Skincare, but softly"
|
||||
description="Clinical formulas. Gentle rituals. Designed for real skin."
|
||||
buttons={[
|
||||
{
|
||||
text: "Explore Products", href: "#products"},
|
||||
{
|
||||
text: "Build Routine", href: "#"},
|
||||
{ text: "Explore Products", href: "#products" },
|
||||
{ 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/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/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/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/high-angle-view-moisturizing-cream-brush-flower-alarm-marble_23-2147878918.jpg", imageAlt: "minimalist skincare serum bottle" },
|
||||
]}
|
||||
mediaAnimation="blur-reveal"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="features" data-section="features">
|
||||
<FeatureCardNineteen
|
||||
<FeatureCardTwentySeven
|
||||
textboxLayout="split"
|
||||
animationType="slide-up"
|
||||
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: "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"},
|
||||
]}
|
||||
title="Your Daily Ritual"
|
||||
description="Carefully curated steps to help your skin breathe and reset."
|
||||
features={[
|
||||
{ id: "am", title: "Cleanse & Hydrate", descriptions: ["Refresh your day with soft hydration."], imageSrc: "http://img.b2bpic.net/free-photo/girl-with-refreshing-drink-consulting-her-agenda_23-2147640373.jpg" },
|
||||
{ id: "pm", title: "Repair & Restore", descriptions: ["Deep nourishment while you sleep."], imageSrc: "http://img.b2bpic.net/free-photo/young-woman-preparing-her-bath-time_23-2149186323.jpg" },
|
||||
{ id: "weekly", title: "Reset Mask", descriptions: ["A gentle weekly detox reset."], 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" },
|
||||
]}
|
||||
/>
|
||||
</div>
|
||||
|
||||
@@ -95,18 +79,9 @@ export default function LandingPage() {
|
||||
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: "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: "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: "p6", name: "Night Balm", price: "$34", variant: "50ml", imageSrc: "http://img.b2bpic.net/free-photo/refreshing-drink-with-peach-arrangement_23-2150928933.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: "p3", name: "Gentle Cleanser", price: "$24", variant: "150ml", imageSrc: "http://img.b2bpic.net/free-photo/medical-dropper_187299-47450.jpg" },
|
||||
]}
|
||||
title="Our Essentials"
|
||||
description="Simple, clean formulas designed to harmonize with your skin."
|
||||
@@ -119,12 +94,8 @@ export default function LandingPage() {
|
||||
title="Clinical Results"
|
||||
tag="Transparency"
|
||||
metrics={[
|
||||
{
|
||||
id: "m1", value: "98%", description: "Reported calmer skin"},
|
||||
{
|
||||
id: "m2", value: "24h", description: "Lasting hydration boost"},
|
||||
{
|
||||
id: "m3", value: "100%", description: "Cruelty-free formulas"},
|
||||
{ id: "m1", value: "98%", description: "Reported calmer skin" },
|
||||
{ id: "m2", value: "24h", description: "Lasting hydration boost" },
|
||||
]}
|
||||
metricsAnimation="slide-up"
|
||||
/>
|
||||
@@ -135,16 +106,7 @@ export default function LandingPage() {
|
||||
textboxLayout="split"
|
||||
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: "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: "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: "1", title: "Life Changing", quote: "My skin has never felt this calm.", name: "Emma L.", role: "Creative" },
|
||||
]}
|
||||
title="Skin Notes"
|
||||
description="Real stories from our community."
|
||||
@@ -156,12 +118,7 @@ export default function LandingPage() {
|
||||
textboxLayout="split"
|
||||
useInvertedBackground={false}
|
||||
faqs={[
|
||||
{
|
||||
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: "q3", title: "Are you cruelty-free?", content: "Absolutely. We are proud of our 100% vegan standards."},
|
||||
{ id: "q1", title: "Is it suitable for sensitive skin?", content: "Yes, our formulas are tested for maximum gentleness." },
|
||||
]}
|
||||
title="Common Questions"
|
||||
description="Everything you need to know about our rituals."
|
||||
@@ -172,8 +129,7 @@ export default function LandingPage() {
|
||||
<div id="contact" data-section="contact">
|
||||
<ContactSplit
|
||||
useInvertedBackground={true}
|
||||
background={{
|
||||
variant: "sparkles-gradient"}}
|
||||
background={{ variant: "sparkles-gradient" }}
|
||||
tag="Waitlist"
|
||||
title="Start your calm skin journey"
|
||||
description="Join our community and get access to exclusive rituals."
|
||||
@@ -185,13 +141,11 @@ export default function LandingPage() {
|
||||
<div id="footer" data-section="footer">
|
||||
<FooterLogoReveal
|
||||
logoText="SOFTLY"
|
||||
leftLink={{
|
||||
text: "Privacy Policy", href: "#"}}
|
||||
rightLink={{
|
||||
text: "© 2024 Softly Co.", href: "#"}}
|
||||
leftLink={{ text: "Privacy Policy", href: "#" }}
|
||||
rightLink={{ text: "© 2024 Softly Co.", href: "#" }}
|
||||
/>
|
||||
</div>
|
||||
</ReactLenis>
|
||||
</ThemeProvider>
|
||||
);
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user