Merge version_1 into main #2
343
src/app/page.tsx
343
src/app/page.tsx
@@ -32,22 +32,10 @@ export default function LandingPage() {
|
||||
<div id="nav" data-section="nav">
|
||||
<NavbarStyleApple
|
||||
navItems={[
|
||||
{
|
||||
name: "Home",
|
||||
id: "hero",
|
||||
},
|
||||
{
|
||||
name: "About",
|
||||
id: "about",
|
||||
},
|
||||
{
|
||||
name: "Services",
|
||||
id: "services",
|
||||
},
|
||||
{
|
||||
name: "Contact",
|
||||
id: "contact",
|
||||
},
|
||||
{ name: "Home", id: "hero" },
|
||||
{ name: "About", id: "about" },
|
||||
{ name: "Services", id: "services" },
|
||||
{ name: "Contact", id: "contact" },
|
||||
]}
|
||||
brandName="Abdou BarberShop"
|
||||
/>
|
||||
@@ -55,104 +43,32 @@ export default function LandingPage() {
|
||||
|
||||
<div id="hero" data-section="hero">
|
||||
<HeroSplitTestimonial
|
||||
background={{
|
||||
variant: "gradient-bars",
|
||||
}}
|
||||
background={{ variant: "gradient-bars" }}
|
||||
title="Precision. Style. Excellence."
|
||||
description="Montreal’s elite grooming destination, open 24 hours to fit your lifestyle. Experience superior craftsmanship with over 980+ five-star reviews."
|
||||
testimonials={[
|
||||
{
|
||||
name: "John Doe",
|
||||
handle: "@johndoe",
|
||||
testimonial: "The best haircut in Montreal. Absolutely flawless attention to detail.",
|
||||
rating: 5,
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/man-sitting-chair-hairdresser-with-client-guy-drinkig-whiskey_1157-43585.jpg?_wi=1",
|
||||
imageAlt: "luxury barbershop interior dark theme",
|
||||
},
|
||||
{
|
||||
name: "Alex Smith",
|
||||
handle: "@alxsmith",
|
||||
testimonial: "24/7 service without compromising on quality. My new go-to shop.",
|
||||
rating: 5,
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/brush-element-shaving-tool-close-up-berber-shop_1303-20672.jpg?_wi=1",
|
||||
imageAlt: "luxury barbershop interior dark theme",
|
||||
},
|
||||
{
|
||||
name: "Marc L.",
|
||||
handle: "@marcl",
|
||||
testimonial: "Incredible craft. The environment is spotless and professional.",
|
||||
rating: 5,
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/man-barber-shop-close-up_23-2149141765.jpg?_wi=1",
|
||||
imageAlt: "luxury barbershop interior dark theme",
|
||||
},
|
||||
{
|
||||
name: "Sam R.",
|
||||
handle: "@samr",
|
||||
testimonial: "Professional, efficient, and precise. Exceptional experience.",
|
||||
rating: 5,
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/young-successful-businessman-posing-dark-wall_176420-54.jpg",
|
||||
imageAlt: "luxury barbershop interior dark theme",
|
||||
},
|
||||
{
|
||||
name: "Tony K.",
|
||||
handle: "@tonyk",
|
||||
testimonial: "The gold standard for barbershops in the city.",
|
||||
rating: 5,
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/woman-with-hair-dryer-client-salon_23-2147737037.jpg",
|
||||
imageAlt: "luxury barbershop interior dark theme",
|
||||
},
|
||||
{ name: "John Doe", handle: "@johndoe", testimonial: "The best haircut in Montreal. Absolutely flawless attention to detail.", rating: 5, imageSrc: "http://img.b2bpic.net/free-photo/man-sitting-chair-hairdresser-with-client-guy-drinkig-whiskey_1157-43585.jpg", imageAlt: "luxury barbershop interior dark theme" },
|
||||
{ name: "Alex Smith", handle: "@alxsmith", testimonial: "24/7 service without compromising on quality. My new go-to shop.", rating: 5, imageSrc: "http://img.b2bpic.net/free-photo/brush-element-shaving-tool-close-up-berber-shop_1303-20672.jpg", imageAlt: "luxury barbershop interior dark theme" },
|
||||
{ name: "Marc L.", handle: "@marcl", testimonial: "Incredible craft. The environment is spotless and professional.", rating: 5, imageSrc: "http://img.b2bpic.net/free-photo/man-barber-shop-close-up_23-2149141765.jpg", imageAlt: "luxury barbershop interior dark theme" },
|
||||
{ name: "Sam R.", handle: "@samr", testimonial: "Professional, efficient, and precise. Exceptional experience.", rating: 5, imageSrc: "http://img.b2bpic.net/free-photo/young-successful-businessman-posing-dark-wall_176420-54.jpg", imageAlt: "luxury barbershop interior dark theme" },
|
||||
{ name: "Tony K.", handle: "@tonyk", testimonial: "The gold standard for barbershops in the city.", rating: 5, imageSrc: "http://img.b2bpic.net/free-photo/woman-with-hair-dryer-client-salon_23-2147737037.jpg", imageAlt: "luxury barbershop interior dark theme" }
|
||||
]}
|
||||
buttons={[
|
||||
{
|
||||
text: "Book Your Appointment",
|
||||
href: "#contact",
|
||||
},
|
||||
]}
|
||||
imageSrc="http://img.b2bpic.net/free-photo/man-sitting-chair-hairdresser-with-client-guy-drinkig-whiskey_1157-43585.jpg?_wi=2"
|
||||
buttons={[{ text: "Book Your Appointment", href: "#contact" }]}
|
||||
imageSrc="http://img.b2bpic.net/free-photo/man-sitting-chair-hairdresser-with-client-guy-drinkig-whiskey_1157-43585.jpg"
|
||||
mediaAnimation="blur-reveal"
|
||||
avatars={[
|
||||
{
|
||||
src: "http://img.b2bpic.net/free-photo/mid-section-barber-wiping-clients-face-with-hot-towel_107420-94798.jpg",
|
||||
alt: "Barber work",
|
||||
},
|
||||
{
|
||||
src: "http://img.b2bpic.net/free-photo/mustache-guy-barbershop_140725-7723.jpg",
|
||||
alt: "Styling",
|
||||
},
|
||||
{
|
||||
src: "http://img.b2bpic.net/free-photo/barber-doing-haircut-bearded-aged-client-hair-salon_23-2148182013.jpg",
|
||||
alt: "Grooming",
|
||||
},
|
||||
{
|
||||
src: "http://img.b2bpic.net/free-photo/hairclips-scissors-bag_23-2147778856.jpg",
|
||||
alt: "Tools",
|
||||
},
|
||||
{
|
||||
src: "http://img.b2bpic.net/free-photo/man-getting-his-beard-shaved-with-razor_107420-94766.jpg",
|
||||
alt: "Process",
|
||||
},
|
||||
{ src: "http://img.b2bpic.net/free-photo/mid-section-barber-wiping-clients-face-with-hot-towel_107420-94798.jpg", alt: "Barber work" },
|
||||
{ src: "http://img.b2bpic.net/free-photo/mustache-guy-barbershop_140725-7723.jpg", alt: "Styling" },
|
||||
{ src: "http://img.b2bpic.net/free-photo/barber-doing-haircut-bearded-aged-client-hair-salon_23-2148182013.jpg", alt: "Grooming" },
|
||||
{ src: "http://img.b2bpic.net/free-photo/hairclips-scissors-bag_23-2147778856.jpg", alt: "Tools" },
|
||||
{ src: "http://img.b2bpic.net/free-photo/man-getting-his-beard-shaved-with-razor_107420-94766.jpg", alt: "Process" }
|
||||
]}
|
||||
marqueeItems={[
|
||||
{
|
||||
type: "text",
|
||||
text: "24/7 Availability",
|
||||
},
|
||||
{
|
||||
type: "text",
|
||||
text: "Premium Products",
|
||||
},
|
||||
{
|
||||
type: "text",
|
||||
text: "Expert Barbers",
|
||||
},
|
||||
{
|
||||
type: "text",
|
||||
text: "Montreal Based",
|
||||
},
|
||||
{
|
||||
type: "text",
|
||||
text: "Top Rated",
|
||||
},
|
||||
{ type: "text", text: "24/7 Availability" },
|
||||
{ type: "text", text: "Premium Products" },
|
||||
{ type: "text", text: "Expert Barbers" },
|
||||
{ type: "text", text: "Montreal Based" },
|
||||
{ type: "text", text: "Top Rated" }
|
||||
]}
|
||||
/>
|
||||
</div>
|
||||
@@ -161,12 +77,7 @@ export default function LandingPage() {
|
||||
<TextAbout
|
||||
useInvertedBackground={false}
|
||||
title="Craftsmanship Redefined"
|
||||
buttons={[
|
||||
{
|
||||
text: "Visit Us",
|
||||
href: "#contact",
|
||||
},
|
||||
]}
|
||||
buttons={[{ text: "Visit Us", href: "#contact" }]}
|
||||
/>
|
||||
</div>
|
||||
|
||||
@@ -176,31 +87,11 @@ export default function LandingPage() {
|
||||
textboxLayout="split"
|
||||
useInvertedBackground={false}
|
||||
features={[
|
||||
{
|
||||
icon: Scissors,
|
||||
title: "Precision Haircuts",
|
||||
description: "Expert styling for adults and children delivered with meticulous precision.",
|
||||
},
|
||||
{
|
||||
icon: Smile,
|
||||
title: "Beard Grooming",
|
||||
description: "Signature beard trims, edging, and professional conditioning treatments.",
|
||||
},
|
||||
{
|
||||
icon: Palette,
|
||||
title: "Color & Styling",
|
||||
description: "Modern coloring and expert styling for a sharp, refined aesthetic.",
|
||||
},
|
||||
{
|
||||
icon: Sparkles,
|
||||
title: "Keratin Treatments",
|
||||
description: "High-end smoothing treatments for healthier, more manageable hair.",
|
||||
},
|
||||
{
|
||||
icon: Shield,
|
||||
title: "Skin Cleansing",
|
||||
description: "Detoxifying skin treatments including expert black mask facials.",
|
||||
},
|
||||
{ icon: Scissors, title: "Precision Haircuts", description: "Expert styling for adults and children delivered with meticulous precision." },
|
||||
{ icon: Smile, title: "Beard Grooming", description: "Signature beard trims, edging, and professional conditioning treatments." },
|
||||
{ icon: Palette, title: "Color & Styling", description: "Modern coloring and expert styling for a sharp, refined aesthetic." },
|
||||
{ icon: Sparkles, title: "Keratin Treatments", description: "High-end smoothing treatments for healthier, more manageable hair." },
|
||||
{ icon: Shield, title: "Skin Cleansing", description: "Detoxifying skin treatments including expert black mask facials." }
|
||||
]}
|
||||
title="Premium Grooming Services"
|
||||
description="Excellence in every cut. From classic fades to advanced treatments."
|
||||
@@ -214,34 +105,12 @@ export default function LandingPage() {
|
||||
useInvertedBackground={false}
|
||||
groups={[
|
||||
{
|
||||
id: "staff",
|
||||
groupTitle: "Montreal Grooming Team",
|
||||
members: [
|
||||
{
|
||||
id: "m1",
|
||||
title: "Abdou",
|
||||
subtitle: "Lead Barber",
|
||||
detail: "15+ years experience in premium grooming.",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/front-view-business-man-with-apron_23-2148366567.jpg",
|
||||
},
|
||||
{
|
||||
id: "m2",
|
||||
title: "Ahmed",
|
||||
subtitle: "Senior Stylist",
|
||||
detail: "Specialist in fades and keratin treatments.",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/smiling-middle-aged-male-barber-uniform-holding-hair-clippers-showing-peace-gesture-isolated-pink-wall_141793-103187.jpg",
|
||||
},
|
||||
{
|
||||
id: "m3",
|
||||
title: "Karim",
|
||||
subtitle: "Grooming Specialist",
|
||||
detail: "Expert in beard styling and facial care.",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/handsome-hipster-bearded-male-sitting-armchair-barber-shop-while-hairdresser-shaves-his-beard-with-dangerous-razor_613910-18491.jpg",
|
||||
},
|
||||
],
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/man-sitting-chair-hairdresser-with-client-guy-drinkig-whiskey_1157-43585.jpg?_wi=3",
|
||||
imageAlt: "master barber portrait black apron",
|
||||
},
|
||||
id: "staff", groupTitle: "Montreal Grooming Team", members: [
|
||||
{ id: "m1", title: "Abdou", subtitle: "Lead Barber", detail: "15+ years experience in premium grooming.", imageSrc: "http://img.b2bpic.net/free-photo/front-view-business-man-with-apron_23-2148366567.jpg" },
|
||||
{ id: "m2", title: "Ahmed", subtitle: "Senior Stylist", detail: "Specialist in fades and keratin treatments.", imageSrc: "http://img.b2bpic.net/free-photo/smiling-middle-aged-male-barber-uniform-holding-hair-clippers-showing-peace-gesture-isolated-pink-wall_141793-103187.jpg" },
|
||||
{ id: "m3", title: "Karim", subtitle: "Grooming Specialist", detail: "Expert in beard styling and facial care.", imageSrc: "http://img.b2bpic.net/free-photo/handsome-hipster-bearded-male-sitting-armchair-barber-shop-while-hairdresser-shaves-his-beard-with-dangerous-razor_613910-18491.jpg" }
|
||||
]
|
||||
}
|
||||
]}
|
||||
title="Master Barbers"
|
||||
description="Our team of elite grooming experts are dedicated to your style."
|
||||
@@ -253,61 +122,11 @@ export default function LandingPage() {
|
||||
textboxLayout="split"
|
||||
useInvertedBackground={false}
|
||||
testimonials={[
|
||||
{
|
||||
id: "t1",
|
||||
name: "Sarah",
|
||||
date: "Jan 2025",
|
||||
title: "Loyal Customer",
|
||||
quote: "Nothing compares to the quality here. Truly elite.",
|
||||
tag: "Top Rated",
|
||||
avatarSrc: "http://img.b2bpic.net/free-photo/young-successful-businessman-posing-dark-wall_176420-54.jpg",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/man-sitting-chair-hairdresser-with-client-guy-drinkig-whiskey_1157-43585.jpg?_wi=4",
|
||||
imageAlt: "well groomed man barber chair",
|
||||
},
|
||||
{
|
||||
id: "t2",
|
||||
name: "Michael",
|
||||
date: "Dec 2024",
|
||||
title: "Weekly Client",
|
||||
quote: "Spotless, modern, and professional service.",
|
||||
tag: "Consistent",
|
||||
avatarSrc: "http://img.b2bpic.net/free-photo/woman-with-hair-dryer-client-salon_23-2147737037.jpg",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/brush-element-shaving-tool-close-up-berber-shop_1303-20672.jpg?_wi=2",
|
||||
imageAlt: "well groomed man barber chair",
|
||||
},
|
||||
{
|
||||
id: "t3",
|
||||
name: "Kevin",
|
||||
date: "Nov 2024",
|
||||
title: "First Time Visitor",
|
||||
quote: "The best beard trim I’ve ever had. Highly recommend.",
|
||||
tag: "Expert",
|
||||
avatarSrc: "http://img.b2bpic.net/free-photo/stylish-man-having-drink-barbershop_23-2147736963.jpg",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/man-barber-shop-close-up_23-2149141765.jpg?_wi=2",
|
||||
imageAlt: "well groomed man barber chair",
|
||||
},
|
||||
{
|
||||
id: "t4",
|
||||
name: "David",
|
||||
date: "Nov 2024",
|
||||
title: "Business Pro",
|
||||
quote: "Professional, quick, and convenient 24/7 hours.",
|
||||
tag: "Value",
|
||||
avatarSrc: "http://img.b2bpic.net/free-photo/confidence-businessman-negotiate-deal_53876-42697.jpg",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/blond-man-happy-expression_1194-2900.jpg",
|
||||
imageAlt: "well groomed man barber chair",
|
||||
},
|
||||
{
|
||||
id: "t5",
|
||||
name: "Jordan",
|
||||
date: "Oct 2024",
|
||||
title: "Regular",
|
||||
quote: "Expert barbers who care about quality.",
|
||||
tag: "Great",
|
||||
avatarSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=v0opj5",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/man-getting-his-beard-shaved-with-razor_107420-94764.jpg",
|
||||
imageAlt: "well groomed man barber chair",
|
||||
},
|
||||
{ id: "t1", name: "Sarah", date: "Jan 2025", title: "Loyal Customer", quote: "Nothing compares to the quality here. Truly elite.", tag: "Top Rated", avatarSrc: "http://img.b2bpic.net/free-photo/young-successful-businessman-posing-dark-wall_176420-54.jpg", imageSrc: "http://img.b2bpic.net/free-photo/man-sitting-chair-hairdresser-with-client-guy-drinkig-whiskey_1157-43585.jpg", imageAlt: "well groomed man barber chair" },
|
||||
{ id: "t2", name: "Michael", date: "Dec 2024", title: "Weekly Client", quote: "Spotless, modern, and professional service.", tag: "Consistent", avatarSrc: "http://img.b2bpic.net/free-photo/woman-with-hair-dryer-client-salon_23-2147737037.jpg", imageSrc: "http://img.b2bpic.net/free-photo/brush-element-shaving-tool-close-up-berber-shop_1303-20672.jpg", imageAlt: "well groomed man barber chair" },
|
||||
{ id: "t3", name: "Kevin", date: "Nov 2024", title: "First Time Visitor", quote: "The best beard trim I’ve ever had. Highly recommend.", tag: "Expert", avatarSrc: "http://img.b2bpic.net/free-photo/stylish-man-having-drink-barbershop_23-2147736963.jpg", imageSrc: "http://img.b2bpic.net/free-photo/man-barber-shop-close-up_23-2149141765.jpg", imageAlt: "well groomed man barber chair" },
|
||||
{ id: "t4", name: "David", date: "Nov 2024", title: "Business Pro", quote: "Professional, quick, and convenient 24/7 hours.", tag: "Value", avatarSrc: "http://img.b2bpic.net/free-photo/confidence-businessman-negotiate-deal_53876-42697.jpg", imageSrc: "http://img.b2bpic.net/free-photo/blond-man-happy-expression_1194-2900.jpg", imageAlt: "well groomed man barber chair" },
|
||||
{ id: "t5", name: "Jordan", date: "Oct 2024", title: "Regular", quote: "Expert barbers who care about quality.", tag: "Great", avatarSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=v0opj5", imageSrc: "http://img.b2bpic.net/free-photo/man-getting-his-beard-shaved-with-razor_107420-94764.jpg", imageAlt: "well groomed man barber chair" }
|
||||
]}
|
||||
title="Elite Feedback"
|
||||
description="Join 980+ satisfied clients who trust our elite craft."
|
||||
@@ -318,21 +137,9 @@ export default function LandingPage() {
|
||||
<FaqSplitText
|
||||
useInvertedBackground={false}
|
||||
faqs={[
|
||||
{
|
||||
id: "f1",
|
||||
title: "Are you really open 24 hours?",
|
||||
content: "Yes, we are open 24/7 to provide maximum convenience for our clients.",
|
||||
},
|
||||
{
|
||||
id: "f2",
|
||||
title: "Do I need an appointment?",
|
||||
content: "Booking is recommended to guarantee your preferred time slot.",
|
||||
},
|
||||
{
|
||||
id: "f3",
|
||||
title: "Where are you located?",
|
||||
content: "We are located at 3530 Rue Jean-Talon E, Montréal, QC.",
|
||||
},
|
||||
{ id: "f1", title: "Are you really open 24 hours?", content: "Yes, we are open 24/7 to provide maximum convenience for our clients." },
|
||||
{ id: "f2", title: "Do I need an appointment?", content: "Booking is recommended to guarantee your preferred time slot." },
|
||||
{ id: "f3", title: "Where are you located?", content: "We are located at 3530 Rue Jean-Talon E, Montréal, QC." }
|
||||
]}
|
||||
sideTitle="Barbershop FAQs"
|
||||
sideDescription="Everything you need to know about your next appointment."
|
||||
@@ -345,11 +152,7 @@ export default function LandingPage() {
|
||||
textboxLayout="split"
|
||||
useInvertedBackground={false}
|
||||
names={[
|
||||
"Montreal Grooming",
|
||||
"Barber Excellence",
|
||||
"Elite Styling",
|
||||
"Premium Cuts",
|
||||
"Style Hub",
|
||||
"Montreal Grooming", "Barber Excellence", "Elite Styling", "Premium Cuts", "Style Hub"
|
||||
]}
|
||||
title="Trusted by Thousands"
|
||||
description="Montreal’s most-loved grooming lounge."
|
||||
@@ -359,19 +162,11 @@ export default function LandingPage() {
|
||||
<div id="contact" data-section="contact">
|
||||
<ContactText
|
||||
useInvertedBackground={false}
|
||||
background={{
|
||||
variant: "gradient-bars",
|
||||
}}
|
||||
background={{ variant: "gradient-bars" }}
|
||||
text="Visit us at 3530 Rue Jean-Talon E, Montréal, QC or call us at (438) 990-8696 to book your spot today."
|
||||
buttons={[
|
||||
{
|
||||
text: "Call Now",
|
||||
href: "tel:4389908696",
|
||||
},
|
||||
{
|
||||
text: "Get Directions",
|
||||
href: "https://maps.google.com",
|
||||
},
|
||||
{ text: "Call Now", href: "tel:4389908696" },
|
||||
{ text: "Get Directions", href: "https://maps.google.com" }
|
||||
]}
|
||||
/>
|
||||
</div>
|
||||
@@ -381,49 +176,9 @@ export default function LandingPage() {
|
||||
imageSrc="http://img.b2bpic.net/free-photo/full-shot-man-getting-haircut_23-2149220553.jpg"
|
||||
logoText="Abdou BarberShop"
|
||||
columns={[
|
||||
{
|
||||
title: "Services",
|
||||
items: [
|
||||
{
|
||||
label: "Haircuts",
|
||||
href: "#services",
|
||||
},
|
||||
{
|
||||
label: "Beard Trims",
|
||||
href: "#services",
|
||||
},
|
||||
{
|
||||
label: "Treatments",
|
||||
href: "#services",
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
title: "Contact",
|
||||
items: [
|
||||
{
|
||||
label: "Call Us",
|
||||
href: "tel:4389908696",
|
||||
},
|
||||
{
|
||||
label: "Directions",
|
||||
href: "https://maps.google.com",
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
title: "Legal",
|
||||
items: [
|
||||
{
|
||||
label: "Privacy Policy",
|
||||
href: "#",
|
||||
},
|
||||
{
|
||||
label: "Terms of Service",
|
||||
href: "#",
|
||||
},
|
||||
],
|
||||
},
|
||||
{ title: "Services", items: [{ label: "Haircuts", href: "#services" }, { label: "Beard Trims", href: "#services" }, { label: "Treatments", href: "#services" }] },
|
||||
{ title: "Contact", items: [{ label: "Call Us", href: "tel:4389908696" }, { label: "Directions", href: "https://maps.google.com" }] },
|
||||
{ title: "Legal", items: [{ label: "Privacy Policy", href: "#" }, { label: "Terms of Service", href: "#" }] }
|
||||
]}
|
||||
/>
|
||||
</div>
|
||||
|
||||
Reference in New Issue
Block a user