From 10230177c9070a41ab9acbd78cce770267f22f35 Mon Sep 17 00:00:00 2001
From: Hanzo_dev <2002samudiojohan@gmail.com>
Date: Mon, 9 Mar 2026 16:38:08 -0500
Subject: [PATCH] Fix: Force video playback and adjust overlay transparency for
 better visibility

---
 frontend/src/views/LandingView.vue | 12 +++++++++---
 1 file changed, 9 insertions(+), 3 deletions(-)

diff --git a/frontend/src/views/LandingView.vue b/frontend/src/views/LandingView.vue
index 17327e9..241d016 100644
--- a/frontend/src/views/LandingView.vue
+++ b/frontend/src/views/LandingView.vue
@@ -16,8 +16,8 @@
 
     <!-- Minimalist Hero -->
     <header class="hero-minimal">
-      <video autoplay muted loop playsinline class="hero-video">
-        <source src="/videopromo.mp4" type="video/mp4">
+      <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>
       
@@ -114,6 +114,7 @@ import { useI18n } from 'vue-i18n'
 const router = useRouter()
 const { t } = useI18n()
 const scrolled = ref(false)
+const videoRef = ref<HTMLVideoElement | null>(null)
 
 const handleScroll = () => {
   scrolled.value = window.scrollY > 50
@@ -122,6 +123,11 @@ const handleScroll = () => {
 onMounted(() => {
   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
   const isStandalone = window.matchMedia('(display-mode: standalone)').matches || (window.navigator as any).standalone === true;
   if (isStandalone) {
@@ -258,7 +264,7 @@ const scrollToInstall = () => {
 .hero-overlay {
   position: absolute;
   inset: 0;
-  background: radial-gradient(circle, rgba(0,0,0,0.4) 0%, rgba(0,0,0,0.8) 100%);
+  background: linear-gradient(to bottom, rgba(0,0,0,0.3) 0%, rgba(0,0,0,0.7) 100%);
   z-index: -1;
 }