diff --git a/template-components/heading-box.css b/template-components/heading-box.css
new file mode 100644
index 0000000..2978cdd
--- /dev/null
+++ b/template-components/heading-box.css
@@ -0,0 +1,30 @@
+.heading-box {
+  @apply container
+  bg-primary 
+  text-white
+   text-center
+   mx-auto
+   py-12
+   rounded-2xl
+   pt-20
+   mt-8
+   relative;
+
+  /* max-w-screen-2xl 
+  px-8 mx-auto
+
+  
+  relative 
+  pt-20; */
+  &__title {
+    @apply uppercase font-medium text-xl tracking-widest;
+  }
+  &__description {
+    @apply font-bold text-4xl max-w-screen-md mx-auto pt-4 max-w-md mx-auto;
+    line-height: 1.2;
+  }
+  &__page-icon {
+    @apply mx-auto w-28 absolute top-0 left-1/2;
+    transform: translate(-50%, -50%);
+  }
+}
diff --git a/template-components/heading-box.php b/template-components/heading-box.php
new file mode 100644
index 0000000..bfdf1f3
--- /dev/null
+++ b/template-components/heading-box.php
@@ -0,0 +1,15 @@
+<?php
+
+$title = $args['title'];
+$description = $args['description'];
+$pageIcon = $args['pageIcon'] ?? null;
+
+?>
+
+<div class="heading-box ">
+	<?php if ($pageIcon) : ?>
+		<img class="heading-box__page-icon" src="<?php echo $pageIcon['url']  ?>" alt="" />
+	<?php endif; ?>
+	<h1 class="heading-box__title"><?php echo $title  ?></h1>
+	<p class="heading-box__description"> <?php echo $description ?></p>
+</div>
\ No newline at end of file
diff --git a/template-components/news-heading-box.css b/template-components/news-heading-box.css
new file mode 100644
index 0000000..1905247
--- /dev/null
+++ b/template-components/news-heading-box.css
@@ -0,0 +1,39 @@
+.news-heading-box {
+  @apply container
+  bg-primary 
+  text-white
+   mx-auto
+   py-12
+   px-8
+   rounded-3xl
+   mt-8
+   relative
+   flex
+   flex-nowrap
+   justify-between;
+  .post-infos-capsule {
+    @apply mt-4;
+  }
+  &__type {
+    @apply uppercase font-medium text-xl tracking-widest;
+  }
+  &__title {
+    @apply font-bold text-4xl   pt-4 max-w-xl;
+    line-height: 1.2;
+  }
+  &__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;
+
+    flex-shrink: 2;
+  }
+}
diff --git a/template-components/news-heading-box.php b/template-components/news-heading-box.php
new file mode 100644
index 0000000..71f9df4
--- /dev/null
+++ b/template-components/news-heading-box.php
@@ -0,0 +1,32 @@
+<?php
+
+$title = $args['title'];
+$description = $args['description'];
+$news_type = $args['news_type'] ?? null;
+$thumbnail = $args['thumbnail'] ?? null;
+$published = $args['published'] ?? null;
+?>
+
+<div class="news-heading-box ">
+
+	<div class="news-heading-box__content">
+		<?php if ($news_type) : ?>
+			<h2 class="news-heading-box__type"><?php echo $news_type[0]->name ?></h2>
+		<?php endif; ?>
+		<h1 class="news-heading-box__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>
\ No newline at end of file
diff --git a/template-components/post-infos-capsule.php b/template-components/post-infos-capsule.php
new file mode 100644
index 0000000..e93ec52
--- /dev/null
+++ b/template-components/post-infos-capsule.php
@@ -0,0 +1,48 @@
+<?php
+$postID = $args['postID'];
+$published = $args['published'] ?? null;
+$modified = $args['modified'] ?? null;
+
+
+
+function build_share_urls($postID)
+{
+	$postUrl = get_permalink($postID);
+	$postTitle = get_the_title($postID);
+	$facebookUrl = 'https://www.facebook.com/sharer.php?u=' . $postUrl;
+	$twitterUrl = 'https://www.facebook.com/sharer.php?u=' . $postUrl;
+	$linkedInUrl = 'https://www.linkedin.com/feed/?shareActive=true&text=' . $postTitle . ' ' . $postUrl;
+
+	return array(
+		'facebook' => $facebookUrl,
+		'twitter-x' => $twitterUrl,
+		'linkedin' => $linkedInUrl
+	);
+}
+
+$shareUrls = build_share_urls($postID);
+
+
+?>
+
+<div class="post-infos-capsule">
+	<div class="post-infos-capsule__share">
+		Partager sur
+		<?php foreach ($shareUrls as $key => $shareUrl) : ?>
+			<a class="share-button share-button--<?php echo  $key ?>" href='<?php echo  $shareUrl ?>' target="_blank" title="<?php echo __("Partager ce contenu sur", "homegrade-theme__texte-fonctionnel") . $key ?>">
+				<?php if ($key) : ?>
+					<!-- <img src="<?php echo get_template_directory_uri() . '/resources/img/graphic-assets/icone-social-' . $key . '.svg' ?>" /> -->
+				<?php endif; ?>
+			</a>
+		<?php endforeach; ?>
+	</div>
+	<?php if ($published) : ?>
+		<div class="post-infos-capsule__publication-date">
+
+			<time><?php echo __("Publié le ", "homegrade-theme__texte-fonctionnel") . $published ?></time>
+		</div>
+	<?php endif; ?>
+	<?php if ($modified) : ?>
+		<time class="post-infos-capsule__publication-date"><?php echo __("Publié le ", "homegrade-theme__texte-fonctionnel") . $modified ?></time>
+	<?php endif; ?>
+</div>
\ No newline at end of file