First screen done

frontend/sac-mobile/app/(auth)/login.tsx

@@ -1,11 +1,13 @@
 import React from 'react';
 import { Controller, useForm } from 'react-hook-form';
-import { Alert, Button, Text, TextInput, View } from 'react-native';
+import { Alert, Button, StyleSheet, Text, TextInput, View } from 'react-native';
+import { SafeAreaView } from 'react-native-safe-area-context';
 
 import { router } from 'expo-router';
 
 import { ZodError, z } from 'zod';
 
+import Wordmark from '@/components/Wordmark';
 import { useAuthStore } from '@/hooks/use-auth';
 import { loginByEmail } from '@/services/auth';
 
@@ -46,62 +48,96 @@ const Login = () => {
             }
         }
     };
-
+    // className="items-center justify-center flex-1 p-4"
     return (
-        <View className="items-center justify-center flex-1 p-4">
-            <View className="w-full mb-4">
-                <Text>Email</Text>
-                <Controller
-                    control={control}
-                    render={({ field: { onChange, value } }) => (
-                        <TextInput
-                            autoCapitalize="none"
-                            autoCorrect={false}
-                            className="p-2 border border-gray-300"
-                            placeholder="[email protected]"
-                            onChangeText={onChange}
-                            value={value}
-                            onSubmitEditing={handleSubmit(onSubmit)}
-                        />
-                    )}
-                    name="email"
-                    rules={{ required: 'Email is required' }}
-                />
-                {errors.email && <Text>{errors.email.message}</Text>}
-            </View>
-
-            <View className="w-full mb-4">
-                <Text>Password</Text>
-                <Controller
-                    control={control}
-                    render={({ field: { onChange, value } }) => (
-                        <TextInput
-                            autoCapitalize="none"
-                            autoCorrect={false}
-                            className="p-2 border border-gray-300"
-                            placeholder="Password"
-                            onChangeText={onChange}
-                            value={value}
-                            secureTextEntry={true}
-                            onSubmitEditing={handleSubmit(onSubmit)}
-                        />
-                    )}
-                    name="password"
-                    rules={{ required: 'Password is required' }}
-                />
-                {errors.password && <Text>{errors.password.message}</Text>}
-            </View>
+        <SafeAreaView style={styles.container}>
+            <View style={styles.innerContainer}>
+                <View className="w-full p-5">
+                    <Wordmark textColor="white" />
+                    <Text style={styles.header}>Let's Go</Text>
+                    <Text style={styles.description}>
+                        Discover, follow, and join all the clubs & events
+                        Northeastern has to offer
+                    </Text>
+                </View>
+                <View>
+                    <Text>Email</Text>
+                    <Controller
+                        control={control}
+                        render={({ field: { onChange, value } }) => (
+                            <TextInput
+                                autoCapitalize="none"
+                                autoCorrect={false}
+                                className="p-2 border border-gray-300"
+                                placeholder="[email protected]"
+                                onChangeText={onChange}
+                                value={value}
+                                onSubmitEditing={handleSubmit(onSubmit)}
+                            />
+                        )}
+                        name="email"
+                        rules={{ required: 'Email is required' }}
+                    />
+                    {errors.email && <Text>{errors.email.message}</Text>}
+                </View>
 
-            <Button title="Submit" onPress={handleSubmit(onSubmit)} />
+                <View className="w-full mb-4">
+                    <Text>Password</Text>
+                    <Controller
+                        control={control}
+                        render={({ field: { onChange, value } }) => (
+                            <TextInput
+                                autoCapitalize="none"
+                                autoCorrect={false}
+                                className="p-2 border border-gray-300"
+                                placeholder="Password"
+                                onChangeText={onChange}
+                                value={value}
+                                secureTextEntry={true}
+                                onSubmitEditing={handleSubmit(onSubmit)}
+                            />
+                        )}
+                        name="password"
+                        rules={{ required: 'Password is required' }}
+                    />
+                    {errors.password && <Text>{errors.password.message}</Text>}
+                </View>
 
-            <View className="mt-4">
-                <Button
-                    title="Register"
-                    onPress={() => router.push('/(auth)/register')}
-                />
+                <View style={styles.buttonContainer}>
+                    <Button title="Login" onPress={handleSubmit(onSubmit)} />
+                    <Button
+                        title="Register"
+                        onPress={() => router.push('/(auth)/register')}
+                    />
+                </View>
+                <Text>Not a student? Continue as a Guest</Text>
             </View>
-        </View>
+        </SafeAreaView>
     );
 };
 
