feat(layout): add Basic and Header components for site layout

src/components/layout/parts/Header.astro

@@ -0,0 +1,74 @@
+---
+import { css } from '@styled-system/css'
+import SrJuggernautLogo from '@/components/SrJuggernautLogo.astro'
+import { srOnlyClass } from '@/styles/srOnly'
+
+const headerClass = css({
+  backgroundColor: 'neutral.2',
+  color: 'neutral.12'
+})
+
+const headerContainerClass = css({
+  display: 'flex',
+  alignItems: 'center',
+  justifyContent: 'space-between',
+  margin: '0 auto',
+  padding: 'md',
+  width: {
+    base: '100%',
+    sm: 'breakpoint-sm',
+    md: 'breakpoint-md',
+    lg: 'breakpoint-lg',
+    xl: 'breakpoint-xl',
+    '2xl': 'breakpoint-2xl'
+  }
+})
+
+const headerLogoClass = css({
+  fill: 'neutral.12',
+  width: '32px',
+  height: 'auto'
+})
+
+const headerMenuClass = css({
+  display: 'flex',
+  alignItems: 'center',
+  gap: 'md'
+})
+
+const headerMenuLinkClass = css({
+  display: 'inline-flex',
+  alignItems: 'center',
+  gap: 'sm',
+  paddingInline: 'md',
+  paddingBlock: 'sm',
+  borderRadius: 'sm',
+  textDecoration: 'none',
+  _hover: {
+    backgroundColor: 'primary.3'
+  }
+})
+---
+
+<header class={headerClass}>
+  <div class={headerContainerClass}>
+    <div>
+      <a href="/">
+        <SrJuggernautLogo className={headerLogoClass} />
+        <span class={srOnlyClass}>Ir al inicio</span>
+      </a>
+    </div>
+    <nav>
+      <menu class={headerMenuClass}>
+        <li>
+          <a
+            class={headerMenuLinkClass}
+            href="https://blog.juggernautplays.com"
+          >
+            Blog
+          </a>
+        </li>
+      </menu>
+    </nav>
+  </div>
+</header>