247 lines
15 KiB
TypeScript
247 lines
15 KiB
TypeScript
"use client"
|
|
|
|
import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
|
|
import NavbarStyleFullscreen from '@/components/navbar/NavbarStyleFullscreen/NavbarStyleFullscreen';
|
|
import HeroBillboardCarousel from '@/components/sections/hero/HeroBillboardCarousel';
|
|
import MediaAbout from '@/components/sections/about/MediaAbout';
|
|
import FeatureCardTen from '@/components/sections/feature/FeatureCardTen';
|
|
import ProductCardThree from '@/components/sections/product/ProductCardThree';
|
|
import TestimonialCardTwelve from '@/components/sections/testimonial/TestimonialCardTwelve';
|
|
import FaqBase from '@/components/sections/faq/FaqBase';
|
|
import ContactText from '@/components/sections/contact/ContactText';
|
|
import FooterLogoReveal from '@/components/sections/footer/FooterLogoReveal';
|
|
import { Sparkles, Heart, Star, Scissors, CheckCircle, Droplet, Zap, Leaf, Shield, Smile, Sun, Award, HelpCircle } from 'lucide-react';
|
|
|
|
export default function LandingPage() {
|
|
return (
|
|
<ThemeProvider
|
|
defaultButtonVariant="hover-magnetic"
|
|
defaultTextAnimation="background-highlight"
|
|
borderRadius="soft"
|
|
contentWidth="small"
|
|
sizing="mediumLarge"
|
|
background="fluid"
|
|
cardStyle="glass-elevated"
|
|
primaryButtonStyle="radial-glow"
|
|
secondaryButtonStyle="glass"
|
|
headingFontWeight="medium"
|
|
>
|
|
<div id="nav" data-section="nav">
|
|
<NavbarStyleFullscreen
|
|
navItems={[
|
|
{ name: "Home", id: "home" },
|
|
{ name: "Services", id: "services" },
|
|
{ name: "Bridal", id: "bridal" },
|
|
{ name: "Reviews", id: "testimonials" },
|
|
{ name: "Contact", id: "contact" }
|
|
]}
|
|
brandName="The Family Salon"
|
|
bottomLeftText="Haldwani"
|
|
bottomRightText="hello@familysalon.com"
|
|
/>
|
|
</div>
|
|
|
|
<div id="hero" data-section="hero">
|
|
<HeroBillboardCarousel
|
|
title="Best Beauty & Hair Salon in Haldwani"
|
|
description="Affordable haircuts, beauty treatments, and bridal makeup by trained professionals in a clean, welcoming environment"
|
|
tag="Premium Beauty Services"
|
|
tagIcon={Sparkles}
|
|
tagAnimation="slide-up"
|
|
buttons={[
|
|
{ text: "Call Now", href: "tel:+91XXXXXXXXXX" },
|
|
{ text: "Book Appointment", href: "contact" }
|
|
]}
|
|
buttonAnimation="slide-up"
|
|
mediaItems={[
|
|
{ imageSrc: "http://img.b2bpic.net/free-photo/old-woman-filling-registration-forms-front-desk-passing-room-check-preparing-start-retirement-vacation-trip-traveller-asking-receptionist-about-all-inclusive-service-handheld-shot_482257-70827.jpg", imageAlt: "Modern salon interior" },
|
|
{ imageSrc: "http://img.b2bpic.net/free-photo/medium-shot-man-getting-haircut_23-2150665444.jpg?_wi=1", imageAlt: "Professional haircut service" },
|
|
{ imageSrc: "http://img.b2bpic.net/free-photo/masseur-doing-manual-massage-client-spa-beauty-salon-using-oil_343596-4268.jpg?_wi=1", imageAlt: "Facial beauty treatment" },
|
|
{ imageSrc: "http://img.b2bpic.net/free-photo/hairdresser-cut-hair-her-client-hair-salon_1157-27201.jpg?_wi=1", imageAlt: "Hair spa treatment" },
|
|
{ imageSrc: "http://img.b2bpic.net/free-photo/woman-applying-makeup-reflecting-mirror_23-2148113240.jpg", imageAlt: "Bridal makeup service" },
|
|
{ imageSrc: "http://img.b2bpic.net/free-psd/hand-drawn-wedding-celebration-youtube-cover_23-2150737025.jpg?_wi=1", imageAlt: "Bridal makeup portfolio" }
|
|
]}
|
|
background={{ variant: "plain" }}
|
|
ariaLabel="Hero section showcasing salon services"
|
|
/>
|
|
</div>
|
|
|
|
<div id="about" data-section="about">
|
|
<MediaAbout
|
|
title="Your Trusted Beauty Partner"
|
|
description="At The Family Salon, we believe in delivering exceptional beauty services with affordability and professionalism. Our team of trained stylists and beauty experts ensures every client leaves feeling confident and beautiful. We maintain the highest standards of hygiene and cleanliness in our welcoming environment."
|
|
tag="About Us"
|
|
tagIcon={Heart}
|
|
tagAnimation="slide-up"
|
|
buttons={[{ text: "Explore Services", href: "services" }]}
|
|
buttonAnimation="slide-up"
|
|
imageSrc="http://img.b2bpic.net/free-photo/multi-ethnic-friends-wearing-jeans-white-t-shirts_329181-4547.jpg"
|
|
imageAlt="Our professional salon team"
|
|
useInvertedBackground={false}
|
|
ariaLabel="About section"
|
|
/>
|
|
</div>
|
|
|
|
<div id="services" data-section="services">
|
|
<FeatureCardTen
|
|
title="Our Services"
|
|
description="Comprehensive beauty and grooming services tailored to meet the needs of families, couples, and individuals"
|
|
tag="What We Offer"
|
|
tagIcon={Star}
|
|
tagAnimation="slide-up"
|
|
features={[
|
|
{
|
|
id: "1", title: "Haircuts & Styling", description: "Professional haircuts and styling for men, women, and children. From trendy cuts to classic styles, our experienced stylists deliver the perfect look.", media: { imageSrc: "http://img.b2bpic.net/free-photo/medium-shot-man-getting-haircut_23-2150665444.jpg?_wi=2", imageAlt: "Haircut service" },
|
|
items: [
|
|
{ icon: Scissors, text: "Expert cutting techniques" },
|
|
{ icon: Sparkles, text: "Trendy & classic styles" },
|
|
{ icon: CheckCircle, text: "Affordable pricing" }
|
|
],
|
|
reverse: false
|
|
},
|
|
{
|
|
id: "2", title: "Hair Spa & Treatment", description: "Rejuvenate your hair with our premium hair spa treatments. Nourish, repair, and restore shine to damaged hair with professional care.", media: { imageSrc: "http://img.b2bpic.net/free-photo/hairdresser-cut-hair-her-client-hair-salon_1157-27201.jpg?_wi=2", imageAlt: "Hair spa treatment" },
|
|
items: [
|
|
{ icon: Droplet, text: "Hydrating treatments" },
|
|
{ icon: Zap, text: "Shine restoration" },
|
|
{ icon: Leaf, text: "Natural ingredients" }
|
|
],
|
|
reverse: true
|
|
},
|
|
{
|
|
id: "3", title: "Facial & Skincare", description: "Pamper your skin with our customized facial treatments. Our professionals use quality products to rejuvenate and brighten your complexion.", media: { imageSrc: "http://img.b2bpic.net/free-photo/masseur-doing-manual-massage-client-spa-beauty-salon-using-oil_343596-4268.jpg?_wi=2", imageAlt: "Facial treatment" },
|
|
items: [
|
|
{ icon: Shield, text: "Customized treatments" },
|
|
{ icon: Smile, text: "Skin rejuvenation" },
|
|
{ icon: Sun, text: "Natural glow" }
|
|
],
|
|
reverse: false
|
|
},
|
|
{
|
|
id: "4", title: "Beard Grooming", description: "Expert beard trimming, shaping, and grooming for the modern man. Achieve the perfect look with professional care and precision.", media: { imageSrc: "http://img.b2bpic.net/free-photo/barber-shaves-bearded-man-vintage-atmosphere_1153-8475.jpg", imageAlt: "Beard grooming service" },
|
|
items: [
|
|
{ icon: Scissors, text: "Precision shaping" },
|
|
{ icon: CheckCircle, text: "Professional styling" },
|
|
{ icon: Award, text: "Expert care" }
|
|
],
|
|
reverse: true
|
|
}
|
|
]}
|
|
textboxLayout="default"
|
|
animationType="slide-up"
|
|
useInvertedBackground={false}
|
|
ariaLabel="Services section"
|
|
/>
|
|
</div>
|
|
|
|
<div id="bridal" data-section="bridal">
|
|
<ProductCardThree
|
|
title="Bridal & Special Occasion Makeup"
|
|
description="Make your special moments unforgettable with our professional bridal and party makeup services. Our experienced makeup artists create stunning looks tailored to your style."
|
|
tag="Celebrate Your Beauty"
|
|
tagIcon={Heart}
|
|
tagAnimation="slide-up"
|
|
buttons={[{ text: "Book Bridal Makeup", href: "contact" }]}
|
|
buttonAnimation="slide-up"
|
|
products={[
|
|
{
|
|
id: "bridal-1", name: "Bridal Makeup Package", price: "$120", imageSrc: "http://img.b2bpic.net/free-psd/hand-drawn-wedding-celebration-youtube-cover_23-2150737025.jpg?_wi=2", imageAlt: "Bridal makeup look", initialQuantity: 1
|
|
},
|
|
{
|
|
id: "bridal-2", name: "Traditional Bridal Makeup", price: "$130", imageSrc: "http://img.b2bpic.net/free-photo/young-beautiful-stylish-woman-wedding-dress_285396-7817.jpg", imageAlt: "Traditional bridal makeup", initialQuantity: 1
|
|
},
|
|
{
|
|
id: "bridal-3", name: "Modern Bridal Makeup", price: "$125", imageSrc: "http://img.b2bpic.net/free-photo/elegant-bride-posing_23-2148105867.jpg", imageAlt: "Modern bridal makeup", initialQuantity: 1
|
|
},
|
|
{
|
|
id: "party-1", name: "Party Makeup Service", price: "$80", imageSrc: "http://img.b2bpic.net/free-photo/professional-make-up-artist-working-medium-shot_23-2148398694.jpg", imageAlt: "Party makeup service", initialQuantity: 1
|
|
}
|
|
]}
|
|
gridVariant="two-columns-alternating-heights"
|
|
animationType="slide-up"
|
|
textboxLayout="default"
|
|
useInvertedBackground={false}
|
|
ariaLabel="Bridal and special occasion services"
|
|
/>
|
|
</div>
|
|
|
|
<div id="testimonials" data-section="testimonials">
|
|
<TestimonialCardTwelve
|
|
testimonials={[
|
|
{ id: "1", name: "Priya Sharma", imageSrc: "http://img.b2bpic.net/free-photo/positive-young-caucasian-women-smiling-look-mirror-while-sitting-table-using-facial-scraper-medical-beauty-treatments_197531-31438.jpg", imageAlt: "Priya Sharma" },
|
|
{ id: "2", name: "Anjali Verma", imageSrc: "http://img.b2bpic.net/free-photo/ambitious-businesswoman-with-arms-crossed-looking-forward-future_1163-4333.jpg", imageAlt: "Anjali Verma" },
|
|
{ id: "3", name: "Neha Singh", imageSrc: "http://img.b2bpic.net/free-photo/close-up-satisfied-bearded-guy-white-shirt-showing-thumbs-up-approval-like-agree-positive-answer_1258-26715.jpg", imageAlt: "Neha Singh" },
|
|
{ id: "4", name: "Sunita Patel", imageSrc: "http://img.b2bpic.net/free-photo/happy-woman-holding-shopping-bags-one-hand-credit-card-other_23-2148673233.jpg", imageAlt: "Sunita Patel" },
|
|
{ id: "5", name: "Ritika Gupta", imageSrc: "http://img.b2bpic.net/free-photo/bride-getting-makeup-done-medium-shot_23-2149860778.jpg", imageAlt: "Ritika Gupta" },
|
|
{ id: "6", name: "Meera Desai", imageSrc: "http://img.b2bpic.net/free-photo/girl-friends-celebration-moments_23-2149168080.jpg", imageAlt: "Meera Desai" }
|
|
]}
|
|
cardTitle="Over 2,000+ customers trust us for professional beauty and grooming services. Join our growing family of satisfied clients."
|
|
cardTag="⭐ 4.6 Rating • 64 Reviews"
|
|
cardTagIcon={Star}
|
|
cardAnimation="slide-up"
|
|
useInvertedBackground={true}
|
|
ariaLabel="Customer testimonials and reviews"
|
|
/>
|
|
</div>
|
|
|
|
<div id="faq" data-section="faq">
|
|
<FaqBase
|
|
title="Frequently Asked Questions"
|
|
description="Find answers to common questions about our services, pricing, and booking process."
|
|
tag="Have Questions?"
|
|
tagIcon={HelpCircle}
|
|
tagAnimation="slide-up"
|
|
faqs={[
|
|
{
|
|
id: "1", title: "How do I book an appointment?", content: "You can book an appointment by calling us directly, clicking the 'Book Appointment' button on our site, or messaging us on WhatsApp. We accept online bookings and walk-ins based on availability."
|
|
},
|
|
{
|
|
id: "2", title: "What is your cancellation policy?", content: "Cancellations made 24 hours before your appointment are free. Cancellations within 24 hours may incur a 50% cancellation fee. No-shows are charged in full."
|
|
},
|
|
{
|
|
id: "3", title: "Do you offer bridal packages?", content: "Yes! We offer customized bridal makeup packages for weddings and special occasions. We recommend booking 2-3 weeks in advance for bridal services. Please call us to discuss your requirements."
|
|
},
|
|
{
|
|
id: "4", title: "What payment methods do you accept?", content: "We accept cash, card payments, and digital payments including Google Pay, PhonePe, and Paytm for your convenience."
|
|
},
|
|
{
|
|
id: "5", title: "Are your products and tools sanitized?", content: "Absolutely! We maintain the highest hygiene standards. All tools are sterilized after each use, and we use disposable products where necessary. Your health and safety are our top priority."
|
|
},
|
|
{
|
|
id: "6", title: "Do you offer hair coloring services?", content: "Yes, we offer professional hair coloring services using quality products. Our experienced stylists can help you choose the perfect color. Call us for consultation and pricing."
|
|
}
|
|
]}
|
|
faqsAnimation="slide-up"
|
|
textboxLayout="default"
|
|
useInvertedBackground={false}
|
|
animationType="smooth"
|
|
ariaLabel="Frequently asked questions"
|
|
/>
|
|
</div>
|
|
|
|
<div id="contact" data-section="contact">
|
|
<ContactText
|
|
text="Ready to transform your look? Get in touch with The Family Salon today and schedule your appointment!"
|
|
animationType="entrance-slide"
|
|
buttons={[
|
|
{ text: "Call Now", href: "tel:+91XXXXXXXXXX" },
|
|
{ text: "Message on WhatsApp", href: "https://wa.me/91XXXXXXXXXX" }
|
|
]}
|
|
background={{ variant: "plain" }}
|
|
useInvertedBackground={true}
|
|
ariaLabel="Contact section"
|
|
/>
|
|
</div>
|
|
|
|
<div id="footer" data-section="footer">
|
|
<FooterLogoReveal
|
|
logoText="The Family Salon"
|
|
leftLink={{ text: "Privacy Policy", href: "#" }}
|
|
rightLink={{ text: "Terms of Service", href: "#" }}
|
|
ariaLabel="Site footer"
|
|
/>
|
|
</div>
|
|
</ThemeProvider>
|
|
);
|
|
}
|