feat: home landing page

src/components/pages/Home/Hero.astro

@@ -0,0 +1,55 @@
+---
+import { css } from '@styled-system/css'
+import SrJuggernautLogo from '@/components/SrJuggernautLogo.astro'
+
+const heroSectionClass = css({
+  display: 'flex',
+  flexDirection: 'column',
+  alignItems: 'center',
+  justifyContent: 'center',
+  minHeight: '50vh',
+  background:
+    'linear-gradient(172deg, {colors.neutral.3} 0%, {colors.neutral.1} 78%)'
+})
+
+const heroContainerClass = css({
+  display: 'flex',
+  flexDirection: 'column',
+  alignItems: 'center',
+  justifyContent: 'center',
+  gap: 'sm'
+})
+
+const heroLogoClass = css({
+  fill: 'neutral.12',
+  width: {
+    base: '100%',
+    sm: 'breakpoint-sm'
+  },
+  height: '100%'
+})
+
+const heroTitleClass = css({
+  fontFamily: 'orbitron',
+  fontSize: 'calc(2rem + 2vw)',
+  textAlign: 'center',
+  fontWeight: '900',
+  color: 'neutral.12'
+})
+
+const heroDescriptionClass = css({
+  color: 'neutral.11',
+  textAlign: 'center',
+  fontSize: 'large'
+})
+---
+
+<section class={heroSectionClass}>
+  <div class={heroContainerClass}>
+    <SrJuggernautLogo className={heroLogoClass} />
+    <h1 class={heroTitleClass}>Juggernaut Plays</h1>
+    <p class={heroDescriptionClass}>
+      A veces hago cosas en internet, luego hablo de ellas.
+    </p>
+  </div>
+</section>