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

Change landing background to specific image and lower hero text position

Browse Source
This commit is contained in:
Johan Samudio
2026-03-09 17:00:39 -05:00
parent 10230177c9
commit ea11f9f7ff
2 changed files with 4 additions and 23 deletions
Download Patch File Download Diff File Expand all files Collapse all files

BIN
frontend/public/landing-bg-bus.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 8.5 MiB

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

@ -16,9 +16,6 @@
<!-- Minimalist Hero --> <!-- Minimalist Hero -->
<header class="hero-minimal"> <header class="hero-minimal">
<video autoplay muted loop playsinline class="hero-video" ref="videoRef">
<source src="/videopromo.mp4?v=3" type="video/mp4">
</video>
<div class="hero-overlay"></div> <div class="hero-overlay"></div>
<div class="hero-content"> <div class="hero-content">
@ -114,7 +111,6 @@ import { useI18n } from 'vue-i18n'
const router = useRouter() const router = useRouter()
const { t } = useI18n() const { t } = useI18n()
const scrolled = ref(false) const scrolled = ref(false)
const videoRef = ref<HTMLVideoElement | null>(null)
const handleScroll = () => { const handleScroll = () => {
scrolled.value = window.scrollY > 50 scrolled.value = window.scrollY > 50
@ -123,11 +119,6 @@ const handleScroll = () => {
onMounted(() => { onMounted(() => {
window.addEventListener('scroll', handleScroll) window.addEventListener('scroll', handleScroll)
// Force play video just in case
if (videoRef.value) {
videoRef.value.play().catch(e => console.warn("Video autoplay failed:", e))
}
// PWA Detection // PWA Detection
const isStandalone = window.matchMedia('(display-mode: standalone)').matches || (window.navigator as any).standalone === true; const isStandalone = window.matchMedia('(display-mode: standalone)').matches || (window.navigator as any).standalone === true;
if (isStandalone) { if (isStandalone) {
@ -246,19 +237,9 @@ const scrollToInstall = () => {
text-align: center; text-align: center;
padding: 0 24px; padding: 0 24px;
overflow: hidden; overflow: hidden;
} background-image: url('/landing-bg-bus.png');
background-size: cover;
.hero-video { background-position: center;
position: absolute;
top: 50%;
left: 50%;
min-width: 100%;
min-height: 100%;
width: auto;
height: auto;
z-index: -2;
transform: translate(-50%, -50%);
object-fit: cover;
} }
.hero-overlay { .hero-overlay {
@ -271,7 +252,7 @@ const scrollToInstall = () => {
.hero-content { .hero-content {
position: relative; position: relative;
z-index: 1; z-index: 1;
padding-top: 80px; /* Lower the text */ padding-top: 140px; /* Bajar el texto más */
} }
.hero-title { .hero-title {