import { Ionicons } from '@expo/vector-icons'; import { Image } from 'expo-image'; import { StatusBar } from 'expo-status-bar'; import React, { useState } from 'react'; import { SafeAreaView, ScrollView, StyleSheet, Text, TextInput, TouchableOpacity, View } from 'react-native'; export default function ClaudeLogin() { const [email, setEmail] = useState(''); return ( {/* Logo */} Do your best work with Claude {/* Main Content */} Enter your email address to get started {/* Email Input */} {/* Continue Button */} Continue with Email {/* Divider */} OR {/* Social Auth Buttons */} Continue with Google Continue with Apple {/* Terms and Privacy */} By continuing, you agree to Anthropic's Consumer Terms and Acceptable Use Policy, and acknowledge their Privacy Policy ); } const styles = StyleSheet.create({ container: { flex: 1, backgroundColor: '#F5F5F0', }, content: { flex: 1, paddingHorizontal: 12, justifyContent: 'space-between', }, logoContainer: { alignItems: 'center', marginTop: 60, }, logoIcon: { width: 150, height: 30, resizeMode: 'contain', marginBottom: 12, }, logoEmoji: { fontSize: 32, }, logoText: { fontSize: 36, fontWeight: '600', color: '#000', }, mainContent: { flex: 1, justifyContent: 'center', paddingHorizontal: 20, }, title: { fontSize: 32, fontWeight: '400', color: '#000', textAlign: 'center', lineHeight: 40, }, subtitle: { fontSize: 14, color: '#666', textAlign: 'center', marginBottom: 12, }, emailInput: { backgroundColor: '#fff', borderRadius: 12, paddingHorizontal: 20, paddingVertical: 16, fontSize: 16, borderWidth: 1, borderColor: '#E5E5E5', marginBottom: 16, }, continueButton: { backgroundColor: '#C17B5A', borderRadius: 12, paddingVertical: 16, alignItems: 'center', marginBottom: 24, }, continueButtonText: { color: '#fff', fontSize: 16, fontWeight: '600', }, divider: { textAlign: 'center', fontSize: 14, color: '#666', marginBottom: 24, }, socialButton: { flexDirection: 'row', alignItems: 'center', justifyContent: 'center', backgroundColor: '#fff', borderRadius: 12, paddingVertical: 16, borderWidth: 1, borderColor: '#E5E5E5', marginBottom: 12, }, googleIcon: { width: 20, height: 20, marginRight: 12, resizeMode: 'contain', }, socialButtonText: { fontSize: 16, color: '#000', fontWeight: '500', }, appleButton: { flexDirection: 'row', alignItems: 'center', justifyContent: 'center', backgroundColor: '#000', borderRadius: 12, paddingVertical: 16, marginBottom: 32, }, appleButtonText: { color: '#fff', fontSize: 16, fontWeight: '500', marginLeft: 12, }, termsContainer: { flexDirection: 'row', flexWrap: 'wrap', justifyContent: 'center', paddingHorizontal: 20, }, termsText: { fontSize: 12, color: '#666', textAlign: 'center', lineHeight: 16, }, termsLink: { textDecorationLine: 'underline', }, });