Initial commit for Greenlens

components/SplashScreen.tsx

@@ -0,0 +1,70 @@
+import React, { useEffect, useRef } from 'react';
+import { View, Text, Animated, StyleSheet, Image } from 'react-native';
+
+export default function SplashScreen() {
+  const fadeAnim = useRef(new Animated.Value(0)).current;
+
+  useEffect(() => {
+    Animated.timing(fadeAnim, {
+      toValue: 1,
+      duration: 800,
+      useNativeDriver: true,
+    }).start();
+  }, []);
+
+  return (
+    <View style={styles.container}>
+      <Animated.View style={[styles.content, { opacity: fadeAnim }]}>
+        <View style={styles.iconContainer}>
+          <Image 
+            source={require('../assets/icon.png')} 
+            style={styles.icon}
+            resizeMode="cover"
+          />
+        </View>
+        <Text style={styles.title}>GreenLens</Text>
+        <Text style={styles.subtitle}>Identify any plant</Text>
+      </Animated.View>
+    </View>
+  );
+}
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    backgroundColor: '#1c1917',
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
+  content: {
+    alignItems: 'center',
+  },
+  iconContainer: {
+    width: 100,
+    height: 100,
+    borderRadius: 24,
+    backgroundColor: '#ffffff',
+    elevation: 8,
+    shadowColor: '#4ade80',
+    shadowOffset: { width: 0, height: 4 },
+    shadowOpacity: 0.2,
+    shadowRadius: 12,
+    marginBottom: 8,
+    overflow: 'hidden',
+  },
+  icon: {
+    width: '100%',
+    height: '100%',
+  },
+  title: {
+    fontSize: 36,
+    fontWeight: '700',
+    color: '#fafaf9',
+    marginTop: 16,
+  },
+  subtitle: {
+    fontSize: 16,
+    color: '#a8a29e',
+    marginTop: 8,
+  },
+});