From 908d91586cf2900f5b79d09068eca362fdc26a1f Mon Sep 17 00:00:00 2001
From: Chandrika Pala <chandrikapala04@gmail.com>
Date: Thu, 21 May 2026 21:49:00 +0530
Subject: [PATCH 1/2] Improved landing page with text visibility

---
 src/app/page.tsx | 33 +++++++++++++++++++--------------
 1 file changed, 19 insertions(+), 14 deletions(-)

diff --git a/src/app/page.tsx b/src/app/page.tsx
index b4147ffb..0520a3e9 100644
--- a/src/app/page.tsx
+++ b/src/app/page.tsx
@@ -35,35 +35,40 @@ export default async function HomePage() {
   ];
 
   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)]">
+    <main className="min-h-screen flex flex-col items-center px-4 py-24 bg-gradient-to-b from-slate-50 to-white dark:from-slate-950 dark:to-black">
+      {/* Hero Section */}
+      <div className="max-w-3xl text-center">
+        <h1 className="text-6xl font-extrabold mb-6 text-slate-950 dark:text-white tracking-tight drop-shadow-sm">
           DevTrack
         </h1>
-        <p className="text-xl text-[var(--muted-foreground)] mb-8">
+
+        <p className="text-xl text-slate-700 dark:text-slate-300 leading-relaxed mb-10">
           Open-source developer productivity dashboard. Track coding habits,
           visualize GitHub contributions, and hit your goals.
         </p>
-        <div className="flex gap-4 justify-center">
+
+        <div className="flex flex-col sm:flex-row 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"
+            className="bg-slate-950 text-white px-7 py-3 rounded-xl font-semibold hover:bg-slate-800 transition-all shadow-sm"
           >
             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"
+            className="border border-slate-400 text-slate-900 dark:text-white px-7 py-3 rounded-xl font-semibold hover:border-slate-950 dark:hover:border-white hover:bg-slate-100 dark:hover:bg-slate-900 transition-all"
           >
             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">
+      {/* Features Section */}
+      <section className="w-full max-w-6xl mt-32">
+        <h2 className="text-4xl font-bold text-center text-slate-950 dark:text-white mb-14">
           Everything you need to track your coding growth
         </h2>
 
@@ -71,15 +76,15 @@ export default async function HomePage() {
           {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"
+              className="border border-slate-200 dark:border-slate-800 rounded-2xl p-7 bg-white dark:bg-slate-900 hover:border-slate-400 dark:hover:border-slate-600 hover:shadow-lg hover:-translate-y-1 transition-all"
             >
-              <div className="text-4xl mb-4">{feature.icon}</div>
+              <div className="w-14 h-14 rounded-2xl bg-slate-100 dark:bg-slate-800 flex items-center justify-center text-3xl mb-5">{feature.icon}</div>
 
-              <h3 className="text-lg font-semibold text-[var(--foreground)] mb-2">
+              <h3 className="text-xl font-semibold text-slate-950 dark:text-white mb-3">
                 {feature.title}
               </h3>
 
-              <p className="text-[var(--muted-foreground)] text-sm leading-relaxed">
+              <p className="text-slate-700 dark:text-slate-300 text-sm leading-relaxed">
                 {feature.description}
               </p>
             </div>
@@ -88,4 +93,4 @@ export default async function HomePage() {
       </section>
     </main>
   );
-}
+}
\ No newline at end of file

From 0fe72ed9e7b549fe4eaf6ddf931e83ac557afc9f Mon Sep 17 00:00:00 2001
From: Chandrika Pala <chandrikapala04@gmail.com>
Date: Fri, 22 May 2026 20:49:29 +0530
Subject: [PATCH 2/2] Improved styling

---
 src/app/page.tsx | 22 ++++++++++++----------
 1 file changed, 12 insertions(+), 10 deletions(-)

