From 170eb0f582751451167bb6a24b7975c28c327f8e Mon Sep 17 00:00:00 2001 From: lytrankieio123 Date: Fri, 27 Aug 2021 11:10:24 +0700 Subject: [PATCH] :art: styles: home categories bg :%s --- .../HomeCategories/HomeCategories.module.scss | 37 ++++++++++++++++++- .../home/HomeCategories/HomeCategories.tsx | 26 ++++++------- .../home/HomeCategories/img/bg_bottom.svg | 9 +++++ .../home/HomeCategories/img/bg_top.svg | 9 +++++ 4 files changed, 66 insertions(+), 15 deletions(-) create mode 100644 src/components/modules/home/HomeCategories/img/bg_bottom.svg create mode 100644 src/components/modules/home/HomeCategories/img/bg_top.svg diff --git a/src/components/modules/home/HomeCategories/HomeCategories.module.scss b/src/components/modules/home/HomeCategories/HomeCategories.module.scss index b1f5a6ee9..167646c9d 100644 --- a/src/components/modules/home/HomeCategories/HomeCategories.module.scss +++ b/src/components/modules/home/HomeCategories/HomeCategories.module.scss @@ -1,8 +1,41 @@ @import "../../../../styles/_utilities"; .homeCategoriesWrapper { - @apply flex flex-col items-center justify-center spacing-horizontal; + @apply flex flex-col items-center justify-center; + margin-bottom: 3rem; + + .inner { + @apply relative spacing-horizontal; + + padding-top: 1.6rem; + padding-bottom: 1.6rem; + z-index: 10; + @screen md { + @apply bg-gray; + } + } @screen md { - background-color: var(--background); + @apply relative; + margin-bottom: 5.6rem; + + &::before, + &::after { + @apply absolute bg-primary w-full; + content: ""; + height: 6rem; + z-index: 0; + background-repeat: no-repeat; + background-size: 115%; + } + &::before { + top: -4rem; + background-image: url("./img/bg_top.svg"); + background-position: top center; + } + &::after { + bottom: -4rem; + background-image: url("./img/bg_bottom.svg"); + background-position: bottom center; + } } .homeCategoryList { @apply flex justify-start items-center flex-wrap; diff --git a/src/components/modules/home/HomeCategories/HomeCategories.tsx b/src/components/modules/home/HomeCategories/HomeCategories.tsx index c1c965f29..147345b5f 100644 --- a/src/components/modules/home/HomeCategories/HomeCategories.tsx +++ b/src/components/modules/home/HomeCategories/HomeCategories.tsx @@ -46,20 +46,20 @@ const categories = [ const HomeCategories = () => { return (
-
- -
+
+ CATEGORIES -
- {categories?.map(item => ( -
- -
- ))} +
+ {categories?.map(item => ( +
+ +
+ ))} +
) diff --git a/src/components/modules/home/HomeCategories/img/bg_bottom.svg b/src/components/modules/home/HomeCategories/img/bg_bottom.svg new file mode 100644 index 000000000..ad608bf35 --- /dev/null +++ b/src/components/modules/home/HomeCategories/img/bg_bottom.svg @@ -0,0 +1,9 @@ + + + + + + + + + diff --git a/src/components/modules/home/HomeCategories/img/bg_top.svg b/src/components/modules/home/HomeCategories/img/bg_top.svg new file mode 100644 index 000000000..2046a3cb2 --- /dev/null +++ b/src/components/modules/home/HomeCategories/img/bg_top.svg @@ -0,0 +1,9 @@ + + + + + + + + +