# 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.