Hanzo_Dev/SIB
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix(landing): mejorar color de modal de instalacion y corregir TS bugs en scrolls

Browse Source
This commit is contained in:
Johan Samudio
2026-03-11 12:08:45 -05:00
parent e021dd6ed5
commit c60dfb0a90
1 changed files with 34 additions and 12 deletions
Download Patch File Download Diff File Expand all files Collapse all files

46
frontend/src/views/LandingView.vue
View File

@ -198,11 +198,14 @@ const onScroll = () => {
const revealElements = () => { const revealElements = () => {
const reveals = document.querySelectorAll('.reveal') const reveals = document.querySelectorAll('.reveal')
for (let i = 0; i < reveals.length; i++) { for (let i = 0; i < reveals.length; i++) {
const el = reveals[i]
if (!el) continue
const windowHeight = window.innerHeight const windowHeight = window.innerHeight
const elementTop = reveals[i].getBoundingClientRect().top const elementTop = el.getBoundingClientRect().top
const elementVisible = 100 const elementVisible = 100
if (elementTop < windowHeight - elementVisible) { if (elementTop < windowHeight - elementVisible) {
reveals[i].classList.add('active') el.classList.add('active')
} }
} }
} }
@ -418,6 +421,7 @@ const scrollToTop = () => window.scrollTo({ top: 0, behavior: 'smooth' })
} }
.text-gradient { .text-gradient {
background: linear-gradient(to right, #ffffff, #a1a1aa); background: linear-gradient(to right, #ffffff, #a1a1aa);
background-clip: text;
-webkit-background-clip: text; -webkit-background-clip: text;
-webkit-text-fill-color: transparent; -webkit-text-fill-color: transparent;
} }
@ -507,7 +511,16 @@ const scrollToTop = () => window.scrollTo({ top: 0, behavior: 'smooth' })
.install { .install {
padding: 120px 4%; position: relative; padding: 120px 4%; position: relative;
border-top: 1px solid var(--border-subtle); border-top: 1px solid var(--border-subtle);
background: linear-gradient(180deg, var(--bg-color) 0%, #0a0a0a 100%); 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__wrap { max-width: 900px; margin: 0 auto; position: relative; z-index: 2; }
@ -519,20 +532,29 @@ const scrollToTop = () => window.scrollTo({ top: 0, behavior: 'smooth' })
.install__title { font-size: clamp(2rem, 5vw, 3.5rem); font-weight: 800; letter-spacing: -0.03em; 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__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; } .install__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; margin-bottom: 60px; position: relative; z-index: 10; }
.glass-card { .glass-card {
background: var(--glass-bg); background: rgba(255, 255, 255, 0.03);
backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); backdrop-filter: blur(24px); -webkit-backdrop-filter: blur(24px);
border: 1px solid var(--glass-border); border: 1px solid rgba(255, 255, 255, 0.12);
border-radius: 24px; padding: 40px 32px; border-radius: 24px; padding: 40px 32px;
transition: all 0.3s ease; transition: all 0.4s ease;
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 { .glass-card:hover {
transform: translateY(-5px); transform: translateY(-5px);
background: rgba(30, 30, 30, 0.6); background: rgba(255, 255, 255, 0.06);
border-color: rgba(255, 255, 255, 0.2); border-color: rgba(255, 255, 255, 0.2);
box-shadow: 0 20px 40px rgba(0,0,0,0.4); box-shadow: 0 20px 40px rgba(0,0,0,0.5);
} }
.glass-card__head { .glass-card__head {
@ -542,8 +564,8 @@ const scrollToTop = () => window.scrollTo({ top: 0, behavior: 'smooth' })
width: 56px; height: 56px; border-radius: 16px; width: 56px; height: 56px; border-radius: 16px;
display: flex; align-items: center; justify-content: center; display: flex; align-items: center; justify-content: center;
} }
.apple-bg { background: rgba(255, 255, 255, 0.1); color: #fff; } .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: #34A853; } .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; } .glass-card__icon .material-icons { font-size: 32px; }
.glass-card__title-group h3 { font-size: 1.2rem; font-weight: 700; } .glass-card__title-group h3 { font-size: 1.2rem; font-weight: 700; }