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 (