Initial commit

2026-06-12 23:23:22 +00:00 · 2026-05-08 13:01:47 +00:00
parent 864bbd389e
commit 9e663bdc8b
64 changed files with 20910 additions and 74 deletions
--- a/src/screens/GuestScreen.tsx
+++ b/src/screens/GuestScreen.tsx
@@ -0,0 +1,131 @@
+import React, { useEffect, useRef } from 'react';
+import { View, Text, StyleSheet, Animated } from 'react-native';
+import { useNavigation } from '@react-navigation/native';
+import { NativeStackNavigationProp } from '@react-navigation/native-stack';
+import { SafeAreaView } from 'react-native-safe-area-context';
+import { RootStackParamList } from '../navigation/types';
+import { COLORS, FONT_SIZE, SPACING, RADIUS, TEXT, SHADOWS } from '../theme';
+import { useTheme } from '../theme';
+import { Button } from '../components/ui';
+
+interface GuestScreenProps {
+  icon?: string;
+  title?: string;
+  description?: string;
+}
+
+const FEATURES = [
+  { icon: '🤖', text: 'Build AI chatbots from your documents' },
+  { icon: '📊', text: 'Analytics, leads & conversation history' },
+  { icon: '🚀', text: 'Deploy to Telegram, WhatsApp & web' },
+  { icon: '🔌', text: 'Free plan available — no credit card needed' },
+];
+
+export function GuestScreen({
+  icon = '🔐',
+  title = 'Sign in to continue',
+  description = 'Create a free account to build and manage your AI chatbots.',
+}: GuestScreenProps) {
+  const { theme } = useTheme();
+  const navigation = useNavigation<NativeStackNavigationProp<RootStackParamList>>();
+
+  const fadeAnim = useRef(new Animated.Value(0)).current;
+  const slideAnim = useRef(new Animated.Value(24)).current;
+
+  useEffect(() => {
+    Animated.parallel([
+      Animated.timing(fadeAnim, { toValue: 1, duration: 400, useNativeDriver: true }),
+      Animated.spring(slideAnim, { toValue: 0, useNativeDriver: true, speed: 16, bounciness: 4 }),
+    ]).start();
+  }, []);
+
+  return (
+    <SafeAreaView style={[styles.safe, { backgroundColor: theme.bg }]}>
+      <Animated.View
+        style={[styles.container, { opacity: fadeAnim, transform: [{ translateY: slideAnim }] }]}>
+
+        {/* Logo */}
+        <View style={styles.logoRow}>
+          <View style={[styles.logoCircle, SHADOWS.primary]}>
+            <Text style={styles.logoText}>C</Text>
+          </View>
+          <Text style={[styles.appName, { color: theme.text }]}>Contexta</Text>
+        </View>
+
+        {/* Card */}
+        <View style={[styles.card, { backgroundColor: theme.surface, borderColor: theme.border }, SHADOWS.md]}>
+          <Text style={styles.cardIcon}>{icon}</Text>
+          <Text style={[styles.cardTitle, { color: theme.text }]}>{title}</Text>
+          <Text style={[styles.cardDesc, { color: theme.textSecondary }]}>{description}</Text>
+
+          <View style={styles.btnGroup}>
+            <Button title="Sign In" onPress={() => navigation.navigate('Login')} fullWidth size="lg" />
+            <Button title="Create Free Account" variant="outline" onPress={() => navigation.navigate('Signup')} fullWidth size="lg" />
+          </View>
+        </View>
+
+        {/* Features */}
+        <View style={[styles.features, { backgroundColor: theme.surface, borderColor: theme.border }]}>
+          {FEATURES.map((f, i) => (
+            <View key={i} style={[styles.featureRow, i < FEATURES.length - 1 && { borderBottomWidth: 1, borderBottomColor: theme.borderLight }]}>
+              <View style={styles.featureIcon}>
+                <Text style={{ fontSize: 18 }}>{f.icon}</Text>
+              </View>
+              <Text style={[styles.featureText, { color: theme.textSecondary }]}>{f.text}</Text>
+            </View>
+          ))}
+        </View>
+      </Animated.View>
+    </SafeAreaView>
+  );
+}
+
+const styles = StyleSheet.create({
+  safe: { flex: 1 },
+  container: {
+    flex: 1,
+    paddingHorizontal: SPACING.xl,
+    paddingVertical: SPACING.xl,
+    justifyContent: 'center',
+    gap: SPACING.xl,
+  },
+
+  logoRow: { flexDirection: 'row', alignItems: 'center', justifyContent: 'center', gap: SPACING.md },
+  logoCircle: {
+    width: 52,
+    height: 52,
+    borderRadius: RADIUS.xl,
+    backgroundColor: COLORS.primary,
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
+  logoText: { color: COLORS.white, fontSize: 22, fontWeight: '800' },
+  appName: { ...TEXT.h2 },
+
+  card: {
+    borderRadius: RADIUS.xxl,
+    padding: SPACING.xxl,
+    borderWidth: 1,
+    alignItems: 'center',
+    gap: SPACING.md,
+  },
+  cardIcon: { fontSize: 44 },
+  cardTitle: { ...TEXT.h3, textAlign: 'center' },
+  cardDesc: { ...TEXT.body, textAlign: 'center', lineHeight: 22 },
+  btnGroup: { width: '100%', gap: SPACING.sm, marginTop: SPACING.xs },
+
+  features: {
+    borderRadius: RADIUS.xl,
+    borderWidth: 1,
+    overflow: 'hidden',
+  },
+  featureRow: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    paddingVertical: SPACING.md,
+    paddingHorizontal: SPACING.lg,
+    gap: SPACING.md,
+  },
+  featureIcon: { width: 32, alignItems: 'center' },
+  featureText: { ...TEXT.small, flex: 1, lineHeight: 20 },
+});