streamyfin/app/(auth)/(tabs)/(home)/intro/page.tsx

import { Button } from "@/components/Button";
import { Text } from "@/components/common/Text";
import { storage } from "@/utils/mmkv";
import { Feather, Ionicons } from "@expo/vector-icons";
import { Image } from "expo-image";
import { useFocusEffect, useRouter } from "expo-router";
import { useCallback } from "react";
import { TouchableOpacity, View } from "react-native";

export default function page() {
  const router = useRouter();

  useFocusEffect(
    useCallback(() => {
      storage.set("hasShownIntro", true);
    }, [])
  );

  return (
    <View className="bg-neutral-900 h-full py-32 px-4 space-y-4">
      <View>
        <Text className="text-3xl font-bold text-center mb-2">
          Welcome to Streamyfin
        </Text>
        <Text className="text-center">
          A free and open source client for Jellyfin.
        </Text>
      </View>

      <View>
        <Text className="text-lg font-bold">Features</Text>
        <Text className="text-xs">
          Streamyfin has a bunch of features and integrates with a wide array of
          software which you can find in the settings menu, these include:
        </Text>
        <View className="flex flex-row items-center mt-4">
          <Image
            source={require("@/assets/icons/jellyseerr-logo.svg")}
            style={{
              width: 50,
              height: 50,
            }}
          />
          <View className="shrink ml-2">
            <Text className="font-bold mb-1">Jellyseerr</Text>
            <Text className="shrink text-xs">
              Connect to your Jellyseerr instance and request movies directly in
              the app.
            </Text>
          </View>
        </View>
        <View className="flex flex-row items-center mt-4">
          <View
            style={{
              width: 50,
              height: 50,
            }}
            className="flex items-center justify-center"
          >
            <Ionicons name="cloud-download-outline" size={32} color="white" />
          </View>
          <View className="shrink ml-2">
            <Text className="font-bold mb-1">Downloads</Text>
            <Text className="shrink text-xs">
              Download movies and tv-shows to view offline. Use either the
              default method or install the optimize server to download files in
              the background.
            </Text>
          </View>
        </View>
        <View className="flex flex-row items-center mt-4">
          <View
            style={{
              width: 50,
              height: 50,
            }}
            className="flex items-center justify-center"
          >
            <Feather name="cast" size={28} color={"white"} />
          </View>
          <View className="shrink ml-2">
            <Text className="font-bold mb-1">Chromecast</Text>
            <Text className="shrink text-xs">
              Cast movies and tv-shows to your Chromecast devices.
            </Text>
          </View>
        </View>
      </View>

      <Button
        onPress={() => {
          router.back();
        }}
        className="mt-4"
      >
        Done
      </Button>
      <TouchableOpacity
        onPress={() => {
          router.back();
          router.push("/settings");
        }}
        className="mt-4"
      >
        <Text className="text-purple-600 text-center">Go to settings</Text>
      </TouchableOpacity>
    </View>
  );
}