Improved landing page with text visibility

src/app/page.tsx

@@ -35,51 +35,56 @@ 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>
 
         <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"
+              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>
   );
-}
+}