Merge version_1 into main #2
274
src/app/page.tsx
274
src/app/page.tsx
@@ -33,21 +33,13 @@ export default function LandingPage() {
|
||||
<NavbarStyleFullscreen
|
||||
navItems={[
|
||||
{
|
||||
name: "Home",
|
||||
id: "hero",
|
||||
},
|
||||
name: "Home", id: "hero"},
|
||||
{
|
||||
name: "Styles",
|
||||
id: "features",
|
||||
},
|
||||
name: "Styles", id: "features"},
|
||||
{
|
||||
name: "Services",
|
||||
id: "pricing",
|
||||
},
|
||||
name: "Services", id: "pricing"},
|
||||
{
|
||||
name: "Contact",
|
||||
id: "contact",
|
||||
},
|
||||
name: "Contact", id: "contact"},
|
||||
]}
|
||||
brandName="BARBER SHOP"
|
||||
/>
|
||||
@@ -56,47 +48,26 @@ export default function LandingPage() {
|
||||
<div id="hero" data-section="hero">
|
||||
<HeroBillboardRotatedCarousel
|
||||
background={{
|
||||
variant: "rotated-rays-animated",
|
||||
}}
|
||||
variant: "rotated-rays-animated"}}
|
||||
title="Modern Cuts, Timeless Style."
|
||||
description="Professional grooming services tailored for the modern gentleman. Experience expert precision and classic barber techniques."
|
||||
buttons={[
|
||||
{
|
||||
text: "Book Appointment",
|
||||
href: "#contact",
|
||||
},
|
||||
text: "Book Appointment", href: "#contact"},
|
||||
]}
|
||||
carouselItems={[
|
||||
{
|
||||
id: "1",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/hair-salon-chair-with-towel-armchair_23-2148242777.jpg?_wi=1",
|
||||
imageAlt: "Barber chair",
|
||||
},
|
||||
id: "1", imageSrc: "http://img.b2bpic.net/free-photo/hair-salon-chair-with-towel-armchair_23-2148242777.jpg", imageAlt: "Barber chair"},
|
||||
{
|
||||
id: "2",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/set-razors-table_23-2147736987.jpg?_wi=1",
|
||||
imageAlt: "Barber tools",
|
||||
},
|
||||
id: "2", imageSrc: "http://img.b2bpic.net/free-photo/set-razors-table_23-2147736987.jpg", imageAlt: "Barber tools"},
|
||||
{
|
||||
id: "3",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/pretty-barber-girl-cutting-hair_624325-3064.jpg?_wi=1",
|
||||
imageAlt: "Styling session",
|
||||
},
|
||||
id: "3", imageSrc: "http://img.b2bpic.net/free-photo/pretty-barber-girl-cutting-hair_624325-3064.jpg", imageAlt: "Styling session"},
|
||||
{
|
||||
id: "4",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/vintage-paper-with-beard-shaping-salon-tools_53876-128911.jpg?_wi=1",
|
||||
imageAlt: "Modern interior",
|
||||
},
|
||||
id: "4", imageSrc: "http://img.b2bpic.net/free-photo/vintage-paper-with-beard-shaping-salon-tools_53876-128911.jpg", imageAlt: "Modern interior"},
|
||||
{
|
||||
id: "5",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/close-up-man-selfcare-products_23-2149313073.jpg?_wi=1",
|
||||
imageAlt: "Grooming products",
|
||||
},
|
||||
id: "5", imageSrc: "http://img.b2bpic.net/free-photo/close-up-man-selfcare-products_23-2149313073.jpg", imageAlt: "Grooming products"},
|
||||
{
|
||||
id: "6",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/two-businessmen-talking-phone-city_1153-8202.jpg",
|
||||
imageAlt: "Finished look",
|
||||
},
|
||||
id: "6", imageSrc: "http://img.b2bpic.net/free-photo/two-businessmen-talking-phone-city_1153-8202.jpg", imageAlt: "Finished look"},
|
||||
]}
|
||||
/>
|
||||
</div>
|
||||
@@ -108,55 +79,31 @@ export default function LandingPage() {
|
||||
useInvertedBackground={true}
|
||||
features={[
|
||||
{
|
||||
title: "Precision Fading",
|
||||
description: "Expertly executed skin fades and tapers for a clean, sharp finish.",
|
||||
icon: Scissors,
|
||||
title: "Precision Fading", description: "Expertly executed skin fades and tapers for a clean, sharp finish.", icon: Scissors,
|
||||
mediaItems: [
|
||||
{
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/close-up-head-young-bearded-man-getting-haircut-barbershop-barber-soul_627829-6363.jpg",
|
||||
imageAlt: "precision fading haircut side view",
|
||||
},
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/close-up-head-young-bearded-man-getting-haircut-barbershop-barber-soul_627829-6363.jpg", imageAlt: "precision fading haircut side view"},
|
||||
{
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/blond-man-happy-expression_1194-2900.jpg",
|
||||
imageAlt: "barber doing skin fade cut",
|
||||
},
|
||||
],
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/hair-salon-chair-with-towel-armchair_23-2148242777.jpg?_wi=2",
|
||||
imageAlt: "precision fading haircut side view",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/blond-man-happy-expression_1194-2900.jpg", imageAlt: "barber doing skin fade cut"},
|
||||
]
|
||||
},
|
||||
{
|
||||
title: "Classic Scissor Cuts",
|
||||
description: "Timeless scissor work for a sophisticated and natural look.",
|
||||
icon: User,
|
||||
title: "Classic Scissor Cuts", description: "Timeless scissor work for a sophisticated and natural look.", icon: User,
|
||||
mediaItems: [
|
||||
{
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/stylish-man-sitting-barbershop_1157-27165.jpg",
|
||||
imageAlt: "classic scissor cut technique",
|
||||
},
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/stylish-man-sitting-barbershop_1157-27165.jpg", imageAlt: "classic scissor cut technique"},
|
||||
{
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/steel-scissors-lie-wave-silk-brown-hair_8353-7033.jpg",
|
||||
imageAlt: "traditional barber scissor hair style",
|
||||
},
|
||||
],
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/set-razors-table_23-2147736987.jpg?_wi=2",
|
||||
imageAlt: "precision fading haircut side view",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/steel-scissors-lie-wave-silk-brown-hair_8353-7033.jpg", imageAlt: "traditional barber scissor hair style"},
|
||||
]
|
||||
},
|
||||
{
|
||||
title: "Hot Towel Shaves",
|
||||
description: "Indulge in our luxurious grooming ritual with hot towels and premium oils.",
|
||||
icon: Sparkles,
|
||||
title: "Hot Towel Shaves", description: "Indulge in our luxurious grooming ritual with hot towels and premium oils.", icon: Sparkles,
|
||||
mediaItems: [
|
||||
{
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/close-up-man-s-shaving-accessories-with-napkin-wooden-table_23-2148088555.jpg",
|
||||
imageAlt: "barber hot towel shave session",
|
||||
},
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/close-up-man-s-shaving-accessories-with-napkin-wooden-table_23-2148088555.jpg", imageAlt: "barber hot towel shave session"},
|
||||
{
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/man-bathrobe-using-trimmer_23-2148389895.jpg",
|
||||
imageAlt: "barbershop hot towel facial routine",
|
||||
},
|
||||
],
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/pretty-barber-girl-cutting-hair_624325-3064.jpg?_wi=2",
|
||||
imageAlt: "precision fading haircut side view",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/man-bathrobe-using-trimmer_23-2148389895.jpg", imageAlt: "barbershop hot towel facial routine"},
|
||||
]
|
||||
},
|
||||
]}
|
||||
title="Style Signature"
|
||||
@@ -172,59 +119,23 @@ export default function LandingPage() {
|
||||
useInvertedBackground={false}
|
||||
products={[
|
||||
{
|
||||
id: "p1",
|
||||
brand: "BarberPro",
|
||||
name: "Matte Clay",
|
||||
price: "$22",
|
||||
rating: 5,
|
||||
reviewCount: "120",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/monochrome-beauty-product-skincare_23-2151307280.jpg",
|
||||
},
|
||||
id: "p1", brand: "BarberPro", name: "Matte Clay", price: "$22", rating: 5,
|
||||
reviewCount: "120", imageSrc: "http://img.b2bpic.net/free-photo/monochrome-beauty-product-skincare_23-2151307280.jpg"},
|
||||
{
|
||||
id: "p2",
|
||||
brand: "BarberPro",
|
||||
name: "Beard Oil",
|
||||
price: "$28",
|
||||
rating: 5,
|
||||
reviewCount: "95",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/boomers-using-cbd-oil-cream-treating-body-pain_23-2151263459.jpg",
|
||||
},
|
||||
id: "p2", brand: "BarberPro", name: "Beard Oil", price: "$28", rating: 5,
|
||||
reviewCount: "95", imageSrc: "http://img.b2bpic.net/free-photo/boomers-using-cbd-oil-cream-treating-body-pain_23-2151263459.jpg"},
|
||||
{
|
||||
id: "p3",
|
||||
brand: "BarberPro",
|
||||
name: "Styling Comb",
|
||||
price: "$12",
|
||||
rating: 4,
|
||||
reviewCount: "45",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/top-view-male-self-care-setting-still-life_23-2150326536.jpg",
|
||||
},
|
||||
id: "p3", brand: "BarberPro", name: "Styling Comb", price: "$12", rating: 4,
|
||||
reviewCount: "45", imageSrc: "http://img.b2bpic.net/free-photo/top-view-male-self-care-setting-still-life_23-2150326536.jpg"},
|
||||
{
|
||||
id: "p4",
|
||||
brand: "BarberPro",
|
||||
name: "Pomade",
|
||||
price: "$20",
|
||||
rating: 5,
|
||||
reviewCount: "150",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/top-view-male-self-care-items_23-2150347094.jpg",
|
||||
},
|
||||
id: "p4", brand: "BarberPro", name: "Pomade", price: "$20", rating: 5,
|
||||
reviewCount: "150", imageSrc: "http://img.b2bpic.net/free-photo/top-view-male-self-care-items_23-2150347094.jpg"},
|
||||
{
|
||||
id: "p5",
|
||||
brand: "BarberPro",
|
||||
name: "Shave Cream",
|
||||
price: "$18",
|
||||
rating: 4,
|
||||
reviewCount: "78",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/man-putting-face-cream_23-2148696707.jpg",
|
||||
},
|
||||
id: "p5", brand: "BarberPro", name: "Shave Cream", price: "$18", rating: 4,
|
||||
reviewCount: "78", imageSrc: "http://img.b2bpic.net/free-photo/man-putting-face-cream_23-2148696707.jpg"},
|
||||
{
|
||||
id: "p6",
|
||||
brand: "BarberPro",
|
||||
name: "Aftershave",
|
||||
price: "$25",
|
||||
rating: 5,
|
||||
reviewCount: "110",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/top-view-scissors-dispenser_23-2148108757.jpg",
|
||||
},
|
||||
id: "p6", brand: "BarberPro", name: "Aftershave", price: "$25", rating: 5,
|
||||
reviewCount: "110", imageSrc: "http://img.b2bpic.net/free-photo/top-view-scissors-dispenser_23-2148108757.jpg"},
|
||||
]}
|
||||
title="Grooming Essentials"
|
||||
description="Professional products to maintain your style between visits."
|
||||
@@ -239,20 +150,11 @@ export default function LandingPage() {
|
||||
useInvertedBackground={true}
|
||||
metrics={[
|
||||
{
|
||||
id: "m1",
|
||||
value: "15+",
|
||||
description: "Years of Experience",
|
||||
},
|
||||
id: "m1", value: "15+", description: "Years of Experience"},
|
||||
{
|
||||
id: "m2",
|
||||
value: "12k",
|
||||
description: "Happy Clients",
|
||||
},
|
||||
id: "m2", value: "12k", description: "Happy Clients"},
|
||||
{
|
||||
id: "m3",
|
||||
value: "500",
|
||||
description: "Events Styled",
|
||||
},
|
||||
id: "m3", value: "500", description: "Events Styled"},
|
||||
]}
|
||||
title="Shop Stats"
|
||||
description="Years of craft, serving thousands of satisfied gentlemen."
|
||||
@@ -267,26 +169,11 @@ export default function LandingPage() {
|
||||
useInvertedBackground={false}
|
||||
members={[
|
||||
{
|
||||
id: "t1",
|
||||
name: "John Doe",
|
||||
role: "Master Barber",
|
||||
description: "15 years of precision fading expert.",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/strict-slavic-middle-aged-male-barber-uniform-combing-beard-holding-scissors-isolated-purple-wall_141793-86101.jpg",
|
||||
},
|
||||
id: "t1", name: "John Doe", role: "Master Barber", description: "15 years of precision fading expert.", imageSrc: "http://img.b2bpic.net/free-photo/strict-slavic-middle-aged-male-barber-uniform-combing-beard-holding-scissors-isolated-purple-wall_141793-86101.jpg"},
|
||||
{
|
||||
id: "t2",
|
||||
name: "Sarah Smith",
|
||||
role: "Stylist",
|
||||
description: "Specialist in modern scissor cuts and textures.",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/portrait-woman-taking-off-black-glasses-red-wall_114579-56034.jpg",
|
||||
},
|
||||
id: "t2", name: "Sarah Smith", role: "Stylist", description: "Specialist in modern scissor cuts and textures.", imageSrc: "http://img.b2bpic.net/free-photo/portrait-woman-taking-off-black-glasses-red-wall_114579-56034.jpg"},
|
||||
{
|
||||
id: "t3",
|
||||
name: "Mike Ross",
|
||||
role: "Senior Groomer",
|
||||
description: "Expert in beard design and hot towel shaves.",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/smiling-slavic-middle-aged-male-barber-uniform-holding-scissors-crossing-hands-isolated-purple-wall_141793-83015.jpg",
|
||||
},
|
||||
id: "t3", name: "Mike Ross", role: "Senior Groomer", description: "Expert in beard design and hot towel shaves.", imageSrc: "http://img.b2bpic.net/free-photo/smiling-slavic-middle-aged-male-barber-uniform-holding-scissors-crossing-hands-isolated-purple-wall_141793-83015.jpg"},
|
||||
]}
|
||||
title="Meet Our Masters"
|
||||
description="Our team of seasoned barbers bringing excellence to every chair."
|
||||
@@ -299,60 +186,15 @@ export default function LandingPage() {
|
||||
useInvertedBackground={true}
|
||||
testimonials={[
|
||||
{
|
||||
id: "1",
|
||||
name: "Alex",
|
||||
date: "Jan 2024",
|
||||
title: "Great Experience",
|
||||
quote: "Best haircut I have ever had. Professional and detailed.",
|
||||
tag: "Regular",
|
||||
avatarSrc: "http://img.b2bpic.net/free-photo/man-using-smart-watch-express-pay_1170-2342.jpg",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/hair-salon-chair-with-towel-armchair_23-2148242777.jpg?_wi=3",
|
||||
imageAlt: "client headshot smiling",
|
||||
},
|
||||
id: "1", name: "Alex", date: "Jan 2024", title: "Great Experience", quote: "Best haircut I have ever had. Professional and detailed.", tag: "Regular", avatarSrc: "http://img.b2bpic.net/free-photo/man-using-smart-watch-express-pay_1170-2342.jpg", imageSrc: "http://img.b2bpic.net/free-photo/hair-salon-chair-with-towel-armchair_23-2148242777.jpg", imageAlt: "client headshot smiling"},
|
||||
{
|
||||
id: "2",
|
||||
name: "Robert",
|
||||
date: "Feb 2024",
|
||||
title: "Top Notch",
|
||||
quote: "The shop interior is great and the service is perfect.",
|
||||
tag: "Loyal",
|
||||
avatarSrc: "http://img.b2bpic.net/free-photo/brutal-athletic-male-vogue-model-dressed-white-shirt-grey-background_613910-9888.jpg",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/set-razors-table_23-2147736987.jpg?_wi=3",
|
||||
imageAlt: "client headshot smiling",
|
||||
},
|
||||
id: "2", name: "Robert", date: "Feb 2024", title: "Top Notch", quote: "The shop interior is great and the service is perfect.", tag: "Loyal", avatarSrc: "http://img.b2bpic.net/free-photo/brutal-athletic-male-vogue-model-dressed-white-shirt-grey-background_613910-9888.jpg", imageSrc: "http://img.b2bpic.net/free-photo/set-razors-table_23-2147736987.jpg", imageAlt: "client headshot smiling"},
|
||||
{
|
||||
id: "3",
|
||||
name: "Sam",
|
||||
date: "Mar 2024",
|
||||
title: "Highly Recommend",
|
||||
quote: "Precision, comfort, and excellent vibe.",
|
||||
tag: "Regular",
|
||||
avatarSrc: "http://img.b2bpic.net/free-photo/front-view-portrait-beautiful-young-woman-giving-thumbs-up-standing-isolated-rosy_176532-7958.jpg",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/pretty-barber-girl-cutting-hair_624325-3064.jpg?_wi=3",
|
||||
imageAlt: "client headshot smiling",
|
||||
},
|
||||
id: "3", name: "Sam", date: "Mar 2024", title: "Highly Recommend", quote: "Precision, comfort, and excellent vibe.", tag: "Regular", avatarSrc: "http://img.b2bpic.net/free-photo/front-view-portrait-beautiful-young-woman-giving-thumbs-up-standing-isolated-rosy_176532-7958.jpg", imageSrc: "http://img.b2bpic.net/free-photo/pretty-barber-girl-cutting-hair_624325-3064.jpg", imageAlt: "client headshot smiling"},
|
||||
{
|
||||
id: "4",
|
||||
name: "Chris",
|
||||
date: "Apr 2024",
|
||||
title: "Great Style",
|
||||
quote: "Clean fades every single time.",
|
||||
tag: "Loyal",
|
||||
avatarSrc: "http://img.b2bpic.net/free-photo/serious-sad-attractive-young-bearded-student-wearing-trendy-black-hat-sitting-alone-modern-spacious-coffee-shop_273609-1772.jpg",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/vintage-paper-with-beard-shaping-salon-tools_53876-128911.jpg?_wi=2",
|
||||
imageAlt: "client headshot smiling",
|
||||
},
|
||||
id: "4", name: "Chris", date: "Apr 2024", title: "Great Style", quote: "Clean fades every single time.", tag: "Loyal", avatarSrc: "http://img.b2bpic.net/free-photo/serious-sad-attractive-young-bearded-student-wearing-trendy-black-hat-sitting-alone-modern-spacious-coffee-shop_273609-1772.jpg", imageSrc: "http://img.b2bpic.net/free-photo/vintage-paper-with-beard-shaping-salon-tools_53876-128911.jpg", imageAlt: "client headshot smiling"},
|
||||
{
|
||||
id: "5",
|
||||
name: "Pat",
|
||||
date: "May 2024",
|
||||
title: "Best Service",
|
||||
quote: "Relaxing and professional barber shop.",
|
||||
tag: "Regular",
|
||||
avatarSrc: "http://img.b2bpic.net/free-photo/successful-businessman-imagines-great-career_1163-5478.jpg",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/close-up-man-selfcare-products_23-2149313073.jpg?_wi=2",
|
||||
imageAlt: "client headshot smiling",
|
||||
},
|
||||
id: "5", name: "Pat", date: "May 2024", title: "Best Service", quote: "Relaxing and professional barber shop.", tag: "Regular", avatarSrc: "http://img.b2bpic.net/free-photo/successful-businessman-imagines-great-career_1163-5478.jpg", imageSrc: "http://img.b2bpic.net/free-photo/close-up-man-selfcare-products_23-2149313073.jpg", imageAlt: "client headshot smiling"},
|
||||
]}
|
||||
title="Client Feedback"
|
||||
description="Hear what our regulars have to say about their experience."
|
||||
@@ -365,20 +207,11 @@ export default function LandingPage() {
|
||||
useInvertedBackground={false}
|
||||
faqs={[
|
||||
{
|
||||
id: "q1",
|
||||
title: "Do I need an appointment?",
|
||||
content: "Yes, we recommend booking online to guarantee your spot.",
|
||||
},
|
||||
id: "q1", title: "Do I need an appointment?", content: "Yes, we recommend booking online to guarantee your spot."},
|
||||
{
|
||||
id: "q2",
|
||||
title: "What payment methods do you accept?",
|
||||
content: "We accept all major credit cards, Apple Pay, and cash.",
|
||||
},
|
||||
id: "q2", title: "What payment methods do you accept?", content: "We accept all major credit cards, Apple Pay, and cash."},
|
||||
{
|
||||
id: "q3",
|
||||
title: "Do you sell products?",
|
||||
content: "Yes, we have a full line of premium grooming supplies available in the shop.",
|
||||
},
|
||||
id: "q3", title: "Do you sell products?", content: "Yes, we have a full line of premium grooming supplies available in the shop."},
|
||||
]}
|
||||
imageSrc="http://img.b2bpic.net/free-photo/customer-standing-front-mirror-barbershop_23-2148181953.jpg"
|
||||
title="Common Questions"
|
||||
@@ -391,16 +224,13 @@ export default function LandingPage() {
|
||||
<ContactCTA
|
||||
useInvertedBackground={true}
|
||||
background={{
|
||||
variant: "sparkles-gradient",
|
||||
}}
|
||||
variant: "sparkles-gradient"}}
|
||||
tag="Book Now"
|
||||
title="Ready to Look Your Best?"
|
||||
description="Secure your time with our master barbers today."
|
||||
buttons={[
|
||||
{
|
||||
text: "Schedule Session",
|
||||
href: "#",
|
||||
},
|
||||
text: "Schedule Session", href: "#"},
|
||||
]}
|
||||
/>
|
||||
</div>
|
||||
|
||||
Reference in New Issue
Block a user