195 lines
5.6 KiB
Plaintext
195 lines
5.6 KiB
Plaintext
Aplicado a palabras destacadas con `background-clip: text`.
|
||
|
||
---
|
||
|
||
## 🔤 Tipografía
|
||
|
||
| Uso | Fuente | Peso |
|
||
|-----|--------|------|
|
||
| Títulos y display | **Literata** (serif) | 300–800, itálica |
|
||
| UI y navegación | **Raleway** (sans-serif) | 300–700 |
|
||
| Cuerpo de texto | **Jost** (sans-serif) | 300–700 |
|
||
| Nombre de equipo | *Kaleagnetta* (handwriting) | 500 |
|
||
|
||
---
|
||
|
||
## 🧭 Estructura de Navegación
|
||
|
||
### Header (fijo)
|
||
- Logo (izquierda) → link a inicio
|
||
- Botón "Menú" (derecha) → abre *bottom sheet*
|
||
|
||
### Bottom Sheet (menú móvil/overlay)
|
||
- Logo + botón cerrar
|
||
- Columnas organizadas por servicio:
|
||
- **Soluciones Web**: Diseño Web, E-commerce, Google Ads
|
||
- **Redes Sociales**: Community Manager, Creación de Contenido, Meta Ads
|
||
- **Branding**: Diseño de Logos, Identidad de Marca, Contacto
|
||
|
||
---
|
||
|
||
## 📄 Secciones de la Página
|
||
|
||
### 1. Hero
|
||
- Tagline: "Estudio Creativo · Agencia Boutique"
|
||
- Título principal: "Marcas con esencia, construidas con estrategia."
|
||
- Subtítulo descriptivo
|
||
- CTA: "Ver servicios" (sólido) y "Contactanos" (outline)
|
||
- Scroll hint animado
|
||
|
||
### 2. Servicios
|
||
- Tabs con número y nombre:
|
||
- 01 Branding
|
||
- 02 Diseño Web
|
||
- 03 Marketing Digital
|
||
- 04 IA & Automatización
|
||
- Cada panel incluye:
|
||
- Título descriptivo
|
||
- Párrafo
|
||
- Lista de features con ícono ✦
|
||
- CTA a contacto
|
||
|
||
### 3. Planes
|
||
- Grid de 4 tarjetas (Esencial, Impulso, Premium ★, Elite)
|
||
- Cada tarjeta incluye:
|
||
- Nombre
|
||
- Estrellas (★)
|
||
- Objetivo principal
|
||
- Lista de features
|
||
- Botón "+Info"
|
||
- "Premium" destacado con badge "Más Popular"
|
||
- CTA global: "Consulta tu plan ideal"
|
||
|
||
### 4. Servicios a la Carta
|
||
- Accordion con 5 categorías:
|
||
1. Diseño Web & Desarrollo
|
||
2. Branding e Identidad Visual
|
||
3. Publicidad Digital Avanzada
|
||
4. Diseño Digital & Gráfico
|
||
5. Producción Audiovisual
|
||
- Cada ítem despliega servicios con precios
|
||
|
||
### 5. Proceso de Trabajo
|
||
- Grid horizontal con 6 pasos:
|
||
01 Contacto → 02 Propuesta → 03 Diseño → 04 Producción → 05 Revisión → 06 Lanzamiento
|
||
- Cada paso: número, categoría, título y descripción
|
||
|
||
### 6. Cifras (Inversión & Tiempos)
|
||
- 3 tarjetas:
|
||
- **Inversión**: Desde $250.000/mes
|
||
- **Tiempos**: 15–30 días
|
||
- **Contrato**: 3 meses · luego mensual
|
||
|
||
### 7. Cotizador
|
||
- Cuestionario de 3 pasos:
|
||
1. Momento del negocio (4 opciones)
|
||
2. Necesidad principal (4 opciones)
|
||
3. Presupuesto mensual (4 rangos)
|
||
- Barra de progreso
|
||
- Resultado: recomienda uno de los 4 planes
|
||
|
||
### 8. Nosotros
|
||
- 2 tarjetas:
|
||
- Patricia Pugliese — Estrategia & Creatividad
|
||
- Francisco Anfuso — Desarrollo & Tecnología
|
||
- Texto de cierre sobre colaboradores externos
|
||
|
||
### 9. FAQ
|
||
- 7 preguntas desplegables (accordion)
|
||
- Formato: pregunta + toggle (+ / −)
|
||
|
||
### 10. Contacto
|
||
- Formulario con:
|
||
- Nombre, Email, Empresa, Teléfono
|
||
- Filtro de servicio (tabs)
|
||
- Mensaje
|
||
- Checkbox de privacidad
|
||
- Datos de contacto:
|
||
- Email
|
||
- WhatsApp
|
||
- Redes sociales (Instagram, LinkedIn, Facebook)
|
||
- Ubicación: Argentina (remoto)
|
||
|
||
### 11. Footer
|
||
- Logo + descripción
|
||
- Columnas: Navegación, Servicios, Contacto
|
||
- Redes sociales (IG, IN, FB)
|
||
- Copyright y enlaces legales
|
||
|
||
---
|
||
|
||
## 🎨 Componentes UI/UX
|
||
|
||
| Componente | Descripción |
|
||
|------------|-------------|
|
||
| **Canvas fluid** | Simulación de humo/fluido interactivo (WebGL) |
|
||
| **Overlay** | Fondo oscuro al abrir el menú |
|
||
| **Bottom Sheet** | Menú deslizable desde abajo |
|
||
| **Tabs** | Navegación entre servicios |
|
||
| **Accordion** | Despliegue de contenido (servicios a la carta, FAQ) |
|
||
| **Cotizador** | Cuestionario paso a paso con progreso |
|
||
| **Filtros** | Tabs para seleccionar servicio en contacto |
|
||
| **Scroll hint** | Indicador sutil para hacer scroll |
|
||
|
||
---
|
||
|
||
## ✨ Interacciones y Animaciones
|
||
|
||
- **Efecto de humo**: Fluid simulation con colores que transicionan entre los colores de marca (Rosa → Bordo → Teal)
|
||
- **Menú**: Transición suave `cubic-bezier(.2,.8,.2,1)`
|
||
- **Tabs y paneles**: Fade-in con desplazamiento
|
||
- **Accordion**: Expansión suave `max-height`
|
||
- **Cotizador**: Barra de progreso animada, desbloqueo de botones al seleccionar
|
||
- **Hover**: Cambios de color y borde en elementos interactivos
|
||
|
||
---
|
||
|
||
## 🖥️ Componentes Técnicos
|
||
|
||
### Archivos incluidos
|
||
- `index.html` — Estructura HTML
|
||
- `styles.css` — Estilos y variables CSS
|
||
- `scripts.js` — Interacciones (menú, tabs, accordion, cotizador, formulario)
|
||
- `fluid.js` — Efecto de humo con WebGL
|
||
|
||
### Dependencias externas
|
||
- Google Fonts: Literata, Raleway, Jost (y Kaleagnetta local)
|
||
|
||
### Canvas Fluid
|
||
- Renderizado con WebGL (fallback a WebGL1)
|
||
- Simulación de densidad, velocidad, presión y vorticidad
|
||
- Colores de la marca con transición gradual
|
||
- Interacción con mouse y touch
|
||
|
||
---
|
||
|
||
## 📱 Responsive
|
||
|
||
| Breakpoint | Ajustes |
|
||
|------------|---------|
|
||
| `≤ 980px` | Planes 2 columnas, Proceso 3 columnas, Cifras 1 columna |
|
||
| `≤ 820px` | Sheet 2 columnas, Contacto 1 columna, Footer 1 columna, Equipo 1 columna |
|
||
| `≤ 720px` | Hero padding reducido, Paneles 1 columna, Planes 1 columna, Proceso 2 columnas, Cotizador padding reducido, Footer 2 columnas |
|
||
| `≤ 520px` | Sheet max-height 70vh, padding reducido, Sheet 1 columna |
|
||
|
||
---
|
||
|
||
## 🧩 Paleta de Marcas (Brand Colors)
|
||
|
||
| Nombre | Hex | Uso |
|
||
|--------|-----|-----|
|
||
| Teal | `#003F52` | Acento secundario |
|
||
| Bordo | `#BA124D` | Acento primario, botones |
|
||
| Rosa | `#DFBDB9` | Detalles, hover |
|
||
| Oscuro | `#110916` | Fondo |
|
||
| Claro | `#EAF0EE` | Texto principal |
|
||
| Dusty | `#a79bab` | Texto secundario |
|
||
|
||
### Gradiente de palabras destacadas
|
||
```css
|
||
.grad-word {
|
||
background: linear-gradient(100deg, #DFBDB9 0%, #BA124D 70%, #006d8f 100%);
|
||
-webkit-background-clip: text;
|
||
background-clip: text;
|
||
color: transparent;
|
||
} |