300 lines
15 KiB
TypeScript
300 lines
15 KiB
TypeScript
"use client";
|
|
|
|
import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
|
|
import ReactLenis from "lenis/react";
|
|
import ContactSplit from '@/components/sections/contact/ContactSplit';
|
|
import FaqBase from '@/components/sections/faq/FaqBase';
|
|
import FeatureCardTwentySeven from '@/components/sections/feature/FeatureCardTwentySeven';
|
|
import FooterBase from '@/components/sections/footer/FooterBase';
|
|
import HeroBillboardCarousel from '@/components/sections/hero/HeroBillboardCarousel';
|
|
import NavbarLayoutFloatingInline from '@/components/navbar/NavbarLayoutFloatingInline';
|
|
import PricingCardFive from '@/components/sections/pricing/PricingCardFive';
|
|
import ProductCardFour from '@/components/sections/product/ProductCardFour';
|
|
import SocialProofOne from '@/components/sections/socialProof/SocialProofOne';
|
|
import TestimonialCardFifteen from '@/components/sections/testimonial/TestimonialCardFifteen';
|
|
import TextSplitAbout from '@/components/sections/about/TextSplitAbout';
|
|
import { Feather, Gift, Sparkles } from "lucide-react";
|
|
|
|
export default function LandingPage() {
|
|
return (
|
|
<ThemeProvider
|
|
defaultButtonVariant="directional-hover"
|
|
defaultTextAnimation="entrance-slide"
|
|
borderRadius="pill"
|
|
contentWidth="medium"
|
|
sizing="largeSmall"
|
|
background="noise"
|
|
cardStyle="outline"
|
|
primaryButtonStyle="double-inset"
|
|
secondaryButtonStyle="solid"
|
|
headingFontWeight="semibold"
|
|
>
|
|
<ReactLenis root>
|
|
<div id="nav" data-section="nav">
|
|
<NavbarLayoutFloatingInline
|
|
navItems={[
|
|
{
|
|
name: "Home", id: "#hero"},
|
|
{
|
|
name: "About", id: "#about"},
|
|
{
|
|
name: "Collections", id: "/products"},
|
|
{
|
|
name: "Features", id: "#features"},
|
|
{
|
|
name: "Testimonials", id: "#testimonials"},
|
|
{
|
|
name: "FAQ", id: "#faq"},
|
|
{
|
|
name: "Contact", id: "#contact"},
|
|
]}
|
|
logoSrc="http://img.b2bpic.net/free-vector/luxury-floral-perfume-logo-template-concept_23-2148467151.jpg"
|
|
logoAlt="AromaLux Logo"
|
|
brandName="AromaLux"
|
|
button={{
|
|
text: "Shop Now", href: "/products"}}
|
|
animateOnLoad={true}
|
|
/>
|
|
</div>
|
|
|
|
<div id="hero" data-section="hero">
|
|
<HeroBillboardCarousel
|
|
background={{
|
|
variant: "radial-gradient"}}
|
|
title="Discover Your Signature Scent"
|
|
description="Experience the art of perfumery with AromaLux. Handcrafted fragrances designed to captivate and inspire."
|
|
buttons={[
|
|
{
|
|
text: "Explore Collection", href: "/products"},
|
|
{
|
|
text: "Our Story", href: "#about"},
|
|
]}
|
|
buttonAnimation="slide-up"
|
|
mediaItems={[
|
|
{
|
|
imageSrc: "http://img.b2bpic.net/free-photo/monochrome-beauty-product-skincare_23-2151307320.jpg?_wi=1", imageAlt: "Monochrome beauty product"
|
|
},
|
|
{
|
|
imageSrc: "http://img.b2bpic.net/free-photo/swirls-foam-blue-liquid_23-2148346909.jpg?_wi=1", imageAlt: "Swirls foam blue liquid"
|
|
},
|
|
{
|
|
imageSrc: "http://img.b2bpic.net/free-photo/still-life-cosmetic-products_23-2149163167.jpg?_wi=1", imageAlt: "Still life cosmetic products"
|
|
}
|
|
]}
|
|
/>
|
|
</div>
|
|
|
|
<div id="about" data-section="about">
|
|
<TextSplitAbout
|
|
useInvertedBackground={false}
|
|
title="The Essence of Elegance"
|
|
description={[
|
|
"At AromaLux, we believe a fragrance is more than just a scent—it's an extension of your personality. Our master perfumers meticulously select the rarest ingredients to create extraordinary olfactory journeys.", "Each bottle tells a story, a symphony of notes designed to evoke emotion and leave a lasting impression. From vibrant florals to deep, woody undertones, discover a world of luxurious aromas."]}
|
|
buttons={[
|
|
{
|
|
text: "Learn More", href: "#about"},
|
|
]}
|
|
buttonAnimation="slide-up"
|
|
/>
|
|
</div>
|
|
|
|
<div id="features" data-section="features">
|
|
<FeatureCardTwentySeven
|
|
animationType="slide-up"
|
|
textboxLayout="default"
|
|
useInvertedBackground={true}
|
|
features={[
|
|
{
|
|
id: "f1", title: "Masterful Blending", descriptions: [
|
|
"Our perfumers are artists, combining rare essences to create harmonious and unique compositions."],
|
|
imageSrc: "http://img.b2bpic.net/free-photo/close-up-hand-holding-bottle_23-2148897591.jpg", imageAlt: "Perfumer crafting scent"},
|
|
{
|
|
id: "f2", title: "Sustainable Sourcing", descriptions: [
|
|
"We ethically source the finest natural ingredients, ensuring both quality and environmental responsibility."],
|
|
imageSrc: "http://img.b2bpic.net/free-photo/beautiful-still-life-with-herbal-medicine_23-2149292012.jpg", imageAlt: "Sustainable ingredients"},
|
|
{
|
|
id: "f3", title: "Exceptional Longevity", descriptions: [
|
|
"Formulated for enduring wear, our fragrances leave a memorable trail that lasts throughout the day."],
|
|
imageSrc: "http://img.b2bpic.net/free-photo/close-view-sexual-bride-with-makeup-hairstyle-wearing-white-silk-gown-veil-spraying-perfume-her-neck-enjoying-smell-against-gray-background-bridal-morning_8353-12277.jpg", imageAlt: "Perfume mist on skin"},
|
|
]}
|
|
title="Crafted for Perfection"
|
|
description="Our commitment to excellence shines through every bottle, from ingredient sourcing to final presentation."
|
|
/>
|
|
</div>
|
|
|
|
<div id="products" data-section="products">
|
|
<ProductCardFour
|
|
animationType="slide-up"
|
|
gridVariant="three-columns-all-equal-width"
|
|
textboxLayout="default"
|
|
useInvertedBackground={false}
|
|
products={[
|
|
{
|
|
id: "p1", name: "Aura Bloom", price: "$120", variant: "Eau de Parfum", imageSrc: "http://img.b2bpic.net/free-photo/monochrome-beauty-product-skincare_23-2151307320.jpg?_wi=2", imageAlt: "Aura Bloom Perfume"},
|
|
{
|
|
id: "p2", name: "Serenity Mist", price: "$110", variant: "Eau de Toilette", imageSrc: "http://img.b2bpic.net/free-photo/swirls-foam-blue-liquid_23-2148346909.jpg?_wi=2", imageAlt: "Serenity Mist Perfume"},
|
|
{
|
|
id: "p3", name: "Ignite Elixir", price: "$135", variant: "Extrait de Parfum", imageSrc: "http://img.b2bpic.net/free-photo/still-life-cosmetic-products_23-2149163167.jpg?_wi=2", imageAlt: "Ignite Elixir Perfume"},
|
|
{
|
|
id: "p4", name: "Blooming Charm", price: "$105", variant: "Eau de Parfum", imageSrc: "http://img.b2bpic.net/free-photo/serum-bottle-yellow-flower-arrangement_23-2149353084.jpg", imageAlt: "Blooming Charm Perfume"},
|
|
{
|
|
id: "p5", name: "Noir Allure", price: "$140", variant: "Extrait de Parfum", imageSrc: "http://img.b2bpic.net/free-photo/luxury-black-perfume-bottle-with-gold-cap-dark-textured-background_84443-84117.jpg", imageAlt: "Noir Allure Perfume"},
|
|
{
|
|
id: "p6", name: "Solstice Glow", price: "$125", variant: "Eau de Parfum", imageSrc: "http://img.b2bpic.net/free-photo/golden-smoke-black-screen_23-2148227231.jpg", imageAlt: "Solstice Glow Perfume"},
|
|
]}
|
|
title="Our Exquisite Collections"
|
|
description="Explore a diverse range of fragrances, each a masterpiece waiting to be discovered."
|
|
/>
|
|
</div>
|
|
|
|
<div id="offerings" data-section="offerings">
|
|
<PricingCardFive
|
|
animationType="slide-up"
|
|
textboxLayout="default"
|
|
useInvertedBackground={true}
|
|
plans={[
|
|
{
|
|
id: "standard", tag: "Classic", tagIcon: Sparkles,
|
|
price: "$120", period: "50ml", description: "Our signature scent in a standard, elegant bottle.", button: {
|
|
text: "Select Standard", href: "#offerings"},
|
|
featuresTitle: "Includes:", features: [
|
|
"50ml Eau de Parfum", "Premium packaging", "Free shipping"],
|
|
},
|
|
{
|
|
id: "travel", tag: "Traveler", tagIcon: Feather,
|
|
price: "$60", period: "10ml", description: "A portable companion for your journeys, perfect for on-the-go refresh.", button: {
|
|
text: "Select Travel", href: "#offerings"},
|
|
featuresTitle: "Includes:", features: [
|
|
"10ml Travel Spray", "Refillable design", "Velvet pouch"],
|
|
},
|
|
{
|
|
id: "gift-set", tag: "Luxury Set", tagIcon: Gift,
|
|
price: "$200", period: "Gift Set", description: "The ultimate gift, featuring a selection of our finest fragrances.", button: {
|
|
text: "Choose Gift Set", href: "#offerings"},
|
|
featuresTitle: "Includes:", features: [
|
|
"50ml Eau de Parfum", "10ml Travel Spray", "Scented candle", "Personalized card"],
|
|
},
|
|
]}
|
|
title="Curated Offerings"
|
|
description="Find the perfect size or gift set for yourself or a loved one."
|
|
/>
|
|
</div>
|
|
|
|
<div id="testimonials" data-section="testimonials">
|
|
<TestimonialCardFifteen
|
|
useInvertedBackground={false}
|
|
testimonial="AromaLux perfumes are truly captivating. The scents are sophisticated and long-lasting, always drawing compliments. My new favorite!"
|
|
rating={5}
|
|
author="Isabella Rossi, Fragrance Enthusiast"
|
|
avatars={[
|
|
{
|
|
src: "http://img.b2bpic.net/free-photo/close-up-portrait-professional-business-woman-smiling-outdoor_1391-4.jpg", alt: "Sarah Johnson"},
|
|
{
|
|
src: "http://img.b2bpic.net/free-photo/portrait-grey-haired-businessman-standing_74855-10324.jpg", alt: "Michael Chen"},
|
|
{
|
|
src: "http://img.b2bpic.net/free-photo/busy-young-woman-work_329181-13393.jpg", alt: "Emily Rodriguez"},
|
|
{
|
|
src: "http://img.b2bpic.net/free-photo/beautiful-woman-holding-hands-head-patterned-blouse-looking-happy-front-view_176474-31820.jpg", alt: "David Kim"},
|
|
{
|
|
src: "http://img.b2bpic.net/free-photo/smiling-handsome-guy-posing-park_1262-20815.jpg", alt: "Maria Gomez"},
|
|
]}
|
|
ratingAnimation="blur-reveal"
|
|
avatarsAnimation="slide-up"
|
|
/>
|
|
</div>
|
|
|
|
<div id="social-proof" data-section="social-proof">
|
|
<SocialProofOne
|
|
textboxLayout="default"
|
|
useInvertedBackground={true}
|
|
names={[
|
|
"Vogue Scent", "Luxury Essence", "Gourmet Fragrance", "Chic Magazine", "Aroma Monthly", "Elite Style", "Modern Perfumer"]}
|
|
title="As Seen In"
|
|
description="Proudly recognized by leading fashion and lifestyle publications for our unique olfactory artistry."
|
|
/>
|
|
</div>
|
|
|
|
<div id="faq" data-section="faq">
|
|
<FaqBase
|
|
textboxLayout="default"
|
|
useInvertedBackground={false}
|
|
faqs={[
|
|
{
|
|
id: "q1", title: "What makes AromaLux fragrances unique?", content: "Our fragrances are crafted by master perfumers using rare and ethically sourced ingredients. Each scent is a unique composition designed for longevity and complexity."}, {
|
|
id: "q2", title: "How long do your fragrances last?", content: "AromaLux fragrances are formulated for exceptional longevity. Depending on the concentration (Eau de Parfum vs. Extrait de Parfum) and skin type, they can last anywhere from 6 to 12 hours."}, {
|
|
id: "q3", title: "Are your products cruelty-free?", content: "Yes, AromaLux is committed to ethical practices. All our products are 100% cruelty-free and vegan, never tested on animals."}, {
|
|
id: "q4", title: "Do you offer international shipping?", content: "Yes, we offer worldwide shipping. Shipping costs and delivery times vary by destination. Please see our shipping policy for more details."}, {
|
|
id: "q5", title: "Can I sample fragrances before buying a full bottle?", content: "We offer discovery sets with small samples of our most popular fragrances, allowing you to experience them before committing to a full-size purchase."}
|
|
]}
|
|
title="Frequently Asked Questions"
|
|
description="Find answers to common inquiries about our fragrances, ingredients, and ordering process."
|
|
faqsAnimation="slide-up"
|
|
/>
|
|
</div>
|
|
|
|
<div id="contact" data-section="contact">
|
|
<ContactSplit
|
|
useInvertedBackground={false}
|
|
background={{
|
|
variant: "plain"}}
|
|
tag="Inquire"
|
|
title="Connect with AromaLux"
|
|
description="We'd love to hear from you. Reach out to us for any questions, collaborations, or custom fragrance requests."
|
|
imageSrc="http://img.b2bpic.net/free-photo/flat-lay-bottle-fan-yellow-background_23-2148306729.jpg"
|
|
imageAlt="Elegant perfume bottle for contact section"
|
|
mediaAnimation="opacity"
|
|
mediaPosition="right"
|
|
inputPlaceholder="Enter your email"
|
|
buttonText="Send Message"
|
|
termsText="By clicking Send Message, you agree to our privacy policy and terms of service."
|
|
/>
|
|
</div>
|
|
|
|
<div id="footer" data-section="footer">
|
|
<FooterBase
|
|
columns={[
|
|
{
|
|
title: "Shop", items: [
|
|
{
|
|
label: "All Fragrances", href: "/products"},
|
|
{
|
|
label: "Gift Sets", href: "#offerings"},
|
|
{
|
|
label: "New Arrivals", href: "/products"},
|
|
{
|
|
label: "Discovery Sets", href: "#offerings"},
|
|
],
|
|
},
|
|
{
|
|
title: "Company", items: [
|
|
{
|
|
label: "Our Story", href: "#about"},
|
|
{
|
|
label: "Craftsmanship", href: "#features"},
|
|
{
|
|
label: "Sustainability", href: "#features"},
|
|
{
|
|
label: "Careers", href: "#"},
|
|
],
|
|
},
|
|
{
|
|
title: "Support", items: [
|
|
{
|
|
label: "FAQ", href: "#faq"},
|
|
{
|
|
label: "Contact Us", href: "#contact"},
|
|
{
|
|
label: "Shipping & Returns", href: "#"},
|
|
{
|
|
label: "Privacy Policy", href: "#"},
|
|
],
|
|
},
|
|
]}
|
|
logoText="AromaLux"
|
|
copyrightText="© 2024 AromaLux. All rights reserved."
|
|
/>
|
|
</div>
|
|
</ReactLenis>
|
|
</ThemeProvider>
|
|
);
|
|
} |