bender/ad0d3e18-0eec-48ae-870d-c35beb847877
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Merge version_2_1781557205827 into main #2

Merged
bender merged 3 commits from version_2_1781557205827 into main 2026-06-15 21:02:53 +00:00
Conversation 0 Commits 3 Files Changed 4 +34 -1
4 changed files with 34 additions and 1 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
src/App.tsx
View File

@@ -2,11 +2,13 @@ import { Routes, Route } from 'react-router-dom';
import Layout from './components/Layout';
import HomePage from './pages/HomePage';
import BookingPage from "@/pages/BookingPage";
export default function App() {
return (
<Routes>
<Route element={<Layout />}>
<Route path="/" element={<HomePage />} />
<Route path="/booking" element={<BookingPage />} />
</Route>
</Routes>
);

4
src/components/Layout.tsx
View File

@@ -34,7 +34,9 @@ export default function Layout() {
{
"name": "Testimonials",
"href": "#testimonials"
}
},
{ name: "Booking", href: "/booking" },
];
return (

28
src/pages/BookingPage.tsx Normal file
View File

@@ -0,0 +1,28 @@
import Button from "@/components/ui/Button";
import HeroBackgroundSlot from "@/components/ui/HeroBackgroundSlot";
import TextAnimation from "@/components/ui/TextAnimation";
import ImageOrVideo from "@/components/ui/ImageOrVideo";
import ScrollReveal from "@/components/ui/ScrollReveal";
import ContactSplitForm from "@/components/sections/contact/ContactSplitForm";
export default function BookingPage() {
return (
<>
<div data-webild-section="HeroSplit"><section aria-label="Hero section" className="relative flex items-center h-fit md:h-svh md:py-0"><HeroBackgroundSlot /><div className="flex flex-col md:flex-row items-center w-content-width mx-auto"><div className="w-full md:w-1/2"><div className="flex flex-col items-center md:items-start gap-3"><div className="px-3 py-1 mb-1 text-sm card rounded w-fit"><p>Book Your Visit</p></div><TextAnimation text="Reserve Your Time to Unwind" variant="slide-up" gradientText={true} tag="h1" className="text-7xl 2xl:text-8xl leading-[1.15] font-semibold text-center md:text-left text-balance" /><TextAnimation text="Take the first step toward relaxation. Choose your preferred service and let us take care of the rest." variant="slide-up" gradientText={false} tag="p" className="md:max-w-8/10 text-lg md:text-xl leading-snug text-center md:text-left text-balance" /><div className="flex flex-wrap max-md:justify-center gap-3 mt-2 md:mt-3"><Button text="Book Appointment" href="#booking-form" variant="primary" /><Button text="View Services" href="/services" variant="secondary" animationDelay={0.1} /></div></div></div><ScrollReveal variant="fade-blur" delay={0.2} className="w-full md:w-1/2 h-100 md:h-[65vh] md:max-h-[75svh] p-2 xl:p-3 2xl:p-4 card rounded overflow-hidden"><ImageOrVideo imageSrc="https://img.freepik.com/free-photo/beautiful-woman-relaxing-spa-salon_23-2148206093.jpg" /></ScrollReveal></div></section></div>
<div data-webild-section="ContactSplitForm"><ContactSplitForm
tag="Book an Appointment"
title="Reserve Your Time to Unwind"
description="Take the first step towards relaxation. Fill out the form below to request an appointment with our expert stylists."
inputs={[{"name":"name","type":"text","placeholder":"Full Name","required":true},{"name":"email","type":"email","placeholder":"Email Address","required":true},{"name":"phone","type":"tel","placeholder":"Phone Number","required":true},{"name":"date","type":"date","placeholder":"Preferred Date","required":true}]}
textarea={{"name":"message","placeholder":"Any special requests or preferred stylist?","rows":4,"required":false}}
buttonText="Request Booking"
imageSrc="https://img.freepik.com/free-photo/beautiful-woman-getting-spa-treatment_23-2148182280.jpg"
/></div>
<div data-webild-section="TeamOverlayCardsGrid"><section aria-label="Team section" className=""><div className="flex flex-col gap-8"><div className="flex flex-col items-center gap-2 w-content-width mx-auto"><div className="px-3 py-1 mb-1 text-sm card rounded w-fit"><p>Our Experts</p></div><TextAnimation text="Choose Your Specialist" variant="fade" gradientText={true} tag="h2" className="md:max-w-8/10 text-6xl 2xl:text-7xl leading-[1.15] font-semibold text-center text-balance" /><TextAnimation text="Select one of our talented professionals to begin your journey to relaxation and beauty." variant="fade" gradientText={false} tag="p" className="md:max-w-7/10 text-lg md:text-xl leading-snug text-center text-balance" /><div className="flex flex-wrap justify-center gap-3 mt-2 md:mt-3"><Button text="View Availability" href="#booking-calendar" variant="primary" /><Button text="Learn More" variant="secondary" animationDelay={0.1} /></div></div><ScrollReveal variant="fade-blur"><div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-5 mx-auto w-content-width"><div key="Elena M." className="relative aspect-4/5 card rounded"><div className="relative w-full h-full rounded overflow-hidden"><ImageOrVideo imageSrc="https://img.freepik.com/free-photo/portrait-smiling-young-woman-looking-camera_23-2148436701.jpg" /><div className="absolute inset-x-4 bottom-4 xl:inset-x-5 xl:bottom-5 2xl:inset-x-6 2xl:bottom-6 flex items-center justify-between gap-4 xl:gap-5 2xl:gap-6 p-4 xl:p-5 2xl:p-6 card backdrop-blur-sm rounded"><span className="text-xl font-semibold leading-snug truncate">Elena M.</span><div className="px-3 py-2 text-sm primary-button text-primary-cta-text rounded"><p className="truncate">Master Stylist</p></div></div></div></div>
<div key="Sarah P." className="relative aspect-4/5 card rounded"><div className="relative w-full h-full rounded overflow-hidden"><ImageOrVideo imageSrc="https://img.freepik.com/free-photo/beautiful-young-woman-with-clean-fresh-skin_144627-25642.jpg" /><div className="absolute inset-x-4 bottom-4 xl:inset-x-5 xl:bottom-5 2xl:inset-x-6 2xl:bottom-6 flex items-center justify-between gap-4 xl:gap-5 2xl:gap-6 p-4 xl:p-5 2xl:p-6 card backdrop-blur-sm rounded"><span className="text-xl font-semibold leading-snug truncate">Sarah P.</span><div className="px-3 py-2 text-sm primary-button text-primary-cta-text rounded"><p className="truncate">Color Specialist</p></div></div></div></div>
<div key="Julia R." className="relative aspect-4/5 card rounded"><div className="relative w-full h-full rounded overflow-hidden"><ImageOrVideo imageSrc="https://img.freepik.com/free-photo/portrait-young-beautiful-woman-with-smoky-eyes-makeup-pretty-young-adult-girl-posing-studio-closeup-attractive-female-face_186202-4439.jpg" /><div className="absolute inset-x-4 bottom-4 xl:inset-x-5 xl:bottom-5 2xl:inset-x-6 2xl:bottom-6 flex items-center justify-between gap-4 xl:gap-5 2xl:gap-6 p-4 xl:p-5 2xl:p-6 card backdrop-blur-sm rounded"><span className="text-xl font-semibold leading-snug truncate">Julia R.</span><div className="px-3 py-2 text-sm primary-button text-primary-cta-text rounded"><p className="truncate">Skincare Expert</p></div></div></div></div>
<div key="Alice T." className="relative aspect-4/5 card rounded"><div className="relative w-full h-full rounded overflow-hidden"><ImageOrVideo imageSrc="https://img.freepik.com/free-photo/portrait-beautiful-young-woman-with-clean-fresh-skin_144627-25643.jpg" /><div className="absolute inset-x-4 bottom-4 xl:inset-x-5 xl:bottom-5 2xl:inset-x-6 2xl:bottom-6 flex items-center justify-between gap-4 xl:gap-5 2xl:gap-6 p-4 xl:p-5 2xl:p-6 card backdrop-blur-sm rounded"><span className="text-xl font-semibold leading-snug truncate">Alice T.</span><div className="px-3 py-2 text-sm primary-button text-primary-cta-text rounded"><p className="truncate">Massage Therapist</p></div></div></div></div>
<div key="Ben K." className="relative aspect-4/5 card rounded"><div className="relative w-full h-full rounded overflow-hidden"><ImageOrVideo imageSrc="https://img.freepik.com/free-photo/handsome-young-man-with-new-stylish-haircut_176420-19637.jpg" /><div className="absolute inset-x-4 bottom-4 xl:inset-x-5 xl:bottom-5 2xl:inset-x-6 2xl:bottom-6 flex items-center justify-between gap-4 xl:gap-5 2xl:gap-6 p-4 xl:p-5 2xl:p-6 card backdrop-blur-sm rounded"><span className="text-xl font-semibold leading-snug truncate">Ben K.</span><div className="px-3 py-2 text-sm primary-button text-primary-cta-text rounded"><p className="truncate">Nail Technician</p></div></div></div></div></div></ScrollReveal></div></section></div>
</>
);
}

1
src/routes.ts
View File

@@ -6,4 +6,5 @@ export interface Route {
export const routes: Route[] = [
{ path: '/', label: 'Home', pageFile: 'HomePage' },
{ path: '/booking', label: 'Booking', pageFile: 'BookingPage' },
];