sign in screen ui completed

app/(auth)/sign-in.tsx

@@ -1,11 +1,84 @@
-import { Text } from "react-native";
-import { SafeAreaView } from "react-native-safe-area-context";
+import { Link } from "expo-router";
+import { useState } from "react";
+import { Image, ScrollView, Text, View } from "react-native";
+
+import { CustomButton } from "@/components/custom-button";
+import { InputField } from "@/components/input-field";
+import { OAuth } from "@/components/oauth";
+import { icons, images } from "@/constants";
 
 const SignIn = () => {
+  const [form, setForm] = useState({
+    email: "",
+    password: "",
+  });
+
+  const onSignInPress = async () => {};
+
   return (
-    <SafeAreaView>
-      <Text>SignIn</Text>
-    </SafeAreaView>
+    <ScrollView className="flex-1 bg-white">
+      <View className="flex-1 bg-white">
+        <View className="relative w-full h-[250px]">
+          <Image
+            source={images.signUpCar}
+            alt="Car"
+            className="z-0 w-full h-[250px]"
+            resizeMode="contain"
+          />
+
+          <Text className="text-2xl text-black font-JakartaSemiBold absolute bottom-5 left-5">
+            Welcome 👋
+          </Text>
+        </View>
+
+        <View className="p-5">
+          <InputField
+            label="Email"
+            placeholder="Enter your email"
+            icon={icons.email}
+            value={form.email}
+            onChangeText={(value) =>
+              setForm((prevForm) => ({
+                ...prevForm,
+                email: value,
+              }))
+            }
+          />
+
+          <InputField
+            label="Password"
+            placeholder="Enter your password"
+            icon={icons.lock}
+            secureTextEntry
+            value={form.password}
+            onChangeText={(value) =>
+              setForm((prevForm) => ({
+                ...prevForm,
+                password: value,
+              }))
+            }
+          />
+
+          <CustomButton
+            title="Sign In"
+            onPress={onSignInPress}
+            className="mt-6"
+          />
+
+          <OAuth />
+
+          <Link
+            href="/sign-up"
+            className="text-lg text-center text-general-200 mt-10"
+          >
+            <Text>Don&apos;t have an account? </Text>
+            <Text className="text-primary-500">Sign up</Text>
+          </Link>
+        </View>
+
+        {/* Verification Modal */}
+      </View>
+    </ScrollView>
   );
 };
 

app/(auth)/sign-up.tsx

@@ -86,7 +86,7 @@ const SignUp = () => {
             className="text-lg text-center text-general-200 mt-10"
           >
             <Text>Already have an account? </Text>
-            <Text className="text-primary-500">Login</Text>
+            <Text className="text-primary-500">Sign in</Text>
           </Link>
         </View>