ssr

app/[locale]/contact/page.tsx

@@ -2,10 +2,9 @@ import ContactForm from '@/components/ContactForm';
 import JsonLd from '@/components/JsonLd';
 import { Container, Heading, Section } from '@/components/ui';
 import { Metadata } from 'next';
-import { useTranslations } from 'next-intl';
 import { getTranslations } from 'next-intl/server';
+import { Suspense } from 'react';
 import dynamic from 'next/dynamic';
-
 const LeafletMap = dynamic(() => import('@/components/LeafletMap'), {
   ssr: false,
   loading: () => (
@@ -27,30 +26,48 @@ export async function generateMetadata({ params: { locale } }: ContactPageProps)
     title: t('title'),
     description: t('subtitle'),
     alternates: {
-      canonical: `/${locale}/contact`,
+      canonical: `https://klz-cables.com/${locale}/contact`,
       languages: {
-        'de': '/de/contact',
-        'en': '/en/contact',
-        'x-default': '/en/contact',
+        'de-DE': '/de/contact',
+        'en-US': '/en/contact',
       },
     },
     openGraph: {
       title: `${t('title')} | KLZ Cables`,
       description: t('subtitle'),
       url: `https://klz-cables.com/${locale}/contact`,
+      siteName: 'KLZ Cables',
+      images: [
+        {
+          url: 'https://klz-cables.com/logo.png',
+          width: 1200,
+          height: 630,
+          alt: 'KLZ Cables Contact',
+        },
+      ],
+      locale: `${locale.toUpperCase()}_DE`,
+      type: 'website',
     },
     twitter: {
       card: 'summary_large_image',
       title: `${t('title')} | KLZ Cables`,
       description: t('subtitle'),
+      images: ['https://klz-cables.com/logo.png'],
+    },
+    robots: {
+      index: true,
+      follow: true,
     },
   };
 }
 
-export default function ContactPage() {
-  const t = useTranslations('Contact');
-  const locale = t('locale') || 'en'; // Fallback if needed, but usually passed via params
+export async function generateStaticParams() {
+  return [{ locale: 'de' }, { locale: 'en' }];
+}
 
+export default async function ContactPage({ params }: ContactPageProps) {
+  const { locale } = params;
+  const t = await getTranslations({ locale, namespace: 'Contact' });
   return (
     <div className="flex flex-col min-h-screen bg-neutral-light">
       <JsonLd
@@ -194,7 +211,9 @@ export default function ContactPage() {
 
             {/* Contact Form */}
             <div className="lg:col-span-7">
-              <ContactForm />
+              <Suspense fallback={<div className="animate-pulse bg-neutral-medium h-96 rounded-2xl md:rounded-3xl"></div>}>
+                <ContactForm />
+              </Suspense>
             </div>
           </div>
         </Container>
@@ -202,11 +221,15 @@ export default function ContactPage() {
       
       {/* Map Section */}
       <section className="h-[300px] md:h-[500px] bg-neutral-medium relative overflow-hidden grayscale hover:grayscale-0 transition-all duration-1000">
-        <LeafletMap
-          address={t('info.address')}
-          lat={48.8164}
-          lng={9.4168}
-        />
+        <Suspense fallback={<div className="h-full w-full bg-neutral-medium animate-pulse flex items-center justify-center">
+          <div className="text-primary font-medium">Loading Map...</div>
+        </div>}>
+          <LeafletMap
+            address={t('info.address')}
+            lat={47.8407}
+            lng={11.1421}
+          />
+        </Suspense>
       </section>
     </div>
   );

components/home/Hero.tsx

@@ -1,3 +1,5 @@
+'use client';
+
 import React, { useState, useEffect } from 'react';
 import { useTranslations } from 'next-intl';
 import { Container, Button, Section, Heading } from '@/components/ui';