From 3ad606610b7c9c8caf4ecdf71d4c856f03f196e1 Mon Sep 17 00:00:00 2001 From: MVA Global Fret Date: Mon, 4 May 2026 22:05:09 +0200 Subject: [PATCH] Replace generic icons with real payment brand logos Bundle the actual SVG logos in images/payment-logos/ and reference them with instead of Font Awesome glyphs: - mvola.svg (from mvola.mg, the green wordmark) - orange.svg (Wikimedia Commons, square orange) - airtel.svg (Wikimedia Commons, red wordmark) - visa.svg (Wikimedia Commons) - mastercard.svg (Wikimedia Commons) New CSS block (.payment-logos-grid + .payment-logo-card) gives a clean 4-column white-card layout with hover lift, gold border tint on hover, and a 2-column responsive layout on mobile. The bank-card slot now displays both Visa and Mastercard logos side-by-side. Co-Authored-By: Claude Sonnet 4.6 --- application.html | 37 +++++++------- css/style.css | 70 ++++++++++++++++++++++++++ images/payment-logos/airtel.svg | 1 + images/payment-logos/mastercard.svg | 39 +++++++++++++++ images/payment-logos/mvola.svg | 1 + images/payment-logos/orange.svg | 30 ++++++++++++ images/payment-logos/visa.svg | 76 +++++++++++++++++++++++++++++ 7 files changed, 237 insertions(+), 17 deletions(-) create mode 100644 images/payment-logos/airtel.svg create mode 100644 images/payment-logos/mastercard.svg create mode 100644 images/payment-logos/mvola.svg create mode 100644 images/payment-logos/orange.svg create mode 100644 images/payment-logos/visa.svg diff --git a/application.html b/application.html index 112b028..98841fd 100644 --- a/application.html +++ b/application.html @@ -218,26 +218,29 @@

Payez avec votre portefeuille mobile, en toute sécurité

-
-
- - MVola - Yas Madagascar +
+
+
MVola
+ MVola + Yas Madagascar
-
- - Orange Money - Orange Madagascar +
+
Orange Money
+ Orange Money + Orange Madagascar
-
- - Airtel Money - Airtel Madagascar +
+
Airtel Money
+ Airtel Money + Airtel Madagascar
-
- - Carte Bancaire - Visa / Mastercard +
+
+ Visa + Mastercard +
+ Carte Bancaire + Visa / Mastercard
diff --git a/css/style.css b/css/style.css index 4fae03e..cc387a1 100644 --- a/css/style.css +++ b/css/style.css @@ -2107,3 +2107,73 @@ a:focus-visible { .float-notif, .float-pill { display: none; } .app-mockup-outer { padding: 20px; } } + +/* Payment logos grid (Application page) */ +.payment-logos-grid { + display: grid; + grid-template-columns: repeat(4, minmax(0, 1fr)); + gap: 24px; + max-width: 900px; + margin: 0 auto; +} + +.payment-logo-card { + text-align: center; + padding: 28px 20px; + background: var(--white); + border: 1px solid rgba(26, 26, 62, 0.08); + border-radius: 16px; + box-shadow: 0 4px 20px rgba(26, 26, 62, 0.04); + transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease; +} + +.payment-logo-card:hover { + transform: translateY(-4px); + box-shadow: 0 12px 30px rgba(26, 26, 62, 0.1); + border-color: rgba(197, 165, 90, 0.3); +} + +.payment-logo-img { + height: 60px; + display: flex; + align-items: center; + justify-content: center; + margin-bottom: 16px; +} + +.payment-logo-img img { + max-height: 48px; + max-width: 100%; + width: auto; + object-fit: contain; +} + +.payment-logo-img--double { + gap: 10px; +} + +.payment-logo-img--double img { + max-height: 32px; +} + +.payment-logo-card strong { + display: block; + color: var(--navy); + font-family: 'Poppins', sans-serif; + font-size: 1rem; + margin-bottom: 4px; +} + +.payment-logo-card span { + display: block; + font-size: 0.8rem; + color: var(--text-light); +} + +@media (max-width: 768px) { + .payment-logos-grid { grid-template-columns: repeat(2, 1fr); gap: 16px; } + .payment-logo-card { padding: 20px 14px; } + .payment-logo-img { height: 50px; margin-bottom: 12px; } + .payment-logo-img img { max-height: 40px; } + .payment-logo-img--double img { max-height: 26px; } +} diff --git a/images/payment-logos/airtel.svg b/images/payment-logos/airtel.svg new file mode 100644 index 0000000..23854c8 --- /dev/null +++ b/images/payment-logos/airtel.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/images/payment-logos/mastercard.svg b/images/payment-logos/mastercard.svg new file mode 100644 index 0000000..711ed81 --- /dev/null +++ b/images/payment-logos/mastercard.svg @@ -0,0 +1,39 @@ + + + + + + + + + + diff --git a/images/payment-logos/mvola.svg b/images/payment-logos/mvola.svg new file mode 100644 index 0000000..33c84f1 --- /dev/null +++ b/images/payment-logos/mvola.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/images/payment-logos/orange.svg b/images/payment-logos/orange.svg new file mode 100644 index 0000000..91f463c --- /dev/null +++ b/images/payment-logos/orange.svg @@ -0,0 +1,30 @@ + + + + + + + + + + + + + + + + + diff --git a/images/payment-logos/visa.svg b/images/payment-logos/visa.svg new file mode 100644 index 0000000..c729f35 --- /dev/null +++ b/images/payment-logos/visa.svg @@ -0,0 +1,76 @@ + + + +image/svg+xml + + + + + + + + + + \ No newline at end of file