Apply Typography components and semantic tokens to remaining pages

saadshahd · saadshahd · commit fa796b7243cd · 2025-10-29T21:33:41.000Z
Replaced raw HTML with design system components for consistency.

Changes:
- blog.astro: Use Heading/Body components instead of raw h1/p
- statsbomb.astro: Replace border-gray-200 with border-neutral-light

All pages now use design system components exclusively.
diff --git a/src/pages/blog.astro b/src/pages/blog.astro
@@ -1,16 +1,18 @@
 ---
 import Layout from '../layouts/Layout.astro';
+import Heading from '../components/typography/Heading.astro';
+import Body from '../components/typography/Body.astro';
 ---
 
 <Layout title="Blog - Saad Shahd">
   <div class="max-w-6xl mx-auto px-6 py-20">
-    <h1 class="text-2xl font-bold mb-12"><span>Blog</span></h1>
-    <p class="text-xl text-neutral mb-16">
+    <Heading level={1} as="h1" class="mb-12"><span>Blog</span></Heading>
+    <Body size="xl" as="p" class="text-neutral mb-16">
       Technical articles on systems, architecture, and engineering practices
-    </p>
+    </Body>
 
-    <div class="text-neutral">
+    <Body as="div" class="text-neutral">
       No posts yet. Check back soon!
-    </div>
+    </Body>
   </div>
 </Layout>
diff --git a/src/pages/portfolio/statsbomb.astro b/src/pages/portfolio/statsbomb.astro
@@ -32,7 +32,7 @@ import Body from '../../components/typography/Body.astro';
       </Body>
     </div>
 
-    <hr class="border-gray-200 my-12" />
+    <hr class="border-neutral-light my-12" />
 
     <!-- Problem Section -->
     <section class="mb-16">
@@ -90,7 +90,7 @@ import Body from '../../components/typography/Body.astro';
       </div>
     </section>
 
-    <hr class="border-gray-200 my-12" />
+    <hr class="border-neutral-light my-12" />
 
     <!-- Footer Navigation -->
     <div class="flex justify-between items-center">
