Enhance audio and visual elements in the UI for improved user experience

- Added a new script in package.json to generate welcome speech audio for enhanced onboarding.
- Updated SplashScreen.vue and OnboardingWrapper.vue to use the new intro background image and poster.
- Modified Dashboard.vue and Login.vue to reflect changes in background images for consistency.
- Removed outdated background images and updated references to ensure a cohesive visual theme.
- Improved tap-to-start feature with new text and logo in SplashScreen.vue for better engagement.
- Enhanced audio playback functionality in useLoginSounds.ts to include welcome speech.

neode-ui/src/components/SplashScreen.vue

@@ -12,14 +12,14 @@
         muted
         playsinline
         preload="auto"
-        poster="/assets/img/bg-4.jpg"
+        poster="/assets/img/bg-intro.jpg"
       >
         <source src="/assets/video/video-intro.mp4?v=7" type="video/mp4">
         <!-- Fallback to image if video fails -->
         <div 
           class="absolute inset-0"
           :style="{ 
-            backgroundImage: 'url(/assets/img/bg-4.jpg)', 
+            backgroundImage: 'url(/assets/img/bg-intro.jpg)', 
             backgroundSize: 'auto 100vh', 
             backgroundPosition: 'center top', 
             backgroundRepeat: 'no-repeat',
@@ -32,7 +32,7 @@
         v-else
         class="absolute inset-0"
         :style="{ 
-          backgroundImage: 'url(/assets/img/bg-4.jpg)', 
+          backgroundImage: 'url(/assets/img/bg-intro.jpg)', 
           backgroundSize: 'auto 100vh', 
           backgroundPosition: 'center top', 
           backgroundRepeat: 'no-repeat',
@@ -96,15 +96,20 @@
         </div>
       </Transition>
 
-      <!-- Tap to start - required for audio (browser autoplay policy) -->
+      <!-- Tap to start - logo + "Enter the Exit" behind (like screensaver) -->
       <div
         v-if="showTapToStart"
         class="absolute inset-0 z-[100] flex items-center justify-center bg-black/40 cursor-pointer"
         @click="handleTapToStart"
       >
-        <p class="font-mono text-white/90 text-lg sm:text-xl px-6 py-4 rounded-lg border border-white/20 bg-black/30 backdrop-blur-sm">
-          Tap to start
-        </p>
+        <div class="tap-to-start-content relative flex items-center justify-center">
+          <span class="tap-to-start-text font-archipelago font-extrabold text-[rgba(0,0,0,0.35)] text-6xl sm:text-7xl md:text-8xl lg:text-9xl tracking-widest uppercase whitespace-nowrap select-none">
+            Enter the Exit
+          </span>
+          <div class="tap-to-start-logo absolute">
+            <ScreensaverLogo />
+          </div>
+        </div>
       </div>
 
       <!-- Skip Button -->
@@ -121,7 +126,8 @@
 
 <script setup lang="ts">
 import { ref, onMounted, onBeforeUnmount, watch } from 'vue'
-import { playIntroTyping, playLoopStart, resumeAudioContext, startSynthwave, stopIntroTyping } from '@/composables/useLoginSounds'
+import ScreensaverLogo from '@/components/ScreensaverLogo.vue'
+import { playIntroTyping, playLoopStart, playWelcomeNoderunnerSpeech, resumeAudioContext, startSynthwave, stopIntroTyping } from '@/composables/useLoginSounds'
 
 const emit = defineEmits<{
   complete: []
@@ -250,7 +256,8 @@ function skipIntro() {
   stopIntroTyping()
   playLoopStart()
   startSynthwave()
-  
+  playWelcomeNoderunnerSpeech()
+
   // Stop alien intro typing and any playing typing sound
   stopIntroTyping()
   isTypingLine1.value = false
@@ -357,6 +364,7 @@ function startAlienIntro() {
     stopIntroTyping()
     playLoopStart()
     startSynthwave()
+    playWelcomeNoderunnerSpeech()
     if (videoElement.value) {
       videoElement.value.play().catch(err => {
         console.warn('Video autoplay failed on welcome:', err)
@@ -564,5 +572,44 @@ onBeforeUnmount(() => {
 .bg-zoom-transition.bg-zoom-in {
   transform: scale(1.15);
 }
+
+/* Tap to start - "Enter the Exit" big behind logo */
+.tap-to-start-content {
+  min-height: 12rem;
+}
+.tap-to-start-text {
+  position: absolute;
+  z-index: 0;
+  pointer-events: none;
+}
+.tap-to-start-logo {
+  position: relative;
+  z-index: 1;
+}
+.tap-to-start-logo {
+  filter: drop-shadow(0 0 40px rgba(255, 255, 255, 0.15));
+}
+.tap-to-start-logo :deep(.logo-gradient-border) {
+  width: 12rem;
+  height: 12rem;
+}
+@media (min-width: 640px) {
+  .tap-to-start-content {
+    min-height: 14rem;
+  }
+  .tap-to-start-logo :deep(.logo-gradient-border) {
+    width: 14rem;
+    height: 14rem;
+  }
+}
+@media (min-width: 768px) {
+  .tap-to-start-content {
+    min-height: 16rem;
+  }
+  .tap-to-start-logo :deep(.logo-gradient-border) {
+    width: 16rem;
+    height: 16rem;
+  }
+}
 </style>