322 lines
18 KiB
TypeScript
322 lines
18 KiB
TypeScript
"use client";
|
|
|
|
import Link from "next/link";
|
|
import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
|
|
import NavbarLayoutFloatingInline from "@/components/navbar/NavbarLayoutFloatingInline";
|
|
import HeroBillboardTestimonial from "@/components/sections/hero/HeroBillboardTestimonial";
|
|
import SplitAbout from "@/components/sections/about/SplitAbout";
|
|
import FeatureCardTwentyFive from "@/components/sections/feature/FeatureCardTwentyFive";
|
|
import ProductCardThree from "@/components/sections/product/ProductCardThree";
|
|
import TestimonialCardSixteen from "@/components/sections/testimonial/TestimonialCardSixteen";
|
|
import SocialProofOne from "@/components/sections/socialProof/SocialProofOne";
|
|
import ContactCTA from "@/components/sections/contact/ContactCTA";
|
|
import FooterSimple from "@/components/sections/footer/FooterSimple";
|
|
import { Sparkles, Leaf, Beaker, Award, Heart, Mail, Check, Star, CheckCircle, HelpCircle } from "lucide-react";
|
|
|
|
export default function HomePage() {
|
|
return (
|
|
<ThemeProvider
|
|
defaultButtonVariant="shift-hover"
|
|
defaultTextAnimation="background-highlight"
|
|
borderRadius="rounded"
|
|
contentWidth="medium"
|
|
sizing="largeSmall"
|
|
background="fluid"
|
|
cardStyle="glass-elevated"
|
|
primaryButtonStyle="flat"
|
|
secondaryButtonStyle="layered"
|
|
headingFontWeight="semibold"
|
|
>
|
|
{/* Navbar */}
|
|
<div id="nav" data-section="nav">
|
|
<NavbarLayoutFloatingInline
|
|
brandName="LuxeHair"
|
|
navItems={[
|
|
{ name: "Home", id: "/" },
|
|
{ name: "Products", id: "/products" },
|
|
{ name: "About", id: "/about" },
|
|
{ name: "Contact", id: "/contact" },
|
|
]}
|
|
button={{
|
|
text: "Shop Now", href: "/products"
|
|
}}
|
|
animateOnLoad={true}
|
|
/>
|
|
</div>
|
|
|
|
{/* Hero Section */}
|
|
<div id="hero" data-section="hero" className="relative min-h-screen">
|
|
<HeroBillboardTestimonial
|
|
background={{ variant: "plain" }}
|
|
title="Elevate Your Hair Care Journey"
|
|
description="Discover our premium natural hair products and revolutionary 100% natural and capsule-based coloring systems. Crafted for excellence, designed for everyone."
|
|
tag="Premium Hair Care"
|
|
tagIcon={Sparkles}
|
|
tagAnimation="slide-up"
|
|
imageSrc="http://img.b2bpic.net/free-photo/woman-washing-head-hairsalon_1157-27181.jpg"
|
|
imageAlt="Premium hair care products and natural coloring systems"
|
|
mediaAnimation="slide-up"
|
|
testimonials={[
|
|
{
|
|
name: "Sofia Martinez", handle: "Salon Owner, Madrid", testimonial: "The results are absolutely stunning. My clients love the natural finish and how their hair feels after using these products.", rating: 5,
|
|
imageSrc: "http://img.b2bpic.net/free-photo/front-view-beautiful-caucasian-woman-black-medical-uniform-standing-studio-competent-female-cosmetologist-holding-arms-crossed-grey-background_7502-9241.jpg", imageAlt: "Sofia Martinez"
|
|
},
|
|
{
|
|
name: "Elena Rossi", handle: "Beauty Influencer, Milan", testimonial: "Finally, a coloring system that doesn't compromise hair health. The capsule technology is a game-changer for my community.", rating: 5,
|
|
imageSrc: "http://img.b2bpic.net/free-photo/beautiful-young-woman-looking-camera-home_1301-4258.jpg", imageAlt: "Elena Rossi"
|
|
},
|
|
{
|
|
name: "Isabella Bianchi", handle: "Professional Stylist, Rome", testimonial: "My clients see visible improvements in just one treatment. The 100% natural formula is what they've been asking for.", rating: 5,
|
|
imageSrc: "http://img.b2bpic.net/free-photo/portrait-young-woman-black-sweater-standing-posing_114579-81883.jpg", imageAlt: "Isabella Bianchi"
|
|
},
|
|
]}
|
|
buttons={[
|
|
{ text: "Shop Natural Hair Color", href: "/products" },
|
|
{ text: "Learn More", href: "#about" },
|
|
]}
|
|
buttonAnimation="blur-reveal"
|
|
useInvertedBackground={false}
|
|
/>
|
|
</div>
|
|
|
|
{/* About Section */}
|
|
<div id="about" data-section="about" className="py-16 lg:py-24">
|
|
<SplitAbout
|
|
title="Our Heritage in Premium Hair Care"
|
|
description="For over a decade, we've been crafting exceptional hair care solutions that honor both nature and science. Our commitment to purity and innovation drives every product we create."
|
|
tag="Our Story"
|
|
tagIcon={Leaf}
|
|
tagAnimation="opacity"
|
|
bulletPoints={[
|
|
{
|
|
title: "100% Natural Formula System", description: "Our flagship natural coloring system uses only plant-based ingredients, preserving hair integrity while delivering stunning color.", icon: Leaf,
|
|
},
|
|
{
|
|
title: "Patented Capsule Technology", description: "Our proprietary capsule-based coloring system ensures precision, consistency, and zero waste in application.", icon: Beaker,
|
|
},
|
|
{
|
|
title: "Professional & Consumer Trusted", description: "Used by top salons worldwide and trusted by beauty professionals and individual enthusiasts alike.", icon: Award,
|
|
},
|
|
]}
|
|
imageSrc="http://img.b2bpic.net/free-photo/composition-spa-bathroom-elements_23-2147999953.jpg?_wi=1"
|
|
imageAlt="LuxeHair heritage and product craftsmanship"
|
|
mediaAnimation="opacity"
|
|
imagePosition="right"
|
|
textboxLayout="default"
|
|
useInvertedBackground={true}
|
|
/>
|
|
</div>
|
|
|
|
{/* Features Section */}
|
|
<div id="features" data-section="features" className="py-16 lg:py-24">
|
|
<FeatureCardTwentyFive
|
|
title="Why Choose LuxeHair"
|
|
description="Experience the perfect blend of nature and innovation"
|
|
tag="Our Advantages"
|
|
tagIcon={Check}
|
|
tagAnimation="slide-up"
|
|
features={[
|
|
{
|
|
title: "100% Natural Coloring", description: "Pure botanical extracts deliver rich, lasting color without ammonia or harsh chemicals. Your hair stays healthy and vibrant.", icon: Leaf,
|
|
mediaItems: [
|
|
{
|
|
imageSrc: "http://img.b2bpic.net/free-photo/colored-cloths-arrangement-with-natural-pigments_23-2148734437.jpg?_wi=1", imageAlt: "Natural coloring process"
|
|
},
|
|
{
|
|
imageSrc: "http://img.b2bpic.net/free-photo/indoor-fashion-lifestyle-portrait-young-fresh-amazing-woman-posing-bed-wearing-seductive-lingerie-relaxing-having-fun-morning-time_291049-528.jpg?_wi=1", imageAlt: "Beautiful natural color results"
|
|
},
|
|
],
|
|
},
|
|
{
|
|
title: "Capsule Innovation", description: "Our patented capsule system guarantees consistent application, minimal waste, and professional results every time.", icon: Beaker,
|
|
mediaItems: [
|
|
{
|
|
imageSrc: "http://img.b2bpic.net/free-photo/close-up-white-pill-plastic-blister-pack_9975-133834.jpg?_wi=1", imageAlt: "Capsule technology system"
|
|
},
|
|
{
|
|
imageSrc: "http://img.b2bpic.net/free-photo/woman-getting-treatment-hairdresser-shop_23-2149229745.jpg?_wi=1", imageAlt: "Precision capsule application"
|
|
},
|
|
],
|
|
},
|
|
{
|
|
title: "Professional-Grade Quality", description: "Salon-trusted formulations that deliver results professionals rely on, now available for home and professional use.", icon: Sparkles,
|
|
mediaItems: [
|
|
{
|
|
imageSrc: "http://img.b2bpic.net/free-photo/woman-donating-hair-cancer_657883-597.jpg?_wi=1", imageAlt: "Professional salon application"
|
|
},
|
|
{
|
|
imageSrc: "http://img.b2bpic.net/free-photo/high-angle-woman-hair-salon_23-2150668446.jpg?_wi=1", imageAlt: "Expert results showcase"
|
|
},
|
|
],
|
|
},
|
|
{
|
|
title: "Hair Health First", description: "Formulated with nourishing oils and botanicals that strengthen and protect your hair while coloring beautifully.", icon: Heart,
|
|
mediaItems: [
|
|
{
|
|
imageSrc: "http://img.b2bpic.net/free-photo/young-beautiful-plump-woman-loving-her-body_23-2149180813.jpg", imageAlt: "Hair health improvement"
|
|
},
|
|
{
|
|
imageSrc: "http://img.b2bpic.net/free-photo/rear-view-beautiful-brunette-woman-with-golden-tan-wearing-bikini-standing-profile-green-leaves_197531-22588.jpg", imageAlt: "Nourished, vibrant hair"
|
|
},
|
|
],
|
|
},
|
|
]}
|
|
animationType="slide-up"
|
|
textboxLayout="default"
|
|
useInvertedBackground={false}
|
|
/>
|
|
</div>
|
|
|
|
{/* Products Section */}
|
|
<div id="products" data-section="products" className="py-16 lg:py-24">
|
|
<ProductCardThree
|
|
title="Our Product Range"
|
|
description="Explore our carefully curated collection of natural and innovative hair care solutions"
|
|
tag="Shop Premium Products"
|
|
tagIcon={Sparkles}
|
|
tagAnimation="slide-up"
|
|
products={[
|
|
{
|
|
id: "natural-color-deep-brown", name: "Natural Color System - Deep Brown", price: "€89.00", imageSrc: "http://img.b2bpic.net/free-photo/wave-sandstone-rock-formations-arizona-united-states_181624-44179.jpg?_wi=1", imageAlt: "Natural Color System - Deep Brown", initialQuantity: 1,
|
|
},
|
|
{
|
|
id: "natural-color-blonde", name: "Natural Color System - Golden Blonde", price: "€89.00", imageSrc: "http://img.b2bpic.net/free-vector/cosmetics-beauty-product-bottles-advertising-banner_33099-1799.jpg?_wi=1", imageAlt: "Natural Color System - Golden Blonde", initialQuantity: 1,
|
|
},
|
|
{
|
|
id: "capsule-auburn", name: "Capsule Color System - Auburn", price: "€79.00", imageSrc: "http://img.b2bpic.net/free-photo/high-angle-pills_23-2148533046.jpg?_wi=1", imageAlt: "Capsule Color System - Auburn", initialQuantity: 1,
|
|
},
|
|
{
|
|
id: "premium-shampoo", name: "Premium Botanical Shampoo", price: "€45.00", imageSrc: "http://img.b2bpic.net/free-photo/close-up-elegant-beauty-selfcare-treatment_23-2149238253.jpg?_wi=1", imageAlt: "Premium Botanical Shampoo", initialQuantity: 1,
|
|
},
|
|
{
|
|
id: "color-treatment", name: "Color-Protecting Treatment Mask", price: "€55.00", imageSrc: "http://img.b2bpic.net/free-photo/side-view-woman-hair-slugging-night-routine_23-2150396588.jpg?_wi=1", imageAlt: "Color-Protecting Treatment Mask", initialQuantity: 1,
|
|
},
|
|
{
|
|
id: "starter-kit", name: "Starter Luxury Kit", price: "€199.00", imageSrc: "http://img.b2bpic.net/free-photo/bottom-view-men-cologne-box-heart-shaped-box-flowers-table_140725-144825.jpg?_wi=1", imageAlt: "Starter Luxury Kit with complete range", initialQuantity: 1,
|
|
},
|
|
]}
|
|
gridVariant="two-columns-alternating-heights"
|
|
animationType="slide-up"
|
|
textboxLayout="default"
|
|
useInvertedBackground={true}
|
|
/>
|
|
</div>
|
|
|
|
{/* Testimonials Section */}
|
|
<div id="testimonials" data-section="testimonials" className="py-16 lg:py-24">
|
|
<TestimonialCardSixteen
|
|
title="Loved by Professionals & Consumers"
|
|
description="Real stories from real people who've transformed their hair care routine with LuxeHair"
|
|
tag="Client Success"
|
|
tagIcon={Star}
|
|
tagAnimation="slide-up"
|
|
testimonials={[
|
|
{
|
|
id: "1", name: "Marco Colombo", role: "Salon Owner", company: "Studio Marco - Milan", rating: 5,
|
|
imageSrc: "http://img.b2bpic.net/free-photo/handsome-male-entrepreneur-wearing-white-shirt-posing-standing-with-crossed-arms-indoors_7502-9695.jpg?_wi=1", imageAlt: "Marco Colombo"
|
|
},
|
|
{
|
|
id: "2", name: "Giulia Rossi", role: "Hair Stylist", company: "Bella Salon - Rome", rating: 5,
|
|
imageSrc: "http://img.b2bpic.net/free-photo/portrait-glad-pretty-woman-dark-sweater-standing-near-lamps_114579-81875.jpg?_wi=1", imageAlt: "Giulia Rossi"
|
|
},
|
|
{
|
|
id: "3", name: "Alessandra Bianchi", role: "Beauty Enthusiast", company: "Self-employed", rating: 5,
|
|
imageSrc: "http://img.b2bpic.net/free-photo/young-pretty-woman-outdoors_624325-862.jpg?_wi=1", imageAlt: "Alessandra Bianchi"
|
|
},
|
|
{
|
|
id: "4", name: "Lorenzo Rossi", role: "Salon Manager", company: "Premium Hair Studio - Venice", rating: 5,
|
|
imageSrc: "http://img.b2bpic.net/free-photo/portrait-cheerful-man-suit-cloakroom_171337-19180.jpg", imageAlt: "Lorenzo Rossi"
|
|
},
|
|
]}
|
|
kpiItems={[
|
|
{ value: "15,000+", label: "Satisfied Customers" },
|
|
{ value: "98%", label: "Satisfaction Rate" },
|
|
{ value: "500+", label: "Professional Salons" },
|
|
]}
|
|
animationType="slide-up"
|
|
textboxLayout="default"
|
|
useInvertedBackground={false}
|
|
/>
|
|
</div>
|
|
|
|
{/* Social Proof Section */}
|
|
<div id="social-proof" data-section="social-proof" className="py-12 lg:py-16">
|
|
<SocialProofOne
|
|
title="Trusted by Leading Brands & Professionals"
|
|
description="Our products are preferred by top salons and beauty brands across Europe"
|
|
tag="Trusted Partners"
|
|
tagIcon={CheckCircle}
|
|
tagAnimation="slide-up"
|
|
names={[
|
|
"Premium Salon Network", "Beauty Professional Guild", "Natural Beauty Collective", "European Hair Experts", "Luxury Beauty Institute", "Professional Stylists Association", "Eco Beauty Alliance"
|
|
]}
|
|
textboxLayout="default"
|
|
useInvertedBackground={true}
|
|
speed={35}
|
|
showCard={true}
|
|
/>
|
|
</div>
|
|
|
|
{/* Contact CTA Section */}
|
|
<div id="contact-cta" data-section="contact-cta" className="py-16 lg:py-24">
|
|
<ContactCTA
|
|
tag="Get in Touch"
|
|
tagIcon={Mail}
|
|
tagAnimation="slide-up"
|
|
title="Ready to Transform Your Hair Care Routine?"
|
|
description="Whether you're a salon professional looking to elevate your services or an individual seeking premium natural products, we're here to help. Reach out today and discover the LuxeHair difference."
|
|
buttons={[
|
|
{ text: "Contact Sales", href: "/contact" },
|
|
{ text: "Shop Collections", href: "/products" },
|
|
]}
|
|
buttonAnimation="slide-up"
|
|
background={{ variant: "gradient-bars" }}
|
|
useInvertedBackground={true}
|
|
/>
|
|
</div>
|
|
|
|
{/* Footer */}
|
|
<div id="footer" data-section="footer" className="py-12 lg:py-16">
|
|
<FooterSimple
|
|
columns={[
|
|
{
|
|
title: "Product", items: [
|
|
{ label: "Natural Color System", href: "/products" },
|
|
{ label: "Capsule Technology", href: "/products" },
|
|
{ label: "Hair Care Range", href: "/products" },
|
|
{ label: "Collections", href: "/products" },
|
|
],
|
|
},
|
|
{
|
|
title: "Company", items: [
|
|
{ label: "About Us", href: "/about" },
|
|
{ label: "Our Story", href: "/about" },
|
|
{ label: "Careers", href: "#" },
|
|
{ label: "Blog", href: "#" },
|
|
],
|
|
},
|
|
{
|
|
title: "Support", items: [
|
|
{ label: "Contact Us", href: "/contact" },
|
|
{ label: "FAQ", href: "#faq" },
|
|
{ label: "Shipping Info", href: "#" },
|
|
{ label: "Returns", href: "#" },
|
|
],
|
|
},
|
|
{
|
|
title: "Legal", items: [
|
|
{ label: "Privacy Policy", href: "#" },
|
|
{ label: "Terms of Service", href: "#" },
|
|
{ label: "Cookies", href: "#" },
|
|
{ label: "Sustainability", href: "#" },
|
|
],
|
|
},
|
|
]}
|
|
bottomLeftText="© 2025 LuxeHair. All rights reserved."
|
|
bottomRightText="Crafted with care for hair that matters."
|
|
/>
|
|
</div>
|
|
</ThemeProvider>
|
|
);
|
|
}
|