mirror of
https://github.com/marcogll/gloria_app.git
synced 2026-03-15 16:24:48 +00:00
ajuste de docu
This commit is contained in:
Marco Gallegos
381
mockup/index.html
Normal file
381
mockup/index.html
Normal file
@@ -0,0 +1,381 @@
|
||||
<!doctype html>
|
||||
<html lang="es">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<link rel="icon" type="image/png" href="./src/logo.png" />
|
||||
<title>Gloria Niño - Sanación Integral</title>
|
||||
<!-- Google Fonts -->
|
||||
<link rel="preconnect" href="https://fonts.googleapis.com" />
|
||||
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
|
||||
<link
|
||||
href="https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@0,400;0,700;1,400&family=Fira+Code:wght@300;400;500;600&display=swap"
|
||||
rel="stylesheet"
|
||||
/>
|
||||
<link rel="stylesheet" href="styles.css" />
|
||||
</head>
|
||||
<body>
|
||||
<!-- Header -->
|
||||
<header class="header">
|
||||
<div class="container header-inner">
|
||||
<a href="#" class="logo">
|
||||
<img src="./src/logo.svg" alt="Gloria Niño" style="height: 50px; width: auto;">
|
||||
</a>
|
||||
|
||||
<!-- Hamburger Menu Button -->
|
||||
<button class="menu-toggle" id="menuToggle" aria-label="Abrir menú">
|
||||
<span></span>
|
||||
<span></span>
|
||||
<span></span>
|
||||
</button>
|
||||
|
||||
<nav class="nav" id="navMenu">
|
||||
<ul>
|
||||
<li><a href="#inicio">Inicio</a></li>
|
||||
<li><a href="#sobre-mi">Sobre mí</a></li>
|
||||
<li><a href="#servicios">Servicios</a></li>
|
||||
<li><a href="#testimonios">Testimonios</a></li>
|
||||
<li><a href="#contacto">Contacto</a></li>
|
||||
</ul>
|
||||
</nav>
|
||||
<a
|
||||
href="#agendar"
|
||||
class="btn btn-primary header-cta"
|
||||
style="padding: 0.5rem 1.5rem; font-size: 0.9rem"
|
||||
>Agendar</a
|
||||
>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<script>
|
||||
// Mobile Menu Toggle
|
||||
const menuToggle = document.getElementById('menuToggle');
|
||||
const navMenu = document.getElementById('navMenu');
|
||||
|
||||
menuToggle.addEventListener('click', () => {
|
||||
menuToggle.classList.toggle('active');
|
||||
navMenu.classList.toggle('active');
|
||||
});
|
||||
|
||||
// Close menu when clicking a link
|
||||
document.querySelectorAll('.nav a').forEach(link => {
|
||||
link.addEventListener('click', () => {
|
||||
menuToggle.classList.remove('active');
|
||||
navMenu.classList.remove('active');
|
||||
});
|
||||
});
|
||||
|
||||
// Scroll Animation Observer
|
||||
const observerOptions = {
|
||||
root: null,
|
||||
rootMargin: '0px',
|
||||
threshold: 0.1
|
||||
};
|
||||
|
||||
const observer = new IntersectionObserver((entries, observer) => {
|
||||
entries.forEach(entry => {
|
||||
if (entry.isIntersecting) {
|
||||
entry.target.classList.add('visible');
|
||||
}
|
||||
});
|
||||
}, observerOptions);
|
||||
|
||||
document.addEventListener('DOMContentLoaded', () => {
|
||||
// Fade In Animation
|
||||
const sections = document.querySelectorAll('.fade-in');
|
||||
sections.forEach(section => {
|
||||
observer.observe(section);
|
||||
});
|
||||
|
||||
// Carousel Logic
|
||||
const track = document.querySelector('.carousel-track');
|
||||
const slides = Array.from(track.children);
|
||||
const nextButton = document.querySelector('.carousel-btn.next');
|
||||
const prevButton = document.querySelector('.carousel-btn.prev');
|
||||
const dotsNav = document.querySelector('.carousel-nav');
|
||||
const dots = Array.from(dotsNav.children);
|
||||
|
||||
const slideWidth = slides[0].getBoundingClientRect().width;
|
||||
|
||||
// Arrange the slides next to one another
|
||||
const setSlidePosition = (slide, index) => {
|
||||
slide.style.left = slideWidth * index + 'px';
|
||||
};
|
||||
slides.forEach(setSlidePosition);
|
||||
|
||||
const moveToSlide = (track, currentSlide, targetSlide) => {
|
||||
track.style.transform = 'translateX(-' + targetSlide.style.left + ')';
|
||||
currentSlide.classList.remove('current-slide');
|
||||
targetSlide.classList.add('current-slide');
|
||||
}
|
||||
|
||||
const updateDots = (currentDot, targetDot) => {
|
||||
currentDot.classList.remove('current-slide');
|
||||
targetDot.classList.add('current-slide');
|
||||
}
|
||||
|
||||
// Click Left
|
||||
prevButton.addEventListener('click', e => {
|
||||
const currentSlide = track.querySelector('.current-slide');
|
||||
const prevSlide = currentSlide.previousElementSibling;
|
||||
const currentDot = dotsNav.querySelector('.current-slide');
|
||||
const prevDot = currentDot.previousElementSibling;
|
||||
|
||||
if (prevSlide) {
|
||||
moveToSlide(track, currentSlide, prevSlide);
|
||||
updateDots(currentDot, prevDot);
|
||||
}
|
||||
});
|
||||
|
||||
// Click Right
|
||||
nextButton.addEventListener('click', e => {
|
||||
const currentSlide = track.querySelector('.current-slide');
|
||||
const nextSlide = currentSlide.nextElementSibling;
|
||||
const currentDot = dotsNav.querySelector('.current-slide');
|
||||
const nextDot = currentDot.nextElementSibling;
|
||||
|
||||
if (nextSlide) {
|
||||
moveToSlide(track, currentSlide, nextSlide);
|
||||
updateDots(currentDot, nextDot);
|
||||
}
|
||||
});
|
||||
|
||||
// Click Nav Indicators
|
||||
dotsNav.addEventListener('click', e => {
|
||||
const targetDot = e.target.closest('button');
|
||||
|
||||
if (!targetDot) return;
|
||||
|
||||
const currentSlide = track.querySelector('.current-slide');
|
||||
const currentDot = dotsNav.querySelector('.current-slide');
|
||||
const targetIndex = dots.findIndex(dot => dot === targetDot);
|
||||
const targetSlide = slides[targetIndex];
|
||||
|
||||
moveToSlide(track, currentSlide, targetSlide);
|
||||
updateDots(currentDot, targetDot);
|
||||
});
|
||||
|
||||
// Auto Rotate
|
||||
setInterval(() => {
|
||||
const currentSlide = track.querySelector('.current-slide');
|
||||
const nextSlide = currentSlide.nextElementSibling || slides[0];
|
||||
const currentDot = dotsNav.querySelector('.current-slide');
|
||||
const nextDot = currentDot.nextElementSibling || dots[0];
|
||||
|
||||
moveToSlide(track, currentSlide, nextSlide);
|
||||
updateDots(currentDot, nextDot);
|
||||
}, 5000);
|
||||
});
|
||||
</script>
|
||||
|
||||
<!-- Hero Section -->
|
||||
<section class="hero" id="inicio">
|
||||
<div class="container hero-grid">
|
||||
<div class="hero-content">
|
||||
<h1>Gloria Niño<br><span style="font-size: 0.6em; font-weight: 400; display: block; margin-top: 0.2rem;">Terapeuta Emocional</span></h1>
|
||||
<p>
|
||||
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.
|
||||
</p>
|
||||
<div class="hero-actions">
|
||||
<a href="#agendar" class="btn btn-primary">Agenda tu Cita</a>
|
||||
<a href="#servicios" class="btn btn-secondary">Ver Servicios</a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="hero-image">
|
||||
<img
|
||||
src="./src/gloria.png"
|
||||
alt="Gloria Niño - Terapeuta Emocional"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Sobre Mí (Breve) -->
|
||||
<section class="section-about fade-in" id="sobre-mi">
|
||||
<div class="container">
|
||||
<div class="section-title">
|
||||
<h2>Sobre Mí</h2>
|
||||
</div>
|
||||
<div class="about-content">
|
||||
<div class="about-image">
|
||||
<img
|
||||
src="./src/gloria_2.png"
|
||||
alt="Gloria Niño en sesión"
|
||||
>
|
||||
</div>
|
||||
<div class="about-text">
|
||||
<p>
|
||||
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.
|
||||
</p>
|
||||
<div class="about-actions">
|
||||
<a href="#servicios" class="btn btn-primary">Ver Servicios</a>
|
||||
<a href="#contacto" class="btn btn-secondary">Contactar</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Services -->
|
||||
<section class="section-services fade-in" id="servicios">
|
||||
<div class="container">
|
||||
<div class="section-title">
|
||||
<h2>Mis Servicios</h2>
|
||||
<p>Enfoques adaptados a tus necesidades actuales.</p>
|
||||
</div>
|
||||
<div class="services-grid">
|
||||
<!-- Service 1 -->
|
||||
<div class="service-card">
|
||||
<img src="./src/services/icons/t_ind.png" alt="Terapia Individual" style="width: 80px; height: 80px; margin-bottom: 1.5rem;">
|
||||
<h3>Terapia Individual</h3>
|
||||
<p>
|
||||
Sesiones uno a uno enfocadas en ansiedad, depresión, trauma o
|
||||
crecimiento personal.
|
||||
</p>
|
||||
</div>
|
||||
<!-- Service 2 -->
|
||||
<div class="service-card">
|
||||
<img src="./src/services/icons/t_pareja.png" alt="Terapia de Pareja" style="width: 80px; height: 80px; margin-bottom: 1.5rem;">
|
||||
<h3>Terapia de Pareja</h3>
|
||||
<p>
|
||||
Espacios para mejorar la comunicación, resolver conflictos y
|
||||
reconectar.
|
||||
</p>
|
||||
</div>
|
||||
<!-- Service 3 -->
|
||||
<div class="service-card">
|
||||
<img src="./src/services/icons/t_fam.png" alt="Talleres y Grupos" style="width: 80px; height: 80px; margin-bottom: 1.5rem;">
|
||||
<h3>Talleres y Grupos</h3>
|
||||
<p>Experiencias colectivas de sanación y aprendizaje emocional.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Testimonials -->
|
||||
<section class="section-testimonials fade-in" id="testimonios">
|
||||
<div class="container">
|
||||
<div class="section-title">
|
||||
<h2>Lo que dicen mis pacientes</h2>
|
||||
</div>
|
||||
|
||||
<div class="carousel-container">
|
||||
<button class="carousel-btn prev" aria-label="Anterior">❮</button>
|
||||
|
||||
<div class="carousel-track-container">
|
||||
<ul class="carousel-track">
|
||||
<!-- Testimonio 1 -->
|
||||
<li class="carousel-slide current-slide">
|
||||
<div class="testimonial-card">
|
||||
<p class="testimonial-quote">
|
||||
"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."
|
||||
</p>
|
||||
<p class="testimonial-author">— María G.</p>
|
||||
</div>
|
||||
</li>
|
||||
|
||||
<!-- Testimonio 2 -->
|
||||
<li class="carousel-slide">
|
||||
<div class="testimonial-card">
|
||||
<p class="testimonial-quote">
|
||||
"Gracias a la terapia con Gloria pude sanar heridas de mi infancia que afectaban mis relaciones actuales. Es una terapeuta excepcionalmente empática."
|
||||
</p>
|
||||
<p class="testimonial-author">— Carlos R.</p>
|
||||
</div>
|
||||
</li>
|
||||
|
||||
<!-- Testimonio 3 -->
|
||||
<li class="carousel-slide">
|
||||
<div class="testimonial-card">
|
||||
<p class="testimonial-quote">
|
||||
"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."
|
||||
</p>
|
||||
<p class="testimonial-author">— Ana Sofía L.</p>
|
||||
</div>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<button class="carousel-btn next" aria-label="Siguiente">❯</button>
|
||||
</div>
|
||||
|
||||
<div class="carousel-nav">
|
||||
<button class="carousel-indicator current-slide"></button>
|
||||
<button class="carousel-indicator"></button>
|
||||
<button class="carousel-indicator"></button>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Contact Form Section -->
|
||||
<section class="section-contact fade-in" id="contacto-form" style="background-color: white;">
|
||||
<div class="container">
|
||||
<div class="section-title">
|
||||
<h2>Contáctame</h2>
|
||||
<p>¿Tienes alguna duda? Escríbeme y te responderé lo antes posible.</p>
|
||||
</div>
|
||||
|
||||
<div class="contact-form-container">
|
||||
<form class="contact-form" onsubmit="event.preventDefault(); alert('Mensaje enviado (simulado)');">
|
||||
<div class="form-group">
|
||||
<label for="name">Nombre</label>
|
||||
<input type="text" id="name" name="name" placeholder="Tu nombre" required>
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label for="phone">Teléfono / WhatsApp</label>
|
||||
<input type="tel" id="phone" name="phone" placeholder="Tu número de contacto" required>
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label for="message">Mensaje</label>
|
||||
<textarea id="message" name="message" rows="4" placeholder="¿En qué puedo ayudarte?" required></textarea>
|
||||
</div>
|
||||
<button type="submit" class="btn btn-primary" style="width: 100%;">Enviar Mensaje</button>
|
||||
</form>
|
||||
|
||||
<div class="contact-info-cards">
|
||||
<div class="info-card">
|
||||
<h3>Ubicación</h3>
|
||||
<p>Consultorio Virtual & Presencial<br>Ciudad de México</p>
|
||||
</div>
|
||||
<div class="info-card">
|
||||
<h3>Horarios</h3>
|
||||
<p>Lunes a Viernes<br>9:00 AM - 7:00 PM</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Footer -->
|
||||
<footer class="footer" id="contacto">
|
||||
<div class="container">
|
||||
<div class="footer-grid">
|
||||
<div class="footer-col">
|
||||
<h4>Gloria Niño</h4>
|
||||
<p>Terapeuta Emocional.</p>
|
||||
</div>
|
||||
<div class="footer-col">
|
||||
<h4>Enlaces</h4>
|
||||
<ul>
|
||||
<li><a href="#inicio">Inicio</a></li>
|
||||
<li><a href="#servicios">Servicios</a></li>
|
||||
<li><a href="#privacidad">Política de Privacidad</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="footer-col">
|
||||
<h4>Contacto</h4>
|
||||
<ul>
|
||||
<li>
|
||||
<a href="mailto:contacto@glorianino.com">contacto@glorianino.com</a>
|
||||
</li>
|
||||
<li><a href="tel:+525512345678">+52 55 1234 5678</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
<div class="footer-bottom">
|
||||
<p>© 2026 Gloria App. Todos los derechos reservados.</p>
|
||||
</div>
|
||||
</div>
|
||||
</footer>
|
||||
</body>
|
||||
</html>
|
||||
Reference in New Issue
Block a user