From 489328ff49147d799908f3b33b562e70dd55e1ff Mon Sep 17 00:00:00 2001
From: BCA-krishna <krishnapatel1284@gmail.com>
Date: Thu, 21 May 2026 20:31:31 +0530
Subject: [PATCH 1/2] feat: enhance landing page UI and responsiveness

---
 src/app/page.tsx | 135 +++++++++++++++++++++++++++++------------------
 1 file changed, 85 insertions(+), 50 deletions(-)

diff --git a/src/app/page.tsx b/src/app/page.tsx
index b4147ffb..da3b32dd 100644
--- a/src/app/page.tsx
+++ b/src/app/page.tsx
@@ -33,59 +33,94 @@ export default async function HomePage() {
         "Share your developer stats and achievements with the world.",
     },
   ];
+return (
+  <main className="min-h-screen flex flex-col items-center px-6 py-24 bg-gradient-to-b from-slate-950 via-slate-900 to-slate-950 overflow-hidden">
+    
+    {/* HERO SECTION */}
+    <div className="max-w-3xl text-center animate-fade-in px-2">
+      
+      <h1 className="text-5xl sm:text-6xl md:text-7xl font-extrabold mb-6 tracking-tight leading-tight text-white">
+        DevTrack
+      </h1>
 
-  return (
-    <main className="min-h-screen flex flex-col items-center px-4 py-20">
-      <div className="max-w-2xl text-center">
-        <h1 className="text-5xl font-bold mb-4 text-[var(--foreground)]">
-          DevTrack
-        </h1>
-        <p className="text-xl text-[var(--muted-foreground)] mb-8">
-          Open-source developer productivity dashboard. Track coding habits,
-          visualize GitHub contributions, and hit your goals.
-        </p>
-        <div className="flex gap-4 justify-center">
-          <Link
-            href="/api/auth/signin/github?callbackUrl=/dashboard"
-            className="bg-white text-slate-900 px-6 py-3 rounded-lg font-semibold hover:bg-slate-100 transition"
-          >
-            Sign in with GitHub
-          </Link>
-          <a
-            href="https://github.com/Priyanshu-byte-coder/devtrack"
-            target="_blank"
-            rel="noopener noreferrer"
-            className="border border-[var(--border)] text-[var(--foreground)] px-6 py-3 rounded-lg font-semibold hover:border-[var(--foreground)] transition"
-          >
-            View on GitHub
-          </a>
-        </div>
+      <p className="text-lg sm:text-xl md:text-2xl text-slate-300 mb-10 leading-relaxed max-w-2xl mx-auto">
+        Open-source developer productivity dashboard. Track coding habits,
+        visualize GitHub contributions, and hit your goals.
+      </p>
+
+      {/* BUTTONS */}
+      <div className="flex flex-col sm:flex-row gap-4 justify-center items-center">
+        
+        <Link
+          href="/api/auth/signin/github?callbackUrl=/dashboard"
+          className="w-full sm:w-auto bg-white text-slate-900 px-8 py-3 rounded-2xl font-semibold shadow-lg hover:shadow-2xl hover:scale-105 hover:bg-slate-100 transition-all duration-300"
+        >
+          Sign in with GitHub
+        </Link>
+
+        <a
+          href="https://github.com/Priyanshu-byte-coder/devtrack"
+          target="_blank"
+          rel="noopener noreferrer"
+          className="w-full sm:w-auto border border-white/20 text-white px-8 py-3 rounded-2xl font-semibold hover:border-white hover:bg-white/10 hover:scale-105 transition-all duration-300"
+        >
+          View on GitHub
+        </a>
       </div>
+    </div>
 
-      <section className="w-full max-w-6xl mt-24">
-        <h2 className="text-3xl font-bold text-center text-[var(--foreground)] mb-12">
-          Everything you need to track your coding growth
-        </h2>
+    {/* FEATURES SECTION */}
+    <section className="w-full max-w-7xl mt-28 px-2">
+      
+      <h2 className="text-3xl sm:text-4xl md:text-5xl font-bold text-center text-white mb-14 md:mb-16 tracking-tight leading-tight px-4">
+        Everything you need to track your coding growth
+      </h2>
 
-        <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-6">
-          {features.map((feature) => (
-            <div
-              key={feature.title}
-              className="border border-[var(--border)] rounded-2xl p-6 bg-[var(--card)] hover:border-[var(--muted-foreground)] transition"
-            >
-              <div className="text-4xl mb-4">{feature.icon}</div>
+      <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-8">
+        
+        {features.map((feature) => (
+          
+          <div
+  key={feature.title}
+  className="
+    group
+    relative
+    overflow-hidden
+    rounded-3xl
+    border border-white/10
+    bg-white/5
+    backdrop-blur-md
+    p-8
+    shadow-lg
+    transition-all
+    duration-500
+    hover:-translate-y-3
+    hover:shadow-[0_20px_60px_rgba(59,130,246,0.25)]
+    hover:border-blue-400/30
+    hover:bg-white/10
+  "
+>
+  {/* GLOW EFFECT */}
+  <div className="absolute inset-0 opacity-0 group-hover:opacity-100 transition duration-500 bg-gradient-to-br from-blue-500/10 via-cyan-400/5 to-transparent" />
+            
+            {/* ICON */}
+    <div className="relative text-5xl mb-6 transition-all duration-500 group-hover:scale-125 group-hover:-translate-y-2 group-hover:rotate-3">
+      {feature.icon}
+    </div>
 
-              <h3 className="text-lg font-semibold text-[var(--foreground)] mb-2">
-                {feature.title}
-              </h3>
+            {/* TITLE */}
+    <h3 className="text-xl font-bold text-white mb-3 transition-colors duration-300 group-hover:text-blue-300">
+      {feature.title}
+    </h3>
 
-              <p className="text-[var(--muted-foreground)] text-sm leading-relaxed">
-                {feature.description}
-              </p>
-            </div>
-          ))}
-        </div>
-      </section>
-    </main>
-  );
-}
+            {/* DESCRIPTION */}
+    <p className="relative text-slate-300 text-base leading-relaxed">
+      {feature.description}
+    </p>
+          </div>
+        ))}
+      </div>
+    </section>
+  </main>
+);
+}
\ No newline at end of file

