✨ feat: Home Feature

src/components/modules/home/HomeFeature/HomeFeature.module.scss

@@ -0,0 +1,43 @@
+@import '../../../../styles/utilities';
+
+.homeFeature {
+    @apply spacing-horizontal-left; 
+    overflow-x: hidden;
+
+    @screen md {
+        @apply spacing-horizontal grid grid-cols-3;
+    
+    }
+}
+
+.homeFeatureItem {
+    @apply inline-block align-middle;
+    
+    .itemImg {
+        @apply float-left clear-both;
+        width: 5.6rem;
+        height: 5.6rem;
+
+        @screen md {
+            @apply float-left clear-both;
+            width: 11.2rem;
+            height: 11.2rem;
+        }
+    }
+
+    .itemText {
+        @apply collection-subtitle;
+        width: 28rem;
+        height: 9.6rem;
+        margin-left: 2.4rem;
+
+        @screen md {
+            @apply collection-subtitle text-justify;
+            width: 36rem;
+            height: 9.6rem;
+            margin-left: 2.4rem;
+            color: red;
+        }
+    }
+
+}

src/components/modules/home/HomeFeature/HomeFeature.tsx

@@ -0,0 +1,23 @@
+import React from 'react'
+import s from './HomeFeature.module.scss'
+
+import HomeFeatureItem from './HomeFeatureItem'
+
+import img from './assets/desktop.png'
+
+interface HomeFeatureProps {
+    
+}
+
+const HomeFeature = ({  }: HomeFeatureProps) => {
+    return (
+        <section className={s.homeFeature}>
+            <HomeFeatureItem image={img} children="Webshop owner will upload products at 10:30pm, shoppers can buy fresh products at 11pm." />
+            <HomeFeatureItem image={img} children="Most fresh fish and seafood will be listed at 8am from inventory. " />
+            <HomeFeatureItem image={img} children="Show that food will be shipped in a greengrocery plastic bag" />
+        </section>
+    )
+
+}
+
+export default HomeFeature

src/components/modules/home/HomeFeature/HomeFeatureItem.tsx

@@ -0,0 +1,22 @@
+import React from 'react'
+import s from './HomeFeature.module.scss'
+import Image from 'next/image'
+
+interface HomeFeatureItemProps {
+    image?: any;
+    children: string;
+}
+
+const HomeFeatureItem = ({ image, children }: HomeFeatureItemProps) => {
+    
+    return (
+        <div className={s.homeFeatureItem}>
+            <Image className={s.itemImg} src={image} alt="home feature item img" />
+            {/* <img className={s.itemImg} src="" alt="home feature item img" />  */}
+            <div className={s.itemText}>{children}</div>
+        </div>
+    )
+
+}
+
+export default HomeFeatureItem

src/components/modules/home/index.ts

@@ -1 +1,3 @@
 export { default as HomeBanner } from './HomeBanner/HomeBanner'
+export { default as HomeFeature } from './HomeFeature/HomeFeature'
+export { default as HomeFeatureItem } from './HomeFeature/HomeFeatureItem'