From d7fcd8ca7233892b08a0850a83ed09eac675088d Mon Sep 17 00:00:00 2001
From: kudinDmitriyUp <kudin.dmitriy.up@gmail.com>
Date: Mon, 22 Jun 2026 11:35:46 +0000
Subject: [PATCH] Bob AI: Replaced navigation bar with a tabbed navigation
 layout

---
 src/components/Layout.tsx | 70 ++++++++++++++++++++++++++++++++++-----
 1 file changed, 61 insertions(+), 9 deletions(-)

diff --git a/src/components/Layout.tsx b/src/components/Layout.tsx
index ebe0ae6..41343ca 100644
--- a/src/components/Layout.tsx
+++ b/src/components/Layout.tsx
@@ -1,11 +1,14 @@
 import FooterSimpleCard from '@/components/sections/footer/FooterSimpleCard';
-import NavbarFloatingLogo from '@/components/ui/NavbarFloatingLogo';
 import SectionErrorBoundary from "@/components/ui/SectionErrorBoundary";
 import SiteBackgroundSlot from "@/components/ui/SiteBackgroundSlot";
 import { Outlet } from 'react-router-dom';
 import { StyleProvider } from "@/components/ui/StyleProvider";
+import { useState, useEffect } from 'react';
+import { motion } from 'motion/react';
 
 export default function Layout() {
+  const [activeTab, setActiveTab] = useState("hero");
+
   const navItems = [
   {
     "name": "Home",
@@ -41,18 +44,67 @@ export default function Layout() {
   }
 ];
 
+  useEffect(() => {
+    const handleScroll = () => {
+      const sections = navItems.map(item => item.href.slice(1));
+      let current = "hero";
+      for (const section of sections) {
+        const el = document.getElementById(section);
+        if (el && window.scrollY >= el.offsetTop - 200) {
+          current = section;
+        }
+      }
+      setActiveTab(current);
+    };
+    window.addEventListener("scroll", handleScroll);
+    return () => window.removeEventListener("scroll", handleScroll);
+  }, []);
+
   return (
     <StyleProvider buttonVariant="default" siteBackground="gridDots" heroBackground="gradientBars">
       <SiteBackgroundSlot />
       <SectionErrorBoundary name="navbar">
-        <NavbarFloatingLogo
-      logo="Fourieearthworks"
-      logoImageSrc="https://storage.googleapis.com/webild/users/user_3FUQa0ZWeM3nmyILoJWMMWG8CWg/uploaded-1782127565329-9f81y6uc.png"
-      ctaButton={{
-        text: "Get Quote",
-        href: "#contact",
-      }}
-     navItems={navItems} />
+        <div className="fixed top-6 left-1/2 -translate-x-1/2 z-50 hidden md:flex items-center gap-2 p-1.5 card rounded-full shadow-lg">
+          <img src="https://storage.googleapis.com/webild/users/user_3FUQa0ZWeM3nmyILoJWMMWG8CWg/uploaded-1782127565329-9f81y6uc.png" alt="Logo" className="h-8 w-8 rounded-full object-cover ml-2" />
+          <div className="flex items-center gap-1">
+            {navItems.map(item => (
+              <button
+                key={item.name}
+                onClick={() => {
+                  setActiveTab(item.href.slice(1));
+                  document.getElementById(item.href.slice(1))?.scrollIntoView({ behavior: 'smooth' });
+                }}
+                className={`relative px-4 py-2 text-sm font-medium rounded-full transition-colors ${activeTab === item.href.slice(1) ? 'text-primary-cta-text' : 'text-foreground hover:text-accent'}`}
+              >
+                {activeTab === item.href.slice(1) && (
+                  <motion.div layoutId="nav-tab" className="absolute inset-0 bg-primary-cta rounded-full -z-10" />
+                )}
+                {item.name}
+              </button>
+            ))}
+          </div>
+        </div>
+        
+        <div className="fixed top-4 left-4 right-4 z-50 md:hidden flex items-center p-2 card rounded-2xl shadow-lg overflow-x-auto">
+          <img src="https://storage.googleapis.com/webild/users/user_3FUQa0ZWeM3nmyILoJWMMWG8CWg/uploaded-1782127565329-9f81y6uc.png" alt="Logo" className="h-8 w-8 rounded-full object-cover shrink-0 mr-4 ml-1" />
+          <div className="flex items-center gap-1 shrink-0">
+            {navItems.map(item => (
+              <button
+                key={item.name}
+                onClick={() => {
+                  setActiveTab(item.href.slice(1));
+                  document.getElementById(item.href.slice(1))?.scrollIntoView({ behavior: 'smooth' });
+                }}
+                className={`relative px-3 py-1.5 text-xs font-medium rounded-full transition-colors whitespace-nowrap ${activeTab === item.href.slice(1) ? 'text-primary-cta-text' : 'text-foreground'}`}
+              >
+                {activeTab === item.href.slice(1) && (
+                  <motion.div layoutId="nav-tab-mobile" className="absolute inset-0 bg-primary-cta rounded-full -z-10" />
+                )}
+                {item.name}
+              </button>
+            ))}
+          </div>
+        </div>
       </SectionErrorBoundary>
       <main className="flex-grow">
         <Outlet />
-- 
2.49.1