serge/site-mva-global-fret
1
0
Fork 0
Code Issues Pull Requests 1 Actions Packages Projects Releases Wiki Activity
b602e0d6f2
site-mva-global-fret/index.html
MVA Global Fret ae85f2944b fix(i18n): traduire tous les textes codés en dur en français sur l'ensemble du site 
Ajout de data-i18n sur tous les éléments non traduits (tarifs, contact, guide,
application, accueil) et ajout des clés correspondantes en FR/EN/MG dans
translations.js : détails tarifaires, cartes livraison, stats accueil, sections
CTA, récapitulatif contact, footer CGV.

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
2026-05-04 17:31:40 +02:00

272 lines
13 KiB
HTML
Raw Blame History

<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>MVA Global Fret — Fret Aérien Paris Antananarivo Madagascar</title>
<meta name="description" content="MVA Global Fret, votre spécialiste du fret aérien entre Paris et Antananarivo. 2 envois par semaine, livraison en 2 semaines à compter du dépôt à Paris. Service client 7j/7.">
<meta property="og:title" content="MVA Global Fret — Fret Aérien Paris Antananarivo">
<meta property="og:description" content="Votre partenaire de confiance pour l'envoi de colis entre la France et Madagascar.">
<meta property="og:type" content="website">
<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 -->
<header class="header" id="header">
<div class="container header-inner">
<a href="index.html" class="logo" aria-label="MVA Global Fret - Accueil">
<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">Prochainement</a>
</nav>
<div class="header-right">
<div class="lang-switcher" role="group" aria-label="Choisir la langue">
<button data-lang="fr" class="active" aria-label="Français">FR</button>
<button data-lang="en" aria-label="English">EN</button>
<button data-lang="mg" aria-label="Malagasy">MG</button>
</div>
<button class="menu-toggle" id="menuToggle" aria-label="Ouvrir le menu" aria-expanded="false">
<span></span><span></span><span></span>
</button>
</div>
</div>
</header>
<!-- MOBILE NAV -->
<nav class="mobile-nav" id="mobileNav" aria-label="Navigation mobile">
<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">Prochainement</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">
<!-- HERO -->
<section class="hero" style="background-image: url('https://images.unsplash.com/photo-1436491865332-7a61a109cc05?w=1600&q=80');" aria-label="Bannière principale">
<div class="hero-content animate-on-scroll">
<h1>
<span data-i18n="home.heroTitle">Fret Aérien</span><br>
<span class="highlight" data-i18n="home.heroTitleHighlight">Paris — Antananarivo</span>
</h1>
<p data-i18n="home.heroSubtitle">Votre partenaire de confiance pour l'envoi de colis entre la France et Madagascar. Rapide, fiable et à taille humaine.</p>
<div class="hero-buttons">
<a href="contact.html" class="btn btn-primary">
<i class="fa-solid fa-user-plus"></i>
<span data-i18n="home.heroCta">S'inscrire maintenant</span>
</a>
<a href="tarifs.html" class="btn btn-secondary">
<i class="fa-solid fa-tag"></i>
<span data-i18n="home.heroCtaSecondary">Nos tarifs</span>
</a>
</div>
</div>
</section>
<!-- SERVICES -->
<section class="section" aria-labelledby="services-title">
<div class="container">
<div class="section-header animate-on-scroll">
<h2 id="services-title" data-i18n="home.servicesTitle">Nos Services</h2>
<div class="gold-line"></div>
<p data-i18n="home.servicesSubtitle">Un service de fret aérien premium entre l'Europe et Madagascar</p>
</div>
<div class="grid-3">
<div class="card icon-box animate-on-scroll delay-1">
<div class="card-icon">
<i class="fa-solid fa-plane-departure" aria-hidden="true"></i>
</div>
<h3 data-i18n="home.service1Title">2 Envois par Semaine</h3>
<p data-i18n="home.service1Desc">Deux départs hebdomadaires de Paris vers Antananarivo pour une flexibilité maximale.</p>
</div>
<div class="card icon-box animate-on-scroll delay-2">
<div class="card-icon">
<i class="fa-solid fa-clock" aria-hidden="true"></i>
</div>
<h3 data-i18n="home.service2Title">Livraison en 2 Semaines</h3>
<p data-i18n="home.service2Desc">Vos colis arrivent à destination en seulement deux semaines.</p>
</div>
<div class="card icon-box animate-on-scroll delay-3">
<div class="card-icon">
<i class="fa-solid fa-headset" aria-hidden="true"></i>
</div>
<h3 data-i18n="home.service3Title">Service Client 7j/7</h3>
<p data-i18n="home.service3Desc">Une équipe dédiée disponible tous les jours pour répondre à vos questions.</p>
</div>
</div>
</div>
</section>
<!-- ABOUT PREVIEW -->
<section class="section section-gray" aria-labelledby="about-preview-title">
<div class="container">
<div class="about-preview">
<div class="about-preview-img animate-on-scroll">
<img src="https://images.unsplash.com/photo-1586528116311-ad8dd3c8310d?w=800&q=80" alt="Équipe MVA Global Fret — fret aérien entre l'Europe et Madagascar" loading="lazy">
</div>
<div class="animate-on-scroll delay-2">
<h2 id="about-preview-title" data-i18n="home.aboutTitle">Qui sommes-nous ?</h2>
<div class="gold-line" style="margin: 16px 0;"></div>
<p data-i18n="home.aboutText">MVA Global Fret est une entreprise à taille humaine spécialisée dans le fret aérien entre l'Europe et Madagascar. Notre priorité : la qualité du service et la satisfaction de nos clients.</p>
<a href="about.html" class="btn btn-primary" style="margin-top: 8px;">
<i class="fa-solid fa-arrow-right"></i>
<span data-i18n="home.aboutCta">En savoir plus</span>
</a>
</div>
</div>
</div>
</section>
<!-- HOW IT WORKS -->
<section class="section" aria-labelledby="how-title">
<div class="container">
<div class="section-header animate-on-scroll">
<h2 id="how-title" data-i18n="home.howTitle">Comment ça marche ?</h2>
<div class="gold-line"></div>
<p data-i18n="home.howSubtitle">Trois étapes simples pour envoyer vos colis</p>
</div>
<div class="steps animate-on-scroll">
<div class="step">
<div class="step-number" aria-hidden="true">1</div>
<div class="step-content">
<h3 data-i18n="home.step1Title">Inscription</h3>
<p data-i18n="home.step1Desc">Inscrivez-vous en ligne et recevez votre numéro de référence client ainsi que l'adresse de dépôt à Paris.</p>
</div>
</div>
<div class="step">
<div class="step-number" aria-hidden="true">2</div>
<div class="step-content">
<h3 data-i18n="home.step2Title">Envoi du Colis</h3>
<p data-i18n="home.step2Desc">Déposez ou faites livrer votre colis à notre adresse parisienne. Nous nous occupons du reste.</p>
</div>
</div>
<div class="step">
<div class="step-number" aria-hidden="true">3</div>
<div class="step-content">
<h3 data-i18n="home.step3Title">Réception</h3>
<p data-i18n="home.step3Desc">Votre colis arrive à Antananarivo en 2 semaines. Paiement à la réception après contre-pesée.</p>
</div>
</div>
</div>
</div>
</section>
<!-- STATS BAND -->
<section class="section section-navy" style="background: var(--navy); padding: 48px 0;" aria-label="Chiffres clés">
<div class="container">
<div class="grid-3" style="text-align:center; gap: 32px;">
<div class="animate-on-scroll delay-1">
<div style="font-family: var(--font-heading); font-size: 3rem; font-weight: 700; color: var(--gold);">2</div>
<p style="color: rgba(255,255,255,0.8); margin:0;" data-i18n="home.stat1Label">Envois / semaine</p>
</div>
<div class="animate-on-scroll delay-2">
<div style="font-family: var(--font-heading); font-size: 3rem; font-weight: 700; color: var(--gold);">2</div>
<p style="color: rgba(255,255,255,0.8); margin:0;" data-i18n="home.stat2Label">Semaines depuis le dépôt Paris</p>
</div>
<div class="animate-on-scroll delay-3">
<div style="font-family: var(--font-heading); font-size: 3rem; font-weight: 700; color: var(--gold);">7</div>
<p style="color: rgba(255,255,255,0.8); margin:0;" data-i18n="home.stat3Label">Personnes dédiées</p>
</div>
</div>
</div>
</section>
<!-- CTA BANNER -->
<section class="cta-banner" aria-labelledby="cta-title">
<div class="container animate-on-scroll">
<h2 id="cta-title" data-i18n="home.ctaTitle">Prêt à envoyer vos colis ?</h2>
<p data-i18n="home.ctaSubtitle">Inscrivez-vous dès maintenant et recevez votre numéro de référence client.</p>
<a href="contact.html" class="btn btn-primary">
<i class="fa-solid fa-user-plus"></i>
<span data-i18n="home.ctaCta">S'inscrire</span>
</a>
</div>
</section>
</main>
<!-- FOOTER -->
<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 MVA Global Fret">
<i class="fa-brands fa-facebook-f"></i>
</a>
<a href="https://m.me/61573448820736" target="_blank" rel="noopener noreferrer" aria-label="Messenger MVA Global Fret">
<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>
<li><a href="application.html" data-i18n="nav.app">Prochainement</a></li>
</ul>
</div>
<div>
<h4 data-i18n="footer.contactTitle">Contact</h4>
<div class="footer-contact-item">
<i class="fa-solid fa-phone" aria-hidden="true"></i>
<a href="tel:+261384973751">+261 38 49 737 51</a>
</div>
<div class="footer-contact-item">
<i class="fa-solid fa-phone" aria-hidden="true"></i>
<a href="tel:+33780970825">+33 7 80 97 08 25</a>
</div>
<div class="footer-contact-item">
<i class="fa-solid fa-envelope" aria-hidden="true"></i>
<a href="mailto:mvaglobalfret@gmail.com">mvaglobalfret@gmail.com</a>
</div>
<div class="footer-contact-item">
<i class="fa-solid fa-location-dot" aria-hidden="true"></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;" data-i18n="footer.cgv">Conditions Générales de Vente</a></p>
</div>
</div>
</footer>
<script src="js/translations.js"></script>
<script src="js/main.js"></script>
</body>
</html>
Reference in New Issue View Git Blame Copy Permalink