fix: center success and error messages within the RequestQuoteForm component.

.dockerignore

@@ -1,5 +1,6 @@
 node_modules
 .next
+!.next/cache
 .git
 .DS_Store
 .env

.env

@@ -19,3 +19,17 @@ MAIL_USERNAME=postmaster@mg.mintel.me
 MAIL_PASSWORD=4592fcb94599ee1a45b4ac2386fd0a64-102c75d8-ca2870e6
 MAIL_FROM="KLZ Cables <postmaster@mg.mintel.me>"
 MAIL_RECIPIENTS=marc@cablecreations.de,info@klz-cables.com
+
+# Directus
+DIRECTUS_URL=https://cms.klz-cables.com
+DIRECTUS_KEY=59fb8f4c1a51b18fe28ad947f713914e
+DIRECTUS_SECRET=7459038d41401dfb11254cf7f1ef2d0f
+DIRECTUS_ADMIN_EMAIL=marc@mintel.me
+DIRECTUS_ADMIN_PASSWORD=Tim300493.
+DIRECTUS_DB_NAME=directus
+DIRECTUS_DB_USER=directus
+# Local Development
+PROJECT_NAME=klz-cables
+TRAEFIK_HOST=klz.localhost
+DIRECTUS_HOST=cms.klz.localhost
+GATEKEEPER_PASSWORD=klz2026

.env.example

@@ -10,6 +10,11 @@
 # ────────────────────────────────────────────────────────────────────────────
 NODE_ENV=development
 NEXT_PUBLIC_BASE_URL=http://localhost:3000
+# TARGET is used to differentiate between environments (testing, staging, production)
+# NEXT_PUBLIC_TARGET makes this information available to the frontend
+NEXT_PUBLIC_TARGET=development
+# TARGET is used server-side
+TARGET=development
 
 # ────────────────────────────────────────────────────────────────────────────
 # Analytics (Umami)
@@ -39,6 +44,10 @@ MAIL_RECIPIENTS=info@klz-cables.com
 # Logging
 # ────────────────────────────────────────────────────────────────────────────
 LOG_LEVEL=info
+GATEKEEPER_PASSWORD=klz2026
+SENTRY_DSN=
+# For Directus Error Tracking
+# SENTRY_ENVIRONMENT is set automatically by CI
 
 # ────────────────────────────────────────────────────────────────────────────
 # Deployment Configuration (CI/CD only)
@@ -49,9 +58,9 @@ TRAEFIK_HOST=klz-cables.com
 ENV_FILE=.env
 
 # ────────────────────────────────────────────────────────────────────────────
-# Varnish Cache (Docker only)
+# Varnish Configuration
 # ────────────────────────────────────────────────────────────────────────────
-VARNISH_CACHE_SIZE=256m
+VARNISH_CACHE_SIZE=256M
 
 # ============================================================================
 # IMPORTANT NOTES

.env.production

@@ -26,6 +26,15 @@ MAIL_PASSWORD=
 MAIL_FROM=KLZ Cables <noreply@klz-cables.com>
 MAIL_RECIPIENTS=info@klz-cables.com
 
+# Strapi
+STRAPI_DATABASE_NAME=strapi
+STRAPI_DATABASE_USERNAME=strapi
+STRAPI_DATABASE_PASSWORD=
+APP_KEYS=
+API_TOKEN_SALT=
+ADMIN_JWT_SECRET=
+TRANSFER_TOKEN_SALT=
+JWT_SECRET=
 
 # Varnish Cache Size (optional)
 VARNISH_CACHE_SIZE=256m

.eslintrc.json

@@ -1,12 +1,16 @@
 {
-  "extends": ["next/core-web-vitals", "next/typescript"],
+  "extends": ["next/core-web-vitals", "next/typescript", "prettier"],
   "rules": {
     "@typescript-eslint/no-explicit-any": "off",
-    "@typescript-eslint/no-unused-vars": ["warn", { "argsIgnorePattern": "^_" }],
+    "@typescript-eslint/no-unused-vars": [
+      "warn",
+      {
+        "argsIgnorePattern": "^_"
+      }
+    ],
     "@typescript-eslint/no-require-imports": "off",
     "prefer-const": "warn",
     "react/no-unescaped-entities": "off",
     "@next/next/no-img-element": "warn"
   }
 }
-

.gitea/workflows/ci.yml

@@ -0,0 +1,32 @@
+name: CI - Lint, Typecheck & Test
+
+on:
+  push:
+    branches-ignore:
+      - main
+  pull_request:
+
+jobs:
+  quality-assurance:
+    runs-on: docker
+    steps:
+      - name: Checkout repository
+        uses: actions/checkout@v4
+
+      - name: Setup Node.js
+        uses: actions/setup-node@v4
+        with:
+          node-version: 20
+          cache: 'npm'
+
+      - name: Install dependencies
+        run: npm ci
+
+      - name: 🔍 Lint
+        run: npm run lint
+
+      - name: 🏗️ Typecheck
+        run: npm run typecheck
+
+      - name: 🧪 Test
+        run: npm run test

.gitea/workflows/deploy.yml

@@ -6,68 +6,103 @@ on:
       - main
     tags:
       - 'v*'
+  workflow_dispatch:
+    inputs:
+      skip_long_checks:
+        description: 'Skip tests? (true/false)'
+        required: false
+        default: 'false'
+
+concurrency:
+  group: ${{ github.workflow }}-${{ (github.ref_type == 'tag' && !contains(github.ref_name, '-')) && 'prod' || (github.ref_type == 'tag' && 'staging' || 'testing') }}
+  cancel-in-progress: true
 
 jobs:
-  build-and-deploy:
+  # ──────────────────────────────────────────────────────────────────────────────
+  # JOB 1: Prepare & Determine Environment
+  # ──────────────────────────────────────────────────────────────────────────────
+  prepare:
+    name: 🔍 Prepare Environment
     runs-on: docker
-
+    outputs:
+      target:           ${{ steps.determine.outputs.target }}
+      image_tag:        ${{ steps.determine.outputs.image_tag }}
+      env_file:         ${{ steps.determine.outputs.env_file }}
+      traefik_host:     ${{ steps.determine.outputs.traefik_host }}
+      next_public_base_url: ${{ steps.determine.outputs.next_public_base_url }}
+      directus_url:     ${{ steps.determine.outputs.directus_url }}
+      directus_host:    ${{ steps.determine.outputs.directus_host }}
+      project_name:     ${{ steps.determine.outputs.project_name }}
+      is_prod:          ${{ steps.determine.outputs.is_prod }}
+      gotify_title:     ${{ steps.determine.outputs.gotify_title }}
+      gotify_priority:  ${{ steps.determine.outputs.gotify_priority }}
+      short_sha:        ${{ steps.determine.outputs.short_sha }}
+      commit_msg:       ${{ steps.determine.outputs.commit_msg }}
+    container:
+      image: catthehacker/ubuntu:act-latest
     steps:
-      # ──────────────────────────────────────────────────────────────────────────────
-      # Workflow Start & Basic Info
-      # ──────────────────────────────────────────────────────────────────────────────
-      - name: 📢 Workflow Start
+      - name: 🧹 Maintenance (High Density Cleanup)
+        shell: bash
         run: |
-          echo "┌──────────────────────────────────────────────────────────────┐"
-          echo "│ 🚀 KLZ Cables Deployment Workflow gestartet                  │"
-          echo "├──────────────────────────────────────────────────────────────┤"
-          echo "│ Repository: ${{ github.repository }}                        │"
-          echo "│ Ref:        ${{ github.ref }}                               │"
-          echo "│ Ref-Name:   ${{ github.ref_name }}                          │"
-          echo "│ Commit:     ${{ github.sha }}                               │"
-          echo "│ Actor:      ${{ github.actor }}                             │"
-          echo "│ Datum:      $(date -u +'%Y-%m-%d %H:%M:%S UTC')             │"
-          echo "└──────────────────────────────────────────────────────────────┘"
+          echo "Purging old build layers and dangling images..."
+          docker image prune -f
+          docker builder prune -f --filter "until=6h"
 
       - name: Checkout repository
         uses: actions/checkout@v4
         with:
-          fetch-depth: 0
+          fetch-depth: 2
+
 
-      # ──────────────────────────────────────────────────────────────────────────────
-      # Environment bestimmen + Commit-Message holen
-      # ──────────────────────────────────────────────────────────────────────────────
       - name: 🔍 Environment & Version ermitteln
         id: determine
+        shell: bash
         run: |
           TAG="${{ github.ref_name }}"
-          SHORT_SHA="${{ github.sha }}"
-          SHORT_SHA="${SHORT_SHA:0:9}"
-
-          # Commit-Message holen (erste Zeile)
+          SHORT_SHA=$(echo "${{ github.sha }}" | cut -c1-9)
+          IMAGE_TAG="sha-${SHORT_SHA}"
           COMMIT_MSG=$(git log -1 --pretty=%s || echo "No commit message available")
 
           if [[ "${{ github.ref_type }}" == "branch" && "$TAG" == "main" ]]; then
-            TARGET="testing"
-            IMAGE_TAG="main-${SHORT_SHA}"
-            ENV_FILE=".env.testing"
-            TRAEFIK_HOST="\`testing.klz-cables.com\`"
-            IS_PROD="false"
-            GOTIFY_TITLE="🧪 Testing-Deploy"
-            GOTIFY_PRIORITY=4
+            if [[ "$COMMIT_MSG" =~ ^chore: ]]; then
+              TARGET="skip"
+              GOTIFY_TITLE="ℹ️ Skip Deploy (Chore)"
+              GOTIFY_PRIORITY=2
+            else
+              TARGET="testing"
+              IMAGE_TAG="main-${SHORT_SHA}"
+              ENV_FILE=".env.testing"
+              TRAEFIK_HOST="testing.klz-cables.com"
+              NEXT_PUBLIC_BASE_URL="https://testing.klz-cables.com"
+              DIRECTUS_URL="https://cms.testing.klz-cables.com"
+              DIRECTUS_HOST="cms.testing.klz-cables.com"
+              PROJECT_NAME="klz-cables-testing"
+              IS_PROD="false"
+              GOTIFY_TITLE="🧪 Testing-Deploy"
+              GOTIFY_PRIORITY=4
+            fi
           elif [[ "${{ github.ref_type }}" == "tag" ]]; then
             if [[ "$TAG" =~ ^v[0-9]+\.[0-9]+\.[0-9]+$ ]]; then
               TARGET="production"
               IMAGE_TAG="$TAG"
               ENV_FILE=".env.prod"
-              TRAEFIK_HOST="\`klz-cables.com\`, \`www.klz-cables.com\`"
+              TRAEFIK_HOST="klz-cables.com, www.klz-cables.com"
+              NEXT_PUBLIC_BASE_URL="https://klz-cables.com"
+              DIRECTUS_URL="https://cms.klz-cables.com"
+              DIRECTUS_HOST="cms.klz-cables.com"
+              PROJECT_NAME="klz-cables-prod"
               IS_PROD="true"
               GOTIFY_TITLE="🚀 Production-Release"
               GOTIFY_PRIORITY=6
-            elif [[ "$TAG" =~ -rc\. || "$TAG" =~ -beta\. || "$TAG" =~ -alpha\. ]]; then
+            elif [[ "$TAG" =~ -rc || "$TAG" =~ -beta || "$TAG" =~ -alpha ]]; then
               TARGET="staging"
               IMAGE_TAG="$TAG"
               ENV_FILE=".env.staging"
-              TRAEFIK_HOST="\`staging.klz-cables.com\`"
+              TRAEFIK_HOST="staging.klz-cables.com"
+              NEXT_PUBLIC_BASE_URL="https://staging.klz-cables.com"
+              DIRECTUS_URL="https://cms.staging.klz-cables.com"
+              DIRECTUS_HOST="cms.staging.klz-cables.com"
+              PROJECT_NAME="klz-cables-staging"
               IS_PROD="false"
               GOTIFY_TITLE="🧪 Staging-Deploy (Pre-Release)"
               GOTIFY_PRIORITY=5
@@ -80,86 +115,168 @@ jobs:
             TARGET="skip"
           fi
 
-          echo "target=$TARGET" >> $GITHUB_OUTPUT
-          echo "image_tag=$IMAGE_TAG" >> $GITHUB_OUTPUT
-          echo "env_file=$ENV_FILE" >> $GITHUB_OUTPUT
-          echo "traefik_host=$TRAEFIK_HOST" >> $GITHUB_OUTPUT
-          echo "is_prod=$IS_PROD" >> $GITHUB_OUTPUT
-          echo "gotify_title=$GOTIFY_TITLE" >> $GITHUB_OUTPUT
-          echo "gotify_priority=$GOTIFY_PRIORITY" >> $GITHUB_OUTPUT
-          echo "short_sha=$SHORT_SHA" >> $GITHUB_OUTPUT
-          echo "commit_msg=$COMMIT_MSG" >> $GITHUB_OUTPUT
+          {
+            echo "target=$TARGET"
+            echo "image_tag=$IMAGE_TAG"
+            echo "env_file=$ENV_FILE"
+            echo "traefik_host=$TRAEFIK_HOST"
+            echo "next_public_base_url=$NEXT_PUBLIC_BASE_URL"
+            echo "directus_url=$DIRECTUS_URL"
+            echo "directus_host=$DIRECTUS_HOST"
+            echo "project_name=$PROJECT_NAME"
+            echo "is_prod=$IS_PROD"
+            echo "gotify_title=$GOTIFY_TITLE"
+            echo "gotify_priority=$GOTIFY_PRIORITY"
+            echo "short_sha=$SHORT_SHA"
+            echo "commit_msg=$COMMIT_MSG"
+          } >> "$GITHUB_OUTPUT"
 
-      - name: ⏭️ Skip Deployment
-        if: steps.determine.outputs.target == 'skip'
+  # ──────────────────────────────────────────────────────────────────────────────
+  # JOB 2: Quality Assurance (Lint & Test)
+  # ──────────────────────────────────────────────────────────────────────────────
+  qa:
+    name: 🧪 Quality Assurance
+    needs: prepare
+    if: needs.prepare.outputs.target != 'skip'
+    runs-on: docker
+    container:
+      image: catthehacker/ubuntu:act-latest
+    steps:
+      - name: Checkout repository
+        uses: actions/checkout@v4
+        with:
+          fetch-depth: 1
+
+      - name: Setup Node.js
+        uses: actions/setup-node@v4
+        with:
+          node-version: 20
+
+      - name: Install dependencies
+        run: npm ci --legacy-peer-deps
+
+      - name: 🧪 Run Checks in Parallel
+        if: github.event.inputs.skip_long_checks != 'true'
         run: |
-          echo "Deployment übersprungen – kein passender Trigger (main oder v*-Tag)"
-          exit 0
+          npm run lint &
+          LINT_PID=$!
+          npm run typecheck &
+          TYPE_PID=$!
+          npm run test &
+          TEST_PID=$!
+
+          # Wait for all and fail if any fail
+          wait $LINT_PID || exit 1
+          wait $TYPE_PID || exit 1
+          wait $TEST_PID || exit 1
+
+  # ──────────────────────────────────────────────────────────────────────────────
+  # JOB 3: Build & Push Docker Image
+  # ──────────────────────────────────────────────────────────────────────────────
+  build-app:
+    name: 🏗️ Build App
+    needs: prepare
+    if: ${{ needs.prepare.outputs.target != 'skip' }}
+    runs-on: docker
+    container:
+      image: catthehacker/ubuntu:act-latest
+    steps:
+      - name: Checkout repository
+        uses: actions/checkout@v4
+        with:
+          fetch-depth: 1
+
+      - name: 🐳 Set up Docker Buildx
+        uses: docker/setup-buildx-action@v3
 
-      # ──────────────────────────────────────────────────────────────────────────────
-      # Registry Login
-      # ──────────────────────────────────────────────────────────────────────────────
       - name: 🔐 Registry Login
         run: |
-          echo "🔐 Login zu registry.infra.mintel.me ..."
           echo "${{ secrets.REGISTRY_PASS }}" | docker login registry.infra.mintel.me -u "${{ secrets.REGISTRY_USER }}" --password-stdin
 
-      # ──────────────────────────────────────────────────────────────────────────────
-      # Build & Push
-      # ──────────────────────────────────────────────────────────────────────────────
-      - name: 🏗️ Docker Image bauen & pushen
+      - name: 🏗️ App bauen & pushen
         env:
-          IMAGE_TAG: ${{ steps.determine.outputs.image_tag }}
-          NEXT_PUBLIC_BASE_URL:          ${{ steps.determine.outputs.target == 'production' && secrets.NEXT_PUBLIC_BASE_URL          || (steps.determine.outputs.target == 'staging' && secrets.STAGING_NEXT_PUBLIC_BASE_URL          || secrets.TESTING_NEXT_PUBLIC_BASE_URL          || secrets.NEXT_PUBLIC_BASE_URL) }}
-          NEXT_PUBLIC_UMAMI_WEBSITE_ID:  ${{ steps.determine.outputs.target == 'production' && secrets.NEXT_PUBLIC_UMAMI_WEBSITE_ID  || (steps.determine.outputs.target == 'staging' && secrets.STAGING_NEXT_PUBLIC_UMAMI_WEBSITE_ID  || secrets.TESTING_NEXT_PUBLIC_UMAMI_WEBSITE_ID  || secrets.NEXT_PUBLIC_UMAMI_WEBSITE_ID) }}
-          NEXT_PUBLIC_UMAMI_SCRIPT_URL:  ${{ steps.determine.outputs.target == 'production' && secrets.NEXT_PUBLIC_UMAMI_SCRIPT_URL  || (steps.determine.outputs.target == 'staging' && secrets.STAGING_NEXT_PUBLIC_UMAMI_SCRIPT_URL  || secrets.TESTING_NEXT_PUBLIC_UMAMI_SCRIPT_URL  || secrets.NEXT_PUBLIC_UMAMI_SCRIPT_URL) }}
+          IMAGE_TAG: ${{ needs.prepare.outputs.image_tag }}
+          TARGET:    ${{ needs.prepare.outputs.target }}
+          NEXT_PUBLIC_BASE_URL:          ${{ needs.prepare.outputs.next_public_base_url }}
+          NEXT_PUBLIC_UMAMI_WEBSITE_ID:  ${{ needs.prepare.outputs.target == 'production' && secrets.NEXT_PUBLIC_UMAMI_WEBSITE_ID  || (needs.prepare.outputs.target == 'staging' && secrets.STAGING_NEXT_PUBLIC_UMAMI_WEBSITE_ID  || secrets.TESTING_NEXT_PUBLIC_UMAMI_WEBSITE_ID  || secrets.NEXT_PUBLIC_UMAMI_WEBSITE_ID) }}
+          NEXT_PUBLIC_UMAMI_SCRIPT_URL:  ${{ needs.prepare.outputs.target == 'production' && secrets.NEXT_PUBLIC_UMAMI_SCRIPT_URL  || (needs.prepare.outputs.target == 'staging' && secrets.STAGING_NEXT_PUBLIC_UMAMI_SCRIPT_URL  || secrets.TESTING_NEXT_PUBLIC_UMAMI_SCRIPT_URL  || secrets.NEXT_PUBLIC_UMAMI_SCRIPT_URL) }}
+          DIRECTUS_URL:                  ${{ needs.prepare.outputs.directus_url }}
         run: |
-          echo "🏗️ Building → ${{ steps.determine.outputs.target }} / $IMAGE_TAG"
           docker buildx build \
             --pull \
             --platform linux/arm64 \
             --build-arg NEXT_PUBLIC_BASE_URL="$NEXT_PUBLIC_BASE_URL" \
             --build-arg NEXT_PUBLIC_UMAMI_WEBSITE_ID="$NEXT_PUBLIC_UMAMI_WEBSITE_ID" \
             --build-arg NEXT_PUBLIC_UMAMI_SCRIPT_URL="$NEXT_PUBLIC_UMAMI_SCRIPT_URL" \
+            --build-arg NEXT_PUBLIC_TARGET="$TARGET" \
+            --build-arg DIRECTUS_URL="$DIRECTUS_URL" \
             -t registry.infra.mintel.me/mintel/klz-cables.com:$IMAGE_TAG \
+            --cache-from type=registry,ref=registry.infra.mintel.me/mintel/klz-cables.com:buildcache \
+            --cache-to type=registry,ref=registry.infra.mintel.me/mintel/klz-cables.com:buildcache,mode=max \
             --push .
 
-      # ──────────────────────────────────────────────────────────────────────────────
-      # Deploy via SSH
-      # ──────────────────────────────────────────────────────────────────────────────
-      - name: 🚀 Deploy to ${{ steps.determine.outputs.target }}
-        env:
-          IMAGE_TAG:            ${{ steps.determine.outputs.image_tag }}
-          ENV_FILE:             ${{ steps.determine.outputs.env_file }}
-          TRAEFIK_HOST:         ${{ steps.determine.outputs.traefik_host }}
-          # Secrets wie vorher – mit Fallback-Logik pro Umgebung
-          NEXT_PUBLIC_BASE_URL:          ${{ steps.determine.outputs.target == 'production' && secrets.NEXT_PUBLIC_BASE_URL          || (steps.determine.outputs.target == 'staging' && secrets.STAGING_NEXT_PUBLIC_BASE_URL          || secrets.TESTING_NEXT_PUBLIC_BASE_URL          || secrets.NEXT_PUBLIC_BASE_URL) }}
-          NEXT_PUBLIC_UMAMI_WEBSITE_ID:  ${{ steps.determine.outputs.target == 'production' && secrets.NEXT_PUBLIC_UMAMI_WEBSITE_ID  || (steps.determine.outputs.target == 'staging' && secrets.STAGING_NEXT_PUBLIC_UMAMI_WEBSITE_ID  || secrets.TESTING_NEXT_PUBLIC_UMAMI_WEBSITE_ID  || secrets.NEXT_PUBLIC_UMAMI_WEBSITE_ID) }}
-          NEXT_PUBLIC_UMAMI_SCRIPT_URL:  ${{ steps.determine.outputs.target == 'production' && secrets.NEXT_PUBLIC_UMAMI_SCRIPT_URL  || (steps.determine.outputs.target == 'staging' && secrets.STAGING_NEXT_PUBLIC_UMAMI_SCRIPT_URL  || secrets.TESTING_NEXT_PUBLIC_UMAMI_SCRIPT_URL  || secrets.NEXT_PUBLIC_UMAMI_SCRIPT_URL) }}
-          SENTRY_DSN:                    ${{ steps.determine.outputs.target == 'production' && secrets.SENTRY_DSN                    || (steps.determine.outputs.target == 'staging' && secrets.STAGING_SENTRY_DSN                    || secrets.TESTING_SENTRY_DSN                    || secrets.SENTRY_DSN) }}
-          MAIL_HOST:                     ${{ secrets.MAIL_HOST }}
-          MAIL_PORT:                     ${{ secrets.MAIL_PORT }}
-          MAIL_USERNAME:                 ${{ secrets.MAIL_USERNAME }}
-          MAIL_PASSWORD:                 ${{ secrets.MAIL_PASSWORD }}
-          MAIL_FROM:                     ${{ secrets.MAIL_FROM }}
-          MAIL_RECIPIENTS:               ${{ secrets.MAIL_RECIPIENTS }}
-        run: |
-          echo "Deploying ${{ steps.determine.outputs.target }} → $IMAGE_TAG"
+  # ──────────────────────────────────────────────────────────────────────────────
+  # JOB 4: Deploy via SSH
+  # ──────────────────────────────────────────────────────────────────────────────
+  deploy:
+    name: 🚀 Deploy
+    needs: [prepare, build-app, qa]
+    if: ${{ needs.prepare.outputs.target != 'skip' }}
+    runs-on: docker
+    container:
+      image: catthehacker/ubuntu:act-latest
+    env:
+      TARGET:               ${{ needs.prepare.outputs.target }}
+      IMAGE_TAG:            ${{ needs.prepare.outputs.image_tag }}
+      ENV_FILE:             ${{ needs.prepare.outputs.env_file }}
+      TRAEFIK_HOST:         ${{ needs.prepare.outputs.traefik_host }}
+      NEXT_PUBLIC_BASE_URL:          ${{ needs.prepare.outputs.next_public_base_url }}
+      NEXT_PUBLIC_UMAMI_WEBSITE_ID:  ${{ needs.prepare.outputs.target == 'production' && secrets.NEXT_PUBLIC_UMAMI_WEBSITE_ID  || (needs.prepare.outputs.target == 'staging' && secrets.STAGING_NEXT_PUBLIC_UMAMI_WEBSITE_ID  || secrets.TESTING_NEXT_PUBLIC_UMAMI_WEBSITE_ID  || secrets.NEXT_PUBLIC_UMAMI_WEBSITE_ID) }}
+      NEXT_PUBLIC_UMAMI_SCRIPT_URL:  ${{ needs.prepare.outputs.target == 'production' && secrets.NEXT_PUBLIC_UMAMI_SCRIPT_URL  || (needs.prepare.outputs.target == 'staging' && secrets.STAGING_NEXT_PUBLIC_UMAMI_SCRIPT_URL  || secrets.TESTING_NEXT_PUBLIC_UMAMI_SCRIPT_URL  || secrets.NEXT_PUBLIC_UMAMI_SCRIPT_URL) }}
+      SENTRY_DSN:                    ${{ secrets.SENTRY_DSN                    || vars.SENTRY_DSN                    || (needs.prepare.outputs.target == 'production' && secrets.SENTRY_DSN                    || (needs.prepare.outputs.target == 'staging' && secrets.STAGING_SENTRY_DSN                    || secrets.TESTING_SENTRY_DSN                    || secrets.SENTRY_DSN)) }}
+      MAIL_HOST:                     ${{ secrets.MAIL_HOST || vars.MAIL_HOST }}
+      MAIL_PORT:                     ${{ secrets.MAIL_PORT || vars.MAIL_PORT }}
+      MAIL_USERNAME:                 ${{ secrets.MAIL_USERNAME || vars.MAIL_USERNAME }}
+      MAIL_PASSWORD:                 ${{ secrets.MAIL_PASSWORD }}
+      MAIL_FROM:                     ${{ secrets.MAIL_FROM || vars.MAIL_FROM }}
+      MAIL_RECIPIENTS:               ${{ secrets.MAIL_RECIPIENTS || vars.MAIL_RECIPIENTS }}
+      DIRECTUS_URL:                  ${{ needs.prepare.outputs.directus_url }}
+      DIRECTUS_HOST:                 ${{ needs.prepare.outputs.directus_host }}
+      PROJECT_NAME:                  ${{ needs.prepare.outputs.project_name }}
+      DIRECTUS_KEY:                  ${{ secrets.DIRECTUS_KEY }}
+      DIRECTUS_SECRET:               ${{ secrets.DIRECTUS_SECRET }}
+      DIRECTUS_ADMIN_EMAIL:          ${{ secrets.DIRECTUS_ADMIN_EMAIL }}
+      DIRECTUS_ADMIN_PASSWORD:       ${{ secrets.DIRECTUS_ADMIN_PASSWORD }}
+      DIRECTUS_DB_NAME:              ${{ secrets.DIRECTUS_DB_NAME || 'directus' }}
+      DIRECTUS_DB_USER:              ${{ secrets.DIRECTUS_DB_USER || 'directus' }}
+      DIRECTUS_DB_PASSWORD:          ${{ secrets.DIRECTUS_DB_PASSWORD }}
+      DIRECTUS_API_TOKEN:            ${{ secrets.DIRECTUS_API_TOKEN }}
+      GATEKEEPER_PASSWORD:           ${{ secrets.GATEKEEPER_PASSWORD || 'klz2026' }}
+    steps:
+      - name: Checkout repository
+        uses: actions/checkout@v4
+        with:
+          fetch-depth: 1
+
+      - name: 🚀 Deploy to ${{ env.TARGET }}
+        shell: bash
+        run: |
+          echo "Deploying $TARGET → $IMAGE_TAG"
 
-          # SSH vorbereiten
           mkdir -p ~/.ssh
           echo "${{ secrets.ALPHA_SSH_KEY }}" > ~/.ssh/id_ed25519
           chmod 600 ~/.ssh/id_ed25519
           ssh-keyscan -H alpha.mintel.me >> ~/.ssh/known_hosts 2>/dev/null
 
-          # .env-Datei erstellen
           cat > /tmp/klz-cables.env << EOF
-          # Generated by CI - ${{ steps.determine.outputs.target }} - $(date -u)
+          # Generated by CI - $TARGET - $(date -u)
           NODE_ENV=production
           NEXT_PUBLIC_BASE_URL=$NEXT_PUBLIC_BASE_URL
+          NEXT_PUBLIC_TARGET=$TARGET
           NEXT_PUBLIC_UMAMI_WEBSITE_ID=$NEXT_PUBLIC_UMAMI_WEBSITE_ID
           NEXT_PUBLIC_UMAMI_SCRIPT_URL=$NEXT_PUBLIC_UMAMI_SCRIPT_URL
           SENTRY_DSN=$SENTRY_DSN
+          LOG_LEVEL=$( [[ "$TARGET" == "testing" || "$TARGET" == "development" ]] && echo "debug" || echo "info" )
           MAIL_HOST=$MAIL_HOST
           MAIL_PORT=$MAIL_PORT
           MAIL_USERNAME=$MAIL_USERNAME
@@ -167,76 +284,217 @@ jobs:
           MAIL_FROM=$MAIL_FROM
           MAIL_RECIPIENTS=$MAIL_RECIPIENTS
 
+          # Directus
+          DIRECTUS_URL=$DIRECTUS_URL
+          DIRECTUS_HOST=$DIRECTUS_HOST
+          DIRECTUS_KEY=$DIRECTUS_KEY
+          DIRECTUS_SECRET=$DIRECTUS_SECRET
+          DIRECTUS_ADMIN_EMAIL=$DIRECTUS_ADMIN_EMAIL
+          DIRECTUS_ADMIN_PASSWORD=$DIRECTUS_ADMIN_PASSWORD
+          DIRECTUS_DB_NAME=$DIRECTUS_DB_NAME
+          DIRECTUS_DB_USER=$DIRECTUS_DB_USER
+          DIRECTUS_DB_PASSWORD=$DIRECTUS_DB_PASSWORD
+          DIRECTUS_API_TOKEN=$DIRECTUS_API_TOKEN
+          INTERNAL_DIRECTUS_URL=http://directus:8055
+          GATEKEEPER_PASSWORD=$GATEKEEPER_PASSWORD
+
+          TARGET=$TARGET
+          SENTRY_ENVIRONMENT=$TARGET
           IMAGE_TAG=$IMAGE_TAG
           TRAEFIK_HOST=$TRAEFIK_HOST
           ENV_FILE=$ENV_FILE
+          AUTH_MIDDLEWARE=$( [[ "$TARGET" == "production" ]] && echo "compress" || echo "${PROJECT_NAME}-auth,compress" )
+          PROJECT_NAME=$PROJECT_NAME
+          COOKIE_DOMAIN=.$(echo $NEXT_PUBLIC_BASE_URL | sed 's|https://||')
           EOF
 
+          # 1. Cleanup and Create Directories on server BEFORE SCP
+          ssh -o StrictHostKeyChecking=accept-new root@alpha.mintel.me bash << 'EOF'
+            set -e
+            mkdir -p /home/deploy/sites/klz-cables.com/varnish
+            mkdir -p /home/deploy/sites/klz-cables.com/directus/uploads /home/deploy/sites/klz-cables.com/directus/extensions
+            if [ -d "/home/deploy/sites/klz-cables.com/varnish/default.vcl" ]; then
+              echo "🧹 Removing directory 'varnish/default.vcl' created by Docker..."
+              rm -rf /home/deploy/sites/klz-cables.com/varnish/default.vcl
+            fi
+            chown -R deploy:deploy /home/deploy/sites/klz-cables.com/directus /home/deploy/sites/klz-cables.com/varnish
+          EOF
+
+          # 2. Transfer files
           scp -o StrictHostKeyChecking=accept-new /tmp/klz-cables.env root@alpha.mintel.me:/home/deploy/sites/klz-cables.com/$ENV_FILE
           scp -o StrictHostKeyChecking=accept-new docker-compose.yml root@alpha.mintel.me:/home/deploy/sites/klz-cables.com/docker-compose.yml
+          scp -r -o StrictHostKeyChecking=accept-new varnish root@alpha.mintel.me:/home/deploy/sites/klz-cables.com/
 
-          ssh -o StrictHostKeyChecking=accept-new root@alpha.mintel.me IMAGE_TAG="$IMAGE_TAG" ENV_FILE="$ENV_FILE" TRAEFIK_HOST="$TRAEFIK_HOST" bash << 'EOF'
+          ssh -o StrictHostKeyChecking=accept-new root@alpha.mintel.me IMAGE_TAG="$IMAGE_TAG" ENV_FILE="$ENV_FILE" PROJECT_NAME="$PROJECT_NAME" bash << 'EOF'
             set -e
             cd /home/deploy/sites/klz-cables.com
-
             chmod 600 "$ENV_FILE"
             chown deploy:deploy "$ENV_FILE"
 
             echo "${{ secrets.REGISTRY_PASS }}" | docker login registry.infra.mintel.me -u "${{ secrets.REGISTRY_USER }}" --password-stdin
-
             echo "→ Pulling image: $IMAGE_TAG"
-            docker compose --env-file "$ENV_FILE" pull
-
+            docker compose -p "$PROJECT_NAME" --env-file "$ENV_FILE" pull
             echo "→ Starting containers..."
-            docker compose --env-file "$ENV_FILE" up -d
-
-            docker system prune -f --filter "until=168h"
-
+            docker compose -p "$PROJECT_NAME" --env-file "$ENV_FILE" up -d --remove-orphans
+            docker system prune -f --filter "until=24h"
             echo "→ Waiting 15s for warmup..."
             sleep 15
-
             echo "→ Container status:"
-            docker compose --env-file "$ENV_FILE" ps
-
-            if ! docker compose --env-file "$ENV_FILE" ps | grep -q "Up"; then
+            docker compose -p "$PROJECT_NAME" --env-file "$ENV_FILE" ps
+            if ! docker compose -p "$PROJECT_NAME" --env-file "$ENV_FILE" ps | grep -q "Up"; then
               echo "❌ Fehler: Container nicht Up!"
-              docker compose --env-file "$ENV_FILE" logs --tail=150
+              docker compose -p "$PROJECT_NAME" --env-file "$ENV_FILE" logs --tail=150
               exit 1
             fi
+            
+            echo "→ Verifying Varnish Backend Health..."
+            docker compose -p "$PROJECT_NAME" --env-file "$ENV_FILE" exec -T varnish varnishadm backend.list
+            if ! docker compose -p "$PROJECT_NAME" --env-file "$ENV_FILE" exec -T varnish varnishadm backend.list | grep -q "healthy"; then
+              echo "❌ Fehler: Varnish Backend ist SICK!"
+              docker compose -p "$PROJECT_NAME" --env-file "$ENV_FILE" logs varnish
+              exit 1
+            fi
+            echo "✅ Varnish Backend ist Healthy."
 
-            echo "✅ Deployment erfolgreich!"
-          EOF
+  # ──────────────────────────────────────────────────────────────────────────────
+  # JOB 5: PageSpeed Test
+  # ──────────────────────────────────────────────────────────────────────────────
+  pagespeed:
+    name: ⚡ PageSpeed
+    needs: [prepare, deploy]
+    if: |
+      always() && 
+      needs.prepare.outputs.target != 'skip' &&
+      needs.deploy.result == 'success' && 
+      github.event.inputs.skip_long_checks != 'true'
+    runs-on: docker
+    container:
+      image: catthehacker/ubuntu:act-latest
+    # outputs:
+    #   report_url: ${{ steps.save.outputs.report_url }}
+    steps:
+      - name: Checkout repository
+        uses: actions/checkout@v4
+        with:
+          fetch-depth: 1
 
-          rm -f /tmp/klz-cables.env
+      - name: Setup Node.js
+        uses: actions/setup-node@v4
+        with:
+          node-version: 20
 
-      # ──────────────────────────────────────────────────────────────────────────────
-      # Summary & Gotify
-      # ──────────────────────────────────────────────────────────────────────────────
+      - name: Install dependencies
+        run: npm ci --legacy-peer-deps
+
+      - name: 🔍 Install Chromium (Native & ARM64)
+        run: |
+          apt-get update
+          apt-get install -y gnupg wget ca-certificates
+          
+          # Detect OS
+          OS_ID=$(. /etc/os-release && echo $ID)
+          CODENAME=$(. /etc/os-release && echo $VERSION_CODENAME)
+          
+          if [ "$OS_ID" = "debian" ]; then
+            echo "🎯 Debian detected - installing native chromium"
+            apt-get install -y chromium
+          else
+            echo "🎯 Ubuntu detected - adding xtradeb PPA"
+            mkdir -p /etc/apt/keyrings
+            KEY_ID="82BB6851C64F6880"
+            
+            # Multi-method Key Fetch
+            SUCCESS=false
+            echo "Fetching key $KEY_ID..."
+            
+            # Method 1: gpg --recv-keys (standard)
+            for server in "hkp://keyserver.ubuntu.com:80" "hkp://keyserver.ubuntu.com:11371"; do
+              if gpg --no-default-keyring --keyring /tmp/xtradeb.gpg --keyserver "$server" --recv-keys "$KEY_ID"; then
+                gpg --no-default-keyring --keyring /tmp/xtradeb.gpg --export > /etc/apt/keyrings/xtradeb.gpg
+                SUCCESS=true && break
+              fi
+            done
+            
+            # Method 2: Direct wget (fallback)
+            if [ "$SUCCESS" = false ]; then
+              wget -qO- "https://keyserver.ubuntu.com/pks/lookup?op=get&search=0x$KEY_ID" | gpg --dearmor > /etc/apt/keyrings/xtradeb.gpg && SUCCESS=true
+            fi
+            
+            if [ "$SUCCESS" = true ]; then
+              echo "deb [signed-by=/etc/apt/keyrings/xtradeb.gpg] http://ppa.launchpad.net/xtradeb/apps/ubuntu $CODENAME main" > /etc/apt/sources.list.d/xtradeb-ppa.list
+            else
+              echo "⚠️ GPG fetch failed, using legacy apt-key as last resort..."
+              apt-key adv --keyserver keyserver.ubuntu.com --recv-keys "$KEY_ID" || true
+              echo "deb http://ppa.launchpad.net/xtradeb/apps/ubuntu $CODENAME main" > /etc/apt/sources.list.d/xtradeb-ppa.list
+            fi
+            
+            # PRIORITY PINNING: Force PPA over Snap-dummy
+            printf "Package: *\nPin: release o=LP-PPA-xtradeb-apps\nPin-Priority: 1001\n" > /etc/apt/preferences.d/xtradeb
+            
+            apt-get update
+            apt-get install -y --allow-downgrades chromium || apt-get install -y chromium-browser
+          fi
+          
+          # Force clean paths (remove existing dead links/files if they are snap wrappers)
+          rm -f /usr/bin/google-chrome /usr/bin/chromium-browser
+          [ -f /usr/bin/chromium ] && ln -sf /usr/bin/chromium /usr/bin/google-chrome
+          [ -f /usr/bin/chromium ] && ln -sf /usr/bin/chromium /usr/bin/chromium-browser
+          
+          echo "✅ Binary check:"
+          ls -l /usr/bin/chromium* /usr/bin/google-chrome || true
+        continue-on-error: true
+
+      - name: 🧪 Run PageSpeed (Lighthouse)
+        env:
+          NEXT_PUBLIC_BASE_URL: ${{ needs.prepare.outputs.next_public_base_url }}
+          GATEKEEPER_PASSWORD: ${{ secrets.GATEKEEPER_PASSWORD || 'klz2026' }}
+          PAGESPEED_LIMIT: 8
+          PUPPETEER_EXECUTABLE_PATH: /usr/bin/chromium
+          CHROME_PATH: /usr/bin/chromium
+        run: npm run pagespeed:test
+
+
+
+  # ──────────────────────────────────────────────────────────────────────────────
+  # JOB 6: Notifications
+  # ──────────────────────────────────────────────────────────────────────────────
+  notifications:
+    name: 🔔 Notifications
+    needs: [prepare, qa, build-app, deploy, pagespeed]
+    if: always()
+    runs-on: docker
+    container:
+      image: catthehacker/ubuntu:act-latest
+    steps:
       - name: 📊 Deployment Summary
