214 lines
12 KiB
TypeScript
214 lines
12 KiB
TypeScript
"use client";
|
|
|
|
import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
|
|
import ReactLenis from "lenis/react";
|
|
import ContactCenter from '@/components/sections/contact/ContactCenter';
|
|
import FaqBase from '@/components/sections/faq/FaqBase';
|
|
import FeatureCardNineteen from '@/components/sections/feature/FeatureCardNineteen';
|
|
import FooterLogoReveal from '@/components/sections/footer/FooterLogoReveal';
|
|
import HeroOverlay from '@/components/sections/hero/HeroOverlay';
|
|
import MetricCardEleven from '@/components/sections/metrics/MetricCardEleven';
|
|
import MetricSplitMediaAbout from '@/components/sections/about/MetricSplitMediaAbout';
|
|
import NavbarLayoutFloatingOverlay from '@/components/navbar/NavbarLayoutFloatingOverlay/NavbarLayoutFloatingOverlay';
|
|
import ProductCardFour from '@/components/sections/product/ProductCardFour';
|
|
import SocialProofOne from '@/components/sections/socialProof/SocialProofOne';
|
|
import TestimonialCardThirteen from '@/components/sections/testimonial/TestimonialCardThirteen';
|
|
|
|
export default function LandingPage() {
|
|
return (
|
|
<ThemeProvider
|
|
defaultButtonVariant="elastic-effect"
|
|
defaultTextAnimation="background-highlight"
|
|
borderRadius="soft"
|
|
contentWidth="mediumLarge"
|
|
sizing="largeSizeMediumTitles"
|
|
background="noise"
|
|
cardStyle="gradient-mesh"
|
|
primaryButtonStyle="shadow"
|
|
secondaryButtonStyle="solid"
|
|
headingFontWeight="normal"
|
|
>
|
|
<ReactLenis root>
|
|
<div id="nav" data-section="nav">
|
|
<NavbarLayoutFloatingOverlay
|
|
navItems={[
|
|
{ name: "Home", id: "hero" },
|
|
{ name: "Our Science", id: "about" },
|
|
{ name: "Benefits", id: "features" },
|
|
{ name: "Shop", id: "products" },
|
|
{ name: "Reviews", id: "testimonials" },
|
|
]}
|
|
brandName="Lumina Skincare"
|
|
/>
|
|
</div>
|
|
|
|
<div id="hero" data-section="hero">
|
|
<HeroOverlay
|
|
title="Timeless Radiance, Redefined"
|
|
description="Experience the pinnacle of luxury anti-aging. Our signature cream merges scientific innovation with botanical elegance for visible rejuvenation."
|
|
buttons={[{ text: "Shop The Collection", href: "#products" }]}
|
|
imageSrc="http://img.b2bpic.net/free-photo/shea-butter-treatment-arrangement_23-2148963344.jpg"
|
|
showBlur={true}
|
|
avatars={[
|
|
{ src: "http://img.b2bpic.net/free-photo/front-view-bath-concept-cream-accessories_23-2148419398.jpg", alt: "Customer 1" },
|
|
{ src: "http://img.b2bpic.net/free-photo/elements-relaxing-massage-spa_23-2148176947.jpg", alt: "Customer 2" },
|
|
{ src: "http://img.b2bpic.net/free-photo/close-up-beauty-cream-bottle-cotton-flower-plant_23-2147844991.jpg", alt: "Customer 3" },
|
|
{ src: "http://img.b2bpic.net/free-photo/high-angle-bath-concept-accessories_23-2148419404.jpg", alt: "Customer 4" },
|
|
{ src: "http://img.b2bpic.net/free-photo/elegant-mature-woman-applying-moisturizer_23-2148277922.jpg", alt: "Customer 5" },
|
|
]}
|
|
avatarText="Join 10,000+ satisfied clients"
|
|
/>
|
|
</div>
|
|
|
|
<div id="about" data-section="about">
|
|
<MetricSplitMediaAbout
|
|
useInvertedBackground={false}
|
|
title="Science Meets Elegance"
|
|
description="Our formula is crafted in clinical laboratories, utilizing proprietary bio-actives that accelerate natural collagen production while deeply hydrating your skin at the cellular level."
|
|
metrics={[
|
|
{ value: "98%", title: "Hydration Increase" },
|
|
{ value: "12+", title: "Active Botanicals" },
|
|
{ value: "4 Weeks", title: "Visible Results" },
|
|
]}
|
|
imageSrc="http://img.b2bpic.net/free-photo/oil-dropper-background-pink-dripping-cosmetic-product_53876-137330.jpg"
|
|
mediaAnimation="blur-reveal"
|
|
metricsAnimation="slide-up"
|
|
/>
|
|
</div>
|
|
|
|
<div id="features" data-section="features">
|
|
<FeatureCardNineteen
|
|
textboxLayout="split"
|
|
useInvertedBackground={false}
|
|
features={[
|
|
{
|
|
tag: "Active", title: "Deep Hydration", subtitle: "Lasting moisture", description: "24-hour hydration complex locks in moisture for a plump appearance.", imageSrc: "http://img.b2bpic.net/free-photo/thoughtful-woman-looking-away_23-2148092948.jpg"},
|
|
{
|
|
tag: "Pure", title: "Organic Botanicals", subtitle: "Nature's touch", description: "Ethically sourced rare botanicals calm inflammation and brighten skin.", imageSrc: "http://img.b2bpic.net/free-photo/ecofriendly-beauty-product_23-2150669117.jpg"},
|
|
{
|
|
tag: "Result", title: "Clinically Proven", subtitle: "Scientific efficacy", description: "Formulated by dermatologists to guarantee visible improvements.", imageSrc: "http://img.b2bpic.net/free-photo/close-up-woman-holding-pomegranate-cream_23-2148803519.jpg"},
|
|
]}
|
|
title="Why Your Skin Loves Lumina"
|
|
description="A refined ritual designed for the modern woman who demands efficacy and luxury in every drop."
|
|
/>
|
|
</div>
|
|
|
|
<div id="products" data-section="products">
|
|
<ProductCardFour
|
|
carouselMode="auto"
|
|
animationType="slide-up"
|
|
textboxLayout="default"
|
|
gridVariant="three-columns-all-equal-width"
|
|
useInvertedBackground={false}
|
|
products={[
|
|
{ id: "p1", name: "Signature Cream", price: "$125", variant: "50ml Jar", imageSrc: "http://img.b2bpic.net/free-photo/horizontal-banner-beauty-products-with-copy-space_23-2149446552.jpg" },
|
|
{ id: "p2", name: "Revitalizing Serum", price: "$95", variant: "30ml Bottle", imageSrc: "http://img.b2bpic.net/free-photo/close-up-sideways-pipette-with-spa-oil_23-2148223724.jpg" },
|
|
{ id: "p3", name: "Brightening Eye Cream", price: "$75", variant: "15ml Jar", imageSrc: "http://img.b2bpic.net/free-photo/skin-regeneration-product-still-life_23-2151232280.jpg" },
|
|
{ id: "p4", name: "Luminous Day Moisturizer", price: "$85", variant: "50ml Pump", imageSrc: "http://img.b2bpic.net/free-photo/model-holding-zero-waste-beauty-product_23-2151440284.jpg" },
|
|
{ id: "p5", name: "Botanical Face Oil", price: "$110", variant: "30ml Dropper", imageSrc: "http://img.b2bpic.net/free-photo/arrangement-natural-argan-oil-dropper_23-2149016620.jpg" },
|
|
{ id: "p6", name: "Night Recovery Balm", price: "$135", variant: "50ml Jar", imageSrc: "http://img.b2bpic.net/free-photo/view-male-beauty-products-with-rock-stone-display_23-2150435231.jpg" },
|
|
]}
|
|
title="Signature Collection"
|
|
description="Discover your perfect skin ritual."
|
|
/>
|
|
</div>
|
|
|
|
<div id="metrics" data-section="metrics">
|
|
<MetricCardEleven
|
|
animationType="slide-up"
|
|
textboxLayout="split"
|
|
useInvertedBackground={false}
|
|
metrics={[
|
|
{
|
|
id: "m1", value: "92%", title: "Radiance Improvement", description: "Observed glow and brightness increase.", imageSrc: "http://img.b2bpic.net/free-photo/pleased-adult-female-doctor-medical-robe-with-stethoscope-sitting-desk-with-office-tools-holding-glass-water-gesturing-ok-sign-isolated-purple-wall-with-copy-space_141793-119621.jpg"},
|
|
{
|
|
id: "m2", value: "88%", title: "Firmness Boost", description: "Noticeable improvement in skin elasticity.", imageSrc: "http://img.b2bpic.net/free-photo/healthy-pills-illness-treatment-instrument-diagnosis_1291-188.jpg"},
|
|
{
|
|
id: "m3", value: "95%", title: "Customer Satisfaction", description: "Rated positively by dermatologists.", imageSrc: "http://img.b2bpic.net/free-photo/close-up-hand-holding-brush_23-2148978131.jpg"},
|
|
]}
|
|
title="Clinically Proven Efficacy"
|
|
description="Results observed after consistent use during our 8-week clinical trial study."
|
|
/>
|
|
</div>
|
|
|
|
<div id="socialProof" data-section="socialProof">
|
|
<SocialProofOne
|
|
textboxLayout="default"
|
|
useInvertedBackground={false}
|
|
names={[
|
|
"Vogue", "Harper's Bazaar", "Allure", "Cosmopolitan", "Marie Claire", "Elle", "Glamour"]}
|
|
title="Trusted by Experts"
|
|
description="Featured in leading beauty publications and recommended by top clinics."
|
|
/>
|
|
</div>
|
|
|
|
<div id="testimonials" data-section="testimonials">
|
|
<TestimonialCardThirteen
|
|
animationType="slide-up"
|
|
textboxLayout="default"
|
|
useInvertedBackground={false}
|
|
testimonials={[
|
|
{
|
|
id: "t1", name: "Elena R.", handle: "@elena_skincare", testimonial: "My skin has never felt more alive and vibrant. Truly life-changing.", rating: 5,
|
|
imageSrc: "http://img.b2bpic.net/free-photo/world-cancer-day-awareness-with-patient_23-2151249710.jpg"},
|
|
{
|
|
id: "t2", name: "Sarah J.", handle: "@sarahj", testimonial: "The most luxurious texture I've encountered in years. Obsessed.", rating: 5,
|
|
imageSrc: "http://img.b2bpic.net/free-photo/expressive-senior-female-posing-indoor_344912-2934.jpg"},
|
|
{
|
|
id: "t3", name: "Maria K.", handle: "@mariak_beauty", testimonial: "Visible results in just one week. Highly recommended for busy professionals.", rating: 5,
|
|
imageSrc: "http://img.b2bpic.net/free-photo/closeup-attractive-young-caucasian-girl-with-dark-short-hair-white-top-looks-camera-indoors_197531-33260.jpg"},
|
|
{
|
|
id: "t4", name: "Claire B.", handle: "@claireb", testimonial: "Finally, a cream that actually delivers on its anti-aging promises.", rating: 5,
|
|
imageSrc: "http://img.b2bpic.net/free-photo/young-strong-sporty-athletic-fitness-trainer-instructor-woman-wearing-brown-tracksuit-sitting_1258-200304.jpg"},
|
|
{
|
|
id: "t5", name: "Sophia L.", handle: "@sophl", testimonial: "Simple, elegant, and effective. The ultimate skin luxury.", rating: 5,
|
|
imageSrc: "http://img.b2bpic.net/free-photo/woman-with-combed-blonde-hair-applies-collagen-patches-eyes_273609-49267.jpg"},
|
|
]}
|
|
showRating={true}
|
|
title="Beauty Whispered"
|
|
description="Hear what our radiant community has to say about the Lumina difference."
|
|
/>
|
|
</div>
|
|
|
|
<div id="faq" data-section="faq">
|
|
<FaqBase
|
|
textboxLayout="default"
|
|
useInvertedBackground={false}
|
|
faqs={[
|
|
{
|
|
id: "f1", title: "Is this cream suitable for sensitive skin?", content: "Yes, our formula is dermatologist-tested and hypoallergenic, perfect for even the most sensitive skin."},
|
|
{
|
|
id: "f2", title: "How often should I use the product?", content: "We recommend applying morning and evening as part of your regular ritual for optimal results."},
|
|
{
|
|
id: "f3", title: "Are your ingredients organic?", content: "Our ingredients are 100% ethically sourced and our primary actives are certified organic."},
|
|
{
|
|
id: "f4", title: "Do you offer a money-back guarantee?", content: "Yes, we offer a 30-day money-back guarantee if you are not fully satisfied with your purchase. Your comfort is our priority."},
|
|
]}
|
|
buttons={[{ text: "Contact Support", href: "mailto:support@luminaskincare.com" }]}
|
|
title="Common Questions"
|
|
description="Everything you need to know about our premium skincare line."
|
|
faqsAnimation="slide-up"
|
|
/>
|
|
</div>
|
|
|
|
<div id="contact" data-section="contact">
|
|
<ContactCenter
|
|
useInvertedBackground={false}
|
|
background={{ variant: "gradient-bars" }}
|
|
tag="Newsletter"
|
|
title="Join the Lumina Inner Circle"
|
|
description="Receive exclusive skincare tips, early access to new releases, and personalized offers directly to your inbox."
|
|
/>
|
|
</div>
|
|
|
|
<div id="footer" data-section="footer">
|
|
<FooterLogoReveal
|
|
logoText="Lumina Skincare"
|
|
leftLink={{ text: "Privacy Policy", href: "#" }}
|
|
rightLink={{ text: "Terms of Service", href: "#" }}
|
|
/>
|
|
</div>
|
|
</ReactLenis>
|
|
</ThemeProvider>
|
|
);
|
|
} |