style(landing): enhance text contrast and readability across hero and feature sections

src/components/landing/LandingPage.tsx

@@ -573,11 +573,14 @@ function HeroSection() {
         </h1>
 
         {/* Tagline */}
-        <p style={{
-          fontSize: 'clamp(16px,2vw,18px)', color: 'var(--foreground)',
-          lineHeight: 1.6, maxWidth: 420, margin: '0 0 40px',
-          fontWeight: 400, letterSpacing: '0.01em', opacity: 0.85,
-        }}>
+        <p
+          className="text-slate-800 dark:text-slate-200"
+          style={{
+            fontSize: 'clamp(16px,2vw,18px)',
+            lineHeight: 1.6, maxWidth: 420, margin: '0 0 40px',
+            fontWeight: 400, letterSpacing: '0.01em',
+          }}
+        >
           Open-source developer productivity dashboard. Track GitHub streaks,
           PR velocity, and coding goals — automatically.
         </p>
@@ -672,8 +675,9 @@ function CommitTicker() {
         {doubled.map((c, i) => (
           <span
             key={i}
+            className="text-slate-600 dark:text-slate-400"
             style={{
-              fontFamily: MONO, fontSize: 12, color: 'var(--muted-foreground)',
+              fontFamily: MONO, fontSize: 12,
               display: 'inline-flex', alignItems: 'center', gap: 10,
             }}
           >
@@ -714,6 +718,8 @@ function AboutHighlightCard({
         transformOrigin: 'top center',
         transform: visible ? tiltStyle.transform : `perspective(1000px) rotateX(-90deg)`,
         transition: visible ? tiltStyle.transition : `opacity 0.6s cubic-bezier(0.175, 0.885, 0.32, 1.275) ${index * 80}ms, transform 0.6s cubic-bezier(0.175, 0.885, 0.32, 1.275) ${index * 80}ms`,
+        background: 'var(--card)',
+        border: '1px solid var(--border)',
         backdropFilter: 'blur(20px)',
         WebkitBackdropFilter: 'blur(20px)',
         cursor: 'pointer',
@@ -737,11 +743,14 @@ function AboutHighlightCard({
         }}>
           <Icon size={20} strokeWidth={1.8} aria-hidden="true" />
         </div>
-        <h3 style={{
-          fontFamily: DISP, fontWeight: 700,
-          fontSize: 19, color: TEXT, margin: '0 0 10px',
-          letterSpacing: 0,
-        }}>
+        <h3
+          className="text-slate-900 dark:text-white"
+          style={{
+            fontFamily: DISP, fontWeight: 700,
+            fontSize: 19, margin: '0 0 10px',
+            letterSpacing: 0,
+          }}
+        >
           {item.title}
         </h3>
         <p style={{ color: 'var(--foreground)', opacity: 0.85, fontSize: 14, lineHeight: 1.65, margin: 0 }}>
@@ -794,7 +803,10 @@ function AboutSection() {
           >
             A clearer home for your developer progress.
           </h2>
-          <p style={{ color: MUTED, fontSize: 16, lineHeight: 1.75, margin: '0 0 28px', maxWidth: 580 }}>
+          <p
+            className="text-slate-600 dark:text-slate-300"
+            style={{ fontSize: 16, lineHeight: 1.75, margin: '0 0 28px', maxWidth: 580 }}
+          >
             DevTrack helps developers, open-source contributors, and teams understand how their GitHub work is moving. It brings activity, pull requests, streaks, goals, and public profile insights into one calm dashboard so new users can quickly see what the platform is for.
           </p>
           <a href="#features" className="lnd-cta-secondary">
@@ -873,15 +885,21 @@ function StatItem({ value, label, delay }: { value: number; label: string; delay
         transition: `all 0.8s cubic-bezier(0.16,1,0.3,1) ${delay}ms`,
       }}
     >
-      <div style={{
-        fontFamily: MONO, fontWeight: 700,
-        fontSize: 'clamp(32px,5vw,52px)', color: TEXT,
-        lineHeight: 1, letterSpacing: '-0.03em',
-      }}>
+      <div
+        className="text-slate-900 dark:text-white"
+        style={{
+          fontFamily: MONO, fontWeight: 700,
+          fontSize: 'clamp(32px,5vw,52px)',
+          lineHeight: 1, letterSpacing: '-0.03em',
+        }}
+      >
         <Counter end={value} active={vis} />
-        <span style={{ color: 'var(--foreground)', fontSize: 'clamp(18px,3vw,28px)' }}>+</span>
+        <span className="text-slate-900 dark:text-white" style={{ fontSize: 'clamp(18px,3vw,28px)' }}>+</span>
       </div>
-      <div style={{ fontFamily: MONO, fontSize: 10, color: 'var(--muted-foreground)', letterSpacing: '0.12em', marginTop: 8 }}>
+      <div
+        className="text-slate-600 dark:text-slate-400"
+        style={{ fontFamily: MONO, fontSize: 10, letterSpacing: '0.12em', marginTop: 8 }}
+      >
         {label}
       </div>
     </div>
@@ -976,7 +994,7 @@ function FeatureCard({ f, index }: { f: typeof FEATURES[0]; index: number }) {
         // @ts-ignore
         ref.current = el;
       }}
-      className="relative overflow-hidden"
+      className="relative overflow-hidden bg-card dark:bg-slate-900 border border-border dark:border-slate-800"
       style={{
         display: 'flex', flexDirection: 'column', gap: 16,
         padding: '28px 24px', background: 'color-mix(in srgb, var(--card) 70%, transparent)', border: `1px solid ${BORDER}`,
@@ -1003,14 +1021,20 @@ function FeatureCard({ f, index }: { f: typeof FEATURES[0]; index: number }) {
       }}>
         <Icon size={28} strokeWidth={1.5} color="#818cf8" />
       </div>
-      <h3 style={{
-        fontFamily: DISP, fontWeight: 700,
-        fontSize: 'clamp(18px,2.5vw,22px)', color: TEXT,
-        letterSpacing: '-0.02em', margin: 0,
-      }}>
+      <h3
+        className="text-slate-900 dark:text-white"
+        style={{
+          fontFamily: DISP, fontWeight: 700,
+          fontSize: 'clamp(18px,2.5vw,22px)',
+          letterSpacing: '-0.02em', margin: 0,
+        }}
+      >
         {f.title}
       </h3>
-      <p style={{ fontSize: 15, color: MUTED, lineHeight: 1.6, margin: 0 }}>
+      <p
+        className="text-slate-600 dark:text-slate-300"
+        style={{ fontSize: 15, lineHeight: 1.6, margin: 0 }}
+      >
         {f.desc}
       </p>
     </div>
@@ -1041,9 +1065,9 @@ function FeaturesSection() {
         FEATURE PREVIEW
       </div>
       <p
+        className="text-slate-600 dark:text-slate-300"
         style={{
           textAlign: 'center',
-          color: MUTED,
           maxWidth: 600,
           margin: '0 auto 50px auto',
           lineHeight: 1.6,
@@ -1092,8 +1116,8 @@ function WhyDevTrackSection() {
         </h2>
 
         <p
+          className="text-slate-600 dark:text-slate-300"
           style={{
-            color: MUTED,
             maxWidth: 700,
             margin: "0 auto",
           }}
@@ -1111,6 +1135,7 @@ function WhyDevTrackSection() {
           return (
             <div
               key={item.title}
+              className="bg-card dark:bg-slate-900 border border-border dark:border-slate-800"
               style={{
                 padding: "24px",
                 border: `1px solid ${BORDER}`,
@@ -1126,8 +1151,8 @@ function WhyDevTrackSection() {
               />
 
               <h3
+                className="text-slate-900 dark:text-white"
                 style={{
-                  color: TEXT,
                   marginBottom: 10,
                   fontWeight: 700,
                 }}
@@ -1136,8 +1161,8 @@ function WhyDevTrackSection() {
               </h3>
 
               <p
+                className="text-slate-600 dark:text-slate-300"
                 style={{
-                  color: MUTED,
                   fontSize: 14,
                   lineHeight: 1.6,
                 }}
@@ -1199,8 +1224,8 @@ function HowItWorksSection() {
             <div className="group-hover:bg-indigo-500/20 group-hover:scale-110 transition-all duration-300 group-hover:border-indigo-500/40" style={{ width: 44, height: 44, borderRadius: '50%', background: 'rgba(129,140,248,0.1)', border: '1px solid rgba(129,140,248,0.2)', color: A, display: 'flex', alignItems: 'center', justifyContent: 'center', margin: '0 auto 20px', fontFamily: MONO, fontSize: 18, fontWeight: 700 }}>
               {step.num}
             </div>
-            <h3 style={{ fontFamily: DISP, fontWeight: 700, fontSize: 20, color: TEXT, margin: '0 0 12px' }}>{step.title}</h3>
-            <p style={{ fontSize: 15, color: MUTED, margin: 0, lineHeight: 1.6 }}>{step.desc}</p>
+            <h3 className="text-slate-900 dark:text-white" style={{ fontFamily: DISP, fontWeight: 700, fontSize: 20, margin: '0 0 12px' }}>{step.title}</h3>
+            <p className="text-slate-600 dark:text-slate-300" style={{ fontSize: 15, margin: 0, lineHeight: 1.6 }}>{step.desc}</p>
           </Link>
           );
         })}
@@ -1267,14 +1292,20 @@ function ContributeSection({ stats }: { stats: RepoStats }) {
               borderRadius: 8, padding: '20px 20px 16px',
             }}
           >
-            <div style={{ fontFamily: MONO, fontSize: 10, color: '#94a3b8', letterSpacing: '0.1em', marginBottom: 10 }}>
+            <div
+              className="text-slate-600 dark:text-slate-400"
+              style={{ fontFamily: MONO, fontSize: 10, letterSpacing: '0.1em', marginBottom: 10 }}
+            >
               {s.icon} {s.label}
             </div>
-            <div style={{
-              fontFamily: MONO, fontWeight: 700,
-              fontSize: 'clamp(26px,3.5vw,42px)', color: TEXT,
-              lineHeight: 1, letterSpacing: '-0.03em',
-            }}>
+            <div
+              className="text-slate-900 dark:text-white"
+              style={{
+                fontFamily: MONO, fontWeight: 700,
+                fontSize: 'clamp(26px,3.5vw,42px)',
+                lineHeight: 1, letterSpacing: '-0.03em',
+              }}
+            >
               <Counter end={s.value} active={vis} />
               {s.suffix && <span style={{ color: A, fontSize: '0.75em' }}>{s.suffix}</span>}
             </div>
@@ -1293,11 +1324,14 @@ function ContributeSection({ stats }: { stats: RepoStats }) {
           BUILT IN PUBLIC.<br />
           <span style={{ color: A }}>SHIP WITH US.</span>
         </h2>
-        <p style={{ fontSize: 16, color: MUTED, lineHeight: 1.7, margin: 0 }}>   {/* was '#555' */}
+        <p
+          className="text-slate-600 dark:text-slate-300"
+          style={{ fontSize: 16, lineHeight: 1.7, margin: 0 }}
+        >
           DevTrack is fully open source — MIT licensed, self-hostable, and built by developers
           who actually use it. Every widget, every metric, every API was contributed by
           someone in this list. {stats.goodFirstIssues > 0 && (
-            <span style={{ color: TEXT }}>
+            <span className="text-slate-900 dark:text-white">
               {stats.goodFirstIssues}{" "} issues are tagged good&nbsp;first&nbsp;issue and waiting right now.
             </span>
           )}