Compare commits
4 Commits
| Author | SHA1 | Date | |
|---|---|---|---|
| 9101657bba | |||
| 92231e2057 | |||
| b04d35a6db | |||
| efb7ad420e |
373
src/app/page.tsx
373
src/app/page.tsx
@@ -4,15 +4,15 @@ import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
|
||||
import ReactLenis from "lenis/react";
|
||||
import ContactCenter from '@/components/sections/contact/ContactCenter';
|
||||
import FaqSplitMedia from '@/components/sections/faq/FaqSplitMedia';
|
||||
import FeatureCardMedia from '@/components/sections/feature/FeatureCardMedia';
|
||||
import FooterBaseCard from '@/components/sections/footer/FooterBaseCard';
|
||||
import HeroBillboardCarousel from '@/components/sections/hero/HeroBillboardCarousel';
|
||||
import MetricCardThree from '@/components/sections/metrics/MetricCardThree';
|
||||
import FeatureCardSeven from '@/components/sections/feature/FeatureCardSeven';
|
||||
import FooterLogoReveal from '@/components/sections/footer/FooterLogoReveal';
|
||||
import HeroSplitKpi from '@/components/sections/hero/HeroSplitKpi';
|
||||
import MetricCardOne from '@/components/sections/metrics/MetricCardOne';
|
||||
import NavbarStyleFullscreen from '@/components/navbar/NavbarStyleFullscreen/NavbarStyleFullscreen';
|
||||
import ProductCardTwo from '@/components/sections/product/ProductCardTwo';
|
||||
import TestimonialCardTen from '@/components/sections/testimonial/TestimonialCardTen';
|
||||
import TextSplitAbout from '@/components/sections/about/TextSplitAbout';
|
||||
import { Droplets, Shield, Sparkles } from "lucide-react";
|
||||
import ProductCardThree from '@/components/sections/product/ProductCardThree';
|
||||
import TestimonialCardThirteen from '@/components/sections/testimonial/TestimonialCardThirteen';
|
||||
import TestimonialAboutCard from '@/components/sections/about/TestimonialAboutCard';
|
||||
import { Droplets, Shield, Sparkles, User, Info, Package, Phone } from "lucide-react";
|
||||
|
||||
export default function LandingPage() {
|
||||
return (
|
||||
@@ -23,361 +23,146 @@ export default function LandingPage() {
|
||||
contentWidth="mediumLarge"
|
||||
sizing="medium"
|
||||
background="noiseDiagonalGradient"
|
||||
cardStyle="solid"
|
||||
primaryButtonStyle="radial-glow"
|
||||
secondaryButtonStyle="solid"
|
||||
headingFontWeight="normal"
|
||||
cardStyle="glass-elevated"
|
||||
primaryButtonStyle="primary-glow"
|
||||
secondaryButtonStyle="glass"
|
||||
headingFontWeight="semibold"
|
||||
>
|
||||
<ReactLenis root>
|
||||
<div id="nav" data-section="nav">
|
||||
<NavbarStyleFullscreen
|
||||
navItems={[
|
||||
{
|
||||
name: "Home",
|
||||
id: "hero",
|
||||
},
|
||||
{
|
||||
name: "About",
|
||||
id: "about",
|
||||
},
|
||||
{
|
||||
name: "Products",
|
||||
id: "products",
|
||||
},
|
||||
{
|
||||
name: "Contact",
|
||||
id: "contact",
|
||||
},
|
||||
{ name: "Home", id: "hero" },
|
||||
{ name: "About", id: "about" },
|
||||
{ name: "Products", id: "products" },
|
||||
{ name: "Contact", id: "contact" },
|
||||
]}
|
||||
brandName="Lumina Skincare"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="hero" data-section="hero">
|
||||
<HeroBillboardCarousel
|
||||
background={{
|
||||
variant: "gradient-bars",
|
||||
}}
|
||||
<HeroSplitKpi
|
||||
background={{ variant: "sparkles-gradient" }}
|
||||
enableKpiAnimation={true}
|
||||
title="Unveil Your Natural Radiance"
|
||||
description="Experience the purity of nature with our botanical skin care collections, designed to nourish, revitalize, and restore your skin's youthful glow."
|
||||
tag="Purely Organic"
|
||||
tagAnimation="slide-up"
|
||||
buttons={[
|
||||
{
|
||||
text: "Shop Collections",
|
||||
href: "#products",
|
||||
},
|
||||
]}
|
||||
buttonAnimation="slide-up"
|
||||
mediaItems={[
|
||||
{
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/beautiful-girl-with-towel-using-beauty-product_1157-31103.jpg",
|
||||
imageAlt: "Model glowing skin",
|
||||
},
|
||||
{
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/spa-composition-with-personal-hygiene-items-white-background-isolated_169016-19064.jpg",
|
||||
imageAlt: "Serum texture",
|
||||
},
|
||||
{
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/close-up-elegant-beauty-selfcare-treatment_23-2149238283.jpg",
|
||||
imageAlt: "Botanical ingredients",
|
||||
},
|
||||
{
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/woman-towel-resting-her-head-hand_23-2148537384.jpg",
|
||||
imageAlt: "Healthy skin close up",
|
||||
},
|
||||
{
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/eucalyptus-populus-leaves-oats-oil-brush-la-stone-soap-concrete-backdrop_23-2148087701.jpg",
|
||||
imageAlt: "Skincare bottle",
|
||||
},
|
||||
{
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/spa-still-life-with-natural-elements_23-2148201394.jpg",
|
||||
imageAlt: "Hydrated skin",
|
||||
},
|
||||
description="Discover botanical skincare designed to nourish and restore your skin’s true potential."
|
||||
imageSrc="http://img.b2bpic.net/free-photo/beautiful-girl-with-towel-using-beauty-product_1157-31103.jpg"
|
||||
kpis={[
|
||||
{ value: "98%", label: "Glowing Results" },
|
||||
{ value: "24h", label: "Deep Hydration" },
|
||||
{ value: "100%", label: "Pure Organic" },
|
||||
]}
|
||||
buttons={[{ text: "Shop Collections", href: "#products" }]}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="about" data-section="about">
|
||||
<TextSplitAbout
|
||||
<TestimonialAboutCard
|
||||
tag="Our Story"
|
||||
title="Science Meets Botanical Wisdom"
|
||||
description="At Lumina, we believe in the power of nature combined with dermatological innovation. Every batch is crafted with precision to ensure maximum potency and purity."
|
||||
subdescription="We refuse to compromise on quality, sourcing only the finest rare botanical extracts for your daily ritual."
|
||||
icon={Info}
|
||||
imageSrc="http://img.b2bpic.net/free-photo/close-up-elegant-beauty-selfcare-treatment_23-2149238283.jpg"
|
||||
useInvertedBackground={false}
|
||||
title="Science Meets Nature"
|
||||
description={[
|
||||
"At Lumina, we believe that your skin deserves the most potent, natural ingredients on Earth. Our formulas blend traditional botanical wisdom with modern dermatological science.",
|
||||
"Every product is handcrafted in small batches, ensuring freshness and maximum potency to reveal your skin's brightest, clearest potential.",
|
||||
]}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="features" data-section="features">
|
||||
<FeatureCardMedia
|
||||
animationType="slide-up"
|
||||
textboxLayout="default"
|
||||
<FeatureCardSeven
|
||||
animationType="blur-reveal"
|
||||
title="The Lumina Promise"
|
||||
description="Premium ingredients, sustainable sourcing, and transformative results for every skin type."
|
||||
textboxLayout="split"
|
||||
useInvertedBackground={false}
|
||||
features={[
|
||||
{
|
||||
id: "f1",
|
||||
title: "Potent Botanicals",
|
||||
description: "Derived from rare plants, our actives work deeply to heal and rejuvenate.",
|
||||
tag: "Nature-First",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/grapefruit-oil-serum-bottle-put-green-light-background_1150-28091.jpg",
|
||||
},
|
||||
{
|
||||
id: "f2",
|
||||
title: "Deep Hydration",
|
||||
description: "Moisture-locking complexes that restore balance and bounce throughout the day.",
|
||||
tag: "Hydrating",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/hand-with-white-cream-blue-background_23-2152029099.jpg",
|
||||
},
|
||||
{
|
||||
id: "f3",
|
||||
title: "Gentle Cleansing",
|
||||
description: "Purify your skin without stripping away the essential natural oils.",
|
||||
tag: "Soothing",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/aloe-vera-cucumber-with-beauty-cream_23-2148173814.jpg",
|
||||
},
|
||||
{ title: "Pure Actives", description: "Rare plant-based extracts that work deep within your skin barrier.", imageSrc: "http://img.b2bpic.net/free-photo/grapefruit-oil-serum-bottle-put-green-light-background_1150-28091.jpg" },
|
||||
{ title: "Deep Hydration", description: "Lock in essential moisture for a plump and vibrant complexion.", imageSrc: "http://img.b2bpic.net/free-photo/hand-with-white-cream-blue-background_23-2152029099.jpg" },
|
||||
]}
|
||||
title="Why Your Skin Loves Us"
|
||||
description="Discover the unique benefits that set our botanical formulations apart."
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="products" data-section="products">
|
||||
<ProductCardTwo
|
||||
<ProductCardThree
|
||||
gridVariant="one-large-left-three-stacked-right"
|
||||
animationType="slide-up"
|
||||
textboxLayout="default"
|
||||
gridVariant="three-columns-all-equal-width"
|
||||
title="Curated Skin Essentials"
|
||||
description="Experience our best-selling botanical formulas for your daily glow."
|
||||
textboxLayout="split"
|
||||
useInvertedBackground={false}
|
||||
products={[
|
||||
{
|
||||
id: "p1",
|
||||
brand: "Lumina",
|
||||
name: "Renew Serum",
|
||||
price: "$78",
|
||||
rating: 5,
|
||||
reviewCount: "124",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/assortment-cosmetic-bottles-jars_23-2152029108.jpg",
|
||||
},
|
||||
{
|
||||
id: "p2",
|
||||
brand: "Lumina",
|
||||
name: "Velvet Night Cream",
|
||||
price: "$85",
|
||||
rating: 5,
|
||||
reviewCount: "98",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/beauty-cream-with-natural-elements_23-2148173802.jpg",
|
||||
},
|
||||
{
|
||||
id: "p3",
|
||||
brand: "Lumina",
|
||||
name: "Balance Toner",
|
||||
price: "$42",
|
||||
rating: 4,
|
||||
reviewCount: "210",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/hand-sanitizer-gel-copy-space_23-2148758798.jpg",
|
||||
},
|
||||
{
|
||||
id: "p4",
|
||||
brand: "Lumina",
|
||||
name: "Glow Brightener",
|
||||
price: "$65",
|
||||
rating: 5,
|
||||
reviewCount: "156",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/healthy-jojoba-oil-arrangement_23-2149047718.jpg",
|
||||
},
|
||||
{
|
||||
id: "p5",
|
||||
brand: "Lumina",
|
||||
name: "Aloe Calm Gel",
|
||||
price: "$38",
|
||||
rating: 4,
|
||||
reviewCount: "342",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/aloe-vera-cucumber-with-beauty-cream_23-2148173812.jpg",
|
||||
},
|
||||
{
|
||||
id: "p6",
|
||||
brand: "Lumina",
|
||||
name: "Golden Nectar Oil",
|
||||
price: "$92",
|
||||
rating: 5,
|
||||
reviewCount: "89",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/dreamy-aesthetic-cosmetic-product-with-fresh-background_23-2151382893.jpg",
|
||||
},
|
||||
{ id: "p1", name: "Renew Serum", price: "$78", imageSrc: "http://img.b2bpic.net/free-photo/assortment-cosmetic-bottles-jars_23-2152029108.jpg" },
|
||||
{ id: "p2", name: "Velvet Night Cream", price: "$85", imageSrc: "http://img.b2bpic.net/free-photo/beauty-cream-with-natural-elements_23-2148173802.jpg" },
|
||||
{ id: "p3", name: "Balance Toner", price: "$42", imageSrc: "http://img.b2bpic.net/free-photo/hand-sanitizer-gel-copy-space_23-2148758798.jpg" },
|
||||
{ id: "p4", name: "Glow Brightener", price: "$65", imageSrc: "http://img.b2bpic.net/free-photo/healthy-jojoba-oil-arrangement_23-2149047718.jpg" },
|
||||
]}
|
||||
title="Best Sellers"
|
||||
description="Explore our curated collection of botanical essentials for every skin type."
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="metrics" data-section="metrics">
|
||||
<MetricCardThree
|
||||
animationType="slide-up"
|
||||
textboxLayout="default"
|
||||
<MetricCardOne
|
||||
gridVariant="bento-grid"
|
||||
animationType="depth-3d"
|
||||
title="Clinical Excellence"
|
||||
description="Evidence-based skincare results backed by science."
|
||||
textboxLayout="split"
|
||||
useInvertedBackground={false}
|
||||
metrics={[
|
||||
{
|
||||
id: "m1",
|
||||
icon: Sparkles,
|
||||
title: "Radiance Improvement",
|
||||
value: "94%",
|
||||
},
|
||||
{
|
||||
id: "m2",
|
||||
icon: Droplets,
|
||||
title: "Hydration Boost",
|
||||
value: "24h",
|
||||
},
|
||||
{
|
||||
id: "m3",
|
||||
icon: Shield,
|
||||
title: "Skin Barrier Support",
|
||||
value: "100%",
|
||||
},
|
||||
{ id: "m1", title: "Radiance", value: "94%", description: "Visible clarity improvement.", icon: Sparkles },
|
||||
{ id: "m2", title: "Hydration", value: "24h", description: "Long-lasting moisture retention.", icon: Droplets },
|
||||
{ id: "m3", title: "Support", value: "100%", description: "Barrier protection efficiency.", icon: Shield },
|
||||
]}
|
||||
title="Proven Results"
|
||||
description="Clinical studies show incredible improvements after consistent use."
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="testimonials" data-section="testimonials">
|
||||
<TestimonialCardTen
|
||||
<TestimonialCardThirteen
|
||||
showRating={true}
|
||||
animationType="blur-reveal"
|
||||
title="Community Love"
|
||||
description="Hear from our glowing community members."
|
||||
textboxLayout="default"
|
||||
useInvertedBackground={false}
|
||||
testimonials={[
|
||||
{
|
||||
id: "t1",
|
||||
title: "Life changer!",
|
||||
quote: "My skin has never felt this soft or looked this bright.",
|
||||
name: "Elena R.",
|
||||
role: "User",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/pretty-woman-bed-sitting-pillow_273609-4819.jpg",
|
||||
},
|
||||
{
|
||||
id: "t2",
|
||||
title: "Truly organic",
|
||||
quote: "I love that I can read all the ingredients on the bottle.",
|
||||
name: "Sarah J.",
|
||||
role: "Influencer",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/close-up-smiley-women-hanging-out_23-2149168545.jpg",
|
||||
},
|
||||
{
|
||||
id: "t3",
|
||||
title: "Instant glow",
|
||||
quote: "The serum changed everything within two weeks.",
|
||||
name: "Maya L.",
|
||||
role: "Makeup Artist",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/woman-holding-book-close-up_23-2148973429.jpg",
|
||||
},
|
||||
{
|
||||
id: "t4",
|
||||
title: "So soothing",
|
||||
quote: "Perfect for sensitive skin like mine.",
|
||||
name: "Chloe B.",
|
||||
role: "User",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/front-view-beautiful-woman-posing_23-2149652024.jpg",
|
||||
},
|
||||
{
|
||||
id: "t5",
|
||||
title: "Finally hydrated",
|
||||
quote: "No more dry patches. I'm obsessed.",
|
||||
name: "Jessica M.",
|
||||
role: "Dermatologist Assistant",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/fashion-outdoor-portrait-brunette-short-hair-woman-with-broom_343596-703.jpg",
|
||||
},
|
||||
{ id: "t1", name: "Elena R.", handle: "@skinjoy", testimonial: "My skin feels transformed and completely rejuvenated!", rating: 5, imageSrc: "http://img.b2bpic.net/free-photo/pretty-woman-bed-sitting-pillow_273609-4819.jpg" },
|
||||
{ id: "t2", name: "Sarah J.", handle: "@beautyguru", testimonial: "Finally, organic ingredients that actually work.", rating: 5, imageSrc: "http://img.b2bpic.net/free-photo/close-up-smiley-women-hanging-out_23-2149168545.jpg" },
|
||||
]}
|
||||
title="Loved by Skin Enthusiasts"
|
||||
description="Read what our community has to say about their journey to healthy skin."
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="faq" data-section="faq">
|
||||
<FaqSplitMedia
|
||||
textboxLayout="default"
|
||||
useInvertedBackground={false}
|
||||
faqs={[
|
||||
{
|
||||
id: "q1",
|
||||
title: "Are products vegan?",
|
||||
content: "Yes, our entire collection is 100% vegan and cruelty-free.",
|
||||
},
|
||||
{
|
||||
id: "q2",
|
||||
title: "How long until I see results?",
|
||||
content: "Most users see visible results within 2-4 weeks of consistent daily usage.",
|
||||
},
|
||||
{
|
||||
id: "q3",
|
||||
title: "Do you ship globally?",
|
||||
content: "We ship to over 50 countries worldwide.",
|
||||
},
|
||||
{ id: "q1", title: "Vegan & Cruelty-Free?", content: "Yes, 100% certified." },
|
||||
{ id: "q2", title: "Shipping?", content: "Global shipping available." },
|
||||
]}
|
||||
imageSrc="http://img.b2bpic.net/free-photo/master-applying-makeup-smiling-blond-woman_23-2148113227.jpg"
|
||||
mediaAnimation="slide-up"
|
||||
title="Questions Answered"
|
||||
description="Common curiosities about our process and ingredients."
|
||||
title="Common Questions"
|
||||
description="Everything you need to know."
|
||||
textboxLayout="split"
|
||||
faqsAnimation="slide-up"
|
||||
useInvertedBackground={false}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="contact" data-section="contact">
|
||||
<ContactCenter
|
||||
tag="Newsletter"
|
||||
title="Start Your Glow"
|
||||
description="Get 15% off your first order by joining our community today."
|
||||
background={{ variant: "plain" }}
|
||||
useInvertedBackground={false}
|
||||
background={{
|
||||
variant: "plain",
|
||||
}}
|
||||
tag="Join Us"
|
||||
title="Stay Glowing"
|
||||
description="Sign up for 15% off your first order and exclusive skincare tips."
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="footer" data-section="footer">
|
||||
<FooterBaseCard
|
||||
<FooterLogoReveal
|
||||
logoText="Lumina Skincare"
|
||||
columns={[
|
||||
{
|
||||
title: "Shop",
|
||||
items: [
|
||||
{
|
||||
label: "All Products",
|
||||
href: "#products",
|
||||
},
|
||||
{
|
||||
label: "New Arrivals",
|
||||
href: "#",
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
title: "Support",
|
||||
items: [
|
||||
{
|
||||
label: "Contact",
|
||||
href: "#",
|
||||
},
|
||||
{
|
||||
label: "FAQ",
|
||||
href: "#",
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
title: "Company",
|
||||
items: [
|
||||
{
|
||||
label: "About",
|
||||
href: "#about",
|
||||
},
|
||||
{
|
||||
label: "Blog",
|
||||
href: "#",
|
||||
},
|
||||
],
|
||||
},
|
||||
]}
|
||||
leftLink={{ text: "Privacy Policy", href: "#" }}
|
||||
rightLink={{ text: "Terms & Conditions", href: "#" }}
|
||||
/>
|
||||
</div>
|
||||
</ReactLenis>
|
||||
</ThemeProvider>
|
||||
);
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user