back-end done

assets/sass/_globalStyles.scss

@@ -752,3 +752,41 @@ section {
     }
   }
 }
+
+
+.filters {
+  margin: 0 auto 50px;
+
+  ul {
+    display: flex;
+    justify-content: center;
+    flex-wrap: wrap;
+
+    li {
+      margin: 10px 20px;
+      color: rgba(#000, 0.5);
+      cursor: pointer;
+      @extend %userSelect;
+
+      p {
+        text-align: center;
+
+        &::after {
+          content: '';
+          display: block;
+          height: 2px;
+          width: 0;
+          background: $red;
+          margin: 0 auto;
+          @include transition(0.1s);
+        }
+
+        &.active {
+          &::after {
+            width: 100%;
+          }
+        }
+      }
+    }
+  }
+}

assets/sass/_pages.scss

@@ -32,7 +32,7 @@
 
     .hero {
       .bg {
-        background-image: url("../img/home/hp-s1-i1.jpg");
+        //background-image: url("../img/home/hp-s1-i1.jpg");
       }
 
       .txt--home {
@@ -551,21 +551,6 @@
   .s2 {
     text-align: center;
 
-    .filters {
-      margin: 0 auto;
-      max-width: 700px;
-      background: red;
-
-      ul {
-        display: flex;
-        flex-direction: row;
-
-        li {
-          display: block;
-        }
-      }
-    }
-
     .product {
       display: block;
       background: #fff;
@@ -587,6 +572,15 @@
         margin-top: 10px;
       }
     }
+
+    .no-product {
+      width: 100%;
+      background: $red;
+      color: #fff;
+      padding: 20px;
+      margin-bottom: 50px;
+      text-align: center;
+    }
   }
 
   .s3 {
@@ -710,6 +704,7 @@
         img {
           width: 60%;
           margin: 0 auto;
+          cursor: pointer;
         }
       }
     }
@@ -820,6 +815,10 @@
           h4 {
             margin-bottom: 20px;
           }
+
+          .description {
+            margin-bottom: 20px;
+          }
         }
       }
 
@@ -907,22 +906,12 @@
     text-align: center;
     padding-bottom: 0;
 
-    ul {
-      display: flex;
-      justify-content: center;
-      flex-wrap: wrap;
-
-      li {
-        margin: 10px 20px;
-        color: rgba(#000, 0.5);
-        cursor: pointer;
-        @extend %userSelect;
-      }
+    .filters {
+      margin-bottom: 0;
     }
   }
 
   .s3 {
-
     .post {
       margin-top: 50px;
 
@@ -988,6 +977,15 @@
         }
       }
     }
+
+    .no-post {
+      width: 100%;
+      background: $red;
+      color: #fff;
+      padding: 20px;
+      margin-top: 70px;
+      text-align: center;
+    }
   }
 }