+const styles = StyleSheet.create({
+    header: {
+        fontSize: 40,
+        fontWeight: 'bold',
+        color: 'white'
+    },
+    description: {
+        fontSize: 20,
+        color: 'white'
+    },
+    container: {
+        backgroundColor: 'grey',
+        height: '100%'
+    },
+    innerContainer: {
+        marginLeft: '5%',
+        marginRight: '5%'
+    },
+    buttonContainer: {
+        flexDirection: 'row',
+        justifyContent: 'space-around',
+    }
+});
+
 export default Login;

frontend/sac-mobile/app/(auth)/welcome.tsx

@@ -1,42 +1,65 @@
 import React from 'react';
-import {View, Text, StyleSheet, Button} from 'react-native'; 
+import { Pressable, SafeAreaView, StyleSheet, Text, View } from 'react-native';
+
+import Wordmark from '@/components/Wordmark';
+import Button from '@/components/button';
 import { useAuthStore } from '@/hooks/use-auth';
+import { router } from 'expo-router';
 
 const Welcome = () => {
+
+  const redirect = () => {
+    router.push('/(auth)/login');
+  }
+
     return (
-        <View style={styles.container}>
-          <Text style={styles.wordmark}>Wordmark</Text>
-          <Text style={styles.header}>Welcome to StudCal</Text>
-          <Text style={styles.description}>Discover, follow, and join all the clubs & events Northeastern has to offer</Text>
-          <Button title="Login" />
-        </View>
-      )
+        <SafeAreaView style={styles.container}>
+            <Wordmark />
+            <View style={styles.imageHolder}></View>
+            <Text style={styles.header}>Welcome to StudCal</Text>
+            <Text style={styles.description}>
+                Discover, follow, and join all the clubs & events Northeastern
+                has to offer
+            </Text>
+            <View style={styles.buttonAlign}>
+                <Button title="Get Started" color="white" buttonfunc={redirect}/>
+            </View>
+        </SafeAreaView>
+    );
 };
 
 export default Welcome;
 
 const styles = StyleSheet.create({
     container: {
-      flex: 1, 
-      flexDirection: 'column',
-      marginTop: '5%', 
-      marginBottom: '10%', 
-      marginLeft: 30, 
-      marginRight: 30,
-    },
-    wordmark: {
-      marginTop: 60, 
-      fontSize: 20, 
-      flex: 1, 
+        flexDirection: 'column',
+        marginBottom: '10%',
+        marginLeft: 30,
+        marginRight: 30
     },
     header: {
-      color: 'black',
-      flex: 1.7,
-      fontSize: 60, 
+        color: 'black',
+        height: '20%',
+        fontSize: 50,
+        marginTop: '5%',
+        fontWeight: 'bold'
+    },
+    imageHolder: {
+        backgroundColor: 'black',
+        height: '45%',
+        width: '100%',
+        borderRadius: 20
     },
     description: {
-      color: 'black', 
-      flex: 1, 
-      fontSize: 18,
+        color: 'black',
+        height: '15%',
+        fontSize: 23
+    },
+    button: {
+        height: '10%'
     },
-  });
+    buttonAlign: {
+      flexDirection: 'row',
+      justifyContent: 'flex-end'
+    }
+});

frontend/sac-mobile/components/Wordmark.tsx

@@ -0,0 +1,29 @@
+import { StyleSheet, Text, View } from 'react-native';
+
+type WordmarkProps = {
+    textColor?: string;
+    backgroundColor?: string;
+}
+
+const Wordmark = (props: WordmarkProps) => {
+    const styles = StyleSheet.create({
+        wordmark: {
+            fontSize: 24,
+            paddingTop: '7.5%',
+            paddingBottom: '7.5%',
+            fontWeight: 'bold',
+            color: props.textColor
+        },
+        wordmarkView: {
+            backgroundColor: props.backgroundColor,
+        }
+    });
+
+    return (
+        <View style={styles.wordmarkView}>
+            <Text style={styles.wordmark}>Wordmark</Text>
+        </View>
+    );
+};
+
+export default Wordmark;

frontend/sac-mobile/components/button.tsx

@@ -0,0 +1,34 @@
+import { Pressable, StyleSheet, Text, View } from 'react-native';
+
+type ButtonProps = {
+    title: string;
+    backgroundColor?: string;
+    color?: string;
+    buttonfunc?: () => void;
+};
+
+const Button = (props: ButtonProps) => {
+    const styles = StyleSheet.create({
+        button: {
+            backgroundColor: props.backgroundColor || 'gray',
+            fontSize: 24,
+            paddingTop: '5%',
+            paddingBottom: '5%',
+            fontWeight: 'bold',
+            borderRadius: 15,
+            width: '45%'
+        },
+        title: {
+            color: props.color || 'black',
+            textAlign: 'center'
+        }
+    });
+
+    return (
+        <Pressable onPress={props.buttonfunc} style={styles.button}>
+            <Text style={styles.title}>{props.title}</Text>
+        </Pressable>
+    );
+};
+
+export default Button;