From 1cb17c15fd1da628e309c972e325034abcacea00 Mon Sep 17 00:00:00 2001
From: BCA-krishna <krishnapatel1284@gmail.com>
Date: Fri, 22 May 2026 16:18:32 +0530
Subject: [PATCH 2/2] fix: replace hardcoded colors with theme variables

---
 src/app/page.tsx | 187 ++++++++++++++++++++++++-----------------------
 1 file changed, 97 insertions(+), 90 deletions(-)

diff --git a/src/app/page.tsx b/src/app/page.tsx
index da3b32dd..d11df3cf 100644
--- a/src/app/page.tsx
+++ b/src/app/page.tsx
@@ -1,3 +1,4 @@
+
 import Link from "next/link";
 import { getServerSession } from "next-auth";
 import { authOptions } from "@/lib/auth";
@@ -33,94 +34,100 @@ export default async function HomePage() {
         "Share your developer stats and achievements with the world.",
     },
   ];
-return (
-  <main className="min-h-screen flex flex-col items-center px-6 py-24 bg-gradient-to-b from-slate-950 via-slate-900 to-slate-950 overflow-hidden">
-    
-    {/* HERO SECTION */}
-    <div className="max-w-3xl text-center animate-fade-in px-2">
-      
-      <h1 className="text-5xl sm:text-6xl md:text-7xl font-extrabold mb-6 tracking-tight leading-tight text-white">
-        DevTrack
-      </h1>
-
-      <p className="text-lg sm:text-xl md:text-2xl text-slate-300 mb-10 leading-relaxed max-w-2xl mx-auto">
-        Open-source developer productivity dashboard. Track coding habits,
-        visualize GitHub contributions, and hit your goals.
-      </p>
-
-      {/* BUTTONS */}
-      <div className="flex flex-col sm:flex-row gap-4 justify-center items-center">
-        
-        <Link
-          href="/api/auth/signin/github?callbackUrl=/dashboard"
-          className="w-full sm:w-auto bg-white text-slate-900 px-8 py-3 rounded-2xl font-semibold shadow-lg hover:shadow-2xl hover:scale-105 hover:bg-slate-100 transition-all duration-300"
-        >
-          Sign in with GitHub
-        </Link>
-
-        <a
-          href="https://github.com/Priyanshu-byte-coder/devtrack"
-          target="_blank"
-          rel="noopener noreferrer"
-          className="w-full sm:w-auto border border-white/20 text-white px-8 py-3 rounded-2xl font-semibold hover:border-white hover:bg-white/10 hover:scale-105 transition-all duration-300"
-        >
-          View on GitHub
-        </a>
-      </div>
-    </div>
-
-    {/* FEATURES SECTION */}
-    <section className="w-full max-w-7xl mt-28 px-2">
-      
-      <h2 className="text-3xl sm:text-4xl md:text-5xl font-bold text-center text-white mb-14 md:mb-16 tracking-tight leading-tight px-4">
-        Everything you need to track your coding growth
-      </h2>
-
-      <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-8">
-        
-        {features.map((feature) => (
-          
-          <div
-  key={feature.title}
-  className="
-    group
-    relative
-    overflow-hidden
-    rounded-3xl
-    border border-white/10
-    bg-white/5
-    backdrop-blur-md
-    p-8
-    shadow-lg
-    transition-all
-    duration-500
-    hover:-translate-y-3
-    hover:shadow-[0_20px_60px_rgba(59,130,246,0.25)]
-    hover:border-blue-400/30
-    hover:bg-white/10
-  "
->
-  {/* GLOW EFFECT */}
-  <div className="absolute inset-0 opacity-0 group-hover:opacity-100 transition duration-500 bg-gradient-to-br from-blue-500/10 via-cyan-400/5 to-transparent" />
-            
-            {/* ICON */}
-    <div className="relative text-5xl mb-6 transition-all duration-500 group-hover:scale-125 group-hover:-translate-y-2 group-hover:rotate-3">
-      {feature.icon}
-    </div>
-
-            {/* TITLE */}
-    <h3 className="text-xl font-bold text-white mb-3 transition-colors duration-300 group-hover:text-blue-300">
-      {feature.title}
-    </h3>
-
-            {/* DESCRIPTION */}
-    <p className="relative text-slate-300 text-base leading-relaxed">
-      {feature.description}
-    </p>
-          </div>
-        ))}
+
+  return (
+    <main className="min-h-screen flex flex-col items-center px-6 py-16 md:py-20 bg-[var(--background)] overflow-hidden">
+
+      {/* HERO SECTION */}
+      <div className="max-w-3xl text-center animate-fade-in px-2">
+
+        <h1 className="text-5xl sm:text-6xl md:text-7xl font-extrabold mb-6 tracking-tight leading-tight text-[var(--foreground)]">
+          DevTrack
+        </h1>
+
+        <p className="text-lg sm:text-xl md:text-2xl text-[var(--muted-foreground)] mb-8 leading-relaxed max-w-2xl mx-auto">
+          Open-source developer productivity dashboard. Track coding habits,
+          visualize GitHub contributions, and hit your goals.
+        </p>
+
+        {/* BUTTONS */}
+        <div className="flex flex-col sm:flex-row gap-4 justify-center items-center">
+
+          <Link
+            href="/api/auth/signin/github?callbackUrl=/dashboard"
+            className="w-full sm:w-auto bg-[var(--foreground)] text-[var(--background)] px-8 py-3 rounded-2xl font-semibold shadow-lg hover:scale-105 transition-all duration-300"
+          >
+            Sign in with GitHub
+          </Link>
+
+          <a
+            href="https://github.com/Priyanshu-byte-coder/devtrack"
+            target="_blank"
+            rel="noopener noreferrer"
+            className="w-full sm:w-auto border border-[var(--border)] text-[var(--foreground)] px-8 py-3 rounded-2xl font-semibold hover:bg-[var(--card)] hover:scale-105 transition-all duration-300"
+          >
+            View on GitHub
+          </a>
+        </div>
       </div>
-    </section>
-  </main>
-);
-}
\ No newline at end of file
+
+      {/* FEATURES SECTION */}
+      <section className="w-full max-w-7xl mt-20 md:mt-24 px-2">
+
+        <h2 className="text-3xl sm:text-4xl md:text-5xl font-bold text-center text-[var(--foreground)] mb-14 md:mb-16 tracking-tight leading-tight px-4">
+          Everything you need to track your coding growth
+        </h2>
+
+        <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-8">
+
+          {features.map((feature) => (
+
+            <div
+              key={feature.title}
+              className="
+              group
+              relative
+              overflow-hidden
+              rounded-3xl
+              border border-[var(--border)]
+              bg-[var(--card)]
+              p-8
+              shadow-lg
+              transition-all
+              duration-500
+              ease-out
+              hover:-translate-y-4
+              hover:scale-[1.02]
+              hover:shadow-2xl
+              "
+            >
+
+              {/* GLOW EFFECT */}
+              <div className="absolute inset-0 opacity-0 group-hover:opacity-100 transition-all duration-500 bg-[radial-gradient(circle_at_top,rgba(255,255,255,0.08),transparent_70%)]" />
+
+              {/* BACKGROUND SHINE */}
+              <div className="absolute -top-10 -right-10 h-32 w-32 rounded-full opacity-0 transition-all duration-500 group-hover:opacity-100 bg-[rgba(255,255,255,0.05)] blur-3xl" />
+
+              {/* ICON */}
+              <div className="relative text-5xl mb-6 transition-all duration-500 ease-out group-hover:scale-125 group-hover:-translate-y-3 group-hover:rotate-6">
+                {feature.icon}
+              </div>
+
+              {/* TITLE */}
+              <h3 className="text-xl font-bold text-[var(--foreground)] mb-3 transition-all duration-300 group-hover:tracking-wide">
+                {feature.title}
+              </h3>
+
+              {/* DESCRIPTION */}
+              <p className="relative text-[var(--muted-foreground)] text-base leading-relaxed">
+                {feature.description}
+              </p>
+            </div>
+          ))}
+        </div>
+      </section>
+    </main>
+  );
+}
+
+