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/Dashboard.vue

@@ -341,7 +341,7 @@ const currentBackgroundImage = computed(() => {
   if (showAppStoreBackground.value) return 'bg-appstore.jpg'
   if (showCloudBackground.value) return 'bg-cloud.jpg'
   if (showHomeBackground.value) return 'bg-home.jpg'
-  return 'bg-4.jpg'
+  return 'bg-intro.jpg'
 })
 
 const altBackgroundImage = computed(() => {
@@ -352,7 +352,7 @@ const altBackgroundImage = computed(() => {
   if (showAppStoreBackground.value) return 'bg-appstore.jpg'
   if (showCloudBackground.value) return 'bg-cloud.jpg'
   if (showHomeBackground.value) return 'bg-home.jpg'
-  return 'bg-3.jpg'
+  return 'bg-intro-3.jpg'
 })
 
 // Check if overlay should be dark (0.8 opacity)
@@ -1442,7 +1442,7 @@ aside:not(.sidebar-animate) .sidebar-logout-btn {
   will-change: transform, opacity;
 }
 
-/* Default state - bg-4 visible, bg-3 hidden back */
+/* Default state - bg-intro visible, bg-intro-3 hidden back */
 .dashboard-view .bg-layer:first-of-type {
   opacity: 1;
   transform: translateZ(0) scale(1);

neode-ui/src/views/Login.vue

@@ -8,12 +8,8 @@
       >
         <!-- Logo - half in, half out of container -->
         <div class="absolute -top-10 left-1/2 -translate-x-1/2 z-10">
-          <div class="logo-gradient-border">
-            <img 
-              src="/assets/img/favico.svg" 
-              alt="Archipelago" 
-              class="w-20 h-20"
-            />
+          <div class="logo-gradient-border w-20 h-20">
+            <AnimatedLogo no-border fit />
           </div>
         </div>
 
@@ -136,6 +132,7 @@
 <script setup lang="ts">
 import { ref, computed, onMounted } from 'vue'
 import { useRouter } from 'vue-router'
+import AnimatedLogo from '@/components/AnimatedLogo.vue'
 import { useAppStore } from '../stores/app'
 import { useLoginTransitionStore } from '../stores/loginTransition'
 import { rpcClient } from '../api/rpc-client'

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