GitMetricsLab · kjxcodez · Dec 5, 2024 · Dec 5, 2024 · Dec 5, 2024 · Dec 5, 2024
diff --git a/components.json b/components.json
@@ -0,0 +1,21 @@
+{
+  "$schema": "https://ui.shadcn.com/schema.json",
+  "style": "new-york",
+  "rsc": false,
+  "tsx": true,
+  "tailwind": {
+    "config": "tailwind.config.js",
+    "css": "src/index.css",
+    "baseColor": "slate",
+    "cssVariables": true,
+    "prefix": ""
+  },
+  "aliases": {
+    "components": "@/components",
+    "utils": "@/lib/utils",
+    "ui": "@/components/ui",
+    "lib": "@/lib",
+    "hooks": "@/hooks"
+  },
+  "iconLibrary": "lucide"
+}
diff --git a/index.html b/index.html
@@ -2,11 +2,11 @@
 <html lang="en">
   <head>
     <meta charset="UTF-8" />
-    <link rel="icon" type="image/svg+xml" href="/vite.svg" />
+    <link rel="icon" type="image/svg+xml" href="/favicon.ico" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>Vite + React + TS</title>
+    <title>Github Tracker | Track your GitHub</title>
   </head>
-  <body>
+  <body class="dark">
     <div id="root"></div>
     <script type="module" src="/src/main.tsx"></script>
   </body>

diff --git a/package.json b/package.json
@@ -14,17 +14,29 @@
     "@emotion/styled": "^11.11.0",
     "@mui/icons-material": "^5.15.6",
     "@mui/material": "^5.15.6",
+    "@radix-ui/react-dialog": "^1.1.2",
+    "@radix-ui/react-label": "^2.1.0",
+    "@radix-ui/react-separator": "^1.1.0",
+    "@radix-ui/react-slot": "^1.1.0",
+    "@tabler/icons-react": "^3.24.0",
     "@vitejs/plugin-react": "^4.3.3",
     "axios": "^1.7.7",
+    "class-variance-authority": "^0.7.1",
+    "clsx": "^2.1.1",
+    "lucide-react": "^0.465.0",
+    "next-themes": "^0.4.3",
     "octokit": "^4.0.2",
     "react": "^18.3.1",
     "react-dom": "^18.3.1",
     "react-hot-toast": "^2.4.1",
     "react-icons": "^5.3.0",
