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

style: refine nav and hero layout in LandingView

Browse Source
This commit is contained in:
Johan Samudio
2026-03-10 14:29:42 -05:00
parent 68a40a1c36
commit 7536dbe2e3
1 changed files with 11 additions and 14 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@ -203,12 +203,9 @@ const scrollToInstall = () =>
/* ─── NAV ──────────────────────────────────────────── */
.nav {
position: fixed; top: 0; left: 0; right: 0; z-index: 1000;
height: 140px; display: flex; align-items: center; padding: 0 24px;
transition: transform .4s cubic-bezier(0.4, 0, 0.2, 1),
background .4s cubic-bezier(0.4, 0, 0.2, 1),
height .4s cubic-bezier(0.4, 0, 0.2, 1),
opacity .3s ease,
visibility .3s ease;
height: 90px; display: flex; align-items: center; padding: 0 24px;
background: linear-gradient(to bottom, rgba(0,0,0,0.3) 0%, transparent 100%);
transition: all .4s cubic-bezier(0.4, 0, 0.2, 1);
will-change: transform, background, height, opacity;
}
.nav--hidden {
@ -229,14 +226,14 @@ const scrollToInstall = () =>
display: flex; justify-content: space-between; align-items: center;
}
.nav__logo {
height: 130px;
height: 80px;
width: auto;
object-fit: contain;
filter: drop-shadow(0 4px 12px rgba(0,0,0,0.6));
filter: drop-shadow(0 4px 12px rgba(0,0,0,0.3));
transition: all .4s cubic-bezier(0.4, 0, 0.2, 1);
}
.nav--solid .nav__logo {
height: 60px;
height: 50px;
}
.nav__logo:hover { transform: scale(1.08) rotate(-2deg); }
@ -261,7 +258,7 @@ const scrollToInstall = () =>
}
.nav--solid .btn-install {
background: rgba(0,0,0, 0.04);
background: rgba(0,0,0, 0.05);
border: 1.5px solid rgba(0,0,0, 0.1);
color: var(--ink);
}
@ -303,8 +300,8 @@ const scrollToInstall = () =>
/* ─── HERO ─────────────────────────────────────────── */
.hero {
position: relative; min-height: 100svh;
display: flex; align-items: flex-end;
padding: 180px 24px 72px; /* Increased top padding from 88px to 180px */
display: flex; align-items: center; /* Cambiado de flex-end para mejor balance */
padding: 120px 24px 80px;
overflow: hidden;
}
@ -446,7 +443,7 @@ const scrollToInstall = () =>
/* Tablet + */
@media (min-width: 768px) {
.nav { padding: 0 40px; }
.hero { padding: 180px 48px 88px; }
.hero { padding: 120px 48px 80px; }
.nav__link { display: block; }
}
@ -461,7 +458,7 @@ const scrollToInstall = () =>
.btn-cta--sm { font-size: .82rem; padding: 8px 14px; border-radius: 8px; }
/* Hero */
.hero { padding: 120px 20px 56px; }
.hero { padding: 140px 20px 60px; }
.hero__title { font-size: clamp(2.1rem, 10.5vw, 3rem); }
.hero__desc { font-size: .9rem; margin-bottom: 28px; }
.hero__btns { flex-direction: column; }