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