Merge branch 'common' of github.com:KieIO/grocery-vercel-commerce into m2-datnguyen

src/components/modules/home/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;
+    padding-top: 3.2rem;
+    padding-bottom: 3.2rem;
+
+    @screen md {
+        @apply spacing-horizontal grid-cols-3;
+        margin-bottom: 6.4rem;
+    }
+}

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

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

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

@@ -0,0 +1,59 @@
+@import '../../../../../../styles/utilities';
+
+.homeFeatureItem {
+    @apply flex;
+    align-items: center;
+    vertical-align: middle;
+    height: fit-content;
+    width: fit-content;
+
+    @screen md {
+        @apply block;
+    }
+
+    @screen lg {
+        @apply flex;
+    }
+
+    .itemImg {
+        @apply flex float-left clear-both;
+        margin-right: 2.4rem;
+        align-items: center;
+        &.firstImg {
+            margin-top: 1rem;
+            content:url("../../assets/10h30-11h-desktop.png");
+        }
+        &.secondImg {
+            margin-top: 1rem;
+            content:url("../../assets/8h-desktop.png");
+        }
+        &.thirdImg {
+            margin-top: 1rem;
+            content:url("../../assets/green-desktop.png");
+        }
+        
+        @screen md {
+            @apply flex justify-center items-center;
+            margin: auto;
+        }
+
+        @screen lg {
+            @apply flex float-left clear-both;
+            margin-right: 2.4rem;
+        }
+    }
+
+    .itemText {
+        @apply inline-block;
+        max-width: 28rem;
+        min-width: 12rem;
+        color: #000;
+        margin-right: 2.4rem;
+        align-items: center;
+
+        @screen md {
+            @apply flex;
+        }
+    }
+
+}

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

@@ -0,0 +1,25 @@
+import React from 'react'
+import classNames from 'classnames'
+import s from './HomeFeatureItem.module.scss'
+
+
+interface HomeFeatureItemProps {
+    image: string;
+    children: any;
+}
+
+const HomeFeatureItem = ({ image, children }: HomeFeatureItemProps) => {
+    
+    return (
+        <div className={s.homeFeatureItem}>
+            <img className={classNames(s.itemImg, {
+                [s[image]]: image,
+            })}
+            alt="home feature item img" /> 
+            <div className={s.itemText}>{children}</div>
+        </div> 
+    )
+
+}
+
+export default HomeFeatureItem

src/components/modules/home/index.ts

@@ -6,3 +6,5 @@ export { default as HomeSubscribe } from './HomeSubscribe/HomeSubscribe'
 export { default as HomeVideo } from './HomeVideo/HomeVideo'
 export { default as HomeCollection } from './HomeCollection/HomeCollection'
 export { default as HomeRecipe } from './HomeRecipe/HomeRecipe'
+export { default as HomeFeature } from './HomeFeature/HomeFeature'
+export { default as HomeFeatureItem } from './HomeFeature/components/HomeFeatureItem/HomeFeatureItem'