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

Update navbar visibility and use titulosib.png logo image

Browse Source
This commit is contained in:
Johan Samudio
2026-03-09 17:15:31 -05:00
parent ea11f9f7ff
commit 4f6f35f6d9
1 changed files with 21 additions and 34 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@ -4,8 +4,7 @@
<nav class="nav-minimal" :class="{ 'scrolled': scrolled }"> <nav class="nav-minimal" :class="{ 'scrolled': scrolled }">
<div class="nav-inner"> <div class="nav-inner">
<div class="brand"> <div class="brand">
<img src="/icono.png" alt="SIB Logo" class="brand-icon" /> <img src="/titulosib.png" alt="SIB Logo" class="brand-logo-img" />
<span class="brand-name">SIB</span>
</div> </div>
<div class="nav-links"> <div class="nav-links">
<button class="nav-btn" @click="scrollToInstall">{{ t('landing.hero.howToInstall') }}</button> <button class="nav-btn" @click="scrollToInstall">{{ t('landing.hero.howToInstall') }}</button>
@ -94,8 +93,7 @@
<footer class="footer-minimal"> <footer class="footer-minimal">
<div class="footer-inner"> <div class="footer-inner">
<div class="footer-logo"> <div class="footer-logo">
<img src="/icono.png" alt="SIB" class="footer-icon" /> <img src="/titulosib.png" alt="SIB" class="footer-logo-img" />
<span>SIB System</span>
</div> </div>
<p class="footer-rights">{{ t('landing.footer.rights') }}</p> <p class="footer-rights">{{ t('landing.footer.rights') }}</p>
</div> </div>
@ -153,17 +151,20 @@ const scrollToInstall = () => {
top: 0; top: 0;
left: 0; left: 0;
right: 0; right: 0;
height: 80px; height: 90px;
z-index: 1000; z-index: 1000;
transition: all 0.3s ease; transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
display: flex; display: flex;
align-items: center; align-items: center;
background: linear-gradient(to bottom, rgba(0,0,0,0.5) 0%, transparent 100%);
} }
.nav-minimal.scrolled { .nav-minimal.scrolled {
background: rgba(0, 0, 0, 0.8); background: rgba(0, 0, 0, 0.85);
backdrop-filter: blur(20px); backdrop-filter: blur(25px);
height: 70px; -webkit-backdrop-filter: blur(25px);
height: 75px;
border-bottom: 1px solid rgba(255,255,255,0.05);
} }
.nav-inner { .nav-inner {
@ -176,21 +177,10 @@ const scrollToInstall = () => {
padding: 0 24px; padding: 0 24px;
} }
.brand { .brand-logo-img {
display: flex; height: 50px;
align-items: center; width: auto;
gap: 12px; object-fit: contain;
}
.brand-icon {
width: 32px;
height: 32px;
}
.brand-name {
font-size: 24px;
font-weight: 800;
letter-spacing: -0.04em;
} }
.nav-links { .nav-links {
@ -416,18 +406,15 @@ const scrollToInstall = () => {
align-items: center; align-items: center;
} }
.footer-logo { .footer-logo-img {
display: flex; height: 35px;
align-items: center; width: auto;
gap: 12px; filter: brightness(0.7);
font-weight: 700; transition: filter 0.3s ease;
color: rgba(255, 255, 255, 0.4);
} }
.footer-icon { .footer-logo-img:hover {
width: 24px; filter: brightness(1);
height: 24px;
filter: grayscale(1) opacity(0.5);
} }
.footer-rights { .footer-rights {