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-banner.png'),
+  furnitureBanner: () => require('./furniture-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,48 @@
+import images from 'assets';
+
 import { HeaderLogo } from '@/components/header-logo';
+import { Banner } from '@/components/home/bannner';
 import { HorizontalCarousel } from '@/components/home/carousel';
-import { SafeAreaView } from '@/ui';
+import PaymentMethods from '@/components/home/payment-methods';
+import { SafeAreaView, ScrollView, Text, View } from '@/ui';
 
 export default function Feed() {
   return (
-    <SafeAreaView>
+    <SafeAreaView className="bg-light_background">
       <HeaderLogo />
-      <HorizontalCarousel />
+      <ScrollView className="mb-6">
+        <HorizontalCarousel />
+        <Banner
+          alignment="left"
+          background="dark"
+          image={images.furnitureBanner()}
+        >
+          <Text className="mb-2 font-semibold color-white">
+            Check out our new and restored furniture
+          </Text>
+          <Text className="color-white">
+            Shop today and get a 10% discount!
+          </Text>
+        </Banner>
+        <View className="bg-white">
+          <Text className="mb-8 mt-4 self-center text-lg font-bold">
+            Payment methods
+          </Text>
+          <PaymentMethods />
+        </View>
+        <Banner
+          alignment="right"
+          background="dark"
+          image={images.fedexBanner()}
+        >
+          <Text className="mb-2 font-semibold color-white">
+            We upgraded our shipments many levels up
+          </Text>
+          <Text className="color-white">
+            Powered by <Text className="color-green-400">FedEx</Text>
+          </Text>
+        </Banner>
+      </ScrollView>
     </SafeAreaView>
   );
 }

src/components/home/bannner.tsx

@@ -0,0 +1,41 @@
+import { Image, View } from '@/ui';
+
+type BannerProps = {
+  background: string;
+  alignment: 'left' | 'right';
+  image: any;
+  children: React.ReactNode;
+};
+
+export const Banner = ({
+  background,
+  alignment,
+  image,
+  children,
+}: BannerProps) => {
+  const isLeftAligned = alignment === 'left';
+
+  return (
+    <View
+      className={`my-6 flex h-40 w-full gap-px overflow-hidden rounded-lg px-6 ${
+        isLeftAligned ? 'flex-row' : 'flex-row-reverse'
+      }`}
+    >
+      <Image
+        source={image}
+        contentFit="cover"
+        className={`h-full w-[47%] ${
+          isLeftAligned ? 'rounded-l-lg' : 'rounded-r-lg'
+        }`}
+      />
+
+      <View
+        className={`flex h-full w-[53%] items-start justify-center p-6 ${background} ${
+          isLeftAligned ? 'rounded-r-lg' : 'rounded-l-lg'
+        } ${background === 'dark' ? 'bg-dark_violet' : ''}`}
+      >
+        {children}
+      </View>
+    </View>
+  );
+};

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;