diff --git a/PRD.md b/PRD.md index 6432669..fa78bf1 100644 --- a/PRD.md +++ b/PRD.md @@ -8,7 +8,7 @@ ## 1. Visión del Producto -Transformar la presencia digital de Gloria Wells en una herramienta operativa que centralice la atención, gestione crisis y automatice el agendamiento, manteniendo una estética de alta gama, calidez y profesionalismo. +Transformar la presencia digital de Gloria Niño en una herramienta operativa que centralice la atención, gestione crisis y automatice el agendamiento, manteniendo una estética de alta gama, calidez y profesionalismo. --- @@ -24,15 +24,16 @@ Transformar la presencia digital de Gloria Wells en una herramienta operativa qu #### Hero Section -* Imagen: Fotografía profesional de Gloria -* Titular: **Sanación Integral** -* Subtitular: Enfoque terapéutico +* Imagen: Fotografía profesional de Gloria Niño +* Titular: **Gloria Niño - Terapeuta Emocional** +* Subtitular: Enfoque terapéutico personalizado * Botón principal: **Agenda tu Cita** (Inicia flujo) +* Botón secundario: **Ver Servicios** #### Sección Biográfica -* Video: Introducción -* Texto: Conoce a Gloria +* Imagen: Gloria Niño en sesión (jardín zen) +* Texto: Biografía breve enfocada en duelo y ansiedad #### Servicios (Grid 3) @@ -46,7 +47,8 @@ Transformar la presencia digital de Gloria Wells en una herramienta operativa qu #### Contacto -* Nombre, Email, Mensaje +* Formulario: Nombre, WhatsApp, Mensaje +* Tarjetas: Ubicación y Horarios #### Footer diff --git a/README.md b/README.md index 7420611..bf6afc1 100644 --- a/README.md +++ b/README.md @@ -6,7 +6,18 @@ Sistema modular de alta gama para la gestión de pacientes, triaje de crisis y a ## 📖 Descripción General -**Gloria** es una solución digital diseñada para la terapeuta Gloria Wells. El sistema optimiza la interacción entre la terapeuta, su asistente y los pacientes mediante un enfoque *phone-first* (identificación vía WhatsApp) y una estética visual premium inspirada en el bienestar y la sanación integral. +**Gloria** es una solución digital diseñada para la terapeuta Gloria Niño. El sistema optimiza la interacción entre la terapeuta, su asistente y los pacientes mediante un enfoque *phone-first* (identificación vía WhatsApp) y una estética visual premium inspirada en el bienestar y la sanación integral. + +--- + +## 🎨 Referencia Visual (Mockup) + +> **Importante:** Se ha creado un prototipo visual de alta fidelidad en la carpeta `mockup/`. +> Este prototipo (`index.html` + `styles.css`) debe utilizarse como **referencia estricta de diseño** (colores, tipografía, espaciado, animaciones) para la implementación en Next.js. +> La carpeta `mockup/` incluye una copia local de los assets en `mockup/src/` para ser totalmente autónoma. + +### Nota para Desarrollo +El código de producción se implementará en **Next.js** dentro de la carpeta `src/`. El mockup es un artefacto separado para aprobación de diseño. --- @@ -52,6 +63,9 @@ El proyecto sigue una arquitectura de **Monolito Modular**, manteniendo simplici ## 📂 Estructura de Carpetas ```bash +├── mockup # ⚠️ HTML/CSS de referencia visual (NO usar en producción) +│ ├── index.html # Prototipo estático del sitio +│ └── styles.css # Estilos de referencia ├── src │ ├── app # Rutas, Layouts y Server Components │ │ ├── (auth) # Flujo de identificación por teléfono @@ -66,6 +80,8 @@ El proyecto sigue una arquitectura de **Monolito Modular**, manteniendo simplici └── scripts # Tareas programadas ``` +> **Nota:** La carpeta `mockup/` contiene únicamente prototipos HTML/CSS estáticos para referencia visual durante el desarrollo. El código de producción se implementará en Next.js dentro de `src/`. + --- ## 🛠 Instalación y Configuración @@ -173,7 +189,7 @@ Características: Desarrollado para el proyecto: -**Sanación Integral – Gloria Wells** +**Sanación Integral – Gloria Niño** Uso interno y confidencial. diff --git a/TASKS.md b/TASKS.md index e52c535..8f29069 100644 --- a/TASKS.md +++ b/TASKS.md @@ -4,6 +4,14 @@ Este documento define el plan de ejecución por sprints, controles de seguridad --- +## 🎨 Referencia Visual (Mockup) + +> **Importante:** Se ha creado un prototipo visual de alta fidelidad en la carpeta `mockup/`. +> Este prototipo (`index.html` + `styles.css`) debe utilizarse como **referencia estricta de diseño** (colores, tipografía, espaciado, animaciones) para la implementación en Next.js. +> NO copiar y pegar el código HTML directamente; implementar usando componentes React y Tailwind/CSS Modules según la arquitectura del proyecto. + +--- + ## 🟢 Sprint 1 – Cimientos, Infraestructura y Seguridad Base ### Foco diff --git a/mockup/index.html b/mockup/index.html new file mode 100644 index 0000000..9838697 --- /dev/null +++ b/mockup/index.html @@ -0,0 +1,381 @@ + + + + + + + Gloria Niño - Sanación Integral + + + + + + + + +
+
+ + + + + + + Agendar +
+
+ + + + +
+
+
+

