mirror of
https://github.com/marcogll/gloria_app.git
synced 2026-03-15 13:24:44 +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>
|
||||
BIN
mockup/src/gloria.png
Normal file
BIN
mockup/src/gloria.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 1.5 MiB |
BIN
mockup/src/gloria_2.png
Normal file
BIN
mockup/src/gloria_2.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 1.8 MiB |
61
mockup/src/inkscape.svg
Normal file
61
mockup/src/inkscape.svg
Normal file
File diff suppressed because one or more lines are too long
|
After Width: | Height: | Size: 2.0 MiB |
BIN
mockup/src/logo.png
Normal file
BIN
mockup/src/logo.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 94 KiB |
60
mockup/src/logo.svg
Normal file
60
mockup/src/logo.svg
Normal file
File diff suppressed because one or more lines are too long
|
After Width: | Height: | Size: 2.0 MiB |
BIN
mockup/src/services/icons/t_fam.png
Normal file
BIN
mockup/src/services/icons/t_fam.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 14 KiB |
BIN
mockup/src/services/icons/t_ind.png
Normal file
BIN
mockup/src/services/icons/t_ind.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 14 KiB |
BIN
mockup/src/services/icons/t_pareja.png
Normal file
BIN
mockup/src/services/icons/t_pareja.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 12 KiB |
879
mockup/styles.css
Normal file
879
mockup/styles.css
Normal file
@@ -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;
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user