Update src/app/page.tsx
This commit is contained in:
246
src/app/page.tsx
246
src/app/page.tsx
@@ -31,26 +31,11 @@ export default function LandingPage() {
|
||||
<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",
|
||||
},
|
||||
{ name: "Home", id: "#hero" },
|
||||
{ name: "About", id: "#about" },
|
||||
{ name: "Services", id: "#services" },
|
||||
{ name: "Pricing", id: "#pricing" },
|
||||
{ name: "Contact", id: "#contact" }
|
||||
]}
|
||||
brandName="Traffic Jam Saloon"
|
||||
/>
|
||||
@@ -61,38 +46,17 @@ export default function LandingPage() {
|
||||
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",
|
||||
},
|
||||
{ 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"
|
||||
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",
|
||||
},
|
||||
{ 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"
|
||||
/>
|
||||
@@ -103,21 +67,9 @@ export default function LandingPage() {
|
||||
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+",
|
||||
},
|
||||
{ icon: Scissors, label: "Haircuts", value: "1000+" },
|
||||
{ icon: Award, label: "Premium Experience", value: "5 Stars" },
|
||||
{ icon: User, label: "Satisfied Clients", value: "500+" }
|
||||
]}
|
||||
metricsAnimation="slide-up"
|
||||
/>
|
||||
@@ -129,30 +81,9 @@ export default function LandingPage() {
|
||||
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",
|
||||
},
|
||||
{ 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."
|
||||
@@ -165,57 +96,9 @@ export default function LandingPage() {
|
||||
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",
|
||||
],
|
||||
},
|
||||
{ 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."
|
||||
@@ -229,48 +112,12 @@ export default function LandingPage() {
|
||||
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",
|
||||
},
|
||||
{ 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."
|
||||
@@ -284,26 +131,11 @@ export default function LandingPage() {
|
||||
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",
|
||||
},
|
||||
{ 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"
|
||||
@@ -312,10 +144,10 @@ export default function LandingPage() {
|
||||
|
||||
<div id="contact" data-section="contact">
|
||||
<ContactCenter
|
||||
tag="Contact"
|
||||
useInvertedBackground={false}
|
||||
background={{
|
||||
variant: "canvas-reveal",
|
||||
}}
|
||||
variant: "canvas-reveal"}}
|
||||
title="Book Your Slot"
|
||||
description="Ready for a fresh new look? Book your appointment now."
|
||||
/>
|
||||
@@ -325,16 +157,12 @@ export default function LandingPage() {
|
||||
<FooterLogoReveal
|
||||
logoText="Traffic Jam Saloon"
|
||||
leftLink={{
|
||||
text: "Privacy Policy",
|
||||
href: "#",
|
||||
}}
|
||||
text: "Privacy Policy", href: "#"}}
|
||||
rightLink={{
|
||||
text: "© 2026 Traffic Jam Saloon",
|
||||
href: "#",
|
||||
}}
|
||||
text: "© 2026 Traffic Jam Saloon", href: "#"}}
|
||||
/>
|
||||
</div>
|
||||
</ReactLenis>
|
||||
</ThemeProvider>
|
||||
);
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user