1 files changed, 120 insertions, 0 deletions
diff --git a/src/app/biometrics.tsx b/src/app/biometrics.tsx
new file mode 100644
index 0000000..500adc9
--- /dev/null
+++ b/src/app/biometrics.tsx
@@ -0,0 +1,120 @@
+import React from 'react';
+import { View, Text, StyleSheet } from 'react-native';
+import { useRouter } from 'expo-router';
+import * as SecureStore from 'expo-secure-store';
+import Animated, { FadeInDown, FadeInUp } from 'react-native-reanimated';
+import { Feather } from '@expo/vector-icons';
+import { useSafeAreaInsets } from 'react-native-safe-area-context';
+import { Button } from '@/components/ui/button';
+import { Colors, Spacing, Typography, Radius } from '@/constants/theme';
+import { BlurView } from 'expo-blur';
+
+export default function BiometricsScreen() {
+    const router = useRouter();
+    const insets = useSafeAreaInsets();
+
+    async function handleAccept() {
+        await SecureStore.setItemAsync('yaba_use_biometrics', 'true');
+        router.replace('/');
+    }
+
+    function handleDecline() {
+        router.replace('/');
+    }
+
+    return (
+        <View style={[styles.container, { paddingTop: insets.top, paddingBottom: insets.bottom }]}>
+
+            <View style={styles.content}>
+                <Animated.View entering={FadeInDown.duration(600).delay(100)} style={styles.iconContainer}>
+                    <View style={styles.iconBackground}>
+                        <Feather size={64} color={Colors.primary} />
+                    </View>
+                </Animated.View>
+
+                <Animated.View entering={FadeInUp.duration(600).delay(200)} style={styles.textContainer}>
+                    <Text style={styles.title}>Login por Biometria</Text>
+                    <Text style={styles.subtitle}>
+                        Deseja utilizar sua biometria (Face ID / Digital) para acessar o app mais rapidamente nas próximas vezes?
+                    </Text>
+                </Animated.View>
+            </View>
+
+            <Animated.View entering={FadeInUp.duration(600).delay(400)} style={styles.footer}>
+                <BlurView intensity={80} tint="dark" style={styles.blurContainer}>
+                    <Button
+                        label="Sim, usar biometria"
+                        onPress={handleAccept}
+                        fullWidth
+                        style={styles.primaryButton}
+                    />
+                    <Button
+                        label="Não, manter acesso livre"
+                        variant="ghost"
+                        onPress={handleDecline}
+                        fullWidth
+                    />
+                </BlurView>
+            </Animated.View>
+        </View>
+    );
+}
+
+const styles = StyleSheet.create({
+    container: {
+        flex: 1,
+        backgroundColor: Colors.background,
+        justifyContent: 'space-between',
+    },
+    content: {
+        flex: 1,
+        justifyContent: 'center',
+        alignItems: 'center',
+        paddingHorizontal: Spacing.xl,
+        gap: Spacing.xxl,
+    },
+    iconContainer: {
+        alignItems: 'center',
+    },
+    iconBackground: {
+        width: 120,
+        height: 120,
+        borderRadius: 60,
+        backgroundColor: 'rgba(238, 250, 13, 0.1)',
+        alignItems: 'center',
+        justifyContent: 'center',
+        borderWidth: 1,
+        borderColor: 'rgba(238, 250, 13, 0.2)',
+    },
+    textContainer: {
+        alignItems: 'center',
+        gap: Spacing.sm,
+    },
+    title: {
+        ...Typography.h1,
+        color: Colors.textPrimary,
+        textAlign: 'center',
+    },
+    subtitle: {
+        ...Typography.bodyLarge,
+        color: Colors.textSecondary,
+        textAlign: 'center',
+        lineHeight: 24,
+    },
+    footer: {
+        paddingHorizontal: Spacing.lg,
+        paddingBottom: Spacing.lg,
+    },
+    blurContainer: {
+        padding: Spacing.lg,
+        borderRadius: Radius.lg,
+        gap: Spacing.md,
+        backgroundColor: 'rgba(22, 27, 34, 0.6)',
+        borderWidth: 1,
+        borderColor: 'rgba(255, 255, 255, 0.08)',
+        overflow: 'hidden',
+    },
+    primaryButton: {
+        height: 56,
+    }
+});