225 lines
12 KiB
TypeScript
225 lines
12 KiB
TypeScript
"use client";
|
|
|
|
import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
|
|
import NavbarLayoutFloatingInline from "@/components/navbar/NavbarLayoutFloatingInline";
|
|
import HeroLogo from "@/components/sections/hero/HeroLogo";
|
|
import AboutMetric from "@/components/sections/about/AboutMetric";
|
|
import FeatureCardMedia from "@/components/sections/feature/FeatureCardMedia";
|
|
import TeamCardTen from "@/components/sections/team/TeamCardTen";
|
|
import TestimonialCardSix from "@/components/sections/testimonial/TestimonialCardSix";
|
|
import MetricCardFourteen from "@/components/sections/metrics/MetricCardFourteen";
|
|
import ContactText from "@/components/sections/contact/ContactText";
|
|
import FooterMedia from "@/components/sections/footer/FooterMedia";
|
|
import { Award, Users, Sparkles, TrendingUp, Quote } from "lucide-react";
|
|
|
|
export default function LandingPage() {
|
|
return (
|
|
<ThemeProvider
|
|
defaultButtonVariant="icon-arrow"
|
|
defaultTextAnimation="entrance-slide"
|
|
borderRadius="rounded"
|
|
contentWidth="smallMedium"
|
|
sizing="mediumLarge"
|
|
background="aurora"
|
|
cardStyle="gradient-mesh"
|
|
primaryButtonStyle="shadow"
|
|
secondaryButtonStyle="glass"
|
|
headingFontWeight="medium"
|
|
>
|
|
<div id="nav" data-section="nav">
|
|
<NavbarLayoutFloatingInline
|
|
brandName="Artistry Salon"
|
|
navItems={[
|
|
{ name: "Services", id: "services" },
|
|
{ name: "About", id: "about" },
|
|
{ name: "Team", id: "team" },
|
|
{ name: "Testimonials", id: "testimonials" }
|
|
]}
|
|
button={{ text: "Reserve Your Session", href: "contact" }}
|
|
animateOnLoad={true}
|
|
/>
|
|
</div>
|
|
|
|
<div id="hero" data-section="hero">
|
|
<HeroLogo
|
|
logoText="Artistry"
|
|
description="Where Precision Meets Individuality"
|
|
buttons={[
|
|
{ text: "Reserve Your Session", href: "contact" },
|
|
{ text: "Explore Services", href: "services" }
|
|
]}
|
|
imageSrc="http://img.b2bpic.net/free-photo/two-hairstylers-posing-standing-modern-spacy-beaty-salon_651396-986.jpg"
|
|
imageAlt="Master stylist at work"
|
|
showDimOverlay={true}
|
|
buttonAnimation="opacity"
|
|
/>
|
|
</div>
|
|
|
|
<div id="about" data-section="about">
|
|
<AboutMetric
|
|
title="A Legacy of Refined Craftsmanship and Uncompromising Standards"
|
|
metrics={[
|
|
{ icon: Award, label: "Years of Excellence", value: "25+" },
|
|
{ icon: Users, label: "Discerning Clients", value: "5,000+" },
|
|
{ icon: Sparkles, label: "Master Stylists", value: "12" },
|
|
{ icon: TrendingUp, label: "Transformation Rate", value: "99%" }
|
|
]}
|
|
metricsAnimation="slide-up"
|
|
useInvertedBackground={false}
|
|
/>
|
|
</div>
|
|
|
|
<div id="services" data-section="services">
|
|
<FeatureCardMedia
|
|
title="Bespoke Hair Artistry"
|
|
description="Experience crafted by master stylists who treat every client as a unique masterpiece"
|
|
features={[
|
|
{
|
|
id: "color", title: "Precision Color", description: "Bespoke color theory applied with luxury pigmentation for luminous, custom results", tag: "Signature Service", imageSrc: "http://img.b2bpic.net/free-photo/woman-mixing-hair-dye-bowl_23-2149167363.jpg", imageAlt: "Professional hair coloring service"
|
|
},
|
|
{
|
|
id: "cut", title: "Master Cutting", description: "Architectural precision cuts designed to enhance your individual features and style", tag: "Craftsmanship", imageSrc: "http://img.b2bpic.net/free-photo/hairdresser-grooming-their-client_23-2149205897.jpg", imageAlt: "Expert hair cutting technique"
|
|
},
|
|
{
|
|
id: "styling", title: "Haute Styling", description: "Editorial-quality styling that blends high-fashion sophistication with wearable elegance", tag: "Premium Service", imageSrc: "http://img.b2bpic.net/free-photo/woman-styling-her-hair-saloon_107420-12141.jpg", imageAlt: "Luxury styling and finishing"
|
|
}
|
|
]}
|
|
animationType="slide-up"
|
|
textboxLayout="default"
|
|
useInvertedBackground={false}
|
|
tag="Our Services"
|
|
tagAnimation="slide-up"
|
|
/>
|
|
</div>
|
|
|
|
<div id="team" data-section="team">
|
|
<TeamCardTen
|
|
title="The Masters Behind the Art"
|
|
tag="Expertise"
|
|
members={[
|
|
{
|
|
id: "founder", name: "Alexandra Devereaux", 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?_wi=1", imageAlt: "Alexandra Devereaux, Founder & Creative Director"
|
|
},
|
|
{
|
|
id: "stylist-1", name: "James Mitchell", 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?_wi=2", imageAlt: "James Mitchell, Master Colorist"
|
|
},
|
|
{
|
|
id: "stylist-2", name: "Sofia Castellanos", 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?_wi=3", imageAlt: "Sofia Castellanos, Lead Stylist"
|
|
},
|
|
{
|
|
id: "stylist-3", name: "Marcus Bennett", 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?_wi=4", imageAlt: "Marcus Bennett, Precision Cut Specialist"
|
|
}
|
|
]}
|
|
memberVariant="card"
|
|
tagAnimation="slide-up"
|
|
membersAnimation="slide-up"
|
|
useInvertedBackground={false}
|
|
/>
|
|
</div>
|
|
|
|
<div id="testimonials" data-section="testimonials">
|
|
<TestimonialCardSix
|
|
title="Trusted by Discerning Professionals"
|
|
description="Hear from affluent clients who have made Artistry their personal sanctuary for transformation"
|
|
testimonials={[
|
|
{
|
|
id: "1", name: "Catherine Laurent", handle: "CEO, Meridian Capital", testimonial: "Artistry transformed my entire look. The precision and artistry are unmatched. Every visit feels like a moment of luxury.", imageSrc: "http://img.b2bpic.net/free-photo/well-dressed-employee-outdoors_1098-2197.jpg", imageAlt: "Catherine Laurent"
|
|
},
|
|
{
|
|
id: "2", name: "Michelle Zhang", handle: "Entrepreneur & Founder", testimonial: "The level of customization is extraordinary. They understand that hair is an extension of personal branding.", imageSrc: "http://img.b2bpic.net/free-photo/pretty-young-woman-with-wet-hair-posing-studio-wearing-black-oversize-blazer-shiny-necklace_343596-7120.jpg", imageAlt: "Michelle Zhang"
|
|
},
|
|
{
|
|
id: "3", name: "Rebecca Stone", handle: "Executive Director", testimonial: "I've tried every luxury salon in the city. Artistry consistently delivers results that exceed expectations.", imageSrc: "http://img.b2bpic.net/free-photo/smiling-beautiful-middle-aged-business-woman_1262-3085.jpg?_wi=1", imageAlt: "Rebecca Stone"
|
|
},
|
|
{
|
|
id: "4", name: "Jessica Powell", handle: "Creative Director", testimonial: "The artistry here is genuine. Each consultation feels like a true partnership in creating something beautiful.", imageSrc: "http://img.b2bpic.net/free-photo/handsome-businesman-summer-city_1157-18994.jpg", imageAlt: "Jessica Powell"
|
|
},
|
|
{
|
|
id: "5", name: "Amanda Richardson", handle: "Venture Capitalist", testimonial: "Discretion, expertise, and impeccable results. Artistry is the only salon that meets my standards.", imageSrc: "http://img.b2bpic.net/free-photo/portrait-smiling-successful-businesswoman-looking-into-camera-sitting-restaurant-business-lady-with-stylish-hairstyle-wears-elegant-suit-business-meeting-attractive-appearance_8353-12611.jpg", imageAlt: "Amanda Richardson"
|
|
},
|
|
{
|
|
id: "6", name: "Victoria Moore", handle: "Fashion Consultant", testimonial: "The attention to detail is exceptional. They don't just cut hair—they craft masterpieces.", imageSrc: "http://img.b2bpic.net/free-photo/smiling-beautiful-middle-aged-business-woman_1262-3085.jpg?_wi=2", imageAlt: "Victoria Moore"
|
|
}
|
|
]}
|
|
animationType="slide-up"
|
|
textboxLayout="default"
|
|
useInvertedBackground={false}
|
|
speed={45}
|
|
topMarqueeDirection="left"
|
|
/>
|
|
</div>
|
|
|
|
<div id="metrics" data-section="metrics">
|
|
<MetricCardFourteen
|
|
title="Why Discerning Professionals Choose Artistry"
|
|
tag="Excellence Defined"
|
|
metrics={[
|
|
{
|
|
id: "1", value: "15 min", description: "Average consultation to understand your vision, lifestyle, and aesthetic goals"
|
|
},
|
|
{
|
|
id: "2", value: "100%", description: "Commitment to using only premium, internationally sourced products and pigments"
|
|
},
|
|
{
|
|
id: "3", value: "8 weeks", description: "Results longevity: Our custom formulations maintain vibrancy and health"
|
|
},
|
|
{
|
|
id: "4", value: "1 artist", description: "Per client: Your dedicated stylist provides continuity and personalized expertise"
|
|
}
|
|
]}
|
|
metricsAnimation="slide-up"
|
|
useInvertedBackground={false}
|
|
/>
|
|
</div>
|
|
|
|
<div id="contact" data-section="contact">
|
|
<ContactText
|
|
text="Ready to experience bespoke hair artistry? Reserve your private consultation with one of our master stylists today. Your transformation awaits."
|
|
animationType="reveal-blur"
|
|
buttons={[
|
|
{ text: "Book Now", href: "contact" },
|
|
{ text: "Call: +1 (555) 123-4567", href: "tel:+15551234567" }
|
|
]}
|
|
background={{ variant: "plain" }}
|
|
useInvertedBackground={false}
|
|
/>
|
|
</div>
|
|
|
|
<div id="footer" data-section="footer">
|
|
<FooterMedia
|
|
imageSrc="http://img.b2bpic.net/free-photo/lounge-lobby-area-library-sales-center_105762-1780.jpg"
|
|
imageAlt="Artistry Salon luxury interior"
|
|
logoText="Artistry"
|
|
copyrightText="© 2024 Artistry Salon. All rights reserved."
|
|
columns={[
|
|
{
|
|
title: "Services", items: [
|
|
{ label: "Precision Color", href: "#services" },
|
|
{ label: "Master Cutting", href: "#services" },
|
|
{ label: "Haute Styling", href: "#services" },
|
|
{ label: "Consultations", href: "#contact" }
|
|
]
|
|
},
|
|
{
|
|
title: "About", items: [
|
|
{ label: "Our Story", href: "#about" },
|
|
{ label: "The Team", href: "#team" },
|
|
{ label: "Testimonials", href: "#testimonials" },
|
|
{ label: "Careers", href: "#" }
|
|
]
|
|
},
|
|
{
|
|
title: "Connect", items: [
|
|
{ label: "Book Appointment", href: "#contact" },
|
|
{ label: "Contact Us", href: "#contact" },
|
|
{ label: "Privacy Policy", href: "#" },
|
|
{ label: "Terms of Service", href: "#" }
|
|
]
|
|
}
|
|
]}
|
|
/>
|
|
</div>
|
|
</ThemeProvider>
|
|
);
|
|
}
|