feat: add login form

src/components/Input.tsx

@@ -0,0 +1,17 @@
+import { Input as GSInput, InputField } from "@gluestack-ui/themed";
+import { ComponentProps } from "react";
+
+type Props = ComponentProps<typeof InputField>;
+
+export function Input({ ...others }: Props) {
+  return (
+    <GSInput bg="$gray700" h="$14" px="$4" borderWidth="$0" borderRadius="$md">
+      <InputField
+        color="$white"
+        fontFamily="$body"
+        placeholderTextColor="$gray300"
+        {...others}
+      />
+    </GSInput>
+  )
+}

src/screens/SignIn.tsx

@@ -1,7 +1,8 @@
-import { Center, Image, Text, VStack } from "@gluestack-ui/themed";
+import { Center, Heading, Image, Text, VStack } from "@gluestack-ui/themed";
 
 import BackgroundImg from '@assets/background.png';
 import Logo from '@assets/logo.svg';
+import { Input } from "@components/Input";
 
 export function SignIn() {
   return (
@@ -15,12 +16,23 @@ export function SignIn() {
         h={624}
       />
 
-      <Center my="$24">
-        <Logo />
-        <Text fontSize="$sm" color="$gray100">
-          Treine a sua mente e o seu corpo
-        </Text>
-      </Center>
+      <VStack flex={1} px="$10" pb="$16">
+        <Center my="$24">
+          <Logo />
+          <Text fontSize="$sm" color="$gray100">
+            Treine a sua mente e o seu corpo
+          </Text>
+        </Center>
+
+        <Center gap="$2">
+          <Heading color="$gray100">
+            Acesse a conta
+          </Heading>
+
+          <Input placeholder="E-mail" />
+          <Input placeholder="Senha" />
+        </Center>
+      </VStack>
     </VStack>
   )
 }