feat: add Hero component with Orbitron font to home page

- Add @fontsource/orbitron dependency for custom font styling
- Create Hero.astro component featuring logo, title, and description
- Update index.astro to render Hero component instead of basic heading
- Enhances homepage visual appeal with responsive grid layout and Orbitron font for branding

src/components/pages/home/Hero.astro

@@ -0,0 +1,51 @@
+---
+import SrJuggernautLogo from '@/components/SrJuggernautLogo.astro'
+import { containerClass } from '@/styles/container'
+import '@fontsource/orbitron/900.css'
+import { css, cx } from '@styled-system/css'
+
+const heroContainerClass = cx(
+  containerClass,
+  css({
+    display: 'grid',
+    gridTemplateColumns: {
+      base: '1fr',
+      md: '1fr 1fr'
+    },
+    alignItems: 'center',
+    justifyContent: 'center',
+    minHeight: '60vh',
+    gap: 'md'
+  })
+)
+
+const heroLogoClass = css({
+  fill: 'neutral.12',
+  width: '100%'
+})
+
+const heroHeaderClass = css({
+  fontSize: '50px',
+  fontFamily: 'Orbitron',
+  fontWeight: '900',
+  textAlign: 'center'
+})
+
+const heroDescriptionClass = css({
+  fontSize: 'h2',
+  color: 'neutral.12',
+  textAlign: 'center'
+})
+---
+
+<section>
+  <div class={heroContainerClass}>
+    <div>
+      <SrJuggernautLogo className={heroLogoClass} />
+    </div>
+    <div>
+      <h1 class={heroHeaderClass}>SrJuggernaut Dev</h1>
+      <p class={heroDescriptionClass}>Unstoppable by design.</p>
+    </div>
+  </div>
+</section>

src/pages/index.astro

@@ -1,8 +1,9 @@
 ---
 import { css } from '@styled-system/css'
 import BasicLayout from '@/components/layout/Basic.astro'
+import Hero from '@/components/pages/home/Hero.astro'
 ---
 
 <BasicLayout>
-  <h1 class={css({ fontSize: 'h1', fontWeight: 'bold' })}>Home</h1>
+  <Hero />
 </BasicLayout>