first commit

2026-01-02 17:56:16 +05:30
parent b94f98a764
commit 59fb7e0df4
149 changed files with 9362 additions and 12549 deletions
@@ -0,0 +1,170 @@
+import React, { FC, useRef, useEffect } from 'react';
+import {
+  StyleSheet,
+  Text,
+  View,
+  TouchableOpacity,
+  Animated,
+  Platform,
+} from 'react-native';
+import LinearGradient from 'react-native-linear-gradient';
+import { BlurView } from '@react-native-community/blur';
+import colors from '../../Constant/Color';
+
+interface CardProps {
+  title: string;
+  leftLabel: string;
+  leftValue: React.ReactNode;
+  rightLabel: string;
+  rightValue: React.ReactNode;
+  buttonText: string;
+  onPress: () => void;
+}
+
+const Card: FC<CardProps> = ({
+  title,
+  leftLabel,
+  leftValue,
+  rightLabel,
+  rightValue,
+  buttonText,
+  onPress,
+}) => {
+  const scale = useRef(new Animated.Value(0.95)).current;
+
+  useEffect(() => {
+    Animated.spring(scale, {
+      toValue: 1,
+      friction: 8,
+      tension: 90,
+      useNativeDriver: true,
+    }).start();
+  }, []);
+
+  return (
+    <Animated.View style={[styles.outer, { transform: [{ scale }] }]}>
+      {/* Glass Base */}
+      {Platform.OS === 'ios' && (
+        <BlurView
+          style={StyleSheet.absoluteFill}
+          blurType="light"
+          blurAmount={10}
+          reducedTransparencyFallbackColor="#ffffff"
+        />
+      )}
+
+      {/* Card Body */}
+      <LinearGradient
+        colors={[
+          'rgba(255,255,255,0.85)',
+          'rgba(255,255,255,0.65)',
+        ]}
+        style={styles.card}
+      >
+        {/* Title */}
+        <Text style={styles.title}>{title}</Text>
+
+        {/* Stats */}
+        <View style={styles.statsRow}>
+          <View style={styles.statBox}>
+            <Text style={styles.statValue}>{leftValue}</Text>
+            <Text style={styles.statLabel}>{leftLabel}</Text>
+          </View>
+
+          <View style={styles.verticalDivider} />
+
+          <View style={styles.statBox}>
+            <Text style={styles.statValue}>{rightValue}</Text>
+            <Text style={styles.statLabel}>{rightLabel}</Text>
+          </View>
+        </View>
+
+        {/* CTA */}
+        <TouchableOpacity activeOpacity={0.85} onPress={onPress}>
+          <LinearGradient
+            colors={[colors.primary, colors.primaryLight]}
+            start={{ x: 0, y: 0 }}
+            end={{ x: 1, y: 1 }}
+            style={styles.ctaButton}
+          >
+            <Text style={styles.ctaText}>{buttonText}</Text>
+          </LinearGradient>
+        </TouchableOpacity>
+      </LinearGradient>
+    </Animated.View>
+  );
+};
+
+export default Card;
+
+
+const styles = StyleSheet.create({
+  outer: {
+    marginBottom: 20,
+    borderRadius: 20,
+    overflow: 'hidden',
+    shadowColor: '#000',
+    shadowOffset: { width: 0, height: 10 },
+    shadowOpacity: 0.12,
+    shadowRadius: 18,
+    elevation: 8,
+  },
+
+  card: {
+    padding: 22,
+    borderRadius: 20,
+    borderWidth: 1,
+    borderColor: 'rgba(255,255,255,0.6)',
+  },
+
+  title: {
+    fontSize: 18,
+    fontWeight: '800',
+    color: '#0f172a',
+    marginBottom: 16,
+  },
+
+  statsRow: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    marginBottom: 18,
+  },
+
+  statBox: {
+    flex: 1,
+    alignItems: 'center',
+  },
+
+  statValue: {
+    fontSize: 26,
+    fontWeight: '900',
+    color: '#020617',
+  },
+
+  statLabel: {
+    fontSize: 13,
+    fontWeight: '600',
+    color: colors.secondary,
+    marginTop: 4,
+  },
+
+  verticalDivider: {
+    width: 1,
+    height: 42,
+    backgroundColor: 'rgba(15,23,42,0.15)',
+  },
+
+  ctaButton: {
+    height: 46,
+    borderRadius: 14,
+    justifyContent: 'center',
+    alignItems: 'center',
+  },
+
+  ctaText: {
+    color: '#fff',
+    fontSize: 14,
+    fontWeight: '800',
+    letterSpacing: 0.6,
+  },
+});