Update src/app/page.tsx

Merge version_3 into main

src/app/blog/page.tsx

@@ -33,6 +33,7 @@ export default function BlogPage() {
                             { "name": "Menu", "id": "menu" },
                             { "name": "Banquets", "id": "banquets" },
                             { "name": "Delivery", "id": "delivery" },
+                            { "name": "Shop", "id": "/shop" },
                             { "name": "Contacts", "id": "contacts" }
                         ]}
                         button={{ "text": "Book a Table", "href": "#contacts" }}
@@ -101,4 +102,4 @@ export default function BlogPage() {
             </ReactLenis>
         </ThemeProvider>
     );
-}
+}

src/app/layout.tsx

@@ -1264,4 +1264,4 @@ export default function RootLayout({
       </ServiceWrapper>
     </html>
   );
-}
+}

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"
@@ -33,10 +56,12 @@ export default function KazkovyyDimPage() {
             { name: "Menu", id: "menu" },
             { name: "Banquets", id: "banquets" },
             { name: "Delivery", id: "delivery" },
+            { name: "Blog", id: "/blog" },
+            { name: "Shop", id: "/shop" },
             { 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"
@@ -61,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"
@@ -107,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={[
             {
@@ -202,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"
         />
@@ -313,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>
   );
 }

src/app/shop/[id]/page.tsx

@@ -90,8 +90,8 @@ export default function ProductPage({ params }: ProductPageProps) {
                                 { "name": "Menu", "id": "menu" },
                                 { "name": "Banquets", "id": "banquets" },
                                 { "name": "Delivery", "id": "delivery" },
-                                { "name": "Contacts", "id": "contacts" },
+                                { "name": "Blog", "id": "/blog" },
-                                { "name": "Shop", "id": "/shop" }
+                                { "name": "Contacts", "id": "contacts" }
                             ]}
                             button={{ text: "Cart", onClick: () => setCartOpen(true) }}
                             navItemClassName="text-sm font-medium hover:text-primary-cta transition-colors"
@@ -168,8 +168,8 @@ export default function ProductPage({ params }: ProductPageProps) {
                                 { "name": "Menu", "id": "menu" },
                                 { "name": "Banquets", "id": "banquets" },
                                 { "name": "Delivery", "id": "delivery" },
-                                { "name": "Contacts", "id": "contacts" },
+                                { "name": "Blog", "id": "/blog" },
-                                { "name": "Shop", "id": "/shop" }
+                                { "name": "Contacts", "id": "contacts" }
                             ]}
                             button={{ text: "Cart", onClick: () => setCartOpen(true) }}
                             navItemClassName="text-sm font-medium hover:text-primary-cta transition-colors"
@@ -253,8 +253,8 @@ export default function ProductPage({ params }: ProductPageProps) {
                             { "name": "Menu", "id": "menu" },
                             { "name": "Banquets", "id": "banquets" },
                             { "name": "Delivery", "id": "delivery" },
-                            { "name": "Contacts", "id": "contacts" },
+                            { "name": "Blog", "id": "/blog" },
-                            { "name": "Shop", "id": "/shop" }
+                            { "name": "Contacts", "id": "contacts" }
                         ]}
                         button={{ text: "Cart", onClick: () => setCartOpen(true) }}
                         navItemClassName="text-sm font-medium hover:text-primary-cta transition-colors"
@@ -338,4 +338,4 @@ export default function ProductPage({ params }: ProductPageProps) {
             </ReactLenis>
         </ThemeProvider>
     );
-}
+}

src/app/shop/page.tsx

@@ -43,8 +43,8 @@ export default function ShopPage() {
                                 { "name": "Menu", "id": "menu" },
                                 { "name": "Banquets", "id": "banquets" },
                                 { "name": "Delivery", "id": "delivery" },
-                                { "name": "Contacts", "id": "contacts" },
+                                { "name": "Blog", "id": "/blog" },
-                                { "name": "Shop", "id": "/shop" }
+                                { "name": "Contacts", "id": "contacts" }
                             ]}
                             button={{ text: "Cart", onClick: () => setCartOpen(true) }}
                             navItemClassName="text-sm font-medium hover:text-primary-cta transition-colors"
@@ -120,8 +120,8 @@ export default function ShopPage() {
                             { "name": "Menu", "id": "menu" },
                             { "name": "Banquets", "id": "banquets" },
                             { "name": "Delivery", "id": "delivery" },
-                            { "name": "Contacts", "id": "contacts" },
+                            { "name": "Blog", "id": "/blog" },
-                            { "name": "Shop", "id": "/shop" }
+                            { "name": "Contacts", "id": "contacts" }
                         ]}
                         button={{ text: "Cart", onClick: () => setCartOpen(true) }}
                         navItemClassName="text-sm font-medium hover:text-primary-cta transition-colors"
@@ -180,4 +180,4 @@ export default function ShopPage() {
             </ReactLenis>
         </ThemeProvider>
     );
-}
+}

src/app/styles/variables.css

@@ -2,21 +2,21 @@
   /* Base units */
   /* --vw is set by ThemeProvider */
 
-  /* --background: #e3deea;;
+  /* --background: #fcf6ec;;;;;;;
-  --card: #ffffff;;
+  --card: #f3ede2;;;;;;;
-  --foreground: #1f2027;;
+  --foreground: #2e2521;;;;;;;
-  --primary-cta: #627dc6;;
+  --primary-cta: #d97706;;;;;;;
-  --secondary-cta: #ffffff;;
+  --secondary-cta: #ffffff;;;;;;;
-  --accent: #627dc6;;
+  --accent: #f97316;;;;;;;
-  --background-accent: #627dc6;; */
+  --background-accent: #fed7aa;;;;;;; */
 
-  --background: #e3deea;;
+  --background: #fcf6ec;;;;;;;
-  --card: #ffffff;;
+  --card: #f3ede2;;;;;;;
-  --foreground: #1f2027;;
+  --foreground: #2e2521;;;;;;;
-  --primary-cta: #627dc6;;
+  --primary-cta: #d97706;;;;;;;
-  --secondary-cta: #ffffff;;
+  --secondary-cta: #ffffff;;;;;;;
-  --accent: #627dc6;;
+  --accent: #f97316;;;;;;;
-  --background-accent: #627dc6;;
+  --background-accent: #fed7aa;;;;;;;
 
   /* text sizing - set by ThemeProvider */
   /* --text-2xs: clamp(0.465rem, 0.62vw, 0.62rem);