first commit

components/layout/Layout.tsx

@@ -0,0 +1,11 @@
+import TabNavigation from "./TabNavigation";
+
+export default function Layout({ children }: { children: React.ReactNode }) {
+  return (
+    <div className="min-h-screen bg-background pb-16">
+      {children}
+      <TabNavigation />
+    </div>
+  );
+}
+

components/layout/TabNavigation.tsx

@@ -0,0 +1,60 @@
+"use client";
+
+import Link from "next/link";
+import { usePathname } from "next/navigation";
+import { Home, MapPin, Info, Waves } from "lucide-react";
+import { cn } from "@/lib/utils";
+
+const tabs = [
+  {
+    name: "Accueil",
+    href: "/accueil",
+    icon: Home,
+  },
+  {
+    name: "Explorer",
+    href: "/explorer",
+    icon: MapPin,
+  },
+  {
+    name: "Mana",
+    href: "/mana-tracker",
+    icon: Waves,
+  },
+  {
+    name: "Infos",
+    href: "/infos",
+    icon: Info,
+  },
+];
+
+export default function TabNavigation() {
+  const pathname = usePathname();
+
+  return (
+    <nav className="fixed bottom-0 left-0 right-0 z-50 bg-white border-t border-gray-200 shadow-lg">
+      <div className="flex items-center justify-around h-16 px-2">
+        {tabs.map((tab) => {
+          const Icon = tab.icon;
+          const isActive = pathname === tab.href;
+          return (
+            <Link
+              key={tab.href}
+              href={tab.href}
+              className={cn(
+                "flex flex-col items-center justify-center gap-1 flex-1 h-full rounded-xl transition-colors",
+                isActive
+                  ? "text-primary bg-secondary"
+                  : "text-gray-500 hover:text-primary hover:bg-gray-50"
+              )}
+            >
+              <Icon className="h-6 w-6" />
+              <span className="text-xs font-medium">{tab.name}</span>
+            </Link>
+          );
+        })}
+      </div>
+    </nav>
+  );
+}
+