171 lines
8.7 KiB
TypeScript
171 lines
8.7 KiB
TypeScript
"use client";
|
|
|
|
import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
|
|
import ReactLenis from "lenis/react";
|
|
import AboutMetric from '@/components/sections/about/AboutMetric';
|
|
import ContactSplit from '@/components/sections/contact/ContactSplit';
|
|
import FeatureCardTwentyThree from '@/components/sections/feature/FeatureCardTwentyThree';
|
|
import FooterSimple from '@/components/sections/footer/FooterSimple';
|
|
import HeroOverlay from '@/components/sections/hero/HeroOverlay';
|
|
import NavbarStyleCentered from '@/components/navbar/NavbarStyleCentered/NavbarStyleCentered';
|
|
import PricingCardFive from '@/components/sections/pricing/PricingCardFive';
|
|
import ProductCardFour from '@/components/sections/product/ProductCardFour';
|
|
import TestimonialCardFifteen from '@/components/sections/testimonial/TestimonialCardFifteen';
|
|
import { Award, Scissors, User } from "lucide-react";
|
|
|
|
export default function LandingPage() {
|
|
return (
|
|
<ThemeProvider
|
|
defaultButtonVariant="bounce-effect"
|
|
defaultTextAnimation="background-highlight"
|
|
borderRadius="pill"
|
|
contentWidth="mediumSmall"
|
|
sizing="mediumLargeSizeLargeTitles"
|
|
background="grid"
|
|
cardStyle="gradient-bordered"
|
|
primaryButtonStyle="diagonal-gradient"
|
|
secondaryButtonStyle="radial-glow"
|
|
headingFontWeight="extrabold"
|
|
>
|
|
<ReactLenis root>
|
|
<div id="nav" data-section="nav">
|
|
<NavbarStyleCentered
|
|
navItems={[
|
|
{ name: "Home", id: "#hero" },
|
|
{ name: "About", id: "#about" },
|
|
{ name: "Services", id: "#services" },
|
|
{ name: "Pricing", id: "#pricing" },
|
|
{ name: "Contact", id: "#contact" }
|
|
]}
|
|
brandName="Traffic Jam Saloon"
|
|
/>
|
|
</div>
|
|
|
|
<div id="hero" data-section="hero">
|
|
<HeroOverlay
|
|
title="Welcome to Traffic Jam Saloon"
|
|
description="Professional Haircuts, Beard Styling, Facial & Grooming Services. Style That Stops Traffic."
|
|
buttons={[
|
|
{ text: "Book Appointment", href: "#contact" },
|
|
{ text: "Call Now", href: "tel:+910000000000" }
|
|
]}
|
|
imageSrc="http://img.b2bpic.net/free-photo/handsome-bearded-man-barbershop-barber-work-washing-head_627829-7234.jpg?_wi=1"
|
|
showDimOverlay={true}
|
|
avatars={[
|
|
{ src: "http://img.b2bpic.net/free-photo/master-hairdresser-prepares-face-shaving-barber-shop_613910-6221.jpg", alt: "A master hairdresser prepares the face for shaving in the barber shop." },
|
|
{ src: "http://img.b2bpic.net/free-photo/hairdresser-cutting-man-s-hair-barber-shop_23-2149186474.jpg", alt: "Hairdresser cutting a man's hair at the barber shop" },
|
|
{ src: "http://img.b2bpic.net/free-photo/full-shot-man-barber-shop_23-2149141768.jpg", alt: "Full shot man at barber shop" },
|
|
{ src: "http://img.b2bpic.net/free-photo/barber-doing-haircut-bearded-aged-client-hair-salon_23-2148182013.jpg", alt: "Barber doing haircut bearded aged client in hair salon" },
|
|
{ src: "http://img.b2bpic.net/free-photo/shot-professional-barber-work-handsome-young-man-getting-haircut-local-barbershop_7502-5658.jpg", alt: "Professional barber at work" }
|
|
]}
|
|
avatarText="Join 500+ satisfied clients"
|
|
/>
|
|
</div>
|
|
|
|
<div id="about" data-section="about">
|
|
<AboutMetric
|
|
useInvertedBackground={false}
|
|
title="About Traffic Jam Saloon"
|
|
metrics={[
|
|
{ icon: Scissors, label: "Haircuts", value: "1000+" },
|
|
{ icon: Award, label: "Premium Experience", value: "5 Stars" },
|
|
{ icon: User, label: "Satisfied Clients", value: "500+" }
|
|
]}
|
|
metricsAnimation="slide-up"
|
|
/>
|
|
</div>
|
|
|
|
<div id="services" data-section="services">
|
|
<FeatureCardTwentyThree
|
|
animationType="slide-up"
|
|
textboxLayout="default"
|
|
useInvertedBackground={false}
|
|
features={[
|
|
{ id: "1", title: "Hair Cut", tags: ["Professional"], imageSrc: "http://img.b2bpic.net/free-photo/client-getting-new-haircut-from_23-2148257051.jpg" },
|
|
{ id: "2", title: "Beard Trim", tags: ["Style"], imageSrc: "http://img.b2bpic.net/free-photo/sideways-customer-with-eyes-closed_23-2148256865.jpg" },
|
|
{ id: "3", title: "Facial", tags: ["Treatment"], imageSrc: "http://img.b2bpic.net/free-photo/male-patient-receiving-massage-from-doctor_107420-65165.jpg" }
|
|
]}
|
|
title="Our Professional Services"
|
|
description="Comprehensive grooming solutions in Sangrampur."
|
|
/>
|
|
</div>
|
|
|
|
<div id="pricing" data-section="pricing">
|
|
<PricingCardFive
|
|
animationType="slide-up"
|
|
textboxLayout="default"
|
|
useInvertedBackground={false}
|
|
plans={[
|
|
{ id: "1", tag: "Basic", price: "₹100", period: "service", description: "Classic Hair Cut", button: { text: "Book", href: "#contact" }, featuresTitle: "Includes", features: ["Wash", "Cut", "Style"] },
|
|
{ id: "2", tag: "Popular", price: "₹300", period: "service", description: "Professional Facial", button: { text: "Book", href: "#contact" }, featuresTitle: "Includes", features: ["Cleansing", "Massage", "Glow"] },
|
|
{ id: "3", tag: "Complete", price: "₹400", period: "service", description: "Hair Spa Package", button: { text: "Book", href: "#contact" }, featuresTitle: "Includes", features: ["Massage", "Treatment", "Relaxation"] }
|
|
]}
|
|
title="Transparent Pricing"
|
|
description="Premium services at affordable prices."
|
|
/>
|
|
</div>
|
|
|
|
<div id="gallery" data-section="gallery">
|
|
<ProductCardFour
|
|
animationType="slide-up"
|
|
textboxLayout="default"
|
|
gridVariant="four-items-2x2-equal-grid"
|
|
useInvertedBackground={false}
|
|
products={[
|
|
{ id: "p1", name: "Chair Work", price: "Gallery", variant: "Image", imageSrc: "http://img.b2bpic.net/free-photo/front-view-barbershop-concept_23-2148506216.jpg" },
|
|
{ id: "p2", name: "Styling", price: "Gallery", variant: "Image", imageSrc: "http://img.b2bpic.net/free-photo/anonymous-barber-trimming-beard-man_23-2147778850.jpg" },
|
|
{ id: "p3", name: "Facials", price: "Gallery", variant: "Image", imageSrc: "http://img.b2bpic.net/free-photo/masseur-taking-care-her-client_23-2149273895.jpg" },
|
|
{ id: "p4", name: "Experience", price: "Gallery", variant: "Image", imageSrc: "http://img.b2bpic.net/free-photo/portrait-man-barbershop-with-classic-styling_618663-34.jpg" },
|
|
{ id: "p5", name: "Tools", price: "Gallery", variant: "Image", imageSrc: "http://img.b2bpic.net/free-photo/handsome-hipster-bearded-male-sitting-armchair-barber-shop-while-hairdresser-shaves-his-beard-with-dangerous-razor_613910-18507.jpg" },
|
|
{ id: "p6", name: "Atmosphere", price: "Gallery", variant: "Image", imageSrc: "http://img.b2bpic.net/free-photo/beautician-doing-cleaning-face-with-cosmetics-patient_7502-7526.jpg" }
|
|
]}
|
|
title="Salon Gallery"
|
|
description="Take a look at our premium workspace."
|
|
/>
|
|
</div>
|
|
|
|
<div id="testimonials" data-section="testimonials">
|
|
<TestimonialCardFifteen
|
|
useInvertedBackground={false}
|
|
testimonial="Best salon experience ever! Professional staff, great service, highly recommend."
|
|
rating={5}
|
|
author="Rahul Kumar"
|
|
avatars={[
|
|
{ src: "http://img.b2bpic.net/free-photo/happy-men-bachelor-party_23-2149275459.jpg", alt: "Customer" },
|
|
{ src: "http://img.b2bpic.net/free-photo/master-hairdresser-prepares-face-shaving-barber-shop_613910-4252.jpg", alt: "Customer" },
|
|
{ src: "http://img.b2bpic.net/free-photo/pets-winter-holidays-new-year-concept-happy-young-man-celebrating-christmas-with-cute-black-dog_1258-173085.jpg", alt: "Customer" },
|
|
{ src: "http://img.b2bpic.net/free-photo/close-up-positive-executive-work_1098-519.jpg", alt: "Customer" },
|
|
{ src: "http://img.b2bpic.net/free-photo/crazy-hippie-man-happy-expression_1194-3937.jpg", alt: "Customer" }
|
|
]}
|
|
ratingAnimation="slide-up"
|
|
avatarsAnimation="slide-up"
|
|
/>
|
|
</div>
|
|
|
|
<div id="contact" data-section="contact">
|
|
<ContactSplit
|
|
tag="Contact"
|
|
title="Book Your Slot"
|
|
description="Ready for a fresh new look? Book your appointment now."
|
|
background={{ variant: "canvas-reveal" }}
|
|
useInvertedBackground={false}
|
|
imageSrc="http://img.b2bpic.net/free-photo/handsome-bearded-man-barbershop-barber-work-washing-head_627829-7234.jpg?_wi=2"
|
|
mediaPosition="right"
|
|
buttonText="Book Now"
|
|
/>
|
|
</div>
|
|
|
|
<div id="footer" data-section="footer">
|
|
<FooterSimple
|
|
columns={[
|
|
{ title: "Services", items: [{ label: "Haircuts" }, { label: "Styling" }, { label: "Facials" }] },
|
|
{ title: "Company", items: [{ label: "About Us" }, { label: "Contact" }, { label: "Privacy Policy" }] }
|
|
]}
|
|
bottomLeftText="© 2026 Traffic Jam Saloon"
|
|
bottomRightText="All rights reserved."
|
|
/>
|
|
</div>
|
|
</ReactLenis>
|
|
</ThemeProvider>
|
|
);
|
|
} |