frontend-ui-redesign

src/App.css

@@ -1,8 +1,8 @@
+/* App-level overrides — base styles live in index.css */
 #root {
-  max-width: 1280px;
-  margin: 0 auto;
-  padding: 2rem;
-  text-align: center;
+  display: flex;
+  flex-direction: column;
+  min-height: 100vh;
 }
 
 .logo {

src/App.tsx

@@ -3,42 +3,50 @@ import Footer from "./components/Footer";
 import ScrollProgressBar from "./components/ScrollProgressBar";
 import { Toaster } from "react-hot-toast";
 import Router from "./Routes/Router";
-import ThemeWrapper from "./context/ThemeContext";
 
 function App() {
   return (
-    <ThemeWrapper>
-      <div className="relative flex flex-col min-h-screen">
-        <ScrollProgressBar />
+    <div
+      className="relative flex flex-col min-h-screen transition-theme"
+      style={{ backgroundColor: "var(--color-bg)", color: "var(--color-text)" }}
+    >
+      <ScrollProgressBar />
+      <Navbar />
 
-        <Navbar />
+      <main className="flex-grow" style={{ backgroundColor: "var(--color-bg)" }}>
+        <Router />
+      </main>
 
-        <main className="flex-grow bg-gray-50 dark:bg-gray-800 flex justify-center items-center">
-          <Router />
-        </main>
+      <Footer />
 
-        <Footer />
-
-        <Toaster
-          position="top-center"
-          reverseOrder={false}
-          gutter={8}
-          containerClassName="mt-12"
-          toastOptions={{
-            className: "bg-white dark:bg-gray-800 text-black dark:text-white",
-            duration: 5000,
-            success: {
-              duration: 3000,
-              iconTheme: {
-                primary: "green",
-                secondary: "white",
-              },
-            },
-          }}
-        />
-      </div>
-    </ThemeWrapper>
+      <Toaster
+        position="top-center"
+        reverseOrder={false}
+        gutter={8}
+        containerStyle={{ top: 72 }}
+        toastOptions={{
+          style: {
+            fontFamily: "var(--font-body)",
+            fontSize: "14px",
+            backgroundColor: "var(--color-surface)",
+            color: "var(--color-text)",
+            border: "1px solid var(--color-border)",
+            boxShadow: "var(--shadow-lg)",
+            borderRadius: "var(--radius-md)",
+            padding: "12px 16px",
+          },
+          duration: 4000,
+          success: {
+            duration: 3000,
+            iconTheme: { primary: "#198038", secondary: "#fff" },
+          },
+          error: {
+            iconTheme: { primary: "#DA1E28", secondary: "#fff" },
+          },
+        }}
+      />
+    </div>
   );
 }
 
-export default App;
+export default App;

src/Routes/Router.tsx

@@ -5,22 +5,22 @@ import Contact from "../pages/Contact/Contact";
 import Contributors from "../pages/Contributors/Contributors";
 import Signup from "../pages/Signup/Signup.tsx";
 import Login from "../pages/Login/Login.tsx";
+import ForgotPassword from "../pages/ForgotPassword/Forgotpassword.tsx";
 import ContributorProfile from "../pages/ContributorProfile/ContributorProfile.tsx";
 import Home from "../pages/Home/Home.tsx";
 
-const Router = () => {
-  return (
-    <Routes>
-      <Route path="/" element={<Home />} />
-      <Route path="/track" element={<Tracker />} />
-      <Route path="/signup" element={<Signup />} />
-      <Route path="/login" element={<Login />} />
-      <Route path="/about" element={<About />} />
-      <Route path="/contact" element={<Contact />} />
-      <Route path="/contributors" element={<Contributors />} />
-      <Route path="/contributor/:username" element={<ContributorProfile />} />
-    </Routes>
-  );
-};
+const Router = () => (
+  <Routes>
+    <Route path="/" element={<Home />} />
+    <Route path="/track" element={<Tracker />} />
+    <Route path="/signup" element={<Signup />} />
+    <Route path="/login" element={<Login />} />
+    <Route path="/forgot-password" element={<ForgotPassword />} />
+    <Route path="/about" element={<About />} />
+    <Route path="/contact" element={<Contact />} />
+    <Route path="/contributors" element={<Contributors />} />
+    <Route path="/contributor/:username" element={<ContributorProfile />} />
+  </Routes>
+);
 
-export default Router;
+export default Router;

src/components/Features.tsx

@@ -1,92 +1,110 @@
-import { BarChart3, Users, Search, Zap, Shield, Globe } from 'lucide-react';
+import { BarChart3, Users, Search, Zap, Shield, Globe } from "lucide-react";
 
-const Features = () => {
-  const features = [
-    {
-      icon: BarChart3,
-      title: 'Activity Analytics',
-      description: 'Comprehensive charts and graphs showing commit patterns, contribution streaks, and repository activity over time.',
-      bgColor: 'bg-blue-100',
-      iconColor: 'text-blue-600',
-      hoverColor: 'hover:bg-blue-400/50 dark:hover:bg-blue-900/30',
-      borderColor: 'hover:border-blue-200 dark:hover:border-blue-700'
-    },
-    {
-      icon: Users,
-      title: 'Multi-User Tracking',
-      description: 'Monitor multiple GitHub users simultaneously and compare their activity levels and contribution patterns.',
-      bgColor: 'bg-green-100',
-      iconColor: 'text-green-600',
-      hoverColor: 'hover:bg-green-400/50 dark:hover:bg-green-900/30',
-      borderColor: 'hover:border-green-200 dark:hover:border-green-700'
-    },
-    {
-      icon: Search,
-      title: 'Smart Search',
-      description: 'Quickly find and add users to your tracking list with intelligent search and auto-suggestions.',
-      bgColor: 'bg-purple-100',
-      iconColor: 'text-purple-600',
-      hoverColor: 'hover:bg-purple-400/50 dark:hover:bg-purple-900/30',
-      borderColor: 'hover:border-purple-200 dark:hover:border-purple-700'
-    },
-    {
-      icon: Zap,
-      title: 'Real-time Updates',
-      description: 'Get instant notifications and updates when tracked users make new contributions or repositories.',
-      bgColor: 'bg-orange-100',
-      iconColor: 'text-orange-600',
-      hoverColor: 'hover:bg-orange-400/50 dark:hover:bg-orange-900/30',
-      borderColor: 'hover:border-orange-200 dark:hover:border-orange-700'
-    },
-    {
-      icon: Shield,
-      title: 'Privacy First',
-      description: 'All data is fetched from public GitHub APIs. We don\'t store personal information or require GitHub access.',
-      bgColor: 'bg-red-100',
-      iconColor: 'text-red-600',
-      hoverColor: 'hover:bg-red-400/50 dark:hover:bg-red-900/30',
-      borderColor: 'hover:border-red-200 dark:hover:border-red-700'
-    },
-    {
-      icon: Globe,
-      title: 'Export & Share',
-      description: 'Export activity reports and share insights with your team through various formats and integrations.',
-      bgColor: 'bg-indigo-100',
-      iconColor: 'text-indigo-600',
-      hoverColor: 'hover:bg-indigo-400/50 dark:hover:bg-indigo-900/30',
-      borderColor: 'hover:border-indigo-200 dark:hover:border-indigo-700'
-    }
-  ];
+const features = [
+  {
+    icon: BarChart3,
+    title: "Activity Analytics",
+    description:
+      "Comprehensive charts showing commit patterns, contribution streaks, and repository activity over time.",
+  },
+  {
+    icon: Users,
+    title: "Multi-User Tracking",
+    description:
+      "Monitor multiple GitHub users simultaneously and compare their activity levels and contribution patterns.",
+  },
+  {
+    icon: Search,
+    title: "Smart Search",
+    description:
+      "Quickly find and add users to your tracking list with intelligent search and auto-suggestions.",
+  },
+  {
+    icon: Zap,
+    title: "Real-time Updates",
+    description:
+      "Get instant notifications and updates when tracked users make new contributions or repositories.",
+  },
+  {
+    icon: Shield,
+    title: "Privacy First",
+    description:
+      "All data is fetched from public GitHub APIs. We don't store personal information or require GitHub access.",
+  },
+  {
+    icon: Globe,
+    title: "Export & Share",
+    description:
+      "Export activity reports and share insights with your team through various formats and integrations.",
+  },
+];
 
-  return (
-    <section id="features" className="px-6 py-6 bg-white dark:bg-gray-900 transition-colors duration-300">
-      <div className="mx-auto">
-        <div className="text-center mb-16">
-          <h2 className="text-3xl font-bold text-gray-900 dark:text-white mb-4">Powerful Features</h2>
-          <p className="text-xl text-gray-600 dark:text-gray-300 max-w-2xl mx-auto">
-            Everything you need to track, analyze, and understand GitHub activity patterns
-          </p>
-        </div>
+const Features = () => (
+  <section
+    className="gt-section transition-theme"
+    style={{ backgroundColor: "var(--color-bg-2)" }}
+  >
+    <div className="gt-container">
+      {/* Header */}
+      <div className="mb-16">
+        <p className="gt-label mb-3">Features</p>
+        <h2 style={{ color: "var(--color-text)", marginBottom: "12px" }}>Powerful, simple tools</h2>
+        <p style={{ color: "var(--color-text-2)", maxWidth: "480px", fontSize: "17px" }}>
+          Everything you need to track, analyze, and understand GitHub activity patterns.
+        </p>
+      </div>
 
-        <div className="grid md:grid-cols-2 lg:grid-cols-3 gap-8">
-          {features.map((feature, index) => {
-            const IconComponent = feature.icon;
-            return (
-              <div key={index} className={`group h-72 w-full bg-gray-100 dark:bg-gray-800 ${feature.hoverColor} ${feature.borderColor} rounded-2xl shadow-md hover:shadow-2xl border dark:border-gray-800 transform hover:-translate-y-2 hover:scale-[1.02] transition-all duration-300 ease-linear p-6`}>
-                <div className={`${feature.bgColor} w-12 h-12 rounded-lg flex items-center justify-center mb-6`}>
-                  <IconComponent className={`h-6 w-6 ${feature.iconColor}`} />
-                </div>
-                <h3 className="  text-2xl font-bold text-gray-900 dark:text-gray-100 group-hover:text-black dark:group-hover:text-white transition-colors duration-300">{feature.title}</h3>
-                <p className="text-gray-600 dark:text-gray-300 text-base font-semibold leading-relaxed group-hover:text-gray-700 dark:group-hover:text-gray-200 transition-colors duration-300">
-                  {feature.description}
-                </p>
+      {/* Grid — shadow-separated sections, no card borders */}
+      <div className="grid md:grid-cols-2 lg:grid-cols-3 gap-px"
+        style={{ backgroundColor: "var(--color-border)" }}
+      >
+        {features.map((f, i) => {
+          const Icon = f.icon;
+          return (
+            <div
+              key={i}
+              className="transition-theme group"
+              style={{
+                backgroundColor: "var(--color-surface)",
+                padding: "36px 32px",
+                boxShadow: "var(--shadow-sm)",
+                transition: "box-shadow 200ms ease, background-color 200ms ease",
+              }}
+              onMouseEnter={(e) => {
+                (e.currentTarget as HTMLElement).style.boxShadow = "var(--shadow-lg)";
+                (e.currentTarget as HTMLElement).style.backgroundColor = "var(--color-bg)";
+              }}
+              onMouseLeave={(e) => {
+                (e.currentTarget as HTMLElement).style.boxShadow = "var(--shadow-sm)";
+                (e.currentTarget as HTMLElement).style.backgroundColor = "var(--color-surface)";
+              }}
+            >
+              <div
+                className="flex items-center justify-center w-10 h-10 rounded mb-6"
+                style={{ backgroundColor: "var(--color-bg-3)", color: "var(--color-text)" }}
+              >
+                <Icon size={18} strokeWidth={1.75} />
               </div>
-            );
-          })}
-        </div>
+              <h3
+                style={{
+                  fontFamily: "var(--font-display)",
+                  fontWeight: 600,
+                  fontSize: "17px",
+                  color: "var(--color-text)",
+                  marginBottom: "10px",
+                }}
+              >
+                {f.title}
+              </h3>
+              <p style={{ fontSize: "15px", color: "var(--color-text-2)", lineHeight: 1.65 }}>
+                {f.description}
+              </p>
+            </div>
+          );
+        })}
       </div>
-    </section>
-  );
-};
+    </div>
+  </section>
+);
 
-export default Features;
+export default Features;