195 lines
11 KiB
TypeScript
195 lines
11 KiB
TypeScript
"use client"
|
|
|
|
import ReactLenis from "lenis/react";
|
|
import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
|
|
import NavbarLayoutFloatingOverlay from '@/components/navbar/NavbarLayoutFloatingOverlay/NavbarLayoutFloatingOverlay';
|
|
import HeroBillboardRotatedCarousel from '@/components/sections/hero/HeroBillboardRotatedCarousel';
|
|
import ProductCardFour from '@/components/sections/product/ProductCardFour';
|
|
import FeatureCardSix from '@/components/sections/feature/FeatureCardSix';
|
|
import FeatureCardOne from '@/components/sections/feature/FeatureCardOne';
|
|
import MetricCardEleven from '@/components/sections/metrics/MetricCardEleven';
|
|
import BlogCardOne from '@/components/sections/blog/BlogCardOne';
|
|
import FaqSplitMedia from '@/components/sections/faq/FaqSplitMedia';
|
|
import ContactSplitForm from '@/components/sections/contact/ContactSplitForm';
|
|
import FooterLogoEmphasis from '@/components/sections/footer/FooterLogoEmphasis';
|
|
import SocialProofOne from '@/components/sections/socialProof/SocialProofOne';
|
|
import { Sparkles, Award, Beaker, TrendingUp, Heart, HelpCircle, BookOpen } from 'lucide-react';
|
|
|
|
export default function LandingPage() {
|
|
return (
|
|
<ThemeProvider
|
|
defaultButtonVariant="bounce-effect"
|
|
defaultTextAnimation="background-highlight"
|
|
borderRadius="rounded"
|
|
contentWidth="small"
|
|
sizing="mediumLargeSizeLargeTitles"
|
|
background="circleGradient"
|
|
cardStyle="layered-gradient"
|
|
primaryButtonStyle="radial-glow"
|
|
secondaryButtonStyle="glass"
|
|
headingFontWeight="semibold"
|
|
>
|
|
<ReactLenis root>
|
|
<div id="nav" data-section="nav">
|
|
<NavbarLayoutFloatingOverlay
|
|
brandName="LUMINA"
|
|
navItems={[
|
|
{ name: "Services", id: "products" },
|
|
{ name: "Experience", id: "ingredients" },
|
|
{ name: "Blog", id: "blog" },
|
|
{ name: "Contact", id: "contact" }
|
|
]}
|
|
button={{ text: "Book Now", href: "#contact" }}
|
|
/>
|
|
</div>
|
|
|
|
<div id="hero" data-section="hero">
|
|
<HeroBillboardRotatedCarousel
|
|
title="Your Radiance, Reimagined"
|
|
description="Step into a sanctuary of bespoke skincare and rejuvenating beauty treatments tailored to reveal your most luminous self."
|
|
tag="Luxury Beauty Salon"
|
|
tagIcon={Sparkles}
|
|
tagAnimation="slide-up"
|
|
background={{ variant: "plain" }}
|
|
buttons={[
|
|
{ text: "Explore Services", href: "#products" },
|
|
{ text: "View Gallery", href: "#influencers" }
|
|
]}
|
|
buttonAnimation="slide-up"
|
|
carouselItems={[
|
|
{ id: "1", imageSrc: "http://img.b2bpic.net/free-photo/interior-latino-hair-salon_23-2150555185.jpg", imageAlt: "Elegant salon interior" },
|
|
{ id: "2", imageSrc: "http://img.b2bpic.net/free-photo/young-woman-lies-with-closed-eyes-cosmetologist-making-procedure_158595-4609.jpg", imageAlt: "Skincare product application" },
|
|
{ id: "3", imageSrc: "http://img.b2bpic.net/free-photo/spa-composition-with-personal-hygiene-items-white-background-isolated_169016-19476.jpg", imageAlt: "Professional spa tools" },
|
|
{ id: "4", imageSrc: "http://img.b2bpic.net/free-photo/beautician-with-brush-applies-white-moisturizing-mask-face-young-girl-client-spa-beauty-salon_343596-4247.jpg", imageAlt: "Relaxing facial treatment" },
|
|
{ id: "5", imageSrc: "http://img.b2bpic.net/free-photo/top-view-wooden-spoon-leaves_23-2148677993.jpg", imageAlt: "Natural botanical ingredients" },
|
|
{ id: "6", imageSrc: "http://img.b2bpic.net/free-photo/tranquil-spa-pool-meditation-space_23-2151935106.jpg", imageAlt: "Calm treatment room" }
|
|
]}
|
|
autoPlay={true}
|
|
/>
|
|
</div>
|
|
|
|
<div id="social-proof" data-section="social-proof">
|
|
<SocialProofOne
|
|
title="Trusted By Style Icons"
|
|
description="Our expertise in advanced aesthetic care is recognized by top beauty publications."
|
|
names={["Vogue Beauty", "Harper's Bazaar", "Allure", "Elle", "Byrdie"]}
|
|
/>
|
|
</div>
|
|
|
|
<div id="products" data-section="products">
|
|
<ProductCardFour
|
|
title="Our Signature Services"
|
|
description="From revitalizing facials to precision skin analysis, explore our curated selection of high-end beauty rituals."
|
|
tag="Beauty Menu"
|
|
tagIcon={Award}
|
|
products={[
|
|
{ id: "1", name: "Luminous Hydration Facial", price: "$150", variant: "60 Min", imageSrc: "http://img.b2bpic.net/free-photo/woman-lying-massage-room-face-up_1262-413.jpg", onProductClick: () => window.location.href = '#contact' },
|
|
{ id: "2", name: "Gold Radiance Treatment", price: "$280", variant: "90 Min", imageSrc: "http://img.b2bpic.net/free-photo/close-up-smiley-woman-using-serum_23-2148888231.jpg", onProductClick: () => window.location.href = '#contact' },
|
|
{ id: "3", name: "Botanical Peel", price: "$120", variant: "45 Min", imageSrc: "http://img.b2bpic.net/free-photo/woman-looking-camera-with-facial-mud-treatment_23-2148287336.jpg", onProductClick: () => window.location.href = '#contact' },
|
|
{ id: "4", name: "Sculpt & Contour", price: "$210", variant: "75 Min", imageSrc: "http://img.b2bpic.net/free-photo/doctor-examining-womans-face-cosmetic-treatment_107420-65108.jpg", onProductClick: () => window.location.href = '#contact' }
|
|
]}
|
|
buttons={[{text: "Book Now", href: "#contact"}]}
|
|
gridVariant="uniform-all-items-equal"
|
|
animationType="slide-up"
|
|
textboxLayout="default"
|
|
useInvertedBackground={false}
|
|
/>
|
|
</div>
|
|
|
|
<div id="ingredients" data-section="ingredients">
|
|
<FeatureCardSix
|
|
title="The Lumina Promise"
|
|
description="We combine scientific precision with a holistic approach to ensure your beauty reflects your vitality."
|
|
tag="Philosophy"
|
|
tagIcon={Beaker}
|
|
features={[
|
|
{ title: "Organic Botanical Blends", description: "Pure, sustainably sourced essences for maximum skin nourishment.", imageSrc: "http://img.b2bpic.net/free-photo/ecological-cleaning-products-concept_23-2148781951.jpg" },
|
|
{ title: "Expert Aestheticians", description: "Trained in the latest global techniques for holistic care.", imageSrc: "http://img.b2bpic.net/free-photo/young-woman-using-face-treatment-her-client_23-2149037150.jpg" },
|
|
{ title: "Personalized Routines", description: "We tailor every session to your unique skin journey.", imageSrc: "http://img.b2bpic.net/free-photo/front-view-young-female-pink-bathrobe-after-shower-writing-blue-wall-beauty-water-cream-selfcare-shower-bathroom_140725-65463.jpg" }
|
|
]}
|
|
/>
|
|
</div>
|
|
|
|
<div id="influencers" data-section="influencers">
|
|
<FeatureCardOne
|
|
title="The Lumina Glow"
|
|
description="See real results from our satisfied clients who trust Lumina with their radiance."
|
|
tag="Community Gallery"
|
|
tagIcon={Heart}
|
|
animationType="depth-3d"
|
|
features={[
|
|
{ title: "Before & After", description: "Skin transformation journeys", imageSrc: "http://img.b2bpic.net/free-photo/side-view-woman-before-after-rhinoplasty_23-2149947586.jpg" },
|
|
{ title: "Our Space", description: "Serene treatment rooms", imageSrc: "http://img.b2bpic.net/free-photo/serene-spa-interior_23-2151945692.jpg" },
|
|
{ title: "Client Care", description: "Dedicated attention", imageSrc: "http://img.b2bpic.net/free-photo/women-discussing-spa-treatment_23-2149871830.jpg" }
|
|
]}
|
|
/>
|
|
</div>
|
|
|
|
<div id="metrics" data-section="metrics">
|
|
<MetricCardEleven
|
|
title="Proven Results"
|
|
description="By the numbers, our commitment to excellence shows."
|
|
tag="Our Impact"
|
|
tagIcon={TrendingUp}
|
|
metrics={[
|
|
{ id: "1", value: "98%", title: "Client Retention", description: "Returning for personalized care.", imageSrc: "http://img.b2bpic.net/free-photo/after-bath_1098-14737.jpg" },
|
|
{ id: "2", value: "5k+", title: "Facials Performed", description: "Over 5,000 satisfied guests.", imageSrc: "http://img.b2bpic.net/free-photo/woman-cosmetologist-making-beauty-procedures_1303-26028.jpg" }
|
|
]}
|
|
animationType="slide-up"
|
|
/>
|
|
</div>
|
|
|
|
<div id="blog" data-section="blog">
|
|
<BlogCardOne
|
|
title="Beauty Journal"
|
|
description="Expert tips, seasonal skin advice, and the latest trends in aesthetic medicine."
|
|
tag="Knowledge"
|
|
tagIcon={BookOpen}
|
|
blogs={[
|
|
{ id: "1", category: "Skincare", title: "Spring Skin Prep", excerpt: "How to transition your routine.", imageSrc: "http://img.b2bpic.net/free-photo/close-up-portrait-beautiful-woman-with-daisies_23-2151993995.jpg", authorName: "Sarah L.", authorAvatar: "http://img.b2bpic.net/free-photo/portrait-beautiful-blond-woman-with-trendy-hairstyle_23-2149430888.jpg", date: "Mar 2026" },
|
|
{ id: "2", category: "Advice", title: "The Power of Vitamin C", excerpt: "Achieve radiant skin easily.", imageSrc: "http://img.b2bpic.net/free-photo/spa-arrangement-with-cremes_23-2148549082.jpg", authorName: "James M.", authorAvatar: "http://img.b2bpic.net/free-photo/close-up-portrait-smiley-man_23-2148221703.jpg", date: "Feb 2026" }
|
|
]}
|
|
animationType="slide-up"
|
|
/>
|
|
</div>
|
|
|
|
<div id="faq" data-section="faq">
|
|
<FaqSplitMedia
|
|
title="Questions Answered"
|
|
description="Everything you need to know about our salon policies and treatments."
|
|
tag="Help"
|
|
tagIcon={HelpCircle}
|
|
imageSrc="http://img.b2bpic.net/free-photo/still-life-yoga-equipment_23-2151725242.jpg"
|
|
faqs={[
|
|
{ id: "1", title: "What should I bring?", content: "Just bring your curiosity—we provide everything else." },
|
|
{ id: "2", title: "Do you offer trials?", content: "Yes, our intro consultations are perfect for starting." }
|
|
]}
|
|
faqsAnimation="slide-up"
|
|
/>
|
|
</div>
|
|
|
|
<div id="contact" data-section="contact">
|
|
<ContactSplitForm
|
|
title="Book Your Session"
|
|
description="Reserve your spot in our peaceful urban sanctuary today."
|
|
inputs={[
|
|
{ name: "name", type: "text", placeholder: "Full Name", required: true },
|
|
{ name: "email", type: "email", placeholder: "Email", required: true }
|
|
]}
|
|
imageSrc="http://img.b2bpic.net/free-photo/empty-hotel-lounge-with-cozy-furniture_482257-67425.jpg"
|
|
/>
|
|
</div>
|
|
|
|
<div id="footer" data-section="footer">
|
|
<FooterLogoEmphasis
|
|
logoText="LUMINA"
|
|
columns={[
|
|
{ items: [{ label: "Shop" }, { label: "Book" }] },
|
|
{ items: [{ label: "About" }, { label: "Blog" }] }
|
|
]}
|
|
/>
|
|
</div>
|
|
</ReactLenis>
|
|
</ThemeProvider>
|
|
);
|
|
} |