initial layout

src/components/bottom-nav.tsx

@@ -0,0 +1,33 @@
+"use client";
+
+import Link from "next/link";
+import useNavigation from "@/hook/use-navigation";
+import { Icon } from "@iconify/react";
+
+const BottomNav = () => {
+  const { isMissionsActive, isAgentsActive } = useNavigation();
+
+  return (
+    <div
+      className={`fixed bottom-0 w-full py-4 z-10 bg-zinc-100 dark:bg-zinc-950 border-t dark:border-zinc-800 border-zinc-200 shadow-lg sm:hidden`}
+    >
+      <div className="flex flex-row justify-around items-center bg-transparent w-full">
+        <Link
+          href="/missions"
+          className={`flex items-center relative ${isMissionsActive ? "opacity-100" : "opacity-25"}`}
+        >
+          <Icon icon="flat-color-icons:parallel-tasks" width="32" height="32" />
+        </Link>
+
+        <Link
+          href="/agents"
+          className={`flex items-center relative ${isAgentsActive ? "opacity-100" : "opacity-25"}`}
+        >
+          <Icon icon="streamline-emojis:robot-face-1" width="32" height="32" />
+        </Link>
+      </div>
+    </div>
+  );
+};
+
+export default BottomNav;

src/components/max-width-wrapper.tsx

@@ -0,0 +1,5 @@
+import { ReactNode } from "react";
+
+export default function MaxWidthWrapper({ children }: { children: ReactNode }) {
+  return <div className="mx-auto w-full md:pl-2.5">{children}</div>;
+}

src/components/side-nav.tsx

@@ -0,0 +1,56 @@
+"use client";
+
+import { Icon } from "@iconify/react";
+import Image from "next/image";
+import Link from "next/link";
+import useNavigation from "@/hook/use-navigation";
+
+const SideNav = () => {
+  const { isMissionsActive, isAgentsActive } = useNavigation();
+
+  return (
+    <div className="flex-col space-y-4 items-center py-8 hidden sm:flex border-r border-zinc-700 h-full  w-[120px] md:w-[225px] md:items-start fixed">
+      <Link
+        href="/"
+        className="flex flex-row space-x-1 items-center hover:bg-white/10 p-4 rounded-full duration-200"
+      >
+        <Image
+          src={"/crewai_logo.png"}
+          alt="CrewAI Logo"
+          width="100"
+          height="100"
+        />
+      </Link>
+
+      <Link
+        href="/missions"
+        className="flex flex-row space-x-4 items-center px-4 py-3 rounded-full duration-200 hover:bg-white/10 relative"
+      >
+        <Icon icon="flat-color-icons:parallel-tasks" width="35" height="35" />
+        <span
+          className={`text-2xl pt-2 hidden md:flex ${
+            isMissionsActive ? "font-bold" : ""
+          }`}
+        >
+          Missions
+        </span>
+      </Link>
+
+      <Link
+        href="/agents"
+        className="flex flex-row space-x-4 items-center px-4 py-3 rounded-full duration-200 hover:bg-white/10"
+      >
+        <Icon icon="streamline-emojis:robot-face-1" width="35" height="35" />
+        <span
+          className={`text-2xl pt-2 hidden md:flex ${
+            isAgentsActive ? "font-bold" : ""
+          }`}
+        >
+          Agents
+        </span>
+      </Link>
+    </div>
+  );
+};
+
+export default SideNav;

src/components/top-nav.tsx

@@ -0,0 +1,25 @@
+"use client";
+
+import Link from "next/link";
+import Image from "next/image";
+
+const TopNav = () => {
+  return (
+    <div
+      className={`fixed top-0 w-full py-1 z-10 bg-zinc-100 dark:bg-zinc-950 border-b dark:border-zinc-800 border-zinc-200 shadow-lg sm:hidden`}
+    >
+      <div className="flex flex-row justify-around items-center bg-transparent w-full">
+        <Link href="/" className={`flex items-center`}>
+          <Image
+            src="/crewai_logo.png"
+            alt="CrewAI Logo"
+            width="50"
+            height="50"
+          />
+        </Link>
+      </div>
+    </div>
+  );
+};
+
+export default TopNav;