🎨 styles: home categories bg

:%s

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;

src/components/modules/home/HomeCategories/HomeCategories.tsx

@@ -46,20 +46,20 @@ const categories = [
 const HomeCategories = () => {
     return (
         <div className={classNames(s.homeCategoriesWrapper)}>
-            <div className={classNames(s.homeCategoriesHeading)}>
+            <div className={s.inner}>
-                <HeadingCommon align='center' children="CATEGORIES"></HeadingCommon>
+                <HeadingCommon align='center'>CATEGORIES</HeadingCommon>
-            </div>
 
-            <div className={classNames(s.homeCategoryList)}>
+                <div className={classNames(s.homeCategoryList)}>
-                {categories?.map(item => (
+                    {categories?.map(item => (
-                    <div key={item.name} className={classNames(s.homeCategoriesItem)}>
+                        <div key={item.name} className={classNames(s.homeCategoriesItem)}>
-                        <CategoryItem
+                            <CategoryItem
-                            name={item.name}
+                                name={item.name}
-                            image={item.image}
+                                image={item.image}
-                            link={item.link}
+                                link={item.link}
-                        />
+                            />
-                    </div>
+                        </div>
-                ))}
+                    ))}
+                </div>
             </div>
         </div>
     )