437 lines
15 KiB
TypeScript
437 lines
15 KiB
TypeScript
"use client";
|
|
|
|
import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
|
|
import ReactLenis from "lenis/react";
|
|
import ContactText from '@/components/sections/contact/ContactText';
|
|
import FaqBase from '@/components/sections/faq/FaqBase';
|
|
import FeatureBento from '@/components/sections/feature/FeatureBento';
|
|
import FooterBaseCard from '@/components/sections/footer/FooterBaseCard';
|
|
import HeroLogoBillboard from '@/components/sections/hero/HeroLogoBillboard';
|
|
import MetricSplitMediaAbout from '@/components/sections/about/MetricSplitMediaAbout';
|
|
import NavbarStyleCentered from '@/components/navbar/NavbarStyleCentered/NavbarStyleCentered';
|
|
import ProductCardThree from '@/components/sections/product/ProductCardThree';
|
|
import SocialProofOne from '@/components/sections/socialProof/SocialProofOne';
|
|
import TestimonialCardTwelve from '@/components/sections/testimonial/TestimonialCardTwelve';
|
|
import { Globe, Heart, Leaf, Sparkles } from "lucide-react";
|
|
|
|
export default function LandingPage() {
|
|
return (
|
|
<ThemeProvider
|
|
defaultButtonVariant="hover-magnetic"
|
|
defaultTextAnimation="entrance-slide"
|
|
borderRadius="pill"
|
|
contentWidth="mediumSmall"
|
|
sizing="largeSizeMediumTitles"
|
|
background="noise"
|
|
cardStyle="gradient-radial"
|
|
primaryButtonStyle="gradient"
|
|
secondaryButtonStyle="solid"
|
|
headingFontWeight="medium"
|
|
>
|
|
<ReactLenis root>
|
|
<div id="nav" data-section="nav">
|
|
<NavbarStyleCentered
|
|
navItems={[
|
|
{
|
|
name: "Home",
|
|
id: "#hero",
|
|
},
|
|
{
|
|
name: "About",
|
|
id: "#about",
|
|
},
|
|
{
|
|
name: "Collection",
|
|
id: "#products",
|
|
},
|
|
{
|
|
name: "Ritual",
|
|
id: "#features",
|
|
},
|
|
{
|
|
name: "Reviews",
|
|
id: "#testimonials",
|
|
},
|
|
{
|
|
name: "FAQ",
|
|
id: "#faq",
|
|
},
|
|
{
|
|
name: "Contact",
|
|
id: "#contact",
|
|
},
|
|
]}
|
|
button={{
|
|
text: "Shop Now",
|
|
href: "#products",
|
|
}}
|
|
brandName="Lumière Atelier"
|
|
/>
|
|
</div>
|
|
|
|
<div id="hero" data-section="hero">
|
|
<HeroLogoBillboard
|
|
background={{
|
|
variant: "radial-gradient",
|
|
}}
|
|
logoText="Lumière Atelier"
|
|
description="Handpoured soy candles infused with French fragrances, crafted for those who demand more. Slow-burning ritual meets minimalist design."
|
|
buttons={[
|
|
{
|
|
text: "Discover Premium Collection",
|
|
href: "#products",
|
|
},
|
|
]}
|
|
imageSrc="http://img.b2bpic.net/free-photo/pretty-mother-s-day-arrangement_23-2148888559.jpg?_wi=1"
|
|
imageAlt="Luxurious handcrafted candle with elegant packaging"
|
|
mediaAnimation="opacity"
|
|
frameStyle="card"
|
|
/>
|
|
</div>
|
|
|
|
<div id="about" data-section="about">
|
|
<MetricSplitMediaAbout
|
|
useInvertedBackground={true}
|
|
title="Crafting Moments of Pure Ambiance"
|
|
description="At Lumière Atelier, we believe in the art of living beautifully. Each candle is a testament to meticulous craftsmanship, blending sustainably sourced soy wax with exquisite French fragrances. Experience a symphony for your senses, designed to elevate your everyday."
|
|
metrics={[
|
|
{
|
|
value: "5+",
|
|
title: "Years of Craft",
|
|
},
|
|
{
|
|
value: "100%",
|
|
title: "Natural Soy",
|
|
},
|
|
{
|
|
value: "50+ hrs",
|
|
title: "Burn Time",
|
|
},
|
|
]}
|
|
imageSrc="http://img.b2bpic.net/free-photo/close-up-man-making-coffee-office_23-2148352516.jpg?_wi=1"
|
|
imageAlt="Close-up of hands pouring melted wax into a candle jar"
|
|
mediaAnimation="slide-up"
|
|
metricsAnimation="slide-up"
|
|
/>
|
|
</div>
|
|
|
|
<div id="features" data-section="features">
|
|
<FeatureBento
|
|
animationType="slide-up"
|
|
textboxLayout="default"
|
|
useInvertedBackground={false}
|
|
features={[
|
|
{
|
|
title: "Artisanal Blends",
|
|
description: "Each fragrance is a unique composition, meticulously developed in Grasse, France, ensuring a complex and long-lasting aroma.",
|
|
bentoComponent: "reveal-icon",
|
|
icon: Sparkles,
|
|
imageSrc: "http://img.b2bpic.net/free-photo/top-view-tray-with-coffee-with-whipped-cream-candle_23-2148720052.jpg",
|
|
imageAlt: "burning candle slow flame ambiance",
|
|
},
|
|
{
|
|
title: "Eco-Conscious Craft",
|
|
description: "Handpoured with 100% natural soy wax from sustainable sources, our candles offer a clean burn and are free from harmful toxins.",
|
|
bentoComponent: "icon-info-cards",
|
|
items: [
|
|
{
|
|
icon: Leaf,
|
|
label: "Soy Wax",
|
|
value: "Natural",
|
|
},
|
|
{
|
|
icon: Globe,
|
|
label: "Sustainable",
|
|
value: "Sourced",
|
|
},
|
|
{
|
|
icon: Heart,
|
|
label: "Clean",
|
|
value: "Burn",
|
|
},
|
|
],
|
|
imageSrc: "http://img.b2bpic.net/free-photo/pretty-mother-s-day-arrangement_23-2148888559.jpg?_wi=2",
|
|
imageAlt: "burning candle slow flame ambiance",
|
|
},
|
|
{
|
|
title: "Enduring Elegance",
|
|
description: "Designed to complement any sophisticated interior, our minimalist vessels are crafted for both beauty and extended burn time.",
|
|
bentoComponent: "media-stack",
|
|
items: [
|
|
{
|
|
imageSrc: "http://img.b2bpic.net/free-photo/close-up-man-making-coffee-office_23-2148352516.jpg?_wi=2",
|
|
imageAlt: "Burning candle in an elegant living room",
|
|
},
|
|
{
|
|
imageSrc: "http://img.b2bpic.net/free-photo/hands-assembling-advent-wreath_23-2150820778.jpg",
|
|
imageAlt: "Artisan working on a candle",
|
|
},
|
|
{
|
|
imageSrc: "http://img.b2bpic.net/free-photo/gua-sha-green-leaf-arrangement_23-2149357134.jpg",
|
|
imageAlt: "Sustainable candle ingredients",
|
|
},
|
|
],
|
|
imageSrc: "http://img.b2bpic.net/free-photo/breakfast-brunch-bed-with-pastries-tea-lilac-bouquet-vase-romance-holidays-mother-s-women-s-day_169016-15566.jpg?_wi=1",
|
|
imageAlt: "burning candle slow flame ambiance",
|
|
},
|
|
]}
|
|
title="The Essence of Luxury, Redefined"
|
|
description="Our collection embodies a philosophy where sustainability meets unparalleled quality. Discover the meticulous details that make each Lumière Atelier candle a masterpiece of sensory design."
|
|
/>
|
|
</div>
|
|
|
|
<div id="products" data-section="products">
|
|
<ProductCardThree
|
|
animationType="slide-up"
|
|
textboxLayout="default"
|
|
gridVariant="three-columns-all-equal-width"
|
|
useInvertedBackground={true}
|
|
products={[
|
|
{
|
|
id: "classic-elegance",
|
|
name: "Classic Elegance",
|
|
price: "€189",
|
|
imageSrc: "http://img.b2bpic.net/free-photo/breakfast-brunch-bed-with-pastries-tea-lilac-bouquet-vase-romance-holidays-mother-s-women-s-day_169016-15566.jpg?_wi=2",
|
|
imageAlt: "Classic Elegance Candle",
|
|
onProductClick: "() => {}",
|
|
onFavorite: "() => {}",
|
|
},
|
|
{
|
|
id: "midnight-bloom",
|
|
name: "Midnight Bloom",
|
|
price: "€199",
|
|
imageSrc: "http://img.b2bpic.net/free-photo/burning-candle-with-red-roses-cozy-home-scene-romantic-calm_169016-71686.jpg",
|
|
imageAlt: "Midnight Bloom Candle",
|
|
onProductClick: "() => {}",
|
|
onFavorite: "() => {}",
|
|
},
|
|
{
|
|
id: "forest-whisper",
|
|
name: "Forest Whisper",
|
|
price: "€189",
|
|
imageSrc: "http://img.b2bpic.net/free-photo/diwali-festival-lights-tradition_23-2148688424.jpg",
|
|
imageAlt: "Forest Whisper Candle",
|
|
onProductClick: "() => {}",
|
|
onFavorite: "() => {}",
|
|
},
|
|
{
|
|
id: "sunlit-citrus",
|
|
name: "Sunlit Citrus",
|
|
price: "€199",
|
|
imageSrc: "http://img.b2bpic.net/free-photo/cozy-composition-with-ceramic-cup-candles-knitted-element-blurred-background_169016-12779.jpg",
|
|
imageAlt: "Sunlit Citrus Candle",
|
|
onProductClick: "() => {}",
|
|
onFavorite: "() => {}",
|
|
},
|
|
{
|
|
id: "velvet-oud",
|
|
name: "Velvet Oud",
|
|
price: "€189",
|
|
imageSrc: "http://img.b2bpic.net/free-photo/composition-with-burning-aroma-candles-rose-petals_169016-24021.jpg",
|
|
imageAlt: "Velvet Oud Candle",
|
|
onProductClick: "() => {}",
|
|
onFavorite: "() => {}",
|
|
},
|
|
{
|
|
id: "oceanic-mist",
|
|
name: "Oceanic Mist",
|
|
price: "€199",
|
|
imageSrc: "http://img.b2bpic.net/free-photo/christmas-still-life-with-candles-knitted-element-blurred-background_169016-46565.jpg",
|
|
imageAlt: "Oceanic Mist Candle",
|
|
onProductClick: "() => {}",
|
|
onFavorite: "() => {}",
|
|
},
|
|
]}
|
|
title="Our Signature Collection"
|
|
description="Immerse yourself in our exclusive range of handcrafted soy candles. Each scent, a journey; each flame, a story. Designed for the connoisseur of fine living."
|
|
/>
|
|
</div>
|
|
|
|
<div id="testimonials" data-section="testimonials">
|
|
<TestimonialCardTwelve
|
|
useInvertedBackground={false}
|
|
testimonials={[
|
|
{
|
|
id: "1",
|
|
name: "Isabelle Dubois",
|
|
imageSrc: "http://img.b2bpic.net/free-photo/portrait-beauty-businesswoman-leaning-against-brick-wall_613910-773.jpg",
|
|
imageAlt: "Isabelle Dubois portrait",
|
|
},
|
|
{
|
|
id: "2",
|
|
name: "Marc Beaumont",
|
|
imageSrc: "http://img.b2bpic.net/free-photo/african-american-student_1303-5164.jpg",
|
|
imageAlt: "Marc Beaumont portrait",
|
|
},
|
|
{
|
|
id: "3",
|
|
name: "Sophie Moreau",
|
|
imageSrc: "http://img.b2bpic.net/free-photo/smiling-elegant-young-woman-with-sunglasses-smartphone-street_23-2148068454.jpg",
|
|
imageAlt: "Sophie Moreau portrait",
|
|
},
|
|
{
|
|
id: "4",
|
|
name: "Antoine Girard",
|
|
imageSrc: "http://img.b2bpic.net/free-photo/human-facial-expressions-reaction-isolated-view-funny-stylish-young-man-with-waxed-mustache-trimmed-beard-staring-camera-full-disbelief-having-distrustful-surprised-look_343059-4304.jpg",
|
|
imageAlt: "Antoine Girard portrait",
|
|
},
|
|
{
|
|
id: "5",
|
|
name: "Elodie Lefevre",
|
|
imageSrc: "http://img.b2bpic.net/free-photo/businesswoman-using-mobile-phone-coffee-shop_53876-42686.jpg",
|
|
imageAlt: "Elodie Lefevre portrait",
|
|
},
|
|
{
|
|
id: "6",
|
|
name: "Julien Petit",
|
|
imageSrc: "http://img.b2bpic.net/free-photo/portrait-redhead-hipster-male-dressed-casual-clothes-with-glasses-full-beard-standing-with-crossed-arms-studio-isolated-dark-background_613910-20093.jpg",
|
|
imageAlt: "Julien Petit portrait",
|
|
},
|
|
]}
|
|
cardTitle="Voices of Refined Taste"
|
|
cardTag="Loved by Connoisseurs"
|
|
cardTagIcon={Sparkles}
|
|
cardAnimation="blur-reveal"
|
|
/>
|
|
</div>
|
|
|
|
<div id="social-proof" data-section="social-proof">
|
|
<SocialProofOne
|
|
textboxLayout="default"
|
|
useInvertedBackground={true}
|
|
names={[
|
|
"Vogue Living",
|
|
"Architectural Digest",
|
|
"Harper's Bazaar",
|
|
"Elle Decor",
|
|
"Design Milk",
|
|
"The Lux Review",
|
|
"Home & Garden",
|
|
"Opulent Interiors",
|
|
]}
|
|
title="As Featured In"
|
|
description="Trusted by leading interior designers and featured in prestigious lifestyle publications. Our commitment to luxury and craftsmanship resonates with the most discerning."
|
|
/>
|
|
</div>
|
|
|
|
<div id="faq" data-section="faq">
|
|
<FaqBase
|
|
textboxLayout="default"
|
|
useInvertedBackground={false}
|
|
faqs={[
|
|
{
|
|
id: "faq-1",
|
|
title: "What makes Lumière Atelier candles unique?",
|
|
content: "Our candles are handcrafted using 100% natural soy wax, infused with exclusive French fragrances, and designed for an elegant, slow-burning ritual, prioritizing both luxury and sustainability.",
|
|
},
|
|
{
|
|
id: "faq-2",
|
|
title: "Are your candles eco-friendly?",
|
|
content: "Yes, we are committed to sustainability. We use ethically sourced soy wax, lead-free cotton wicks, and recyclable packaging. Our ingredients are non-toxic and cruelty-free.",
|
|
},
|
|
{
|
|
id: "faq-3",
|
|
title: "How long do Lumière Atelier candles burn?",
|
|
content: "Each of our 250g candles is designed to provide over 50 hours of exquisite fragrance, ensuring a lasting sensory experience.",
|
|
},
|
|
{
|
|
id: "faq-4",
|
|
title: "What is the recommended candle care?",
|
|
content: "For an optimal burn, trim the wick to 1/4 inch before each use. Allow the wax pool to reach the edge of the jar during the first burn to prevent tunneling, and do not burn for more than 4 hours at a time.",
|
|
},
|
|
{
|
|
id: "faq-5",
|
|
title: "Do you offer international shipping?",
|
|
content: "Yes, we offer worldwide shipping. Please refer to our shipping policy for detailed information on delivery times and costs to your region.",
|
|
},
|
|
]}
|
|
title="Your Questions, Answered"
|
|
description="Find clarity on our craft, ingredients, and the Lumière Atelier experience."
|
|
faqsAnimation="slide-up"
|
|
/>
|
|
</div>
|
|
|
|
<div id="contact" data-section="contact">
|
|
<ContactText
|
|
useInvertedBackground={true}
|
|
background={{
|
|
variant: "downward-rays-static",
|
|
}}
|
|
text="Ready to elevate your space? For bespoke inquiries or personal recommendations, our atelier awaits your presence. Connect with us."
|
|
buttons={[
|
|
{
|
|
text: "Get in Touch",
|
|
href: "#",
|
|
},
|
|
]}
|
|
/>
|
|
</div>
|
|
|
|
<div id="footer" data-section="footer">
|
|
<FooterBaseCard
|
|
logoText="Lumière Atelier"
|
|
columns={[
|
|
{
|
|
title: "Shop",
|
|
items: [
|
|
{
|
|
label: "Collection",
|
|
href: "#products",
|
|
},
|
|
{
|
|
label: "Seasonal Scents",
|
|
href: "#products",
|
|
},
|
|
{
|
|
label: "Gift Sets",
|
|
href: "#",
|
|
},
|
|
],
|
|
},
|
|
{
|
|
title: "About Us",
|
|
items: [
|
|
{
|
|
label: "Our Story",
|
|
href: "#about",
|
|
},
|
|
{
|
|
label: "Craftsmanship",
|
|
href: "#features",
|
|
},
|
|
{
|
|
label: "Sustainability",
|
|
href: "#features",
|
|
},
|
|
],
|
|
},
|
|
{
|
|
title: "Support",
|
|
items: [
|
|
{
|
|
label: "FAQ",
|
|
href: "#faq",
|
|
},
|
|
{
|
|
label: "Contact",
|
|
href: "#contact",
|
|
},
|
|
{
|
|
label: "Shipping & Returns",
|
|
href: "#",
|
|
},
|
|
{
|
|
label: "Privacy Policy",
|
|
href: "#",
|
|
},
|
|
],
|
|
},
|
|
]}
|
|
copyrightText="© 2024 Lumière Atelier. All rights reserved."
|
|
/>
|
|
</div>
|
|
</ReactLenis>
|
|
</ThemeProvider>
|
|
);
|
|
}
|