rebreak-monorepo/apps/rebreak-native/app/index.tsx

import { useEffect, useState } from 'react';
import { Image, Text, TouchableOpacity, View } from 'react-native';
import Animated, {
  Easing,
  useAnimatedStyle,
  useSharedValue,
  withDelay,
  withTiming,
} from 'react-native-reanimated';
import { useRouter } from 'expo-router';
import { useSafeAreaInsets } from 'react-native-safe-area-context';
import { useTranslation } from 'react-i18next';
import { useAuthStore } from '../stores/auth';
import { BrandSplash } from '../components/BrandSplash';

const EASE_OUT = Easing.out(Easing.cubic);

export default function LandingScreen() {
  const router = useRouter();
  const insets = useSafeAreaInsets();
  const { t } = useTranslation();

  const session = useAuthStore((s) => s.session);
  const loading = useAuthStore((s) => s.loading);

  const [splashDone, setSplashDone] = useState(false);

  const ctaOpacity = useSharedValue(0);
  const ctaTranslateY = useSharedValue(14);

  useEffect(() => {
    if (!loading && session) {
      router.replace('/(app)');
    }
  }, [loading, session, router]);

  function handleSplashDone() {
    setSplashDone(true);
    ctaOpacity.value = withTiming(1, { duration: 380, easing: EASE_OUT });
    ctaTranslateY.value = withTiming(0, { duration: 380, easing: EASE_OUT });
  }

  const ctaStyle = useAnimatedStyle(() => ({
    opacity: ctaOpacity.value,
    transform: [{ translateY: ctaTranslateY.value }],
  }));

  if (loading || session) return null;

  if (!splashDone) {
    return <BrandSplash onDone={handleSplashDone} />;
  }

  return (
    <View style={{ flex: 1, backgroundColor: '#0f172a', overflow: 'hidden' }}>
      <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center', paddingHorizontal: 24, gap: 48 }}>
        <View style={{ alignItems: 'center', gap: 20 }}>
          <Image
            source={require('../assets/icon.png')}
            style={{ width: 96, height: 96, borderRadius: 22 }}
            resizeMode="contain"
          />
          <Text
            style={{
              fontFamily: 'Nunito_800ExtraBold',
              fontSize: 40,
              letterSpacing: -1,
              color: '#ffffff',
            }}
          >
            {t('appHeader.appName')}
          </Text>
        </View>

        <Animated.View style={[{ alignSelf: 'stretch', gap: 12 }, ctaStyle]}>
          <TouchableOpacity
            onPress={() => router.push('/signin')}
            activeOpacity={0.85}
            style={{
              backgroundColor: '#6366f1',
              borderRadius: 16,
              paddingVertical: 16,
              alignItems: 'center',
            }}
          >
            <Text style={{ fontFamily: 'Nunito_700Bold', fontSize: 16, color: '#ffffff' }}>
              {t('auth.signin')}
            </Text>
          </TouchableOpacity>

          <TouchableOpacity
            onPress={() => router.push('/signup')}
            activeOpacity={0.85}
            style={{
              borderWidth: 1.5,
              borderColor: 'rgba(255,255,255,0.25)',
              borderRadius: 16,
              paddingVertical: 16,
              alignItems: 'center',
            }}
          >
            <Text style={{ fontFamily: 'Nunito_600SemiBold', fontSize: 16, color: 'rgba(255,255,255,0.85)' }}>
              {t('landing.start')}
            </Text>
          </TouchableOpacity>
        </Animated.View>
      </View>

      <Text
        style={{
          position: 'absolute',
          bottom: insets.bottom + 16,
          left: 0,
          right: 0,
          fontFamily: 'Nunito_400Regular',
          fontSize: 11,
          letterSpacing: 1.5,
          textTransform: 'uppercase',
          color: 'rgba(255,255,255,0.28)',
          textAlign: 'center',
        }}
      >
        {t('splash.madeInGermany')}
      </Text>
    </View>
  );
}