314 lines
16 KiB
HTML
314 lines
16 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="index.html" class="logo"><img src="PNG MVA GLOBAL FRET.png" alt="MVA Global Fret"></a>
|
|
<nav class="nav" aria-label="Navigation principale">
|
|
<a href="index.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="guide-envoi.html" data-i18n="nav.guide">Guide d'envoi</a>
|
|
<a href="contact.html" data-i18n="nav.contact">Contact</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="index.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="guide-envoi.html" data-i18n="nav.guide">Guide d'envoi</a>
|
|
<a href="contact.html" data-i18n="nav.contact">Contact</a>
|
|
<a href="application.html" data-i18n="nav.app">Application</a>
|
|
<div class="lang-switcher" style="margin-top:16px">
|
|
<button data-lang="fr" class="active">FR</button>
|
|
<button data-lang="en">EN</button>
|
|
<button data-lang="mg">MG</button>
|
|
</div>
|
|
</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">En vol vers Madagascar</div>
|
|
<div class="float-notif-sub">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">Tout</span>
|
|
<span class="itab">En transit</span>
|
|
<span class="itab">Livrées</span>
|
|
</div>
|
|
<div class="iphone-pkg">
|
|
<div class="ipkg-badge"><span class="ipkg-dot"></span>EN TRANSIT</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">Paire de sneakers</div>
|
|
<div class="ipkg-ref">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>Achat</span><span>Orly</span><span>Vol</span><span>Tana</span></div>
|
|
</div>
|
|
<div class="iphone-order">
|
|
<span class="iorder-dot"></span>
|
|
<span>Livrée · Vêtement</span>
|
|
<span class="iorder-price">195 000 Ar</span>
|
|
</div>
|
|
<div class="iphone-order">
|
|
<span class="iorder-dot"></span>
|
|
<span>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">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>Arrivé au dépôt Orly
|
|
</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">Moyens de Paiement Acceptés</h2>
|
|
<div class="gold-line"></div>
|
|
<p style="color: var(--text-light); margin-bottom: 40px;">Payez avec votre portefeuille mobile, en toute sécurité</p>
|
|
</div>
|
|
<div style="display: flex; justify-content: center; gap: 32px; flex-wrap: wrap;">
|
|
<div class="animate-on-scroll delay-1" style="text-align:center; padding: 24px 32px; background: var(--light-gray); border-radius: 16px; min-width: 140px;">
|
|
<i class="fa-solid fa-mobile-screen-button" style="font-size: 2.5rem; color: #2e9e5b; margin-bottom: 12px; display:block;"></i>
|
|
<strong style="display: block; color: var(--navy);">MVola</strong>
|
|
<span style="font-size: 0.8rem; color: var(--text-light);">Yas Madagascar</span>
|
|
</div>
|
|
<div class="animate-on-scroll delay-2" style="text-align:center; padding: 24px 32px; background: var(--light-gray); border-radius: 16px; min-width: 140px;">
|
|
<i class="fa-solid fa-mobile-screen-button" style="font-size: 2.5rem; color: #ff6600; margin-bottom: 12px; display:block;"></i>
|
|
<strong style="display: block; color: var(--navy);">Orange Money</strong>
|
|
<span style="font-size: 0.8rem; color: var(--text-light);">Orange Madagascar</span>
|
|
</div>
|
|
<div class="animate-on-scroll delay-3" style="text-align:center; padding: 24px 32px; background: var(--light-gray); border-radius: 16px; min-width: 140px;">
|
|
<i class="fa-solid fa-mobile-screen-button" style="font-size: 2.5rem; color: #e2000f; margin-bottom: 12px; display:block;"></i>
|
|
<strong style="display: block; color: var(--navy);">Airtel Money</strong>
|
|
<span style="font-size: 0.8rem; color: var(--text-light);">Airtel Madagascar</span>
|
|
</div>
|
|
<div class="animate-on-scroll delay-4" style="text-align:center; padding: 24px 32px; background: var(--light-gray); border-radius: 16px; min-width: 140px;">
|
|
<i class="fa-solid fa-credit-card" style="font-size: 2.5rem; color: #1a1a3e; margin-bottom: 12px; display:block;"></i>
|
|
<strong style="display: block; color: var(--navy);">Carte Bancaire</strong>
|
|
<span style="font-size: 0.8rem; color: var(--text-light);">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);">Prochainement</h2>
|
|
<p style="color: rgba(255,255,255,0.75); margin-bottom: 24px;">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> S'inscrire maintenant
|
|
</a>
|
|
<a href="tarifs.html" class="btn btn-white">
|
|
<i class="fa-solid fa-tag"></i> Voir les tarifs
|
|
</a>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
</main>
|
|
|
|
<footer class="footer" role="contentinfo">
|
|
<div class="container">
|
|
<div class="footer-grid">
|
|
<div class="footer-brand">
|
|
<a href="index.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="index.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="guide-envoi.html" data-i18n="nav.guide">Guide d'envoi</a></li>
|
|
<li><a href="contact.html" data-i18n="nav.contact">Contact</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">© 2025 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;">Conditions Générales de Vente</a></p>
|
|
</div>
|
|
</div>
|
|
</footer>
|
|
|
|
<script src="js/translations.js"></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>
|