feat: Racing Cards landing page - Astro + Tailwind v4

- Mobile-first dark mode landing - Lucide icons (zero emojis) - Self-hostable (Dockerfile + nginx) - 10 card images generated with Nano Banana 2 - Sections: Hero, How It Works, Card Gallery, Features, Early Access, Footer - Simple HTML form (no Netlify dependency) - Zero JS output, static HTML
2026-03-08 12:42:09 +01:00
commit 9646a9684e
30 changed files with 7052 additions and 0 deletions
--- a/src/layouts/Layout.astro
+++ b/src/layouts/Layout.astro
@@ -0,0 +1,70 @@
+---
+interface Props {
+  title?: string;
+  description?: string;
+}
+
+const {
+  title = 'Racing Cards — Cartas, estrategia y carreras. Online.',
+  description = 'El card game de automovilismo por turnos. Trazados reales, partidas de 15 min y cero pay-to-win. Solo estrategia.',
+} = Astro.props;
+
+const canonicalURL = new URL(Astro.url.pathname, Astro.site || 'https://racingcards.com');
+const ogImage = new URL('/og-image.png', Astro.site || 'https://racingcards.com');
+---
+
+<!DOCTYPE html>
+<html lang="es" class="dark">
+<head>
+  <meta charset="utf-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+
+  <!-- SEO -->
+  <title>{title}</title>
+  <meta name="description" content={description} />
+  <link rel="canonical" href={canonicalURL} />
+  <meta name="robots" content="index, follow" />
+
+  <!-- Open Graph -->
+  <meta property="og:type" content="website" />
+  <meta property="og:title" content={title} />
+  <meta property="og:description" content={description} />
+  <meta property="og:image" content={ogImage} />
+  <meta property="og:url" content={canonicalURL} />
+  <meta property="og:locale" content="es_ES" />
+  <meta property="og:site_name" content="Racing Cards" />
+
+  <!-- Twitter -->
+  <meta name="twitter:card" content="summary_large_image" />
+  <meta name="twitter:title" content={title} />
+  <meta name="twitter:description" content={description} />
+  <meta name="twitter:image" content={ogImage} />
+
+  <!-- Favicon -->
+  <link rel="icon" type="image/svg+xml" href="/favicon.svg" />
+
+  <!-- Fonts -->
+  <link rel="preconnect" href="https://fonts.googleapis.com" />
+  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
+  <link
+    href="https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@400;500;700&family=Inter:wght@400;500;600&display=swap"
+    rel="stylesheet"
+  />
+
+  <!-- Styles -->
+  <style>
+    @import '../styles/global.css';
+  </style>
+</head>
+<body class="min-h-screen overflow-x-hidden">
+  <!-- Skip navigation -->
+  <a
+    href="#main-content"
+    class="sr-only focus:not-sr-only focus:fixed focus:top-4 focus:left-4 focus:z-50 focus:px-4 focus:py-2 focus:bg-primary focus:text-text focus:rounded-md"
+  >
+    Saltar al contenido
+  </a>
+
+  <slot />
+</body>
+</html>