616f9d75a1
Le menu mobile (<nav class="mobile-nav">) omettait le lien « Service Commande » sur about, application, cgv, contact, guide-envoi et tarifs — incoherent avec le menu desktop et le footer (qui l'ont) et avec accueil (mobile complet). Insertion du lien apres « Tarifs », identique aux autres entrees. Constat issu de l'audit du site (revue qualite 2026-06-21). Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
321 lines
17 KiB
HTML
321 lines
17 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="fr">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>Application Mobile — MVA Global Fret</title>
|
|
<meta name="description" content="Bientôt disponible : l'application MVA Global Fret pour commander depuis Madagascar sur les sites européens et payer en mobile money (MVola, Orange Money, Airtel Money).">
|
|
<link rel="icon" type="image/png" href="PNG MVA GLOBAL FRET.png">
|
|
<link rel="preconnect" href="https://fonts.googleapis.com">
|
|
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
|
|
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600&family=Poppins:wght@600;700&display=swap" rel="stylesheet">
|
|
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.0/css/all.min.css">
|
|
<link rel="stylesheet" href="css/style.css">
|
|
</head>
|
|
<body>
|
|
|
|
<a href="#main" class="skip-link">Aller au contenu principal</a>
|
|
|
|
<header class="header" id="header">
|
|
<div class="container header-inner">
|
|
<a href="accueil.html" class="logo"><img src="PNG MVA GLOBAL FRET.png" alt="MVA Global Fret"></a>
|
|
<nav class="nav" aria-label="Navigation principale">
|
|
<a href="accueil.html" data-i18n="nav.home">Accueil</a>
|
|
<a href="about.html" data-i18n="nav.about">Qui sommes-nous</a>
|
|
<a href="tarifs.html" data-i18n="nav.pricing">Tarifs</a>
|
|
<a href="service-commande.html" data-i18n="nav.serviceCommande">Service Commande</a>
|
|
<a href="guide-envoi.html" data-i18n="nav.guide">Guide d'envoi</a>
|
|
<a href="contact.html" data-i18n="nav.contact">Inscription</a>
|
|
<a href="application.html" data-i18n="nav.app">Application</a>
|
|
</nav>
|
|
<div class="header-right">
|
|
<div class="lang-switcher" role="group" aria-label="Choisir la langue">
|
|
<button data-lang="fr" class="active">FR</button>
|
|
<button data-lang="en">EN</button>
|
|
<button data-lang="mg">MG</button>
|
|
</div>
|
|
<button class="menu-toggle" id="menuToggle" aria-label="Ouvrir le menu"><span></span><span></span><span></span></button>
|
|
</div>
|
|
</div>
|
|
</header>
|
|
|
|
<nav class="mobile-nav" id="mobileNav">
|
|
<a href="accueil.html" data-i18n="nav.home">Accueil</a>
|
|
<a href="about.html" data-i18n="nav.about">Qui sommes-nous</a>
|
|
<a href="tarifs.html" data-i18n="nav.pricing">Tarifs</a>
|
|
<a href="service-commande.html" data-i18n="nav.serviceCommande">Service Commande</a>
|
|
<a href="guide-envoi.html" data-i18n="nav.guide">Guide d'envoi</a>
|
|
<a href="contact.html" data-i18n="nav.contact">Inscription</a>
|
|
<a href="application.html" data-i18n="nav.app">Application</a>
|
|
</nav>
|
|
<div class="overlay" id="overlay"></div>
|
|
|
|
<main id="main">
|
|
|
|
<!-- APP TEASER -->
|
|
<section class="app-teaser" style="background: linear-gradient(135deg, var(--light-gray) 0%, #e8e8f0 100%);">
|
|
<div class="container">
|
|
<div class="app-content">
|
|
|
|
<!-- TEXT SIDE -->
|
|
<div class="animate-on-scroll">
|
|
<div class="app-badge">
|
|
<i class="fa-solid fa-rocket" aria-hidden="true"></i>
|
|
<span data-i18n="app.badge">Bientôt Disponible</span>
|
|
</div>
|
|
|
|
<h1 style="font-size: clamp(1.8rem, 4vw, 2.8rem);" data-i18n="app.title">L'Application MVA Global Fret</h1>
|
|
<div class="gold-line" style="margin: 16px 0;"></div>
|
|
<p style="font-size: 1.1rem; color: var(--text-light); margin-bottom: 32px;" data-i18n="app.subtitle">Bientôt, commandez depuis Madagascar sur les sites internet européens et payez en mobile money.</p>
|
|
|
|
<div class="app-features">
|
|
<div class="app-feature">
|
|
<i class="fa-solid fa-globe" aria-hidden="true"></i>
|
|
<div>
|
|
<h4 data-i18n="app.feature1Title">E-commerce Européen</h4>
|
|
<p data-i18n="app.feature1Desc">Accédez aux sites de vente en ligne européens directement depuis Madagascar.</p>
|
|
</div>
|
|
</div>
|
|
<div class="app-feature">
|
|
<i class="fa-solid fa-mobile-screen-button" aria-hidden="true"></i>
|
|
<div>
|
|
<h4 data-i18n="app.feature2Title">Paiement Mobile Money</h4>
|
|
<p data-i18n="app.feature2Desc">Payez avec MVola, Orange Money ou Airtel Money en toute simplicité.</p>
|
|
</div>
|
|
</div>
|
|
<div class="app-feature">
|
|
<i class="fa-solid fa-location-dot" aria-hidden="true"></i>
|
|
<div>
|
|
<h4 data-i18n="app.feature3Title">Suivi en Temps Réel</h4>
|
|
<p data-i18n="app.feature3Desc">Suivez l'avancement de votre commande et de la livraison en direct.</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
</div>
|
|
|
|
<!-- PHONE MOCKUP -->
|
|
<div class="animate-on-scroll delay-2 app-mockup-outer">
|
|
<div class="app-mockup-wrapper">
|
|
|
|
<!-- Flottant haut-gauche : En vol -->
|
|
<div class="float-notif float-notif--flight">
|
|
<div class="float-notif-icon"><i class="fa-solid fa-plane"></i></div>
|
|
<div>
|
|
<div class="float-notif-title" data-i18n="app.mockupFlightTitle">En vol vers Madagascar</div>
|
|
<div class="float-notif-sub" data-i18n="app.mockupFlightSub">Arrivée estimée · 5 avril</div>
|
|
<div class="fnp-bar-wrap">
|
|
<span>Orly</span>
|
|
<div class="fnp-bar"><div class="fnp-fill"></div></div>
|
|
<span>Tana</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- iPhone -->
|
|
<div class="iphone-mockup">
|
|
<div class="iphone-bezel">
|
|
<!-- Boutons latéraux gauche -->
|
|
<div class="iphone-btn iphone-btn--silent"></div>
|
|
<div class="iphone-btn iphone-btn--vol-up"></div>
|
|
<div class="iphone-btn iphone-btn--vol-dn"></div>
|
|
<!-- Bouton power droite -->
|
|
<div class="iphone-btn iphone-btn--power"></div>
|
|
|
|
<!-- Écran -->
|
|
<div class="iphone-screen">
|
|
<!-- Dynamic Island -->
|
|
<div class="iphone-di"></div>
|
|
|
|
<!-- Contenu app -->
|
|
<div class="iphone-content">
|
|
<div class="iphone-status">
|
|
<span>9:41</span>
|
|
<span style="letter-spacing:1px; font-size:0.55rem;">●●● ▌</span>
|
|
</div>
|
|
<div class="iphone-hdr">
|
|
<div>
|
|
<div class="iphone-app-title">MVA Global Fret</div>
|
|
<div class="iphone-app-route">France → Madagascar</div>
|
|
</div>
|
|
<div class="iphone-avatar">H</div>
|
|
</div>
|
|
<div class="iphone-tabs">
|
|
<span class="itab itab--active" data-i18n="app.mockupTabAll">Tout</span>
|
|
<span class="itab" data-i18n="app.mockupTabTransit">En transit</span>
|
|
<span class="itab" data-i18n="app.mockupTabDelivered">Livrées</span>
|
|
</div>
|
|
<div class="iphone-pkg">
|
|
<div class="ipkg-badge"><span class="ipkg-dot"></span><span data-i18n="app.mockupBadgeTransit">EN TRANSIT</span></div>
|
|
<div class="ipkg-icon">
|
|
<!-- Icône colis SVG style line-art comme le site référence -->
|
|
<svg viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg">
|
|
<path d="M24 4L44 14V34L24 44L4 34V14L24 4Z" stroke="#0F1829" stroke-width="2.5" stroke-linejoin="round"/>
|
|
<path d="M24 4L24 44" stroke="#0F1829" stroke-width="2" stroke-linecap="round"/>
|
|
<path d="M4 14L24 24L44 14" stroke="#0F1829" stroke-width="2" stroke-linecap="round"/>
|
|
<path d="M14 9L34 19" stroke="#C9A84C" stroke-width="2" stroke-linecap="round"/>
|
|
</svg>
|
|
</div>
|
|
<div class="ipkg-name" data-i18n="app.mockupItemName">Paire de sneakers</div>
|
|
<div class="ipkg-ref" data-i18n="app.mockupItemRef">Boutique France · CMD-0847</div>
|
|
<div class="ipkg-price">485 000 <em>Ar</em></div>
|
|
<div class="ipkg-track">
|
|
<span class="itrack-dot done"></span>
|
|
<span class="itrack-line done"></span>
|
|
<span class="itrack-dot done"></span>
|
|
<span class="itrack-line done"></span>
|
|
<span class="itrack-dot current"></span>
|
|
<span class="itrack-line"></span>
|
|
<span class="itrack-dot"></span>
|
|
</div>
|
|
<div class="ipkg-labels"><span data-i18n="app.mockupStep1">Achat</span><span>Orly</span><span data-i18n="app.mockupStep3">Vol</span><span>Tana</span></div>
|
|
</div>
|
|
<div class="iphone-order">
|
|
<span class="iorder-dot"></span>
|
|
<span data-i18n="app.mockupOrder1">Livrée · Vêtement</span>
|
|
<span class="iorder-price">195 000 Ar</span>
|
|
</div>
|
|
<div class="iphone-order">
|
|
<span class="iorder-dot"></span>
|
|
<span data-i18n="app.mockupOrder2">Livrée · Sport</span>
|
|
<span class="iorder-price">78 000 Ar</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Flottant bas-droite : Paiement confirmé -->
|
|
<div class="float-notif float-notif--payment">
|
|
<div class="float-notif-check"><i class="fa-solid fa-check"></i></div>
|
|
<div>
|
|
<div class="float-notif-title" data-i18n="app.mockupPaymentTitle">Paiement confirmé</div>
|
|
<div class="float-notif-sub">MVola · 485 000 Ar</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Pill bas-gauche : Arrivé au dépôt -->
|
|
<div class="float-pill">
|
|
<span class="float-pill-dot"></span><span data-i18n="app.mockupArrived">Arrivé au dépôt Orly</span>
|
|
</div>
|
|
|
|
</div>
|
|
</div>
|
|
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- PAYMENT METHODS -->
|
|
<section class="section" style="background: var(--white);" aria-labelledby="payment-title">
|
|
<div class="container" style="text-align: center;">
|
|
<div class="animate-on-scroll">
|
|
<h2 id="payment-title" data-i18n="app.paymentTitle">Moyens de Paiement Acceptés</h2>
|
|
<div class="gold-line"></div>
|
|
<p style="color: var(--text-light); margin-bottom: 40px;" data-i18n="app.paymentSubtitle">Payez avec votre portefeuille mobile, en toute sécurité</p>
|
|
</div>
|
|
<div class="payment-logos-grid">
|
|
<div class="payment-logo-card animate-on-scroll delay-1">
|
|
<div class="payment-logo-img"><img src="images/payment-logos/mvola.svg" alt="MVola" loading="lazy"></div>
|
|
<strong>MVola</strong>
|
|
<span>Yas Madagascar</span>
|
|
</div>
|
|
<div class="payment-logo-card animate-on-scroll delay-2">
|
|
<div class="payment-logo-img"><img src="images/payment-logos/orange.svg" alt="Orange Money" loading="lazy"></div>
|
|
<strong>Orange Money</strong>
|
|
<span>Orange Madagascar</span>
|
|
</div>
|
|
<div class="payment-logo-card animate-on-scroll delay-3">
|
|
<div class="payment-logo-img"><img src="images/payment-logos/airtel.svg" alt="Airtel Money" loading="lazy"></div>
|
|
<strong>Airtel Money</strong>
|
|
<span>Airtel Madagascar</span>
|
|
</div>
|
|
<div class="payment-logo-card animate-on-scroll delay-4">
|
|
<div class="payment-logo-img payment-logo-img--double">
|
|
<img src="images/payment-logos/visa.svg" alt="Visa" loading="lazy">
|
|
<img src="images/payment-logos/mastercard.svg" alt="Mastercard" loading="lazy">
|
|
</div>
|
|
<strong data-i18n="app.cardLabel">Carte Bancaire</strong>
|
|
<span>Visa / Mastercard</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- BACK TO SERVICES -->
|
|
<section class="cta-banner">
|
|
<div class="container animate-on-scroll">
|
|
<h2 style="color: var(--white);" data-i18n="app.ctaTitle">En attendant le lancement de l'application</h2>
|
|
<p style="color: rgba(255,255,255,0.75); margin-bottom: 24px;" data-i18n="app.ctaSubtitle">Notre service de fret aérien est disponible dès maintenant. Inscrivez-vous et commencez à envoyer vos colis.</p>
|
|
<div style="display: flex; gap: 16px; justify-content: center; flex-wrap: wrap;">
|
|
<a href="contact.html" class="btn btn-primary">
|
|
<i class="fa-solid fa-user-plus"></i> <span data-i18n="app.registerNow">S'inscrire maintenant</span>
|
|
</a>
|
|
<a href="tarifs.html" class="btn btn-white">
|
|
<i class="fa-solid fa-tag"></i> <span data-i18n="app.viewPricing">Voir les tarifs</span>
|
|
</a>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
</main>
|
|
|
|
<footer class="footer" role="contentinfo">
|
|
<div class="container">
|
|
<div class="footer-grid">
|
|
<div class="footer-brand">
|
|
<a href="accueil.html" class="logo"><img src="PNG MVA GLOBAL FRET.png" alt="MVA Global Fret"></a>
|
|
<p data-i18n="footer.desc">Votre partenaire de confiance pour le fret aérien entre l'Europe et Madagascar.</p>
|
|
<div class="social-links">
|
|
<a href="https://www.facebook.com/profile.php?id=61573448820736" target="_blank" rel="noopener noreferrer" aria-label="Facebook"><i class="fa-brands fa-facebook-f"></i></a>
|
|
<a href="https://m.me/61573448820736" target="_blank" rel="noopener noreferrer" aria-label="Messenger"><i class="fa-brands fa-facebook-messenger"></i></a>
|
|
</div>
|
|
</div>
|
|
<div>
|
|
<h4 data-i18n="footer.linksTitle">Liens Rapides</h4>
|
|
<ul class="footer-links">
|
|
<li><a href="accueil.html" data-i18n="nav.home">Accueil</a></li>
|
|
<li><a href="about.html" data-i18n="nav.about">Qui sommes-nous</a></li>
|
|
<li><a href="tarifs.html" data-i18n="nav.pricing">Tarifs</a></li>
|
|
<li><a href="service-commande.html" data-i18n="nav.serviceCommande">Service Commande</a></li>
|
|
<li><a href="guide-envoi.html" data-i18n="nav.guide">Guide d'envoi</a></li>
|
|
<li><a href="contact.html" data-i18n="nav.contact">Inscription</a></li>
|
|
</ul>
|
|
</div>
|
|
<div>
|
|
<h4 data-i18n="footer.contactTitle">Contact</h4>
|
|
<div class="footer-contact-item"><i class="fa-solid fa-phone"></i><a href="tel:+261384973751">+261 38 49 737 51</a></div>
|
|
<div class="footer-contact-item"><i class="fa-solid fa-phone"></i><a href="tel:+33780970825">+33 7 80 97 08 25</a></div>
|
|
<div class="footer-contact-item"><i class="fa-solid fa-envelope"></i><a href="mailto:mvaglobalfret@gmail.com">mvaglobalfret@gmail.com</a></div>
|
|
<div class="footer-contact-item"><i class="fa-solid fa-location-dot"></i><span>Antananarivo 101, Madagascar</span></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="footer-bottom">
|
|
<div class="container">
|
|
<p data-i18n="footer.copyright">© 2026 MVA Global Fret. Tous droits réservés.</p>
|
|
<p style="margin-top:4px;">
|
|
<a href="cgv.html" style="color:rgba(255,255,255,0.45); font-size:0.8rem;" data-i18n="footer.cgv">Conditions Générales de Vente</a>
|
|
<span style="color:rgba(255,255,255,0.3); margin:0 6px;">|</span>
|
|
<a href="mentions-legales.html" style="color:rgba(255,255,255,0.45); font-size:0.8rem;" data-i18n="footer.mentionsLegales">Mentions Légales</a>
|
|
<span style="color:rgba(255,255,255,0.3); margin:0 6px;">|</span>
|
|
<a href="politique-confidentialite.html" style="color:rgba(255,255,255,0.45); font-size:0.8rem;" data-i18n="footer.privacy">Politique de Confidentialité</a>
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</footer>
|
|
|
|
<script src="js/translations.js?v=20260603"></script>
|
|
<script src="js/main.js"></script>
|
|
<script>
|
|
document.getElementById('notifyForm')?.addEventListener('submit', function(e) {
|
|
e.preventDefault();
|
|
document.getElementById('notifySuccess').style.display = 'flex';
|
|
document.getElementById('notifySuccess').style.gap = '8px';
|
|
document.getElementById('notifySuccess').style.alignItems = 'center';
|
|
this.style.display = 'none';
|
|
});
|
|
</script>
|
|
</body>
|
|
</html>
|