fitst commit

screens/welcome/ui/Welcome.tsx

@@ -0,0 +1,218 @@
+import { ThemedText } from '@/components/themed-text';
+import AntDesign from '@expo/vector-icons/AntDesign';
+import Feather from '@expo/vector-icons/Feather';
+import MaterialCommunityIcons from '@expo/vector-icons/MaterialCommunityIcons';
+import { LinearGradient } from 'expo-linear-gradient';
+import { useRouter } from 'expo-router';
+import { useEffect, useRef, useState } from 'react';
+import { useTranslation } from 'react-i18next';
+import { Animated, RefreshControl, ScrollView, TouchableOpacity, View } from 'react-native';
+import { SafeAreaView } from 'react-native-safe-area-context';
+import { styles } from '../styles/welcomeStyle';
+import FeatureCard from './FeatureCard';
+import WelcomeHeader from './WelcomeHeader';
+
+export default function WelcomePage() {
+  const [menuOpen, setMenuOpen] = useState(false);
+  const fadeAnim = new Animated.Value(0);
+  const router = useRouter();
+  const slideAnim = new Animated.Value(50);
+  const [refreshing, setRefreshing] = useState(false);
+
+  const menuHeightAnim = useRef(new Animated.Value(0)).current;
+  const menuOpacityAnim = useRef(new Animated.Value(0)).current;
+
+  const { t } = useTranslation();
+
+  useEffect(() => {
+    Animated.parallel([
+      Animated.timing(fadeAnim, {
+        toValue: 1,
+        duration: 800,
+        useNativeDriver: true,
+      }),
+      Animated.timing(slideAnim, {
+        toValue: 0,
+        duration: 800,
+        useNativeDriver: true,
+      }),
+    ]).start();
+  }, []);
+
+  // Menu animatsiyasi
+  useEffect(() => {
+    if (menuOpen) {
+      Animated.parallel([
+        Animated.spring(menuHeightAnim, {
+          toValue: 1,
+          tension: 80,
+          friction: 10,
+          useNativeDriver: false,
+        }),
+        Animated.timing(menuOpacityAnim, {
+          toValue: 1,
+          duration: 250,
+          useNativeDriver: true,
+        }),
+      ]).start();
+    } else {
+      Animated.parallel([
+        Animated.timing(menuHeightAnim, {
+          toValue: 0,
+          duration: 200,
+          useNativeDriver: false,
+        }),
+        Animated.timing(menuOpacityAnim, {
+          toValue: 0,
+          duration: 150,
+          useNativeDriver: true,
+        }),
+      ]).start();
+    }
+  }, [menuOpen]);
+
+  const handleNavigation = (screen: 'announcements' | '(tabs)/login') => {
+    setMenuOpen(false);
+    router.push(`/${screen}`);
+  };
+
+  const onRefresh = () => {
+    setRefreshing(true);
+
+    setTimeout(() => {
+      setRefreshing(false);
+    }, 1500);
+  };
+
+  return (
+    <SafeAreaView style={styles.container}>
+      <WelcomeHeader onMenuPress={() => setMenuOpen(!menuOpen)} menuOpen={menuOpen} />
+
+      {menuOpen && (
+        <Animated.View
+          style={[
+            styles.mobileMenu,
+            {
+              opacity: menuOpacityAnim,
+              overflow: 'hidden',
+            },
+          ]}
+        >
+          <TouchableOpacity style={styles.menuItem} activeOpacity={0.7}>
+            <ThemedText style={styles.menuItemText}>{t('mainPage.sign_in')}</ThemedText>
+            <AntDesign name="right" size={15} color="black" />
+          </TouchableOpacity>
+
+          <TouchableOpacity style={[styles.menuItem]} activeOpacity={0.7}>
+            <ThemedText style={styles.menuItemText}>{t('mainPage.sign_up')}</ThemedText>
+            <AntDesign name="right" size={15} color="black" />
+          </TouchableOpacity>
+        </Animated.View>
+      )}
+
+      <ScrollView
+        contentContainerStyle={styles.scrollContent}
+        showsVerticalScrollIndicator={false}
+        refreshControl={
+          <RefreshControl
+            refreshing={refreshing}
+            onRefresh={onRefresh}
+            tintColor="#155dfc"
+            colors={['#155dfc']}
+          />
+        }
+      >
+        <View style={[styles.hero]}>
+          <View style={styles.badge}>
+            <ThemedText style={styles.badgeText}> {t('mainPage.safe')}</ThemedText>
+          </View>
+
+          <ThemedText style={styles.title}>{t('mainPage.welcome')}</ThemedText>
+
+          <ThemedText style={styles.subtitle}>{t('mainPage.welcome_desc')}</ThemedText>
+
+          <TouchableOpacity
+            style={styles.mainBtn}
+            activeOpacity={0.9}
+            onPress={() => handleNavigation('announcements')}
+          >
+            <ThemedText style={styles.mainBtnText}> {t('common.enrol')}</ThemedText>
+            <View style={styles.btnArrow}>
+              <AntDesign name="right" size={14} color="white" />
+            </View>
+          </TouchableOpacity>
+        </View>
+
+        <View style={styles.features}>
+          <FeatureCard
+            bgColor="#dbeafe"
+            icon={<MaterialCommunityIcons name="shield-outline" size={24} color="#155dfc" />}
+            title={t('mainPage.card1Title')}
+            desc={t('mainPage.card1Desc')}
+            delay={200}
+          />
+          <FeatureCard
+            bgColor="#dbeafe"
+            icon={<Feather name="zap" size={24} color="#155dfc" />}
+            title={t('mainPage.card2Title')}
+            desc={t('mainPage.card2Desc')}
+            delay={300}
+          />
+          <FeatureCard
+            bgColor="#f3e8ff"
+            icon={<Feather name="users" size={24} color="#9810fa" />}
+            title={t('mainPage.card3Title')}
+            desc={t('mainPage.card3Desc')}
+            delay={400}
+          />
+        </View>
+      </ScrollView>
+
+      <View style={styles.footer}>
+        <TouchableOpacity
+          style={{
+            ...styles.footerBtnOutline,
+            flexDirection: 'row',
+            alignItems: 'center',
+            justifyContent: 'center',
+            paddingVertical: 14,
+            paddingHorizontal: 24,
+            borderRadius: 12,
+          }}
+          activeOpacity={0.8}
+        >
+          <ThemedText style={styles.footerBtnOutlineText}>{t('mainPage.enter')}</ThemedText>
+        </TouchableOpacity>
+
+        <TouchableOpacity onPress={() => handleNavigation('(tabs)/login')} activeOpacity={0.9}>
+          <LinearGradient
+            colors={['#3b82f6', '#6366f1']}
+            start={{ x: 0, y: 0 }}
+            end={{ x: 1, y: 0 }}
+            style={{
+              flexDirection: 'row',
+              alignItems: 'center',
+              justifyContent: 'center',
+              paddingVertical: 14,
+              paddingHorizontal: 24,
+              borderRadius: 12,
+              marginBottom: 10,
+            }}
+          >
+            <ThemedText
+              style={{
+                color: '#fff',
+                fontSize: 16,
+                fontWeight: '600',
+                marginRight: 8,
+              }}
+            >
+              {t('mainPage.start')}
+            </ThemedText>
+            <AntDesign name="right" size={14} color="white" />
+          </LinearGradient>
+        </TouchableOpacity>
+      </View>
+    </SafeAreaView>
+  );
+}