mirror of
https://github.com/marcogll/gloria_app.git
synced 2026-03-15 16:24:48 +00:00
382 lines
14 KiB
HTML
382 lines
14 KiB
HTML
<!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>
|