224 lines
11 KiB
TypeScript
224 lines
11 KiB
TypeScript
"use client"
|
||
|
||
import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
|
||
import NavbarStyleApple from '@/components/navbar/NavbarStyleApple/NavbarStyleApple';
|
||
import HeroSplitKpi from '@/components/sections/hero/HeroSplitKpi';
|
||
import TextAbout from '@/components/sections/about/TextAbout';
|
||
import FeatureCardSixteen from '@/components/sections/feature/FeatureCardSixteen';
|
||
import MetricCardFourteen from '@/components/sections/metrics/MetricCardFourteen';
|
||
import TestimonialCardSix from '@/components/sections/testimonial/TestimonialCardSix';
|
||
import ContactCTA from '@/components/sections/contact/ContactCTA';
|
||
import FooterLogoReveal from '@/components/sections/footer/FooterLogoReveal';
|
||
import { Gift, Heart, Phone, Scissors, Sparkles, Star } from 'lucide-react';
|
||
|
||
export default function LandingPage() {
|
||
return (
|
||
<ThemeProvider
|
||
defaultButtonVariant="elastic-effect"
|
||
defaultTextAnimation="background-highlight"
|
||
borderRadius="pill"
|
||
contentWidth="compact"
|
||
sizing="mediumLargeSizeMediumTitles"
|
||
background="none"
|
||
cardStyle="glass-depth"
|
||
primaryButtonStyle="radial-glow"
|
||
secondaryButtonStyle="solid"
|
||
headingFontWeight="light"
|
||
>
|
||
<div id="nav" data-section="nav">
|
||
<NavbarStyleApple
|
||
brandName="Shahzad's Glamour"
|
||
navItems={[
|
||
{ name: "Home", id: "home" },
|
||
{ name: "Services", id: "services" },
|
||
{ name: "Reviews", id: "reviews" },
|
||
{ name: "Contact", id: "contact" }
|
||
]}
|
||
/>
|
||
</div>
|
||
|
||
<div id="hero" data-section="hero">
|
||
<HeroSplitKpi
|
||
title="Look Your Best. Feel Your Best."
|
||
description="Professional hair, skin, and grooming services for the whole family in a relaxing and hygienic environment."
|
||
tag="Shahzad's Glamour"
|
||
tagIcon={Sparkles}
|
||
tagAnimation="slide-up"
|
||
buttons={[
|
||
{ text: "Book Your Appointment", href: "#contact" },
|
||
{ text: "Call Now", href: "tel:+1234567890" }
|
||
]}
|
||
buttonAnimation="slide-up"
|
||
background={{ variant: "radial-gradient" }}
|
||
kpis={[
|
||
{ value: "5★", label: "Customer Experience" },
|
||
{ value: "100%", label: "Clean & Hygienic" },
|
||
{ value: "All Ages", label: "Family Friendly" }
|
||
]}
|
||
enableKpiAnimation={true}
|
||
mediaAnimation="blur-reveal"
|
||
imageSrc="http://img.b2bpic.net/free-photo/full-shot-woman-reading-tarot-home_23-2150276061.jpg"
|
||
imageAlt="luxury family salon interior modern"
|
||
imagePosition="right"
|
||
className="min-h-screen"
|
||
titleClassName="text-5xl md:text-6xl font-light"
|
||
descriptionClassName="text-lg md:text-xl font-light opacity-90"
|
||
/>
|
||
</div>
|
||
|
||
<div id="about" data-section="about">
|
||
<TextAbout
|
||
tag="Welcome"
|
||
tagIcon={Heart}
|
||
tagAnimation="slide-up"
|
||
title="Welcome to Shahzad's Glamour – The Family Salon"
|
||
useInvertedBackground={false}
|
||
buttons={[
|
||
{ text: "Explore Our Services", href: "#services" }
|
||
]}
|
||
buttonAnimation="slide-up"
|
||
className="py-20"
|
||
titleClassName="text-4xl md:text-5xl font-light mb-6"
|
||
/>
|
||
</div>
|
||
|
||
<div id="services" data-section="services">
|
||
<FeatureCardSixteen
|
||
title="Our Services"
|
||
description="We offer a comprehensive range of professional beauty and grooming services tailored for every family member."
|
||
tag="Services"
|
||
tagIcon={Scissors}
|
||
tagAnimation="slide-up"
|
||
textboxLayout="default"
|
||
useInvertedBackground={true}
|
||
negativeCard={{
|
||
items: [
|
||
"Limited chair availability", "Long wait times elsewhere", "Rushed appointments", "One-size-fits-all approach"
|
||
]
|
||
}}
|
||
positiveCard={{
|
||
items: [
|
||
"Hair services (cuts, styling, coloring)", "Men's grooming & beard styling", "Beauty treatments (facials, waxing, threading)", "Kids haircuts in a fun environment"
|
||
]
|
||
}}
|
||
animationType="scale-rotate"
|
||
buttons={[
|
||
{ text: "Book Now", href: "#contact" }
|
||
]}
|
||
buttonAnimation="slide-up"
|
||
textBoxTitleClassName="text-4xl md:text-5xl font-light mb-4"
|
||
textBoxDescriptionClassName="text-lg font-light opacity-90"
|
||
/>
|
||
</div>
|
||
|
||
<div id="why-choose" data-section="why-choose">
|
||
<MetricCardFourteen
|
||
tag="Why Choose Us"
|
||
tagAnimation="slide-up"
|
||
title="Why Customers Love Shahzad's Glamour"
|
||
metrics={[
|
||
{
|
||
id: "professional", value: "Expert Stylists", description: "Trained professionals delivering consistent quality and care"
|
||
},
|
||
{
|
||
id: "clean", value: "100% Hygienic", description: "High standards of cleanliness and sanitation maintained always"
|
||
},
|
||
{
|
||
id: "atmosphere", value: "Relaxing Vibe", description: "Calm and comfortable environment for your complete experience"
|
||
},
|
||
{
|
||
id: "results", value: "Happy Customers", description: "Consistent quality results that build confidence and trust"
|
||
}
|
||
]}
|
||
metricsAnimation="blur-reveal"
|
||
useInvertedBackground={false}
|
||
titleClassName="text-4xl md:text-5xl font-light mb-4"
|
||
metricClassName="p-6"
|
||
/>
|
||
</div>
|
||
|
||
<div id="testimonials" data-section="testimonials">
|
||
<TestimonialCardSix
|
||
title="What Our Customers Say"
|
||
description="Real testimonials from families who trust us with their beauty and grooming needs."
|
||
textboxLayout="default"
|
||
useInvertedBackground={true}
|
||
tag="Reviews"
|
||
tagIcon={Star}
|
||
tagAnimation="slide-up"
|
||
animationType="blur-reveal"
|
||
testimonials={[
|
||
{
|
||
id: "testimonial-1", name: "Shilpa Sharma", handle: "@shilpasharma", testimonial: "Excellent salon with very professional staff. Clean environment and great service. Highly recommended!", imageSrc: "http://img.b2bpic.net/free-photo/close-up-smiley-woman-nature_23-2148918904.jpg?_wi=1", imageAlt: "happy customer smiling portrait", icon: Star
|
||
},
|
||
{
|
||
id: "testimonial-2", name: "Vikas Thakur", handle: "@vikasthakur", testimonial: "The atmosphere was relaxing, and the results exceeded my expectations. My entire family visits now.", imageSrc: "http://img.b2bpic.net/free-photo/happy-pleased-male-customer-smiling-pointing-left-copyspace_176420-18755.jpg?_wi=1", imageAlt: "happy man smiling portrait", icon: Star
|
||
},
|
||
{
|
||
id: "testimonial-3", name: "Priya Patel", handle: "@priyapatel", testimonial: "Best salon experience ever! The stylists really listened to what I wanted. Will definitely come back.", imageSrc: "http://img.b2bpic.net/free-photo/smiling-young-woman-taking-selfie-photo-winking_1262-18343.jpg", imageAlt: "happy woman portrait smiling natural", icon: Star
|
||
},
|
||
{
|
||
id: "testimonial-4", name: "Rajesh Kumar", handle: "@rajeshkumar", testimonial: "Brought my kids here and they loved it. Hygienic, professional, and the pricing is fair. Highly satisfied!", imageSrc: "http://img.b2bpic.net/free-photo/smiling-middle-aged-attractive-woman-showing-thumb-up-outdoors_1262-12526.jpg", imageAlt: "happy person smiling headshot", icon: Star
|
||
},
|
||
{
|
||
id: "testimonial-5", name: "Anjali Singh", handle: "@anjalisingh", testimonial: "A hidden gem in the city! The grooming services are top-notch and the staff is incredibly friendly.", imageSrc: "http://img.b2bpic.net/free-photo/close-up-smiley-woman-nature_23-2148918904.jpg?_wi=2", imageAlt: "happy customer smiling portrait", icon: Star
|
||
},
|
||
{
|
||
id: "testimonial-6", name: "Arjun Desai", handle: "@arjundesai", testimonial: "Finally found a salon I can trust completely. Professional, clean, and welcoming. Worth every penny!", imageSrc: "http://img.b2bpic.net/free-photo/happy-pleased-male-customer-smiling-pointing-left-copyspace_176420-18755.jpg?_wi=2", imageAlt: "happy man smiling portrait", icon: Star
|
||
}
|
||
]}
|
||
textBoxTitleClassName="text-4xl md:text-5xl font-light mb-4"
|
||
textBoxDescriptionClassName="text-lg font-light opacity-90"
|
||
/>
|
||
</div>
|
||
|
||
<div id="offer" data-section="offer">
|
||
<ContactCTA
|
||
tag="Limited Time"
|
||
tagIcon={Gift}
|
||
tagAnimation="slide-up"
|
||
title="First Visit Offer – Get 20% OFF Your First Service"
|
||
description="New customers only. Valid on hair, beauty, and grooming services. Book your appointment today and experience the Shahzad's Glamour difference!"
|
||
buttons={[
|
||
{ text: "Claim Your Offer", href: "#contact" }
|
||
]}
|
||
buttonAnimation="slide-up"
|
||
background={{ variant: "sparkles-gradient" }}
|
||
useInvertedBackground={false}
|
||
titleClassName="text-4xl md:text-5xl font-light mb-4"
|
||
descriptionClassName="text-lg font-light opacity-90"
|
||
/>
|
||
</div>
|
||
|
||
<div id="contact" data-section="contact">
|
||
<ContactCTA
|
||
tag="Get in Touch"
|
||
tagIcon={Phone}
|
||
tagAnimation="slide-up"
|
||
title="Visit Shahzad's Glamour"
|
||
description="📍 Address: [Add Salon Location]\n📞 Phone: [Add Phone Number]\n🕒 Hours: Mon – Sun: 10 AM – 8 PM\n\nBringing elegance and professionalism to your doorstep."
|
||
buttons={[
|
||
{ text: "Book Appointment", href: "https://booking.example.com" },
|
||
{ text: "Call Now", href: "tel:+1234567890" },
|
||
{ text: "Get Directions", href: "https://maps.google.com" }
|
||
]}
|
||
buttonAnimation="slide-up"
|
||
background={{ variant: "plain" }}
|
||
useInvertedBackground={true}
|
||
titleClassName="text-4xl md:text-5xl font-light mb-4"
|
||
descriptionClassName="text-lg font-light opacity-90 whitespace-pre-line"
|
||
/>
|
||
</div>
|
||
|
||
<div id="footer" data-section="footer">
|
||
<FooterLogoReveal
|
||
logoText="Shahzad's Glamour"
|
||
leftLink={{ text: "Privacy Policy", href: "#" }}
|
||
rightLink={{ text: "Contact Us", href: "#contact" }}
|
||
className="py-12"
|
||
containerClassName="max-w-4xl mx-auto"
|
||
/>
|
||
</div>
|
||
</ThemeProvider>
|
||
);
|
||
} |