build

app/[locale]/contact/page.tsx

@@ -7,7 +7,7 @@ import { getTranslations } from 'next-intl/server';
 import dynamic from 'next/dynamic';
 
 const LeafletMap = dynamic(() => import('@/components/LeafletMap'), {
-,
+  ssr: false,
   loading: () => (
     <div className="h-full w-full bg-neutral-medium flex items-center justify-center">
       <div className="animate-pulse text-primary font-medium">Loading Map...</div>
@@ -200,18 +200,13 @@ export default function ContactPage() {
         </Container>
       </Section>
       
-      {/* Map Placeholder */}
+      {/* Map Section */}
       <section className="h-[300px] md:h-[500px] bg-neutral-medium relative overflow-hidden grayscale hover:grayscale-0 transition-all duration-1000">
-        <div className="absolute inset-0 flex items-center justify-center">
-          <div className="text-center">
-            <div className="w-20 h-20 bg-primary rounded-full flex items-center justify-center text-white mb-4 mx-auto shadow-2xl animate-bounce">
-              <svg className="w-10 h-10" fill="none" viewBox="0 0 24 24" stroke="currentColor">
-                <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M17.657 16.657L13.414 20.9a1.998 1.998 0 01-2.827 0l-4.244-4.243a8 8 0 1111.314 0z" />
-              </svg>
-            </div>
-            <p className="font-bold text-primary text-xl">{t('map.comingSoon')}</p>
-          </div>
-        </div>
+        <LeafletMap
+          address={t('info.address')}
+          lat={48.8164}
+          lng={9.4168}
+        />
       </section>
     </div>
   );

components/LeafletMap.tsx

@@ -3,7 +3,6 @@
 import { MapContainer, TileLayer, Marker, Popup } from 'react-leaflet';
 import L from 'leaflet';
 import 'leaflet/dist/leaflet.css';
-import { useEffect } from 'react';
 
 // Fix for default marker icon in Leaflet with Next.js
 const DefaultIcon = L.icon({

lib/schema.ts

@@ -1,4 +1,5 @@
 
+export const SITE_URL = 'https://klz-cables.com';
 export const LOGO_URL = `${SITE_URL}/logo.png`;
 
 export const getOrganizationSchema = () => ({