Update src/app/about/page.tsx

Merge version_2 into main

src/app/about/page.tsx

@@ -0,0 +1,164 @@
+"use client";
+
+import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
+import NavbarLayoutFloatingOverlay from '@/components/navbar/NavbarLayoutFloatingOverlay/NavbarLayoutFloatingOverlay';
+import MetricSplitMediaAbout from '@/components/sections/about/MetricSplitMediaAbout';
+import FeatureHoverPattern from '@/components/sections/feature/featureHoverPattern/FeatureHoverPattern';
+import TeamCardFive from '@/components/sections/team/TeamCardFive';
+import ContactCTA from '@/components/sections/contact/ContactCTA';
+import FooterBaseReveal from '@/components/sections/footer/FooterBaseReveal';
+import { Sparkles, Users, Heart, Award } from "lucide-react";
+
+export default function AboutPage() {
+  return (
+    <ThemeProvider
+      defaultButtonVariant="hover-bubble"
+      defaultTextAnimation="entrance-slide"
+      borderRadius="pill"
+      contentWidth="small"
+      sizing="largeSmallSizeMediumTitles"
+      background="floatingGradient"
+      cardStyle="inset"
+      primaryButtonStyle="radial-glow"
+      secondaryButtonStyle="layered"
+      headingFontWeight="normal"
+    >
+      <div id="nav" data-section="nav">
+        <NavbarLayoutFloatingOverlay
+          brandName="Koliba Ukrainska"
+          navItems={[
+            { name: "Philosophy", id: "hero" },
+            { name: "Menu", id: "menu" },
+            { name: "Banquets", id: "banquets" },
+            { name: "Delivery", id: "delivery" },
+            { name: "About Us", id: "about" },
+            { name: "Contacts", id: "contact" }
+          ]}
+          button={{ text: "Reserve Table", href: "#contact" }}
+          buttonClassName="rounded-full px-6 py-2"
+          className="fixed top-6 left-6 right-6 z-50"
+        />
+      </div>
+
+      <div id="hero" data-section="hero">
+        <MetricSplitMediaAbout
+          tag="Our Heritage"
+          tagIcon={Sparkles}
+          title="Ukrainian Traditions"
+          description="For over two decades, Koliba Ukrainska has been a beacon of Ukrainian culture and tradition. Our family-owned restaurant celebrates the warmth, generosity, and authentic flavors that define our heritage. Every gathering here is more than just a meal—it's a celebration of family, community, and the timeless traditions that connect us."
+          metrics={[
+            { value: "20+", title: "Years of Tradition" },
+            { value: "5000+", title: "Happy Celebrations" }
+          ]}
+          imageSrc="https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_32SgGlSmvaVv2SYOkECykbr8Q49/tmp/restaurant-1771515733895-84d8b845.jpg"
+          imageAlt="Traditional Ukrainian restaurant ambiance"
+          useInvertedBackground={false}
+          mediaAnimation="slide-up"
+          metricsAnimation="slide-up"
+        />
+      </div>
+
+      <div id="values" data-section="values">
+        <FeatureHoverPattern
+          title="Our Core Values"
+          description="What drives everything we do at Koliba Ukrainska"
+          tag="Principles"
+          features={[
+            {
+              icon: Heart,
+              title: "Family First",              description: "We believe every celebration is sacred. Our spaces and services are designed to bring families together and create memories that last a lifetime.",              button: { text: "Learn More", href: "#" }
+            },
+            {
+              icon: Award,
+              title: "Authenticity",              description: "Every dish, every decoration, every detail reflects our commitment to preserving true Ukrainian traditions and cultural heritage.",              button: { text: "Explore", href: "#" }
+            },
+            {
+              icon: Users,
+              title: "Hospitality",              description: "Warmth, genuine care, and personalized attention define our approach. We treat every guest like family and remember every celebration.",              button: { text: "Experience", href: "#" }
+            },
+            {
+              icon: Sparkles,
+              title: "Excellence",              description: "From our culinary masterpieces to our impeccable service, we strive for perfection in every aspect of your experience.",              button: { text: "Discover", href: "#" }
+            }
+          ]}
+          textboxLayout="default"
+          animationType="slide-up"
+          useInvertedBackground={true}
+        />
+      </div>
+
+      <div id="team" data-section="team">
+        <TeamCardFive
+          team={[
+            {
+              id: "1",              name: "Mariya Kovalenko",              role: "Owner & Founder",              imageSrc: "https://img.b2bpic.net/free-photo/beautiful-girl-smiling-happy-outdoor_181624-57627.jpg"
+            },
+            {
+              id: "2",              name: "Ivan Petrenko",              role: "Head Chef",              imageSrc: "https://img.b2bpic.net/free-photo/portrait-man-with-big-smile_181624-25971.jpg"
+            },
+            {
+              id: "3",              name: "Olena Shevchenko",              role: "Event Manager",              imageSrc: "https://img.b2bpic.net/free-photo/portrait-young-woman-confident-smile_181624-24921.jpg"
+            },
+            {
+              id: "4",              name: "Dmytro Rusnak",              role: "sommelier & Beverage Director",              imageSrc: "https://img.b2bpic.net/free-photo/man-with-smile-looking-camera_181624-18705.jpg"
+            }
+          ]}
+          animationType="slide-up"
+          title="Meet Our Team"
+          description="Passionate professionals dedicated to creating unforgettable Ukrainian celebrations"
+          tag="Our People"
+          tagIcon={Users}
+          textboxLayout="default"
+          useInvertedBackground={false}
+        />
+      </div>
+
+      <div id="cta" data-section="cta">
+        <ContactCTA
+          tag="Ready to Celebrate?"
+          tagIcon={Heart}
+          title="Plan Your Perfect Ukrainian Celebration"
+          description="Whether it's a wedding, corporate event, family gathering, or intimate dinner, Koliba Ukrainska is the perfect place to create memories. Let our team help bring your vision to life with authentic tradition and heartfelt hospitality."
+          buttons={[
+            { text: "Book Your Event", href: "#contact" },
+            { text: "Explore Venues", href: "/" }
+          ]}
+          background={{ variant: "radial-gradient" }}
+          useInvertedBackground={false}
+        />
+      </div>
+
+      <div id="footer" data-section="footer">
+        <FooterBaseReveal
+          columns={[
+            {
+              title: "Restaurant",              items: [
+                { label: "Philosophy", href: "/about" },
+                { label: "Menu", href: "/#menu" },
+                { label: "Banquets", href: "/#banquets" },
+                { label: "Delivery", href: "/#delivery" }
+              ]
+            },
+            {
+              title: "Contact Info",              items: [
+                { label: "Phone: +38 (050) 123-45-67", href: "tel:+380501234567" },
+                { label: "Hours: Mon-Sun 12:00-23:00", href: "#" },
+                { label: "Address: Kyiv, Ukraine", href: "#" },
+                { label: "Email: info@koliba.ua", href: "mailto:info@koliba.ua" }
+              ]
+            },
+            {
+              title: "Follow Us",              items: [
+                { label: "Facebook", href: "https://facebook.com" },
+                { label: "Instagram", href: "https://instagram.com" },
+                { label: "TikTok", href: "https://tiktok.com" },
+                { label: "YouTube", href: "https://youtube.com" }
+              ]
+            }
+          ]}
+          copyrightText="© 2025 Koliba Ukrainska | Family-Owned Ukrainian Restaurant"
+        />
+      </div>
+    </ThemeProvider>
+  );
+}

