Redesign contact map section with elegant card layout
- Replace the cramped map-container layout with a polished map-card - Centered section header (h2 + gold-line + subtitle) above the card - Navy gradient header inside the card with gold location icon - Address displayed in the header alongside an "open in Google Maps" CTA - Increased map height to 420px (320px on mobile) - Soft shadow and gold-tinted border for premium feel - Added mapSubtitle translation key (FR/EN/MG) Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
MVA Global Fret
parent
b602e0d6f2
commit
39d3496758
22
contact.html
22
contact.html
@ -228,15 +228,31 @@
|
||||
</div>
|
||||
|
||||
<!-- CARTE -->
|
||||
<div class="map-container animate-on-scroll" style="margin-top: 64px;">
|
||||
<h3 style="margin-bottom: 16px;" data-i18n="contact.mapTitle">Notre Localisation</h3>
|
||||
<div class="map-section animate-on-scroll">
|
||||
<div class="section-header">
|
||||
<h2 data-i18n="contact.mapTitle">Notre Localisation</h2>
|
||||
<div class="gold-line"></div>
|
||||
<p data-i18n="contact.mapSubtitle">Notre siège au cœur d'Antananarivo</p>
|
||||
</div>
|
||||
<div class="map-card">
|
||||
<div class="map-card-header">
|
||||
<div class="map-card-icon"><i class="fa-solid fa-location-dot"></i></div>
|
||||
<div class="map-card-info">
|
||||
<strong>MVA Global Fret</strong>
|
||||
<span data-i18n="contact.addressValue">Antananarivo 101, Madagascar</span>
|
||||
</div>
|
||||
<a href="https://www.google.com/maps/place/Antananarivo,+Madagascar" target="_blank" rel="noopener noreferrer" class="map-card-cta" aria-label="Ouvrir dans Google Maps">
|
||||
<i class="fa-solid fa-arrow-up-right-from-square"></i>
|
||||
</a>
|
||||
</div>
|
||||
<iframe
|
||||
src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d119722.82983154597!2d47.46117785!3d-18.91368105!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x21f07e967738b369%3A0x3fac7a9b7c8ac!2sAntananarivo%2C%20Madagascar!5e0!3m2!1sfr!2sfr!4v1700000000000!5m2!1sfr!2sfr"
|
||||
width="100%" height="400" style="border:0;" allowfullscreen="" loading="lazy"
|
||||
width="100%" height="420" style="border:0; display:block;" allowfullscreen="" loading="lazy"
|
||||
referrerpolicy="no-referrer-when-downgrade"
|
||||
title="Carte Antananarivo Madagascar — MVA Global Fret">
|
||||
</iframe>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</section>
|
||||
|
||||
@ -990,6 +990,97 @@ p {
|
||||
border: none;
|
||||
}
|
||||
|
||||
/* Map section (Contact page) */
|
||||
.map-section {
|
||||
margin-top: 80px;
|
||||
}
|
||||
|
||||
.map-card {
|
||||
background: var(--white);
|
||||
border-radius: 20px;
|
||||
overflow: hidden;
|
||||
box-shadow: 0 20px 60px rgba(26, 26, 62, 0.12);
|
||||
border: 1px solid rgba(197, 165, 90, 0.15);
|
||||
}
|
||||
|
||||
.map-card-header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 18px;
|
||||
padding: 22px 28px;
|
||||
background: linear-gradient(135deg, var(--navy) 0%, #2a2a5e 100%);
|
||||
color: var(--white);
|
||||
}
|
||||
|
||||
.map-card-icon {
|
||||
flex-shrink: 0;
|
||||
width: 52px;
|
||||
height: 52px;
|
||||
border-radius: 14px;
|
||||
background: rgba(197, 165, 90, 0.18);
|
||||
border: 1px solid rgba(197, 165, 90, 0.4);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
color: var(--gold);
|
||||
font-size: 1.3rem;
|
||||
}
|
||||
|
||||
.map-card-info {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
.map-card-info strong {
|
||||
font-family: 'Poppins', sans-serif;
|
||||
font-size: 1.05rem;
|
||||
font-weight: 600;
|
||||
letter-spacing: 0.2px;
|
||||
margin-bottom: 2px;
|
||||
}
|
||||
|
||||
.map-card-info span {
|
||||
color: rgba(255, 255, 255, 0.7);
|
||||
font-size: 0.88rem;
|
||||
}
|
||||
|
||||
.map-card-cta {
|
||||
flex-shrink: 0;
|
||||
width: 44px;
|
||||
height: 44px;
|
||||
border-radius: 12px;
|
||||
background: var(--gold);
|
||||
color: var(--navy);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
text-decoration: none;
|
||||
font-size: 0.95rem;
|
||||
transition: transform 0.2s ease, box-shadow 0.2s ease;
|
||||
}
|
||||
|
||||
.map-card-cta:hover {
|
||||
transform: translateY(-2px);
|
||||
box-shadow: 0 8px 20px rgba(197, 165, 90, 0.4);
|
||||
}
|
||||
|
||||
.map-card iframe {
|
||||
display: block;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
@media (max-width: 600px) {
|
||||
.map-section { margin-top: 56px; }
|
||||
.map-card-header { padding: 16px 18px; gap: 12px; }
|
||||
.map-card-icon { width: 44px; height: 44px; font-size: 1.1rem; }
|
||||
.map-card-info strong { font-size: 0.95rem; }
|
||||
.map-card-info span { font-size: 0.8rem; }
|
||||
.map-card-cta { width: 40px; height: 40px; }
|
||||
.map-card iframe { height: 320px !important; }
|
||||
}
|
||||
|
||||
/* --- Guide page --- */
|
||||
.prohibited-grid {
|
||||
display: grid;
|
||||
|
||||
@ -154,6 +154,7 @@ const translations = {
|
||||
addressValue: "Antananarivo 101, Madagascar",
|
||||
facebook: "Facebook",
|
||||
mapTitle: "Notre Localisation",
|
||||
mapSubtitle: "Notre siège au cœur d'Antananarivo",
|
||||
messenger: "Messenger",
|
||||
messengerAction: "Discuter sur Messenger",
|
||||
priceReminder: "Rappel tarifaire",
|
||||
@ -426,6 +427,7 @@ const translations = {
|
||||
addressValue: "Antananarivo 101, Madagascar",
|
||||
facebook: "Facebook",
|
||||
mapTitle: "Our Location",
|
||||
mapSubtitle: "Our headquarters in the heart of Antananarivo",
|
||||
messenger: "Messenger",
|
||||
messengerAction: "Chat on Messenger",
|
||||
priceReminder: "Pricing Summary",
|
||||
@ -698,6 +700,7 @@ const translations = {
|
||||
addressValue: "Antananarivo 101, Madagasikara",
|
||||
facebook: "Facebook",
|
||||
mapTitle: "Ny Toeranay",
|
||||
mapSubtitle: "Ny biraonay eo afovoan'Antananarivo",
|
||||
messenger: "Messenger",
|
||||
messengerAction: "Resaka amin'ny Messenger",
|
||||
priceReminder: "Tsahivana ny sarany",
|
||||
|
||||
Loading…
Reference in New Issue
Block a user