adding picture banner block presentation

demo-components.php

@@ -20,9 +20,10 @@
 		<p>Ces blocs sont accessibles depuis l'éditeur et peuvent être insérés de manières flexibles dans les pages de contenu</p>
 	</div>
 	<article class="component">
-
 		<div class="component-explanation">
 			<h2 class="component-explanation__title">Content page header</h2>
+			<h3 class="component-explanation__technical-title">content-page-header</h3>
+
 			<p class="component-explanation__description">Un header qui s'insère en haut de page</p>
 			<div class="component-explanation__options">
 				<h3>Options & Variantes</h3>
@@ -49,6 +50,31 @@
 		</div>
 
 	</article>
+	<article class="component">
+		<div class="component-explanation">
+			<h2 class="component-explanation__title">Image Bannière</h2>
+			<h3 class="component-explanation__technical-title">picture-banner</h3>
+			<p class="component-explanation__description">Pour insérer une image bannière fixe ou intégrale</p>
+			<div class="component-explanation__options">
+				<h3>Options & Variantes</h3>
+				<ul>
+					<li class="component-explanation__option">
+						<h4 class="component-explanation__option-title">Hauter</h4>
+						<p class="component-explanation__option-description">
+							Si fixe, la bannière est verticalement restreinte et il est alors possible de régler sa position verticale</p>
+
+					</li>
+				</ul>
+			</div>
+		</div>
+		<div class="wp-block-homegrade-content-blocks-picture-banner homegrade-content-blocks-picture-banner  fixed-height">
+			<img src="<?php echo get_template_directory_uri() . "/resources/img/demo-img/systeme-de-chauffage-amelioration.jpg" ?>">
+		</div>
+		<div class="wp-block-homegrade-content-blocks-picture-banner homegrade-content-blocks-picture-banner">
+			<img src="<?php echo get_template_directory_uri() . "/resources/img/demo-img/equipe-homegrade-e1698755824363.jpg" ?>">
+		</div>
+
+	</article>
 
 
 </section>

resources/css/pages/demo-components.css

@@ -55,7 +55,10 @@
   .component-explanation {
     @apply py-6 text-center pb-16;
     &__title {
-      @apply text-3xl font-bold  pb-2 text-secondary;
+      @apply text-3xl font-bold  pb-0 text-secondary;
+    }
+    &__technical-title {
+      @apply font-semibold text-lg text-neutral-500 my-0 mb-2;
     }
     &__description {
       @apply text-neutral-500 text-base font-medium pt-0 max-w-lg mx-auto;