:spakles: feat: Home Feature

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

@@ -1,43 +0,0 @@
-@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

@@ -1,23 +0,0 @@
-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/components/HomeFeature/HomeFeature.module.scss

@@ -0,0 +1,14 @@
+@import '../../../../../../styles/utilities';
+
+.homeFeature {
+    @apply spacing-horizontal-left grid grid-cols-1;
+    background-color: #FFFFFF;
+    height: fit-content;
+    display: flex;
+    margin-bottom: 3.2rem;
+
+    @screen xl {
+        @apply spacing-horizontal grid grid-cols-3;
+        margin-bottom: 6.4rem;
+    }
+}

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

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

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

@@ -0,0 +1,56 @@
+@import '../../../../../../styles/utilities';
+
+.homeFeatureItem {
+    @apply flex;
+    align-items: center;
+    vertical-align: middle;
+    height: fit-content;
+
+    .itemImg {
+        @apply float-left clear-both;
+        min-width: 9.6rem;
+        max-width: 11.2rem;
+        margin-right: 2.4rem;
+        &.firstImg {
+            content:url("../../assets/10h30-11h-mobile.png");
+        }
+        &.secondImg {
+            content:url("../../assets/8h-mobile.png");
+        }
+        @screen md {
+            @apply float-left clear-both;
+            min-width: 9.6rem;
+            max-width: 11.2rem;
+            margin-right: 2.4rem;
+            &.firstImg {
+                content:url("../../assets/10h30-11h-desktop.png");
+            }
+            &.secondImg {
+                content:url("../../assets/8h-desktop.png");
+            }
+            &.thirdImg {
+                content:url("../../assets/green-desktop.png");
+            }
+        }
+    }
+
+    .itemText {
+        display: flex;
+        font-size: 1.6rem;
+        line-height: 2.4rem;
+        width: 28rem;
+        height: 9.6rem;
+        color: #000;
+        margin-right: 2.4rem;
+        align-items: center;
+        @screen md {
+            display: flex;
+            width: 28rem;
+            height: 9.6rem;
+            color: #000;
+            margin-right: 2.4rem;
+            align-items: center;
+        }
+    }
+
+}

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

@@ -1,18 +1,20 @@
 import React from 'react'
-import s from './HomeFeature.module.scss'
-import Image from 'next/image'
+import classNames from 'classnames'
+import s from './HomeFeatureItem.module.scss'
+
 
 interface HomeFeatureItemProps {
-    image?: any;
-    children: string;
+    image: string;
+    children: any;
 }
 
 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" />  */}
+            <img className={classNames(s.itemImg, {
+            [s[image]]: image,
+          })} alt="home feature item img" /> 
             <div className={s.itemText}>{children}</div>
         </div>
     )

src/components/modules/home/HomeFeature/components/index.ts

@@ -0,0 +1 @@
+export { default as HomeFuture } from './HomeFeature/HomeFeature';