Add reusable layout partials for easier page creation

- Create content-card-section.html partial for card-based content
- Create step-by-step-section.html partial for process steps
- Create contact-section.html partial for contact information
- Create main-content-section.html general purpose partial that combines all elements
- Add simplified examples using the new partials (acheter-credit-simple and commande-sim-simple)
- These partials follow the existing site theme and make creating new pages much faster

content/fr/commande-sim-simple.html

@@ -0,0 +1,87 @@
+---
+title: "Commander une SIM"
+date: 2024-10-11T14:20:00+00:00
+draft: false
+---
+
+<div class="alert alert-warning" role="alert">
+  <h4 class="alert-heading">Commande de SIM indisponible</h4>
+  <p>La commande de nouvelles cartes SIM n'est plus disponible actuellement. Nous vous invitons à vous rendre dans l'un de nos points de vente pour obtenir une carte SIM Maore Mobile.</p>
+</div>
+
+{{ partial "main-content-section" (dict 
+  "title" "Pourquoi choisir Maore Mobile ?" 
+  "benefits" (slice 
+    (dict "title" "Crédit inclus" "description" "5€ de crédit inclus") 
+    (dict "title" "Sans engagement" "description" "Sans engagement") 
+    (dict "title" "Validité illimitée" "description" "Crédit sans limite de validité")
+    (dict "title" "Transfert simplifié" "description" "Envoyez et recevez du crédit facilement")
+    (dict "title" "Tarif unique" "description" "Tarif unique vers Mayotte et plus de 50 destinations")
+    (dict "title" "Support local" "description" "Service client basé à Mayotte")
+  )
+  "resellerSection" true
+  "resellerText" "Où trouver nos cartes SIM ?"
+  "resellerDescription" "Vous pouvez obtenir votre carte SIM Maore Mobile dans l'un de nos points de vente situés à Mayotte. Rendez-vous sur la page des Doukas Revendeurs pour trouver le point de vente le plus proche de chez vous."
+  "actionText" "Trouver un revendeur"
+  "actionLink" "/fr/resellers"
+  "contactInfo" (slice 
+    (dict "title" "Service client" "icon" "/img/phone.svg" "alt" "Téléphone" "content" "06 39 900 900" "hours" "Du Lun au Ven 9h à 18h") 
+    (dict "title" "Autres contacts" "content" "Email: contact@maoremobile.yt<br>Site web: www.maoremobile.yt")
+  )
+  "contactTitle" "Informations de contact"
+)}}
+
+<style>
+.step-number {
+  width: 60px;
+  height: 60px;
+  background-color: #34af4f;
+  color: white;
+  border-radius: 50%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-size: 24px;
+  font-weight: bold;
+  margin: 0 auto 20px;
+}
+
+.card {
+  border: none;
+  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
+  border-radius: 10px;
+}
+
+.card-body {
+  padding: 30px;
+}
+
+.card.h-100 {
+  height: 100%;
+}
+
+.btn-primary {
+  background-color: #34af4f;
+  border-color: #34af4f;
+}
+
+.btn-primary:hover {
+  background-color: #2a8e3f;
+  border-color: #2a8e3f;
+}
+
+.text-center {
+  text-align: center;
+}
+
+.hero {
+  text-align: center;
+}
+
+.alert {
+  border: none;
+  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
+  border-radius: 10px;
+  padding: 20px;
+}
+</style>