Merge version_2 into main

Merge version_2 into main

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>
+  );
+}

src/app/bookings/page.tsx

@@ -0,0 +1,83 @@
+"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';
+
+export default function BookingsPage() {
+  const [bookings, setBookings] = useState([
+    { id: "1", name: "John Doe", date: "2023-11-01", status: "Confirmed" },
+    { id: "2", name: "Jane Smith", date: "2023-11-02", status: "Pending" },
+  ]);
+
+  return (
+    <ThemeProvider
+      defaultButtonVariant="text-stagger"
+      defaultTextAnimation="entrance-slide"
+      borderRadius="rounded"
+      contentWidth="medium"
+      sizing="medium"
+      background="circleGradient"
+      cardStyle="glass-elevated"
+      primaryButtonStyle="gradient"
+      secondaryButtonStyle="glass"
+      headingFontWeight="normal"
+    >
+      <ReactLenis root>
+        <NavbarStyleFullscreen
+          navItems={[
+            { name: "Home", id: "/" },
+            { name: "Bookings", id: "/bookings" }
+          ]}
+          brandName="Coffee Clouds"
+        />
+        
+        <main className="container mx-auto px-6 py-20 min-h-screen">
+          <h1 className="text-4xl font-bold mb-10">Admin Bookings Dashboard</h1>
+          
+          <div className="grid grid-cols-1 lg:grid-cols-2 gap-10">
+            <section className="p-6 border rounded-lg">
+              <h2 className="text-2xl font-semibold mb-6">New Booking</h2>
+              <form className="flex flex-col gap-4" onSubmit={(e) => e.preventDefault()}>
+                <input type="text" placeholder="Client Name" className="w-full p-3 border rounded" aria-label="Client Name" />
+                <input type="date" className="w-full p-3 border rounded" aria-label="Booking Date" />
+                <button type="submit" className="bg-primary p-3 rounded text-white font-semibold">Create Booking</button>
+              </form>
+            </section>
+
+            <section className="p-6 border rounded-lg">
+              <h2 className="text-2xl font-semibold mb-6">Recent Bookings</h2>
+              <div className="overflow-x-auto">
+                <table className="w-full text-left">
+                  <thead>
+                    <tr className="border-b">
+                      <th className="py-2">Name</th>
+                      <th className="py-2">Date</th>
+                      <th className="py-2">Status</th>
+                    </tr>
+                  </thead>
+                  <tbody>
+                    {bookings.map((booking) => (
+                      <tr key={booking.id} className="border-b">
+                        <td className="py-3">{booking.name}</td>
+                        <td className="py-3">{booking.date}</td>
+                        <td className="py-3">{booking.status}</td>
+                      </tr>
+                    ))}
+                  </tbody>
+                </table>
+              </div>
+            </section>
+          </div>
+        </main>
+
+        <FooterBaseCard
+          logoText="Coffee Clouds"
+          columns={[]}
+        />
+      </ReactLenis>
+    </ThemeProvider>
+  );
+}

src/app/page.tsx

