From 706927d6810428971ea3f1a22ac10756dd7e1b99 Mon Sep 17 00:00:00 2001
From: Antoine M <martinon.toinou@protonmail.com>
Date: Tue, 25 Nov 2025 15:13:08 +0100
Subject: [PATCH] STYLE add new CSS for member author card component with hover
 effects and profile picture placeholders

---
 .../css/components/member-author-card.css     | 74 +++++++++++++++++++
 1 file changed, 74 insertions(+)
 create mode 100644 resources/css/components/member-author-card.css

diff --git a/resources/css/components/member-author-card.css b/resources/css/components/member-author-card.css
new file mode 100644
index 0000000..70fb4cd
--- /dev/null
+++ b/resources/css/components/member-author-card.css
@@ -0,0 +1,74 @@
+.author-card {
+  @apply grid w-full border border-primary p-6 mb-12 items-center;
+  grid-template-columns: min-content 1fr;
+  gap: 1rem;
+
+  transition: all 0.3s ease-in-out;
+
+  &:hover {
+    @apply translate-y-[-4px];
+  }
+
+  &__profile-picture {
+    @apply w-32 h-32 object-cover p-2 border border-primary;
+
+    img {
+      @apply w-full h-full object-cover;
+      filter: grayscale(100%);
+    }
+    &-placeholder {
+      @apply bg-carhop-green-100 flex items-center justify-center;
+
+      &:before {
+        content: '';
+        @apply block w-6 h-6  filter-primary;
+        background-image: url('../resources/img/icons/icon-losange.svg');
+        background-size: contain;
+        background-repeat: no-repeat !important;
+        background-position: center;
+      }
+
+      &--1n:before {
+        background-image: url('../resources/img/icons/icon-losange.svg');
+      }
+      &--2n:before {
+        background-image: url('../resources/img/icons/icon-rectangle-rotated.svg');
+      }
+      &--3n:before {
+        background-image: url('../resources/img/icons/icon-circle.svg');
+      }
+      &--4n:before {
+        background-image: url('../resources/img/icons/icon-rectangle-vertical.svg');
+      }
+    }
+    &-placeholder {
+      @apply w-full h-full bg-carhop-green-100 relative;
+
+      /* &:after {
+        @apply content-[''] block w-6 h-6 bg-carhop-green-700 rounded-full absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2;
+      } */
+    }
+  }
+
+  &__infos {
+    @apply w-full flex flex-col gap-y-2;
+    .author-card__name {
+      @apply text-2xl uppercase font-medium  tracking-normal;
+    }
+
+    .author-card__articles-amount {
+      @apply text-primary font-normal  flex items-center gap-2;
+
+      &::before {
+        content: '';
+        @apply block w-6 h-6  bg-no-repeat bg-center;
+        background-image: url('../resources/img/icons/icon-activites.svg');
+        background-size: contain;
+      }
+    }
+  }
+
+  &__description {
+    @apply col-span-2;
+  }
+}