Refactor app flows and refresh UI components

src/screens/LandingPage.js

@@ -2,7 +2,9 @@ import AsyncStorage from '@react-native-async-storage/async-storage'
 import { useCallback, useMemo, useState } from 'react'
 import { Image, StyleSheet, Text, TouchableOpacity, View } from 'react-native'
 import { background, icons, videos } from '../assets'
+import BackgroundVideo from '../components/BackgroundVideo'
 import FullscreenIntroVideo from '../components/FullscreenIntroVideo'
+import { isWeb } from '../hooks/useLayoutType'
 import Page from '../layouts/Page'
 import { Routes } from '../navigation'
 import { navigate, reset } from '../navigation/NavigationService'
@@ -85,7 +87,15 @@ export default function LandingPage({ route }) {
 
   return (
     <>
-      <Page title="Landing Page" backgroundImg={background.homeBGWeb}>
+      <Page
+        title="Landing Page"
+        backgroundImg={background.homeBGWeb}
+        backgroundContent={
+          phase === FLOW_PHASE.LANGUAGE ? (
+            <BackgroundVideo source={videos.languageBackground} silent />
+          ) : null
+        }
+      >
         <View
           style={{
             flex: 1,
@@ -121,7 +131,7 @@ export default function LandingPage({ route }) {
           url={activeVideo}
           visible
           onClose={activeVideoClose}
-          contentFit="contain"
+          contentFit={isWeb || isJingle ? 'contain' : 'cover'}
           allowSkip={!isJingle}
           requireAudio={!isJingle}
           offerSoundActivation={isJingle}