Update src/app/page.tsx

This commit is contained in:
2026-06-01 22:30:14 +00:00
parent 7fc7e8e8e7
commit 311b74fd90

View File

@@ -33,34 +33,20 @@ export default function LandingPage() {
<NavbarStyleCentered <NavbarStyleCentered
navItems={[ navItems={[
{ {
name: "Home", name: "Home", id: "#home"},
id: "#home",
},
{ {
name: "Services", name: "Services", id: "#services"},
id: "#services",
},
{ {
name: "Barbers", name: "Barbers", id: "#barbers"},
id: "#barbers",
},
{ {
name: "Pricing", name: "Pricing", id: "#pricing"},
id: "#pricing",
},
{ {
name: "Testimonials", name: "Testimonials", id: "#testimonials"},
id: "#testimonials",
},
{ {
name: "FAQ", name: "FAQ", id: "#faq"},
id: "#faq",
},
]} ]}
button={{ button={{
text: "Book Now", text: "Book Now", href: "#contact"}}
href: "#contact",
}}
brandName="The Modern Cut" brandName="The Modern Cut"
/> />
</div> </div>
@@ -71,15 +57,11 @@ export default function LandingPage() {
description="Experience unparalleled grooming with precision cuts, classic shaves, and a style tailored just for you. Your destination for a timeless look." description="Experience unparalleled grooming with precision cuts, classic shaves, and a style tailored just for you. Your destination for a timeless look."
buttons={[ buttons={[
{ {
text: "Book an Appointment", text: "Book an Appointment", href: "#contact"},
href: "#contact",
},
{ {
text: "View Services", text: "View Services", href: "#services"},
href: "#services",
},
]} ]}
imageSrc="http://img.b2bpic.net/free-photo/vintage-wooden-table-with-beard-shaping-salon-tools_53876-127084.jpg?_wi=1" imageSrc="http://img.b2bpic.net/free-photo/vintage-wooden-table-with-beard-shaping-salon-tools_53876-127084.jpg"
imageAlt="Luxurious barber chair in a modern barbershop" imageAlt="Luxurious barber chair in a modern barbershop"
/> />
</div> </div>
@@ -99,46 +81,22 @@ export default function LandingPage() {
useInvertedBackground={false} useInvertedBackground={false}
features={[ features={[
{ {
title: "Signature Haircut", title: "Signature Haircut", description: "Experience a bespoke haircut tailored to your head shape and style preferences, including a refreshing wash and finish.", phoneOne: {
description: "Experience a bespoke haircut tailored to your head shape and style preferences, including a refreshing wash and finish.", imageSrc: "http://img.b2bpic.net/free-photo/close-up-hairstylist-giving-haircut-client_23-2148506196.jpg", imageAlt: "Barber giving a detailed haircut"},
phoneOne: {
imageSrc: "http://img.b2bpic.net/free-photo/close-up-hairstylist-giving-haircut-client_23-2148506196.jpg",
imageAlt: "Barber giving a detailed haircut",
},
phoneTwo: { phoneTwo: {
imageSrc: "http://img.b2bpic.net/free-photo/close-up-man-getting-his-hair-cut_23-2148256900.jpg", imageSrc: "http://img.b2bpic.net/free-photo/close-up-man-getting-his-hair-cut_23-2148256900.jpg", imageAlt: "Barber styling a client's hair"}
imageAlt: "Barber styling a client's hair",
},
imageSrc: "http://img.b2bpic.net/free-photo/vintage-wooden-table-with-beard-shaping-salon-tools_53876-127084.jpg?_wi=2",
imageAlt: "barber giving haircut close up",
}, },
{ {
title: "Traditional Hot Shave", title: "Traditional Hot Shave", description: "Indulge in the ultimate classic hot towel shave, performed with a straight razor for an incredibly close and smooth finish.", phoneOne: {
description: "Indulge in the ultimate classic hot towel shave, performed with a straight razor for an incredibly close and smooth finish.", imageSrc: "http://img.b2bpic.net/free-photo/master-hairdresser-prepares-face-shaving-smears-face-with-foam-hairdressing-salon_613910-18406.jpg", imageAlt: "Barber performing a hot towel shave"},
phoneOne: {
imageSrc: "http://img.b2bpic.net/free-photo/master-hairdresser-prepares-face-shaving-smears-face-with-foam-hairdressing-salon_613910-18406.jpg",
imageAlt: "Barber performing a hot towel shave",
},
phoneTwo: { phoneTwo: {
imageSrc: "http://img.b2bpic.net/free-photo/front-view-man-shaving-home_23-2150226092.jpg", imageSrc: "http://img.b2bpic.net/free-photo/front-view-man-shaving-home_23-2150226092.jpg", imageAlt: "Barber trimming a man's beard"}
imageAlt: "Barber trimming a man's beard",
},
imageSrc: "http://img.b2bpic.net/free-photo/female-hairdresser-making-hairstyle-blonde-woman-beauty-salon_176420-4456.jpg",
imageAlt: "barber giving haircut close up",
}, },
{ {
title: "Beard Trim & Shape", title: "Beard Trim & Shape", description: "Keep your beard looking its best with a professional trim, shaping, and conditioning, designed to complement your facial features.", phoneOne: {
description: "Keep your beard looking its best with a professional trim, shaping, and conditioning, designed to complement your facial features.", imageSrc: "http://img.b2bpic.net/free-photo/years-one-color-communication-30-35_1296-315.jpg", imageAlt: "Barber applying styling product"},
phoneOne: {
imageSrc: "http://img.b2bpic.net/free-photo/years-one-color-communication-30-35_1296-315.jpg",
imageAlt: "Barber applying styling product",
},
phoneTwo: { phoneTwo: {
imageSrc: "http://img.b2bpic.net/free-photo/isolated-view-bald-caucasian-hipster-male-with-thick-bushy-beard-tattoo-raising-eyebrows-crossing-arms-chest-his-closed-posture-look-expressing-distrust-body-language_343059-1709.jpg?_wi=1", imageSrc: "http://img.b2bpic.net/free-photo/isolated-view-bald-caucasian-hipster-male-with-thick-bushy-beard-tattoo-raising-eyebrows-crossing-arms-chest-his-closed-posture-look-expressing-distrust-body-language_343059-1709.jpg", imageAlt: "Man admiring his styled hair in mirror"}
imageAlt: "Man admiring his styled hair in mirror",
},
imageSrc: "http://img.b2bpic.net/free-photo/portrait-man-with-tattoo-his-face-arms-dressed-white-shirt-grey-background_613910-8168.jpg?_wi=1",
imageAlt: "barber giving haircut close up",
}, },
]} ]}
showStepNumbers={true} showStepNumbers={true}
@@ -155,56 +113,28 @@ export default function LandingPage() {
useInvertedBackground={true} useInvertedBackground={true}
plans={[ plans={[
{ {
id: "standard-cut", id: "standard-cut", badge: "Popular", price: "$45", subtitle: "Essential Grooming", buttons: [
badge: "Popular",
price: "$45",
subtitle: "Essential Grooming",
buttons: [
{ {
text: "Book Now", text: "Book Now", href: "#contact"},
href: "#contact",
},
], ],
features: [ features: [
"Precision Haircut", "Precision Haircut", "Hot Lather Neck Shave", "Styling & Finish"],
"Hot Lather Neck Shave",
"Styling & Finish",
],
}, },
{ {
id: "full-experience", id: "full-experience", badge: "Best Value", price: "$80", subtitle: "The Ultimate Pamper", buttons: [
badge: "Best Value",
price: "$80",
subtitle: "The Ultimate Pamper",
buttons: [
{ {
text: "Book Now", text: "Book Now", href: "#contact"},
href: "#contact",
},
], ],
features: [ features: [
"Signature Haircut", "Signature Haircut", "Traditional Hot Shave", "Beard Trim & Shape", "Facial Massage"],
"Traditional Hot Shave",
"Beard Trim & Shape",
"Facial Massage",
],
}, },
{ {
id: "beard-express", id: "beard-express", badge: "Quick Fix", price: "$30", subtitle: "Beard Perfection", buttons: [
badge: "Quick Fix",
price: "$30",
subtitle: "Beard Perfection",
buttons: [
{ {
text: "Book Now", text: "Book Now", href: "#contact"},
href: "#contact",
},
], ],
features: [ features: [
"Beard Trim", "Beard Trim", "Line-up & Fade", "Beard Conditioning"],
"Line-up & Fade",
"Beard Conditioning",
],
}, },
]} ]}
title="Invest in Your Look" title="Invest in Your Look"
@@ -220,36 +150,14 @@ export default function LandingPage() {
useInvertedBackground={false} useInvertedBackground={false}
groups={[ groups={[
{ {
id: "master-barbers", id: "master-barbers", groupTitle: "Expert Stylists", members: [
groupTitle: "Expert Stylists",
members: [
{ {
id: "barber-john", id: "barber-john", title: "John 'The Blade' Doe", subtitle: "Lead Stylist & Founder", detail: "With over 15 years of experience, John is a true master of classic cuts and modern fades. His passion for barbering shines through every detail.", imageSrc: "http://img.b2bpic.net/free-photo/isolated-view-bald-caucasian-hipster-male-with-thick-bushy-beard-tattoo-raising-eyebrows-crossing-arms-chest-his-closed-posture-look-expressing-distrust-body-language_343059-1709.jpg", imageAlt: "Portrait of John, lead stylist"},
title: "John 'The Blade' Doe",
subtitle: "Lead Stylist & Founder",
detail: "With over 15 years of experience, John is a true master of classic cuts and modern fades. His passion for barbering shines through every detail.",
imageSrc: "http://img.b2bpic.net/free-photo/isolated-view-bald-caucasian-hipster-male-with-thick-bushy-beard-tattoo-raising-eyebrows-crossing-arms-chest-his-closed-posture-look-expressing-distrust-body-language_343059-1709.jpg?_wi=2",
imageAlt: "Portrait of John, lead stylist",
},
{ {
id: "barber-jane", id: "barber-jane", title: "Jane 'The Artisan' Smith", subtitle: "Senior Barber & Colorist", detail: "Jane specializes in intricate beard designs and bold transformations. Her artistic eye ensures a unique style for every client.", imageSrc: "http://img.b2bpic.net/free-photo/portrait-man-with-tattoo-his-face-arms-dressed-white-shirt-grey-background_613910-8168.jpg", imageAlt: "Portrait of Jane, senior barber"},
title: "Jane 'The Artisan' Smith",
subtitle: "Senior Barber & Colorist",
detail: "Jane specializes in intricate beard designs and bold transformations. Her artistic eye ensures a unique style for every client.",
imageSrc: "http://img.b2bpic.net/free-photo/portrait-man-with-tattoo-his-face-arms-dressed-white-shirt-grey-background_613910-8168.jpg?_wi=2",
imageAlt: "Portrait of Jane, senior barber",
},
{ {
id: "barber-mike", id: "barber-mike", title: "Mike 'The Smooth' Johnson", subtitle: "Specialist in Shaves", detail: "Mike's traditional hot towel shaves are legendary. He guarantees the closest, smoothest shave you'll ever experience.", imageSrc: "http://img.b2bpic.net/free-photo/medium-shot-professional-chef-posing_23-2151232223.jpg", imageAlt: "Portrait of Mike, shave specialist"},
title: "Mike 'The Smooth' Johnson", ]
subtitle: "Specialist in Shaves",
detail: "Mike's traditional hot towel shaves are legendary. He guarantees the closest, smoothest shave you'll ever experience.",
imageSrc: "http://img.b2bpic.net/free-photo/medium-shot-professional-chef-posing_23-2151232223.jpg",
imageAlt: "Portrait of Mike, shave specialist",
},
],
imageSrc: "http://img.b2bpic.net/free-photo/vintage-wooden-table-with-beard-shaping-salon-tools_53876-127084.jpg?_wi=3",
imageAlt: "professional male barber portrait",
}, },
]} ]}
title="Meet Our Master Barbers" title="Meet Our Master Barbers"
@@ -264,59 +172,17 @@ export default function LandingPage() {
useInvertedBackground={true} useInvertedBackground={true}
testimonials={[ testimonials={[
{ {
id: "1", id: "1", title: "Best haircut in years!", quote: "John always delivers an impeccable haircut. The attention to detail is unmatched, and the atmosphere is incredibly welcoming. Highly recommend!", name: "Alex P.", role: "Regular Client", imageSrc: "http://img.b2bpic.net/free-photo/studio-portrait-positive-blond-bearded-male-dressed-red-fleece-shirt-makes-conversation_613910-13394.jpg", imageAlt: "Alex P."},
title: "Best haircut in years!",
quote: "John always delivers an impeccable haircut. The attention to detail is unmatched, and the atmosphere is incredibly welcoming. Highly recommend!",
name: "Alex P.",
role: "Regular Client",
imageSrc: "http://img.b2bpic.net/free-photo/studio-portrait-positive-blond-bearded-male-dressed-red-fleece-shirt-makes-conversation_613910-13394.jpg",
imageAlt: "Alex P.",
},
{ {
id: "2", id: "2", title: "Fantastic hot shave experience", quote: "Mike's hot towel shave is pure bliss. It's not just a shave; it's a relaxing ritual. My skin feels amazing every time.", name: "Ben C.", role: "Executive", imageSrc: "http://img.b2bpic.net/free-photo/man-with-long-beard-mustache-showing-thumbs-up-standing-front-grey-wall_181624-26654.jpg", imageAlt: "Ben C."},
title: "Fantastic hot shave experience",
quote: "Mike's hot towel shave is pure bliss. It's not just a shave; it's a relaxing ritual. My skin feels amazing every time.",
name: "Ben C.",
role: "Executive",
imageSrc: "http://img.b2bpic.net/free-photo/man-with-long-beard-mustache-showing-thumbs-up-standing-front-grey-wall_181624-26654.jpg",
imageAlt: "Ben C.",
},
{ {
id: "3", id: "3", title: "Jane styled my beard perfectly", quote: "I always struggled to find someone who understood my beard vision until I met Jane. She's an artist! My beard has never looked better.", name: "Chris D.", role: "Creative Director", imageSrc: "http://img.b2bpic.net/free-photo/smiley-woman-home-getting-ready-haircut_23-2148817221.jpg", imageAlt: "Chris D."},
title: "Jane styled my beard perfectly",
quote: "I always struggled to find someone who understood my beard vision until I met Jane. She's an artist! My beard has never looked better.",
name: "Chris D.",
role: "Creative Director",
imageSrc: "http://img.b2bpic.net/free-photo/smiley-woman-home-getting-ready-haircut_23-2148817221.jpg",
imageAlt: "Chris D.",
},
{ {
id: "4", id: "4", title: "Consistently excellent service", quote: "The Modern Cut is my go-to. Every barber here is highly skilled, and they make you feel right at home. A truly professional establishment.", name: "David L.", role: "Business Owner", imageSrc: "http://img.b2bpic.net/free-photo/hairdresser-combing-beard-senior-client-salon_23-2148182003.jpg", imageAlt: "David L."},
title: "Consistently excellent service",
quote: "The Modern Cut is my go-to. Every barber here is highly skilled, and they make you feel right at home. A truly professional establishment.",
name: "David L.",
role: "Business Owner",
imageSrc: "http://img.b2bpic.net/free-photo/hairdresser-combing-beard-senior-client-salon_23-2148182003.jpg",
imageAlt: "David L.",
},
{ {
id: "5", id: "5", title: "A true gem of a barbershop", quote: "From the moment you walk in, you know you're in good hands. The quality of the cut and the friendly staff make every visit a pleasure.", name: "Emily R.", role: "Photographer", imageSrc: "http://img.b2bpic.net/free-photo/closeup-smiling-goodlooking-man-showing-thumbs-up-praising-good-job-recommending-company-standing_1258-159836.jpg", imageAlt: "Emily R."},
title: "A true gem of a barbershop",
quote: "From the moment you walk in, you know you're in good hands. The quality of the cut and the friendly staff make every visit a pleasure.",
name: "Emily R.",
role: "Photographer",
imageSrc: "http://img.b2bpic.net/free-photo/closeup-smiling-goodlooking-man-showing-thumbs-up-praising-good-job-recommending-company-standing_1258-159836.jpg",
imageAlt: "Emily R.",
},
{ {
id: "6", id: "6", title: "My new favorite spot!", quote: "I tried The Modern Cut on a recommendation and haven't looked back. The best barbershop experience I've had in years. Always leave feeling fresh.", name: "Frank S.", role: "Student", imageSrc: "http://img.b2bpic.net/free-photo/shaving-concept-with-attractive-young-man_23-2148121910.jpg", imageAlt: "Frank S."},
title: "My new favorite spot!",
quote: "I tried The Modern Cut on a recommendation and haven't looked back. The best barbershop experience I've had in years. Always leave feeling fresh.",
name: "Frank S.",
role: "Student",
imageSrc: "http://img.b2bpic.net/free-photo/shaving-concept-with-attractive-young-man_23-2148121910.jpg",
imageAlt: "Frank S.",
},
]} ]}
title="Voices of Satisfaction" title="Voices of Satisfaction"
description="Hear directly from our valued clients who trust The Modern Cut for their grooming needs and exceptional service." description="Hear directly from our valued clients who trust The Modern Cut for their grooming needs and exceptional service."
@@ -329,14 +195,7 @@ export default function LandingPage() {
textboxLayout="default" textboxLayout="default"
useInvertedBackground={false} useInvertedBackground={false}
names={[ names={[
"GQ Magazine", "GQ Magazine", "Men's Health", "Barber's Journal", "Local Style Awards", "CityLife Magazine", "Grooming Today", "The Daily Trim"]}
"Men's Health",
"Barber's Journal",
"Local Style Awards",
"CityLife Magazine",
"Grooming Today",
"The Daily Trim",
]}
title="Recognized for Excellence" title="Recognized for Excellence"
description="Our commitment to quality grooming has been acknowledged by leading publications and local community awards." description="Our commitment to quality grooming has been acknowledged by leading publications and local community awards."
tag="Featured In" tag="Featured In"
@@ -349,35 +208,17 @@ export default function LandingPage() {
useInvertedBackground={true} useInvertedBackground={true}
faqs={[ faqs={[
{ {
id: "faq-1", id: "faq-1", title: "How do I book an appointment?", content: "You can easily book an appointment through our website's 'Book Now' button, or by calling us directly during business hours. We recommend booking in advance."},
title: "How do I book an appointment?",
content: "You can easily book an appointment through our website's 'Book Now' button, or by calling us directly during business hours. We recommend booking in advance.",
},
{ {
id: "faq-2", id: "faq-2", title: "Do you accept walk-ins?", content: "While we prioritize appointments to ensure timely service, we do accept walk-ins based on availability. Calling ahead is always advised."},
title: "Do you accept walk-ins?",
content: "While we prioritize appointments to ensure timely service, we do accept walk-ins based on availability. Calling ahead is always advised.",
},
{ {
id: "faq-3", id: "faq-3", title: "What products do you use?", content: "We use only premium grooming products from trusted brands, selected for their quality and effectiveness in maintaining healthy hair and skin."},
title: "What products do you use?",
content: "We use only premium grooming products from trusted brands, selected for their quality and effectiveness in maintaining healthy hair and skin.",
},
{ {
id: "faq-4", id: "faq-4", title: "Can I request a specific barber?", content: "Yes, you can request your preferred barber when booking your appointment online or over the phone. Availability varies by barber."},
title: "Can I request a specific barber?",
content: "Yes, you can request your preferred barber when booking your appointment online or over the phone. Availability varies by barber.",
},
{ {
id: "faq-5", id: "faq-5", title: "What is your cancellation policy?", content: "We require at least 24 hours notice for cancellations or rescheduling. Late cancellations may incur a fee."},
title: "What is your cancellation policy?",
content: "We require at least 24 hours notice for cancellations or rescheduling. Late cancellations may incur a fee.",
},
{ {
id: "faq-6", id: "faq-6", title: "Do you offer gift cards?", content: "Yes, gift cards are available for purchase in-store and can be used towards any of our services."},
title: "Do you offer gift cards?",
content: "Yes, gift cards are available for purchase in-store and can be used towards any of our services.",
},
]} ]}
title="Frequently Asked Questions" title="Frequently Asked Questions"
description="Find quick answers to common questions about our services, booking, and barbershop policies." description="Find quick answers to common questions about our services, booking, and barbershop policies."
@@ -390,20 +231,15 @@ export default function LandingPage() {
<ContactCTA <ContactCTA
useInvertedBackground={false} useInvertedBackground={false}
background={{ background={{
variant: "plain", variant: "plain"}}
}}
tag="Ready for a Fresh Look?" tag="Ready for a Fresh Look?"
title="Book Your Next Appointment" title="Book Your Next Appointment"
description="Don't wait! Schedule your visit to The Modern Cut today and experience the difference of expert grooming." description="Don't wait! Schedule your visit to The Modern Cut today and experience the difference of expert grooming."
buttons={[ buttons={[
{ {
text: "Book Online Now", text: "Book Online Now", href: "#"},
href: "#",
},
{ {
text: "Call Us: (123) 456-7890", text: "Call Us: (123) 456-7890", href: "tel:+1234567890"},
href: "tel:+1234567890",
},
]} ]}
/> />
</div> </div>
@@ -413,62 +249,37 @@ export default function LandingPage() {
logoText="The Modern Cut" logoText="The Modern Cut"
columns={[ columns={[
{ {
title: "Services", title: "Services", items: [
items: [
{ {
label: "Haircuts", label: "Haircuts", href: "#services"},
href: "#services",
},
{ {
label: "Shaves", label: "Shaves", href: "#services"},
href: "#services",
},
{ {
label: "Beard Trims", label: "Beard Trims", href: "#services"},
href: "#services",
},
{ {
label: "Styling", label: "Styling", href: "#services"},
href: "#services",
},
], ],
}, },
{ {
title: "Company", title: "Company", items: [
items: [
{ {
label: "About Us", label: "About Us", href: "#about"},
href: "#about",
},
{ {
label: "Our Team", label: "Our Team", href: "#barbers"},
href: "#barbers",
},
{ {
label: "Pricing", label: "Pricing", href: "#pricing"},
href: "#pricing",
},
{ {
label: "Contact", label: "Contact", href: "#contact"},
href: "#contact",
},
], ],
}, },
{ {
title: "Support", title: "Support", items: [
items: [
{ {
label: "FAQ", label: "FAQ", href: "#faq"},
href: "#faq",
},
{ {
label: "Privacy Policy", label: "Privacy Policy", href: "#"},
href: "#",
},
{ {
label: "Terms of Service", label: "Terms of Service", href: "#"},
href: "#",
},
], ],
}, },
]} ]}