Add countdown.

components/auth/SignInScreen.tsx

@@ -1,8 +1,10 @@
 import React from 'react';
 import * as AppleAuthentication from 'expo-apple-authentication';
-import { StyleSheet, Alert } from 'react-native';
-import { ThemedView } from '@/components/theme/Theme';
+import { StyleSheet, Alert, ImageBackground } from 'react-native';
+import { ThemedText, ThemedView } from '@/components/theme/Theme';
+import { SafeAreaView, SafeAreaProvider } from 'react-native-safe-area-context';
 import { useColorScheme } from '@/hooks/useColorScheme';
+import { Colors } from '@/constants/Colors';
 import * as Notifications from 'expo-notifications';
 import Constants from 'expo-constants';
 import { saveUser, saveInitialData } from '@/components/services/SecureStore';
@@ -13,6 +15,7 @@ import {
 } from '@/constants/APIs';
 import type { InitialData, User } from '@/constants/Types';
 
+
 const SignInScreen = ({onSignIn}: {onSignIn: () => void}) => {
   const scheme = useColorScheme() ?? 'dark';
 
@@ -86,16 +89,27 @@ const SignInScreen = ({onSignIn}: {onSignIn: () => void}) => {
 
   return (
     <ThemedView style={styles.container}>
-      <AppleAuthentication.AppleAuthenticationButton
-        buttonType={AppleAuthentication.AppleAuthenticationButtonType.SIGN_IN}
-        buttonStyle={(scheme === 'light') ?
-          AppleAuthentication.AppleAuthenticationButtonStyle.BLACK :
-          AppleAuthentication.AppleAuthenticationButtonStyle.WHITE
-        }
-        cornerRadius={5}
-        style={styles.button}
-        onPress={handleAppleSignIn}
-      />
+      <ImageBackground
+        source={require('@/assets/images/splash.png')} resizeMode="cover"
+        style={styles.background}
+      >
+        <ThemedText style={[
+          styles.title,
+          {textShadowColor: Colors[scheme].background}
+        ]}>
+          Wavelength
+        </ThemedText>
+          <AppleAuthentication.AppleAuthenticationButton
+            buttonType={AppleAuthentication.AppleAuthenticationButtonType.SIGN_IN}
+            buttonStyle={(scheme === 'light') ?
+              AppleAuthentication.AppleAuthenticationButtonStyle.BLACK :
+              AppleAuthentication.AppleAuthenticationButtonStyle.WHITE
+            }
+            cornerRadius={5}
+            style={styles.button}
+            onPress={handleAppleSignIn}
+          />
+      </ImageBackground>
     </ThemedView>
   );
 };
@@ -104,9 +118,23 @@ export default SignInScreen;
 const styles = StyleSheet.create({
   container: {
     flex: 1,
+  },
+  background: {
+    flex: 1,
     justifyContent: 'center',
     alignItems: 'center',
   },
+  title: {
+    fontSize: 48,
+    lineHeight: 48,
+    fontWeight: 'bold',
+    marginBottom: 80,
+    textShadowOffset: {
+      width: 1,
+      height: 1,
+    },
+    textShadowRadius: 5,
+  },
   button: {
     width: 200,
     height: 45,