157 lines
6.9 KiB
TypeScript
157 lines
6.9 KiB
TypeScript
"use client";
|
||
|
||
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 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 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 (
|
||
<ThemeProvider
|
||
defaultButtonVariant="text-shift"
|
||
defaultTextAnimation="background-highlight"
|
||
borderRadius="rounded"
|
||
contentWidth="mediumLarge"
|
||
sizing="medium"
|
||
background="noiseDiagonalGradient"
|
||
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" },
|
||
]}
|
||
brandName="Lumina Skincare"
|
||
/>
|
||
</div>
|
||
|
||
<div id="hero" data-section="hero">
|
||
<HeroSplitKpi
|
||
background={{ variant: "sparkles-gradient" }}
|
||
title="Unveil Your Natural Radiance"
|
||
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">
|
||
<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"
|
||
/>
|
||
</div>
|
||
|
||
<div id="features" data-section="features">
|
||
<FeatureCardSeven
|
||
animationType="blur-reveal"
|
||
title="The Lumina Promise"
|
||
description="Premium ingredients, sustainable sourcing, and transformative results for every skin type."
|
||
textboxLayout="split"
|
||
features={[
|
||
{ 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" },
|
||
]}
|
||
/>
|
||
</div>
|
||
|
||
<div id="products" data-section="products">
|
||
<ProductCardThree
|
||
gridVariant="one-large-left-three-stacked-right"
|
||
animationType="slide-up"
|
||
title="Curated Skin Essentials"
|
||
description="Experience our best-selling botanical formulas for your daily glow."
|
||
textboxLayout="split"
|
||
products={[
|
||
{ 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" },
|
||
]}
|
||
/>
|
||
</div>
|
||
|
||
<div id="metrics" data-section="metrics">
|
||
<MetricCardOne
|
||
gridVariant="bento-grid"
|
||
animationType="depth-3d"
|
||
title="Clinical Excellence"
|
||
description="Evidence-based skincare results backed by science."
|
||
metrics={[
|
||
{ 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 },
|
||
]}
|
||
/>
|
||
</div>
|
||
|
||
<div id="testimonials" data-section="testimonials">
|
||
<TestimonialCardThirteen
|
||
showRating={true}
|
||
animationType="blur-reveal"
|
||
title="Community Love"
|
||
description="Hear from our glowing community members."
|
||
textboxLayout="default"
|
||
testimonials={[
|
||
{ 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" },
|
||
]}
|
||
/>
|
||
</div>
|
||
|
||
<div id="faq" data-section="faq">
|
||
<FaqSplitMedia
|
||
faqs={[
|
||
{ id: "q1", title: "Vegan & Cruelty-Free?", content: "Yes, 100% certified." },
|
||
{ id: "q2", title: "Shipping?", content: "Global shipping available." },
|
||
]}
|
||
title="Common Questions"
|
||
textboxLayout="split"
|
||
faqsAnimation="slide-up"
|
||
/>
|
||
</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."
|
||
/>
|
||
</div>
|
||
|
||
<div id="footer" data-section="footer">
|
||
<FooterLogoReveal
|
||
logoText="Lumina Skincare"
|
||
leftLink={{ text: "Privacy Policy", href: "#" }}
|
||
rightLink={{ text: "Terms & Conditions", href: "#" }}
|
||
/>
|
||
</div>
|
||
</ReactLenis>
|
||
</ThemeProvider>
|
||
);
|
||
} |