From 75129a2f9fe4085e0cd2c024407824080a1fa24c Mon Sep 17 00:00:00 2001
From: Hanzo_dev <2002samudiojohan@gmail.com>
Date: Tue, 10 Mar 2026 10:55:33 -0500
Subject: [PATCH] mejoras en landing page: logo y botones

---
 frontend/src/views/LandingView.vue | 70 ++++++++++++++++++++++--------
 1 file changed, 53 insertions(+), 17 deletions(-)

diff --git a/frontend/src/views/LandingView.vue b/frontend/src/views/LandingView.vue
index e6047c4..7ebb64a 100644
--- a/frontend/src/views/LandingView.vue
+++ b/frontend/src/views/LandingView.vue
@@ -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 */