Fix/light mode UI (JhaSourav07#1212)

JhaSourav07 · web-flow · commit 5cf1c82578cd · 2026-05-29T13:33:02.000+05:30
## Description This PR resolves the faded layout issues in Light Mode, bringing it up to the "premium quality" aesthetic of the Dark Mode. It improves the contrast, visibility, and depth of key elements on the landing page, ensuring the design is accessible and engaging across both themes. **Specific changes:** - Updated `navbar.tsx` to include a frosted white glass effect and adjusted text/icon colors for light mode readability. - Improved `HeroSection.tsx` input fields and buttons with defined borders, a primary CTA highlight color (`#5C45FD`), and responsive hover states. - Adjusted `BrandParticles.tsx` base opacity and implemented responsive dark mode classes so the floating particles pop vibrantly on white backgrounds while remaining subtle in dark mode. Fixes JhaSourav07#1204 ## Pillar - [ ] 🎨 Pillar 1 — New Theme Design - [ ] 📐 Pillar 2 — Geometric SVG Improvement - [ ] 🕐 Pillar 3 — Timezone Logic Optimization - [X] 🛠️ Other (Bug fix, refactoring, docs) ## Visual Preview BEFORE <img width="1915" height="947" alt="Screenshot 2026-05-29 111153" src="https://github.com/user-attachments/assets/e4ce664e-eb56-46d4-8226-6cfcfae28de3" /> AFFTER <img width="1918" height="837" alt="Screenshot 2026-05-29 132641" src="https://github.com/user-attachments/assets/cb4b6dab-31a3-4314-9a11-8c99f912df6a" /> ## Checklist before requesting a review: - [X] I have read the `CONTRIBUTING.md` file. - [X] I have tested these changes locally (`localhost:3000/api/streak?user=YOUR_USERNAME`). - [X] I have run `npm run format` and `npm run lint` locally and resolved all errors (CI will fail otherwise). - [X] My commits follow the Conventional Commits format (e.g., `feat(themes): ...`, `fix(calculate): ...`). - [X] I have updated `README.md` if I added a new theme or URL parameter. - [X] I have started the repo. - [X] I have made sure that i have only one commit to merge in this PR. - [X] The SVG output matches the CommitPulse "premium quality" aesthetic standard (no raw elements, smooth animations, correct fonts). - [X] (Recommended) I joined the CommitPulse Discord community for contributor discussions, mentorship, and faster PR support.
diff --git a/app/components/HeroSection.tsx b/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>
   );
 }
diff --git a/app/components/navbar.tsx b/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} />}
diff --git a/components/BrandParticles.tsx b/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}
