FEATURE introducing statistques collections

resources/css/app.css

@@ -124,6 +124,7 @@
 @import './blocks/dbmob-archives.css';
 @import './blocks/random-collection-image.css';
 @import './blocks/variants.css';
+@import './blocks/statistiques-collections.css';
 
 /* ########### COMPOSITIONS ############ */
 @import './compositions/nos-collections.css';

resources/css/blocks/statistiques-collections.css

@@ -0,0 +1,59 @@
+.statistiques-collections {
+  .amount-container {
+    @apply border border-primary h-40 w-full relative flex items-center justify-start gap-12;
+
+    .percentage-label {
+      @apply !mb-0 text-xl font-semibold;
+    }
+  }
+
+  .amount-container,
+  .amount-container-all {
+    min-height: 10rem;
+  }
+
+  .amount-container-all {
+    @apply bg-primary text-white p-8;
+    p {
+      @apply text-white !mb-0;
+    }
+    p.total-documents-count {
+      @apply text-4xl fjalla uppercase pb-2;
+      font-weight: 200 !important ;
+    }
+  }
+
+  .percentage-bar {
+    @apply bg-primary text-white flex items-center justify-center h-full;
+    width: 0;
+    transition: width 1.3s ease-in-out;
+  }
+
+  &__stats-items {
+    @apply flex flex-col gap-8 pt-8;
+
+    .heading {
+      @apply flex items-center justify-between gap-2 pb-2;
+    }
+
+    li {
+      list-style: none !important;
+    }
+  }
+
+  &__stat-item {
+    .total-documents-count {
+      @apply !mb-0;
+    }
+    &[data-active='false'] {
+      display: none;
+    }
+    &[data-active='true'] {
+      display: block;
+    }
+
+    .stat-item-description {
+      @apply pt-8;
+    }
+  }
+}