Add SIM card ordering discontinued notice with horizontal centering

- Update /fr/commande-sim and /en/commande-sim pages to indicate SIM card ordering is no longer available
- Replace form with alert message and reseller information
- Remove translation templates and use static text
- Apply Bootstrap centering to horizontally align main title
- Update both French and English versions
- Remove unused translation keys from i18n files

content/en/commande-sim.md

@@ -0,0 +1,136 @@
+---
+title: "Order SIM Card"
+date: 2024-10-11T14:20:00+00:00
+draft: false
+---
+
+<div class="container">
+  <div class="row">
+    <div class="col-12 text-center">
+      <h1 class="mb-4">Order your Maore Mobile SIM</h1>
+
+      <div class="alert alert-warning" role="alert">
+        <h4 class="alert-heading">SIM Order Unavailable</h4>
+        <p>Ordering new SIM cards is currently unavailable. Please visit one of our resellers to obtain a Maore Mobile SIM card.</p>
+      </div>
+
+      <div class="card mb-4">
+        <div class="card-body">
+          <h2 class="card-title">Why choose Maore Mobile?</h2>
+          <div class="row">
+            <div class="col-md-6">
+              <ul class="list-unstyled">
+                <li class="mb-2">
+                  <img src="/img/icon-credit.svg" alt="Included Credit" class="mr-2" style="width: 24px;">
+                  <strong>Included Credit:</strong> 5€ credit included
+                </li>
+                <li class="mb-2">
+                  <img src="/img/icon-no-engage.svg" alt="No Commitment" class="mr-2" style="width: 24px;">
+                  <strong>No Commitment:</strong> No commitment
+                </li>
+                <li class="mb-2">
+                  <img src="/img/icon-no-limit.svg" alt="Unlimited Validity" class="mr-2" style="width: 24px;">
+                  <strong>Unlimited Validity:</strong> Credit with unlimited validity
+                </li>
+              </ul>
+            </div>
+            <div class="col-md-6">
+              <ul class="list-unstyled">
+                <li class="mb-2">
+                  <img src="/img/icon-transfert.svg" alt="Transfer" class="mr-2" style="width: 24px;">
+                  <strong>Simple Credit Transfer:</strong> Send and receive credit easily
+                </li>
+                <li class="mb-2">
+                  <img src="/img/icon-tarif-mayotte.svg" alt="Rates" class="mr-2" style="width: 24px;">
+                  <strong>Unique Rates:</strong> Unique rates to Mayotte and 50+ destinations
+                </li>
+                <li class="mb-2">
+                  <img src="/img/phone.svg" alt="Local Support" class="mr-2" style="width: 24px;">
+                  <strong>Local Support:</strong> Customer service based in Mayotte
+                </li>
+              </ul>
+            </div>
+          </div>
+        </div>
+      </div>
+
+      <div class="card">
+        <div class="card-body">
+          <h2 class="card-title">Where to find our SIM cards?</h2>
+          <p>You can get your Maore Mobile SIM card 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 class="mt-4">
+            <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>
+</div>
+
+<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;
+}
+
+.form-control:focus {
+  border-color: #34af4f;
+  box-shadow: 0 0 0 0.2rem rgba(52, 175, 79, 0.25);
+}
+
+.btn-primary {
+  background-color: #34af4f;
+  border-color: #34af4f;
+}
+
+.btn-primary:hover {
+  background-color: #2a8e3f;
+  border-color: #2a8e3f;
+}
+
+.list-unstyled li {
+  display: flex;
+  align-items: flex-start;
+  margin-bottom: 15px;
+}
+
+.list-unstyled li img {
+  flex-shrink: 0;
+  margin-top: 2px;
+}
+</style>