108 lines
3.3 KiB
TypeScript
108 lines
3.3 KiB
TypeScript
/* 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;
|