nosotros

2026-08-28 08:47:10 -03:00
parent 42c8de7137
commit 6624bc88f0
3 changed files with 198 additions and 3 deletions
@@ -0,0 +1,195 @@
+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;
+}