From ca3cf03db87a0c2ade2ef3abc5be14fc3d130a45 Mon Sep 17 00:00:00 2001 From: Hanzo_dev <2002samudiojohan@gmail.com> Date: Wed, 11 Mar 2026 12:56:11 -0500 Subject: [PATCH] fix(landing): redisenar seccion instalacion con tarjetas solidas y IntersectionObserver --- frontend/src/views/LandingView.vue | 261 ++++++++++++++++++----------- 1 file changed, 167 insertions(+), 94 deletions(-) diff --git a/frontend/src/views/LandingView.vue b/frontend/src/views/LandingView.vue index 437ba52..263a801 100644 --- a/frontend/src/views/LandingView.vue +++ b/frontend/src/views/LandingView.vue @@ -89,56 +89,78 @@
-
+
+

Sin descargas pesadas

Añade SIB a tu inicio

-

Disfruta de la experiencia completa como una aplicación nativa. Ligera, rápida y siempre a mano.

+

Disfruta de la experiencia completa como una app nativa. Ligera, rápida y siempre a mano.

-
-
-
+ +
+
+
apple
-
-

iPhone / iPad

- Requiere Safari +
+

iPhone / iPad

+ Requiere Safari
-
    -
  • Abre esta página web en Safari.
    • -
  • Toca el botón central de Compartir ios_share.
    • -
  • Desliza hacia abajo y selecciona Agregar a inicio add_box.
    • -
+
    +
  1. +
    1
    +
    Abre esta página en Safari
    +
    2. +
  2. +
    2
    +
    Toca el botón Compartir ios_share
    +
    3. +
  3. +
    3
    +
    Selecciona Agregar a inicio add_box
    +
    4. +
-
-
-
+ +
+
+
android
-
-

Android

- Chrome browser +
+

Android

+ Google Chrome
-
    -
  • Abre esta página web en Google Chrome.
    • -
  • Toca el menú ⋮ en la parte superior derecha.
    • -
  • Selecciona Instalar Aplicación o Agregar a la pantalla principal.
    • -
+
    +
  1. +
    1
    +
    Abre esta página en Chrome
    +
    2. +
  2. +
    2
    +
    Toca el menú ⋮ arriba a la derecha
    +
    3. +
  3. +
    3
    +
    Elige Instalar Aplicación
    +
    4. +
