fitst commit

screens/welcome/ui/FeatureCard.tsx

@@ -0,0 +1,56 @@
+import { ThemedText } from '@/components/themed-text';
+import { useEffect } from 'react';
+import { Animated, View } from 'react-native';
+import { styles } from '../styles/welcomeStyle';
+
+export default function FeatureCard({
+  icon,
+  title,
+  desc,
+  delay,
+  bgColor,
+}: {
+  icon: any;
+  title: string;
+  bgColor: string;
+  desc: string;
+  delay: number;
+}) {
+  const fadeAnim = new Animated.Value(0);
+  const slideAnim = new Animated.Value(30);
+
+  useEffect(() => {
+    Animated.parallel([
+      Animated.timing(fadeAnim, {
+        toValue: 1,
+        duration: 600,
+        delay: delay,
+        useNativeDriver: true,
+      }),
+      Animated.timing(slideAnim, {
+        toValue: 0,
+        duration: 600,
+        delay: delay,
+        useNativeDriver: true,
+      }),
+    ]).start();
+  }, []);
+
+  return (
+    <Animated.View
+      style={[
+        styles.card,
+        {
+          opacity: fadeAnim,
+          transform: [{ translateY: slideAnim }],
+        },
+      ]}
+    >
+      <View style={{ ...styles.cardIcon, backgroundColor: bgColor, borderRadius: 12 }}>
+        <ThemedText style={styles.cardIconText}>{icon}</ThemedText>
+      </View>
+      <ThemedText style={styles.cardTitle}>{title}</ThemedText>
+      <ThemedText style={styles.cardDesc}>{desc}</ThemedText>
+    </Animated.View>
+  );
+}