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/views/OnboardingWrapper.vue

@@ -12,7 +12,7 @@
         muted
         playsinline
         preload="auto"
-        poster="/assets/img/bg-4.jpg"
+        poster="/assets/img/bg-intro.jpg"
         style="width: 100%; height: 100%; object-fit: cover; object-position: center; position: absolute; inset: 0; transform: scale(1); transition: none;"
         @pause.prevent="handleVideoPause"
         @ended="handleVideoEnded"
@@ -66,7 +66,7 @@ import { useRoute } from 'vue-router'
 import { resumeAudioContext, startSynthwave } from '@/composables/useLoginSounds'
 
 const route = useRoute()
-const currentBackground = ref('bg-4.jpg')
+const currentBackground = ref('bg-intro.jpg')
 const isGlitching = ref(false)
 const isTransitioning = ref(false)
 const videoElement = ref<HTMLVideoElement | null>(null)
@@ -83,19 +83,19 @@ const useVideoBackground = computed(() => {
 })
 
 // Map each route to a specific background image
-// Note: bg-4.jpg is used for splash and /onboarding/intro for seamless transition
+// Note: bg-intro.jpg is used for splash and /onboarding/intro for seamless transition
 const routeBackgrounds: Record<string, string> = {
-  '/onboarding/intro': 'bg-4.jpg', // Video will be used instead
-  '/onboarding/options': 'bg-5.jpg',
-  '/onboarding/path': 'bg-3.jpg',
-  '/onboarding/did': 'bg-6.jpg',
-  '/onboarding/backup': 'bg-7.jpg',
-  '/onboarding/verify': 'bg-2.jpg',
-  '/onboarding/done': 'bg-1.jpg',
-  '/login': 'bg-4.jpg' // Video loops from splash (same as intro)
+  '/onboarding/intro': 'bg-intro.jpg', // Video will be used instead
+  '/onboarding/options': 'bg-intro-4.jpg',
+  '/onboarding/path': 'bg-intro-3.jpg',
+  '/onboarding/did': 'bg-intro-5.jpg',
+  '/onboarding/backup': 'bg-intro-6.jpg',
+  '/onboarding/verify': 'bg-intro-2.jpg',
+  '/onboarding/done': 'bg-intro-1.jpg',
+  '/login': 'bg-intro.jpg' // Video loops from splash (same as intro)
 }
 
-const loginBackground = 'bg-1.jpg'
+const loginBackground = 'bg-intro-1.jpg'
 
 // Restore video time from splash screen for seamless transition
 function restoreVideoTime() {
@@ -247,7 +247,7 @@ watch(() => route.path, (newPath, oldPath) => {
   
   // Login route: set background immediately, no zoom, no transition (glitch is always-on)
   if (newPath === '/login') {
-    currentBackground.value = 'bg-1.jpg'
+    currentBackground.value = 'bg-intro-1.jpg'
     isTransitioning.value = false
     isGlitching.value = false
     return