Update src/app/styles/variables.css

Merge version_6 into main
2026-02-17 12:27:49 +00:00 · 2026-02-17 12:12:41 +00:00 · 2026-02-17 12:12:36 +00:00 · 2026-02-17 12:12:36 +00:00 · 2026-02-17 12:12:35 +00:00 · 2026-02-17 12:09:05 +00:00
6 changed files with 197 additions and 69 deletions
--- a/src/app/blog/page.tsx
+++ b/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>
    );
-}
+}
--- a/src/app/layout.tsx
+++ b/src/app/layout.tsx
@@ -1,48 +1,24 @@
 import type { Metadata } from "next";
-import { Cormorant_Garamond } from "next/font/google";
+import { Inter } from "next/font/google";
 import "./globals.css";
-import { ServiceWrapper } from "@/components/ServiceWrapper";
-import Tag from "@/tag/Tag";
+import "./styles/variables.css";
+import "./styles/base.css";

-const cormorantGaramond = Cormorant_Garamond({
-  variable: "--font-cormorant-garamond",  subsets: ["latin"],
-  weight: ["300", "400", "500", "600", "700"],
+const inter = Inter({
+  variable: "--font-inter",  subsets: ["latin"],
 });

 export const metadata: Metadata = {
-  title: "Kazkovyy Dim - Ukrainian Banquet Restaurant Complex",  description: "Authentic Ukrainian banquet venue with fireplace, traditional ethno design, and family-focused hospitality. Perfect for weddings, celebrations, and events.",  keywords: "Ukrainian restaurant, banquet hall, event venue, ethno style, family dining, Kyiv",  metadataBase: new URL("https://kazkovyydim.ua"),
-  alternates: {
-    canonical: "https://kazkovyydim.ua"
-  },
-  openGraph: {
-    title: "Kazkovyy Dim - Authentic Ukrainian Banquets",    description: "Experience warmth, tradition, and Ukrainian hospitality at our beautifully designed banquet complex.",    url: "https://kazkovyydim.ua",    siteName: "Kazkovyy Dim",    images: [{
-      url: "https://img.b2bpic.net/free-photo/full-shot-woman-getting-warmer-by-fire_23-2149172517.jpg",      alt: "Kazkovyy Dim - Warm fireplace interior"
-    }],
-    type: "website"
-  },
-  twitter: {
-    card: "summary_large_image",    title: "Kazkovyy Dim - Ukrainian Banquet Restaurant",    description: "Authentic family-owned banquet venue with ethno style and warm hospitality.",    images: ["https://img.b2bpic.net/free-photo/full-shot-woman-getting-warmer-by-fire_23-2149172517.jpg"]
-  },
-  robots: {
-    index: true,
-    follow: true
-  }
-};
+  title: "Kazkovyy Dim - Authentic Ukrainian Banquets & Family Dining",  description: "Experience warmth, tradition, and ethno-cultural heritage at Kazkovyy Dim. Premium banquet spaces, authentic cuisine, and unforgettable celebrations."};

 export default function RootLayout({
  children,
-}: Readonly<{
+}: {
  children: React.ReactNode;
-}>) {
+}) {
  return (
-    <html lang="en" suppressHydrationWarning>
-      <ServiceWrapper>
-        <body
-          className={cormorantGaramond.variable}
-        >
-          <Tag />
-          {children}
-        
+    <html lang="en">
+      <body className={`${inter.variable}`}>{children}
        <script
          dangerouslySetInnerHTML={{
            __html: `
@@ -1261,7 +1237,6 @@ export default function RootLayout({
          }}
        />
      </body>
-      </ServiceWrapper>
    </html>
  );
-}
+}
--- 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"
@@ -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>
  );
-}
+}
--- a/src/app/shop/[id]/page.tsx
+++ b/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": "Shop", "id": "/shop" }
+                                { "name": "Blog", "id": "/blog" },
+                                { "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": "Shop", "id": "/shop" }
+                                { "name": "Blog", "id": "/blog" },
+                                { "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": "Shop", "id": "/shop" }
+                            { "name": "Blog", "id": "/blog" },
+                            { "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>
    );
-}
+}
--- a/src/app/shop/page.tsx
+++ b/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": "Shop", "id": "/shop" }
+                                { "name": "Blog", "id": "/blog" },
+                                { "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": "Shop", "id": "/shop" }
+                            { "name": "Blog", "id": "/blog" },
+                            { "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>
    );
-}
+}
--- a/src/app/styles/variables.css
+++ b/src/app/styles/variables.css
@@ -2,21 +2,21 @@
  /* Base units */
  /* --vw is set by ThemeProvider */

-  /* --background: #e3deea;;
-  --card: #ffffff;;
-  --foreground: #1f2027;;
-  --primary-cta: #627dc6;;
-  --secondary-cta: #ffffff;;
-  --accent: #627dc6;;
-  --background-accent: #627dc6;; */
+  /* --background: #d4a574;;;;;;;
+  --card: #e8c4a0;;;;;;;
+  --foreground: #2b1810;;;;;;;
+  --primary-cta: #8b5a2b;;;;;;;
+  --secondary-cta: #f5deb3;;;;;;;
+  --accent: #d4a574;;;;;;;
+  --background-accent: #c19a6b;;;;;;; */

-  --background: #e3deea;;
-  --card: #ffffff;;
-  --foreground: #1f2027;;
-  --primary-cta: #627dc6;;
-  --secondary-cta: #ffffff;;
-  --accent: #627dc6;;
-  --background-accent: #627dc6;;
+  --background: #d4a574;;;;;;;
+  --card: #e8c4a0;;;;;;;
+  --foreground: #2b1810;;;;;;;
+  --primary-cta: #8b5a2b;;;;;;;
+  --secondary-cta: #f5deb3;;;;;;;
+  --accent: #d4a574;;;;;;;
+  --background-accent: #c19a6b;;;;;;;

  /* text sizing - set by ThemeProvider */
  /* --text-2xs: clamp(0.465rem, 0.62vw, 0.62rem);
Author	SHA1	Message	Date
bender	e31abcaf2e	Update src/app/styles/variables.css	2026-02-17 12:27:49 +00:00
bender	09155f7364	Merge version_6 into main Merge version_6 into main	2026-02-17 12:12:41 +00:00
bender	7b62faaf5b	Update src/app/styles/variables.css	2026-02-17 12:12:36 +00:00
bender	5995b382c4	Update src/app/page.tsx	2026-02-17 12:12:36 +00:00
bender	01ef266712	Update src/app/layout.tsx	2026-02-17 12:12:35 +00:00
bender	d42121281f	Merge version_5 into main Merge version_5 into main	2026-02-17 12:09:05 +00:00
bender	d8c016edfd	Update src/app/page.tsx	2026-02-17 12:09:00 +00:00
bender	44e7dffcdf	Update src/app/styles/variables.css	2026-02-17 11:56:09 +00:00
bender	eaecd8daab	Merge version_3 into main Merge version_3 into main	2026-02-17 11:45:09 +00:00
bender	8b1c8d0f18	Update theme colors	2026-02-17 11:45:03 +00:00
bender	5179e62430	Merge version_3 into main Merge version_3 into main	2026-02-17 11:44:51 +00:00
bender	8fb006543f	Update theme colors	2026-02-17 11:44:45 +00:00
bender	b19c105024	Merge version_3 into main Merge version_3 into main	2026-02-17 11:44:42 +00:00
bender	ea9e32ad6e	Update theme colors	2026-02-17 11:44:36 +00:00
bender	b3eb67652d	Merge version_3 into main Merge version_3 into main	2026-02-17 11:43:33 +00:00
bender	1dcf8e2404	Update theme colors	2026-02-17 11:43:27 +00:00
bender	0338f892b9	Merge version_3 into main Merge version_3 into main	2026-02-17 11:43:19 +00:00
bender	8ef68b476b	Update theme colors	2026-02-17 11:43:13 +00:00
bender	8b6898e3e4	Merge version_3 into main Merge version_3 into main	2026-02-17 11:40:49 +00:00
bender	2d49fe3d58	Update src/app/styles/variables.css	2026-02-17 11:40:45 +00:00
bender	cd42473794	Update src/app/shop/page.tsx	2026-02-17 11:40:44 +00:00
bender	700dc72d46	Update src/app/shop/[id]/page.tsx	2026-02-17 11:40:44 +00:00
bender	0b46c80f8e	Update src/app/page.tsx	2026-02-17 11:40:43 +00:00
bender	873ab6e92e	Update src/app/layout.tsx	2026-02-17 11:40:42 +00:00
bender	b2a30ae7c5	Update src/app/blog/page.tsx	2026-02-17 11:40:41 +00:00
bender	c9572718d8	Merge version_2 into main Merge version_2 into main	2026-02-17 11:36:33 +00:00
bender	a1b8bf88ca	Update src/app/shop/page.tsx	2026-02-17 11:36:28 +00:00
bender	97a4cdffb2	Update src/app/shop/[id]/page.tsx	2026-02-17 11:36:28 +00:00
bender	06d49185a9	Update src/app/page.tsx	2026-02-17 11:36:27 +00:00
bender	ad8e0ec255	Update src/app/blog/page.tsx	2026-02-17 11:36:26 +00:00
bender	ab28e561cf	Merge version_1 into main Merge version_1 into main	2026-02-17 11:32:17 +00:00
bender	a41a6086f9	Merge version_1 into main Merge version_1 into main	2026-02-17 11:29:03 +00:00