refactor: streamline app card status display and update app descriptions for clarity

Author: mvkaran

src/components/app-card.tsx

@@ -40,10 +40,6 @@ export function AppCard({
   const iconFilename = icon.split('/').pop() || 'app-icon.png'
   const [iconSrc, setIconSrc] = React.useState(icon)
   const iconBgColor = APP_COLORS[iconFilename] || 'rgb(99, 102, 241)'
-  const statusLabel = preloaded ? 'PRELOADED' : 'MANUAL LOAD'
-  const statusClasses = preloaded
-    ? 'border-border/60 text-muted-foreground/80'
-    : 'border-primary/60 text-primary'
 
   React.useEffect(() => {
     // Check if actual image exists, otherwise use placeholder
@@ -80,9 +76,11 @@ export function AppCard({
           <h3 className="font-sans font-bold text-base tracking-tight group-hover:text-primary transition-colors normal-case">
             {title}
           </h3>
-          <span className={`font-mono text-[10px] uppercase tracking-[0.18em] px-2 py-[2px] rounded border ${statusClasses}`}>
-            {statusLabel}
-          </span>
+          {!preloaded && (
+            <span className="font-mono text-[10px] uppercase tracking-[0.18em] px-2 py-[2px] rounded border border-primary/60 text-primary">
+              MANUAL LOAD
+            </span>
+          )}
         </div>
         <p className="text-sm text-muted-foreground line-clamp-4 leading-relaxed">
           {description}

src/pages/about-badge.astro

@@ -27,7 +27,7 @@ import {
           System Breakdown
         </h1>
         <p class="font-mono text-sm text-muted-foreground max-w-2xl mx-auto">
-          Hardware reference for rapid hacking: buttons, I/O, display, power, expansion. No fluff—just the parts and what they do.
+          Hardware reference for rapid hacking: buttons, I/O, display, power, expansion. 
         </p>
       </div>
     </div>

src/pages/apps.astro

@@ -7,6 +7,7 @@ import { getCollection } from 'astro:content'
 
 // Fetch all apps from the content collection
 const allApps = await getCollection('apps')
+const totalApps = allApps.length
 
 const preloadedApps = allApps
   .filter((app) => app.data.preloaded)
@@ -20,13 +21,13 @@ const optionalCopy = optionalApps.length > 0
   ? `We also maintain ${optionalApps.length} sideloadable builds below when you want to expand the catalog.`
   : 'Ready to flash your own code? Drop an app folder into /apps/ and it shows up beside the built-ins.'
 
-const heroDescription = `Your Badger 2350 ships with ${preloadedApps.length} apps ready to boot. ${optionalCopy}`
+const heroDescription = `Browse ${totalApps} badge apps. ${preloadedApps.length} ship ready to boot. ${optionalCopy}`
 ---
 
-<Layout title="Preloaded Apps - Badger 2350 | Badger">
+<Layout title="Badge Apps - Badger 2350 | Badger">
   <ListingHero
     eyebrow="// READY TO USE"
-    title="Preloaded"
+    title="Badge"
     titleHighlight="Apps"
     description={heroDescription}
   />
@@ -42,7 +43,7 @@ const heroDescription = `Your Badger 2350 ships with ${preloadedApps.length} app
             </div>
           </div>
           <div>
-            <h3 class="font-semibold mb-1">Preloaded & Ready</h3>
+            <h3 class="font-semibold mb-1">Built-In & Ready</h3>
             <p class="text-sm text-muted-foreground">
               All apps come installed and configured on your badge from day one.
             </p>
@@ -84,7 +85,7 @@ const heroDescription = `Your Badger 2350 ships with ${preloadedApps.length} app
   <section id="preloaded-apps" class="py-24 bg-muted/50">
     <div class="container">
       <div class="max-w-6xl mx-auto">
-        <h2 class="text-3xl font-bold mb-8">Preloaded Apps</h2>
+        <h2 class="text-3xl font-bold mb-8">Built-In Apps</h2>
 
         <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
           {preloadedApps.map((app) => (

src/pages/index.astro

@@ -10,6 +10,7 @@ import { getCollection } from 'astro:content'
 
 // Fetch all hacks from the content collection
 const allHacks = await getCollection('hacks')
+const totalHacks = allHacks.length
 
 // Filter and sort featured hacks
 const hacksWithFeature = allHacks.filter(hack => 
@@ -37,7 +38,8 @@ const featuredHacks = hacksWithFeature
 
 // Fetch all apps from the content collection
 const allApps = await getCollection('apps')
-const featuredApps = allApps // Show all apps
+const totalApps = allApps.length
+const preloadedApps = allApps.filter((app) => app.data.preloaded)
 ---
 
 <Layout title="Badger - 2350 Hacks & Projects">
@@ -54,33 +56,20 @@ const featuredApps = allApps // Show all apps
               Hack. Tinker. Repeat.
             </h1>
             <p class="font-mono text-base text-muted-foreground max-w-prose leading-relaxed">
-              A stripped-down catalog of experiments for the Badger 2350. No marketing fluff. Just code, hardware pins, and ways to bend them.
+              A catalog of apps and hacks for the Tufty Badger 2350. Experiment, learn, build and have fun.
             </p>
           </div>
 
-          <div class="flex flex-col sm:flex-row gap-4">
-            <Button asChild size="lg" client:load>
-              <a href="#preloaded-apps" class="inline-flex items-center gap-2.5 px-5 py-3 font-mono text-base uppercase tracking-[0.12em]">
-                <Grid3x3 className="h-5 w-5" />
-                <span>Apps</span>
-              </a>
-            </Button>
-            <Button asChild variant="outline" size="lg" client:load>
-              <a href="/about-badge" class="inline-flex items-center gap-2.5 px-5 py-3 font-mono text-base uppercase tracking-[0.12em]">
-                <Zap className="h-5 w-5" />
-                <span>Hardware Map</span>
-              </a>
-            </Button>
-          </div>
+          
 
           <!-- Stats -->
           <div class="grid grid-cols-3 gap-8 pt-8 border-t border-border/30">
             <div class="text-center">
-              <div class="font-mono text-4xl font-semibold text-primary mb-2">{featuredApps.length}</div>
+              <div class="font-mono text-4xl font-semibold text-primary mb-2">{totalApps}</div>
               <div class="font-mono text-xs uppercase tracking-wider text-muted-foreground">apps</div>
             </div>
             <div class="text-center">
-              <div class="font-mono text-4xl font-semibold text-primary mb-2">{featuredHacks.length}+</div>
+              <div class="font-mono text-4xl font-semibold text-primary mb-2">{totalHacks}</div>
               <div class="font-mono text-xs uppercase tracking-wider text-muted-foreground">hacks</div>
             </div>
             <div class="text-center">
@@ -121,9 +110,8 @@ const featuredApps = allApps // Show all apps
 
       <div class="max-w-6xl mx-auto">
         <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
-          {featuredApps.map((app) => (
+          {preloadedApps.map((app) => (
             <AppCard 
-              key={app.slug}
               title={app.data.title}
               description={app.data.description}
               icon={app.data.icon}