239 lines
13 KiB
TypeScript
239 lines
13 KiB
TypeScript
"use client";
|
|
|
|
import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
|
|
import NavbarStyleCentered from "@/components/navbar/NavbarStyleCentered/NavbarStyleCentered";
|
|
import HeroLogoBillboard from "@/components/sections/hero/HeroLogoBillboard";
|
|
import InlineImageSplitTextAbout from "@/components/sections/about/InlineImageSplitTextAbout";
|
|
import ProductCardOne from "@/components/sections/product/ProductCardOne";
|
|
import FeatureBento from "@/components/sections/feature/FeatureBento";
|
|
import TestimonialCardFifteen from "@/components/sections/testimonial/TestimonialCardFifteen";
|
|
import FaqSplitMedia from "@/components/sections/faq/FaqSplitMedia";
|
|
import ContactCenter from "@/components/sections/contact/ContactCenter";
|
|
import FooterBaseCard from "@/components/sections/footer/FooterBaseCard";
|
|
import { Award, CheckCircle, Heart, HelpCircle, Leaf, Mail, Shield, Sparkles, Star, Trophy, Zap } from "lucide-react";
|
|
|
|
export default function LandingPage() {
|
|
return (
|
|
<ThemeProvider
|
|
defaultButtonVariant="hover-bubble"
|
|
defaultTextAnimation="reveal-blur"
|
|
borderRadius="rounded"
|
|
contentWidth="small"
|
|
sizing="largeSmallSizeLargeTitles"
|
|
background="circleGradient"
|
|
cardStyle="gradient-bordered"
|
|
primaryButtonStyle="double-inset"
|
|
secondaryButtonStyle="solid"
|
|
headingFontWeight="extrabold"
|
|
>
|
|
<div id="nav" data-section="nav">
|
|
<NavbarStyleCentered
|
|
brandName="Lumière Skincare"
|
|
navItems={[
|
|
{ name: "Home", id: "hero" },
|
|
{ name: "About", id: "about" },
|
|
{ name: "Products", id: "products" },
|
|
{ name: "Testimonials", id: "testimonials" },
|
|
{ name: "FAQ", id: "faq" },
|
|
]}
|
|
button={{ text: "Shop Now", href: "products" }}
|
|
/>
|
|
</div>
|
|
|
|
<div id="hero" data-section="hero">
|
|
<HeroLogoBillboard
|
|
logoText="Lumière"
|
|
description="Discover the power of nature's finest ingredients. Our expertly crafted skincare collection combines ancient botanical wisdom with modern science for radiant, healthy skin."
|
|
buttons={[
|
|
{ text: "Explore Collection", href: "products" },
|
|
{ text: "Learn More", href: "about" },
|
|
]}
|
|
background={{ variant: "sparkles-gradient" }}
|
|
imageSrc="http://img.b2bpic.net/free-photo/high-angle-plant-selfcare-products_23-2149249586.jpg"
|
|
imageAlt="Premium skincare products display"
|
|
frameStyle="card"
|
|
mediaAnimation="slide-up"
|
|
buttonAnimation="slide-up"
|
|
/>
|
|
</div>
|
|
|
|
<div id="about" data-section="about">
|
|
<InlineImageSplitTextAbout
|
|
heading={[
|
|
{ type: "text", content: "Crafted with" },
|
|
{ type: "image", src: "http://img.b2bpic.net/free-photo/dried-pink-rose-with-hand-shadow-beige-background_53876-96736.jpg", alt: "Rose ingredient" },
|
|
{ type: "text", content: "nature, perfected by" },
|
|
{ type: "image", src: "http://img.b2bpic.net/free-photo/laboratory-glassware-with-liquids-different-color_1150-19441.jpg", alt: "Science icon" },
|
|
{ type: "text", content: "science" },
|
|
]}
|
|
useInvertedBackground={false}
|
|
buttons={[
|
|
{ text: "Our Story", href: "#" },
|
|
{ text: "Sustainability", href: "#" },
|
|
]}
|
|
/>
|
|
</div>
|
|
|
|
<div id="products" data-section="products">
|
|
<ProductCardOne
|
|
title="Featured Products"
|
|
description="Explore our signature collection of transformative skincare essentials designed for every skin type."
|
|
tag="Best Sellers"
|
|
tagIcon={Sparkles}
|
|
products={[
|
|
{
|
|
id: "1", name: "Rose Renewal Serum", price: "$78", imageSrc: "http://img.b2bpic.net/free-photo/close-up-elegant-beauty-selfcare-treatment_23-2149238265.jpg", imageAlt: "Rose Renewal Serum bottle"},
|
|
{
|
|
id: "2", name: "Hyaluronic Hydration Mask", price: "$65", imageSrc: "http://img.b2bpic.net/free-photo/pretty-blond-woman-with-bath-towel-hair-showing-cream_176420-16487.jpg", imageAlt: "Hyaluronic Hydration Mask jar"},
|
|
{
|
|
id: "3", name: "Vitamin C Brightening Cream", price: "$85", imageSrc: "http://img.b2bpic.net/free-photo/cosmetics-yellow-background_23-2148549110.jpg", imageAlt: "Vitamin C Brightening Cream container"},
|
|
{
|
|
id: "4", name: "Nightly Renewal Oil", price: "$72", imageSrc: "http://img.b2bpic.net/free-photo/cosmetic-serum-bottle-hand-orange-background_185193-162127.jpg", imageAlt: "Nightly Renewal Oil bottle"},
|
|
]}
|
|
gridVariant="two-columns-alternating-heights"
|
|
animationType="slide-up"
|
|
textboxLayout="default"
|
|
useInvertedBackground={false}
|
|
buttons={[{ text: "View All Products", href: "#" }]}
|
|
/>
|
|
</div>
|
|
|
|
<div id="features" data-section="features">
|
|
<FeatureBento
|
|
title="Why Choose Lumière"
|
|
description="Our commitment to excellence sets us apart. Discover the features that make our skincare collection truly exceptional."
|
|
tag="Features"
|
|
tagIcon={Award}
|
|
features={[
|
|
{
|
|
title: "Pure Ingredients", description: "Ethically sourced botanical extracts without harmful chemicals or synthetics", bentoComponent: "icon-info-cards", items: [
|
|
{ icon: Leaf, label: "Organic", value: "100%" },
|
|
{ icon: Shield, label: "Safe", value: "Dermatologist tested" },
|
|
{ icon: Zap, label: "Potent", value: "Concentrated formula" },
|
|
],
|
|
},
|
|
{
|
|
title: "Visible Results", description: "Transform your skin in just 4 weeks with our proven skincare regimen", bentoComponent: "animated-bar-chart"},
|
|
{
|
|
title: "Global Recognition", description: "Trusted by skincare experts and beauty professionals worldwide", bentoComponent: "orbiting-icons", centerIcon: Heart,
|
|
items: [
|
|
{ icon: Star, ring: 1 },
|
|
{ icon: Award, ring: 1 },
|
|
{ icon: Trophy, ring: 2 },
|
|
{ icon: CheckCircle, ring: 2 },
|
|
],
|
|
},
|
|
]}
|
|
animationType="slide-up"
|
|
textboxLayout="default"
|
|
useInvertedBackground={false}
|
|
/>
|
|
</div>
|
|
|
|
<div id="testimonials" data-section="testimonials">
|
|
<TestimonialCardFifteen
|
|
testimonial="Lumière transformed my skincare routine completely. After just three weeks, my skin feels incredibly hydrated and looks noticeably brighter. I've never found products this effective that actually feel luxurious to use. Highly recommend!"
|
|
rating={5}
|
|
author="Sarah Mitchell, Beauty Influencer"
|
|
avatars={[
|
|
{ src: "http://img.b2bpic.net/free-photo/positive-confident-businesswoman-wearing-formal-suit-standing-with-arms-folded_74855-10328.jpg", alt: "Sarah Mitchell" },
|
|
{ src: "http://img.b2bpic.net/free-photo/positive-confident-businesswoman-wearing-formal-suit-standing-with-arms-folded_74855-10328.jpg", alt: "Customer" },
|
|
{ src: "http://img.b2bpic.net/free-photo/positive-confident-businesswoman-wearing-formal-suit-standing-with-arms-folded_74855-10328.jpg", alt: "Customer" },
|
|
{ src: "http://img.b2bpic.net/free-photo/positive-confident-businesswoman-wearing-formal-suit-standing-with-arms-folded_74855-10328.jpg", alt: "Customer" },
|
|
{ src: "http://img.b2bpic.net/free-photo/positive-confident-businesswoman-wearing-formal-suit-standing-with-arms-folded_74855-10328.jpg", alt: "Customer" },
|
|
{ src: "http://img.b2bpic.net/free-photo/positive-confident-businesswoman-wearing-formal-suit-standing-with-arms-folded_74855-10328.jpg", alt: "Customer" },
|
|
]}
|
|
ratingAnimation="slide-up"
|
|
avatarsAnimation="slide-up"
|
|
useInvertedBackground={false}
|
|
/>
|
|
</div>
|
|
|
|
<div id="faq" data-section="faq">
|
|
<FaqSplitMedia
|
|
title="Common Questions"
|
|
description="Find answers to everything you need to know about our products and skincare philosophy."
|
|
tag="Support"
|
|
tagIcon={HelpCircle}
|
|
faqs={[
|
|
{
|
|
id: "1", title: "Are your products suitable for all skin types?", content: "Yes! Our collection is formulated to work beautifully on all skin types including sensitive skin. Each product is dermatologist-tested and hypoallergenic. If you have specific concerns, we recommend starting with our Starter Kit to find your perfect combination."},
|
|
{
|
|
id: "2", title: "How long before I see results?", content: "Most customers notice visible improvements within 2-4 weeks of consistent use. For best results, use our recommended skincare routine morning and night. Individual results may vary based on skin condition and environmental factors."},
|
|
{
|
|
id: "3", title: "What is your return policy?", content: "We offer a 60-day money-back guarantee on all products. If you're not completely satisfied, simply return your purchase for a full refund—no questions asked. We're confident you'll love your Lumière experience!"},
|
|
{
|
|
id: "4", title: "Are your products cruelty-free and vegan?", content: "Yes! Lumière is proudly certified cruelty-free and 95% of our collection is vegan. We partner exclusively with suppliers who share our commitment to ethical and sustainable practices."},
|
|
{
|
|
id: "5", title: "Can I use these products if I'm pregnant?", content: "Most of our products are pregnancy-safe, but we recommend consulting with your healthcare provider. Our Rose Renewal Serum and Hydration Mask are specifically formulated for sensitive skin conditions including pregnancy."},
|
|
{
|
|
id: "6", title: "How should I store my products?", content: "Store all Lumière products in a cool, dry place away from direct sunlight. Our glass and metal packaging protects ingredients from degradation. Avoid storing in bathrooms with high humidity for optimal shelf life."}
|
|
]}
|
|
imageSrc="http://img.b2bpic.net/free-photo/young-woman-applies-cream-her-face-looks-mirror_169016-19492.jpg"
|
|
imageAlt="Skincare routine setup"
|
|
textboxLayout="default"
|
|
useInvertedBackground={false}
|
|
mediaPosition="right"
|
|
mediaAnimation="slide-up"
|
|
faqsAnimation="slide-up"
|
|
/>
|
|
</div>
|
|
|
|
<div id="contact" data-section="contact">
|
|
<ContactCenter
|
|
tag="Newsletter"
|
|
tagIcon={Mail}
|
|
title="Stay Radiant with Insider Tips"
|
|
description="Subscribe to our newsletter for exclusive product launches, skincare tips from our experts, and special members-only discounts."
|
|
background={{ variant: "sparkles-gradient" }}
|
|
useInvertedBackground={false}
|
|
inputPlaceholder="Enter your email"
|
|
buttonText="Subscribe"
|
|
termsText="We respect your inbox. Unsubscribe anytime. See our Privacy Policy for details."
|
|
/>
|
|
</div>
|
|
|
|
<div id="footer" data-section="footer">
|
|
<FooterBaseCard
|
|
logoText="Lumière"
|
|
columns={[
|
|
{
|
|
title: "Shop", items: [
|
|
{ label: "All Products", href: "#products" },
|
|
{ label: "Best Sellers", href: "#" },
|
|
{ label: "New Arrivals", href: "#" },
|
|
{ label: "Gift Sets", href: "#" },
|
|
],
|
|
},
|
|
{
|
|
title: "Company", items: [
|
|
{ label: "About Us", href: "#about" },
|
|
{ label: "Our Story", href: "#" },
|
|
{ label: "Sustainability", href: "#" },
|
|
{ label: "Careers", href: "#" },
|
|
],
|
|
},
|
|
{
|
|
title: "Support", items: [
|
|
{ label: "Contact Us", href: "#contact" },
|
|
{ label: "FAQ", href: "#faq" },
|
|
{ label: "Shipping Info", href: "#" },
|
|
{ label: "Track Order", href: "#" },
|
|
],
|
|
},
|
|
{
|
|
title: "Legal", items: [
|
|
{ label: "Privacy Policy", href: "#" },
|
|
{ label: "Terms of Service", href: "#" },
|
|
{ label: "Return Policy", href: "#" },
|
|
{ label: "Accessibility", href: "#" },
|
|
],
|
|
},
|
|
]}
|
|
copyrightText="© 2025 Lumière Skincare. All rights reserved."
|
|
/>
|
|
</div>
|
|
</ThemeProvider>
|
|
);
|
|
}
|