Update src/app/page.tsx

This commit is contained in:
2026-06-03 07:54:55 +00:00
parent 6ca91d7854
commit 158bed615f

View File

@@ -33,38 +33,22 @@ export default function LandingPage() {
<NavbarStyleCentered
navItems={[
{
name: "Home",
id: "#hero",
},
name: "Home", id: "#hero"},
{
name: "About",
id: "#about",
},
name: "About", id: "#about"},
{
name: "Services",
id: "#services",
},
name: "Services", id: "#services"},
{
name: "Team",
id: "#team",
},
name: "Team", id: "#team"},
{
name: "Reviews",
id: "#testimonials",
},
name: "Reviews", id: "#testimonials"},
{
name: "FAQ",
id: "#faq",
},
name: "FAQ", id: "#faq"},
{
name: "Contact",
id: "#contact",
},
name: "Contact", id: "#contact"},
]}
button={{
text: "Book Now",
href: "#contact",
}}
text: "Book Now", href: "#contact"}}
brandName="The Trim House"
/>
</div>
@@ -72,46 +56,29 @@ export default function LandingPage() {
<div id="hero" data-section="hero">
<HeroBillboardCarousel
background={{
variant: "plain",
}}
variant: "plain"}}
title="Experience the Art of Grooming"
description="Step into The Trim House for a precision cut, a perfect shave, and a fresh new look. Our expert barbers are dedicated to crafting your signature style."
tag="Your Style, Our Craft"
buttons={[
{
text: "Book Your Appointment",
href: "#contact",
},
text: "Book Your Appointment", href: "#contact"},
{
text: "Explore Services",
href: "#services",
},
text: "Explore Services", href: "#services"},
]}
mediaItems={[
{
imageSrc: "http://img.b2bpic.net/free-photo/professional-hairdresser-modeling-beard-barbershop-close-up-photo_613910-4293.jpg?_wi=1",
imageAlt: "Stylish barber shop interior",
},
imageSrc: "http://img.b2bpic.net/free-photo/professional-hairdresser-modeling-beard-barbershop-close-up-photo_613910-4293.jpg", imageAlt: "Stylish barber shop interior"},
{
imageSrc: "http://img.b2bpic.net/free-photo/hairdresser-grooming-their-client_23-2149205927.jpg?_wi=1",
imageAlt: "Man getting a fresh haircut",
},
imageSrc: "http://img.b2bpic.net/free-photo/hairdresser-grooming-their-client_23-2149205927.jpg", imageAlt: "Man getting a fresh haircut"},
{
imageSrc: "http://img.b2bpic.net/free-photo/full-body-portrait-stylish-male-who-himself-shaving-while-sitting-barber-chair-hairdressing-salon_613910-18655.jpg?_wi=1",
imageAlt: "Modern grooming salon ambiance",
},
imageSrc: "http://img.b2bpic.net/free-photo/full-body-portrait-stylish-male-who-himself-shaving-while-sitting-barber-chair-hairdressing-salon_613910-18655.jpg", imageAlt: "Modern grooming salon ambiance"},
{
imageSrc: "http://img.b2bpic.net/free-photo/portrait-handsome-groom-his-beach-wedding_23-2149044005.jpg",
imageAlt: "Barber cutting hair with precision",
},
imageSrc: "http://img.b2bpic.net/free-photo/portrait-handsome-groom-his-beach-wedding_23-2149044005.jpg", imageAlt: "Barber cutting hair with precision"},
{
imageSrc: "http://img.b2bpic.net/free-photo/latino-hair-salon-owner-preparing-clients_23-2150286009.jpg",
imageAlt: "Exterior of a stylish barbershop",
},
imageSrc: "http://img.b2bpic.net/free-photo/latino-hair-salon-owner-preparing-clients_23-2150286009.jpg", imageAlt: "Exterior of a stylish barbershop"},
{
imageSrc: "http://img.b2bpic.net/free-photo/high-angle-male-self-care-setting-still-life_23-2150326583.jpg",
imageAlt: "Barber tools and styling products",
},
imageSrc: "http://img.b2bpic.net/free-photo/high-angle-male-self-care-setting-still-life_23-2150326583.jpg", imageAlt: "Barber tools and styling products"},
]}
/>
</div>
@@ -121,15 +88,11 @@ export default function LandingPage() {
useInvertedBackground={false}
heading={[
{
type: "text",
content: "Where Tradition Meets Modern Style",
},
type: "text", content: "Where Tradition Meets Modern Style"},
]}
buttons={[
{
text: "Meet Our Team",
href: "#team",
},
text: "Meet Our Team", href: "#team"},
]}
/>
</div>
@@ -141,46 +104,22 @@ export default function LandingPage() {
useInvertedBackground={true}
features={[
{
title: "Precision Haircuts",
description: "From classic cuts to modern styles, our barbers deliver sharp, personalized haircuts tailored to your head shape and preference.",
phoneOne: {
imageSrc: "http://img.b2bpic.net/free-photo/close-up-hands-using-styling-tools_23-2149141730.jpg",
imageAlt: "Barber styling short hair",
},
title: "Precision Haircuts", description: "From classic cuts to modern styles, our barbers deliver sharp, personalized haircuts tailored to your head shape and preference.", phoneOne: {
imageSrc: "http://img.b2bpic.net/free-photo/close-up-hands-using-styling-tools_23-2149141730.jpg", imageAlt: "Barber styling short hair"},
phoneTwo: {
imageSrc: "http://img.b2bpic.net/free-photo/high-angle-man-getting-groomed_23-2150668468.jpg",
imageAlt: "Fresh haircut detail",
},
imageSrc: "http://img.b2bpic.net/free-photo/professional-hairdresser-modeling-beard-barbershop-close-up-photo_613910-4293.jpg?_wi=2",
imageAlt: "barber styling short hair",
imageSrc: "http://img.b2bpic.net/free-photo/high-angle-man-getting-groomed_23-2150668468.jpg", imageAlt: "Fresh haircut detail"}
},
{
title: "Luxury Hot Shaves",
description: "Indulge in our traditional hot towel shave experience, ensuring a close, smooth, and incredibly relaxing finish every time.",
phoneOne: {
imageSrc: "http://img.b2bpic.net/free-photo/flat-lay-composition-shaving-objects_23-2148121970.jpg",
imageAlt: "Barber using clippers",
},
title: "Luxury Hot Shaves", description: "Indulge in our traditional hot towel shave experience, ensuring a close, smooth, and incredibly relaxing finish every time.", phoneOne: {
imageSrc: "http://img.b2bpic.net/free-photo/flat-lay-composition-shaving-objects_23-2148121970.jpg", imageAlt: "Barber using clippers"},
phoneTwo: {
imageSrc: "http://img.b2bpic.net/free-photo/medical-mask-hand-sanitizer-gym-bench_23-2148766080.jpg",
imageAlt: "Clean barbershop mirror",
},
imageSrc: "http://img.b2bpic.net/free-photo/hairdresser-grooming-their-client_23-2149205927.jpg?_wi=2",
imageAlt: "barber styling short hair",
imageSrc: "http://img.b2bpic.net/free-photo/medical-mask-hand-sanitizer-gym-bench_23-2148766080.jpg", imageAlt: "Clean barbershop mirror"}
},
{
title: "Beard Trims & Shaping",
description: "Keep your beard looking its best with our expert trimming, shaping, and conditioning services for a perfectly groomed look.",
phoneOne: {
imageSrc: "http://img.b2bpic.net/free-photo/child-getting-their-hair-blown-salon_23-2150462464.jpg",
imageAlt: "Barber discussing hairstyle",
},
title: "Beard Trims & Shaping", description: "Keep your beard looking its best with our expert trimming, shaping, and conditioning services for a perfectly groomed look.", phoneOne: {
imageSrc: "http://img.b2bpic.net/free-photo/child-getting-their-hair-blown-salon_23-2150462464.jpg", imageAlt: "Barber discussing hairstyle"},
phoneTwo: {
imageSrc: "http://img.b2bpic.net/free-photo/pensive-brunette-girl-thoughtfully-looking-camera-modern-self-service-laundry_574295-2559.jpg",
imageAlt: "Satisfied client",
},
imageSrc: "http://img.b2bpic.net/free-photo/full-body-portrait-stylish-male-who-himself-shaving-while-sitting-barber-chair-hairdressing-salon_613910-18655.jpg?_wi=2",
imageAlt: "barber styling short hair",
imageSrc: "http://img.b2bpic.net/free-photo/pensive-brunette-girl-thoughtfully-looking-camera-modern-self-service-laundry_574295-2559.jpg", imageAlt: "Satisfied client"}
},
]}
showStepNumbers={false}
@@ -197,53 +136,17 @@ export default function LandingPage() {
useInvertedBackground={false}
products={[
{
id: "p1",
name: "Hair Pomade",
price: "$22.00",
variant: "Strong Hold",
imageSrc: "http://img.b2bpic.net/free-photo/top-view-male-self-care-items_23-2150347097.jpg",
imageAlt: "Premium hair pomade jar",
},
id: "p1", name: "Hair Pomade", price: "$22.00", variant: "Strong Hold", imageSrc: "http://img.b2bpic.net/free-photo/top-view-male-self-care-items_23-2150347097.jpg", imageAlt: "Premium hair pomade jar"},
{
id: "p2",
name: "Beard Oil",
price: "$28.00",
variant: "Nourishing",
imageSrc: "http://img.b2bpic.net/free-photo/boomers-using-cbd-oil-cream-treating-body-pain_23-2151263457.jpg",
imageAlt: "Beard oil bottle dropper",
},
id: "p2", name: "Beard Oil", price: "$28.00", variant: "Nourishing", imageSrc: "http://img.b2bpic.net/free-photo/boomers-using-cbd-oil-cream-treating-body-pain_23-2151263457.jpg", imageAlt: "Beard oil bottle dropper"},
{
id: "p3",
name: "Shaving Cream",
price: "$18.00",
variant: "Rich Lather",
imageSrc: "http://img.b2bpic.net/free-photo/hairstyle-supplies_1157-7704.jpg",
imageAlt: "Shaving cream and brush set",
},
id: "p3", name: "Shaving Cream", price: "$18.00", variant: "Rich Lather", imageSrc: "http://img.b2bpic.net/free-photo/hairstyle-supplies_1157-7704.jpg", imageAlt: "Shaving cream and brush set"},
{
id: "p4",
name: "Aftershave Balm",
price: "$25.00",
variant: "Soothing",
imageSrc: "http://img.b2bpic.net/free-photo/perfume-bottle-nature_23-2151890507.jpg",
imageAlt: "Aftershave balm for men",
},
id: "p4", name: "Aftershave Balm", price: "$25.00", variant: "Soothing", imageSrc: "http://img.b2bpic.net/free-photo/perfume-bottle-nature_23-2151890507.jpg", imageAlt: "Aftershave balm for men"},
{
id: "p5",
name: "Hair Spray",
price: "$20.00",
variant: "Flexible Hold",
imageSrc: "http://img.b2bpic.net/free-photo/happy-young-woman-holding-filmstrip_114579-47221.jpg",
imageAlt: "Hair styling spray for hold",
},
id: "p5", name: "Hair Spray", price: "$20.00", variant: "Flexible Hold", imageSrc: "http://img.b2bpic.net/free-photo/happy-young-woman-holding-filmstrip_114579-47221.jpg", imageAlt: "Hair styling spray for hold"},
{
id: "p6",
name: "Styling Comb",
price: "$12.00",
variant: "Anti-Static",
imageSrc: "http://img.b2bpic.net/free-photo/hairstyle-tools-arrangement-top-view_23-2149552385.jpg",
imageAlt: "Hair comb and brush set",
},
id: "p6", name: "Styling Comb", price: "$12.00", variant: "Anti-Static", imageSrc: "http://img.b2bpic.net/free-photo/hairstyle-tools-arrangement-top-view_23-2149552385.jpg", imageAlt: "Hair comb and brush set"},
]}
title="Premium Grooming Products"
description="Take the barbershop experience home with our selection of high-quality hair and beard care products."
@@ -257,59 +160,23 @@ export default function LandingPage() {
useInvertedBackground={true}
plans={[
{
id: "p-cut",
title: "Signature Haircut",
price: "$45",
period: "per session",
features: [
"Precision Cut",
"Hair Wash & Condition",
"Hot Towel Finish",
"Style Consultation",
],
id: "p-cut", title: "Signature Haircut", price: "$45", period: "per session", features: [
"Precision Cut", "Hair Wash & Condition", "Hot Towel Finish", "Style Consultation"],
button: {
text: "Book Haircut",
href: "#contact",
},
imageSrc: "http://img.b2bpic.net/free-photo/instruments-used-latino-hair-salon_23-2150555177.jpg",
imageAlt: "Classic haircut scissors",
},
text: "Book Haircut", href: "#contact"},
imageSrc: "http://img.b2bpic.net/free-photo/instruments-used-latino-hair-salon_23-2150555177.jpg", imageAlt: "Classic haircut scissors"},
{
id: "p-shave",
title: "Classic Hot Shave",
price: "$35",
period: "per session",
features: [
"Traditional Razor Shave",
"Pre-Shave Prep",
"Hot & Cold Towels",
"Aftershave Application",
],
id: "p-shave", title: "Classic Hot Shave", price: "$35", period: "per session", features: [
"Traditional Razor Shave", "Pre-Shave Prep", "Hot & Cold Towels", "Aftershave Application"],
button: {
text: "Book Shave",
href: "#contact",
},
imageSrc: "http://img.b2bpic.net/free-photo/handsome-bearded-man-barbershop-barber-work-washing-head_627829-7378.jpg",
imageAlt: "Man receiving hot towel shave",
},
text: "Book Shave", href: "#contact"},
imageSrc: "http://img.b2bpic.net/free-photo/handsome-bearded-man-barbershop-barber-work-washing-head_627829-7378.jpg", imageAlt: "Man receiving hot towel shave"},
{
id: "p-beard",
title: "Beard Trim & Shape",
price: "$25",
period: "per session",
features: [
"Beard Trimming",
"Line-Up & Shaping",
"Beard Conditioning",
"Style Guidance",
],
id: "p-beard", title: "Beard Trim & Shape", price: "$25", period: "per session", features: [
"Beard Trimming", "Line-Up & Shaping", "Beard Conditioning", "Style Guidance"],
button: {
text: "Book Beard Trim",
href: "#contact",
},
imageSrc: "http://img.b2bpic.net/free-photo/man-having-hair-shaved-by-crop-barber_23-2147778769.jpg",
imageAlt: "Beard trim and shape",
},
text: "Book Beard Trim", href: "#contact"},
imageSrc: "http://img.b2bpic.net/free-photo/man-having-hair-shaved-by-crop-barber_23-2147778769.jpg", imageAlt: "Beard trim and shape"},
]}
title="Our Pricing"
description="Transparent pricing for quality grooming services."
@@ -325,29 +192,13 @@ export default function LandingPage() {
membersAnimation="slide-up"
members={[
{
id: "t1",
name: "Mark 'The Blade' Johnson",
imageSrc: "http://img.b2bpic.net/free-photo/portrait-man-going-out-shopping-various-consumer-goods_23-2151669758.jpg",
imageAlt: "Professional male barber Mark Johnson",
},
id: "t1", name: "Mark 'The Blade' Johnson", imageSrc: "http://img.b2bpic.net/free-photo/portrait-man-going-out-shopping-various-consumer-goods_23-2151669758.jpg", imageAlt: "Professional male barber Mark Johnson"},
{
id: "t2",
name: "Chris 'The Cut' Williams",
imageSrc: "http://img.b2bpic.net/free-photo/side-view-barber-styling-beard-man_23-2147778888.jpg",
imageAlt: "Young confident barber Chris Williams",
},
id: "t2", name: "Chris 'The Cut' Williams", imageSrc: "http://img.b2bpic.net/free-photo/side-view-barber-styling-beard-man_23-2147778888.jpg", imageAlt: "Young confident barber Chris Williams"},
{
id: "t3",
name: "Sarah 'The Style' Davis",
imageSrc: "http://img.b2bpic.net/free-photo/pleased-young-beautiful-female-barber-uniform-holding-barber-tools-isolated-pink-wall_141793-106141.jpg",
imageAlt: "Female barber Sarah Davis",
},
id: "t3", name: "Sarah 'The Style' Davis", imageSrc: "http://img.b2bpic.net/free-photo/pleased-young-beautiful-female-barber-uniform-holding-barber-tools-isolated-pink-wall_141793-106141.jpg", imageAlt: "Female barber Sarah Davis"},
{
id: "t4",
name: "David 'The Guru' Lee",
imageSrc: "http://img.b2bpic.net/free-photo/electric-hair-clipper-men-rsquo-s-barber-jobs-career-campaign_53876-127187.jpg",
imageAlt: "Master barber David Lee",
},
id: "t4", name: "David 'The Guru' Lee", imageSrc: "http://img.b2bpic.net/free-photo/electric-hair-clipper-men-rsquo-s-barber-jobs-career-campaign_53876-127187.jpg", imageAlt: "Master barber David Lee"},
]}
memberVariant="card"
/>
@@ -360,53 +211,17 @@ export default function LandingPage() {
useInvertedBackground={true}
testimonials={[
{
id: "ts1",
name: "James R.",
handle: "@jamesr",
testimonial: "Always a perfect cut and an even better experience. The attention to detail here is unmatched!",
imageSrc: "http://img.b2bpic.net/free-photo/couple-party_23-2148115738.jpg",
imageAlt: "Happy man in barber chair",
},
id: "ts1", name: "James R.", handle: "@jamesr", testimonial: "Always a perfect cut and an even better experience. The attention to detail here is unmatched!", imageSrc: "http://img.b2bpic.net/free-photo/couple-party_23-2148115738.jpg", imageAlt: "Happy man in barber chair"},
{
id: "ts2",
name: "Michael S.",
handle: "@michaels",
testimonial: "The hot shave is incredibly relaxing and precise. Feel like a new man every time I leave!",
imageSrc: "http://img.b2bpic.net/free-photo/close-up-people-with-thumbs-up_23-2149008927.jpg",
imageAlt: "Man showing new hairstyle",
},
id: "ts2", name: "Michael S.", handle: "@michaels", testimonial: "The hot shave is incredibly relaxing and precise. Feel like a new man every time I leave!", imageSrc: "http://img.b2bpic.net/free-photo/close-up-people-with-thumbs-up_23-2149008927.jpg", imageAlt: "Man showing new hairstyle"},
{
id: "ts3",
name: "Ethan L.",
handle: "@ethanl",
testimonial: "Best beard trim in the city. They truly understand how to shape and maintain a perfect beard.",
imageSrc: "http://img.b2bpic.net/free-photo/front-view-beautiful-woman-dog_23-2148777166.jpg",
imageAlt: "Man with well-groomed beard",
},
id: "ts3", name: "Ethan L.", handle: "@ethanl", testimonial: "Best beard trim in the city. They truly understand how to shape and maintain a perfect beard.", imageSrc: "http://img.b2bpic.net/free-photo/front-view-beautiful-woman-dog_23-2148777166.jpg", imageAlt: "Man with well-groomed beard"},
{
id: "ts4",
name: "Daniel C.",
handle: "@danielc",
testimonial: "Professional, friendly, and consistently great results. My go-to spot for grooming.",
imageSrc: "http://img.b2bpic.net/free-photo/cute-teenage-girl-with-dog-pet-girl-playing-with-her-pet-dog-home_169016-68317.jpg",
imageAlt: "Man enjoying hot towel experience",
},
id: "ts4", name: "Daniel C.", handle: "@danielc", testimonial: "Professional, friendly, and consistently great results. My go-to spot for grooming.", imageSrc: "http://img.b2bpic.net/free-photo/cute-teenage-girl-with-dog-pet-girl-playing-with-her-pet-dog-home_169016-68317.jpg", imageAlt: "Man enjoying hot towel experience"},
{
id: "ts5",
name: "Oliver P.",
handle: "@oliverp",
testimonial: "They listen to exactly what you want and deliver. Couldn't be happier with my new haircut.",
imageSrc: "http://img.b2bpic.net/free-photo/side-view-man-getting-haircut_23-2150665412.jpg",
imageAlt: "Client pointing to perfect haircut",
},
id: "ts5", name: "Oliver P.", handle: "@oliverp", testimonial: "They listen to exactly what you want and deliver. Couldn't be happier with my new haircut.", imageSrc: "http://img.b2bpic.net/free-photo/side-view-man-getting-haircut_23-2150665412.jpg", imageAlt: "Client pointing to perfect haircut"},
{
id: "ts6",
name: "Noah F.",
handle: "@noahf",
testimonial: "Highly recommend The Trim House! The atmosphere is great and the barbers are true artists.",
imageSrc: "http://img.b2bpic.net/free-photo/portrait-confident-man-elegant-suit-glasses-correct-his-jacket-while-standing-against-skyscraper-background_613910-4110.jpg",
imageAlt: "Man with confident new look",
},
id: "ts6", name: "Noah F.", handle: "@noahf", testimonial: "Highly recommend The Trim House! The atmosphere is great and the barbers are true artists.", imageSrc: "http://img.b2bpic.net/free-photo/portrait-confident-man-elegant-suit-glasses-correct-his-jacket-while-standing-against-skyscraper-background_613910-4110.jpg", imageAlt: "Man with confident new look"},
]}
title="What Our Clients Say"
description="Hear from our satisfied customers who trust us with their style."
@@ -421,25 +236,13 @@ export default function LandingPage() {
useInvertedBackground={false}
faqs={[
{
id: "faq1",
title: "How do I book an appointment?",
content: "You can easily book an appointment through our website's booking system, or by calling us directly during business hours. Walk-ins are welcome, but appointments are highly recommended.",
},
id: "faq1", title: "How do I book an appointment?", content: "You can easily book an appointment through our website's booking system, or by calling us directly during business hours. Walk-ins are welcome, but appointments are highly recommended."},
{
id: "faq2",
title: "What payment methods do you accept?",
content: "We accept all major credit cards, debit cards, and cash. Digital payment options like Apple Pay and Google Pay are also available.",
},
id: "faq2", title: "What payment methods do you accept?", content: "We accept all major credit cards, debit cards, and cash. Digital payment options like Apple Pay and Google Pay are also available."},
{
id: "faq3",
title: "Do you offer gift cards?",
content: "Yes, gift cards are available for purchase at our salon. They make the perfect gift for any occasion for the stylish gentleman in your life.",
},
id: "faq3", title: "Do you offer gift cards?", content: "Yes, gift cards are available for purchase at our salon. They make the perfect gift for any occasion for the stylish gentleman in your life."},
{
id: "faq4",
title: "What is your cancellation policy?",
content: "We require at least 24 hours notice for any cancellations or rescheduling. This allows us to offer the slot to other clients. Late cancellations may incur a fee.",
},
id: "faq4", title: "What is your cancellation policy?", content: "We require at least 24 hours notice for any cancellations or rescheduling. This allows us to offer the slot to other clients. Late cancellations may incur a fee."},
]}
title="Frequently Asked Questions"
description="Find answers to common questions about our services, booking, and more."
@@ -451,20 +254,15 @@ export default function LandingPage() {
<ContactCTA
useInvertedBackground={true}
background={{
variant: "sparkles-gradient",
}}
variant: "sparkles-gradient"}}
tag="Ready for a Fresh Look?"
title="Book Your Appointment Today!"
description="Schedule your next visit to The Trim House. We look forward to seeing you."
buttons={[
{
text: "Book Now",
href: "#",
},
text: "Book Now", href: "#"},
{
text: "Call Us: (123) 456-7890",
href: "tel:+1234567890",
},
text: "Call Us: (123) 456-7890", href: "tel:+1234567890"},
]}
/>
</div>
@@ -475,49 +273,31 @@ export default function LandingPage() {
{
items: [
{
label: "Home",
href: "#hero",
},
label: "Home", href: "#hero"},
{
label: "About Us",
href: "#about",
},
label: "About Us", href: "#about"},
{
label: "Services",
href: "#services",
},
label: "Services", href: "#services"},
{
label: "Our Team",
href: "#team",
},
label: "Our Team", href: "#team"},
],
},
{
items: [
{
label: "FAQ",
href: "#faq",
},
label: "FAQ", href: "#faq"},
{
label: "Contact",
href: "#contact",
},
label: "Contact", href: "#contact"},
{
label: "Book Now",
href: "#contact",
},
label: "Book Now", href: "#contact"},
],
},
{
items: [
{
label: "Privacy Policy",
href: "#",
},
label: "Privacy Policy", href: "#"},
{
label: "Terms of Service",
href: "#",
},
label: "Terms of Service", href: "#"},
],
},
]}