FEATURE Introducing component

resources/css/pages/single-activites.css

@@ -0,0 +1,63 @@
+.page-single--activites {
+  .content-wrapper {
+    grid-template-columns: 3fr 1.3fr;
+
+    @media (max-width: 1024px) {
+      grid-template-columns: 1fr;
+      aside {
+        order: -1;
+      }
+    }
+  }
+  .sidebar-single-activites {
+    @apply p-6 border border-primary text-primary;
+
+    &__title-container {
+      @apply mb-8  border-b border-primary;
+
+      h2.sidebar-single-activites__title {
+        @apply relative flex items-center gap-3 w-fit pb-4 nunito capitalize font-bold text-xl tracking-normal;
+        &::before,
+        &::after {
+          content: ' ';
+          @apply block;
+        }
+        &::before {
+          @apply w-8 h-8;
+          background-image: url('../resources/img/icons/carhop-resume-green.svg');
+          background-size: contain;
+          background-repeat: no-repeat;
+          background-position: center;
+        }
+
+        &::after {
+          @apply w-full h-1 absolute left-0  border-b-2 border-primary bottom-0;
+          @apply mr-2;
+        }
+      }
+    }
+
+    h4 {
+      @apply nunito font-bold text-lg tracking-widest;
+    }
+
+    .cta {
+      @apply text-base px-3 pr-5  font-semibold;
+    }
+
+    &__informations {
+      @apply mt-4;
+
+      li + li {
+        @apply mt-4;
+      }
+    }
+    &__buttons {
+      @apply mt-6;
+      li {
+        @apply mt-0;
+      }
+      @apply flex gap-4;
+    }
+  }
+}