Setup homepage alongside the camera screen page

frontend/app/_layout.tsx

@@ -1,6 +1,11 @@
 import { Stack } from "expo-router";
-import "./global.css";
+import "./globals.css";
 
 export default function RootLayout() {
-  return <Stack />;
+  return (
+    <Stack screenOptions={{ headerShown: false }}>
+      <Stack.Screen name="index" options={{ title: "Home", headerShown: false }} />
+      <Stack.Screen name="scanner" options={{ title: "Scanner", headerShown: false }} />
+    </Stack>
+  );
 }

frontend/app/index.tsx

@@ -1,4 +1,5 @@
-import { Text, View } from "react-native";
+import { Text, View, TouchableOpacity } from "react-native";
+import { Link } from "expo-router";
 
 export default function Index() {
   return (
@@ -7,9 +8,15 @@ export default function Index() {
         flex: 1,
         justifyContent: "center",
         alignItems: "center",
+        backgroundColor: "#00CEC8",
       }}
     >
-      <Text>Edit app/index.tsx to edit this screen.</Text>
+      <Text>Welcome to SplitNGo</Text>
+      <Link href="./scanner" asChild>
+        <TouchableOpacity className="bg-blue-500 p-4 rounded-md w-40 mt-4" onPress={() => {}}>
+          <Text className="text-white text-center">Start</Text>
+        </TouchableOpacity>
+      </Link>
     </View>
   );
 }

frontend/app/scanner.tsx

@@ -0,0 +1,9 @@
+import { View, Text } from "react-native";
+
+export default function Scanner() {
+  return (
+    <View style={{ flex: 1, backgroundColor: "#00CEC8", justifyContent: "center", alignItems: "center" }}>
+      <Text>Scanner</Text>
+    </View>
+  );
+}

frontend/tsconfig.json

@@ -12,6 +12,7 @@
     "**/*.ts",
     "**/*.tsx",
     ".expo/types/**/*.ts",
-    "expo-env.d.ts"
+    "expo-env.d.ts",
+    "nativewind-env.d.ts"
   ]
-}
+}