Handling a Slider card declination for featured news

resources/css/app.css

@@ -50,7 +50,8 @@
 @import './components/content-wrapper.css';
 @import './components/content-area.css';
 @import './components/authors-list.css';
-
+@import './components/collective-access-button.css';
+@import './components/slider-card.css';
 @import './components/buttons/load-more.css';
 
 /* ########### EDITOR CONTENT ############ */

resources/css/components/slider-card.css

@@ -0,0 +1,86 @@
+.slider-card {
+  @apply p-6 relative  !flex flex-col pt-16;
+
+  svg {
+    @apply absolute top-0 left-0 w-full h-full overflow-visible;
+    z-index: -1;
+    path {
+      stroke-width: 0;
+      vector-effect: non-scaling-stroke;
+    }
+  }
+
+  &:hover {
+    svg {
+      path {
+        stroke-width: 6px;
+      }
+    }
+    &:after {
+      opacity: 1;
+    }
+    .slider-card__link-button {
+      svg {
+        @apply translate-x-2;
+      }
+    }
+  }
+  &__link-button {
+    @apply block mt-8;
+    width: 100px;
+    height: 100px;
+    svg {
+      transition: transform 0.3s ease-in-out;
+
+      path,
+      circle {
+        @apply stroke-primary;
+      }
+    }
+  }
+
+
+  .content-meta {
+    @apply text-primary;
+  }
+  &__title {
+    @apply text-2xl font-medium uppercase pb-4 ;
+
+  }
+  &__link{
+    /* @apply mb-12;
+
+    &:has(+ .slider-card__date) {
+      @apply mb-0;
+    } */
+  }
+
+  *:has(+ .slider-card__cover) {
+    @apply mb-16;
+  }
+
+
+  &__tags {
+    @apply flex flex-wrap gap-4 pt-4;
+  }
+  &__cover {
+    @apply w-40 h-40  absolute  border-primary border bottom-12 right-12 hidden lg:block;
+    transform: rotate(-3deg);
+
+    img {
+      @apply w-full h-full object-cover p-3;
+    }
+  }
+  .cta--go {
+    @apply text-primary mt-auto;
+  }
+
+  &:has(.slider-card__link:hover) {
+
+    .cta--go {
+      img {
+        @apply translate-x-2;
+      }
+    }
+  }
+}

template-parts/components/cards/slider-card.php

@@ -0,0 +1,60 @@
+<?php
+$postID = $args['ID'];
+$isSwiperSlide = $args['isSwiperSlide'] ?? false;
+$showCover = $args['showCover'] ?? false;
+$cover = get_the_post_thumbnail_url($postID);
+$current_post_type = get_post_type($postID);
+$showTags= $args['showTags'] ?? true;
+?>
+
+
+<div class="slider-card <?php echo $isSwiperSlide ? 'swiper-slide' : ''; ?>">
+
+	<?php get_template_part('template-parts/components/content-meta', null, array(
+			'current_post_type' => $current_post_type,
+			'current_post_id' => $postID
+		)); ?>
+
+	<a href="<?php echo get_the_permalink($postID); ?>" class="slider-card__link">
+
+		<h4 class="slider-card__title"><?php echo get_the_title($postID); ?></h4>
+	</a>
+
+	<?php if ($showTags) : ?>
+	<ul class="slider-card__tags">
+		<?php
+		$terms = get_the_terms($postID, 'etiquettes');
+		if ($terms): ?>
+			<?php foreach ($terms as $term): ?>
+
+				<li class="slider-card__tag slider-tag">
+					<a href="<?php echo add_query_arg('etiquette', $term->slug, get_post_type_archive_link('articles')); ?>">
+						<?php echo esc_html($term->name); ?>
+					</a>
+				</li>
+			<?php endforeach; ?>
+		<?php endif; ?>
+
+		</ul>
+	<?php endif; ?>
+
+	<time datetime="<?php echo get_the_date('c', $postID); ?>" class="slider-card__date"><?php echo get_the_date('d F Y', $postID); ?></time>
+
+	<?php if ($showCover && isset($cover) && $cover) : ?>
+		<div class="slider-card__cover">
+			<img src="<?php echo $cover; ?>" alt="<?php echo get_the_title($postID); ?>">
+		</div>
+	<?php endif; ?>
+
+	<?php get_template_part('template-parts/components/cta--go', null, array(
+		'url' => get_the_permalink($postID),
+		'label' => 'Lire la revue',
+		'target' => '_self',
+	)); ?>
+	<?php
+	$svg_path = get_template_directory() . '/resources/img/elements/fond-biseau.svg';
+	if (file_exists($svg_path)) {
+		echo file_get_contents($svg_path);
+	}
+	?>
+</div>