463 lines
14 KiB
TypeScript
463 lines
14 KiB
TypeScript
"use client";
|
|
|
|
import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
|
|
import ReactLenis from "lenis/react";
|
|
import ContactSplit from '@/components/sections/contact/ContactSplit';
|
|
import FaqSplitMedia from '@/components/sections/faq/FaqSplitMedia';
|
|
import FeatureCardTwelve from '@/components/sections/feature/FeatureCardTwelve';
|
|
import FooterBaseReveal from '@/components/sections/footer/FooterBaseReveal';
|
|
import HeroSplitTestimonial from '@/components/sections/hero/HeroSplitTestimonial';
|
|
import MediaAbout from '@/components/sections/about/MediaAbout';
|
|
import MetricCardEleven from '@/components/sections/metrics/MetricCardEleven';
|
|
import NavbarLayoutFloatingOverlay from '@/components/navbar/NavbarLayoutFloatingOverlay/NavbarLayoutFloatingOverlay';
|
|
import ProductCardTwo from '@/components/sections/product/ProductCardTwo';
|
|
import TestimonialCardSixteen from '@/components/sections/testimonial/TestimonialCardSixteen';
|
|
|
|
export default function LandingPage() {
|
|
return (
|
|
<ThemeProvider
|
|
defaultButtonVariant="directional-hover"
|
|
defaultTextAnimation="background-highlight"
|
|
borderRadius="pill"
|
|
contentWidth="compact"
|
|
sizing="largeSmallSizeMediumTitles"
|
|
background="aurora"
|
|
cardStyle="glass-depth"
|
|
primaryButtonStyle="radial-glow"
|
|
secondaryButtonStyle="radial-glow"
|
|
headingFontWeight="bold"
|
|
>
|
|
<ReactLenis root>
|
|
<div id="nav" data-section="nav">
|
|
<NavbarLayoutFloatingOverlay
|
|
navItems={[
|
|
{
|
|
name: "Home",
|
|
id: "hero",
|
|
},
|
|
{
|
|
name: "About",
|
|
id: "about",
|
|
},
|
|
{
|
|
name: "Collection",
|
|
id: "products",
|
|
},
|
|
{
|
|
name: "Testimonials",
|
|
id: "testimonials",
|
|
},
|
|
{
|
|
name: "Contact",
|
|
id: "contact",
|
|
},
|
|
]}
|
|
brandName="Essence"
|
|
/>
|
|
</div>
|
|
|
|
<div id="hero" data-section="hero">
|
|
<HeroSplitTestimonial
|
|
useInvertedBackground={true}
|
|
background={{
|
|
variant: "plain",
|
|
}}
|
|
title="The Art of Essence"
|
|
description="Discover our signature collection of handcrafted fragrances designed to evoke memories and define your presence."
|
|
testimonials={[
|
|
{
|
|
name: "Elena R.",
|
|
handle: "@elena_perfume",
|
|
testimonial: "The scents are absolutely divine, lasting all day.",
|
|
rating: 5,
|
|
imageSrc: "http://img.b2bpic.net/free-photo/attractive-seductive-sensual-stylish-woman-boho-dress-sitting-vintage-retro-cafe-holding-perfume_285396-6942.jpg",
|
|
},
|
|
{
|
|
name: "Marcus T.",
|
|
handle: "@mt_fragrance",
|
|
testimonial: "Sophisticated and unique blends. Truly premium experience.",
|
|
rating: 5,
|
|
imageSrc: "http://img.b2bpic.net/free-photo/young-caucasian-woman-holding-shopping-bags-make-selfie-by-camera-clothing-store_839833-1916.jpg",
|
|
},
|
|
{
|
|
name: "Sarah P.",
|
|
handle: "@sarah_scents",
|
|
testimonial: "I have never received so many compliments.",
|
|
rating: 5,
|
|
imageSrc: "http://img.b2bpic.net/free-photo/close-up-portrait-elegant-beautiful-woman-sitting-vintage-cafe-black-velvet-dress-evening-gown-rich-stylish-lady-elegant-fashion-trend-holding-golden-purse-hands_285396-7233.jpg",
|
|
},
|
|
{
|
|
name: "Julian B.",
|
|
handle: "@julian_frag",
|
|
testimonial: "An incredible journey in every spray.",
|
|
rating: 5,
|
|
imageSrc: "http://img.b2bpic.net/free-photo/studio-portrait-serious-modern-male-white-shirt-business-jacket-grey-background_613910-13370.jpg",
|
|
},
|
|
{
|
|
name: "Ava L.",
|
|
handle: "@ava_scents",
|
|
testimonial: "Subtle, elegant, and perfectly balanced.",
|
|
rating: 5,
|
|
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",
|
|
},
|
|
]}
|
|
imageSrc="http://img.b2bpic.net/free-photo/perfume-bottle-nature_23-2151890527.jpg"
|
|
mediaAnimation="slide-up"
|
|
avatars={[
|
|
{
|
|
src: "http://img.b2bpic.net/free-photo/front-view-woman-posing-with-rose-copy-space_23-2148442205.jpg",
|
|
alt: "user profile 1",
|
|
},
|
|
{
|
|
src: "http://img.b2bpic.net/free-photo/young-beautiful-woman-eating-piece-melon-garden_1301-6621.jpg",
|
|
alt: "user profile 2",
|
|
},
|
|
{
|
|
src: "http://img.b2bpic.net/free-photo/stylish-beautiful-woman-jeans-jacket-walking-street-with-little-purse-elegant-style-spring-fashion-trends_285396-6696.jpg",
|
|
alt: "user profile 3",
|
|
},
|
|
{
|
|
src: "http://img.b2bpic.net/free-photo/smiley-woman-with-balloons-medium-shot_23-2149403646.jpg",
|
|
alt: "user profile 4",
|
|
},
|
|
{
|
|
src: "http://img.b2bpic.net/free-photo/beautiful-girls-white-shirts-thoughtfully-looking-aside-leaning-heads-each-other-isoalted_574295-1135.jpg",
|
|
alt: "user profile 5",
|
|
},
|
|
]}
|
|
marqueeItems={[
|
|
{
|
|
type: "text",
|
|
text: "Artisanal",
|
|
},
|
|
{
|
|
type: "text",
|
|
text: "Sustainable",
|
|
},
|
|
{
|
|
type: "text",
|
|
text: "Luxurious",
|
|
},
|
|
{
|
|
type: "text",
|
|
text: "Handcrafted",
|
|
},
|
|
{
|
|
type: "text",
|
|
text: "Ethical",
|
|
},
|
|
]}
|
|
/>
|
|
</div>
|
|
|
|
<div id="about" data-section="about">
|
|
<MediaAbout
|
|
useInvertedBackground={false}
|
|
title="Mastery in Scent"
|
|
description="Our perfumers combine age-old traditions with modern innovation to create scents that tell a story. From rare blossoms to precious woods, each ingredient is sourced to ensure the highest quality in every bottle."
|
|
imageSrc="http://img.b2bpic.net/free-photo/high-angle-pink-cosmetic-containers_23-2149270057.jpg"
|
|
/>
|
|
</div>
|
|
|
|
<div id="features" data-section="features">
|
|
<FeatureCardTwelve
|
|
animationType="slide-up"
|
|
textboxLayout="split"
|
|
useInvertedBackground={true}
|
|
features={[
|
|
{
|
|
id: "f1",
|
|
label: "Natural",
|
|
title: "Sustainably Sourced",
|
|
items: [
|
|
"Organic floral extracts",
|
|
"Eco-friendly distillation",
|
|
"Ethical harvesting",
|
|
],
|
|
},
|
|
{
|
|
id: "f2",
|
|
label: "Craft",
|
|
title: "Artisanal Blending",
|
|
items: [
|
|
"Hand-poured process",
|
|
"Small batch quality",
|
|
"Precision aging",
|
|
],
|
|
},
|
|
{
|
|
id: "f3",
|
|
label: "Longevity",
|
|
title: "Lasting Potency",
|
|
items: [
|
|
"Concentrated essence",
|
|
"Complex base notes",
|
|
"8+ hour stay",
|
|
],
|
|
},
|
|
]}
|
|
title="Why Choose Essence"
|
|
description="Our commitment to quality ensures your signature scent remains unforgettable."
|
|
/>
|
|
</div>
|
|
|
|
<div id="products" data-section="products">
|
|
<ProductCardTwo
|
|
animationType="slide-up"
|
|
textboxLayout="split"
|
|
gridVariant="three-columns-all-equal-width"
|
|
useInvertedBackground={false}
|
|
products={[
|
|
{
|
|
id: "p1",
|
|
brand: "Essence",
|
|
name: "Midnight Bloom",
|
|
price: "$120",
|
|
rating: 5,
|
|
reviewCount: "120",
|
|
imageSrc: "http://img.b2bpic.net/free-photo/black-white-beauty-product_23-2151307254.jpg",
|
|
},
|
|
{
|
|
id: "p2",
|
|
brand: "Essence",
|
|
name: "Golden Horizon",
|
|
price: "$140",
|
|
rating: 5,
|
|
reviewCount: "95",
|
|
imageSrc: "http://img.b2bpic.net/free-photo/aesthetic-bottles-still-life-home-decor_53876-133314.jpg",
|
|
},
|
|
{
|
|
id: "p3",
|
|
brand: "Essence",
|
|
name: "Velvet Wood",
|
|
price: "$110",
|
|
rating: 4,
|
|
reviewCount: "80",
|
|
imageSrc: "http://img.b2bpic.net/free-photo/elegant-vegan-alcohol-arrangement_23-2149337712.jpg",
|
|
},
|
|
{
|
|
id: "p4",
|
|
brand: "Essence",
|
|
name: "Oceanic Mist",
|
|
price: "$95",
|
|
rating: 5,
|
|
reviewCount: "210",
|
|
imageSrc: "http://img.b2bpic.net/free-photo/trendy-color-swatches-with-different-elements_23-2150169885.jpg",
|
|
},
|
|
{
|
|
id: "p5",
|
|
brand: "Essence",
|
|
name: "Citrus Flare",
|
|
price: "$105",
|
|
rating: 4,
|
|
reviewCount: "65",
|
|
imageSrc: "http://img.b2bpic.net/free-photo/cosmetic-item-with-marijuana-leaves_23-2151336382.jpg",
|
|
},
|
|
{
|
|
id: "p6",
|
|
brand: "Essence",
|
|
name: "Royal Musk",
|
|
price: "$160",
|
|
rating: 5,
|
|
reviewCount: "150",
|
|
imageSrc: "http://img.b2bpic.net/free-photo/compostable-care-products-assortment_23-2149353133.jpg",
|
|
},
|
|
]}
|
|
title="Our Signature Collection"
|
|
description="Explore our curated fragrance profiles."
|
|
/>
|
|
</div>
|
|
|
|
<div id="testimonials" data-section="testimonials">
|
|
<TestimonialCardSixteen
|
|
animationType="slide-up"
|
|
textboxLayout="split"
|
|
useInvertedBackground={true}
|
|
testimonials={[
|
|
{
|
|
id: "t1",
|
|
name: "Anna S.",
|
|
role: "Collector",
|
|
company: "FineScents",
|
|
rating: 5,
|
|
imageSrc: "http://img.b2bpic.net/free-photo/portrait-young-man-posing-with-floral-wreath_23-2148931682.jpg",
|
|
},
|
|
{
|
|
id: "t2",
|
|
name: "Brian K.",
|
|
role: "Consultant",
|
|
company: "StyleCorp",
|
|
rating: 5,
|
|
imageSrc: "http://img.b2bpic.net/free-photo/young-woman-wearing-chain-necklace_23-2149490534.jpg",
|
|
},
|
|
{
|
|
id: "t3",
|
|
name: "Chloe L.",
|
|
role: "Designer",
|
|
company: "LuxuryStudio",
|
|
rating: 5,
|
|
imageSrc: "http://img.b2bpic.net/free-photo/close-up-portrait-green-eyed-young-woman-bright-sports-windbreaker-smiling-against-pink-wall_197531-16693.jpg",
|
|
},
|
|
{
|
|
id: "t4",
|
|
name: "David M.",
|
|
role: "Architect",
|
|
company: "BuildLab",
|
|
rating: 5,
|
|
imageSrc: "http://img.b2bpic.net/free-photo/studio-portrait-stylish-blond-male-dressed-blue-suit_613910-12746.jpg",
|
|
},
|
|
{
|
|
id: "t5",
|
|
name: "Eva J.",
|
|
role: "Curator",
|
|
company: "GalleryX",
|
|
rating: 5,
|
|
imageSrc: "http://img.b2bpic.net/free-photo/side-view-woman-applying-cream_23-2148553425.jpg",
|
|
},
|
|
]}
|
|
kpiItems={[
|
|
{
|
|
value: "5k+",
|
|
label: "Satisfied Clients",
|
|
},
|
|
{
|
|
value: "12+",
|
|
label: "Signature Scents",
|
|
},
|
|
{
|
|
value: "99%",
|
|
label: "Ethical Sourcing",
|
|
},
|
|
]}
|
|
title="Loved by Connoisseurs"
|
|
description="Hear what the community says about their olfactory experiences."
|
|
/>
|
|
</div>
|
|
|
|
<div id="metrics" data-section="metrics">
|
|
<MetricCardEleven
|
|
animationType="slide-up"
|
|
textboxLayout="default"
|
|
useInvertedBackground={false}
|
|
metrics={[
|
|
{
|
|
id: "m1",
|
|
value: "20+",
|
|
title: "Botanical Sources",
|
|
description: "Global origin ingredients.",
|
|
imageSrc: "http://img.b2bpic.net/free-photo/abstract-space-wallpaper-background-dark-smoke-design_53876-133386.jpg",
|
|
},
|
|
{
|
|
id: "m2",
|
|
value: "500+",
|
|
title: "Small Batch Runs",
|
|
description: "Precision manufacturing.",
|
|
imageSrc: "http://img.b2bpic.net/free-photo/flowers-row-testubes-with-different-colored-water-decoration-science-experiment-concept_53876-31955.jpg",
|
|
},
|
|
{
|
|
id: "m3",
|
|
value: "30%",
|
|
title: "Essence Concentration",
|
|
description: "Above industry standards.",
|
|
imageSrc: "http://img.b2bpic.net/free-photo/abstract-violet-smoke-underwater_23-2148227005.jpg",
|
|
},
|
|
]}
|
|
title="By the Numbers"
|
|
description="Excellence defined by data."
|
|
/>
|
|
</div>
|
|
|
|
<div id="faq" data-section="faq">
|
|
<FaqSplitMedia
|
|
textboxLayout="split"
|
|
useInvertedBackground={true}
|
|
faqs={[
|
|
{
|
|
id: "q1",
|
|
title: "Are your fragrances vegan?",
|
|
content: "Yes, we prioritize cruelty-free ingredients.",
|
|
},
|
|
{
|
|
id: "q2",
|
|
title: "How long does the scent last?",
|
|
content: "Our concentrated formulas typically last 8 to 10 hours.",
|
|
},
|
|
{
|
|
id: "q3",
|
|
title: "Can I return open products?",
|
|
content: "We offer returns for unopened items within 30 days.",
|
|
},
|
|
]}
|
|
imageSrc="http://img.b2bpic.net/free-photo/beautiful-macro-yellow-rose_23-2148875547.jpg"
|
|
title="Fragrance FAQs"
|
|
description="Answers to your burning questions."
|
|
faqsAnimation="slide-up"
|
|
mediaAnimation="slide-up"
|
|
/>
|
|
</div>
|
|
|
|
<div id="contact" data-section="contact">
|
|
<ContactSplit
|
|
useInvertedBackground={false}
|
|
background={{
|
|
variant: "plain",
|
|
}}
|
|
tag="Keep in Touch"
|
|
title="Join our Newsletter"
|
|
description="Be the first to know about new seasonal releases."
|
|
imageSrc="http://img.b2bpic.net/free-photo/high-angle-still-life-arrangement-close-up_23-2148229219.jpg"
|
|
mediaAnimation="slide-up"
|
|
/>
|
|
</div>
|
|
|
|
<div id="footer" data-section="footer">
|
|
<FooterBaseReveal
|
|
logoText="Essence"
|
|
columns={[
|
|
{
|
|
title: "Product",
|
|
items: [
|
|
{
|
|
label: "All Scents",
|
|
href: "#products",
|
|
},
|
|
{
|
|
label: "New Arrivals",
|
|
href: "#products",
|
|
},
|
|
],
|
|
},
|
|
{
|
|
title: "Company",
|
|
items: [
|
|
{
|
|
label: "About Us",
|
|
href: "#about",
|
|
},
|
|
{
|
|
label: "Career",
|
|
href: "#",
|
|
},
|
|
],
|
|
},
|
|
{
|
|
title: "Support",
|
|
items: [
|
|
{
|
|
label: "FAQs",
|
|
href: "#faq",
|
|
},
|
|
{
|
|
label: "Contact",
|
|
href: "#contact",
|
|
},
|
|
],
|
|
},
|
|
]}
|
|
/>
|
|
</div>
|
|
</ReactLenis>
|
|
</ThemeProvider>
|
|
);
|
|
}
|