diff --git a/src/app/page.tsx b/src/app/page.tsx
index 0520a3e9..96f1d9fc 100644
--- a/src/app/page.tsx
+++ b/src/app/page.tsx
@@ -35,14 +35,14 @@ export default async function HomePage() {
   ];
 
   return (
-    <main className="min-h-screen flex flex-col items-center px-4 py-24 bg-gradient-to-b from-slate-50 to-white dark:from-slate-950 dark:to-black">
+    <main className="min-h-screen flex flex-col items-center px-4 py-24 bg-[var(--background)]">
       {/* Hero Section */}
       <div className="max-w-3xl text-center">
-        <h1 className="text-6xl font-extrabold mb-6 text-slate-950 dark:text-white tracking-tight drop-shadow-sm">
+        <h1 className="text-6xl font-extrabold mb-6 text-[var(--foreground)] tracking-tight drop-shadow-sm">
           DevTrack
         </h1>
 
-        <p className="text-xl text-slate-700 dark:text-slate-300 leading-relaxed mb-10">
+        <p className="text-xl text-[var(--muted-foreground)] leading-relaxed mb-10">
           Open-source developer productivity dashboard. Track coding habits,
           visualize GitHub contributions, and hit your goals.
         </p>
@@ -50,7 +50,7 @@ export default async function HomePage() {
         <div className="flex flex-col sm:flex-row gap-4 justify-center">
           <Link
             href="/api/auth/signin/github?callbackUrl=/dashboard"
-            className="bg-slate-950 text-white px-7 py-3 rounded-xl font-semibold hover:bg-slate-800 transition-all shadow-sm"
+            className="bg-[var(--foreground)] text-[var(--background)] px-7 py-3 rounded-xl font-semibold hover:opacity-90 transition-all shadow-sm"
           >
             Sign in with GitHub
           </Link>
@@ -59,7 +59,7 @@ export default async function HomePage() {
             href="https://github.com/Priyanshu-byte-coder/devtrack"
             target="_blank"
             rel="noopener noreferrer"
-            className="border border-slate-400 text-slate-900 dark:text-white px-7 py-3 rounded-xl font-semibold hover:border-slate-950 dark:hover:border-white hover:bg-slate-100 dark:hover:bg-slate-900 transition-all"
+            className="border border-[var(--border)] text-[var(--foreground)] px-7 py-3 rounded-xl font-semibold hover:border-[var(--foreground)] hover:bg-[var(--card-muted)] transition-all"
           >
             View on GitHub
           </a>
@@ -68,7 +68,7 @@ export default async function HomePage() {
 
       {/* Features Section */}
       <section className="w-full max-w-6xl mt-32">
-        <h2 className="text-4xl font-bold text-center text-slate-950 dark:text-white mb-14">
+        <h2 className="text-4xl font-bold text-center text-[var(--foreground)] mb-14">
           Everything you need to track your coding growth
         </h2>
 
@@ -76,15 +76,17 @@ export default async function HomePage() {
           {features.map((feature) => (
             <div
               key={feature.title}
-              className="border border-slate-200 dark:border-slate-800 rounded-2xl p-7 bg-white dark:bg-slate-900 hover:border-slate-400 dark:hover:border-slate-600 hover:shadow-lg hover:-translate-y-1 transition-all"
+              className="border border-[var(--border)] rounded-2xl p-7 bg-[var(--card-muted)] hover:border-[var(--muted-foreground)] hover:shadow-lg hover:-translate-y-1 transition-all duration-300"
             >
-              <div className="w-14 h-14 rounded-2xl bg-slate-100 dark:bg-slate-800 flex items-center justify-center text-3xl mb-5">{feature.icon}</div>
+              <div className="w-14 h-14 rounded-2xl bg-[var(--card)] flex items-center justify-center text-3xl mb-5">
+                {feature.icon}
+              </div>
 
-              <h3 className="text-xl font-semibold text-slate-950 dark:text-white mb-3">
+              <h3 className="text-xl font-semibold text-[var(--foreground)] mb-3">
                 {feature.title}
               </h3>
 
-              <p className="text-slate-700 dark:text-slate-300 text-sm leading-relaxed">
+              <p className="text-[var(--muted-foreground)] text-sm leading-relaxed">
                 {feature.description}
               </p>
             </div>