bender/f0743740-2e6a-4ddf-935b-c0daf3f5493b
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Update src/app/page.tsx

Browse Source
This commit is contained in:
bender
2026-05-11 11:43:52 +00:00
parent a15f9f0626
commit 2d8d75cfb4
1 changed files with 37 additions and 209 deletions
Download Patch File Download Diff File Expand all files Collapse all files

246
src/app/page.tsx
View File

@@ -31,26 +31,11 @@ export default function LandingPage() {
<div id="nav" data-section="nav"> <div id="nav" data-section="nav">
<NavbarStyleCentered <NavbarStyleCentered
navItems={[ navItems={[
{ { name: "Home", id: "#hero" },
name: "Home", { name: "About", id: "#about" },
id: "#hero", { name: "Services", id: "#services" },
}, { name: "Pricing", id: "#pricing" },
{ { name: "Contact", id: "#contact" }
name: "About",
id: "#about",
},
{
name: "Services",
id: "#services",
},
{
name: "Pricing",
id: "#pricing",
},
{
name: "Contact",
id: "#contact",
},
]} ]}
brandName="Traffic Jam Saloon" brandName="Traffic Jam Saloon"
/> />
@@ -61,38 +46,17 @@ export default function LandingPage() {
title="Welcome to Traffic Jam Saloon" title="Welcome to Traffic Jam Saloon"
description="Professional Haircuts, Beard Styling, Facial & Grooming Services. Style That Stops Traffic." description="Professional Haircuts, Beard Styling, Facial & Grooming Services. Style That Stops Traffic."
buttons={[ buttons={[
{ { text: "Book Appointment", href: "#contact" },
text: "Book Appointment", { text: "Call Now", href: "tel:+910000000000" }
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" imageSrc="http://img.b2bpic.net/free-photo/handsome-bearded-man-barbershop-barber-work-washing-head_627829-7234.jpg"
showDimOverlay={true} showDimOverlay={true}
avatars={[ 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/master-hairdresser-prepares-face-shaving-barber-shop_613910-6221.jpg", { 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" },
alt: "A master hairdresser prepares the face for shaving in 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/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" avatarText="Join 500+ satisfied clients"
/> />
@@ -103,21 +67,9 @@ export default function LandingPage() {
useInvertedBackground={false} useInvertedBackground={false}
title="About Traffic Jam Saloon" title="About Traffic Jam Saloon"
metrics={[ metrics={[
{ { icon: Scissors, label: "Haircuts", value: "1000+" },
icon: Scissors, { icon: Award, label: "Premium Experience", value: "5 Stars" },
label: "Haircuts", { icon: User, label: "Satisfied Clients", value: "500+" }
value: "1000+",
},
{
icon: Award,
label: "Premium Experience",
value: "5 Stars",
},
{
icon: User,
label: "Satisfied Clients",
value: "500+",
},
]} ]}
metricsAnimation="slide-up" metricsAnimation="slide-up"
/> />
@@ -129,30 +81,9 @@ export default function LandingPage() {
textboxLayout="default" textboxLayout="default"
useInvertedBackground={false} useInvertedBackground={false}
features={[ features={[
{ { id: "1", title: "Hair Cut", tags: ["Professional"], imageSrc: "http://img.b2bpic.net/free-photo/client-getting-new-haircut-from_23-2148257051.jpg" },
id: "1", { id: "2", title: "Beard Trim", tags: ["Style"], imageSrc: "http://img.b2bpic.net/free-photo/sideways-customer-with-eyes-closed_23-2148256865.jpg" },
title: "Hair Cut", { id: "3", title: "Facial", tags: ["Treatment"], imageSrc: "http://img.b2bpic.net/free-photo/male-patient-receiving-massage-from-doctor_107420-65165.jpg" }
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" title="Our Professional Services"
description="Comprehensive grooming solutions in Sangrampur." description="Comprehensive grooming solutions in Sangrampur."
@@ -165,57 +96,9 @@ export default function LandingPage() {
textboxLayout="default" textboxLayout="default"
useInvertedBackground={false} useInvertedBackground={false}
plans={[ 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: "1", { id: "2", tag: "Popular", price: "₹300", period: "service", description: "Professional Facial", button: { text: "Book", href: "#contact" }, featuresTitle: "Includes", features: ["Cleansing", "Massage", "Glow"] },
tag: "Basic", { id: "3", tag: "Complete", price: "₹400", period: "service", description: "Hair Spa Package", button: { text: "Book", href: "#contact" }, featuresTitle: "Includes", features: ["Massage", "Treatment", "Relaxation"] }
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" title="Transparent Pricing"
description="Premium services at affordable prices." description="Premium services at affordable prices."
@@ -229,48 +112,12 @@ export default function LandingPage() {
gridVariant="four-items-2x2-equal-grid" gridVariant="four-items-2x2-equal-grid"
useInvertedBackground={false} useInvertedBackground={false}
products={[ 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: "p1", { id: "p2", name: "Styling", price: "Gallery", variant: "Image", imageSrc: "http://img.b2bpic.net/free-photo/anonymous-barber-trimming-beard-man_23-2147778850.jpg" },
name: "Chair Work", { id: "p3", name: "Facials", price: "Gallery", variant: "Image", imageSrc: "http://img.b2bpic.net/free-photo/masseur-taking-care-her-client_23-2149273895.jpg" },
price: "Gallery", { id: "p4", name: "Experience", price: "Gallery", variant: "Image", imageSrc: "http://img.b2bpic.net/free-photo/portrait-man-barbershop-with-classic-styling_618663-34.jpg" },
variant: "Image", { 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" },
imageSrc: "http://img.b2bpic.net/free-photo/front-view-barbershop-concept_23-2148506216.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: "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" title="Salon Gallery"
description="Take a look at our premium workspace." description="Take a look at our premium workspace."
@@ -284,26 +131,11 @@ export default function LandingPage() {
rating={5} rating={5}
author="Rahul Kumar" author="Rahul Kumar"
avatars={[ avatars={[
{ { src: "http://img.b2bpic.net/free-photo/happy-men-bachelor-party_23-2149275459.jpg", alt: "Customer" },
src: "http://img.b2bpic.net/free-photo/happy-men-bachelor-party_23-2149275459.jpg", { src: "http://img.b2bpic.net/free-photo/master-hairdresser-prepares-face-shaving-barber-shop_613910-4252.jpg", alt: "Customer" },
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/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" ratingAnimation="slide-up"
avatarsAnimation="slide-up" avatarsAnimation="slide-up"
@@ -312,10 +144,10 @@ export default function LandingPage() {
<div id="contact" data-section="contact"> <div id="contact" data-section="contact">
<ContactCenter <ContactCenter
tag="Contact"
useInvertedBackground={false} useInvertedBackground={false}
background={{ background={{
variant: "canvas-reveal", variant: "canvas-reveal"}}
}}
title="Book Your Slot" title="Book Your Slot"
description="Ready for a fresh new look? Book your appointment now." description="Ready for a fresh new look? Book your appointment now."
/> />
@@ -325,16 +157,12 @@ export default function LandingPage() {
<FooterLogoReveal <FooterLogoReveal
logoText="Traffic Jam Saloon" logoText="Traffic Jam Saloon"
leftLink={{ leftLink={{
text: "Privacy Policy", text: "Privacy Policy", href: "#"}}
href: "#",
}}
rightLink={{ rightLink={{
text: "© 2026 Traffic Jam Saloon", text: "© 2026 Traffic Jam Saloon", href: "#"}}
href: "#",
}}
/> />
</div> </div>
</ReactLenis> </ReactLenis>
</ThemeProvider> </ThemeProvider>
); );
} }