feat: whyrating - initial project from turbostarter boilerplate

2026-02-04 01:54:52 +01:00
commit 5cdc07cd39
1618 changed files with 338230 additions and 0 deletions
--- a/apps/mobile/src/app/(setup)/welcome.tsx
+++ b/apps/mobile/src/app/(setup)/welcome.tsx
@@ -0,0 +1,107 @@
+/* eslint-disable @typescript-eslint/no-require-imports */
+import { Image } from "expo-image";
+import { router } from "expo-router";
+import { View } from "react-native";
+
+import { useTranslation } from "@turbostarter/i18n";
+import { Button } from "@turbostarter/ui-mobile/button";
+import {
+  Slider,
+  SliderList,
+  SliderListItem,
+  SliderPaginationDots,
+  SliderPaginationDot,
+} from "@turbostarter/ui-mobile/slider";
+import { Text } from "@turbostarter/ui-mobile/text";
+
+import { pathsConfig } from "~/config/paths";
+import { useTheme } from "~/modules/common/hooks/use-theme";
+import { SafeAreaView } from "~/modules/common/styled";
+import { WIDTH } from "~/utils/device";
+
+import type { ImageSource } from "expo-image";
+
+const images = [
+  {
+    light: require("../../../public/images/setup/1/light.png") as ImageSource,
+    dark: require("../../../public/images/setup/1/dark.png") as ImageSource,
+  },
+  {
+    light: require("../../../public/images/setup/2/light.png") as ImageSource,
+    dark: require("../../../public/images/setup/2/dark.png") as ImageSource,
+  },
+  {
+    light: require("../../../public/images/setup/3/light.png") as ImageSource,
+    dark: require("../../../public/images/setup/3/dark.png") as ImageSource,
+  },
+];
+
+const ITEM_WIDTH = WIDTH - 48;
+
+const WelcomePage = () => {
+  const { resolvedTheme } = useTheme();
+  const { t } = useTranslation(["common", "marketing", "auth"]);
+
+  return (
+    <View className="bg-background flex-1 px-6 pt-2 pb-4">
+      <SafeAreaView className="bg-background flex-1 gap-12">
+        <View className="flex-1 gap-8 pt-2">
+          <Slider threshold={ITEM_WIDTH}>
+            <SliderList
+              data={images}
+              renderItem={({ item, index }) => (
+                <SliderListItem
+                  className="flex-1 items-center justify-center"
+                  style={{ width: ITEM_WIDTH }}
+                  index={index}
+                >
+                  <Image
+                    source={item[resolvedTheme]}
+                    contentFit="contain"
+                    style={{ flex: 1, width: "100%" }}
+                  />
+                </SliderListItem>
+              )}
+            />
+            <SliderPaginationDots>
+              {images.map((_, index) => (
+                <SliderPaginationDot key={index} index={index} />
+              ))}
+            </SliderPaginationDots>
+          </Slider>
+
+          <View className="mx-auto mt-auto max-w-xl gap-3">
+            <Text className="font-sans-bold text-center text-3xl tracking-tighter sm:text-4xl">
+              {t("product.title")}
+            </Text>
+
+            <Text className="text-muted-foreground px-6 text-center text-base leading-snug sm:text-lg">
+              {t("product.description")}
+            </Text>
+          </View>
+        </View>
+
+        <View className="mt-auto gap-3">
+          <Button
+            size="lg"
+            onPress={() => router.navigate(pathsConfig.setup.auth.register)}
+          >
+            <Text>{t("getStarted")}</Text>
+          </Button>
+
+          <Button
+            variant="outline"
+            size="lg"
+            onPress={() => router.navigate(pathsConfig.setup.auth.login)}
+          >
+            <Text>
+              {t("register.alreadyHaveAccount")} {t("login.cta")}
+            </Text>
+          </Button>
+        </View>
+      </SafeAreaView>
+    </View>
+  );
+};
+
+export default WelcomePage;