-        if: always()
         run: |
           echo "┌──────────────────────────────┐"
           echo "│ Deployment Summary           │"
           echo "├──────────────────────────────┤"
-          echo "│ Status:     ${{ job.status }} │"
-          echo "│ Umgebung:   ${{ steps.determine.outputs.target || 'skipped' }} │"
-          echo "│ Version:    ${{ steps.determine.outputs.image_tag }} │"
-          echo "│ Commit:     ${{ steps.determine.outputs.short_sha }} │"
-          echo "│ Message:    ${{ steps.determine.outputs.commit_msg }} │"
+          echo "│ Status:     ${{ needs.deploy.result }} │"
+          echo "│ Umgebung:   ${{ needs.prepare.outputs.target || 'skipped' }} │"
+          echo "│ Version:    ${{ needs.prepare.outputs.image_tag }} │"
+          echo "│ Commit:     ${{ needs.prepare.outputs.short_sha }} │"
+          echo "│ Message:    ${{ needs.prepare.outputs.commit_msg }} │"
           echo "└──────────────────────────────┘"
 
       - name: 🔔 Gotify - Success
-        if: success()
+        if: needs.deploy.result == 'success'
         run: |
           curl -s -k -X POST "${{ secrets.GOTIFY_URL }}/message?token=${{ secrets.GOTIFY_TOKEN }}" \
-            -F "title=${{ steps.determine.outputs.gotify_title }}" \
-            -F "message=Erfolgreich deployt auf **${{ steps.determine.outputs.target }}**\n\nVersion: **${{ steps.determine.outputs.image_tag }}**\nCommit: ${{ steps.determine.outputs.short_sha }} (${{ steps.determine.outputs.commit_msg }})\nVon: ${{ github.actor }}\nRun: ${{ github.run_id }}" \
-            -F "priority=${{ steps.determine.outputs.gotify_priority }}" || true
+            -F "title=${{ needs.prepare.outputs.gotify_title }}" \
+            -F "message=Erfolgreich deployt auf **${{ needs.prepare.outputs.target }}**\n\nVersion: **${{ needs.prepare.outputs.image_tag }}**\nCommit: ${{ needs.prepare.outputs.short_sha }} (${{ needs.prepare.outputs.commit_msg }})\nVon: ${{ github.actor }}\nRun: ${{ github.run_id }}" \
+            -F "priority=4" || true
 
       - name: 🔔 Gotify - Failure
-        if: failure()
+        if: |
+          needs.prepare.result == 'failure' ||
+          needs.qa.result == 'failure' ||
+          needs.build-app.result == 'failure' ||
+          needs.deploy.result == 'failure' ||
+          needs.pagespeed.result == 'failure'
         run: |
           curl -s -k -X POST "${{ secrets.GOTIFY_URL }}/message?token=${{ secrets.GOTIFY_TOKEN }}" \
-            -F "title=❌ Deployment FEHLGESCHLAGEN – ${{ steps.determine.outputs.target || 'unknown' }}" \
-            -F "message=**Fehler beim Deploy auf ${{ steps.determine.outputs.target }}**\n\nVersion: ${{ steps.determine.outputs.image_tag || '?' }}\nCommit: ${{ steps.determine.outputs.short_sha || '?' }}\nVon: ${{ github.actor }}\nRun: ${{ github.run_id }}\n\nBitte Logs prüfen!" \
+            -F "title=❌ Deployment FEHLGESCHLAGEN – ${{ needs.prepare.outputs.target || 'unknown' }}" \
+            -F "message=**Fehler beim Deploy auf ${{ needs.prepare.outputs.target }}**\n\nVersion: ${{ needs.prepare.outputs.image_tag || '?' }}\nCommit: ${{ needs.prepare.outputs.short_sha || '?' }}\nVon: ${{ github.actor }}\nRun: ${{ github.run_id }}\n\nBitte Logs prüfen!" \
             -F "priority=8" || true

.gitignore

@@ -1,2 +1,7 @@
 node_modules
-.next
+.next
+.DS_Store
+
+# Directus
+directus/uploads
+!directus/extensions/

.husky/commit-msg

@@ -0,0 +1 @@
+npx --no -- commitlint --edit "$1"

.husky/pre-commit

@@ -0,0 +1 @@
+npx lint-staged

.lintstagedrc.js

@@ -0,0 +1,11 @@
+const path = require('path');
+
+const buildEslintCommand = (filenames) =>
+  `next lint --fix --file ${filenames
+    .map((f) => path.relative(process.cwd(), f))
+    .join(' --file ')}`;
+
+module.exports = {
+  '*.{js,jsx,ts,tsx}': [buildEslintCommand, 'prettier --write'],
+  '*.{json,md,css,scss}': ['prettier --write'],
+};

.prettierrc

@@ -0,0 +1,7 @@
+{
+  "semi": true,
+  "singleQuote": true,
+  "tabWidth": 2,
+  "trailingComma": "all",
+  "printWidth": 100
+}

Dockerfile

@@ -8,7 +8,7 @@ WORKDIR /app
 
 # Install dependencies based on the preferred package manager
 COPY package.json package-lock.json* ./
-RUN npm ci
+RUN --mount=type=cache,target=/root/.npm npm ci --legacy-peer-deps
 
 
 # Rebuild the source code only when needed
@@ -27,15 +27,19 @@ ENV NEXT_TELEMETRY_DISABLED=1
 ARG NEXT_PUBLIC_BASE_URL
 ARG NEXT_PUBLIC_UMAMI_WEBSITE_ID
 ARG NEXT_PUBLIC_UMAMI_SCRIPT_URL
+ARG NEXT_PUBLIC_TARGET
+ARG DIRECTUS_URL
 
 ENV NEXT_PUBLIC_BASE_URL=$NEXT_PUBLIC_BASE_URL
 ENV NEXT_PUBLIC_UMAMI_WEBSITE_ID=$NEXT_PUBLIC_UMAMI_WEBSITE_ID
 ENV NEXT_PUBLIC_UMAMI_SCRIPT_URL=$NEXT_PUBLIC_UMAMI_SCRIPT_URL
+ENV NEXT_PUBLIC_TARGET=$NEXT_PUBLIC_TARGET
+ENV DIRECTUS_URL=$DIRECTUS_URL
 
 # Validate environment variables during build
-RUN npx tsx scripts/validate-env.ts
+RUN SKIP_RUNTIME_ENV_VALIDATION=true npx tsx scripts/validate-env.ts
 
-RUN npm run build
+RUN --mount=type=cache,target=/app/.next/cache npm run build
 
 # Production image, copy all the files and run next
 FROM base AS runner

README.md

@@ -29,6 +29,35 @@ npm run export
 
 # Or run development server
 npm run dev
+
+### 🏗️ CMS (Strapi)
+The CMS runs in Docker. Use the following npm scripts for local development:
+
+```bash
+# Start Strapi and its database
+npm run cms:dev
+
+# View logs
+npm run cms:logs
+
+# Stop the CMS
+npm run cms:stop
+```
+
+Once running, you can access the Strapi admin panel at `http://localhost:1337/admin`.
+
+### 🔄 Data & Migration
+To sync data or migrate existing content:
+
+```bash
+# Export local data
+npm run cms:export -- my-data.tar.gz
+
+# Import data
+npm run cms:import -- my-data.tar.gz
+
+# Migrate existing MDX data to Strapi
+npm run cms:migrate
 ```
 
 ### Environment Variables
@@ -73,7 +102,8 @@ NEXT_PUBLIC_SENTRY_DSN=https://PUBLIC_KEY@errors.infra.mintel.me/PROJECT_ID
 - **Framework**: Next.js 14 (App Router)
 - **Language**: TypeScript
 - **Styling**: SCSS
-- **Data**: Static JSON (WordPress export)
+- **CMS**: Strapi (Source of Truth)
+- **Data**: Static JSON (WordPress export) & Strapi API
 - **Email**: Resend
 - **Analytics**: Vercel (consent-based)
 - **CAPTCHA**: Cloudflare Turnstile

app/[locale]/[slug]/opengraph-image.tsx

@@ -1,6 +1,7 @@
 import { ImageResponse } from 'next/og';
 import { getPageBySlug } from '@/lib/pages';
 import { OGImageTemplate } from '@/components/OGImageTemplate';
+import { getOgFonts, OG_IMAGE_SIZE } from '@/lib/og-helper';
 
 export const runtime = 'nodejs';
 
