carlos/racing-cards-landing
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity
Files
main
racing-cards-landing/dist/index.html
Mambo 9646a9684e 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:43:37 +01:00

47 lines
25 KiB
HTML
Raw Permalink Blame History

<!DOCTYPE html><html lang="es" class="dark" data-astro-cid-sckkx6r4> <head><meta charset="utf-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><!-- SEO --><title>Racing Cards — Cartas, estrategia y carreras. Online.</title><meta name="description" content="El card game de automovilismo por turnos. Trazados reales, partidas de 15 min y cero pay-to-win. Solo estrategia."><link rel="canonical" href="https://racingcards.com/"><meta name="robots" content="index, follow"><!-- Open Graph --><meta property="og:type" content="website"><meta property="og:title" content="Racing Cards — Cartas, estrategia y carreras. Online."><meta property="og:description" content="El card game de automovilismo por turnos. Trazados reales, partidas de 15 min y cero pay-to-win. Solo estrategia."><meta property="og:image" content="https://racingcards.com/og-image.png"><meta property="og:url" content="https://racingcards.com/"><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="Racing Cards — Cartas, estrategia y carreras. Online."><meta name="twitter:description" content="El card game de automovilismo por turnos. Trazados reales, partidas de 15 min y cero pay-to-win. Solo estrategia."><meta name="twitter:image" content="https://racingcards.com/og-image.png"><!-- 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 --><link rel="stylesheet" href="/_astro/index.BfoiI1Is.css"></head> <body class="min-h-screen overflow-x-hidden" data-astro-cid-sckkx6r4> <!-- 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" data-astro-cid-sckkx6r4>
Saltar al contenido
</a> <header class="sticky top-0 z-50 flex items-center justify-between px-4 py-3 bg-bg/90 backdrop-blur-md border-b border-border"> <span class="text-text text-xl font-bold font-heading tracking-tight">Racing Cards</span> <a href="#early-access" class="bg-primary/10 text-primary px-4 py-1.5 rounded-full text-sm font-bold hover:bg-primary/20 transition-colors">
Acceso anticipado
</a> </header> <main id="main-content"> <section class="relative flex flex-col items-center justify-center text-center min-h-screen px-4 py-16 overflow-hidden"> <!-- Background gradient --> <div class="absolute inset-0 -z-10 bg-[radial-gradient(ellipse_at_center,_rgba(225,6,0,0.15)_0%,_transparent_60%)]"></div> <!-- Speed lines decoration --> <div class="speed-lines"></div> <!-- Content --> <div class="flex flex-col gap-4 max-w-md lg:max-w-lg relative z-10"> <!-- Badge --> <div class="inline-flex items-center justify-center gap-2 bg-primary/20 text-accent rounded-full px-3 py-1 text-xs font-bold w-fit mx-auto border border-primary/30"> <span class="relative flex h-2 w-2"> <span class="animate-ping absolute inline-flex h-full w-full rounded-full bg-primary opacity-75"></span> <span class="relative inline-flex rounded-full h-2 w-2 bg-primary"></span> </span>
Acceso Anticipado Abierto
</div> <!-- Heading --> <h1 class="font-heading text-text text-4xl md:text-5xl lg:text-6xl font-bold leading-[1.1] tracking-tight">
Cartas, estrategia<br>y carreras. <span class="text-primary">Online.</span> </h1> <!-- Subtitle --> <p class="text-text-muted text-lg leading-relaxed mt-2 lg:text-xl">
El card game de automovilismo por turnos. Trazados reales, partidas de 15 min y cero pay-to-win. Solo estrategia.
</p> <!-- CTA --> <a href="#early-access" class="inline-flex items-center justify-center w-full sm:w-auto min-w-[220px] h-14 px-8 mt-4
bg-primary text-text text-lg font-bold rounded-full
shadow-[0_0_20px_rgba(225,6,0,0.4)]
hover:shadow-[0_0_30px_rgba(225,6,0,0.6)] hover:-translate-y-0.5
transition-all duration-200 cursor-pointer">
Quiero acceso anticipado
</a> <!-- Trust text --> <p class="text-text-disabled text-sm mt-1">
Gratis. Sin tarjeta. Te avisamos cuando este listo.
</p> </div> <!-- Floating card visual --> <div class="mt-12 relative w-56 h-72 mx-auto lg:mt-8" style="perspective: 1000px;"> <div class="absolute inset-0 bg-gradient-to-br from-accent/40 to-primary/40 rounded-xl blur-xl opacity-50 scale-95 translate-y-4"></div> <div class="w-full h-full bg-surface rounded-xl border border-white/10 overflow-hidden shadow-2xl relative flex flex-col
hover:rotate-0 transition-transform duration-500" style="transform: rotateY(8deg) rotateZ(2deg);"> <!-- Card top half — use hero-card image if available --> <div class="h-1/2 bg-gradient-to-br from-slate-800 to-slate-900 p-4 relative overflow-hidden"> <img src="/images/cards/hero-card.png" alt="Carta de Racing Cards - Trazada Perfecta" class="absolute inset-0 w-full h-full object-cover" loading="eager" onerror="this.style.display='none'"> <div class="absolute top-2 left-2 bg-bg/80 px-2 py-1 rounded text-xs font-bold text-accent z-10">CURVA</div> </div> <!-- Card bottom half --> <div class="p-4 flex flex-col flex-1 bg-surface"> <h3 class="font-heading font-bold text-lg text-text mb-1">Trazada Perfecta</h3> <p class="text-xs text-text-muted flex-1">
Ignora la penalizacion de desgaste en la proxima curva cerrada y manten la velocidad punta.
</p> </div> </div> </div> </section> <section class="px-4 py-16 md:py-24"> <h2 class="font-heading text-text text-3xl md:text-4xl font-bold text-center mb-12 tracking-tight">
Asi se corre una carrera
</h2> <div class="max-w-md mx-auto relative pl-4"> <!-- Timeline line --> <div class="absolute left-[35px] top-6 bottom-6 w-0.5 bg-gradient-to-b from-primary via-accent to-primary/20"></div> <div class="grid grid-cols-[60px_1fr] gap-x-4 mb-8 last:mb-0 relative"> <div class="flex flex-col items-center pt-1 z-10"> <div class="w-12 h-12 rounded-full bg-surface border-2 border-primary flex items-center justify-center shadow-[0_0_15px_rgba(225,6,0,0.3)] text-primary"> <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="m12.83 2.18a2 2 0 0 0-1.66 0L2.6 6.08a1 1 0 0 0 0 1.83l8.58 3.91a2 2 0 0 0 1.66 0l8.58-3.9a1 1 0 0 0 0-1.83Z"/><path d="m22 17.65-9.17 4.16a2 2 0 0 1-1.66 0L2 17.65"/><path d="m22 12.65-9.17 4.16a2 2 0 0 1-1.66 0L2 12.65"/></svg> </div> </div> <div class="flex flex-col pt-2 pb-4"> <h3 class="font-heading text-text text-xl font-bold mb-2"> 1. Elige tus cartas </h3> <p class="text-text-muted text-sm leading-relaxed"> Cada turno juegas cartas de tu mano: rectas para ganar velocidad, curvas para no salirte, especiales para cambiar la carrera. </p> </div> </div><div class="grid grid-cols-[60px_1fr] gap-x-4 mb-8 last:mb-0 relative"> <div class="flex flex-col items-center pt-1 z-10"> <div class="w-12 h-12 rounded-full bg-surface border-2 border-accent flex items-center justify-center shadow-[0_0_15px_rgba(0,229,200,0.3)] text-accent"> <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M4 15s1-1 4-1 5 2 8 2 4-1 4-1V3s-1 1-4 1-5-2-8-2-4 1-4 1z"/><line x1="4" x2="4" y1="22" y2="15"/></svg> </div> </div> <div class="flex flex-col pt-2 pb-4"> <h3 class="font-heading text-text text-xl font-bold mb-2"> 2. Compite en trazados reales </h3> <p class="text-text-muted text-sm leading-relaxed"> Rectas, curvas, chicanes. El trazado dicta la estrategia. Aleron abierto en la recta o rebufo en el ultimo sector? </p> </div> </div><div class="grid grid-cols-[60px_1fr] gap-x-4 mb-8 last:mb-0 relative"> <div class="flex flex-col items-center pt-1 z-10"> <div class="w-12 h-12 rounded-full bg-surface border-2 border-text flex items-center justify-center shadow-[0_0_15px_rgba(255,255,255,0.2)] text-text"> <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M6 9H4.5a2.5 2.5 0 0 1 0-5H6"/><path d="M18 9h1.5a2.5 2.5 0 0 0 0-5H18"/><path d="M4 22h16"/><path d="M10 14.66V17c0 .55-.47.98-.97 1.21C7.85 18.75 7 20.24 7 22"/><path d="M14 14.66V17c0 .55.47.98.97 1.21C16.15 18.75 17 20.24 17 22"/><path d="M18 2H6v7a6 6 0 0 0 12 0V2Z"/></svg> </div> </div> <div class="flex flex-col pt-2 pb-4"> <h3 class="font-heading text-text text-xl font-bold mb-2"> 3. Gana con la cabeza </h3> <p class="text-text-muted text-sm leading-relaxed"> Turnos simultaneos, sin esperas. Gestiona neumaticos, calcula pit stops, lee a tu rival. 15-20 minutos y hay un ganador. </p> </div> </div> </div> </section> <section class="px-4 py-16 md:py-24 bg-surface/50 border-y border-white/5"> <div class="max-w-6xl mx-auto"> <div class="flex justify-between items-end mb-10"> <h2 class="font-heading text-text text-3xl md:text-4xl font-bold tracking-tight">
Tu baraja,<br>tu estrategia
</h2> </div> <!-- Horizontal scroll on mobile --> <div class="flex gap-4 overflow-x-auto pb-6 snap-x snap-mandatory hide-scrollbar -mx-4 px-4 md:grid md:grid-cols-3 lg:grid-cols-4 md:overflow-visible md:mx-0 md:px-0"> <div class="min-w-[200px] md:min-w-0 snap-center shrink-0 md:shrink flex flex-col bg-surface rounded-xl border border-green-500/30 overflow-hidden shadow-lg hover:-translate-y-1 hover:shadow-xl transition-all duration-200"> <div class="h-1.5 bg-green-500"></div> <div class="h-28 overflow-hidden"> <img src="/images/cards/recta-aleron.png" alt="Aleron Movil" class="w-full h-full object-cover" loading="lazy"> </div> <div class="px-3 py-2 bg-green-500/10 flex justify-between items-center"> <span class="text-xs font-bold text-green-400 uppercase tracking-wider">Recta</span> <span class="text-green-400"> <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M13 2 3 14h9l-1 8 10-12h-9l1-8z"/></svg> </span> </div> <div class="p-4 flex flex-col gap-2 flex-1"> <h4 class="text-text font-bold">Aleron Movil</h4> <p class="text-xs text-text-muted leading-relaxed flex-1">Abre el aleron y vuela. Bonus de velocidad en zonas de recta.</p> </div> </div><div class="min-w-[200px] md:min-w-0 snap-center shrink-0 md:shrink flex flex-col bg-surface rounded-xl border border-green-500/30 overflow-hidden shadow-lg hover:-translate-y-1 hover:shadow-xl transition-all duration-200"> <div class="h-1.5 bg-green-500"></div> <div class="px-3 py-2 bg-green-500/10 flex justify-between items-center"> <span class="text-xs font-bold text-green-400 uppercase tracking-wider">Recta</span> <span class="text-green-400"> <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M13 2 3 14h9l-1 8 10-12h-9l1-8z"/></svg> </span> </div> <div class="p-4 flex flex-col gap-2 flex-1"> <h4 class="text-text font-bold">Potencia</h4> <p class="text-xs text-text-muted leading-relaxed flex-1">Mas caballos, mas recta. Tu carta base para tramos rapidos.</p> </div> </div><div class="min-w-[200px] md:min-w-0 snap-center shrink-0 md:shrink flex flex-col bg-surface rounded-xl border border-green-500/30 overflow-hidden shadow-lg hover:-translate-y-1 hover:shadow-xl transition-all duration-200"> <div class="h-1.5 bg-green-500"></div> <div class="px-3 py-2 bg-green-500/10 flex justify-between items-center"> <span class="text-xs font-bold text-green-400 uppercase tracking-wider">Recta</span> <span class="text-green-400"> <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M13 2 3 14h9l-1 8 10-12h-9l1-8z"/></svg> </span> </div> <div class="p-4 flex flex-col gap-2 flex-1"> <h4 class="text-text font-bold">Rebufo</h4> <p class="text-xs text-text-muted leading-relaxed flex-1">Pegate al de delante y aprovecha el aire.</p> </div> </div><div class="min-w-[200px] md:min-w-0 snap-center shrink-0 md:shrink flex flex-col bg-surface rounded-xl border border-green-500/30 overflow-hidden shadow-lg hover:-translate-y-1 hover:shadow-xl transition-all duration-200"> <div class="h-1.5 bg-green-500"></div> <div class="px-3 py-2 bg-green-500/10 flex justify-between items-center"> <span class="text-xs font-bold text-green-400 uppercase tracking-wider">Recta</span> <span class="text-green-400"> <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M13 2 3 14h9l-1 8 10-12h-9l1-8z"/></svg> </span> </div> <div class="p-4 flex flex-col gap-2 flex-1"> <h4 class="text-text font-bold">Acelerar</h4> <p class="text-xs text-text-muted leading-relaxed flex-1">Salida de curva limpia, pisas a fondo.</p> </div> </div><div class="min-w-[200px] md:min-w-0 snap-center shrink-0 md:shrink flex flex-col bg-surface rounded-xl border border-yellow-500/30 overflow-hidden shadow-lg hover:-translate-y-1 hover:shadow-xl transition-all duration-200"> <div class="h-1.5 bg-yellow-500"></div> <div class="px-3 py-2 bg-yellow-500/10 flex justify-between items-center"> <span class="text-xs font-bold text-yellow-400 uppercase tracking-wider">Curva</span> <span class="text-yellow-400"> <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M7 17m-2 0a2 2 0 1 0 4 0a2 2 0 1 0-4 0"/><path d="M17 7m-2 0a2 2 0 1 0 4 0a2 2 0 1 0-4 0"/><path d="M7 15V9a5 5 0 0 1 10 0"/></svg> </span> </div> <div class="p-4 flex flex-col gap-2 flex-1"> <h4 class="text-text font-bold">Curva Limpia</h4> <p class="text-xs text-text-muted leading-relaxed flex-1">La linea perfecta. Ni un metro de mas.</p> </div> </div><div class="min-w-[200px] md:min-w-0 snap-center shrink-0 md:shrink flex flex-col bg-surface rounded-xl border border-yellow-500/30 overflow-hidden shadow-lg hover:-translate-y-1 hover:shadow-xl transition-all duration-200"> <div class="h-1.5 bg-yellow-500"></div> <div class="px-3 py-2 bg-yellow-500/10 flex justify-between items-center"> <span class="text-xs font-bold text-yellow-400 uppercase tracking-wider">Curva</span> <span class="text-yellow-400"> <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M7 17m-2 0a2 2 0 1 0 4 0a2 2 0 1 0-4 0"/><path d="M17 7m-2 0a2 2 0 1 0 4 0a2 2 0 1 0-4 0"/><path d="M7 15V9a5 5 0 0 1 10 0"/></svg> </span> </div> <div class="p-4 flex flex-col gap-2 flex-1"> <h4 class="text-text font-bold">Frenada Tardia</h4> <p class="text-xs text-text-muted leading-relaxed flex-1">Frena mas tarde que nadie. Alto riesgo, alta recompensa.</p> </div> </div><div class="min-w-[200px] md:min-w-0 snap-center shrink-0 md:shrink flex flex-col bg-surface rounded-xl border border-primary/30 overflow-hidden shadow-lg hover:-translate-y-1 hover:shadow-xl transition-all duration-200"> <div class="h-1.5 bg-primary"></div> <div class="px-3 py-2 bg-primary/10 flex justify-between items-center"> <span class="text-xs font-bold text-primary uppercase tracking-wider">Especial</span> <span class="text-primary"> <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M13 2 3 14h9l-1 8 10-12h-9l1-8z"/></svg> </span> </div> <div class="p-4 flex flex-col gap-2 flex-1"> <h4 class="text-text font-bold">Pit Stop</h4> <p class="text-xs text-text-muted leading-relaxed flex-1">Neumaticos nuevos. Pierdes tiempo ahora, lo recuperas despues.</p> </div> </div><div class="min-w-[200px] md:min-w-0 snap-center shrink-0 md:shrink flex flex-col bg-surface rounded-xl border border-primary/30 overflow-hidden shadow-lg hover:-translate-y-1 hover:shadow-xl transition-all duration-200"> <div class="h-1.5 bg-primary"></div> <div class="px-3 py-2 bg-primary/10 flex justify-between items-center"> <span class="text-xs font-bold text-primary uppercase tracking-wider">Especial</span> <span class="text-primary"> <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M13 2 3 14h9l-1 8 10-12h-9l1-8z"/></svg> </span> </div> <div class="p-4 flex flex-col gap-2 flex-1"> <h4 class="text-text font-bold">Coche de Seguridad</h4> <p class="text-xs text-text-muted leading-relaxed flex-1">Se compacta el peloton. Tu ventaja desaparece... o tu desventaja tambien.</p> </div> </div><div class="min-w-[200px] md:min-w-0 snap-center shrink-0 md:shrink flex flex-col bg-surface rounded-xl border border-primary/30 overflow-hidden shadow-lg hover:-translate-y-1 hover:shadow-xl transition-all duration-200"> <div class="h-1.5 bg-primary"></div> <div class="px-3 py-2 bg-primary/10 flex justify-between items-center"> <span class="text-xs font-bold text-primary uppercase tracking-wider">Especial</span> <span class="text-primary"> <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M13 2 3 14h9l-1 8 10-12h-9l1-8z"/></svg> </span> </div> <div class="p-4 flex flex-col gap-2 flex-1"> <h4 class="text-text font-bold">Bandera Roja</h4> <p class="text-xs text-text-muted leading-relaxed flex-1">Carrera detenida. Caos para unos, oportunidad para otros.</p> </div> </div><div class="min-w-[200px] md:min-w-0 snap-center shrink-0 md:shrink flex flex-col bg-surface rounded-xl border border-primary/30 overflow-hidden shadow-lg hover:-translate-y-1 hover:shadow-xl transition-all duration-200"> <div class="h-1.5 bg-primary"></div> <div class="px-3 py-2 bg-primary/10 flex justify-between items-center"> <span class="text-xs font-bold text-primary uppercase tracking-wider">Especial</span> <span class="text-primary"> <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M13 2 3 14h9l-1 8 10-12h-9l1-8z"/></svg> </span> </div> <div class="p-4 flex flex-col gap-2 flex-1"> <h4 class="text-text font-bold">Lluvia</h4> <p class="text-xs text-text-muted leading-relaxed flex-1">Cambia la pista entera. Intermedios o slicks?</p> </div> </div> </div> </div> </section> <section class="px-4 py-16 md:py-24"> <div class="max-w-4xl mx-auto"> <h2 class="font-heading text-text text-3xl md:text-4xl font-bold text-center mb-10 tracking-tight">
Por que Racing Cards
</h2> <div class="grid grid-cols-1 sm:grid-cols-2 gap-4 md:gap-6"> <div class="bg-surface p-6 rounded-xl border border-white/5 flex flex-col gap-3 hover:border-accent/20 transition-colors duration-200"> <div class="w-10 h-10 rounded-lg bg-primary/20 text-primary flex items-center justify-center"> <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M13 2 3 14h9l-1 8 10-12h-9l1-8z"/></svg> </div> <h3 class="font-heading text-text font-bold text-lg">Partidas de 15-20 minutos</h3> <p class="text-text-muted text-sm leading-relaxed">Una carrera completa en el tiempo de un cafe. Sin sesiones de 2 horas.</p> </div><div class="bg-surface p-6 rounded-xl border border-white/5 flex flex-col gap-3 hover:border-accent/20 transition-colors duration-200"> <div class="w-10 h-10 rounded-lg bg-accent/20 text-accent flex items-center justify-center"> <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M19 17h2c.6 0 1-.4 1-1v-3c0-.9-.7-1.7-1.5-1.9C18.7 10.6 16 10 16 10s-1.3-1.4-2.2-2.3c-.5-.4-1.1-.7-1.8-.7H5c-.6 0-1.1.4-1.4.9l-1.4 2.9A3.7 3.7 0 0 0 2 12v4c0 .6.4 1 1 1h2"/><circle cx="7" cy="17" r="2"/><path d="M9 17h6"/><circle cx="17" cy="17" r="2"/></svg> </div> <h3 class="font-heading text-text font-bold text-lg">Mecanicas de automovilismo real</h3> <p class="text-text-muted text-sm leading-relaxed">Gestion de neumaticos, pit stops, coche de seguridad. Las mecanicas reales del motorsport son el motor del juego.</p> </div><div class="bg-surface p-6 rounded-xl border border-white/5 flex flex-col gap-3 hover:border-accent/20 transition-colors duration-200"> <div class="w-10 h-10 rounded-lg bg-blue-500/20 text-blue-400 flex items-center justify-center"> <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M16 21v-2a4 4 0 0 0-4-4H6a4 4 0 0 0-4 4v2"/><circle cx="9" cy="7" r="4"/><path d="M22 21v-2a4 4 0 0 0-3-3.87"/><path d="M16 3.13a4 4 0 0 1 0 7.75"/></svg> </div> <h3 class="font-heading text-text font-bold text-lg">Online con amigos</h3> <p class="text-text-muted text-sm leading-relaxed">Crea una sala, comparte el enlace, a correr. Multijugador desde cualquier dispositivo.</p> </div><div class="bg-surface p-6 rounded-xl border border-white/5 flex flex-col gap-3 hover:border-accent/20 transition-colors duration-200"> <div class="w-10 h-10 rounded-lg bg-green-500/20 text-green-400 flex items-center justify-center"> <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="10"/><path d="m4.9 4.9 14.2 14.2"/></svg> </div> <h3 class="font-heading text-text font-bold text-lg">Sin pay-to-win</h3> <p class="text-text-muted text-sm leading-relaxed">Mismas cartas para todos. Aqui gana quien juega mejor. Punto.</p> </div> </div> </div> </section> <section id="early-access" class="px-4 py-16 md:py-24 relative overflow-hidden"> <!-- Decorative skewed bg --> <div class="absolute inset-0 bg-primary/5 -skew-y-3 origin-top-left -z-10"></div> <div class="bg-surface rounded-2xl p-8 md:p-12 relative border border-primary/20 shadow-[0_0_40px_rgba(225,6,0,0.15)] text-center max-w-lg mx-auto"> <!-- Lucide: Flag icon --> <div class="flex justify-center mb-4 text-primary"> <svg xmlns="http://www.w3.org/2000/svg" width="48" height="48" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M4 15s1-1 4-1 5 2 8 2 4-1 4-1V3s-1 1-4 1-5-2-8-2-4 1-4 1z"></path><line x1="4" x2="4" y1="22" y2="15"></line></svg> </div> <h2 class="font-heading text-text text-3xl font-bold leading-tight mb-4 tracking-tight">
Apuntate a la parrilla de salida
</h2> <p class="text-text-muted text-sm mb-6 max-w-sm mx-auto">
Los primeros en registrarse seran los primeros en jugar. Dejanos tu email.
</p> <form id="early-access-form" method="POST" action="/api/register" class="flex flex-col gap-4"> <input type="email" name="email" required placeholder="tu@email.com" autocomplete="email" class="w-full bg-bg border-2 border-border rounded-full h-12 px-6 text-text placeholder:text-text-disabled
focus:outline-none focus:border-accent focus:ring-1 focus:ring-accent
transition-colors duration-150"> <button type="submit" class="w-full h-12 rounded-full bg-primary text-text text-base font-bold
shadow-[0_0_20px_rgba(225,6,0,0.3)]
hover:shadow-[0_0_30px_rgba(225,6,0,0.5)] hover:-translate-y-0.5
active:translate-y-0
transition-all duration-200 cursor-pointer">
Reservar mi plaza
</button> </form> <p class="text-xs text-text-disabled mt-4">
Solo email. Sin spam. Te escribimos cuando este listo.
</p> </div> </section> </main> <footer class="bg-surface border-t border-white/5 py-8 px-4 text-center"> <div class="flex flex-col gap-4 items-center max-w-4xl mx-auto"> <span class="font-heading font-bold text-xl text-text tracking-tight">RACING CARDS</span> <p class="text-sm text-text-muted max-w-md">
Un juego de cartas de carreras hecho con estrategia (y sin microtransacciones).
</p> <a href="#" class="text-sm text-accent hover:underline inline-flex items-center gap-1 transition-colors">
Probar version actual
<!-- Lucide: ChevronRight --> <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="m9 18 6-6-6-6"></path></svg> </a> <p class="text-sm text-text-disabled mt-2">
&copy; 2026 Racing Cards. Hecho en Barcelona.
</p> </div> </footer> </body></html>
Reference in New Issue View Git Blame Copy Permalink