diff --git a/src/components/Hero.astro b/src/components/Hero.astro index 3b7c626..4c76e00 100644 --- a/src/components/Hero.astro +++ b/src/components/Hero.astro @@ -95,55 +95,206 @@ const { t, whatsappUrl } = Astro.props; - -
-
-
- {t('hero.eyebrow')} + +
+ + +
+
+
+ {t('hero.eyebrow')} +
+
+
+ + + @@ -165,8 +316,110 @@ const { t, whatsappUrl } = Astro.props; const prefersReduced = window.matchMedia('(prefers-reduced-motion: reduce)').matches; if (!prefersReduced) { - const heroTimeline = gsap.timeline({ delay: 0.3 }); + const slides = document.querySelectorAll('.hero-slide'); + const fills = document.querySelectorAll('.hero-bar-fill'); + const bars = document.querySelectorAll('.hero-bar'); + const SLIDE_COUNT = 5; + const SLIDE_DURATION = 3.5; + const TRANSITION_DURATION = 1.3; + let currentSlide = 0; + let autoplayTween: gsap.core.Tween | null = null; + let isPaused = false; + let isTransitioning = false; + gsap.set(slides, { x: '100%' }); + gsap.set(slides[0], { x: 0 }); + + function goToSlide(next: number) { + if (isTransitioning || next === currentSlide) return; + isTransitioning = true; + + const prev = currentSlide; + const currentEl = slides[prev]; + const nextEl = slides[next]; + + gsap.set(fills[prev], { scaleX: 0 }); + + currentEl.setAttribute('aria-hidden', 'true'); + bars[prev].setAttribute('aria-selected', 'false'); + + nextEl.removeAttribute('aria-hidden'); + bars[next].setAttribute('aria-selected', 'true'); + + gsap.set(nextEl, { x: '100%' }); + + const tl = gsap.timeline({ + onComplete: () => { + currentEl.classList.remove('is-active'); + gsap.set(currentEl, { x: '100%' }); + isTransitioning = false; + startAutoplay(); + }, + }); + + tl.to(currentEl, { + x: '-100%', + duration: TRANSITION_DURATION, + ease: 'power3.in', + }) + .to(nextEl, { + x: 0, + duration: TRANSITION_DURATION, + ease: 'power3.out', + onStart: () => { + nextEl.classList.add('is-active'); + }, + }, 0.65); + + currentSlide = next; + } + + function startAutoplay() { + if (autoplayTween) autoplayTween.kill(); + gsap.set(fills[currentSlide], { scaleX: 0 }); + autoplayTween = gsap.to(fills[currentSlide], { + scaleX: 1, + duration: SLIDE_DURATION, + ease: 'none', + onComplete: () => { + goToSlide((currentSlide + 1) % SLIDE_COUNT); + }, + }); + if (isPaused) autoplayTween.pause(); + } + + bars.forEach((bar) => { + bar.addEventListener('click', () => { + const idx = parseInt(bar.dataset.slide || '0', 10); + if (idx !== currentSlide) { + goToSlide(idx); + } + }); + }); + + const hoverZone = document.getElementById('hero-carousel'); + if (hoverZone) { + hoverZone.addEventListener('mouseenter', () => { + isPaused = true; + if (autoplayTween) autoplayTween.pause(); + }); + hoverZone.addEventListener('mouseleave', () => { + isPaused = false; + if (autoplayTween) autoplayTween.resume(); + }); + } + + gsap.to('#hero-float-top', { + y: -30, x: -15, duration: 3, ease: 'sine.inOut', repeat: -1, yoyo: true, + }); + gsap.to('#hero-float-mid', { + y: 25, x: 12, duration: 4, ease: 'sine.inOut', repeat: -1, yoyo: true, delay: 0.5, + }); + gsap.to('#hero-float-bot', { + y: -20, x: -10, duration: 3.5, ease: 'sine.inOut', repeat: -1, yoyo: true, delay: 1, + }); + + const heroTimeline = gsap.timeline({ delay: 0.3 }); heroTimeline .to('#hero-glass-ring', { opacity: 1, @@ -180,18 +433,6 @@ const { t, whatsappUrl } = Astro.props; duration: 0.6, ease: 'power2.out', }, '-=0.8') - .to('#hero-headline', { - opacity: 1, - y: 0, - duration: 0.8, - ease: 'power3.out', - }, '-=0.1') - .to('#hero-body', { - opacity: 1, - y: 0, - duration: 0.7, - ease: 'power2.out', - }, '-=0.2') .to('#hero-ctas', { opacity: 1, y: 0, @@ -208,38 +449,15 @@ const { t, whatsappUrl } = Astro.props; duration: 0.6, }, '-=0.2'); - // Parallax floating shapes - gsap.to('#hero-float-top', { - y: -30, - x: -15, - duration: 3, - ease: 'sine.inOut', - repeat: -1, - yoyo: true, - }); - gsap.to('#hero-float-mid', { - y: 25, - x: 12, - duration: 4, - ease: 'sine.inOut', - repeat: -1, - yoyo: true, - delay: 0.5, - }); - gsap.to('#hero-float-bot', { - y: -20, - x: -10, - duration: 3.5, - ease: 'sine.inOut', - repeat: -1, - yoyo: true, - delay: 1, - }); + startAutoplay(); } else { - // Show everything without animation - document.querySelectorAll('#hero-eyebrow, #hero-headline, #hero-body, #hero-ctas, #hero-badges, #hero-scroll-indicator, #hero-glass-ring').forEach(el => { + document.querySelectorAll('#hero-eyebrow, #hero-ctas, #hero-badges, #hero-scroll-indicator, #hero-glass-ring').forEach(el => { (el as HTMLElement).style.opacity = '1'; }); + const firstSlide = document.querySelector('.hero-slide'); + if (firstSlide) (firstSlide as HTMLElement).style.transform = 'translateX(0)'; + const firstFill = document.querySelector('.hero-bar-fill'); + if (firstFill) (firstFill as HTMLElement).style.transform = 'scaleX(1)'; } @@ -247,12 +465,6 @@ const { t, whatsappUrl } = Astro.props; #hero-eyebrow { transform: translateY(16px); } - #hero-headline { - transform: translateY(24px); - } - #hero-body { - transform: translateY(20px); - } #hero-ctas { transform: translateY(16px); } @@ -263,16 +475,47 @@ const { t, whatsappUrl } = Astro.props; transform: translate(-50%, -50%) scale(0.85); } - /* Cloud opacity — light mode (dark mode keeps low opacity) */ + #hero-carousel { + position: relative; + overflow: hidden; + min-height: clamp(300px, 40vw, 500px); + } + .hero-slide { + position: absolute; + inset: 0; + width: 100%; + transform: translateX(100%); + } + .hero-slide.is-active { + transform: translateX(0); + } + + .hero-bar { + flex: 1; + height: 2px; + background: var(--hds-fg-muted); + opacity: 0.25; + border-radius: 1px; + overflow: hidden; + border: none; + padding: 0; + cursor: pointer; + } + .hero-bar-fill { + display: block; + height: 100%; + background: var(--color-hds-naranja); + transform: scaleX(0); + transform-origin: left; + } + .cloud-p1 { opacity: 0.18; } .cloud-p2 { opacity: 0.12; } - /* Floating shapes — dark mode keeps subtle opacity */ #hero-float-top { opacity: 0.30; } #hero-float-mid { opacity: 0.25; } #hero-float-bot { opacity: 0.20; } - /* LIGHT MODE OVERRIDES — cloud more visible, shapes more opaque, badges darker */ :root:not(.dark) .cloud-p1 { opacity: 0.72; } :root:not(.dark) .cloud-p2 { opacity: 0.55; } :root:not(.dark) #hero-float-top { opacity: 0.55; } @@ -280,4 +523,13 @@ const { t, whatsappUrl } = Astro.props; :root:not(.dark) #hero-float-bot { opacity: 0.45; } :root:not(.dark) #hero-badges { color: var(--hds-fg-soft) !important; } + @media (prefers-reduced-motion: reduce) { + .hero-slide { + transform: none; + transition: transform 0.3s ease; + } + .hero-bar-fill { + transition: transform 0.3s ease; + } + } diff --git a/src/components/StatsSection.astro b/src/components/StatsSection.astro index f802e7c..739735a 100644 --- a/src/components/StatsSection.astro +++ b/src/components/StatsSection.astro @@ -15,8 +15,8 @@ const stats = [ ]; const values = lang === 'en' - ? ['26+', '100+', '4', 'Senior'] - : ['26+', '100+', '4', 'Senior']; + ? ['26+', '100+', '4', 'Pro'] + : ['26+', '100+', '4', 'Pro']; ---
diff --git a/src/i18n/ui.ts b/src/i18n/ui.ts index cd9eec2..460510e 100644 --- a/src/i18n/ui.ts +++ b/src/i18n/ui.ts @@ -9,6 +9,16 @@ export const ui = { 'hero.eyebrow': 'Premium hosting · Desde 2000', 'hero.title': 'Alojamiento en la nube que te conoce.', 'hero.body': 'Soporte humano senior en Maldonado, Uruguay. Del otro lado hay una persona que conoce tu proyecto, no un ticket automático. La misma tecnología que los gigantes, con la cercanía que nos diferencia.', + 'hero.slide1.title': 'Alojamiento en la nube que te conoce.', + 'hero.slide1.body': 'Soporte humano senior en Maldonado. Del otro lado hay una persona que conoce tu proyecto, no un ticket automático.', + 'hero.slide2.title': 'Todo el milenio acompañándote en el crecimiento de tu empresa.', + 'hero.slide2.body': 'Desde 2000 trabajando en hosting, correo y soporte senior para que tu web no sea un problema sino una solución.', + 'hero.slide3.title': 'Cuando algo falla, hablás con quien lo resuelve.', + 'hero.slide3.body': 'Técnicos humanos. Respuesta en horas, no en colas. Sabemos de cPanel, WordPress y el stack que usás vos.', + 'hero.slide4.title': 'La misma tecnología que los grandes, en tu idioma y sin intermediarios.', + 'hero.slide4.body': 'CloudLinux, cPanel y monitoreo 24/7. Rendimiento de datacenter con alguien local cuando lo necesitás.', + 'hero.slide5.title': 'Más de 20 años apoyando a emprendedores.', + 'hero.slide5.body': 'Misma gente, misma infraestructura, sin call center anónimo.', 'hero.ctaPrimary': 'Ver planes', 'hero.ctaSecondary': 'Hablar por WhatsApp', 'hero.badge26': '26+ años', @@ -22,7 +32,7 @@ export const ui = { 'stats.sub2': 'Webs, e-commerce, infra', 'stats.label3': 'Países', 'stats.sub3': 'Canadá, USA, Alemania, UY', - 'stats.label4': 'Equipo senior', + 'stats.label4': 'Equipo de profesionales', 'stats.sub4': 'SysAdmin / SRE', 'diff.eyebrow': 'La diferencia', 'diff.title': 'Por qué elegirnos', @@ -75,6 +85,16 @@ export const ui = { 'hero.eyebrow': 'Premium hosting · Since 2000', 'hero.title': 'Cloud hosting that knows you.', 'hero.body': 'Senior human support in Maldonado, Uruguay. There is a real person who knows your project on the other side, not an automatic ticket. The same technology as the tech giants, with the closeness that sets us apart.', + 'hero.slide1.title': 'Cloud hosting that knows you.', + 'hero.slide1.body': 'Senior human support in Maldonado. There is a real person who knows your project on the other side, not an automatic ticket.', + 'hero.slide2.title': 'Supporting your growth for the entire millennium.', + 'hero.slide2.body': 'Since 2000 working in hosting, email and senior support so your web is a solution, not a problem.', + 'hero.slide3.title': 'When something breaks, you talk to the one who fixes it.', + 'hero.slide3.body': 'Human engineers. Response in hours, not queues. We know cPanel, WordPress and the stack you run.', + 'hero.slide4.title': 'The same technology as the big players, in your language and no middlemen.', + 'hero.slide4.body': 'CloudLinux, cPanel and 24/7 monitoring. Datacenter performance with someone local when you need it.', + 'hero.slide5.title': 'Over 20 years backing entrepreneurs.', + 'hero.slide5.body': 'Same people, same infrastructure, no anonymous call center.', 'hero.ctaPrimary': 'View plans', 'hero.ctaSecondary': 'Chat on WhatsApp', 'hero.badge26': '26+ years', @@ -88,7 +108,7 @@ export const ui = { 'stats.sub2': 'Websites, e-commerce, infra', 'stats.label3': 'Countries', 'stats.sub3': 'Canada, USA, Germany, UY', - 'stats.label4': 'Senior team', + 'stats.label4': 'Professional team', 'stats.sub4': 'SysAdmin / SRE', 'diff.eyebrow': 'The difference', 'diff.title': 'Why choose us',