[ui] font added, movie item added, pages layout

apps/mobile/components/item/item.tsx

@@ -0,0 +1,30 @@
+import { globalStyles } from '../../styles/global';
+import { Image, Text, View } from 'react-native';
+import styles from './styles';
+import { BoldText, RegularText } from '../Styled';
+
+export default function Item() {
+  return (
+    <View style={styles.wrapper}>
+      <View style={styles.imageWrapper}>
+        <Image
+          source={{
+            uri: 'https://image.tmdb.org/t/p/w342//gdIrmf2DdY5mgN6ycVP0XlzKzbE.jpg',
+            width: 200,
+          }}
+          style={styles.image}
+        />
+      </View>
+      <BoldText style={globalStyles.textWhite}>Hamilton</BoldText>
+      <View style={styles.meta}>
+        <RegularText style={[globalStyles.textMuted, styles.smallText]}>
+          Movie
+        </RegularText>
+        <View style={[globalStyles.dotSeperator]}></View>
+        <RegularText style={[globalStyles.textMuted, styles.smallText]}>
+          2023
+        </RegularText>
+      </View>
+    </View>
+  );
+}

apps/mobile/components/item/styles.tsx

@@ -0,0 +1,31 @@
+import Colors from '../../constants/Colors';
+import { StyleSheet } from 'react-native';
+
+const styles = StyleSheet.create({
+  wrapper: {
+    width: '100%',
+  },
+  imageWrapper: {
+    borderRadius: 16,
+    aspectRatio: 9 / 14,
+    width: '100%',
+    overflow: 'hidden',
+    position: 'relative',
+    marginBottom: 6,
+  },
+  image: {
+    width: '100%',
+    height: '100%',
+    resizeMode: 'cover',
+  },
+  meta: {
+    flexDirection: 'row',
+    gap: 6,
+    alignItems: 'center',
+  },
+  smallText: {
+    fontSize: 12,
+  },
+});
+
+export default styles;