created transaction list show and create a custom card

src/components/common/AnimatedCard.tsx

@@ -8,6 +8,7 @@ import {
 } from "react-native";
 import LinearGradient from "react-native-linear-gradient";
 import { Ionicons, IoniconsIconName } from "@react-native-vector-icons/ionicons";
+import colors from "../colors";
 
 type CardProps = {
   title: string;
@@ -179,7 +180,7 @@ const styles = StyleSheet.create({
   },
   subtitle: {
     fontSize: 14,
-    color: "rgba(255, 255, 255, 0.8)",
+    color: colors.primary,
     fontWeight: "500",
     textAlign: "center",
   },

src/screens/home/user-home/UserHome.tsx

@@ -124,7 +124,7 @@ const UserHome = () => {
     return (
         <>
             {/* Stats */}
-            <View style={[styles.statsRow, { marginVertical: 24 }]}>
+            <View style={[styles.statsRow, { marginTop:12 }]}>
                 <View style={styles.statBox}>
                     <Text style={styles.statValue}>{totalGroups}</Text>
                     <Text style={styles.statLabel}>Groups Joined</Text>
@@ -136,6 +136,7 @@ const UserHome = () => {
             </View>
             {/* <Button title="Transaction List" onPress={()=>navigation.navigate('TransactionList')}/> */}
             <AnimatedCard
+            
                 onPress={() => navigation.navigate("TransactionList")} title={"transaction list"}  iconName="calculator-outline"  subtitle="View your transaction history"        />
 
             {/* Groups List */}