Refactor CSS styles and update HTML structure for improved layout and responsiveness

- Updated padding values for sections in custom CSS files to enhance spacing.
- Introduced new card styles with hover effects for better user interaction.
- Added new gradient card layout in the chill theme for a visually appealing design.
- Removed obsolete sector layout and replaced it with a more flexible gradient card layout.
- Enhanced feature list layout with improved pagination and sidebar integration.
- Created a new shortcode for gradient card sections to streamline feature presentation.

content/resources/manuals.md

@@ -1,29 +1,26 @@
 ---
 title: Manuels
-layout: "simple-card"
+description: Manuels d'utilisation de Chill
+card: "Il existe un manuel d'utilisation à l'usage des utilisateurs et un autre à l'usage des administrateurs.<br><br>
+- L'**utilisateur** est le travailleur social qui **utilise Chill dans son quotidien**.<br>
+- L'**administrateur** est un rôle spécifique, qui peut accéder à une interface d'administration de l'application, lui permettant de régler la **configuration de Chill**"
+bgColor: "activity-sector"
+layout: "gradient-card"
 ---
 
-<h5 class="content-subtitle bord-1 mb-2 mt-5">Manuels d'utilisation de Chill</h5>
-<div class="mb-4">
-Il existe un manuel d'utilisation à l'usage des utilisateurs et un autre à l'usage des administrateurs. 
 
-L'utilisateur est le travailleur social qui utilise Chill dans son quotidien.
+{{< gradient-card-section title="Téléchargement des manuels" description="Accédez aux manuels d'utilisation de Chill pour les administrateurs et les utilisateurs." >}}
+    <div class="flex flex-col gap-4 items-center">
+      <a href="https://gitea.champs-libres.be/Chill-project/manuals/releases/download/latest/Manuel%20administrateur.pdf" target="blank" class="btn btn-primary">
+        Télécharger le manuel administrateur
+      </a>
+      <a href="https://gitea.champs-libres.be/Chill-project/manuals/releases/download/latest/Manuel%20utilisateur.pdf" target="blank" class="btn btn-primary">
+        Télécharger le manuel utilisateur
+      </a>
+    </div>
+{{< /gradient-card-section >}}
 
-L'administrateur est un rôle spécifique, qui peut accèder à une interface d'administration de l'application, lui permettant de régler la configuration de Chill. 
-</div>
-
-<div class="flex flex-col gap-4 items-center">
-  <a href="https://gitea.champs-libres.be/Chill-project/manuals/releases/download/latest/Manuel%20administrateur.pdf" target="blank" class="col text-center px-5 py-3 rounded-lg bg-primary-400 text-white hover:bg-primary-700 font-medium transition duration-300">
-    Télecharger le manuel administrateur
-  </a>
-  <a href="https://gitea.champs-libres.be/Chill-project/manuals/releases/download/latest/Manuel%20utilisateur.pdf" target="blank" class="text-center px-5 py-3 rounded-lg bg-primary-400 text-white hover:bg-primary-700 font-medium transition duration-300">
-    Télecharger le manuel utilisateur
-  </a>
-</div>
-
-
-<h5 class="content-subtitle bord-2 mb-2 mt-5">Formation des utilisateurs</h5>
-<div class="mb-4">
-Renseignez-vous pour organiser une journée de formation à l'utilisation de Chill depuis la <a href="/contact" class="nav-link">page contact</a>
-</div>
+{{< gradient-card-section title="Formation des utilisateurs" description="Organisez une journée de formation à l'utilisation de Chill." >}}
+  <a href="/contact" class="btn btn-primary mt-4">Contactez-nous</a>
+{{< /gradient-card-section >}}