<!-- Leaflet CSS & JS included for the map -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/leaflet/1.9.4/leaflet.css" crossorigin="anonymous" referrerpolicy="no-referrer" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/leaflet/1.9.4/leaflet.min.js" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<div class="contact-section">
<div class="contact-grid">
<div class="contact-form-panel">
<h2>Get in Touch</h2>
<p>We would love to hear from you. Drop us a line and we will get back to you shortly.</p>
<div class="form-group">
<label>Full Name</label>
<input type="text" placeholder="John Doe">
</div>
<div class="form-group">
<label>Email Address</label>
<input type="email" placeholder="john@example.com">
</div>
<div class="form-group">
<label>Message</label>
<textarea rows="4" placeholder="How can we help?"></textarea>
</div>
<button class="submit-btn">Send Message</button>
</div>
<div class="map-panel">
<div id="map-custom"></div>
<div class="contact-info-card">
<div class="info-item">
<svg viewBox="0 0 24 24" width="20" height="20" fill="none" stroke="currentColor" stroke-width="2"><path d="M21 10c0 7-9 13-9 13s-9-6-9-13a9 9 0 0 1 18 0z"></path><circle cx="12" cy="10" r="3"></circle></svg>
<span>123 Design Avenue, Paris</span>
</div>
<div class="info-item">
<svg viewBox="0 0 24 24" width="20" height="20" fill="none" stroke="currentColor" stroke-width="2"><path d="M22 16.92v3a2 2 0 0 1-2.18 2 19.79 19.79 0 0 1-8.63-3.07 19.5 19.5 0 0 1-6-6 19.79 19.79 0 0 1-3.07-8.67A2 2 0 0 1 4.11 2h3a2 2 0 0 1 2 1.72 12.84 12.84 0 0 0 .7 2.81 2 2 0 0 1-.45 2.11L8.09 9.91a16 16 0 0 0 6 6l1.27-1.27a2 2 0 0 1 2.11-.45 12.84 12.84 0 0 0 2.81.7A2 2 0 0 1 22 16.92z"></path></svg>
<span>+33 1 23 45 67 89</span>
</div>
</div>
</div>
</div>
</div>
*, *::before, *::after {
box-sizing: border-box;
}
body {
font-family: system-ui, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
background: #f1f5f9;
margin: 0;
display: flex;
justify-content: center;
align-items: center;
min-height: 100vh;
padding: 40px 20px;
}
.contact-section {
width: 100%;
max-width: 1100px;
background: #ffffff;
border-radius: 24px;
box-shadow: 0 20px 40px -10px rgba(0, 0, 0, 0.1);
overflow: hidden;
}
.contact-grid {
display: grid;
grid-template-columns: 1fr 1fr;
}
.contact-form-panel {
padding: 60px 50px;
display: flex;
flex-direction: column;
justify-content: center;
}
.contact-form-panel h2 {
margin: 0 0 10px 0;
font-size: 2.5rem;
color: #0f172a;
letter-spacing: -1px;
}
.contact-form-panel p {
color: #64748b;
font-size: 1.125rem;
margin-bottom: 40px;
line-height: 1.6;
}
.form-group {
margin-bottom: 24px;
}
.form-group label {
display: block;
margin-bottom: 8px;
font-weight: 600;
color: #334155;
font-size: 0.95rem;
}
.form-group input,
.form-group textarea {
width: 100%;
padding: 16px;
background: #f8fafc;
border: 1px solid transparent;
border-radius: 12px;
font-family: inherit;
font-size: 1rem;
color: #0f172a;
transition: all 0.3s ease;
resize: vertical;
}
.form-group input:focus,
.form-group textarea:focus {
outline: none;
background: #ffffff;
border-color: #3b82f6;
box-shadow: 0 0 0 4px rgba(59, 130, 246, 0.15);
}
.submit-btn {
background: #3b82f6;
color: #ffffff;
border: none;
padding: 18px;
border-radius: 12px;
font-size: 1.125rem;
font-weight: 600;
cursor: pointer;
transition: background 0.3s ease, transform 0.2s ease;
margin-top: 10px;
}
.submit-btn:hover {
background: #2563eb;
transform: translateY(-2px);
}
.map-panel {
position: relative;
min-height: 600px;
background: #e2e8f0;
}
#map-custom {
width: 100%;
height: 100%;
z-index: 1;
}
.contact-info-card {
position: absolute;
bottom: 40px;
left: 40px;
right: 40px;
background: rgba(255, 255, 255, 0.85);
backdrop-filter: blur(16px);
padding: 24px;
border-radius: 16px;
box-shadow: 0 15px 30px -5px rgba(0, 0, 0, 0.2);
z-index: 1000; /* Important to place above Leaflet elements */
display: flex;
flex-direction: column;
gap: 16px;
border: 1px solid rgba(255, 255, 255, 0.5);
}
.info-item {
display: flex;
align-items: center;
gap: 12px;
color: #0f172a;
font-weight: 600;
font-size: 1.05rem;
}
.info-item svg {
color: #3b82f6;
flex-shrink: 0;
}
@media (max-width: 900px) {
.contact-grid {
grid-template-columns: 1fr;
}
.map-panel {
height: 450px;
min-height: auto;
}
.contact-form-panel {
padding: 40px 24px;
}
.contact-info-card {
bottom: 20px;
left: 20px;
right: 20px;
}
}
// We use a small timeout to ensure the Leaflet CDN script is fully loaded before executing
setTimeout(function() {
// Note: We use L.latLng() instead of standard arrays to avoid database text parser conflicts
const mapCenter = L.latLng(48.8566, 2.3522);
const map = L.map("map-custom").setView(mapCenter, 13);
L.tileLayer("https://tile.openstreetmap.org/{z}/{x}/{y}.png", {
maxZoom: 19,
attribution: "OpenStreetMap"
}).addTo(map);
// Note: We use L.point() instead of standard arrays for the same reason
const storeIcon = L.icon({
iconUrl: "https://placehold.co/50x50/3b82f6/ffffff?text=Store",
iconSize: L.point(50, 50),
iconAnchor: L.point(25, 50),
popupAnchor: L.point(0, -50)
});
L.marker(mapCenter, {icon: storeIcon}).addTo(map)
.bindPopup("<b>Main Store</b><br>Come visit us today!")
.openPopup();
}, 500);
