Created nav bar

src/app/layout.tsx

@@ -1,6 +1,7 @@
 import "./globals.css";
 import { Inter } from "next/font/google";
 import { ReactQueryClientProvider } from "@/utils/react-query";
+import Navigation from "@/components/navigation";
 
 const inter = Inter({ subsets: ["latin"] });
 
@@ -20,6 +21,7 @@ export default function RootLayout({ children }: LayoutProps) {
         className={`${inter.className} min-h-screen`}
         style={{ backgroundColor: "#FFEFD7" }}
       >
+        <Navigation />
         <ReactQueryClientProvider>{children}</ReactQueryClientProvider>
       </body>
     </html>

src/app/page.tsx

@@ -1,5 +1,5 @@
 const Home = () => {
-  return <div className="bg-isa-dark-red">Hello World</div>;
+  return <div>{/* <div className="bg-isa-dark-red">Hello World</div>; */}</div>;
 };
 
 export default Home;

src/components/navigation.tsx

@@ -0,0 +1,43 @@
+import Image from "next/image";
+import Link from "next/link";
+import React from "react";
+import Logo from "@/public/logo.webp";
+import { items } from "@/data/nav";
+
+type item = {
+  name: string;
+  href: string;
+};
+
+const Navigation = () => {
+  return (
+    <nav className="bg-beige-100 w-full border-gray-200 py-4">
+      <div className="flex w-full items-center justify-between px-6">
+        <div className="flex items-center">
+          <div className="rounded-full border-2 border-black">
+            <Image
+              src={Logo}
+              alt="Logo"
+              width={75}
+              height={75}
+              className="rounded-full"
+            />
+          </div>
+        </div>
+
+        {/* nav stuff */}
+        <ul className="flex space-x-8 text-lg font-semibold text-black">
+          {items.map((item: item, index: number) => (
+            <Link href={item.href} key={index}>
+              <div className="transition-colors duration-300 hover:text-gray-600">
+                {item.name}
+              </div>
+            </Link>
+          ))}
+        </ul>
+      </div>
+    </nav>
+  );
+};
+
+export default Navigation;

src/data/nav.ts

@@ -0,0 +1,22 @@
+export const items = [
+  {
+    name: "Mission",
+    href: "/mission",
+  },
+  {
+    name: "Culture",
+    href: "/culture",
+  },
+  {
+    name: "Join Us",
+    href: "/join-us",
+  },
+  {
+    name: "Gallery",
+    href: "/gallery",
+  },
+  {
+    name: "Philanthropy",
+    href: "/philanthropy",
+  },
+];

tailwind.config.ts

@@ -9,6 +9,7 @@ module.exports = {
           "light-red": "#7D454D",
           "bright-yellow": "#F6DE50",
           "dark-yellow": "#BF9B36",
+          "beige-100": "#f5e7d5",
         },
       },
     },