Update src/app/page.tsx
This commit is contained in:
287
src/app/page.tsx
287
src/app/page.tsx
@@ -31,77 +31,42 @@ export default function LandingPage() {
|
||||
<NavbarLayoutFloatingOverlay
|
||||
navItems={[
|
||||
{
|
||||
name: "Home",
|
||||
id: "#hero",
|
||||
},
|
||||
name: "Home", id: "#hero"},
|
||||
{
|
||||
name: "Services",
|
||||
id: "#services",
|
||||
},
|
||||
name: "Services", id: "#services"},
|
||||
{
|
||||
name: "Experience",
|
||||
id: "#experience",
|
||||
},
|
||||
name: "Experience", id: "#experience"},
|
||||
{
|
||||
name: "Gallery",
|
||||
id: "#gallery",
|
||||
},
|
||||
name: "Gallery", id: "#gallery"},
|
||||
{
|
||||
name: "Barbers",
|
||||
id: "#barbers",
|
||||
},
|
||||
name: "Barbers", id: "#barbers"},
|
||||
{
|
||||
name: "Location",
|
||||
id: "#location",
|
||||
},
|
||||
name: "Location", id: "#location"},
|
||||
]}
|
||||
brandName="X BARBERS"
|
||||
button={{
|
||||
text: "BOOK NOW",
|
||||
href: "#location",
|
||||
}}
|
||||
text: "BOOK NOW", href: "#location"}}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="hero" data-section="hero">
|
||||
<HeroSplitDualMedia
|
||||
background={{
|
||||
variant: "plain",
|
||||
}}
|
||||
variant: "plain"}}
|
||||
title="Precision Cuts. Real Culture."
|
||||
description="Croydon’s trusted barbershop for flawless fades, sharp beard work, and premium grooming experiences."
|
||||
tag="★★★★★ 4.5 Rating"
|
||||
buttons={[
|
||||
{
|
||||
text: "BOOK NOW",
|
||||
href: "#location",
|
||||
},
|
||||
text: "BOOK NOW", href: "#location"},
|
||||
{
|
||||
text: "WALK IN TODAY",
|
||||
href: "#location",
|
||||
},
|
||||
text: "WALK IN TODAY", href: "#location"},
|
||||
]}
|
||||
mediaItems={[
|
||||
{
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/close-up-washbasin_107420-94763.jpg",
|
||||
imageAlt: "Close-up of a precision fade haircut",
|
||||
},
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/close-up-washbasin_107420-94763.jpg", imageAlt: "Close-up of a precision fade haircut"},
|
||||
{
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/close-up-man-selfcare-products_23-2149313017.jpg",
|
||||
imageAlt: "Detail of a luxury barber chair",
|
||||
},
|
||||
{
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/hairclips-scissors-bag_23-2147778856.jpg",
|
||||
imageAlt: "Hairclips and scissors in bag",
|
||||
},
|
||||
{
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/stylist-cutting-beard-faceless-client_23-2147778868.jpg",
|
||||
imageAlt: "Stylist cutting beard of faceless client",
|
||||
},
|
||||
{
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/barber-applying-cream-clients-beard_107420-94778.jpg",
|
||||
imageAlt: "Barber applying cream on clients beard",
|
||||
},
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/close-up-man-selfcare-products_23-2149313017.jpg", imageAlt: "Detail of a luxury barber chair"}
|
||||
]}
|
||||
mediaAnimation="slide-up"
|
||||
rating={4.5}
|
||||
@@ -114,35 +79,15 @@ export default function LandingPage() {
|
||||
useInvertedBackground={true}
|
||||
testimonials={[
|
||||
{
|
||||
id: "1",
|
||||
name: "Glen",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/medium-shot-smiley-man-sitting-chair_23-2149220526.jpg",
|
||||
imageAlt: "Smiling client Sarah Johnson",
|
||||
},
|
||||
id: "1", name: "Glen", imageSrc: "http://img.b2bpic.net/free-photo/medium-shot-smiley-man-sitting-chair_23-2149220526.jpg", imageAlt: "Smiling client Sarah Johnson"},
|
||||
{
|
||||
id: "2",
|
||||
name: "Kojo",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/portrait-smiling-man-glasses-showing-thumb-up-gray-wall_231208-7813.jpg",
|
||||
imageAlt: "Satisfied client Michael Chen",
|
||||
},
|
||||
id: "2", name: "Kojo", imageSrc: "http://img.b2bpic.net/free-photo/portrait-smiling-man-glasses-showing-thumb-up-gray-wall_231208-7813.jpg", imageAlt: "Satisfied client Michael Chen"},
|
||||
{
|
||||
id: "3",
|
||||
name: "Richard",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/handsome-bearded-man-barbershop-barber-work_627829-7365.jpg",
|
||||
imageAlt: "Happy client Emily Rodriguez",
|
||||
},
|
||||
id: "3", name: "Richard", imageSrc: "http://img.b2bpic.net/free-photo/handsome-bearded-man-barbershop-barber-work_627829-7365.jpg", imageAlt: "Happy client Emily Rodriguez"},
|
||||
{
|
||||
id: "4",
|
||||
name: "David Kim",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/happy-men-bachelor-party_23-2149275459.jpg",
|
||||
imageAlt: "Loyal client David Kim",
|
||||
},
|
||||
id: "4", name: "David Kim", imageSrc: "http://img.b2bpic.net/free-photo/happy-men-bachelor-party_23-2149275459.jpg", imageAlt: "Loyal client David Kim"},
|
||||
{
|
||||
id: "5",
|
||||
name: "James Williams",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/happiness-concept-glad-positive-afro-american-man-with-trendy-hairstyle-poses-naked_273609-8552.jpg",
|
||||
imageAlt: "Client James Williams",
|
||||
},
|
||||
id: "5", name: "James Williams", imageSrc: "http://img.b2bpic.net/free-photo/happiness-concept-glad-positive-afro-american-man-with-trendy-hairstyle-poses-naked_273609-8552.jpg", imageAlt: "Client James Williams"},
|
||||
]}
|
||||
cardTitle="Why Clients Never Switch Up"
|
||||
cardTag="Google Review Score: 4.5+ | 500+ reviews. Most clients return monthly."
|
||||
@@ -157,59 +102,28 @@ export default function LandingPage() {
|
||||
useInvertedBackground={false}
|
||||
features={[
|
||||
{
|
||||
id: "fade",
|
||||
label: "Precision",
|
||||
title: "Signature Fade",
|
||||
items: [
|
||||
"Sharp blends",
|
||||
"Detailed finishing",
|
||||
"Flawless line work",
|
||||
],
|
||||
id: "fade", label: "Precision", title: "Signature Fade", items: [
|
||||
"Sharp blends", "Detailed finishing", "Flawless line work"],
|
||||
},
|
||||
{
|
||||
id: "beard",
|
||||
label: "Grooming",
|
||||
title: "Beard Sculpt & Line-Up",
|
||||
items: [
|
||||
"Clean shaping",
|
||||
"Razor precision",
|
||||
],
|
||||
id: "beard", label: "Grooming", title: "Beard Sculpt & Line-Up", items: [
|
||||
"Clean shaping", "Razor precision"],
|
||||
},
|
||||
{
|
||||
id: "afro",
|
||||
label: "Specialization",
|
||||
title: "Afro & Textured Hair Specialists",
|
||||
items: [
|
||||
"Experienced with all textures",
|
||||
"Variety of styles",
|
||||
],
|
||||
id: "afro", label: "Specialization", title: "Afro & Textured Hair Specialists", items: [
|
||||
"Experienced with all textures", "Variety of styles"],
|
||||
},
|
||||
{
|
||||
id: "kids",
|
||||
label: "Family",
|
||||
title: "Kids Cuts",
|
||||
items: [
|
||||
"Patient, professional service",
|
||||
"Clean finishes",
|
||||
],
|
||||
id: "kids", label: "Family", title: "Kids Cuts", items: [
|
||||
"Patient, professional service", "Clean finishes"],
|
||||
},
|
||||
{
|
||||
id: "express",
|
||||
label: "Convenience",
|
||||
title: "Walk-In Express Trim",
|
||||
items: [
|
||||
"Quick service",
|
||||
"No compromise on quality",
|
||||
],
|
||||
id: "express", label: "Convenience", title: "Walk-In Express Trim", items: [
|
||||
"Quick service", "No compromise on quality"],
|
||||
},
|
||||
{
|
||||
id: "full-groom",
|
||||
label: "Complete Look",
|
||||
title: "Full Grooming Experience",
|
||||
items: [
|
||||
"Haircut + beard service",
|
||||
"Personalized styling",
|
||||
],
|
||||
id: "full-groom", label: "Complete Look", title: "Full Grooming Experience", items: [
|
||||
"Haircut + beard service", "Personalized styling"],
|
||||
},
|
||||
]}
|
||||
title="Our Signature Services"
|
||||
@@ -222,10 +136,7 @@ export default function LandingPage() {
|
||||
useInvertedBackground={true}
|
||||
title="More Than A Haircut."
|
||||
description={[
|
||||
"Atmosphere: Relaxed energy, real conversations. We foster a community built on music, culture, and connection.",
|
||||
"Precision: Every cut is tailored to your unique face shape, hair texture, and personal style, ensuring a flawless result every time.",
|
||||
"Consistency: Our clients return monthly because the quality never drops. Experience the difference of dedicated craftsmanship.",
|
||||
]}
|
||||
"Atmosphere: Relaxed energy, real conversations. We foster a community built on music, culture, and connection.", "Precision: Every cut is tailored to your unique face shape, hair texture, and personal style, ensuring a flawless result every time.", "Consistency: Our clients return monthly because the quality never drops. Experience the difference of dedicated craftsmanship."]}
|
||||
/>
|
||||
</div>
|
||||
|
||||
@@ -237,47 +148,17 @@ export default function LandingPage() {
|
||||
useInvertedBackground={false}
|
||||
products={[
|
||||
{
|
||||
id: "gallery-1",
|
||||
name: "Fresh Fade",
|
||||
price: "£-",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/close-up-portrait-handsome-senior-man-listening-music-headphones-isolated-dark-background_613910-42.jpg",
|
||||
imageAlt: "Fresh fade haircut",
|
||||
},
|
||||
id: "gallery-1", name: "Fresh Fade", price: "£-", imageSrc: "http://img.b2bpic.net/free-photo/close-up-portrait-handsome-senior-man-listening-music-headphones-isolated-dark-background_613910-42.jpg", imageAlt: "Fresh fade haircut"},
|
||||
{
|
||||
id: "gallery-2",
|
||||
name: "Transformation",
|
||||
price: "£-",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/tattooed-caucasian-male-barber-cutting-beard-black-stylish-man_613910-1464.jpg",
|
||||
imageAlt: "Before and after haircut transformation",
|
||||
},
|
||||
id: "gallery-2", name: "Transformation", price: "£-", imageSrc: "http://img.b2bpic.net/free-photo/tattooed-caucasian-male-barber-cutting-beard-black-stylish-man_613910-1464.jpg", imageAlt: "Before and after haircut transformation"},
|
||||
{
|
||||
id: "gallery-3",
|
||||
name: "Beard Work",
|
||||
price: "£-",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/mature-man-beard-close-up_23-2148465260.jpg",
|
||||
imageAlt: "Detailed beard shaping",
|
||||
},
|
||||
id: "gallery-3", name: "Beard Work", price: "£-", imageSrc: "http://img.b2bpic.net/free-photo/mature-man-beard-close-up_23-2148465260.jpg", imageAlt: "Detailed beard shaping"},
|
||||
{
|
||||
id: "gallery-4",
|
||||
name: "Textured Hair",
|
||||
price: "£-",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/young-male-doing-selfcare-routine_23-2149291871.jpg",
|
||||
imageAlt: "Specialized textured hair cut",
|
||||
},
|
||||
id: "gallery-4", name: "Textured Hair", price: "£-", imageSrc: "http://img.b2bpic.net/free-photo/young-male-doing-selfcare-routine_23-2149291871.jpg", imageAlt: "Specialized textured hair cut"},
|
||||
{
|
||||
id: "gallery-5",
|
||||
name: "Shop Vibe",
|
||||
price: "£-",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/male-barber-sitting-his-shop_23-2149186516.jpg",
|
||||
imageAlt: "Interior of the X Barbers shop",
|
||||
},
|
||||
id: "gallery-5", name: "Shop Vibe", price: "£-", imageSrc: "http://img.b2bpic.net/free-photo/male-barber-sitting-his-shop_23-2149186516.jpg", imageAlt: "Interior of the X Barbers shop"},
|
||||
{
|
||||
id: "gallery-6",
|
||||
name: "Line Up Detail",
|
||||
price: "£-",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/close-up-man-getting-haircut-with-trimmer_23-2148256902.jpg",
|
||||
imageAlt: "Close-up of a sharp hairline",
|
||||
},
|
||||
id: "gallery-6", name: "Line Up Detail", price: "£-", imageSrc: "http://img.b2bpic.net/free-photo/close-up-man-getting-haircut-with-trimmer_23-2148256902.jpg", imageAlt: "Close-up of a sharp hairline"},
|
||||
]}
|
||||
title="Our Craft in Focus"
|
||||
description="Witness the artistry and precision that defines X Barbers. From sharp fades to intricate beard work, our gallery showcases our dedication to perfection."
|
||||
@@ -292,29 +173,11 @@ export default function LandingPage() {
|
||||
useInvertedBackground={true}
|
||||
members={[
|
||||
{
|
||||
id: "glen",
|
||||
name: "Glen",
|
||||
role: "Master Barber",
|
||||
description: "Known for precision fades and loyal returning clients who trust his impeccable skill and consistent quality.",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/male-hairdresser-posing-salon_23-2150462487.jpg",
|
||||
imageAlt: "Portrait of Barber Glen",
|
||||
},
|
||||
id: "glen", name: "Glen", role: "Master Barber", description: "Known for precision fades and loyal returning clients who trust his impeccable skill and consistent quality.", imageSrc: "http://img.b2bpic.net/free-photo/male-hairdresser-posing-salon_23-2150462487.jpg", imageAlt: "Portrait of Barber Glen"},
|
||||
{
|
||||
id: "kojo",
|
||||
name: "Kojo",
|
||||
role: "Head Stylist",
|
||||
description: "Trusted for clean trims and detailed finishing, Kojo's artistry ensures every client leaves with confidence.",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/joyful-young-afro-american-male-barber-wearing-uniform-holding-hair-clippers-doing-yes-gesture_141793-117105.jpg",
|
||||
imageAlt: "Portrait of Barber Kojo",
|
||||
},
|
||||
id: "kojo", name: "Kojo", role: "Head Stylist", description: "Trusted for clean trims and detailed finishing, Kojo's artistry ensures every client leaves with confidence.", imageSrc: "http://img.b2bpic.net/free-photo/joyful-young-afro-american-male-barber-wearing-uniform-holding-hair-clippers-doing-yes-gesture_141793-117105.jpg", imageAlt: "Portrait of Barber Kojo"},
|
||||
{
|
||||
id: "richard",
|
||||
name: "Richard",
|
||||
role: "Precision Specialist",
|
||||
description: "With an eye for detail and mastery in beard sculpting, Richard delivers sharp lines and tailored looks.",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/side-view-man-holding-painting-brush_23-2149529894.jpg",
|
||||
imageAlt: "Portrait of Barber Richard",
|
||||
},
|
||||
id: "richard", name: "Richard", role: "Precision Specialist", description: "With an eye for detail and mastery in beard sculpting, Richard delivers sharp lines and tailored looks.", imageSrc: "http://img.b2bpic.net/free-photo/side-view-man-holding-painting-brush_23-2149529894.jpg", imageAlt: "Portrait of Barber Richard"},
|
||||
]}
|
||||
title="Meet Our Master Barbers"
|
||||
description="Our skilled team is dedicated to perfection, bringing years of experience and a passion for crafting your ultimate style."
|
||||
@@ -326,14 +189,10 @@ export default function LandingPage() {
|
||||
useInvertedBackground={false}
|
||||
title="The Chair Fills Fast."
|
||||
description={[
|
||||
"Our reputation for elite cuts and a vibrant community means we’re often busy. Walk-ins are always welcome, but peak hours can get busy quickly.",
|
||||
"For guaranteed availability and to secure your preferred barber, we highly recommend booking ahead. Don’t miss your slot for the X Barbers experience.",
|
||||
]}
|
||||
"Our reputation for elite cuts and a vibrant community means we’re often busy. Walk-ins are always welcome, but peak hours can get busy quickly.", "For guaranteed availability and to secure your preferred barber, we highly recommend booking ahead. Don’t miss your slot for the X Barbers experience."]}
|
||||
buttons={[
|
||||
{
|
||||
text: "BOOK YOUR SLOT",
|
||||
href: "#location",
|
||||
},
|
||||
text: "BOOK YOUR SLOT", href: "#location"},
|
||||
]}
|
||||
/>
|
||||
</div>
|
||||
@@ -345,27 +204,16 @@ export default function LandingPage() {
|
||||
description="Find X Barbers easily and step into an unparalleled grooming experience. We're open Monday-Saturday, 9 AM - 6 PM. Call us at +44 20 1234 5678 or connect on Instagram @XBarbersCroydon. Walk-ins are always welcome!"
|
||||
inputs={[
|
||||
{
|
||||
name: "name",
|
||||
type: "text",
|
||||
placeholder: "Your Name",
|
||||
required: true,
|
||||
name: "name", type: "text", placeholder: "Your Name", required: true,
|
||||
},
|
||||
{
|
||||
name: "email",
|
||||
type: "email",
|
||||
placeholder: "Your Email",
|
||||
required: true,
|
||||
name: "email", type: "email", placeholder: "Your Email", required: true,
|
||||
},
|
||||
{
|
||||
name: "phone",
|
||||
type: "tel",
|
||||
placeholder: "Your Phone Number",
|
||||
},
|
||||
name: "phone", type: "tel", placeholder: "Your Phone Number"},
|
||||
]}
|
||||
textarea={{
|
||||
name: "message",
|
||||
placeholder: "How can we help you?",
|
||||
rows: 4,
|
||||
name: "message", placeholder: "How can we help you?", rows: 4,
|
||||
}}
|
||||
imageSrc="http://img.b2bpic.net/free-photo/mustache-razors-white-background_23-2147736984.jpg"
|
||||
imageAlt="Map of X Barbers location in Croydon"
|
||||
@@ -382,54 +230,33 @@ export default function LandingPage() {
|
||||
logoText="X BARBERS"
|
||||
columns={[
|
||||
{
|
||||
title: "Explore",
|
||||
items: [
|
||||
title: "Explore", items: [
|
||||
{
|
||||
label: "Home",
|
||||
href: "#hero",
|
||||
},
|
||||
label: "Home", href: "#hero"},
|
||||
{
|
||||
label: "Services",
|
||||
href: "#services",
|
||||
},
|
||||
label: "Services", href: "#services"},
|
||||
{
|
||||
label: "Gallery",
|
||||
href: "#gallery",
|
||||
},
|
||||
label: "Gallery", href: "#gallery"},
|
||||
],
|
||||
},
|
||||
{
|
||||
title: "Company",
|
||||
items: [
|
||||
title: "Company", items: [
|
||||
{
|
||||
label: "Our Barbers",
|
||||
href: "#barbers",
|
||||
},
|
||||
label: "Our Barbers", href: "#barbers"},
|
||||
{
|
||||
label: "The Experience",
|
||||
href: "#experience",
|
||||
},
|
||||
label: "The Experience", href: "#experience"},
|
||||
{
|
||||
label: "Location",
|
||||
href: "#location",
|
||||
},
|
||||
label: "Location", href: "#location"},
|
||||
],
|
||||
},
|
||||
{
|
||||
title: "Connect",
|
||||
items: [
|
||||
title: "Connect", items: [
|
||||
{
|
||||
label: "Book Now",
|
||||
href: "#location",
|
||||
},
|
||||
label: "Book Now", href: "#location"},
|
||||
{
|
||||
label: "Instagram",
|
||||
href: "https://instagram.com/XBarbersCroydon",
|
||||
},
|
||||
label: "Instagram", href: "https://instagram.com/XBarbersCroydon"},
|
||||
{
|
||||
label: "Call Us",
|
||||
href: "tel:+442012345678",
|
||||
},
|
||||
label: "Call Us", href: "tel:+442012345678"},
|
||||
],
|
||||
},
|
||||
]}
|
||||
|
||||
Reference in New Issue
Block a user