Gloria Niño
Terapeuta Emocional

+

+ Te acompaño a sanar tus heridas emocionales y transformar tu vida a través de un proceso terapéutico profundo, cálido y profesional. +

+
+ Agenda tu Cita + Ver Servicios +
+
+
+ Gloria Niño - Terapeuta Emocional +
+
+
+ + +
+
+
+

Sobre Mí

+
+
+
+ Gloria Niño en sesión +
+
+

+ Soy Gloria Niño, terapeuta emocional con amplia experiencia en el acompañamiento de procesos de duelo, ansiedad y crecimiento personal. Creo firmemente que la sanación comienza cuando nos permitimos sentir y validar nuestras emociones en un espacio seguro. +

+
+ Ver Servicios + Contactar +
+
+
+
+
+ + +
+
+
+

Mis Servicios

+

Enfoques adaptados a tus necesidades actuales.

+
+
+ +
+ Terapia Individual +

Terapia Individual

+

+ Sesiones uno a uno enfocadas en ansiedad, depresión, trauma o + crecimiento personal. +

+
+ +
+ Terapia de Pareja +

Terapia de Pareja

+

+ Espacios para mejorar la comunicación, resolver conflictos y + reconectar. +

+
+ +
+ Talleres y Grupos +

Talleres y Grupos

+

Experiencias colectivas de sanación y aprendizaje emocional.

+
+
+
+
+ + +
+
+
+

Lo que dicen mis pacientes

+
+ +
+ + +
+
    + +
  • +
    +

    + "Gloria me ayudó a encontrar claridad en un momento muy difícil de mi vida. Su calidez y profesionalismo son inigualables. Me sentí escuchada y comprendida desde la primera sesión." +

    +

    — María G.

    +
    +
    • + + +
  • +
    +

    + "Gracias a la terapia con Gloria pude sanar heridas de mi infancia que afectaban mis relaciones actuales. Es una terapeuta excepcionalmente empática." +

    +

    — Carlos R.

    +
    +
    • + + +
  • +
    +

    + "El enfoque integral que utiliza es muy efectivo. No solo hablamos, sino que me dio herramientas prácticas para manejar mi ansiedad en el día a día." +

    +

    — Ana Sofía L.

    +
    +
    • +
+
+ + +
+ +
+ + + +
+
+
+ + +
+
+
+

Contáctame

+

¿Tienes alguna duda? Escríbeme y te responderé lo antes posible.

+
+ +
+
+
+ + +
+
+ + +
+
+ + +
+ +
+ +
+
+

Ubicación

+

Consultorio Virtual & Presencial
Ciudad de México

+
+
+

Horarios

+

Lunes a Viernes
9:00 AM - 7:00 PM

