featured card implemented with dummy data

app/(root)/(tabs)/index.tsx

@@ -2,9 +2,9 @@ import { Link } from "expo-router";
 import {Image, SafeAreaView, Text, TouchableOpacity, View} from "react-native";
 import images from "@/constants/images";
 import icons from "@/constants/icons";
-import search from "@/components/Search";
 import Search from "@/components/Search";
 import {useGlobalContext} from "@/lib/globalProvider";
+import {Card, FeaturedCard} from "@/components/Cards";
 
 export default function Index() {
 // create func that determines the time od day [morning, evening, night]
@@ -31,6 +31,9 @@ export default function Index() {
                           <Text className={'capitalize text-base text-blue-500'}>see all</Text>
                       </TouchableOpacity>
                   </View>
+
+                  <FeaturedCard/>
+                  <Card/>
           </View>
           </View>
       </SafeAreaView>

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>
+    )
+}

constants/images.ts

@@ -3,7 +3,7 @@ import onboarding from "@/assets/images/onboarding.png";
 // import avatar from "@/assets/images/avatar.png";
 // import newYork from "@/assets/images/new-york.png";
 // import japan from "@/assets/images/japan.png";
-// import cardGradient from "@/assets/images/card-gradient.png";
+import cardGradient from "@/assets/images/card-gradient.png";
 // import barChart from "@/assets/images/bar-chart.png";
 // import whiteGradient from "@/assets/images/white-gradient.png";
 // import map from "@/assets/images/map.png";
@@ -18,4 +18,5 @@ export default {
   car2,
   onboarding,
   collage,
+  cardGradient,
 };