210 lines
9.1 KiB
TypeScript
210 lines
9.1 KiB
TypeScript
"use client";
|
|
|
|
import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
|
|
import ReactLenis from "lenis/react";
|
|
import ContactSplitForm from '@/components/sections/contact/ContactSplitForm';
|
|
import FeatureCardSeven from '@/components/sections/feature/FeatureCardSeven';
|
|
import FooterBaseReveal from '@/components/sections/footer/FooterBaseReveal';
|
|
import HeroBillboardScroll from '@/components/sections/hero/HeroBillboardScroll';
|
|
import MetricSplitMediaAbout from '@/components/sections/about/MetricSplitMediaAbout';
|
|
import NavbarLayoutFloatingInline from '@/components/navbar/NavbarLayoutFloatingInline';
|
|
import ProductCardFour from '@/components/sections/product/ProductCardFour';
|
|
import TestimonialCardSixteen from '@/components/sections/testimonial/TestimonialCardSixteen';
|
|
import { Sparkles } from "lucide-react";
|
|
|
|
export default function LandingPage() {
|
|
return (
|
|
<ThemeProvider
|
|
defaultButtonVariant="hover-magnetic"
|
|
defaultTextAnimation="background-highlight"
|
|
borderRadius="soft"
|
|
contentWidth="compact"
|
|
sizing="mediumLargeSizeLargeTitles"
|
|
background="circleGradient"
|
|
cardStyle="layered-gradient"
|
|
primaryButtonStyle="shadow"
|
|
secondaryButtonStyle="layered"
|
|
headingFontWeight="extrabold"
|
|
>
|
|
<ReactLenis root>
|
|
<div id="nav" data-section="nav">
|
|
<NavbarLayoutFloatingInline
|
|
navItems={[
|
|
{
|
|
name: "Home", id: "hero"},
|
|
{
|
|
name: "Collection", id: "products"},
|
|
{
|
|
name: "Philosophy", id: "about"},
|
|
{
|
|
name: "Contact", id: "contact"},
|
|
]}
|
|
brandName="Zavana"
|
|
button={{ text: "Shop Now", href: "#products" }}
|
|
/>
|
|
</div>
|
|
|
|
<div id="hero" data-section="hero">
|
|
<HeroBillboardScroll
|
|
background={{
|
|
variant: "radial-gradient"}}
|
|
title="Zavana: Essence of Timeless Luxury"
|
|
description="Discover a fragrance experience designed to evoke your innermost elegance. Zavana blends tradition with modern sophistication."
|
|
buttons={[
|
|
{
|
|
text: "Shop Collection", href: "#products"},
|
|
]}
|
|
imageSrc="http://img.b2bpic.net/free-photo/natural-selfcare-products-arrangement_23-2149353134.jpg"
|
|
imageAlt="Zavana signature perfume bottle"
|
|
tag="New Collection"
|
|
tagIcon={Sparkles}
|
|
/>
|
|
</div>
|
|
|
|
<div id="about" data-section="about">
|
|
<MetricSplitMediaAbout
|
|
useInvertedBackground={false}
|
|
title="Our Philosophy"
|
|
description="Zavana is built on the belief that scent is the most powerful accessory. We curate rare essences from around the world to ensure every drop resonates with your unique aura."
|
|
metrics={[
|
|
{
|
|
value: "12", title: "Rare Essences"},
|
|
{
|
|
value: "100%", title: "Natural Origin"},
|
|
{
|
|
value: "24h", title: "Lasting Aroma"},
|
|
{
|
|
value: "50+", title: "Global Markets"},
|
|
]}
|
|
imageSrc="http://img.b2bpic.net/free-photo/skin-care-banner-concept-with-lotion_23-2149449096.jpg?_wi=1"
|
|
imageAlt="Artisanal perfume essence preparation"
|
|
mediaAnimation="blur-reveal"
|
|
metricsAnimation="slide-up"
|
|
/>
|
|
</div>
|
|
|
|
<div id="features" data-section="features">
|
|
<FeatureCardSeven
|
|
animationType="slide-up"
|
|
textboxLayout="split"
|
|
useInvertedBackground={false}
|
|
features={[
|
|
{
|
|
title: "Rare Ingredients", description: "Sourced from exclusive heritage farms.", imageSrc: "http://img.b2bpic.net/free-photo/elegant-vegan-alcohol-arrangement_23-2149337712.jpg", imageAlt: "Botanical ingredients"},
|
|
{
|
|
title: "Masterful Curation", description: "Blended by world-renowned experts.", imageSrc: "http://img.b2bpic.net/free-photo/closeup-shaving-brush-perfume_53876-32090.jpg", imageAlt: "Perfume workshop"},
|
|
{
|
|
title: "Lasting Impression", description: "Scent profiles designed to endure.", imageSrc: "http://img.b2bpic.net/free-photo/skin-care-banner-concept-with-lotion_23-2149449096.jpg?_wi=2", imageAlt: "Long-lasting perfume"},
|
|
]}
|
|
title="The Zavana Craft"
|
|
description="Experience perfume redefined through patience and artistic precision."
|
|
tag="Craftsmanship"
|
|
/>
|
|
</div>
|
|
|
|
<div id="products" data-section="products">
|
|
<ProductCardFour
|
|
animationType="scale-rotate"
|
|
textboxLayout="default"
|
|
gridVariant="bento-grid"
|
|
useInvertedBackground={false}
|
|
products={[
|
|
{
|
|
id: "p1", name: "Midnight Bloom", price: "$125", variant: "Floral", imageSrc: "http://img.b2bpic.net/free-photo/glowing-foundation-advertising-with-product_23-2149511279.jpg", imageAlt: "Midnight Bloom perfume"},
|
|
{
|
|
id: "p2", name: "Amber Sands", price: "$145", variant: "Oud", imageSrc: "http://img.b2bpic.net/free-photo/luxury-perfume-container_1048-1922.jpg?_wi=1", imageAlt: "Amber Sands perfume"},
|
|
{
|
|
id: "p3", name: "Azure Drift", price: "$110", variant: "Citrus", imageSrc: "http://img.b2bpic.net/free-photo/essential-oil-spray-bottle-aromatic-beauty-product_53876-134405.jpg", imageAlt: "Azure Drift perfume"},
|
|
{
|
|
id: "p4", name: "Velvet Noir", price: "$160", variant: "Woody", imageSrc: "http://img.b2bpic.net/free-photo/cosmetic-bottle-with-luxurious-art-nouveau-inspired-sun-relief-background_23-2151420731.jpg", imageAlt: "Velvet Noir perfume"},
|
|
{
|
|
id: "p5", name: "Golden Hour", price: "$135", variant: "Floral", imageSrc: "http://img.b2bpic.net/free-photo/crystal-whiskey-bottle-alcohol-drinks-packaging_53876-110846.jpg", imageAlt: "Golden Hour perfume"},
|
|
{
|
|
id: "p6", name: "Silver Mist", price: "$120", variant: "Musk", imageSrc: "http://img.b2bpic.net/free-photo/beautiful-minimalist-vase-curtain_23-2149681146.jpg", imageAlt: "Silver Mist perfume"},
|
|
]}
|
|
title="Signature Collection"
|
|
description="Discover the art of scent with our curated perfume showcase."
|
|
tag="Perfume Showcase"
|
|
/>
|
|
</div>
|
|
|
|
<div id="testimonials" data-section="testimonials">
|
|
<TestimonialCardSixteen
|
|
useInvertedBackground={false}
|
|
animationType="blur-reveal"
|
|
textboxLayout="split"
|
|
title="What Our Customers Say"
|
|
description="Hear from our community of scent enthusiasts."
|
|
kpiItems={[
|
|
{ value: "500+", label: "Happy Clients" },
|
|
{ value: "4.9/5", label: "Average Rating" },
|
|
{ value: "100%", label: "Genuine Reviews" }
|
|
]}
|
|
testimonials={[
|
|
{
|
|
id: "t1", name: "Isabella H.", role: "Connoisseur", company: "Fragrance Daily", rating: 5,
|
|
imageSrc: "http://img.b2bpic.net/free-photo/portrait-pretty-girl-dark-sweater-standing-near-lamps_114579-81891.jpg"
|
|
},
|
|
{
|
|
id: "t2", name: "Marcus Thorne", role: "Collector", company: "Luxury Monthly", rating: 5,
|
|
imageSrc: "http://img.b2bpic.net/free-photo/beautiful-woman-with-trendy-hairstyle_23-2149406007.jpg"
|
|
},
|
|
{
|
|
id: "t3", name: "Sarah Jenkins", role: "Blogger", company: "Scent Styles", rating: 4,
|
|
imageSrc: "http://img.b2bpic.net/free-photo/fashion-portrait-young-elegant-woman_1328-2703.jpg"
|
|
}
|
|
]}
|
|
/>
|
|
</div>
|
|
|
|
<div id="contact" data-section="contact">
|
|
<ContactSplitForm
|
|
useInvertedBackground={true}
|
|
title="Get in Touch"
|
|
description="Let us help you find the perfect fragrance for your personal collection."
|
|
inputs={[
|
|
{ name: "name", type: "text", placeholder: "Your Name", required: true },
|
|
{ name: "email", type: "email", placeholder: "Your Email", required: true }
|
|
]}
|
|
textarea={{ name: "message", placeholder: "How can we assist you?", required: true }}
|
|
buttonText="Submit Inquiry"
|
|
imageSrc="http://img.b2bpic.net/free-photo/luxury-perfume-container_1048-1922.jpg?_wi=2"
|
|
imageAlt="Contact Us"
|
|
/>
|
|
</div>
|
|
|
|
<div id="footer" data-section="footer">
|
|
<FooterBaseReveal
|
|
logoText="Zavana"
|
|
columns={[
|
|
{
|
|
title: "Collection", items: [
|
|
{
|
|
label: "All Scents", href: "#products"},
|
|
{
|
|
label: "New Arrivals", href: "#"},
|
|
],
|
|
},
|
|
{
|
|
title: "Company", items: [
|
|
{
|
|
label: "Philosophy", href: "#about"},
|
|
{
|
|
label: "Our Story", href: "#"},
|
|
],
|
|
},
|
|
{
|
|
title: "Support", items: [
|
|
{
|
|
label: "Contact Us", href: "#contact"},
|
|
{
|
|
label: "Shipping Info", href: "#"},
|
|
],
|
|
},
|
|
]}
|
|
/>
|
|
</div>
|
|
</ReactLenis>
|
|
</ThemeProvider>
|
|
);
|
|
} |