add landing and subscription plans

Signed-off-by: Omar Sánchez Pizarro <omar.sanchez@pistacero.net>

web/landing/README.md

@@ -0,0 +1,77 @@
+# Wallabicher Landing Page
+
+Landing page moderna y profesional para Wallabicher construida con Astro. Diseño minimalista con modo dark automático basado en las preferencias del sistema.
+
+## ✨ Características
+
+- 🎨 **Diseño minimalista y profesional** - Interfaz limpia y moderna
+- 🌙 **Modo dark automático** - Se adapta automáticamente a las preferencias del sistema
+- 🎭 **Animaciones suaves** - Transiciones y efectos visuales elegantes
+- 📱 **Totalmente responsive** - Optimizado para todos los dispositivos
+- 🎯 **Colores del logo** - Paleta de colores teal/cyan basada en el logo
+- ⚡ **Rendimiento óptimo** - Construido con Astro para máxima velocidad
+
+## 🚀 Inicio Rápido
+
+```bash
+# Instalar dependencias
+npm install
+
+# Iniciar servidor de desarrollo
+npm run dev
+
+# Construir para producción
+npm run build
+
+# Previsualizar build de producción
+npm run preview
+```
+
+## 📁 Estructura
+
+```
+landing/
+├── public/
+│   ├── favicon.svg
+│   └── logo.jpg          # Logo de Wallabicher
+├── src/
+│   ├── components/
+│   │   ├── CTA.astro     # Sección de llamada a la acción
+│   │   ├── Features.astro # Características principales
+│   │   ├── Hero.astro     # Sección hero con logo
+│   │   ├── HowItWorks.astro # Cómo funciona
+│   │   └── Platforms.astro # Plataformas soportadas
+│   ├── layouts/
+│   │   └── Layout.astro   # Layout base con modo dark
+│   └── pages/
+│       └── index.astro    # Página principal
+├── astro.config.mjs
+├── package.json
+└── tailwind.config.mjs    # Configuración con colores teal/cyan
+```
+
+## 🎨 Tecnologías
+
+- **Astro** - Framework web moderno y rápido
+- **Tailwind CSS** - Framework CSS utility-first
+- **TypeScript** - Tipado estático
+- **Inter Font** - Tipografía profesional
+
+## 🎨 Paleta de Colores
+
+La landing page usa una paleta de colores basada en el logo:
+- **Primary (Teal/Cyan)**: `#06b6d4` - Color principal
+- **Teal**: Variaciones de teal para acentos
+- **Gray**: Escala de grises para texto y fondos
+- **Modo Dark**: Adaptación automática con colores oscuros
+
+## 📝 Personalización
+
+- **Colores**: Modifica `tailwind.config.mjs` para cambiar la paleta
+- **Componentes**: Edita los archivos en `src/components/`
+- **Contenido**: Actualiza el texto en cada componente según necesites
+
+## 🌙 Modo Dark
+
+El modo dark se detecta automáticamente usando `prefers-color-scheme`. No requiere JavaScript adicional y funciona de forma nativa.
+