From d8c016edfd9fce68c556927d92e0b45710a28c5d Mon Sep 17 00:00:00 2001
From: bender <kudin.dima@gmail.com>
Date: Tue, 17 Feb 2026 12:09:00 +0000
Subject: [PATCH] Update src/app/page.tsx

---
 src/app/page.tsx | 162 +++++++++++++++++++++++++++++++++++++++++++++--
 1 file changed, 156 insertions(+), 6 deletions(-)

diff --git a/src/app/page.tsx b/src/app/page.tsx
index d9402a7..d2b00d9 100644
--- a/src/app/page.tsx
+++ b/src/app/page.tsx
@@ -9,9 +9,32 @@ import ProductCardThree from '@/components/sections/product/ProductCardThree';
 import TestimonialCardTwo from '@/components/sections/testimonial/TestimonialCardTwo';
 import ContactSplitForm from '@/components/sections/contact/ContactSplitForm';
 import FooterMedia from '@/components/sections/footer/FooterMedia';
-import { Castle, Flame, Heart, Leaf, Quote, UtensilsCrossed } from "lucide-react";
+import { Castle, Flame, Heart, Leaf, Quote, UtensilsCrossed, X } from "lucide-react";
+import { useState } from "react";
 
 export default function KazkovyyDimPage() {
+  const [isModalOpen, setIsModalOpen] = useState(false);
+  const [formData, setFormData] = useState({
+    name: "",    email: "",    phone: "",    eventDate: "",    guestCount: "",    message: ""
+  });
+
+  const handleInputChange = (e: React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement>) => {
+    const { name, value } = e.target;
+    setFormData(prev => ({
+      ...prev,
+      [name]: value
+    }));
+  };
+
+  const handleSubmit = (e: React.FormEvent) => {
+    e.preventDefault();
+    console.log("Booking form submitted:", formData);
+    setFormData({
+      name: "",      email: "",      phone: "",      eventDate: "",      guestCount: "",      message: ""
+    });
+    setIsModalOpen(false);
+  };
+
   return (
     <ThemeProvider
       defaultButtonVariant="elastic-effect"
@@ -38,7 +61,7 @@ export default function KazkovyyDimPage() {
             { name: "Contacts", id: "contacts" }
           ]}
           button={{
-            text: "Book a Table",            href: "#contacts"
+            text: "Book a Table",            onClick: () => setIsModalOpen(true)
           }}
           navItemClassName="text-sm font-medium hover:text-primary-cta transition-colors"
           buttonClassName="bg-primary-cta hover:bg-accent text-white px-6 py-2 rounded-soft transition-all"
@@ -63,7 +86,7 @@ export default function KazkovyyDimPage() {
           rating={5}
           ratingText="Loved by families and event organizers"
           buttons={[{
-            text: "Book a Table",            href: "#contacts"
+            text: "Book a Table",            onClick: () => setIsModalOpen(true)
           }]}
           tagAnimation="slide-up"
           buttonAnimation="slide-up"
@@ -109,7 +132,7 @@ export default function KazkovyyDimPage() {
           tagAnimation="slide-up"
           buttonAnimation="slide-up"
           buttons={[{
-            text: "Inquire About Events",            href: "#contacts"
+            text: "Inquire About Events",            onClick: () => setIsModalOpen(true)
           }]}
           features={[
             {
@@ -204,7 +227,7 @@ export default function KazkovyyDimPage() {
           textBoxTitleClassName="text-4xl md:text-5xl font-bold text-foreground"
           textBoxDescriptionClassName="text-lg text-foreground/80"
           buttons={[{
-            text: "Order Now",            href: "#contacts"
+            text: "Order Now",            onClick: () => setIsModalOpen(true)
           }]}
           buttonAnimation="slide-up"
         />
@@ -315,6 +338,133 @@ export default function KazkovyyDimPage() {
           copyrightTextClassName="text-background/70 text-sm"
         />
       </div>
+
+      {isModalOpen && (
+        <div className="fixed inset-0 bg-black/50 flex items-center justify-center z-50 p-4">
+          <div className="bg-card rounded-soft w-full max-w-md relative p-8">
+            <button
+              onClick={() => setIsModalOpen(false)}
+              className="absolute top-4 right-4 p-2 hover:bg-background rounded-soft transition-colors"
+              aria-label="Close modal"
+            >
+              <X className="w-6 h-6 text-foreground" />
+            </button>
+
+            <h2 className="text-2xl md:text-3xl font-bold text-foreground mb-2">Book a Table</h2>
+            <p className="text-foreground/70 text-sm mb-6">Reserve your special moment at Kazkovyy Dim</p>
+
+            <form onSubmit={handleSubmit} className="space-y-4">
+              <div>
+                <label htmlFor="modal-name" className="block text-sm font-medium text-foreground mb-2">
+                  Full Name *
+                </label>
+                <input
+                  id="modal-name"
+                  type="text"
+                  name="name"
+                  placeholder="Your Full Name"
+                  value={formData.name}
+                  onChange={handleInputChange}
+                  required
+                  className="w-full px-4 py-2 rounded-soft bg-background border border-accent/20 text-foreground placeholder-foreground/50 focus:outline-none focus:border-primary-cta transition-colors"
+                />
+              </div>
+
+              <div>
+                <label htmlFor="modal-email" className="block text-sm font-medium text-foreground mb-2">
+                  Email Address *
+                </label>
+                <input
+                  id="modal-email"
+                  type="email"
+                  name="email"
+                  placeholder="your@email.com"
+                  value={formData.email}
+                  onChange={handleInputChange}
+                  required
+                  className="w-full px-4 py-2 rounded-soft bg-background border border-accent/20 text-foreground placeholder-foreground/50 focus:outline-none focus:border-primary-cta transition-colors"
+                />
+              </div>
+
+              <div>
+                <label htmlFor="modal-phone" className="block text-sm font-medium text-foreground mb-2">
+                  Phone Number *
+                </label>
+                <input
+                  id="modal-phone"
+                  type="tel"
+                  name="phone"
+                  placeholder="+380 (XX) XXXX-XXXX"
+                  value={formData.phone}
+                  onChange={handleInputChange}
+                  required
+                  className="w-full px-4 py-2 rounded-soft bg-background border border-accent/20 text-foreground placeholder-foreground/50 focus:outline-none focus:border-primary-cta transition-colors"
+                />
+              </div>
+
+              <div>
+                <label htmlFor="modal-date" className="block text-sm font-medium text-foreground mb-2">
+                  Preferred Event Date
+                </label>
+                <input
+                  id="modal-date"
+                  type="date"
+                  name="eventDate"
+                  value={formData.eventDate}
+                  onChange={handleInputChange}
+                  className="w-full px-4 py-2 rounded-soft bg-background border border-accent/20 text-foreground placeholder-foreground/50 focus:outline-none focus:border-primary-cta transition-colors"
+                />
+              </div>
+
+              <div>
+                <label htmlFor="modal-guests" className="block text-sm font-medium text-foreground mb-2">
+                  Number of Guests
+                </label>
+                <input
+                  id="modal-guests"
+                  type="number"
+                  name="guestCount"
+                  placeholder="Expected number of guests"
+                  value={formData.guestCount}
+                  onChange={handleInputChange}
+                  className="w-full px-4 py-2 rounded-soft bg-background border border-accent/20 text-foreground placeholder-foreground/50 focus:outline-none focus:border-primary-cta transition-colors"
+                />
+              </div>
+
+              <div>
+                <label htmlFor="modal-message" className="block text-sm font-medium text-foreground mb-2">
+                  Additional Details
+                </label>
+                <textarea
+                  id="modal-message"
+                  name="message"
+                  placeholder="Tell us about your event, venue preference, and any special requests..."
+                  value={formData.message}
+                  onChange={handleInputChange}
+                  rows={4}
+                  className="w-full px-4 py-2 rounded-soft bg-background border border-accent/20 text-foreground placeholder-foreground/50 focus:outline-none focus:border-primary-cta transition-colors resize-none"
+                />
+              </div>
+
+              <div className="flex gap-3 pt-4">
+                <button
+                  type="button"
+                  onClick={() => setIsModalOpen(false)}
+                  className="flex-1 px-4 py-2 rounded-soft bg-background border border-accent/20 text-foreground hover:bg-accent/10 transition-colors"
+                >
+                  Cancel
+                </button>
+                <button
+                  type="submit"
+                  className="flex-1 px-4 py-2 rounded-soft bg-primary-cta hover:bg-accent text-white font-medium transition-colors"
+                >
+                  Send Booking
+                </button>
+              </div>
+            </form>
+          </div>
+        </div>
+      )}
     </ThemeProvider>
   );
-}
+}
\ No newline at end of file
-- 
2.49.1