@@ -8,11 +9,11 @@ export default async function Image({ params: { locale, slug } }: { params: { lo
   const pageData = await getPageBySlug(slug, locale);
 
   if (!pageData) {
-    return new ImageResponse(
-      <div style={{ display: 'flex', width: '100%', height: '100%', backgroundColor: '#001a4d' }} />
-    );
+    return new Response('Page not found', { status: 404 });
   }
 
+  const fonts = await getOgFonts();
+
   return new ImageResponse(
     (
       <OGImageTemplate
@@ -22,8 +23,9 @@ export default async function Image({ params: { locale, slug } }: { params: { lo
       />
     ),
     {
-      width: 1200,
-      height: 630,
+      ...OG_IMAGE_SIZE,
+      fonts,
     }
   );
 }
+

app/[locale]/[slug]/page.tsx

@@ -6,6 +6,7 @@ import { Metadata } from 'next';
 import { getPageBySlug, getAllPages } from '@/lib/pages';
 import { mdxComponents } from '@/components/blog/MDXComponents';
 import { getOGImageMetadata } from '@/lib/metadata';
+import { SITE_URL } from '@/lib/schema';
 
 interface PageProps {
   params: {
@@ -30,7 +31,7 @@ export async function generateStaticParams() {
 
 export async function generateMetadata({ params: { locale, slug } }: PageProps): Promise<Metadata> {
   const pageData = await getPageBySlug(slug, locale);
-  
+
   if (!pageData) return {};
 
   return {
@@ -39,15 +40,15 @@ export async function generateMetadata({ params: { locale, slug } }: PageProps):
     alternates: {
       canonical: `/${locale}/${slug}`,
       languages: {
-        'de': `/de/${slug}`,
-        'en': `/en/${slug}`,
+        de: `/de/${slug}`,
+        en: `/en/${slug}`,
         'x-default': `/en/${slug}`,
       },
     },
     openGraph: {
       title: `${pageData.frontmatter.title} | KLZ Cables`,
       description: pageData.frontmatter.excerpt || '',
-      url: `https://klz-cables.com/${locale}/${slug}`,
+      url: `${SITE_URL}/${locale}/${slug}`,
       images: getOGImageMetadata(slug, pageData.frontmatter.title, locale),
     },
     twitter: {
@@ -75,7 +76,9 @@ export default async function StandardPage({ params: { locale, slug } }: PagePro
         </div>
         <Container className="relative z-10">
           <div className="max-w-4xl animate-slide-up">
-            <Badge variant="accent" className="mb-4 md:mb-6">{t('badge')}</Badge>
+            <Badge variant="accent" className="mb-4 md:mb-6">
+              {t('badge')}
+            </Badge>
             <Heading level={1} className="text-white mb-0">
               {pageData.frontmatter.title}
             </Heading>
@@ -106,9 +109,14 @@ export default async function StandardPage({ params: { locale, slug } }: PagePro
             <div className="relative z-10 max-w-2xl">
               <h3 className="text-2xl md:text-3xl font-bold mb-4">{t('needHelp')}</h3>
               <p className="text-lg text-white/70 mb-8">{t('supportTeamAvailable')}</p>
-              <a href={`/${locale}/contact`} className="inline-flex items-center px-8 py-4 bg-accent text-primary-dark font-bold rounded-full hover:bg-white transition-all duration-300 group/link">
-                {t('contactUs')} 
-                <span className="ml-2 transition-transform group-hover/link:translate-x-1">&rarr;</span>
+              <a
+                href={`/${locale}/contact`}
+                className="inline-flex items-center px-8 py-4 bg-accent text-primary-dark font-bold rounded-full hover:bg-white transition-all duration-300 group/link"
+              >
+                {t('contactUs')}
+                <span className="ml-2 transition-transform group-hover/link:translate-x-1">
+                  &rarr;
+                </span>
               </a>
             </div>
           </div>
@@ -116,4 +124,4 @@ export default async function StandardPage({ params: { locale, slug } }: PagePro
       </div>
     </div>
   );
-}
+}

app/[locale]/api/og/product/route.tsx

@@ -3,6 +3,7 @@ import { getProductBySlug } from '@/lib/mdx';
 import { getTranslations } from 'next-intl/server';
 import { OGImageTemplate } from '@/components/OGImageTemplate';
 import { NextRequest } from 'next/server';
+import { getOgFonts, OG_IMAGE_SIZE } from '@/lib/og-helper';
 
 export const runtime = 'nodejs';
 
@@ -10,7 +11,7 @@ export async function GET(
   request: NextRequest,
   { params }: { params: { locale: string } }
 ) {
-  const { searchParams } = new URL(request.url);
+  const { searchParams, origin } = new URL(request.url);
   const slug = searchParams.get('slug');
   const locale = params.locale || 'en';
 
@@ -18,6 +19,7 @@ export async function GET(
     return new Response('Missing slug', { status: 400 });
   }
 
+  const fonts = await getOgFonts();
   const t = await getTranslations({ locale, namespace: 'Products' });
 
   // Check if it's a category page
@@ -36,8 +38,8 @@ export async function GET(
         />
       ),
       {
-        width: 1200,
-        height: 630,
+        ...OG_IMAGE_SIZE,
+        fonts,
       }
     );
   }
@@ -45,16 +47,13 @@ export async function GET(
   const product = await getProductBySlug(slug, locale);
 
   if (!product) {
-    return new ImageResponse(
-      <div style={{ display: 'flex', width: '100%', height: '100%', backgroundColor: '#001a4d' }} />
-    );
+    return new Response('Product not found', { status: 404 });
   }
 
-  const { origin } = new URL(request.url);
   const featuredImage = product.frontmatter.images?.[0]
     ? (product.frontmatter.images[0].startsWith('http')
-        ? product.frontmatter.images[0]
-        : `${origin}${product.frontmatter.images[0]}`)
+      ? product.frontmatter.images[0]
+      : `${origin}${product.frontmatter.images[0]}`)
     : undefined;
 
   return new ImageResponse(
@@ -63,12 +62,13 @@ export async function GET(
         title={product.frontmatter.title}
         description={product.frontmatter.description}
         label={product.frontmatter.categories?.[0] || 'Product'}
-        image={featuredImage?.startsWith('http') ? featuredImage : undefined}
+        image={featuredImage}
       />
     ),
     {
-      width: 1200,
-      height: 630,
+      ...OG_IMAGE_SIZE,
+      fonts,
     }
   );
 }
+

app/[locale]/blog/[slug]/opengraph-image.tsx

@@ -1,36 +1,44 @@
 import { ImageResponse } from 'next/og';
 import { getPostBySlug } from '@/lib/blog';
 import { OGImageTemplate } from '@/components/OGImageTemplate';
+import { getOgFonts, OG_IMAGE_SIZE } from '@/lib/og-helper';
+import { SITE_URL } from '@/lib/schema';
 
 export const runtime = 'nodejs';
 
-export default async function Image({ params: { locale, slug } }: { params: { locale: string, slug: string } }) {
+export default async function Image({
+  params: { locale, slug },
+}: {
+  params: { locale: string; slug: string };
+}) {
   const post = await getPostBySlug(slug, locale);
 
   if (!post) {
-    return new ImageResponse(
-      <div style={{ display: 'flex', width: '100%', height: '100%', backgroundColor: '#001a4d' }} />
-    );
+    return new Response('Post not found', { status: 404 });
   }
 
+  const fonts = await getOgFonts();
+
+  // We don't have request.url here, but we can assume the domain from SITE_URL or config
+  // For local images during dev, relative paths in <img> might not work in Satori
+  // but if we are in nodejs runtime, we could potentially read from disk.
+  // For now, let's just make sure it's absolute.
   const featuredImage = post.frontmatter.featuredImage
-    ? (post.frontmatter.featuredImage.startsWith('http')
-        ? post.frontmatter.featuredImage
-        : `https://klz-cables.com${post.frontmatter.featuredImage}`)
+    ? post.frontmatter.featuredImage.startsWith('http')
+      ? post.frontmatter.featuredImage
+      : `${SITE_URL}${post.frontmatter.featuredImage}`
     : undefined;
 
   return new ImageResponse(
-    (
-      <OGImageTemplate
-        title={post.frontmatter.title}
-        description={post.frontmatter.excerpt}
-        label={post.frontmatter.category || 'Blog'}
-        image={featuredImage?.startsWith('http') ? featuredImage : undefined}
-      />
-    ),
+    <OGImageTemplate
+      title={post.frontmatter.title}
+      description={post.frontmatter.excerpt}
+      label={post.frontmatter.category || 'Blog'}
+      image={featuredImage}
+    />,
     {
-      width: 1200,
-      height: 630,
-    }
+      ...OG_IMAGE_SIZE,
+      fonts,
+    },
   );
 }

app/[locale]/blog/[slug]/page.tsx

@@ -20,9 +20,11 @@ interface BlogPostProps {
   };
 }
 
-export async function generateMetadata({ params: { locale, slug } }: BlogPostProps): Promise<Metadata> {
+export async function generateMetadata({
+  params: { locale, slug },
+}: BlogPostProps): Promise<Metadata> {
   const post = await getPostBySlug(slug, locale);
-  
+
   if (!post) return {};
 
   const description = post.frontmatter.excerpt || '';
@@ -32,8 +34,8 @@ export async function generateMetadata({ params: { locale, slug } }: BlogPostPro
     alternates: {
       canonical: `/${locale}/blog/${slug}`,
       languages: {
-        'de': `/de/blog/${slug}`,
-        'en': `/en/blog/${slug}`,
+        de: `/de/blog/${slug}`,
+        en: `/en/blog/${slug}`,
         'x-default': `/en/blog/${slug}`,
       },
     },
@@ -43,7 +45,7 @@ export async function generateMetadata({ params: { locale, slug } }: BlogPostPro
       type: 'article',
       publishedTime: post.frontmatter.date,
       authors: ['KLZ Cables'],
-      url: `https://klz-cables.com/${locale}/blog/${slug}`,
+      url: `${SITE_URL}/${locale}/blog/${slug}`,
       images: getOGImageMetadata(`blog/${slug}`, post.frontmatter.title, locale),
     },
     twitter: {
@@ -66,16 +68,15 @@ export default async function BlogPost({ params: { locale, slug } }: BlogPostPro
 
   return (
     <article className="bg-white min-h-screen font-sans selection:bg-primary/10 selection:text-primary">
-      
       {/* Featured Image Header */}
       {post.frontmatter.featuredImage ? (
         <div className="relative w-full h-[70vh] min-h-[500px] overflow-hidden group">
-          <div 
+          <div
             className="absolute inset-0 bg-cover bg-center transition-transform duration-[3s] ease-out scale-110 group-hover:scale-100"
             style={{ backgroundImage: `url(${post.frontmatter.featuredImage})` }}
           />
           <div className="absolute inset-0 bg-gradient-to-t from-neutral-dark via-neutral-dark/40 to-transparent" />
-          
+
           {/* Title overlay on image */}
           <div className="absolute inset-0 flex flex-col justify-end pb-16 md:pb-24">
             <div className="container mx-auto px-4">
@@ -87,7 +88,10 @@ export default async function BlogPost({ params: { locale, slug } }: BlogPostPro
                     </span>
                   </div>
                 )}
-                <Heading level={1} className="text-white mb-8 drop-shadow-2xl animate-slight-fade-in-from-bottom [animation-delay:200ms]">
+                <Heading
+                  level={1}
+                  className="text-white mb-8 drop-shadow-2xl animate-slight-fade-in-from-bottom [animation-delay:200ms]"
+                >
                   {post.frontmatter.title}
                 </Heading>
                 <div className="flex flex-wrap items-center gap-6 text-white/80 text-sm md:text-base font-medium animate-slight-fade-in-from-bottom [animation-delay:400ms]">
@@ -95,7 +99,7 @@ export default async function BlogPost({ params: { locale, slug } }: BlogPostPro
                     {new Date(post.frontmatter.date).toLocaleDateString(locale, {
                       year: 'numeric',
                       month: 'long',
-                      day: 'numeric'
+                      day: 'numeric',
                     })}
                   </time>
                   <span className="w-1 h-1 bg-white/30 rounded-full" />
@@ -123,7 +127,7 @@ export default async function BlogPost({ params: { locale, slug } }: BlogPostPro
                 {new Date(post.frontmatter.date).toLocaleDateString(locale, {
                   year: 'numeric',
                   month: 'long',
-                  day: 'numeric'
+                  day: 'numeric',
                 })}
               </time>
               <span className="w-1 h-1 bg-neutral-300 rounded-full" />
@@ -168,8 +172,18 @@ export default async function BlogPost({ params: { locale, slug } }: BlogPostPro
                 href={`/${locale}/blog`}
                 className="inline-flex items-center gap-3 text-text-secondary hover:text-primary font-bold text-sm uppercase tracking-widest transition-all group"
               >
-                <svg className="w-5 h-5 transition-transform group-hover:-translate-x-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-                  <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M15 19l-7-7 7-7" />
+                <svg
+                  className="w-5 h-5 transition-transform group-hover:-translate-x-2"
+                  fill="none"
+                  stroke="currentColor"
+                  viewBox="0 0 24 24"
+                >
+                  <path
+                    strokeLinecap="round"
+                    strokeLinejoin="round"
+                    strokeWidth={2}
+                    d="M15 19l-7-7 7-7"
+                  />
                 </svg>
                 {locale === 'de' ? 'Zurück zur Übersicht' : 'Back to Overview'}
               </Link>
@@ -188,57 +202,63 @@ export default async function BlogPost({ params: { locale, slug } }: BlogPostPro
       {/* Structured Data */}
       <JsonLd
         id={`jsonld-${slug}`}
-        data={{
-          '@context': 'https://schema.org',
-          '@type': 'BlogPosting',
-          headline: post.frontmatter.title,
-          datePublished: post.frontmatter.date,
-          dateModified: post.frontmatter.date,
-          image: post.frontmatter.featuredImage ? `https://klz-cables.com${post.frontmatter.featuredImage}` : undefined,
-          author: {
-            '@type': 'Organization',
-            name: 'KLZ Cables',
-            url: 'https://klz-cables.com',
-            logo: 'https://klz-cables.com/logo-blue.svg'
-          },
-          publisher: {
-            '@type': 'Organization',
-            name: 'KLZ Cables',
-            logo: {
-              '@type': 'ImageObject',
-              url: 'https://klz-cables.com/logo-blue.svg',
+        data={
+          {
+            '@context': 'https://schema.org',
+            '@type': 'BlogPosting',
+            headline: post.frontmatter.title,
+            datePublished: post.frontmatter.date,
+            dateModified: post.frontmatter.date,
+            image: post.frontmatter.featuredImage
+              ? `${SITE_URL}${post.frontmatter.featuredImage}`
+              : undefined,
+            author: {
+              '@type': 'Organization',
+              name: 'KLZ Cables',
+              url: SITE_URL,
+              logo: `${SITE_URL}/logo-blue.svg`,
             },
-          },
-          description: post.frontmatter.excerpt,
-          mainEntityOfPage: {
-            '@type': 'WebPage',
-            '@id': `https://klz-cables.com/${locale}/blog/${slug}`,
-          },
-          articleSection: post.frontmatter.category,
-          wordCount: post.content.split(/\s+/).length,
-          timeRequired: `PT${getReadingTime(post.content)}M`
-        } as any}
+            publisher: {
+              '@type': 'Organization',
+              name: 'KLZ Cables',
+              logo: {
+                '@type': 'ImageObject',
+                url: `${SITE_URL}/logo-blue.svg`,
+              },
+            },
+            description: post.frontmatter.excerpt,
+            mainEntityOfPage: {
+              '@type': 'WebPage',
+              '@id': `${SITE_URL}/${locale}/blog/${slug}`,
+            },
+            articleSection: post.frontmatter.category,
+            wordCount: post.content.split(/\s+/).length,
+            timeRequired: `PT${getReadingTime(post.content)}M`,
+          } as any
+        }
       />
       <JsonLd
         id={`breadcrumb-${slug}`}
-        data={{
-          '@context': 'https://schema.org',
-          '@type': 'BreadcrumbList',
-          itemListElement: [
-            {
-              '@type': 'ListItem',
-              position: 1,
-              name: 'Blog',
-              item: `https://klz-cables.com/${locale}/blog`,
-            },
-            {
-              '@type': 'ListItem',
-              position: 2,
-              name: post.frontmatter.title,
-              item: `https://klz-cables.com/${locale}/blog/${slug}`,
-            },
-          ],
-        } as any}
+        data={
+          {
+            '@context': 'https://schema.org',
+            '@type': 'BreadcrumbList',
+            itemListElement: [
+              {
+                '@type': 'ListItem',
+                position: 1,
+                name: 'Blog',
+                item: `${SITE_URL}/${locale}/blog`,
+              },
+              {
+                '@type': 'ListItem',
+                position: 2,
+                name: post.frontmatter.title,
+                item: `${SITE_URL}/${locale}/blog/${slug}`,
+              },
+            ],
+          } as any
+        }
       />
     </article>
   );

app/[locale]/blog/opengraph-image.tsx

@@ -1,25 +1,25 @@
 import { ImageResponse } from 'next/og';
 import { getTranslations } from 'next-intl/server';
 import { OGImageTemplate } from '@/components/OGImageTemplate';
+import { getOgFonts, OG_IMAGE_SIZE } from '@/lib/og-helper';
 
 export const runtime = 'nodejs';
 
 export default async function Image({ params: { locale } }: { params: { locale: string } }) {
   const t = await getTranslations({ locale, namespace: 'Blog.meta' });
-  const title = t('title');
-  const description = t('description');
+  const fonts = await getOgFonts();
 
   return new ImageResponse(
     (
       <OGImageTemplate
-        title={title}
-        description={description}
+        title={t('title')}
+        description={t('description')}
         label="Blog"
       />
     ),
     {
-      width: 1200,
-      height: 630,
+      ...OG_IMAGE_SIZE,
+      fonts,
     }
   );
 }

app/[locale]/blog/page.tsx

@@ -4,6 +4,7 @@ import { Section, Container, Heading, Card, Badge, Button } from '@/components/u
 import Reveal from '@/components/Reveal';
 import { getTranslations } from 'next-intl/server';
 import { getOGImageMetadata } from '@/lib/metadata';
+import { SITE_URL } from '@/lib/schema';
 
 interface BlogIndexProps {
   params: {
@@ -19,15 +20,15 @@ export async function generateMetadata({ params: { locale } }: BlogIndexProps) {
     alternates: {
       canonical: `/${locale}/blog`,
       languages: {
-        'de': '/de/blog',
-        'en': '/en/blog',
+        de: '/de/blog',
+        en: '/en/blog',
         'x-default': '/en/blog',
       },
     },
     openGraph: {
       title: `${t('title')} | KLZ Cables`,
       description: t('description'),
-      url: `https://klz-cables.com/${locale}/blog`,
+      url: `${SITE_URL}/${locale}/blog`,
       images: getOGImageMetadata('blog', t('title'), locale),
     },
     twitter: {
@@ -41,10 +42,10 @@ export async function generateMetadata({ params: { locale } }: BlogIndexProps) {
 export default async function BlogIndex({ params: { locale } }: BlogIndexProps) {
   const t = await getTranslations('Blog');
   const posts = await getAllPosts(locale);
-  
+
   // Sort posts by date descending
-  const sortedPosts = [...posts].sort((a, b) => 
-    new Date(b.frontmatter.date).getTime() - new Date(a.frontmatter.date).getTime()
+  const sortedPosts = [...posts].sort(
+    (a, b) => new Date(b.frontmatter.date).getTime() - new Date(a.frontmatter.date).getTime(),
   );
 
   const featuredPost = sortedPosts[0];
@@ -65,10 +66,12 @@ export default async function BlogIndex({ params: { locale } }: BlogIndexProps)
               <div className="absolute inset-0 image-overlay-gradient" />
             </>
           )}
-          
+
           <Container className="relative z-10">
             <div className="max-w-4xl animate-slide-up">
-              <Badge variant="saturated" className="mb-4 md:mb-6">{t('featuredPost')}</Badge>
+              <Badge variant="saturated" className="mb-4 md:mb-6">
+                {t('featuredPost')}
+              </Badge>
               {featuredPost && (
                 <>
                   <Heading level={1} className="text-white mb-4 md:mb-8">
@@ -77,9 +80,16 @@ export default async function BlogIndex({ params: { locale } }: BlogIndexProps)
                   <p className="text-base md:text-xl text-white/80 mb-6 md:mb-10 line-clamp-2 md:line-clamp-2 max-w-2xl">
                     {featuredPost.frontmatter.excerpt}
                   </p>
-                  <Button href={`/${locale}/blog/${featuredPost.slug}`} variant="accent" size="lg" className="group w-full md:w-auto md:h-16 md:px-10 md:text-xl">
+                  <Button
+                    href={`/${locale}/blog/${featuredPost.slug}`}
+                    variant="accent"
+                    size="lg"
+                    className="group w-full md:w-auto md:h-16 md:px-10 md:text-xl"
+                  >
                     {t('readFullArticle')}
-                    <span className="ml-3 transition-transform group-hover:translate-x-2">&rarr;</span>
+                    <span className="ml-3 transition-transform group-hover:translate-x-2">
+                      &rarr;
+                    </span>
                   </Button>
                 </>
               )}
@@ -97,10 +107,30 @@ export default async function BlogIndex({ params: { locale } }: BlogIndexProps)
               </Heading>
               <div className="flex flex-wrap gap-2 md:gap-4">
                 {/* Category filters could go here */}
-                <Badge variant="primary" className="cursor-pointer hover:bg-primary hover:text-white transition-colors touch-target px-3 md:px-4">{t('categories.all')}</Badge>
-                <Badge variant="neutral" className="cursor-pointer hover:bg-primary hover:text-white transition-colors touch-target px-3 md:px-4">{t('categories.industry')}</Badge>
-                <Badge variant="neutral" className="cursor-pointer hover:bg-primary hover:text-white transition-colors touch-target px-3 md:px-4">{t('categories.technical')}</Badge>
-                <Badge variant="neutral" className="cursor-pointer hover:bg-primary hover:text-white transition-colors touch-target px-3 md:px-4">{t('categories.sustainability')}</Badge>
+                <Badge
+                  variant="primary"
+                  className="cursor-pointer hover:bg-primary hover:text-white transition-colors touch-target px-3 md:px-4"
+                >
+                  {t('categories.all')}
+                </Badge>
+                <Badge
+                  variant="neutral"
+                  className="cursor-pointer hover:bg-primary hover:text-white transition-colors touch-target px-3 md:px-4"
+                >
+                  {t('categories.industry')}
+                </Badge>
+                <Badge
+                  variant="neutral"
+                  className="cursor-pointer hover:bg-primary hover:text-white transition-colors touch-target px-3 md:px-4"
+                >
+                  {t('categories.technical')}
+                </Badge>
+                <Badge
+                  variant="neutral"
+                  className="cursor-pointer hover:bg-primary hover:text-white transition-colors touch-target px-3 md:px-4"
+                >
+                  {t('categories.sustainability')}
+                </Badge>
               </div>
             </div>
           </Reveal>
@@ -120,7 +150,10 @@ export default async function BlogIndex({ params: { locale } }: BlogIndexProps)
                         />
                         <div className="absolute inset-0 image-overlay-gradient opacity-0 group-hover:opacity-100 transition-opacity duration-500" />
                         {post.frontmatter.category && (
-                          <Badge variant="accent" className="absolute top-3 left-3 md:top-6 md:left-6 shadow-lg">
+                          <Badge
+                            variant="accent"
+                            className="absolute top-3 left-3 md:top-6 md:left-6 shadow-lg"
+                          >
                             {post.frontmatter.category}
                           </Badge>
                         )}
@@ -131,7 +164,7 @@ export default async function BlogIndex({ params: { locale } }: BlogIndexProps)
                         {new Date(post.frontmatter.date).toLocaleDateString(locale, {
                           year: 'numeric',
                           month: 'long',
-                          day: 'numeric'
+                          day: 'numeric',
                         })}
                       </div>
                       <h3 className="text-lg md:text-2xl font-bold text-primary mb-3 md:mb-6 group-hover:text-accent-dark transition-colors line-clamp-2 leading-tight">
@@ -145,8 +178,18 @@ export default async function BlogIndex({ params: { locale } }: BlogIndexProps)
                           {t('readMore')}
                         </span>
                         <div className="w-8 h-8 md:w-10 md:h-10 rounded-full bg-primary-light flex items-center justify-center text-saturated group-hover:bg-accent group-hover:text-primary-dark transition-all duration-300">
-                          <svg className="w-4 h-4 md:w-5 md:h-5 transition-transform group-hover:translate-x-1" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-                            <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M17 8l4 4m0 0l-4 4m4-4H3" />
+                          <svg
+                            className="w-4 h-4 md:w-5 md:h-5 transition-transform group-hover:translate-x-1"
+                            fill="none"
+                            stroke="currentColor"
+                            viewBox="0 0 24 24"
+                          >
+                            <path
+                              strokeLinecap="round"
+                              strokeLinejoin="round"
+                              strokeWidth={2}
+                              d="M17 8l4 4m0 0l-4 4m4-4H3"
+                            />
                           </svg>
                         </div>
                       </div>
@@ -156,13 +199,21 @@ export default async function BlogIndex({ params: { locale } }: BlogIndexProps)
               </Reveal>
             ))}
           </div>
-          
+
           {/* Pagination Placeholder */}
           <div className="mt-12 md:mt-24 flex justify-center gap-2 md:gap-4">
-            <Button variant="outline" size="sm" className="md:h-11 md:px-6 md:text-base" disabled>{t('prev')}</Button>
-            <Button variant="primary" size="sm" className="md:h-11 md:px-6 md:text-base">1</Button>
-            <Button variant="outline" size="sm" className="md:h-11 md:px-6 md:text-base">2</Button>
-            <Button variant="outline" size="sm" className="md:h-11 md:px-6 md:text-base">{t('next')}</Button>
+            <Button variant="outline" size="sm" className="md:h-11 md:px-6 md:text-base" disabled>
+              {t('prev')}
+            </Button>
+            <Button variant="primary" size="sm" className="md:h-11 md:px-6 md:text-base">
+              1
+            </Button>
+            <Button variant="outline" size="sm" className="md:h-11 md:px-6 md:text-base">
+              2
+            </Button>
+            <Button variant="outline" size="sm" className="md:h-11 md:px-6 md:text-base">
+              {t('next')}
+            </Button>
           </div>
         </Container>
       </Section>

app/[locale]/contact/opengraph-image.tsx

@@ -1,11 +1,14 @@
 import { ImageResponse } from 'next/og';
 import { getTranslations } from 'next-intl/server';
 import { OGImageTemplate } from '@/components/OGImageTemplate';
+import { getOgFonts, OG_IMAGE_SIZE } from '@/lib/og-helper';
 
 export const runtime = 'nodejs';
 
 export default async function Image({ params: { locale } }: { params: { locale: string } }) {
   const t = await getTranslations({ locale, namespace: 'Contact' });
+  const fonts = await getOgFonts();
+
   const title = t('meta.title') || t('title');
   const description = t('meta.description') || t('subtitle');
 
@@ -18,8 +21,8 @@ export default async function Image({ params: { locale } }: { params: { locale:
       />
     ),
     {
-      width: 1200,
-      height: 630,
+      ...OG_IMAGE_SIZE,
+      fonts,
     }
   );
 }

app/[locale]/contact/page.tsx

@@ -23,7 +23,9 @@ interface ContactPageProps {
   };
 }
 
-export async function generateMetadata({ params: { locale } }: ContactPageProps): Promise<Metadata> {
+export async function generateMetadata({
+  params: { locale },
+}: ContactPageProps): Promise<Metadata> {
   const t = await getTranslations({ locale, namespace: 'Contact' });
   const title = t('meta.title') || t('title');
   const description = t('meta.description') || t('subtitle');
@@ -31,7 +33,7 @@ export async function generateMetadata({ params: { locale } }: ContactPageProps)
     title,
     description,
     alternates: {
-      canonical: `https://klz-cables.com/${locale}/contact`,
+      canonical: `${SITE_URL}/${locale}/contact`,
       languages: {
         'de-DE': '/de/contact',
         'en-US': '/en/contact',
@@ -40,7 +42,7 @@ export async function generateMetadata({ params: { locale } }: ContactPageProps)
     openGraph: {
       title: `${title} | KLZ Cables`,
       description,
-      url: `https://klz-cables.com/${locale}/contact`,
+      url: `${SITE_URL}/${locale}/contact`,
       siteName: 'KLZ Cables',
       images: getOGImageMetadata('contact', title, locale),
       locale: `${locale.toUpperCase()}_DE`,
@@ -78,7 +80,7 @@ export default async function ContactPage({ params }: ContactPageProps) {
               '@type': 'ListItem',
               position: 1,
               name: t('title'),
-              item: `https://klz-cables.com/${locale}/contact`,
+              item: `${SITE_URL}/${locale}/contact`,
             },
           ],
         }}
@@ -89,9 +91,9 @@ export default async function ContactPage({ params }: ContactPageProps) {
           '@context': 'https://schema.org',
           '@type': 'LocalBusiness',
           name: 'KLZ Cables',
-          image: 'https://klz-cables.com/logo.png',
-          '@id': 'https://klz-cables.com',
-          url: 'https://klz-cables.com',
+          image: `${SITE_URL}/logo.png`,
+          '@id': SITE_URL,
+          url: SITE_URL,
           address: {
             '@type': 'PostalAddress',
             streetAddress: 'Raiffeisenstraße 22',
@@ -107,20 +109,12 @@ export default async function ContactPage({ params }: ContactPageProps) {
           openingHoursSpecification: [
             {
               '@type': 'OpeningHoursSpecification',
-              dayOfWeek: [
-                'Monday',
-                'Tuesday',
-                'Wednesday',
-                'Thursday',
-                'Friday'
-              ],
+              dayOfWeek: ['Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday'],
               opens: '08:00',
-              closes: '17:00'
-            }
+              closes: '17:00',
+            },
           ],
-          sameAs: [
-            'https://www.linkedin.com/company/klz-cables'
-          ]
+          sameAs: ['https://www.linkedin.com/company/klz-cables'],
         }}
       />
       {/* Hero Section */}
@@ -154,36 +148,71 @@ export default async function ContactPage({ params }: ContactPageProps) {
                 <div className="space-y-4 md:space-y-8">
                   <div className="flex items-start gap-4 md:gap-6 group">
                     <div className="w-10 h-10 md:w-14 md:h-14 rounded-xl md:rounded-2xl bg-saturated/10 flex items-center justify-center text-saturated group-hover:bg-accent group-hover:text-primary-dark transition-all duration-300 shadow-sm flex-shrink-0">
-                      <svg className="w-5 h-5 md:w-7 md:h-7" 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" />
-                        <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M15 11a3 3 0 11-6 0 3 3 0 016 0z" />
+                      <svg
+                        className="w-5 h-5 md:w-7 md:h-7"
+                        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"
+                        />
+                        <path
+                          strokeLinecap="round"
+                          strokeLinejoin="round"
+                          strokeWidth={2}
+                          d="M15 11a3 3 0 11-6 0 3 3 0 016 0z"
+                        />
                       </svg>
                     </div>
                     <div>
-                      <h4 className="text-base md:text-xl font-bold text-primary mb-1 md:mb-2">{t('info.office')}</h4>
+                      <h4 className="text-base md:text-xl font-bold text-primary mb-1 md:mb-2">
+                        {t('info.office')}
+                      </h4>
                       <p className="text-sm md:text-lg text-text-secondary leading-relaxed whitespace-pre-line">
                         {t('info.address')}
                       </p>
                     </div>
                   </div>
 
-
                   <div className="flex items-start gap-4 md:gap-6 group">
                     <div className="w-10 h-10 md:w-14 md:h-14 rounded-xl md:rounded-2xl bg-saturated/10 flex items-center justify-center text-saturated group-hover:bg-accent group-hover:text-primary-dark transition-all duration-300 shadow-sm flex-shrink-0">
-                      <svg className="w-5 h-5 md:w-7 md:h-7" fill="none" viewBox="0 0 24 24" stroke="currentColor">
-                        <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M3 8l7.89 5.26a2 2 0 002.22 0L21 8M5 19h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z" />
+                      <svg
+                        className="w-5 h-5 md:w-7 md:h-7"
+                        fill="none"
+                        viewBox="0 0 24 24"
+                        stroke="currentColor"
+                      >
+                        <path
+                          strokeLinecap="round"
+                          strokeLinejoin="round"
+                          strokeWidth={2}
+                          d="M3 8l7.89 5.26a2 2 0 002.22 0L21 8M5 19h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z"
+                        />
                       </svg>
                     </div>
                     <div>
-                      <h4 className="text-base md:text-xl font-bold text-primary mb-1 md:mb-2">{t('info.email')}</h4>
-                      <a href="mailto:info@klz-cables.com" className="text-sm md:text-lg text-text-secondary hover:text-primary transition-colors font-medium touch-target">info@klz-cables.com</a>
+                      <h4 className="text-base md:text-xl font-bold text-primary mb-1 md:mb-2">
+                        {t('info.email')}
+                      </h4>
+                      <a
+                        href="mailto:info@klz-cables.com"
+                        className="text-sm md:text-lg text-text-secondary hover:text-primary transition-colors font-medium touch-target"
+                      >
+                        info@klz-cables.com
+                      </a>
                     </div>
                   </div>
                 </div>
               </div>
 
               <div className="p-6 md:p-10 bg-white rounded-2xl md:rounded-3xl border border-neutral-medium shadow-sm animate-fade-in">
-                <Heading level={4} className="mb-4 md:mb-6">{t('hours.title')}</Heading>
+                <Heading level={4} className="mb-4 md:mb-6">
+                  {t('hours.title')}
+                </Heading>
                 <ul className="space-y-2 md:space-y-4 list-none m-0 p-0">
                   <li className="flex justify-between items-center pb-2 md:pb-4 border-b border-neutral-medium text-sm md:text-base">
                     <span className="font-bold text-primary">{t('hours.weekdays')}</span>
@@ -199,24 +228,28 @@ export default async function ContactPage({ params }: ContactPageProps) {
 
             {/* Contact Form */}
             <div className="lg:col-span-7">
-              <Suspense fallback={<div className="animate-pulse bg-neutral-medium h-96 rounded-2xl md:rounded-3xl"></div>}>
+              <Suspense
+                fallback={
+                  <div className="animate-pulse bg-neutral-medium h-96 rounded-2xl md:rounded-3xl"></div>
+                }
+              >
                 <ContactForm />
               </Suspense>
             </div>
           </div>
         </Container>
       </Section>
-      
+
       {/* Map Section */}
       <section className="h-[300px] md:h-[500px] bg-neutral-medium relative overflow-hidden grayscale hover:grayscale-0 transition-all duration-1000">
-        <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={48.8144}
-            lng={9.4144}
-          />
+        <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={48.8144} lng={9.4144} />
         </Suspense>
       </section>
     </div>

app/[locale]/layout.tsx

@@ -2,6 +2,7 @@ import Footer from '@/components/Footer';
 import Header from '@/components/Header';
 import JsonLd from '@/components/JsonLd';
 import AnalyticsProvider from '@/components/analytics/AnalyticsProvider';
+import CMSConnectivityNotice from '@/components/CMSConnectivityNotice';
 import { Metadata, Viewport } from 'next';
 import { NextIntlClientProvider } from 'next-intl';
 import { getMessages } from 'next-intl/server';
@@ -10,6 +11,13 @@ import { SITE_URL } from '@/lib/schema';
 
 export const metadata: Metadata = {
   metadataBase: new URL(SITE_URL),
+  icons: {
+    icon: [
+      { url: '/favicon.ico', sizes: 'any' },
+      { url: '/logo-blue.svg', type: 'image/svg+xml' },
+    ],
+    apple: [{ url: '/apple-touch-icon.png', sizes: '180x180', type: 'image/png' }],
+  },
 };
 
 export const viewport: Viewport = {
@@ -20,29 +28,28 @@ export const viewport: Viewport = {
   viewportFit: 'cover',
   themeColor: '#001a4d',
 };
- 
+
 export default async function LocaleLayout({
   children,
-  params: {locale}
+  params: { locale },
 }: {
   children: React.ReactNode;
-  params: {locale: string};
+  params: { locale: string };
 }) {
   // Providing all messages to the client
   // side is the easiest way to get started
   const messages = await getMessages();
- 
+
   return (
     <html lang={locale} className="scroll-smooth overflow-x-hidden">
       <body className="flex flex-col min-h-screen font-sans selection:bg-accent selection:text-primary-dark antialiased overflow-x-hidden">
         <NextIntlClientProvider messages={messages} locale={locale}>
           <JsonLd />
           <Header />
-          <main className="flex-grow animate-fade-in overflow-visible">
-            {children}
-          </main>
+          <main className="flex-grow animate-fade-in overflow-visible">{children}</main>
           <Footer />
-          
+          <CMSConnectivityNotice />
+
           {/* Sends pageviews for client-side navigations */}
           <AnalyticsProvider />
         </NextIntlClientProvider>

app/[locale]/opengraph-image.tsx

@@ -1,11 +1,13 @@
 import { ImageResponse } from 'next/og';
 import { getTranslations } from 'next-intl/server';
 import { OGImageTemplate } from '@/components/OGImageTemplate';
+import { getOgFonts, OG_IMAGE_SIZE } from '@/lib/og-helper';
 
 export const runtime = 'nodejs';
 
 export default async function Image({ params: { locale } }: { params: { locale: string } }) {
   const t = await getTranslations({ locale, namespace: 'Index.meta' });
+  const fonts = await getOgFonts();
 
   return new ImageResponse(
     (
@@ -16,8 +18,9 @@ export default async function Image({ params: { locale } }: { params: { locale:
       />
     ),
     {
-      width: 1200,
-      height: 630,
+      ...OG_IMAGE_SIZE,
+      fonts,
     }
   );
 }
+

app/[locale]/page.tsx

@@ -20,25 +20,45 @@ export default function HomePage({ params: { locale } }: { params: { locale: str
     <div className="flex flex-col min-h-screen">
       <JsonLd
         id="breadcrumb-home"
-        data={getBreadcrumbSchema([
-          { name: 'Home', item: `/${locale}` },
-        ])}
+        data={getBreadcrumbSchema([{ name: 'Home', item: `/${locale}` }])}
       />
       <Hero />
-      <Reveal><ProductCategories /></Reveal>
-      <Reveal><WhatWeDo /></Reveal>
-      <Reveal><RecentPosts locale={locale} /></Reveal>
-      <Reveal><Experience /></Reveal>
-      <Reveal><WhyChooseUs /></Reveal>
-      <Reveal><MeetTheTeam /></Reveal>
-      <Reveal><GallerySection /></Reveal>
-      <Reveal><VideoSection /></Reveal>
-      <Reveal><CTA /></Reveal>
+      <Reveal>
+        <ProductCategories />
+      </Reveal>
+      <Reveal>
+        <WhatWeDo />
+      </Reveal>
+      <Reveal>
+        <RecentPosts locale={locale} />
+      </Reveal>
+      <Reveal>
+        <Experience />
+      </Reveal>
+      <Reveal>
+        <WhyChooseUs />
+      </Reveal>
+      <Reveal>
+        <MeetTheTeam />
+      </Reveal>
+      <Reveal>
+        <GallerySection />
+      </Reveal>
+      <Reveal>
+        <VideoSection />
+      </Reveal>
+      <Reveal>
+        <CTA />
+      </Reveal>
     </div>
   );
 }
 
-export async function generateMetadata({ params: { locale } }: { params: { locale: string } }): Promise<Metadata> {
+export async function generateMetadata({
+  params: { locale },
+}: {
+  params: { locale: string };
+}): Promise<Metadata> {
   // Use translations for meta where available (namespace: Index.meta)
   // Fallback to a sensible default if translation keys are missing.
   let t;
@@ -62,15 +82,15 @@ export async function generateMetadata({ params: { locale } }: { params: { local
     alternates: {
       canonical: `/${locale}`,
       languages: {
-        'de': '/de',
-        'en': '/en',
+        de: '/de',
+        en: '/en',
         'x-default': '/en',
       },
     },
     openGraph: {
       title: `${title} | KLZ Cables`,
       description,
-      url: `https://klz-cables.com/${locale}`,
+      url: `${SITE_URL}/${locale}`,
       images: getOGImageMetadata('', title, locale),
     },
     twitter: {

app/[locale]/products/[...slug]/page.tsx

@@ -31,12 +31,23 @@ export async function generateMetadata({ params }: ProductPageProps): Promise<Me
   const t = await getTranslations('Products');
 
   // Check if it's a category page
-  const categories = ['low-voltage-cables', 'medium-voltage-cables', 'high-voltage-cables', 'solar-cables'];
+  const categories = [
+    'low-voltage-cables',
+    'medium-voltage-cables',
+    'high-voltage-cables',
+    'solar-cables',
+  ];
   const fileSlug = await mapSlugToFileSlug(productSlug, locale);
   if (categories.includes(fileSlug)) {
-    const categoryKey = fileSlug.replace(/-cables$/, '').replace(/-([a-z])/g, (g) => g[1].toUpperCase());
-    const categoryTitle = t.has(`categories.${categoryKey}.title`) ? t(`categories.${categoryKey}.title`) : fileSlug;
-    const categoryDesc = t.has(`categories.${categoryKey}.description`) ? t(`categories.${categoryKey}.description`) : '';
+    const categoryKey = fileSlug
+      .replace(/-cables$/, '')
+      .replace(/-([a-z])/g, (g) => g[1].toUpperCase());
+    const categoryTitle = t.has(`categories.${categoryKey}.title`)
+      ? t(`categories.${categoryKey}.title`)
+      : fileSlug;
+    const categoryDesc = t.has(`categories.${categoryKey}.description`)
+      ? t(`categories.${categoryKey}.description`)
+      : '';
 
     return {
       title: categoryTitle,
@@ -44,15 +55,15 @@ export async function generateMetadata({ params }: ProductPageProps): Promise<Me
       alternates: {
         canonical: `/${locale}/products/${productSlug}`,
         languages: {
-          'de': `/de/products/${await mapFileSlugToTranslated(productSlug, 'de')}`,
-          'en': `/en/products/${await mapFileSlugToTranslated(productSlug, 'en')}`,
+          de: `/de/products/${await mapFileSlugToTranslated(productSlug, 'de')}`,
+          en: `/en/products/${await mapFileSlugToTranslated(productSlug, 'en')}`,
           'x-default': `/en/products/${await mapFileSlugToTranslated(productSlug, 'en')}`,
         },
       },
       openGraph: {
         title: `${categoryTitle} | KLZ Cables`,
         description: categoryDesc,
-        url: `https://klz-cables.com/${locale}/products/${productSlug}`,
+        url: `${SITE_URL}/${locale}/products/${productSlug}`,
         images: getProductOGImageMetadata(fileSlug, categoryTitle, locale),
       },
       twitter: {
@@ -72,8 +83,8 @@ export async function generateMetadata({ params }: ProductPageProps): Promise<Me
     alternates: {
       canonical: `/${locale}/products/${slug.join('/')}`,
       languages: {
-        'de': `/de/products/${await mapFileSlugToTranslated(slug[0], 'de')}/${await mapFileSlugToTranslated(productSlug, 'de')}`,
-        'en': `/en/products/${await mapFileSlugToTranslated(slug[0], 'en')}/${await mapFileSlugToTranslated(productSlug, 'en')}`,
+        de: `/de/products/${await mapFileSlugToTranslated(slug[0], 'de')}/${await mapFileSlugToTranslated(productSlug, 'de')}`,
+        en: `/en/products/${await mapFileSlugToTranslated(slug[0], 'en')}/${await mapFileSlugToTranslated(productSlug, 'en')}`,
         'x-default': `/en/products/${await mapFileSlugToTranslated(slug[0], 'en')}/${await mapFileSlugToTranslated(productSlug, 'en')}`,
       },
     },
@@ -81,7 +92,7 @@ export async function generateMetadata({ params }: ProductPageProps): Promise<Me
       title: `${product.frontmatter.title} | KLZ Cables`,
       description: product.frontmatter.description,
       type: 'website',
-      url: `https://klz-cables.com/${locale}/products/${slug.join('/')}`,
+      url: `${SITE_URL}/${locale}/products/${slug.join('/')}`,
       images: getProductOGImageMetadata(productSlug, product.frontmatter.title, locale),
     },
     twitter: {
@@ -95,20 +106,36 @@ export async function generateMetadata({ params }: ProductPageProps): Promise<Me
 const components = {
   ProductTechnicalData,
   ProductTabs,
-  p: (props: any) => <p {...props} className="text-lg md:text-xl text-text-secondary leading-relaxed mb-8 font-medium" />,
+  p: (props: any) => (
+    <p
+      {...props}
+      className="text-lg md:text-xl text-text-secondary leading-relaxed mb-8 font-medium"
+    />
+  ),
   h2: (props: any) => (
     <div className="relative mb-16">
-      <h2 {...props} className="text-3xl md:text-4xl font-black text-primary tracking-tighter uppercase mb-6" />
+      <h2
+        {...props}
+        className="text-3xl md:text-4xl font-black text-primary tracking-tighter uppercase mb-6"
+      />
       <div className="w-20 h-1.5 bg-accent rounded-full" />
     </div>
   ),
-  h3: (props: any) => <h3 {...props} className="text-2xl md:text-3xl font-black text-primary mb-10 tracking-tight uppercase" />,
+  h3: (props: any) => (
+    <h3
+      {...props}
+      className="text-2xl md:text-3xl font-black text-primary mb-10 tracking-tight uppercase"
+    />
+  ),
   ul: (props: any) => <ul {...props} className="list-none pl-0 mb-10" />,
   section: (props: any) => <div {...props} className="block" />,
   li: (props: any) => (
     <li className="flex items-start gap-4 group mb-4 last:mb-0">
       <div className="mt-2.5 w-2 h-2 rounded-full bg-accent flex-shrink-0 group-hover:scale-125 transition-transform" />
-      <span {...props} className="text-lg md:text-xl text-text-secondary leading-relaxed font-medium" />
+      <span
+        {...props}
+        className="text-lg md:text-xl text-text-secondary leading-relaxed font-medium"
+      />
     </li>
   ),
   strong: (props: any) => <strong {...props} className="font-black text-primary" />,
@@ -117,13 +144,26 @@ const components = {
       <table {...props} className="min-w-full divide-y divide-neutral-dark/10" />
     </div>
   ),
-  th: (props: any) => <th {...props} className="px-8 py-6 bg-neutral-light/50 text-left text-[10px] font-black uppercase tracking-[0.25em] text-primary/60" />,
-  td: (props: any) => <td {...props} className="px-8 py-6 text-text-secondary border-t border-neutral-dark/5 text-lg md:text-xl font-medium" />,
+  th: (props: any) => (
+    <th
+      {...props}
+      className="px-8 py-6 bg-neutral-light/50 text-left text-[10px] font-black uppercase tracking-[0.25em] text-primary/60"
+    />
+  ),
+  td: (props: any) => (
+    <td
+      {...props}
+      className="px-8 py-6 text-text-secondary border-t border-neutral-dark/5 text-lg md:text-xl font-medium"
+    />
+  ),
   hr: () => <hr className="my-24 border-t-2 border-neutral-dark/5" />,
   blockquote: (props: any) => (
     <div className="my-20 p-10 md:p-16 bg-primary-dark rounded-[40px] relative overflow-hidden group">
       <div className="absolute top-0 right-0 w-64 h-64 bg-accent/10 rounded-full -translate-y-1/2 translate-x-1/2 blur-3xl group-hover:bg-accent/20 transition-colors duration-700" />
-      <div className="relative z-10 italic text-2xl md:text-3xl text-white/90 leading-relaxed font-black tracking-tight" {...props} />
+      <div
+        className="relative z-10 italic text-2xl md:text-3xl text-white/90 leading-relaxed font-black tracking-tight"
+        {...props}
+      />
     </div>
   ),
 };
@@ -134,28 +174,36 @@ export default async function ProductPage({ params }: ProductPageProps) {
   const t = await getTranslations('Products');
 
   // Check if it's a category page
-  const categories = ['low-voltage-cables', 'medium-voltage-cables', 'high-voltage-cables', 'solar-cables'];
+  const categories = [
+    'low-voltage-cables',
+    'medium-voltage-cables',
+    'high-voltage-cables',
+    'solar-cables',
+  ];
   const fileSlug = await mapSlugToFileSlug(productSlug, locale);
-  
+
   if (categories.includes(fileSlug)) {
     const allProducts = await getAllProducts(locale);
-    const categoryKey = fileSlug.replace(/-cables$/, '').replace(/-([a-z])/g, (g) => g[1].toUpperCase());
-    const categoryTitle = t.has(`categories.${categoryKey}.title`) ? t(`categories.${categoryKey}.title`) : fileSlug;
-    
+    const categoryKey = fileSlug
+      .replace(/-cables$/, '')
+      .replace(/-([a-z])/g, (g) => g[1].toUpperCase());
+    const categoryTitle = t.has(`categories.${categoryKey}.title`)
+      ? t(`categories.${categoryKey}.title`)
+      : fileSlug;
+
     // Filter products for this category
-    const filteredProducts = allProducts.filter(p =>
-      p.frontmatter.categories.some(cat =>
-        cat.toLowerCase().replace(/\s+/g, '-') === fileSlug ||
-        cat === categoryTitle
-      )
+    const filteredProducts = allProducts.filter((p) =>
+      p.frontmatter.categories.some(
+        (cat) => cat.toLowerCase().replace(/\s+/g, '-') === fileSlug || cat === categoryTitle,
+      ),
     );
 
     // Get translated product slugs
     const productsWithTranslatedSlugs = await Promise.all(
       filteredProducts.map(async (p) => ({
         ...p,
-        translatedSlug: await mapFileSlugToTranslated(p.slug, locale)
-      }))
+        translatedSlug: await mapFileSlugToTranslated(p.slug, locale),
+      })),
     );
 
     return (
@@ -164,7 +212,9 @@ export default async function ProductPage({ params }: ProductPageProps) {
           <Container className="relative z-10">
             <div className="max-w-4xl animate-slide-up">
               <nav className="flex items-center mb-8 text-white/40 text-sm font-bold uppercase tracking-widest">
-                <Link href={`/${locale}/products`} className="hover:text-accent transition-colors">{t('title')}</Link>
+                <Link href={`/${locale}/products`} className="hover:text-accent transition-colors">
+                  {t('title')}
+                </Link>
                 <span className="mx-3 opacity-30">/</span>
                 <span className="text-white/90">{categoryTitle}</span>
               </nav>
@@ -202,7 +252,10 @@ export default async function ProductPage({ params }: ProductPageProps) {
                   <div className="p-8 md:p-10">
                     <div className="flex flex-wrap gap-2 mb-4">
                       {product.frontmatter.categories.map((cat, i) => (
-                        <span key={i} className="text-[10px] font-bold uppercase tracking-widest text-primary/40">
+                        <span
+                          key={i}
+                          className="text-[10px] font-bold uppercase tracking-widest text-primary/40"
+                        >
                           {cat}
                         </span>
                       ))}
@@ -217,8 +270,18 @@ export default async function ProductPage({ params }: ProductPageProps) {
                       <span className="border-b-2 border-primary/10 group-hover:border-accent-dark transition-colors pb-1">
                         {t('details')}
                       </span>
-                      <svg className="w-5 h-5 ml-3 transition-transform group-hover:translate-x-1" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-                        <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M17 8l4 4m0 0l-4 4m4-4H3" />
+                      <svg
+                        className="w-5 h-5 ml-3 transition-transform group-hover:translate-x-1"
+                        fill="none"
+                        stroke="currentColor"
+                        viewBox="0 0 24 24"
+                      >
+                        <path
+                          strokeLinecap="round"
+                          strokeLinejoin="round"
+                          strokeWidth={2}
+                          d="M17 8l4 4m0 0l-4 4m4-4H3"
+                        />
                       </svg>
                     </div>
                   </div>
@@ -238,7 +301,9 @@ export default async function ProductPage({ params }: ProductPageProps) {
   }
 
   // Extract technical data for schema
-  const technicalDataMatch = product.content.match(/technicalData=\{<ProductTechnicalData data=\{(.*?)\}\s*\/>\}/s);
+  const technicalDataMatch = product.content.match(
+    /technicalData=\{<ProductTechnicalData data=\{(.*?)\}\s*\/>\}/s,
+  );
   let technicalItems = [];
   if (technicalDataMatch) {
     try {
@@ -253,11 +318,15 @@ export default async function ProductPage({ params }: ProductPageProps) {
   const isFallback = (product.frontmatter as any).isFallback;
   const categorySlug = slug[0];
   const categoryFileSlug = await mapSlugToFileSlug(categorySlug, locale);
-  const categoryKey = categoryFileSlug.replace(/-cables$/, '').replace(/-([a-z])/g, (g) => g[1].toUpperCase());
-  const categoryTitle = t.has(`categories.${categoryKey}.title`) ? t(`categories.${categoryKey}.title`) : categoryFileSlug;
+  const categoryKey = categoryFileSlug
+    .replace(/-cables$/, '')
+    .replace(/-([a-z])/g, (g) => g[1].toUpperCase());
+  const categoryTitle = t.has(`categories.${categoryKey}.title`)
+    ? t(`categories.${categoryKey}.title`)
+    : categoryFileSlug;
 
   const sidebar = (
-    <ProductSidebar 
+    <ProductSidebar
       productName={product.frontmatter.title}
       productImage={product.frontmatter.images?.[0]}
       datasheetPath={datasheetPath}
@@ -287,17 +356,24 @@ export default async function ProductPage({ params }: ProductPageProps) {
         {/* Background Decorative Elements */}
         <div className="absolute top-0 right-0 w-1/2 h-full bg-gradient-to-l from-accent/5 to-transparent pointer-events-none" />
         <div className="absolute -top-24 -right-24 w-96 h-96 bg-accent/10 rounded-full blur-3xl pointer-events-none" />
-        
+
         <Container className="relative z-10">
           <div className="max-w-4xl animate-slide-up">
             <nav className="flex items-center mb-12 text-white/40 text-[10px] font-black uppercase tracking-[0.2em]">
-              <Link href={`/${locale}/products`} className="hover:text-accent transition-colors">{t('title')}</Link>
+              <Link href={`/${locale}/products`} className="hover:text-accent transition-colors">
+                {t('title')}
+              </Link>
               <span className="mx-4 opacity-20">/</span>
-              <Link href={`/${locale}/products/${categorySlug}`} className="hover:text-accent transition-colors">{categoryTitle}</Link>
+              <Link
+                href={`/${locale}/products/${categorySlug}`}
+                className="hover:text-accent transition-colors"
+              >
+                {categoryTitle}
+              </Link>
               <span className="mx-4 opacity-20">/</span>
               <span className="text-white/90">{product.frontmatter.title}</span>
             </nav>
-            
+
             <div className="flex flex-col lg:flex-row lg:items-center justify-between gap-12">
               <div className="flex-1">
                 {isFallback && (
@@ -308,7 +384,11 @@ export default async function ProductPage({ params }: ProductPageProps) {
                 )}
                 <div className="flex flex-wrap gap-3 mb-8">
                   {product.frontmatter.categories.map((cat, idx) => (
-                    <Badge key={idx} variant="accent" className="bg-white/5 text-white/80 border-white/10 backdrop-blur-md px-5 py-2 text-[10px] font-black tracking-[0.15em]">
+                    <Badge
+                      key={idx}
+                      variant="accent"
+                      className="bg-white/5 text-white/80 border-white/10 backdrop-blur-md px-5 py-2 text-[10px] font-black tracking-[0.15em]"
+                    >
                       {cat}
                     </Badge>
                   ))}
@@ -329,11 +409,14 @@ export default async function ProductPage({ params }: ProductPageProps) {
         <Container className="relative">
           {/* Large Product Image Section */}
           {product.frontmatter.images && product.frontmatter.images.length > 0 && (
-            <div className="relative -mt-32 mb-32 animate-slide-up" style={{ animationDelay: '200ms' }}>
+            <div
+              className="relative -mt-32 mb-32 animate-slide-up"
+              style={{ animationDelay: '200ms' }}
+            >
               <div className="bg-white shadow-[0_32px_64px_-12px_rgba(0,0,0,0.1)] rounded-[48px] border border-neutral-dark/5 overflow-hidden p-12 md:p-20 lg:p-24">
                 <div className="relative w-full aspect-[21/9]">
-                  <Image 
-                    src={product.frontmatter.images[0]} 
+                  <Image
+                    src={product.frontmatter.images[0]}
                     alt={product.frontmatter.title}
                     fill
                     className="object-contain transition-transform duration-1000 hover:scale-105"
@@ -342,12 +425,20 @@ export default async function ProductPage({ params }: ProductPageProps) {
                   {/* Subtle reflection/shadow effect */}
                   <div className="absolute bottom-0 left-1/2 -translate-x-1/2 w-3/4 h-12 bg-black/5 blur-3xl rounded-[100%]" />
                 </div>
-                
+
                 {product.frontmatter.images.length > 1 && (
                   <div className="flex justify-center gap-8 mt-20">
                     {product.frontmatter.images.slice(0, 5).map((img, idx) => (
-                      <div key={idx} className="relative w-24 h-24 md:w-32 md:h-32 border-2 border-neutral-dark/5 rounded-3xl overflow-hidden bg-neutral-light/30 hover:border-accent transition-all duration-500 cursor-pointer group p-4">
-                        <Image src={img} alt="" fill className="object-contain p-4 transition-transform duration-700 group-hover:scale-110" />
+                      <div
+                        key={idx}
+                        className="relative w-24 h-24 md:w-32 md:h-32 border-2 border-neutral-dark/5 rounded-3xl overflow-hidden bg-neutral-light/30 hover:border-accent transition-all duration-500 cursor-pointer group p-4"
+                      >
+                        <Image
+                          src={img}
+                          alt=""
+                          fill
+                          className="object-contain p-4 transition-transform duration-700 group-hover:scale-110"
+                        />
                       </div>
                     ))}
                   </div>
@@ -360,7 +451,7 @@ export default async function ProductPage({ params }: ProductPageProps) {
             <div className="w-full">
               {/* Main Content Area */}
               <div className="max-w-none">
-                 <MDXRemote source={processedContent} components={productComponents} />
+                <MDXRemote source={processedContent} components={productComponents} />
               </div>
 
               {/* Datasheet Download Section - Only for Medium Voltage for now */}
@@ -379,45 +470,49 @@ export default async function ProductPage({ params }: ProductPageProps) {
               {/* Structured Data */}
               <JsonLd
                 id={`jsonld-${product.slug}`}
-                data={{
-                  '@context': 'https://schema.org',
-                  '@type': 'Product',
-                  name: product.frontmatter.title,
-                  description: product.frontmatter.description,
-                  sku: product.frontmatter.sku || product.slug.toUpperCase(),
-                  image: product.frontmatter.images?.[0] ? `https://klz-cables.com${product.frontmatter.images[0]}` : undefined,
-                  brand: {
-                    '@type': 'Brand',
-                    name: 'KLZ Cables',
-                  },
-                  offers: {
-                    '@type': 'Offer',
-                    availability: 'https://schema.org/InStock',
-                    priceCurrency: 'EUR',
-                    url: `https://klz-cables.com/${locale}/products/${slug.join('/')}`,
-                    itemCondition: 'https://schema.org/NewCondition',
-                  },
-                  additionalProperty: technicalItems.map((item: any) => ({
-                    '@type': 'PropertyValue',
-                    name: item.label,
-                    value: item.value,
-                  })),
-                  category: product.frontmatter.categories.join(', '),
-                  mainEntityOfPage: {
-                    '@type': 'WebPage',
-                    '@id': `https://klz-cables.com/${locale}/products/${slug.join('/')}`,
-                  },
-                } as any}
+                data={
+                  {
+                    '@context': 'https://schema.org',
+                    '@type': 'Product',
+                    name: product.frontmatter.title,
+                    description: product.frontmatter.description,
+                    sku: product.frontmatter.sku || product.slug.toUpperCase(),
+                    image: product.frontmatter.images?.[0]
+                      ? `${SITE_URL}${product.frontmatter.images[0]}`
+                      : undefined,
+                    brand: {
+                      '@type': 'Brand',
+                      name: 'KLZ Cables',
+                    },
+                    offers: {
+                      '@type': 'Offer',
+                      availability: 'https://schema.org/InStock',
+                      priceCurrency: 'EUR',
+                      url: `${SITE_URL}/${locale}/products/${slug.join('/')}`,
+                      itemCondition: 'https://schema.org/NewCondition',
+                    },
+                    additionalProperty: technicalItems.map((item: any) => ({
+                      '@type': 'PropertyValue',
+                      name: item.label,
+                      value: item.value,
+                    })),
+                    category: product.frontmatter.categories.join(', '),
+                    mainEntityOfPage: {
+                      '@type': 'WebPage',
+                      '@id': `${SITE_URL}/${locale}/products/${slug.join('/')}`,
+                    },
+                  } as any
+                }
               />
             </div>
           </div>
 
           {/* Related Products Section */}
           <div className="mt-16 pt-16 border-t border-neutral-dark/5">
-            <RelatedProducts 
-              currentSlug={productSlug} 
-              categories={product.frontmatter.categories} 
-              locale={locale} 
+            <RelatedProducts
+              currentSlug={productSlug}
+              categories={product.frontmatter.categories}
+              locale={locale}
             />
           </div>
         </Container>

app/[locale]/products/opengraph-image.tsx

@@ -1,83 +1,29 @@
 import { ImageResponse } from 'next/og';
-import { getProductBySlug } from '@/lib/mdx';
 import { getTranslations } from 'next-intl/server';
 import { OGImageTemplate } from '@/components/OGImageTemplate';
+import { getOgFonts, OG_IMAGE_SIZE } from '@/lib/og-helper';
 
 export const runtime = 'nodejs';
 
-export default async function Image({ params: { locale, slug } }: { params: { locale: string, slug?: string[] } }) {
-  const t = await getTranslations('Products');
+export default async function Image({ params: { locale } }: { params: { locale: string } }) {
+  const t = await getTranslations({ locale, namespace: 'Products' });
+  const fonts = await getOgFonts();
 
-  // If no slug, it's the main products page
-  if (!slug || slug.length === 0) {
-    const title = t('meta.title') || t('title');
-    const description = t('meta.description') || t('subtitle');
-
-    return new ImageResponse(
-      (
-        <OGImageTemplate
-          title={title}
-          description={description}
-          label="Products"
-        />
-      ),
-      {
-        width: 1200,
-        height: 630,
-      }
-    );
-  }
-
-  const productSlug = slug[slug.length - 1];
-
-  // Check if it's a category page
-  const categories = ['low-voltage-cables', 'medium-voltage-cables', 'high-voltage-cables', 'solar-cables'];
-  if (categories.includes(productSlug)) {
-    const categoryKey = productSlug.replace(/-cables$/, '').replace(/-([a-z])/g, (g) => g[1].toUpperCase());
-    const categoryTitle = t.has(`categories.${categoryKey}.title`) ? t(`categories.${categoryKey}.title`) : productSlug;
-    const categoryDesc = t.has(`categories.${categoryKey}.description`) ? t(`categories.${categoryKey}.description`) : '';
-
-    return new ImageResponse(
-      (
-        <OGImageTemplate
-          title={categoryTitle}
-          description={categoryDesc}
-          label="Product Category"
-        />
-      ),
-      {
-        width: 1200,
-        height: 630,
-      }
-    );
-  }
-
-  const product = await getProductBySlug(productSlug, locale);
-
-  if (!product) {
-    return new ImageResponse(
-      <div style={{ display: 'flex', width: '100%', height: '100%', backgroundColor: '#001a4d' }} />
-    );
-  }
-
-  const featuredImage = product.frontmatter.images?.[0]
-    ? (product.frontmatter.images[0].startsWith('http')
-        ? product.frontmatter.images[0]
-        : `https://klz-cables.com${product.frontmatter.images[0]}`)
-    : undefined;
+  const title = t('meta.title') || t('title');
+  const description = t('meta.description') || t('subtitle');
 
   return new ImageResponse(
     (
       <OGImageTemplate
-        title={product.frontmatter.title}
-        description={product.frontmatter.description}
-        label={product.frontmatter.categories?.[0] || 'Product'}
-        image={featuredImage?.startsWith('http') ? featuredImage : undefined}
+        title={title}
+        description={description}
+        label="Products"
       />
     ),
     {
-      width: 1200,
-      height: 630,
+      ...OG_IMAGE_SIZE,
+      fonts,
     }
   );
 }
+

app/[locale]/products/page.tsx

@@ -7,6 +7,7 @@ import Image from 'next/image';
 import Link from 'next/link';
 import { mapFileSlugToTranslated } from '@/lib/slugs';
 import { getOGImageMetadata } from '@/lib/metadata';
+import { SITE_URL } from '@/lib/schema';
 
 interface ProductsPageProps {
   params: {
@@ -14,7 +15,9 @@ interface ProductsPageProps {
   };
 }
 
-export async function generateMetadata({ params: { locale } }: ProductsPageProps): Promise<Metadata> {
+export async function generateMetadata({
+  params: { locale },
+}: ProductsPageProps): Promise<Metadata> {
   const t = await getTranslations({ locale, namespace: 'Products' });
   const title = t('meta.title') || t('title');
   const description = t('meta.description') || t('subtitle');
@@ -24,15 +27,15 @@ export async function generateMetadata({ params: { locale } }: ProductsPageProps
     alternates: {
       canonical: `/${locale}/products`,
       languages: {
-        'de': '/de/products',
-        'en': '/en/products',
+        de: '/de/products',
+        en: '/en/products',
         'x-default': '/en/products',
       },
     },
     openGraph: {
       title: `${title} | KLZ Cables`,
       description,
-      url: `https://klz-cables.com/${locale}/products`,
+      url: `${SITE_URL}/${locale}/products`,
       images: getOGImageMetadata('products', title, locale),
     },
     twitter: {
@@ -58,29 +61,29 @@ export default async function ProductsPage({ params }: ProductsPageProps) {
       desc: t('categories.lowVoltage.description'),
       img: '/uploads/2024/11/low-voltage-category.webp',
       icon: '/uploads/2024/11/Low-Voltage.svg',
-      href: `/${params.locale}/products/${lowVoltageSlug}`
+      href: `/${params.locale}/products/${lowVoltageSlug}`,
     },
     {
       title: t('categories.mediumVoltage.title'),
       desc: t('categories.mediumVoltage.description'),
       img: '/uploads/2024/11/medium-voltage-category.webp',
       icon: '/uploads/2024/11/Medium-Voltage.svg',
-      href: `/${params.locale}/products/${mediumVoltageSlug}`
+      href: `/${params.locale}/products/${mediumVoltageSlug}`,
     },
     {
       title: t('categories.highVoltage.title'),
       desc: t('categories.highVoltage.description'),
       img: '/uploads/2024/11/high-voltage-category.webp',
       icon: '/uploads/2024/11/High-Voltage.svg',
-      href: `/${params.locale}/products/${highVoltageSlug}`
+      href: `/${params.locale}/products/${highVoltageSlug}`,
     },
     {
       title: t('categories.solar.title'),
       desc: t('categories.solar.description'),
       img: '/uploads/2024/11/solar-category.webp',
       icon: '/uploads/2024/11/Solar.svg',
-      href: `/${params.locale}/products/${solarSlug}`
-    }
+      href: `/${params.locale}/products/${solarSlug}`,
+    },
   ];
 
   return (
@@ -89,7 +92,10 @@ export default async function ProductsPage({ params }: ProductsPageProps) {
       <section className="relative min-h-[50vh] md:min-h-[70vh] flex items-center pt-32 pb-20 md:pt-40 md:pb-32 overflow-hidden bg-primary-dark">
         <Container className="relative z-10">
           <div className="max-w-4xl animate-slide-up">
-            <Badge variant="saturated" className="mb-4 md:mb-8 shadow-lg px-3 py-1 md:px-4 md:py-1.5">
+            <Badge
+              variant="saturated"
+              className="mb-4 md:mb-8 shadow-lg px-3 py-1 md:px-4 md:py-1.5"
+            >
               {t('heroSubtitle')}
             </Badge>
             <Heading level={1} className="text-white mb-4 md:mb-8">
@@ -97,16 +103,24 @@ export default async function ProductsPage({ params }: ProductsPageProps) {
                 green: (chunks) => (
                   <span className="relative inline-block">
                     <span className="relative z-10 text-accent italic">{chunks}</span>
-                    <Scribble variant="circle" className="w-[140%] h-[140%] -top-[20%] -left-[20%] text-accent/30 hidden md:block" />
+                    <Scribble
+                      variant="circle"
+                      className="w-[140%] h-[140%] -top-[20%] -left-[20%] text-accent/30 hidden md:block"
+                    />
                   </span>
-                )
+                ),
               })}
             </Heading>
             <p className="text-lg md:text-xl text-white/70 leading-relaxed max-w-2xl mb-8 md:mb-12 line-clamp-2 md:line-clamp-none">
               {t('subtitle')}
             </p>
             <div className="flex flex-wrap gap-4 md:gap-6">
-              <Button href="#categories" variant="accent" size="lg" className="group w-full md:w-auto">
+              <Button
+                href="#categories"
+                variant="accent"
+                size="lg"
+                className="group w-full md:w-auto"
+              >
                 {t('viewProducts')}
                 <span className="ml-3 transition-transform group-hover:translate-y-1">↓</span>
               </Button>
@@ -123,8 +137,8 @@ export default async function ProductsPage({ params }: ProductsPageProps) {
                 <Link key={idx} href={category.href} className="group block">
                   <Card className="h-full border-none shadow-sm hover:shadow-2xl transition-all duration-500 rounded-[24px] md:rounded-[48px] overflow-hidden bg-white active:scale-[0.98]">
                     <div className="relative h-[200px] md:h-[400px] overflow-hidden">
-                      <Image 
-                        src={category.img} 
+                      <Image
+                        src={category.img}
                         alt={category.title}
                         fill
                         className="object-cover transition-transform duration-1000 group-hover:scale-105"
@@ -132,13 +146,22 @@ export default async function ProductsPage({ params }: ProductsPageProps) {
                         unoptimized
                       />
                       <div className="absolute inset-0 image-overlay-gradient opacity-80 group-hover:opacity-90 transition-opacity duration-500" />
-                      
+
                       <div className="absolute top-3 right-3 md:top-8 md:right-8 w-10 h-10 md:w-20 md:h-20 bg-white/10 backdrop-blur-md rounded-xl md:rounded-[24px] flex items-center justify-center border border-white/20 shadow-2xl transition-all duration-500 group-hover:scale-110 group-hover:bg-white/20">
-                        <Image src={category.icon} alt="" width={24} height={24} className="w-6 h-6 md:w-12 md:h-12 brightness-0 invert opacity-80" />
+                        <Image
+                          src={category.icon}
+                          alt=""
+                          width={24}
+                          height={24}
+                          className="w-6 h-6 md:w-12 md:h-12 brightness-0 invert opacity-80"
+                        />
                       </div>
 
                       <div className="absolute bottom-4 left-4 md:bottom-10 md:left-10 right-4 md:right-10">
-                        <Badge variant="accent" className="mb-2 md:mb-4 shadow-lg bg-accent text-primary-dark border-none text-[10px] md:text-xs">
+                        <Badge
+                          variant="accent"
+                          className="mb-2 md:mb-4 shadow-lg bg-accent text-primary-dark border-none text-[10px] md:text-xs"
+                        >
                           {t('categoryLabel')}
                         </Badge>
                         <h2 className="text-xl md:text-4xl font-bold text-white leading-tight transition-transform duration-500 group-hover:translate-x-1">
@@ -155,8 +178,18 @@ export default async function ProductsPage({ params }: ProductsPageProps) {
                           {t('viewProducts')}
                         </span>
                         <div className="ml-3 md:ml-4 w-8 h-8 md:w-10 md:h-10 rounded-full bg-primary-light flex items-center justify-center text-saturated group-hover:bg-accent group-hover:text-primary-dark transition-all duration-300 shadow-sm">
-                          <svg className="w-4 h-4 md:w-5 md:h-5 transition-transform group-hover:translate-x-1" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-                            <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M17 8l4 4m0 0l-4 4m4-4H3" />
+                          <svg
+                            className="w-4 h-4 md:w-5 md:h-5 transition-transform group-hover:translate-x-1"
+                            fill="none"
+                            stroke="currentColor"
+                            viewBox="0 0 24 24"
+                          >
+                            <path
+                              strokeLinecap="round"
+                              strokeLinejoin="round"
+                              strokeWidth={2}
+                              d="M17 8l4 4m0 0l-4 4m4-4H3"
+                            />
                           </svg>
                         </div>
                       </div>
@@ -168,7 +201,7 @@ export default async function ProductsPage({ params }: ProductsPageProps) {
           </div>
         </Container>
       </Section>
-      
+
       {/* Technical Support CTA */}
       <Reveal>
         <Section className="bg-white py-12 md:py-28">
@@ -177,14 +210,23 @@ export default async function ProductsPage({ params }: ProductsPageProps) {
               <div className="absolute top-0 right-0 w-1/2 h-full bg-accent/5 -skew-x-12 translate-x-1/4" />
               <div className="relative z-10 flex flex-col lg:flex-row items-center justify-between gap-6 md:gap-12">
                 <div className="max-w-2xl text-center lg:text-left">
-                  <h2 className="text-2xl md:text-5xl lg:text-6xl font-bold text-white mb-4 md:mb-8 tracking-tight">{t('cta.title')}</h2>
+                  <h2 className="text-2xl md:text-5xl lg:text-6xl font-bold text-white mb-4 md:mb-8 tracking-tight">
+                    {t('cta.title')}
+                  </h2>
                   <p className="text-base md:text-xl text-white/70 leading-relaxed">
                     {t('cta.description')}
                   </p>
                 </div>
-                <Button href={`/${params.locale}/contact`} variant="accent" size="lg" className="group whitespace-nowrap w-full md:w-auto md:h-16 md:px-10 md:text-xl">
+                <Button
+                  href={`/${params.locale}/contact`}
+                  variant="accent"
+                  size="lg"
+                  className="group whitespace-nowrap w-full md:w-auto md:h-16 md:px-10 md:text-xl"
+                >
                   {t('cta.button')}
-                  <span className="ml-4 transition-transform group-hover:translate-x-2">&rarr;</span>
+                  <span className="ml-4 transition-transform group-hover:translate-x-2">
+                    &rarr;
+                  </span>
                 </Button>
               </div>
             </div>

app/[locale]/team/opengraph-image.tsx

@@ -1,11 +1,14 @@
 import { ImageResponse } from 'next/og';
 import { getTranslations } from 'next-intl/server';
 import { OGImageTemplate } from '@/components/OGImageTemplate';
+import { getOgFonts, OG_IMAGE_SIZE } from '@/lib/og-helper';
 
 export const runtime = 'nodejs';
 
 export default async function Image({ params: { locale } }: { params: { locale: string } }) {
   const t = await getTranslations({ locale, namespace: 'Team' });
+  const fonts = await getOgFonts();
+
   const title = t('meta.title') || t('hero.subtitle');
   const description = t('meta.description') || t('hero.title');
 
@@ -18,8 +21,9 @@ export default async function Image({ params: { locale } }: { params: { locale:
       />
     ),
     {
-      width: 1200,
-      height: 630,
+      ...OG_IMAGE_SIZE,
+      fonts,
     }
   );
 }
+

app/[locale]/team/page.tsx

@@ -24,15 +24,15 @@ export async function generateMetadata({ params: { locale } }: TeamPageProps): P
     alternates: {
       canonical: `/${locale}/team`,
       languages: {
-        'de': '/de/team',
-        'en': '/en/team',
+        de: '/de/team',
+        en: '/en/team',
         'x-default': '/en/team',
       },
     },
     openGraph: {
       title: `${title} | KLZ Cables`,
       description,
-      url: `https://klz-cables.com/${locale}/team`,
+      url: `${SITE_URL}/${locale}/team`,
       images: getOGImageMetadata('team', title, locale),
     },
     twitter: {
@@ -50,9 +50,7 @@ export default async function TeamPage({ params: { locale } }: TeamPageProps) {
     <div className="flex flex-col min-h-screen bg-neutral-light">
       <JsonLd
         id="breadcrumb-team"
-        data={getBreadcrumbSchema([
-          { name: t('hero.subtitle'), item: `/team` },
-        ])}
+        data={getBreadcrumbSchema([{ name: t('hero.subtitle'), item: `/team` }])}
       />
       <JsonLd
         id="person-michael"
@@ -65,10 +63,8 @@ export default async function TeamPage({ params: { locale } }: TeamPageProps) {
             '@type': 'Organization',
             name: 'KLZ Cables',
           },
-          sameAs: [
-            'https://www.linkedin.com/in/michael-bodemer-33b493122/'
-          ],
-          image: `${SITE_URL}/uploads/2024/12/DSC07768-Large.webp`
+          sameAs: ['https://www.linkedin.com/in/michael-bodemer-33b493122/'],
+          image: `${SITE_URL}/uploads/2024/12/DSC07768-Large.webp`,
         }}
       />
       <JsonLd
@@ -82,10 +78,8 @@ export default async function TeamPage({ params: { locale } }: TeamPageProps) {
             '@type': 'Organization',
             name: 'KLZ Cables',
           },
-          sameAs: [
-            'https://www.linkedin.com/in/klaus-mintel-b80a8b193/'
-          ],
-          image: `${SITE_URL}/uploads/2024/12/DSC07963-Large.webp`
+          sameAs: ['https://www.linkedin.com/in/klaus-mintel-b80a8b193/'],
+          image: `${SITE_URL}/uploads/2024/12/DSC07963-Large.webp`,
         }}
       />
       {/* Hero Section */}
@@ -101,9 +95,11 @@ export default async function TeamPage({ params: { locale } }: TeamPageProps) {
             />
             <div className="absolute inset-0 bg-gradient-to-b from-primary-dark/80 via-primary-dark/40 to-primary-dark/80" />
           </div>
-          
+
           <Container className="relative z-10 text-center text-white max-w-5xl">
-            <Badge variant="saturated" className="mb-4 md:mb-8 shadow-lg">{t('hero.badge')}</Badge>
+            <Badge variant="saturated" className="mb-4 md:mb-8 shadow-lg">
+              {t('hero.badge')}
+            </Badge>
             <Heading level={1} className="text-white mb-4 md:mb-8">
               {t('hero.subtitle')}
             </Heading>
@@ -120,7 +116,9 @@ export default async function TeamPage({ params: { locale } }: TeamPageProps) {
           <Reveal className="w-full lg:w-1/2 p-6 md:p-24 lg:p-32 flex flex-col justify-center bg-primary-dark text-white relative order-2 lg:order-1">
             <div className="absolute top-0 right-0 w-32 h-full bg-accent/5 -skew-x-12 translate-x-1/2" />
             <div className="relative z-10">
-              <Badge variant="accent" className="mb-4 md:mb-8">{t('michael.role')}</Badge>
+              <Badge variant="accent" className="mb-4 md:mb-8">
+                {t('michael.role')}
+              </Badge>
               <Heading level={2} className="text-white mb-6 md:mb-10 text-3xl md:text-5xl">
                 <span className="text-white">{t('michael.name')}</span>
               </Heading>
@@ -133,9 +131,9 @@ export default async function TeamPage({ params: { locale } }: TeamPageProps) {
               <p className="text-base md:text-xl leading-relaxed text-white/70 mb-6 md:mb-12 max-w-xl">
                 {t('michael.description')}
               </p>
-              <Button 
-                href="https://www.linkedin.com/in/michael-bodemer-33b493122/" 
-                variant="accent" 
+              <Button
+                href="https://www.linkedin.com/in/michael-bodemer-33b493122/"
+                variant="accent"
                 size="lg"
                 className="group w-full md:w-auto md:h-16 md:px-10 md:text-xl active:scale-95 transition-transform"
               >
@@ -173,26 +171,36 @@ export default async function TeamPage({ params: { locale } }: TeamPageProps) {
           <Container className="relative z-10">
             <div className="grid grid-cols-1 lg:grid-cols-12 gap-8 md:gap-16 items-center">
               <div className="lg:col-span-6">
-                <Heading level={2} subtitle={t('legacy.subtitle')} className="text-white mb-6 md:mb-10">
+                <Heading
+                  level={2}
+                  subtitle={t('legacy.subtitle')}
+                  className="text-white mb-6 md:mb-10"
+                >
                   <span className="text-white">{t('legacy.title')}</span>
                 </Heading>
                 <div className="space-y-4 md:space-y-8 text-base md:text-2xl text-white/80 leading-relaxed font-medium">
                   <p className="border-l-4 border-accent pl-5 md:pl-8 py-2 bg-white/5 backdrop-blur-sm rounded-r-xl md:rounded-r-2xl">
                     {t('legacy.p1')}
                   </p>
-                  <p className="pl-6 md:pl-9 line-clamp-3 md:line-clamp-none">
-                    {t('legacy.p2')}
-                  </p>
+                  <p className="pl-6 md:pl-9 line-clamp-3 md:line-clamp-none">{t('legacy.p2')}</p>
                 </div>
               </div>
               <div className="lg:col-span-6 grid grid-cols-2 md:grid-cols-2 gap-3 md:gap-6">
                 <div className="p-4 md:p-8 bg-white/5 backdrop-blur-md border border-white/10 rounded-2xl md:rounded-[32px] hover:bg-white/10 transition-colors">
-                  <div className="text-xl md:text-4xl font-extrabold text-accent mb-1 md:mb-2">{t('legacy.expertise')}</div>
-                  <div className="text-[10px] md:text-sm font-bold uppercase tracking-widest text-white/50">{t('legacy.expertiseDesc')}</div>
+                  <div className="text-xl md:text-4xl font-extrabold text-accent mb-1 md:mb-2">
+                    {t('legacy.expertise')}
+                  </div>
+                  <div className="text-[10px] md:text-sm font-bold uppercase tracking-widest text-white/50">
+                    {t('legacy.expertiseDesc')}
+                  </div>
                 </div>
                 <div className="p-4 md:p-8 bg-white/5 backdrop-blur-md border border-white/10 rounded-2xl md:rounded-[32px] hover:bg-white/10 transition-colors">
-                  <div className="text-xl md:text-4xl font-extrabold text-accent mb-1 md:mb-2">{t('legacy.network')}</div>
-                  <div className="text-[10px] md:text-sm font-bold uppercase tracking-widest text-white/50">{t('legacy.networkDesc')}</div>
+                  <div className="text-xl md:text-4xl font-extrabold text-accent mb-1 md:mb-2">
+                    {t('legacy.network')}
+                  </div>
+                  <div className="text-[10px] md:text-sm font-bold uppercase tracking-widest text-white/50">
+                    {t('legacy.networkDesc')}
+                  </div>
                 </div>
               </div>
             </div>
@@ -216,7 +224,9 @@ export default async function TeamPage({ params: { locale } }: TeamPageProps) {
           <Reveal className="w-full lg:w-1/2 p-6 md:p-24 lg:p-32 flex flex-col justify-center bg-neutral-light text-saturated relative order-2">
             <div className="absolute top-0 left-0 w-32 h-full bg-saturated/5 skew-x-12 -translate-x-1/2" />
             <div className="relative z-10">
-              <Badge variant="saturated" className="mb-4 md:mb-8">{t('klaus.role')}</Badge>
+              <Badge variant="saturated" className="mb-4 md:mb-8">
+                {t('klaus.role')}
+              </Badge>
               <Heading level={2} className="text-saturated mb-6 md:mb-10 text-3xl md:text-6xl">
                 {t('klaus.name')}
               </Heading>
@@ -229,9 +239,9 @@ export default async function TeamPage({ params: { locale } }: TeamPageProps) {
               <p className="text-base md:text-xl leading-relaxed text-text-secondary mb-6 md:mb-12 max-w-xl">
                 {t('klaus.description')}
               </p>
-              <Button 
-                href="https://www.linkedin.com/in/klaus-mintel-b80a8b193/" 
-                variant="saturated" 
+              <Button
+                href="https://www.linkedin.com/in/klaus-mintel-b80a8b193/"
+                variant="saturated"
                 size="lg"
                 className="group w-full md:w-auto md:h-16 md:px-10 md:text-xl active:scale-95 transition-transform"
               >
@@ -255,11 +265,14 @@ export default async function TeamPage({ params: { locale } }: TeamPageProps) {
                 <p className="text-base md:text-xl text-text-secondary leading-relaxed">
                   {t('manifesto.tagline')}
                 </p>
-                
+
                 {/* Mobile-only progress indicator */}
                 <div className="flex lg:hidden mt-8 gap-2">
                   {[0, 1, 2, 3, 4, 5].map((i) => (
-                    <div key={i} className="h-1.5 flex-1 bg-neutral-medium rounded-full overflow-hidden">
+                    <div
+                      key={i}
+                      className="h-1.5 flex-1 bg-neutral-medium rounded-full overflow-hidden"
+                    >
                       <div className="h-full bg-accent w-0 group-active:w-full transition-all duration-500" />
                     </div>
                   ))}
@@ -268,12 +281,21 @@ export default async function TeamPage({ params: { locale } }: TeamPageProps) {
             </div>
             <div className="sticky-narrative-content grid grid-cols-1 md:grid-cols-2 gap-4 md:gap-10">
               {[0, 1, 2, 3, 4, 5].map((idx) => (
-                <div key={idx} className="p-6 md:p-10 bg-neutral-light rounded-2xl md:rounded-[40px] border border-transparent hover:border-accent hover:bg-white hover:shadow-2xl transition-all duration-500 group active:scale-[0.98] touch-target-none">
+                <div
+                  key={idx}
+                  className="p-6 md:p-10 bg-neutral-light rounded-2xl md:rounded-[40px] border border-transparent hover:border-accent hover:bg-white hover:shadow-2xl transition-all duration-500 group active:scale-[0.98] touch-target-none"
+                >
                   <div className="w-10 h-10 md:w-16 md:h-16 bg-white rounded-xl md:rounded-2xl flex items-center justify-center mb-4 md:mb-8 shadow-sm group-hover:bg-accent transition-colors duration-500">
-                    <span className="text-primary font-extrabold text-lg md:text-2xl group-hover:text-primary-dark">0{idx + 1}</span>
+                    <span className="text-primary font-extrabold text-lg md:text-2xl group-hover:text-primary-dark">
+                      0{idx + 1}
+                    </span>
                   </div>
-                  <h3 className="text-lg md:text-2xl font-bold mb-2 md:mb-4 text-primary">{t(`manifesto.items.${idx}.title`)}</h3>
-                  <p className="text-sm md:text-lg text-text-secondary leading-relaxed">{t(`manifesto.items.${idx}.description`)}</p>
+                  <h3 className="text-lg md:text-2xl font-bold mb-2 md:mb-4 text-primary">
+                    {t(`manifesto.items.${idx}.title`)}
+                  </h3>
+                  <p className="text-sm md:text-lg text-text-secondary leading-relaxed">
+                    {t(`manifesto.items.${idx}.description`)}
+                  </p>
                 </div>
               ))}
             </div>

app/actions/contact.ts

@@ -1,46 +1,123 @@
-"use server";
+'use server';
 
-import { sendEmail } from "@/lib/mail/mailer";
-import ContactEmail from "@/components/emails/ContactEmail";
-import React from "react";
-import { getServerAppServices } from "@/lib/services/create-services.server";
+import client, { ensureAuthenticated } from '@/lib/directus';
+import { createItem } from '@directus/sdk';
+import { sendEmail } from '@/lib/mail/mailer';
+import { render, ContactFormNotification, ConfirmationMessage } from '@mintel/mail';
+import React from 'react';
+import { getServerAppServices } from '@/lib/services/create-services.server';
 
 export async function sendContactFormAction(formData: FormData) {
   const services = getServerAppServices();
   const logger = services.logger.child({ action: 'sendContactFormAction' });
-  const name = formData.get("name") as string;
-  const email = formData.get("email") as string;
-  const message = formData.get("message") as string;
-  const productName = formData.get("productName") as string | null;
+  const name = formData.get('name') as string;
+  const email = formData.get('email') as string;
+  const message = formData.get('message') as string;
+  const productName = formData.get('productName') as string | null;
 
   if (!name || !email || !message) {
-    logger.warn('Missing required fields in contact form', { name: !!name, email: !!email, message: !!message });
-    return { success: false, error: "Missing required fields" };
+    logger.warn('Missing required fields in contact form', {
+      name: !!name,
+      email: !!email,
+      message: !!message,
+    });
+    return { success: false, error: 'Missing required fields' };
   }
 
-  logger.info('Sending contact form email', { email, productName });
-
-  const subject = productName
-    ? `Product Inquiry: ${productName}` 
-    : "New Contact Form Submission";
-
-  const result = await sendEmail({
-    subject,
-    template: React.createElement(ContactEmail, {
-      name,
-      email,
-      message,
-      productName: productName || undefined,
-      subject,
-    }),
-  });
-
-  if (result.success) {
-    logger.info('Contact form email sent successfully', { messageId: result.messageId });
-  } else {
-    logger.error('Failed to send contact form email', { error: result.error });
-    services.errors.captureException(result.error, { action: 'sendContactFormAction', email });
+  // 1. Save to Directus
+  try {
+    await ensureAuthenticated();
+    if (productName) {
+      await client.request(
+        createItem('product_requests', {
+          product_name: productName,
+          email,
+          message,
+        }),
+      );
+      logger.info('Product request stored in Directus');
+    } else {
+      await client.request(
+        createItem('contact_submissions', {
+          name,
+          email,
+          message,
+        }),
+      );
+      logger.info('Contact submission stored in Directus');
+    }
+  } catch (error) {
+    logger.error('Failed to store submission in Directus', { error });
+    services.errors.captureException(error, { action: 'directus_store_submission' });
   }
 
-  return result;
+  // 2. Send Emails
+  logger.info('Sending branded emails', { email, productName });
+
+  const notificationSubject = productName
+    ? `Product Inquiry: ${productName}`
+    : 'New Contact Form Submission';
+  const confirmationSubject = 'Thank you for your inquiry';
+
+  try {
+    // 2a. Send notification to Mintel/Client
+    const notificationHtml = await render(
+      React.createElement(ContactFormNotification, {
+        name,
+        email,
+        message,
+        productName: productName || undefined,
+      }),
+    );
+
+    const notificationResult = await sendEmail({
+      subject: notificationSubject,
+      html: notificationHtml,
+    });
+
+    if (notificationResult.success) {
+      logger.info('Notification email sent successfully', {
+        messageId: notificationResult.messageId,
+      });
+    }
+
+    // 2b. Send confirmation to Customer (branded as KLZ Cables)
+    const confirmationHtml = await render(
+      React.createElement(ConfirmationMessage, {
+        name,
+        clientName: 'KLZ Cables',
+        // brandColor: '#82ed20', // Optional: could be KLZ specific
+      }),
+    );
+
+    const confirmationResult = await sendEmail({
+      to: email,
+      subject: confirmationSubject,
+      html: confirmationHtml,
+    });
+
+    if (confirmationResult.success) {
+      logger.info('Confirmation email sent successfully', {
+        messageId: confirmationResult.messageId,
+      });
+    }
+
+    // Notify via Gotify (Internal)
+    await services.notifications.notify({
+      title: `📩 ${notificationSubject}`,
+      message: `New message from ${name} (${email}):\n\n${message}`,
+      priority: 5,
+    });
+
+    return { success: true };
+  } catch (error) {
+    logger.error('Failed to send branded emails', { error });
+    services.errors.captureException(error, { action: 'sendContactFormAction', email });
+    await services.notifications.notify({
+      title: '🚨 Contact Form Error',
+      message: `Failed to send emails for ${name} (${email}). Error: ${JSON.stringify(error)}`,
+      priority: 8,
+    });
+    return { success: false, error };
+  }
 }

app/api/health/cms/route.ts

@@ -0,0 +1,9 @@
+import { checkHealth } from '@/lib/directus';
+import { NextResponse } from 'next/server';
+
+export const dynamic = 'force-dynamic';
+
+export async function GET() {
+    const health = await checkHealth();
+    return NextResponse.json(health, { status: health.status === 'ok' ? 200 : 503 });
+}

app/manifest.ts

@@ -15,6 +15,11 @@ export default function manifest(): MetadataRoute.Manifest {
         sizes: 'any',
         type: 'image/x-icon',
       },
+      {
+        src: '/logo.png',
+        sizes: '512x512',
+        type: 'image/png',
+      },
       {
         src: '/apple-touch-icon.png',
         sizes: '180x180',

app/robots.ts

@@ -1,6 +1,8 @@
+import { config } from '@/lib/config';
 import { MetadataRoute } from 'next';
 
 export default function robots(): MetadataRoute.Robots {
+  const baseUrl = config.baseUrl || 'https://klz-cables.com';
   return {
     rules: [
       {
@@ -11,8 +13,8 @@ export default function robots(): MetadataRoute.Robots {
       {
         userAgent: ['GPTBot', 'ClaudeBot', 'PerplexityBot', 'Google-Extended', 'OAI-SearchBot'],
         allow: '/',
-      }
+      },
     ],
-    sitemap: 'https://klz-cables.com/sitemap.xml',
+    sitemap: `${baseUrl}/sitemap.xml`,
   };
 }

app/sitemap.ts

@@ -1,10 +1,13 @@
+import { config } from '@/lib/config';
 import { MetadataRoute } from 'next';
-import { getAllProducts } from '@/lib/mdx';
-import { getAllPosts } from '@/lib/blog';
-import { getAllPages } from '@/lib/pages';
+import { getAllProductsMetadata } from '@/lib/mdx';
+import { getAllPostsMetadata } from '@/lib/blog';
+import { getAllPagesMetadata } from '@/lib/pages';
+
+export const revalidate = 3600; // Revalidate every hour
 
 export default async function sitemap(): Promise<MetadataRoute.Sitemap> {
-  const baseUrl = 'https://klz-cables.com';
+  const baseUrl = config.baseUrl || 'https://klz-cables.com';
   const locales = ['de', 'en'];
 
   const routes = [
@@ -33,12 +36,12 @@ export default async function sitemap(): Promise<MetadataRoute.Sitemap> {
     }
 
     // Products
-    const products = await getAllProducts(locale);
-    for (const product of products) {
-      // We need to find the category for the product to build the URL
-      // In this project, products are under /products/[category]/[slug]
-      // The category is in product.frontmatter.categories
-      const category = product.frontmatter.categories[0]?.toLowerCase().replace(/\s+/g, '-') || 'other';
+    const productsMetadata = await getAllProductsMetadata(locale);
+    for (const product of productsMetadata) {
+      if (!product.frontmatter || !product.slug) continue;
+
+      const category =
+        product.frontmatter.categories[0]?.toLowerCase().replace(/\s+/g, '-') || 'other';
       sitemapEntries.push({
         url: `${baseUrl}/${locale}/products/${category}/${product.slug}`,
         lastModified: new Date(),
@@ -48,8 +51,10 @@ export default async function sitemap(): Promise<MetadataRoute.Sitemap> {
     }
 
     // Blog posts
-    const posts = await getAllPosts(locale);
-    for (const post of posts) {
+    const postsMetadata = await getAllPostsMetadata(locale);
+    for (const post of postsMetadata) {
+      if (!post.frontmatter || !post.slug) continue;
+
       sitemapEntries.push({
         url: `${baseUrl}/${locale}/blog/${post.slug}`,
         lastModified: new Date(post.frontmatter.date),
@@ -59,8 +64,10 @@ export default async function sitemap(): Promise<MetadataRoute.Sitemap> {
     }
 
     // Static pages
-    const pages = await getAllPages(locale);
-    for (const page of pages) {
+    const pagesMetadata = await getAllPagesMetadata(locale);
+    for (const page of pagesMetadata) {
+      if (!page.slug) continue;
+
       sitemapEntries.push({
         url: `${baseUrl}/${locale}/${page.slug}`,
         lastModified: new Date(),

commitlint.config.js

@@ -0,0 +1,8 @@
+module.exports = {
+  extends: ['@commitlint/config-conventional'],
+  rules: {
+    'header-max-length': [2, 'always', 500],
+    'subject-case': [0],
+    'subject-full-stop': [0],
+  },
+};

components/CMSConnectivityNotice.tsx

@@ -0,0 +1,84 @@
+'use client';
+
+import React, { useEffect, useState } from 'react';
+import { AlertCircle, RefreshCw, Database } from 'lucide-react';
+import { config } from '../lib/config';
+
+export default function CMSConnectivityNotice() {
+  const [status, setStatus] = useState<'checking' | 'ok' | 'error'>('checking');
+  const [errorMsg, setErrorMsg] = useState('');
+  const [isVisible, setIsVisible] = useState(false);
+
+  useEffect(() => {
+    // Only show if we've detected an issue AND we are in a context where we want to see it
+    const checkCMS = async () => {
+      const isDebug = new URLSearchParams(window.location.search).has('cms_debug');
+      const isLocal = config.isDevelopment;
+      const isTesting = config.isTesting;
+
+      // Only proceed with check if it's developer context (Local or Testing)
+      // Staging and Production should NEVER see this unless forced with ?cms_debug
+      if (!isLocal && !isTesting && !isDebug) return;
+
+      try {
+        const response = await fetch('/api/health/cms');
+        const data = await response.json();
+
+        if (data.status !== 'ok') {
+          setStatus('error');
+          setErrorMsg(data.message);
+          setIsVisible(true);
+        } else {
+          setStatus('ok');
+          setIsVisible(false);
+        }
+      } catch (err) {
+        // If it's a connection error, only show if we are really debugging
+        if (isDebug || isLocal) {
+          setStatus('error');
+          setErrorMsg('Could not connect to CMS health endpoint');
+          setIsVisible(true);
+        }
+      }
+    };
+
+    checkCMS();
+  }, []);
+
+  if (!isVisible) return null;
+
+  return (
+    <div className="fixed bottom-4 right-4 z-[9999] animate-slide-up">
+      <div className="bg-red-500/90 backdrop-blur-md border border-red-400 text-white p-4 rounded-2xl shadow-2xl max-w-sm">
+        <div className="flex items-start gap-3">
+          <div className="bg-white/20 p-2 rounded-lg">
+            <AlertCircle className="w-5 h-5" />
+          </div>
+          <div className="flex-1">
+            <h4 className="font-bold text-sm mb-1">CMS Issue Detected</h4>
+            <p className="text-xs opacity-90 leading-relaxed mb-3">
+              {errorMsg === 'relation "products" does not exist'
+                ? 'The database schema is missing. Please sync your local data to this environment.'
+                : errorMsg || 'The application cannot connect to the Directus CMS.'}
+            </p>
+            <div className="flex gap-2">
+              <button
+                onClick={() => window.location.reload()}
+                className="bg-white text-red-600 text-[10px] font-bold uppercase tracking-wider px-3 py-1.5 rounded-lg flex items-center gap-2 hover:bg-neutral-100 transition-colors"
+              >
+                <RefreshCw className="w-3 h-3" />
+                Retry
+              </button>
+              <button
+                onClick={() => setIsVisible(false)}
+                className="bg-black/20 text-white text-[10px] font-bold uppercase tracking-wider px-3 py-1.5 rounded-lg hover:bg-black/30 transition-colors"
+              >
+                Dismiss
+              </button>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+}

components/ContactForm.tsx

@@ -17,7 +17,7 @@ export default function ContactForm() {
 
     const formData = new FormData(e.currentTarget);
     const email = formData.get('email') as string;
-    
+
     try {
       const result = await sendContactFormAction(formData);
       if (result.success) {
@@ -41,7 +41,12 @@ export default function ContactForm() {
     return (
       <Card className="p-6 md:p-12 rounded-2xl md:rounded-[40px] border-none shadow-2xl text-center">
         <div className="w-20 h-20 bg-accent rounded-full flex items-center justify-center mx-auto mb-6 shadow-lg shadow-accent/20">
-          <svg className="w-10 h-10 text-primary-dark" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+          <svg
+            className="w-10 h-10 text-primary-dark"
+            fill="none"
+            stroke="currentColor"
+            viewBox="0 0 24 24"
+          >
             <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={3} d="M5 13l4 4L19 7" />
           </svg>
         </div>
@@ -49,7 +54,8 @@ export default function ContactForm() {
           {t('form.successTitle') || 'Message Sent!'}
         </Heading>
         <p className="text-text-secondary text-lg mb-8">
-          {t('form.successDesc') || 'Thank you for your message. We will get back to you as soon as possible.'}
+          {t('form.successDesc') ||
+            'Thank you for your message. We will get back to you as soon as possible.'}
         </p>
         <Button onClick={() => setStatus('idle')} variant="saturated">
           {t('form.sendAnother') || 'Send another message'}
@@ -62,7 +68,13 @@ export default function ContactForm() {
     return (
       <Card className="p-6 md:p-12 rounded-2xl md:rounded-[40px] border-destructive/20 shadow-2xl text-center bg-destructive/5 animate-slide-up">
         <div className="w-20 h-20 bg-destructive rounded-full flex items-center justify-center mx-auto mb-6 shadow-lg shadow-destructive/20">
-          <svg className="w-10 h-10 text-destructive-foreground" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth="2">
+          <svg
+            className="w-10 h-10 text-destructive-foreground"
+            fill="none"
+            viewBox="0 0 24 24"
+            stroke="currentColor"
+            strokeWidth="2"
+          >
             <circle cx="12" cy="12" r="10" />
             <line x1="15" y1="9" x2="9" y2="15" strokeLinecap="round" strokeLinejoin="round" />
             <line x1="9" y1="9" x2="15" y2="15" strokeLinecap="round" strokeLinejoin="round" />
@@ -74,7 +86,12 @@ export default function ContactForm() {
         <p className="text-destructive/80 text-lg mb-8 leading-relaxed font-medium">
           {t('form.error') || 'Something went wrong. Please check your input and try again.'}
         </p>
-        <Button onClick={() => setStatus('idle')} variant="saturated" size="lg" className="w-full bg-destructive hover:bg-destructive/90 text-destructive-foreground border-destructive shadow-lg shadow-destructive/20">
+        <Button
+          onClick={() => setStatus('idle')}
+          variant="destructive"
+          size="lg"
+          className="w-full"
+        >
           {t('form.tryAgain') || 'Try Again'}
         </Button>
       </Card>
@@ -89,9 +106,9 @@ export default function ContactForm() {
       <form onSubmit={handleSubmit} className="grid grid-cols-1 md:grid-cols-2 gap-4 md:gap-8">
         <div className="space-y-1 md:space-y-2">
           <Label htmlFor="name">{t('form.name')}</Label>
-          <Input 
-            type="text" 
-            id="name" 
+          <Input
+            type="text"
+            id="name"
             name="name"
             autoComplete="name"
             enterKeyHint="next"
@@ -101,9 +118,9 @@ export default function ContactForm() {
         </div>
         <div className="space-y-1 md:space-y-2">
           <Label htmlFor="email">{t('form.email')}</Label>
-          <Input 
-            type="email" 
-            id="email" 
+          <Input
+            type="email"
+            id="email"
             name="email"
             autoComplete="email"
             inputMode="email"
@@ -114,32 +131,50 @@ export default function ContactForm() {
         </div>
         <div className="md:col-span-2 space-y-1 md:space-y-2">
           <Label htmlFor="message">{t('form.message')}</Label>
-          <Textarea 
-            id="message" 
+          <Textarea
+            id="message"
             name="message"
-            rows={4} 
+            rows={4}
             enterKeyHint="send"
             placeholder={t('form.messagePlaceholder')}
             required
           />
         </div>
         <div className="md:col-span-2 pt-2 md:pt-4">
-          <Button 
-            type="submit" 
-            variant="saturated" 
-            size="lg" 
+          <Button
+            type="submit"
+            variant="saturated"
+            size="lg"
             disabled={status === 'submitting'}
             className="w-full shadow-xl shadow-saturated/20 md:h-16 md:px-10 md:text-xl active:scale-[0.98] transition-transform"
           >
             {status === 'submitting' ? (
               <span className="flex items-center gap-2">
-                <svg className="animate-spin h-5 w-5 text-white" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24">
-                  <circle className="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" strokeWidth="4"></circle>
-                  <path className="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path>
+                <svg
+                  className="animate-spin h-5 w-5 text-white"
+                  xmlns="http://www.w3.org/2000/svg"
+                  fill="none"
+                  viewBox="0 0 24 24"
+                >
+                  <circle
+                    className="opacity-25"
+                    cx="12"
+                    cy="12"
+                    r="10"
+                    stroke="currentColor"
+                    strokeWidth="4"
+                  ></circle>
+                  <path
+                    className="opacity-75"
+                    fill="currentColor"
+                    d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"
+                  ></path>
                 </svg>
                 {t('form.submitting') || 'Sending...'}
               </span>
-            ) : t('form.submit')}
+            ) : (
+              t('form.submit')
+            )}
           </Button>
         </div>
       </form>

components/OGImageTemplate.tsx

@@ -29,6 +29,7 @@ export function OGImageTemplate({
     backgroundColor: mode === 'light' ? '#ffffff' : primaryBlue,
     padding: '80px',
     position: 'relative',
+    fontFamily: 'Inter',
   };
 
   return (
@@ -63,22 +64,22 @@ export function OGImageTemplate({
               left: 0,
               right: 0,
               bottom: 0,
-              background: 'linear-gradient(to right, rgba(0,26,77,0.9), rgba(0,26,77,0.4))',
+              background: 'linear-gradient(to right, rgba(0,26,77,0.95), rgba(0,26,77,0.6))',
             }}
           />
         </div>
       )}
 
-      {/* Decorative Scribble Circle (Simplified for Satori) */}
+      {/* Decorative Brand Accent (Top Right) */}
       <div
         style={{
           position: 'absolute',
-          top: '-100px',
-          right: '-100px',
+          top: '-150px',
+          right: '-150px',
           width: '600px',
           height: '600px',
           borderRadius: '300px',
-          backgroundColor: `${accentGreen}1a`,
+          backgroundColor: `${accentGreen}15`,
           display: 'flex',
         }}
       />
@@ -89,11 +90,11 @@ export function OGImageTemplate({
           <div
             style={{
               fontSize: '24px',
-              fontWeight: 'bold',
+              fontWeight: 700,
               color: accentGreen,
               textTransform: 'uppercase',
-              letterSpacing: '0.2em',
-              marginBottom: '24px',
+              letterSpacing: '0.3em',
+              marginBottom: '32px',
               display: 'flex',
             }}
           >
@@ -104,13 +105,14 @@ export function OGImageTemplate({
         {/* Title */}
         <div
           style={{
-            fontSize: '72px',
-            fontWeight: '900',
+            fontSize: title.length > 40 ? '64px' : '82px',
+            fontWeight: 700,
             color: 'white',
-            lineHeight: '1.1',
-            maxWidth: '900px',
-            marginBottom: '32px',
+            lineHeight: '1.05',
+            maxWidth: '950px',
+            marginBottom: '40px',
             display: 'flex',
+            letterSpacing: '-0.02em',
           }}
         >
           {title}
@@ -121,13 +123,14 @@ export function OGImageTemplate({
           <div
             style={{
               fontSize: '32px',
-              color: 'rgba(255,255,255,0.8)',
-              maxWidth: '800px',
+              color: 'rgba(255,255,255,0.7)',
+              maxWidth: '850px',
               lineHeight: '1.4',
               display: 'flex',
+              fontWeight: 400,
             }}
           >
-            {description}
+            {description.length > 160 ? description.substring(0, 157) + '...' : description}
           </div>
         )}
       </div>
@@ -144,33 +147,34 @@ export function OGImageTemplate({
       >
         <div
           style={{
-            width: '120px',
-            height: '8px',
+            width: '80px',
+            height: '6px',
             backgroundColor: accentGreen,
-            borderRadius: '4px',
+            borderRadius: '3px',
             marginRight: '24px',
           }}
         />
         <div
           style={{
             fontSize: '24px',
-            fontWeight: 'bold',
+            fontWeight: 700,
             color: 'white',
             textTransform: 'uppercase',
-            letterSpacing: '0.1em',
+            letterSpacing: '0.15em',
+            display: 'flex',
           }}
         >
           KLZ Cables
         </div>
       </div>
 
-      {/* Saturated Blue Accent */}
+      {/* Saturated Blue Brand Strip */}
       <div
         style={{
           position: 'absolute',
           top: 0,
           right: 0,
-          width: '10px',
+          width: '12px',
           height: '100%',
           backgroundColor: saturatedBlue,
         }}
@@ -178,3 +182,4 @@ export function OGImageTemplate({
     </div>
   );
 }
+

components/RequestQuoteForm.tsx

@@ -49,14 +49,21 @@ export default function RequestQuoteForm({ productName }: RequestQuoteFormProps)
 
   if (status === 'success') {
     return (
-      <div className="bg-accent/5 border border-accent/20 text-primary-dark p-4 rounded-xl text-center animate-fade-in !mt-0">
+      <div className="bg-accent/5 border border-accent/20 text-primary-dark p-4 rounded-xl text-center flex flex-col items-center animate-fade-in !mt-0">
         <div className="w-10 h-10 bg-accent rounded-full flex items-center justify-center mx-auto mb-3 shadow-lg shadow-accent/20">
-          <svg className="w-5 h-5 text-primary-dark" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+          <svg
+            className="w-5 h-5 text-primary-dark"
+            fill="none"
+            stroke="currentColor"
+            viewBox="0 0 24 24"
+          >
             <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={3} d="M5 13l4 4L19 7" />
           </svg>
         </div>
-        <h3 className="text-base font-extrabold mb-1 tracking-tight !mt-0">{t('successTitle')}</h3>
-        <p className="text-text-secondary text-xs leading-tight mb-4 !mt-0">
+        <h3 className="text-base font-extrabold mb-1 tracking-tight !mt-0 text-center">
+          {t('successTitle')}
+        </h3>
+        <p className="text-text-secondary text-xs leading-tight mb-4 !mt-0 text-center">
           {t('successDesc', { productName })}
         </p>
         <button
@@ -73,26 +80,34 @@ export default function RequestQuoteForm({ productName }: RequestQuoteFormProps)
 
   if (status === 'error') {
     return (
-      <div className="bg-destructive/5 border border-destructive/20 text-destructive p-4 rounded-xl text-center animate-fade-in !mt-0">
+      <div className="bg-destructive/5 border border-destructive/20 text-destructive p-4 rounded-xl text-center flex flex-col items-center animate-fade-in !mt-0">
         <div className="w-10 h-10 bg-destructive rounded-full flex items-center justify-center mx-auto mb-3 shadow-lg shadow-destructive/20">
-          <svg className="w-5 h-5 text-destructive-foreground" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth="3">
+          <svg
+            className="w-5 h-5 text-destructive-foreground"
+            fill="none"
+            viewBox="0 0 24 24"
+            stroke="currentColor"
+            strokeWidth="3"
+          >
             <circle cx="12" cy="12" r="10" />
             <line x1="15" y1="9" x2="9" y2="15" />
             <line x1="9" y1="9" x2="15" y2="15" />
           </svg>
         </div>
-        <h3 className="text-base font-extrabold mb-1 tracking-tight !mt-0 text-destructive">{t('errorTitle') || 'Submission Failed'}</h3>
-        <p className="text-destructive/80 text-xs leading-tight mb-4 !mt-0">
+        <h3 className="text-base font-extrabold mb-1 tracking-tight !mt-0 text-destructive text-center">
+          {t('errorTitle') || 'Submission Failed'}
+        </h3>
+        <p className="text-destructive/80 text-xs leading-tight mb-4 !mt-0 text-center">
           {t('errorDesc') || 'Something went wrong. Please try again.'}
         </p>
-        <button
+        <Button
           onClick={() => setStatus('idle')}
-          className="inline-flex items-center text-[9px] font-bold uppercase tracking-[0.2em] text-destructive hover:text-destructive/80 transition-colors group"
+          variant="destructive"
+          size="sm"
+          className="w-full"
         >
-          <span className="border-b-2 border-destructive/10 group-hover:border-destructive/30 transition-colors pb-1">
-            {t('tryAgain') || 'Try Again'}
-          </span>
-        </button>
+          {t('tryAgain') || 'Try Again'}
+        </Button>
       </div>
     );
   }
@@ -133,22 +148,48 @@ export default function RequestQuoteForm({ productName }: RequestQuoteFormProps)
         >
           {status === 'submitting' ? (
             <>
-              <svg className="animate-spin h-3 w-3 text-white" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24">
-                <circle className="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" strokeWidth="4"></circle>
-                <path className="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path>
+              <svg
+                className="animate-spin h-3 w-3 text-white"
+                xmlns="http://www.w3.org/2000/svg"
+                fill="none"
+                viewBox="0 0 24 24"
+              >
+                <circle
+                  className="opacity-25"
+                  cx="12"
+                  cy="12"
+                  r="10"
+                  stroke="currentColor"
+                  strokeWidth="4"
+                ></circle>
+                <path
+                  className="opacity-75"
+                  fill="currentColor"
+                  d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"
+                ></path>
               </svg>
               <span className="text-xs">{t('submitting')}</span>
             </>
           ) : (
             <>
               <span className="text-xs">{t('submit')}</span>
-              <svg className="w-3 h-3 transition-transform group-hover:translate-x-1" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-                <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M17 8l4 4m0 0l-4 4m4-4H3" />
+              <svg
+                className="w-3 h-3 transition-transform group-hover:translate-x-1"
+                fill="none"
+                stroke="currentColor"
+                viewBox="0 0 24 24"
+              >
+                <path
+                  strokeLinecap="round"
+                  strokeLinejoin="round"
+                  strokeWidth={2}
+                  d="M17 8l4 4m0 0l-4 4m4-4H3"
+                />
               </svg>
             </>
           )}
         </Button>
-        
+
         <p className="text-[7px] text-center text-text-secondary/40 uppercase tracking-[0.15em] font-medium px-2 !mt-1 !mb-0">
           {t('privacyNote')}
         </p>

components/ui/Button.tsx

@@ -3,24 +3,43 @@ import Link from 'next/link';
 import { cn } from './utils';
 
 export interface ButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
-  variant?: 'primary' | 'secondary' | 'accent' | 'saturated' | 'outline' | 'ghost' | 'white';
+  variant?:
+    | 'primary'
+    | 'secondary'
+    | 'accent'
+    | 'saturated'
+    | 'outline'
+    | 'ghost'
+    | 'white'
+    | 'destructive';
   size?: 'sm' | 'md' | 'lg' | 'xl';
   href?: string;
   className?: string;
   children?: React.ReactNode;
 }
 
-export function Button({ className, variant = 'primary', size = 'md', href, ...props }: ButtonProps) {
-  const baseStyles = 'inline-flex items-center justify-center rounded-full font-semibold transition-all duration-500 ease-out focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary focus-visible:ring-offset-2 disabled:opacity-50 disabled:pointer-events-none active:scale-95 hover:-translate-y-1 hover:scale-[1.02] relative overflow-hidden group/btn isolate';
-  
+export function Button({
+  className,
+  variant = 'primary',
+  size = 'md',
+  href,
+  ...props
+}: ButtonProps) {
+  const baseStyles =
+    'inline-flex items-center justify-center rounded-full font-semibold transition-all duration-500 ease-out focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary focus-visible:ring-offset-2 disabled:opacity-50 disabled:pointer-events-none active:scale-95 hover:-translate-y-1 hover:scale-[1.02] relative overflow-hidden group/btn isolate';
+
   const variants = {
     primary: 'bg-primary text-white shadow-md hover:shadow-primary/30 hover:shadow-2xl',
     secondary: 'bg-secondary text-white shadow-md hover:shadow-secondary/30 hover:shadow-2xl',
     accent: 'bg-accent text-primary-dark shadow-md hover:shadow-accent/30 hover:shadow-2xl',
     saturated: 'bg-saturated text-white shadow-md hover:shadow-primary/30 hover:shadow-2xl',
-    outline: 'border-2 border-primary bg-transparent text-primary hover:text-white hover:shadow-primary/20 hover:shadow-xl',
+    outline:
+      'border-2 border-primary bg-transparent text-primary hover:text-white hover:shadow-primary/20 hover:shadow-xl',
     ghost: 'text-primary hover:shadow-lg',
-    white: 'bg-white text-primary shadow-md hover:shadow-primary/30 hover:shadow-2xl hover:text-white',
+    white:
+      'bg-white text-primary shadow-md hover:shadow-primary/30 hover:shadow-2xl hover:text-white',
+    destructive:
+      'bg-destructive text-destructive-foreground shadow-md hover:shadow-destructive/30 hover:shadow-2xl',
   };
 
   const sizes = {
@@ -40,20 +59,25 @@ export function Button({ className, variant = 'primary', size = 'md', href, ...p
     outline: 'bg-primary',
     ghost: 'bg-primary-light/10',
     white: 'bg-primary-light',
+    destructive: 'bg-destructive/90',
   };
 
   const content = (
     <>
-      <span className={cn(
-        "relative z-10 flex items-center justify-center gap-2 transition-colors duration-500",
-        variant === 'white' ? "group-hover/btn:text-primary-dark" : ""
-      )}>
+      <span
+        className={cn(
+          'relative z-10 flex items-center justify-center gap-2 transition-colors duration-500',
+          variant === 'white' ? 'group-hover/btn:text-primary-dark' : '',
+        )}
+      >
         {props.children}
       </span>
-      <span className={cn(
-        "absolute inset-0 translate-y-[101%] group-hover/btn:translate-y-0 transition-transform duration-500 ease-out",
-        overlayColors[variant]
-      )} />
+      <span
+        className={cn(
+          'absolute inset-0 translate-y-[101%] group-hover/btn:translate-y-0 transition-transform duration-500 ease-out',
+          overlayColors[variant],
+        )}
+      />
     </>
   );
 

data/products/de/na2xsf2y.mdx

@@ -398,6 +398,24 @@ locale: de
             "55",
             "4195"
           ]
+        },
+        {
+          "configuration": "1x1200/35",
+          "cells": [
+            "Al",
+            "RM",
+            "0,95",
+            "48,5",
+            "0,0247",
+            "3,4",
+            "Auf Anfrage",
+            "Auf Anfrage",
+            "113",
+            "2,4",
+            "885",
+            "59",
+            "4800"
+          ]
         }
       ]
     },
@@ -737,6 +755,24 @@ locale: de
             "60",
             "4634"
           ]
+        },
+        {
+          "configuration": "1x1200/35",
+          "cells": [
+            "Al",
+            "RM",
+            "1,05",
+            "52,3",
+            "0,0247",
+            "5,5",
+            "Auf Anfrage",
+            "Auf Anfrage",
+            "113",
+            "2,4",
+            "990",
+            "66",
+            "5200"
+          ]
         }
       ]
     },
@@ -1076,6 +1112,24 @@ locale: de
             "65",
             "5093"
           ]
+        },
+        {
+          "configuration": "1x1200/35",
+          "cells": [
+            "Al",
+            "RM",
+            "1,15",
+            "57,5",
+            "0,0247",
+            "8,0",
+            "Auf Anfrage",
+            "Auf Anfrage",
+            "113",
+            "2,4",
+            "1065",
+            "71",
+            "5900"
+          ]
         }
       ]
     }

data/products/en/na2xsf2y.mdx

@@ -398,6 +398,24 @@ locale: en
             "55",
             "4195"
           ]
+        },
+        {
+          "configuration": "1x1200/35",
+          "cells": [
+            "Al",
+            "RM",
+            "0.95",
+            "48.5",
+            "0.0247",
+            "3.4",
+            "On Request",
+            "On Request",
+            "113",
+            "2.4",
+            "885",
+            "59",
+            "4800"
+          ]
         }
       ]
     },
@@ -737,6 +755,24 @@ locale: en
             "60",
             "4634"
           ]
+        },
+        {
+          "configuration": "1x1200/35",
+          "cells": [
+            "Al",
+            "RM",
+            "1.05",
+            "52.3",
+            "0.0247",
+            "5.5",
+            "On Request",
+            "On Request",
+            "113",
+            "2.4",
+            "990",
+            "66",
+            "5200"
+          ]
         }
       ]
     },
@@ -1076,6 +1112,24 @@ locale: en
             "65",
             "5093"
           ]
+        },
+        {
+          "configuration": "1x1200/35",
+          "cells": [
+            "Al",
+            "RM",
+            "1.15",
+            "57.5",
+            "0.0247",
+            "8",
+            "On Request",
+            "On Request",
+            "113",
+            "2.4",
+            "1065",
+            "71",
+            "5900"
+          ]
         }
       ]
     }

docker-compose.override.yml

@@ -1,4 +1,36 @@
 services:
   app:
-    env_file:
-      - .env
+    image: node:20-alpine
+    working_dir: /app
+    command: sh -c "npm install && npx next dev"
+    volumes:
+      - .:/app
+    environment:
+      NODE_ENV: development
+      # Docker Internal Communication
+      DIRECTUS_URL: http://directus:8055
+    ports:
+      - "3000:3000"
+    labels:
+      - "traefik.enable=true"
+      # Clear all production-related TLS/Middleware settings for the main routers
+      - "traefik.http.routers.klz-cables.entrypoints=web"
+      - "traefik.http.routers.klz-cables.rule=Host(`klz.localhost`)"
+      - "traefik.http.routers.klz-cables.tls=false"
+      - "traefik.http.routers.klz-cables.middlewares="
+
+      - "traefik.http.routers.klz-cables-web.entrypoints=web"
+      - "traefik.http.routers.klz-cables-web.rule=Host(`klz.localhost`)"
+      - "traefik.http.routers.klz-cables-web.middlewares="
+
+  directus:
+    labels:
+      - "traefik.enable=true"
+      - "traefik.http.routers.klz-cables-directus.entrypoints=web"
+      - "traefik.http.routers.klz-cables-directus.rule=Host(`cms.klz.localhost`)"
+      - "traefik.http.routers.klz-cables-directus.tls=false"
+      - "traefik.http.routers.klz-cables-directus.middlewares="
+    ports:
+      - "8055:8055"
+    environment:
+      PUBLIC_URL: http://cms.klz.localhost

docker-compose.yml

@@ -1,33 +1,136 @@
 services:
-  app:
+  klz-app:
     image: registry.infra.mintel.me/mintel/klz-cables.com:${IMAGE_TAG:-latest}
     restart: always
     networks:
-      - infra
-    ports:
-      - "3000:3000"
+      - default
     env_file:
       - ${ENV_FILE:-.env}
+    labels:
+      - "traefik.enable=false"
+
+  varnish:
+    image: varnish:7
+    restart: always
+    networks:
+      - default
+      - infra
+    volumes:
+      - ./varnish/default.vcl:/etc/varnish/default.vcl:ro
+    tmpfs:
+      - /var/lib/varnish:exec,mode=1777
+    environment:
+      VARNISH_SIZE: ${VARNISH_CACHE_SIZE:-256M}
+      APP_VERSION: ${IMAGE_TAG:-latest}
     labels:
       - "traefik.enable=true"
       # HTTP ⇒ HTTPS redirect
-      - "traefik.http.routers.klz-cables-web.rule=Host(${TRAEFIK_HOST}) && !PathPrefix(`/.well-known/acme-challenge/`)"
-      - "traefik.http.routers.klz-cables-web.entrypoints=web"
-      - "traefik.http.routers.klz-cables-web.middlewares=redirect-https"
+      - "traefik.http.routers.${PROJECT_NAME:-klz-cables}-web.rule=Host(`${TRAEFIK_HOST}`) && !PathPrefix(`/.well-known/acme-challenge/`)"
+      - "traefik.http.routers.${PROJECT_NAME:-klz-cables}-web.entrypoints=web"
+      - "traefik.http.routers.${PROJECT_NAME:-klz-cables}-web.middlewares=redirect-https"
       # HTTPS router
-      - "traefik.http.routers.klz-cables.rule=Host(${TRAEFIK_HOST})"
-      - "traefik.http.routers.klz-cables.entrypoints=websecure"
-      - "traefik.http.routers.klz-cables.tls.certresolver=le"
-      - "traefik.http.routers.klz-cables.tls=true"
-      - "traefik.http.routers.klz-cables.service=klz-cables"
-      - "traefik.http.services.klz-cables.loadbalancer.server.port=3000"
-      - "traefik.http.services.klz-cables.loadbalancer.server.scheme=http"
+      - "traefik.http.routers.${PROJECT_NAME:-klz-cables}.rule=Host(`${TRAEFIK_HOST}`)"
+      - "traefik.http.routers.${PROJECT_NAME:-klz-cables}.entrypoints=websecure"
+      - "traefik.http.routers.${PROJECT_NAME:-klz-cables}.tls.certresolver=le"
+      - "traefik.http.routers.${PROJECT_NAME:-klz-cables}.tls=true"
+      - "traefik.http.routers.${PROJECT_NAME:-klz-cables}.service=${PROJECT_NAME:-klz-cables}"
+      - "traefik.http.services.${PROJECT_NAME:-klz-cables}.loadbalancer.server.port=80"
+      - "traefik.http.services.${PROJECT_NAME:-klz-cables}.loadbalancer.server.scheme=http"
       # Forwarded Headers
-      - "traefik.http.middlewares.klz-forward.headers.customrequestheaders.X-Forwarded-Proto=https"
-      - "traefik.http.middlewares.klz-forward.headers.customrequestheaders.X-Forwarded-Ssl=on"
+      - "traefik.http.middlewares.${PROJECT_NAME:-klz-cables}-forward.headers.customrequestheaders.X-Forwarded-Proto=https"
+      - "traefik.http.middlewares.${PROJECT_NAME:-klz-cables}-forward.headers.customrequestheaders.X-Forwarded-Ssl=on"
       # Middlewares
-      - "traefik.http.routers.klz-cables.middlewares=klz-forward,compress"
+      - "traefik.http.routers.${PROJECT_NAME:-klz-cables}.middlewares=${PROJECT_NAME:-klz-cables}-ratelimit,${PROJECT_NAME:-klz-cables}-forward,${AUTH_MIDDLEWARE:-compress}"
+
+      # Gatekeeper Router (to show the login page)
+      - "traefik.http.routers.${PROJECT_NAME:-klz-cables}-gatekeeper.rule=Host(`gatekeeper.${TRAEFIK_HOST}`)"
+      - "traefik.http.routers.${PROJECT_NAME:-klz-cables}-gatekeeper.entrypoints=websecure"
+      - "traefik.http.routers.${PROJECT_NAME:-klz-cables}-gatekeeper.tls.certresolver=le"
+      - "traefik.http.routers.${PROJECT_NAME:-klz-cables}-gatekeeper.tls=true"
+      - "traefik.http.routers.${PROJECT_NAME:-klz-cables}-gatekeeper.service=${PROJECT_NAME:-klz-cables}-gatekeeper"
+
+      # Middleware Definitions
+      - "traefik.http.middlewares.${PROJECT_NAME:-klz-cables}-ratelimit.ratelimit.average=100"
+      - "traefik.http.middlewares.${PROJECT_NAME:-klz-cables}-ratelimit.ratelimit.burst=50"
+      - "traefik.http.middlewares.${PROJECT_NAME:-klz-cables}-auth.forwardauth.address=http://${PROJECT_NAME}-gatekeeper:3000/api/verify"
+      - "traefik.http.middlewares.${PROJECT_NAME:-klz-cables}-auth.forwardauth.trustForwardHeader=true"
+      - "traefik.http.middlewares.${PROJECT_NAME:-klz-cables}-auth.forwardauth.authResponseHeaders=X-Auth-User"
+
+  gatekeeper:
+    image: registry.infra.mintel.me/mintel/gatekeeper:latest
+    container_name: ${PROJECT_NAME:-klz-cables}-gatekeeper
+    restart: always
+    networks:
+      - default
+      - infra
+    env_file:
+      - ${ENV_FILE:-.env}
+    environment:
+      PORT: 3000
+      COOKIE_DOMAIN: ${COOKIE_DOMAIN}
+      AUTH_COOKIE_NAME: klz_gatekeeper_session
+      NEXT_PUBLIC_BASE_URL: https://gatekeeper.${TRAEFIK_HOST}
+      GATEKEEPER_PASSWORD: ${GATEKEEPER_PASSWORD:-klz2026}
+    labels:
+      - "traefik.enable=true"
+      - "traefik.http.services.${PROJECT_NAME:-klz-cables}-gatekeeper.loadbalancer.server.port=3000"
+
+  directus:
+    image: directus/directus:11
+    restart: always
+    networks:
+      - default
+      - infra
+    env_file:
+      - ${ENV_FILE:-.env}
+    environment:
+      KEY: ${DIRECTUS_KEY}
+      SECRET: ${DIRECTUS_SECRET}
+      ADMIN_EMAIL: ${DIRECTUS_ADMIN_EMAIL}
+      ADMIN_PASSWORD: ${DIRECTUS_ADMIN_PASSWORD}
+      DB_CLIENT: 'pg'
+      DB_HOST: 'directus-db'
+      DB_PORT: '5432'
+      DB_DATABASE: ${DIRECTUS_DB_NAME:-directus}
+      DB_USER: ${DIRECTUS_DB_USER:-directus}
+      DB_PASSWORD: ${DIRECTUS_DB_PASSWORD:-directus}
+      WEBSOCKETS_ENABLED: 'true'
+      PUBLIC_URL: ${DIRECTUS_URL:-https://cms.klz-cables.com}
+      # Error Tracking
+      SENTRY_DSN: ${SENTRY_DSN}
+      SENTRY_ENVIRONMENT: ${TARGET:-development}
+      LOGGER_LEVEL: ${LOG_LEVEL:-info}
+    volumes:
+      - ./directus/uploads:/directus/uploads
+      - ./directus/extensions:/directus/extensions
+    labels:
+      - "traefik.enable=true"
+      - "traefik.http.routers.${PROJECT_NAME:-klz-cables}-directus.rule=Host(`${DIRECTUS_HOST}`)"
+      - "traefik.http.routers.${PROJECT_NAME:-klz-cables}-directus.entrypoints=websecure"
+      - "traefik.http.routers.${PROJECT_NAME:-klz-cables}-directus.tls.certresolver=le"
+      - "traefik.http.routers.${PROJECT_NAME:-klz-cables}-directus.tls=true"
+      - "traefik.http.routers.${PROJECT_NAME:-klz-cables}-directus.middlewares=${PROJECT_NAME:-klz-cables}-forward,compress"
+      - "traefik.http.services.${PROJECT_NAME:-klz-cables}-directus.loadbalancer.server.port=8055"
+
+  directus-db:
+    image: postgres:15-alpine
+    restart: always
+    networks:
+      - default
+    env_file:
+      - ${ENV_FILE:-.env}
+    environment:
+      POSTGRES_DB: ${DIRECTUS_DB_NAME:-directus}
+      POSTGRES_USER: ${DIRECTUS_DB_USER:-directus}
+      POSTGRES_PASSWORD: ${DIRECTUS_DB_PASSWORD:-directus}
+    volumes:
+      - directus-db-data:/var/lib/postgresql/data
 
 networks:
+  default:
+    name: ${PROJECT_NAME:-klz-cables}-internal
   infra:
     external: true
+
+volumes:
+  directus-db-data:

docker-compose.yml.bak

@@ -0,0 +1,81 @@
+services:
+  app:
+    image: registry.infra.mintel.me/mintel/klz-cables.com:latest
+    restart: always
+    networks:
+      - infra
+    env_file:
+      - .env
+    labels:
+      - "traefik.enable=true"
+      # HTTP ⇒ HTTPS redirect
+      - "traefik.http.routers.klz-cables-web.rule=(Host(`klz-cables.com`) || Host(`www.klz-cables.com`) || Host(`staging.klz-cables.com`)) && !PathPrefix(`/.well-known/acme-challenge/`)"
+      - "traefik.http.routers.klz-cables-web.entrypoints=web"
+      - "traefik.http.routers.klz-cables-web.middlewares=redirect-https"
+      # HTTPS router
+      - "traefik.http.routers.klz-cables.rule=Host(`klz-cables.com`) || Host(`www.klz-cables.com`) || Host(`staging.klz-cables.com`)"
+      - "traefik.http.routers.klz-cables.entrypoints=websecure"
+      - "traefik.http.routers.klz-cables.tls.certresolver=le"
+      - "traefik.http.routers.klz-cables.tls=true"
+      - "traefik.http.routers.klz-cables.service=klz-cables"
+      - "traefik.http.services.klz-cables.loadbalancer.server.port=3000"
+      - "traefik.http.services.klz-cables.loadbalancer.server.scheme=http"
+      # Forwarded Headers
+      - "traefik.http.middlewares.klz-forward.headers.customrequestheaders.X-Forwarded-Proto=https"
+      - "traefik.http.middlewares.klz-forward.headers.customrequestheaders.X-Forwarded-Ssl=on"
+      # Middlewares
+      - "traefik.http.routers.klz-cables.middlewares=klz-forward,compress"
+
+  cms:
+    build:
+      context: ./cms
+      dockerfile: Dockerfile
+    restart: always
+    networks:
+      - infra
+    env_file:
+      - .env
+    environment:
+      DATABASE_CLIENT: postgres
+      DATABASE_HOST: cms-db
+      DATABASE_PORT: 5432
+      DATABASE_NAME: ${STRAPI_DATABASE_NAME:-strapi}
+      DATABASE_USERNAME: ${STRAPI_DATABASE_USERNAME:-strapi}
+      DATABASE_PASSWORD: ${STRAPI_DATABASE_PASSWORD:-strapi}
+      NODE_ENV: ${NODE_ENV:-development}
+      STRAPI_URL: ${STRAPI_URL:-https://cms.klz-cables.com}
+    volumes:
+      - ./cms/config:/opt/app/config
+      - ./cms/src:/opt/app/src
+      - ./cms/package.json:/opt/app/package.json
+      - ./cms/package-lock.json:/opt/app/package-lock.json
+      - ./cms/public/uploads:/opt/app/public/uploads
+      - ./cms/dist:/opt/app/dist
+    labels:
+      - "traefik.enable=true"
+      - "traefik.http.routers.klz-cms.rule=Host(`cms.klz-cables.com`) || Host(`cms-staging.klz-cables.com`)"
+      - "traefik.http.routers.klz-cms.entrypoints=websecure"
+      - "traefik.http.routers.klz-cms.tls.certresolver=le"
+      - "traefik.http.routers.klz-cms.tls=true"
+      - "traefik.http.services.klz-cms.loadbalancer.server.port=1337"
+
+  cms-db:
+    image: postgres:16-alpine
+    restart: always
+    networks:
+      - infra
+    env_file:
+      - .env
+    environment:
+      POSTGRES_DB: ${STRAPI_DATABASE_NAME:-strapi}
+      POSTGRES_USER: ${STRAPI_DATABASE_USERNAME:-strapi}
+      POSTGRES_PASSWORD: ${STRAPI_DATABASE_PASSWORD:-strapi}
+    volumes:
+      - cms-db-data:/var/lib/postgresql/data
+
+networks:
+  infra:
+    external: true
+
+volumes:
+  cms-db-data:

docs/DEPLOYMENT.md

@@ -70,6 +70,15 @@ These are loaded from the `.env` file at runtime and are only available on the s
 | `MAIL_RECIPIENTS` | ❌ No | Comma-separated list of recipient emails |
 | `REDIS_URL` | ❌ No | Redis connection URL (e.g., `redis://redis:6379/2`) |
 | `REDIS_KEY_PREFIX` | ❌ No | Redis key prefix (default: `klz:`) |
+| `STRAPI_DATABASE_NAME` | ✅ Yes | Strapi database name |
+| `STRAPI_DATABASE_USERNAME` | ✅ Yes | Strapi database username |
+| `STRAPI_DATABASE_PASSWORD` | ✅ Yes | Strapi database password |
+| `STRAPI_URL` | ✅ Yes | URL of the Strapi CMS |
+| `APP_KEYS` | ✅ Yes | Strapi application keys (comma-separated) |
+| `API_TOKEN_SALT` | ✅ Yes | Strapi API token salt |
+| `ADMIN_JWT_SECRET` | ✅ Yes | Strapi admin JWT secret |
+| `TRANSFER_TOKEN_SALT` | ✅ Yes | Strapi transfer token salt |
+| `JWT_SECRET` | ✅ Yes | Strapi JWT secret |
 
 ## Local Development
 

lib/blog.ts

@@ -41,11 +41,11 @@ export async function getPostBySlug(slug: string, locale: string): Promise<PostM
 export async function getAllPosts(locale: string): Promise<PostMdx[]> {
   const postsDir = path.join(process.cwd(), 'data', 'blog', locale);
   if (!fs.existsSync(postsDir)) return [];
-  
+
   const files = fs.readdirSync(postsDir);
   const posts = files
-    .filter(file => file.endsWith('.mdx'))
-    .map(file => {
+    .filter((file) => file.endsWith('.mdx'))
+    .map((file) => {
       const filePath = path.join(postsDir, file);
       const fileContent = fs.readFileSync(filePath, 'utf8');
       const { data, content } = matter(fileContent);
@@ -55,14 +55,42 @@ export async function getAllPosts(locale: string): Promise<PostMdx[]> {
         content,
       };
     })
-    .sort((a, b) => new Date(b.frontmatter.date).getTime() - new Date(a.frontmatter.date).getTime());
+    .sort(
+      (a, b) => new Date(b.frontmatter.date).getTime() - new Date(a.frontmatter.date).getTime(),
+    );
 
   return posts;
 }
 
-export async function getAdjacentPosts(slug: string, locale: string): Promise<{ prev: PostMdx | null; next: PostMdx | null }> {
+export async function getAllPostsMetadata(locale: string): Promise<Partial<PostMdx>[]> {
+  const postsDir = path.join(process.cwd(), 'data', 'blog', locale);
+  if (!fs.existsSync(postsDir)) return [];
+
+  const files = fs.readdirSync(postsDir);
+  return files
+    .filter((file) => file.endsWith('.mdx'))
+    .map((file) => {
+      const filePath = path.join(postsDir, file);
+      const fileContent = fs.readFileSync(filePath, 'utf8');
+      const { data } = matter(fileContent);
+      return {
+        slug: file.replace(/\.mdx$/, ''),
+        frontmatter: data as PostFrontmatter,
+      };
+    })
+    .sort(
+      (a, b) =>
+        new Date(b.frontmatter.date as string).getTime() -
+        new Date(a.frontmatter.date as string).getTime(),
+    );
+}
+
+export async function getAdjacentPosts(
+  slug: string,
+  locale: string,
+): Promise<{ prev: PostMdx | null; next: PostMdx | null }> {
   const posts = await getAllPosts(locale);
-  const currentIndex = posts.findIndex(post => post.slug === slug);
+  const currentIndex = posts.findIndex((post) => post.slug === slug);
 
   if (currentIndex === -1) {
     return { prev: null, next: null };

lib/config.ts

@@ -13,11 +13,15 @@ let memoizedConfig: ReturnType<typeof createConfig> | undefined;
 function createConfig() {
   const env = envSchema.parse(getRawEnv());
 
+  const target = env.NEXT_PUBLIC_TARGET || env.TARGET;
+
   return {
     env: env.NODE_ENV,
-    isProduction: env.NODE_ENV === 'production',
-    isDevelopment: env.NODE_ENV === 'development',
-    isTest: env.NODE_ENV === 'test',
+    target,
+    isProduction: target === 'production' || !target,
+    isStaging: target === 'staging',
+    isTesting: target === 'testing',
+    isDevelopment: target === 'development',
 
     baseUrl: env.NEXT_PUBLIC_BASE_URL,
 
@@ -57,6 +61,21 @@ function createConfig() {
       from: env.MAIL_FROM,
       recipients: env.MAIL_RECIPIENTS,
     },
+    directus: {
+      url: env.DIRECTUS_URL,
+      adminEmail: env.DIRECTUS_ADMIN_EMAIL,
+      password: env.DIRECTUS_ADMIN_PASSWORD,
+      token: env.DIRECTUS_API_TOKEN,
+      internalUrl: env.INTERNAL_DIRECTUS_URL,
+      proxyPath: '/cms',
+    },
+    notifications: {
+      gotify: {
+        url: env.GOTIFY_URL,
+        token: env.GOTIFY_TOKEN,
+        enabled: Boolean(env.GOTIFY_URL && env.GOTIFY_TOKEN),
+      },
+    },
   } as const;
 }
 
@@ -76,16 +95,48 @@ export function getConfig() {
  * Uses getters to ensure it's only initialized when accessed.
  */
 export const config = {
-  get env() { return getConfig().env; },
-  get isProduction() { return getConfig().isProduction; },
-  get isDevelopment() { return getConfig().isDevelopment; },
-  get isTest() { return getConfig().isTest; },
-  get baseUrl() { return getConfig().baseUrl; },
-  get analytics() { return getConfig().analytics; },
-  get errors() { return getConfig().errors; },
-  get cache() { return getConfig().cache; },
-  get logging() { return getConfig().logging; },
-  get mail() { return getConfig().mail; },
+  get env() {
+    return getConfig().env;
+  },
+  get target() {
+    return getConfig().target;
+  },
+  get isProduction() {
+    return getConfig().isProduction;
+  },
+  get isStaging() {
+    return getConfig().isStaging;
+  },
+  get isTesting() {
+    return getConfig().isTesting;
+  },
+  get isDevelopment() {
+    return getConfig().isDevelopment;
+  },
+  get baseUrl() {
+    return getConfig().baseUrl;
+  },
+  get analytics() {
+    return getConfig().analytics;
+  },
+  get errors() {
+    return getConfig().errors;
+  },
+  get cache() {
+    return getConfig().cache;
+  },
+  get logging() {
+    return getConfig().logging;
+  },
+  get mail() {
+    return getConfig().mail;
+  },
+  get directus() {
+    return getConfig().directus;
+  },
+  get notifications() {
+    return getConfig().notifications;
+  },
 };
 
 /**
@@ -124,5 +175,18 @@ export function getMaskedConfig() {
       from: c.mail.from,
       recipients: c.mail.recipients,
     },
+    directus: {
+      url: c.directus.url,
+      adminEmail: mask(c.directus.adminEmail),
+      password: mask(c.directus.password),
+      token: mask(c.directus.token),
+    },
+    notifications: {
+      gotify: {
+        url: c.notifications.gotify.url,
+        token: mask(c.notifications.gotify.token),
+        enabled: c.notifications.gotify.enabled,
+      },
+    },
   };
 }

lib/directus.ts

@@ -0,0 +1,192 @@
+import { createDirectus, rest, authentication, readItems, readCollections } from '@directus/sdk';
+import { config } from './config';
+import { getServerAppServices } from './services/create-services.server';
+
+const { url, adminEmail, password, token, proxyPath, internalUrl } = config.directus;
+
+// Use internal URL if on server to bypass Gatekeeper/Auth
+// Use proxy path in browser to stay on the same origin
+const effectiveUrl =
+  typeof window === 'undefined'
+    ? internalUrl || url
+    : typeof window !== 'undefined'
+      ? `${window.location.origin}${proxyPath}`
+      : proxyPath;
+
+const client = createDirectus(effectiveUrl).with(rest()).with(authentication());
+
+/**
+ * Helper to determine if we should show detailed errors
+ */
+const shouldShowDevErrors = config.isTesting || config.isDevelopment;
+
+/**
+ * Genericizes error messages for production/staging
+ */
+function formatError(error: any) {
+  if (shouldShowDevErrors) {
+    return error.errors?.[0]?.message || error.message || 'An unexpected error occurred.';
+  }
+  return 'A system error occurred. Our team has been notified.';
+}
+
+export async function ensureAuthenticated() {
+  if (token) {
+    client.setToken(token);
+    return;
+  }
+  if (adminEmail && password) {
+    try {
+      await client.login(adminEmail, password);
+    } catch (e) {
+      if (typeof window === 'undefined') {
+        getServerAppServices().errors.captureException(e, { part: 'directus_auth' });
+      }
+      console.error('Failed to authenticate with Directus:', e);
+    }
+  }
+}
+
+/**
+ * Maps the new translation-based schema back to the application's Product interface
+ */
+function mapDirectusProduct(item: any, locale: string): any {
+  const langCode = locale === 'en' ? 'en-US' : 'de-DE';
+  const translation =
+    item.translations?.find((t: any) => t.languages_code === langCode) ||
+    item.translations?.[0] ||
+    {};
+
+  return {
+    id: item.id,
+    sku: item.sku,
+    title: translation.name || '',
+    description: translation.description || '',
+    content: translation.content || '',
+    technicalData: {
+      technicalItems: translation.technical_items || [],
+      voltageTables: translation.voltage_tables || [],
+    },
+    locale: locale,
+    // Use proxy URL for assets to avoid CORS and handle internal/external issues
+    data_sheet_url: item.data_sheet ? `${proxyPath}/assets/${item.data_sheet}` : null,
+    categories: (item.categories_link || [])
+      .map((c: any) => c.categories_id?.translations?.[0]?.name)
+      .filter(Boolean),
+  };
+}
+
+export async function getProducts(locale: string = 'de') {
+  await ensureAuthenticated();
+  try {
+    const items = await client.request(
+      readItems('products', {
+        fields: ['*', 'translations.*', 'categories_link.categories_id.translations.name'],
+      }),
+    );
+    return items.map((item) => mapDirectusProduct(item, locale));
+  } catch (error) {
+    if (typeof window === 'undefined') {
+      getServerAppServices().errors.captureException(error, { part: 'directus_get_products' });
+    }
+    console.error('Error fetching products:', error);
+    return [];
+  }
+}
+
+export async function getProductBySlug(slug: string, locale: string = 'de') {
+  await ensureAuthenticated();
+  const langCode = locale === 'en' ? 'en-US' : 'de-DE';
+  try {
+    const items = await client.request(
+      readItems('products', {
+        filter: {
+          translations: {
+            slug: { _eq: slug },
+            languages_code: { _eq: langCode },
+          },
+        },
+        fields: ['*', 'translations.*', 'categories_link.categories_id.translations.name'],
+        limit: 1,
+      }),
+    );
+
+    if (!items || items.length === 0) return null;
+    return mapDirectusProduct(items[0], locale);
+  } catch (error) {
+    if (typeof window === 'undefined') {
+      getServerAppServices().errors.captureException(error, {
+        part: 'directus_get_product_by_slug',
+        slug,
+      });
+    }
+    console.error(`Error fetching product ${slug}:`, error);
+    return null;
+  }
+}
+
+export async function checkHealth() {
+  try {
+    // 1. Connectivity & Auth Check
+    try {
+      await ensureAuthenticated();
+      await client.request(readCollections());
+    } catch (e: any) {
+      if (typeof window === 'undefined') {
+        getServerAppServices().errors.captureException(e, { part: 'directus_health_auth' });
+      }
+      console.error('Directus authentication failed during health check:', e);
+      return {
+        status: 'error',
+        message: shouldShowDevErrors
+          ? 'Authentication failed. Check your DIRECTUS_ADMIN_EMAIL and DIRECTUS_ADMIN_PASSWORD.'
+          : 'CMS is currently unavailable due to an internal authentication error.',
+        code: 'AUTH_FAILED',
+        details: shouldShowDevErrors ? e.message : undefined,
+      };
+    }
+
+    // 2. Schema check (does the contact_submissions table exist?)
+    try {
+      await client.request(readItems('contact_submissions', { limit: 1 }));
+    } catch (e: any) {
+      if (typeof window === 'undefined') {
+        getServerAppServices().errors.captureException(e, { part: 'directus_health_schema' });
+      }
+      if (
+        e.message?.includes('does not exist') ||
+        e.code === 'INVALID_PAYLOAD' ||
+        e.status === 404
+      ) {
+        return {
+          status: 'error',
+          message: shouldShowDevErrors
+            ? `The "contact_submissions" collection is missing or inaccessible. Error: ${e.message || 'Unknown'}`
+            : 'Required data structures are currently unavailable.',
+          code: 'SCHEMA_MISSING',
+        };
+      }
+      return {
+        status: 'error',
+        message: shouldShowDevErrors
+          ? `Schema error: ${e.errors?.[0]?.message || e.message || 'Unknown error'}`
+          : 'The data schema is currently misconfigured.',
+        code: 'SCHEMA_ERROR',
+      };
+    }
+
+    return { status: 'ok', message: 'Directus is reachable and responding.' };
+  } catch (error: any) {
+    if (typeof window === 'undefined') {
+      getServerAppServices().errors.captureException(error, { part: 'directus_health_critical' });
+    }
+    console.error('Directus health check failed with unexpected error:', error);
+    return {
+      status: 'error',
+      message: formatError(error),
+      code: error.code || 'UNKNOWN',
+    };
+  }
+}
+
+export default client;

lib/env.test.ts

@@ -0,0 +1,70 @@
+import { describe, it, expect } from 'vitest';
+import { envSchema } from './env';
+
+describe('envSchema', () => {
+  it('should allow missing MAIL_HOST in development', () => {
+    const result = envSchema.safeParse({
+      NEXT_PUBLIC_BASE_URL: 'http://localhost:3000',
+      TARGET: 'development',
+    });
+    expect(result.success).toBe(true);
+  });
+
+  it('should require MAIL_HOST in production', () => {
+    const result = envSchema.safeParse({
+      NEXT_PUBLIC_BASE_URL: 'https://example.com',
+      TARGET: 'production',
+    });
+    expect(result.success).toBe(false);
+    if (!result.success) {
+      expect(result.error.issues[0].message).toBe(
+        'MAIL_HOST is required in non-development environments',
+      );
+    }
+  });
+
+  it('should require MAIL_HOST in testing', () => {
+    const result = envSchema.safeParse({
+      NEXT_PUBLIC_BASE_URL: 'https://testing.example.com',
+      TARGET: 'testing',
+    });
+    expect(result.success).toBe(false);
+    if (!result.success) {
+      expect(result.error.issues[0].message).toBe(
+        'MAIL_HOST is required in non-development environments',
+      );
+    }
+  });
+
+  it('should require MAIL_HOST in staging', () => {
+    const result = envSchema.safeParse({
+      NEXT_PUBLIC_BASE_URL: 'https://staging.example.com',
+      TARGET: 'staging',
+    });
+    expect(result.success).toBe(false);
+    if (!result.success) {
+      expect(result.error.issues[0].message).toBe(
+        'MAIL_HOST is required in non-development environments',
+      );
+    }
+  });
+
+  it('should pass if MAIL_HOST is provided in production', () => {
+    const result = envSchema.safeParse({
+      NEXT_PUBLIC_BASE_URL: 'https://example.com',
+      TARGET: 'production',
+      MAIL_HOST: 'smtp.example.com',
+    });
+    expect(result.success).toBe(true);
+  });
+
+  it('should skip MAIL_HOST requirement if SKIP_RUNTIME_ENV_VALIDATION is true', () => {
+    process.env.SKIP_RUNTIME_ENV_VALIDATION = 'true';
+    const result = envSchema.safeParse({
+      NEXT_PUBLIC_BASE_URL: 'https://example.com',
+      TARGET: 'production',
+    });
+    expect(result.success).toBe(true);
+    delete process.env.SKIP_RUNTIME_ENV_VALIDATION;
+  });
+});

lib/env.ts

@@ -8,31 +8,68 @@ const preprocessEmptyString = (val: unknown) => (val === '' ? undefined : val);
 /**
  * Environment variable schema.
  */
-export const envSchema = z.object({
-  NODE_ENV: z.enum(['development', 'production', 'test']).default('development'),
-  NEXT_PUBLIC_BASE_URL: z.preprocess(preprocessEmptyString, z.string().url()),
-  
-  // Analytics
-  NEXT_PUBLIC_UMAMI_WEBSITE_ID: z.preprocess(preprocessEmptyString, z.string().optional()),
-  NEXT_PUBLIC_UMAMI_SCRIPT_URL: z.preprocess(preprocessEmptyString, z.string().url().default('https://analytics.infra.mintel.me/script.js')),
-  
-  // Error Tracking
-  SENTRY_DSN: z.preprocess(preprocessEmptyString, z.string().optional()),
-  
-  // Logging
-  LOG_LEVEL: z.enum(['debug', 'info', 'warn', 'error']).default('info'),
-  
-  // Mail
-  MAIL_HOST: z.preprocess(preprocessEmptyString, z.string().optional()),
-  MAIL_PORT: z.preprocess(preprocessEmptyString, z.coerce.number().default(587)),
-  MAIL_USERNAME: z.preprocess(preprocessEmptyString, z.string().optional()),
-  MAIL_PASSWORD: z.preprocess(preprocessEmptyString, z.string().optional()),
-  MAIL_FROM: z.preprocess(preprocessEmptyString, z.string().optional()),
-  MAIL_RECIPIENTS: z.preprocess(
-    (val) => (typeof val === 'string' ? val.split(',').filter(Boolean) : val),
-    z.array(z.string()).default([])
-  ),
-});
+export const envSchema = z
+  .object({
+    NODE_ENV: z.enum(['development', 'production', 'test']).default('development'),
+    NEXT_PUBLIC_BASE_URL: z.preprocess(preprocessEmptyString, z.string().url()),
+    NEXT_PUBLIC_TARGET: z.enum(['development', 'testing', 'staging', 'production']).optional(),
+
+    // Analytics
+    NEXT_PUBLIC_UMAMI_WEBSITE_ID: z.preprocess(preprocessEmptyString, z.string().optional()),
+    NEXT_PUBLIC_UMAMI_SCRIPT_URL: z.preprocess(
+      preprocessEmptyString,
+      z.string().url().default('https://analytics.infra.mintel.me/script.js'),
+    ),
+
+    // Error Tracking
+    SENTRY_DSN: z.preprocess(preprocessEmptyString, z.string().optional()),
+
+    // Logging
+    LOG_LEVEL: z.enum(['debug', 'info', 'warn', 'error']).default('info'),
+
+    // Mail
+    MAIL_HOST: z.preprocess(preprocessEmptyString, z.string().optional()),
+    MAIL_PORT: z.preprocess(preprocessEmptyString, z.coerce.number().default(587)),
+    MAIL_USERNAME: z.preprocess(preprocessEmptyString, z.string().optional()),
+    MAIL_PASSWORD: z.preprocess(preprocessEmptyString, z.string().optional()),
+    MAIL_FROM: z.preprocess(preprocessEmptyString, z.string().optional()),
+    MAIL_RECIPIENTS: z.preprocess(
+      (val) => (typeof val === 'string' ? val.split(',').filter(Boolean) : val),
+      z.array(z.string()).default([]),
+    ),
+
+    // Directus
+    DIRECTUS_URL: z.preprocess(
+      preprocessEmptyString,
+      z.string().url().default('http://localhost:8055'),
+    ),
+    DIRECTUS_ADMIN_EMAIL: z.preprocess(preprocessEmptyString, z.string().optional()),
+    DIRECTUS_ADMIN_PASSWORD: z.preprocess(preprocessEmptyString, z.string().optional()),
+    DIRECTUS_API_TOKEN: z.preprocess(preprocessEmptyString, z.string().optional()),
+    INTERNAL_DIRECTUS_URL: z.preprocess(preprocessEmptyString, z.string().url().optional()),
+
+    // Deploy Target
+    TARGET: z.enum(['development', 'testing', 'staging', 'production']).optional(),
+    // Gotify
+    GOTIFY_URL: z.preprocess(preprocessEmptyString, z.string().url().optional()),
+    GOTIFY_TOKEN: z.preprocess(preprocessEmptyString, z.string().optional()),
+  })
+  .superRefine((data, ctx) => {
+    const target = data.NEXT_PUBLIC_TARGET || data.TARGET;
+    const isDev = target === 'development' || !target;
+    const isBuildTimeValidation = process.env.SKIP_RUNTIME_ENV_VALIDATION === 'true';
+    const isServer = typeof window === 'undefined';
+
+    // Only enforce server-only variables when running on the server.
+    // In the browser, non-NEXT_PUBLIC_ variables are undefined and should not trigger validation errors.
+    if (isServer && !isDev && !isBuildTimeValidation && !data.MAIL_HOST) {
+      ctx.addIssue({
+        code: z.ZodIssueCode.custom,
+        message: 'MAIL_HOST is required in non-development environments',
+        path: ['MAIL_HOST'],
+      });
+    }
+  });
 
 export type Env = z.infer<typeof envSchema>;
 
@@ -44,6 +81,7 @@ export function getRawEnv() {
   return {
     NODE_ENV: process.env.NODE_ENV,
     NEXT_PUBLIC_BASE_URL: process.env.NEXT_PUBLIC_BASE_URL,
+    NEXT_PUBLIC_TARGET: process.env.NEXT_PUBLIC_TARGET,
     NEXT_PUBLIC_UMAMI_WEBSITE_ID: process.env.NEXT_PUBLIC_UMAMI_WEBSITE_ID,
     NEXT_PUBLIC_UMAMI_SCRIPT_URL: process.env.NEXT_PUBLIC_UMAMI_SCRIPT_URL,
     SENTRY_DSN: process.env.SENTRY_DSN,
@@ -54,5 +92,13 @@ export function getRawEnv() {
     MAIL_PASSWORD: process.env.MAIL_PASSWORD,
     MAIL_FROM: process.env.MAIL_FROM,
     MAIL_RECIPIENTS: process.env.MAIL_RECIPIENTS,
+    DIRECTUS_URL: process.env.DIRECTUS_URL,
+    DIRECTUS_ADMIN_EMAIL: process.env.DIRECTUS_ADMIN_EMAIL,
+    DIRECTUS_ADMIN_PASSWORD: process.env.DIRECTUS_ADMIN_PASSWORD,
+    DIRECTUS_API_TOKEN: process.env.DIRECTUS_API_TOKEN,
+    INTERNAL_DIRECTUS_URL: process.env.INTERNAL_DIRECTUS_URL,
+    TARGET: process.env.TARGET,
+    GOTIFY_URL: process.env.GOTIFY_URL,
+    GOTIFY_TOKEN: process.env.GOTIFY_TOKEN,
   };
 }

lib/mail/mailer.test.ts

@@ -0,0 +1,59 @@
+import { describe, it, expect, vi, beforeEach } from 'vitest';
+import { sendEmail } from './mailer';
+import { config } from '../config';
+
+// Mock getServerAppServices to avoid full app initialization
+vi.mock('@/lib/services/create-services.server', () => ({
+  getServerAppServices: () => ({
+    logger: {
+      child: () => ({
+        info: vi.fn(),
+        error: vi.fn(),
+        warn: vi.fn(),
+      }),
+    },
+  }),
+}));
+
+// Mock config
+vi.mock('../config', () => ({
+  config: {
+    mail: {
+      host: 'smtp.example.com',
+      port: 587,
+      user: 'user',
+      pass: 'pass',
+      from: 'from@example.com',
+      recipients: ['to@example.com'],
+    },
+  },
+  getConfig: vi.fn(),
+}));
+
+describe('mailer', () => {
+  beforeEach(() => {
+    vi.clearAllMocks();
+  });
+
+  describe('sendEmail', () => {
+    it('should throw error if MAIL_HOST is missing', async () => {
+      // Temporarily nullify host
+      const originalHost = config.mail.host;
+      (config.mail as any).host = '';
+
+      const result = await sendEmail({
+        subject: 'Test',
+        html: '<p>Test</p>',
+      });
+
+      expect(result.success).toBe(false);
+      expect((result.error as Error).message).toContain('MAIL_HOST is not configured');
+
+      // Restore host
+      (config.mail as any).host = originalHost;
+    });
+
+    // In a real environment, we'd mock nodemailer, but for now we focus on the validation logic
+    // we added. Full SMTP integration tests are usually out of scope for unit tests.
+  });
+});

lib/mail/mailer.ts

@@ -1,28 +1,37 @@
-import nodemailer from "nodemailer";
-import { render } from "@react-email/components";
-import { ReactElement } from "react";
-import { getServerAppServices } from "@/lib/services/create-services.server";
-import { config } from "../config";
+import nodemailer from 'nodemailer';
+import { getServerAppServices } from '@/lib/services/create-services.server';
+import { config } from '../config';
+import { ReactElement } from 'react';
 
-const transporter = nodemailer.createTransport({
-  host: config.mail.host,
-  port: config.mail.port,
-  secure: config.mail.port === 465,
-  auth: {
-    user: config.mail.user,
-    pass: config.mail.pass,
-  },
-});
+let transporterInstance: nodemailer.Transporter | null = null;
+
+function getTransporter() {
+  if (transporterInstance) return transporterInstance;
+
+  if (!config.mail.host) {
+    throw new Error('MAIL_HOST is not configured. Please check your environment variables.');
+  }
+
+  transporterInstance = nodemailer.createTransport({
+    host: config.mail.host,
+    port: config.mail.port,
+    secure: config.mail.port === 465,
+    auth: {
+      user: config.mail.user,
+      pass: config.mail.pass,
+    },
+  });
+
+  return transporterInstance;
+}
 
 interface SendEmailOptions {
   to?: string | string[];
   subject: string;
-  template: ReactElement;
+  html: string;
 }
 
-export async function sendEmail({ to, subject, template }: SendEmailOptions) {
-  const html = await render(template);
-  
+export async function sendEmail({ to, subject, html }: SendEmailOptions) {
   const recipients = to || config.mail.recipients;
 
   const mailOptions = {
@@ -35,11 +44,11 @@ export async function sendEmail({ to, subject, template }: SendEmailOptions) {
   const logger = getServerAppServices().logger.child({ component: 'mailer' });
 
   try {
-    const info = await transporter.sendMail(mailOptions);
-    logger.info("Email sent successfully", { messageId: info.messageId, subject, recipients });
+    const info = await getTransporter().sendMail(mailOptions);
+    logger.info('Email sent successfully', { messageId: info.messageId, subject, recipients });
     return { success: true, messageId: info.messageId };
   } catch (error) {
-    logger.error("Error sending email", { error, subject, recipients });
+    logger.error('Error sending email', { error, subject, recipients });
     return { success: false, error };
   }
 }

lib/mdx.ts

@@ -18,11 +18,61 @@ export interface ProductMdx {
   content: string;
 }
 
+export async function getProductMetadata(
+  slug: string,
+  locale: string,
+): Promise<Partial<ProductMdx> | null> {
+  // Map translated slug to file slug
+  const fileSlug = await mapSlugToFileSlug(slug, locale);
+  const productsDir = path.join(process.cwd(), 'data', 'products', locale);
+
+  // Try exact slug first
+  let filePath = path.join(productsDir, `${fileSlug}.mdx`);
+
+  if (!fs.existsSync(filePath)) {
+    // Try with -2 suffix (common in the dumped files)
+    filePath = path.join(productsDir, `${fileSlug}-2.mdx`);
+  }
+
+  if (!fs.existsSync(filePath)) {
+    // Fallback to English if locale is not 'en'
+    if (locale !== 'en') {
+      const enProductsDir = path.join(process.cwd(), 'data', 'products', 'en');
+      let enFilePath = path.join(enProductsDir, `${fileSlug}.mdx`);
+      if (!fs.existsSync(enFilePath)) {
+        enFilePath = path.join(enProductsDir, `${fileSlug}-2.mdx`);
+      }
+
+      if (fs.existsSync(enFilePath)) {
+        const fileContent = fs.readFileSync(enFilePath, 'utf8');
+        const { data } = matter(fileContent);
+        return {
+          slug: fileSlug,
+          frontmatter: {
+            ...data,
+            isFallback: true,
+          } as ProductFrontmatter & { isFallback?: boolean },
+        };
+      }
+    }
+  } else {
+    const fileContent = fs.readFileSync(filePath, 'utf8');
+    const { data } = matter(fileContent);
+
+    return {
+      slug: fileSlug,
+      frontmatter: data as ProductFrontmatter,
+    };
+  }
+
+  return null;
+}
+
 export async function getProductBySlug(slug: string, locale: string): Promise<ProductMdx | null> {
   // Map translated slug to file slug
   const fileSlug = await mapSlugToFileSlug(slug, locale);
   const productsDir = path.join(process.cwd(), 'data', 'products', locale);
-  
+
   // Try exact slug first
   let filePath = path.join(productsDir, `${fileSlug}.mdx`);
 
@@ -41,7 +91,7 @@ export async function getProductBySlug(slug: string, locale: string): Promise<Pr
       if (!fs.existsSync(enFilePath)) {
         enFilePath = path.join(enProductsDir, `${fileSlug}-2.mdx`);
       }
-      
+
       if (fs.existsSync(enFilePath)) {
         const fileContent = fs.readFileSync(enFilePath, 'utf8');
         const { data, content } = matter(fileContent);
@@ -49,7 +99,7 @@ export async function getProductBySlug(slug: string, locale: string): Promise<Pr
           slug: fileSlug,
           frontmatter: {
             ...data,
-            isFallback: true
+            isFallback: true,
           } as ProductFrontmatter & { isFallback?: boolean },
           content,
         };
@@ -67,7 +117,12 @@ export async function getProductBySlug(slug: string, locale: string): Promise<Pr
   }
 
   // Filter out products without images
-  if (product && (!product.frontmatter.images || product.frontmatter.images.length === 0 || !product.frontmatter.images[0])) {
+  if (
+    product &&
+    (!product.frontmatter.images ||
+      product.frontmatter.images.length === 0 ||
+      !product.frontmatter.images[0])
+  ) {
     return null;
   }
 
@@ -77,9 +132,9 @@ export async function getProductBySlug(slug: string, locale: string): Promise<Pr
 export async function getAllProductSlugs(locale: string): Promise<string[]> {
   const productsDir = path.join(process.cwd(), 'data', 'products', locale);
   if (!fs.existsSync(productsDir)) return [];
-  
+
   const files = fs.readdirSync(productsDir);
-  return files.filter(file => file.endsWith('.mdx')).map(file => file.replace(/\.mdx$/, ''));
+  return files.filter((file) => file.endsWith('.mdx')).map((file) => file.replace(/\.mdx$/, ''));
 }
 
 export async function getAllProducts(locale: string): Promise<ProductMdx[]> {
@@ -91,6 +146,19 @@ export async function getAllProducts(locale: string): Promise<ProductMdx[]> {
     allSlugs = Array.from(new Set([...slugs, ...enSlugs]));
   }
 
-  const products = await Promise.all(allSlugs.map(slug => getProductBySlug(slug, locale)));
+  const products = await Promise.all(allSlugs.map((slug) => getProductBySlug(slug, locale)));
   return products.filter((p): p is ProductMdx => p !== null);
 }
+
+export async function getAllProductsMetadata(locale: string): Promise<Partial<ProductMdx>[]> {
+  const slugs = await getAllProductSlugs(locale);
+  let allSlugs = slugs;
+
+  if (locale !== 'en') {
+    const enSlugs = await getAllProductSlugs('en');
+    allSlugs = Array.from(new Set([...slugs, ...enSlugs]));
+  }
+
+  const metadata = await Promise.all(allSlugs.map((slug) => getProductMetadata(slug, locale)));
+  return metadata.filter((m): m is Partial<ProductMdx> => m !== null);
+}

lib/og-helper.tsx

@@ -0,0 +1,42 @@
+import { readFileSync } from 'fs';
+import { join } from 'path';
+
+/**
+ * Loads the Inter fonts for use in Satori (Next.js OG Image generation).
+ * Since we are using runtime = 'nodejs', we can read them from the filesystem.
+ */
+export async function getOgFonts() {
+    const boldFontPath = join(process.cwd(), 'public/fonts/Inter-Bold.ttf');
+    const regularFontPath = join(process.cwd(), 'public/fonts/Inter-Regular.ttf');
+
+    try {
+        const boldFont = readFileSync(boldFontPath);
+        const regularFont = readFileSync(regularFontPath);
+
+        return [
+            {
+                name: 'Inter',
+                data: boldFont,
+                weight: 700 as const,
+                style: 'normal' as const,
+            },
+            {
+                name: 'Inter',
+                data: regularFont,
+                weight: 400 as const,
+                style: 'normal' as const,
+            },
+        ];
+    } catch (error) {
+        console.error('Failed to load OG fonts from filesystem, falling back to system fonts:', error);
+        return [];
+    }
+}
+
+/**
+ * Common configuration for OG images
+ */
+export const OG_IMAGE_SIZE = {
+    width: 1200,
+    height: 630,
+};

lib/pages.ts

@@ -39,23 +39,42 @@ export async function getPageBySlug(slug: string, locale: string): Promise<PageM
 export async function getAllPages(locale: string): Promise<PageMdx[]> {
   const pagesDir = path.join(process.cwd(), 'data', 'pages', locale);
   if (!fs.existsSync(pagesDir)) return [];
-  
+
   const files = fs.readdirSync(pagesDir);
   const pages = await Promise.all(
     files
-      .filter(file => file.endsWith('.mdx'))
-      .map(file => {
+      .filter((file) => file.endsWith('.mdx'))
+      .map((file) => {
         const fileSlug = file.replace(/\.mdx$/, '');
         const filePath = path.join(pagesDir, file);
-        const fileContent = { content: fs.readFileSync(filePath, 'utf8') };
-        const { data, content } = matter(fileContent.content);
+        const fileContent = fs.readFileSync(filePath, 'utf8');
+        const { data, content } = matter(fileContent);
         return {
           slug: fileSlug,
           frontmatter: data as PageFrontmatter,
           content,
         };
-      })
+      }),
   );
 
   return pages.filter((p): p is PageMdx => p !== null);
 }
+
+export async function getAllPagesMetadata(locale: string): Promise<Partial<PageMdx>[]> {
+  const pagesDir = path.join(process.cwd(), 'data', 'pages', locale);
+  if (!fs.existsSync(pagesDir)) return [];
+
+  const files = fs.readdirSync(pagesDir);
+  return files
+    .filter((file) => file.endsWith('.mdx'))
+    .map((file) => {
+      const fileSlug = file.replace(/\.mdx$/, '');
+      const filePath = path.join(pagesDir, file);
+      const fileContent = fs.readFileSync(filePath, 'utf8');
+      const { data } = matter(fileContent);
+      return {
+        slug: fileSlug,
+        frontmatter: data as PageFrontmatter,
+      };
+    });
+}

lib/pdf-datasheet.tsx

@@ -305,7 +305,6 @@ const getLabels = (locale: 'en' | 'de') => {
 export const PDFDatasheet: React.FC<PDFDatasheetProps> = ({
   product,
   locale,
-  logoUrl = '/media/logo.svg',
 }) => {
   const labels = getLabels(locale);
 
@@ -338,8 +337,12 @@ export const PDFDatasheet: React.FC<PDFDatasheetProps> = ({
             </View>
             <View style={styles.productImageCol}>
               {product.featuredImage ? (
-                <Image src={product.featuredImage} style={styles.heroImage} />
+                <Image
+                  src={product.featuredImage}
+                  style={styles.heroImage}
+                />
               ) : (
+
                 <Text style={styles.noImage}>{labels.noImage}</Text>
               )}
             </View>
@@ -370,7 +373,7 @@ export const PDFDatasheet: React.FC<PDFDatasheetProps> = ({
                     style={[
                       styles.specsTableRow,
                       index === product.attributes.length - 1 &&
-                        styles.specsTableRowLast,
+                      styles.specsTableRowLast,
                     ]}
                   >
                     <View style={styles.specsTableLabelCell}>

lib/schema.ts

@@ -1,5 +1,6 @@
+import { config } from './config';
 
-export const SITE_URL = 'https://klz-cables.com';
+export const SITE_URL = config.baseUrl || 'https://klz-cables.com';
 export const LOGO_URL = `${SITE_URL}/logo.png`;
 
 export const getOrganizationSchema = () => ({
@@ -8,16 +9,14 @@ export const getOrganizationSchema = () => ({
   name: 'KLZ Cables',
   url: SITE_URL,
   logo: LOGO_URL,
-  sameAs: [
-    'https://www.linkedin.com/company/klz-cables',
-  ],
+  sameAs: ['https://www.linkedin.com/company/klz-cables'],
   contactPoint: {
     '@type': 'ContactPoint' as const,
     telephone: '+49-881-92537298',
     contactType: 'customer service' as const,
     email: 'info@klz-cables.com',
-    availableLanguage: ['German', 'English']
-  }
+    availableLanguage: ['German', 'English'],
+  },
 });
 
 export const getBreadcrumbSchema = (items: { name: string; item: string }[]) => ({

lib/services/app-services.ts

@@ -2,6 +2,7 @@ import type { AnalyticsService } from './analytics/analytics-service';
 import type { CacheService } from './cache/cache-service';
 import type { ErrorReportingService } from './errors/error-reporting-service';
 import type { LoggerService } from './logging/logger-service';
+import type { NotificationService } from './notifications/notification-service';
 
 // Simple constructor-based DI container.
 export class AppServices {
@@ -9,6 +10,7 @@ export class AppServices {
     public readonly analytics: AnalyticsService,
     public readonly errors: ErrorReportingService,
     public readonly cache: CacheService,
-    public readonly logger: LoggerService
+    public readonly logger: LoggerService,
+    public readonly notifications: NotificationService,
   ) {}
 }

lib/services/create-services.server.ts

@@ -4,6 +4,10 @@ import { UmamiAnalyticsService } from './analytics/umami-analytics-service';
 import { MemoryCacheService } from './cache/memory-cache-service';
 import { GlitchtipErrorReportingService } from './errors/glitchtip-error-reporting-service';
 import { NoopErrorReportingService } from './errors/noop-error-reporting-service';
+import {
+  GotifyNotificationService,
+  NoopNotificationService,
+} from './notifications/gotify-notification-service';
 import { PinoLoggerService } from './logging/pino-logger-service';
 import { config, getMaskedConfig } from '../config';
 
@@ -13,7 +17,7 @@ export function getServerAppServices(): AppServices {
 
   // Create logger first to log initialization
   const logger = new PinoLoggerService('server');
-  
+
   logger.info('Initializing server application services', {
     environment: getMaskedConfig(),
     timestamp: new Date().toISOString(),
@@ -23,6 +27,7 @@ export function getServerAppServices(): AppServices {
     umamiEnabled: config.analytics.umami.enabled,
     sentryEnabled: config.errors.glitchtip.enabled,
     mailEnabled: Boolean(config.mail.host && config.mail.user),
+    gotifyEnabled: config.notifications.gotify.enabled,
   });
 
   const analytics = config.analytics.umami.enabled
@@ -35,12 +40,28 @@ export function getServerAppServices(): AppServices {
     logger.info('Noop analytics service initialized (analytics disabled)');
   }
 
+  const notifications = config.notifications.gotify.enabled
+    ? new GotifyNotificationService({
+        url: config.notifications.gotify.url!,
+        token: config.notifications.gotify.token!,
+        enabled: true,
+      })
+    : new NoopNotificationService();
+
+  if (config.notifications.gotify.enabled) {
+    logger.info('Gotify notification service initialized');
+  } else {
+    logger.info('Noop notification service initialized (notifications disabled)');
+  }
+
   const errors = config.errors.glitchtip.enabled
-    ? new GlitchtipErrorReportingService({ enabled: true })
+    ? new GlitchtipErrorReportingService({ enabled: true }, notifications)
     : new NoopErrorReportingService();
 
   if (config.errors.glitchtip.enabled) {
-    logger.info('GlitchTip error reporting service initialized');
+    logger.info('GlitchTip error reporting service initialized', {
+      dsnPresent: Boolean(config.errors.glitchtip.dsn),
+    });
   } else {
     logger.info('Noop error reporting service initialized (error reporting disabled)');
   }
@@ -53,10 +74,9 @@ export function getServerAppServices(): AppServices {
     level: config.logging.level,
   });
 
-  singleton = new AppServices(analytics, errors, cache, logger);
-  
+  singleton = new AppServices(analytics, errors, cache, logger, notifications);
+
   logger.info('All application services initialized successfully');
-  
+
   return singleton;
 }
-

lib/services/create-services.ts

@@ -5,6 +5,7 @@ import { GlitchtipErrorReportingService } from './errors/glitchtip-error-reporti
 import { NoopErrorReportingService } from './errors/noop-error-reporting-service';
 import { NoopLoggerService } from './logging/noop-logger-service';
 import { PinoLoggerService } from './logging/pino-logger-service';
+import { NoopNotificationService } from './notifications/gotify-notification-service';
 import { config, getMaskedConfig } from '../config';
 
 /**
@@ -71,9 +72,7 @@ export function getAppServices(): AppServices {
 
   // Create logger first to log initialization
   const logger =
-    typeof window === 'undefined'
-      ? new PinoLoggerService('server')
-      : new NoopLoggerService();
+    typeof window === 'undefined' ? new PinoLoggerService('server') : new NoopLoggerService();
 
   // Log initialization
   if (typeof window === 'undefined') {
@@ -121,7 +120,9 @@ export function getAppServices(): AppServices {
     : new NoopErrorReportingService();
 
   if (sentryEnabled) {
-    logger.info(`GlitchTip error reporting service initialized (${typeof window === 'undefined' ? 'server' : 'client'})`);
+    logger.info(
+      `GlitchTip error reporting service initialized (${typeof window === 'undefined' ? 'server' : 'client'})`,
+    );
   } else {
     logger.info('Noop error reporting service initialized (error reporting disabled)');
   }
@@ -138,9 +139,10 @@ export function getAppServices(): AppServices {
   });
 
   // Create and cache the singleton
-  singleton = new AppServices(analytics, errors, cache, logger);
-  
+  const notifications = new NoopNotificationService();
+  singleton = new AppServices(analytics, errors, cache, logger, notifications);
+
   logger.info('All application services initialized successfully');
-  
+
   return singleton;
 }

lib/services/errors/error-reporting-service.ts

@@ -7,10 +7,15 @@ export type ErrorReportingUser = {
 export type ErrorReportingLevel = 'fatal' | 'error' | 'warning' | 'info' | 'debug' | 'log';
 
 export interface ErrorReportingService {
-  captureException(error: unknown, context?: Record<string, unknown>): string | undefined;
-  captureMessage(message: string, level?: ErrorReportingLevel): string | undefined;
+  captureException(
+    error: unknown,
+    context?: Record<string, unknown>,
+  ): Promise<string | undefined> | string | undefined;
+  captureMessage(
+    message: string,
+    level?: ErrorReportingLevel,
+  ): Promise<string | undefined> | string | undefined;
   setUser(user: ErrorReportingUser | null): void;
   setTag(key: string, value: string): void;
   withScope<T>(fn: () => T, context?: Record<string, unknown>): T;
 }
-

lib/services/errors/glitchtip-error-reporting-service.ts

@@ -4,6 +4,7 @@ import type {
   ErrorReportingService,
   ErrorReportingUser,
 } from './error-reporting-service';
+import type { NotificationService } from '../notifications/notification-service';
 
 type SentryLike = typeof Sentry;
 
@@ -15,12 +16,29 @@ export type GlitchtipErrorReportingServiceOptions = {
 export class GlitchtipErrorReportingService implements ErrorReportingService {
   constructor(
     private readonly options: GlitchtipErrorReportingServiceOptions,
-    private readonly sentry: SentryLike = Sentry
+    private readonly notifications?: NotificationService,
+    private readonly sentry: SentryLike = Sentry,
   ) {}
 
-  captureException(error: unknown, context?: Record<string, unknown>) {
+  async captureException(error: unknown, context?: Record<string, unknown>) {
     if (!this.options.enabled) return undefined;
-    return this.sentry.captureException(error, context as any) as any;
+    const result = this.sentry.captureException(error, context as any) as any;
+
+    // Send to Gotify if it's considered critical or if we just want all exceptions there
+    // For now, let's send all exceptions to Gotify as requested "notify me via gotify about critical error messages"
+    // We'll treat all captureException calls as potentially critical or at least noteworthy
+    if (this.notifications) {
+      const errorMessage = error instanceof Error ? error.message : String(error);
+      const contextStr = context ? `\nContext: ${JSON.stringify(context, null, 2)}` : '';
+
+      await this.notifications.notify({
+        title: '🔥 Critical Error Captured',
+        message: `Error: ${errorMessage}${contextStr}`,
+        priority: 7,
+      });
+    }
+
+    return result;
   }
 
   captureMessage(message: string, level: ErrorReportingLevel = 'error') {

lib/services/errors/noop-error-reporting-service.ts

@@ -1,11 +1,15 @@
-import type { ErrorReportingLevel, ErrorReportingService, ErrorReportingUser } from './error-reporting-service';
+import type {
+  ErrorReportingLevel,
+  ErrorReportingService,
+  ErrorReportingUser,
+} from './error-reporting-service';
 
 export class NoopErrorReportingService implements ErrorReportingService {
-  captureException(_error: unknown, _context?: Record<string, unknown>) {
+  async captureException(_error: unknown, _context?: Record<string, unknown>) {
     return undefined;
   }
 
-  captureMessage(_message: string, _level?: ErrorReportingLevel) {
+  async captureMessage(_message: string, _level?: ErrorReportingLevel) {
     return undefined;
   }
 

lib/services/logging/pino-logger-service.ts

@@ -12,20 +12,19 @@ export class PinoLoggerService implements LoggerService {
       // In Next.js, especially in the Edge runtime or during instrumentation,
       // pino transports (which use worker threads) can cause issues.
       // We disable transport in production and during instrumentation.
-      const useTransport = !config.isProduction && typeof window === 'undefined';
+      const useTransport = config.isDevelopment && typeof window === 'undefined';
 
       this.logger = pino({
         name: name || 'app',
         level: config.logging.level,
-        transport:
-          useTransport
-            ? {
-                target: 'pino-pretty',
-                options: {
-                  colorize: true,
-                },
-              }
-            : undefined,
+        transport: useTransport
+          ? {
+              target: 'pino-pretty',
+              options: {
+                colorize: true,
+              },
+            }
+          : undefined,
       });
     }
   }

lib/services/notifications/gotify-notification-service.ts

@@ -0,0 +1,49 @@
+import { NotificationOptions, NotificationService } from './notification-service';
+
+export interface GotifyConfig {
+  url: string;
+  token: string;
+  enabled: boolean;
+}
+
+export class GotifyNotificationService implements NotificationService {
+  constructor(private config: GotifyConfig) {}
+
+  async notify(options: NotificationOptions): Promise<void> {
+    if (!this.config.enabled) return;
+
+    try {
+      const { title, message, priority = 4 } = options;
+      const url = new URL('message', this.config.url);
+      url.searchParams.set('token', this.config.token);
+
+      const response = await fetch(url.toString(), {
+        method: 'POST',
+        headers: {
+          'Content-Type': 'application/json',
+        },
+        body: JSON.stringify({
+          title,
+          message,
+          priority,
+        }),
+      });
+
+      if (!response.ok) {
+        const errorText = await response.text();
+        console.error('Gotify notification failed:', {
+          status: response.status,
+          error: errorText,
+        });
+      }
+    } catch (error) {
+      console.error('Gotify notification error:', error);
+    }
+  }
+}
+
+export class NoopNotificationService implements NotificationService {
+  async notify(): Promise<void> {
+    // Do nothing
+  }
+}

lib/services/notifications/notification-service.ts

@@ -0,0 +1,9 @@
+export interface NotificationOptions {
+  title: string;
+  message: string;
+  priority?: number;
+}
+
+export interface NotificationService {
+  notify(options: NotificationOptions): Promise<void>;
+}

lib/strapi.ts

@@ -0,0 +1,85 @@
+import axios from 'axios';
+
+const STRAPI_URL = process.env.STRAPI_URL || 'http://localhost:1337';
+const STRAPI_TOKEN = process.env.STRAPI_API_TOKEN;
+
+const strapi = axios.create({
+  baseURL: `${STRAPI_URL}/api`,
+  headers: {
+    Authorization: `Bearer ${STRAPI_TOKEN}`,
+  },
+});
+
+export interface StrapiResponse<T> {
+  data: {
+    id: number;
+    attributes: T;
+  }[];
+  meta: {
+    pagination: {
+      page: number;
+      pageSize: number;
+      pageCount: number;
+      total: number;
+    };
+  };
+}
+
+export interface Product {
+  title: string;
+  sku: string;
+  description: string;
+  application: string;
+  content: string;
+  technicalData: any;
+  locale: string;
+  images?: {
+    data: {
+      attributes: {
+        url: string;
+        alternativeText: string;
+      };
+    }[];
+  };
+}
+
+export async function getProducts(locale: string = 'de') {
+  try {
+    const response = await strapi.get<StrapiResponse<Product>>('/products', {
+      params: {
+        locale,
+        populate: '*',
+      },
+    });
+    return response.data.data.map(item => ({
+      id: item.id,
+      ...item.attributes,
+    }));
+  } catch (error) {
+    console.error('Error fetching products from Strapi:', error);
+    return [];
+  }
+}
+
+export async function getProductBySku(sku: string, locale: string = 'de') {
+  try {
+    const response = await strapi.get<StrapiResponse<Product>>('/products', {
+      params: {
+        filters: { sku: { $eq: sku } },
+        locale,
+        populate: '*',
+      },
+    });
+    if (response.data.data.length === 0) return null;
+    const item = response.data.data[0];
+    return {
+      id: item.id,
+      ...item.attributes,
+    };
+  } catch (error) {
+    console.error(`Error fetching product ${sku} from Strapi:`, error);
+    return null;
+  }
+}
+
+export default strapi;

lighthouserc.js

@@ -0,0 +1,19 @@
+module.exports = {
+  ci: {
+    collect: {
+      numberOfRuns: 1,
+      settings: {
+        preset: 'desktop',
+        onlyCategories: ['performance', 'accessibility', 'best-practices', 'seo'],
+      },
+    },
+    assert: {
+      assertions: {
+        'categories:performance': ['warn', { minScore: 0.9 }],
+        'categories:accessibility': ['warn', { minScore: 0.9 }],
+        'categories:best-practices': ['warn', { minScore: 0.9 }],
+        'categories:seo': ['warn', { minScore: 0.9 }],
+      },
+    },
+  },
+};

messages/de.json

@@ -191,7 +191,14 @@
       "emailPlaceholder": "ihre@email.de",
       "message": "Nachricht",
       "messagePlaceholder": "Wie können wir Ihnen helfen?",
-      "submit": "Nachricht senden"
+      "submit": "Nachricht senden",
+      "submitting": "Wird gesendet...",
+      "successTitle": "Nachricht gesendet!",
+      "successDesc": "Vielen Dank für Ihre Nachricht. Wir werden uns so schnell wie möglich bei Ihnen melden.",
+      "sendAnother": "Weitere Nachricht senden",
+      "errorTitle": "Senden fehlgeschlagen!",
+      "error": "Etwas ist schief gelaufen. Bitte überprüfen Sie Ihre Eingaben und versuchen Sie es erneut.",
+      "tryAgain": "Erneut versuchen"
     }
   },
   "Products": {

messages/en.json

@@ -191,7 +191,14 @@
       "emailPlaceholder": "your@email.com",
       "message": "Message",
       "messagePlaceholder": "How can we help you?",
-      "submit": "Send Message"
+      "submit": "Send Message",
+      "submitting": "Sending...",
+      "successTitle": "Message Sent!",
+      "successDesc": "Thank you for your message. We will get back to you as soon as possible.",
+      "sendAnother": "Send another message",
+      "errorTitle": "Submission Failed!",
+      "error": "Something went wrong. Please check your input and try again.",
+      "tryAgain": "Try Again"
     }
   },
   "Products": {

middleware.ts

@@ -1,6 +1,5 @@
 import createMiddleware from 'next-intl/middleware';
-import { NextResponse } from 'next/server';
-import type { NextRequest } from 'next/server';
+import { NextResponse, NextRequest } from 'next/server';
 
 // Create the internationalization middleware
 const intlMiddleware = createMiddleware({
@@ -8,31 +7,60 @@ const intlMiddleware = createMiddleware({
   locales: ['en', 'de'],
 
   // Used when no locale matches
-  defaultLocale: 'en'
+  defaultLocale: 'en',
 });
 
-// Main middleware that logs all requests
 export default function middleware(request: NextRequest) {
-  const startTime = Date.now();
   const { method, url, headers } = request;
-  const userAgent = headers.get('user-agent') || 'unknown';
-  const referer = headers.get('referer') || 'none';
-  const ip = headers.get('x-forwarded-for') || headers.get('x-real-ip') || 'unknown';
 
-  // Log incoming request
-  console.log(`Incoming request: method=${method} url=${url}`);
+  // Build header object for logging
+  const headerObj: Record<string, string> = {};
+  headers.forEach((value, key) => {
+    headerObj[key] = value;
+  });
+
+  // Defensive URL correction for internal container leakage (0.0.0.0, klz-app, localhost)
+  // This prevents hydration mismatches and host poisoning in generated links/metadata.
+  const urlObj = new URL(url);
+  const internalHosts = ['0.0.0.0', 'klz-app', 'localhost', '127.0.0.1'];
+
+  let effectiveRequest = request;
+  if (internalHosts.includes(urlObj.hostname)) {
+    const proto = headers.get('x-forwarded-proto') || 'https';
+    // Prioritize x-forwarded-host (passed by Traefik) over the local Host header
+    const hostHeader =
+      headers.get('x-forwarded-host') || headers.get('host') || 'testing.klz-cables.com';
+    const [publicHostname] = hostHeader.split(':');
+
+    urlObj.protocol = proto;
+    urlObj.hostname = publicHostname;
+    urlObj.port = ''; // Explicitly clear internal port (3000)
+
+    effectiveRequest = new NextRequest(urlObj, {
+      headers: request.headers,
+      method: request.method,
+      body: request.body,
+    });
+
+    console.log(
+      `🛡️ Middleware: Fixed internal URL leak: ${url} -> ${urlObj.toString()} | Proto: ${proto} | Host: ${hostHeader}`,
+    );
+  }
 
   try {
     // Apply internationalization middleware
-    const response = intlMiddleware(request);
+    const response = intlMiddleware(effectiveRequest);
     return response;
   } catch (error) {
-    console.error(`Request failed: method=${method} url=${url}`, error);
+    console.error(
+      `Request failed: method=${method} url=${url} headers=${JSON.stringify(headerObj)}`,
+      error,
+    );
     throw error;
   }
 }
 
 export const config = {
   // Match only internationalized pathnames
-  matcher: ['/((?!api|_next|_vercel|health|.*\\..*).*)', '/', '/(de|en)/:path*']
+  matcher: ['/((?!api|_next|_vercel|health|.*\\..*).*)', '/', '/(de|en)/:path*'],
 };

next.config.mjs

@@ -1,8 +1,8 @@
 import createNextIntlPlugin from 'next-intl/plugin';
 import { withSentryConfig } from '@sentry/nextjs';
-  
+
 const withNextIntl = createNextIntlPlugin();
-  
+
 /** @type {import('next').NextConfig} */
 const nextConfig = {
   output: 'standalone',
@@ -327,6 +327,8 @@ const nextConfig = {
       ? new URL(process.env.SENTRY_DSN).origin
       : 'https://errors.infra.mintel.me';
 
+    const directusUrl = process.env.INTERNAL_DIRECTUS_URL || process.env.DIRECTUS_URL || 'https://cms.klz-cables.com';
+
     return [
       {
         source: '/stats/:path*',
@@ -336,6 +338,10 @@ const nextConfig = {
         source: '/errors/:path*',
         destination: `${glitchtipUrl}/:path*`,
       },
+      {
+        source: '/cms/:path*',
+        destination: `${directusUrl}/:path*`,
+      },
     ];
   },
 };

package.json

@@ -1,5 +1,7 @@
 {
   "dependencies": {
+    "@directus/sdk": "^18.0.3",
+    "@mintel/mail": "^1.2.3",
     "@react-email/components": "^1.0.6",
     "@react-pdf/renderer": "^4.3.2",
     "@sentry/nextjs": "^8.55.0",
@@ -36,6 +38,9 @@
     "zod": "^4.3.6"
   },
   "devDependencies": {
+    "@commitlint/cli": "^20.4.0",
+    "@commitlint/config-conventional": "^20.4.0",
+    "@lhci/cli": "^0.15.1",
     "@tailwindcss/cli": "^4.1.18",
     "@tailwindcss/postcss": "^4.1.18",
     "@types/node": "^22.19.3",
@@ -47,7 +52,11 @@
     "autoprefixer": "^10.4.23",
     "eslint": "^8.57.1",
     "eslint-config-next": "14.2.35",
+    "eslint-config-prettier": "^10.1.8",
+    "husky": "^9.1.7",
+    "lint-staged": "^16.2.7",
     "postcss": "^8.5.6",
+    "prettier": "^3.8.1",
     "sass": "^1.97.1",
     "tailwindcss": "^4.1.18",
     "tsx": "^4.21.0",
@@ -57,15 +66,26 @@
   "name": "klz-cables-nextjs",
   "private": true,
   "scripts": {
-    "dev": "next dev",
+    "dev": "docker network create infra 2>/dev/null || true && echo '\\n🚀 Development Environment Starting...\\n\\n📱 App:      http://klz.localhost\\n🗄️  CMS:      http://cms.klz.localhost/admin\\n🚦 Traefik:  http://localhost:8080\\n\\n(Press Ctrl+C to stop)\\n' && docker-compose down --remove-orphans && docker-compose up klz-app directus directus-db",
+    "dev:local": "next dev",
     "build": "next build",
     "start": "next start",
     "lint": "next lint",
     "typecheck": "tsc --noEmit",
     "test": "vitest run --passWithNoTests",
     "test:og": "vitest run tests/og-image.test.ts",
+    "directus:bootstrap": "DIRECTUS_URL=http://localhost:8055 npx tsx --env-file=.env scripts/setup-directus-branding.ts",
     "pdf:datasheets": "tsx ./scripts/generate-pdf-datasheets.ts",
-    "pdf:datasheets:legacy": "tsx ./scripts/generate-pdf-datasheets-pdf-lib.ts"
+    "pdf:datasheets:legacy": "tsx ./scripts/generate-pdf-datasheets-pdf-lib.ts",
+    "directus:push:staging": "./scripts/sync-directus.sh push staging",
+    "directus:pull:staging": "./scripts/sync-directus.sh pull staging",
+    "directus:push:testing": "./scripts/sync-directus.sh push testing",
+    "directus:pull:testing": "./scripts/sync-directus.sh pull testing",
+    "directus:push:prod": "./scripts/sync-directus.sh push production",
+    "directus:pull:prod": "./scripts/sync-directus.sh pull production",
+    "pagespeed:test": "tsx ./scripts/pagespeed-sitemap.ts",
+    "pagespeed:urls": "tsx -e \"import sitemap from './app/sitemap'; sitemap().then(urls => console.log(urls.map(u => u.url).join('\\n')))\"",
+    "prepare": "husky"
   },
   "version": "1.0.0"
 }

scripts/cleanup-directus.ts

@@ -0,0 +1,19 @@
+import client, { ensureAuthenticated } from '../lib/directus';
+import { readCollections, deleteCollection } from '@directus/sdk';
+
+async function cleanup() {
+    await ensureAuthenticated();
+    const collections = await (client as any).request(readCollections());
+    for (const c of collections) {
+        if (!c.collection.startsWith('directus_')) {
+            console.log(`Deleting ${c.collection}...`);
+            try {
+                await (client as any).request(deleteCollection(c.collection));
+            } catch (e) {
+                console.error(`Failed to delete ${c.collection}`);
+            }
+        }
+    }
+}
+
+cleanup().catch(console.error);

scripts/fix-schema.ts

@@ -0,0 +1,99 @@
+import client, { ensureAuthenticated } from '../lib/directus';
+import {
+    createCollection,
+    createField,
+    createItem,
+    readCollections,
+    deleteCollection
+} from '@directus/sdk';
+
+async function fixSchema() {
+    console.log('🚑 EXTERNAL RESCUE: Fixing Schema & Data...');
+    await ensureAuthenticated();
+
+    // 1. Reset Products Collection to be 100% Standard
+    console.log('🗑️  Clearing broken collections...');
+    try { await client.request(deleteCollection('products')); } catch (e) { }
+    try { await client.request(deleteCollection('products_translations')); } catch (e) { }
+
+    // 2. Create Products (Simple, Standard ID)
+    console.log('🏗️  Rebuilding Products Schema...');
+    await client.request(createCollection({
+        collection: 'products',
+        schema: {}, // Let Directus decide defaults
+        meta: {
+            display_template: '{{sku}}',
+            archive_field: 'status',
+            archive_value: 'archived',
+            unarchive_value: 'published'
+        },
+        fields: [
+            {
+                field: 'id',
+                type: 'integer',
+                schema: { is_primary_key: true, has_auto_increment: true },
+                meta: { hidden: true }
+            },
+            {
+                field: 'status',
+                type: 'string',
+                schema: { default_value: 'published' },
+                meta: { width: 'full', options: { choices: [{ text: 'Published', value: 'published' }] } }
+            },
+            {
+                field: 'sku',
+                type: 'string',
+                meta: { interface: 'input', width: 'half' }
+            }
+        ]
+    } as any));
+
+    // 3. Create Translation Relation Safely
+    console.log('🌍 Rebuilding Translations...');
+    await client.request(createCollection({
+        collection: 'products_translations',
+        schema: {},
+        fields: [
+            {
+                field: 'id',
+                type: 'integer',
+                schema: { is_primary_key: true, has_auto_increment: true },
+                meta: { hidden: true }
+            },
+            { field: 'products_id', type: 'integer' },
+            { field: 'languages_code', type: 'string' },
+            { field: 'name', type: 'string', meta: { interface: 'input', width: 'full' } },
+            { field: 'description', type: 'text', meta: { interface: 'input-multiline' } },
+            { field: 'technical_items', type: 'json', meta: { interface: 'input-code-json' } }
+        ]
+    } as any));
+
+    // 4. Manually Insert ONE Product to Verify
+    console.log('📦 Injecting Test Product...');
+    try {
+        // We do this in two steps to be absolutely sure permissions don't block us
+        // Step A: Create User-Facing Product
+        const product = await client.request(createItem('products', {
+            sku: 'H1Z2Z2-K-TEST',
+            status: 'published'
+        }));
+
+        // Step B: Add Translation
+        await client.request(createItem('products_translations', {
+            products_id: product.id,
+            languages_code: 'de-DE',
+            name: 'H1Z2Z2-K Test Cable',
+            description: 'This is a verified imported product.',
+            technical_items: [{ label: 'Test', value: '100%' }]
+        }));
+
+        console.log(`✅ SUCCESS! Product Created with ID: ${product.id}`);
+        console.log(`verify at: ${process.env.DIRECTUS_URL}/admin/content/products/${product.id}`);
+
+    } catch (e: any) {
+        console.error('❌ Failed to create product:', e);
+        if (e.errors) console.error(JSON.stringify(e.errors, null, 2));
+    }
+}
+
+fixSchema().catch(console.error);

scripts/migrate-data.ts

@@ -0,0 +1,175 @@
+import client, { ensureAuthenticated } from '../lib/directus';
+import {
+    createCollection,
+    createField,
+    createRelation,
+    uploadFiles,
+    createItem,
+    updateSettings,
+    readFolders,
+    createFolder
+} from '@directus/sdk';
+import fs from 'fs';
+import path from 'path';
+import matter from 'gray-matter';
+import { fileURLToPath } from 'url';
+
+const __filename = fileURLToPath(import.meta.url);
+const __dirname = path.dirname(__filename);
+
+async function run() {
+    console.log('🚀 CLEAN SLATE MIGRATION 🚀');
+    await ensureAuthenticated();
+
+    // 1. Folders
+    console.log('📂 Creating Folders...');
+    const folders: any = {};
+    const folderNames = ['Products', 'Blog', 'Pages', 'Technical'];
+    for (const name of folderNames) {
+        try {
+            const res = await client.request(createFolder({ name }));
+            folders[name] = res.id;
+        } catch (e) {
+            const existing = await client.request(readFolders({ filter: { name: { _eq: name } } }));
+            folders[name] = existing[0].id;
+        }
+    }
+
+    // 2. Assets
+    const assetMap: Record<string, string> = {};
+    const uploadDir = async (dir: string, folderId: string) => {
+        if (!fs.existsSync(dir)) return;
+        const files = fs.readdirSync(dir, { withFileTypes: true });
+        for (const file of files) {
+            const fullPath = path.join(dir, file.name);
+            if (file.isDirectory()) {
+                await uploadDir(fullPath, folderId);
+            } else {
+                const relPath = '/' + path.relative(path.join(process.cwd(), 'public'), fullPath).split(path.sep).join('/');
+                try {
+                    const form = new FormData();
+                    form.append('folder', folderId);
+                    form.append('file', new Blob([fs.readFileSync(fullPath)]), file.name);
+                    const res = await client.request(uploadFiles(form));
+                    assetMap[relPath] = res.id;
+                    console.log(`✅ Asset: ${relPath}`);
+                } catch (e) { }
+            }
+        }
+    };
+    await uploadDir(path.join(process.cwd(), 'public/uploads'), folders.Products);
+
+    // 3. Collections (Minimalist)
+    const collections = [
+        'categories', 'products', 'posts', 'pages', 'globals',
+        'categories_translations', 'products_translations', 'posts_translations', 'pages_translations', 'globals_translations',
+        'categories_link'
+    ];
+
+    console.log('🏗️  Creating Collections...');
+    for (const name of collections) {
+        try {
+            const isSingleton = name === 'globals';
+            await client.request(createCollection({
+                collection: name,
+                schema: {},
+                meta: { singleton: isSingleton }
+            } as any));
+
+            // Add ID field
+            await client.request(createField(name, {
+                field: 'id',
+                type: 'integer',
+                meta: { hidden: true },
+                schema: { is_primary_key: true, has_auto_increment: name !== 'globals' }
+            }));
+            console.log(`✅ Collection: ${name}`);
+        } catch (e: any) {
+            console.log(`ℹ️ Collection ${name} exists or error: ${e.message}`);
+        }
+    }
+
+    // 4. Fields & Relations
+    console.log('🔧 Configuring Schema...');
+    const safeAdd = async (col: string, f: any) => { try { await client.request(createField(col, f)); } catch (e) { } };
+
+    // Products
+    await safeAdd('products', { field: 'sku', type: 'string' });
+    await safeAdd('products', { field: 'image', type: 'uuid', meta: { interface: 'file' } });
+
+    // Translations Generic
+    for (const col of ['categories', 'products', 'posts', 'pages', 'globals']) {
+        const transTable = `${col}_translations`;
+        await safeAdd(transTable, { field: `${col}_id`, type: 'integer' });
+        await safeAdd(transTable, { field: 'languages_code', type: 'string' });
+
+        // Link to Parent
+        try {
+            await client.request(createRelation({
+                collection: transTable,
+                field: `${col}_id`,
+                related_collection: col,
+                meta: { one_field: 'translations' }
+            }));
+        } catch (e) { }
+    }
+
+    // Specific Fields
+    await safeAdd('products_translations', { field: 'name', type: 'string' });
+    await safeAdd('products_translations', { field: 'slug', type: 'string' });
+    await safeAdd('products_translations', { field: 'description', type: 'text' });
+    await safeAdd('products_translations', { field: 'content', type: 'text', meta: { interface: 'input-rich-text-html' } });
+    await safeAdd('products_translations', { field: 'technical_items', type: 'json' });
+    await safeAdd('products_translations', { field: 'voltage_tables', type: 'json' });
+
+    await safeAdd('categories_translations', { field: 'name', type: 'string' });
+    await safeAdd('posts_translations', { field: 'title', type: 'string' });
+    await safeAdd('posts_translations', { field: 'slug', type: 'string' });
+    await safeAdd('posts_translations', { field: 'content', type: 'text' });
+
+    await safeAdd('globals', { field: 'company_name', type: 'string' });
+    await safeAdd('globals_translations', { field: 'tagline', type: 'string' });
+
+    // M2M Link
+    await safeAdd('categories_link', { field: 'products_id', type: 'integer' });
+    await safeAdd('categories_link', { field: 'categories_id', type: 'integer' });
+    try {
+        await client.request(createRelation({ collection: 'categories_link', field: 'products_id', related_collection: 'products', meta: { one_field: 'categories_link' } }));
+        await client.request(createRelation({ collection: 'categories_link', field: 'categories_id', related_collection: 'categories' }));
+    } catch (e) { }
+
+    // 5. Data Import
+    console.log('📥 Importing Data...');
+    const deDir = path.join(process.cwd(), 'data/products/de');
+    const files = fs.readdirSync(deDir).filter(f => f.endsWith('.mdx'));
+
+    for (const file of files) {
+        const doc = matter(fs.readFileSync(path.join(deDir, file), 'utf8'));
+        const enPath = path.join(process.cwd(), `data/products/en/${file}`);
+        const enDoc = fs.existsSync(enPath) ? matter(fs.readFileSync(enPath, 'utf8')) : doc;
+
+        const clean = (c: string) => c.replace(/<ProductTabs.*?>|<\/ProductTabs>|<ProductTechnicalData.*?\/>/gs, '').trim();
+        const extract = (c: string) => {
+            const m = c.match(/technicalData=\{<ProductTechnicalData data=\{(.*?)\}\s*\/>\}/s);
+            try { return m ? JSON.parse(m[1]) : {}; } catch (e) { return {}; }
+        };
+
+        try {
+            await client.request(createItem('products', {
+                sku: doc.data.sku,
+                image: assetMap[doc.data.images?.[0]] || null,
+                translations: [
+                    { languages_code: 'de-DE', name: doc.data.title, slug: file.replace('.mdx', ''), description: doc.data.description, content: clean(doc.content), technical_items: extract(doc.content).technicalItems, voltage_tables: extract(doc.content).voltageTables },
+                    { languages_code: 'en-US', name: enDoc.data.title, slug: file.replace('.mdx', ''), description: enDoc.data.description, content: clean(enDoc.content), technical_items: extract(enDoc.content).technicalItems, voltage_tables: extract(enDoc.content).voltageTables }
+                ]
+            }));
+            console.log(`✅ Product: ${doc.data.sku}`);
+        } catch (e: any) {
+            console.error(`❌ Product ${file}: ${e.message}`);
+        }
+    }
+
+    console.log('✨ DONE!');
+}
+
+run().catch(console.error);

scripts/migrate-to-strapi.ts

@@ -0,0 +1,64 @@
+import * as fs from 'fs';
+import * as path from 'path';
+import matter from 'gray-matter';
+import axios from 'axios';
+
+const STRAPI_URL = process.env.STRAPI_URL || 'http://localhost:1337';
+const STRAPI_TOKEN = process.env.STRAPI_ADMIN_TOKEN; // You'll need to generate this
+
+async function migrateProducts() {
+  const productsDir = path.join(process.cwd(), 'data/products');
+  const locales = ['de', 'en'];
+
+  for (const locale of locales) {
+    const localeDir = path.join(productsDir, locale);
+    if (!fs.existsSync(localeDir)) continue;
+
+    const files = fs.readdirSync(localeDir).filter(f => f.endsWith('.mdx'));
+
+    for (const file of files) {
+      const filePath = path.join(localeDir, file);
+      const fileContent = fs.readFileSync(filePath, 'utf8');
+      const { data, content } = matter(fileContent);
+
+      console.log(`Migrating ${data.title} (${locale})...`);
+
+      try {
+        // 1. Check if product exists (by SKU)
+        const existing = await axios.get(`${STRAPI_URL}/api/products?filters[sku][$eq]=${data.sku}&locale=${locale}`, {
+          headers: { Authorization: `Bearer ${STRAPI_TOKEN}` }
+        });
+
+        const productData = {
+          title: data.title,
+          sku: data.sku,
+          description: data.description,
+          application: data.application,
+          content: content,
+          technicalData: data.technicalData || {}, // This might need adjustment based on how it's stored in MDX
+          locale: locale,
+        };
+
+        if (existing.data.data.length > 0) {
+          // Update
+          const id = existing.data.data[0].id;
+          await axios.put(`${STRAPI_URL}/api/products/${id}`, { data: productData }, {
+            headers: { Authorization: `Bearer ${STRAPI_TOKEN}` }
+          });
+          console.log(`Updated ${data.title}`);
+        } else {
+          // Create
+          await axios.post(`${STRAPI_URL}/api/products`, { data: productData }, {
+            headers: { Authorization: `Bearer ${STRAPI_TOKEN}` }
+          });
+          console.log(`Created ${data.title}`);
+        }
+      } catch (error) {
+        console.error(`Error migrating ${data.title}:`, error.response?.data || error.message);
+      }
+    }
+  }
+}
+
+// Note: This script requires a running Strapi instance and an admin token.
+// migrateProducts();

scripts/optimize-directus.ts

@@ -0,0 +1,63 @@
+import client, { ensureAuthenticated } from '../lib/directus';
+import {
+    updateSettings,
+    updateCollection,
+    createItem,
+    updateItem
+} from '@directus/sdk';
+import fs from 'fs';
+import path from 'path';
+
+async function optimize() {
+    await ensureAuthenticated();
+
+    console.log('🎨 Fixing Branding...');
+    await client.request(updateSettings({
+        project_name: 'KLZ Cables',
+        public_note: '<div style="text-align: center;"><h1>Sustainable Energy.</h1><p>Industrial Reliability.</p></div>',
+        custom_css: 'body { font-family: Inter, sans-serif !important; } .public-view .v-card { border-radius: 20px !important; }'
+    }));
+
+    console.log('🔧 Fixing List Displays...');
+    const collections = ['products', 'categories', 'posts', 'pages'];
+    for (const collection of collections) {
+        try {
+            await (client as any).request(updateCollection(collection, {
+                meta: { display_template: '{{translations.name || translations.title}}' }
+            }));
+        } catch (e) {
+            console.error(`Failed to update ${collection}:`, e);
+        }
+    }
+
+    console.log('🏛️  Force-Syncing Globals...');
+    const de = JSON.parse(fs.readFileSync(path.join(process.cwd(), 'messages/de.json'), 'utf8'));
+    const en = JSON.parse(fs.readFileSync(path.join(process.cwd(), 'messages/en.json'), 'utf8'));
+
+    const payload = {
+        id: 1,
+        company_name: 'KLZ Cables GmbH',
+        email: 'info@klz-cables.com',
+        phone: '+49 711 1234567',
+        address: de.Contact.info.address,
+        opening_hours: `${de.Contact.hours.weekdays}: ${de.Contact.hours.weekdaysTime}`,
+        translations: [
+            { languages_code: 'en-US', tagline: en.Footer.tagline },
+            { languages_code: 'de-DE', tagline: de.Footer.tagline }
+        ]
+    };
+
+    try {
+        await client.request(createItem('globals', payload));
+    } catch (e) {
+        try {
+            await client.request(updateItem('globals', 1, payload));
+        } catch (err) {
+            console.error('Globals still failing:', (err as any).message);
+        }
+    }
+
+    console.log('✅ Optimization complete.');
+}
+
+optimize().catch(console.error);

scripts/pagespeed-sitemap.ts

@@ -0,0 +1,159 @@
+import axios from 'axios';
+import * as cheerio from 'cheerio';
+import { execSync } from 'child_process';
+import * as fs from 'fs';
+import * as path from 'path';
+
+/**
+ * PageSpeed Test Script
+ *
+ * 1. Fetches sitemap.xml from the target URL
+ * 2. Extracts all URLs
+ * 3. Runs Lighthouse CI on those URLs
+ */
+
+const targetUrl =
+  process.argv[2] || process.env.NEXT_PUBLIC_BASE_URL || 'https://testing.klz-cables.com';
+const limit = process.env.PAGESPEED_LIMIT ? parseInt(process.env.PAGESPEED_LIMIT) : 20; // Default limit to avoid infinite runs
+const gatekeeperPassword = process.env.GATEKEEPER_PASSWORD || 'klz2026';
+
+async function main() {
+  console.log(`\n🚀 Starting PageSpeed test for: ${targetUrl}`);
+  console.log(`📊 Limit: ${limit} pages\n`);
+
+  try {
+    // 1. Fetch Sitemap
+    const sitemapUrl = `${targetUrl.replace(/\/$/, '')}/sitemap.xml`;
+    console.log(`📥 Fetching sitemap from ${sitemapUrl}...`);
+
+    // We might need to bypass gatekeeper for the sitemap fetch too
+    const response = await axios.get(sitemapUrl, {
+      headers: {
+        Cookie: `klz_gatekeeper_session=${gatekeeperPassword}`,
+      },
+      validateStatus: (status) => status < 400,
+    });
+
+    const $ = cheerio.load(response.data, { xmlMode: true });
+    let urls = $('url loc')
+      .map((i, el) => $(el).text())
+      .get();
+
+    // Cleanup, filter and normalize domains to targetUrl
+    const urlPattern = /https?:\/\/[^\/]+/;
+    urls = [...new Set(urls)]
+      .filter((u) => u.startsWith('http'))
+      .map((u) => u.replace(urlPattern, targetUrl.replace(/\/$/, '')))
+      .sort();
+
+    console.log(`✅ Found ${urls.length} URLs in sitemap.`);
+
+    if (urls.length === 0) {
+      console.error('❌ No URLs found in sitemap. Is the site up?');
+      process.exit(1);
+    }
+
+    if (urls.length > limit) {
+      console.log(
+        `⚠️  Too many pages (${urls.length}). Limiting to ${limit} representative pages.`,
+      );
+      // Try to pick a variety: home, some products, some blog posts
+      const home = urls.filter((u) => u.endsWith('/de') || u.endsWith('/en') || u === targetUrl);
+      const others = urls.filter((u) => !home.includes(u));
+      urls = [...home, ...others.slice(0, limit - home.length)];
+    }
+
+    console.log(`🧪 Pages to be tested:`);
+    urls.forEach((u) => console.log(`   - ${u}`));
+
+    // 2. Prepare LHCI command
+    // We use --collect.url multiple times
+    const urlArgs = urls.map((u) => `--collect.url="${u}"`).join(' ');
+
+    // Handle authentication for staging/testing
+    // Lighthouse can set cookies via --collect.settings.extraHeaders
+    const extraHeaders = JSON.stringify({
+      Cookie: `klz_gatekeeper_session=${gatekeeperPassword}`,
+    });
+
+    const chromePath = process.env.CHROME_PATH || process.env.PUPPETEER_EXECUTABLE_PATH;
+    const chromePathArg = chromePath ? `--collect.chromePath="${chromePath}"` : '';
+
+    // Clean up old reports
+    if (fs.existsSync('.lighthouseci')) {
+      fs.rmSync('.lighthouseci', { recursive: true, force: true });
+    }
+
+    // Using a more robust way to execute and capture output
+    // We remove 'npx lhci upload' to keep everything local and avoid Google-hosted reports
+    const lhciCommand = `npx lhci collect ${urlArgs} ${chromePathArg} --collect.settings.chromeFlags='--no-sandbox --disable-setuid-sandbox' --collect.settings.extraHeaders='${extraHeaders}' && npx lhci assert`;
+
+    console.log(`💻 Executing LHCI...`);
+
+    try {
+      execSync(lhciCommand, {
+        encoding: 'utf8',
+        stdio: 'inherit',
+      });
+    } catch (err: any) {
+      console.warn('⚠️ LHCI assertion finished with warnings or errors.');
+      // We continue to show the table even if assertions failed
+    }
+
+    // 3. Summarize Results (Local & Independent)
+    const manifestPath = path.join(process.cwd(), '.lighthouseci', 'manifest.json');
+    if (fs.existsSync(manifestPath)) {
+      const manifest = JSON.parse(fs.readFileSync(manifestPath, 'utf8'));
+      console.log(`\n📊 PageSpeed Summary (FOSS - Local Report):\n`);
+
+      const summaryTable = manifest.map((entry: any) => {
+        const s = entry.summary;
+        return {
+          URL: entry.url.replace(targetUrl, ''),
+          Perf: Math.round(s.performance * 100),
+          Acc: Math.round(s.accessibility * 100),
+          BP: Math.round(s['best-practices'] * 100),
+          SEO: Math.round(s.seo * 100),
+        };
+      });
+
+      console.table(summaryTable);
+
+      // Calculate Average
+      const avg = {
+        Perf: Math.round(
+          summaryTable.reduce((acc: any, curr: any) => acc + curr.Perf, 0) / summaryTable.length,
+        ),
+        Acc: Math.round(
+          summaryTable.reduce((acc: any, curr: any) => acc + curr.Acc, 0) / summaryTable.length,
+        ),
+        BP: Math.round(
+          summaryTable.reduce((acc: any, curr: any) => acc + curr.BP, 0) / summaryTable.length,
+        ),
+        SEO: Math.round(
+          summaryTable.reduce((acc: any, curr: any) => acc + curr.SEO, 0) / summaryTable.length,
+        ),
+      };
+
+      console.log(`\n📈 Average Scores:`);
+      console.log(`   Performance:   ${avg.Perf > 90 ? '✅' : '⚠️'} ${avg.Perf}`);
+      console.log(`   Accessibility: ${avg.Acc > 90 ? '✅' : '⚠️'} ${avg.Acc}`);
+      console.log(`   Best Practices: ${avg.BP > 90 ? '✅' : '⚠️'} ${avg.BP}`);
+      console.log(`   SEO:           ${avg.SEO > 90 ? '✅' : '⚠️'} ${avg.SEO}`);
+    }
+
+    console.log(`\n✨ PageSpeed tests completed successfully!`);
+  } catch (error: any) {
+    console.error(`\n❌ Error during PageSpeed test:`);
+    if (axios.isAxiosError(error)) {
+      console.error(`Status: ${error.response?.status}`);
+      console.error(`StatusText: ${error.response?.statusText}`);
+      console.error(`URL: ${error.config?.url}`);
+    } else {
+      console.error(error.message);
+    }
+    process.exit(1);
+  }
+}
+
+main();

scripts/revert-and-clean.ts

@@ -0,0 +1,208 @@
+import client, { ensureAuthenticated } from '../lib/directus';
+import {
+    deleteCollection,
+    deleteFile,
+    readFiles,
+    updateSettings,
+    uploadFiles
+} from '@directus/sdk';
+import fs from 'fs';
+import path from 'path';
+import { fileURLToPath } from 'url';
+
+// Helper for ESM __dirname
+const __filename = fileURLToPath(import.meta.url);
+const __dirname = path.dirname(__filename);
+
+async function revertAndRestoreBranding() {
+    console.log('🚨 REVERTING EVERYTHING - RESTORING BRANDING ONLY 🚨');
+    await ensureAuthenticated();
+
+    // 1. DELETE ALL COLLECTIONS
+    const collectionsToDelete = [
+        'categories_link',
+        'categories_translations', 'categories',
+        'products_translations', 'products',
+        'posts_translations', 'posts',
+        'pages_translations', 'pages',
+        'globals_translations', 'globals'
+    ];
+
+    console.log('🗑️  Deleting custom collections...');
+    for (const col of collectionsToDelete) {
+        try {
+            await client.request(deleteCollection(col));
+            console.log(`✅ Deleted collection: ${col}`);
+        } catch (e: any) {
+            console.log(`ℹ️ Collection ${col} not found or already deleted.`);
+        }
+    }
+
+    // 2. DELETE ALL FILES
+    console.log('🗑️  Deleting ALL files...');
+    try {
+        const files = await client.request(readFiles({ limit: -1 }));
+        if (files && files.length > 0) {
+            const ids = files.map(f => f.id);
+            await client.request(deleteFile(ids)); // Batch delete if supported by SDK version, else loop
+            console.log(`✅ Deleted ${ids.length} files.`);
+        } else {
+            console.log('ℹ️ No files to delete.');
+        }
+    } catch (e: any) {
+        // Fallback to loop if batch fails
+        try {
+            const files = await client.request(readFiles({ limit: -1 }));
+            for (const f of files) {
+                await client.request(deleteFile(f.id));
+            }
+            console.log(`✅ Deleted files individually.`);
+        } catch (err) { }
+    }
+
+
+    // 3. RESTORE BRANDING (Exact copy of setup-directus-branding.ts logic)
+    console.log('🎨 Restoring Premium Branding...');
+    try {
+        const getMimeType = (filePath: string) => {
+            const ext = path.extname(filePath).toLowerCase();
+            switch (ext) {
+                case '.svg': return 'image/svg+xml';
+                case '.png': return 'image/png';
+                case '.jpg':
+                case '.jpeg': return 'image/jpeg';
+                case '.ico': return 'image/x-icon';
+                default: return 'application/octet-stream';
+            }
+        };
+
+        const uploadAsset = async (filePath: string, title: string) => {
+            if (!fs.existsSync(filePath)) {
+                console.warn(`⚠️ File not found: ${filePath}`);
+                return null;
+            }
+            const mimeType = getMimeType(filePath);
+            const form = new FormData();
+            const fileBuffer = fs.readFileSync(filePath);
+            const blob = new Blob([fileBuffer], { type: mimeType });
+            form.append('file', blob, path.basename(filePath));
+            form.append('title', title);
+            const res = await client.request(uploadFiles(form));
+            return res.id;
+        };
+
+        const logoWhiteId = await uploadAsset(path.resolve(__dirname, '../public/logo-white.svg'), 'Logo White');
+        const logoBlueId = await uploadAsset(path.resolve(__dirname, '../public/logo-blue.svg'), 'Logo Blue');
+        const faviconId = await uploadAsset(path.resolve(__dirname, '../public/favicon.ico'), 'Favicon');
+
+        // Smoother Background SVG
+        const bgSvgPath = path.resolve(__dirname, '../public/login-bg.svg');
+        fs.writeFileSync(bgSvgPath, `<svg width="1920" height="1080" viewBox="0 0 1920 1080" fill="none" xmlns="http://www.w3.org/2000/svg">
+<rect width="1920" height="1080" fill="#001a4d"/>
+<ellipse cx="960" cy="540" rx="800" ry="600" fill="url(#paint0_radial_premium)"/>
+<defs>
+<radialGradient id="paint0_radial_premium" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse" gradientTransform="translate(960 540) rotate(90) scale(600 800)">
+<stop stop-color="#003d82" stop-opacity="0.8"/>
+<stop offset="1" stop-color="#001a4d" stop-opacity="0"/>
+</radialGradient>
+</defs>
+</svg>`);
+        const backgroundId = await uploadAsset(bgSvgPath, 'Login Bg');
+        if (fs.existsSync(bgSvgPath)) fs.unlinkSync(bgSvgPath);
+
+        // Update Settings
+        const COLOR_PRIMARY = '#001a4d';
+        const COLOR_ACCENT = '#82ed20';
+        const COLOR_SECONDARY = '#003d82';
+
+        const cssInjection = `
+        <style>
+            @import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap');
+            
+            body, .v-app { 
+                font-family: 'Inter', sans-serif !important; 
+                -webkit-font-smoothing: antialiased;
+            }
+            
+            .public-view .v-card { 
+                background: rgba(255, 255, 255, 0.95) !important;
+                backdrop-filter: blur(20px);
+                border: 1px solid rgba(255, 255, 255, 0.3) !important;
+                border-radius: 32px !important; 
+                box-shadow: 0 50px 100px -20px rgba(0, 0, 0, 0.4) !important;
+                padding: 40px !important;
+            }
+
+            .public-view .v-button {
+                border-radius: 9999px !important;
+                height: 56px !important;
+                font-weight: 600 !important;
+                letter-spacing: -0.01em !important;
+                transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1) !important;
+            }
+
+            .public-view .v-button:hover {
+                transform: translateY(-2px);
+                box-shadow: 0 15px 30px rgba(130, 237, 32, 0.2) !important;
+            }
+
+            .public-view .v-input {
+                --v-input-border-radius: 12px !important;
+                --v-input-background-color: #f8f9fa !important;
+            }
+        </style>
+        <div style="font-family: 'Inter', sans-serif; text-align: center; margin-top: 24px;">
+            <p style="color: rgba(255,255,255,0.7); font-size: 14px; margin-bottom: 4px; font-weight: 500;">KLZ INFRASTRUCTURE ENGINE</p>
+            <h1 style="color: #ffffff; font-size: 18px; font-weight: 700; margin: 0;">Sustainable Energy. <span style="color: #82ed20;">Industrial Reliability.</span></h1>
+        </div>
+        `;
+
+        await client.request(updateSettings({
+            project_name: 'KLZ Cables',
+            project_url: 'https://klz-cables.com',
+            project_color: COLOR_ACCENT,
+            project_descriptor: 'Sustainable Energy Infrastructure',
+            project_owner: 'KLZ Cables',
+            project_logo: logoWhiteId as any,
+            public_foreground: logoWhiteId as any,
+            public_background: backgroundId as any,
+            public_note: cssInjection,
+            public_favicon: faviconId as any,
+            theme_light_overrides: {
+                "primary": COLOR_ACCENT,
+                "secondary": COLOR_SECONDARY,
+                "background": "#f1f3f7",
+                "backgroundNormal": "#ffffff",
+                "backgroundAccent": "#eef2ff",
+                "navigationBackground": COLOR_PRIMARY,
+                "navigationForeground": "#ffffff",
+                "navigationBackgroundHover": "rgba(255,255,255,0.05)",
+                "navigationForegroundHover": "#ffffff",
+                "navigationBackgroundActive": "rgba(130, 237, 32, 0.15)",
+                "navigationForegroundActive": COLOR_ACCENT,
+                "moduleBarBackground": "#000d26",
+                "moduleBarForeground": "#ffffff",
+                "moduleBarForegroundActive": COLOR_ACCENT,
+                "borderRadius": "16px",
+                "borderWidth": "1px",
+                "borderColor": "#e2e8f0",
+                "formFieldHeight": "48px"
+            } as any,
+            theme_dark_overrides: {
+                "primary": COLOR_ACCENT,
+                "background": "#0a0a0a",
+                "navigationBackground": "#000000",
+                "moduleBarBackground": COLOR_PRIMARY,
+                "borderRadius": "16px",
+                "formFieldHeight": "48px"
+            } as any
+        }));
+
+        console.log('✨ System Cleaned & Branding Restored Successfully');
+
+    } catch (error: any) {
+        console.error('❌ Error restoring branding:', JSON.stringify(error, null, 2));
+    }
+}
+
+revertAndRestoreBranding().catch(console.error);

scripts/setup-directus-branding.ts

@@ -0,0 +1,181 @@
+import client, { ensureAuthenticated } from '../lib/directus';
+import { updateSettings, uploadFiles } from '@directus/sdk';
+import fs from 'fs';
+import path from 'path';
+import { fileURLToPath } from 'url';
+
+// Helper for ESM __dirname
+const __filename = fileURLToPath(import.meta.url);
+const __dirname = path.dirname(__filename);
+
+async function setupBranding() {
+    console.log('🎨 Refining Directus Branding for Premium Website Look...');
+
+    // 1. Authenticate
+    await ensureAuthenticated();
+
+    try {
+        // 2. Upload Assets (MIME FIXED)
+        console.log('📤 Re-uploading assets for clean IDs...');
+
+        const getMimeType = (filePath: string) => {
+            const ext = path.extname(filePath).toLowerCase();
+            switch (ext) {
+                case '.svg': return 'image/svg+xml';
+                case '.png': return 'image/png';
+                case '.jpg':
+                case '.jpeg': return 'image/jpeg';
+                case '.ico': return 'image/x-icon';
+                default: return 'application/octet-stream';
+            }
+        };
+
+        const uploadAsset = async (filePath: string, title: string) => {
+            if (!fs.existsSync(filePath)) {
+                console.warn(`⚠️ File not found: ${filePath}`);
+                return null;
+            }
+            const mimeType = getMimeType(filePath);
+            const form = new FormData();
+            const fileBuffer = fs.readFileSync(filePath);
+            const blob = new Blob([fileBuffer], { type: mimeType });
+            form.append('file', blob, path.basename(filePath));
+            form.append('title', title);
+            const res = await client.request(uploadFiles(form));
+            return res.id;
+        };
+
+        const logoWhiteId = await uploadAsset(path.resolve(__dirname, '../public/logo-white.svg'), 'Logo White');
+        const logoBlueId = await uploadAsset(path.resolve(__dirname, '../public/logo-blue.svg'), 'Logo Blue');
+        const faviconId = await uploadAsset(path.resolve(__dirname, '../public/favicon.ico'), 'Favicon');
+
+        // Smoother Background SVG
+        const bgSvgPath = path.resolve(__dirname, '../public/login-bg.svg');
+        fs.writeFileSync(bgSvgPath, `<svg width="1920" height="1080" viewBox="0 0 1920 1080" fill="none" xmlns="http://www.w3.org/2000/svg">
+<rect width="1920" height="1080" fill="#001a4d"/>
+<ellipse cx="960" cy="540" rx="800" ry="600" fill="url(#paint0_radial_premium)"/>
+<defs>
+<radialGradient id="paint0_radial_premium" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse" gradientTransform="translate(960 540) rotate(90) scale(600 800)">
+<stop stop-color="#003d82" stop-opacity="0.8"/>
+<stop offset="1" stop-color="#001a4d" stop-opacity="0"/>
+</radialGradient>
+</defs>
+</svg>`);
+        const backgroundId = await uploadAsset(bgSvgPath, 'Login Bg');
+        if (fs.existsSync(bgSvgPath)) fs.unlinkSync(bgSvgPath);
+
+        // 3. Update Settings with "Premium Web" Theme
+        console.log('⚙️  Updating Directus settings...');
+
+        const COLOR_PRIMARY = '#001a4d'; // Deep Blue
+        const COLOR_ACCENT = '#82ed20'; // Sustainability Green
+        const COLOR_SECONDARY = '#003d82';
+
+        const cssInjection = `
+        <style>
+            @import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap');
+            
+            /* Global Login Styles */
+            body, .v-app { 
+                font-family: 'Inter', sans-serif !important; 
+                -webkit-font-smoothing: antialiased;
+            }
+            
+            /* Glassmorphism Effect for Login Card */
+            .public-view .v-card { 
+                background: rgba(255, 255, 255, 0.95) !important;
+                backdrop-filter: blur(20px);
+                border: 1px solid rgba(255, 255, 255, 0.3) !important;
+                border-radius: 32px !important; 
+                box-shadow: 0 50px 100px -20px rgba(0, 0, 0, 0.4) !important;
+                padding: 40px !important;
+            }
+
+            .public-view .v-button {
+                border-radius: full !important;
+                height: 56px !important;
+                font-weight: 600 !important;
+                letter-spacing: -0.01em !important;
+                transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1) !important;
+            }
+
+            .public-view .v-button:hover {
+                transform: translateY(-2px);
+                box-shadow: 0 15px 30px rgba(130, 237, 32, 0.2) !important;
+            }
+
+            .public-view .v-input {
+                --v-input-border-radius: 12px !important;
+                --v-input-background-color: #f8f9fa !important;
+            }
+        </style>
+        <div style="font-family: 'Inter', sans-serif; text-align: center; margin-top: 24px;">
+            <p style="color: rgba(255,255,255,0.7); font-size: 14px; margin-bottom: 4px; font-weight: 500;">KLZ INFRASTRUCTURE ENGINE</p>
+            <h1 style="color: #ffffff; font-size: 18px; font-weight: 700; margin: 0;">Sustainable Energy. <span style="color: #82ed20;">Industrial Reliability.</span></h1>
+        </div>
+        `;
+
+        await client.request(updateSettings({
+            project_name: 'KLZ Cables',
+            project_url: 'https://klz-cables.com',
+            project_color: COLOR_ACCENT,
+            project_descriptor: 'Sustainable Energy Infrastructure',
+            project_owner: 'KLZ Cables',
+
+            // FIXED: Use WHITE logo for the Blue Sidebar
+            project_logo: logoWhiteId as any,
+
+            public_foreground: logoWhiteId as any,
+            public_background: backgroundId as any,
+            public_note: cssInjection,
+            public_favicon: faviconId as any,
+
+            // DEEP PREMIUM THEME
+            theme_light_overrides: {
+                // Brands
+                "primary": COLOR_ACCENT, // Buttons/Actions are GREEN like the website
+                "secondary": COLOR_SECONDARY,
+
+                // Content Area
+                "background": "#f1f3f7",
+                "backgroundNormal": "#ffffff",
+                "backgroundAccent": "#eef2ff",
+
+                // Sidebar Branding
+                "navigationBackground": COLOR_PRIMARY,
+                "navigationForeground": "#ffffff",
+                "navigationBackgroundHover": "rgba(255,255,255,0.05)",
+                "navigationForegroundHover": "#ffffff",
+                "navigationBackgroundActive": "rgba(130, 237, 32, 0.15)", // Subtle Green highlight
+                "navigationForegroundActive": COLOR_ACCENT, // Active item is GREEN
+
+                // Module Bar (Thin far left)
+                "moduleBarBackground": "#000d26",
+                "moduleBarForeground": "#ffffff",
+                "moduleBarForegroundActive": COLOR_ACCENT,
+
+                // UI Standards
+                "borderRadius": "16px", // Larger radius for modern feel
+                "borderWidth": "1px",
+                "borderColor": "#e2e8f0",
+                "formFieldHeight": "48px" // Touch-target height
+            } as any,
+
+            theme_dark_overrides: {
+                "primary": COLOR_ACCENT,
+                "background": "#0a0a0a",
+                "navigationBackground": "#000000",
+                "moduleBarBackground": COLOR_PRIMARY,
+                "borderRadius": "16px",
+                "formFieldHeight": "48px"
+            } as any
+        }));
+
+        console.log('✨ Premium Theme applied successfully!');
+
+    } catch (error: any) {
+        console.error('❌ Error:', JSON.stringify(error, null, 2));
+    }
+}
+
+setupBranding();

scripts/strapi-sync.sh

@@ -0,0 +1,33 @@
+#!/bin/bash
+
+# Script to sync Strapi data between environments
+# Usage: ./scripts/strapi-sync.sh [export|import] [filename]
+
+COMMAND=$1
+FILENAME=$2
+
+if [ -z "$COMMAND" ]; then
+  echo "Usage: $0 [export|import] [filename]"
+  exit 1
+fi
+
+if [ "$COMMAND" == "export" ]; then
+  if [ -z "$FILENAME" ]; then
+    FILENAME="strapi-export-$(date +%Y%m%d%H%M%S).tar.gz"
+  fi
+  echo "Exporting Strapi data to $FILENAME..."
+  docker-compose exec cms npm run strapi export -- --no-encrypt -f "$FILENAME"
+  docker cp $(docker-compose ps -q cms):/opt/app/$FILENAME .
+  echo "Export complete: $FILENAME"
+fi
+
+if [ "$COMMAND" == "import" ]; then
+  if [ -z "$FILENAME" ]; then
+    echo "Please specify a filename to import"
+    exit 1
+  fi
+  echo "Importing Strapi data from $FILENAME..."
+  docker cp $FILENAME $(docker-compose ps -q cms):/opt/app/$FILENAME
+  docker-compose exec cms npm run strapi import -- -f "$FILENAME" --force
+  echo "Import complete"
+fi

scripts/sync-directus.sh

@@ -0,0 +1,120 @@
+#!/bin/bash
+
+# Configuration
+REMOTE_HOST="root@alpha.mintel.me"
+REMOTE_DIR="/home/deploy/sites/klz-cables.com"
+
+# DB Details (matching docker-compose defaults)
+DB_USER="directus"
+DB_NAME="directus"
+
+ACTION=$1
+ENV=$2
+
+# Help
+if [ -z "$ACTION" ] || [ -z "$ENV" ]; then
+    echo "Usage: ./scripts/sync-directus.sh [push|pull] [testing|staging|production]"
+    echo ""
+    echo "Commands:"
+    echo "  push   Sync LOCAL data -> REMOTE"
+    echo "  pull   Sync REMOTE data -> LOCAL"
+    echo ""
+    echo "Environments:"
+    echo "  testing, staging, production"
+    exit 1
+fi
+
+# Map Environment to Project Name
+case $ENV in
+  testing)
+    PROJECT_NAME="klz-cables-testing"
+    ENV_FILE=".env.testing"
+    ;;
+  staging)
+    PROJECT_NAME="klz-cables-staging"
+    ENV_FILE=".env.staging"
+    ;;
+  production)
+    PROJECT_NAME="klz-cables-prod"
+    ENV_FILE=".env.prod"
+    ;;
+  *)
+    echo "❌ Invalid environment: $ENV. Use testing, staging, or production."
+    exit 1
+    ;;
+esac
+
+# Detect local container
+echo "🔍 Detecting local database..."
+# Use a more robust way to find the container if multiple projects exist locally
+LOCAL_DB_CONTAINER=$(docker compose ps -q directus-db)
+if [ -z "$LOCAL_DB_CONTAINER" ]; then
+    echo "❌ Local directus-db container not found. Is it running? (npm run dev)"
+    exit 1
+fi
+
+if [ "$ACTION" == "push" ]; then
+    echo "🚀 Pushing Local Data to $ENV ($PROJECT_NAME)..."
+    
+    # 1. DB Dump
+    echo "📦 Dumping local database..."
+    docker exec "$LOCAL_DB_CONTAINER" pg_dump -U "$DB_USER" --clean --if-exists --no-owner --no-privileges "$DB_NAME" > dump.sql
+    
+    # 2. Upload Dump
+    echo "📤 Uploading dump to remote server..."
+    scp dump.sql "$REMOTE_HOST:$REMOTE_DIR/dump.sql"
+    
+    # 3. Restore on Remote
+    echo "🔄 Restoring dump on $ENV..."
+    REMOTE_DB_CONTAINER=$(ssh "$REMOTE_HOST" "cd $REMOTE_DIR && docker compose -p $PROJECT_NAME ps -q directus-db")
+    if [ -z "$REMOTE_DB_CONTAINER" ]; then
+        echo "❌ Remote $ENV-db container not found!"
+        exit 1
+    fi
+    ssh "$REMOTE_HOST" "docker exec -i $REMOTE_DB_CONTAINER psql -U $DB_USER $DB_NAME < $REMOTE_DIR/dump.sql"
+    
+    # 4. Sync Uploads
+    echo "📁 Syncing uploads (Local -> $ENV)..."
+    # Note: If environments share the same directory, this might overwrite others' files if not careful.
+    # But since they share the same host directory currently, rsync will update the shared folder.
+    rsync -avz --progress ./directus/uploads/ "$REMOTE_HOST:$REMOTE_DIR/directus/uploads/"
+    
+    # Clean up
+    rm dump.sql
+    ssh "$REMOTE_HOST" "rm $REMOTE_DIR/dump.sql"
+    
+    echo "✨ Push to $ENV complete!"
+
+elif [ "$ACTION" == "pull" ]; then
+    echo "📥 Pulling $ENV Data to Local..."
+    
+    # 1. DB Dump on Remote
+    echo "📦 Dumping remote database ($ENV)..."
+    REMOTE_DB_CONTAINER=$(ssh "$REMOTE_HOST" "cd $REMOTE_DIR && docker compose -p $PROJECT_NAME ps -q directus-db")
+    if [ -z "$REMOTE_DB_CONTAINER" ]; then
+        echo "❌ Remote $ENV-db container not found!"
+        exit 1
+    fi
+    ssh "$REMOTE_HOST" "docker exec $REMOTE_DB_CONTAINER pg_dump -U $DB_USER --clean --if-exists --no-owner --no-privileges $DB_NAME > $REMOTE_DIR/dump.sql"
+    
+    # 2. Download Dump
+    echo "📥 Downloading dump..."
+    scp "$REMOTE_HOST:$REMOTE_DIR/dump.sql" dump.sql
+    
+    # 3. Restore Locally
+    echo "🔄 Restoring dump locally..."
+    docker exec -i "$LOCAL_DB_CONTAINER" psql -U "$DB_USER" "$DB_NAME" < dump.sql
+    
+    # 4. Sync Uploads
+    echo "📁 Syncing uploads ($ENV -> Local)..."
+    rsync -avz --progress "$REMOTE_HOST:$REMOTE_DIR/directus/uploads/" ./directus/uploads/
+    
+    # Clean up
+    rm dump.sql
+    ssh "$REMOTE_HOST" "rm $REMOTE_DIR/dump.sql"
+    
+    echo "✨ Pull to Local complete!"
+else
+    echo "Invalid action: $ACTION. Use push or pull."
+    exit 1
+fi

scripts/update_ampacity.py

@@ -0,0 +1,59 @@
+import openpyxl
+
+def update_excel_ampacity(file_path, headers_row_idx, ampacity_cols_identifiers, target_cross_section="1x1200/35"):
+    print(f"Updating {file_path}...")
+    wb = openpyxl.load_workbook(file_path)
+    ws = wb.active
+    
+    # openpyxl is 1-indexed for rows and columns
+    headers = [cell.value for cell in ws[headers_row_idx]]
+    
+    # Identify column indices for ampacity (0-indexed locally for easier row access)
+    col_indices = []
+    for identifier in ampacity_cols_identifiers:
+        if isinstance(identifier, int):
+            col_indices.append(identifier)
+        else:
+            try:
+                # list.index returns 0-indexed position
+                col_indices.append(headers.index(identifier))
+            except ValueError:
+                print(f"Warning: Could not find column '{identifier}' in {file_path}")
+
+    # Find row index for "Number of cores and cross-section" or use index 8
+    cs_col_idx = 8
+    try:
+        cs_col_idx = headers.index("Number of cores and cross-section")
+    except ValueError:
+        pass
+
+    rows_updated = 0
+    # ws.iter_rows returns 1-indexed rows
+    for row in ws.iter_rows(min_row=headers_row_idx + 1):
+        # row is a tuple of cells, so row[cs_col_idx] is 0-indexed access to the tuple
+        if str(row[cs_col_idx].value).strip() == target_cross_section:
+            for col_idx in col_indices:
+                row[col_idx].value = "On Request"
+            rows_updated += 1
+            
+    wb.save(file_path)
+    print(f"Updated {rows_updated} rows in {file_path}")
+
+# File 1: medium-voltage-KM.xlsx
+update_excel_ampacity(
+    'data/excel/medium-voltage-KM.xlsx',
+    1, # Headers are in first row (1-indexed)
+    [
+        'Current ratings in air, trefoil*',
+        'Current ratings in air, flat*',
+        'Current ratings in ground, trefoil*',
+        'Current ratings in ground, flat*'
+    ]
+)
+
+# File 2: medium-voltage-KM 170126.xlsx
+update_excel_ampacity(
+    'data/excel/medium-voltage-KM 170126.xlsx',
+    1, # Indices 39 and 41 were from a 0-indexed JSON representation
+    [39, 41] 
+)

scripts/update_excel.py

@@ -0,0 +1,87 @@
+import openpyxl
+
+excel_path = 'data/excel/medium-voltage-KM.xlsx'
+wb = openpyxl.load_workbook(excel_path)
+ws = wb.active
+
+# Technical data for 1x1200RM/35
+new_rows_data = [
+    {
+        "Rated voltage": "6/10",
+        "Test voltage": 21,
+        "Nominal insulation thickness": 3.4,
+        "Diameter over insulation (approx.)": 48.5,
+        "Minimum sheath thickness": 2.1,
+        "Outer diameter (approx.)": 59,
+        "Bending radius (min.)": 885,
+        "Weight (approx.)": 4800,
+        "Capacitance (approx.)": 0.95,
+        "Inductance, trefoil (approx.)": 0.24,
+        "Inductance in air, flat (approx.)  1": 0.40,
+        "Inductance in ground, flat (approx.)  1": 0.42,
+    },
+    {
+        "Rated voltage": "12/20",
+        "Test voltage": 42,
+        "Nominal insulation thickness": 5.5,
+        "Diameter over insulation (approx.)": 52.3,
+        "Minimum sheath thickness": 2.1,
+        "Outer diameter (approx.)": 66,
+        "Bending radius (min.)": 990,
+        "Weight (approx.)": 5200,
+        "Capacitance (approx.)": 1.05,
+        "Inductance, trefoil (approx.)": 0.23,
+        "Inductance in air, flat (approx.)  1": 0.43,
+        "Inductance in ground, flat (approx.)  1": 0.45,
+    },
+    {
+        "Rated voltage": "18/30",
+        "Test voltage": 63,
+        "Nominal insulation thickness": 8.0,
+        "Diameter over insulation (approx.)": 57.5,
+        "Minimum sheath thickness": 2.4,
+        "Outer diameter (approx.)": 71,
+        "Bending radius (min.)": 1065,
+        "Weight (approx.)": 5900,
+        "Capacitance (approx.)": 1.15,
+        "Inductance, trefoil (approx.)": 0.22,
+        "Inductance in air, flat (approx.)  1": 0.45,
+        "Inductance in ground, flat (approx.)  1": 0.47,
+    }
+]
+
+# Find a template row for NA2XS(F)2Y
+template_row = None
+headers = [cell.value for cell in ws[1]]
+
+for row in ws.iter_rows(min_row=3, values_only=True):
+    if row[0] == 'NA2XS(F)2Y':
+        template_row = list(row)
+        break
+
+if not template_row:
+    print("Error: Could not find template row for NA2XS(F)2Y")
+    exit(1)
+
+# Function to update template with new values
+def create_row(template, updates, headers):
+    new_row = template[:]
+    # Change "Number of cores and cross-section"
+    cs_idx = headers.index("Number of cores and cross-section")
+    new_row[cs_idx] = "1x1200/35"
+    
+    # Apply specific updates
+    for key, value in updates.items():
+        if key in headers:
+            idx = headers.index(key)
+            new_row[idx] = value
+    return new_row
+
+# Append new rows
+for data in new_rows_data:
+    new_row_values = create_row(template_row, data, headers)
+    ws.append(new_row_values)
+    print(f"Added row for {data['Rated voltage']} kV")
+
+wb.save(excel_path)
+print("Excel file updated successfully.")

scripts/update_excel_v2.py

@@ -0,0 +1,120 @@
+import openpyxl
+
+excel_path = 'data/excel/medium-voltage-KM 170126.xlsx'
+wb = openpyxl.load_workbook(excel_path)
+ws = wb.active
+
+# Technical data for 1x1200RM/35
+# Indices based on Row 2 (Units) and Row 1
+# Index 0: Part Number
+# Index 8: Querschnitt
+# Index 9: Rated voltage
+# Index 10: Test voltage
+# Index 23: LD mm
+# Index 24: ID mm
+# Index 25: DI mm
+# Index 26: MWD mm
+# Index 27: AD mm
+# Index 28: BR
+# Index 29: G kg
+# Index 30: RI Ohm
+# Index 31: Cap
+# Index 32: Inductance trefoil
+# Index 35: BK
+# Index 39: SBL 30
+# Index 41: SBE 20
+
+new_rows_data = [
+    {
+        "voltage": "6/10",
+        "test_v": 21,
+        "ld": 41.5,
+        "id": 3.4,
+        "di": 48.5,
+        "mwd": 2.1,
+        "ad": 59,
+        "br": 885,
+        "g": 4800,
+        "ri": 0.0247,
+        "cap": 0.95,
+        "ind": 0.24,
+        "bk": 113,
+        "sbl": 1300,
+        "sbe": 933
+    },
+    {
+        "voltage": "12/20",
+        "test_v": 42,
+        "ld": 41.5,
+        "id": 5.5,
+        "di": 52.3,
+        "mwd": 2.1,
+        "ad": 66,
+        "br": 990,
+        "g": 5200,
+        "ri": 0.0247,
+        "cap": 1.05,
+        "ind": 0.23,
+        "bk": 113,
+        "sbl": 1200,
+        "sbe": 900
+    },
+    {
+        "voltage": "18/30",
+        "test_v": 63,
+        "ld": 41.5,
+        "id": 8.0,
+        "di": 57.5,
+        "mwd": 2.4,
+        "ad": 71,
+        "br": 1065,
+        "g": 5900,
+        "ri": 0.0247,
+        "cap": 1.15,
+        "ind": 0.22,
+        "bk": 113,
+        "sbl": 1300,
+        "sbe": 950
+    }
+]
+
+# Find a template row for NA2XS(F)2Y
+template_row = None
+for row in ws.iter_rows(min_row=3, values_only=True):
+    if row[0] == 'NA2XS(F)2Y' and row[9] == '6/10':
+        template_row = list(row)
+        break
+
+if not template_row:
+    print("Error: Could not find template row for NA2XS(F)2Y")
+    exit(1)
+
+# Function to update template with new values
+def create_row(template, data):
+    new_row = template[:]
+    new_row[8] = "1x1200/35"
+    new_row[9] = data["voltage"]
+    new_row[10] = data["test_v"]
+    new_row[23] = data["ld"]
+    new_row[24] = data["id"]
+    new_row[25] = data["di"]
+    new_row[26] = data["mwd"]
+    new_row[27] = data["ad"]
+    new_row[28] = data["br"]
+    new_row[29] = data["g"]
+    new_row[30] = data["ri"]
+    new_row[31] = data["cap"]
+    new_row[32] = data["ind"]
+    new_row[35] = data["bk"]
+    new_row[39] = data["sbl"]
+    new_row[41] = data["sbe"]
+    return new_row
+
+# Append new rows
+for data in new_rows_data:
+    new_row_values = create_row(template_row, data)
+    ws.append(new_row_values)
+    print(f"Added row for {data['voltage']} kV")
+
+wb.save(excel_path)
+print("Excel file updated successfully.")

styles/globals.css

@@ -1,7 +1,9 @@
-@import "tailwindcss";
+@import 'tailwindcss';
 
 @theme {
-  --font-sans: 'Inter', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
+  --font-sans:
+    'Inter', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue',
+    Arial, sans-serif;
   --font-heading: 'Inter', system-ui, sans-serif;
   --font-body: 'Inter', system-ui, sans-serif;
 
@@ -30,43 +32,82 @@
   --color-success: #10b981;
   --color-warning: #f59e0b;
   --color-danger: #ef4444;
+  --color-destructive: #ef4444;
+  --color-destructive-foreground: #ffffff;
   --color-info: #3b82f6;
 
   --animate-fade-in: fade-in 0.5s ease-out;
   --animate-slide-up: slide-up 0.6s ease-out;
   --animate-slow-zoom: slow-zoom 20s linear infinite;
   --animate-reveal: reveal 0.8s cubic-bezier(0.16, 1, 0.3, 1) forwards;
-  --animate-slight-fade-in-from-bottom: slight-fade-in-from-bottom 0.8s cubic-bezier(0.16, 1, 0.3, 1) forwards;
+  --animate-slight-fade-in-from-bottom: slight-fade-in-from-bottom 0.8s
+    cubic-bezier(0.16, 1, 0.3, 1) forwards;
   --animate-gradient-x: gradient-x 15s ease infinite;
 
   @keyframes gradient-x {
-    0%, 100% { background-position: 0% 50%; }
-    50% { background-position: 100% 50%; }
+    0%,
+    100% {
+      background-position: 0% 50%;
+    }
+    50% {
+      background-position: 100% 50%;
+    }
   }
   @keyframes fade-in {
-    from { opacity: 0; }
-    to { opacity: 1; }
+    from {
+      opacity: 0;
+    }
+    to {
+      opacity: 1;
+    }
   }
   @keyframes slide-up {
-    from { opacity: 0; transform: translateY(20px); }
-    to { opacity: 1; transform: translateY(0); }
+    from {
+      opacity: 0;
+      transform: translateY(20px);
+    }
+    to {
+      opacity: 1;
+      transform: translateY(0);
+    }
   }
   @keyframes slow-zoom {
-    from { transform: scale(1); }
-    to { transform: scale(1.1); }
+    from {
+      transform: scale(1);
+    }
+    to {
+      transform: scale(1.1);
+    }
   }
   @keyframes reveal {
-    from { opacity: 0; transform: translateY(20px); filter: blur(8px); }
-    to { opacity: 1; transform: translateY(0); filter: blur(0); }
+    from {
+      opacity: 0;
+      transform: translateY(20px);
+      filter: blur(8px);
+    }
+    to {
+      opacity: 1;
+      transform: translateY(0);
+      filter: blur(0);
+    }
   }
   @keyframes slight-fade-in-from-bottom {
-    from { opacity: 0; transform: translateY(10px); filter: blur(4px); }
-    to { opacity: 1; transform: translateY(0); filter: blur(0); }
+    from {
+      opacity: 0;
+      transform: translateY(10px);
+      filter: blur(4px);
+    }
+    to {
+      opacity: 1;
+      transform: translateY(0);
+      filter: blur(0);
+    }
   }
 }
 
 @layer base {
-  .bg-primary a, .bg-primary-dark a {
+  .bg-primary a,
+  .bg-primary-dark a {
     @apply text-white/90 hover:text-white transition-colors;
   }
   body {
@@ -76,63 +117,81 @@
     -moz-osx-font-smoothing: grayscale;
     line-height: 1.7;
   }
-  
-  h1, h2, h3, h4, h5, h6 {
+
+  h1,
+  h2,
+  h3,
+  h4,
+  h5,
+  h6 {
     @apply font-heading font-bold tracking-tight;
     line-height: 1.2;
   }
-  
+
   /* Enhanced Mobile-first typography hierarchy with fluid sizing */
-  h1 { @apply text-3xl md:text-5xl lg:text-6xl leading-[1.1]; }
-  h2 { @apply text-2xl md:text-4xl lg:text-5xl leading-[1.2]; }
-  h3 { @apply text-xl md:text-2xl lg:text-3xl leading-[1.3]; }
-  h4 { @apply text-lg md:text-xl lg:text-2xl leading-[1.4]; }
-  h5 { @apply text-base md:text-lg leading-[1.5]; }
-  h6 { @apply text-sm md:text-base leading-[1.6]; }
-  
+  h1 {
+    @apply text-3xl md:text-5xl lg:text-6xl leading-[1.1];
+  }
+  h2 {
+    @apply text-2xl md:text-4xl lg:text-5xl leading-[1.2];
+  }
+  h3 {
+    @apply text-xl md:text-2xl lg:text-3xl leading-[1.3];
+  }
+  h4 {
+    @apply text-lg md:text-xl lg:text-2xl leading-[1.4];
+  }
+  h5 {
+    @apply text-base md:text-lg leading-[1.5];
+  }
+  h6 {
+    @apply text-sm md:text-base leading-[1.6];
+  }
+
   /* Paragraph and text styles */
   p {
     @apply mb-4 leading-relaxed;
   }
-  
+
   /* Link styles */
   a {
     @apply no-underline transition-all duration-200;
   }
-  
+
   /* List styles */
-  ul, ol {
+  ul,
+  ol {
     @apply my-4 ml-6;
   }
-  
+
   li {
     @apply mb-2 leading-relaxed;
   }
-  
+
   /* Small text */
   small {
     @apply text-sm md:text-base;
   }
-  
+
   /* Strong and emphasis */
   strong {
     @apply font-bold;
   }
-  
+
   em {
     @apply italic;
   }
-  
+
   /* Blockquote */
   blockquote {
     @apply border-l-4 pl-6 my-6 italic;
   }
-  
+
   /* Code */
   code {
     @apply px-2 py-1 rounded font-mono text-sm;
   }
-  
+
   /* Horizontal rule */
   hr {
     @apply my-8;
@@ -177,7 +236,7 @@
     opacity 0.6s ease-out,
     transform 0.8s cubic-bezier(0.16, 1, 0.3, 1),
     filter 0.8s cubic-bezier(0.16, 1, 0.3, 1);
-  
+
   &.is-visible {
     opacity: 1;
     transform: translateY(0);

tests/og-image.test.ts

@@ -1,52 +1,74 @@
-import { describe, it, expect } from 'vitest';
+import { describe, it, expect, beforeAll } from 'vitest';
 
-const BASE_URL = process.env.TEST_URL || 'http://localhost:3000';
+const BASE_URL = process.env.TEST_URL || process.env.NEXT_PUBLIC_BASE_URL || 'http://localhost:3000';
 
 describe('OG Image Generation', () => {
   const locales = ['de', 'en'];
-  const productSlugs = ['nay2y']; // Based on data/products/de/nay2y.mdx
+  const productSlugs = ['nay2y'];
 
+  let isServerUp = false;
+
+  beforeAll(async () => {
+    try {
+      const response = await fetch(`${BASE_URL}/health`).catch(() => null);
+      if (response && response.ok) {
+        const text = await response.text();
+        if (text.includes('OK')) {
+          isServerUp = true;
+          return;
+        }
+      }
+      console.log(`\n⚠️  KLZ Application not detected at ${BASE_URL}. Skipping integration tests.\n`);
+    } catch (e) {
+      isServerUp = false;
+    }
+  });
   async function verifyImageResponse(response: Response) {
-    expect(response.status).toBe(200);
-    expect(response.headers.get('content-type')).toContain('image/png');
-    
+    expect(response.status, `Failed to fetch OG image: ${response.url}`).toBe(200);
+    const contentType = response.headers.get('content-type');
+    expect(contentType, `Incorrect content type: ${contentType}`).toContain('image/png');
+
     const buffer = await response.arrayBuffer();
     const bytes = new Uint8Array(buffer);
-    
+
     // Check for PNG signature: 89 50 4E 47 0D 0A 1A 0A
     expect(bytes[0]).toBe(0x89);
     expect(bytes[1]).toBe(0x50);
     expect(bytes[2]).toBe(0x4E);
     expect(bytes[3]).toBe(0x47);
-    
+
     // Check that the image is not empty and has a reasonable size
-    // A 1200x630 OG image should be at least 4KB
-    expect(bytes.length).toBeGreaterThan(4000);
+    expect(bytes.length, `Image size too small: ${bytes.length} bytes`).toBeGreaterThan(4000);
   }
 
   locales.forEach((locale) => {
-    it(`should generate main OG image for ${locale}`, async () => {
+    it(`should generate main OG image for ${locale}`, async ({ skip }) => {
+      if (!isServerUp) skip();
       const url = `${BASE_URL}/${locale}/opengraph-image`;
       const response = await fetch(url);
       await verifyImageResponse(response);
     }, 30000);
 
-    it(`should generate product OG image for ${locale} with slug ${productSlugs[0]}`, async () => {
+    it(`should generate product OG image for ${locale} with slug ${productSlugs[0]}`, async ({ skip }) => {
+      if (!isServerUp) skip();
       const url = `${BASE_URL}/${locale}/api/og/product?slug=${productSlugs[0]}`;
       const response = await fetch(url);
       await verifyImageResponse(response);
     }, 30000);
 
-    it(`should return 400 for product OG image without slug in ${locale}`, async () => {
+    it(`should return 400 for product OG image without slug in ${locale}`, async ({ skip }) => {
+      if (!isServerUp) skip();
       const url = `${BASE_URL}/${locale}/api/og/product`;
       const response = await fetch(url);
       expect(response.status).toBe(400);
     }, 30000);
   });
 
-  it('should generate blog OG image', async () => {
+  it('should generate blog OG image', async ({ skip }) => {
+    if (!isServerUp) skip();
     const url = `${BASE_URL}/de/blog/opengraph-image`;
     const response = await fetch(url);
     await verifyImageResponse(response);
   }, 30000);
 });
+