fix(ui): enhance light mode contrast and visual depth

Author: tanveerajput

app/components/HeroSection.tsx

@@ -1,19 +1,20 @@
 'use client';
 
 import { motion } from 'framer-motion';
+import { Copy } from 'lucide-react';
 
 export function HeroSection() {
   return (
-    <div className="relative text-center mb-16 overflow-hidden bg-[radial-gradient(circle_at_center,rgba(34,197,94,0.08),transparent_70%)]">
-      <div className="absolute inset-0 opacity-10 bg-[linear-gradient(rgba(255,255,255,0.06)_1px,transparent_1px),linear-gradient(90deg,rgba(255,255,255,0.06)_1px,transparent_1px)] bg-[size:40px_40px]" />
+    <div className="relative text-center mb-16 overflow-hidden bg-[radial-gradient(circle_at_center,rgba(34,197,94,0.04),transparent_70%)] dark:bg-[radial-gradient(circle_at_center,rgba(34,197,94,0.08),transparent_70%)] transition-colors duration-300">
+      <div className="absolute inset-0 opacity-20 dark:opacity-10 bg-[linear-gradient(rgba(0,0,0,0.06)_1px,transparent_1px),linear-gradient(90deg,rgba(0,0,0,0.06)_1px,transparent_1px)] dark:bg-[linear-gradient(rgba(255,255,255,0.06)_1px,transparent_1px),linear-gradient(90deg,rgba(255,255,255,0.06)_1px,transparent_1px)] bg-[size:40px_40px]" />
 
-      <div className="absolute inset-0 blur-3xl opacity-20 bg-gradient-to-r from-green-500 via-cyan-500 to-purple-500 rounded-full" />
+      <div className="absolute inset-0 blur-3xl opacity-10 dark:opacity-20 bg-gradient-to-r from-green-500 via-cyan-500 to-purple-500 rounded-full" />
 
-      <div className="absolute top-16 left-10 grid grid-cols-6 gap-2 opacity-30">
+      <div className="absolute top-16 left-10 grid grid-cols-6 gap-2 opacity-50 dark:opacity-30">
         {Array.from({ length: 24 }).map((_, i) => (
           <div
             key={i}
-            className="w-2 h-2 rounded-sm bg-green-400 animate-pulse"
+            className="w-2 h-2 rounded-sm bg-green-500 dark:bg-green-400 animate-pulse"
             style={{
               animationDelay: `${i * 0.1}s`,
             }}
@@ -27,7 +28,7 @@ export function HeroSection() {
         transition={{ duration: 0.6 }}
         className="relative"
       >
-        <h1 className="text-5xl md:text-8xl font-extrabold tracking-tight mb-8 bg-gradient-to-r from-green-400 via-cyan-400 to-purple-500 bg-clip-text text-transparent">
+        <h1 className="text-5xl md:text-8xl font-extrabold tracking-tight mb-8 bg-gradient-to-r from-green-500 via-cyan-500 to-purple-600 dark:from-green-400 dark:via-cyan-400 dark:to-purple-500 bg-clip-text text-transparent">
           Elevate Your <br /> Contribution Story.
         </h1>
       </motion.div>
@@ -36,7 +37,7 @@ export function HeroSection() {
         initial={{ opacity: 0 }}
         animate={{ opacity: 1 }}
         transition={{ delay: 0.3 }}
-        className="relative text-gray-300 text-lg md:text-xl max-w-2xl mx-auto leading-relaxed"
+        className="relative text-gray-600 dark:text-gray-300 text-lg md:text-xl max-w-2xl mx-auto leading-relaxed"
       >
         Stop settling for flat grids. Generate high-fidelity, 3D isometric monoliths that visualize
         your coding rhythm with professional precision.
@@ -48,18 +49,39 @@ export function HeroSection() {
         transition={{ delay: 0.5 }}
         className="relative mt-10 flex flex-wrap items-center justify-center gap-4"
       >
-        <div className="px-4 py-2 rounded-full border border-green-500/20 bg-green-500/10 text-green-400 text-sm font-medium">
+        <div className="px-4 py-2 rounded-full border border-green-500/20 bg-green-500/10 text-green-700 dark:text-green-400 text-sm font-medium">
           ● 1,247 Contributions
         </div>
 
-        <div className="px-4 py-2 rounded-full border border-cyan-500/20 bg-cyan-500/10 text-cyan-400 text-sm font-medium">
+        <div className="px-4 py-2 rounded-full border border-cyan-500/20 bg-cyan-500/10 text-cyan-700 dark:text-cyan-400 text-sm font-medium">
           ● 83 Pull Requests
         </div>
 
-        <div className="px-4 py-2 rounded-full border border-purple-500/20 bg-purple-500/10 text-purple-400 text-sm font-medium">
+        <div className="px-4 py-2 rounded-full border border-purple-500/20 bg-purple-500/10 text-purple-700 dark:text-purple-400 text-sm font-medium">
           ● 214 Commits
         </div>
       </motion.div>
+
+      {/* Fully Configured Light/Dark Mode Input Form */}
+      <motion.div
+        initial={{ opacity: 0, y: 20 }}
+        animate={{ opacity: 1, y: 0 }}
+        transition={{ delay: 0.7 }}
+        className="relative mt-12 max-w-3xl mx-auto flex flex-col sm:flex-row items-center gap-3 p-2 rounded-2xl border border-gray-200 bg-white/70 shadow-sm backdrop-blur-md dark:border-white/10 dark:bg-white/5 dark:shadow-none"
+      >
+        <input
+          type="text"
+          placeholder="Enter GitHub Username"
+          className="flex-1 w-full bg-transparent border-none px-4 py-3 text-gray-900 placeholder-gray-400 focus:outline-none focus:ring-0 dark:text-white dark:placeholder-gray-500"
+        />
+        <button className="flex items-center gap-2 px-6 py-3 rounded-xl border border-gray-200 bg-gray-50 text-gray-700 font-medium transition hover:bg-gray-100 dark:border-white/20 dark:bg-white/10 dark:text-white dark:hover:bg-white/20">
+          <Copy size={18} />
+          Copy Link
+        </button>
+        <button className="px-6 py-3 rounded-xl bg-[#5C45FD] text-white font-medium shadow-lg shadow-[#5C45FD]/30 transition hover:bg-[#4a35da] hover:shadow-[#5C45FD]/50">
+          Watch Dashboard
+        </button>
+      </motion.div>
     </div>
   );
 }

app/components/navbar.tsx

@@ -32,7 +32,6 @@ export default function Navbar() {
 
   const [isDark, setIsDark] = useState(() => {
     if (typeof window === 'undefined') return true;
-
     return localStorage.getItem('theme') !== 'light';
   });
 
@@ -62,8 +61,6 @@ export default function Navbar() {
       }
     };
 
-    // Defer the initial check so it doesn't cause a synchronous setState
-    // inside the effect body (which would trigger cascading re-renders).
     const initialCheckTimer = setTimeout(() => {
       if (mediaQuery.matches) {
         setOpen(false);
@@ -88,23 +85,23 @@ export default function Navbar() {
       <div className="mx-auto max-w-6xl">
         <div
           ref={shellRef}
-          className="relative overflow-hidden rounded-2xl border border-white/25 bg-black/45 backdrop-blur-xl shadow-[0_14px_40px_rgba(0,0,0,0.45)]"
+          className="relative overflow-hidden rounded-2xl border border-gray-200 bg-white/70 dark:border-white/25 dark:bg-black/45 backdrop-blur-xl shadow-[0_8px_30px_rgba(0,0,0,0.08)] dark:shadow-[0_14px_40px_rgba(0,0,0,0.45)] transition-colors duration-300"
           style={shellVars}
           onMouseEnter={handleMouseEnter}
           onMouseMove={handleMouseMove}
           onMouseLeave={handleMouseLeave}
         >
           <div
-            className="pointer-events-none absolute inset-0 transition-opacity duration-300 ease-out"
+            className="pointer-events-none absolute inset-0 transition-opacity duration-300 ease-out hidden dark:block"
             style={{
               opacity: 'var(--glow-opacity)',
               background:
                 'radial-gradient(180px 105px at var(--mx) var(--my), rgba(255,255,255,0.26), rgba(191,219,254,0.18) 30%, rgba(244,114,182,0.1) 48%, rgba(0,0,0,0) 68%)',
             }}
           />
-          <div className="pointer-events-none absolute inset-0 rounded-2xl border border-white/20" />
+          <div className="pointer-events-none absolute inset-0 rounded-2xl border border-black/5 dark:border-white/20" />
           <div
-            className="pointer-events-none absolute inset-0 rounded-2xl p-px transition-opacity duration-300 ease-out"
+            className="pointer-events-none absolute inset-0 rounded-2xl p-px transition-opacity duration-300 ease-out hidden dark:block"
             style={{
               opacity: 'var(--border-opacity)',
               background:
@@ -121,10 +118,10 @@ export default function Navbar() {
               className="group inline-flex items-center gap-3"
               onClick={handleLogoClick}
             >
-              <span className="flex h-10 w-10 items-center justify-center rounded-xl border border-white/35 bg-white/10 text-white shadow-[0_0_25px_rgba(255,255,255,0.22)] transition-transform duration-300 group-hover:scale-105">
+              <span className="flex h-10 w-10 items-center justify-center rounded-xl border border-gray-200 bg-gray-50 text-gray-800 shadow-sm dark:border-white/35 dark:bg-white/10 dark:text-white dark:shadow-[0_0_25px_rgba(255,255,255,0.22)] transition-transform duration-300 group-hover:scale-105">
                 <Activity size={19} />
               </span>
-              <span className="text-base font-semibold tracking-[0.08em] text-white sm:text-lg">
+              <span className="text-base font-semibold tracking-[0.08em] text-gray-900 dark:text-white sm:text-lg">
                 CommitPulse
               </span>
             </Link>
@@ -133,7 +130,7 @@ export default function Navbar() {
               <button
                 type="button"
                 onClick={toggleTheme}
-                className="inline-flex h-10 w-10 items-center justify-center rounded-xl border border-white/15 bg-white/5 text-white transition hover:bg-white/10"
+                className="inline-flex h-10 w-10 items-center justify-center rounded-xl border border-gray-200 bg-gray-50 text-gray-700 transition hover:bg-gray-100 dark:border-white/15 dark:bg-white/5 dark:text-white dark:hover:bg-white/10"
                 aria-label="Toggle theme"
               >
                 {mounted ? (
@@ -153,7 +150,7 @@ export default function Navbar() {
                   href={link.href}
                   target={link.isExternal ? '_blank' : undefined}
                   rel={link.isExternal ? 'noopener noreferrer' : undefined}
-                  className="inline-flex items-center gap-2 rounded-xl border border-white/15 bg-white/5 px-4 py-2 text-sm font-medium text-white/90 transition hover:border-white/45 hover:bg-white/10"
+                  className="inline-flex items-center gap-2 rounded-xl border border-gray-200 bg-gray-50 px-4 py-2 text-sm font-medium text-gray-700 transition hover:border-gray-300 hover:bg-gray-100 dark:border-white/15 dark:bg-white/5 dark:text-white/90 dark:hover:border-white/45 dark:hover:bg-white/10"
                 >
                   {link.isExternal && <GithubMark />}
                   {link.label}
@@ -165,14 +162,14 @@ export default function Navbar() {
               <button
                 type="button"
                 onClick={toggleTheme}
-                className="hidden sm:inline-flex h-10 w-10 items-center justify-center rounded-xl border border-white/15 bg-white/5 text-white transition hover:bg-white/10"
+                className="hidden sm:inline-flex h-10 w-10 items-center justify-center rounded-xl border border-gray-200 bg-gray-50 text-gray-700 transition hover:bg-gray-100 dark:border-white/15 dark:bg-white/5 dark:text-white dark:hover:bg-white/10"
                 aria-label="Toggle theme"
               >
                 {isDark ? <Sun size={18} /> : <Moon size={18} />}
               </button>
               <button
                 type="button"
-                className="md:hidden inline-flex items-center justify-center rounded-xl border border-white/15 bg-white/5 p-2 text-white/90 transition hover:bg-white/10"
+                className="md:hidden inline-flex items-center justify-center rounded-xl border border-gray-200 bg-gray-50 p-2 text-gray-700 transition hover:bg-gray-100 dark:border-white/15 dark:bg-white/5 dark:text-white/90 dark:hover:bg-white/10"
                 aria-label={open ? 'Close menu' : 'Open menu'}
                 aria-expanded={open}
                 onClick={() => setOpen((prev) => !prev)}
@@ -183,7 +180,7 @@ export default function Navbar() {
           </nav>
 
           {open ? (
-            <div className="border-t border-white/10 px-4 py-3 md:hidden">
+            <div className="border-t border-gray-200 dark:border-white/10 px-4 py-3 md:hidden">
               <ul className="space-y-2">
                 {NAV_LINKS.map((link) => (
                   <li key={link.href}>
@@ -192,18 +189,19 @@ export default function Navbar() {
                       target={link.isExternal ? '_blank' : undefined}
                       rel={link.isExternal ? 'noopener noreferrer' : undefined}
                       onClick={() => setOpen(false)}
-                      className="inline-flex w-full items-center gap-2 rounded-xl border border-white/15 bg-white/5 px-4 py-2 text-sm font-medium text-white/90 transition hover:border-white/45 hover:bg-white/10"
+                      className="inline-flex w-full items-center gap-2 rounded-xl border border-gray-200 bg-gray-50 px-4 py-2 text-sm font-medium text-gray-700 transition hover:border-gray-300 hover:bg-gray-100 dark:border-white/15 dark:bg-white/5 dark:text-white/90 dark:hover:border-white/45 dark:hover:bg-white/10"
                     >
                       {link.isExternal && <GithubMark />}
                       {link.label}
                     </a>
                   </li>
                 ))}
-                <li className="sm:hidden">
+
+                <li className="sm:hidden pt-2 mt-2 border-t border-gray-200 dark:border-white/10">
                   <button
                     type="button"
                     onClick={toggleTheme}
-                    className="inline-flex w-full items-center gap-2 rounded-xl border border-white/15 bg-white/5 px-4 py-2 text-sm font-medium text-white/90 transition hover:border-white/45 hover:bg-white/10"
+                    className="inline-flex w-full items-center gap-2 rounded-xl border border-gray-200 bg-gray-50 px-4 py-2 text-sm font-medium text-gray-700 transition hover:border-gray-300 hover:bg-gray-100 dark:border-white/15 dark:bg-white/5 dark:text-white/90 dark:hover:border-white/45 dark:hover:bg-white/10"
                     aria-label="Toggle theme"
                   >
                     {isDark ? <Sun size={18} /> : <Moon size={18} />}

components/BrandParticles.tsx

@@ -15,7 +15,8 @@ const generateParticles = (count: number) => {
     duration: Math.random() * 30 + 30, // 30s to 60s duration
     delay: Math.random() * -60, // Negative delay so they start already moving
     rotateDirection: Math.random() > 0.5 ? 1 : -1,
-    opacity: 0.1 + Math.random() * 0.15, // subtle opacity (0.1 to 0.25)
+    // Increased base opacity for light mode visibility
+    opacity: 0.3 + Math.random() * 0.3,
     borderRadius: Math.random() > 0.5 ? '2px' : '50%', // Mix of squares and circles
     xAnimStart: Math.random() * 100 - 50,
     xAnimEnd: Math.random() * -100 + 50,
@@ -49,7 +50,8 @@ export default function BrandParticles() {
   if (!mounted) return null;
 
   return (
-    <div className="fixed inset-0 pointer-events-none z-[-1] overflow-hidden">
+    // The parent div dynamically dims the particles in dark mode using `dark:opacity-40`
+    <div className="fixed inset-0 pointer-events-none z-[-1] overflow-hidden opacity-100 dark:opacity-40 transition-opacity duration-300">
       {particles.map((particle) => (
         <motion.div
           key={particle.id}