-    "react-router-dom": "^6.28.0"
+    "react-router-dom": "^6.28.0",
+    "tailwind-merge": "^2.5.5",
+    "tailwindcss-animate": "^1.0.7"
   },
   "devDependencies": {
     "@eslint/js": "^9.13.0",
+    "@types/node": "^22.10.1",
     "@types/react": "^18.3.12",
     "@types/react-dom": "^18.3.1",
     "@vitejs/plugin-react-swc": "^3.5.0",

diff --git a/public/favicon.ico b/public/favicon.ico
diff --git a/public/hero.png b/public/hero.png
diff --git a/public/hero2.png b/public/hero2.png
diff --git a/public/logo.png b/public/logo.png
diff --git a/public/vite.svg b/public/vite.svg
diff --git a/src/App.css b/src/App.css
diff --git a/src/App.tsx b/src/App.tsx
@@ -1,9 +1,8 @@
-
-import Navbar from "./components/Navbar";
-import Footer from "./components/Footer";
 import ScrollProgressBar from './components/ScrollProgressBar';
 
 import Router from "./Routes/Router";
+import Header from "./components/Header";
+import Footer_ from "./components/footer2";
 
 function App() {
   return (
@@ -12,15 +11,15 @@ function App() {
         <ScrollProgressBar/>
 
         {/* Navbar */}
-        <Navbar />
+        <Header />
 
         {/* Main content */}
         <main className="flex-grow">
           <Router/>
         </main>
 
         {/* Footer */}
-        <Footer />
+        <Footer_ />
       </div>
 
   );

diff --git a/src/Routes/Router.tsx b/src/Routes/Router.tsx
@@ -1,15 +1,16 @@
-import { Navigate, Route, Routes } from "react-router-dom";
+import { Route, Routes } from "react-router-dom";
 
 import Home from "../pages/Home/Home"; // Import the Home component
 import About from "../pages/About/About"; // Import the About component
 import Contact from "../pages/Contact/Contact"; // Import the Contact component
 import Contributors from "../pages/Contributors/Contributors";
+import Landing from "../pages/home";
 
 const Router = () => {
   return (
     <Routes>
       {/* Redirect from root (/) to the home page */}
-      <Route path="/" element={<Navigate to="/home" replace />} />
+      <Route path="/" element={<Landing />} />
       <Route path="/about" element={<About />} />
       <Route path="/contact" element={<Contact />} />
       <Route path="/home" element={<Home />} />

diff --git a/src/assets/react.svg b/src/assets/react.svg
diff --git a/src/components/Header.tsx b/src/components/Header.tsx
@@ -0,0 +1,131 @@
+import { Link, useLocation } from "react-router-dom";
+import { Separator } from "./ui/separator";
+import { Button } from "./ui/button";
+import { Menu, Sun } from "lucide-react";
+import {
+  Sheet,
+  SheetContent,
+  SheetHeader,
+  SheetTitle,
+  SheetTrigger,
+} from "./ui/sheet";
+import { useEffect, useState } from "react";
+
+const Header = () => {
+  const [scrolled, setScrolled] = useState(false);
+  const location = useLocation();
+  const path = location.pathname;
+  useEffect(() => {
+    const handleScroll = () => {
+      if (window.scrollY > 0) {
+        setScrolled(true);
+      } else {
+        setScrolled(false);
+      }
+    };
+    window.addEventListener("scroll", handleScroll);
+    return () => window.removeEventListener("scroll", handleScroll);
+  });
+  return (
+    <header
+      className={`dark:bg-black bg-slate-100 md:px-12 px-4 ${
+        scrolled && "fixed top-0 transition-all duration-300"
+      } w-full shadow-lg z-50 border-b`}
+    >
+      <nav className="flex items-center justify-between py-1">
+        <Link
+          to="/"
+          className="text-2xl font-bold flex items-center justify-start"
+        >
+          <img
+            src="/logo.png"
+            alt="Github Tracker"
+            className="w-10 h-auto dark:invert mr-3"
+          />
+          Git<span className="text-blue-500">Monitor</span>
+        </Link>
+        <div className="flex items-center justify-end gap-2">
+          <div className="md:flex items-center justify-end hidden">
+            {links.map((link, idx) => (
+              <Link
+                key={link.href}
+                to={link.href}
+                className={`text-gray-500 dark:text-gray-300 hover:text-gray-900 dark:hover:text-gray-100  text-sm font-medium flex items-center justify-center `}
+              >
+                <span
+                  className={`hover:bg-slate-300 dark:hover:bg-slate-900 w-full h-full px-3 py-2 rounded-md transition-colors duration-300 ${
+                    path === link.href && "bg-slate-300 dark:bg-slate-900"
+                  }`}
+                >
+                  {link.label}
+                </span>
+                {idx !== links.length - 1 && (
+                  <Separator orientation="vertical" className="mx-2 h-5" />
+                )}
+              </Link>
+            ))}
+          </div>
+          <div className="md:hidden items-center justify-end flex gap-3">
+            <Sheet>
+              <SheetTrigger className="flex items-center justify-center">
+                <Menu />
+              </SheetTrigger>
+              <SheetContent>
+                <SheetHeader>
+                  <SheetTitle>Menu</SheetTitle>
+                </SheetHeader>
+                <div className="flex flex-col">
+                  {links.map((link) => (
+                    <Link
+                      key={link.href}
+                      to={link.href}
+                      className={`text-gray-500 dark:text-gray-300 hover:text-gray-900 dark:hover:text-gray-100  text-sm font-medium flex justify-start  hover:bg-slate-300 dark:hover:bg-slate-900 w-full h-full p-3 rounded-md transition-colors duration-300 ${
+                        window.location.pathname === link.href
+                          ? "bg-slate-300 dark:bg-slate-900"
+                          : ""
+                      }`}
+                    >
+                      {link.label}
+                    </Link>
+                  ))}
+                </div>
+              </SheetContent>
+            </Sheet>
+          </div>
+          <div className="flex items-center justify-center gap-3 ml-3">
+            <Button variant={"outline"}>
+              <Sun />
+            </Button>
+            <Button
+              variant={"outline"}
+              className="px-5 bg-sky-700 hover:bg-sky-600 text-white hover:text-white"
+            >
+              <Link to={"/auth/login"}>Login</Link>
+            </Button>
+          </div>
+        </div>
+      </nav>
+    </header>
+  );
+};
+
+export default Header;
+
+const links = [
+  {
+    label: "Home",
+    href: "/home",
+  },
+  {
+    label: "About",
+    href: "/about",
+  },
+  {
+    label: "Contact",
+    href: "/contact",
+  },
+  {
+    label: "Contributors",
+    href: "/contributors",
+  },
+];
diff --git a/src/components/ScrollProgressBar.tsx b/src/components/ScrollProgressBar.tsx
@@ -1,4 +1,4 @@
-import React, { useEffect, useState } from "react";
+import { useEffect, useState } from "react";
 
 const ScrollProgressBar = () => {
   const [scrollWidth, setScrollWidth] = useState(0);
@@ -57,7 +57,7 @@ const ScrollProgressBar = () => {
             left: 0,
             width: `${scrollWidth}%`,
             height: "5px", // Thicker line for scroll progress
-            backgroundColor: "grey",
+            backgroundColor: "teal",
             zIndex: 100,
             transition: "width 0.2s ease",
           }}