wallabicher/web/landing

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

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