+
+
+
+
+
+ + + + + diff --git a/mockup/src/gloria.png b/mockup/src/gloria.png new file mode 100644 index 0000000..bee3513 Binary files /dev/null and b/mockup/src/gloria.png differ diff --git a/mockup/src/gloria_2.png b/mockup/src/gloria_2.png new file mode 100644 index 0000000..16055ef Binary files /dev/null and b/mockup/src/gloria_2.png differ diff --git a/mockup/src/inkscape.svg b/mockup/src/inkscape.svg new file mode 100644 index 0000000..2ce4f6a --- /dev/null +++ b/mockup/src/inkscape.svg @@ -0,0 +1,61 @@ + + + +image/svg+xml diff --git a/mockup/src/logo.png b/mockup/src/logo.png new file mode 100644 index 0000000..bc2c6f3 Binary files /dev/null and b/mockup/src/logo.png differ diff --git a/mockup/src/logo.svg b/mockup/src/logo.svg new file mode 100644 index 0000000..5a73250 --- /dev/null +++ b/mockup/src/logo.svg @@ -0,0 +1,60 @@ + + + +image/svg+xml diff --git a/mockup/src/services/icons/t_fam.png b/mockup/src/services/icons/t_fam.png new file mode 100644 index 0000000..802966b Binary files /dev/null and b/mockup/src/services/icons/t_fam.png differ diff --git a/mockup/src/services/icons/t_ind.png b/mockup/src/services/icons/t_ind.png new file mode 100644 index 0000000..3d58f13 Binary files /dev/null and b/mockup/src/services/icons/t_ind.png differ diff --git a/mockup/src/services/icons/t_pareja.png b/mockup/src/services/icons/t_pareja.png new file mode 100644 index 0000000..1182b6f Binary files /dev/null and b/mockup/src/services/icons/t_pareja.png differ diff --git a/mockup/styles.css b/mockup/styles.css new file mode 100644 index 0000000..794e4ed --- /dev/null +++ b/mockup/styles.css @@ -0,0 +1,879 @@ +:root { + /* Color Palette */ + --color-primary: #340649; + --color-primary-rgb: 52, 6, 73; + --color-secondary: #67486a; + --color-background: #f9f6e9; + --color-accent: #c8a668; + --color-accent-rgb: 200, 166, 104; + --color-white: #ffffff; + --color-text-dark: #340649; + --color-text-light: #f9f6e9; + --color-text-muted: #67486a; + + /* Typography */ + --font-display: "Playfair Display", serif; + --font-body: "Fira Code", monospace; + + /* Spacing */ + --spacing-container: 1200px; + --spacing-section: 6rem; + --spacing-mobile: 1.5rem; + + /* Effects */ + --shadow-card: 0 8px 32px rgba(52, 6, 73, 0.05); + --shadow-hover: 0 12px 48px rgba(52, 6, 73, 0.1); + --radius-button: 50px; + --radius-card: 16px; + --transition: 0.3s ease; +} + +* { + box-sizing: border-box; + margin: 0; + padding: 0; +} + +body { + font-family: var(--font-body); + background-color: var(--color-background); + color: var(--color-text-dark); + line-height: 1.6; + overflow-x: hidden; +} + +h1, +h2, +h3, +h4, +h5, +h6 { + font-family: var(--font-display); + font-weight: 700; + line-height: 1.2; +} + +/* Fade In Animation */ +@keyframes fadeInUp { + from { + opacity: 0; + transform: translateY(30px); + } + to { + opacity: 1; + transform: translateY(0); + } +} + +.fade-in { + opacity: 0; + transform: translateY(30px); + transition: opacity 0.6s ease, transform 0.6s ease; +} + +.fade-in.visible { + opacity: 1; + transform: translateY(0); +} + +.container { + max-width: var(--spacing-container); + margin: 0 auto; + padding: 0 var(--spacing-mobile); +} + +/* Header */ +.header { + position: fixed; + top: 0; + left: 0; + width: 100%; + padding: 1rem 0; + background-color: rgba(249, 246, 233, 0.9); + backdrop-filter: blur(10px); + z-index: 1000; + border-bottom: 1px solid rgba(103, 72, 106, 0.1); +} + +.header-inner { + display: flex; + justify-content: space-between; + align-items: center; +} + +.logo { + font-family: var(--font-display); + font-size: 1.5rem; + font-weight: 700; + color: var(--color-primary); + text-decoration: none; + letter-spacing: -0.02em; +} + +/* Hide hamburger on desktop */ +.menu-toggle { + display: none; +} + +.nav ul { + display: flex; + gap: 2rem; + list-style: none; +} + +.nav a { + text-decoration: none; + color: var(--color-text-dark); + font-weight: 500; + transition: color var(--transition); + position: relative; + padding-bottom: 4px; +} + +.nav a::after { + content: ''; + position: absolute; + bottom: 0; + left: 50%; + width: 0; + height: 2px; + background-color: var(--color-accent); + transition: width 0.3s ease, left 0.3s ease; +} + +.nav a:hover::after, +.nav a.active::after { + width: 100%; + left: 0; +} + +.nav a:hover { + color: var(--color-accent); +} + +/* Hero Section */ +.hero { + padding: 8rem 0 5rem; + min-height: 90vh; + display: flex; + align-items: center; + position: relative; + overflow: hidden; + background-color: var(--color-primary); + background: linear-gradient(135deg, #340649 0%, #4a0e5f 100%); +} + +.hero::before { + content: ""; + position: absolute; + top: -20%; + right: -10%; + width: 50vw; + height: 50vw; + background: radial-gradient( + circle, + rgba(103, 72, 106, 0.3) 0%, + rgba(52, 6, 73, 0) 70% + ); + border-radius: 50%; + z-index: -1; +} + +.hero-grid { + display: grid; + grid-template-columns: 1fr 1fr; + gap: 4rem; + align-items: center; +} + +.hero-content h1 { + font-size: 3.5rem; + margin-bottom: 1rem; + color: var(--color-text-light); +} + +.hero-content p { + font-size: 1.25rem; + color: rgba(249, 246, 233, 0.9); + margin-bottom: 2rem; + max-width: 90%; +} + +.hero-actions { + display: flex; + gap: 1rem; +} + +.hero-image { + position: relative; +} + +.hero-image img { + width: 100%; + height: auto; + border-radius: 24px 24px 0 24px; + box-shadow: 20px 20px 0 var(--color-accent); + object-fit: cover; +} + +/* Buttons */ +.btn { + display: inline-block; + padding: 0.8rem 2rem; + border-radius: var(--radius-button); + text-decoration: none; + font-weight: 500; + transition: var(--transition); + cursor: pointer; +} + +.btn-primary { + background-color: var(--color-accent); + color: var(--color-white); + border: 2px solid var(--color-accent); + box-shadow: 0 4px 12px rgba(200, 166, 104, 0.3); +} + +.btn-primary:hover { + transform: translateY(-2px); + box-shadow: 0 6px 16px rgba(200, 166, 104, 0.4); +} + +.btn-secondary { + background-color: transparent; + color: #67486A; + border: 2px solid #67486A; +} + +/* Specific for Hero section dark background */ +.hero .btn-secondary { + color: var(--color-white); + border-color: var(--color-white); +} + +.hero .btn-secondary:hover { + background-color: var(--color-white); + color: var(--color-primary); +} + +.btn-secondary:hover { + background-color: #67486A; + color: var(--color-white); +} + +/* About Section */ +.section-about { + padding: var(--spacing-section) 0; + background-color: var(--color-white); +} + +.about-content { + display: flex; + gap: 3rem; + align-items: center; + max-width: 900px; + margin: 0 auto; +} + +.about-image { + flex: 1; +} + +.about-image img { + width: 100%; + border-radius: 16px; + box-shadow: 0 8px 24px rgba(52, 6, 73, 0.1); +} + +.about-text { + flex: 1; +} + +.about-text p { + font-size: 1.1rem; + color: var(--color-secondary); + margin-bottom: 1.5rem; + line-height: 1.8; +} + +.about-actions { + display: flex; + gap: 1rem; +} + +/* Services */ +.section-services { + padding: var(--spacing-section) 0; +} + +.section-title { + text-align: center; + margin-bottom: 3rem; +} + +.section-title h2 { + font-size: 2.5rem; + color: var(--color-primary); + margin-bottom: 0.5rem; +} + +.services-grid { + display: grid; + grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); + gap: 2rem; +} + +.service-card { + background: var(--color-white); + padding: 2.5rem; + border-radius: var(--radius-card); + border-top: 4px solid var(--color-accent); + box-shadow: var(--shadow-card); + transition: var(--transition); + text-align: center; +} + +.service-card:hover { + transform: translateY(-5px); + box-shadow: var(--shadow-hover); +} + +.service-card h3 { + color: var(--color-primary); + margin-bottom: 1rem; + font-size: 1.5rem; +} + +.service-card p { + color: var(--color-secondary); +} + +/* Testimonials */ +.section-testimonials { + padding: var(--spacing-section) 0; + background-color: var(--color-primary); + background: linear-gradient(135deg, #340649 0%, #4a0e5f 100%); +} + +.testimonial-card { + text-align: center; + max-width: 800px; + margin: 0 auto; +} + +.testimonial-quote { + font-family: var(--font-display); + font-size: 1.5rem; + font-style: italic; + color: var(--color-text-light); + margin-bottom: 1.5rem; +} + +.testimonial-author { + color: var(--color-accent); + font-weight: 600; +} + +.section-testimonials .section-title h2 { + color: var(--color-text-light); +} + +/* Carousel Styles */ +.carousel-container { + position: relative; + height: 300px; + width: 100%; + max-width: 800px; + margin: 0 auto; +} + +.carousel-track-container { + height: 100%; + position: relative; + overflow: hidden; +} + +.carousel-track { + padding: 0; + margin: 0; + list-style: none; + position: relative; + height: 100%; + transition: transform 0.5s ease-in-out; +} + +.carousel-slide { + position: absolute; + top: 0; + bottom: 0; + width: 100%; +} + +.carousel-btn { + position: absolute; + top: 50%; + transform: translateY(-50%); + background: transparent; + border: none; + color: var(--color-accent); + font-size: 2.5rem; + cursor: pointer; + z-index: 10; + transition: color 0.3s ease; +} + +.carousel-btn:hover { + color: var(--color-text-light); +} + +.carousel-btn.prev { + left: -60px; +} + +.carousel-btn.next { + right: -60px; +} + +.carousel-nav { + display: flex; + justify-content: center; + padding: 10px 0; + gap: 15px; +} + +.carousel-indicator { + border: none; + width: 12px; + height: 12px; + background: rgba(255, 255, 255, 0.3); + border-radius: 50%; + cursor: pointer; + transition: background-color 0.3s ease; +} + +.carousel-indicator.current-slide { + background: var(--color-accent); +} + +/* Contact Form Section */ +.section-contact { + padding: var(--spacing-section) 0; +} + +.contact-form-container { + display: grid; + grid-template-columns: 3fr 2fr; + gap: 3rem; + max-width: 100%; + margin: 0 auto; +} + +.contact-form { + background: var(--color-background); + padding: 2rem; + border-radius: var(--radius-card); + box-shadow: var(--shadow-card); + border: 1px solid rgba(103, 72, 106, 0.1); +} + +.form-group { + margin-bottom: 1.5rem; +} + +.form-group label { + display: block; + margin-bottom: 0.5rem; + font-weight: 500; + color: var(--color-primary); +} + +.form-group input, +.form-group textarea { + width: 100%; + padding: 0.8rem 1rem; + border: 1px solid rgba(103, 72, 106, 0.2); + border-radius: 8px; + background-color: white; + font-family: var(--font-body); + font-size: 1rem; + transition: border-color 0.3s ease; +} + +.form-group input:focus, +.form-group textarea:focus { + outline: none; + border-color: var(--color-accent); + box-shadow: 0 0 0 3px rgba(200, 166, 104, 0.1); +} + +.contact-info-cards { + display: flex; + flex-direction: column; + gap: 1.5rem; +} + +.info-card { + background: var(--color-background); + padding: 1.5rem; + border-radius: var(--radius-card); + border-left: 4px solid var(--color-accent); +} + +.info-card h3 { + font-size: 1.2rem; + color: var(--color-primary); + margin-bottom: 0.5rem; +} + +.info-card p { + color: var(--color-secondary); +} + +/* Footer */ +.footer { + background-color: var(--color-primary); + color: var(--color-text-light); + padding: 4rem 0 2rem; +} + +.footer-grid { + display: grid; + grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); + gap: 3rem; + margin-bottom: 3rem; +} + +.footer-col h4 { + color: var(--color-accent); + margin-bottom: 1.5rem; + font-size: 1.2rem; +} + +.footer-col ul { + list-style: none; +} + +.footer-col li { + margin-bottom: 0.8rem; +} + +.footer-col a { + color: var(--color-text-light); + text-decoration: none; + opacity: 0.8; + transition: var(--transition); +} + +.footer-col a:hover { + opacity: 1; + color: var(--color-accent); +} + +.footer-bottom { + text-align: center; + padding-top: 2rem; + border-top: 1px solid rgba(255, 255, 255, 0.1); + font-size: 0.9rem; + opacity: 0.6; +} + +/* Tablet Responsive */ +@media (max-width: 1024px) { + .hero-grid { + gap: 2rem; + } + + .hero-content h1 { + font-size: 2.8rem; + } + + .services-grid { + grid-template-columns: repeat(2, 1fr); + } + + .footer-grid { + grid-template-columns: repeat(2, 1fr); + } + + .contact-form-container { + grid-template-columns: 1fr; + gap: 2rem; + } +} + +/* Mobile Responsive */ +@media (max-width: 768px) { + :root { + --spacing-section: 3rem; + } + + /* Fix for Contact Form on Mobile */ + .contact-form-container { + grid-template-columns: 1fr; + gap: 2rem; + } + + .contact-form { + padding: 1.5rem; + } + + .header-inner { + position: relative; + justify-content: space-between; /* Ensure logo and menu are pushed apart */ + } + + /* Hamburger Menu Button */ + .menu-toggle { + margin-right: -10px; /* Adjust visual alignment with container padding */ + } + + .nav { + display: none; + position: absolute; + top: 100%; + left: 0; + right: 0; + width: 100%; /* Ensure full width */ + background-color: var(--color-background); + padding: 1rem; + box-shadow: 0 4px 12px rgba(52, 6, 73, 0.1); + border-radius: 0 0 16px 16px; + z-index: 1000; /* Ensure menu is above other content */ + } + + .nav.active { + display: block; + } + + .nav ul { + flex-direction: column; + gap: 1rem; + text-align: center; + } + + .nav a::after { + display: none; + } + + .hero { + padding: 6rem 0 3rem; + min-height: auto; + } + + .hero-grid { + grid-template-columns: 1fr; + text-align: center; + gap: 2rem; + } + + .hero-content { + order: 2; + } + + .hero-image { + order: 1; + } + + .hero-actions { + justify-content: center; + flex-wrap: wrap; + } + + .hero-content h1 { + font-size: 2rem; + } + + .hero-content p { + font-size: 1rem; + max-width: 100%; + } + + .hero-image img { + border-radius: 16px; + box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1); + max-width: 280px; + margin: 0 auto; + display: block; + } + + .section-title h2 { + font-size: 1.8rem; + } + + .services-grid { + grid-template-columns: 1fr; + gap: 1.5rem; + } + + .service-card { + padding: 1.5rem; + } + + .service-card img { + width: 60px; + height: 60px; + } + + .testimonial-quote { + font-size: 1.2rem; + } + + .footer-grid { + grid-template-columns: 1fr; + text-align: center; + gap: 2rem; + } + + /* About Section Mobile */ + .about-content { + flex-direction: column; + text-align: center; + } + + .about-image { + order: 1; + } + + .about-image img { + max-width: 280px; + margin: 0 auto; + display: block; + } + + .about-text { + order: 2; + } + + .about-actions { + flex-direction: column; + gap: 0.75rem; + } + + .about-actions .btn { + width: 100%; + text-align: center; + } + + /* Hamburger Menu Button */ + .menu-toggle { + display: flex; + flex-direction: column; + justify-content: center; + align-items: center; + gap: 6px; + cursor: pointer; + padding: 10px; + background: transparent; + border: none; + z-index: 1001; + order: 3; + } + + .menu-toggle span { + display: block; + width: 28px; + height: 2px; + background-color: var(--color-primary); + border-radius: 2px; + transition: all 0.3s ease; + transform-origin: center; + } + + /* Animated X when active */ + .menu-toggle.active span:nth-child(1) { + transform: rotate(45deg) translate(6px, 6px); + } + + .menu-toggle.active span:nth-child(2) { + opacity: 0; + transform: scaleX(0); + } + + .menu-toggle.active span:nth-child(3) { + transform: rotate(-45deg) translate(6px, -6px); + } + + /* Hide CTA button on mobile header */ + .header-cta { + display: none; + } + + .nav.active { + display: block; + animation: slideDown 0.3s ease; + } + + @keyframes slideDown { + from { + opacity: 0; + transform: translateY(-10px); + } + to { + opacity: 1; + transform: translateY(0); + } + } + + .nav ul { + flex-direction: column; + gap: 0; + } + + .nav li { + border-bottom: 1px solid rgba(103, 72, 106, 0.1); + } + + .nav li:last-child { + border-bottom: none; + } + + .nav a { + display: block; + padding: 1rem; + font-size: 1.1rem; + transition: background-color 0.3s ease, color 0.3s ease; + } + + .nav a:hover { + background-color: rgba(200, 166, 104, 0.1); + } + + /* Add CTA inside mobile menu */ + .nav ul::after { + content: 'Agendar'; + display: block; + text-align: center; + padding: 1rem 2rem; + margin: 1rem; + background-color: var(--color-accent); + color: white; + border-radius: var(--radius-button); + font-weight: 500; + cursor: pointer; + } +} + +/* Small Mobile */ +@media (max-width: 480px) { + .container { + padding: 0 1rem; + } + + .hero-content h1 { + font-size: 1.75rem; + } + + .hero-actions { + flex-direction: column; + gap: 0.75rem; + } + + .hero-actions .btn { + width: 100%; + text-align: center; + } + + .logo img { + height: 40px; + } +} diff --git a/site_mockup.png b/site_mockup.png new file mode 100644 index 0000000..9a70083 Binary files /dev/null and b/site_mockup.png differ diff --git a/site_requirements.md b/site_requirements.md new file mode 100644 index 0000000..f0e9c4e --- /dev/null +++ b/site_requirements.md @@ -0,0 +1,137 @@ +# 🎨 Site Requirements & Style Guide – Gloria App + +Este documento define los requisitos visuales, de diseño y técnicos para la interfaz de usuario de **Gloria App**, asegurando una estética premium, cálida y profesional ("High-End Wellness") para la terapeuta **Gloria Niño**. + +--- + +## 1. Identidad Visual + +### 🎨 Paleta de Colores +Colores definidos para transmitir elegancia, serenidad y sanación. + +| Token | Color Hex | Descripción | Uso Principal | +| :--- | :--- | :--- | :--- | +| **Primary** | `#340649` | Deep Royal Purple | Encabezados, textos principales, fondos oscuros de alto contraste. | +| **Secondary (Gradient)** | `#67486A` | Muted Lavender/Purple | Gradientes, transparencias, bordes sutiles, estados desactivados. | +| **Background** | `#F9F6E9` | Soft Cream | Fondo general de la página, tarjetas (light mode). | +| **Accent** | `#C8A668` | Muted Gold | Detalles de lujo, iconos, líneas separadoras, estados de éxito. | +| **Button Primary** | `#C8A668` | Muted Gold | Botones de llamada a la acción (CTA) principales. | +| **Button Secondary** | `#67486A` | Muted Lavender | Botones secundarios, filtros, o acciones de menor jerarquía. | + +### 🖋️ Tipografía (Sugerencia Premium) +Se recomienda una combinación de **Serif** para títulos (elegancia) y **Sans-Serif** para cuerpo (legibilidad). + +* **Títulos (Display):** *Playfair Display* o *Cormorant Garamond* + * Uso: `h1`, `h2`, Citas en testimonios. + * Peso: 700 (Bold) para impacto, 400 (Regular) para subtítulos elegantes. +* **Cuerpo (Body):** *Fira Code* (Elección actual del mockup) o *Inter*. + * Uso: Párrafos, menús, formularios. + * Peso: 400 (Regular), 300 (Light) para descripciones, 500 (Medium) para botones. + +--- + +## 2. Requisitos de Diseño UI/UX + +### 📐 Layout & Espaciado +* **Enfoque "Phone-First":** El diseño debe priorizar la experiencia móvil, con elementos táctiles grandes y legibles. +* **Whitespace:** Uso generoso del espacio en blanco (o *cream space*) para separar secciones y dar aire al contenido (Wabi-sabi aesthetics). +* **Contenedor:** Ancho máximo de `1200px` para desktop, con márgenes laterales de `24px` en móvil. + +### 🖼️ Estilos de Componentes + +#### 1. Botones (Buttons) +* **Primary CTA (Gold):** + * Fondo: `#C8A668` + * Texto: `#FFFFFF` (o `#340649` si se requiere mayor contraste, verificar accesibilidad). Se sugiere Blanco para elegancia. + * Radio: `50px` (Pill shape) o `8px` (Rounded). + * Hover: Aclarar ligeramente o añadir sombra suave (`box-shadow: 0 4px 12px rgba(200, 166, 104, 0.4)`). +* **Secondary (Purple):** + * Fondo: `#67486A` + * Texto: `#FFFFFF` + * Hover: Oscurecer a `#553C57`. + +#### 2. Tarjetas (Cards) - Servicios/Testimonios +* **Glassmorphism (Opcional):** + * Fondo: `rgba(255, 255, 255, 0.7)` sobre fondos con textura o gradientes suaves del color `#67486A`. + * Borde: `1px solid rgba(103, 72, 106, 0.1)`. + * Sombra: `0 8px 32px rgba(52, 6, 73, 0.05)`. +* **Estilo Sólido:** + * Fondo: `#FFFFFF` sobre el fondo `#F9F6E9`. + * Borde superior: Línea acento `#C8A668` de 4px. + +#### 3. Hero Section +* **Diseño:** Imagen de Gloria o textura abstracta de sanación a la derecha/fondo. Texto a la izquierda (Desktop) o centrado (Móvil). +* **Overlay:** Gradiente lineal suave de `#340649` (transparencia baja) a transparente si la imagen tiene texto encima. + +#### 4. Tipografía y Detalles +* **Micro-interacciones:** Los enlaces y botones deben tener transiciones suaves (`0.3s ease`). +* **Iconografía:** Líneas finas (outline icons) en color `#340649` o `#C8A668`. + +--- + +## 3. Estructura de Secciones (Mapa del Sitio) + +### Header (Navegación) +* **Fondo:** Transparente (fijo al scrollear se vuelve `#F9F6E9` o `#340649`). +* **Logo:** SVG de firma "Gloria Niño" o Logo Gráfico. +* **Items:** Inicio, Sobre mí, Servicios, Testimonios, Contacto. +* **CTA:** Botón pequeño "Agendar". + +### Hero +* `h1`: **"Gloria Niño - Terapeuta Emocional"**. +* `h2`/Subtítulo: "Sanación Integral" y descripción de enfoque. +* Botones: CTA Principal (Gold) + "Ver Servicios" (Transparent/Hover fill). + +### Servicios (Grid) +* Grid de 3 columnas (1 col en móvil). +* Cada servicio con Icono/Imagen minimalista, Título y breve descripción. + +### Testimonios +* Carrusel. Fondo `#340649` (Invertido) o Mantener Cream `#F9F6E9` con tarjetas blancas. +* Si fondo es oscuro, texto `#F9F6E9` y Acento `#C8A668`. + +### Footer +* Fondo: `#340649` (Primary Deep Purple). +* Texto: `#F9F6E9`. +* Enlaces legales discretos. + +--- + +## 4. Requisitos Aplicación Web (Sistema de Citas) + +El diseño visual debe mantenerse consistente en las vistas funcionales de la aplicación (Next.js): + +### 4.1 Flujo de Agendamiento +* **Login (Phone-First):** + * Input de teléfono grande y central (Estilo tipo "Typeform"). + * Teclado numérico optimizado en móvil. + * Verificación OTP clean y minimalista. +* **Triaje de Crisis:** + * Pantalla de alerta suave (No rojo alarmante, sino tono serio/calmado). + * Botones de decisión claros ("Sí", "No"). +* **Selección de Fecha (Calendario):** + * Estilo personalizado de calendario (no el default del navegador). + * Días disponibles en `#340649` o fondo `#C8A668` (circular) si seleccionado. + * Horarios en pills/chips seleccionables. + +### 4.2 Dashboards (Privado) + +#### Dashboard Terapeuta (Gloria) +* **Vista de Agenda:** Calendario semanal con bloques de tiempo. +* **Expediente Paciente:** + * Layout de "Hoja Clínica" limpia. + * Área de texto enriquecido para notas. + * Grabadora de voz integrada (Botón flotante de micrófono). +* **Modo Enfoque:** Posibilidad de ocultar menús laterales para escribir notas sin distracciones. + +#### Dashboard Asistente +* **Confirmación de Pagos:** Lista eficiente con acciones rápidas (Aprobar/Rechazar). +* **Gestión de Agenda:** Vista de calendario (Read/Write) pero sin acceso a notas clínicas. + +--- + +## 5. Requisitos Técnicos CSS +* Usar Variables CSS (`:root`) para todos los colores y fuentes. +* Diseño Responsivo (Media Queries estándar). +* Animaciones: **Fade-in** al hacer scroll (AOS o Framer Motion si es React/Next). + diff --git a/src/gloria.png b/src/gloria.png new file mode 100644 index 0000000..bee3513 Binary files /dev/null and b/src/gloria.png differ diff --git a/src/gloria_2.png b/src/gloria_2.png new file mode 100644 index 0000000..16055ef Binary files /dev/null and b/src/gloria_2.png differ diff --git a/src/inkscape.svg b/src/inkscape.svg new file mode 100644 index 0000000..2ce4f6a --- /dev/null +++ b/src/inkscape.svg @@ -0,0 +1,61 @@ + + + +image/svg+xml diff --git a/src/logo.png b/src/logo.png new file mode 100644 index 0000000..bc2c6f3 Binary files /dev/null and b/src/logo.png differ diff --git a/src/logo.svg b/src/logo.svg new file mode 100644 index 0000000..5a73250 --- /dev/null +++ b/src/logo.svg @@ -0,0 +1,60 @@ + + + +image/svg+xml diff --git a/src/services/icons/t_fam.png b/src/services/icons/t_fam.png new file mode 100644 index 0000000..802966b Binary files /dev/null and b/src/services/icons/t_fam.png differ diff --git a/src/services/icons/t_ind.png b/src/services/icons/t_ind.png new file mode 100644 index 0000000..3d58f13 Binary files /dev/null and b/src/services/icons/t_ind.png differ diff --git a/src/services/icons/t_pareja.png b/src/services/icons/t_pareja.png new file mode 100644 index 0000000..1182b6f Binary files /dev/null and b/src/services/icons/t_pareja.png differ