feat: Navbar

src/app/layout.tsx

@@ -4,6 +4,7 @@ import { ReduxProvider } from "@/store/provider";
 import { Toaster } from "@/components/ui/toaster";
 import { jetbrains, thalehfatFont } from "@/styles/fonts";
 import Footer from "@/components/layout/Footer";
+import NavBar from "@/components/layout/navbar";
 
 export const metadata: Metadata = {
   title: "Techie Sleuths '24",
@@ -21,6 +22,7 @@ export default function RootLayout({
         className={`${jetbrains.variable} ${thalehfatFont.variable} font-sans`}
       >
         <ReduxProvider>
+          <NavBar />
           {children}
           <Footer />
           <Toaster />

src/components/landing/hero.tsx

@@ -64,7 +64,7 @@ export default function HeroSection() {
 
         <div className="flex min-h-full items-center sm:flex-row sm:items-center gap-3 mb-10">
           <Button variant="default" size="lg">
-            COMMING SOON !!!
+            COMING SOON !!!
           </Button>
           <Image
             alt="Logo"

src/components/layout/navbar.tsx

@@ -0,0 +1,40 @@
+"use client";
+import Image from "next/image";
+import Container from "../layout/Container";
+import { Navigation } from "lucide-react";
+import NavigationLinks from "@/data/nav/nav";
+import Link from "next/link";
+import { it } from "node:test";
+import { Button, buttonVariants } from "../ui/button";
+
+export default function NavBar() {
+  return (
+    <div className="bg-sky-200">
+      <Container>
+        <div className="py-8 flex flex-row justify-between ">
+          <div className="md:w-auto w-1/2 flex">
+            <Image
+              src="/assets/logos/techie_sleuths_logo_new.png"
+              alt="Techie Sleuths"
+              width={200}
+              height={200}
+            />
+          </div>
+
+          <div className="md:flex items-center lg:text-3xl text-2xl hidden text-sky-900 ">
+            <div className="flex  gap-10 items-center">
+              {NavigationLinks.map((item) => (
+                <Link href={item.link} key={item.id}>
+                  <div className="hover:">{item.title}</div>
+                </Link>
+              ))}
+              <Button className="text-3xl"   size={"lg"}>
+                Regiter{" "}
+              </Button>
+            </div>
+          </div>
+        </div>
+      </Container>
+    </div>
+  );
+}

src/components/ui/button.tsx

@@ -23,7 +23,7 @@ const buttonVariants = cva(
       size: {
         default: "h-10 px-4 py-2",
         sm: "h-9 rounded-md px-3",
-        lg: "h-11 rounded-md px-8",
+        lg: "h-11 rounded-md px-8 ",
         icon: "h-10 w-10",
       },
     },

src/data/nav/nav.ts

@@ -0,0 +1,27 @@
+import { INavBar } from "@/types/nav";
+import exp from "constants";
+
+const NavigationLinks: INavBar[] = [
+  {
+    id: 1,
+    title: "ELIGIBILITY",
+    link: "/",
+  },
+  {
+    id: 2,
+    title: "PAST EVENTS",
+    link: "/past-events",
+  },
+  {
+    id: 3,
+    title: "POSTS",
+    link: "/posts",
+  },
+  // {
+  //   id: 4,
+  //   title: "REGISTER",
+  //   link: "/register",
+  // },
+
+];
+export default NavigationLinks;

src/types/nav.d.ts

@@ -0,0 +1,5 @@
+export interface INavBar {
+    id:number;
+    title:string;
+    link:string;
+}