feat: home banners

assets/index.ts

@@ -9,6 +9,11 @@ const images = {
   filterIcon: () => require('./filter_list.png'),
   trashIcon: () => require('./trash.png'),
   plusIcon: () => require('./plus.png'),
+  fedexBanner: () => require('./fedex-ad.png'),
+  productsBanner: () => require('./products-banner.png'),
+  creditCard: () => require('./credit.png'),
+  paypal: () => require('./paypal.png'),
+  crypto: () => require('./crypto.png'),
 };
 
 export type Images = keyof typeof images;

src/app/(app)/index.tsx

@@ -1,12 +1,37 @@
+import images from 'assets';
+
 import { HeaderLogo } from '@/components/header-logo';
 import { HorizontalCarousel } from '@/components/home/carousel';
-import { SafeAreaView } from '@/ui';
+import PaymentMethods from '@/components/home/payment-methods';
+import { Image, SafeAreaView, ScrollView, Text, View } from '@/ui';
 
 export default function Feed() {
   return (
-    <SafeAreaView>
+    <SafeAreaView className="bg-light_background">
       <HeaderLogo />
-      <HorizontalCarousel />
+      <ScrollView>
+        <HorizontalCarousel />
+        <View className="h-52">
+          <Image
+            className="w-full flex-1"
+            source={images.productsBanner()}
+            contentFit="contain"
+          />
+        </View>
+        <View className="bg-white">
+          <Text className="my-8 self-center text-lg font-bold">
+            Payment methods
+          </Text>
+          <PaymentMethods />
+        </View>
+        <View className="h-48">
+          <Image
+            className="w-full flex-1"
+            source={images.fedexBanner()}
+            contentFit="contain"
+          />
+        </View>
+      </ScrollView>
     </SafeAreaView>
   );
 }

src/components/home/payment-methods.tsx

@@ -0,0 +1,38 @@
+import images from 'assets';
+
+import { Image, Text, TouchableOpacity, View } from '@/ui';
+
+const PaymentMethods = () => {
+  return (
+    <View className="my-4 h-20 w-4/5 flex-row items-center justify-evenly self-center">
+      <TouchableOpacity className="mx-3 items-center justify-items-center">
+        <Image
+          source={images.creditCard()}
+          className="mb-6 h-9 w-9"
+          contentFit="contain"
+        />
+        <Text>Credit</Text>
+      </TouchableOpacity>
+      <View className="mx-5 h-full w-px bg-black" />
+      <TouchableOpacity className="mx-3 items-center justify-items-center">
+        <Image
+          source={images.paypal()}
+          className="mb-6 h-9 w-9"
+          contentFit="contain"
+        />
+        <Text>Paypal</Text>
+      </TouchableOpacity>
+      <View className="mx-5 h-full w-px bg-black" />
+      <TouchableOpacity className="mx-3 items-center justify-items-center">
+        <Image
+          source={images.crypto()}
+          className="mb-6 h-9 w-9"
+          contentFit="contain"
+        />
+        <Text>Crypto</Text>
+      </TouchableOpacity>
+    </View>
+  );
+};
+
+export default PaymentMethods;