326 lines
15 KiB
TypeScript
326 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 FaqSplitText from '@/components/sections/faq/FaqSplitText';
|
|
import FeatureBento from '@/components/sections/feature/FeatureBento';
|
|
import FooterBaseReveal from '@/components/sections/footer/FooterBaseReveal';
|
|
import HeroSplitKpi from '@/components/sections/hero/HeroSplitKpi';
|
|
import MetricCardFourteen from '@/components/sections/metrics/MetricCardFourteen';
|
|
import NavbarLayoutFloatingInline from '@/components/navbar/NavbarLayoutFloatingInline';
|
|
import ProductCardOne from '@/components/sections/product/ProductCardOne';
|
|
import SocialProofOne from '@/components/sections/socialProof/SocialProofOne';
|
|
import SplitAbout from '@/components/sections/about/SplitAbout';
|
|
import TestimonialCardFifteen from '@/components/sections/testimonial/TestimonialCardFifteen';
|
|
import { Award, Crown, Droplet, Globe, Heart, Leaf, ShieldCheck, Sparkles } from "lucide-react";
|
|
|
|
export default function LandingPage() {
|
|
return (
|
|
<ThemeProvider
|
|
defaultButtonVariant="elastic-effect"
|
|
defaultTextAnimation="reveal-blur"
|
|
borderRadius="rounded"
|
|
contentWidth="smallMedium"
|
|
sizing="largeSizeMediumTitles"
|
|
background="noise"
|
|
cardStyle="glass-elevated"
|
|
primaryButtonStyle="gradient"
|
|
secondaryButtonStyle="radial-glow"
|
|
headingFontWeight="medium"
|
|
>
|
|
<ReactLenis root>
|
|
<div id="nav" data-section="nav">
|
|
<NavbarLayoutFloatingInline
|
|
navItems={[
|
|
{
|
|
name: "Home", id: "#hero"},
|
|
{
|
|
name: "About", id: "#about"},
|
|
{
|
|
name: "Collection", id: "#products"},
|
|
{
|
|
name: "Heritage", id: "#metrics"},
|
|
{
|
|
name: "Testimonials", id: "#testimonials"},
|
|
{
|
|
name: "Contact", id: "#contact"},
|
|
]}
|
|
brandName="Musk Alharamain"
|
|
button={{
|
|
text: "Shop Now", href: "#products"}}
|
|
animateOnLoad={true}
|
|
/>
|
|
</div>
|
|
|
|
<div id="hero" data-section="hero">
|
|
<HeroSplitKpi
|
|
background={{
|
|
variant: "animated-grid"}}
|
|
imagePosition="right"
|
|
title="Legendary Musk, Timeless Elegance"
|
|
description="Experience the sacred fragrance tradition of the Haramain. Each bottle captures centuries of Arabian perfumery crafted for those who demand authenticity and luxury."
|
|
kpis={[
|
|
{
|
|
value: "300+", label: "Years of Heritage"},
|
|
{
|
|
value: "99%", label: "Satisfied Connoisseurs"},
|
|
{
|
|
value: "50+", label: "Exclusive Blends"},
|
|
]}
|
|
enableKpiAnimation={true}
|
|
buttons={[
|
|
{
|
|
text: "Explore Our Collection", href: "#products"},
|
|
]}
|
|
imageSrc="http://img.b2bpic.net/free-photo/elegant-vegan-alcohol-arrangement_23-2149337761.jpg"
|
|
imageAlt="Luxurious Arabian perfume bottle"
|
|
mediaAnimation="slide-up"
|
|
avatars={[
|
|
{
|
|
src: "http://img.b2bpic.net/free-photo/blond-woman-warm-knit-black-beret_114579-9323.jpg", alt: "Satisfied customer"},
|
|
{
|
|
src: "http://img.b2bpic.net/free-photo/medium-shot-rick-woman-sitting-restaurant_52683-95232.jpg", alt: "Fragrance enthusiast"},
|
|
{
|
|
src: "http://img.b2bpic.net/free-photo/woman-wearing-hijab-desert_23-2149197974.jpg", alt: "Perfume connoisseur"},
|
|
{
|
|
src: "http://img.b2bpic.net/free-photo/muslim-woman-silver-color-hijab-shawl_114579-9333.jpg", alt: "Elegant patron"},
|
|
{
|
|
src: "http://img.b2bpic.net/free-photo/portrait-bearded-black-man-with-crossed-arms-wearing-wool-suit_613910-1866.jpg", alt: "Distinguished client"},
|
|
]}
|
|
avatarText="Join our 500k+ global community"
|
|
marqueeItems={[
|
|
{
|
|
type: "text-icon", text: "Exceptional Quality", icon: Award
|
|
},
|
|
{
|
|
type: "text-icon", text: "Global Reach", icon: Globe
|
|
},
|
|
{
|
|
type: "text-icon", text: "Sustainable Practices", icon: Leaf
|
|
},
|
|
{
|
|
type: "text-icon", text: "Customer Favorites", icon: Heart
|
|
},
|
|
{
|
|
type: "text-icon", text: "Handcrafted Excellence", icon: Droplet
|
|
},
|
|
]}
|
|
marqueeSpeed={40}
|
|
showMarqueeCard={true}
|
|
/>
|
|
</div>
|
|
|
|
<div id="about" data-section="about">
|
|
<SplitAbout
|
|
textboxLayout="default"
|
|
useInvertedBackground={false}
|
|
imagePosition="left"
|
|
title="A Legacy of Scent"
|
|
description="Musk Alharamain embodies the soul of Arabian perfumery, blending ancient traditions with exquisite craftsmanship. Our commitment to authentic, ethically sourced ingredients ensures each fragrance tells a story of cultural significance and timeless prestige."
|
|
bulletPoints={[
|
|
{
|
|
title: "Authentic Craftsmanship", description: "Each perfume is meticulously handcrafted using time-honored techniques passed down through generations.", icon: ShieldCheck
|
|
},
|
|
{
|
|
title: "Ethical Sourcing", description: "We responsibly source the finest natural ingredients, ensuring sustainability and unparalleled quality.", icon: Leaf
|
|
},
|
|
{
|
|
title: "Cultural Significance", description: "Our fragrances capture the rich history and spiritual essence of Arabian perfumery, connecting you to a storied past.", icon: Crown
|
|
},
|
|
]}
|
|
imageSrc="http://img.b2bpic.net/free-photo/artisan-doing-woodcutting_23-2150600784.jpg"
|
|
imageAlt="Traditional perfume making process"
|
|
mediaAnimation="slide-up"
|
|
/>
|
|
</div>
|
|
|
|
<div id="features" data-section="features">
|
|
<FeatureBento
|
|
animationType="blur-reveal"
|
|
textboxLayout="default"
|
|
useInvertedBackground={false}
|
|
features={[
|
|
{
|
|
title: "Rare & Precious Ingredients", description: "We use only the most coveted natural essences like pure Oud, Ambergris, and Saffron, ensuring a truly unique aroma.", bentoComponent: "reveal-icon", icon: Crown
|
|
},
|
|
{
|
|
title: "Artisanal Blending Mastery", description: "Each blend is a work of art, meticulously composed by master perfumers to achieve unparalleled complexity and harmony.", bentoComponent: "reveal-icon", icon: Droplet
|
|
},
|
|
{
|
|
title: "Captivating & Lasting Sillage", description: "Experience fragrances designed for exceptional longevity and a memorable, captivating trail that lingers elegantly.", bentoComponent: "reveal-icon", icon: Sparkles
|
|
},
|
|
]}
|
|
title="The Essence of Exclusivity"
|
|
description="Discover what sets Musk Alharamain apart. Our perfumes are more than just scents; they are an experience crafted with meticulous care and dedication."
|
|
/>
|
|
</div>
|
|
|
|
<div id="products" data-section="products">
|
|
<ProductCardOne
|
|
animationType="scale-rotate"
|
|
textboxLayout="default"
|
|
gridVariant="three-columns-all-equal-width"
|
|
useInvertedBackground={false}
|
|
products={[
|
|
{
|
|
id: "product-1", name: "Classic Oud", price: "$250.00", imageSrc: "http://img.b2bpic.net/free-photo/ecofriendly-beauty-product_23-2150669104.jpg", imageAlt: "Classic Oud perfume bottle"},
|
|
{
|
|
id: "product-2", name: "Amber Musk Elixir", price: "$280.00", imageSrc: "http://img.b2bpic.net/free-photo/close-up-glasses-with-champagne-bubbles_23-2148339537.jpg", imageAlt: "Amber Musk Elixir perfume bottle"},
|
|
{
|
|
id: "product-3", name: "Royal Saffron", price: "$320.00", imageSrc: "http://img.b2bpic.net/free-photo/close-up-saffron-still-life-arrangement_23-2149186950.jpg", imageAlt: "Royal Saffron perfume bottle"},
|
|
{
|
|
id: "product-4", name: "Desert Rose Dream", price: "$220.00", imageSrc: "http://img.b2bpic.net/free-photo/empty-perfume-glass-bottles-design-resource_53876-96700.jpg", imageAlt: "Desert Rose Dream perfume bottle"},
|
|
{
|
|
id: "product-5", name: "Midnight Incense", price: "$295.00", imageSrc: "http://img.b2bpic.net/free-photo/pretty-macro-blue-flower_23-2148862827.jpg", imageAlt: "Midnight Incense perfume bottle"},
|
|
{
|
|
id: "product-6", name: "Arabian Nights Essence", price: "$350.00", imageSrc: "http://img.b2bpic.net/free-photo/different-herbs-spices-blue-surface_114579-61640.jpg", imageAlt: "Arabian Nights Essence perfume bottle"},
|
|
]}
|
|
title="Our Prestigious Collection"
|
|
description="Explore our exquisite range of traditional and modern musk-based perfumes, each a masterpiece of Arabian fragrance designed for distinction."
|
|
/>
|
|
</div>
|
|
|
|
<div id="metrics" data-section="metrics">
|
|
<MetricCardFourteen
|
|
useInvertedBackground={false}
|
|
title="Our Heritage, Your Trust"
|
|
tag="Decades of Distinction"
|
|
metrics={[
|
|
{
|
|
id: "metric-1", value: "300+", description: "Years of Unbroken Tradition"},
|
|
{
|
|
id: "metric-2", value: "500K+", description: "Global Connoisseurs Served"},
|
|
{
|
|
id: "metric-3", value: "100%", description: "Commitment to Purity"},
|
|
]}
|
|
metricsAnimation="blur-reveal"
|
|
/>
|
|
</div>
|
|
|
|
<div id="testimonials" data-section="testimonials">
|
|
<TestimonialCardFifteen
|
|
useInvertedBackground={false}
|
|
testimonial="Musk Alharamain has redefined luxury for me. The fragrances are truly captivating, embodying a rich heritage that is evident in every note. Each bottle is a journey."
|
|
rating={5}
|
|
author="Aisha Rahman, Fragrance Connoisseur"
|
|
avatars={[
|
|
{
|
|
src: "http://img.b2bpic.net/free-photo/portrait-young-model-sitting-bed-looking-camera_114579-64933.jpg", alt: "Aisha Rahman"},
|
|
{
|
|
src: "http://img.b2bpic.net/free-photo/studio-portrait-serious-bearded-male-dressed-suit_613910-14795.jpg", alt: "Dr. Omar Sharif"},
|
|
{
|
|
src: "http://img.b2bpic.net/free-photo/young-beautiful-girl-smells-flowers-against-green-summer-garden_1301-6614.jpg", alt: "Layla Saeed"},
|
|
{
|
|
src: "http://img.b2bpic.net/free-photo/modern-stylish-male-dressed-elegant-suit-posing-room-with-loft-interior_613910-11849.jpg", alt: "Khalid Abdullah"},
|
|
{
|
|
src: "http://img.b2bpic.net/free-photo/best-friends-shopping-mall_329181-7984.jpg", alt: "Zara Fatima"},
|
|
]}
|
|
ratingAnimation="blur-reveal"
|
|
avatarsAnimation="blur-reveal"
|
|
/>
|
|
</div>
|
|
|
|
<div id="social-proof" data-section="social-proof">
|
|
<SocialProofOne
|
|
textboxLayout="default"
|
|
useInvertedBackground={false}
|
|
names={[
|
|
"Luxury Hotels Group", "Haute Parfumerie Magazine", "International Fragrance Awards", "Elite Boutiques Network", "Royal Collection Expos", "Global Scent Society", "Arabian Craftsmanship Guild"]}
|
|
title="Our Esteemed Partners"
|
|
description="Partnering with the finest, we ensure global reach and consistent luxury for our connoisseurs across the world."
|
|
speed={40}
|
|
showCard={true}
|
|
/>
|
|
</div>
|
|
|
|
<div id="faq" data-section="faq">
|
|
<FaqSplitText
|
|
useInvertedBackground={false}
|
|
faqs={[
|
|
{
|
|
id: "faq-1", title: "What makes Arabian fragrances unique?", content: "Arabian fragrances, particularly musk-based ones, are renowned for their rich, complex compositions and exceptional longevity, often featuring rare ingredients like Oud, Ambergris, and exotic florals."},
|
|
{
|
|
id: "faq-2", title: "How long do your perfumes last?", content: "Our high-concentration luxury perfumes are designed for superior sillage and longevity, typically lasting 8-12 hours on skin, and even longer on clothing."},
|
|
{
|
|
id: "faq-3", title: "Do you offer international shipping?", content: "Yes, we proudly offer secure international shipping to a wide range of countries, ensuring our global clientele can experience the luxury of Musk Alharamain."},
|
|
{
|
|
id: "faq-4", title: "What is your return policy for fragrances?", content: "We offer a 30-day return policy for unopened and unused products in their original packaging. Please see our full terms for more details."},
|
|
]}
|
|
sideTitle="Your Questions, Answered"
|
|
sideDescription="Delve deeper into the world of Arabian perfumery and our brand's unique philosophy, craftsmanship, and commitment to luxury."
|
|
faqsAnimation="blur-reveal"
|
|
textPosition="right"
|
|
showCard={true}
|
|
/>
|
|
</div>
|
|
|
|
<div id="contact" data-section="contact">
|
|
<ContactSplit
|
|
useInvertedBackground={false}
|
|
background={{
|
|
variant: "radial-gradient"}}
|
|
tag="Connect With Us"
|
|
title="Experience Unparalleled Service"
|
|
description="Our dedicated team is here to assist you with inquiries, custom requests, or simply to share our passion for fine Arabian fragrances. Reach out for a truly bespoke experience."
|
|
imageSrc="http://img.b2bpic.net/free-photo/christmas-tree-decoration-close-up-ball-bauble-pine-branches-background_169016-52105.jpg"
|
|
imageAlt="Luxurious perfume bottle"
|
|
mediaAnimation="slide-up"
|
|
mediaPosition="left"
|
|
inputPlaceholder="Your Email Address"
|
|
buttonText="Send Inquiry"
|
|
termsText="By sending an inquiry, you agree to our privacy policy and terms of service."
|
|
/>
|
|
</div>
|
|
|
|
<div id="footer" data-section="footer">
|
|
<FooterBaseReveal
|
|
logoText="Musk Alharamain"
|
|
columns={[
|
|
{
|
|
title: "Company", items: [
|
|
{
|
|
label: "About Us", href: "#about"},
|
|
{
|
|
label: "Heritage", href: "#metrics"},
|
|
{
|
|
label: "Partners", href: "#social-proof"},
|
|
],
|
|
},
|
|
{
|
|
title: "Collection", items: [
|
|
{
|
|
label: "All Perfumes", href: "#products"},
|
|
{
|
|
label: "Oud Blends", href: "#products"},
|
|
{
|
|
label: "Musk Elixirs", href: "#products"},
|
|
],
|
|
},
|
|
{
|
|
title: "Support", items: [
|
|
{
|
|
label: "Contact Us", href: "#contact"},
|
|
{
|
|
label: "FAQ", href: "#faq"},
|
|
{
|
|
label: "Shipping & Returns", href: "#"},
|
|
],
|
|
},
|
|
{
|
|
title: "Legal", items: [
|
|
{
|
|
label: "Privacy Policy", href: "#"},
|
|
{
|
|
label: "Terms of Service", href: "#"},
|
|
],
|
|
},
|
|
]}
|
|
copyrightText="© 2024 Musk Alharamain. All rights reserved."
|
|
/>
|
|
</div>
|
|
</ReactLenis>
|
|
</ThemeProvider>
|
|
);
|
|
}
|