78 lines
2.5 KiB
Markdown
78 lines
2.5 KiB
Markdown
# 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.
|
|
|