refactoring heading box

template-components/heading-box--job.php

@@ -0,0 +1,35 @@
+<?php
+
+$title = $args['title'];
+$description = $args['description'];
+$subtitle = $args['subtitle'] ?? null;
+$thumbnail = $args['thumbnail'] ?? null;
+$published = $args['published'] ?? null;
+$subtitle = $args['subtitle'] ?? null;
+
+
+?>
+
+<div class="heading-box heading-box--news ">
+
+	<div class="heading-box--news__content">
+		<?php if ($subtitle) : ?>
+			<h2 class="heading-box__subtitle heading-box--news__type"><?php echo $news_type[0]->name ?></h2>
+		<?php endif; ?>
+		<h1 class="heading-box__title heading-box--news__title"> <?php echo $title ?></h1>
+
+		<?php
+
+		get_template_part("template-components/post-infos-capsule", null, array(
+			"postID" => get_the_ID(),
+			"published" => $published
+		));
+
+		?>
+
+
+	</div>
+	<?php if ($thumbnail) echo $thumbnail ?>
+
+	<!-- <img class="news-heading-box__thumbnail" src="<?php echo $thumbnail ?>" alt=""> -->
+</div>

template-components/heading-box--news.css

@@ -0,0 +1,36 @@
+.heading-box--news {
+  @apply /* container */
+  /* bg-primary  */
+  /* text-white */
+   /* mx-auto */
+   /* py-12 */
+   /* px-8 */
+   /* rounded-3xl */
+   mt-8
+   flex
+   relative
+   flex-nowrap
+   justify-between;
+  .post-infos-capsule {
+    @apply mt-8;
+  }
+
+  &__page-icon {
+    @apply mx-auto w-28 absolute top-0 left-1/2;
+    transform: translate(-50%, -50%);
+  }
+
+  &__content {
+    flex-shrink: 1;
+    flex-grow: 2;
+  }
+
+  &__thumbnail {
+    @apply w-80 h-56 object-cover 
+    rounded-3xl 
+    hidden 
+    lg:block;
+
+    flex-shrink: 2;
+  }
+}

template-components/heading-box--news.php

@@ -0,0 +1,35 @@
+<?php
+
+$title = $args['title'];
+$description = $args['description'];
+$news_type = $args['news_type'] ?? null;
+$thumbnail = $args['thumbnail'] ?? null;
+$published = $args['published'] ?? null;
+$subtitle = $args['subtitle'] ?? null;
+
+
+?>
+
+<div class="heading-box heading-box--news ">
+
+	<div class="heading-box--news__content">
+		<?php if ($news_type) : ?>
+			<h2 class="heading-box__subtitle heading-box--news__type"><?php echo $news_type[0]->name ?></h2>
+		<?php endif; ?>
+		<h1 class="heading-box__title heading-box--news__title"> <?php echo $title ?></h1>
+
+		<?php
+
+		get_template_part("template-components/post-infos-capsule", null, array(
+			"postID" => get_the_ID(),
+			"published" => $published
+		));
+
+		?>
+
+
+	</div>
+	<?php if ($thumbnail) echo $thumbnail ?>
+
+	<!-- <img class="news-heading-box__thumbnail" src="<?php echo $thumbnail ?>" alt=""> -->
+</div>

template-components/heading-box.css

@@ -2,23 +2,24 @@
   @apply container
   bg-primary 
   text-white
-   text-center
+  mx-auto
-   mx-auto
+  py-12
-   py-12
+  rounded-2xl
-   rounded-2xl
+  pt-20
-   pt-20
+  px-8
-   mt-8
+  mt-8
-   relative;
+  relative;
-
-  /* max-w-screen-2xl 
-  px-8 mx-auto
-
-  
-  relative 
-  pt-20; */
   &__title {
+    @apply font-bold text-4xl   pt-4 max-w-3xl;
+    line-height: 1.2;
+  }
+  &__subtitle {
     @apply uppercase font-medium text-xl tracking-widest;
   }
+}
+
+.heading-box--classic {
+  @apply text-center;
   &__description {
     @apply font-bold text-4xl max-w-screen-md mx-auto pt-4 max-w-md mx-auto;
     line-height: 1.2;

template-components/heading-box.php

@@ -6,10 +6,10 @@ $pageIcon = $args['pageIcon'] ?? null;
 
 ?>
 
-<div class="heading-box ">
+<div class="heading-box heading-box--classic ">
 	<?php if ($pageIcon) : ?>
-		<img class="heading-box__page-icon" src="<?php echo $pageIcon['url']  ?>" alt="" />
+		<img class="heading-box--classic__page-icon" src="<?php echo $pageIcon['url']  ?>" alt="" />
 	<?php endif; ?>
-	<h1 class="heading-box__title"><?php echo $title  ?></h1>
+	<h1 class="heading-box__subtitle heading-box--classic__subtitle"><?php echo $title  ?></h1>
-	<p class="heading-box__description"> <?php echo $description ?></p>
+	<p class="heading-box__description heading-box--classic__description"> <?php echo $description ?></p>
 </div>