@@ -31,26 +31,12 @@ export default function LandingPage() {
   <div id="nav" data-section="nav">
       <NavbarStyleFullscreen
       navItems={[
-        {
-          name: "Home",
-          id: "#hero",
-        },
-        {
-          name: "Story",
-          id: "#about",
-        },
-        {
-          name: "Menu",
-          id: "#menu",
-        },
-        {
-          name: "Testimonials",
-          id: "#testimonials",
-        },
-        {
-          name: "Contact",
-          id: "#contact",
-        },
+        { name: "Home", id: "#hero" },
+        { name: "Story", id: "#about" },
+        { name: "Menu", id: "#menu" },
+        { name: "Testimonials", id: "#testimonials" },
+        { name: "Contact", id: "#contact" },
+        { name: "Bookings", id: "/bookings" },
       ]}
       brandName="Coffee Clouds"
     />
@@ -58,47 +44,21 @@ export default function LandingPage() {
 
   <div id="hero" data-section="hero">
       <HeroBillboardCarousel
-      background={{
-        variant: "gradient-bars",
-      }}
+      background={{ variant: "gradient-bars" }}
       title="Escape into the Clouds."
       description="Where hidden gems brew memories. Discover our signature charcoal-roasted coffee and cloud-whipped lattes in our dark-lit, sanctuary space."
       tag="Hidden Gem Café"
       buttons={[
-        {
-          text: "View Menu",
-          href: "#menu",
-        },
-        {
-          text: "Get Directions",
-          href: "#contact",
-        },
+        { text: "View Menu", href: "#menu" },
+        { text: "Get Directions", href: "#contact" },
       ]}
       mediaItems={[
-        {
-          imageSrc: "http://img.b2bpic.net/free-photo/girl-with-phone-night_1303-5738.jpg",
-          imageAlt: "Moody coffee atmosphere",
-        },
-        {
-          imageSrc: "http://img.b2bpic.net/free-photo/top-view-cocktail-with-cinnamon-decor-table_141793-2878.jpg",
-          imageAlt: "Signature drinks",
-        },
-        {
-          imageSrc: "http://img.b2bpic.net/free-photo/girl-with-phone-night_1303-5741.jpg",
-          imageAlt: "Minimalist cafe interior",
-        },
-        {
-          imageSrc: "http://img.b2bpic.net/free-photo/handsome-man-working-computer-cafe-drinking-coffee_1303-14506.jpg",
-          imageAlt: "Cinematic coffee vibe",
-        },
-        {
-          imageSrc: "http://img.b2bpic.net/free-photo/crispy-crackes-glass-cup-with-glass-icecream-top-view_114579-19110.jpg",
-          imageAlt: "Rich hot beverage",
-        },
-        {
-          imageSrc: "http://img.b2bpic.net/free-photo/woman-pouring-milk-into-her-coffee_1153-545.jpg",
-          imageAlt: "Cloud shop signage",
-        },
+        { imageSrc: "http://img.b2bpic.net/free-photo/girl-with-phone-night_1303-5738.jpg", imageAlt: "Moody coffee atmosphere" },
+        { imageSrc: "http://img.b2bpic.net/free-photo/top-view-cocktail-with-cinnamon-decor-table_141793-2878.jpg", imageAlt: "Signature drinks" },
+        { imageSrc: "http://img.b2bpic.net/free-photo/girl-with-phone-night_1303-5741.jpg", imageAlt: "Minimalist cafe interior" },
+        { imageSrc: "http://img.b2bpic.net/free-photo/handsome-man-working-computer-cafe-drinking-coffee_1303-14506.jpg", imageAlt: "Cinematic coffee vibe" },
+        { imageSrc: "http://img.b2bpic.net/free-photo/crispy-crackes-glass-cup-with-glass-icecream-top-view_114579-19110.jpg", imageAlt: "Rich hot beverage" },
+        { imageSrc: "http://img.b2bpic.net/free-photo/woman-pouring-milk-into-her-coffee_1153-545.jpg", imageAlt: "Cloud shop signage" },
       ]}
     />
   </div>
@@ -109,18 +69,9 @@ export default function LandingPage() {
       title="Beyond the Bean"
       description="We don't just serve coffee; we craft moments. Coffee Clouds began as a secret passion project, dedicated to slow-brewing and high-quality, ethically sourced ingredients served in an atmosphere designed for quiet reflection."
       metrics={[
-        {
-          value: "2018",
-          title: "Established",
-        },
-        {
-          value: "15+",
-          title: "Bean Varieties",
-        },
-        {
-          value: "98%",
-          title: "Happy Guests",
-        },
+        { value: "2018", title: "Established" },
+        { value: "15+", title: "Bean Varieties" },
+        { value: "98%", title: "Happy Guests" },
       ]}
       imageSrc="http://img.b2bpic.net/free-photo/medium-shot-guys-drinking-coffee-indoors_23-2148450779.jpg"
       imageAlt="Storytelling image of our space"
@@ -136,42 +87,12 @@ export default function LandingPage() {
       gridVariant="asymmetric-60-wide-40-narrow"
       useInvertedBackground={false}
       products={[
-        {
-          id: "p1",
-          name: "Velvet Hot Cocoa",
-          price: "$7.50",
-          imageSrc: "http://img.b2bpic.net/free-photo/coffee-with-wheat-thread-drawn-foam_1220-648.jpg",
-        },
-        {
-          id: "p2",
-          name: "Crème Brûlée Latte",
-          price: "$8.50",
-          imageSrc: "http://img.b2bpic.net/free-photo/hot-chocolate-with-cinnamon-mug-flat-lay-holiday-food-photography_53876-103587.jpg",
-        },
-        {
-          id: "p3",
-          name: "Spiced Cloud Chai",
-          price: "$7.00",
-          imageSrc: "http://img.b2bpic.net/free-photo/vertical-shot-male-pouring-milk-into-glass-coffee_181624-1769.jpg",
-        },
-        {
-          id: "p4",
-          name: "Midnight Espresso",
-          price: "$5.00",
-          imageSrc: "http://img.b2bpic.net/free-photo/side-view-woman-sits-table-with-cocktail-lit-candle_140725-9075.jpg",
-        },
-        {
-          id: "p5",
-          name: "Vanilla Cloud Foam",
-          price: "$6.50",
-          imageSrc: "http://img.b2bpic.net/free-photo/fresh-tea-cloth-near-leaves-kernels_23-2147885962.jpg",
-        },
-        {
-          id: "p6",
-          name: "Iced Charcoal Latte",
-          price: "$9.00",
-          imageSrc: "http://img.b2bpic.net/free-photo/top-view-desk-concept-table_23-2148459670.jpg",
-        },
+        { id: "p1", name: "Velvet Hot Cocoa", price: "$7.50", imageSrc: "http://img.b2bpic.net/free-photo/coffee-with-wheat-thread-drawn-foam_1220-648.jpg" },
+        { id: "p2", name: "Crème Brûlée Latte", price: "$8.50", imageSrc: "http://img.b2bpic.net/free-photo/hot-chocolate-with-cinnamon-mug-flat-lay-holiday-food-photography_53876-103587.jpg" },
+        { id: "p3", name: "Spiced Cloud Chai", price: "$7.00", imageSrc: "http://img.b2bpic.net/free-photo/vertical-shot-male-pouring-milk-into-glass-coffee_181624-1769.jpg" },
+        { id: "p4", name: "Midnight Espresso", price: "$5.00", imageSrc: "http://img.b2bpic.net/free-photo/side-view-woman-sits-table-with-cocktail-lit-candle_140725-9075.jpg" },
+        { id: "p5", name: "Vanilla Cloud Foam", price: "$6.50", imageSrc: "http://img.b2bpic.net/free-photo/fresh-tea-cloth-near-leaves-kernels_23-2147885962.jpg" },
+        { id: "p6", name: "Iced Charcoal Latte", price: "$9.00", imageSrc: "http://img.b2bpic.net/free-photo/top-view-desk-concept-table_23-2148459670.jpg" },
       ]}
       title="Signature Rituals"
       description="Indulge in our carefully curated selection of signature drinks, crafted to perfection."
@@ -183,14 +104,7 @@ export default function LandingPage() {
       textboxLayout="default"
       useInvertedBackground={true}
       names={[
-        "The Daily Grind",
-        "Urban Coffee Journal",
-        "City Hidden Gems",
-        "Caffeine Weekly",
-        "The Modern Sip",
-        "Street Press",
-        "Night Owl Brews",
-      ]}
+        "The Daily Grind",        "Urban Coffee Journal",        "City Hidden Gems",        "Caffeine Weekly",        "The Modern Sip",        "Street Press",        "Night Owl Brews"]}
       title="As Seen In"
       description="Featured in leading lifestyle and culinary publications."
     />
@@ -203,46 +117,11 @@ export default function LandingPage() {
       gridVariant="two-columns-alternating-heights"
       useInvertedBackground={false}
       testimonials={[
-        {
-          id: "t1",
-          name: "Elena V.",
-          role: "Creative Director",
-          company: "Studio D",
-          rating: 5,
-          imageSrc: "http://img.b2bpic.net/free-photo/medium-shot-smiley-woman-with-hot-chocolate_52683-102636.jpg",
-        },
-        {
-          id: "t2",
-          name: "Marcus J.",
-          role: "Photographer",
-          company: "Freeform",
-          rating: 5,
-          imageSrc: "http://img.b2bpic.net/free-photo/portrait-smiling-businessman-holding-mobile-phone-coffee-cup-waiting-area_107420-95820.jpg",
-        },
-        {
-          id: "t3",
-          name: "Sophia R.",
-          role: "Marketing",
-          company: "GrowthCo",
-          rating: 5,
-          imageSrc: "http://img.b2bpic.net/free-photo/person-drinking-coffee-spacious-cafeteria_23-2150424023.jpg",
-        },
-        {
-          id: "t4",
-          name: "Julian D.",
-          role: "Architect",
-          company: "UrbanDesign",
-          rating: 5,
-          imageSrc: "http://img.b2bpic.net/free-photo/portrait-waiter-holding-cup-coffee_1170-557.jpg",
-        },
-        {
-          id: "t5",
-          name: "Maya L.",
-          role: "Writer",
-          company: "Bookish",
-          rating: 5,
-          imageSrc: "http://img.b2bpic.net/free-photo/beautiful-woman-all-black-outfit-holding-cup_114579-26448.jpg",
-        },
+        { id: "t1", name: "Elena V.", role: "Creative Director", company: "Studio D", rating: 5, imageSrc: "http://img.b2bpic.net/free-photo/medium-shot-smiley-woman-with-hot-chocolate_52683-102636.jpg" },
+        { id: "t2", name: "Marcus J.", role: "Photographer", company: "Freeform", rating: 5, imageSrc: "http://img.b2bpic.net/free-photo/portrait-smiling-businessman-holding-mobile-phone-coffee-cup-waiting-area_107420-95820.jpg" },
+        { id: "t3", name: "Sophia R.", role: "Marketing", company: "GrowthCo", rating: 5, imageSrc: "http://img.b2bpic.net/free-photo/person-drinking-coffee-spacious-cafeteria_23-2150424023.jpg" },
+        { id: "t4", name: "Julian D.", role: "Architect", company: "UrbanDesign", rating: 5, imageSrc: "http://img.b2bpic.net/free-photo/portrait-waiter-holding-cup-coffee_1170-557.jpg" },
+        { id: "t5", name: "Maya L.", role: "Writer", company: "Bookish", rating: 5, imageSrc: "http://img.b2bpic.net/free-photo/beautiful-woman-all-black-outfit-holding-cup_114579-26448.jpg" },
       ]}
       title="Whispers of Delight"
       description="Read what our community feels when they step into the clouds."
@@ -255,21 +134,9 @@ export default function LandingPage() {
       title="By The Numbers"
       tag="Quality First"
       metrics={[
-        {
-          id: "m1",
-          value: "100K+",
-          description: "Cups Poured",
-        },
-        {
-          id: "m2",
-          value: "50+",
-          description: "Local Suppliers",
-        },
-        {
-          id: "m3",
-          value: "24/7",
-          description: "Bean Roast Cycle",
-        },
+        { id: "m1", value: "100K+", description: "Cups Poured" },
+        { id: "m2", value: "50+", description: "Local Suppliers" },
+        { id: "m3", value: "24/7", description: "Bean Roast Cycle" },
       ]}
     />
   </div>
@@ -279,21 +146,9 @@ export default function LandingPage() {
       textboxLayout="split"
       useInvertedBackground={false}
       faqs={[
-        {
-          id: "f1",
-          title: "Do you accept walk-ins?",
-          content: "Yes, we prioritize walk-ins to keep the atmosphere communal.",
-        },
-        {
-          id: "f2",
-          title: "Can I book a table?",
-          content: "We offer reservations for groups of 6+ via our website portal.",
-        },
-        {
-          id: "f3",
-          title: "Are you pet friendly?",
-          content: "Our patio is perfectly equipped for your furry coffee lovers.",
-        },
+        { id: "f1", title: "Do you accept walk-ins?", content: "Yes, we prioritize walk-ins to keep the atmosphere communal." },
+        { id: "f2", title: "Can I book a table?", content: "We offer reservations for groups of 6+ via our website portal." },
+        { id: "f3", title: "Are you pet friendly?", content: "Our patio is perfectly equipped for your furry coffee lovers." },
       ]}
       imageSrc="http://img.b2bpic.net/free-photo/top-view-cup-full-roasted-coffee-beans_23-2148251685.jpg"
       title="Common Inquiries"
@@ -305,19 +160,11 @@ export default function LandingPage() {
   <div id="contact" data-section="contact">
       <ContactText
       useInvertedBackground={true}
-      background={{
-        variant: "rotated-rays-static",
-      }}
+      background={{ variant: "rotated-rays-static" }}
       text="Visit our hideaway at the heart of the city. We are waiting for you."
       buttons={[
-        {
-          text: "Directions",
-          href: "https://maps.google.com",
-        },
-        {
-          text: "Instagram",
-          href: "https://instagram.com",
-        },
+        { text: "Directions", href: "https://maps.google.com" },
+        { text: "Instagram", href: "https://instagram.com" },
       ]}
     />
   </div>
@@ -326,40 +173,19 @@ export default function LandingPage() {
       <FooterBaseCard
       logoText="Coffee Clouds"
       columns={[
-        {
-          title: "Links",
-          items: [
-            {
-              label: "Story",
-              href: "#about",
-            },
-            {
-              label: "Menu",
-              href: "#menu",
-            },
-            {
-              label: "Reviews",
-              href: "#testimonials",
-            },
-          ],
-        },
-        {
-          title: "Legal",
-          items: [
-            {
-              label: "Privacy",
-              href: "#",
-            },
-            {
-              label: "Terms",
-              href: "#",
-            },
-          ],
-        },
+        { title: "Links", items: [
+          { label: "Story", href: "#about" },
+          { label: "Menu", href: "#menu" },
+          { label: "Reviews", href: "#testimonials" },
+        ]},
+        { title: "Legal", items: [
+          { label: "Privacy", href: "#" },
+          { label: "Terms", href: "#" },
+        ]},
       ]}
     />
   </div>
       </ReactLenis>
     </ThemeProvider>
   );
-}
+}