From 8133ebe0f7cb8650a6113213666d287a0733bb32 Mon Sep 17 00:00:00 2001
From: Antoine M <antoine.martinon@deligraph.com>
Date: Tue, 9 Jul 2024 14:53:52 +0200
Subject: [PATCH] handling parcours renovateur blocks styles

---
 resources/css/app.css                        |  3 ++
 resources/css/blocks/parcours-chapter.css    | 39 ++++++++++++++++++++
 resources/css/blocks/parcours-renovateur.css |  9 +++++
 resources/css/blocks/parcours-step.css       | 26 +++++++++++++
 4 files changed, 77 insertions(+)
 create mode 100644 resources/css/blocks/parcours-chapter.css
 create mode 100644 resources/css/blocks/parcours-renovateur.css
 create mode 100644 resources/css/blocks/parcours-step.css

diff --git a/resources/css/app.css b/resources/css/app.css
index 757f99e..7f88637 100644
--- a/resources/css/app.css
+++ b/resources/css/app.css
@@ -111,6 +111,9 @@
 @import './blocks/client-satisfaction.css';
 @import './blocks/post-card.css';
 @import './blocks/shortcuts.css';
+@import './blocks/parcours-step.css';
+@import './blocks/parcours-chapter.css';
+@import './blocks/parcours-renovateur.css';
 
 /* Home */
 @import './blocks/home-header.css';
diff --git a/resources/css/blocks/parcours-chapter.css b/resources/css/blocks/parcours-chapter.css
new file mode 100644
index 0000000..ac92244
--- /dev/null
+++ b/resources/css/blocks/parcours-chapter.css
@@ -0,0 +1,39 @@
+.parcours-chapter {
+  @apply p-4 pb-12 grid;
+  grid-template-columns: 42% 16% 42%;
+  &:nth-child(even) {
+    .parcours-chapter__cover {
+      @apply order-3;
+    }
+
+    .parcours-chapter__content {
+      order: -1;
+    }
+  }
+  &__cover {
+    /* @apply w-full h-full bg-green-300; */
+    justify-self: center;
+    img {
+      @apply w-full h-auto;
+      max-width: 380px;
+      max-height: 330px;
+    }
+  }
+  &__icon {
+    @apply h-24 w-24  shadowed-lg p-5 bg-white rounded-3xl;
+    justify-self: center;
+  }
+  &__content {
+    .section_titling {
+      @apply !pb-3;
+      &__title {
+        @apply text-black !text-2xl font-bold mt-0;
+        text-transform: unset;
+        letter-spacing: unset;
+      }
+      &__subtitle {
+        @apply !text-base font-normal;
+      }
+    }
+  }
+}
diff --git a/resources/css/blocks/parcours-renovateur.css b/resources/css/blocks/parcours-renovateur.css
new file mode 100644
index 0000000..61d695f
--- /dev/null
+++ b/resources/css/blocks/parcours-renovateur.css
@@ -0,0 +1,9 @@
+.parcours-renovateur {
+  @apply relative;
+  &:before {
+    @apply block absolute w-10 h-full rounded-full bg-secondary opacity-10;
+    z-index: -1;
+    content: '';
+    left: 49%;
+  }
+}
diff --git a/resources/css/blocks/parcours-step.css b/resources/css/blocks/parcours-step.css
new file mode 100644
index 0000000..22b58a8
--- /dev/null
+++ b/resources/css/blocks/parcours-step.css
@@ -0,0 +1,26 @@
+.parcours-step-card {
+  @apply !p-6 rounded-2xl flex gap-8 items-center shadowed my-6;
+  text-decoration: none !important;
+  transition: transform 0.3s ease;
+
+  &:first-of-type {
+    @apply mt-0;
+  }
+  &:hover {
+    @apply translate-x-3;
+  }
+  &__title {
+    @apply py-0 !my-0 text-black font-bold !text-lg no-underline;
+    line-height: 1.2 !important;
+  }
+  &__icon {
+    @apply h-16 w-16;
+  }
+
+  &:after {
+    @apply block h-4 w-4  shrink-0 bg-contain bg-no-repeat bg-center ml-auto;
+    @apply filter-secondary;
+    content: '';
+    background-image: url('../resources/img/graphic-assets/chevron_right.svg');
+  }
+}