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

mejoras en landing page: logo y botones

Browse Source
This commit is contained in:
Johan Samudio
2026-03-10 10:55:33 -05:00
parent bf9adf1d3a
commit 75129a2f9f
1 changed files with 53 additions and 17 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@ -6,7 +6,7 @@
<div class="nav__wrap">
<img src="/titulosib.png" alt="SIB" class="nav__logo" />
<div class="nav__actions">
<button class="nav__link" @click="scrollToInstall">¿Cómo instalar?</button>
<button class="btn-install" @click="scrollToInstall">¿Cómo instalar?</button>
<button class="btn-cta btn-cta--sm" @click="launchApp">Abrir app ↗</button>
</div>
</div>
@ -24,7 +24,7 @@
</div>
<h1 class="hero__title">
Sabé dónde<br>está tu bus.
¿Quieres saber donde<br>está tu bus?
</h1>
<p class="hero__desc">
@ -197,14 +197,44 @@ const scrollToInstall = () =>
max-width: 1100px; margin: 0 auto; width: 100%;
display: flex; justify-content: space-between; align-items: center;
}
.nav__logo { height: 30px; width: auto; object-fit: contain; }
.nav__actions { display: flex; align-items: center; gap: 20px; }
.nav__link {
background: none; border: none; font-family: inherit;
font-size: .9rem; font-weight: 500; color: var(--gray); cursor: pointer;
transition: color .15s;
.nav__logo {
height: 52px;
width: auto;
object-fit: contain;
filter: drop-shadow(0 4px 12px rgba(0,0,0,0.6));
transition: all .3s ease;
}
.nav__logo:hover { transform: scale(1.05); }
.nav__actions { display: flex; align-items: center; gap: 14px; }
/* ─── NEW INSTALL BUTTON (NAV) ───────────────────── */
.btn-install {
background: rgba(255,255,255, 0.15);
backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
border: 1.5px solid rgba(255,255,255, 0.3);
color: #fff;
font-family: inherit; font-size: .88rem; font-weight: 700;
padding: 10px 22px; border-radius: 12px; cursor: pointer;
transition: all .25s cubic-bezier(0.4, 0, 0.2, 1);
white-space: nowrap;
}
.btn-install:hover {
background: rgba(255,255,255, 0.25);
border-color: rgba(255,255,255, 0.5);
transform: translateY(-2px);
box-shadow: 0 4px 20px rgba(0,0,0,0.2);
}
.nav--solid .btn-install {
background: rgba(0,0,0, 0.04);
border: 1.5px solid rgba(0,0,0, 0.1);
color: var(--ink);
}
.nav--solid .btn-install:hover {
background: rgba(0,0,0, 0.08);
border-color: var(--ink);
}
.nav__link:hover { color: var(--ink); }
/* ─── BUTTONS ──────────────────────────────────────── */
.btn-cta {
@ -222,13 +252,19 @@ const scrollToInstall = () =>
.btn-outline {
display: inline-flex; align-items: center; justify-content: center;
font-family: inherit; font-weight: 500; font-size: 1rem;
background: none; border: 1.5px solid rgba(255,255,255,.25);
color: rgba(255,255,255,.7);
padding: 14px 30px; border-radius: 10px; cursor: pointer;
transition: border-color .18s, color .18s; white-space: nowrap;
font-family: inherit; font-weight: 700; font-size: 1rem;
background: rgba(255,255,255, 0.1);
backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
border: 1.5px solid rgba(255,255,255, 0.2);
color: #ffffff;
padding: 15px 34px; border-radius: 10px; cursor: pointer;
transition: all .2s; white-space: nowrap;
}
.btn-outline:hover {
background: rgba(255,255,255, 0.2);
border-color: rgba(255,255,255, 0.5);
transform: translateY(-2px);
}
.btn-outline:hover { border-color: rgba(255,255,255,.6); color: #fff; }
/* ─── HERO ─────────────────────────────────────────── */
.hero {
@ -385,8 +421,8 @@ const scrollToInstall = () =>
/* Nav */
.nav { padding: 0 18px; height: 58px; }
.nav--solid { border-bottom: 1px solid var(--border); }
.nav__logo { height: 25px; }
.nav__link { display: none; }
.nav__logo { height: 38px; }
.btn-install { display: none; }
.btn-cta--sm { font-size: .82rem; padding: 8px 14px; border-radius: 8px; }
/* Hero */