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

bun.lock

@@ -6,6 +6,7 @@
       "name": "srjuggernaut_dev",
       "dependencies": {
         "@fontsource-variable/roboto": "^5.2.9",
+        "@fontsource/orbitron": "^5.2.8",
         "@srjuggernaut-dev/srjuggernaut-panda-preset": "^0.0.17",
         "astro": "^5.17.1",
       },
@@ -157,6 +158,8 @@
 
     "@fontsource-variable/roboto": ["@fontsource-variable/roboto@5.2.9", "", {}, "sha512-uH58g1An9Z4Efiviu0YuN8lvYf22TXidCx2++ZPpEegviaPaYQUwNbQZyr5lO2ae3pM07AolUabngLrlYtuzfA=="],
 
+    "@fontsource/orbitron": ["@fontsource/orbitron@5.2.8", "", {}, "sha512-ruzrDl5vnqNykk5DZWY0Ezj4aeFZSbCnwJTc/98ojNJHSsHhlhT2r7rwQrA5sptmF8JtB8TQTAvlfRvcV28RPw=="],
+
     "@hono/node-server": ["@hono/node-server@1.19.9", "", { "peerDependencies": { "hono": "^4" } }, "sha512-vHL6w3ecZsky+8P5MD+eFfaGTyCeOHUIFYMGpQGbrBTSmNNoxv0if69rEZ5giu36weC5saFuznL411gRX7bJDw=="],
 
     "@img/colour": ["@img/colour@1.0.0", "", {}, "sha512-A5P/LfWGFSl6nsckYtjw9da+19jB8hkJ6ACTGcDfEJ0aE+l2n2El7dsVM7UVHZQ9s2lmYMWlrS21YLy2IR1LUw=="],

package.json

@@ -11,6 +11,7 @@
   },
   "dependencies": {
     "@fontsource-variable/roboto": "^5.2.9",
+    "@fontsource/orbitron": "^5.2.8",
     "@srjuggernaut-dev/srjuggernaut-panda-preset": "^0.0.17",
     "astro": "^5.17.1"
   },

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>