177 lines
11 KiB
TypeScript
177 lines
11 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 FeatureHoverPattern from '@/components/sections/feature/featureHoverPattern/FeatureHoverPattern';
|
|
import FooterCard from '@/components/sections/footer/FooterCard';
|
|
import HeroBillboardTestimonial from '@/components/sections/hero/HeroBillboardTestimonial';
|
|
import MetricSplitMediaAbout from '@/components/sections/about/MetricSplitMediaAbout';
|
|
import NavbarLayoutFloatingInline from '@/components/navbar/NavbarLayoutFloatingInline';
|
|
import ProductCardFour from '@/components/sections/product/ProductCardFour';
|
|
import TestimonialCardTen from '@/components/sections/testimonial/TestimonialCardTen';
|
|
import { Leaf, Shield, Sparkles } from "lucide-react";
|
|
|
|
export default function LandingPage() {
|
|
return (
|
|
<ThemeProvider
|
|
defaultButtonVariant="icon-arrow"
|
|
defaultTextAnimation="reveal-blur"
|
|
borderRadius="pill"
|
|
contentWidth="mediumLarge"
|
|
sizing="largeSmall"
|
|
background="blurBottom"
|
|
cardStyle="outline"
|
|
primaryButtonStyle="primary-glow"
|
|
secondaryButtonStyle="solid"
|
|
headingFontWeight="semibold"
|
|
>
|
|
<ReactLenis root>
|
|
<div id="nav" data-section="nav">
|
|
<NavbarLayoutFloatingInline
|
|
navItems={[
|
|
{ name: "Home", id: "hero" },
|
|
{ name: "About", id: "about" },
|
|
{ name: "Products", id: "products" },
|
|
{ name: "Reviews", id: "testimonials" },
|
|
{ name: "Contact", id: "contact" },
|
|
]}
|
|
brandName="Lumière Beauty"
|
|
button={{ text: "Shop Now", href: "#products" }}
|
|
/>
|
|
</div>
|
|
|
|
<div id="hero" data-section="hero">
|
|
<HeroBillboardTestimonial
|
|
useInvertedBackground={true}
|
|
background={{ variant: "gradient-bars" }}
|
|
title="Unveil Your Natural Radiance"
|
|
description="Experience the fusion of science and nature with our luxurious skincare collection designed for your unique glow."
|
|
testimonials={[
|
|
{ name: "Elena R.", handle: "@elena_skincare", testimonial: "My skin has never felt this hydrated and glowing. Truly luxury in a bottle.", rating: 5, imageSrc: "http://img.b2bpic.net/free-photo/make-up-concept-with-plant_23-2149030351.jpg?_wi=1", imageAlt: "elegant beauty skincare product background" },
|
|
{ name: "Sarah M.", handle: "@sarah_beauty", testimonial: "The makeup line is impeccable. Minimal, elegant, and long-lasting.", rating: 5, imageSrc: "http://img.b2bpic.net/free-photo/elegant-minimal-interior-design_23-2151913246.jpg?_wi=1", imageAlt: "elegant beauty skincare product background" },
|
|
{ name: "Chloe L.", handle: "@chloeluv", testimonial: "A complete transformation. Highly recommend these perfumes as well!", rating: 5, imageSrc: "http://img.b2bpic.net/free-photo/depilatory-paste-shape-heart-with-fresh-tulip_185193-164812.jpg", imageAlt: "elegant beauty skincare product background" },
|
|
{ name: "Maya K.", handle: "@maya_beauty", testimonial: "Finally, skincare that feels as good as it looks on my vanity.", rating: 5, imageSrc: "http://img.b2bpic.net/free-vector/dermatologically-tested-label-style_23-2148507442.jpg", imageAlt: "elegant beauty skincare product background" },
|
|
{ name: "Sofia J.", handle: "@sofia_j", testimonial: "The best ingredients I've ever found in a commercial line.", rating: 5, imageSrc: "http://img.b2bpic.net/free-photo/eco-friendly-sign_23-2148576718.jpg", imageAlt: "elegant beauty skincare product background" }
|
|
]}
|
|
imageSrc="http://img.b2bpic.net/free-photo/make-up-concept-with-plant_23-2149030351.jpg?_wi=2"
|
|
avatars={[
|
|
{ src: "http://img.b2bpic.net/free-photo/expressive-transgender-posing-medium-shot_23-2149154632.jpg", alt: "Portrait of elegant woman" },
|
|
{ src: "http://img.b2bpic.net/free-photo/cute-young-cozy-woman-indoor-portrait_624325-2852.jpg", alt: "Portrait of stylish woman" },
|
|
{ src: "http://img.b2bpic.net/free-photo/portrait-displeased-young-businesswoman-with-arms-akimbo_176420-9936.jpg", alt: "Portrait of chic woman" },
|
|
{ src: "http://img.b2bpic.net/free-photo/glamour-female-model-with-short-brown-hair-black-dress-posing-near-light-wall_613910-7032.jpg", alt: "Portrait of modern woman" },
|
|
{ src: "http://img.b2bpic.net/free-photo/front-view-woman-enjoying-time-outdoors_23-2150100125.jpg", alt: "Portrait of natural beauty" }
|
|
]}
|
|
marqueeItems={[
|
|
{ type: "image", src: "http://img.b2bpic.net/free-photo/make-up-concept-with-foundation_23-2149030367.jpg", alt: "Makeup concept" },
|
|
{ type: "text", text: "Cruelty-Free" },
|
|
{ type: "image", src: "http://img.b2bpic.net/free-photo/cosmetic-products-flowers-white_1150-15376.jpg", alt: "Cosmetic products" },
|
|
{ type: "text", text: "Dermatologist Tested" },
|
|
{ type: "image", src: "http://img.b2bpic.net/free-photo/make-up-concept-with-container-high-angle_23-2149030366.jpg", alt: "Skincare luxury" }
|
|
]}
|
|
/>
|
|
</div>
|
|
|
|
<div id="about" data-section="about">
|
|
<MetricSplitMediaAbout
|
|
useInvertedBackground={false}
|
|
title="The Art of Beauty"
|
|
description="Lumière Beauty was founded on the principle that self-care should be an effortless experience. We combine clean, botanical ingredients with advanced dermatological research to provide high-performance results for every skin type."
|
|
metrics={[
|
|
{ value: "100%", title: "Vegan Ingredients" },
|
|
{ value: "50+", title: "Premium Products" },
|
|
{ value: "10k+", title: "Happy Customers" }
|
|
]}
|
|
imageSrc="http://img.b2bpic.net/free-photo/elegant-minimal-interior-design_23-2151913246.jpg?_wi=2"
|
|
mediaAnimation="blur-reveal"
|
|
metricsAnimation="slide-up"
|
|
/>
|
|
</div>
|
|
|
|
<div id="features" data-section="features">
|
|
<FeatureHoverPattern
|
|
animationType="slide-up"
|
|
textboxLayout="split"
|
|
useInvertedBackground={true}
|
|
features={[
|
|
{ icon: Sparkles, title: "Clean Ingredients", description: "Free from parabens, phthalates, and harsh synthetics." },
|
|
{ icon: Shield, title: "Dermatologist Tested", description: "Proven results backed by rigorous clinical trials." },
|
|
{ icon: Leaf, title: "Sustainable Beauty", description: "Eco-friendly packaging for a better, greener planet." }
|
|
]}
|
|
title="Our Promise"
|
|
description="Why choose Lumière? Because beauty standards should be as high as our commitment to your health."
|
|
/>
|
|
</div>
|
|
|
|
<div id="products" data-section="products">
|
|
<ProductCardFour
|
|
textboxLayout="split-description"
|
|
gridVariant="four-items-2x2-equal-grid"
|
|
useInvertedBackground={false}
|
|
animationType="slide-up"
|
|
products={[
|
|
{ id: "1", name: "Radiance Serum", price: "$85", variant: "Skincare", imageSrc: "http://img.b2bpic.net/free-photo/high-angle-plant-selfcare-products_23-2149249586.jpg" },
|
|
{ id: "2", name: "Velvet Lipstick", price: "$38", variant: "Makeup", imageSrc: "http://img.b2bpic.net/free-photo/makeup-set-comb-table_53876-41700.jpg" },
|
|
{ id: "3", name: "Midnight Blossom", price: "$120", variant: "Perfumes", imageSrc: "http://img.b2bpic.net/free-photo/perfume-bottle-table_1194-639870.jpg" },
|
|
{ id: "4", name: "Dewy Moisture", price: "$65", variant: "Skincare", imageSrc: "http://img.b2bpic.net/free-photo/front-view-natural-cream-concept_23-2148578669.jpg" },
|
|
{ id: "5", name: "Luminous Body Oil", price: "$55", variant: "Skincare", imageSrc: "http://img.b2bpic.net/free-photo/top-view-tube-cream-with-lotionnd-watch-with-magnifier-cup-tea-table_140725-14091.jpg" },
|
|
{ id: "6", name: "Silky Foundation", price: "$45", variant: "Makeup", imageSrc: "http://img.b2bpic.net/free-photo/lay-out-basic-make-up-cosmetic-set_23-2148181445.jpg" }
|
|
]}
|
|
title="Our Collections"
|
|
description="Explore our curated ranges designed to elevate your daily ritual."
|
|
/>
|
|
</div>
|
|
|
|
<div id="testimonials" data-section="testimonials">
|
|
<TestimonialCardTen
|
|
textboxLayout="split"
|
|
useInvertedBackground={true}
|
|
testimonials={[
|
|
{ id: "1", title: "Obsessed!", quote: "I've never felt so confident in my own skin.", name: "Alice P.", role: "Creative", imageSrc: "http://img.b2bpic.net/free-photo/attractive-girl-portrait-white-shirt_158595-1466.jpg" },
|
|
{ id: "2", title: "Game Changer", quote: "The texture and fragrance of the serums are divine.", name: "Beatrice V.", role: "Model", imageSrc: "http://img.b2bpic.net/free-photo/medium-shot-woman-covering-her-face_23-2149551244.jpg" },
|
|
{ id: "3", title: "Sustainable Luxury", quote: "Finally a brand that understands eco-friendly luxury.", name: "Claire B.", role: "Designer", imageSrc: "http://img.b2bpic.net/free-photo/portrait-young-tanned-short-haired-woman-stylish-green-yellow-dress-looking-down-holding-red-flower_197531-24098.jpg" },
|
|
{ id: "4", title: "Worth the investment", quote: "My daily routine feels like a spa treatment now.", name: "Diane R.", role: "Manager", imageSrc: "http://img.b2bpic.net/free-photo/woman-yellow-summer-dress-with-short-hairstyle-boho-vintage-style-interior-room-posing_285396-10246.jpg" },
|
|
{ id: "5", title: "Absolutely stunning", quote: "Beautiful packaging and effective results, every time.", name: "Emma W.", role: "Architect", imageSrc: "http://img.b2bpic.net/free-photo/front-view-beautiful-modern-woman-concept_23-2148342410.jpg" }
|
|
]}
|
|
title="Our Community"
|
|
description="Join thousands of women who have transformed their routine."
|
|
/>
|
|
</div>
|
|
|
|
<div id="faq" data-section="faq">
|
|
<FaqBase
|
|
textboxLayout="split-description"
|
|
useInvertedBackground={false}
|
|
faqs={[
|
|
{ id: "q1", title: "Are your products cruelty-free?", content: "Yes, all our formulas are 100% cruelty-free and vegan." },
|
|
{ id: "q2", title: "Do you ship internationally?", content: "We ship to over 50 countries worldwide." },
|
|
{ id: "q3", title: "How can I return a product?", content: "We offer a 30-day money-back guarantee for unused products." }
|
|
]}
|
|
title="Common Questions"
|
|
description="Everything you need to know about our products."
|
|
faqsAnimation="slide-up"
|
|
/>
|
|
</div>
|
|
|
|
<div id="contact" data-section="contact">
|
|
<ContactCenter
|
|
useInvertedBackground={true}
|
|
background={{ variant: "gradient-bars" }}
|
|
title="Join the Glow Club"
|
|
description="Subscribe for early access to new collections and expert tips."
|
|
tag="Glow Club"
|
|
/>
|
|
</div>
|
|
|
|
<div id="footer" data-section="footer">
|
|
<FooterCard
|
|
logoText="Lumière Beauty"
|
|
copyrightText="© 2025 Lumière Beauty. All Rights Reserved."
|
|
/>
|
|
</div>
|
|
</ReactLenis>
|
|
</ThemeProvider>
|
|
);
|
|
}
|