diff --git a/content/fr/acheter-credit-simple.html b/content/fr/acheter-credit-simple.html
new file mode 100644
index 0000000..787da54
--- /dev/null
+++ b/content/fr/acheter-credit-simple.html
@@ -0,0 +1,79 @@
+---
+title: "Acheter du crédit"
+date: 2024-10-11T14:20:00+00:00
+draft: false
+---
+
+{{ partial "main-content-section" (dict 
+  "title" "Rechargez votre crédit facilement" 
+  "description" "Maoré Mobile s'adapte à vos besoins et vous permet de recharger votre crédit à partir de 1€ !" 
+  "benefits" (slice 
+    (dict "title" "À partir de 1€" "description" "Recharges à partir de 1€") 
+    (dict "title" "Illimité" "description" "Crédit sans limite de validité") 
+    (dict "title" "Sans engagement" "description" "Pas d'engagement de durée")
+  )
+  "steps" (slice 
+    (dict "title" "Acheter du crédit" "description" "Choisissez le montant que vous souhaitez ajouter") 
+    (dict "title" "Valider le paiement" "description" "Effectuez le paiement en toute sécurité") 
+    (dict "title" "Crédit immédiat" "description" "Votre crédit est immédiatement disponible")
+  )
+  "stepsTitle" "Comment recharger votre crédit ?"
+  "resellerSection" true
+  "resellerText" "Où acheter du crédit ?"
+  "resellerDescription" "Vous pouvez recharger votre crédit 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;
+}
+</style>
\ No newline at end of file
diff --git a/content/fr/commande-sim-simple.html b/content/fr/commande-sim-simple.html
new file mode 100644
index 0000000..8eb8bc1
--- /dev/null
+++ b/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>
\ No newline at end of file
diff --git a/layouts/partials/contact-section.html b/layouts/partials/contact-section.html
new file mode 100644
index 0000000..94aa11f
--- /dev/null
+++ b/layouts/partials/contact-section.html
@@ -0,0 +1,27 @@
+{{ $title := .title | default "Informations de contact" }}
+{{ $contactInfo := .contactInfo }}
+
+<div class="container">
+  <div class="row">
+    <div class="col-12">
+      <div class="card">
+        <div class="card-body">
+          <h3>{{ $title }}</h3>
+          <div class="row">
+            {{ range $contactInfo }}
+            <div class="col-md-6">
+              <p><strong>{{ .title }}:</strong></p>
+              {{ if .icon }}
+              <p><img src="{{ .icon }}" alt="{{ .alt }}" class="mr-2" style="width: 20px;"> {{ .content }}</p>
+              {{ else }}
+              <p>{{ .content }}</p>
+              {{ end }}
+              {{ if .hours }}<p>{{ .hours }}</p>{{ end }}
+            </div>
+            {{ end }}
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</div>
\ No newline at end of file
diff --git a/layouts/partials/content-card-section.html b/layouts/partials/content-card-section.html
new file mode 100644
index 0000000..5fed19c
--- /dev/null
+++ b/layouts/partials/content-card-section.html
@@ -0,0 +1,31 @@
+{{ $title := .title }}
+{{ $subtitle := .subtitle }}
+{{ $cards := .cards }}
+
+<div class="container">
+  <div class="row">
+    <div class="col-12">
+      <div class="card mb-4">
+        <div class="card-body">
+          <h2 class="card-title">{{ $title }}</h2>
+          {{ if $subtitle }}<p>{{ $subtitle }}</p>{{ end }}
+          
+          {{ if $cards }}
+          <div class="row mt-4">
+            {{ range $cards }}
+            <div class="col-md-{{ div 12 (len $cards) }}">
+              <div class="card h-100">
+                <div class="card-body text-center">
+                  <h4>{{ .title }}</h4>
+                  <p>{{ .description }}</p>
+                </div>
+              </div>
+            </div>
+            {{ end }}
+          </div>
+          {{ end }}
+        </div>
+      </div>
+    </div>
+  </div>
+</div>
\ No newline at end of file
diff --git a/layouts/partials/main-content-section.html b/layouts/partials/main-content-section.html
new file mode 100644
index 0000000..d578374
--- /dev/null
+++ b/layouts/partials/main-content-section.html
@@ -0,0 +1,93 @@
+{{ $title := .title }}
+{{ $description := .description }}
+{{ $benefits := .benefits }}
+{{ $steps := .steps }} 
+{{ $actionText := .actionText }}
+{{ $actionLink := .actionLink }}
+{{ $contactInfo := .contactInfo }}
+{{ $contactTitle := .contactTitle }}
+{{ $resellerSection := .resellerSection | default false }}
+{{ $resellerText := .resellerText | default "Où trouver nos cartes SIM ?" }}
+{{ $resellerDescription := .resellerDescription | default "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." }}
+
+<div class="container">
+  <div class="row">
+    <div class="col-12">
+      <!-- Main content section -->
+      <div class="card mb-4">
+        <div class="card-body">
+          <h2 class="card-title">{{ $title }}</h2>
+          {{ if $description }}<p>{{ $description }}</p>{{ end }}
+          
+          {{ if $benefits }}
+          <div class="row mt-4">
+            {{ range $benefits }}
+            <div class="col-md-{{ if gt (len $benefits) 4 }}{{ div 12 (len $benefits) }}{{ else }}4{{ end }}">
+              <div class="card h-100">
+                <div class="card-body text-center">
+                  <h4>{{ .title }}</h4>
+                  <p>{{ .description }}</p>
+                </div>
+              </div>
+            </div>
+            {{ end }}
+          </div>
+          {{ end }}
+        </div>
+      </div>
+
+      <!-- Steps section -->
+      {{ if $steps }}
+      <div class="card mb-4">
+        <div class="card-body">
+          <h2 class="card-title">{{ .stepsTitle | default "Comment procéder ?" }}</h2>
+          <div class="row">
+            {{ range $index, $step := $steps }}
+            <div class="col-md-{{ div 12 (len $steps) }} text-center mb-3">
+              <div class="step-number">{{ add $index 1 }}</div>
+              <h5>{{ $step.title }}</h5>
+              <p>{{ $step.description }}</p>
+            </div>
+            {{ end }}
+          </div>
+        </div>
+      </div>
+      {{ end }}
+
+      <!-- Reseller section -->
+      {{ if $resellerSection }}
+      <div class="card mb-4">
+        <div class="card-body">
+          <h2 class="card-title">{{ $resellerText }}</h2>
+          <p>{{ $resellerDescription }}</p>
+          <div class="text-center">
+            <a href="{{ $actionLink }}" class="btn btn-primary btn-lg">{{ $actionText }}</a>
+          </div>
+        </div>
+      </div>
+      {{ end }}
+
+      <!-- Contact section -->
+      {{ if $contactInfo }}
+      <div class="card">
+        <div class="card-body">
+          <h3>{{ $contactTitle | default "Informations de contact" }}</h3>
+          <div class="row">
+            {{ range $contactInfo }}
+            <div class="col-md-6">
+              <p><strong>{{ .title }}:</strong></p>
+              {{ if .icon }}
+              <p><img src="{{ .icon }}" alt="{{ .alt }}" class="mr-2" style="width: 20px;"> {{ .content }}</p>
+              {{ else }}
+              <p>{{ .content }}</p>
+              {{ end }}
+              {{ if .hours }}<p>{{ .hours }}</p>{{ end }}
+            </div>
+            {{ end }}
+          </div>
+        </div>
+      </div>
+      {{ end }}
+    </div>
+  </div>
+</div>
\ No newline at end of file
diff --git a/layouts/partials/step-by-step-section.html b/layouts/partials/step-by-step-section.html
new file mode 100644
index 0000000..bac8ac5
--- /dev/null
+++ b/layouts/partials/step-by-step-section.html
@@ -0,0 +1,23 @@
+{{ $title := .title }}
+{{ $steps := .steps }}
+
+<div class="container">
+  <div class="row">
+    <div class="col-12">
+      <div class="card mb-4">
+        <div class="card-body">
+          <h2 class="card-title">{{ $title }}</h2>
+          <div class="row">
+            {{ range $index, $step := $steps }}
+            <div class="col-md-{{ div 12 (len $steps) }} text-center mb-3">
+              <div class="step-number">{{ add $index 1 }}</div>
+              <h5>{{ $step.title }}</h5>
+              <p>{{ $step.description }}</p>
+            </div>
+            {{ end }}
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</div>
\ No newline at end of file