Catalogue: Refactor course card component and update styles

Author: AngelFQC

assets/css/scss/organisms/_cards.scss

@@ -1,8 +1,9 @@
 .p-card {
-  @apply rounded-lg bg-white drop-shadow-lg;
+  @apply rounded-lg bg-white border border-gray-30
+    hover:drop-shadow-lg;
 
   .p-card-body {
-    @apply h-full flex flex-col space-y-4 p-4  border-b border-r border-l border-b-support-1 border-r-support-1 border-l-support-1 rounded-b-lg rounded-r-lg rounded-l-lg;
+    @apply h-full flex flex-col space-y-4 p-4 rounded-b-lg;
   }
 
   .p-card-header {
@@ -20,12 +21,15 @@
   }
 
   .p-card-content {
+    @apply space-y-2;
+
     &:empty {
       @apply hidden;
     }
   }
 
   .p-card-footer {
+    @apply rounded-b-lg;
   }
 
   .p-menu {

assets/css/scss/organisms/_course_card.scss

@@ -1,13 +1,16 @@
 @layer components {
   .course-card {
-    @apply bg-gray-15;
 
     &__header {
-      @apply relative aspect-video w-full overflow-hidden rounded-t-2xl bg-gray-25;
+      @apply relative aspect-video w-full overflow-hidden rounded-t-lg bg-gray-25 ;
+    }
+
+    .p-card-header {
+      @apply relative;
     }
 
     &__category-list {
-      @apply absolute top-2 left-2 flex flex-wrap gap-1 z-30;
+      @apply absolute top-2 left-2 flex flex-wrap gap-1 z-10;
     }
 
     &__title {
@@ -23,5 +26,9 @@
         }
       }
     }
+
+    &__language {
+      @apply absolute bottom-2 right-2 z-10;
+    }
   }
-}
+}