fix(landing): redisenar seccion instalacion con tarjetas solidas y IntersectionObserver
This commit is contained in:
@ -89,56 +89,78 @@
|
||||
|
||||
<!-- PREMIUM INSTALL GUIDE -->
|
||||
<section id="install-guide" class="install">
|
||||
<div class="install__gradient-bg"></div>
|
||||
<div class="install__orb install__orb--1"></div>
|
||||
<div class="install__orb install__orb--2"></div>
|
||||
<div class="install__wrap">
|
||||
|
||||
<div class="install__header reveal">
|
||||
<p class="install__eyebrow">Sin descargas pesadas</p>
|
||||
<h2 class="install__title">Añade SIB a tu inicio</h2>
|
||||
<p class="install__sub">Disfruta de la experiencia completa como una aplicación nativa. Ligera, rápida y siempre a mano.</p>
|
||||
<p class="install__sub">Disfruta de la experiencia completa como una app nativa. Ligera, rápida y siempre a mano.</p>
|
||||
</div>
|
||||
|
||||
<div class="install__grid">
|
||||
|
||||
<div class="glass-card reveal">
|
||||
<div class="glass-card__head">
|
||||
<div class="glass-card__icon apple-bg">
|
||||
<!-- iPhone Card -->
|
||||
<div class="icard reveal">
|
||||
<div class="icard__header">
|
||||
<div class="icard__icon icard__icon--apple">
|
||||
<span class="material-icons">apple</span>
|
||||
</div>
|
||||
<div class="glass-card__title-group">
|
||||
<h3>iPhone / iPad</h3>
|
||||
<span>Requiere Safari</span>
|
||||
<div>
|
||||
<h3 class="icard__device">iPhone / iPad</h3>
|
||||
<span class="icard__browser">Requiere Safari</span>
|
||||
</div>
|
||||
</div>
|
||||
<ul class="glass-card__steps">
|
||||
<li>Abre esta página web en <strong>Safari</strong>.</li>
|
||||
<li>Toca el botón central de <strong>Compartir</strong> <span class="material-icons inline-icon">ios_share</span>.</li>
|
||||
<li>Desliza hacia abajo y selecciona <strong>Agregar a inicio</strong> <span class="material-icons inline-icon">add_box</span>.</li>
|
||||
</ul>
|
||||
<ol class="icard__steps">
|
||||
<li>
|
||||
<div class="icard__step-num">1</div>
|
||||
<div>Abre esta página en <strong>Safari</strong></div>
|
||||
</li>
|
||||
<li>
|
||||
<div class="icard__step-num">2</div>
|
||||
<div>Toca el botón <strong>Compartir</strong> <span class="material-icons step-inline-icon">ios_share</span></div>
|
||||
</li>
|
||||
<li>
|
||||
<div class="icard__step-num">3</div>
|
||||
<div>Selecciona <strong>Agregar a inicio</strong> <span class="material-icons step-inline-icon">add_box</span></div>
|
||||
</li>
|
||||
</ol>
|
||||
</div>
|
||||
|
||||
<div class="glass-card reveal" style="transition-delay: 0.1s;">
|
||||
<div class="glass-card__head">
|
||||
<div class="glass-card__icon android-bg">
|
||||
<!-- Android Card -->
|
||||
<div class="icard reveal" style="transition-delay: 0.15s;">
|
||||
<div class="icard__header">
|
||||
<div class="icard__icon icard__icon--android">
|
||||
<span class="material-icons">android</span>
|
||||
</div>
|
||||
<div class="glass-card__title-group">
|
||||
<h3>Android</h3>
|
||||
<span>Chrome browser</span>
|
||||
<div>
|
||||
<h3 class="icard__device">Android</h3>
|
||||
<span class="icard__browser">Google Chrome</span>
|
||||
</div>
|
||||
</div>
|
||||
<ul class="glass-card__steps">
|
||||
<li>Abre esta página web en <strong>Google Chrome</strong>.</li>
|
||||
<li>Toca el menú <strong>⋮</strong> en la parte superior derecha.</li>
|
||||
<li>Selecciona <strong>Instalar Aplicación</strong> o <strong>Agregar a la pantalla principal</strong>.</li>
|
||||
</ul>
|
||||
<ol class="icard__steps">
|
||||
<li>
|
||||
<div class="icard__step-num">1</div>
|
||||
<div>Abre esta página en <strong>Chrome</strong></div>
|
||||
</li>
|
||||
<li>
|
||||
<div class="icard__step-num">2</div>
|
||||
<div>Toca el menú <strong>⋮</strong> arriba a la derecha</div>
|
||||
</li>
|
||||
<li>
|
||||
<div class="icard__step-num">3</div>
|
||||
<div>Elige <strong>Instalar Aplicación</strong></div>
|
||||
</li>
|
||||
</ol>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
<div class="install__footer reveal">
|
||||
<button class="btn-primary btn-primary--large" @click="launchApp">
|
||||
Continuar a la Aplicación ↗
|
||||
<span class="material-icons">directions_bus</span>
|
||||
Continuar a la Aplicación
|
||||
</button>
|
||||
</div>
|
||||
|
||||
@ -210,9 +232,26 @@ 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 =
|
||||
@ -224,7 +263,10 @@ onMounted(() => {
|
||||
}
|
||||
})
|
||||
|
||||
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 {
|
||||
|
||||
Reference in New Issue
Block a user