feat: Add home link to navigation bar

ComputerSocietyVITC · Aug 10, 2024 · 795d170 · 795d170
1 parent 3a43f9c
commit 795d170
Show file tree

Hide file tree

Showing 3 changed files with 20 additions and 16 deletions.
diff --git a/src/app/layout.tsx b/src/app/layout.tsx
@@ -14,6 +14,10 @@ export default function RootLayout({
   children: React.ReactNode;
 }>) {
   const navItems = [
+    {
+      name: "Home",
+      link: "#home",
+    },
     {
       name: "About",
       link: "#about",

diff --git a/src/components/navbar/FloatingNav.tsx b/src/components/navbar/FloatingNav.tsx
@@ -53,7 +53,7 @@ export const FloatingNav = ({
           duration: 0.2,
         }}
         className={cn(
-          "flex max-w-fit fixed top-10 inset-x-0 mx-auto border border-transparent dark:border-white/[0.2] rounded-full bg-gradient-to-br from-[#100e17] via-[#103456] to-[#100e17] shadow-md shadow-[#292761] z-[5000] px-6 py-4 items-center justify-center space-x-4",
+          "grid grid-flow-col max-w-fit fixed top-10 inset-x-0 mx-auto border-b border-x border-slate-700 dark:border-white/[0.2] rounded-full bg-gradient-to-b from-[#100e17] to-[#031c37] shadow-md z-[5000] px-6 py-4 items-center justify-center space-x-4",
           className,
           montserrat.className
         )}
@@ -63,10 +63,10 @@ export const FloatingNav = ({
             key={`link=${navItem.name}`}
             href={navItem.link}
             className={cn(
-              "relative items-center flex space-x-1 text-slate-300 hover:text-slate-50"
+              "relative items-center flex text-slate-200 hover:text-white"
             )}
           >
-            <span className="block text-xs lg:text-base font-medium">
+            <span className="block text-lg px-8 border bg-slate-900 py-2 border-white/[0.1] hover:border-cyan-700 rounded-full font-medium">
               {navItem.name}
             </span>
           </Link>

diff --git a/src/pages/main.tsx b/src/pages/main.tsx
@@ -4,19 +4,19 @@ import Timer from "@/components/timer/Timer";
 
 const Main: React.FC = () => {
   return (
-    <>
-
-      <div className="min-h-screen flex flex-col scale-[100%] justify-center">
-        <Image
-          src="/bitwarsLogo.png"
-          alt="logo"
-          height={500}
-          width={500}
-          className="z-30 justify-center align-center mx-auto relative top-10 md:scale-[80%] md:top-24"
-        />
-        <Timer />
-      </div>
-    </>
+    <div
+      className="min-h-screen flex flex-col scale-[100%] justify-center"
+      id="home"
+    >
+      <Image
+        src="/bitwarsLogo.png"
+        alt="logo"
+        height={500}
+        width={500}
+        className="z-30 justify-center align-center mx-auto relative top-10 md:scale-[80%] md:top-24"
+      />
+      <Timer />
+    </div>
   );
 };