bender/ff8a0873-0513-46ff-aff6-511d10ca7f8a
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Merge version_2 into main

Browse Source 
Merge version_2 into main
This commit was merged in pull request #2.
This commit is contained in:
bender
2026-05-25 10:34:04 +00:00
parent 185e6293f2 56a5092316
commit 82d7f95399
1 changed files with 45 additions and 14 deletions
Download Patch File Download Diff File Expand all files Collapse all files

59
src/app/page.tsx
View File

@@ -1,5 +1,6 @@
"use client";
import { useState } from "react";
import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
import ReactLenis from "lenis/react";
import ContactText from '@/components/sections/contact/ContactText';
@@ -11,9 +12,13 @@ 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';
import { Scissors, Star, X, Calendar, Check } from 'lucide-react';
export default function LandingPage() {
const [showBookingModal, setShowBookingModal] = useState(false);
const handleBookingClick = () => setShowBookingModal(true);
return (
<ThemeProvider
defaultButtonVariant="elastic-effect"
@@ -37,8 +42,7 @@ export default function LandingPage() {
{ name: "Location", id: "location" },
]}
brandName="Express Barbershop"
button={{
text: "Book Now", href: "#"}}
button={{ text: "Book Now", onClick: handleBookingClick }}
/>
</div>
@@ -47,7 +51,7 @@ export default function LandingPage() {
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: "Book Now", onClick: handleBookingClick },
{ text: "View Services", href: "#services" },
]}
imageSrc="http://img.b2bpic.net/free-photo/front-view-leather-barber-shop-chair_23-2148256927.jpg"
@@ -88,7 +92,7 @@ export default function LandingPage() {
]}
title="What Our Clients Say"
description="Highly rated barbershop services in the heart of Milnerton."
buttons={[{ text: "Book Now", href: "#" }]}
buttons={[{ text: "Book Now", onClick: handleBookingClick }]}
/>
</div>
@@ -97,12 +101,12 @@ export default function LandingPage() {
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: "Gents Cut", description: "R150 / 30 min", imageSrc: "http://img.b2bpic.net/free-photo/various-hairdressing-equipment-white-background_23-2147711631.jpg", buttonIcon: Scissors, buttonOnClick: handleBookingClick },
{ title: "Fade", description: "R170 / 30 min", imageSrc: "http://img.b2bpic.net/free-photo/instruments-used-latino-hair-salon_23-2150555177.jpg", buttonIcon: Scissors, buttonOnClick: handleBookingClick },
{ 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, buttonOnClick: handleBookingClick },
{ 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, buttonOnClick: handleBookingClick },
{ title: "Beard Styling", description: "R140 / 30 min", imageSrc: "http://img.b2bpic.net/free-photo/music-controller-foreground_1381-27.jpg", buttonIcon: Scissors, buttonOnClick: handleBookingClick },
{ 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, buttonOnClick: handleBookingClick },
]}
title="Our Professional Services"
description="High-quality grooming for every style."
@@ -130,7 +134,7 @@ export default function LandingPage() {
<TextAbout
useInvertedBackground={false}
title="Visit Express Barbershop"
buttons={[{ text: "Book Now", href: "#" }]}
buttons={[{ text: "Book Now", onClick: handleBookingClick }]}
/>
</div>
@@ -155,7 +159,7 @@ export default function LandingPage() {
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: "#" }]}
buttons={[{ text: "Book Now", onClick: handleBookingClick }]}
/>
</div>
@@ -179,7 +183,34 @@ export default function LandingPage() {
]}
/>
</div>
{showBookingModal && (
<div className="fixed inset-0 z-50 flex items-center justify-center p-4 bg-black/50 backdrop-blur-sm animate-in fade-in duration-300">
<div className="w-full max-w-md p-6 bg-white rounded-2xl shadow-2xl animate-in zoom-in-95 duration-300">
<div className="flex items-center justify-between mb-4">
<h3 className="text-xl font-bold text-gray-900">Booking Confirmed</h3>
<button onClick={() => setShowBookingModal(false)} className="p-1 text-gray-400 hover:text-gray-900 transition-colors">
<X className="w-5 h-5" />
</button>
</div>
<div className="space-y-3 mb-6">
<p className="text-sm text-gray-500">Service: <span className="font-medium text-gray-900">Gents Cut</span></p>
<p className="text-sm text-gray-500">Date: <span className="font-medium text-gray-900">Tomorrow</span></p>
<p className="text-sm text-gray-500">Time: <span className="font-medium text-gray-900">10:00 AM</span></p>
<p className="mt-4 text-xs font-semibold text-emerald-600">* Payment collected on the day</p>
</div>
<div className="grid grid-cols-2 gap-3">
<button onClick={() => setShowBookingModal(false)} className="flex items-center justify-center gap-2 px-4 py-3 text-sm font-medium text-white transition-all bg-black rounded-xl hover:bg-gray-800">
<Check className="w-4 h-4" /> Finish
</button>
<button className="flex items-center justify-center gap-2 px-4 py-3 text-sm font-medium text-gray-900 transition-all bg-gray-100 rounded-xl hover:bg-gray-200">
<Calendar className="w-4 h-4" /> Calendar
</button>
</div>
</div>
</div>
)}
</ReactLenis>
</ThemeProvider>
);
}
}