migration wip

app/[locale]/contact/page.tsx

@@ -0,0 +1,137 @@
+import { notFound } from 'next/navigation';
+import { getPageBySlug, getAllPages, getMediaById } from '@/lib/data';
+import { Metadata } from 'next';
+import { SEO } from '@/components/SEO';
+import { processHTML } from '@/lib/html-compat';
+import { ContentRenderer } from '@/components/content/ContentRenderer';
+import { Breadcrumbs } from '@/components/content/Breadcrumbs';
+import { Hero } from '@/components/content/Hero';
+import { ContactForm } from '@/components/ContactForm';
+import { ResponsiveSection, ResponsiveWrapper } from '@/components/layout/ResponsiveWrapper';
+
+interface PageProps {
+  params: {
+    locale: string;
+  };
+}
+
+export async function generateStaticParams() {
+  const pages = await getAllPages();
+  // Filter for contact pages only
+  const contactPages = pages.filter(p => p.slug === 'contact' || p.slug === 'kontakt');
+  return contactPages.map((page) => ({
+    locale: page.locale,
+  }));
+}
+
+export async function generateMetadata({ params }: PageProps): Promise<Metadata> {
+  const { locale } = params;
+  const slug = locale === 'de' ? 'kontakt' : 'contact';
+  
+  const page = await getPageBySlug(slug, locale);
+
+  if (!page) {
+    return {
+      title: 'Contact Not Found',
+    };
+  }
+
+  return {
+    title: page.title,
+    description: page.excerptHtml || '',
+    alternates: {
+      languages: {
+        de: '/de/kontakt',
+        en: '/en/contact',
+      },
+    },
+  };
+}
+
+export default async function ContactPage({ params }: PageProps) {
+  const { locale } = params;
+  const slug = locale === 'de' ? 'kontakt' : 'contact';
+  
+  const page = await getPageBySlug(slug, locale);
+
+  if (!page) {
+    notFound();
+  }
+
+  // Get featured image if available
+  const featuredImage = page.featuredImage ? getMediaById(page.featuredImage) : null;
+
+  // Process the content
+  const contentToDisplay = page.contentHtml && page.contentHtml.trim() !== ''
+    ? page.contentHtml
+    : page.excerptHtml;
+  
+  const processedContent = processHTML(contentToDisplay || '');
+
+  // Breadcrumb items
+  const breadcrumbItems = [
+    { label: locale === 'de' ? 'Kontakt' : 'Contact' }
+  ];
+
+  return (
+    <>
+      <SEO
+        title={page.title}
+        description={page.excerptHtml || ''}
+      />
+      
+      {/* Breadcrumbs */}
+      <Breadcrumbs 
+        items={breadcrumbItems}
+        homeLabel={locale === 'de' ? 'Startseite' : 'Home'}
+        homeHref={`/${locale}`}
+      />
+
+      {/* Hero Section with Featured Image */}
+      {featuredImage && (
+        <Hero
+          title={page.title}
+          subtitle={page.excerptHtml ? processHTML(page.excerptHtml).replace(/<[^>]*>/g, '') : undefined}
+          backgroundImage={featuredImage.localPath}
+          backgroundAlt={page.title}
+          height="md"
+          variant="dark"
+          overlay={true}
+          overlayOpacity={0.5}
+        />
+      )}
+
+      {/* Main Content */}
+      <ResponsiveSection padding="responsive" maxWidth="4xl">
+        {!featuredImage && (
+          <ResponsiveWrapper stackOnMobile={true} centerOnMobile={true} className="mb-8">
+            <h1 className="text-3xl sm:text-4xl font-bold text-gray-900 mb-4">
+              {page.title}
+            </h1>
+            {page.excerptHtml && (
+              <ContentRenderer
+                content={processHTML(page.excerptHtml)}
+                className="text-lg sm:text-xl text-gray-600 leading-relaxed"
+              />
+            )}
+          </ResponsiveWrapper>
+        )}
+
+        {/* Content from WordPress */}
+        {processedContent && (
+          <ResponsiveWrapper className="bg-white rounded-lg shadow-sm p-6 sm:p-8 mb-12" container={true} maxWidth="full">
+            <ContentRenderer
+              content={processedContent}
+              className="prose prose-lg max-w-none"
+            />
+          </ResponsiveWrapper>
+        )}
+
+        {/* Contact Form */}
+        <ResponsiveWrapper className="bg-gray-50 rounded-lg p-6 sm:p-8" container={true} maxWidth="full">
+          <ContactForm />
+        </ResponsiveWrapper>
+      </ResponsiveSection>
+    </>
+  );
+}

app/[locale]/layout.tsx

@@ -41,6 +41,7 @@ export default function LocaleLayout({
       <Layout
         locale={locale}
         siteName="KLZ Cables"
+        logo="/media/logo.webp"
       >
         {children}
       </Layout>

app/layout.tsx

@@ -25,6 +25,10 @@ export const metadata: Metadata = {
     locale: 'en',
     siteName: 'KLZ Cables',
   },
+  icons: {
+    icon: '/favicon.ico',
+    apple: '/apple-touch-icon.png',
+  },
 };
 
 export default function RootLayout({
@@ -34,6 +38,10 @@ export default function RootLayout({
 }) {
   return (
     <html>
+      <head>
+        <link rel="icon" href="/favicon.ico" sizes="any" />
+        <link rel="apple-touch-icon" href="/apple-touch-icon.png" />
+      </head>
       <body className={inter.className}>
         {children}
       </body>