@@ -210,21 +232,41 @@ const revealElements = () => { } } +let observer: IntersectionObserver | null = null + onMounted(() => { window.addEventListener('scroll', onScroll, { passive: true }) - revealElements() // Chequeo inicial - + + // IntersectionObserver ES más fiable que scroll manual para las animaciones + observer = new IntersectionObserver( + (entries) => { + entries.forEach(entry => { + if (entry.isIntersecting) { + entry.target.classList.add('active') + observer?.unobserve(entry.target) // Para de monitorear una vez activo + } + }) + }, + { threshold: 0.1 } // Activa cuando el 10% del elemento es visible + ) + + // Registrar todos los elementos con la clase .reveal + document.querySelectorAll('.reveal').forEach(el => observer?.observe(el)) + // Redirigir si ya está instalada / Standalone const isStandalone = window.matchMedia('(display-mode: standalone)').matches || (window.navigator as any).standalone === true - + if (isStandalone) { router.replace('/splash') } }) -onUnmounted(() => window.removeEventListener('scroll', onScroll)) +onUnmounted(() => { + window.removeEventListener('scroll', onScroll) + observer?.disconnect() +}) const launchApp = () => router.push('/splash') const scrollToInstall = () => document.getElementById('install-guide')?.scrollIntoView({ behavior: 'smooth' }) @@ -509,86 +551,117 @@ const scrollToTop = () => window.scrollTo({ top: 0, behavior: 'smooth' }) /* ─── INSTALL ──────────────────────────────────────────────── */ .install { - padding: 120px 4%; position: relative; - border-top: 1px solid var(--border-subtle); - background: #050505; - overflow: hidden; -} -.install__gradient-bg { - position: absolute; - top: 50%; left: 50%; width: 100vw; height: 500px; - transform: translate(-50%, -50%); - background: radial-gradient(ellipse at center, rgba(254, 231, 21, 0.08) 0%, rgba(6, 182, 212, 0.06) 40%, transparent 70%); - filter: blur(60px); - z-index: 1; pointer-events: none; -} -.install__wrap { max-width: 900px; margin: 0 auto; position: relative; z-index: 2; } - -.install__header { text-align: center; margin-bottom: 60px; } -.install__eyebrow { - color: var(--primary-color); font-size: 0.85rem; font-weight: 700; - letter-spacing: 0.15em; text-transform: uppercase; margin-bottom: 16px; -} -.install__title { font-size: clamp(2rem, 5vw, 3.5rem); font-weight: 800; letter-spacing: -0.03em; margin-bottom: 16px; } -.install__sub { font-size: 1.1rem; color: var(--text-muted); max-width: 500px; margin: 0 auto; line-height: 1.6; } - -.install__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; margin-bottom: 60px; position: relative; z-index: 10; } - -.glass-card { - background: rgba(255, 255, 255, 0.03); - backdrop-filter: blur(24px); -webkit-backdrop-filter: blur(24px); - border: 1px solid rgba(255, 255, 255, 0.12); - border-radius: 24px; padding: 40px 32px; - transition: all 0.4s ease; + padding: 120px 4%; position: relative; overflow: hidden; - box-shadow: 0 4px 30px rgba(0, 0, 0, 0.3); -} -.glass-card::before { - content: ''; - position: absolute; - top: 0; left: 0; right: 0; height: 1px; - background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent); -} -.glass-card:hover { - transform: translateY(-5px); - background: rgba(255, 255, 255, 0.06); - border-color: rgba(255, 255, 255, 0.2); - box-shadow: 0 20px 40px rgba(0,0,0,0.5); + background: #0c0c0c; + border-top: 1px solid rgba(255,255,255,0.06); } -.glass-card__head { - display: flex; align-items: center; gap: 16px; margin-bottom: 32px; +/* Orbes de luz de fondo */ +.install__orb { + position: absolute; border-radius: 50%; + pointer-events: none; filter: blur(80px); } -.glass-card__icon { - width: 56px; height: 56px; border-radius: 16px; +.install__orb--1 { + width: 500px; height: 500px; + top: -100px; left: -150px; + background: radial-gradient(circle, rgba(254,231,21,0.12) 0%, transparent 70%); +} +.install__orb--2 { + width: 400px; height: 400px; + bottom: -80px; right: -100px; + background: radial-gradient(circle, rgba(6,182,212,0.1) 0%, transparent 70%); +} + +.install__wrap { max-width: 900px; margin: 0 auto; position: relative; z-index: 2; } + +.install__header { text-align: center; margin-bottom: 64px; } +.install__eyebrow { + display: inline-block; + color: var(--primary-color); font-size: 0.8rem; font-weight: 700; + letter-spacing: 0.15em; text-transform: uppercase; + margin-bottom: 16px; + padding: 6px 16px; border-radius: 999px; + background: rgba(254,231,21,0.08); + border: 1px solid rgba(254,231,21,0.2); +} +.install__title { + font-size: clamp(2rem, 5vw, 3.2rem); font-weight: 800; + letter-spacing: -0.03em; margin-bottom: 16px; + color: #fff; +} +.install__sub { + font-size: 1.05rem; color: var(--text-muted); + max-width: 500px; margin: 0 auto; line-height: 1.6; +} + +.install__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; margin-bottom: 56px; } + +/* Tarjetas de instalación rediseñadas */ +.icard { + background: #181818; + border: 1px solid rgba(255,255,255,0.1); + border-radius: 20px; + padding: 36px 32px; + transition: transform 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease; +} +.icard:hover { + transform: translateY(-6px); + border-color: rgba(255,255,255,0.2); + box-shadow: 0 20px 60px rgba(0,0,0,0.5); +} + +.icard__header { + display: flex; align-items: center; gap: 16px; + margin-bottom: 28px; + padding-bottom: 24px; + border-bottom: 1px solid rgba(255,255,255,0.07); +} +.icard__icon { + width: 52px; height: 52px; border-radius: 14px; display: flex; align-items: center; justify-content: center; + flex-shrink: 0; } -.apple-bg { background: rgba(255, 255, 255, 0.1); color: #fff; box-shadow: inset 0 0 20px rgba(255,255,255,0.05); } -.android-bg { background: rgba(52, 168, 83, 0.15); color: #4ade80; box-shadow: inset 0 0 20px rgba(52, 168, 83, 0.05); } -.glass-card__icon .material-icons { font-size: 32px; } +.icard__icon .material-icons { font-size: 28px; } +.icard__icon--apple { background: rgba(255,255,255,0.08); color: #ffffff; } +.icard__icon--android { background: rgba(52,168,83,0.12); color: #4ade80; } -.glass-card__title-group h3 { font-size: 1.2rem; font-weight: 700; } -.glass-card__title-group span { font-size: 0.85rem; color: var(--text-muted); } +.icard__device { font-size: 1.1rem; font-weight: 700; color: #fff; margin-bottom: 2px; } +.icard__browser { font-size: 0.82rem; color: var(--text-muted); } -.glass-card__steps { list-style: none; display: flex; flex-direction: column; gap: 20px; counter-reset: step; } -.glass-card__steps li { - position: relative; padding-left: 40px; - font-size: 0.95rem; color: #d4d4d8; line-height: 1.5; +.icard__steps { + list-style: none; + display: flex; flex-direction: column; gap: 18px; + counter-reset: none; } -.glass-card__steps li::before { - counter-increment: step; content: counter(step); - position: absolute; left: 0; top: -2px; +.icard__steps li { + display: flex; gap: 14px; align-items: flex-start; +} +.icard__step-num { width: 26px; height: 26px; border-radius: 50%; - background: rgba(255, 255, 255, 0.05); border: 1px solid var(--border-subtle); + background: rgba(254,231,21,0.1); + border: 1px solid rgba(254,231,21,0.25); + color: var(--primary-color); + font-size: 0.78rem; font-weight: 700; display: flex; align-items: center; justify-content: center; - font-size: 0.8rem; font-weight: 700; color: #fff; + flex-shrink: 0; margin-top: 1px; +} +.icard__steps li > div:last-child { + font-size: 0.92rem; color: #c0c0c8; line-height: 1.5; +} +.icard__steps li strong { color: #fff; font-weight: 600; } +.step-inline-icon { + font-size: 16px; vertical-align: middle; + margin: 0 2px; color: var(--text-muted); } -.glass-card__steps li strong { color: #fff; font-weight: 600; } -.inline-icon { font-size: 18px; vertical-align: middle; margin: 0 4px; color: var(--text-muted); } .install__footer { text-align: center; } -.btn-primary--large { font-size: 1.1rem; padding: 20px 48px; border-radius: 16px; display: inline-flex; } +.btn-primary--large { + font-size: 1.05rem; padding: 18px 44px; + border-radius: 14px; display: inline-flex; + gap: 10px; +} /* ─── FOOTER ───────────────────────────────────────────────── */ .footer {