FEATURE Introducing the interview component

resources/css/app.css

@@ -56,3 +56,4 @@
 @import './blocks/wp-block-quote.css';
 @import './blocks/statistics-datas.css';
 @import './blocks/recommandations.css';
+@import './blocks/interview.css';

resources/css/blocks/interview.css

@@ -0,0 +1,31 @@
+.wp-block-dynamiques-blocks-interview-question {
+  @apply text-xl flex gap-3;
+
+  &:before {
+    @apply content-[''] block h-8 w-8   mb-4 shrink-0;
+    background-image: url('../resources/img/icons/cite-icon.svg');
+  }
+}
+
+.wp-block-dynamiques-blocks-interview-answer {
+  @apply mb-12 relative block;
+  .interviewed-person-name {
+    @apply float-left  pr-2;
+    padding-top: 0.45rem;
+
+    @apply text-sm font-bold text-primary tracking-wide;
+    line-height: 1;
+  }
+  clear: both;
+}
+
+.wp-block-dynamiques-blocks-interview {
+  @apply my-6 mb-8;
+
+  .infos-interview {
+    @apply border-t border-neutral-200 pt-6 text-sm text-center;
+    &__label {
+      @apply uppercase text-sm font-bold mr-3 text-slate-800 tracking-wide  mb-0;
+    }
+  }
+}

resources/css/editor-style.css

@@ -26,3 +26,10 @@ body {
 .acf-block-fields {
   @apply max-w-screen-md mx-auto;
 }
+html :where(.editor-styles-wrapper) {
+  @apply text-carhop-gray;
+  div,
+  p {
+    font-family: 'Nunito Sans', sans-serif;
+  }
+}