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

@@ -1,9 +1,7 @@
 <template>
   <section class="hero-voyage" id="heroSection">
-    <!-- Teleport video to body root to bypass container constraints -->
+    <!-- Hero video background container - will be absolutely positioned -->
-    <ClientOnly>
+    <div ref="videoContainer" class="hero-video-container">
-      <Teleport to="body">
-        <div ref="videoContainer" class="hero-video-root">
       <!-- White overlay that fades out when video is ready -->
       <div
         class="video-white-overlay"
@@ -32,8 +30,6 @@
       <div class="hero-overlay gradient-warm" />
       <div class="hero-overlay gradient-depth" />
     </div>
-      </Teleport>
-    </ClientOnly>
 
     <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 container positioned absolutely behind content */
-.hero-video-root {
+.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 {