fix TOC and update text

src/components/Faq.astro

@@ -7,38 +7,22 @@ const { title } = Astro.props as Props;
 ---
 
 <div class="faq not-prose mt-3">
-  <dt>
-    <button
-      class="flex items-start z-0 relative bg-casper-200 w-full px-2 pb-1 pt-2 rounded-lg text-casper-900"
+  <details>
+    <summary
+      class="flex items-start z-0 relative bg-casper-200 w-full px-2 pb-1 pt-2 rounded-lg text-casper-900 cursor-pointer"
       aria-label="ouvrir la réponse"
     >
       <span class="text-4xl -mt-0.5 mr-2 transition-all">+</span>{title}
-    </button>
-  </dt>
-  <dd
-    class="max-h-0 px-6 -mt-2 text-gray-600 bg-casper-100 rounded-lg"
-    aria-expanded="false"
-  >
-    <slot />
-  </dd>
+    </summary>
+    <div class="py-3 px-2">
+        <slot />
+    </div>
+    </details>
 </div>
-<style>
-  .faq dd {
-    @apply overflow-hidden transition-all duration-300;
-  }
-</style>
 <script>
-  document.querySelectorAll(".faq dt button").forEach((bt) => {
-    const dt = bt.parentElement;
-    const dd = dt.nextElementSibling;
+  document.querySelectorAll(".faq details summary").forEach((dt) => {
     dt.addEventListener("click", () => {
-      dd.setAttribute("aria-expanded", dd.classList.contains("max-h-0"));
-      dd.classList.toggle("max-h-0");
-      dd.classList.toggle("py-5");
-      dt.querySelector("span").classList.toggle("rotate-45");
-      bt.ariaLabel = dd.classList.contains("max-h-0")
-        ? "ouvrir la réponse"
-        : "fermer la réponse";
+      dt.querySelector("span")?.classList.toggle("rotate-45");
     });
   });
 </script>

src/components/HeroPage.astro

@@ -1,10 +1,11 @@
 ---
 export interface Props {
   title: string;
+  subtitle?: string;
   color: Color;
 }
 
-const { title, color = "primary" } = Astro.props;
+const { title, color = "primary", subtitle } = Astro.props;
 ---
 
 <div class="flex flex-col-reverse md:flex-row py-16 lg:py-24">
@@ -21,5 +22,6 @@ const { title, color = "primary" } = Astro.props;
     >
       {title}
     </h1>
+    {subtitle && <h2 class="text-2xl mx-2 mt-6">{subtitle}</h2>}
   </div>
 </div>

src/components/Toc.astro

@@ -21,7 +21,7 @@ const {
   showToc && (
     <div class="sticky top-5 right-0 group -mt-14 ml-auto h-12 w-12 open-toc is-bottom z-10">
       <button
-        class={`text-${color}-900 bg-casper-100 relative rounded-full shadow-md p-2 w-12 h-12`}
+        class={`text-${color}-900 bg-casper-100 relative rounded-full shadow-md p-2 w-12 h-12 overflow-hidden`}
         aria-label="ouvrir le menu de navigation"
       >
         <span class="absolute block transition-colors duration-150 ease-in-out w-[24.5px] h-[20px] top-[15px] left-[11px]">

src/layouts/PageLayout.astro

@@ -19,7 +19,7 @@ const randomColor: Color = colors[Math.floor(Math.random() * colors.length)];
   metaTitle={frontmatter.metaTitle}
   color={randomColor}
 >
-  <HeroPage title={frontmatter.title} color={randomColor} />
+  <HeroPage title={frontmatter.title} subtitle={frontmatter.subtitle} color={randomColor} />
   <div
     class="prose prose-lg md:prose-xl mx-auto pt-5 pb-20 px-4 md:px-10 max-w-6xl page-content relative"
   >

src/pages/services/developpement-sous-craft-cms.md

@@ -49,16 +49,15 @@ Il possède dans sa version Pro :
 Il existe 2 versions de licence pour utiliser Craft CMS :
 
 - La version Solo gratuite
-- La version Pro 299$
+- La version Pro 399$
 
-### La version pro permet :
+### La version pro permet
 
 - Le gestion des utilisateurs admin et public
 - GraphQL
 - Mode preview pour les sites statiques ou Web apps
 - Possibilité de customiser le branding de l'admin.
 
-
 ## Besoin d'un développement avec Craft CMS ?
 
 Nous pouvons vous proposer :

src/pages/services/developpement-wordpress-avance.mdx

@@ -1,6 +1,7 @@
 ---
 layout: ../../layouts/PageLayout.astro
 title: Développement WordPress 100% sur mesure
+subtitle: Genève, Lausanne, Annecy, Suisse, France
 metaTitle: Développement WordPress 100% sur mesure | Genève, Lausanne, Annecy
 description: Développement professionnel de site WordPress 100% sur mesure, création de thèmes complets, création de blocs Gutenberg spécifiques, maintenance et mise à jour de votre site WordPress.
 showToc: true
@@ -10,13 +11,12 @@ import Video from "../../components/Video.astro";
 import cover from "../../../assets/images/cover-admin-wp.jpg";
 
 [WordPress](https://wordpress.org) est un projet open-source avec une grosse communauté, un nombre de plugins impressionnant.
-Il est donc énormément utilisé pour tout type de projet mais pas toujours de la meilleure façon.
 
 Après analyse de votre besoin, WordPress peut être parfaitement adapté pour votre projet.
-Nous sommes capables de développer des sites basés sur WordPress de très bonne qualité et maintenable dans le temps. Cette dernière partie est très importante.
-Pour cela, il suffit de respecter les bonnes pratiques de développement de la plateforme, afin d'obtenir un site performant, léger et maintenable dans le temps.
+Nous développons des sites basés sur WordPress de très bonne qualité et maintenable dans le temps.
+Nous respectons les bonnes pratiques de développement de la solution (WordPress), afin d'obtenir un site performant, léger et maintenable dans le temps.
 
-De plus, une fois le site lancé en production, nous sommes là pour le faire évoluer et le maintenir. Nous ne vous laissons pas tomber. Donc comme nous souhaitons continuer avec vous, nous préférons nous faciliter le travail et coder proprement.
+Une fois le site lancé en production, nous sommes là pour la maintenance et l'évolution du site.
 
 ## Notre prestation développement WordPress sur mesure
 

src/pages/services/maintenance-wordpress.mdx

@@ -1,6 +1,7 @@
 ---
 layout: ../../layouts/PageLayout.astro
-title: Maintenance de site WordPress
+title: Maintenance WordPress
+subtitle: Genève, Lausanne, Annecy, Suisse, France
 metaTitle: Maintenance de site WordPress | Genève, Lausanne, Annecy
 description: Les sites réalisés avec le CMS WordPress sont soumis régulièrement à des attaques. Des robots (scripts) tentent de rentrer en exploitant les failles des plugins ou du cœur de WordPress.
 showToc: true
@@ -14,9 +15,13 @@ import Cards from "../../components/Cards.astro";
 import Card from "../../components/Card.astro";
 
 
-Votre site vient d'être mis en ligne, vous êtes heureux. Une bonne chose de faite, vous cochez la case dans votre to-do liste. Et après ???
+Comme tout projet informatique, il est nécessaire de maintenir votre site WordPress pour le garder en bonne santé.
+Mise à jour des plugins, du coeur de WordPress, sauvegarde régulière, surveillance de la sécurité, surveillance des anomalies, etc.
+Nous assurons également les évolutions et les corrections de bugs de votre site WordPress.
 
-Comme tout projet informatique, il est nécessaire de maintenir votre site WordPress pour éviter les problèmes. C'est un peu comme votre voiture, il faut faire des révisions régulièrement pour éviter les pannes. Bon là, c'est plus simple, pas besoin de prendre rendez-vous chez le garagiste. Voici en quoi cela consiste.
+## Comptez sur nous pour la maintenance de votre site WordPress
+
+Nous recontrons souvent des clients avec des sites WordPress qui n'ont pas été mis à jour depuis des mois. Le prestataire du début n'est plus présent pour gérer le site. Vous pouvez nous faire confiance pour la maintenance de votre site WordPress.
 
 ## La maintenance préventive des sites WordPress