diff --git a/fluid.js b/fluid.js index ffcb786..85c8be7 100644 --- a/fluid.js +++ b/fluid.js @@ -347,7 +347,7 @@ function resizeCanvas() { // ===== COLORES DE LA MARCA CON TRANSICIÓN ===== const brandColors = [ - [0.874, 0.741, 0.725], // Rosa (#DFBDB9) + //[0.874, 0.741, 0.725], // Rosa (#DFBDB9) [0.729, 0.071, 0.302], // Bordo (#BA124D) [0.000, 0.247, 0.322] // Teal (#003F52) ]; diff --git a/index.html b/index.html index 60a0e66..360f0e8 100644 --- a/index.html +++ b/index.html @@ -445,8 +445,8 @@
Nosotros
-

Un equipo chico, con mucha energía.

-

Creemos que las marcas se construyen con escucha, estrategia y mucho amor por lo que hacemos.

+

Mentes creativas, con mucha energía.

+

Creemos que las marcas se construyen con escucha, estrategia y mucho amor por lo que hacemos. Combinamos el arte del Marketing con la Ciencia de los datos.

Patricia Pugliese
diff --git a/markdown/deepseek_text_20260827_5097ea.txt b/markdown/deepseek_text_20260827_5097ea.txt new file mode 100644 index 0000000..c528404 --- /dev/null +++ b/markdown/deepseek_text_20260827_5097ea.txt @@ -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; +} \ No newline at end of file