src/app/blog/page.tsx

@@ -28,11 +28,12 @@ export default function BlogPage() {
                     <NavbarLayoutFloatingOverlay
                         brandName="Koliba Ukrainska"
                         navItems={[
-                            { name: "Philosophy", id: "about" },
+                            { name: "Philosophy", id: "#about" },
-                            { name: "Menu", id: "menu" },
+                            { name: "Menu", id: "#menu" },
-                            { name: "Banquets", id: "banquets" },
+                            { name: "Banquets", id: "#banquets" },
-                            { name: "Delivery", id: "delivery" },
+                            { name: "Delivery", id: "#delivery" },
-                            { name: "Contacts", id: "contact" }
+                            { name: "About Us", id: "/about" },
+                            { name: "Contacts", id: "#contact" }
                         ]}
                         button={{ text: "Reserve Table", href: "#contact" }}
                         buttonClassName="rounded-full px-6 py-2"
@@ -64,10 +65,10 @@ export default function BlogPage() {
                         columns={[
                             {
                                 title: "Restaurant",                                items: [
-                                    { label: "Philosophy", href: "#about" },
+                                    { label: "Philosophy", href: "/about" },
-                                    { label: "Menu", href: "#menu" },
+                                    { label: "Menu", href: "/#menu" },
-                                    { label: "Banquets", href: "#banquets" },
+                                    { label: "Banquets", href: "/#banquets" },
-                                    { label: "Delivery", href: "#delivery" }
+                                    { label: "Delivery", href: "/#delivery" }
                                 ]
                             },
                             {
@@ -93,4 +94,4 @@ export default function BlogPage() {
             </ReactLenis>
         </ThemeProvider>
     );
-}
+}

src/app/layout.tsx

@@ -77,7 +77,9 @@ export default function RootLayout({
     '  background-color: #4d96ff05 !important;' +
     '}' +
     'img.webild-hover,' +
-    'img.webild-selected {' +
+    'img.webild-selected,' +
+    'video.webild-hover,' +
+    'video.webild-selected {' +
     '  outline-offset: 2px !important;' +
     '}' +
     '.webild-element-type-label {' +
@@ -149,6 +151,10 @@ export default function RootLayout({
     return 'Image';
   }
 
+  if (tagName === 'video') {
+    return 'Video';
+  }
+
   const backgroundImage = computedStyle.backgroundImage;
   if (backgroundImage && backgroundImage !== 'none') {
     const urlMatch = backgroundImage.match(/url(['"]?([^'")]+)['"]?)/);
@@ -231,6 +237,38 @@ export default function RootLayout({
     return url;
   };
 
+  const getMediaTypeFromUrl = (url) => {
+    const videoExts = ['.mp4', '.webm', '.ogg', '.mov', '.avi', '.mkv', '.m4v', '.wmv'];
+    const imageExts = ['.jpg', '.jpeg', '.png', '.gif', '.webp', '.svg', '.bmp', '.ico', '.tiff', '.avif'];
+    try {
+      const pathname = new URL(url).pathname.toLowerCase();
+      if (videoExts.some(function(ext) { return pathname.endsWith(ext); })) return 'video';
+      if (imageExts.some(function(ext) { return pathname.endsWith(ext); })) return 'image';
+    } catch(e) {}
+    return 'unknown';
+  };
+
+  const swapMediaElement = (oldEl, newTag, newSrc) => {
+    const newEl = document.createElement(newTag);
+    Array.from(oldEl.attributes).forEach(function(attr) {
+      if (attr.name !== 'src' && attr.name !== 'alt' && attr.name !== 'srcset' && attr.name !== 'autoplay' && attr.name !== 'loop' && attr.name !== 'muted' && attr.name !== 'playsinline') {
+        try { newEl.setAttribute(attr.name, attr.value); } catch(e) {}
+      }
+    });
+    newEl.style.cssText = oldEl.style.cssText;
+    if (newTag === 'video') {
+      newEl.setAttribute('autoplay', '');
+      newEl.setAttribute('loop', '');
+      newEl.setAttribute('muted', '');
+      newEl.setAttribute('playsinline', '');
+    }
+    newEl.src = newSrc;
+    if (oldEl.parentNode) {
+      oldEl.parentNode.replaceChild(newEl, oldEl);
+    }
+    return newEl;
+  };
+
   const getElementInfo = (element, assignId = false) => {
     const rect = element.getBoundingClientRect();
     const tagName = element.tagName.toLowerCase();
@@ -273,7 +311,18 @@ export default function RootLayout({
         isBackground: false
       };
     }
-    
+
+    if (tagName === 'video') {
+      const rawSrc = element.src || element.currentSrc || (element.querySelector('source') && element.querySelector('source').src) || '';
+      const resolvedSrc = extractOriginalUrl(rawSrc);
+      info.imageData = {
+        src: resolvedSrc,
+        alt: element.getAttribute('aria-label') || undefined,
+        isBackground: false,
+        isVideo: true
+      };
+    }
+
     const computedStyle = window.getComputedStyle(element);
     const backgroundImage = computedStyle.backgroundImage;
     if (backgroundImage && backgroundImage !== 'none') {
@@ -321,7 +370,8 @@ export default function RootLayout({
     const tagName = element.tagName?.toLowerCase();
     if (invalidElements.includes(tagName)) return false;
     const isImage = tagName === 'img';
-    if (isImage) return true;
+    const isVideo = tagName === 'video';
+    if (isImage || isVideo) return true;
     const hasInnerHTML = element.innerHTML && element.innerHTML.trim().length > 0;
     const hasTextContent = element.textContent && element.textContent.trim().length > 0;
     const hasChildren = element.children && element.children.length > 0;
@@ -361,7 +411,7 @@ export default function RootLayout({
         node.nodeType === Node.TEXT_NODE && node.textContent && node.textContent.trim().length > 0
       );
 
-      const hasImages = element.tagName === 'IMG' || computedStyle.backgroundImage !== 'none' || element.querySelector('img');
+      const hasImages = element.tagName === 'IMG' || element.tagName === 'VIDEO' || computedStyle.backgroundImage !== 'none' || element.querySelector('img') || element.querySelector('video');
       const isInteractive = ['BUTTON', 'A', 'INPUT', 'SELECT', 'TEXTAREA'].includes(element.tagName);
       const hasFewChildren = element.children.length <= 3;
       const area = rect.width * rect.height;
@@ -1042,11 +1092,22 @@ export default function RootLayout({
                   updateButtonText(element, change.oldValue);
                 }
               } else if (change.type === 'replaceImage') {
-                const isBackground = element.tagName.toLowerCase() !== 'img';
+                const revertTag = element.tagName.toLowerCase();
+                const isBackground = revertTag !== 'img' && revertTag !== 'video';
                 if (isBackground) {
                   element.style.backgroundImage = change.oldValue ? 'url(' + change.oldValue + ')' : '';
                 } else {
-                  element.src = change.oldValue;
+                  const oldMediaType = getMediaTypeFromUrl(change.oldValue);
+                  if (revertTag === 'video' && oldMediaType === 'image') {
+                    swapMediaElement(element, 'img', change.oldValue);
+                  } else if (revertTag === 'img' && oldMediaType === 'video') {
+                    swapMediaElement(element, 'video', change.oldValue);
+                  } else if (revertTag === 'video') {
+                    element.src = change.oldValue;
+                    element.load();
+                  } else {
+                    element.src = change.oldValue;
+                  }
                 }
               }
             } catch (err) {
@@ -1146,7 +1207,7 @@ export default function RootLayout({
     if (!isActive) return;
 
     if (e.data.type === 'webild-replace-image') {
-      const { selector, newSrc, isBackground } = e.data.data;
+      const { selector, newSrc, isBackground, allowMediaTypeSwap } = e.data.data;
       let element = null;
 
       try {
@@ -1177,7 +1238,32 @@ export default function RootLayout({
           replaced = true;
         } else if (element.tagName.toLowerCase() === 'img') {
           oldValue = element.src;
-          element.src = newSrc;
+          const newMediaType = getMediaTypeFromUrl(newSrc);
+          if (newMediaType === 'video' && allowMediaTypeSwap) {
+            const swapped = swapMediaElement(element, 'video', newSrc);
+            if (selectedElement === element) selectedElement = swapped;
+            element = swapped;
+          } else {
+            element.src = newSrc;
+          }
+          replaced = true;
+        } else if (element.tagName.toLowerCase() === 'video') {
+          oldValue = element.src || element.currentSrc || '';
+          const newMediaType = getMediaTypeFromUrl(newSrc);
+          const sources = element.querySelectorAll('source');
+          if (newMediaType === 'image' && allowMediaTypeSwap) {
+            const swapped = swapMediaElement(element, 'img', newSrc);
+            if (selectedElement === element) selectedElement = swapped;
+            element = swapped;
+          } else {
+            if (sources.length > 0) {
+              sources.forEach(function(source) { source.src = newSrc; });
+              element.load();
+            } else {
+              element.src = newSrc;
+              element.load();
+            }
+          }
           replaced = true;
         } else {
           const hasBackgroundImage = window.getComputedStyle(element).backgroundImage !== 'none';
@@ -1315,4 +1401,4 @@ export default function RootLayout({
       </ServiceWrapper>
     </html>
   );
-}
+}

src/app/page.tsx

@@ -1,4 +1,4 @@
-"use client"
+"use client";
 
 import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
 import NavbarLayoutFloatingOverlay from '@/components/navbar/NavbarLayoutFloatingOverlay/NavbarLayoutFloatingOverlay';
@@ -32,6 +32,7 @@ export default function LandingPage() {
             { name: "Menu", id: "menu" },
             { name: "Banquets", id: "banquets" },
             { name: "Delivery", id: "delivery" },
+            { name: "About Us", id: "/about" },
             { name: "Contacts", id: "contact" }
           ]}
           button={{ text: "Reserve Table", href: "#contact" }}
@@ -62,7 +63,7 @@ export default function LandingPage() {
           title="Our Philosophy"
           description="Koliba Ukrainska celebrates Ukrainian traditions through authentic family hospitality. Every detail—from hand-crafted wooden interiors to traditional recipes—honors our cultural heritage. We believe dining is a family affair, and our custom-designed spaces welcome celebrations of all kinds."
           tag="About Us"
-          imageSrc="https://img.b2bpic.net/free-photo/full-shot-woman-getting-warmer-by-fire_23-2149172517.jpg"
+          imageSrc="https://img.b2bpic.net/free-photo/full-shot-woman-getting-warmer-by-fire_23-2149172517.jpg?_wi=1"
           imageAlt="Traditional Ukrainian restaurant interior"
           buttons={[{ text: "Discover More", href: "#banquets" }]}
           useInvertedBackground={false}
@@ -134,27 +135,27 @@ export default function LandingPage() {
             },
             {
               id: "7",              brand: "Intimate Gatherings",              name: "Cottage 1",              price: "8-15 guests",              rating: 5,
-              reviewCount: "Rustic Charm",              imageSrc: "https://img.b2bpic.net/free-photo/wedding-photography-southern-cross-guest-ranch-madison-ga_181624-10722.jpg",              imageAlt: "Traditional Ukrainian cottage"
+              reviewCount: "Rustic Charm",              imageSrc: "https://img.b2bpic.net/free-photo/wedding-photography-southern-cross-guest-ranch-madison-ga_181624-10722.jpg?_wi=1",              imageAlt: "Traditional Ukrainian cottage"
             },
             {
               id: "8",              brand: "Intimate Gatherings",              name: "Cottage 2",              price: "8-15 guests",              rating: 5,
-              reviewCount: "Rustic Charm",              imageSrc: "https://img.b2bpic.net/free-photo/wedding-photography-southern-cross-guest-ranch-madison-ga_181624-10722.jpg",              imageAlt: "Traditional Ukrainian cottage"
+              reviewCount: "Rustic Charm",              imageSrc: "https://img.b2bpic.net/free-photo/wedding-photography-southern-cross-guest-ranch-madison-ga_181624-10722.jpg?_wi=2",              imageAlt: "Traditional Ukrainian cottage"
             },
             {
               id: "9",              brand: "Intimate Gatherings",              name: "Cottage 3",              price: "8-15 guests",              rating: 5,
-              reviewCount: "Rustic Charm",              imageSrc: "https://img.b2bpic.net/free-photo/wedding-photography-southern-cross-guest-ranch-madison-ga_181624-10722.jpg",              imageAlt: "Traditional Ukrainian cottage"
+              reviewCount: "Rustic Charm",              imageSrc: "https://img.b2bpic.net/free-photo/wedding-photography-southern-cross-guest-ranch-madison-ga_181624-10722.jpg?_wi=3",              imageAlt: "Traditional Ukrainian cottage"
             },
             {
               id: "10",              brand: "Intimate Gatherings",              name: "Cottage 4",              price: "8-15 guests",              rating: 5,
-              reviewCount: "Rustic Charm",              imageSrc: "https://img.b2bpic.net/free-photo/wedding-photography-southern-cross-guest-ranch-madison-ga_181624-10722.jpg",              imageAlt: "Traditional Ukrainian cottage"
+              reviewCount: "Rustic Charm",              imageSrc: "https://img.b2bpic.net/free-photo/wedding-photography-southern-cross-guest-ranch-madison-ga_181624-10722.jpg?_wi=4",              imageAlt: "Traditional Ukrainian cottage"
             },
             {
               id: "11",              brand: "Intimate Gatherings",              name: "Cottage 5",              price: "8-15 guests",              rating: 5,
-              reviewCount: "Rustic Charm",              imageSrc: "https://img.b2bpic.net/free-photo/wedding-photography-southern-cross-guest-ranch-madison-ga_181624-10722.jpg",              imageAlt: "Traditional Ukrainian cottage"
+              reviewCount: "Rustic Charm",              imageSrc: "https://img.b2bpic.net/free-photo/wedding-photography-southern-cross-guest-ranch-madison-ga_181624-10722.jpg?_wi=5",              imageAlt: "Traditional Ukrainian cottage"
             },
             {
               id: "12",              brand: "Intimate Gatherings",              name: "Cottage 6",              price: "8-15 guests",              rating: 5,
-              reviewCount: "Rustic Charm",              imageSrc: "https://img.b2bpic.net/free-photo/wedding-photography-southern-cross-guest-ranch-madison-ga_181624-10722.jpg",              imageAlt: "Traditional Ukrainian cottage"
+              reviewCount: "Rustic Charm",              imageSrc: "https://img.b2bpic.net/free-photo/wedding-photography-southern-cross-guest-ranch-madison-ga_181624-10722.jpg?_wi=6",              imageAlt: "Traditional Ukrainian cottage"
             }
           ]}
           carouselMode="auto"
@@ -225,7 +226,8 @@ export default function LandingPage() {
                 { label: "Philosophy", href: "#about" },
                 { label: "Menu", href: "#menu" },
                 { label: "Banquets", href: "#banquets" },
-                { label: "Delivery", href: "#delivery" }
+                { label: "Delivery", href: "#delivery" },
+                { label: "About Us", href: "/about" }
               ]
             },
             {
@@ -250,4 +252,4 @@ export default function LandingPage() {
       </div>
     </ThemeProvider>
   );
-}
+}

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

@@ -85,11 +85,12 @@ export default function ProductPage({ params }: ProductPageProps) {
                         <NavbarLayoutFloatingOverlay
                             brandName="Koliba Ukrainska"
                             navItems={[
-                                { name: "Philosophy", id: "about" },
+                                { name: "Philosophy", id: "#about" },
-                                { name: "Menu", id: "menu" },
+                                { name: "Menu", id: "#menu" },
-                                { name: "Banquets", id: "banquets" },
+                                { name: "Banquets", id: "#banquets" },
-                                { name: "Delivery", id: "delivery" },
+                                { name: "Delivery", id: "#delivery" },
-                                { name: "Contacts", id: "contact" }
+                                { name: "About Us", id: "/about" },
+                                { name: "Contacts", id: "#contact" }
                             ]}
                             button={{ text: "Cart", onClick: () => setCartOpen(true) }}
                             buttonClassName="rounded-full px-6 py-2"
@@ -102,7 +103,7 @@ export default function ProductPage({ params }: ProductPageProps) {
                     <div id="footer" data-section="footer">
                         <FooterBaseReveal
                             columns={[
-                                {"title":"Restaurant","items":[{"label":"Philosophy","href":"#about"},{"label":"Menu","href":"#menu"},{"label":"Banquets","href":"#banquets"},{"label":"Delivery","href":"#delivery"}]},
+                                {"title":"Restaurant","items":[{"label":"Philosophy","href":"/about"},{"label":"Menu","href":"/#menu"},{"label":"Banquets","href":"/#banquets"},{"label":"Delivery","href":"/#delivery"}]},
                                 {"title":"Contact Info","items":[{"label":"Phone: +38 (050) 123-45-67","href":"tel:+380501234567"},{"label":"Hours: Mon-Sun 12:00-23:00","href":"#"},{"label":"Address: Kyiv, Ukraine","href":"#"},{"label":"Email: info@koliba.ua","href":"mailto:info@koliba.ua"}]},
                                 {"title":"Follow Us","items":[{"label":"Facebook","href":"https://facebook.com"},{"label":"Instagram","href":"https://instagram.com"},{"label":"TikTok","href":"https://tiktok.com"},{"label":"YouTube","href":"https://youtube.com"}]}
                             ]}
@@ -133,11 +134,12 @@ export default function ProductPage({ params }: ProductPageProps) {
                         <NavbarLayoutFloatingOverlay
                             brandName="Koliba Ukrainska"
                             navItems={[
-                                { name: "Philosophy", id: "about" },
+                                { name: "Philosophy", id: "#about" },
-                                { name: "Menu", id: "menu" },
+                                { name: "Menu", id: "#menu" },
-                                { name: "Banquets", id: "banquets" },
+                                { name: "Banquets", id: "#banquets" },
-                                { name: "Delivery", id: "delivery" },
+                                { name: "Delivery", id: "#delivery" },
-                                { name: "Contacts", id: "contact" }
+                                { name: "About Us", id: "/about" },
+                                { name: "Contacts", id: "#contact" }
                             ]}
                             button={{ text: "Cart", onClick: () => setCartOpen(true) }}
                             buttonClassName="rounded-full px-6 py-2"
@@ -158,7 +160,7 @@ export default function ProductPage({ params }: ProductPageProps) {
                     <div id="footer" data-section="footer">
                         <FooterBaseReveal
                             columns={[
-                                {"title":"Restaurant","items":[{"label":"Philosophy","href":"#about"},{"label":"Menu","href":"#menu"},{"label":"Banquets","href":"#banquets"},{"label":"Delivery","href":"#delivery"}]},
+                                {"title":"Restaurant","items":[{"label":"Philosophy","href":"/about"},{"label":"Menu","href":"/#menu"},{"label":"Banquets","href":"/#banquets"},{"label":"Delivery","href":"/#delivery"}]},
                                 {"title":"Contact Info","items":[{"label":"Phone: +38 (050) 123-45-67","href":"tel:+380501234567"},{"label":"Hours: Mon-Sun 12:00-23:00","href":"#"},{"label":"Address: Kyiv, Ukraine","href":"#"},{"label":"Email: info@koliba.ua","href":"mailto:info@koliba.ua"}]},
                                 {"title":"Follow Us","items":[{"label":"Facebook","href":"https://facebook.com"},{"label":"Instagram","href":"https://instagram.com"},{"label":"TikTok","href":"https://tiktok.com"},{"label":"YouTube","href":"https://youtube.com"}]}
                             ]}
@@ -188,11 +190,12 @@ export default function ProductPage({ params }: ProductPageProps) {
                     <NavbarLayoutFloatingOverlay
                         brandName="Koliba Ukrainska"
                         navItems={[
-                            { name: "Philosophy", id: "about" },
+                            { name: "Philosophy", id: "#about" },
-                            { name: "Menu", id: "menu" },
+                            { name: "Menu", id: "#menu" },
-                            { name: "Banquets", id: "banquets" },
+                            { name: "Banquets", id: "#banquets" },
-                            { name: "Delivery", id: "delivery" },
+                            { name: "Delivery", id: "#delivery" },
-                            { name: "Contacts", id: "contact" }
+                            { name: "About Us", id: "/about" },
+                            { name: "Contacts", id: "#contact" }
                         ]}
                         button={{ text: "Cart", onClick: () => setCartOpen(true) }}
                         buttonClassName="rounded-full px-6 py-2"
@@ -238,7 +241,7 @@ export default function ProductPage({ params }: ProductPageProps) {
                 <div id="footer" data-section="footer">
                     <FooterBaseReveal
                         columns={[
-                            {"title":"Restaurant","items":[{"label":"Philosophy","href":"#about"},{"label":"Menu","href":"#menu"},{"label":"Banquets","href":"#banquets"},{"label":"Delivery","href":"#delivery"}]},
+                            {"title":"Restaurant","items":[{"label":"Philosophy","href":"/about"},{"label":"Menu","href":"/#menu"},{"label":"Banquets","href":"/#banquets"},{"label":"Delivery","href":"/#delivery"}]},
                             {"title":"Contact Info","items":[{"label":"Phone: +38 (050) 123-45-67","href":"tel:+380501234567"},{"label":"Hours: Mon-Sun 12:00-23:00","href":"#"},{"label":"Address: Kyiv, Ukraine","href":"#"},{"label":"Email: info@koliba.ua","href":"mailto:info@koliba.ua"}]},
                             {"title":"Follow Us","items":[{"label":"Facebook","href":"https://facebook.com"},{"label":"Instagram","href":"https://instagram.com"},{"label":"TikTok","href":"https://tiktok.com"},{"label":"YouTube","href":"https://youtube.com"}]}
                         ]}
@@ -248,4 +251,4 @@ export default function ProductPage({ params }: ProductPageProps) {
             </ReactLenis>
         </ThemeProvider>
     );
-}
+}

src/app/shop/page.tsx

@@ -38,11 +38,12 @@ export default function ShopPage() {
                         <NavbarLayoutFloatingOverlay
                             brandName="Koliba Ukrainska"
                             navItems={[
-                                { name: "Philosophy", id: "about" },
+                                { name: "Philosophy", id: "#about" },
-                                { name: "Menu", id: "menu" },
+                                { name: "Menu", id: "#menu" },
-                                { name: "Banquets", id: "banquets" },
+                                { name: "Banquets", id: "#banquets" },
-                                { name: "Delivery", id: "delivery" },
+                                { name: "Delivery", id: "#delivery" },
-                                { name: "Contacts", id: "contact" }
+                                { name: "About Us", id: "/about" },
+                                { name: "Contacts", id: "#contact" }
                             ]}
                             button={{ text: "Cart", onClick: () => setCartOpen(true) }}
                             buttonClassName="rounded-full px-6 py-2"
@@ -55,7 +56,7 @@ export default function ShopPage() {
                     <div id="footer" data-section="footer">
                         <FooterBaseReveal
                             columns={[
-                                {"title":"Restaurant","items":[{"label":"Philosophy","href":"#about"},{"label":"Menu","href":"#menu"},{"label":"Banquets","href":"#banquets"},{"label":"Delivery","href":"#delivery"}]},
+                                {"title":"Restaurant","items":[{"label":"Philosophy","href":"/about"},{"label":"Menu","href":"/#menu"},{"label":"Banquets","href":"/#banquets"},{"label":"Delivery","href":"/#delivery"}]},
                                 {"title":"Contact Info","items":[{"label":"Phone: +38 (050) 123-45-67","href":"tel:+380501234567"},{"label":"Hours: Mon-Sun 12:00-23:00","href":"#"},{"label":"Address: Kyiv, Ukraine","href":"#"},{"label":"Email: info@koliba.ua","href":"mailto:info@koliba.ua"}]},
                                 {"title":"Follow Us","items":[{"label":"Facebook","href":"https://facebook.com"},{"label":"Instagram","href":"https://instagram.com"},{"label":"TikTok","href":"https://tiktok.com"},{"label":"YouTube","href":"https://youtube.com"}]}
                             ]}
@@ -85,11 +86,12 @@ export default function ShopPage() {
                     <NavbarLayoutFloatingOverlay
                         brandName="Koliba Ukrainska"
                         navItems={[
-                            { name: "Philosophy", id: "about" },
+                            { name: "Philosophy", id: "#about" },
-                            { name: "Menu", id: "menu" },
+                            { name: "Menu", id: "#menu" },
-                            { name: "Banquets", id: "banquets" },
+                            { name: "Banquets", id: "#banquets" },
-                            { name: "Delivery", id: "delivery" },
+                            { name: "Delivery", id: "#delivery" },
-                            { name: "Contacts", id: "contact" }
+                            { name: "About Us", id: "/about" },
+                            { name: "Contacts", id: "#contact" }
                         ]}
                         button={{ text: "Cart", onClick: () => setCartOpen(true) }}
                         buttonClassName="rounded-full px-6 py-2"
@@ -110,7 +112,7 @@ export default function ShopPage() {
                 <div id="footer" data-section="footer">
                     <FooterBaseReveal
                         columns={[
-                            {"title":"Restaurant","items":[{"label":"Philosophy","href":"#about"},{"label":"Menu","href":"#menu"},{"label":"Banquets","href":"#banquets"},{"label":"Delivery","href":"#delivery"}]},
+                            {"title":"Restaurant","items":[{"label":"Philosophy","href":"/about"},{"label":"Menu","href":"/#menu"},{"label":"Banquets","href":"/#banquets"},{"label":"Delivery","href":"/#delivery"}]},
                             {"title":"Contact Info","items":[{"label":"Phone: +38 (050) 123-45-67","href":"tel:+380501234567"},{"label":"Hours: Mon-Sun 12:00-23:00","href":"#"},{"label":"Address: Kyiv, Ukraine","href":"#"},{"label":"Email: info@koliba.ua","href":"mailto:info@koliba.ua"}]},
                             {"title":"Follow Us","items":[{"label":"Facebook","href":"https://facebook.com"},{"label":"Instagram","href":"https://instagram.com"},{"label":"TikTok","href":"https://tiktok.com"},{"label":"YouTube","href":"https://youtube.com"}]}
                         ]}
@@ -120,4 +122,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: #010912;;;
-  --card: #ffffff;;
+  --card: #152840;;;
-  --foreground: #27231f;;
+  --foreground: #e6f0ff;;;
-  --primary-cta: #27231f;;
+  --primary-cta: #cee7ff;;;
-  --secondary-cta: #ffffff;;
+  --secondary-cta: #0e1a29;;;
-  --accent: #c68a62;;
+  --accent: #3f5c79;;;
-  --background-accent: #c68a62;; */
+  --background-accent: #004a93;;; */
 
-  --background: #e3deea;;
+  --background: #010912;;;
-  --card: #ffffff;;
+  --card: #152840;;;
-  --foreground: #27231f;;
+  --foreground: #e6f0ff;;;
-  --primary-cta: #27231f;;
+  --primary-cta: #cee7ff;;;
-  --secondary-cta: #ffffff;;
+  --secondary-cta: #0e1a29;;;
-  --accent: #c68a62;;
+  --accent: #3f5c79;;;
-  --background-accent: #c68a62;;
+  --background-accent: #004a93;;;
 
   /* text sizing - set by ThemeProvider */
   /* --text-2xs: clamp(0.465rem, 0.62vw, 0.62rem);