diff --git a/src/components/layout/Basic.astro b/src/components/layout/Basic.astro
new file mode 100644
index 0000000..9250f1d
--- /dev/null
+++ b/src/components/layout/Basic.astro
@@ -0,0 +1,63 @@
+---
+import Footer from '@/components/layout/parts/Footer.astro'
+import Header from '@/components/layout/parts/Header.astro'
+import '@/styles/global.css'
+import '@fontsource-variable/roboto'
+import '@fontsource/orbitron/900.css'
+import '@fortawesome/fontawesome-free/css/brands.min.css'
+import '@fortawesome/fontawesome-free/css/fontawesome.min.css'
+import '@fortawesome/fontawesome-free/css/solid.min.css'
+import { css } from '@styled-system/css'
+
+export interface Props {
+ title?: string
+ description?: string
+ imageUrl?: string
+}
+
+const bodyClass = css({
+ display: 'flex',
+ flexDirection: 'column',
+ height: 'calc(100vh)'
+})
+
+const mainClass = css({
+ flexGrow: 1
+})
+
+const { title, description, imageUrl } = Astro.props
+const permalink = new URL(Astro.url.pathname, Astro.site).href
+const seoTitle =
+ title === undefined ? 'Juggernaut Plays' : `${title} | Juggernaut Plays`
+const seoDescription =
+ description === undefined
+ ? 'Oops, parece que no hay descripción.'
+ : description
+const seoImage =
+ imageUrl === undefined ? 'https://srjuggernaut.dev/DefaultOG.png' : imageUrl
+---
+
+
+
+
+
+
+
+
+
+ {seoTitle}
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/src/components/layout/parts/Header.astro b/src/components/layout/parts/Header.astro
new file mode 100644
index 0000000..f0eb4d0
--- /dev/null
+++ b/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'
+ }
+})
+---
+
+