created sign up page ui

app/(auth)/sign-up.tsx

@@ -1,11 +1,97 @@
-import { Text } from "react-native";
-import { SafeAreaView } from "react-native-safe-area-context";
+import { useState } from "react";
+import { Image, ScrollView, Text, View } from "react-native";
+
+import { InputField } from "@/components/input-field";
+import { icons, images } from "@/constants";
+import { CustomButton } from "@/components/custom-button";
+import { Link } from "expo-router";
 
 const SignUp = () => {
+  const [form, setForm] = useState({
+    name: "",
+    email: "",
+    password: "",
+  });
+
+  const onSignUpPress = async () => {};
+
   return (
-    <SafeAreaView>
-      <Text>SignUp</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">
+            Create Your Account
+          </Text>
+        </View>
+
+        <View className="p-5">
+          <InputField
+            label="Name"
+            placeholder="Enter your name"
+            icon={icons.person}
+            value={form.name}
+            onChangeText={(value) =>
+              setForm((prevForm) => ({
+                ...prevForm,
+                name: value,
+              }))
+            }
+          />
+
+          <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 Up"
+            onPress={onSignUpPress}
+            className="mt-6"
+          />
+
+          {/* OAuth */}
+
+          <Link
+            href="/sign-in"
+            className="text-lg text-center text-general-200 mt-10"
+          >
+            <Text>Already have an account? </Text>
+            <Text className="text-primary-500">Login</Text>
+          </Link>
+        </View>
+
+        {/* Verification Modal */}
+      </View>
+    </ScrollView>
   );
 };
 

app/(auth)/welcome.tsx

@@ -1,11 +1,12 @@
-import { CustomButton } from "@/components/custom-button";
-import { onboarding } from "@/constants";
 import { router } from "expo-router";
 import { useRef, useState } from "react";
 import { Image, Text, TouchableOpacity, View } from "react-native";
 import { SafeAreaView } from "react-native-safe-area-context";
 import Swiper from "react-native-swiper";
 
+import { CustomButton } from "@/components/custom-button";
+import { onboarding } from "@/constants";
+
 const Welcome = () => {
   const swiperRef = useRef<Swiper>(null);
   const [activeIndex, setActiveIndex] = useState(0);
@@ -32,6 +33,7 @@ const Welcome = () => {
           <View key={item.id} className="flex items-center justify-center p-5">
             <Image
               source={item.image}
+              alt={`Onboarding Item ${item.id}`}
               className="w-full h-[300px]"
               resizeMode="contain"
             />