217 lines
10 KiB
TypeScript
217 lines
10 KiB
TypeScript
"use client"
|
|
|
|
import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
|
|
import NavbarLayoutFloatingOverlay from '@/components/navbar/NavbarLayoutFloatingOverlay/NavbarLayoutFloatingOverlay';
|
|
import HeroCentered from '@/components/sections/hero/HeroCentered';
|
|
import TextAbout from '@/components/sections/about/TextAbout';
|
|
import ProductCardThree from '@/components/sections/product/ProductCardThree';
|
|
import FeatureCardSeven from '@/components/sections/feature/FeatureCardSeven';
|
|
import TestimonialCardFifteen from '@/components/sections/testimonial/TestimonialCardFifteen';
|
|
import FaqDouble from '@/components/sections/faq/FaqDouble';
|
|
import FooterCard from '@/components/sections/footer/FooterCard';
|
|
import { Award, Facebook, HelpCircle, Instagram, Sparkles, Star, Twitter } from 'lucide-react';
|
|
|
|
export default function LandingPage() {
|
|
return (
|
|
<ThemeProvider
|
|
defaultButtonVariant="icon-arrow"
|
|
defaultTextAnimation="background-highlight"
|
|
borderRadius="soft"
|
|
contentWidth="mediumSmall"
|
|
sizing="medium"
|
|
background="floatingGradient"
|
|
cardStyle="outline"
|
|
primaryButtonStyle="primary-glow"
|
|
secondaryButtonStyle="solid"
|
|
headingFontWeight="medium"
|
|
>
|
|
<div id="nav" data-section="nav">
|
|
<NavbarLayoutFloatingOverlay
|
|
brandName="Lumière Skincare"
|
|
navItems={[
|
|
{ name: "Products", id: "products" },
|
|
{ name: "Benefits", id: "features" },
|
|
{ name: "Testimonials", id: "testimonials" },
|
|
{ name: "FAQ", id: "faq" }
|
|
]}
|
|
button={{
|
|
text: "Shop Now", href: "#products"
|
|
}}
|
|
/>
|
|
</div>
|
|
|
|
<div id="hero" data-section="hero">
|
|
<HeroCentered
|
|
title="Transform Your Skin Naturally"
|
|
description="Discover the power of luxurious, science-backed skincare that nourishes and revitalizes. Our premium collection combines nature's finest ingredients with cutting-edge formulations for radiant, healthy skin."
|
|
background={{ variant: "plain" }}
|
|
avatars={[
|
|
{
|
|
src: "http://img.b2bpic.net/free-photo/smiling-young-woman-typing-her-laptop_231208-13559.jpg", alt: "Customer 1"
|
|
},
|
|
{
|
|
src: "http://img.b2bpic.net/free-photo/woman-holding-camera-photo-looking-away_23-2148565518.jpg", alt: "Customer 2"
|
|
},
|
|
{
|
|
src: "http://img.b2bpic.net/free-photo/beautiful-young-woman-looking-camera-home_1301-4299.jpg", alt: "Customer 3"
|
|
}
|
|
]}
|
|
avatarText="Join 10,000+ satisfied customers"
|
|
buttons={[
|
|
{ text: "Explore Collection", href: "#products" },
|
|
{ text: "Learn More", href: "#features" }
|
|
]}
|
|
buttonAnimation="slide-up"
|
|
/>
|
|
</div>
|
|
|
|
<div id="about" data-section="about">
|
|
<TextAbout
|
|
tag="Our Story"
|
|
tagIcon={Sparkles}
|
|
tagAnimation="slide-up"
|
|
title="Skincare Crafted for Your Wellness"
|
|
useInvertedBackground={true}
|
|
buttons={[
|
|
{ text: "Discover Our Mission", href: "#" }
|
|
]}
|
|
buttonAnimation="slide-up"
|
|
/>
|
|
</div>
|
|
|
|
<div id="products" data-section="products">
|
|
<ProductCardThree
|
|
title="Featured Skincare Collection"
|
|
description="Handpicked formulations designed to address your unique skin concerns with premium, natural ingredients."
|
|
tag="Best Sellers"
|
|
tagIcon={Star}
|
|
tagAnimation="slide-up"
|
|
textboxLayout="default"
|
|
useInvertedBackground={false}
|
|
animationType="slide-up"
|
|
gridVariant="three-columns-all-equal-width"
|
|
products={[
|
|
{
|
|
id: "serum-1", name: "Radiance Serum", price: "$68.00", imageSrc: "http://img.b2bpic.net/free-photo/woman-using-korean-skincare-home_52683-109610.jpg", imageAlt: "Radiance Serum", isFavorited: false,
|
|
initialQuantity: 1
|
|
},
|
|
{
|
|
id: "cream-1", name: "Luxe Night Cream", price: "$85.00", imageSrc: "http://img.b2bpic.net/free-photo/skin-regeneration-product-still-life_23-2151232284.jpg?_wi=1", imageAlt: "Luxe Night Cream", isFavorited: false,
|
|
initialQuantity: 1
|
|
},
|
|
{
|
|
id: "mask-1", name: "Renewal Face Mask", price: "$52.00", imageSrc: "http://img.b2bpic.net/free-photo/cosmetic-jar_187299-45985.jpg?_wi=1", imageAlt: "Renewal Face Mask", isFavorited: false,
|
|
initialQuantity: 1
|
|
}
|
|
]}
|
|
/>
|
|
</div>
|
|
|
|
<div id="features" data-section="features">
|
|
<FeatureCardSeven
|
|
title="Why Choose Lumière?"
|
|
description="Experience the difference with ingredients that deliver visible results and a commitment to your skin's health."
|
|
tag="Premium Benefits"
|
|
tagIcon={Award}
|
|
tagAnimation="slide-up"
|
|
textboxLayout="default"
|
|
useInvertedBackground={true}
|
|
animationType="slide-up"
|
|
features={[
|
|
{
|
|
id: 1,
|
|
title: "100% Natural Ingredients", description: "Carefully sourced botanical extracts and essential oils without harmful chemicals or additives.", imageSrc: "http://img.b2bpic.net/free-photo/beautiful-eucalyptus-with-beauty-products_23-2149440672.jpg", imageAlt: "Natural ingredients"
|
|
},
|
|
{
|
|
id: 2,
|
|
title: "Dermatologist Tested", description: "Formulated with dermatologists to ensure safety and effectiveness for all skin types.", imageSrc: "http://img.b2bpic.net/free-photo/skin-regeneration-product-still-life_23-2151232284.jpg?_wi=2", imageAlt: "Dermatologist approved"
|
|
},
|
|
{
|
|
id: 3,
|
|
title: "Visible Results in 28 Days", description: "See noticeable improvements in skin texture, clarity, and radiance within four weeks.", imageSrc: "http://img.b2bpic.net/free-photo/cosmetic-jar_187299-45985.jpg?_wi=2", imageAlt: "Results"
|
|
}
|
|
]}
|
|
/>
|
|
</div>
|
|
|
|
<div id="testimonials" data-section="testimonials">
|
|
<TestimonialCardFifteen
|
|
testimonial="Lumière transformed my skin completely. Within weeks, my complexion was clearer and more radiant than ever before. I absolutely love this brand!"
|
|
rating={5}
|
|
author="Sarah Johnson"
|
|
avatars={[
|
|
{
|
|
src: "http://img.b2bpic.net/free-photo/smiling-young-woman-typing-her-laptop_231208-13559.jpg", alt: "Sarah Johnson"
|
|
},
|
|
{
|
|
src: "http://img.b2bpic.net/free-photo/woman-holding-camera-photo-looking-away_23-2148565518.jpg", alt: "Emily Chen"
|
|
},
|
|
{
|
|
src: "http://img.b2bpic.net/free-photo/beautiful-young-woman-looking-camera-home_1301-4299.jpg", alt: "Jessica Lee"
|
|
},
|
|
{
|
|
src: "http://img.b2bpic.net/free-photo/medium-shot-woman-work-portrait_23-2149304144.jpg", alt: "Michelle Brown"
|
|
},
|
|
{
|
|
src: "http://img.b2bpic.net/free-photo/summer-portrait-laughing-happy-woman-outdoor-enjoying-warm-sunshine-wearing-blue-t-shirt-having-dark-hair-looking-away-with-toothy-smile-expressing-happiness_176532-14837.jpg", alt: "Amanda Davis"
|
|
},
|
|
{
|
|
src: "http://img.b2bpic.net/free-photo/portrait-young-business-woman-standing-outside-office-buildings-business-success-concept_58466-12274.jpg", alt: "Victoria Smith"
|
|
}
|
|
]}
|
|
ratingAnimation="slide-up"
|
|
avatarsAnimation="slide-up"
|
|
useInvertedBackground={false}
|
|
/>
|
|
</div>
|
|
|
|
<div id="faq" data-section="faq">
|
|
<FaqDouble
|
|
title="Common Questions"
|
|
description="Find answers to frequently asked questions about our products, ingredients, and skincare routines."
|
|
tag="Support"
|
|
tagIcon={HelpCircle}
|
|
tagAnimation="slide-up"
|
|
textboxLayout="default"
|
|
useInvertedBackground={true}
|
|
faqsAnimation="slide-up"
|
|
faqs={[
|
|
{
|
|
id: "1", title: "Are your products suitable for sensitive skin?", content: "Yes, all Lumière products are formulated to be gentle on sensitive skin. We use hypoallergenic ingredients and perform dermatological testing. However, we recommend patch testing first if you have known allergies."
|
|
},
|
|
{
|
|
id: "2", title: "How long does shipping take?", content: "We offer standard shipping (5-7 business days) and expedited shipping (2-3 business days). Orders are carefully packaged to ensure products arrive in perfect condition."
|
|
},
|
|
{
|
|
id: "3", title: "What is your return policy?", content: "We offer a 60-day money-back guarantee. If you're not completely satisfied with your purchase, simply return it for a full refund, no questions asked."
|
|
},
|
|
{
|
|
id: "4", title: "Are your products cruelty-free?", content: "Absolutely. Lumière products are 100% cruelty-free and never tested on animals. We're committed to ethical, sustainable beauty."
|
|
}
|
|
]}
|
|
/>
|
|
</div>
|
|
|
|
<div id="footer" data-section="footer">
|
|
<FooterCard
|
|
logoText="Lumière Skincare"
|
|
copyrightText="© 2025 Lumière Skincare | Crafted for Wellness"
|
|
socialLinks={[
|
|
{
|
|
icon: Instagram,
|
|
href: "https://instagram.com", ariaLabel: "Instagram"
|
|
},
|
|
{
|
|
icon: Facebook,
|
|
href: "https://facebook.com", ariaLabel: "Facebook"
|
|
},
|
|
{
|
|
icon: Twitter,
|
|
href: "https://twitter.com", ariaLabel: "Twitter"
|
|
}
|
|
]}
|
|
/>
|
|
</div>
|
|
</ThemeProvider>
|
|
);
|
|
} |