2025-06-26 16:04:42 +08:00

63 lines
2.9 KiB
TypeScript

import MemoChat from '@/assets/icons/svg/memo-chat.svg';
import MemoIP from '@/assets/icons/svg/memo-ip.svg';
import { useRouter } from 'expo-router';
import { useTranslation } from 'react-i18next';
import { Text, TouchableOpacity, View } from 'react-native';
export default function HomeScreen() {
const router = useRouter();
const { t } = useTranslation();
return (
<View className="flex-1 bg-bgPrimary px-[1rem] h-screen overflow-auto py-[2rem]">
{/* 标题区域 */}
<View className="items-start mb-10 w-full px-5">
<Text className="text-white text-3xl font-bold mb-3 text-left">
{t('auth.welcomeAwaken.awaken', { ns: 'login' })}
<br />
{t('auth.welcomeAwaken.your', { ns: 'login' })}
<br />
{t('auth.welcomeAwaken.pm', { ns: 'login' })}
</Text>
<Text className="text-white/85 text-base text-left">
{t('auth.welcomeAwaken.slogan', { ns: 'login' })}
</Text>
</View>
{/* Memo 形象区域 */}
<View className="items-center w-full relative">
{/* 气泡对话框 */}
<View className="absolute -top-[7rem] right-[1rem] z-10">
<View className="relative top-[12rem] -right-[3rem] z-10 w-3 h-3 bg-white rounded-full" />
<View className="relative top-[9.5rem] -right-[3.5rem] z-10 w-4 h-4 bg-white rounded-full" />
<Text className="text-[#AC7E35] font-bold text-lg text-center leading-6 relative top-[4rem] left-0">
{t('auth.welcomeAwaken.hi', { ns: 'login' })}
<br />
{t('auth.welcomeAwaken.memo', { ns: 'login' })}
</Text>
<MemoChat />
</View>
{/* Memo 形象 */}
<View className="justify-center items-center">
<MemoIP />
</View>
</View>
{/* 介绍文本 */}
<Text className="text-white text-base text-center mb-[1rem] leading-6 opacity-90 px-10 -mt-[4rem]">
{t('auth.welcomeAwaken.gallery', { ns: 'login' })}
<br />
{t('auth.welcomeAwaken.back', { ns: 'login' })}
</Text>
{/* 唤醒按钮 */}
<TouchableOpacity
className="bg-white rounded-full px-10 py-4 shadow-[0_2px_4px_rgba(0,0,0,0.1)] w-full items-center"
onPress={() => router.push('/login')}
activeOpacity={0.8}
>
<Text className="text-[#4C320C] font-bold text-lg">
{t('auth.welcomeAwaken.awake', { ns: 'login' })}
</Text>
</TouchableOpacity>
</View>
);
}