From 9335d14ca45bd28b1fe42a9685013f9dfb11fafd Mon Sep 17 00:00:00 2001
From: matt <matt@harborsmith.co>
Date: Fri, 19 Sep 2025 02:12:04 +0200
Subject: [PATCH] Fix hero video loading with white overlay fade-in

- Remove poster image to eliminate jarring flash
- Add white gradient overlay that fades when video ready
- Implement smooth 800ms transition for premium UX
- Add video preload link tag for faster loading
- Works seamlessly on both mobile and desktop

The white overlay approach provides a clean loading experience that matches the luxury brand aesthetic while the video loads in the background.
---
 apps/website/components/HeroSection.vue | 30 ++++++++++++++++---------
 apps/website/nuxt.config.ts             |  3 ++-
 2 files changed, 21 insertions(+), 12 deletions(-)

diff --git a/apps/website/components/HeroSection.vue b/apps/website/components/HeroSection.vue
index 5bb49fd..d347486 100644
--- a/apps/website/components/HeroSection.vue
+++ b/apps/website/components/HeroSection.vue
@@ -1,6 +1,12 @@
 <template>
   <section class="hero-voyage" id="heroSection">
     <div ref="videoContainer" class="hero-video-container">
+      <!-- White overlay that fades out when video is ready -->
+      <div
+        class="video-white-overlay"
+        :class="{ 'fade-out': videoLoaded }"
+      />
+
       <video
         ref="videoElement"
         autoplay
@@ -8,7 +14,6 @@
         muted
         playsinline
         preload="auto"
-        poster="/golden_gate.jpg"
         class="hero-video"
         :class="{ 'video-loaded': videoLoaded }"
         @loadeddata="handleVideoLoaded"
@@ -21,12 +26,6 @@
         >
       </video>
 
-      <div
-        class="hero-image-fallback"
-        :class="{ 'fade-out': videoLoaded }"
-        :style="{ backgroundImage: 'url(/golden_gate.jpg)' }"
-      />
-
       <div class="hero-overlay gradient-warm" />
       <div class="hero-overlay gradient-depth" />
     </div>
@@ -187,12 +186,21 @@ onMounted(() => {
   opacity: 1;
 }
 
-/* Ensure the fallback image fades out smoothly */
-.hero-image-fallback {
-  transition: opacity 0.5s ease-in-out;
+/* White overlay for smooth video loading transition */
+.video-white-overlay {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  background: linear-gradient(180deg, #ffffff 0%, #f8f9fa 100%);
+  z-index: 2;
+  opacity: 1;
+  transition: opacity 800ms ease-out;
+  will-change: opacity;
 }
 
-.hero-image-fallback.fade-out {
+.video-white-overlay.fade-out {
   opacity: 0;
   pointer-events: none;
 }
diff --git a/apps/website/nuxt.config.ts b/apps/website/nuxt.config.ts
index de8a424..b510180 100644
--- a/apps/website/nuxt.config.ts
+++ b/apps/website/nuxt.config.ts
@@ -124,7 +124,8 @@ export default defineNuxtConfig({
       ],
       link: [
         { rel: 'icon', type: 'image/png', href: '/HARBOR-SMITH-navy.png' },
-        { rel: 'apple-touch-icon', href: '/HARBOR-SMITH-navy.png' }
+        { rel: 'apple-touch-icon', href: '/HARBOR-SMITH-navy.png' },
+        { rel: 'preload', as: 'video', href: 'https://videos.pexels.com/video-files/3571264/3571264-uhd_2560_1440_30fps.mp4', crossorigin: 'anonymous' }
       ]
     },
     pageTransition: { name: 'page', mode: 'out-in' },