Merge version_1 into main #1
@@ -11,8 +11,8 @@ import { Public_Sans } from "next/font/google";
|
||||
|
||||
|
||||
export const metadata: Metadata = {
|
||||
title: 'Express Barbershop | Professional Grooming in Milnerton',
|
||||
description: 'Express Barbershop in Milnerton offers expert cuts, fades, and grooming services. Book your next appointment online today.',
|
||||
title: 'Express Barbershop Milnerton',
|
||||
description: 'Professional barbershop in Milnerton offering high-quality haircuts, fades, beard styling, and hot towel shaves. Easy online booking available.',
|
||||
openGraph: {
|
||||
"title": "Express Barbershop",
|
||||
"description": "Professional barbershop in Milnerton.",
|
||||
|
||||
470
src/app/page.tsx
470
src/app/page.tsx
@@ -11,6 +11,7 @@ import MetricCardFourteen from '@/components/sections/metrics/MetricCardFourteen
|
||||
import NavbarLayoutFloatingOverlay from '@/components/navbar/NavbarLayoutFloatingOverlay/NavbarLayoutFloatingOverlay';
|
||||
import TestimonialCardSixteen from '@/components/sections/testimonial/TestimonialCardSixteen';
|
||||
import TextAbout from '@/components/sections/about/TextAbout';
|
||||
import { Scissors, Star } from 'lucide-react';
|
||||
|
||||
export default function LandingPage() {
|
||||
return (
|
||||
@@ -27,341 +28,158 @@ export default function LandingPage() {
|
||||
headingFontWeight="extrabold"
|
||||
>
|
||||
<ReactLenis root>
|
||||
<div id="nav" data-section="nav">
|
||||
<NavbarLayoutFloatingOverlay
|
||||
navItems={[
|
||||
{
|
||||
name: "Home",
|
||||
id: "hero",
|
||||
},
|
||||
{
|
||||
name: "Services",
|
||||
id: "services",
|
||||
},
|
||||
{
|
||||
name: "Reviews",
|
||||
id: "testimonials",
|
||||
},
|
||||
{
|
||||
name: "Location",
|
||||
id: "location",
|
||||
},
|
||||
]}
|
||||
brandName="Express Barbershop"
|
||||
button={{
|
||||
text: "Book Now",
|
||||
href: "#",
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
<div id="nav" data-section="nav">
|
||||
<NavbarLayoutFloatingOverlay
|
||||
navItems={[
|
||||
{ name: "Home", id: "hero" },
|
||||
{ name: "Services", id: "services" },
|
||||
{ name: "Reviews", id: "testimonials" },
|
||||
{ name: "Location", id: "location" },
|
||||
]}
|
||||
brandName="Express Barbershop"
|
||||
button={{
|
||||
text: "Book Now", href: "#"}}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="hero" data-section="hero">
|
||||
<HeroLogo
|
||||
logoText="Express Barbershop"
|
||||
description="Sharp Cuts. Clean Fades. Easy Online Booking.\n\nExpress Barbershop in Milnerton offers professional cuts, fades, beard styling and grooming services with simple online booking through Booksy."
|
||||
buttons={[
|
||||
{
|
||||
text: "Book Now",
|
||||
href: "#",
|
||||
},
|
||||
{
|
||||
text: "View Services",
|
||||
href: "#services",
|
||||
},
|
||||
]}
|
||||
imageSrc="http://img.b2bpic.net/free-photo/front-view-leather-barber-shop-chair_23-2148256927.jpg"
|
||||
imageAlt="Express Barbershop Interior"
|
||||
/>
|
||||
</div>
|
||||
<div id="hero" data-section="hero">
|
||||
<HeroLogo
|
||||
logoText="Express Barbershop"
|
||||
description="Sharp Cuts. Clean Fades. Easy Online Booking.\n\nExpress Barbershop in Milnerton offers professional cuts, fades, beard styling and grooming services with simple online booking through Booksy."
|
||||
buttons={[
|
||||
{ text: "Book Now", href: "#" },
|
||||
{ text: "View Services", href: "#services" },
|
||||
]}
|
||||
imageSrc="http://img.b2bpic.net/free-photo/front-view-leather-barber-shop-chair_23-2148256927.jpg"
|
||||
imageAlt="Express Barbershop Interior"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="trust-bar" data-section="trust-bar">
|
||||
<MetricCardFourteen
|
||||
useInvertedBackground={false}
|
||||
title="Why Choose Us"
|
||||
tag="Quality Assured"
|
||||
metrics={[
|
||||
{
|
||||
id: "1",
|
||||
value: "5.0",
|
||||
description: "Star Rating",
|
||||
},
|
||||
{
|
||||
id: "2",
|
||||
value: "7+",
|
||||
description: "Verified Booksy Reviews",
|
||||
},
|
||||
{
|
||||
id: "3",
|
||||
value: "Milnerton",
|
||||
description: "Based Barbershop",
|
||||
},
|
||||
]}
|
||||
metricsAnimation="slide-up"
|
||||
/>
|
||||
</div>
|
||||
<div id="trust-bar" data-section="trust-bar">
|
||||
<MetricCardFourteen
|
||||
useInvertedBackground={false}
|
||||
title="Why Choose Us"
|
||||
tag="Quality Assured"
|
||||
metrics={[
|
||||
{ id: "1", value: "5.0", description: "Star Rating" },
|
||||
{ id: "2", value: "7+", description: "Verified Booksy Reviews" },
|
||||
{ id: "3", value: "Milnerton", description: "Based Barbershop" },
|
||||
]}
|
||||
metricsAnimation="slide-up"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="testimonials" data-section="testimonials">
|
||||
<TestimonialCardSixteen
|
||||
animationType="slide-up"
|
||||
textboxLayout="default"
|
||||
useInvertedBackground={false}
|
||||
testimonials={[
|
||||
{
|
||||
id: "1",
|
||||
name: "Client A",
|
||||
role: "Regular",
|
||||
company: "Milnerton",
|
||||
rating: 5,
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/happy-overjoyed-woman-rejoicing-her-success_74855-3513.jpg",
|
||||
},
|
||||
{
|
||||
id: "2",
|
||||
name: "Client B",
|
||||
role: "Regular",
|
||||
company: "Milnerton",
|
||||
rating: 5,
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/portrait-smiling-man-with-deep-blue-eyes_8353-1193.jpg",
|
||||
},
|
||||
{
|
||||
id: "3",
|
||||
name: "Client C",
|
||||
role: "Regular",
|
||||
company: "Milnerton",
|
||||
rating: 5,
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/professional-barber-working-with-client-hairdressing-salon-uses-hair-dryer-men-s-haircut-barbershop_613910-18285.jpg",
|
||||
},
|
||||
{
|
||||
id: "4",
|
||||
name: "Client D",
|
||||
role: "Regular",
|
||||
company: "Milnerton",
|
||||
rating: 5,
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/handsome-man-gray-checkered-suit_158538-4205.jpg",
|
||||
},
|
||||
{
|
||||
id: "5",
|
||||
name: "Client E",
|
||||
role: "Regular",
|
||||
company: "Milnerton",
|
||||
rating: 5,
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/portrait-smiling-girl-shows-okay-ok-signs-look-satisfied-recommend-good-company-perfect-quality-praise-good-job-well-done-standing-pleased-against-white-background_176420-54380.jpg",
|
||||
},
|
||||
]}
|
||||
kpiItems={[
|
||||
{
|
||||
value: "5.0",
|
||||
label: "Avg Rating",
|
||||
},
|
||||
{
|
||||
value: "100%",
|
||||
label: "Satisfaction",
|
||||
},
|
||||
{
|
||||
value: "Local",
|
||||
label: "Community",
|
||||
},
|
||||
]}
|
||||
title="What Our Clients Say"
|
||||
description="Highly rated barbershop services in the heart of Milnerton."
|
||||
buttons={[
|
||||
{
|
||||
text: "Book Now",
|
||||
href: "#",
|
||||
},
|
||||
]}
|
||||
/>
|
||||
</div>
|
||||
<div id="testimonials" data-section="testimonials">
|
||||
<TestimonialCardSixteen
|
||||
animationType="slide-up"
|
||||
textboxLayout="default"
|
||||
useInvertedBackground={false}
|
||||
testimonials={[
|
||||
{ id: "1", name: "Client A", role: "Regular", company: "Milnerton", rating: 5, imageSrc: "http://img.b2bpic.net/free-photo/happy-overjoyed-woman-rejoicing-her-success_74855-3513.jpg" },
|
||||
{ id: "2", name: "Client B", role: "Regular", company: "Milnerton", rating: 5, imageSrc: "http://img.b2bpic.net/free-photo/portrait-smiling-man-with-deep-blue-eyes_8353-1193.jpg" },
|
||||
{ id: "3", name: "Client C", role: "Regular", company: "Milnerton", rating: 5, imageSrc: "http://img.b2bpic.net/free-photo/professional-barber-working-with-client-hairdressing-salon-uses-hair-dryer-men-s-haircut-barbershop_613910-18285.jpg" },
|
||||
{ id: "4", name: "Client D", role: "Regular", company: "Milnerton", rating: 5, imageSrc: "http://img.b2bpic.net/free-photo/handsome-man-gray-checkered-suit_158538-4205.jpg" },
|
||||
{ id: "5", name: "Client E", role: "Regular", company: "Milnerton", rating: 5, imageSrc: "http://img.b2bpic.net/free-photo/portrait-smiling-girl-shows-okay-ok-signs-look-satisfied-recommend-good-company-perfect-quality-praise-good-job-well-done-standing-pleased-against-white-background_176420-54380.jpg" },
|
||||
]}
|
||||
kpiItems={[
|
||||
{ value: "5.0", label: "Avg Rating" },
|
||||
{ value: "100%", label: "Satisfaction" },
|
||||
{ value: "Local", label: "Community" },
|
||||
]}
|
||||
title="What Our Clients Say"
|
||||
description="Highly rated barbershop services in the heart of Milnerton."
|
||||
buttons={[{ text: "Book Now", href: "#" }]}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="services" data-section="services">
|
||||
<FeatureCardTwentySix
|
||||
textboxLayout="default"
|
||||
useInvertedBackground={false}
|
||||
features={[
|
||||
{
|
||||
title: "Gents Cut",
|
||||
description: "R150 / 30 min",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/various-hairdressing-equipment-white-background_23-2147711631.jpg",
|
||||
buttonIcon: "Scissors",
|
||||
},
|
||||
{
|
||||
title: "Fade",
|
||||
description: "R170 / 30 min",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/instruments-used-latino-hair-salon_23-2150555177.jpg",
|
||||
buttonIcon: "Scissors",
|
||||
},
|
||||
{
|
||||
title: "Kids Cut",
|
||||
description: "R120 / 30 min",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/man-working-with-radio-equipment-close-up_23-2148815385.jpg",
|
||||
buttonIcon: "Scissors",
|
||||
},
|
||||
{
|
||||
title: "Kids Fade",
|
||||
description: "R140 / 30 min",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/high-angle-view-various-barber-tools-row_23-2147839820.jpg",
|
||||
buttonIcon: "Scissors",
|
||||
},
|
||||
{
|
||||
title: "Beard Styling",
|
||||
description: "R140 / 30 min",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/music-controller-foreground_1381-27.jpg",
|
||||
buttonIcon: "Scissors",
|
||||
},
|
||||
{
|
||||
title: "Hot Towel Shave",
|
||||
description: "R140 / 30 min",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/close-up-hairdresser-shop-instruments_23-2149319798.jpg",
|
||||
buttonIcon: "Scissors",
|
||||
},
|
||||
]}
|
||||
title="Our Professional Services"
|
||||
description="High-quality grooming for every style."
|
||||
/>
|
||||
</div>
|
||||
<div id="services" data-section="services">
|
||||
<FeatureCardTwentySix
|
||||
textboxLayout="default"
|
||||
useInvertedBackground={false}
|
||||
features={[
|
||||
{ title: "Gents Cut", description: "R150 / 30 min", imageSrc: "http://img.b2bpic.net/free-photo/various-hairdressing-equipment-white-background_23-2147711631.jpg", buttonIcon: Scissors },
|
||||
{ title: "Fade", description: "R170 / 30 min", imageSrc: "http://img.b2bpic.net/free-photo/instruments-used-latino-hair-salon_23-2150555177.jpg", buttonIcon: Scissors },
|
||||
{ title: "Kids Cut", description: "R120 / 30 min", imageSrc: "http://img.b2bpic.net/free-photo/man-working-with-radio-equipment-close-up_23-2148815385.jpg", buttonIcon: Scissors },
|
||||
{ title: "Kids Fade", description: "R140 / 30 min", imageSrc: "http://img.b2bpic.net/free-photo/high-angle-view-various-barber-tools-row_23-2147839820.jpg", buttonIcon: Scissors },
|
||||
{ title: "Beard Styling", description: "R140 / 30 min", imageSrc: "http://img.b2bpic.net/free-photo/music-controller-foreground_1381-27.jpg", buttonIcon: Scissors },
|
||||
{ title: "Hot Towel Shave", description: "R140 / 30 min", imageSrc: "http://img.b2bpic.net/free-photo/close-up-hairdresser-shop-instruments_23-2149319798.jpg", buttonIcon: Scissors },
|
||||
]}
|
||||
title="Our Professional Services"
|
||||
description="High-quality grooming for every style."
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="gallery" data-section="gallery">
|
||||
<FeatureCardTwentySix
|
||||
textboxLayout="default"
|
||||
useInvertedBackground={false}
|
||||
features={[
|
||||
{
|
||||
title: "Sharp Fade",
|
||||
description: "Expert precision",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/portrait-bearded-traveler-male-dressed-fleece-shirt-wild-park-background_613910-12816.jpg",
|
||||
buttonIcon: "Star",
|
||||
},
|
||||
{
|
||||
title: "Beard Grooming",
|
||||
description: "Signature style",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/two-stylish-bearded-men-background-old-town_1153-8187.jpg",
|
||||
buttonIcon: "Star",
|
||||
},
|
||||
{
|
||||
title: "Modern Shop",
|
||||
description: "Premium experience",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/young-man-barber-shop-after-getting-haircut_23-2149186513.jpg",
|
||||
buttonIcon: "Star",
|
||||
},
|
||||
{
|
||||
title: "Kids Cuts",
|
||||
description: "Family friendly",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/confident-young-female-barber-wearing-glasses-uniform-holding-combs-looking-camera-applying-hair-spray-her-own-hair-isolated-olive-green-background_141793-137891.jpg",
|
||||
buttonIcon: "Star",
|
||||
},
|
||||
{
|
||||
title: "Hot Towel",
|
||||
description: "Refined finish",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/portrait-stylish-bearded-male-sits-chair-his-two-irish-setter-dogs_613910-8054.jpg",
|
||||
buttonIcon: "Star",
|
||||
},
|
||||
{
|
||||
title: "Clean Space",
|
||||
description: "Always welcoming",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/hair-stylist-making-styling-beard-client-salon_23-2148181978.jpg",
|
||||
buttonIcon: "Star",
|
||||
},
|
||||
]}
|
||||
title="Our Work"
|
||||
description="Like the look? Book your next cut today."
|
||||
/>
|
||||
</div>
|
||||
<div id="gallery" data-section="gallery">
|
||||
<FeatureCardTwentySix
|
||||
textboxLayout="default"
|
||||
useInvertedBackground={false}
|
||||
features={[
|
||||
{ title: "Sharp Fade", description: "Expert precision", imageSrc: "http://img.b2bpic.net/free-photo/portrait-bearded-traveler-male-dressed-fleece-shirt-wild-park-background_613910-12816.jpg", buttonIcon: Star },
|
||||
{ title: "Beard Grooming", description: "Signature style", imageSrc: "http://img.b2bpic.net/free-photo/two-stylish-bearded-men-background-old-town_1153-8187.jpg", buttonIcon: Star },
|
||||
{ title: "Modern Shop", description: "Premium experience", imageSrc: "http://img.b2bpic.net/free-photo/young-man-barber-shop-after-getting-haircut_23-2149186513.jpg", buttonIcon: Star },
|
||||
{ title: "Kids Cuts", description: "Family friendly", imageSrc: "http://img.b2bpic.net/free-photo/confident-young-female-barber-wearing-glasses-uniform-holding-combs-looking-camera-applying-hair-spray-her-own-hair-isolated-olive-green-background_141793-137891.jpg", buttonIcon: Star },
|
||||
{ title: "Hot Towel", description: "Refined finish", imageSrc: "http://img.b2bpic.net/free-photo/portrait-stylish-bearded-male-sits-chair-his-two-irish-setter-dogs_613910-8054.jpg", buttonIcon: Star },
|
||||
{ title: "Clean Space", description: "Always welcoming", imageSrc: "http://img.b2bpic.net/free-photo/hair-stylist-making-styling-beard-client-salon_23-2148181978.jpg", buttonIcon: Star },
|
||||
]}
|
||||
title="Our Work"
|
||||
description="Like the look? Book your next cut today."
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="location" data-section="location">
|
||||
<TextAbout
|
||||
useInvertedBackground={false}
|
||||
title="Visit Express Barbershop"
|
||||
buttons={[
|
||||
{
|
||||
text: "Book Now",
|
||||
href: "#",
|
||||
},
|
||||
]}
|
||||
/>
|
||||
</div>
|
||||
<div id="location" data-section="location">
|
||||
<TextAbout
|
||||
useInvertedBackground={false}
|
||||
title="Visit Express Barbershop"
|
||||
buttons={[{ text: "Book Now", href: "#" }]}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="faq" data-section="faq">
|
||||
<FaqDouble
|
||||
textboxLayout="default"
|
||||
useInvertedBackground={false}
|
||||
faqs={[
|
||||
{
|
||||
id: "1",
|
||||
title: "Do I need to book?",
|
||||
content: "Yes, online booking is recommended to secure your time.",
|
||||
},
|
||||
{
|
||||
id: "2",
|
||||
title: "Can I walk in?",
|
||||
content: "Walk ins may be available, but booking online is best to avoid waiting.",
|
||||
},
|
||||
{
|
||||
id: "3",
|
||||
title: "How do I book?",
|
||||
content: "Click any Book Now button and choose your service and time through Booksy.",
|
||||
},
|
||||
{
|
||||
id: "4",
|
||||
title: "Do you offer kids cuts?",
|
||||
content: "Yes, kids cuts and kids fades are available.",
|
||||
},
|
||||
]}
|
||||
title="Frequently Asked Questions"
|
||||
faqsAnimation="slide-up"
|
||||
description="Everything you need to know about your next visit."
|
||||
/>
|
||||
</div>
|
||||
<div id="faq" data-section="faq">
|
||||
<FaqDouble
|
||||
textboxLayout="default"
|
||||
useInvertedBackground={false}
|
||||
faqs={[
|
||||
{ id: "1", title: "Do I need to book?", content: "Yes, online booking is recommended to secure your time." },
|
||||
{ id: "2", title: "Can I walk in?", content: "Walk ins may be available, but booking online is best to avoid waiting." },
|
||||
{ id: "3", title: "How do I book?", content: "Click any Book Now button and choose your service and time through Booksy." },
|
||||
{ id: "4", title: "Do you offer kids cuts?", content: "Yes, kids cuts and kids fades are available." },
|
||||
]}
|
||||
title="Frequently Asked Questions"
|
||||
faqsAnimation="slide-up"
|
||||
description="Everything you need to know about your next visit."
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="booking" data-section="booking">
|
||||
<ContactText
|
||||
useInvertedBackground={false}
|
||||
background={{
|
||||
variant: "plain",
|
||||
}}
|
||||
text="Book Your Next Cut Online. Choose your service, select a time and confirm your appointment through Booksy. All bookings stay synced."
|
||||
buttons={[
|
||||
{
|
||||
text: "Book Now",
|
||||
href: "#",
|
||||
},
|
||||
]}
|
||||
/>
|
||||
</div>
|
||||
<div id="booking" data-section="booking">
|
||||
<ContactText
|
||||
useInvertedBackground={false}
|
||||
background={{ variant: "plain" }}
|
||||
text="Book Your Next Cut Online. Choose your service, select a time and confirm your appointment through Booksy. All bookings stay synced."
|
||||
buttons={[{ text: "Book Now", href: "#" }]}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="footer" data-section="footer">
|
||||
<FooterMedia
|
||||
imageSrc="http://img.b2bpic.net/free-photo/brown-vintage-leather-chair-stylish-barber-shop_627829-6180.jpg"
|
||||
logoText="Express Barbershop"
|
||||
columns={[
|
||||
{
|
||||
title: "Navigation",
|
||||
items: [
|
||||
{
|
||||
label: "Services",
|
||||
href: "#services",
|
||||
},
|
||||
{
|
||||
label: "Reviews",
|
||||
href: "#testimonials",
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
title: "Support",
|
||||
items: [
|
||||
{
|
||||
label: "Booksy",
|
||||
href: "#",
|
||||
},
|
||||
{
|
||||
label: "Contact",
|
||||
href: "#",
|
||||
},
|
||||
],
|
||||
},
|
||||
]}
|
||||
/>
|
||||
</div>
|
||||
<div id="footer" data-section="footer">
|
||||
<FooterMedia
|
||||
imageSrc="http://img.b2bpic.net/free-photo/brown-vintage-leather-chair-stylish-barber-shop_627829-6180.jpg"
|
||||
logoText="Express Barbershop"
|
||||
columns={[
|
||||
{
|
||||
title: "Navigation", items: [
|
||||
{ label: "Services", href: "#services" },
|
||||
{ label: "Reviews", href: "#testimonials" },
|
||||
],
|
||||
},
|
||||
{
|
||||
title: "Support", items: [
|
||||
{ label: "Booksy", href: "#" },
|
||||
{ label: "Contact", href: "#" },
|
||||
],
|
||||
},
|
||||
]}
|
||||
/>
|
||||
</div>
|
||||
</ReactLenis>
|
||||
</ThemeProvider>
|
||||
);
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user