137 lines
6.9 KiB
TypeScript
137 lines
6.9 KiB
TypeScript
"use client";
|
|
|
|
import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
|
|
import ReactLenis from "lenis/react";
|
|
import ContactSplitForm from '@/components/sections/contact/ContactSplitForm';
|
|
import FeatureCardTwentyFour from '@/components/sections/feature/FeatureCardTwentyFour';
|
|
import FooterMedia from '@/components/sections/footer/FooterMedia';
|
|
import HeroBillboardCarousel from '@/components/sections/hero/HeroBillboardCarousel';
|
|
import NavbarLayoutFloatingInline from '@/components/navbar/NavbarLayoutFloatingInline';
|
|
import PricingCardOne from '@/components/sections/pricing/PricingCardOne';
|
|
import ProductCardFour from '@/components/sections/product/ProductCardFour';
|
|
|
|
export default function LandingPage() {
|
|
return (
|
|
<ThemeProvider
|
|
defaultButtonVariant="hover-bubble"
|
|
defaultTextAnimation="background-highlight"
|
|
borderRadius="pill"
|
|
contentWidth="mediumSmall"
|
|
sizing="mediumSizeLargeTitles"
|
|
background="fluid"
|
|
cardStyle="layered-gradient"
|
|
primaryButtonStyle="diagonal-gradient"
|
|
secondaryButtonStyle="layered"
|
|
headingFontWeight="bold"
|
|
>
|
|
<ReactLenis root>
|
|
<div id="nav" data-section="nav">
|
|
<NavbarLayoutFloatingInline
|
|
navItems={[
|
|
{ name: "Home", id: "home" },
|
|
{ name: "Shop", id: "shop" },
|
|
{ name: "Packs", id: "packs" },
|
|
{ name: "Refill", id: "refill" },
|
|
{ name: "Contact", id: "contact" },
|
|
]}
|
|
brandName="EssenceVault"
|
|
button={{ text: "Get Started", href: "#contact" }}
|
|
/>
|
|
</div>
|
|
|
|
<div id="hero" data-section="hero">
|
|
<HeroBillboardCarousel
|
|
background={{ variant: "sparkles-gradient" }}
|
|
title="Unrivaled Fragrance, Decanted."
|
|
description="Experience luxury, one spritz at a time. Authenticity, quality, and indulgence captured in bespoke travel decants."
|
|
buttons={[{ text: "Shop Decants", href: "#shop" }]}
|
|
mediaItems={[
|
|
{ imageSrc: "http://img.b2bpic.net/free-photo/beautiful-concept-with-prism-light-deflection_23-2148599246.jpg?_wi=1", imageAlt: "Luxury Fragrance" },
|
|
{ imageSrc: "http://img.b2bpic.net/free-photo/beautiful-concept-with-prism-light-deflection_23-2148599246.jpg?_wi=2", imageAlt: "Luxury Fragrance" },
|
|
{ imageSrc: "http://img.b2bpic.net/free-photo/beautiful-concept-with-prism-light-deflection_23-2148599246.jpg?_wi=3", imageAlt: "Luxury Fragrance" },
|
|
{ imageSrc: "http://img.b2bpic.net/free-photo/beautiful-concept-with-prism-light-deflection_23-2148599246.jpg?_wi=4", imageAlt: "Luxury Fragrance" },
|
|
{ imageSrc: "http://img.b2bpic.net/free-photo/beautiful-concept-with-prism-light-deflection_23-2148599246.jpg?_wi=5", imageAlt: "Luxury Fragrance" },
|
|
{ imageSrc: "http://img.b2bpic.net/free-photo/beautiful-concept-with-prism-light-deflection_23-2148599246.jpg?_wi=6", imageAlt: "Luxury Fragrance" }
|
|
]}
|
|
/>
|
|
</div>
|
|
|
|
<div id="shop" data-section="shop">
|
|
<ProductCardFour
|
|
animationType="slide-up"
|
|
textboxLayout="split"
|
|
gridVariant="four-items-2x2-equal-grid"
|
|
useInvertedBackground={true}
|
|
products={[
|
|
{ id: "p1", name: "JPG Le Beau Le Parfum", price: "$599 MXN", variant: "Fresh, aquatic, magnetic", imageSrc: "http://img.b2bpic.net/free-photo/still-life-beauty-products-based-regenerative-agriculture_23-2150721477.jpg" },
|
|
{ id: "p2", name: "Lattafa Eclair", price: "$245 MXN", variant: "Sweet, gourmand, addictive", imageSrc: "http://img.b2bpic.net/free-photo/everyday-bath-utensils-dark-marble-background_58702-17695.jpg" },
|
|
{ id: "p3", name: "Lattafa Fakhar", price: "$250 MXN", variant: "Bold, woody, intense", imageSrc: "http://img.b2bpic.net/free-photo/exclusive-cognac-bottle_1385-1125.jpg" },
|
|
{ id: "p4", name: "Lattafa Khamrah", price: "$270 MXN", variant: "Rich, oud-forward, deep", imageSrc: "http://img.b2bpic.net/free-photo/front-view-perfume-bottle-purple-blurred-background_140725-145531.jpg" }
|
|
]}
|
|
title="Curated Selection"
|
|
description="Exquisite scents, masterfully decanted."
|
|
/>
|
|
</div>
|
|
|
|
<div id="packs" data-section="packs">
|
|
<PricingCardOne
|
|
animationType="depth-3d"
|
|
textboxLayout="split"
|
|
useInvertedBackground={false}
|
|
plans={[
|
|
{ id: "1", badge: "Daily", price: "Ask for price", subtitle: "Fakhar + Khamrah", features: ["Everyday powerhouse", "Long lasting", "Versatile"] },
|
|
{ id: "2", badge: "Sweet", price: "Ask for price", subtitle: "Eclair + Khamrah", features: ["Sweet depth", "Night out ready", "Rich"] },
|
|
{ id: "3", badge: "Luxury", price: "Ask for price", subtitle: "Le Beau + Lattafa", features: ["Premium choice", "Elevated", "Exclusive"] }
|
|
]}
|
|
title="Curated Packs"
|
|
description="Experience our signature pairings."
|
|
/>
|
|
</div>
|
|
|
|
<div id="refill" data-section="refill">
|
|
<FeatureCardTwentyFour
|
|
animationType="slide-up"
|
|
textboxLayout="split"
|
|
useInvertedBackground={true}
|
|
features={[
|
|
{ id: "f1", title: "Buy Decant", author: "Concept", description: "Choose your luxury scent.", tags: ["Sustainable"], imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=rdcytv&_wi=1" },
|
|
{ id: "f2", title: "Use Daily", author: "Concept", description: "Enjoy the fragrance.", tags: ["Daily"], imageSrc: "http://img.b2bpic.net/free-photo/beautiful-still-life-with-herbal-medicine_23-2149292012.jpg" },
|
|
{ id: "f3", title: "Refill & Save", author: "Concept", description: "Cost-effective luxury.", tags: ["Eco"], imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=rdcytv&_wi=2" }
|
|
]}
|
|
title="Sustainable Luxury"
|
|
description="Experience the concept of circular beauty. Refill, reuse, and save."
|
|
/>
|
|
</div>
|
|
|
|
<div id="contact" data-section="contact">
|
|
<ContactSplitForm
|
|
useInvertedBackground={false}
|
|
title="Get In Touch"
|
|
description="Have questions about our fragrance collection or custom decanting? Reach out to us."
|
|
imageSrc="http://img.b2bpic.net/free-photo/beautiful-concept-with-prism-light-deflection_23-2148599246.jpg?_wi=7"
|
|
imageAlt="Luxury contact background"
|
|
buttonText="Send Message"
|
|
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 help?", rows: 4, required: true }}
|
|
/>
|
|
</div>
|
|
|
|
<div id="footer" data-section="footer">
|
|
<FooterMedia
|
|
imageSrc="http://img.b2bpic.net/free-photo/beautiful-concept-with-prism-light-deflection_23-2148599246.jpg?_wi=8"
|
|
logoText="EssenceVault"
|
|
columns={[
|
|
{ title: "Links", items: [{ label: "Shop", href: "#shop" }, { label: "Packs", href: "#packs" }] },
|
|
{ title: "Social", items: [{ label: "Instagram", href: "https://instagram.com" }] }
|
|
]}
|
|
copyrightText="Decants crafted with care."
|
|
/>
|
|
</div>
|
|
</ReactLenis>
|
|
</ThemeProvider>
|
|
);
|
|
}
|