Add src/app/booking/page.tsx

2026-04-17 16:11:55 +00:00
parent fe24425a70
commit d7c8d5a469
1 changed files with 82 additions and 0 deletions
--- a/src/app/booking/page.tsx
+++ b/src/app/booking/page.tsx
@@ -0,0 +1,82 @@
+"use client";
+
+import { useState } from "react";
+import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
+import ReactLenis from "lenis/react";
+import NavbarStyleFullscreen from '@/components/navbar/NavbarStyleFullscreen/NavbarStyleFullscreen';
+import FooterBaseCard from '@/components/sections/footer/FooterBaseCard';
+import Input from '@/components/form/Input';
+import ButtonHoverMagnetic from '@/components/button/ButtonHoverMagnetic/ButtonHoverMagnetic';
+
+export default function BookingPage() {
+  const [name, setName] = useState("");
+  const [contact, setContact] = useState("");
+  const [service, setService] = useState("");
+  const [date, setDate] = useState("");
+  const [time, setTime] = useState("");
+  const [notes, setNotes] = useState("");
+  const [submitted, setSubmitted] = useState(false);
+
+  const handleSubmit = (e: React.FormEvent) => {
+    e.preventDefault();
+    if (name && contact && service && date && time) {
+        setSubmitted(true);
+    }
+  };
+
+  return (
+    <ThemeProvider
+        defaultButtonVariant="directional-hover"
+        defaultTextAnimation="reveal-blur"
+        borderRadius="soft"
+        contentWidth="small"
+        sizing="largeSizeMediumTitles"
+        background="noiseDiagonalGradient"
+        cardStyle="gradient-bordered"
+        primaryButtonStyle="double-inset"
+        secondaryButtonStyle="radial-glow"
+        headingFontWeight="semibold"
+    >
+      <ReactLenis root>
+        <NavbarStyleFullscreen
+          navItems={[
+            { name: "Home", id: "/" },
+            { name: "Booking", id: "/booking" },
+          ]}
+          brandName="Coffee Clouds"
+        />
+        <div className="min-h-screen pt-32 pb-20 px-6">
+          <div className="max-w-2xl mx-auto">
+            <h1 className="text-4xl font-bold mb-8">Book Your Experience</h1>
+            {submitted ? (
+              <div className="p-8 bg-green-900/20 border border-green-500 rounded-lg text-center">
+                <h2 className="text-2xl text-green-500">Booking Confirmed!</h2>
+                <p className="mt-2">We look forward to hosting you at Coffee Clouds.</p>
+              </div>
+            ) : (
+              <form onSubmit={handleSubmit} className="space-y-6">
+                <Input value={name} onChange={setName} placeholder="Customer Name" required />
+                <Input value={contact} onChange={setContact} placeholder="Contact Details (Email/Phone)" required />
+                <select className="w-full p-3 rounded bg-transparent border border-white/20" value={service} onChange={(e) => setService(e.target.value)} required>
+                  <option value="">Select a Service</option>
+                  <option value="table">Table Reservation</option>
+                  <option value="tasting">Coffee Tasting</option>
+                </select>
+                <Input type="date" value={date} onChange={setDate} required />
+                <Input type="time" value={time} onChange={setTime} required />
+                <textarea className="w-full p-3 rounded bg-transparent border border-white/20 min-h-[100px]" placeholder="Notes" value={notes} onChange={(e) => setNotes(e.target.value)} />
+                <ButtonHoverMagnetic text="Submit Booking" type="submit" className="w-full" />
+              </form>
+            )}
+          </div>
+        </div>
+        <FooterBaseCard
+          logoText="Coffee Clouds"
+          columns={[
+            { title: "Navigation", items: [{ label: "Home", href: "/" }] }
+          ]}
+        />
+      </ReactLenis>
+    </ThemeProvider>
+  );
+}