featured card implemented with dummy data

components/Cards.tsx

@@ -1,11 +1,46 @@
-import {View, Text} from 'react-native'
+import {View, Text, TouchableOpacity, Image} from 'react-native'
 import React from 'react'
+import images from "@/constants/images";
+import icons from "@/constants/icons";
 
-const Cards = () => {
+
+interface Props {
+    onPress?: () => void
+}
+
+export const FeaturedCard = ({onPress} :Props) => {
     return (
-        <View>
-            <Text>Cards</Text>
-        </View>
+        <TouchableOpacity className={'flex flex-col items-start w-60 h-60 relative'}>
+            <Image  source={images.car1} className={'w-60 h-40 rounded-2xl'} resizeMode={"contain"}/>
+            <Image  source={images.cardGradient} className={'size-full rounded-2xl absolute bottom-0'}/>
+
+            <View className={'flex flex-row items-center bg-white/90 px-3 py-1.5 rounded-full absolute top-5 right-1'}>
+                <Image source={icons.star} className={'size-3'}/>
+                <Text className={'text-sm ml-1'}>5.0</Text>
+            </View>
+            <View className={'flex flex-col items-start absolute bottom-1 inset-x-5'}>
+                <Text className={'text-white text-base font-bold'} numberOfLines={1}>Honda - xyz</Text>
+                <Text className={'text-white'}>Skopje</Text>
+
+                <View className={'flex flex-row items-center justify-between w-full'}>
+                    <Text className={'text-base text-white'}>
+                        25.000
+                    </Text>
+                    <Image source={icons.heart} className={'size-5'}/>
+                </View>
+            </View>
+        </TouchableOpacity>
     )
 }
-export default Cards
+
+export const Card = ({onPress} :Props) => {
+    return (
+        <TouchableOpacity onPress={onPress} className={'flex-1 w-full mt-4 px-3 py-4 rounded-xl bg-white shadow-lg shadow-black-100/70 relative'}>
+            <View className={'flex flex-row items-center absolute px-2 top-5 right-5  bg-white/90 p-1 rounded-full z-50'}>
+                <Image  source={icons.star} className={'size-2.5'}/>
+                <Text className={'text-sm ml-1'}>5.0</Text>
+            </View>
+            <Image  source={images.car2} className={'w-full h-40 rounded-lg'}/>
+        </TouchableOpacity>
+    )
+}