From 2ca9e8ea671b3df80af391f1663ce4899198fa01 Mon Sep 17 00:00:00 2001
From: Kevin Bataille <kevin@kev1.net>
Date: Sat, 11 Oct 2025 15:20:47 +0200
Subject: [PATCH] Add acheter-credit and buy-credit pages with centered titles

- Create French (/fr/acheter-credit) and English (/en/buy-credit) pages
- Implement proper horizontal centering for main titles in hero sections
- Add content about buying credit with benefits, steps, and reseller information
- Use consistent styling with the existing site design
- Include relevant images and Bootstrap components
---
 content/en/buy-credit.html     | 144 +++++++++++++++++++++++++++++++++
 content/fr/acheter-credit.html | 144 +++++++++++++++++++++++++++++++++
 2 files changed, 288 insertions(+)
 create mode 100644 content/en/buy-credit.html
 create mode 100644 content/fr/acheter-credit.html

diff --git a/content/en/buy-credit.html b/content/en/buy-credit.html
new file mode 100644
index 0000000..8617abd
--- /dev/null
+++ b/content/en/buy-credit.html
@@ -0,0 +1,144 @@
+---
+title: "Buy Credit"
+date: 2024-10-11T14:20:00+00:00
+draft: false
+---
+
+<div class="container">
+  <div class="row">
+    <div class="col-12">
+      <div class="card mb-4">
+        <div class="card-body">
+          <h2 class="card-title">Top-up your credit easily</h2>
+          <p>Maoré Mobile adapts to your needs and allows you to top up your credit from 1€!</p>
+		  
+          <div class="row mt-4">
+            <div class="col-md-4">
+              <div class="card h-100">
+                <div class="card-body text-center">
+                  <h4>From 1€</h4>
+                  <p>Top-ups from 1€</p>
+                </div>
+              </div>
+            </div>
+            <div class="col-md-4">
+              <div class="card h-100">
+                <div class="card-body text-center">
+                  <h4>Unlimited</h4>
+                  <p>Credit with unlimited validity</p>
+                </div>
+              </div>
+            </div>
+            <div class="col-md-4">
+              <div class="card h-100">
+                <div class="card-body text-center">
+                  <h4>No Commitment</h4>
+                  <p>No time commitment</p>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+
+      <div class="card mb-4">
+        <div class="card-body">
+          <h2 class="card-title">How to top-up your credit?</h2>
+          <div class="row">
+            <div class="col-md-4 text-center mb-3">
+              <div class="step-number">1</div>
+              <h5>Buy Credit</h5>
+              <p>Choose the amount you want to add</p>
+            </div>
+            <div class="col-md-4 text-center mb-3">
+              <div class="step-number">2</div>
+              <h5>Validate Payment</h5>
+              <p>Complete the payment securely</p>
+            </div>
+            <div class="col-md-4 text-center mb-3">
+              <div class="step-number">3</div>
+              <h5>Instant Credit</h5>
+              <p>Your credit is immediately available</p>
+            </div>
+          </div>
+        </div>
+      </div>
+
+      <div class="card mb-4">
+        <div class="card-body">
+          <h2 class="card-title">Where to buy credit?</h2>
+          <p>You can recharge your Maore Mobile credit at one of our reseller locations in Mayotte. Visit the Resellers page to find the nearest point of sale to you.</p>
+          <div class="text-center">
+            <a href="/en/resellers" class="btn btn-primary btn-lg">Find a Reseller</a>
+          </div>
+        </div>
+      </div>
+
+      <div class="card">
+        <div class="card-body">
+          <h3>Contact Information</h3>
+          <div class="row">
+            <div class="col-md-6">
+              <p><strong>Customer Service:</strong></p>
+              <p><img src="/img/phone.svg" alt="Phone" class="mr-2" style="width: 20px;"> 06 39 900 900</p>
+              <p>Mon-Fri 9am-6pm</p>
+            </div>
+            <div class="col-md-6">
+              <p><strong>Other Contacts:</strong></p>
+              <p>Email: contact@maoremobile.yt</p>
+              <p>Website: www.maoremobile.yt</p>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</div>
+
+<style>
+.hero {
+  text-align: center;
+}
+
+.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;
+}
+</style>
\ No newline at end of file
diff --git a/content/fr/acheter-credit.html b/content/fr/acheter-credit.html
new file mode 100644
index 0000000..5319ef2
--- /dev/null
+++ b/content/fr/acheter-credit.html
@@ -0,0 +1,144 @@
+---
+title: "Acheter du crédit"
+date: 2024-10-11T14:20:00+00:00
+draft: false
+---
+
+<div class="container">
+  <div class="row">
+    <div class="col-12">
+      <div class="card mb-4">
+        <div class="card-body">
+          <h2 class="card-title">Rechargez votre crédit facilement</h2>
+          <p>Maoré Mobile s'adapte à vos besoins et vous permet de recharger votre crédit à partir de 1€ !</p>
+		  
+          <div class="row mt-4">
+            <div class="col-md-4">
+              <div class="card h-100">
+                <div class="card-body text-center">
+                  <h4>À partir de 1€</h4>
+                  <p>Recharges à partir de 1€</p>
+                </div>
+              </div>
+            </div>
+            <div class="col-md-4">
+              <div class="card h-100">
+                <div class="card-body text-center">
+                  <h4>Illimité</h4>
+                  <p>Crédit sans limite de validité</p>
+                </div>
+              </div>
+            </div>
+            <div class="col-md-4">
+              <div class="card h-100">
+                <div class="card-body text-center">
+                  <h4>Sans engagement</h4>
+                  <p>Pas d'engagement de durée</p>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+
+      <div class="card mb-4">
+        <div class="card-body">
+          <h2 class="card-title">Comment recharger votre crédit ?</h2>
+          <div class="row">
+            <div class="col-md-4 text-center mb-3">
+              <div class="step-number">1</div>
+              <h5>Acheter du crédit</h5>
+              <p>Choisissez le montant que vous souhaitez ajouter</p>
+            </div>
+            <div class="col-md-4 text-center mb-3">
+              <div class="step-number">2</div>
+              <h5>Valider le paiement</h5>
+              <p>Effectuez le paiement en toute sécurité</p>
+            </div>
+            <div class="col-md-4 text-center mb-3">
+              <div class="step-number">3</div>
+              <h5>Crédit immédiat</h5>
+              <p>Votre crédit est immédiatement disponible</p>
+            </div>
+          </div>
+        </div>
+      </div>
+
+      <div class="card mb-4">
+        <div class="card-body">
+          <h2 class="card-title">Où acheter du crédit ?</h2>
+          <p>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.</p>
+          <div class="text-center">
+            <a href="/fr/resellers" class="btn btn-primary btn-lg">Trouver un revendeur</a>
+          </div>
+        </div>
+      </div>
+
+      <div class="card">
+        <div class="card-body">
+          <h3>Informations de contact</h3>
+          <div class="row">
+            <div class="col-md-6">
+              <p><strong>Service client:</strong></p>
+              <p><img src="/img/phone.svg" alt="Téléphone" class="mr-2" style="width: 20px;"> 06 39 900 900</p>
+              <p>Du Lun au Ven 9h à 18h</p>
+            </div>
+            <div class="col-md-6">
+              <p><strong>Autres contacts:</strong></p>
+              <p>Email: contact@maoremobile.yt</p>
+              <p>Site web: www.maoremobile.yt</p>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</div>
+
+<style>
+.hero {
+  text-align: center;
+}
+
+.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;
+}
+</style>
\ No newline at end of file