diff --git a/pages/index.tsx b/pages/index.tsx
index 6d6f1a6e9..1d3072ef7 100644
--- a/pages/index.tsx
+++ b/pages/index.tsx
@@ -1,14 +1,14 @@
import { Layout } from 'src/components/common'
-import { HomeBanner, HomeCollection, HomeCTA, HomeSubscribe, HomeVideo, HomeCategories } from 'src/components/modules/home';
-import HomeRecipe from 'src/components/modules/home/HomeRecipe/HomeRecipe';
+import { HomeBanner, HomeCollection, HomeCTA, HomeSubscribe, HomeVideo, HomeCategories, HomeFeature, HomeRecipe } from 'src/components/modules/home';
export default function Home() {
return (
<>
-
-
+
+
+
diff --git a/src/components/modules/home/HomeFeature/HomeFeature.module.scss b/src/components/modules/home/HomeFeature/HomeFeature.module.scss
index 451dc39c5..1753edf99 100644
--- a/src/components/modules/home/HomeFeature/HomeFeature.module.scss
+++ b/src/components/modules/home/HomeFeature/HomeFeature.module.scss
@@ -1,14 +1,16 @@
-@import '../../../../../../styles/utilities';
+@import "../../../../styles/utilities";
.homeFeature {
- @apply spacing-horizontal-left grid grid-cols-1;
- background-color: #FFFFFF;
+ @apply spacing-horizontal;
+ background-color: #ffffff;
height: fit-content;
- padding-top: 3.2rem;
- padding-bottom: 3.2rem;
-
+ margin: 3.2rem auto;
@screen md {
- @apply spacing-horizontal grid-cols-3;
- margin-bottom: 6.4rem;
+ @apply grid grid-cols-3;
+ grid-gap: 2.4rem;
+ margin: 6.4rem auto;
}
-}
\ No newline at end of file
+ @screen md {
+ grid-gap: 4rem;
+ }
+}
diff --git a/src/components/modules/home/HomeFeature/components/HomeFeatureItem/HomeFeatureItem.module.scss b/src/components/modules/home/HomeFeature/components/HomeFeatureItem/HomeFeatureItem.module.scss
index a31e5e4fe..d3dcb518b 100644
--- a/src/components/modules/home/HomeFeature/components/HomeFeatureItem/HomeFeatureItem.module.scss
+++ b/src/components/modules/home/HomeFeature/components/HomeFeatureItem/HomeFeatureItem.module.scss
@@ -1,18 +1,16 @@
-@import '../../../../../../styles/utilities';
+@import "../../../../../../styles/utilities";
.homeFeatureItem {
- @apply flex;
- align-items: center;
- vertical-align: middle;
- height: fit-content;
+ @apply flex items-center;
width: fit-content;
+ margin: auto;
@screen md {
- @apply block;
+ @apply flex flex-col items-center justify-between;
}
@screen lg {
- @apply flex;
+ @apply flex flex-row;
}
.itemImg {
@@ -21,39 +19,38 @@
align-items: center;
&.firstImg {
margin-top: 1rem;
- content:url("../../assets/10h30-11h-desktop.png");
+ content: url("../../assets/10h30-11h-desktop.png");
}
&.secondImg {
margin-top: 1rem;
- content:url("../../assets/8h-desktop.png");
+ content: url("../../assets/8h-desktop.png");
}
&.thirdImg {
margin-top: 1rem;
- content:url("../../assets/green-desktop.png");
+ content: url("../../assets/green-desktop.png");
}
-
+
@screen md {
- @apply flex justify-center items-center;
+ @apply flex flex-col justify-center items-center;
margin: auto;
+ margin-top: 0.8rem;
}
@screen lg {
@apply flex float-left clear-both;
margin-right: 2.4rem;
+ margin-top: 0;
}
}
.itemText {
- @apply inline-block;
max-width: 28rem;
min-width: 12rem;
- color: #000;
- margin-right: 2.4rem;
- align-items: center;
-
@screen md {
- @apply flex;
+ @apply text-center;
+ }
+ @screen lg {
+ @apply text-left;
}
}
-
-}
\ No newline at end of file
+}