From 2bc0eb67359b906930b6c76224bf4affdba99a9b Mon Sep 17 00:00:00 2001
From: matt <matt@harborsmith.co>
Date: Sun, 21 Sep 2025 16:56:06 +0200
Subject: [PATCH] fix: restore hero section with simplified video positioning

- Remove Teleport implementation that broke the page
- Use fixed positioning for video container
- Change body background to white for iOS safe area
- Maintain iOS-specific video extension rules
---
 apps/website/components/HeroSection.vue | 80 ++++++++++++-------------
 1 file changed, 39 insertions(+), 41 deletions(-)

diff --git a/apps/website/components/HeroSection.vue b/apps/website/components/HeroSection.vue
index d2a5ac6..48f1df1 100644
--- a/apps/website/components/HeroSection.vue
+++ b/apps/website/components/HeroSection.vue
@@ -1,39 +1,35 @@
 <template>
   <section class="hero-voyage" id="heroSection">
-    <!-- Teleport video to body root to bypass container constraints -->
-    <ClientOnly>
-      <Teleport to="body">
-        <div ref="videoContainer" class="hero-video-root">
-          <!-- White overlay that fades out when video is ready -->
-          <div
-            class="video-white-overlay"
-            :class="{ 'fade-out': videoLoaded }"
-          />
+    <!-- Hero video background container - will be absolutely positioned -->
+    <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
-            loop
-            muted
-            playsinline
-            preload="auto"
-            class="hero-video"
-            :class="{ 'video-loaded': videoLoaded }"
-            @loadeddata="handleVideoLoaded"
-            @canplaythrough="handleVideoLoaded"
-            @play="handleVideoLoaded"
-          >
-            <source
-              src="https://videos.pexels.com/video-files/3571264/3571264-uhd_2560_1440_30fps.mp4"
-              type="video/mp4"
-            >
-          </video>
+      <video
+        ref="videoElement"
+        autoplay
+        loop
+        muted
+        playsinline
+        preload="auto"
+        class="hero-video"
+        :class="{ 'video-loaded': videoLoaded }"
+        @loadeddata="handleVideoLoaded"
+        @canplaythrough="handleVideoLoaded"
+        @play="handleVideoLoaded"
+      >
+        <source
+          src="https://videos.pexels.com/video-files/3571264/3571264-uhd_2560_1440_30fps.mp4"
+          type="video/mp4"
+        >
+      </video>
 
-          <div class="hero-overlay gradient-warm" />
-          <div class="hero-overlay gradient-depth" />
-        </div>
-      </Teleport>
-    </ClientOnly>
+      <div class="hero-overlay gradient-warm" />
+      <div class="hero-overlay gradient-depth" />
+    </div>
 
     <div class="hero-content" :class="{ 'is-ready': videoLoaded }">
       <div class="hero-main">
@@ -50,11 +46,11 @@
 
         <div class="hero-actions animate-fade-up-delay-2">
           <button class="btn-primary-warm" @click="handlePhoneClick">
-            <LucidePhone class="btn-icon" />
+            <Icon name="lucide:phone" class="btn-icon" />
             Call (510) 701-2535
           </button>
           <button class="btn-secondary-warm" @click="handleServicesClick">
-            <LucideWrench class="btn-icon" />
+            <Icon name="lucide:wrench" class="btn-icon" />
             View Our Services
           </button>
         </div>
@@ -63,7 +59,7 @@
       <!-- Scroll to explore indicator -->
       <div class="scroll-to-explore" @click="handleScrollToExplore">
         <span>Scroll to explore</span>
-        <LucideChevronDown class="chevron-icon" />
+        <Icon name="lucide:chevron-down" class="chevron-icon" />
       </div>
     </div>
   </section>
@@ -176,8 +172,8 @@ onMounted(() => {
 </script>
 
 <style scoped>
-/* Teleported video at body root level */
-.hero-video-root {
+/* Hero video container positioned absolutely behind content */
+.hero-video-container {
   position: fixed;
   top: 0;
   left: 0;
@@ -191,7 +187,7 @@ onMounted(() => {
 /* iOS-specific: Extend video into safe area */
 @supports (-webkit-touch-callout: none) {
   @media (max-width: 768px) {
-    .hero-video-root {
+    .hero-video-container {
       /* Extend beyond safe area on iOS to ensure coverage */
       top: calc(-1 * env(safe-area-inset-top, 0));
       height: calc(100vh + env(safe-area-inset-top, 0));
@@ -199,14 +195,14 @@ onMounted(() => {
 
     /* Support for dynamic viewport height */
     @supports (height: 100dvh) {
-      .hero-video-root {
+      .hero-video-container {
         height: calc(100dvh + env(safe-area-inset-top, 0));
       }
     }
 
     /* Support for large viewport height (iOS 15+) */
     @supports (height: 100lvh) {
-      .hero-video-root {
+      .hero-video-container {
         height: calc(100lvh + env(safe-area-inset-top, 0));
       }
     }
@@ -250,6 +246,8 @@ onMounted(() => {
 .hero-voyage {
   overflow-x: hidden !important;
   max-width: 100vw !important;
+  position: relative;
+  min-height: 100vh;
 }
 
 .hero-main {
@@ -323,4 +321,4 @@ onMounted(() => {
     display: none;
   }
 }
-</style>
+</style>
\ No newline at end of file