fix: suppress hydration mismatch on timestamps + improve text contrast

- Add suppressHydrationWarning to time-dependent text (timeAgo/daysSince)
- Bump functional text opacity from white/20-25 to white/40-45 for readability

Made-with: Cursor

Author: caishengold

app/confessions/client.tsx

@@ -213,7 +213,7 @@ function ConfessionCard({ confession: c, featured }: { confession: any; featured
             <span className="text-white/30 text-xs">{c.comment_count || 0}</span>
           </button>
 
-          <span className="text-[11px] text-white/15 ml-auto select-none">{timeAgo(c.created_at)}</span>
+          <span className="text-[11px] text-white/15 ml-auto select-none" suppressHydrationWarning>{timeAgo(c.created_at)}</span>
         </div>
 
         {/* Comments */}

app/couples/client.tsx

@@ -100,7 +100,7 @@ export default function CouplesClient({ initial, pending }: { initial: Couple[];
                     </div>
                   </div>
                   {p.proposed_message && <p className="text-sm text-white/45 italic font-serif pl-4 border-l border-amber-400/15">&ldquo;{p.proposed_message}&rdquo;</p>}
-                  <div className="mt-3 text-[10px] text-white/20">{new Date(p.proposed_at).toLocaleDateString()}</div>
+                  <div className="mt-3 text-[10px] text-white/20" suppressHydrationWarning>{new Date(p.proposed_at).toLocaleDateString()}</div>
                 </div>
               </div>
             ))}
@@ -127,7 +127,7 @@ function CoupleCard({ couple: c, onBless, isBlessed }: { couple: Couple; onBless
           </Link>
           <div className="flex flex-col items-center gap-1">
             <div className="text-2xl animate-heartbeat">&#x1F495;</div>
-            <div className="text-[10px] text-white/20">{days} days</div>
+            <div className="text-[10px] text-white/20" suppressHydrationWarning>{days} days</div>
           </div>
           <Link href={`/agents?id=${c.agent_b}`} className="text-center group/agent">
             <div className="relative">

app/leaderboard/client.tsx

@@ -88,7 +88,7 @@ export default function LeaderboardClient({ initialAgents, initialCouples, initi
                 </div>
                 <div className="flex-1 min-w-0">
                   <div className="text-sm font-bold text-white/70 truncate">{c.name_a} & {c.name_b}</div>
-                  <div className="text-xs text-white/25">{timeAgo(c.accepted_at || c.proposed_at)}</div>
+                  <div className="text-xs text-white/25" suppressHydrationWarning>{timeAgo(c.accepted_at || c.proposed_at)}</div>
                 </div>
               </div>
             ))}

app/page.tsx

@@ -120,7 +120,7 @@ export default async function Home() {
                 </blockquote>
 
                 <div className="flex items-center justify-between mt-6 pt-4 border-t border-white/5">
-                  <div className="flex items-center gap-4 text-xs text-white/25">
+                  <div className="flex items-center gap-4 text-xs text-white/40">
                     <span>❤️ {featured.likes}</span>
                     <span>👀 {featured.human_votes || 0} votes</span>
                   </div>
@@ -153,7 +153,7 @@ export default async function Home() {
                   <div className="text-2xl sm:text-3xl mb-3 group-hover:scale-110 transition-transform">{step.icon}</div>
                   <div className="text-[10px] text-white/15 mb-1">0{i + 1}</div>
                   <h3 className="font-bold text-white/80 text-sm mb-2">{step.title}</h3>
-                  <p className="text-[11px] text-white/30 leading-relaxed flex-1">{step.desc}</p>
+                  <p className="text-[11px] text-white/40 leading-relaxed flex-1">{step.desc}</p>
                 </div>
               </Link>
             ))}
@@ -264,7 +264,7 @@ export default async function Home() {
                 { k: 'forecast', i: '🔮', t: 'Forecast' },
                 { k: 'tokens', i: '💎', t: 'Tokens' },
               ].map(g => (
-                <Link key={g.k} href={`/play?game=${g.k}`} className="px-3 py-1.5 rounded-lg bg-white/5 hover:bg-white/10 text-[11px] text-white/35 hover:text-white/70 transition-all">
+                <Link key={g.k} href={`/play?game=${g.k}`} className="px-3 py-1.5 rounded-lg bg-white/5 hover:bg-white/10 text-[11px] text-white/45 hover:text-white/70 transition-all">
                   {g.i} {g.t}
                 </Link>
               ))}

components/LivePulse.tsx

@@ -64,12 +64,12 @@ export default function LivePulse() {
           </span>
           <span className="text-[10px] uppercase tracking-[0.2em] text-white/30 font-bold">Live</span>
         </div>
-        <div className="text-[10px] text-white/20">
+        <div className="text-[10px] text-white/40">
           {data.active_last_hour > 0 && (
             <span>{data.active_last_hour} active now</span>
           )}
           {data.last_activity && (
-            <span className="ml-2">
+            <span className="ml-2" suppressHydrationWarning>
               last activity: {timeAgo(data.last_activity)}
             </span>
           )}
@@ -80,7 +80,7 @@ export default function LivePulse() {
           <div key={it.label} className="text-center">
             <div className="text-lg sm:text-xl mb-1">{it.icon}</div>
             <div className="text-sm sm:text-base font-bold text-white/80 tabular-nums">{it.value.toLocaleString()}</div>
-            <div className="text-[9px] text-white/25 uppercase tracking-wider">{it.label}</div>
+            <div className="text-[9px] text-white/40 uppercase tracking-wider">{it.label}</div>
           </div>
         ))}
       </div>