Bob AI: make the items inside of the navigation bar navigational

Merge version_6_1778169057018 into main

src/App.tsx

@@ -1,12 +1,24 @@
 import { Routes, Route } from 'react-router-dom';
 import Layout from './components/Layout';
 import HomePage from './pages/HomePage';
+import FeaturesPage from './pages/Features';
+import SolutionsPage from './pages/Solutions';
+import PricingPage from './pages/Pricing';
+import ClientsPage from './pages/Clients';
+import FaqPage from './pages/Faq';
+import MetricsPage from './pages/Metrics';
 
 export default function App() {
   return (
     <Routes>
       <Route element={<Layout />}>
         <Route path="/" element={<HomePage />} />
+        <Route path="/features" element={<FeaturesPage />} />
+        <Route path="/solutions" element={<SolutionsPage />} />
+        <Route path="/pricing" element={<PricingPage />} />
+        <Route path="/clients" element={<ClientsPage />} />
+        <Route path="/faq" element={<FaqPage />} />
+        <Route path="/metrics" element={<MetricsPage />} />
       </Route>
     </Routes>
   );

src/components/Layout.tsx

@@ -8,31 +8,31 @@ export default function Layout() {
   const navItems = [
   {
     "name": "Home",
-    "href": "#home"
+    "href": "/"
   },
   {
     "name": "Features",
-    "href": "#features"
+    "href": "/features"
   },
   {
     "name": "Solutions",
-    "href": "#solutions"
+    "href": "/solutions"
   },
   {
     "name": "Pricing",
-    "href": "#pricing"
+    "href": "/pricing"
   },
   {
     "name": "Clients",
-    "href": "#clients"
+    "href": "/clients"
   },
   {
     "name": "FAQ",
-    "href": "#faq"
+    "href": "/faq"
   },
   {
     "name": "Metrics",
-    "href": "#metrics"
+    "href": "/metrics"
   }
 ];
 

src/components/ui/NavbarFloating.tsx

@@ -3,6 +3,7 @@ import { motion, AnimatePresence } from "motion/react";
 import { Plus, ArrowUpRight } from "lucide-react";
 import { cls } from "@/lib/utils";
 import Button from "@/components/ui/Button";
+import { Link } from "react-router-dom";
 
 interface NavbarFloatingProps {
   logo: string;
@@ -10,15 +11,6 @@ interface NavbarFloatingProps {
   ctaButton: { text: string; href: string };
 }
 
-const handleNavClick = (e: React.MouseEvent<HTMLAnchorElement>, href: string, onClose?: () => void) => {
-  if (href.startsWith("#")) {
-    e.preventDefault();
-    const element = document.getElementById(href.slice(1));
-    element?.scrollIntoView({ behavior: "smooth", block: "start" });
-  }
-  onClose?.();
-};
-
 const NavbarFloating = ({ logo, navItems, ctaButton }: NavbarFloatingProps) => {
   const [menuOpen, setMenuOpen] = useState(false);
 
@@ -46,7 +38,7 @@ const NavbarFloating = ({ logo, navItems, ctaButton }: NavbarFloatingProps) => {
       </AnimatePresence>
 
       <nav className="fixed z-1000 top-5 left-1/2 -translate-x-1/2 w-content-width">
-        <div className="mx-auto w-full md:w-1/2 overflow-hidden rounded backdrop-blur-sm card">
+        <div className="mx-auto w-full md:w-1/2 overflow-hidden rounded-theme-capped bg-white/10 backdrop-blur-lg border border-white/20 shadow-lg">
           <div className="relative z-10 flex items-center justify-between gap-3 xl:gap-4 2xl:gap-5 p-3 xl:p-4 2xl:p-5">
             <a href="/" className="text-xl font-medium text-foreground">{logo}</a>
 
@@ -76,12 +68,12 @@ const NavbarFloating = ({ logo, navItems, ctaButton }: NavbarFloatingProps) => {
                 className="overflow-hidden"
               >
                 <div className="flex flex-col gap-3 xl:gap-4 2xl:gap-5 p-3 xl:p-4 2xl:p-5 pt-0 xl:pt-0 2xl:pt-0">
-                  <div className="px-3 xl:px-4 2xl:px-5 py-0 md:py-1 2xl:py-2 rounded card">
+                  <div className="px-3 xl:px-4 2xl:px-5 py-0 md:py-1 2xl:py-2 rounded-theme-capped bg-white/10">
                     {navItems.map((item, index) => (
                       <div key={item.name}>
-                        <a
-                          href={item.href}
-                          onClick={(e) => handleNavClick(e, item.href, () => setMenuOpen(false))}
+                        <Link
+                          to={item.href}
+                          onClick={() => setMenuOpen(false)}
                           className="group flex items-center justify-between py-3 w-full"
                         >
                           <span className="text-xl md:text-2xl font-medium text-foreground group-hover:ml-3 transition-[margin] duration-300">
@@ -91,7 +83,7 @@ const NavbarFloating = ({ logo, navItems, ctaButton }: NavbarFloatingProps) => {
                             className="h-(--text-xl) md:h-(--text-2xl) w-auto text-foreground group-hover:rotate-45 group-hover:mr-3 transition-all duration-300"
                             strokeWidth={2}
                           />
-                        </a>
+                        </Link>
                         {index < navItems.length - 1 && (
                           <div className="h-px bg-accent/50" />
                         )}

src/pages/Clients.tsx

@@ -0,0 +1,3 @@
+export default function ClientsPage() {
+  return <h1>Clients Page</h1>;
+}

src/pages/Faq.tsx

@@ -0,0 +1,3 @@
+export default function FaqPage() {
+  return <h1>FAQ Page</h1>;
+}

src/pages/Features.tsx

@@ -0,0 +1,3 @@
+export default function FeaturesPage() {
+  return <h1>Features Page</h1>;
+}

src/pages/Home.tsx

@@ -0,0 +1,3 @@
+export default function HomePage() {
+  return <h1>Home Page</h1>;
+}

src/pages/Metrics.tsx

@@ -0,0 +1,3 @@
+export default function MetricsPage() {
+  return <h1>Metrics Page</h1>;
+}

src/pages/Pricing.tsx

@@ -0,0 +1,3 @@
+export default function PricingPage() {
+  return <h1>Pricing Page</h1>;
+}

src/pages/Solutions.tsx

@@ -0,0 +1,3 @@
+export default function SolutionsPage() {
+  return <h1>Solutions Page</h1>;
+}