refactor: enforce 'v' prefix for version tags in deploy workflow triggers and logic.

- Exposed Directus port 8055 for local health checks and scripting
- Added scripts to fix admin token and manually create missing collections
- Verified all service health checks are passing

.env

@@ -1,10 +1,12 @@
 # Application
 NODE_ENV=production
 NEXT_PUBLIC_BASE_URL=https://klz-cables.com
+UMAMI_WEBSITE_ID=e4a2cd1c-59fb-4e5b-bac5-9dfd1d02dd81
 UMAMI_API_ENDPOINT=https://analytics.infra.mintel.me
 SENTRY_DSN=https://c10957d0182245b1a2a806ac2d34a197@errors.infra.mintel.me/1
 LOG_LEVEL=info
-NEXT_PUBLIC_FEEDBACK_ENABLED=true
+NEXT_PUBLIC_FEEDBACK_ENABLED=false
+NEXT_PUBLIC_RECORD_MODE_ENABLED=false
 
 # SMTP Configuration
 MAIL_HOST=smtp.eu.mailgun.org
@@ -15,14 +17,15 @@ 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_URL=http://klz-cms:8055
 DIRECTUS_KEY=59fb8f4c1a51b18fe28ad947f713914e
 DIRECTUS_SECRET=7459038d41401dfb11254cf7f1ef2d0f
 DIRECTUS_ADMIN_EMAIL=marc@mintel.me
 DIRECTUS_ADMIN_PASSWORD=Tim300493.
 DIRECTUS_API_TOKEN=59fb8f4c1a51b18fe28ad947f713914e
 DIRECTUS_DB_NAME=directus
-DIRECTUS_DB_USER=directus
+DIRECTUS_DB_USER=klz_db_user
+DIRECTUS_DB_PASSWORD=klz_db_pass
 # Local Development
 PROJECT_NAME=klz-cables
 GATEKEEPER_BYPASS_ENABLED=true
@@ -32,3 +35,4 @@ GATEKEEPER_PASSWORD=klz2026
 COOKIE_DOMAIN=localhost
 INFRA_DIRECTUS_URL=http://localhost:8059
 INFRA_DIRECTUS_TOKEN=59fb8f4c1a51b18fe28ad947f713914e
+GATEKEEPER_ORIGIN=http://klz.localhost

.env.example

@@ -15,6 +15,7 @@ DIRECTUS_PORT=8055
 # NEXT_PUBLIC_TARGET makes this information available to the frontend
 TARGET=development
 NEXT_PUBLIC_FEEDBACK_ENABLED=false
+NEXT_PUBLIC_RECORD_MODE_ENABLED=true
 
 # ────────────────────────────────────────────────────────────────────────────
 # Analytics (Umami)

.gitea/workflows/ci.yml

@@ -1,9 +1,6 @@
 name: CI - Lint, Typecheck & Test
 
 on:
-  push:
-    branches-ignore:
-      - main
   pull_request:
 
 jobs:
@@ -17,16 +14,23 @@ jobs:
         uses: actions/setup-node@v4
         with:
           node-version: 20
-          cache: 'npm'
+
+      - name: Setup pnpm
+        uses: pnpm/action-setup@v3
+        with:
+          version: 10
+          run_install: false
+
+      - name: 🔐 Configure Private Registry
+        run: |
+          REGISTRY="${{ vars.REGISTRY_HOST || 'npm.infra.mintel.me' }}"
+          echo "@mintel:registry=https://$REGISTRY" > .npmrc
+          echo "//$REGISTRY/:_authToken=${{ secrets.REGISTRY_PASS }}" >> .npmrc
 
       - name: Install dependencies
-        run: npm ci
+        run: pnpm install
+        env:
+          NPM_TOKEN: ${{ secrets.REGISTRY_PASS }}
 
-      - name: 🔍 Lint
-        run: npm run lint
-
-      - name: 🏗️ Typecheck
-        run: npm run typecheck
-
-      - name: 🧪 Test
-        run: npm run test
+      - name: 🧪 QA Checks
+        run: pnpm lint && pnpm typecheck && pnpm test

.gitea/workflows/deploy.yml

@@ -1,45 +1,39 @@
-name: Build & Deploy KLZ Cables
+name: Build & Deploy
 
 on:
   push:
     branches:
-      - main
+      - '**'
     tags:
       - 'v*'
   workflow_dispatch:
     inputs:
-      skip_long_checks:
+      skip_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') }}
+  group: ${{ github.workflow }}-${{ (github.ref_type == 'tag' && !contains(github.ref_name, '-')) && 'prod' || (github.ref_name == 'main' && 'testing' || github.ref_name) }}
   cancel-in-progress: true
 
 jobs:
   # ──────────────────────────────────────────────────────────────────────────────
-  # JOB 1: Prepare & Determine Environment
+  # JOB 1: Prepare Environment
   # ──────────────────────────────────────────────────────────────────────────────
   prepare:
-    name: 🔍 Prepare Environment
+    name: 🔍 Prepare
     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 }}
-      traefik_host_rule: ${{ steps.determine.outputs.traefik_host_rule }}
-      primary_host:     ${{ steps.determine.outputs.primary_host }}
-      next_public_base_url: ${{ steps.determine.outputs.next_public_base_url }}
+      traefik_rule:     ${{ steps.determine.outputs.traefik_rule }}
+      next_public_url:  ${{ steps.determine.outputs.next_public_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:
@@ -55,75 +49,46 @@ jobs:
         with:
           fetch-depth: 2
 
-
-      - name: 🔍 Environment & Version ermitteln
+      - name: 🔍 Environment ermitteln
         id: determine
         shell: bash
         run: |
-          TAG="${{ github.ref_name }}"
-          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")
+          REF="${{ github.ref_name }}"
+          SHORT_SHA=$(echo "${{ github.sha }}" | cut -c1-7)
+          DOMAIN="klz-cables.com"
+          PRJ="klz"
 
-          if [[ "${{ github.ref_type }}" == "branch" && "$TAG" == "main" ]]; then
-            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
+          if [[ "${{ github.ref_type }}" == "branch" && "$REF" == "main" ]]; then
+            TARGET="testing"
+            IMAGE_TAG="main-${SHORT_SHA}"
+            ENV_FILE=".env.testing"
+            TRAEFIK_HOST="testing.${DOMAIN}"
           elif [[ "${{ github.ref_type }}" == "tag" ]]; then
-            if [[ "$TAG" =~ ^v[0-9]+\.[0-9]+\.[0-9]+$ ]]; then
+            if [[ "$REF" =~ ^v[0-9]+\.[0-9]+\.[0-9]+$ ]]; then
               TARGET="production"
-              IMAGE_TAG="$TAG"
+              IMAGE_TAG="$REF"
               ENV_FILE=".env.prod"
-              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
-              TARGET="staging"
-              IMAGE_TAG="$TAG"
-              ENV_FILE=".env.staging"
-              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
+              TRAEFIK_HOST="${DOMAIN}, www.${DOMAIN}"
             else
-              TARGET="skip"
-              GOTIFY_TITLE="❓ Unbekannter Tag"
-              GOTIFY_PRIORITY=3
+              TARGET="staging"
+              IMAGE_TAG="$REF"
+              ENV_FILE=".env.staging"
+              TRAEFIK_HOST="staging.${DOMAIN}"
             fi
           else
-            TARGET="skip"
+            TARGET="branch"
+            SLUG=$(echo "$REF" | tr '[:upper:]' '[:lower:]' | sed 's/[^a-z0-9]/-/g' | sed 's/--*/-/g' | sed 's/^-//;s/-$//')
+            IMAGE_TAG="branch-${SLUG}-${SHORT_SHA}"
+            ENV_FILE=".env.branch-${SLUG}"
+            TRAEFIK_HOST="${SLUG}.branch.mintel.me"
           fi
 
+          # Standardize Traefik Rule
           if [[ "$TRAEFIK_HOST" == *","* ]]; then
-            # Multi-domain: Host(`a.com`) || Host(`b.com`)
-            TRAEFIK_HOST_RULE=$(echo "$TRAEFIK_HOST" | sed 's/,/ /g' | awk '{for(i=1;i<=NF;i++) printf "Host(`%s`)%s", $i, (i==NF?"":" || ")}')
+            TRAEFIK_RULE=$(echo "$TRAEFIK_HOST" | sed 's/,/ /g' | awk '{for(i=1;i<=NF;i++) printf "Host(\"%s\")%s", $i, (i==NF?"":" || ")}')
             PRIMARY_HOST=$(echo "$TRAEFIK_HOST" | cut -d',' -f1 | sed 's/ //g')
           else
-            # Single domain: Host(`domain.com`)
-            TRAEFIK_HOST_RULE="Host(\`$TRAEFIK_HOST\`)"
+            TRAEFIK_RULE="Host(\"$TRAEFIK_HOST\")"
             PRIMARY_HOST="$TRAEFIK_HOST"
           fi
 
@@ -131,25 +96,56 @@ jobs:
             echo "target=$TARGET"
             echo "image_tag=$IMAGE_TAG"
             echo "env_file=$ENV_FILE"
-            echo "traefik_host=$TRAEFIK_HOST"
-            echo "traefik_host_rule=$TRAEFIK_HOST_RULE"
-            echo "primary_host=$PRIMARY_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 "traefik_host=$PRIMARY_HOST"
+            echo "traefik_rule=$TRAEFIK_RULE"
+            echo "next_public_url=https://$PRIMARY_HOST"
+            echo "directus_url=https://cms.$PRIMARY_HOST"
+            if [[ "$TARGET" == "production" ]]; then
+              echo "project_name=klz-cablescom"
+            else
+              echo "project_name=$PRJ-$TARGET"
+            fi
             echo "short_sha=$SHORT_SHA"
-            echo "commit_msg=$COMMIT_MSG"
           } >> "$GITHUB_OUTPUT"
 
+          # ⏳ Wait for Upstream Packages/Images if Tagged
+          if [[ "${{ github.ref_type }}" == "tag" ]]; then
+            echo "🔎 Checking for @mintel dependencies in package.json..."
+            # Extract any @mintel/ version (they should be synced in monorepo)
+            UPSTREAM_VERSION=$(grep -o '"@mintel/.*": "[^"]*"' package.json | grep -v "next-utils" | cut -d'"' -f4 | sed 's/\^//; s/\~//' | sort -V | tail -1)
+            TAG_TO_WAIT="v$UPSTREAM_VERSION"
+            
+            if [[ -n "$UPSTREAM_VERSION" && "$UPSTREAM_VERSION" != "workspace:"* ]]; then
+              # 1. Discovery (Works without token for public repositories)
+              UPSTREAM_SHA=$(git ls-remote --tags https://git.infra.mintel.me/mmintel/at-mintel.git "$TAG_TO_WAIT" | grep "$TAG_TO_WAIT" | tail -n1 | awk '{print $1}')
+              
+              if [[ -z "$UPSTREAM_SHA" ]]; then
+                echo "❌ Error: Tag $TAG_TO_WAIT not found in mmintel/at-mintel."
+                exit 1
+              fi
+              echo "✅ Tag verified: Found upstream SHA $UPSTREAM_SHA for $TAG_TO_WAIT"
+
+              # 2. Status Check (Requires GITEA_PAT for cross-repo API access)
+              POLL_TOKEN="${{ secrets.GITEA_PAT || secrets.MINTEL_PRIVATE_TOKEN }}"
+              
+              if [[ -n "$POLL_TOKEN" ]]; then
+                echo "⏳ GITEA_PAT found. Checking upstream build status..."
+                curl -s -H "Authorization: token ${{ secrets.GITHUB_TOKEN }}" \
+                  "https://git.infra.mintel.me/mmintel/at-mintel/raw/branch/main/packages/infra/scripts/wait-for-upstream.sh" > wait-for-upstream.sh
+                chmod +x wait-for-upstream.sh
+                GITEA_TOKEN="$POLL_TOKEN" ./wait-for-upstream.sh "mmintel/at-mintel" "$TAG_TO_WAIT"
+              else
+                echo "ℹ️ No GITEA_PAT secret found. Skipping build status wait (Actions API is restricted)."
+                echo "   If this build fails, ensure that mmintel/at-mintel $TAG_TO_WAIT has finished its Docker build."
+              fi
+            fi
+          fi
+
   # ──────────────────────────────────────────────────────────────────────────────
-  # JOB 2: Quality Assurance (Lint & Test)
+  # JOB 2: QA (Lint, Typecheck, Test)
   # ──────────────────────────────────────────────────────────────────────────────
   qa:
-    name: 🧪 Quality Assurance
+    name: 🧪 QA
     needs: prepare
     if: needs.prepare.outputs.target != 'skip'
     runs-on: docker
@@ -158,369 +154,275 @@ jobs:
     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'
+      - name: Setup pnpm
+        uses: pnpm/action-setup@v3
+        with:
+          version: 10
+      - name: 🔐 Registry Auth
         run: |
-          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
+          echo "@mintel:registry=https://${{ vars.REGISTRY_HOST || 'npm.infra.mintel.me' }}" > .npmrc
+          echo "//${{ vars.REGISTRY_HOST || 'npm.infra.mintel.me' }}/:_authToken=${{ secrets.REGISTRY_PASS }}" >> .npmrc
+      - name: Install dependencies
+        run: pnpm install --frozen-lockfile
+      - name: 🧪 QA Checks
+        if: github.event.inputs.skip_checks != 'true'
+        run: |
+          pnpm lint
+          pnpm typecheck
+          pnpm test
 
   # ──────────────────────────────────────────────────────────────────────────────
-  # JOB 3: Build & Push Docker Image
+  # JOB 3: Build & Push
   # ──────────────────────────────────────────────────────────────────────────────
-  build-app:
-    name: 🏗️ Build App
-    needs: prepare
-    if: ${{ needs.prepare.outputs.target != 'skip' }}
+  build:
+    name: 🏗️ Build
+    needs: [prepare, qa]
+    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
-
       - name: 🔐 Registry Login
-        run: |
-          echo "${{ secrets.REGISTRY_PASS }}" | docker login registry.infra.mintel.me -u "${{ secrets.REGISTRY_USER }}" --password-stdin
-
-      - name: 🏗️ App bauen & pushen
-        env:
-          IMAGE_TAG: ${{ needs.prepare.outputs.image_tag }}
-          TARGET:    ${{ needs.prepare.outputs.target }}
-          NEXT_PUBLIC_BASE_URL:          ${{ needs.prepare.outputs.next_public_base_url }}
-          DIRECTUS_URL:                  ${{ needs.prepare.outputs.directus_url }}
-        run: |
-          docker buildx build \
-            --pull \
-            --platform linux/arm64 \
-            --build-arg NEXT_PUBLIC_BASE_URL="$NEXT_PUBLIC_BASE_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 .
+        run: echo "${{ secrets.REGISTRY_PASS }}" | docker login registry.infra.mintel.me -u "${{ secrets.REGISTRY_USER }}" --password-stdin
+      - name: 🏗️ Build and Push
+        uses: docker/build-push-action@v5
+        with:
+          context: .
+          push: true
+          platforms: linux/arm64
+          build-args: |
+            NEXT_PUBLIC_BASE_URL=${{ needs.prepare.outputs.next_public_url }}
+            NEXT_PUBLIC_TARGET=${{ needs.prepare.outputs.target }}
+            DIRECTUS_URL=${{ needs.prepare.outputs.directus_url }}
+            UMAMI_WEBSITE_ID=${{ secrets.UMAMI_WEBSITE_ID || vars.UMAMI_WEBSITE_ID }}
+            UMAMI_API_ENDPOINT=${{ secrets.UMAMI_API_ENDPOINT || vars.UMAMI_API_ENDPOINT || 'https://analytics.infra.mintel.me' }}
+            NPM_TOKEN=${{ secrets.REGISTRY_PASS }}
+          tags: registry.infra.mintel.me/mintel/klz-cables.com:${{ needs.prepare.outputs.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
+          secrets: |
+            "NPM_TOKEN=${{ secrets.REGISTRY_PASS }}"
 
   # ──────────────────────────────────────────────────────────────────────────────
-  # JOB 4: Deploy via SSH
+  # JOB 4: Deploy
   # ──────────────────────────────────────────────────────────────────────────────
   deploy:
     name: 🚀 Deploy
-    needs: [prepare, build-app, qa]
-    if: ${{ needs.prepare.outputs.target != 'skip' }}
+    needs: [prepare, build, qa]
     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.primary_host }}
-      NEXT_PUBLIC_BASE_URL:          ${{ needs.prepare.outputs.next_public_base_url }}
-      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) }}
-      UMAMI_API_ENDPOINT:  ${{ 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 }}
-      MAIL_HOST:                     ${{ secrets.MAIL_HOST || vars.MAIL_HOST || (needs.prepare.outputs.target == 'production' && (secrets.MAIL_HOST || vars.MAIL_HOST) || (needs.prepare.outputs.target == 'staging' && (secrets.STAGING_MAIL_HOST || vars.STAGING_MAIL_HOST) || (secrets.TESTING_MAIL_HOST || vars.TESTING_MAIL_HOST) || (secrets.MAIL_HOST || vars.MAIL_HOST))) }}
-      MAIL_PORT:                     ${{ secrets.MAIL_PORT || vars.MAIL_PORT || (needs.prepare.outputs.target == 'production' && (secrets.MAIL_PORT || vars.MAIL_PORT) || (needs.prepare.outputs.target == 'staging' && (secrets.STAGING_MAIL_PORT || vars.STAGING_MAIL_PORT) || (secrets.TESTING_MAIL_PORT || vars.TESTING_MAIL_PORT) || (secrets.MAIL_PORT || vars.MAIL_PORT))) }}
-      MAIL_USERNAME:                 ${{ secrets.MAIL_USERNAME || vars.MAIL_USERNAME || (needs.prepare.outputs.target == 'production' && (secrets.MAIL_USERNAME || vars.MAIL_USERNAME) || (needs.prepare.outputs.target == 'staging' && (secrets.STAGING_MAIL_USERNAME || vars.STAGING_MAIL_USERNAME) || (secrets.TESTING_MAIL_USERNAME || vars.TESTING_MAIL_USERNAME) || (secrets.MAIL_USERNAME || vars.MAIL_USERNAME))) }}
-      MAIL_PASSWORD:                 ${{ secrets.MAIL_PASSWORD || (needs.prepare.outputs.target == 'production' && secrets.MAIL_PASSWORD || (needs.prepare.outputs.target == 'staging' && secrets.STAGING_MAIL_PASSWORD || secrets.TESTING_MAIL_PASSWORD || secrets.MAIL_PASSWORD)) }}
-      MAIL_FROM:                     ${{ secrets.MAIL_FROM || vars.MAIL_FROM || (needs.prepare.outputs.target == 'production' && (secrets.MAIL_FROM || vars.MAIL_FROM) || (needs.prepare.outputs.target == 'staging' && (secrets.STAGING_MAIL_FROM || vars.STAGING_MAIL_FROM) || (secrets.TESTING_MAIL_FROM || vars.TESTING_MAIL_FROM) || (secrets.MAIL_FROM || vars.MAIL_FROM))) }}
-      MAIL_RECIPIENTS:               ${{ secrets.MAIL_RECIPIENTS || vars.MAIL_RECIPIENTS || (needs.prepare.outputs.target == 'production' && (secrets.MAIL_RECIPIENTS || vars.MAIL_RECIPIENTS) || (needs.prepare.outputs.target == 'staging' && (secrets.STAGING_MAIL_RECIPIENTS || vars.STAGING_MAIL_RECIPIENTS) || (secrets.TESTING_MAIL_RECIPIENTS || vars.TESTING_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 || (needs.prepare.outputs.target == 'production' && secrets.DIRECTUS_KEY || (needs.prepare.outputs.target == 'staging' && secrets.STAGING_DIRECTUS_KEY || secrets.TESTING_DIRECTUS_KEY || secrets.DIRECTUS_KEY)) }}
-      DIRECTUS_SECRET:               ${{ secrets.DIRECTUS_SECRET || (needs.prepare.outputs.target == 'production' && secrets.DIRECTUS_SECRET || (needs.prepare.outputs.target == 'staging' && secrets.STAGING_DIRECTUS_SECRET || secrets.TESTING_DIRECTUS_SECRET || secrets.DIRECTUS_SECRET)) }}
-      DIRECTUS_ADMIN_EMAIL:          ${{ secrets.DIRECTUS_ADMIN_EMAIL || (needs.prepare.outputs.target == 'production' && secrets.DIRECTUS_ADMIN_EMAIL || (needs.prepare.outputs.target == 'staging' && secrets.STAGING_DIRECTUS_ADMIN_EMAIL || secrets.TESTING_DIRECTUS_ADMIN_EMAIL || secrets.DIRECTUS_ADMIN_EMAIL)) }}
-      DIRECTUS_ADMIN_PASSWORD:       ${{ secrets.DIRECTUS_ADMIN_PASSWORD || (needs.prepare.outputs.target == 'production' && secrets.DIRECTUS_ADMIN_PASSWORD || (needs.prepare.outputs.target == 'staging' && secrets.STAGING_DIRECTUS_ADMIN_PASSWORD || secrets.TESTING_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 || (needs.prepare.outputs.target == 'production' && secrets.DIRECTUS_DB_PASSWORD || (needs.prepare.outputs.target == 'staging' && secrets.STAGING_DIRECTUS_DB_PASSWORD || secrets.TESTING_DIRECTUS_DB_PASSWORD || secrets.DIRECTUS_DB_PASSWORD)) }}
-      DIRECTUS_API_TOKEN:            ${{ secrets.DIRECTUS_API_TOKEN || (needs.prepare.outputs.target == 'production' && secrets.DIRECTUS_API_TOKEN || (needs.prepare.outputs.target == 'staging' && secrets.STAGING_DIRECTUS_API_TOKEN || secrets.TESTING_DIRECTUS_API_TOKEN || secrets.DIRECTUS_API_TOKEN)) }}
-      GATEKEEPER_PASSWORD:           ${{ secrets.GATEKEEPER_PASSWORD || 'klz2026' }}
+      PROJECT_NAME:         ${{ needs.prepare.outputs.project_name }}
+      NEXT_PUBLIC_BASE_URL: ${{ needs.prepare.outputs.next_public_url }}
+      DIRECTUS_URL:         ${{ needs.prepare.outputs.directus_url }}
+      DIRECTUS_HOST:        cms.${{ needs.prepare.outputs.traefik_host }}
+      TRAEFIK_HOST:         ${{ needs.prepare.outputs.traefik_host }}
+      
+      # Secrets mapping (Directus)
+      DIRECTUS_KEY:            ${{ (needs.prepare.outputs.target == 'testing' && secrets.TESTING_DIRECTUS_KEY) || (needs.prepare.outputs.target == 'staging' && secrets.STAGING_DIRECTUS_KEY) || secrets.DIRECTUS_KEY || vars.DIRECTUS_KEY }}
+      DIRECTUS_SECRET:         ${{ (needs.prepare.outputs.target == 'testing' && secrets.TESTING_DIRECTUS_SECRET) || (needs.prepare.outputs.target == 'staging' && secrets.STAGING_DIRECTUS_SECRET) || secrets.DIRECTUS_SECRET || vars.DIRECTUS_SECRET }}
+      DIRECTUS_ADMIN_EMAIL:    ${{ (needs.prepare.outputs.target == 'testing' && secrets.TESTING_DIRECTUS_ADMIN_EMAIL) || (needs.prepare.outputs.target == 'staging' && secrets.STAGING_DIRECTUS_ADMIN_EMAIL) || secrets.DIRECTUS_ADMIN_EMAIL || vars.DIRECTUS_ADMIN_EMAIL || 'admin@mintel.me' }}
+      DIRECTUS_ADMIN_PASSWORD: ${{ (needs.prepare.outputs.target == 'testing' && secrets.TESTING_DIRECTUS_ADMIN_PASSWORD) || (needs.prepare.outputs.target == 'staging' && secrets.STAGING_DIRECTUS_ADMIN_PASSWORD) || secrets.DIRECTUS_ADMIN_PASSWORD || vars.DIRECTUS_ADMIN_PASSWORD }}
+      DIRECTUS_DB_NAME:        ${{ secrets.DIRECTUS_DB_NAME || vars.DIRECTUS_DB_NAME || 'directus' }}
+      DIRECTUS_DB_USER:        ${{ secrets.DIRECTUS_DB_USER || vars.DIRECTUS_DB_USER || 'directus' }}
+      DIRECTUS_DB_PASSWORD:    ${{ (needs.prepare.outputs.target == 'testing' && secrets.TESTING_DIRECTUS_DB_PASSWORD) || (needs.prepare.outputs.target == 'staging' && secrets.STAGING_DIRECTUS_DB_PASSWORD) || secrets.DIRECTUS_DB_PASSWORD || vars.DIRECTUS_DB_PASSWORD || 'directus' }}
+      DIRECTUS_API_TOKEN:      ${{ (needs.prepare.outputs.target == 'testing' && secrets.TESTING_DIRECTUS_API_TOKEN) || (needs.prepare.outputs.target == 'staging' && secrets.STAGING_DIRECTUS_API_TOKEN) || secrets.DIRECTUS_API_TOKEN || vars.DIRECTUS_API_TOKEN }}
+      
+      # Secrets mapping (Mail)
+      MAIL_HOST:        ${{ secrets.SMTP_HOST || vars.SMTP_HOST }}
+      MAIL_PORT:        ${{ secrets.SMTP_PORT || vars.SMTP_PORT || '587' }}
+      MAIL_USERNAME:    ${{ secrets.SMTP_USER || vars.SMTP_USER }}
+      MAIL_PASSWORD:    ${{ secrets.SMTP_PASS || vars.SMTP_PASS }}
+      MAIL_FROM:        ${{ secrets.SMTP_FROM || vars.SMTP_FROM }}
+      MAIL_RECIPIENTS:  ${{ secrets.CONTACT_RECIPIENT || vars.CONTACT_RECIPIENT }}
+      
+      # Monitoring
+      SENTRY_DSN:       ${{ secrets.SENTRY_DSN || vars.SENTRY_DSN }}
+      
+      # Gatekeeper
+      GATEKEEPER_PASSWORD: ${{ secrets.GATEKEEPER_PASSWORD || 'klz2026' }}
+
+      # Analytics
+      UMAMI_WEBSITE_ID:    ${{ secrets.UMAMI_WEBSITE_ID || vars.UMAMI_WEBSITE_ID }}
+      UMAMI_API_ENDPOINT:  ${{ secrets.UMAMI_API_ENDPOINT || vars.UMAMI_API_ENDPOINT || 'https://analytics.infra.mintel.me' }}
     steps:
       - name: Checkout repository
         uses: actions/checkout@v4
-        with:
-          fetch-depth: 1
-
-      - name: 🚀 Deploy to ${{ env.TARGET }}
+      - name: 📝 Generate Environment
         shell: bash
+        env:
+          TRAEFIK_RULE:     ${{ needs.prepare.outputs.traefik_rule }}
+          ENV_FILE:         ${{ needs.prepare.outputs.env_file }}
         run: |
-          echo "Deploying $TARGET → $IMAGE_TAG"
+          # Middleware Selection Logic
+          # Regular app routes get auth on non-production
+          # Unprotected routes (/stats, /errors) never get auth
+          LOG_LEVEL=$( [[ "$TARGET" == "testing" || "$TARGET" == "development" ]] && echo "debug" || echo "info" )
+          COOKIE_DOMAIN=.$(echo $NEXT_PUBLIC_BASE_URL | sed 's|https://||')
+          STD_MW="${PROJECT_NAME}-ratelimit,${PROJECT_NAME}-forward,${PROJECT_NAME}-compress"
+          
+          if [[ "$TARGET" == "production" ]]; then
+            AUTH_MIDDLEWARE="$STD_MW"
+            COMPOSE_PROFILES=""
+          else
+            # Order: Ratelimit -> Forward (Proto) -> Auth -> Compression
+            AUTH_MIDDLEWARE="${PROJECT_NAME}-ratelimit,${PROJECT_NAME}-forward,${PROJECT_NAME}-auth,${PROJECT_NAME}-compress"
+            COMPOSE_PROFILES="gatekeeper"
+          fi
+          AUTH_MIDDLEWARE_UNPROTECTED="$STD_MW"
 
+          # Gatekeeper Origin
+          GATEKEEPER_ORIGIN="$NEXT_PUBLIC_BASE_URL/gatekeeper"
+
+          {
+            echo "# Generated by CI - $TARGET"
+            echo "IMAGE_TAG=$IMAGE_TAG"
+            echo "NEXT_PUBLIC_BASE_URL=$NEXT_PUBLIC_BASE_URL"
+            echo "GATEKEEPER_ORIGIN=$GATEKEEPER_ORIGIN"
+            echo "SENTRY_DSN=$SENTRY_DSN"
+            echo "LOG_LEVEL=$LOG_LEVEL"
+            echo "MAIL_HOST=$MAIL_HOST"
+            echo "MAIL_PORT=$MAIL_PORT"
+            echo "MAIL_USERNAME=$MAIL_USERNAME"
+            echo "MAIL_PASSWORD=$MAIL_PASSWORD"
+            echo "MAIL_FROM=$MAIL_FROM"
+            echo "MAIL_RECIPIENTS=$MAIL_RECIPIENTS"
+            echo ""
+            echo "# Directus"
+            echo "DIRECTUS_URL=$DIRECTUS_URL"
+            echo "DIRECTUS_HOST=$DIRECTUS_HOST"
+            echo "DIRECTUS_KEY=$DIRECTUS_KEY"
+            echo "DIRECTUS_SECRET=$DIRECTUS_SECRET"
+            echo "DIRECTUS_ADMIN_EMAIL=$DIRECTUS_ADMIN_EMAIL"
+            echo "DIRECTUS_ADMIN_PASSWORD=$DIRECTUS_ADMIN_PASSWORD"
+            echo "DIRECTUS_DB_NAME=$DIRECTUS_DB_NAME"
+            echo "DIRECTUS_DB_USER=$DIRECTUS_DB_USER"
+            echo "DIRECTUS_DB_PASSWORD=$DIRECTUS_DB_PASSWORD"
+            echo "DIRECTUS_DB_CLIENT=pg"
+            echo "DIRECTUS_DB_HOST=directus-db"
+            echo "DIRECTUS_DB_PORT=5432"
+            echo "DIRECTUS_API_TOKEN=$DIRECTUS_API_TOKEN"
+            echo "INTERNAL_DIRECTUS_URL=http://directus:8055"
+            echo ""
+            echo "# Gatekeeper"
+            echo "GATEKEEPER_PASSWORD=$GATEKEEPER_PASSWORD"
+            echo "AUTH_COOKIE_NAME=klz_gatekeeper_session"
+            echo "COOKIE_DOMAIN=$COOKIE_DOMAIN"
+            echo ""
+            echo "# Analytics"
+            echo "UMAMI_WEBSITE_ID=$UMAMI_WEBSITE_ID"
+            echo "UMAMI_API_ENDPOINT=$UMAMI_API_ENDPOINT"
+            echo ""
+            echo "TARGET=$TARGET"
+            echo "SENTRY_ENVIRONMENT=$TARGET"
+            echo "PROJECT_NAME=$PROJECT_NAME"
+            printf 'TRAEFIK_HOST_RULE=%s\n' "$TRAEFIK_RULE"
+            echo "TRAEFIK_HOST=$TRAEFIK_HOST"
+            echo "TRAEFIK_ENTRYPOINT=websecure"
+            echo "TRAEFIK_TLS=true"
+            echo "TRAEFIK_CERT_RESOLVER=le"
+            echo "ENV_FILE=$ENV_FILE"
+            echo "COMPOSE_PROFILES=$COMPOSE_PROFILES"
+            echo "AUTH_MIDDLEWARE=$AUTH_MIDDLEWARE"
+            echo "AUTH_MIDDLEWARE_UNPROTECTED=$AUTH_MIDDLEWARE_UNPROTECTED"
+          } > .env.deploy
+
+          echo "--- Generated .env.deploy ---"
+          cat .env.deploy
+          echo "----------------------------"
+
+      - name: 🚀 SSH Deploy
+        shell: bash
+        env:
+          ENV_FILE:         ${{ needs.prepare.outputs.env_file }}
+        run: |
           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
 
-          # Generated by CI - $TARGET - $(date -u)
-          # Determine dynamic values before writing the file
-          LOG_LEVEL=$( [[ "$TARGET" == "testing" || "$TARGET" == "development" ]] && echo "debug" || echo "info" )
-          COOKIE_DOMAIN=.$(echo $NEXT_PUBLIC_BASE_URL | sed 's|https://||')
+          # Transfer and Restart
+          SITE_DIR="/home/deploy/sites/klz-cables.com"
+          ssh root@alpha.mintel.me "mkdir -p $SITE_DIR/directus/schema $SITE_DIR/directus/uploads $SITE_DIR/directus/extensions"
+          
+          scp .env.deploy root@alpha.mintel.me:$SITE_DIR/$ENV_FILE
+          scp docker-compose.yml root@alpha.mintel.me:$SITE_DIR/docker-compose.yml
+          scp -r directus/schema root@alpha.mintel.me:$SITE_DIR/directus/
+          
+          ssh root@alpha.mintel.me "cd $SITE_DIR && echo '${{ secrets.REGISTRY_PASS }}' | docker login registry.infra.mintel.me -u '${{ secrets.REGISTRY_USER }}' --password-stdin"
+          ssh root@alpha.mintel.me "cd $SITE_DIR && docker compose -p '${{ needs.prepare.outputs.project_name }}' --env-file '$ENV_FILE' pull"
+          ssh root@alpha.mintel.me "cd $SITE_DIR && docker compose -p '${{ needs.prepare.outputs.project_name }}' --env-file '$ENV_FILE' up -d --remove-orphans"
+          
+          # Apply Directus Schema Snapshot if available
+          ssh root@alpha.mintel.me "cd $SITE_DIR && if docker compose -p '${{ needs.prepare.outputs.project_name }}' --env-file '$ENV_FILE' exec -T directus ls /directus/schema/snapshot.yaml >/dev/null 2>&1; then echo '→ Applying Directus Schema Snapshot...' && docker compose -p '${{ needs.prepare.outputs.project_name }}' --env-file '$ENV_FILE' exec -T directus npx directus schema apply /directus/schema/snapshot.yaml --yes; fi"
+          
+          ssh root@alpha.mintel.me "docker system prune -f --filter 'until=24h'"
 
-          cat > /tmp/klz-cables.env << EOF
-          # Generated by CI - $TARGET - $(date -u)
-          IMAGE_TAG=$IMAGE_TAG
-          NEXT_PUBLIC_BASE_URL=$NEXT_PUBLIC_BASE_URL
-          UMAMI_WEBSITE_ID=$UMAMI_WEBSITE_ID
-          UMAMI_API_ENDPOINT=$UMAMI_API_ENDPOINT
-          SENTRY_DSN=$SENTRY_DSN
-          LOG_LEVEL=$LOG_LEVEL
-          MAIL_HOST=$MAIL_HOST
-          MAIL_PORT=$MAIL_PORT
-          MAIL_USERNAME=$MAIL_USERNAME
-          MAIL_PASSWORD=$MAIL_PASSWORD
-          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
-          PROJECT_NAME=$PROJECT_NAME
-          COOKIE_DOMAIN=$COOKIE_DOMAIN
-          TRAEFIK_HOST=$TRAEFIK_HOST
-          EOF
-
-          # Append complex variables that contain backticks using printf to avoid shell expansion hits
-          printf "AUTH_MIDDLEWARE=%s\n" "$( [[ "$TARGET" == "production" ]] && echo "${PROJECT_NAME}-compress" || echo "${PROJECT_NAME}-auth,${PROJECT_NAME}-compress" )" >> /tmp/klz-cables.env
-          printf "TRAEFIK_HOST_RULE='%s'\n" '${{ needs.prepare.outputs.traefik_host_rule }}' >> /tmp/klz-cables.env
-
-          # 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 \
-                     /home/deploy/sites/klz-cables.com/directus/schema
-            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 directus/schema root@alpha.mintel.me:/home/deploy/sites/klz-cables.com/directus/
-          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" 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 -p "$PROJECT_NAME" --env-file "$ENV_FILE" pull
-            echo "→ Starting containers..."
-            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 -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 -p "$PROJECT_NAME" --env-file "$ENV_FILE" logs --tail=150
-              exit 1
-            fi
-
-            echo "→ Applying Directus Schema Snapshot..."
-            # Note: We check if snapshot exists first to avoid failing if no snapshot is committed yet
-            if docker compose -p "$PROJECT_NAME" --env-file "$ENV_FILE" exec -T directus ls /directus/schema/snapshot.yaml >/dev/null 2>&1; then
-              docker compose -p "$PROJECT_NAME" --env-file "$ENV_FILE" exec -T directus npx directus schema apply /directus/schema/snapshot.yaml --yes
-            else
-              echo "ℹ️ No snapshot.yaml found, skipping schema apply."
-            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."
+      - name: 🧹 Post-Deploy Cleanup (Runner)
+        if: always()
+        run: docker builder prune -f --filter "until=1h"
 
   # ──────────────────────────────────────────────────────────────────────────────
-  # JOB 5: PageSpeed Test
+  # JOB 5: Smoke Test (OG Images)
   # ──────────────────────────────────────────────────────────────────────────────
-  pagespeed:
-    name: ⚡ PageSpeed
+  smoke_test:
+    name: 🧪 Smoke Test
     needs: [prepare, deploy]
-    if: |
-      always() && 
-      needs.prepare.outputs.target != 'skip' &&
-      needs.deploy.result == 'success' && 
-      github.event.inputs.skip_long_checks != 'true'
+    if: needs.deploy.result == 'success'
     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
-
       - name: Setup Node.js
         uses: actions/setup-node@v4
         with:
           node-version: 20
-
-      - name: Install dependencies
-        run: npm ci --legacy-peer-deps
-
-      - name: 🔍 Install Chromium (Native & ARM64)
+      - name: Setup pnpm
+        uses: pnpm/action-setup@v3
+        with:
+          version: 10
+      - name: 🔐 Registry Auth
         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)
+          echo "@mintel:registry=https://${{ vars.REGISTRY_HOST || 'npm.infra.mintel.me' }}" > .npmrc
+          echo "//${{ vars.REGISTRY_HOST || 'npm.infra.mintel.me' }}/:_authToken=${{ secrets.REGISTRY_PASS }}" >> .npmrc
+      - name: Install dependencies
+        run: pnpm install --frozen-lockfile
+      - name: 🚀 Run OG Image Check
         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
-
-
+          TEST_URL: ${{ needs.prepare.outputs.next_public_url }}
+        run: pnpm run check:og
 
   # ──────────────────────────────────────────────────────────────────────────────
   # JOB 6: Notifications
   # ──────────────────────────────────────────────────────────────────────────────
   notifications:
-    name: 🔔 Notifications
-    needs: [prepare, qa, build-app, deploy, pagespeed]
+    name: 🔔 Notify
+    needs: [prepare, deploy, smoke_test]
     if: always()
     runs-on: docker
     container:
       image: catthehacker/ubuntu:act-latest
     steps:
-      - name: 📊 Deployment Summary
-        run: |
-          echo "┌──────────────────────────────┐"
-          echo "│ Deployment Summary           │"
-          echo "├──────────────────────────────┤"
-          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: needs.deploy.result == 'success'
+      - name: 🔔 Gotify
         run: |
+          STATUS="${{ needs.deploy.result }}"
+          TITLE="klz-cables.com: $STATUS"
+          [[ "$STATUS" == "success" ]] && PRIORITY=5 || PRIORITY=8
+          
           curl -s -k -X POST "${{ secrets.GOTIFY_URL }}/message?token=${{ secrets.GOTIFY_TOKEN }}" \
-            -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: |
-          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 – ${{ 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
+            -F "title=$TITLE" \
+            -F "message=Deploy to ${{ needs.prepare.outputs.target }} finished with status $STATUS.\nVersion: ${{ needs.prepare.outputs.image_tag }}" \
+            -F "priority=$PRIORITY" || true

.husky/pre-push

@@ -0,0 +1,32 @@
+#!/bin/sh
+
+# Husky pre-push hook to validate tags
+# Strictly enforces that all pushed tags start with 'v' (e.g., v1.0.0)
+
+z40=0000000000000000000000000000000000000000
+
+while read local_ref local_sha remote_ref remote_sha
+do
+  # Check if we are pushing a tag
+  case "$local_ref" in
+    refs/tags/*)
+      tag_name="${local_ref#refs/tags/}"
+      if ! echo "$tag_name" | grep -q "^v[0-9]"; then
+        echo ""
+        echo "❌ ERROR: Invalid tag name '$tag_name'"
+        echo "--------------------------------------------------"
+        echo "Consistency check failed: All tags MUST start with 'v'."
+        echo "Example: v1.0.10"
+        echo ""
+        echo "Please delete the invalid tag and create a new one:"
+        echo "  git tag -d $tag_name"
+        echo "  git tag v$tag_name"
+        echo "--------------------------------------------------"
+        echo ""
+        exit 1
+      fi
+      ;;
+  esac
+done
+
+exit 0

.lintstagedrc.cjs

@@ -1,4 +1,5 @@
-const path = require('path');
+/* eslint-disable no-undef */
+const path = require('path'); // eslint-disable-line @typescript-eslint/no-require-imports
 
 const buildEslintCommand = (filenames) =>
   `eslint --fix ${filenames.map((f) => path.relative(process.cwd(), f)).join(' ')}`;

.prettierignore

@@ -0,0 +1,11 @@
+# Ignore Next.js auto-generated environment file
+# It often uses different quote styles than our project config
+next-env.d.ts
+
+# Ignore build output
+.next
+dist
+out
+
+# Ignore other potentially generated files
+pnpm-lock.yaml

Dockerfile

@@ -1,75 +1,66 @@
-FROM node:20-alpine AS base
-
-# Install dependencies only when needed
-FROM base AS deps
-# Check https://github.com/nodejs/docker-node/tree/b4117f9333da4138b03a546ec926ef50a31506c3#nodealpine to understand why libc6-compat might be needed.
-RUN apk add --no-cache libc6-compat curl
+# Stage 1: Builder
+FROM registry.infra.mintel.me/mintel/nextjs:v1.7.10 AS base
 WORKDIR /app
 
-# Install dependencies based on the preferred package manager
-COPY package.json package-lock.json* ./
-RUN --mount=type=cache,target=/root/.npm npm ci --legacy-peer-deps
-
-
-# Rebuild the source code only when needed
-FROM base AS builder
-WORKDIR /app
-COPY --from=deps /app/node_modules ./node_modules
-COPY . .
-
-# Next.js collects completely anonymous telemetry data about general usage.
-# Learn more here: https://nextjs.org/telemetry
-# Uncomment the following line in case you want to disable telemetry during the build.
-ENV NEXT_TELEMETRY_DISABLED=1
-
-# Build-time environment variables for Next.js
-# These are baked into the client bundle during build
+# Arguments for build-time configuration
 ARG NEXT_PUBLIC_BASE_URL
 ARG NEXT_PUBLIC_TARGET
 ARG DIRECTUS_URL
+ARG UMAMI_WEBSITE_ID
+ARG UMAMI_API_ENDPOINT
+ARG NPM_TOKEN
 
+# Environment variables for Next.js build
 ENV NEXT_PUBLIC_BASE_URL=$NEXT_PUBLIC_BASE_URL
 ENV NEXT_PUBLIC_TARGET=$NEXT_PUBLIC_TARGET
 ENV DIRECTUS_URL=$DIRECTUS_URL
+ENV UMAMI_WEBSITE_ID=$UMAMI_WEBSITE_ID
+ENV UMAMI_API_ENDPOINT=$UMAMI_API_ENDPOINT
+ENV SKIP_RUNTIME_ENV_VALIDATION=true
+ENV CI=true
 
-# Validate environment variables during build
-RUN SKIP_RUNTIME_ENV_VALIDATION=true npx tsx scripts/validate-env.ts
+# Copy lockfile and manifest for dependency installation caching
+COPY pnpm-lock.yaml package.json .npmrc* ./
 
-RUN --mount=type=cache,target=/app/.next/cache npm run build
+# Configure private registry and install dependencies
+RUN --mount=type=cache,id=pnpm,target=/pnpm/store \
+    --mount=type=secret,id=NPM_TOKEN \
+    export NPM_TOKEN=$(cat /run/secrets/NPM_TOKEN 2>/dev/null || echo $NPM_TOKEN) && \
+    echo "@mintel:registry=https://npm.infra.mintel.me" > .npmrc && \
+    echo "//npm.infra.mintel.me/:_authToken=\${NPM_TOKEN}" >> .npmrc && \
+    pnpm install --frozen-lockfile && \
+    rm .npmrc
 
-# Production image, copy all the files and run next
-FROM base AS runner
+# Copy source code
+COPY . .
+
+# Stage 2: Development (Hot-Reloading)
+FROM base AS development
+ENV NODE_ENV=development
+CMD ["pnpm", "dev:local"]
+
+# Build application
+# Stage 3: Builder (Production)
+FROM base AS builder
+RUN pnpm build
+
+# Stage 3: Runner
+FROM registry.infra.mintel.me/mintel/runtime:v1.7.10 AS runner
 WORKDIR /app
 
-# Install curl for health checks
-RUN apk add --no-cache curl
-
-ENV NODE_ENV=production
-# Uncomment the following line in case you want to disable telemetry during runtime.
-# ENV NEXT_TELEMETRY_DISABLED 1
-
-RUN addgroup --system --gid 1001 nodejs
-RUN adduser --system --uid 1001 nextjs
-
-COPY --from=builder /app/public ./public
-
-# Set the correct permission for prerender cache
-RUN mkdir .next
-RUN chown nextjs:nodejs .next
-
-# Automatically leverage output traces to reduce image size
-# https://nextjs.org/docs/advanced-features/output-file-tracing
-COPY --from=builder --chown=nextjs:nodejs /app/.next/standalone ./
-COPY --from=builder --chown=nextjs:nodejs /app/.next/static ./.next/static
-
+# Create nextjs user and group (standardized in runtime image but ensuring local ownership)
+USER root
+RUN chown -R nextjs:nodejs /app
 USER nextjs
 
-EXPOSE 3000
-
-ENV PORT=3000
-# set hostname to localhost
 ENV HOSTNAME="0.0.0.0"
+ENV PORT=3000
+ENV NODE_ENV=production
+
+# Copy standalone output and static files
+COPY --from=builder --chown=nextjs:nodejs /app/public ./public
+COPY --from=builder --chown=nextjs:nodejs /app/.next/standalone ./
+COPY --from=builder --chown=nextjs:nodejs /app/.next/static ./.next/static
+COPY --from=builder --chown=nextjs:nodejs /app/.next/cache ./.next/cache
 
-# server.js is created by next build from the standalone output
-# https://nextjs.org/docs/pages/api-reference/next-config-js/output
 CMD ["node", "server.js"]

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

@@ -3,9 +3,16 @@ import { getPageBySlug } from '@/lib/pages';
 import { OGImageTemplate } from '@/components/OGImageTemplate';
 import { getOgFonts, OG_IMAGE_SIZE } from '@/lib/og-helper';
 
+export const size = OG_IMAGE_SIZE;
+export const contentType = 'image/png';
 export const runtime = 'nodejs';
 
-export default async function Image({ params: { locale, slug } }: { params: { locale: string, slug: string } }) {
+export default async function Image({
+  params,
+}: {
+  params: Promise<{ locale: string; slug: string }>;
+}) {
+  const { locale, slug } = await params;
   const pageData = await getPageBySlug(slug, locale);
 
   if (!pageData) {
@@ -15,17 +22,14 @@ export default async function Image({ params: { locale, slug } }: { params: { lo
   const fonts = await getOgFonts();
 
   return new ImageResponse(
-    (
-      <OGImageTemplate
-        title={pageData.frontmatter.title}
-        description={pageData.frontmatter.excerpt}
-        label="Information"
-      />
-    ),
+    <OGImageTemplate
+      title={pageData.frontmatter.title}
+      description={pageData.frontmatter.excerpt}
+      label="Information"
+    />,
     {
       ...OG_IMAGE_SIZE,
       fonts,
-    }
+    },
   );
 }
-

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

@@ -1,12 +1,12 @@
 import { notFound } from 'next/navigation';
 import { MDXRemote } from 'next-mdx-remote/rsc';
 import { Container, Badge, Heading } from '@/components/ui';
-import { getTranslations } from 'next-intl/server';
+import { getTranslations, setRequestLocale } from 'next-intl/server';
 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';
+import TrackedLink from '@/components/analytics/TrackedLink';
 
 interface PageProps {
   params: Promise<{
@@ -39,18 +39,17 @@ export async function generateMetadata({ params }: PageProps): Promise<Metadata>
     title: pageData.frontmatter.title,
     description: pageData.frontmatter.excerpt || '',
     alternates: {
-      canonical: `/${locale}/${slug}`,
+      canonical: `${SITE_URL}/${locale}/${slug}`,
       languages: {
-        de: `/de/${slug}`,
-        en: `/en/${slug}`,
-        'x-default': `/en/${slug}`,
+        de: `${SITE_URL}/de/${slug}`,
+        en: `${SITE_URL}/en/${slug}`,
+        'x-default': `${SITE_URL}/en/${slug}`,
       },
     },
     openGraph: {
       title: `${pageData.frontmatter.title} | KLZ Cables`,
       description: pageData.frontmatter.excerpt || '',
       url: `${SITE_URL}/${locale}/${slug}`,
-      images: getOGImageMetadata(slug, pageData.frontmatter.title, locale),
     },
     twitter: {
       card: 'summary_large_image',
@@ -62,6 +61,7 @@ export async function generateMetadata({ params }: PageProps): Promise<Metadata>
 
 export default async function StandardPage({ params }: PageProps) {
   const { locale, slug } = await params;
+  setRequestLocale(locale);
   const pageData = await getPageBySlug(slug, locale);
   const t = await getTranslations('StandardPage');
 
@@ -111,15 +111,19 @@ export default async function StandardPage({ params }: PageProps) {
             <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
+              <TrackedLink
                 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"
+                eventProperties={{
+                  location: 'generic_page_support_cta',
+                  page_slug: slug,
+                }}
               >
                 {t('contactUs')}
                 <span className="ml-2 transition-transform group-hover/link:translate-x-1">
                   &rarr;
                 </span>
-              </a>
+              </TrackedLink>
             </div>
           </div>
         </div>

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

@@ -5,13 +5,15 @@ import { OGImageTemplate } from '@/components/OGImageTemplate';
 import { NextRequest } from 'next/server';
 import { getOgFonts, OG_IMAGE_SIZE } from '@/lib/og-helper';
 
+import { SITE_URL } from '@/lib/schema';
+
 export const runtime = 'nodejs';
 
 export async function GET(
   request: NextRequest,
   { params }: { params: Promise<{ locale: string }> },
 ) {
-  const { searchParams, origin } = new URL(request.url);
+  const { searchParams } = new URL(request.url);
   const slug = searchParams.get('slug');
   const { locale } = await params;
 
@@ -58,7 +60,7 @@ export async function GET(
   const featuredImage = product.frontmatter.images?.[0]
     ? product.frontmatter.images[0].startsWith('http')
       ? product.frontmatter.images[0]
-      : `${origin}${product.frontmatter.images[0]}`
+      : `${SITE_URL}${product.frontmatter.images[0]}`
     : undefined;
 
   return new ImageResponse(

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

@@ -4,13 +4,16 @@ import { OGImageTemplate } from '@/components/OGImageTemplate';
 import { getOgFonts, OG_IMAGE_SIZE } from '@/lib/og-helper';
 import { SITE_URL } from '@/lib/schema';
 
+export const size = OG_IMAGE_SIZE;
+export const contentType = 'image/png';
 export const runtime = 'nodejs';
 
 export default async function Image({
-  params: { locale, slug },
+  params,
 }: {
-  params: { locale: string; slug: string };
+  params: Promise<{ locale: string; slug: string }>;
 }) {
+  const { locale, slug } = await params;
   const post = await getPostBySlug(slug, locale);
 
   if (!post) {

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

@@ -1,7 +1,6 @@
 import { notFound } from 'next/navigation';
-import Script from 'next/script';
 import JsonLd from '@/components/JsonLd';
-import { getBreadcrumbSchema, SITE_URL, LOGO_URL } from '@/lib/schema';
+import { SITE_URL } from '@/lib/schema';
 import { MDXRemote } from 'next-mdx-remote/rsc';
 import { getPostBySlug, getAdjacentPosts, getReadingTime, getHeadings } from '@/lib/blog';
 import { Metadata } from 'next';
@@ -11,7 +10,8 @@ import PowerCTA from '@/components/blog/PowerCTA';
 import TableOfContents from '@/components/blog/TableOfContents';
 import { mdxComponents } from '@/components/blog/MDXComponents';
 import { Heading } from '@/components/ui';
-import { getOGImageMetadata } from '@/lib/metadata';
+import { setRequestLocale } from 'next-intl/server';
+import BlogEngagementTracker from '@/components/analytics/BlogEngagementTracker';
 
 interface BlogPostProps {
   params: Promise<{
@@ -31,11 +31,11 @@ export async function generateMetadata({ params }: BlogPostProps): Promise<Metad
     title: post.frontmatter.title,
     description: description,
     alternates: {
-      canonical: `/${locale}/blog/${slug}`,
+      canonical: `${SITE_URL}/${locale}/blog/${slug}`,
       languages: {
-        de: `/de/blog/${slug}`,
-        en: `/en/blog/${slug}`,
-        'x-default': `/en/blog/${slug}`,
+        de: `${SITE_URL}/de/blog/${slug}`,
+        en: `${SITE_URL}/en/blog/${slug}`,
+        'x-default': `${SITE_URL}/en/blog/${slug}`,
       },
     },
     openGraph: {
@@ -45,7 +45,6 @@ export async function generateMetadata({ params }: BlogPostProps): Promise<Metad
       publishedTime: post.frontmatter.date,
       authors: ['KLZ Cables'],
       url: `${SITE_URL}/${locale}/blog/${slug}`,
-      images: getOGImageMetadata(`blog/${slug}`, post.frontmatter.title, locale),
     },
     twitter: {
       card: 'summary_large_image',
@@ -57,6 +56,7 @@ export async function generateMetadata({ params }: BlogPostProps): Promise<Metad
 
 export default async function BlogPost({ params }: BlogPostProps) {
   const { locale, slug } = await params;
+  setRequestLocale(locale);
   const post = await getPostBySlug(slug, locale);
   const { prev, next } = await getAdjacentPosts(slug, locale);
 
@@ -68,6 +68,12 @@ export default async function BlogPost({ params }: BlogPostProps) {
 
   return (
     <article className="bg-white min-h-screen font-sans selection:bg-primary/10 selection:text-primary">
+      <BlogEngagementTracker
+        title={post.frontmatter.title}
+        slug={slug}
+        category={post.frontmatter.category}
+        readingTime={getReadingTime(post.content)}
+      />
       {/* Featured Image Header */}
       {post.frontmatter.featuredImage ? (
         <div className="relative w-full h-[70vh] min-h-[500px] overflow-hidden group">

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

@@ -3,23 +3,20 @@ import { getTranslations } from 'next-intl/server';
 import { OGImageTemplate } from '@/components/OGImageTemplate';
 import { getOgFonts, OG_IMAGE_SIZE } from '@/lib/og-helper';
 
+export const size = OG_IMAGE_SIZE;
+export const contentType = 'image/png';
 export const runtime = 'nodejs';
 
-export default async function Image({ params: { locale } }: { params: { locale: string } }) {
+export default async function Image({ params }: { params: Promise<{ locale: string }> }) {
+  const { locale } = await params;
   const t = await getTranslations({ locale, namespace: 'Blog.meta' });
   const fonts = await getOgFonts();
 
   return new ImageResponse(
-    (
-      <OGImageTemplate
-        title={t('title')}
-        description={t('description')}
-        label="Blog"
-      />
-    ),
+    <OGImageTemplate title={t('title')} description={t('description')} label="Blog" />,
     {
       ...OG_IMAGE_SIZE,
       fonts,
-    }
+    },
   );
 }

app/[locale]/blog/page.tsx

@@ -1,9 +1,10 @@
 import Link from 'next/link';
+import Image from 'next/image';
 import { getAllPosts } from '@/lib/blog';
 import { Section, Container, Heading, Card, Badge, Button } from '@/components/ui';
 import Reveal from '@/components/Reveal';
-import { getTranslations } from 'next-intl/server';
-import { getOGImageMetadata } from '@/lib/metadata';
+import { Metadata } from 'next';
+import { getTranslations, setRequestLocale } from 'next-intl/server';
 import { SITE_URL } from '@/lib/schema';
 
 interface BlogIndexProps {
@@ -19,18 +20,17 @@ export async function generateMetadata({ params }: BlogIndexProps) {
     title: t('title'),
     description: t('description'),
     alternates: {
-      canonical: `/${locale}/blog`,
+      canonical: `${SITE_URL}/${locale}/blog`,
       languages: {
-        de: '/de/blog',
-        en: '/en/blog',
-        'x-default': '/en/blog',
+        de: `${SITE_URL}/de/blog`,
+        en: `${SITE_URL}/en/blog`,
+        'x-default': `${SITE_URL}/en/blog`,
       },
     },
     openGraph: {
       title: `${t('title')} | KLZ Cables`,
       description: t('description'),
       url: `${SITE_URL}/${locale}/blog`,
-      images: getOGImageMetadata('blog', t('title'), locale),
     },
     twitter: {
       card: 'summary_large_image',
@@ -42,6 +42,7 @@ export async function generateMetadata({ params }: BlogIndexProps) {
 
 export default async function BlogIndex({ params }: BlogIndexProps) {
   const { locale } = await params;
+  setRequestLocale(locale);
   const t = await getTranslations('Blog');
   const posts = await getAllPosts(locale);
 
@@ -60,10 +61,13 @@ export default async function BlogIndex({ params }: BlogIndexProps) {
         <section className="relative h-[50vh] md:h-[70vh] min-h-[400px] md:min-h-[600px] flex items-center overflow-hidden bg-primary-dark">
           {featuredPost && featuredPost.frontmatter.featuredImage && (
             <>
-              <img
+              <Image
                 src={featuredPost.frontmatter.featuredImage}
                 alt={featuredPost.frontmatter.title}
+                fill
                 className="absolute inset-0 w-full h-full object-cover scale-105 animate-slow-zoom opacity-40 md:opacity-60"
+                sizes="100vw"
+                priority
               />
               <div className="absolute inset-0 image-overlay-gradient" />
             </>
@@ -145,10 +149,12 @@ export default async function BlogIndex({ params }: BlogIndexProps) {
                   <Card className="h-full flex flex-col border-none shadow-lg hover:shadow-2xl transition-all duration-500 rounded-2xl md:rounded-3xl overflow-hidden">
                     {post.frontmatter.featuredImage && (
                       <div className="relative h-48 md:h-72 overflow-hidden">
-                        <img
+                        <Image
                           src={post.frontmatter.featuredImage}
                           alt={post.frontmatter.title}
+                          fill
                           className="w-full h-full object-cover transition-transform duration-1000 group-hover:scale-110"
+                          sizes="(max-width: 768px) 100vw, (max-width: 1024px) 50vw, 33vw"
                         />
                         <div className="absolute inset-0 image-overlay-gradient opacity-0 group-hover:opacity-100 transition-opacity duration-500" />
                         {post.frontmatter.category && (

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

@@ -3,9 +3,12 @@ import { getTranslations } from 'next-intl/server';
 import { OGImageTemplate } from '@/components/OGImageTemplate';
 import { getOgFonts, OG_IMAGE_SIZE } from '@/lib/og-helper';
 
+export const size = OG_IMAGE_SIZE;
+export const contentType = 'image/png';
 export const runtime = 'nodejs';
 
-export default async function Image({ params: { locale } }: { params: { locale: string } }) {
+export default async function Image({ params }: { params: Promise<{ locale: string }> }) {
+  const { locale } = await params;
   const t = await getTranslations({ locale, namespace: 'Contact' });
   const fonts = await getOgFonts();
 
@@ -13,16 +16,10 @@ export default async function Image({ params: { locale } }: { params: { locale:
   const description = t('meta.description') || t('subtitle');
 
   return new ImageResponse(
-    (
-      <OGImageTemplate
-        title={title}
-        description={description}
-        label="Contact"
-      />
-    ),
+    <OGImageTemplate title={title} description={description} label="Contact" />,
     {
       ...OG_IMAGE_SIZE,
       fonts,
-    }
+    },
   );
 }

app/[locale]/contact/page.tsx

@@ -3,7 +3,7 @@ import JsonLd from '@/components/JsonLd';
 import Reveal from '@/components/Reveal';
 import { Container, Heading, Section } from '@/components/ui';
 import { Metadata } from 'next';
-import { getTranslations } from 'next-intl/server';
+import { getTranslations, setRequestLocale } from 'next-intl/server';
 import { SITE_URL } from '@/lib/schema';
 import { getOGImageMetadata } from '@/lib/metadata';
 import { Suspense } from 'react';
@@ -26,8 +26,9 @@ export async function generateMetadata({ params }: ContactPageProps): Promise<Me
     alternates: {
       canonical: `${SITE_URL}/${locale}/contact`,
       languages: {
-        'de-DE': '/de/contact',
-        'en-US': '/en/contact',
+        de: `${SITE_URL}/de/contact`,
+        en: `${SITE_URL}/en/contact`,
+        'x-default': `${SITE_URL}/en/contact`,
       },
     },
     openGraph: {
@@ -35,7 +36,6 @@ export async function generateMetadata({ params }: ContactPageProps): Promise<Me
       description,
       url: `${SITE_URL}/${locale}/contact`,
       siteName: 'KLZ Cables',
-      images: getOGImageMetadata('contact', title, locale),
       locale: `${locale.toUpperCase()}_DE`,
       type: 'website',
     },
@@ -43,7 +43,6 @@ export async function generateMetadata({ params }: ContactPageProps): Promise<Me
       card: 'summary_large_image',
       title: `${title} | KLZ Cables`,
       description,
-      images: [`${SITE_URL}/${locale}/contact/opengraph-image`],
     },
     robots: {
       index: true,
@@ -58,6 +57,7 @@ export async function generateStaticParams() {
 
 export default async function ContactPage({ params }: ContactPageProps) {
   const { locale } = await params;
+  setRequestLocale(locale);
   const t = await getTranslations({ locale, namespace: 'Contact' });
   return (
     <div className="flex flex-col min-h-screen bg-neutral-light">

app/[locale]/layout.tsx

@@ -2,14 +2,26 @@ import Footer from '@/components/Footer';
 import Header from '@/components/Header';
 import JsonLd from '@/components/JsonLd';
 import AnalyticsProvider from '@/components/analytics/AnalyticsProvider';
+import ScrollDepthTracker from '@/components/analytics/ScrollDepthTracker';
 import CMSConnectivityNotice from '@/components/CMSConnectivityNotice';
-import { FeedbackOverlay } from '@mintel/next-feedback';
+import { RecordModeProvider } from '@/components/record-mode/RecordModeContext';
+import { RecordModeVisuals } from '@/components/record-mode/RecordModeVisuals';
+import { ToolCoordinator } from '@/components/record-mode/ToolCoordinator';
 import { Metadata, Viewport } from 'next';
 import { NextIntlClientProvider } from 'next-intl';
 import { getMessages } from 'next-intl/server';
+import { Suspense } from 'react';
 import '../../styles/globals.css';
 import { SITE_URL } from '@/lib/schema';
 import { config } from '@/lib/config';
+import { setRequestLocale } from 'next-intl/server';
+import { Inter } from 'next/font/google';
+
+const inter = Inter({
+  subsets: ['latin'],
+  display: 'swap',
+  variable: '--font-inter',
+});
 
 export const metadata: Metadata = {
   metadataBase: new URL(SITE_URL),
@@ -31,20 +43,19 @@ export const viewport: Viewport = {
   themeColor: '#001a4d',
 };
 
-export default async function LocaleLayout({
-  children,
-  params,
-}: {
+export default async function Layout(props: {
   children: React.ReactNode;
   params: Promise<{ locale: string }>;
 }) {
-  const { locale } = await params;
-
-  // Ensure locale is a valid string, fallback to 'en'
+  const params = await props.params;
+  const { locale } = params;
+  const { children } = props;
   const supportedLocales = ['en', 'de'];
   const localeStr = (typeof locale === 'string' ? locale : '').trim();
   const safeLocale = supportedLocales.includes(localeStr) ? localeStr : 'en';
 
+  setRequestLocale(safeLocale);
+
   let messages = {};
   try {
     messages = await getMessages();
@@ -53,37 +64,56 @@ export default async function LocaleLayout({
     messages = {};
   }
 
-  // Track pageview on the server with high-fidelity header context
   const { getServerAppServices } = await import('@/lib/services/create-services.server');
   const serverServices = getServerAppServices();
 
-  const { headers } = await import('next/headers');
-  const requestHeaders = await headers();
+  try {
+    const { headers } = await import('next/headers');
+    const requestHeaders = await headers();
 
-  if ('setServerContext' in serverServices.analytics) {
-    (serverServices.analytics as any).setServerContext({
-      userAgent: requestHeaders.get('user-agent') || undefined,
-      language: requestHeaders.get('accept-language')?.split(',')[0] || undefined,
-      referrer: requestHeaders.get('referer') || undefined,
-      ip: requestHeaders.get('x-forwarded-for')?.split(',')[0] || undefined,
-    });
+    if ('setServerContext' in serverServices.analytics) {
+      (serverServices.analytics as any).setServerContext({
+        userAgent: requestHeaders.get('user-agent') || undefined,
+        language: requestHeaders.get('accept-language')?.split(',')[0] || undefined,
+        referrer: requestHeaders.get('referer') || undefined,
+        ip: requestHeaders.get('x-forwarded-for')?.split(',')[0] || undefined,
+      });
+    }
+
+    serverServices.analytics.trackPageview();
+  } catch {
+    if (process.env.NODE_ENV !== 'production' || !process.env.CI) {
+      console.warn(
+        '[Layout] Static generation detected or headers unavailable, skipping server-side analytics context',
+      );
+    }
   }
 
-  // Track initial server-side pageview
-  serverServices.analytics.trackPageview();
+  // Read directly from process.env — bypasses all abstraction to guarantee correctness
+  const recordModeEnabled = process.env.NEXT_PUBLIC_RECORD_MODE_ENABLED === 'true';
+  const feedbackEnabled = process.env.NEXT_PUBLIC_FEEDBACK_ENABLED === 'true';
 
   return (
-    <html lang={safeLocale} className="scroll-smooth overflow-x-hidden">
+    <html lang={safeLocale} className={`scroll-smooth overflow-x-hidden ${inter.variable}`}>
+      <head></head>
       <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={safeLocale}>
-          <JsonLd />
-          <Header />
-          <main className="flex-grow animate-fade-in overflow-visible">{children}</main>
-          <Footer />
-          <CMSConnectivityNotice />
+          <RecordModeProvider isEnabled={recordModeEnabled}>
+            <RecordModeVisuals>
+              <JsonLd />
+              <Header />
+              <main className="flex-grow animate-fade-in overflow-visible">{children}</main>
+              <Footer />
+            </RecordModeVisuals>
 
-          <AnalyticsProvider />
-          {config.feedbackEnabled && <FeedbackOverlay />}
+            <CMSConnectivityNotice />
+
+            <Suspense fallback={null}>
+              <AnalyticsProvider />
+              <ScrollDepthTracker />
+            </Suspense>
+            <ToolCoordinator feedbackEnabled={feedbackEnabled} />
+          </RecordModeProvider>
         </NextIntlClientProvider>
       </body>
     </html>

app/[locale]/not-found.tsx

@@ -1,9 +1,21 @@
+'use client';
 import { useTranslations } from 'next-intl';
 import { Container, Button, Heading } from '@/components/ui';
 import Scribble from '@/components/Scribble';
+import { useEffect } from 'react';
+import { useAnalytics } from '@/components/analytics/useAnalytics';
+import { AnalyticsEvents } from '@/components/analytics/analytics-events';
 
 export default function NotFound() {
   const t = useTranslations('Error.notFound');
+  const { trackEvent } = useAnalytics();
+
+  useEffect(() => {
+    trackEvent(AnalyticsEvents.ERROR, {
+      type: '404_not_found',
+      path: typeof window !== 'undefined' ? window.location.pathname : 'unknown',
+    });
+  }, [trackEvent]);
 
   return (
     <Container className="relative py-24 flex flex-col items-center justify-center text-center min-h-[70vh] overflow-hidden">
@@ -16,19 +28,17 @@ export default function NotFound() {
         <Heading level={1} className="text-6xl md:text-8xl font-bold mb-2">
           404
         </Heading>
-        <Scribble 
-          variant="circle" 
-          className="w-[150%] h-[150%] -top-[25%] -left-[25%] text-accent/40" 
+        <Scribble
+          variant="circle"
+          className="w-[150%] h-[150%] -top-[25%] -left-[25%] text-accent/40"
         />
       </div>
 
       <Heading level={2} className="text-2xl md:text-3xl font-bold mb-4 text-primary">
         {t('title')}
       </Heading>
-      
-      <p className="text-white/60 mb-10 max-w-md text-lg">
-        {t('description')}
-      </p>
+
+      <p className="text-white/60 mb-10 max-w-md text-lg">{t('description')}</p>
 
       <div className="flex flex-col sm:flex-row gap-4">
         <Button href="/" variant="accent" size="lg">

app/[locale]/opengraph-image.tsx

@@ -3,24 +3,25 @@ import { getTranslations } from 'next-intl/server';
 import { OGImageTemplate } from '@/components/OGImageTemplate';
 import { getOgFonts, OG_IMAGE_SIZE } from '@/lib/og-helper';
 
+export const size = OG_IMAGE_SIZE;
+export const contentType = 'image/png';
 export const runtime = 'nodejs';
 
-export default async function Image({ params: { locale } }: { params: { locale: string } }) {
+export default async function Image({ params }: { params: Promise<{ locale: string }> }) {
+  console.log('🖼️ OG Image Handler Called');
+  const { locale } = await params;
   const t = await getTranslations({ locale, namespace: 'Index.meta' });
   const fonts = await getOgFonts();
 
   return new ImageResponse(
-    (
-      <OGImageTemplate
-        title={t('title')}
-        description={t('description')}
-        label="Reliable Energy Infrastructure"
-      />
-    ),
+    <OGImageTemplate
+      title={t('title')}
+      description={t('description')}
+      label="Reliable Energy Infrastructure"
+    />,
     {
       ...OG_IMAGE_SIZE,
       fonts,
-    }
+    },
   );
 }
-

app/[locale]/page.tsx

@@ -3,24 +3,23 @@ import JsonLd from '@/components/JsonLd';
 import { getBreadcrumbSchema, SITE_URL } from '@/lib/schema';
 import ProductCategories from '@/components/home/ProductCategories';
 import WhatWeDo from '@/components/home/WhatWeDo';
-import RecentPosts from '@/components/home/RecentPosts';
-import Experience from '@/components/home/Experience';
-import WhyChooseUs from '@/components/home/WhyChooseUs';
-import MeetTheTeam from '@/components/home/MeetTheTeam';
-import GallerySection from '@/components/home/GallerySection';
-import VideoSection from '@/components/home/VideoSection';
-import CTA from '@/components/home/CTA';
+import dynamic from 'next/dynamic';
 import Reveal from '@/components/Reveal';
-import { getTranslations } from 'next-intl/server';
+
+const RecentPosts = dynamic(() => import('@/components/home/RecentPosts'));
+const Experience = dynamic(() => import('@/components/home/Experience'));
+const WhyChooseUs = dynamic(() => import('@/components/home/WhyChooseUs'));
+const MeetTheTeam = dynamic(() => import('@/components/home/MeetTheTeam'));
+const GallerySection = dynamic(() => import('@/components/home/GallerySection'));
+const VideoSection = dynamic(() => import('@/components/home/VideoSection'));
+const CTA = dynamic(() => import('@/components/home/CTA'));
+import { getTranslations, setRequestLocale } from 'next-intl/server';
 import { Metadata } from 'next';
 import { getOGImageMetadata } from '@/lib/metadata';
 
-export default async function HomePage({
-  params,
-}: {
-  params: Promise<{ locale: string }>;
-}) {
+export default async function HomePage({ params }: { params: Promise<{ locale: string }> }) {
   const { locale } = await params;
+  setRequestLocale(locale);
   return (
     <div className="flex flex-col min-h-screen">
       <JsonLd
@@ -52,7 +51,7 @@ export default async function HomePage({
       <Reveal>
         <VideoSection />
       </Reveal>
-      <Reveal>
+      <Reveal className="content-visibility-auto">
         <CTA />
       </Reveal>
     </div>
@@ -70,12 +69,12 @@ export async function generateMetadata({
   let t;
   try {
     t = await getTranslations({ locale, namespace: 'Index.meta' });
-  } catch (err) {
+  } catch {
     // If translations for Index.meta are not present, try generic Index namespace
     try {
       t = await getTranslations({ locale, namespace: 'Index' });
-    } catch (e) {
-      t = (key: string) => '';
+    } catch {
+      t = () => '';
     }
   }
 
@@ -86,11 +85,11 @@ export async function generateMetadata({
     title,
     description,
     alternates: {
-      canonical: `/${locale}`,
+      canonical: `${SITE_URL}/${locale}`,
       languages: {
-        de: '/de',
-        en: '/en',
-        'x-default': '/en',
+        de: `${SITE_URL}/de`,
+        en: `${SITE_URL}/en`,
+        'x-default': `${SITE_URL}/en`,
       },
     },
     openGraph: {

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

@@ -1,6 +1,5 @@
-import Script from 'next/script';
 import JsonLd from '@/components/JsonLd';
-import { getBreadcrumbSchema, SITE_URL } from '@/lib/schema';
+import { SITE_URL } from '@/lib/schema';
 import ProductSidebar from '@/components/ProductSidebar';
 import ProductTabs from '@/components/ProductTabs';
 import ProductTechnicalData from '@/components/ProductTechnicalData';
@@ -11,12 +10,13 @@ import { getDatasheetPath } from '@/lib/datasheets';
 import { getAllProducts, getProductBySlug } from '@/lib/mdx';
 import { mapFileSlugToTranslated, mapSlugToFileSlug } from '@/lib/slugs';
 import { Metadata } from 'next';
-import { getTranslations } from 'next-intl/server';
+import { getTranslations, setRequestLocale } from 'next-intl/server';
 import { getProductOGImageMetadata } from '@/lib/metadata';
 import { MDXRemote } from 'next-mdx-remote/rsc';
 import Image from 'next/image';
 import Link from 'next/link';
 import { notFound } from 'next/navigation';
+import ProductEngagementTracker from '@/components/analytics/ProductEngagementTracker';
 
 interface ProductPageProps {
   params: Promise<{
@@ -53,11 +53,11 @@ export async function generateMetadata({ params }: ProductPageProps): Promise<Me
       title: categoryTitle,
       description: categoryDesc,
       alternates: {
-        canonical: `/${locale}/products/${productSlug}`,
+        canonical: `${SITE_URL}/${locale}/products/${productSlug}`,
         languages: {
-          de: `/de/products/${await mapFileSlugToTranslated(productSlug, 'de')}`,
-          en: `/en/products/${await mapFileSlugToTranslated(productSlug, 'en')}`,
-          'x-default': `/en/products/${await mapFileSlugToTranslated(productSlug, 'en')}`,
+          de: `${SITE_URL}/de/products/${await mapFileSlugToTranslated(productSlug, 'de')}`,
+          en: `${SITE_URL}/en/products/${await mapFileSlugToTranslated(productSlug, 'en')}`,
+          'x-default': `${SITE_URL}/en/products/${await mapFileSlugToTranslated(productSlug, 'en')}`,
         },
       },
       openGraph: {
@@ -81,11 +81,11 @@ export async function generateMetadata({ params }: ProductPageProps): Promise<Me
     title: product.frontmatter.title,
     description: product.frontmatter.description,
     alternates: {
-      canonical: `/${locale}/products/${slug.join('/')}`,
+      canonical: `${SITE_URL}/${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')}`,
-        'x-default': `/en/products/${await mapFileSlugToTranslated(slug[0], 'en')}/${await mapFileSlugToTranslated(productSlug, 'en')}`,
+        de: `${SITE_URL}/de/products/${await mapFileSlugToTranslated(slug[0], 'de')}/${await mapFileSlugToTranslated(productSlug, 'de')}`,
+        en: `${SITE_URL}/en/products/${await mapFileSlugToTranslated(slug[0], 'en')}/${await mapFileSlugToTranslated(productSlug, 'en')}`,
+        'x-default': `${SITE_URL}/en/products/${await mapFileSlugToTranslated(slug[0], 'en')}/${await mapFileSlugToTranslated(productSlug, 'en')}`,
       },
     },
     openGraph: {
@@ -170,6 +170,7 @@ const components = {
 
 export default async function ProductPage({ params }: ProductPageProps) {
   const { locale, slug } = await params;
+  setRequestLocale(locale);
   const productSlug = slug[slug.length - 1];
   const t = await getTranslations('Products');
 
@@ -212,8 +213,11 @@ 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
+                  href={`/${locale}/${await mapFileSlugToTranslated('products', locale)}`}
+                  className="hover:text-accent transition-colors"
+                >
+                  {t.has('breadcrumb') ? t('breadcrumb') : t('title').replace(/<[^>]*>/g, '')}
                 </Link>
                 <span className="mx-3 opacity-30">/</span>
                 <span className="text-white/90">{categoryTitle}</span>
@@ -243,6 +247,7 @@ export default async function ProductPage({ params }: ProductPageProps) {
                           alt={product.frontmatter.title}
                           fill
                           className="object-contain p-8 transition-transform duration-700 group-hover:scale-110 z-10"
+                          sizes="(max-width: 768px) 100vw, (max-width: 1024px) 50vw, 33vw"
                         />
                         {/* Subtle reflection/shadow effect */}
                         <div className="absolute bottom-4 left-1/2 -translate-x-1/2 w-2/3 h-4 bg-black/5 blur-xl rounded-full" />
@@ -352,6 +357,12 @@ export default async function ProductPage({ params }: ProductPageProps) {
   return (
     <div className="flex flex-col min-h-screen bg-white relative">
       {/* Product Hero */}
+      <ProductEngagementTracker
+        productName={product.frontmatter.title}
+        productSlug={productSlug}
+        categories={product.frontmatter.categories}
+        sku={product.frontmatter.sku}
+      />
       <section className="relative pt-40 pb-24 overflow-hidden bg-primary-dark">
         {/* 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" />
@@ -360,8 +371,11 @@ 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-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
+                href={`/${locale}/${await mapFileSlugToTranslated('products', locale)}`}
+                className="hover:text-accent transition-colors"
+              >
+                {t.has('breadcrumb') ? t('breadcrumb') : t('title').replace(/<[^>]*>/g, '')}
               </Link>
               <span className="mx-4 opacity-20">/</span>
               <Link

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

@@ -3,27 +3,23 @@ import { getTranslations } from 'next-intl/server';
 import { OGImageTemplate } from '@/components/OGImageTemplate';
 import { getOgFonts, OG_IMAGE_SIZE } from '@/lib/og-helper';
 
+export const size = OG_IMAGE_SIZE;
+export const contentType = 'image/png';
 export const runtime = 'nodejs';
 
-export default async function Image({ params: { locale } }: { params: { locale: string } }) {
+export default async function Image({ params }: { params: Promise<{ locale: string }> }) {
+  const { locale } = await params;
   const t = await getTranslations({ locale, namespace: 'Products' });
   const fonts = await getOgFonts();
 
-  const title = t('meta.title') || t('title');
+  const title = t('meta.title') || t('breadcrumb') || t('title').replace(/<[^>]*>/g, '');
   const description = t('meta.description') || t('subtitle');
 
   return new ImageResponse(
-    (
-      <OGImageTemplate
-        title={title}
-        description={description}
-        label="Products"
-      />
-    ),
+    <OGImageTemplate title={title} description={description} label="Products" />,
     {
       ...OG_IMAGE_SIZE,
       fonts,
-    }
+    },
   );
 }
-

app/[locale]/products/page.tsx

@@ -1,13 +1,12 @@
 import Reveal from '@/components/Reveal';
 import Scribble from '@/components/Scribble';
 import { Badge, Button, Card, Container, Heading, Section } from '@/components/ui';
-import { getTranslations } from 'next-intl/server';
+import { getTranslations, setRequestLocale } from 'next-intl/server';
 import { Metadata } from 'next';
 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';
+import TrackedLink from '@/components/analytics/TrackedLink';
 
 interface ProductsPageProps {
   params: Promise<{
@@ -18,24 +17,23 @@ interface ProductsPageProps {
 export async function generateMetadata({ params }: ProductsPageProps): Promise<Metadata> {
   const { locale } = await params;
   const t = await getTranslations({ locale, namespace: 'Products' });
-  const title = t('meta.title') || t('title');
+  const title = t('meta.title') || t('breadcrumb') || t('title').replace(/<[^>]*>/g, '');
   const description = t('meta.description') || t('subtitle');
   return {
     title,
     description,
     alternates: {
-      canonical: `/${locale}/products`,
+      canonical: `${SITE_URL}/${locale}/${await mapFileSlugToTranslated('products', locale)}`,
       languages: {
-        de: '/de/products',
-        en: '/en/products',
-        'x-default': '/en/products',
+        de: `${SITE_URL}/de/${await mapFileSlugToTranslated('products', 'de')}`,
+        en: `${SITE_URL}/en/${await mapFileSlugToTranslated('products', 'en')}`,
+        'x-default': `${SITE_URL}/en/${await mapFileSlugToTranslated('products', 'en')}`,
       },
     },
     openGraph: {
       title: `${title} | KLZ Cables`,
       description,
-      url: `${SITE_URL}/${locale}/products`,
-      images: getOGImageMetadata('products', title, locale),
+      url: `${SITE_URL}/${locale}/${await mapFileSlugToTranslated('products', locale)}`,
     },
     twitter: {
       card: 'summary_large_image',
@@ -47,6 +45,7 @@ export async function generateMetadata({ params }: ProductsPageProps): Promise<M
 
 export default async function ProductsPage({ params }: ProductsPageProps) {
   const { locale } = await params;
+  setRequestLocale(locale);
   const t = await getTranslations('Products');
 
   // Get translated category slugs
@@ -55,34 +54,36 @@ export default async function ProductsPage({ params }: ProductsPageProps) {
   const highVoltageSlug = await mapFileSlugToTranslated('high-voltage-cables', locale);
   const solarSlug = await mapFileSlugToTranslated('solar-cables', locale);
 
+  const productsSlug = await mapFileSlugToTranslated('products', locale);
+
   const categories = [
     {
       title: t('categories.lowVoltage.title'),
       desc: t('categories.lowVoltage.description'),
       img: '/uploads/2024/11/low-voltage-category.webp',
       icon: '/uploads/2024/11/Low-Voltage.svg',
-      href: `/${locale}/products/${lowVoltageSlug}`,
+      href: `/${locale}/${productsSlug}/${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: `/${locale}/products/${mediumVoltageSlug}`,
+      href: `/${locale}/${productsSlug}/${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: `/${locale}/products/${highVoltageSlug}`,
+      href: `/${locale}/${productsSlug}/${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: `/${locale}/products/${solarSlug}`,
+      href: `/${locale}/${productsSlug}/${solarSlug}`,
     },
   ];
 
@@ -134,7 +135,15 @@ export default async function ProductsPage({ params }: ProductsPageProps) {
           <div className="grid grid-cols-1 md:grid-cols-2 gap-6 md:gap-8 lg:gap-12">
             {categories.map((category, idx) => (
               <Reveal key={idx} delay={idx * 100}>
-                <Link key={idx} href={category.href} className="group block">
+                <TrackedLink
+                  key={idx}
+                  href={category.href}
+                  className="group block"
+                  eventProperties={{
+                    category_title: category.title,
+                    location: 'products_index',
+                  }}
+                >
                   <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
@@ -142,8 +151,7 @@ export default async function ProductsPage({ params }: ProductsPageProps) {
                         alt={category.title}
                         fill
                         className="object-cover transition-transform duration-1000 group-hover:scale-105"
-                        sizes="(max-width: 768px) 100vw, 50vw"
-                        unoptimized
+                        sizes="(max-width: 768px) 100vw, (max-width: 1024px) 50vw, 33vw"
                       />
                       <div className="absolute inset-0 image-overlay-gradient opacity-80 group-hover:opacity-90 transition-opacity duration-500" />
 
@@ -195,7 +203,7 @@ export default async function ProductsPage({ params }: ProductsPageProps) {
                       </div>
                     </div>
                   </Card>
-                </Link>
+                </TrackedLink>
               </Reveal>
             ))}
           </div>

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

@@ -3,9 +3,12 @@ import { getTranslations } from 'next-intl/server';
 import { OGImageTemplate } from '@/components/OGImageTemplate';
 import { getOgFonts, OG_IMAGE_SIZE } from '@/lib/og-helper';
 
+export const size = OG_IMAGE_SIZE;
+export const contentType = 'image/png';
 export const runtime = 'nodejs';
 
-export default async function Image({ params: { locale } }: { params: { locale: string } }) {
+export default async function Image({ params }: { params: Promise<{ locale: string }> }) {
+  const { locale } = await params;
   const t = await getTranslations({ locale, namespace: 'Team' });
   const fonts = await getOgFonts();
 
@@ -13,17 +16,10 @@ export default async function Image({ params: { locale } }: { params: { locale:
   const description = t('meta.description') || t('hero.title');
 
   return new ImageResponse(
-    (
-      <OGImageTemplate
-        title={title}
-        description={description}
-        label="Our Team"
-      />
-    ),
+    <OGImageTemplate title={title} description={description} label="Our Team" />,
     {
       ...OG_IMAGE_SIZE,
       fonts,
-    }
+    },
   );
 }
-

app/[locale]/team/page.tsx

@@ -1,12 +1,12 @@
-import { getTranslations } from 'next-intl/server';
+import { getTranslations, setRequestLocale } from 'next-intl/server';
 import { Metadata } from 'next';
 import JsonLd from '@/components/JsonLd';
 import { getBreadcrumbSchema, SITE_URL } from '@/lib/schema';
 import { Section, Container, Heading, Badge, Button } from '@/components/ui';
-import { getOGImageMetadata } from '@/lib/metadata';
 import Image from 'next/image';
 import Reveal from '@/components/Reveal';
 import Gallery from '@/components/team/Gallery';
+import TrackedButton from '@/components/analytics/TrackedButton';
 
 interface TeamPageProps {
   params: Promise<{
@@ -23,18 +23,17 @@ export async function generateMetadata({ params }: TeamPageProps): Promise<Metad
     title,
     description,
     alternates: {
-      canonical: `/${locale}/team`,
+      canonical: `${SITE_URL}/${locale}/team`,
       languages: {
-        de: '/de/team',
-        en: '/en/team',
-        'x-default': '/en/team',
+        de: `${SITE_URL}/de/team`,
+        en: `${SITE_URL}/en/team`,
+        'x-default': `${SITE_URL}/en/team`,
       },
     },
     openGraph: {
       title: `${title} | KLZ Cables`,
       description,
       url: `${SITE_URL}/${locale}/team`,
-      images: getOGImageMetadata('team', title, locale),
     },
     twitter: {
       card: 'summary_large_image',
@@ -46,6 +45,7 @@ export async function generateMetadata({ params }: TeamPageProps): Promise<Metad
 
 export default async function TeamPage({ params }: TeamPageProps) {
   const { locale } = await params;
+  setRequestLocale(locale);
   const t = await getTranslations({ locale, namespace: 'Team' });
 
   return (
@@ -93,6 +93,7 @@ export default async function TeamPage({ params }: TeamPageProps) {
               alt="KLZ Team"
               fill
               className="object-cover scale-105 animate-slow-zoom opacity-30 md:opacity-40"
+              sizes="100vw"
               priority
             />
             <div className="absolute inset-0 bg-gradient-to-b from-primary-dark/80 via-primary-dark/40 to-primary-dark/80" />
@@ -133,15 +134,20 @@ export default async function TeamPage({ params }: 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
+              <TrackedButton
                 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"
+                eventProperties={{
+                  type: 'social_linkedin',
+                  person: 'Michael Bodemer',
+                  location: 'team_page',
+                }}
               >
                 {t('michael.linkedin')}
                 <span className="ml-3 transition-transform group-hover:translate-x-2">&rarr;</span>
-              </Button>
+              </TrackedButton>
             </div>
           </Reveal>
           <Reveal className="w-full lg:w-1/2 relative min-h-[400px] md:min-h-[600px] lg:min-h-screen overflow-hidden order-1 lg:order-2">
@@ -241,15 +247,20 @@ export default async function TeamPage({ params }: 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
+              <TrackedButton
                 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"
+                eventProperties={{
+                  type: 'social_linkedin',
+                  person: 'Klaus Mintel',
+                  location: 'team_page',
+                }}
               >
                 {t('klaus.linkedin')}
                 <span className="ml-3 transition-transform group-hover:translate-x-2">&rarr;</span>
-              </Button>
+              </TrackedButton>
             </div>
           </Reveal>
         </div>

app/api/save-session/route.ts

@@ -0,0 +1,32 @@
+import { NextRequest, NextResponse } from 'next/server';
+import fs from 'fs';
+import path from 'path';
+
+export async function POST(req: NextRequest) {
+    // Only allow in development
+    if (process.env.NODE_ENV === 'production') {
+        return NextResponse.json({ error: 'This route is disabled in production.' }, { status: 403 });
+    }
+
+    try {
+        const body = await req.json();
+
+        // Ensure we are in the project root by using process.cwd()
+        // Path: <project-root>/remotion/session.json
+        const remotionDir = path.join(process.cwd(), 'remotion');
+        const filePath = path.join(remotionDir, 'session.json');
+
+        // Create remotion directory if it doesn't exist
+        if (!fs.existsSync(remotionDir)) {
+            fs.mkdirSync(remotionDir, { recursive: true });
+        }
+
+        // Write the JSON file
+        fs.writeFileSync(filePath, JSON.stringify(body, null, 2), 'utf-8');
+
+        return NextResponse.json({ success: true, path: filePath });
+    } catch (error: any) {
+        console.error('Failed to save session:', error);
+        return NextResponse.json({ error: error.message }, { status: 500 });
+    }
+}

app/errors/api/relay/route.ts

@@ -25,7 +25,7 @@ export async function POST(request: NextRequest) {
       return NextResponse.json({ error: 'Empty envelope' }, { status: 400 });
     }
 
-    const header = JSON.parse(lines[0]);
+    JSON.parse(lines[0]);
     const realDsn = config.errors.glitchtip.dsn;
 
     if (!realDsn) {

commitlint.config.cjs

@@ -1,3 +1,4 @@
+/* eslint-disable no-undef */
 module.exports = {
   extends: ['@commitlint/config-conventional'],
   rules: {

components/CMSConnectivityNotice.tsx

@@ -1,11 +1,11 @@
 'use client';
 
 import React, { useEffect, useState } from 'react';
-import { AlertCircle, RefreshCw, Database } from 'lucide-react';
+import { AlertCircle, RefreshCw } from 'lucide-react';
 import { config } from '../lib/config';
 
 export default function CMSConnectivityNotice() {
-  const [status, setStatus] = useState<'checking' | 'ok' | 'error'>('checking');
+  const [, setStatus] = useState<'checking' | 'ok' | 'error'>('checking');
   const [errorMsg, setErrorMsg] = useState('');
   const [isVisible, setIsVisible] = useState(false);
 
@@ -32,7 +32,7 @@ export default function CMSConnectivityNotice() {
           setStatus('ok');
           setIsVisible(false);
         }
-      } catch (err) {
+      } catch {
         // If it's a connection error, only show if we are really debugging
         if (isDebug || isLocal) {
           setStatus('error');

components/ContactForm.tsx

@@ -5,11 +5,30 @@ import { useTranslations } from 'next-intl';
 import { Button, Heading, Card, Input, Textarea, Label } from '@/components/ui';
 import { sendContactFormAction } from '@/app/actions/contact';
 import { useAnalytics } from '@/components/analytics/useAnalytics';
+import { AnalyticsEvents } from '@/components/analytics/analytics-events';
 
 export default function ContactForm() {
   const t = useTranslations('Contact');
   const { trackEvent } = useAnalytics();
   const [status, setStatus] = useState<'idle' | 'submitting' | 'success' | 'error'>('idle');
+  const [hasStarted, setHasStarted] = useState(false);
+
+  const handleFocus = (fieldId: string) => {
+    // Initial form start
+    if (!hasStarted) {
+      setHasStarted(true);
+      trackEvent(AnalyticsEvents.FORM_START, {
+        form_id: 'contact_form',
+        form_name: 'Contact',
+      });
+    }
+
+    // Field-level transparency
+    trackEvent(AnalyticsEvents.FORM_FIELD_FOCUS, {
+      form_id: 'contact_form',
+      field_id: fieldId,
+    });
+  };
 
   async function handleSubmit(e: React.FormEvent<HTMLFormElement>) {
     e.preventDefault();
@@ -29,10 +48,18 @@ export default function ContactForm() {
         (e.target as HTMLFormElement).reset();
       } else {
         console.error('Contact form submission failed:', { email, error: result.error });
+        trackEvent(AnalyticsEvents.FORM_ERROR, {
+          form_id: 'contact_form',
+          error: result.error || 'submission_failed',
+        });
         setStatus('error');
       }
     } catch (error) {
       console.error('Contact form submission error:', { email, error });
+      trackEvent(AnalyticsEvents.FORM_ERROR, {
+        form_id: 'contact_form',
+        error: (error as Error).message || 'unexpected_error',
+      });
       setStatus('error');
     }
   }
@@ -112,7 +139,7 @@ export default function ContactForm() {
             name="name"
             autoComplete="name"
             enterKeyHint="next"
-            placeholder={t('form.namePlaceholder')}
+            onFocus={() => handleFocus('name')}
             required
           />
         </div>
@@ -126,6 +153,7 @@ export default function ContactForm() {
             inputMode="email"
             enterKeyHint="next"
             placeholder={t('form.emailPlaceholder')}
+            onFocus={() => handleFocus('email')}
             required
           />
         </div>
@@ -137,6 +165,7 @@ export default function ContactForm() {
             rows={4}
             enterKeyHint="send"
             placeholder={t('form.messagePlaceholder')}
+            onFocus={() => handleFocus('message')}
             required
           />
         </div>

components/DatasheetDownload.tsx

@@ -2,6 +2,8 @@
 
 import { cn } from '@/components/ui/utils';
 import { useTranslations } from 'next-intl';
+import { useAnalytics } from './analytics/useAnalytics';
+import { AnalyticsEvents } from './analytics/analytics-events';
 
 interface DatasheetDownloadProps {
   datasheetPath: string;
@@ -10,34 +12,42 @@ interface DatasheetDownloadProps {
 
 export default function DatasheetDownload({ datasheetPath, className }: DatasheetDownloadProps) {
   const t = useTranslations('Products');
+  const { trackEvent } = useAnalytics();
 
   return (
-    <div className={cn("mt-8 animate-slight-fade-in-from-bottom", className)}>
-      <a 
-        href={datasheetPath} 
+    <div className={cn('mt-8 animate-slight-fade-in-from-bottom', className)}>
+      <a
+        href={datasheetPath}
         target="_blank"
         rel="noopener noreferrer"
+        onClick={() =>
+          trackEvent(AnalyticsEvents.DOWNLOAD, {
+            file_name: datasheetPath.split('/').pop(),
+            file_path: datasheetPath,
+            location: 'product_page',
+          })
+        }
         className="group relative block w-full overflow-hidden rounded-[32px] bg-primary-dark p-1 transition-all duration-500 hover:shadow-[0_20px_50px_rgba(0,0,0,0.2)] hover:-translate-y-1"
       >
         {/* Animated Background Gradient */}
         <div className="absolute inset-0 bg-gradient-to-r from-accent via-saturated to-accent opacity-20 group-hover:opacity-40 transition-opacity duration-500 animate-gradient-x" />
-        
+
         {/* Inner Content */}
         <div className="relative flex items-center gap-6 rounded-[31px] bg-primary-dark/90 backdrop-blur-xl p-6 md:p-8 border border-white/10">
           {/* Icon Container */}
           <div className="relative flex h-16 w-16 flex-shrink-0 items-center justify-center rounded-2xl bg-white/5 border border-white/10 group-hover:bg-accent group-hover:border-white/20 transition-all duration-500">
             <div className="absolute inset-0 rounded-2xl bg-accent/20 blur-xl opacity-0 group-hover:opacity-100 transition-opacity duration-500" />
-            <svg 
-              className="relative h-8 w-8 text-white transition-transform duration-500 group-hover:scale-110 group-hover:rotate-3" 
-              fill="none" 
-              stroke="currentColor" 
+            <svg
+              className="relative h-8 w-8 text-white transition-transform duration-500 group-hover:scale-110 group-hover:rotate-3"
+              fill="none"
+              stroke="currentColor"
               viewBox="0 0 24 24"
             >
-              <path 
-                strokeLinecap="round" 
-                strokeLinejoin="round" 
-                strokeWidth={1.5} 
-                d="M12 10v6m0 0l-3-3m3 3l3-3m2 8H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z" 
+              <path
+                strokeLinecap="round"
+                strokeLinejoin="round"
+                strokeWidth={1.5}
+                d="M12 10v6m0 0l-3-3m3 3l3-3m2 8H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z"
               />
             </svg>
           </div>
@@ -45,7 +55,9 @@ export default function DatasheetDownload({ datasheetPath, className }: Datashee
           {/* Text Content */}
           <div className="flex-1">
             <div className="flex items-center gap-2 mb-1">
-              <span className="text-[10px] font-black uppercase tracking-[0.2em] text-accent">PDF Datasheet</span>
+              <span className="text-[10px] font-black uppercase tracking-[0.2em] text-accent">
+                PDF Datasheet
+              </span>
             </div>
             <h3 className="text-xl md:text-2xl font-black text-white uppercase tracking-tighter leading-none group-hover:text-accent transition-colors duration-300">
               {t('downloadDatasheet')}
@@ -58,7 +70,12 @@ export default function DatasheetDownload({ datasheetPath, className }: Datashee
           {/* Arrow Icon */}
           <div className="flex h-10 w-10 items-center justify-center rounded-full bg-white/5 text-white/20 group-hover:bg-accent group-hover:text-white group-hover:translate-x-1 transition-all duration-500">
             <svg className="h-6 w-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-              <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2.5} d="M9 5l7 7-7 7" />
+              <path
+                strokeLinecap="round"
+                strokeLinejoin="round"
+                strokeWidth={2.5}
+                d="M9 5l7 7-7 7"
+              />
             </svg>
           </div>
         </div>

components/Footer.tsx

@@ -1,40 +1,65 @@
+'use client';
+
 import Link from 'next/link';
 import Image from 'next/image';
 import { useTranslations, useLocale } from 'next-intl';
 import { Container } from './ui';
+import { useAnalytics } from './analytics/useAnalytics';
+import { AnalyticsEvents } from './analytics/analytics-events';
 
 export default function Footer() {
   const t = useTranslations('Footer');
   const navT = useTranslations('Navigation');
+  const { trackEvent } = useAnalytics();
   const locale = useLocale();
   const currentYear = new Date().getFullYear();
 
   return (
-    <footer className="bg-primary text-white py-24 relative overflow-hidden">
+    <footer className="bg-primary text-white py-24 relative overflow-hidden content-visibility-auto">
       <div className="absolute top-0 left-0 w-full h-px bg-gradient-to-r from-transparent via-white/20 to-transparent" />
-      
+
       <Container>
         <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-12 gap-16 mb-20">
           {/* Brand Column */}
           <div className="lg:col-span-4 space-y-8">
-            <Link href={`/${locale}`} className="inline-block group">
-              <Image 
-                src="/logo-white.svg" 
-                alt={t('products')} 
-                width={150} 
-                height={40} 
+            <Link
+              href={`/${locale}`}
+              className="inline-block group"
+              onClick={() =>
+                trackEvent(AnalyticsEvents.BUTTON_CLICK, {
+                  target: 'home_logo',
+                  location: 'footer',
+                })
+              }
+            >
+              <Image
+                src="/logo-white.svg"
+                alt={t('products')}
+                width={150}
+                height={40}
                 className="h-10 w-auto transition-transform duration-500 group-hover:scale-110"
-                unoptimized
               />
             </Link>
             <p className="text-white/60 text-base md:text-lg leading-relaxed max-w-sm">
               {t('tagline')}
             </p>
             <div className="flex gap-4">
-              <a href="https://www.linkedin.com/company/klz-vertriebs-gmbh/" target="_blank" rel="noopener noreferrer" className="w-12 h-12 rounded-full bg-white/5 flex items-center justify-center text-white hover:bg-accent hover:text-primary-dark transition-all duration-300 border border-white/10">
+              <a
+                href="https://www.linkedin.com/company/klz-vertriebs-gmbh/"
+                target="_blank"
+                rel="noopener noreferrer"
+                onClick={() =>
+                  trackEvent(AnalyticsEvents.LINK_CLICK, {
+                    type: 'social',
+                    target: 'linkedin',
+                    location: 'footer',
+                  })
+                }
+                className="w-12 h-12 rounded-full bg-white/5 flex items-center justify-center text-white hover:bg-accent hover:text-primary-dark transition-all duration-300 border border-white/10"
+              >
                 <span className="sr-only">LinkedIn</span>
                 <svg className="w-5 h-5 fill-current" viewBox="0 0 24 24">
-                  <path d="M19 0h-14c-2.761 0-5 2.239-5 5v14c0 2.761 2.239 5 5 5h14c2.762 0 5-2.239 5-5v-14c0-2.761-2.238-5-5-5zm-11 19h-3v-11h3v11zm-1.5-12.268c-.966 0-1.75-.79-1.75-1.764s.784-1.764 1.75-1.764 1.75.79 1.75 1.764-.783 1.764-1.75 1.764zm13.5 12.268h-3v-5.604c0-3.368-4-3.113-4 0v5.604h-3v-11h3v1.765c1.396-2.586 7-2.777 7 2.476v6.759z"/>
+                  <path d="M19 0h-14c-2.761 0-5 2.239-5 5v14c0 2.761 2.239 5 5 5h14c2.762 0 5-2.239 5-5v-14c0-2.761-2.238-5-5-5zm-11 19h-3v-11h3v11zm-1.5-12.268c-.966 0-1.75-.79-1.75-1.764s.784-1.764 1.75-1.764 1.75.79 1.75 1.764-.783 1.764-1.75 1.764zm13.5 12.268h-3v-5.604c0-3.368-4-3.113-4 0v5.604h-3v-11h3v1.765c1.396-2.586 7-2.777 7 2.476v6.759z" />
                 </svg>
               </a>
             </div>
@@ -42,52 +67,172 @@ export default function Footer() {
 
           {/* Links Columns */}
           <div className="lg:col-span-2">
-            <h4 className="text-accent font-bold uppercase tracking-widest text-xs md:text-sm mb-8">{t('legal')}</h4>
+            <h4 className="text-accent font-bold uppercase tracking-widest text-xs md:text-sm mb-8">
+              {t('legal')}
+            </h4>
             <ul className="space-y-4 text-white/70 list-none m-0 p-0">
-              <li><Link href={`/${locale}/${t('legalNoticeSlug')}`} className="text-white/70 hover:text-accent transition-all duration-300 hover:translate-x-1 inline-block">{t('legalNotice')}</Link></li>
-              <li><Link href={`/${locale}/${t('privacyPolicySlug')}`} className="text-white/70 hover:text-accent transition-all duration-300 hover:translate-x-1 inline-block">{t('privacyPolicy')}</Link></li>
-              <li><Link href={`/${locale}/${t('termsSlug')}`} className="text-white/70 hover:text-accent transition-all duration-300 hover:translate-x-1 inline-block">{t('terms')}</Link></li>
+              <li>
+                <Link
+                  href={`/${locale}/${t('legalNoticeSlug')}`}
+                  className="text-white/70 hover:text-accent transition-all duration-300 hover:translate-x-1 inline-block"
+                  onClick={() =>
+                    trackEvent(AnalyticsEvents.LINK_CLICK, {
+                      label: t('legalNotice'),
+                      href: t('legalNoticeSlug'),
+                      location: 'footer_legal',
+                    })
+                  }
+                >
+                  {t('legalNotice')}
+                </Link>
+              </li>
+              <li>
+                <Link
+                  href={`/${locale}/${t('privacyPolicySlug')}`}
+                  className="text-white/70 hover:text-accent transition-all duration-300 hover:translate-x-1 inline-block"
+                  onClick={() =>
+                    trackEvent(AnalyticsEvents.LINK_CLICK, {
+                      label: t('privacyPolicy'),
+                      href: t('privacyPolicySlug'),
+                      location: 'footer_legal',
+                    })
+                  }
+                >
+                  {t('privacyPolicy')}
+                </Link>
+              </li>
+              <li>
+                <Link
+                  href={`/${locale}/${t('termsSlug')}`}
+                  className="text-white/70 hover:text-accent transition-all duration-300 hover:translate-x-1 inline-block"
+                  onClick={() =>
+                    trackEvent(AnalyticsEvents.LINK_CLICK, {
+                      label: t('terms'),
+                      href: t('termsSlug'),
+                      location: 'footer_legal',
+                    })
+                  }
+                >
+                  {t('terms')}
+                </Link>
+              </li>
             </ul>
           </div>
 
           <div className="lg:col-span-2">
-            <h4 className="text-accent font-bold uppercase tracking-widest text-xs md:text-sm mb-8">{t('company')}</h4>
+            <h4 className="text-accent font-bold uppercase tracking-widest text-xs md:text-sm mb-8">
+              {t('company')}
+            </h4>
             <ul className="space-y-4 text-white/70 list-none m-0 p-0">
-              <li><Link href={`/${locale}/team`} className="text-white/70 hover:text-accent transition-all duration-300 hover:translate-x-1 inline-block">{navT('team')}</Link></li>
-              <li><Link href={`/${locale}/products`} className="text-white/70 hover:text-accent transition-all duration-300 hover:translate-x-1 inline-block">{navT('products')}</Link></li>
-              <li><Link href={`/${locale}/blog`} className="text-white/70 hover:text-accent transition-all duration-300 hover:translate-x-1 inline-block">{navT('blog')}</Link></li>
-              <li><Link href={`/${locale}/contact`} className="text-white/70 hover:text-accent transition-all duration-300 hover:translate-x-1 inline-block">{navT('contact')}</Link></li>
+              <li>
+                <Link
+                  href={`/${locale}/team`}
+                  className="text-white/70 hover:text-accent transition-all duration-300 hover:translate-x-1 inline-block"
+                  onClick={() =>
+                    trackEvent(AnalyticsEvents.LINK_CLICK, {
+                      label: navT('team'),
+                      href: '/team',
+                      location: 'footer_company',
+                    })
+                  }
+                >
+                  {navT('team')}
+                </Link>
+              </li>
+              <li>
+                <Link
+                  href={`/${locale}/${locale === 'de' ? 'produkte' : 'products'}`}
+                  className="text-white/70 hover:text-accent transition-all duration-300 hover:translate-x-1 inline-block"
+                  onClick={() =>
+                    trackEvent(AnalyticsEvents.LINK_CLICK, {
+                      label: navT('products'),
+                      href: locale === 'de' ? '/produkte' : '/products',
+                      location: 'footer_company',
+                    })
+                  }
+                >
+                  {navT('products')}
+                </Link>
+              </li>
+              <li>
+                <Link
+                  href={`/${locale}/blog`}
+                  className="text-white/70 hover:text-accent transition-all duration-300 hover:translate-x-1 inline-block"
+                  onClick={() =>
+                    trackEvent(AnalyticsEvents.LINK_CLICK, {
+                      label: navT('blog'),
+                      href: '/blog',
+                      location: 'footer_company',
+                    })
+                  }
+                >
+                  {navT('blog')}
+                </Link>
+              </li>
+              <li>
+                <Link
+                  href={`/${locale}/contact`}
+                  className="text-white/70 hover:text-accent transition-all duration-300 hover:translate-x-1 inline-block"
+                  onClick={() =>
+                    trackEvent(AnalyticsEvents.LINK_CLICK, {
+                      label: navT('contact'),
+                      href: '/contact',
+                      location: 'footer_company',
+                    })
+                  }
+                >
+                  {navT('contact')}
+                </Link>
+              </li>
             </ul>
           </div>
 
           {/* Recent Posts Column */}
           <div className="lg:col-span-4">
-            <h4 className="text-accent font-bold uppercase tracking-widest text-xs md:text-sm mb-8">{t('recentPosts')}</h4>
+            <h4 className="text-accent font-bold uppercase tracking-widest text-xs md:text-sm mb-8">
+              {t('recentPosts')}
+            </h4>
             <ul className="space-y-6 list-none m-0 p-0">
               {[
                 {
-                  title: locale === 'de'
-                    ? "Windparkbau im Fokus: drei typische Kabelherausforderungen"
-                    : "Focus on wind farm construction: three typical cable challenges",
-                  slug: locale === 'de'
-                    ? "windparkbau-im-fokus-drei-typische-kabelherausforderungen"
-                    : "focus-on-wind-farm-construction-three-typical-cable-challenges"
+                  title:
+                    locale === 'de'
+                      ? 'Windparkbau im Fokus: drei typische Kabelherausforderungen'
+                      : 'Focus on wind farm construction: three typical cable challenges',
+                  slug:
+                    locale === 'de'
+                      ? 'windparkbau-im-fokus-drei-typische-kabelherausforderungen'
+                      : 'focus-on-wind-farm-construction-three-typical-cable-challenges',
                 },
                 {
-                  title: locale === 'de'
-                    ? "Warum das N2XS(F)2Y das ideale Kabel für Ihr Energieprojekt ist"
-                    : "Why the N2XS(F)2Y is the ideal cable for your energy project",
-                  slug: locale === 'de'
-                    ? "n2xsf2y-mittelspannungskabel-energieprojekt"
-                    : "why-the-n2xsf2y-is-the-ideal-cable-for-your-energy-project"
-                }
+                  title:
+                    locale === 'de'
+                      ? 'Warum das N2XS(F)2Y das ideale Kabel für Ihr Energieprojekt ist'
+                      : 'Why the N2XS(F)2Y is the ideal cable for your energy project',
+                  slug:
+                    locale === 'de'
+                      ? 'n2xsf2y-mittelspannungskabel-energieprojekt'
+                      : 'why-the-n2xsf2y-is-the-ideal-cable-for-your-energy-project',
+                },
               ].map((post, i) => (
                 <li key={i}>
-                  <Link href={`/${locale}/blog/${post.slug}`} className="group block text-white/80">
+                  <Link
+                    href={`/${locale}/blog/${post.slug}`}
+                    className="group block text-white/80"
+                    onClick={() =>
+                      trackEvent(AnalyticsEvents.BLOG_POST_VIEW, {
+                        title: post.title,
+                        slug: post.slug,
+                        location: 'footer_recent',
+                      })
+                    }
+                  >
                     <p className="text-white/80 font-bold group-hover:text-accent transition-colors leading-snug mb-2 text-base md:text-base">
                       {post.title}
                     </p>
-                    <span className="text-xs text-white/40 uppercase tracking-widest">{t('readArticle')} &rarr;</span>
+                    <span className="text-xs text-white/40 uppercase tracking-widest">
+                      {t('readArticle')} &rarr;
+                    </span>
                   </Link>
                 </li>
               ))}
@@ -98,8 +243,36 @@ export default function Footer() {
         <div className="pt-12 border-t border-white/10 flex flex-col md:flex-row justify-between items-center gap-8 text-white/40 text-xs md:text-sm font-medium">
           <p>{t('copyright', { year: currentYear })}</p>
           <div className="flex gap-8">
-            <Link href="/en" locale="en" className="hover:text-white transition-colors">English</Link>
-            <Link href="/de" locale="de" className="hover:text-white transition-colors">Deutsch</Link>
+            <Link
+              href="/en"
+              locale="en"
+              className="hover:text-white transition-colors"
+              onClick={() =>
+                trackEvent(AnalyticsEvents.TOGGLE_SWITCH, {
+                  type: 'language',
+                  from: locale,
+                  to: 'en',
+                  location: 'footer',
+                })
+              }
+            >
+              English
+            </Link>
+            <Link
+              href="/de"
+              locale="de"
+              className="hover:text-white transition-colors"
+              onClick={() =>
+                trackEvent(AnalyticsEvents.TOGGLE_SWITCH, {
+                  type: 'language',
+                  from: locale,
+                  to: 'de',
+                  location: 'footer',
+                })
+              }
+            >
+              Deutsch
+            </Link>
           </div>
         </div>
       </Container>

components/Header.tsx

@@ -8,16 +8,19 @@ import { usePathname } from 'next/navigation';
 import { Button } from './ui';
 import { useEffect, useState } from 'react';
 import { cn } from './ui';
+import { useAnalytics } from './analytics/useAnalytics';
+import { AnalyticsEvents } from './analytics/analytics-events';
 
 export default function Header() {
   const t = useTranslations('Navigation');
   const pathname = usePathname();
+  const { trackEvent } = useAnalytics();
   const [isScrolled, setIsScrolled] = useState(false);
   const [isMobileMenuOpen, setIsMobileMenuOpen] = useState(false);
-  
+
   // Extract locale from pathname
   const currentLocale = pathname.split('/')[1] || 'en';
-  
+
   // Check if homepage
   const isHomePage = pathname === `/${currentLocale}` || pathname === '/';
 
@@ -30,11 +33,6 @@ export default function Header() {
     return () => window.removeEventListener('scroll', handleScroll);
   }, []);
 
-  // Close mobile menu on route change
-  useEffect(() => {
-    setIsMobileMenuOpen(false);
-  }, [pathname]);
-
   // Prevent scroll when mobile menu is open
   useEffect(() => {
     if (isMobileMenuOpen) {
@@ -43,7 +41,7 @@ export default function Header() {
       document.body.style.overflow = 'unset';
     }
   }, [isMobileMenuOpen]);
-  
+
   // Function to get path for a different locale
   const getPathForLocale = (newLocale: string) => {
     const segments = pathname.split('/');
@@ -54,20 +52,20 @@ export default function Header() {
   const menuItems = [
     { label: t('home'), href: '/' },
     { label: t('team'), href: '/team' },
-    { label: t('products'), href: '/products' },
+    { label: t('products'), href: currentLocale === 'de' ? '/produkte' : '/products' },
     { label: t('blog'), href: '/blog' },
   ];
 
   const headerClass = cn(
-    "fixed top-0 left-0 right-0 z-50 transition-all duration-500 safe-area-p transform-gpu",
+    'fixed top-0 left-0 right-0 z-50 transition-all duration-500 safe-area-p transform-gpu',
     {
-      "bg-transparent py-4 md:py-8": isHomePage && !isScrolled && !isMobileMenuOpen,
-      "bg-primary py-3 md:py-4 shadow-2xl": !isHomePage || isScrolled || isMobileMenuOpen,
-    }
+      'bg-transparent py-4 md:py-8': isHomePage && !isScrolled && !isMobileMenuOpen,
+      'bg-primary py-3 md:py-4 shadow-2xl': !isHomePage || isScrolled || isMobileMenuOpen,
+    },
   );
 
-  const textColorClass = "text-white";
-  const logoSrc = "/logo-white.svg";
+  const textColorClass = 'text-white';
+  const logoSrc = '/logo-white.svg';
 
   return (
     <>
@@ -75,16 +73,24 @@ export default function Header() {
         className={headerClass}
         initial={{ y: -100, opacity: 0 }}
         animate={{ y: 0, opacity: 1 }}
-        transition={{ duration: 0.8, ease: "easeOut" }}
+        transition={{ duration: 0.8, ease: 'easeOut' }}
       >
         <div className="container mx-auto px-4 md:px-12 lg:px-16 max-w-7xl flex items-center justify-between">
           <motion.div
             className="flex-shrink-0 group touch-target"
             initial={{ scale: 0.8, opacity: 0 }}
             animate={{ scale: 1, opacity: 1 }}
-            transition={{ duration: 0.6, ease: "easeOut", delay: 0.1 }}
+            transition={{ duration: 0.6, ease: 'easeOut', delay: 0.1 }}
           >
-            <Link href={`/${currentLocale}`}>
+            <Link
+              href={`/${currentLocale}`}
+              onClick={() =>
+                trackEvent(AnalyticsEvents.BUTTON_CLICK, {
+                  target: 'home_logo',
+                  location: 'header',
+                })
+              }
+            >
               <Image
                 src={logoSrc}
                 alt={t('home')}
@@ -92,7 +98,6 @@ export default function Header() {
                 height={120}
                 className="h-10 md:h-14 w-auto transition-all duration-500 group-hover:scale-110"
                 priority
-                unoptimized
               />
             </Link>
           </motion.div>
@@ -105,25 +110,27 @@ export default function Header() {
               visible: {
                 transition: {
                   staggerChildren: 0.08,
-                  delayChildren: 0.3
-                }
-              }
+                  delayChildren: 0.3,
+                },
+              },
             }}
           >
-            <motion.nav
-              className="hidden lg:flex items-center space-x-10"
-              variants={navVariants}
-            >
-              {menuItems.map((item, idx) => (
-                <motion.div
-                  key={item.href}
-                  variants={navLinkVariants}
-                >
+            <motion.nav className="hidden lg:flex items-center space-x-10" variants={navVariants}>
+              {menuItems.map((item, _idx) => (
+                <motion.div key={item.href} variants={navLinkVariants}>
                   <Link
                     href={`/${currentLocale}${item.href === '/' ? '' : item.href}`}
+                    onClick={() => {
+                      setIsMobileMenuOpen(false);
+                      trackEvent(AnalyticsEvents.LINK_CLICK, {
+                        label: item.label,
+                        href: item.href,
+                        location: 'header_nav',
+                      });
+                    }}
                     className={cn(
                       textColorClass,
-                      "hover:text-accent font-bold transition-all duration-500 text-base md:text-lg tracking-tight relative group inline-block hover:-translate-y-0.5"
+                      'hover:text-accent font-bold transition-all duration-500 text-base md:text-lg tracking-tight relative group inline-block hover:-translate-y-0.5',
                     )}
                   >
                     {item.label}
@@ -134,7 +141,7 @@ export default function Header() {
             </motion.nav>
 
             <motion.div
-              className={cn("hidden lg:flex items-center space-x-8", textColorClass)}
+              className={cn('hidden lg:flex items-center space-x-8', textColorClass)}
               variants={headerRightVariants}
             >
               <motion.div
@@ -150,6 +157,14 @@ export default function Header() {
                 >
                   <Link
                     href={getPathForLocale('en')}
+                    onClick={() =>
+                      trackEvent(AnalyticsEvents.TOGGLE_SWITCH, {
+                        type: 'language',
+                        from: currentLocale,
+                        to: 'en',
+                        location: 'header',
+                      })
+                    }
                     className={`hover:text-accent transition-colors flex items-center gap-2 touch-target ${currentLocale === 'en' ? 'text-accent' : 'opacity-60'}`}
                   >
                     EN
@@ -168,23 +183,37 @@ export default function Header() {
                 >
                   <Link
                     href={getPathForLocale('de')}
+                    onClick={() =>
+                      trackEvent(AnalyticsEvents.TOGGLE_SWITCH, {
+                        type: 'language',
+                        from: currentLocale,
+                        to: 'de',
+                        location: 'header',
+                      })
+                    }
                     className={`hover:text-accent transition-colors flex items-center gap-2 touch-target ${currentLocale === 'de' ? 'text-accent' : 'opacity-60'}`}
                   >
                     DE
                   </Link>
                 </motion.div>
               </motion.div>
-              
+
               <motion.div
                 initial={{ scale: 0.9, opacity: 0 }}
                 animate={{ scale: 1, opacity: 1 }}
-                transition={{ duration: 0.6, type: "spring", stiffness: 400, delay: 0.7 }}
+                transition={{ duration: 0.6, type: 'spring', stiffness: 400, delay: 0.7 }}
               >
                 <Button
                   href={`/${currentLocale}/contact`}
                   variant="white"
                   size="md"
                   className="px-8 shadow-xl"
+                  onClick={() =>
+                    trackEvent(AnalyticsEvents.BUTTON_CLICK, {
+                      label: t('contact'),
+                      location: 'header_cta',
+                    })
+                  }
                 >
                   {t('contact')}
                 </Button>
@@ -193,12 +222,28 @@ export default function Header() {
 
             {/* Mobile Menu Button */}
             <motion.button
-              className={cn("lg:hidden touch-target p-2 rounded-xl bg-white/10 border border-white/20 z-50", textColorClass)}
+              className={cn(
+                'lg:hidden touch-target p-2 rounded-xl bg-white/10 border border-white/20 z-50',
+                textColorClass,
+              )}
               aria-label={t('toggleMenu')}
               initial={{ scale: 0.8, opacity: 0, rotate: -180 }}
               animate={{ scale: 1, opacity: 1, rotate: 0 }}
-              transition={{ duration: 0.6, type: "spring", stiffness: 300, damping: 20, delay: 0.5 }}
-              onClick={() => setIsMobileMenuOpen(!isMobileMenuOpen)}
+              transition={{
+                duration: 0.6,
+                type: 'spring',
+                stiffness: 300,
+                damping: 20,
+                delay: 0.5,
+              }}
+              onClick={() => {
+                const newState = !isMobileMenuOpen;
+                setIsMobileMenuOpen(newState);
+                trackEvent(AnalyticsEvents.BUTTON_CLICK, {
+                  type: 'mobile_menu',
+                  action: newState ? 'open' : 'close',
+                });
+              }}
             >
               <motion.svg
                 className="w-7 h-7"
@@ -236,21 +281,25 @@ export default function Header() {
         </div>
 
         {/* Mobile Menu Overlay */}
-        <div className={cn(
-          "fixed inset-0 bg-primary z-40 lg:hidden transition-all duration-500 ease-in-out flex flex-col",
-          isMobileMenuOpen ? "opacity-100 translate-y-0" : "opacity-0 -translate-y-full pointer-events-none"
-        )}>
+        <div
+          className={cn(
+            'fixed inset-0 bg-primary z-40 lg:hidden transition-all duration-500 ease-in-out flex flex-col',
+            isMobileMenuOpen
+              ? 'opacity-100 translate-y-0'
+              : 'opacity-0 -translate-y-full pointer-events-none',
+          )}
+        >
           <motion.div
             className="flex-grow flex flex-col justify-center items-center p-8 space-y-8"
             initial="closed"
-            animate={isMobileMenuOpen ? "open" : "closed"}
+            animate={isMobileMenuOpen ? 'open' : 'closed'}
             variants={{
               open: {
                 transition: {
                   staggerChildren: 0.1,
-                  delayChildren: 0.2
-                }
-              }
+                  delayChildren: 0.2,
+                },
+              },
             }}
           >
             {menuItems.map((item, idx) => (
@@ -264,21 +313,29 @@ export default function Header() {
                     scale: 1,
                     transition: {
                       duration: 0.6,
-                      ease: "easeOut",
-                      delay: idx * 0.08
-                    }
-                  }
+                      ease: 'easeOut',
+                      delay: idx * 0.08,
+                    },
+                  },
                 }}
               >
                 <Link
                   href={`/${currentLocale}${item.href === '/' ? '' : item.href}`}
+                  onClick={() => {
+                    setIsMobileMenuOpen(false);
+                    trackEvent(AnalyticsEvents.LINK_CLICK, {
+                      label: item.label,
+                      href: item.href,
+                      location: 'mobile_menu',
+                    });
+                  }}
                   className="text-2xl md:text-3xl font-extrabold text-white hover:text-accent transition-all transform block py-4"
                 >
                   {item.label}
                 </Link>
               </motion.div>
             ))}
-            
+
             <motion.div
               className="pt-8 border-t border-white/10 w-full flex flex-col items-center space-y-8"
               initial={{ opacity: 0, y: 30 }}
@@ -322,11 +379,11 @@ export default function Header() {
                   </Link>
                 </motion.div>
               </motion.div>
-              
+
               <motion.div
                 initial={{ scale: 0.9, opacity: 0, y: 20 }}
                 animate={{ scale: 1, opacity: 1, y: 0 }}
-                transition={{ type: "spring", stiffness: 400, damping: 20, delay: 1.2 }}
+                transition={{ type: 'spring', stiffness: 400, damping: 20, delay: 1.2 }}
               >
                 <Button
                   href={`/${currentLocale}/contact`}
@@ -338,23 +395,23 @@ export default function Header() {
                 </Button>
               </motion.div>
             </motion.div>
-          
-          {/* Bottom Branding */}
-          <motion.div
-            className="p-12 flex justify-center opacity-20"
-            initial={{ opacity: 0, scale: 0.8 }}
-            animate={isMobileMenuOpen ? { opacity: 0.2, scale: 1 } : { opacity: 0, scale: 0.8 }}
-            transition={{ duration: 0.5, delay: 1.4 }}
-          >
+
+            {/* Bottom Branding */}
             <motion.div
-              initial={{ scale: 0.5 }}
-              animate={{ scale: 1 }}
-              transition={{ type: "spring", stiffness: 300, delay: 1.5 }}
+              className="p-12 flex justify-center opacity-20"
+              initial={{ opacity: 0, scale: 0.8 }}
+              animate={isMobileMenuOpen ? { opacity: 0.2, scale: 1 } : { opacity: 0, scale: 0.8 }}
+              transition={{ duration: 0.5, delay: 1.4 }}
             >
-              <Image src="/logo-white.svg" alt={t('home')} width={80} height={80} unoptimized />
+              <motion.div
+                initial={{ scale: 0.5 }}
+                animate={{ scale: 1 }}
+                transition={{ type: 'spring', stiffness: 300, delay: 1.5 }}
+              >
+                <Image src="/logo-white.svg" alt={t('home')} width={80} height={80} unoptimized />
+              </motion.div>
             </motion.div>
           </motion.div>
-        </motion.div>
         </div>
       </motion.header>
     </>
@@ -367,9 +424,9 @@ const navVariants = {
     opacity: 1,
     transition: {
       staggerChildren: 0.06,
-      delayChildren: 0.1
-    }
-  }
+      delayChildren: 0.1,
+    },
+  },
 } as const;
 
 const navLinkVariants = {
@@ -380,9 +437,9 @@ const navLinkVariants = {
     scale: 1,
     transition: {
       duration: 0.5,
-      ease: "easeOut"
-    }
-  }
+      ease: 'easeOut',
+    },
+  },
 } as const;
 
 const headerRightVariants = {
@@ -390,6 +447,6 @@ const headerRightVariants = {
   visible: {
     opacity: 1,
     x: 0,
-    transition: { duration: 0.6, ease: "easeOut" }
-  }
+    transition: { duration: 0.6, ease: 'easeOut' },
+  },
 } as const;

components/LeafletMap.tsx

@@ -1,18 +1,18 @@
-'use client';
-
-import { MapContainer, TileLayer, Marker, Popup } from 'react-leaflet';
+import React, { useEffect, useRef } from 'react';
 import L from 'leaflet';
 import 'leaflet/dist/leaflet.css';
 
 // Fix for default marker icon in Leaflet with Next.js
-const DefaultIcon = L.icon({
-  iconUrl: 'https://unpkg.com/leaflet@1.9.4/dist/images/marker-icon.png',
-  shadowUrl: 'https://unpkg.com/leaflet@1.9.4/dist/images/marker-shadow.png',
-  iconSize: [25, 41],
-  iconAnchor: [12, 41],
-});
+if (typeof window !== 'undefined') {
+  const DefaultIcon = L.icon({
+    iconUrl: 'https://unpkg.com/leaflet@1.9.4/dist/images/marker-icon.png',
+    shadowUrl: 'https://unpkg.com/leaflet@1.9.4/dist/images/marker-shadow.png',
+    iconSize: [25, 41],
+    iconAnchor: [12, 41],
+  });
 
-L.Marker.prototype.options.icon = DefaultIcon;
+  L.Marker.prototype.options.icon = DefaultIcon;
+}
 
 interface LeafletMapProps {
   address: string;
@@ -21,25 +21,46 @@ interface LeafletMapProps {
 }
 
 export default function LeafletMap({ address, lat, lng }: LeafletMapProps) {
-  const position: [number, number] = [lat, lng];
+  const mapRef = useRef<HTMLDivElement>(null);
+  const mapInstanceRef = useRef<L.Map | null>(null);
 
-  return (
-    <MapContainer
-      center={position}
-      zoom={15}
-      scrollWheelZoom={false}
-      className="h-full w-full z-0"
-    >
-      <TileLayer
-        attribution='&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
-        url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png"
-      />
-      <Marker position={position}>
-        <Popup>
-          <div className="text-primary font-bold">KLZ Cables</div>
-          <div className="text-sm whitespace-pre-line">{address}</div>
-        </Popup>
-      </Marker>
-    </MapContainer>
-  );
+  useEffect(() => {
+    if (!mapRef.current || mapInstanceRef.current) return;
+
+    // Initialize map
+    const map = L.map(mapRef.current, {
+      center: [lat, lng],
+      zoom: 15,
+      scrollWheelZoom: false,
+    });
+
+    // Add tiles
+    L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
+      attribution:
+        '&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors',
+    }).addTo(map);
+
+    // Add marker
+    const marker = L.marker([lat, lng]).addTo(map);
+
+    // Create popup content
+    const popupContent = `
+      <div class="text-primary font-bold">KLZ Cables</div>
+      <div class="text-sm">${address.replace(/\n/g, '<br/>')}</div>
+    `;
+
+    marker.bindPopup(popupContent);
+
+    mapInstanceRef.current = map;
+
+    // Cleanup on unmount
+    return () => {
+      if (mapInstanceRef.current) {
+        mapInstanceRef.current.remove();
+        mapInstanceRef.current = null;
+      }
+    };
+  }, [lat, lng, address]);
+
+  return <div ref={mapRef} className="h-full w-full z-0" />;
 }

components/Lightbox.tsx

@@ -21,19 +21,22 @@ export default function Lightbox({ isOpen, images, initialIndex, onClose }: Ligh
   const [mounted, setMounted] = useState(false);
 
   useEffect(() => {
-    setMounted(true);
+    setMounted(true); // eslint-disable-line react-hooks/set-state-in-effect
     return () => setMounted(false);
   }, []);
 
-  const updateUrl = useCallback((index: number | null) => {
-    const params = new URLSearchParams(searchParams.toString());
-    if (index !== null) {
-      params.set('photo', index.toString());
-    } else {
-      params.delete('photo');
-    }
-    router.replace(`${pathname}?${params.toString()}`, { scroll: false });
-  }, [pathname, router, searchParams]);
+  const updateUrl = useCallback(
+    (index: number | null) => {
+      const params = new URLSearchParams(searchParams.toString());
+      if (index !== null) {
+        params.set('photo', index.toString());
+      } else {
+        params.delete('photo');
+      }
+      router.replace(`${pathname}?${params.toString()}`, { scroll: false });
+    },
+    [pathname, router, searchParams],
+  );
 
   const prevImage = useCallback(() => {
     setCurrentIndex((prev) => {
@@ -56,11 +59,16 @@ export default function Lightbox({ isOpen, images, initialIndex, onClose }: Ligh
     if (photoParam !== null) {
       const index = parseInt(photoParam, 10);
       if (!isNaN(index) && index >= 0 && index < images.length) {
-        setCurrentIndex(index);
+        setCurrentIndex(index); // eslint-disable-line react-hooks/set-state-in-effect
       }
     }
   }, [searchParams, images.length]);
 
+  const handleClose = useCallback(() => {
+    updateUrl(null);
+    onClose();
+  }, [updateUrl, onClose]);
+
   useEffect(() => {
     if (isOpen) {
       updateUrl(currentIndex);
@@ -79,22 +87,17 @@ export default function Lightbox({ isOpen, images, initialIndex, onClose }: Ligh
     // Lock scroll
     const originalStyle = window.getComputedStyle(document.body).overflow;
     document.body.style.overflow = 'hidden';
-    
+
     window.addEventListener('keydown', handleKeyDown);
-    
+
     return () => {
       document.body.style.overflow = originalStyle;
       window.removeEventListener('keydown', handleKeyDown);
     };
-  }, [isOpen, prevImage, nextImage]);
+  }, [isOpen, prevImage, nextImage, handleClose]);
 
   if (!mounted) return null;
 
-  const handleClose = () => {
-    updateUrl(null);
-    onClose();
-  };
-
   return createPortal(
     <AnimatePresence>
       {isOpen && (
@@ -121,7 +124,7 @@ export default function Lightbox({ isOpen, images, initialIndex, onClose }: Ligh
               <span className="text-3xl font-extralight leading-none mb-1">×</span>
             </div>
           </motion.button>
-          
+
           <motion.button
             initial={{ opacity: 0, x: -20 }}
             animate={{ opacity: 1, x: 0 }}
@@ -131,9 +134,11 @@ export default function Lightbox({ isOpen, images, initialIndex, onClose }: Ligh
             className="absolute left-6 top-1/2 -translate-y-1/2 text-white/60 hover:text-white transition-all duration-500 w-14 h-14 flex items-center justify-center hover:bg-white/5 rounded-full z-[10000] group border border-white/10"
             aria-label="Previous image"
           >
-            <span className="text-4xl font-extralight group-hover:-translate-x-1 transition-transform duration-500">‹</span>
+            <span className="text-4xl font-extralight group-hover:-translate-x-1 transition-transform duration-500">
+              ‹
+            </span>
           </motion.button>
-          
+
           <motion.button
             initial={{ opacity: 0, x: 20 }}
             animate={{ opacity: 1, x: 0 }}
@@ -143,10 +148,12 @@ export default function Lightbox({ isOpen, images, initialIndex, onClose }: Ligh
             className="absolute right-6 top-1/2 -translate-y-1/2 text-white/60 hover:text-white transition-all duration-500 w-14 h-14 flex items-center justify-center hover:bg-white/5 rounded-full z-[10000] group border border-white/10"
             aria-label="Next image"
           >
-            <span className="text-4xl font-extralight group-hover:translate-x-1 transition-transform duration-500">›</span>
+            <span className="text-4xl font-extralight group-hover:translate-x-1 transition-transform duration-500">
+              ›
+            </span>
           </motion.button>
 
-          <motion.div 
+          <motion.div
             initial={{ opacity: 0, y: 40, scale: 0.95 }}
             animate={{ opacity: 1, y: 0, scale: 1 }}
             exit={{ opacity: 0, y: 20, scale: 0.98 }}
@@ -173,15 +180,15 @@ export default function Lightbox({ isOpen, images, initialIndex, onClose }: Ligh
                     />
                   </motion.div>
                 </AnimatePresence>
-                
+
                 {/* Technical Detail: Subtle grid overlay to reinforce industrial precision */}
                 <div className="absolute inset-0 pointer-events-none opacity-[0.03] bg-[url('/grid.svg')] bg-repeat z-10" />
-                
+
                 {/* Premium Reflection: Subtle gradient to give material feel */}
                 <div className="absolute inset-0 pointer-events-none bg-gradient-to-tr from-white/10 via-transparent to-transparent opacity-40 z-10" />
               </div>
-              
-              <motion.div 
+
+              <motion.div
                 initial={{ opacity: 0, y: 10 }}
                 animate={{ opacity: 1, y: 0 }}
                 exit={{ opacity: 0, y: 10 }}
@@ -199,6 +206,6 @@ export default function Lightbox({ isOpen, images, initialIndex, onClose }: Ligh
         </div>
       )}
     </AnimatePresence>,
-    document.body
+    document.body,
   );
 }

components/OGImageTemplate.tsx

@@ -46,6 +46,7 @@ export function OGImageTemplate({
             display: 'flex',
           }}
         >
+          {/* eslint-disable-next-line @next/next/no-img-element */}
           <img
             src={image}
             alt=""
@@ -182,4 +183,3 @@ export function OGImageTemplate({
     </div>
   );
 }
-

components/RelatedProductLink.tsx

@@ -0,0 +1,39 @@
+'use client';
+
+import Link from 'next/link';
+import { useAnalytics } from './analytics/useAnalytics';
+import { AnalyticsEvents } from './analytics/analytics-events';
+
+interface RelatedProductLinkProps {
+  href: string;
+  productSlug: string;
+  productTitle: string;
+  children: React.ReactNode;
+  className?: string;
+}
+
+export function RelatedProductLink({
+  href,
+  productSlug,
+  productTitle,
+  children,
+  className,
+}: RelatedProductLinkProps) {
+  const { trackEvent } = useAnalytics();
+
+  return (
+    <Link
+      href={href}
+      className={className}
+      onClick={() =>
+        trackEvent(AnalyticsEvents.PRODUCT_VIEW, {
+          product_id: productSlug,
+          product_name: productTitle,
+          location: 'related_products',
+        })
+      }
+    >
+      {children}
+    </Link>
+  );
+}

components/RelatedProducts.tsx

@@ -1,8 +1,7 @@
 import { getAllProducts } from '@/lib/mdx';
-import { mapFileSlugToTranslated } from '@/lib/slugs';
 import { getTranslations } from 'next-intl/server';
 import Image from 'next/image';
-import Link from 'next/link';
+import { RelatedProductLink } from './RelatedProductLink';
 
 interface RelatedProductsProps {
   currentSlug: string;
@@ -10,15 +9,19 @@ interface RelatedProductsProps {
   locale: string;
 }
 
-export default async function RelatedProducts({ currentSlug, categories, locale }: RelatedProductsProps) {
-  const allProducts = await getAllProducts(locale);
+export default async function RelatedProducts({
+  currentSlug,
+  categories,
+  locale,
+}: RelatedProductsProps) {
+  const products = await getAllProducts(locale);
   const t = await getTranslations('Products');
-  
+
   // Filter products: same category, not current product
-  const related = allProducts
-    .filter(p => 
-      p.slug !== currentSlug && 
-      p.frontmatter.categories.some(cat => categories.includes(cat))
+  const related = products
+    .filter(
+      (p) =>
+        p.slug !== currentSlug && p.frontmatter.categories.some((cat) => categories.includes(cat)),
     )
     .slice(0, 3); // Limit to 3 for better spacing
 
@@ -36,23 +39,31 @@ export default async function RelatedProducts({ currentSlug, categories, locale
       </div>
 
       <div className="grid grid-cols-1 md:grid-cols-3 gap-8">
-        {related.map(async (product) => {
+        {related.map((product) => {
           // Find the category slug for the link
-          const categorySlugs = ['low-voltage-cables', 'medium-voltage-cables', 'high-voltage-cables', 'solar-cables'];
-          const catSlug = categorySlugs.find(slug => {
-            const key = slug.replace(/-cables$/, '').replace(/-([a-z])/g, (g) => g[1].toUpperCase());
-            const title = t(`categories.${key}.title`);
-            return product.frontmatter.categories.some(cat => 
-              cat.toLowerCase().replace(/\s+/g, '-') === slug || cat === title
-            );
-          }) || 'low-voltage-cables';
-          
-          const translatedProductSlug = await mapFileSlugToTranslated(product.slug, locale);
-          
+          const categorySlugs = [
+            'low-voltage-cables',
+            'medium-voltage-cables',
+            'high-voltage-cables',
+            'solar-cables',
+          ];
+          const catSlug =
+            categorySlugs.find((slug) => {
+              const key = slug
+                .replace(/-cables$/, '')
+                .replace(/-([a-z])/g, (g) => g[1].toUpperCase());
+              const title = t(`categories.${key}.title`);
+              return product.frontmatter.categories.some(
+                (cat) => cat.toLowerCase().replace(/\s+/g, '-') === slug || cat === title,
+              );
+            }) || 'low-voltage-cables';
+
           return (
-            <Link 
-              key={product.slug} 
-              href={`/${locale}/products/${catSlug}/${translatedProductSlug}`}
+            <RelatedProductLink
+              key={product.slug}
+              href={`/${locale}/products/${catSlug}/${product.slug}`}
+              productSlug={product.slug}
+              productTitle={product.frontmatter.title}
               className="group block bg-white rounded-[32px] overflow-hidden shadow-sm hover:shadow-2xl transition-all duration-500 border border-neutral-dark/5"
             >
               <div className="aspect-[16/10] relative bg-neutral-light/30 p-8 overflow-hidden">
@@ -74,8 +85,11 @@ export default async function RelatedProducts({ currentSlug, categories, locale
               </div>
               <div className="p-8">
                 <div className="flex flex-wrap gap-2 mb-3">
-                  {product.frontmatter.categories.slice(0, 1).map((cat, idx) => (
-                    <span key={idx} className="text-[10px] font-bold uppercase tracking-widest text-primary/40">
+                  {product.frontmatter.categories.slice(0, 1).map((cat: any, idx: number) => (
+                    <span
+                      key={idx}
+                      className="text-[10px] font-bold uppercase tracking-widest text-primary/40"
+                    >
                       {cat}
                     </span>
                   ))}
@@ -87,12 +101,22 @@ export default async function RelatedProducts({ currentSlug, categories, locale
                   <span className="border-b-2 border-primary/10 group-hover:border-accent-dark transition-colors pb-0.5">
                     {t('details')}
                   </span>
-                  <svg className="w-4 h-4 ml-2 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 ml-2 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>
-            </Link>
+            </RelatedProductLink>
           );
         })}
       </div>

components/RequestQuoteForm.tsx

@@ -5,6 +5,7 @@ import { useTranslations } from 'next-intl';
 import { Input, Textarea, Button } from '@/components/ui';
 import { sendContactFormAction } from '@/app/actions/contact';
 import { useAnalytics } from '@/components/analytics/useAnalytics';
+import { AnalyticsEvents } from '@/components/analytics/analytics-events';
 
 interface RequestQuoteFormProps {
   productName: string;
@@ -16,6 +17,26 @@ export default function RequestQuoteForm({ productName }: RequestQuoteFormProps)
   const [email, setEmail] = useState('');
   const [request, setRequest] = useState('');
   const [status, setStatus] = useState<'idle' | 'submitting' | 'success' | 'error'>('idle');
+  const [hasStarted, setHasStarted] = useState(false);
+
+  const handleFocus = (fieldId: string) => {
+    // Initial form start
+    if (!hasStarted) {
+      setHasStarted(true);
+      trackEvent(AnalyticsEvents.FORM_START, {
+        form_id: 'quote_request_form',
+        form_name: 'Product Quote Inquiry',
+        product_name: productName,
+      });
+    }
+
+    // Field-level transparency
+    trackEvent(AnalyticsEvents.FORM_FIELD_FOCUS, {
+      form_id: 'quote_request_form',
+      field_id: fieldId,
+      product_name: productName,
+    });
+  };
 
   const handleSubmit = async (e: React.FormEvent) => {
     e.preventDefault();
@@ -39,10 +60,20 @@ export default function RequestQuoteForm({ productName }: RequestQuoteFormProps)
         setEmail('');
         setRequest('');
       } else {
+        trackEvent(AnalyticsEvents.FORM_ERROR, {
+          form_id: 'quote_request_form',
+          product_name: productName,
+          error: result.error || 'submission_failed',
+        });
         setStatus('error');
       }
     } catch (error) {
       console.error('Form submission error:', error);
+      trackEvent(AnalyticsEvents.FORM_ERROR, {
+        form_id: 'quote_request_form',
+        product_name: productName,
+        error: (error as Error).message || 'unexpected_error',
+      });
       setStatus('error');
     }
   };
@@ -131,6 +162,7 @@ export default function RequestQuoteForm({ productName }: RequestQuoteFormProps)
             required
             value={email}
             onChange={(e) => setEmail(e.target.value)}
+            onFocus={() => handleFocus('email')}
             placeholder={t('email')}
             className="h-9 text-xs !mt-0"
           />
@@ -143,6 +175,7 @@ export default function RequestQuoteForm({ productName }: RequestQuoteFormProps)
             rows={3}
             value={request}
             onChange={(e) => setRequest(e.target.value)}
+            onFocus={() => handleFocus('request')}
             placeholder={t('message')}
             className="text-xs !mt-0"
           />

components/analytics/BlogEngagementTracker.tsx

@@ -0,0 +1,53 @@
+'use client';
+
+import { useEffect } from 'react';
+import { useAnalytics } from './useAnalytics';
+import { AnalyticsEvents } from './analytics-events';
+
+interface BlogEngagementTrackerProps {
+  title: string;
+  slug: string;
+  category?: string;
+  readingTime: number;
+}
+
+/**
+ * BlogEngagementTracker
+ * Tracks reading time and article completion.
+ */
+export default function BlogEngagementTracker({
+  title,
+  slug,
+  category,
+  readingTime,
+}: BlogEngagementTrackerProps) {
+  const { trackEvent } = useAnalytics();
+
+  useEffect(() => {
+    // Article start
+    trackEvent(AnalyticsEvents.BLOG_POST_VIEW, {
+      title,
+      slug,
+      category,
+      estimated_reading_time: readingTime,
+      location: 'blog_post_pdp',
+    });
+
+    const startTime = Date.now();
+
+    return () => {
+      const dwellTime = Math.round((Date.now() - startTime) / 1000);
+
+      // We only consider it a "read" if they stay a reasonable amount of time
+      // or if they scroll (covered by ScrollDepthTracker)
+      trackEvent('blog_dwell_time', {
+        title,
+        slug,
+        seconds: dwellTime,
+        reading_time_completion: Math.min(100, Math.round((dwellTime / (readingTime * 60)) * 100)),
+      });
+    };
+  }, [title, slug, category, readingTime, trackEvent]);
+
+  return null;
+}

components/analytics/ProductEngagementTracker.tsx

@@ -0,0 +1,50 @@
+'use client';
+
+import { useEffect } from 'react';
+import { useAnalytics } from './useAnalytics';
+import { AnalyticsEvents } from './analytics-events';
+
+interface ProductEngagementTrackerProps {
+  productName: string;
+  productSlug: string;
+  categories: string[];
+  sku?: string;
+}
+
+/**
+ * ProductEngagementTracker
+ * Deep analytics for product pages.
+ * Tracks specific view events with full metadata for sales analysis.
+ */
+export default function ProductEngagementTracker({
+  productName,
+  productSlug,
+  categories,
+  sku,
+}: ProductEngagementTrackerProps) {
+  const { trackEvent } = useAnalytics();
+
+  useEffect(() => {
+    // Standardized product view event for "High-Fidelity" sales insights
+    trackEvent(AnalyticsEvents.PRODUCT_VIEW, {
+      product_id: productSlug,
+      product_name: productName,
+      product_sku: sku,
+      product_categories: categories.join(', '),
+      location: 'pdp_standard',
+    });
+
+    // We can also track "Engagement Start" to measure dwell time later
+    const startTime = Date.now();
+
+    return () => {
+      const dwellTime = Math.round((Date.now() - startTime) / 1000);
+      trackEvent('pdp_dwell_time', {
+        product_id: productSlug,
+        seconds: dwellTime,
+      });
+    };
+  }, [productName, productSlug, categories, sku, trackEvent]);
+
+  return null;
+}

components/analytics/ScrollDepthTracker.tsx

@@ -0,0 +1,62 @@
+'use client';
+
+import { useEffect, useRef } from 'react';
+import { usePathname } from 'next/navigation';
+import { useAnalytics } from './useAnalytics';
+import { AnalyticsEvents } from './analytics-events';
+
+/**
+ * ScrollDepthTracker
+ * Tracks user scroll progress across pages.
+ * Fires events at 25%, 50%, 75%, and 100% depth.
+ */
+export default function ScrollDepthTracker() {
+  const pathname = usePathname();
+  const { trackEvent } = useAnalytics();
+  const trackedDepths = useRef<Set<number>>(new Set());
+
+  // Reset tracking when path changes
+  useEffect(() => {
+    trackedDepths.current.clear();
+  }, [pathname]);
+
+  useEffect(() => {
+    const handleScroll = () => {
+      const scrollY = window.scrollY;
+      const windowHeight = window.innerHeight;
+      const documentHeight = document.documentElement.scrollHeight;
+
+      // Calculate how far the user has scrolled in percentage
+      // documentHeight - windowHeight is the total scrollable distance
+      const totalScrollable = documentHeight - windowHeight;
+      if (totalScrollable <= 0) return; // Not scrollable
+
+      const scrollPercentage = Math.round((scrollY / totalScrollable) * 100);
+
+      // We only care about specific milestones
+      const milestones = [25, 50, 75, 100];
+
+      milestones.forEach((milestone) => {
+        if (scrollPercentage >= milestone && !trackedDepths.current.has(milestone)) {
+          trackedDepths.current.add(milestone);
+          trackEvent(AnalyticsEvents.SCROLL_DEPTH, {
+            depth: milestone,
+            path: pathname,
+          });
+        }
+      });
+    };
+
+    // Use passive listener for better performance
+    window.addEventListener('scroll', handleScroll, { passive: true });
+
+    // Initial check (in case page is short or already scrolled)
+    handleScroll();
+
+    return () => {
+      window.removeEventListener('scroll', handleScroll);
+    };
+  }, [pathname, trackEvent]);
+
+  return null;
+}

components/analytics/TrackedButton.tsx

@@ -0,0 +1,34 @@
+'use client';
+
+import React from 'react';
+import { Button, ButtonProps } from '../ui/Button';
+import { useAnalytics } from './useAnalytics';
+import { AnalyticsEvents } from './analytics-events';
+
+interface TrackedButtonProps extends ButtonProps {
+  eventName?: string;
+  eventProperties?: Record<string, any>;
+}
+
+/**
+ * A wrapper around the project's Button component that tracks click events.
+ * Safe to use in server components.
+ */
+export default function TrackedButton({
+  eventName = AnalyticsEvents.BUTTON_CLICK,
+  eventProperties = {},
+  onClick,
+  ...props
+}: TrackedButtonProps) {
+  const { trackEvent } = useAnalytics();
+
+  const handleClick = (e: React.MouseEvent<HTMLButtonElement>) => {
+    trackEvent(eventName, {
+      ...eventProperties,
+      label: typeof props.children === 'string' ? props.children : eventProperties.label,
+    });
+    if (onClick) onClick(e);
+  };
+
+  return <Button {...props} onClick={handleClick} />;
+}

components/analytics/TrackedLink.tsx

@@ -0,0 +1,44 @@
+'use client';
+
+import React from 'react';
+import Link from 'next/link';
+import { useAnalytics } from './useAnalytics';
+import { AnalyticsEvents } from './analytics-events';
+
+interface TrackedLinkProps {
+  href: string;
+  eventName?: string;
+  eventProperties?: Record<string, any>;
+  className?: string;
+  children: React.ReactNode;
+  onClick?: () => void;
+}
+
+/**
+ * A wrapper around next/link that tracks the click event.
+ * Useful for adding tracking to server components.
+ */
+export default function TrackedLink({
+  href,
+  eventName = AnalyticsEvents.LINK_CLICK,
+  eventProperties = {},
+  className,
+  children,
+  onClick,
+}: TrackedLinkProps) {
+  const { trackEvent } = useAnalytics();
+
+  const handleClick = (e: React.MouseEvent) => {
+    trackEvent(eventName, {
+      href,
+      ...eventProperties,
+    });
+    if (onClick) onClick();
+  };
+
+  return (
+    <Link href={href} className={className} onClick={handleClick}>
+      {children}
+    </Link>
+  );
+}

components/analytics/analytics-events.ts

@@ -1,18 +1,18 @@
 /**
  * Analytics Events Utility
- * 
+ *
  * Centralized definitions for common analytics events and their properties.
  * This helps maintain consistency across the application and makes it easier
  * to track meaningful events.
- * 
+ *
  * @example
  * ```tsx
  * import { useAnalytics } from '@/components/analytics/useAnalytics';
  * import { AnalyticsEvents } from '@/components/analytics/analytics-events';
- * 
+ *
  * function ProductPage() {
  *   const { trackEvent } = useAnalytics();
- * 
+ *
  *   const handleAddToCart = (productId: string, productName: string) => {
  *     trackEvent(AnalyticsEvents.PRODUCT_ADD_TO_CART, {
  *       product_id: productId,
@@ -20,7 +20,7 @@
  *       page: 'product-detail'
  *     });
  *   };
- * 
+ *
  *   return <button onClick={() => handleAddToCart('123', 'Cable')}>Add to Cart</button>;
  * }
  * ```
@@ -31,6 +31,7 @@ export const AnalyticsEvents = {
   PAGE_VIEW: 'pageview',
   PAGE_SCROLL: 'page_scroll',
   PAGE_EXIT: 'page_exit',
+  SCROLL_DEPTH: 'scroll_depth',
 
   // User Interaction Events
   BUTTON_CLICK: 'button_click',
@@ -38,6 +39,7 @@ export const AnalyticsEvents = {
   FORM_SUBMIT: 'form_submit',
   FORM_START: 'form_start',
   FORM_ERROR: 'form_error',
+  FORM_FIELD_FOCUS: 'form_field_focus',
 
   // E-commerce Events
   PRODUCT_VIEW: 'product_view',
@@ -46,6 +48,7 @@ export const AnalyticsEvents = {
   PRODUCT_PURCHASE: 'product_purchase',
   PRODUCT_WISHLIST_ADD: 'product_wishlist_add',
   PRODUCT_WISHLIST_REMOVE: 'product_wishlist_remove',
+  PRODUCT_TAB_SWITCH: 'product_tab_switch',
 
   // Search & Filter Events
   SEARCH: 'search',
@@ -71,6 +74,7 @@ export const AnalyticsEvents = {
   TOGGLE_SWITCH: 'toggle_switch',
   ACCORDION_TOGGLE: 'accordion_toggle',
   TAB_SWITCH: 'tab_switch',
+  TOC_CLICK: 'toc_click',
 
   // Error & Performance Events
   ERROR: 'error',

components/blog/TableOfContents.tsx

@@ -2,6 +2,8 @@
 
 import React, { useEffect, useState } from 'react';
 import { cn } from '@/components/ui/utils';
+import { useAnalytics } from '../analytics/useAnalytics';
+import { AnalyticsEvents } from '../analytics/analytics-events';
 
 interface TocItem {
   id: string;
@@ -16,11 +18,12 @@ interface TableOfContentsProps {
 
 export default function TableOfContents({ headings, locale }: TableOfContentsProps) {
   const [activeId, setActiveId] = useState<string>('');
+  const { trackEvent } = useAnalytics();
 
   useEffect(() => {
     const observerOptions = {
       rootMargin: '-10% 0% -70% 0%',
-      threshold: 0
+      threshold: 0,
     };
 
     const observer = new IntersectionObserver((entries) => {
@@ -66,15 +69,20 @@ export default function TableOfContents({ headings, locale }: TableOfContentsPro
               <a
                 href={`#${heading.id}`}
                 className={cn(
-                  "text-sm md:text-base transition-all duration-300 hover:text-primary block leading-snug",
+                  'text-sm md:text-base transition-all duration-300 hover:text-primary block leading-snug',
                   activeId === heading.id
-                    ? "text-primary font-bold translate-x-1"
-                    : "text-text-secondary font-medium hover:translate-x-1"
+                    ? 'text-primary font-bold translate-x-1'
+                    : 'text-text-secondary font-medium hover:translate-x-1',
                 )}
                 onClick={(e) => {
                   e.preventDefault();
                   const element = document.getElementById(heading.id);
                   if (element) {
+                    trackEvent(AnalyticsEvents.TOC_CLICK, {
+                      heading_id: heading.id,
+                      heading_text: heading.text,
+                      location: 'blog_sidebar',
+                    });
                     const yOffset = -100;
                     const y = element.getBoundingClientRect().top + window.pageYOffset + yOffset;
                     window.scrollTo({ top: y, behavior: 'smooth' });

components/home/Experience.tsx

@@ -9,17 +9,17 @@ export default function Experience() {
   return (
     <Section className="relative py-32 md:py-48 overflow-hidden text-white">
       <div className="absolute inset-0 z-0">
-        <Image 
-          src="/uploads/2024/12/1694273920124-copy-2.webp" 
-          alt={t('subtitle')} 
+        <Image
+          src="/uploads/2024/12/1694273920124-copy-2.webp"
+          alt={t('subtitle')}
           fill
           className="object-cover object-center scale-105 animate-slow-zoom"
-          unoptimized
+          sizes="100vw"
         />
         <div className="absolute inset-0 bg-primary/80 mix-blend-multiply" />
         <div className="absolute inset-0 bg-gradient-to-r from-primary via-primary/40 to-transparent" />
       </div>
-      
+
       <Container className="relative z-10">
         <div className="max-w-3xl">
           <Heading level={2} subtitle={t('subtitle')} className="text-white">
@@ -29,19 +29,25 @@ export default function Experience() {
             <p className="border-l-4 border-accent pl-8 py-2 bg-white/5 backdrop-blur-sm rounded-r-xl">
               {t('p1')}
             </p>
-            <p className="pl-9">
-              {t('p2')}
-            </p>
+            <p className="pl-9">{t('p2')}</p>
           </div>
-          
+
           <div className="mt-16 grid grid-cols-1 md:grid-cols-2 gap-12">
             <div className="animate-fade-in">
-              <div className="text-2xl md:text-3xl font-extrabold text-accent mb-4">{t('certifiedQuality')}</div>
-              <div className="text-base md:text-lg font-bold uppercase tracking-widest text-white/60">{t('vdeApproved')}</div>
+              <div className="text-2xl md:text-3xl font-extrabold text-accent mb-4">
+                {t('certifiedQuality')}
+              </div>
+              <div className="text-base md:text-lg font-bold uppercase tracking-widest text-white/60">
+                {t('vdeApproved')}
+              </div>
             </div>
             <div className="animate-fade-in" style={{ animationDelay: '100ms' }}>
-              <div className="text-2xl md:text-3xl font-extrabold text-accent mb-4">{t('fullSpectrum')}</div>
-              <div className="text-base md:text-lg font-bold uppercase tracking-widest text-white/60">{t('solutionsRange')}</div>
+              <div className="text-2xl md:text-3xl font-extrabold text-accent mb-4">
+                {t('fullSpectrum')}
+              </div>
+              <div className="text-base md:text-lg font-bold uppercase tracking-widest text-white/60">
+                {t('solutionsRange')}
+              </div>
             </div>
           </div>
         </div>

components/home/GallerySection.tsx

@@ -1,6 +1,5 @@
 'use client';
-
-import React, { useState, useEffect } from 'react';
+import React from 'react';
 import Image from 'next/image';
 import { useTranslations } from 'next-intl';
 import { Section, Container, Heading } from '../../components/ui';
@@ -19,19 +18,9 @@ export default function GallerySection() {
     '/uploads/2024/12/DSC07768-Large.webp',
   ];
 
-  const [lightboxOpen, setLightboxOpen] = useState(false);
-  const [lightboxIndex, setLightboxIndex] = useState(0);
-
-  useEffect(() => {
-    const photoParam = searchParams.get('photo');
-    if (photoParam !== null) {
-      const index = parseInt(photoParam, 10);
-      if (!isNaN(index) && index >= 0 && index < images.length) {
-        setLightboxIndex(index);
-        setLightboxOpen(true);
-      }
-    }
-  }, [searchParams, images.length]);
+  const photoParam = searchParams.get('photo');
+  const lightboxOpen = photoParam !== null;
+  const lightboxIndex = photoParam ? parseInt(photoParam, 10) : 0;
 
   return (
     <Section className="bg-white text-white py-32">
@@ -39,14 +28,16 @@ export default function GallerySection() {
         <Heading level={2} subtitle={t('subtitle')} align="center">
           {t('title')}
         </Heading>
-        
+
         <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
           {images.map((src, idx) => (
             <button
               key={idx}
               onClick={() => {
-                setLightboxIndex(idx);
-                setLightboxOpen(true);
+                const params = new URLSearchParams(searchParams.toString());
+                params.set('photo', idx.toString());
+                window.history.replaceState(null, '', `?${params.toString()}`);
+                // Since we're using derive-from-url, the component will re-render with the new value
               }}
               className="relative aspect-[4/3] overflow-hidden rounded-3xl group shadow-lg hover:shadow-2xl transition-all duration-700 cursor-pointer"
             >
@@ -55,7 +46,7 @@ export default function GallerySection() {
                 alt={`${t('alt')} ${idx + 1}`}
                 fill
                 className="object-cover transition-transform duration-1000 group-hover:scale-110"
-                unoptimized
+                sizes="(max-width: 768px) 100vw, (max-width: 1200px) 50vw, 33vw"
               />
               <div className="absolute inset-0 bg-primary-dark/20 group-hover:bg-transparent transition-all duration-500" />
               <div className="absolute inset-0 border-0 group-hover:border-[16px] border-white/10 transition-all duration-500 pointer-events-none" />
@@ -68,7 +59,11 @@ export default function GallerySection() {
         isOpen={lightboxOpen}
         images={images}
         initialIndex={lightboxIndex}
-        onClose={() => setLightboxOpen(false)}
+        onClose={() => {
+          const params = new URLSearchParams(searchParams.toString());
+          params.delete('photo');
+          window.history.replaceState(null, '', `?${params.toString()}`);
+        }}
       />
     </Section>
   );

components/home/Hero.tsx

@@ -3,11 +3,16 @@
 import Scribble from '@/components/Scribble';
 import { Button, Container, Heading, Section } from '@/components/ui';
 import { motion } from 'framer-motion';
-import { useTranslations } from 'next-intl';
-import HeroIllustration from './HeroIllustration';
+import { useTranslations, useLocale } from 'next-intl';
+import dynamic from 'next/dynamic';
+import { useAnalytics } from '../analytics/useAnalytics';
+import { AnalyticsEvents } from '../analytics/analytics-events';
+const HeroIllustration = dynamic(() => import('./HeroIllustration'), { ssr: false });
 
 export default function Hero() {
   const t = useTranslations('Home.hero');
+  const locale = useLocale();
+  const { trackEvent } = useAnalytics();
 
   return (
     <Section className="relative min-h-[85vh] md:h-[90vh] flex flex-col items-center justify-center overflow-hidden bg-primary py-12 md:py-0 lg:py-0">
@@ -19,7 +24,10 @@ export default function Hero() {
           variants={containerVariants}
         >
           <motion.div variants={headingVariants}>
-            <Heading level={1} className="text-center md:text-left mb-6 md:mb-8 md:max-w-none text-white text-4xl sm:text-5xl md:text-7xl font-extrabold [text-shadow:_-2px_-2px_0_#002b49,_2px_-2px_0_#002b49,_-2px_2px_0_#002b49,_2px_2px_0_#002b49,_-2px_0_0_#002b49,_2px_0_0_#002b49,_0_-2px_0_#002b49,_0_2px_0_#002b49]">
+            <Heading
+              level={1}
+              className="text-center md:text-left mb-6 md:mb-8 md:max-w-none text-white text-4xl sm:text-5xl md:text-7xl font-extrabold [text-shadow:_-2px_-2px_0_#002b49,_2px_-2px_0_#002b49,_-2px_2px_0_#002b49,_2px_2px_0_#002b49,_-2px_0_0_#002b49,_2px_0_0_#002b49,_0_-2px_0_#002b49,_0_2px_0_#002b49]"
+            >
               {t.rich('title', {
                 green: (chunks) => (
                   <span className="relative inline-block">
@@ -36,7 +44,7 @@ export default function Hero() {
                       <Scribble variant="circle" />
                     </motion.div>
                   </span>
-                )
+                ),
               })}
             </Heading>
           </motion.div>
@@ -50,13 +58,35 @@ export default function Hero() {
             variants={buttonContainerVariants}
           >
             <motion.div variants={buttonVariants}>
-              <Button href="/contact" variant="accent" size="lg" className="group w-full sm:w-auto h-14 md:h-16 px-8 md:px-10 text-base md:text-lg">
+              <Button
+                href="/contact"
+                variant="accent"
+                size="lg"
+                className="group w-full sm:w-auto h-14 md:h-16 px-8 md:px-10 text-base md:text-lg"
+                onClick={() =>
+                  trackEvent(AnalyticsEvents.BUTTON_CLICK, {
+                    label: t('cta'),
+                    location: 'home_hero_primary',
+                  })
+                }
+              >
                 {t('cta')}
                 <span className="transition-transform group-hover/btn:translate-x-1">&rarr;</span>
               </Button>
             </motion.div>
             <motion.div variants={buttonVariants}>
-              <Button href="/products" variant="white" size="lg" className="group w-full sm:w-auto h-14 md:h-16 px-8 md:px-10 text-base md:text-lg md:bg-white md:text-primary md:hover:bg-neutral-light md:border-none">
+              <Button
+                href={`/${locale}/${locale === 'de' ? 'produkte' : 'products'}`}
+                variant="white"
+                size="lg"
+                className="group w-full sm:w-auto h-14 md:h-16 px-8 md:px-10 text-base md:text-lg md:bg-white md:text-primary md:hover:bg-neutral-light md:border-none"
+                onClick={() =>
+                  trackEvent(AnalyticsEvents.BUTTON_CLICK, {
+                    label: t('exploreProducts'),
+                    location: 'home_hero_secondary',
+                  })
+                }
+              >
                 {t('exploreProducts')}
               </Button>
             </motion.div>
@@ -77,7 +107,7 @@ export default function Hero() {
         className="absolute bottom-6 md:bottom-10 left-1/2 -translate-x-1/2 hidden sm:block"
         initial={{ opacity: 0, y: 16 }}
         animate={{ opacity: 1, y: 0 }}
-        transition={{ duration: 1, ease: "easeOut", delay: 3 }}
+        transition={{ duration: 1, ease: 'easeOut', delay: 3 }}
       >
         <div className="w-6 h-10 border-2 border-white/30 rounded-full flex justify-center p-1">
           <motion.div
@@ -86,7 +116,7 @@ export default function Hero() {
             transition={{
               duration: 1.5,
               repeat: Infinity,
-              ease: "easeInOut"
+              ease: 'easeInOut',
             }}
           />
         </div>
@@ -101,9 +131,9 @@ const containerVariants = {
     opacity: 1,
     transition: {
       staggerChildren: 0.12,
-      delayChildren: 0.4
-    }
-  }
+      delayChildren: 0.4,
+    },
+  },
 } as const;
 
 const headingVariants = {
@@ -112,8 +142,8 @@ const headingVariants = {
     opacity: 1,
     y: 0,
     scale: 1,
-    transition: { duration: 1.2, ease: [0.25, 0.46, 0.45, 0.94] }
-  }
+    transition: { duration: 1.2, ease: [0.25, 0.46, 0.45, 0.94] },
+  },
 } as const;
 
 const accentVariants = {
@@ -122,8 +152,8 @@ const accentVariants = {
     opacity: 1,
     scale: 1,
     rotate: 0,
-    transition: { duration: 0.8, ease: [0.25, 0.46, 0.45, 0.94] }
-  }
+    transition: { duration: 0.8, ease: [0.25, 0.46, 0.45, 0.94] },
+  },
 } as const;
 
 const scribbleVariants = {
@@ -132,8 +162,8 @@ const scribbleVariants = {
     opacity: 1,
     scale: 1,
     rotate: 0,
-    transition: { duration: 1, type: "spring", stiffness: 300, damping: 20 }
-  }
+    transition: { duration: 1, type: 'spring', stiffness: 300, damping: 20 },
+  },
 } as const;
 
 const subtitleVariants = {
@@ -142,8 +172,8 @@ const subtitleVariants = {
     opacity: 1,
     y: 0,
     scale: 1,
-    transition: { duration: 1, ease: [0.25, 0.46, 0.45, 0.94] }
-  }
+    transition: { duration: 1, ease: [0.25, 0.46, 0.45, 0.94] },
+  },
 } as const;
 
 const buttonContainerVariants = {
@@ -152,9 +182,9 @@ const buttonContainerVariants = {
     opacity: 1,
     transition: {
       staggerChildren: 0.15,
-      delayChildren: 0.4
-    }
-  }
+      delayChildren: 0.4,
+    },
+  },
 } as const;
 
 const buttonVariants = {
@@ -163,6 +193,6 @@ const buttonVariants = {
     opacity: 1,
     y: 0,
     scale: 1,
-    transition: { type: "spring", stiffness: 400, damping: 20 }
-  }
+    transition: { type: 'spring', stiffness: 400, damping: 20 },
+  },
 } as const;

components/home/MeetTheTeam.tsx

@@ -11,43 +11,53 @@ export default function MeetTheTeam() {
   return (
     <Section className="relative py-32 md:py-48 overflow-hidden">
       <div className="absolute inset-0 z-0">
-        <Image 
-          src="/uploads/2024/12/DSC08036-Large.webp" 
-          alt={t('subtitle')} 
+        <Image
+          src="/uploads/2024/12/DSC08036-Large.webp"
+          alt={t('subtitle')}
           fill
           className="object-cover scale-105 animate-slow-zoom"
-          unoptimized
+          sizes="100vw"
         />
         <div className="absolute inset-0 bg-primary/70 mix-blend-multiply" />
         <div className="absolute inset-0 bg-gradient-to-t from-primary via-primary/20 to-transparent" />
       </div>
-      
+
       <Container className="relative z-10">
         <div className="max-w-3xl text-white animate-slide-up">
           <Heading level={2} subtitle={t('subtitle')} className="text-white mb-8">
             <span className="text-white">{t('title')}</span>
           </Heading>
-          
+
           <div className="relative mb-12">
             <div className="absolute -left-8 top-0 bottom-0 w-1 bg-accent rounded-full" />
             <p className="text-xl md:text-2xl leading-relaxed font-medium italic text-white/90 pl-8">
               "{t('description')}"
             </p>
           </div>
-          
+
           <div className="flex flex-wrap gap-8 items-center">
             <Button href={`/${locale}/team`} variant="accent" size="xl" className="group">
               {t('cta')}
               <span className="ml-3 transition-transform group-hover:translate-x-2">&rarr;</span>
             </Button>
-            
+
             <div className="flex items-center gap-4">
               <div className="flex -space-x-4">
                 <div className="w-14 h-14 rounded-full border-4 border-primary overflow-hidden relative">
-                  <Image src="/uploads/2024/12/DSC07768-Large.webp" alt={teamT('michael.name')} fill className="object-cover" />
+                  <Image
+                    src="/uploads/2024/12/DSC07768-Large.webp"
+                    alt={teamT('michael.name')}
+                    fill
+                    className="object-cover"
+                  />
                 </div>
                 <div className="w-14 h-14 rounded-full border-4 border-primary overflow-hidden relative">
-                  <Image src="/uploads/2024/12/DSC07963-Large.webp" alt={teamT('klaus.name')} fill className="object-cover" />
+                  <Image
+                    src="/uploads/2024/12/DSC07963-Large.webp"
+                    alt={teamT('klaus.name')}
+                    fill
+                    className="object-cover"
+                  />
                 </div>
               </div>
               <span className="text-white/60 font-bold text-xs md:text-sm uppercase tracking-widest">

components/home/ProductCategories.tsx

@@ -8,63 +8,77 @@ export default function ProductCategories() {
   const t = useTranslations('Products');
   const locale = useLocale();
 
+  const productsBase = locale === 'de' ? 'produkte' : 'products';
+
   const categories = [
-    { 
-      title: t('categories.lowVoltage.title'), 
+    {
+      title: t('categories.lowVoltage.title'),
       desc: t('categories.lowVoltage.description'),
       img: '/uploads/2024/11/low-voltage-category.webp',
       icon: '/uploads/2024/11/Low-Voltage.svg',
-      href: `/${locale}/products/low-voltage-cables`
+      href: `/${locale}/${productsBase}/${locale === 'de' ? 'niederspannungskabel' : 'low-voltage-cables'}`,
     },
-    { 
-      title: t('categories.mediumVoltage.title'), 
+    {
+      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: `/${locale}/products/medium-voltage-cables`
+      href: `/${locale}/${productsBase}/${locale === 'de' ? 'mittelspannungskabel' : 'medium-voltage-cables'}`,
     },
-    { 
-      title: t('categories.highVoltage.title'), 
+    {
+      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: `/${locale}/products/high-voltage-cables`
+      href: `/${locale}/${productsBase}/${locale === 'de' ? 'hochspannungskabel' : 'high-voltage-cables'}`,
     },
-    { 
-      title: t('categories.solar.title'), 
+    {
+      title: t('categories.solar.title'),
       desc: t('categories.solar.description'),
       img: '/uploads/2024/11/solar-category.webp',
       icon: '/uploads/2024/11/Solar.svg',
-      href: `/${locale}/products/solar-cables`
-    }
+      href: `/${locale}/${productsBase}/${locale === 'de' ? 'solarkabel' : 'solar-cables'}`,
+    },
   ];
 
   return (
     <Section className="bg-neutral-light py-0 md:py-0 lg:py-0 -mt-px">
       <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4">
         {categories.map((category, idx) => (
-          <Link key={idx} href={category.href} className="group block relative h-[400px] md:h-[500px] lg:h-[650px] overflow-hidden border-b md:border-b-0 md:border-r border-white/10 last:border-0">
-            <Image 
-              src={category.img} 
+          <Link
+            key={idx}
+            href={category.href}
+            className="group block relative h-[400px] md:h-[500px] lg:h-[650px] overflow-hidden border-b md:border-b-0 md:border-r border-white/10 last:border-0"
+          >
+            <Image
+              src={category.img}
               alt={category.title}
               fill
               className="object-cover transition-transform duration-1000 group-hover:scale-110"
               sizes="(max-width: 768px) 100vw, (max-width: 1024px) 50vw, 25vw"
-              unoptimized
             />
             <div className="absolute inset-0 bg-primary-dark/40 group-hover:bg-primary-dark/60 transition-all duration-500" />
             <div className="absolute inset-0 p-8 md:p-10 flex flex-col justify-end text-white">
               <div className="mb-4 md:mb-6 transform transition-all duration-500 group-hover:-translate-y-4">
                 <div className="w-12 h-12 md:w-16 md:h-16 bg-white/10 backdrop-blur-md rounded-xl flex items-center justify-center mb-4 md:mb-6 border border-white/20">
-                  <Image src={category.icon} alt="" width={40} height={40} className="w-8 h-8 md:w-10 md:h-10 brightness-0 invert" unoptimized />
+                  <Image
+                    src={category.icon}
+                    alt=""
+                    width={40}
+                    height={40}
+                    className="w-8 h-8 md:w-10 md:h-10 brightness-0 invert"
+                  />
                 </div>
-                <h3 className="text-xl md:text-2xl font-bold mb-2 md:mb-4 leading-tight">{category.title}</h3>
+                <h3 className="text-xl md:text-2xl font-bold mb-2 md:mb-4 leading-tight">
+                  {category.title}
+                </h3>
                 <p className="text-white/80 text-sm md:text-base line-clamp-3 opacity-100 md:opacity-0 group-hover:opacity-100 transition-all duration-500 max-h-24 md:max-h-0 group-hover:max-h-32">
                   {category.desc}
                 </p>
               </div>
               <div className="flex items-center text-accent font-bold tracking-wider uppercase text-xs md:text-xs opacity-100 md:opacity-0 group-hover:opacity-100 transition-all duration-500 delay-100">
-                {t('exploreCategory')} <span className="ml-2 transition-transform group-hover:translate-x-2">&rarr;</span>
+                {t('exploreCategory')}{' '}
+                <span className="ml-2 transition-transform group-hover:translate-x-2">&rarr;</span>
               </div>
             </div>
           </Link>

components/home/RecentPosts.tsx

@@ -1,4 +1,5 @@
 import React from 'react';
+import Image from 'next/image';
 import Link from 'next/link';
 import { getAllPosts } from '@/lib/blog';
 import { getTranslations } from 'next-intl/server';
@@ -22,8 +23,11 @@ export default async function RecentPosts({ locale }: RecentPostsProps) {
           <Heading level={2} subtitle={t('latestNews')} className="mb-0 text-primary">
             {t('allArticles')}
           </Heading>
-          <Link href={`/${locale}/blog`} className="group flex items-center text-primary font-bold text-base md:text-lg touch-target">
-            {t('allArticles')} 
+          <Link
+            href={`/${locale}/blog`}
+            className="group flex items-center text-primary font-bold text-base md:text-lg touch-target"
+          >
+            {t('allArticles')}
             <span className="ml-2 transition-transform group-hover:translate-x-2">&rarr;</span>
           </Link>
         </div>
@@ -34,10 +38,12 @@ export default async function RecentPosts({ locale }: RecentPostsProps) {
               <Card className="h-full flex flex-col border-none shadow-lg hover:shadow-2xl transition-all duration-500 rounded-3xl">
                 {post.frontmatter.featuredImage && (
                   <div className="relative h-64 overflow-hidden">
-                    <img 
-                      src={post.frontmatter.featuredImage} 
+                    <Image
+                      src={post.frontmatter.featuredImage}
                       alt={post.frontmatter.title}
+                      fill
                       className="w-full h-full object-cover transition-transform duration-700 group-hover:scale-110"
+                      sizes="(max-width: 768px) 100vw, 33vw"
                     />
                     <div className="absolute inset-0 image-overlay-gradient opacity-0 group-hover:opacity-100 transition-opacity duration-500" />
                     {post.frontmatter.category && (
@@ -53,7 +59,7 @@ export default async function RecentPosts({ locale }: RecentPostsProps) {
                     {new Date(post.frontmatter.date).toLocaleDateString(locale, {
                       year: 'numeric',
                       month: 'long',
-                      day: 'numeric'
+                      day: 'numeric',
                     })}
                   </div>
                   <h3 className="text-lg md:text-xl font-bold text-primary group-hover:text-accent-dark transition-colors line-clamp-2 mb-4 md:mb-6 leading-tight">
@@ -61,8 +67,18 @@ export default async function RecentPosts({ locale }: RecentPostsProps) {
                   </h3>
                   <div className="mt-auto flex items-center text-primary font-bold group-hover:underline decoration-2 underline-offset-4">
                     {t('readMore')}
-                    <svg className="ml-2 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="M17 8l4 4m0 0l-4 4m4-4H3" />
+                    <svg
+                      className="ml-2 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="M17 8l4 4m0 0l-4 4m4-4H3"
+                      />
                     </svg>
                   </div>
                 </div>

components/record-mode/PickingHelper.tsx

@@ -0,0 +1,118 @@
+'use client';
+
+import React, { useState, useEffect } from 'react';
+import { finder } from '@medv/finder';
+
+export function PickingHelper() {
+    const [pickingMode, setPickingMode] = useState<'click' | 'scroll' | null>(null);
+    const [hoveredElement, setHoveredElement] = useState<HTMLElement | null>(null);
+
+    useEffect(() => {
+        const handleMessage = (e: MessageEvent) => {
+            if (e.data.type === 'START_PICKING') {
+                setPickingMode(e.data.mode);
+            } else if (e.data.type === 'STOP_PICKING') {
+                setPickingMode(null);
+                setHoveredElement(null);
+            } else if (e.data.type === 'SET_HOVER_SELECTOR') {
+                const selector = e.data.selector;
+                if (selector) {
+                    const el = document.querySelector(selector) as HTMLElement;
+                    setHoveredElement(el || null);
+                } else {
+                    setHoveredElement(null);
+                }
+            }
+        };
+
+        window.addEventListener('message', handleMessage);
+        return () => window.removeEventListener('message', handleMessage);
+    }, []);
+
+    useEffect(() => {
+        if (!pickingMode) return;
+
+        const handleMouseOver = (e: MouseEvent) => {
+            const target = e.target as HTMLElement;
+            if (target.closest('.record-mode-ignore') || target.closest('.feedback-ui-ignore')) return;
+            setHoveredElement(target);
+        };
+
+        const handleClick = (e: MouseEvent) => {
+            if (hoveredElement) {
+                e.preventDefault();
+                e.stopPropagation();
+
+                const selector = finder(hoveredElement, {
+                    root: document.body,
+                    seedMinLength: 3,
+                    optimizedMinLength: 2,
+                    className: (name) =>
+                        !name.startsWith('record-mode-') &&
+                        !name.startsWith('feedback-') &&
+                        !name.includes('[') &&
+                        !name.includes('/') &&
+                        !name.match(/^[a-z]-[0-9]/) &&
+                        !name.match(/[0-9]{4,}/), // Avoid dynamic IDs in classnames
+                    idName: (name) => !name.startsWith('__next') && !name.includes(':') && !name.match(/[0-9]{5,}/),
+                });
+                const rect = hoveredElement.getBoundingClientRect();
+
+                window.parent.postMessage({
+                    type: 'ELEMENT_SELECTED',
+                    selector,
+                    rect: {
+                        x: rect.left,
+                        y: rect.top,
+                        width: rect.width,
+                        height: rect.height
+                    },
+                    tagName: hoveredElement.tagName.toLowerCase()
+                }, '*');
+
+                setPickingMode(null);
+                setHoveredElement(null);
+            }
+        };
+
+        const handleKeyDown = (e: KeyboardEvent) => {
+            if (e.key === 'Escape') {
+                setPickingMode(null);
+                setHoveredElement(null);
+                window.parent.postMessage({ type: 'PICKING_CANCELLED' }, '*');
+            }
+        };
+
+        window.addEventListener('mouseover', handleMouseOver);
+        window.addEventListener('click', handleClick, true);
+        window.addEventListener('keydown', handleKeyDown);
+
+        return () => {
+            window.removeEventListener('mouseover', handleMouseOver);
+            window.removeEventListener('click', handleClick, true);
+            window.removeEventListener('keydown', handleKeyDown);
+        };
+    }, [pickingMode, hoveredElement]);
+
+    if (!hoveredElement) return null;
+    // Don't show highlight if we are in picking mode but NOT hovering anything (handled by logic above)
+    // but DO show if we have a hoveredElement (from message or mouseover)
+
+    const rect = hoveredElement.getBoundingClientRect();
+
+    return (
+        <div
+            className="fixed pointer-events-none border-2 border-[#82ed20] bg-[#82ed20]/15 transition-all z-[9999] shadow-[0_0_20px_rgba(130,237,32,0.3)] rounded-sm"
+            style={{
+                top: rect.top,
+                left: rect.left,
+                width: rect.width,
+                height: rect.height,
+            }}
+        >
+            <div className="absolute top-0 right-0 bg-[#82ed20] text-black text-[10px] font-black px-1.5 py-1 transform -translate-y-full uppercase tracking-tighter shadow-xl">
+                {hoveredElement.tagName.toLowerCase()}
+            </div>
+        </div>
+    );
+}

components/record-mode/PlaybackCursor.tsx

@@ -0,0 +1,90 @@
+'use client';
+
+import React, { useEffect, useState } from 'react';
+import { motion, AnimatePresence } from 'framer-motion';
+import { useRecordMode } from './RecordModeContext';
+
+export function PlaybackCursor() {
+  const { isPlaying, cursorPosition, isClicking } = useRecordMode();
+  const [scrollOffset, setScrollOffset] = useState({ x: 0, y: 0 });
+
+  // Track scroll so cursor stays locked to the correct element
+  useEffect(() => {
+    if (!isPlaying) return;
+
+    const handleScroll = () => {
+      setScrollOffset({ x: window.scrollX, y: window.scrollY });
+    };
+
+    handleScroll(); // Init
+    window.addEventListener('scroll', handleScroll, { passive: true });
+    return () => window.removeEventListener('scroll', handleScroll);
+  }, [isPlaying]);
+
+  if (!isPlaying) return null;
+
+  return (
+    <motion.div
+      className="fixed z-[10000] pointer-events-none"
+      animate={{
+        x: cursorPosition.x,
+        y: cursorPosition.y,
+        scale: isClicking ? 0.8 : 1,
+        rotateX: isClicking ? 15 : 0,
+        rotateY: isClicking ? -15 : 0,
+      }}
+      transition={{
+        x: { type: 'spring', damping: 30, stiffness: 250, mass: 0.5 },
+        y: { type: 'spring', damping: 30, stiffness: 250, mass: 0.5 },
+        scale: { type: 'spring', damping: 15, stiffness: 400 },
+        rotateX: { type: 'spring', damping: 15, stiffness: 400 },
+        rotateY: { type: 'spring', damping: 15, stiffness: 400 },
+      }}
+      style={{ perspective: '1000px' }}
+    >
+      <AnimatePresence>
+        {isClicking && (
+          <motion.div
+            initial={{ scale: 0.5, opacity: 0 }}
+            animate={{ scale: 2.5, opacity: 0 }}
+            exit={{ opacity: 0 }}
+            transition={{ duration: 0.4, ease: 'easeOut' }}
+            className="absolute inset-0 rounded-full border-2 border-[#82ed20] blur-[1px]"
+          />
+        )}
+      </AnimatePresence>
+
+      {/* Outer Pulse Ring */}
+      <div
+        className={`absolute -inset-3 rounded-full bg-[#82ed20]/10 ${isClicking ? 'scale-150 opacity-0' : 'animate-ping'} transition-all duration-300`}
+      />
+
+      {/* Visual Cursor */}
+      <div className="relative">
+        {/* Soft Glow */}
+        <div
+          className={`absolute -inset-2 bg-[#82ed20]/20 rounded-full blur-md transition-all ${isClicking ? 'bg-[#82ed20]/50 blur-xl' : ''}`}
+        />
+
+        {/* Pointer Arrow */}
+        <svg
+          width="24"
+          height="24"
+          viewBox="0 0 24 24"
+          fill="none"
+          xmlns="http://www.w3.org/2000/svg"
+          className={`drop-shadow-[0_2px_8px_rgba(130,237,32,0.5)] transition-transform ${isClicking ? 'translate-y-0.5' : ''}`}
+        >
+          <path
+            d="M3 3L10.07 19.97L12.58 12.58L19.97 10.07L3 3Z"
+            fill={isClicking ? '#82ed20' : 'white'}
+            stroke="black"
+            strokeWidth="1.5"
+            strokeLinejoin="round"
+            className="transition-colors duration-150"
+          />
+        </svg>
+      </div>
+    </motion.div>
+  );
+}

components/record-mode/RecordModeContext.tsx

@@ -0,0 +1,392 @@
+'use client';
+
+import React, { createContext, useContext, useState, useEffect, useRef } from 'react';
+import { RecordEvent, RecordingSession } from '@/types/record-mode';
+
+interface RecordModeContextType {
+  isActive: boolean;
+  setIsActive: (active: boolean) => void;
+  events: RecordEvent[];
+  addEvent: (event: Omit<RecordEvent, 'id' | 'timestamp'>) => void;
+  updateEvent: (id: string, event: Partial<RecordEvent>) => void;
+  removeEvent: (id: string) => void;
+  clearEvents: () => void;
+  setEvents: (events: RecordEvent[]) => void;
+  isPlaying: boolean;
+  playEvents: () => void;
+  stopPlayback: () => void;
+  cursorPosition: { x: number; y: number };
+  zoomLevel: number;
+  isBlurry: boolean;
+  currentSession: RecordingSession | null;
+  saveSession: (name: string) => void;
+  isFeedbackActive: boolean;
+  setIsFeedbackActive: (active: boolean) => void;
+  reorderEvents: (startIndex: number, endIndex: number) => void;
+  hoveredEventId: string | null;
+  setHoveredEventId: (id: string | null) => void;
+  isClicking: boolean;
+  isEnabled: boolean;
+}
+
+const RecordModeContext = createContext<RecordModeContextType | null>(null);
+
+export function useRecordMode(): RecordModeContextType {
+  const context = useContext(RecordModeContext);
+  if (!context) {
+    return {
+      isActive: false,
+      setIsActive: () => {},
+      events: [],
+      addEvent: () => {},
+      updateEvent: () => {},
+      removeEvent: () => {},
+      clearEvents: () => {},
+      isPlaying: false,
+      playEvents: () => {},
+      stopPlayback: () => {},
+      cursorPosition: { x: 0, y: 0 },
+      zoomLevel: 1,
+      isBlurry: false,
+      currentSession: null,
+      isFeedbackActive: false,
+      setIsFeedbackActive: () => {},
+      saveSession: () => {},
+      reorderEvents: () => {},
+      hoveredEventId: null,
+      setHoveredEventId: () => {},
+      setEvents: () => {},
+      isClicking: false,
+      isEnabled: false,
+    };
+  }
+  return context;
+}
+
+export function RecordModeProvider({
+  children,
+  isEnabled = false,
+}: {
+  children: React.ReactNode;
+  isEnabled?: boolean;
+}) {
+  const [isActive, setIsActiveState] = useState(false);
+  const [events, setEvents] = useState<RecordEvent[]>([]);
+  const [isPlaying, setIsPlaying] = useState(false);
+  const [cursorPosition, setCursorPosition] = useState({ x: 0, y: 0 });
+  const [zoomLevel, setZoomLevel] = useState(1);
+  const [isBlurry, setIsBlurry] = useState(false);
+  const [isFeedbackActive, setIsFeedbackActiveState] = useState(false);
+  const [hoveredEventId, setHoveredEventId] = useState<string | null>(null);
+  const [isClicking, setIsClicking] = useState(false);
+  const [isEmbedded, setIsEmbedded] = useState(false);
+
+  useEffect(() => {
+    console.log('[RecordModeProvider] Mounted with isEnabled:', isEnabled);
+  }, [isEnabled]);
+
+  useEffect(() => {
+    if (!isEnabled) return;
+    const embedded =
+      typeof window !== 'undefined' &&
+      (window.location.search.includes('embedded=true') ||
+        window.name === 'record-mode-iframe' ||
+        window.self !== window.top);
+    setIsEmbedded(embedded);
+  }, [isEnabled]);
+
+  const setIsActive = (active: boolean) => {
+    if (!isEnabled) return;
+    setIsActiveState(active);
+    if (active) setIsFeedbackActiveState(false);
+  };
+
+  const setIsFeedbackActive = (active: boolean) => {
+    setIsFeedbackActiveState(active);
+    if (active && isEnabled) setIsActiveState(false);
+  };
+
+  const isPlayingRef = useRef(false);
+  const isLoadedRef = useRef(false);
+
+  useEffect(() => {
+    if (!isEnabled) return;
+    const savedEvents = localStorage.getItem('klz-record-events');
+    const savedActive = localStorage.getItem('klz-record-active');
+    if (savedEvents) setEvents(JSON.parse(savedEvents));
+    if (savedActive) setIsActive(JSON.parse(savedActive));
+    isLoadedRef.current = true;
+  }, [isEnabled]);
+
+  useEffect(() => {
+    if (!isEnabled || !isLoadedRef.current) return;
+    localStorage.setItem('klz-record-events', JSON.stringify(events));
+  }, [events, isEnabled]);
+
+  useEffect(() => {
+    if (!isEnabled) return;
+    localStorage.setItem('klz-record-active', JSON.stringify(isActive));
+  }, [isActive, isEnabled]);
+
+  useEffect(() => {
+    if (!isEnabled) return;
+    if (isEmbedded) {
+      const handlePlaybackMessage = (e: MessageEvent) => {
+        if (e.data.type === 'PLAY_EVENT') {
+          const { event } = e.data;
+          const el = event.selector
+            ? (document.querySelector(event.selector) as HTMLElement)
+            : null;
+          if (el) {
+            if (event.type === 'scroll') {
+              el.scrollIntoView({ behavior: 'smooth', block: 'center' });
+            } else if (event.type === 'mouse') {
+              const currentRect = el.getBoundingClientRect();
+              let targetX = currentRect.left + currentRect.width / 2;
+              let targetY = currentRect.top + currentRect.height / 2;
+
+              if (event.clickOrigin === 'top-left') {
+                targetX = currentRect.left + 5;
+                targetY = currentRect.top + 5;
+              } else if (event.clickOrigin === 'top-right') {
+                targetX = currentRect.right - 5;
+                targetY = currentRect.top + 5;
+              } else if (event.clickOrigin === 'bottom-left') {
+                targetX = currentRect.left + 5;
+                targetY = currentRect.bottom - 5;
+              } else if (event.clickOrigin === 'bottom-right') {
+                targetX = currentRect.right - 5;
+                targetY = currentRect.bottom - 5;
+              }
+
+              const eventCoords = { clientX: targetX, clientY: targetY };
+              const dispatchMouse = (type: string) => {
+                el.dispatchEvent(
+                  new MouseEvent(type, {
+                    view: window,
+                    bubbles: true,
+                    cancelable: true,
+                    ...eventCoords,
+                  }),
+                );
+              };
+
+              if (event.interactionType === 'click') {
+                setIsClicking(true);
+                dispatchMouse('mousedown');
+                setTimeout(() => {
+                  dispatchMouse('mouseup');
+                  if (event.realClick) {
+                    dispatchMouse('click');
+                    el.click();
+                  }
+                  setIsClicking(false);
+                }, 150);
+              } else {
+                dispatchMouse('mousemove');
+                dispatchMouse('mouseover');
+                dispatchMouse('mouseenter');
+              }
+            }
+          }
+        }
+      };
+      window.addEventListener('message', handlePlaybackMessage);
+      return () => window.removeEventListener('message', handlePlaybackMessage);
+    }
+  }, [isEmbedded, isEnabled]);
+
+  useEffect(() => {
+    if (!isEnabled || isEmbedded || !isActive) return;
+    const event = events.find((e) => e.id === hoveredEventId);
+    const iframe = document.querySelector('iframe[name="record-mode-iframe"]') as HTMLIFrameElement;
+    if (iframe?.contentWindow) {
+      iframe.contentWindow.postMessage(
+        { type: 'SET_HOVER_SELECTOR', selector: event?.selector || null },
+        '*',
+      );
+    }
+  }, [hoveredEventId, events, isActive, isEmbedded, isEnabled]);
+
+  const addEvent = (event: Omit<RecordEvent, 'id' | 'timestamp'>) => {
+    if (!isEnabled) return;
+    const newEvent: RecordEvent = {
+      realClick: false,
+      ...event,
+      id: Math.random().toString(36).substr(2, 9),
+      timestamp: Date.now(),
+    };
+    setEvents((prev) => [...prev, newEvent]);
+  };
+
+  const updateEvent = (id: string, updatedFields: Partial<RecordEvent>) => {
+    if (!isEnabled) return;
+    setEvents((prev) =>
+      prev.map((event) => (event.id === id ? { ...event, ...updatedFields } : event)),
+    );
+  };
+
+  const reorderEvents = (startIndex: number, endIndex: number) => {
+    if (!isEnabled) return;
+    const result = Array.from(events);
+    const [removed] = result.splice(startIndex, 1);
+    result.splice(endIndex, 0, removed);
+    setEvents(result);
+  };
+
+  const removeEvent = (id: string) => {
+    if (!isEnabled) return;
+    setEvents((prev) => prev.filter((event) => event.id !== id));
+  };
+
+  const clearEvents = () => {
+    if (!isEnabled) return;
+    if (confirm('Clear all recorded events?')) setEvents([]);
+  };
+
+  const currentSession: RecordingSession | null =
+    events.length > 0
+      ? {
+          id: 'draft',
+          name: 'Draft Session',
+          events,
+          createdAt: new Date().toISOString(),
+        }
+      : null;
+
+  const saveSession = (name: string) => {
+    if (!isEnabled) return;
+    console.log('Saving session:', name, events);
+  };
+
+  const playEvents = async () => {
+    if (!isEnabled || events.length === 0 || isPlayingRef.current) return;
+    setIsPlaying(true);
+    isPlayingRef.current = true;
+    const sortedEvents = [...events].sort((a, b) => (a.timestamp || 0) - (b.timestamp || 0));
+
+    for (const event of sortedEvents) {
+      if (!isPlayingRef.current) break;
+      if (event.rect && !isEmbedded) {
+        const iframe = document.querySelector(
+          'iframe[name="record-mode-iframe"]',
+        ) as HTMLIFrameElement;
+        const iframeRect = iframe?.getBoundingClientRect();
+        setCursorPosition({
+          x: (iframeRect?.left || 0) + event.rect.x + event.rect.width / 2,
+          y: (iframeRect?.top || 0) + event.rect.y + event.rect.height / 2,
+        });
+      }
+
+      if (event.selector) {
+        if (!isEmbedded) {
+          const iframe = document.querySelector(
+            'iframe[name="record-mode-iframe"]',
+          ) as HTMLIFrameElement;
+          if (iframe?.contentWindow)
+            iframe.contentWindow.postMessage({ type: 'PLAY_EVENT', event }, '*');
+        } else {
+          const el = document.querySelector(event.selector) as HTMLElement;
+          if (el) {
+            if (event.type === 'scroll') el.scrollIntoView({ behavior: 'smooth', block: 'center' });
+            else if (event.type === 'mouse') {
+              const currentRect = el.getBoundingClientRect();
+              let targetX = currentRect.left + currentRect.width / 2;
+              let targetY = currentRect.top + currentRect.height / 2;
+
+              if (event.clickOrigin === 'top-left') {
+                targetX = currentRect.left + 5;
+                targetY = currentRect.top + 5;
+              } else if (event.clickOrigin === 'top-right') {
+                targetX = currentRect.right - 5;
+                targetY = currentRect.top + 5;
+              } else if (event.clickOrigin === 'bottom-left') {
+                targetX = currentRect.left + 5;
+                targetY = currentRect.bottom - 5;
+              } else if (event.clickOrigin === 'bottom-right') {
+                targetX = currentRect.right - 5;
+                targetY = currentRect.bottom - 5;
+              }
+
+              const eventCoords = { clientX: targetX, clientY: targetY };
+              const dispatchMouse = (type: string) => {
+                el.dispatchEvent(
+                  new MouseEvent(type, {
+                    view: window,
+                    bubbles: true,
+                    cancelable: true,
+                    ...eventCoords,
+                  }),
+                );
+              };
+
+              if (event.interactionType === 'click') {
+                setIsClicking(true);
+                dispatchMouse('mousedown');
+                setTimeout(() => {
+                  dispatchMouse('mouseup');
+                  if (event.realClick) {
+                    dispatchMouse('click');
+                    el.click();
+                  }
+                  setIsClicking(false);
+                }, 150);
+              } else {
+                dispatchMouse('mousemove');
+                dispatchMouse('mouseover');
+                dispatchMouse('mouseenter');
+              }
+            }
+          }
+        }
+      }
+
+      if (event.zoom) setZoomLevel(event.zoom);
+      if (event.motionBlur) setIsBlurry(true);
+      await new Promise((resolve) => setTimeout(resolve, event.duration || 1000));
+      setIsBlurry(false);
+    }
+    setIsPlaying(false);
+    isPlayingRef.current = false;
+    setZoomLevel(1);
+  };
+
+  const stopPlayback = () => {
+    setIsPlaying(false);
+    isPlayingRef.current = false;
+    setZoomLevel(1);
+    setIsBlurry(false);
+  };
+
+  return (
+    <RecordModeContext.Provider
+      value={{
+        isActive,
+        setIsActive,
+        events,
+        addEvent,
+        updateEvent,
+        removeEvent,
+        clearEvents,
+        setEvents,
+        isPlaying,
+        playEvents,
+        stopPlayback,
+        cursorPosition,
+        zoomLevel,
+        isBlurry,
+        currentSession,
+        saveSession,
+        isFeedbackActive,
+        setIsFeedbackActive,
+        reorderEvents,
+        hoveredEventId,
+        setHoveredEventId,
+        isClicking,
+        isEnabled,
+      }}
+    >
+      {children}
+    </RecordModeContext.Provider>
+  );
+}

components/record-mode/RecordModeOverlay.tsx

@@ -0,0 +1,583 @@
+'use client';
+
+import React, { useState, useEffect } from 'react';
+import { useRecordMode } from './RecordModeContext';
+import { Reorder, AnimatePresence } from 'framer-motion';
+import {
+  Play,
+  Square,
+  MousePointer2,
+  Scroll,
+  Plus,
+  Save,
+  Trash2,
+  Eye,
+  Edit2,
+  X,
+  Check,
+  Download,
+  Settings2,
+  GripVertical,
+  Clock,
+  Maximize2,
+  Box,
+  ExternalLink,
+} from 'lucide-react';
+import { RecordEvent } from '@/types/record-mode';
+import { PlaybackCursor } from './PlaybackCursor';
+
+export function RecordModeOverlay() {
+  const {
+    isActive,
+    setIsActive,
+    events,
+    addEvent,
+    updateEvent,
+    removeEvent,
+    isPlaying,
+    playEvents,
+    saveSession,
+    clearEvents,
+    reorderEvents,
+    setHoveredEventId,
+    setEvents, // Added setEvents here
+  } = useRecordMode();
+
+  const [pickingMode, setPickingMode] = useState<'mouse' | 'scroll' | null>(null);
+  const [lastInteractionType, setLastInteractionType] = useState<'click' | 'hover'>('click');
+  const [hoveredElement, setHoveredElement] = useState<HTMLElement | null>(null);
+  const [editingEventId, setEditingEventId] = useState<string | null>(null);
+
+  // Edit form state
+  const [editForm, setEditForm] = useState<Partial<RecordEvent>>({});
+  const [mounted, setMounted] = useState(false);
+
+  useEffect(() => {
+    setMounted(true);
+  }, []);
+
+  useEffect(() => {
+    if (!mounted || !isActive) return;
+
+    const handleMessage = (e: MessageEvent) => {
+      if (e.data.type === 'ELEMENT_SELECTED') {
+        const { selector, rect, tagName } = e.data;
+
+        if (pickingMode === 'mouse') {
+          addEvent({
+            type: 'mouse',
+            interactionType: lastInteractionType,
+            selector,
+            duration: lastInteractionType === 'click' ? 1000 : 1500,
+            zoom: 1,
+            description: `Mouse ${lastInteractionType === 'click' ? '(Click)' : '(Hover)'} on ${tagName}`,
+            motionBlur: false,
+            realClick: false,
+            rect,
+          });
+        } else if (pickingMode === 'scroll') {
+          addEvent({
+            type: 'scroll',
+            selector,
+            duration: 1500,
+            zoom: 1,
+            description: `Scroll to ${tagName}`,
+            motionBlur: false,
+            rect,
+          });
+        }
+        setPickingMode(null);
+      } else if (e.data.type === 'PICKING_CANCELLED') {
+        setPickingMode(null);
+      }
+    };
+
+    window.addEventListener('message', handleMessage);
+
+    if (pickingMode) {
+      // Find the iframe and signal start picking
+      const iframe = document.querySelector('iframe');
+      if (iframe?.contentWindow) {
+        iframe.contentWindow.postMessage({ type: 'START_PICKING', mode: pickingMode }, '*');
+      }
+    } else {
+      // Signal stop picking
+      const iframe = document.querySelector('iframe');
+      if (iframe?.contentWindow) {
+        iframe.contentWindow.postMessage({ type: 'STOP_PICKING' }, '*');
+      }
+    }
+
+    return () => {
+      window.removeEventListener('message', handleMessage);
+    };
+  }, [isActive, pickingMode, addEvent, mounted]);
+
+  const saveEdit = () => {
+    if (editingEventId) {
+      updateEvent(editingEventId, editForm);
+      setEditingEventId(null);
+    }
+  };
+
+  const [showEvents, setShowEvents] = useState(true);
+
+  if (!mounted) return null;
+
+  if (!isActive) {
+    // Failsafe: Never render host toggle in embedded mode
+    if (
+      typeof window !== 'undefined' &&
+      (window.self !== window.top ||
+        window.name === 'record-mode-iframe' ||
+        window.location.search.includes('embedded=true'))
+    ) {
+      return null;
+    }
+
+    return (
+      <button
+        onClick={() => setIsActive(true)}
+        className="fixed bottom-6 left-6 z-[9999] bg-[#82ed20]/20 hover:bg-[#82ed20]/30 text-[#82ed20] p-4 rounded-full shadow-2xl transition-all hover:scale-110 record-mode-ignore border border-[#82ed20]/30 backdrop-blur-md animate-pulse"
+      >
+        <div className="w-5 h-5 rounded-[4px] border-2 border-[#82ed20]" />
+      </button>
+    );
+  }
+
+  return (
+    <div className="fixed inset-0 z-[9998] pointer-events-none font-sans">
+      {/* 1. Global Toolbar - Slim Industrial Bar */}
+      <div className="fixed bottom-6 left-1/2 -translate-x-1/2 z-[10000] pointer-events-auto">
+        <div className="bg-black/80 backdrop-blur-2xl border border-white/10 p-2 rounded-[24px] shadow-[0_32px_80px_rgba(0,0,0,0.8)] flex items-center gap-2">
+          {/* Identity Tag */}
+          <div className="flex items-center gap-3 px-4 py-2 bg-white/5 rounded-[16px] border border-white/5 mx-1">
+            <div className="w-2 h-2 rounded-full bg-accent animate-pulse" />
+            <div className="flex flex-col">
+              <span className="text-[10px] font-bold text-white uppercase tracking-wider leading-none">
+                Event Builder
+              </span>
+              <span className="text-[8px] text-white/30 uppercase tracking-widest mt-1">
+                Manual Mode
+              </span>
+            </div>
+          </div>
+
+          <div className="w-px h-6 bg-white/10 mx-1" />
+
+          {/* Action Tools */}
+          <div className="flex items-center gap-1">
+            <button
+              onClick={() => {
+                setPickingMode('mouse');
+                setLastInteractionType('click');
+              }}
+              className={`flex items-center gap-2 px-4 py-2.5 rounded-[16px] transition-all text-xs font-bold uppercase tracking-wide ${pickingMode === 'mouse' ? 'bg-accent text-primary-dark shadow-lg shadow-accent/20' : 'text-white/40 hover:text-white hover:bg-white/5'}`}
+            >
+              <MousePointer2 size={16} />
+              <span>Mouse</span>
+            </button>
+
+            <button
+              onClick={() => setPickingMode('scroll')}
+              className={`flex items-center gap-2 px-4 py-2.5 rounded-[16px] transition-all text-xs font-bold uppercase tracking-wide ${pickingMode === 'scroll' ? 'bg-accent text-primary-dark shadow-lg shadow-accent/20' : 'text-white/40 hover:text-white hover:bg-white/5'}`}
+            >
+              <Scroll size={16} />
+              <span>Scroll</span>
+            </button>
+
+            <button
+              onClick={() =>
+                addEvent({
+                  type: 'wait',
+                  duration: 2000,
+                  zoom: 1,
+                  description: 'Wait for 2s',
+                  motionBlur: false,
+                })
+              }
+              className="flex items-center gap-2 px-4 py-2.5 rounded-[16px] text-white/40 hover:text-white hover:bg-white/5 transition-all text-xs font-bold uppercase tracking-wide"
+            >
+              <Plus size={16} />
+              <span>Wait</span>
+            </button>
+          </div>
+
+          <div className="w-px h-6 bg-white/10 mx-1" />
+
+          {/* Sequence Controls */}
+          <div className="flex items-center gap-1 p-0.5">
+            <button
+              onClick={playEvents}
+              disabled={isPlaying || events.length === 0}
+              className="p-2.5 text-accent hover:bg-accent/10 rounded-[14px] disabled:opacity-20 transition-all"
+              title="Preview Sequence"
+            >
+              <Play size={18} fill="currentColor" />
+            </button>
+
+            <button
+              onClick={() => setShowEvents(!showEvents)}
+              className={`p-2.5 rounded-[14px] transition-all relative ${showEvents ? 'bg-white/10 text-white' : 'text-white/40 hover:text-white hover:bg-white/5'}`}
+            >
+              <Edit2 size={18} />
+              {events.length > 0 && (
+                <span className="absolute -top-1 -right-1 w-4 h-4 bg-accent text-primary-dark text-[10px] flex items-center justify-center rounded-full font-bold border-2 border-black">
+                  {events.length}
+                </span>
+              )}
+            </button>
+
+            <button
+              onClick={async () => {
+                const session = { events, name: 'Recording', createdAt: new Date().toISOString() };
+                try {
+                  const res = await fetch('/api/save-session', {
+                    method: 'POST',
+                    headers: { 'Content-Type': 'application/json' },
+                    body: JSON.stringify(session),
+                  });
+                  if (res.ok) {
+                    // Visual feedback could be improved, but alert is fine for dev tool
+                    alert('Session saved to remotion/session.json');
+                  } else {
+                    const err = await res.json();
+                    alert(`Failed to save: ${err.error}`);
+                  }
+                } catch (e) {
+                  console.error(e);
+                  alert('Error saving session');
+                }
+              }}
+              disabled={events.length === 0}
+              className="p-3 bg-white/5 hover:bg-green-500/20 rounded-2xl disabled:opacity-30 transition-all text-green-400"
+              title="Save to Project (Dev)"
+            >
+              <Save size={20} />
+            </button>
+
+            <button
+              onClick={() => {
+                const data = JSON.stringify(
+                  { events, name: 'Recording', createdAt: new Date().toISOString() },
+                  null,
+                  2,
+                );
+                const blob = new Blob([data], { type: 'application/json' });
+                const url = URL.createObjectURL(blob);
+                const a = document.createElement('a');
+                a.href = url;
+                a.download = 'remotion-session.json';
+                a.click();
+                URL.revokeObjectURL(url);
+              }}
+              disabled={events.length === 0}
+              className="p-3 bg-white/5 hover:bg-blue-500/20 rounded-2xl disabled:opacity-30 transition-all text-blue-400"
+              title="Download JSON"
+            >
+              <Download size={20} />
+            </button>
+          </div>
+
+          <div className="w-px h-6 bg-white/10 mx-1" />
+
+          <button
+            onClick={() => setIsActive(false)}
+            className="p-2.5 text-red-500 hover:bg-red-500/10 rounded-[14px] transition-all mx-1"
+            title="Exit Studio"
+          >
+            <X size={20} />
+          </button>
+        </div>
+      </div>
+
+      {/* 2. Event Timeline Popover */}
+      {showEvents && (
+        <div className="fixed bottom-[100px] left-1/2 -translate-x-1/2 w-[400px] pointer-events-auto z-[9999]">
+          <div className="bg-black/90 backdrop-blur-3xl border border-white/10 rounded-[32px] p-6 shadow-[0_40px_100px_rgba(0,0,0,0.9)] max-h-[500px] overflow-hidden flex flex-col scale-in">
+            <div className="flex items-center justify-between mb-6">
+              <div>
+                <h4 className="text-white font-bold text-lg leading-none">Recording Track</h4>
+                <p className="text-[10px] text-white/30 uppercase tracking-widest mt-2">
+                  {events.length} Actions Recorded
+                </p>
+              </div>
+              <button
+                onClick={clearEvents}
+                disabled={events.length === 0}
+                className="text-red-400/40 hover:text-red-400 transition-colors p-2 hover:bg-red-500/10 rounded-xl disabled:opacity-10"
+              >
+                <Trash2 size={18} />
+              </button>
+            </div>
+
+            <Reorder.Group
+              axis="y"
+              values={events}
+              onReorder={setEvents}
+              className="flex-1 overflow-y-auto space-y-2 pr-2 scrollbar-hide"
+            >
+              {events.length === 0 ? (
+                <div className="py-12 flex flex-col items-center justify-center text-white/10">
+                  <Plus size={40} strokeWidth={1} />
+                  <p className="text-xs mt-4">Timeline is empty</p>
+                </div>
+              ) : (
+                events.map((event, index) => (
+                  <Reorder.Item
+                    key={event.id}
+                    value={event}
+                    className="group flex items-center gap-3 bg-white/[0.03] border border-white/5 p-3 rounded-[20px] transition-all hover:bg-white/[0.06] hover:border-white/10"
+                    onMouseEnter={() => setHoveredEventId(event.id)}
+                    onMouseLeave={() => setHoveredEventId(null)}
+                  >
+                    <div className="cursor-grab active:cursor-grabbing text-white/10 hover:text-white/30 transition-colors">
+                      <GripVertical size={16} />
+                    </div>
+
+                    <div className="flex-1 min-w-0">
+                      <div className="flex items-center gap-2">
+                        <span className="text-white text-[10px] font-black uppercase tracking-widest">
+                          {event.type === 'mouse' ? `Mouse (${event.interactionType})` : event.type}
+                        </span>
+                        {event.clickOrigin &&
+                          event.clickOrigin !== 'center' &&
+                          event.interactionType === 'click' && (
+                            <span className="text-[8px] bg-accent/20 text-accent px-1.5 py-0.5 rounded uppercase font-bold">
+                              {event.clickOrigin}
+                            </span>
+                          )}
+                        <span className="text-[8px] bg-white/10 px-1.5 py-0.5 rounded text-white/40 font-mono italic">
+                          {event.duration}ms
+                        </span>
+                      </div>
+                      <p className="text-[9px] text-white/30 truncate font-mono mt-1 opacity-60">
+                        {event.selector || 'system:wait'}
+                      </p>
+                    </div>
+
+                    <div className="flex items-center gap-1">
+                      <button
+                        onClick={() => {
+                          setEditingEventId(event.id);
+                          setEditForm(event);
+                        }}
+                        className="p-2 text-white/0 group-hover:text-white/40 hover:text-white hover:bg-white/10 rounded-xl transition-all"
+                      >
+                        <Settings2 size={14} />
+                      </button>
+                      <button
+                        onClick={() => removeEvent(event.id)}
+                        className="p-2 text-white/0 group-hover:text-red-400/60 hover:text-red-400 hover:bg-red-500/10 rounded-xl transition-all"
+                      >
+                        <Trash2 size={14} />
+                      </button>
+                    </div>
+                  </Reorder.Item>
+                ))
+              )}
+            </Reorder.Group>
+          </div>
+        </div>
+      )}
+
+      {/* Industrial Selector Highlighter - handled inside iframe via PickingHelper */}
+
+      {/* Picking Tooltip */}
+      {pickingMode && (
+        <div className="fixed top-8 left-1/2 -translate-x-1/2 z-[10000] pointer-events-auto">
+          <div className="bg-accent text-primary-dark px-6 py-3 rounded-full flex items-center gap-4 shadow-[0_20px_40px_rgba(130,237,32,0.4)] animate-reveal border border-primary-dark/10">
+            <div className="flex items-center gap-2">
+              <div className="w-2 h-2 rounded-full bg-primary-dark animate-pulse" />
+              <span className="font-black uppercase tracking-widest text-xs">
+                Assigning {pickingMode}
+              </span>
+            </div>
+            <div className="w-px h-6 bg-primary-dark/20" />
+            <button
+              onClick={() => {
+                setPickingMode(null);
+                setHoveredElement(null);
+              }}
+              className="text-[10px] font-bold uppercase tracking-widest opacity-60 hover:opacity-100 transition-opacity bg-primary-dark/10 px-3 py-1.5 rounded-full"
+            >
+              ESC to Cancel
+            </button>
+          </div>
+        </div>
+      )}
+
+      <PlaybackCursor />
+
+      {/* 3. Event Options Panel (Sidebar-like) */}
+      <AnimatePresence>
+        {editingEventId && (
+          <div className="fixed inset-y-0 right-0 w-[350px] bg-black/95 backdrop-blur-3xl border-l border-white/10 z-[11000] pointer-events-auto p-8 shadow-[-40px_0_100px_rgba(0,0,0,0.9)] flex flex-col">
+            <div className="flex items-center justify-between mb-8">
+              <h3 className="text-white font-black uppercase tracking-tighter text-xl">
+                Event Options
+              </h3>
+              <button
+                onClick={() => setEditingEventId(null)}
+                className="p-2 text-white/40 hover:text-white transition-colors"
+              >
+                <X size={20} />
+              </button>
+            </div>
+
+            <div className="flex-1 space-y-8 overflow-y-auto pr-2 scrollbar-hide">
+              {/* Type Display */}
+              <div className="space-y-3">
+                <label className="text-[10px] uppercase tracking-[0.2em] font-bold text-white/30 leading-none">
+                  Interaction Type
+                </label>
+                <div className="flex gap-2 p-1 bg-white/5 rounded-2xl border border-white/5">
+                  <button
+                    onClick={() =>
+                      setEditForm((prev) => ({ ...prev, type: 'mouse', interactionType: 'click' }))
+                    }
+                    className={`flex-1 flex items-center justify-center gap-2 py-3 rounded-xl transition-all border ${editForm.type === 'mouse' && editForm.interactionType === 'click' ? 'bg-accent text-primary-dark border-accent' : 'text-white/40 border-transparent hover:border-white/10'}`}
+                  >
+                    <MousePointer2 size={14} />
+                    <span className="text-[10px] font-black uppercase">Click</span>
+                  </button>
+                  <button
+                    onClick={() =>
+                      setEditForm((prev) => ({ ...prev, type: 'mouse', interactionType: 'hover' }))
+                    }
+                    className={`flex-1 flex items-center justify-center gap-2 py-3 rounded-xl transition-all border ${editForm.type === 'mouse' && editForm.interactionType === 'hover' ? 'bg-accent text-primary-dark border-accent' : 'text-white/40 border-transparent hover:border-white/10'}`}
+                  >
+                    <Eye size={14} />
+                    <span className="text-[10px] font-black uppercase">Hover</span>
+                  </button>
+                  <button
+                    onClick={() => setEditForm((prev) => ({ ...prev, type: 'scroll' }))}
+                    className={`flex-1 flex items-center justify-center gap-2 py-3 rounded-xl transition-all border ${editForm.type === 'scroll' ? 'bg-accent text-primary-dark border-accent' : 'text-white/40 border-transparent hover:border-white/10'}`}
+                  >
+                    <Scroll size={14} />
+                    <span className="text-[10px] font-black uppercase">Scroll</span>
+                  </button>
+                  <button
+                    onClick={() => setEditForm((prev) => ({ ...prev, type: 'wait' }))}
+                    className={`flex-1 flex items-center justify-center gap-2 py-3 rounded-xl transition-all border ${editForm.type === 'wait' ? 'bg-accent text-primary-dark border-accent' : 'text-white/40 border-transparent hover:border-white/10'}`}
+                  >
+                    <Clock size={14} />
+                    <span className="text-[10px] font-black uppercase">Wait</span>
+                  </button>
+                </div>
+              </div>
+
+              {/* Precise Click Origin */}
+              {editForm.type === 'mouse' && editForm.interactionType === 'click' && (
+                <div className="space-y-4">
+                  <label className="text-[10px] uppercase tracking-[0.2em] font-bold text-white/30 leading-none">
+                    Click Origin
+                  </label>
+                  <div className="grid grid-cols-3 gap-2 p-2 bg-white/5 rounded-2xl border border-white/5">
+                    {[
+                      { id: 'top-left', label: 'TL' },
+                      { id: 'top-right', label: 'TR' },
+                      { id: 'center', label: 'CTR' },
+                      { id: 'bottom-left', label: 'BL' },
+                      { id: 'bottom-right', label: 'BR' },
+                    ].map((origin) => (
+                      <button
+                        key={origin.id}
+                        onClick={() =>
+                          setEditForm((prev) => ({ ...prev, clickOrigin: origin.id as any }))
+                        }
+                        className={`py-3 rounded-xl text-[10px] font-black uppercase tracking-tighter transition-all border ${editForm.clickOrigin === origin.id ? 'bg-accent text-primary-dark border-accent' : 'bg-transparent text-white/40 border-white/5 hover:border-white/20'}`}
+                      >
+                        {origin.label}
+                      </button>
+                    ))}
+                  </div>
+                </div>
+              )}
+
+              {/* Timing */}
+              <div className="space-y-4">
+                <label className="text-[10px] uppercase tracking-[0.2em] font-bold text-white/30 leading-none flex items-center justify-between">
+                  <span>Timeline Allocation</span>
+                  <span className="text-accent">{editForm.duration}ms</span>
+                </label>
+                <input
+                  type="range"
+                  min="0"
+                  max="5000"
+                  step="100"
+                  value={editForm.duration || 1000}
+                  onChange={(e) =>
+                    setEditForm((prev) => ({ ...prev, duration: parseInt(e.target.value) }))
+                  }
+                  className="w-full h-1 bg-white/10 rounded-lg appearance-none cursor-pointer accent-accent"
+                />
+              </div>
+
+              {/* Zoom & Effects */}
+              <div className="space-y-6">
+                <div className="flex items-center justify-between p-4 bg-white/5 rounded-2xl border border-white/5 group hover:border-white/20 transition-all">
+                  <div className="flex items-center gap-3">
+                    <Maximize2 size={18} className="text-white/40" />
+                    <span className="text-xs font-bold text-white uppercase tracking-wider">
+                      Zoom Shift
+                    </span>
+                  </div>
+                  <input
+                    type="number"
+                    step="0.1"
+                    min="1"
+                    max="3"
+                    value={editForm.zoom || 1}
+                    onChange={(e) =>
+                      setEditForm((prev) => ({ ...prev, zoom: parseFloat(e.target.value) }))
+                    }
+                    className="w-16 bg-white/10 border border-white/10 rounded-lg px-2 py-1 text-xs text-white text-center font-mono"
+                  />
+                </div>
+
+                <button
+                  onClick={() => setEditForm((prev) => ({ ...prev, motionBlur: !prev.motionBlur }))}
+                  className={`flex items-center justify-between w-full p-4 rounded-2xl border transition-all ${editForm.motionBlur ? 'bg-accent/10 border-accent/30 text-accent' : 'bg-white/5 border-white/5 text-white/40'}`}
+                >
+                  <div className="flex items-center gap-3">
+                    <Box size={18} />
+                    <span className="text-xs font-bold uppercase tracking-wider">Motion Blur</span>
+                  </div>
+                  {editForm.motionBlur ? <Check size={18} /> : <div className="w-[18px]" />}
+                </button>
+
+                {editForm.type === 'mouse' && editForm.interactionType === 'click' && (
+                  <button
+                    onClick={() => setEditForm((prev) => ({ ...prev, realClick: !prev.realClick }))}
+                    className={`flex items-center justify-between w-full p-4 rounded-2xl border transition-all ${editForm.realClick ? 'bg-orange-500/10 border-orange-500/30 text-orange-400' : 'bg-white/5 border-white/5 text-white/40'}`}
+                  >
+                    <div className="flex items-center gap-3">
+                      <ExternalLink size={18} />
+                      <div className="flex flex-col items-start">
+                        <span className="text-xs font-bold uppercase tracking-wider">
+                          Trigger Navigation
+                        </span>
+                        <span className="text-[8px] opacity-60">
+                          Allows URL transitions in Studio
+                        </span>
+                      </div>
+                    </div>
+                    {editForm.realClick ? <Check size={18} /> : <div className="w-[18px]" />}
+                  </button>
+                )}
+              </div>
+            </div>
+
+            <button
+              onClick={saveEdit}
+              className="mt-8 py-5 bg-accent text-primary-dark text-xs font-black uppercase tracking-[0.2em] rounded-2xl shadow-2xl shadow-accent/20 hover:scale-[1.02] transition-all"
+            >
+              Commit Changes
+            </button>
+          </div>
+        )}
+      </AnimatePresence>
+    </div>
+  );
+}

components/record-mode/RecordModeVisuals.tsx

@@ -0,0 +1,261 @@
+'use client';
+
+import React from 'react';
+import { useRecordMode } from './RecordModeContext';
+
+export function RecordModeVisuals({ children }: { children: React.ReactNode }) {
+  const { isActive, isPlaying, zoomLevel, cursorPosition, isBlurry } = useRecordMode();
+  const [mounted, setMounted] = React.useState(false);
+  const [isEmbedded, setIsEmbedded] = React.useState(false);
+  const [iframeUrl, setIframeUrl] = React.useState<string | null>(null);
+
+  React.useEffect(() => {
+    setMounted(true);
+    // Explicit non-magical detection
+    const embedded =
+      window.location.search.includes('embedded=true') || window.name === 'record-mode-iframe';
+    setIsEmbedded(embedded);
+
+    if (!embedded) {
+      const url = new URL(window.location.href);
+      url.searchParams.set('embedded', 'true');
+      setIframeUrl(url.toString());
+    }
+  }, [isEmbedded]);
+
+  // Hydration Guard: Match server on first render
+  if (!mounted) return <>{children}</>;
+
+  // Recursion Guard: If we are already in an embedded iframe,
+  // strictly return just the children to prevent Inception.
+  if (isEmbedded) {
+    return (
+      <>
+        <style
+          dangerouslySetInnerHTML={{
+            __html: `
+                    /* Harder Isolation: Hide ALL potentially duplicate overlays and DEV TOOLS */
+                    #nextjs-portal, 
+                    #nextjs-portal-root,
+                    [data-nextjs-toast-wrapper],
+                    .nextjs-static-indicator,
+                    [data-nextjs-indicator],
+                    [class*="nextjs-"],
+                    [id*="nextjs-"],
+                    nextjs-portal,
+                    #feedback-overlay,
+                    .feedback-ui-root,
+                    .feedback-ui-ignore,
+                    [class*="z-[9999]"],
+                    [class*="z-[10000]"],
+                    [style*="z-index: 9999"],
+                    [style*="z-index: 10000"],
+                    .fixed.bottom-6.left-6,
+                    .fixed.bottom-6.left-1/2,
+                    .feedback-ui-overlay,
+                    [id^="feedback-"],
+                    [class^="feedback-"] { 
+                        display: none !important; 
+                        opacity: 0 !important;
+                        visibility: hidden !important;
+                        pointer-events: none !important;
+                        z-index: -10000 !important;
+                    }
+                    
+                    /* Nuclear Option 2.0: Kill ALL scrollbars on ALL elements */
+                    * {
+                        scrollbar-width: none !important;
+                        -ms-overflow-style: none !important;
+                    }
+                    *::-webkit-scrollbar {
+                        display: none !important;
+                        width: 0 !important;
+                        height: 0 !important;
+                    }
+
+                    html, body {
+                        border-radius: 3rem;
+                        background: #050505 !important;
+                        color: white !important;
+                        overflow-x: hidden !important;
+                        overflow-y: auto !important;
+                    }
+                `,
+          }}
+        />
+        {children}
+      </>
+    );
+  }
+
+  return (
+    <>
+      {/* Global Style for Body Lock */}
+      {isActive && (
+        <style
+          dangerouslySetInnerHTML={{
+            __html: `
+                    html, body { 
+                        overflow: hidden !important; 
+                        height: 100vh !important; 
+                        position: fixed !important;
+                        width: 100vw !important;
+                    }
+                    /* Kill Next.js Dev tools on host while Studio is active */
+                    #nextjs-portal, 
+                    [data-nextjs-toast-wrapper],
+                    .nextjs-static-indicator {
+                        display: none !important;
+                    }
+                `,
+          }}
+        />
+      )}
+
+      <div
+        className={`transition-all duration-1000 ${isActive ? 'fixed inset-0 z-[9997] bg-[#020202] flex items-center justify-center p-6 md:p-12 lg:p-20' : 'relative w-full'}`}
+      >
+        {/* Studio Background - Only visible when active */}
+        {isActive && (
+          <div className="absolute inset-0 z-0 pointer-events-none overflow-hidden">
+            <div className="absolute inset-0 bg-gradient-to-br from-[#03110a] via-[#020202] to-[#030a11] animate-pulse duration-[10s]" />
+            <div
+              className="absolute -top-[60%] -left-[50%] w-[140%] h-[140%] rounded-full opacity-[0.7]"
+              style={{
+                background: 'radial-gradient(circle, #10b981 0%, transparent 70%)',
+                filter: 'blur(160px)',
+                animation: 'mesh-float-1 18s ease-in-out infinite',
+              }}
+            />
+            <div
+              className="absolute -bottom-[60%] -right-[50%] w-[130%] h-[130%] rounded-full opacity-[0.55]"
+              style={{
+                background: 'radial-gradient(circle, #06b6d4 0%, transparent 70%)',
+                filter: 'blur(150px)',
+                animation: 'mesh-float-2 22s ease-in-out infinite',
+              }}
+            />
+            <div
+              className="absolute -top-[30%] -right-[40%] w-[100%] h-[100%] rounded-full opacity-[0.5]"
+              style={{
+                background: 'radial-gradient(circle, #82ed20 0%, transparent 70%)',
+                filter: 'blur(130px)',
+                animation: 'mesh-float-3 14s ease-in-out infinite',
+              }}
+            />
+            <div
+              className="absolute -bottom-[50%] -left-[40%] w-[110%] h-[110%] rounded-full opacity-[0.45]"
+              style={{
+                background: 'radial-gradient(circle, #2563eb 0%, transparent 70%)',
+                filter: 'blur(140px)',
+                animation: 'mesh-float-4 20s ease-in-out infinite',
+              }}
+            />
+            <div
+              className="absolute inset-0 opacity-[0.12] mix-blend-overlay"
+              style={{
+                backgroundImage: `url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noiseFilter'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.7' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noiseFilter)'/%3E%3C/svg%3E")`,
+                backgroundSize: '128px 128px',
+              }}
+            />
+            <div
+              className="absolute inset-0 opacity-[0.06]"
+              style={{
+                backgroundImage:
+                  'repeating-linear-gradient(0deg, transparent, transparent 2px, rgba(255,255,255,0.03) 2px, rgba(255,255,255,0.03) 4px)',
+              }}
+            />
+          </div>
+        )}
+
+        <div
+          className={`transition-all duration-700 ease-in-out relative z-10 w-full ${isActive ? 'h-full max-h-[1000px] max-w-[1600px] drop-shadow-[0_60px_150px_rgba(0,0,0,1)] scale-in' : 'h-full'}`}
+          style={{
+            transform: isPlaying ? `scale(${zoomLevel})` : undefined,
+            transformOrigin: isPlaying ? `${cursorPosition.x}px ${cursorPosition.y}px` : 'center',
+            filter: isBlurry ? 'blur(4px)' : 'none',
+            willChange: 'transform, filter',
+            WebkitBackfaceVisibility: 'hidden',
+            backfaceVisibility: 'hidden',
+          }}
+        >
+          <div
+            className={
+              isActive
+                ? 'relative h-full w-full rounded-[3rem] overflow-hidden bg-[#050505] isolate'
+                : 'w-full h-full'
+            }
+            style={{ transform: isActive ? 'translateZ(0)' : 'none' }}
+          >
+            {isActive && (
+              <>
+                <div className="absolute inset-0 rounded-[3rem] border border-white/[0.08] pointer-events-none z-50" />
+                <div
+                  className="absolute inset-[-2px] rounded-[3rem] pointer-events-none z-20"
+                  style={{
+                    background:
+                      'linear-gradient(135deg, rgba(16,185,129,0.15), rgba(130,237,32,0.15))',
+                    animation: 'pulse-ring 4s ease-in-out infinite',
+                  }}
+                />
+                <div className="absolute inset-0 bg-gradient-to-b from-transparent via-[#82ed20]/[0.05] to-transparent h-[15%] w-full top-[-15%] animate-scan-slow z-50 pointer-events-none opacity-20" />
+              </>
+            )}
+
+            <div
+              className={
+                isActive
+                  ? 'w-full h-full rounded-[3rem] overflow-hidden relative'
+                  : 'w-full h-full relative'
+              }
+              style={{
+                WebkitMaskImage: isActive ? '-webkit-radial-gradient(white, black)' : 'none',
+                transform: isActive ? 'translateZ(0)' : 'none',
+              }}
+            >
+              {isActive && iframeUrl ? (
+                <iframe
+                  src={iframeUrl}
+                  name="record-mode-iframe"
+                  className="w-full h-full border-0 block"
+                  style={{
+                    backgroundColor: '#050505',
+                    scrollbarWidth: 'none',
+                    msOverflowStyle: 'none',
+                    height: '100%',
+                    width: '100%',
+                  }}
+                />
+              ) : (
+                <div
+                  className={
+                    isActive
+                      ? 'blur-2xl opacity-20 pointer-events-none scale-95 transition-all duration-700'
+                      : 'transition-all duration-700'
+                  }
+                >
+                  {children}
+                </div>
+              )}
+            </div>
+          </div>
+        </div>
+
+        <style
+          dangerouslySetInnerHTML={{
+            __html: `
+                    @keyframes mesh-float-1 { 0%, 100% { transform: translate(0, 0) scale(1) rotate(0deg); } 33% { transform: translate(15%, 10%) scale(1.1) rotate(5deg); } 66% { transform: translate(-10%, 20%) scale(0.9) rotate(-3deg); } }
+                    @keyframes mesh-float-2 { 0%, 100% { transform: translate(0, 0) scale(1) rotate(0deg); } 33% { transform: translate(-20%, -15%) scale(1.2) rotate(-8deg); } 66% { transform: translate(15%, -10%) scale(0.8) rotate(4deg); } }
+                    @keyframes mesh-float-3 { 0%, 100% { transform: translate(0, 0) scale(1.2); } 50% { transform: translate(20%, -25%) scale(0.7); } }
+                    @keyframes mesh-float-4 { 0%, 100% { transform: translate(0, 0) scale(1); } 50% { transform: translate(-15%, 25%) scale(1.1); } }
+                    @keyframes pulse-ring { 0%, 100% { opacity: 0.15; transform: scale(1); } 50% { opacity: 0.4; transform: scale(1.005); } }
+                    @keyframes scan-slow { 0% { transform: translateY(-100%); opacity: 0; } 5% { opacity: 0.2; } 95% { opacity: 0.2; } 100% { transform: translateY(800%); opacity: 0; } }
+                    @keyframes scale-in { 0% { transform: scale(0.95); opacity: 0; } 100% { transform: scale(1); opacity: 1; } }
+                    .scale-in { animation: scale-in 0.7s cubic-bezier(0.16, 1, 0.3, 1) forwards; }
+                `,
+          }}
+        />
+      </div>
+    </>
+  );
+}

components/record-mode/ToolCoordinator.tsx

@@ -0,0 +1,66 @@
+'use client';
+
+import React, { useState, useEffect } from 'react';
+import { useRecordMode } from './RecordModeContext';
+import { FeedbackOverlay } from '@mintel/next-feedback/FeedbackOverlay';
+import { RecordModeOverlay } from './RecordModeOverlay';
+import { PickingHelper } from './PickingHelper';
+
+interface ToolCoordinatorProps {
+  isEmbedded?: boolean;
+  feedbackEnabled?: boolean;
+}
+
+export function ToolCoordinator({
+  isEmbedded: isEmbeddedProp,
+  feedbackEnabled = false,
+}: ToolCoordinatorProps) {
+  const { isActive, setIsActive, isFeedbackActive, setIsFeedbackActive, isEnabled } =
+    useRecordMode();
+  const [isEmbedded, setIsEmbedded] = useState(false);
+  const [mounted, setMounted] = useState(false);
+
+  useEffect(() => {
+    setMounted(true);
+    const embedded =
+      isEmbeddedProp ||
+      window.location.search.includes('embedded=true') ||
+      window.name === 'record-mode-iframe' ||
+      window.self !== window.top;
+    setIsEmbedded(embedded);
+  }, [isEmbeddedProp]);
+
+  if (!mounted) return null;
+
+  // Nothing enabled → render nothing
+  if (!feedbackEnabled && !isEnabled) return null;
+
+  // Iframe → only PickingHelper
+  if (isEmbedded) return <PickingHelper />;
+
+  // Record Mode active and enabled
+  if (isActive && isEnabled) return <RecordModeOverlay />;
+
+  // Feedback active and enabled
+  if (isFeedbackActive && feedbackEnabled) {
+    return (
+      <FeedbackOverlay
+        isActive={isFeedbackActive}
+        onActiveChange={(active) => setIsFeedbackActive(active)}
+      />
+    );
+  }
+
+  // Baseline: toggle buttons
+  return (
+    <div className="feedback-ui-ignore">
+      {feedbackEnabled && (
+        <FeedbackOverlay
+          isActive={false}
+          onActiveChange={(active) => setIsFeedbackActive(active)}
+        />
+      )}
+      {isEnabled && <RecordModeOverlay />}
+    </div>
+  );
+}

data/blog/de/milliarden-paket-fuer-infrastruktur-der-kabel-boom-steht-bevor.mdx

@@ -24,15 +24,9 @@ image="https://www.zdf.de/assets/bundestag-berlin-118~1280x720?cb=1741856505967"
 ### Warum Kabelhersteller jetzt durchstarten sollten
 Es wird viel über Subventionen, Fördergelder und deren Verwendung gesprochen. Doch die eigentliche Herausforderung bleibt: Die notwendige Infrastruktur muss geschaffen werden – und das gelingt nur mit leistungsfähigen Kabeln.
 Die folgenden Trends sind für uns besonders relevant:
-- <strong>Ausbau von Stromleitungen und Netzanschlussprojekten:<br />
-
-</strong>Mit dem beschlossenen Milliardenpaket ist klar: Stromleitungen, die erneuerbare Energiequellen wie Onshore-Windparks oder Solaranlagen anbinden, müssen massiv ausgebaut werden. Dabei geht es in erster Linie um die Integration der Stromerzeugung aus Windkraftanlagen ins Netz.Unsere Nieder-, Mittel- und Hochspannungskabel sind dafür ausgelegt, diesen Anforderungen gerecht zu werden.
-- <strong>Dezentralisierung der Energieversorgung:<br />
-
-</strong>Ein weiteres zentrales Thema ist der Trend zur [dezentralen Energieversorgung](https://energas-gmbh.de/dezentrale-energieerzeugung/). Immer mehr Energie wird direkt vor Ort erzeugt – und muss zuverlässig ins Netz eingespeist werden. Auch hier sind leistungsfähige Erdkabelsysteme gefragt, die sich durch hohe Belastbarkeit und Widerstandsfähigkeit auszeichnen.
-- <strong>Klimaschutzmaßnahmen und klimafreundlicher Umbau der Wirtschaft:<br />
-
-</strong>Da 100 Milliarden Euro speziell für den klimafreundlichen Umbau vorgesehen sind, können wir davon ausgehen, dass Projekte zur Elektrifizierung, CO2-Reduktion und zum Ausbau regenerativer Energien massiv gefördert werden.
+- <strong>Ausbau von Stromleitungen und Netzanschlussprojekten:<br /></strong>Mit dem beschlossenen Milliardenpaket ist klar: Stromleitungen, die erneuerbare Energiequellen wie Onshore-Windparks oder Solaranlagen anbinden, müssen massiv ausgebaut werden. Dabei geht es in erster Linie um die Integration der Stromerzeugung aus Windkraftanlagen ins Netz.Unsere Nieder-, Mittel- und Hochspannungskabel sind dafür ausgelegt, diesen Anforderungen gerecht zu werden.
+- <strong>Dezentralisierung der Energieversorgung:<br /></strong>Ein weiteres zentrales Thema ist der Trend zur [dezentralen Energieversorgung](https://energas-gmbh.de/dezentrale-energieerzeugung/). Immer mehr Energie wird direkt vor Ort erzeugt – und muss zuverlässig ins Netz eingespeist werden. Auch hier sind leistungsfähige Erdkabelsysteme gefragt, die sich durch hohe Belastbarkeit und Widerstandsfähigkeit auszeichnen.
+- <strong>Klimaschutzmaßnahmen und klimafreundlicher Umbau der Wirtschaft:<br /></strong>Da 100 Milliarden Euro speziell für den klimafreundlichen Umbau vorgesehen sind, können wir davon ausgehen, dass Projekte zur Elektrifizierung, CO2-Reduktion und zum Ausbau regenerativer Energien massiv gefördert werden.
 Dies betrifft insbesondere Kabelsysteme, die für hohe Leistung und Stabilität ausgelegt sind – so wie die, die wir bei **KLZ** liefern.
 ### **Die Rolle von KLZ in dieser gigantischen Investitionsoffensive**
 Mit diesen milliardenschweren Investitionen wird der Bedarf an Erdkabeln, insbesondere Mittelspannungskabeln, geradezu explodieren. Die Frage ist nicht, **ob** Kabel gebraucht werden – sondern **wann und in welchen Mengen**. Und genau da kommen wir ins Spiel.

data/blog/de/warum-windpark-netzanschlusskabel-extremen-belastungen-standhalten-muessen.mdx

@@ -48,18 +48,15 @@ Ein hochwertiges Netzanschlusskabel kombiniert all diese Eigenschaften und garan
 Ein Kabel allein reicht nicht – die richtige Installation entscheidet über seine Lebensdauer. Fehler in der Verlegung können dazu führen, dass selbst die besten Materialien frühzeitig versagen.
 ### Warum die richtige Verlegeart entscheidend ist
 Die Art der Verlegung hat einen direkten Einfluss auf die Kabelbelastung:
-- <p><strong>Direkte Erdverlegung:<br />
-
-– </strong>Hohe Wärmeableitung, da der Boden Wärme aufnimmt.<br />
-– Gefahr durch Erdbewegungen und Setzungen.
-- <p><strong>Kabelschutzrohre:<br />
-
-</strong>– Schutz vor mechanischen Belastungen.<br />
-– Kann Wärmeabfuhr einschränken, wenn nicht ausreichend belüftet.
-- <p><strong>Freiluftverlegung:<br />
-
-</strong>– Schnelle Wartung und Austauschmöglichkeit.<br />
-– Höhere Beanspruchung durch UV-Strahlung und Witterung.
+- **Direkte Erdverlegung:**  
+  – Hohe Wärmeableitung, da der Boden Wärme aufnimmt.  
+  – Gefahr durch Erdbewegungen und Setzungen.
+- **Kabelschutzrohre:**  
+  – Schutz vor mechanischen Belastungen.  
+  – Kann Wärmeabfuhr einschränken, wenn nicht ausreichend belüftet.
+- **Freiluftverlegung:**  
+  – Schnelle Wartung und Austauschmöglichkeit.  
+  – Höhere Beanspruchung durch UV-Strahlung und Witterung.
 ### Thermische Belastung: Ein oft unterschätzter Faktor
 Die Betriebstemperatur beeinflusst maßgeblich die Lebensdauer eines Kabels. Jede** Temperaturerhöhung **um 10 °C** halbiert **die** Lebensdauer **des** Isolationsmaterials.**
 Daher müssen Kabel richtig dimensioniert werden, um eine Überhitzung zu vermeiden. Zusätzliche Maßnahmen wie Wärmeableitungsgräben oder spezielle Bettungsmaterialien können helfen, die Temperaturen im Betrieb zu kontrollieren.

data/blog/en/billion-euro-package-for-infrastructure-the-cable-boom-is-coming.mdx

@@ -10,16 +10,13 @@ What is particularly interesting is that **100 billion euros of this is specific
 While politicians are still debating the sense and nonsense of the use of the funds, one thing is certain for us as a cable supplier: nothing will work without cables. Neither in the expansion of wind farms, nor in the laying of power lines or the modernization of energy infrastructures. The demand for cable will therefore increase – considerably.
 ### The billion-euro package and its distribution – who gets what?
 The distribution of the money is clearly defined and comprises three major areas:
-- <p>**500 billion euros total budget:**<br />
-
-This sum will be made available over **twelve** years. An ambitious project that is being pursued with a lot of hope and just as much skepticism.
-- <p>**100 billion euros for the federal states:**<br />
-
-This is intended to enable the federal states to push ahead with their own infrastructure projects. These include the expansion of electricity grids, the connection of new wind and solar parks and measures to increase grid stability.
-- <p>**100 billion euros for climate protection:**<br />
-
-The green part of the package, which is clearly aimed at converting the economy to climate-friendly technologies. This means: more onshore wind turbines, more solar parks, more cables.<br />
-These funds will be made available via the existing **Climate and Transformation Fund (KTF)** and are intended to help reduce CO2 emissions while guaranteeing a stable energy supply.
+- **500 billion euros total budget:**  
+  This sum will be made available over **twelve** years. An ambitious project that is being pursued with a lot of hope and just as much skepticism.
+- **100 billion euros for the federal states:**  
+  This is intended to enable the federal states to push ahead with their own infrastructure projects. These include the expansion of electricity grids, the connection of new wind and solar parks and measures to increase grid stability.
+- **100 billion euros for climate protection:**  
+  The green part of the package, which is clearly aimed at converting the economy to climate-friendly technologies. This means: more onshore wind turbines, more solar parks, more cables.  
+  These funds will be made available via the existing **Climate and Transformation Fund (KTF)** and are intended to help reduce CO2 emissions while guaranteeing a stable energy supply.
 ### Why cable suppliers should hit the ground running now
 There is a lot of talk about subsidies, funding and how to use it. But the real challenge remains: The necessary infrastructure must be created – and that only works with high-performance cables.
 The following trends are particularly relevant for us:
@@ -34,15 +31,12 @@ This applies in particular to cable systems that are designed for high performan
 ### KLZ&#8217;s role in this gigantic investment offensive
 With these billion-euro investments, the demand for underground cables, especially medium-voltage cables, will virtually explode. The question is not **whether** cables will be needed – but **when** and in **what** quantities. And that&#8217;s where we come in.
 <h4>Our strengths:</h4>
-- <p>**High-quality cables:**<br />
-
-We only supply [high-quality cables](/power-cables/), such as the **NA2XS(F)2Y**, **NAYY** or even the **NAYY-J**. These are ideally suited for use in onshore wind farms, solar fields and transformer stations. They offer high reliability, resilience and durability.
-- <p>**Fast delivery thanks to logistical efficiency:**<br />
-
-Thanks to our central logistics hub, we can deliver quickly and reliably – including to our customers in the Netherlands. This is a decisive advantage when projects have to be realized under time pressure.
-- <p>**Sustainability:**<br />
-
-While the German government is pushing ahead with its climate targets, we are also doing our bit. We have long attached great importance to sustainable solutions that meet the requirements of the future.
+- **High-quality cables:**  
+  We only supply [high-quality cables](/power-cables/), such as the **NA2XS(F)2Y**, **NAYY** or even the **NAYY-J**. These are ideally suited for use in onshore wind farms, solar fields and transformer stations. They offer high reliability, resilience and durability.
+- **Fast delivery thanks to logistical efficiency:**  
+  Thanks to our central logistics hub, we can deliver quickly and reliably – including to our customers in the Netherlands. This is a decisive advantage when projects have to be realized under time pressure.
+- **Sustainability:**  
+  While the German government is pushing ahead with its climate targets, we are also doing our bit. We have long attached great importance to sustainable solutions that meet the requirements of the future.
 ### Why the timing is ideal for grid expansion
 Of course, not everyone approves of this mega project. There are those who criticize the project as being too ambitious or poorly planned. But one thing is certain: the demand for modern infrastructure will increase, and it will increase dramatically.
 Instead of discussing whether it is the best solution, we are concentrating on **ensuring that the best cable technology is available when it is needed**. The energy transition will come – and we will make sure that it really works.

data/pages/de/danke.mdx

@@ -1,31 +0,0 @@
----
-title: Thanks – Deutsch
-excerpt: '[vc_column…'
-featuredImage: null
-locale: de
----
-# Thanks – Deutsch
-
-<div class="flex-shrink-0 flex flex-col relative items-end">
-<div>
-<div class="pt-0">
-<div class="gizmo-bot-avatar flex h-8 w-8 items-center justify-center overflow-hidden rounded-full">
-<h2 class="relative p-1 rounded-sm flex items-center justify-center bg-token-main-surface-primary text-token-text-primary h-8 w-8">Vielen Dank!</h2>
-</div>
-</div>
-</div>
-</div>
-<div class="group/conversation-turn relative flex w-full min-w-0 flex-col agent-turn">
-<div class="flex-col gap-1 md:gap-3">
-<div class="flex max-w-full flex-col flex-grow">
-<div class="min-h-8 text-message flex w-full flex-col items-end gap-2 whitespace-normal break-words text-start [.text-message+&amp;]:mt-5" dir="auto" data-message-author-role="assistant" data-message-id="f524f802-9a51-4037-b74f-9dc5f97ba9ca" data-message-model-slug="gpt-4o">
-<div class="flex w-full flex-col gap-1 empty:hidden first:pt-[3px]">
-<div class="markdown prose w-full break-words dark:prose-invert dark">
-<p>Wir haben Ihre Nachricht erhalten und melden uns schnellstmöglich bei Ihnen. Unser Team ist bereits startklar, um Ihnen weiterzuhelfen!</p>
-</div>
-</div>
-</div>
-</div>
-</div>
-</div>
-JTNDJTIxLS0lMjBHb29nbGUlMjB0YWclMjAlMjhndGFnLmpzJTI5JTIwLS0lM0UlMjAlM0NzY3JpcHQlMjBhc3luYyUyMHNyYyUzRCUyMmh0dHBzJTNBJTJGJTJGd3d3Lmdvb2dsZXRhZ21hbmFnZXIuY29tJTJGZ3RhZyUyRmpzJTNGaWQlM0RBVy0xNzA5NTg5MjIzOCUyMiUzRSUzQyUyRnNjcmlwdCUzRSUyMCUzQ3NjcmlwdCUzRSUyMHdpbmRvdy5kYXRhTGF5ZXIlMjAlM0QlMjB3aW5kb3cuZGF0YUxheWVyJTIwJTdDJTdDJTIwJTVCJTVEJTNCJTIwZnVuY3Rpb24lMjBndGFnJTI4JTI5JTdCZGF0YUxheWVyLnB1c2glMjhhcmd1bWVudHMlMjklM0IlN0QlMjBndGFnJTI4JTI3anMlMjclMkMlMjBuZXclMjBEYXRlJTI4JTI5JTI5JTNCJTIwZ3RhZyUyOCUyN2NvbmZpZyUyNyUyQyUyMCUyN0FXLTE3MDk1ODkyMjM4JTI3JTI5JTNCJTIwJTNDJTJGc2NyaXB0JTNF

data/pages/de/kontakt.mdx

@@ -1,89 +0,0 @@
----
-title: Contact – Deutsch
-excerpt: '[vc_column column_padding=”no-extra-padding”…'
-featuredImage: null
-locale: de
----
-# Contact – Deutsch
-
-<h5>Wie können wir Ihnen helfen?</h5>
-<h2>Schwebt Ihnen bereits ein Projekt vor?</h2>
-
-<p style="text-align: left;"><div class="frm_forms  with_frm_style frm_style_klz" id="frm_form_2_container" data-token="1bab1f2ae16527f65d9f48545407888d">
-<form enctype="multipart/form-data" method="post" class="frm-show-form  frm_pro_form " id="form_contact-deutsch" data-token="1bab1f2ae16527f65d9f48545407888d">
-<div class="frm_form_fields ">
-<fieldset>
-<legend class="frm_screen_reader">Contact Us - Deutsch</legend>
-
-<div class="frm_fields_container">
-<input type="hidden" name="frm_action" value="create" />
-<input type="hidden" name="form_id" value="2" />
-<input type="hidden" name="frm_hide_fields_2" id="frm_hide_fields_2" value="" />
-<input type="hidden" name="form_key" value="contact-deutsch" />
-<input type="hidden" name="item_meta[0]" value="" />
-<input type="hidden" id="frm_submit_entry_2" name="frm_submit_entry_2" value="2aee9616df" /><input type="hidden" name="_wp_http_referer" value="/wp-json/wp/v2/pages?per_page=100&#038;page=1&#038;_embed=true" /><div id="frm_field_8_container" class="frm_form_field form-field  frm_required_field frm_top_container frm_first frm_half">
-	<label for="field_qh4icy2" id="field_qh4icy2_label" class="frm_primary_label">Name
-		<span class="frm_required" aria-hidden="true">*</span>
-	</label>
-	<input  type="text" id="field_qh4icy2" name="item_meta[8]" value=""  data-reqmsg="Name cannot be blank." aria-required="true" data-invmsg="Name is invalid" aria-invalid="false"   aria-describedby="frm_desc_field_qh4icy2" />
-	<div class="frm_description" id="frm_desc_field_qh4icy2">First Name</div>
-	
-</div>
-<div id="frm_field_9_container" class="frm_form_field form-field  frm_required_field frm_hidden_container frm_half">
-	<label for="field_ocfup12" id="field_ocfup12_label" class="frm_primary_label">Nachname
-		<span class="frm_required" aria-hidden="true">*</span>
-	</label>
-	<input  type="text" id="field_ocfup12" name="item_meta[9]" value=""  data-reqmsg="Nachname cannot be blank." aria-required="true" data-invmsg="Nachname is invalid" aria-invalid="false"   aria-describedby="frm_desc_field_ocfup12" />
-	<div class="frm_description" id="frm_desc_field_ocfup12">Last Name</div>
-	
-</div>
-<div id="frm_field_10_container" class="frm_form_field form-field  frm_required_field frm_top_container frm_full">
-	<label for="field_29yf4d2" id="field_29yf4d2_label" class="frm_primary_label">E-Mail
-		<span class="frm_required" aria-hidden="true">*</span>
-	</label>
-	<input type="email" id="field_29yf4d2" name="item_meta[10]" value=""  data-reqmsg="E-Mail cannot be blank." aria-required="true" data-invmsg="Please enter a valid email address" aria-invalid="false"  />
-
-</div>
-<div id="frm_field_11_container" class="frm_form_field form-field  frm_required_field frm_top_container frm_full">
-	<label for="field_e6lis62" id="field_e6lis62_label" class="frm_primary_label">Betreff
-		<span class="frm_required" aria-hidden="true">*</span>
-	</label>
-	<input  type="text" id="field_e6lis62" name="item_meta[11]" value=""  data-reqmsg="Betreff cannot be blank." aria-required="true" data-invmsg="Betreff is invalid" aria-invalid="false"   />
-
-</div>
-<div id="frm_field_12_container" class="frm_form_field form-field  frm_required_field frm_top_container frm_full">
-	<label for="field_9jv0r12" id="field_9jv0r12_label" class="frm_primary_label">Nachricht
-		<span class="frm_required" aria-hidden="true">*</span>
-	</label>
-	<textarea name="item_meta[12]" id="field_9jv0r12" rows="5"  data-reqmsg="Nachricht cannot be blank." aria-required="true" data-invmsg="Nachricht is invalid" aria-invalid="false"  ></textarea>
-
-</div>
-<div id="frm_field_15_container" class="frm_form_field form-field  frm_none_container">
-	<label for="g-recaptcha-response" id="field_fvtwy_label" class="frm_primary_label">Captcha
-		<span class="frm_required" aria-hidden="true"></span>
-	</label>
-	<div  id="field_fvtwy" class="frm-g-recaptcha" data-sitekey="6LczZ7wqAAAAANwlgLaISgENVDZ1rTPe6LnTJgEk" data-size="invisible" data-theme="light"></div>
-
-</div>
-<div id="frm_field_13_container" class="frm_form_field form-field ">
-	<div class="frm_submit frm_flex">
-<button class="frm_button_submit frm_final_submit" type="submit"   formnovalidate="formnovalidate">Senden</button>
-
-</div>
-</div>
-	<input type="hidden" name="item_key" value="" />
-			<div id="frm_field_27_container">
-			<label for="field_eeiza" >
-				If you are human, leave this field blank.			</label>
-			<input  id="field_eeiza" type="text" class="frm_form_field form-field frm_verify" name="item_meta[27]" value=""  />
-		</div>
-		<input name="frm_state" type="hidden" value="LzUMsLqCGT3RC/3NDZwBs8xiLSRtku+v3mS6FD5Px53CgMo7ngsrjnaIkQVSZFX3" /></div>
-</fieldset>
-</div>
-
-</form>
-</div>
-
-KLZ Cables<br />
-Raiffeisenstraße 22<br />
-73630 Remshalden

data/pages/de/start.mdx

@@ -1,212 +0,0 @@
----
-title: Home – Deutsch
-excerpt: >-
-  [vc_row type=”full_width_background”
-  full_screen_row_position=”middle”
-  column_margin=”default” equal_height=”yes”
-  content_placement=”bottom” column_direction=”default”
-  column_direction_tablet=”default”
-  column_direction_phone=”default” bg_color=”#d1d1ca”
-  bg_image=”45569″ bg_position=”center bottom”
-  background_image_loading=”lazy-load”
-  bg_repeat=”no-repeat” video_bg=”use_video”
-  video_mp4=”/uploads/2025/02/header.mp4″
-  video_webm=”/uploads/2025/02/header.webm”
-  background_video_loading=”lazy-load”
-  scene_position=”center” top_padding=”15%”
-  bottom_padding=”13%” text_color=”light”
-  text_align=”left” row_border_radius=”none”
-  row_border_radius_applies=”bg” overflow=”visible”
-  enable_gradient=”true”
-  color_overlay=”rgba(0,0,0,0.01)”
-  color_overlay_2=”rgba(0,0,0,0.32)”…
-featuredImage: null
-locale: de
----
-# Home – Deutsch
-
-<h1><strong>Wir tragen zum Ausbau der Energiekabelnetze für eine <em>grüne</em> Zukunft bei</strong></h1>
-
-<h4>Niederspannung</h4>
-<p>Zuverlässige und sichere Stromversorgung für den Alltag.
-<h4>Mittelspannung</h4>
-<p>Das perfekte Gleichgewicht zwischen Kraft und Leistung für industrielle und städtische Netze.
-<h4>Hochspannung</h4>
-<p>Maximale Leistung über große Entfernungen &#8211; ohne Kompromisse.
-<h4>Solar Cables</h4>
-<p>Connecting the sun’s energy to your sustainable future.[fancy_box box_style=&#8221;hover_desc&#8221; icon_family=&#8221;custom&#8221; custom_icon_image=&#8221;6486&#8243; image_url=&#8221;6521&#8243; hover_color=&#8221;accent-color&#8221; hover_desc_color_opacity=&#8221;default&#8221; hover_desc_hover_overlay_opacity=&#8221;default&#8221; icon_position=&#8221;bottom&#8221; box_alignment=&#8221;left&#8221; hover_desc_bg_animation=&#8221;long_zoom&#8221; border_radius=&#8221;default&#8221; image_loading=&#8221;lazy-load&#8221; color_scheme=&#8221;dark&#8221; secondary_content=&#8221;here&#8217;s some awesome text that would only be shown on hover&#8221; min_height=&#8221;500&#8243; hover_content=&#8221;Zuverlässige und sichere Stromversorgung für den Alltag.&#8221; link_url=&#8221;/de/stromkabel/niederspannungskabel/&#8221;]
-<h3>Niederspannung</h3>
-[/fancy_box][fancy_box box_style=&#8221;hover_desc&#8221; icon_family=&#8221;custom&#8221; custom_icon_image=&#8221;6487&#8243; image_url=&#8221;6517&#8243; hover_color=&#8221;accent-color&#8221; hover_desc_color_opacity=&#8221;default&#8221; hover_desc_hover_overlay_opacity=&#8221;default&#8221; icon_position=&#8221;bottom&#8221; box_alignment=&#8221;left&#8221; hover_desc_bg_animation=&#8221;long_zoom&#8221; border_radius=&#8221;default&#8221; image_loading=&#8221;lazy-load&#8221; color_scheme=&#8221;dark&#8221; secondary_content=&#8221;&#8221; min_height=&#8221;500&#8243; hover_content=&#8221;Das perfekte Gleichgewicht zwischen Kraft und Leistung für industrielle und städtische Netze.&#8221; link_url=&#8221;/de/stromkabel/mittelspannungskabel/&#8221;]
-<h3>Mittelspannung</h3>
-[/fancy_box][fancy_box box_style=&#8221;hover_desc&#8221; icon_family=&#8221;custom&#8221; custom_icon_image=&#8221;6485&#8243; image_url=&#8221;6527&#8243; hover_color=&#8221;accent-color&#8221; hover_desc_color_opacity=&#8221;default&#8221; hover_desc_hover_overlay_opacity=&#8221;default&#8221; icon_position=&#8221;bottom&#8221; box_alignment=&#8221;left&#8221; hover_desc_bg_animation=&#8221;long_zoom&#8221; border_radius=&#8221;default&#8221; image_loading=&#8221;lazy-load&#8221; color_scheme=&#8221;dark&#8221; secondary_content=&#8221;here&#8217;s some awesome text that would only be shown on hover&#8221; min_height=&#8221;500&#8243; hover_content=&#8221;Maximale Leistung über große Entfernungen &#8211; ohne Kompromisse.&#8221; link_url=&#8221;/de/stromkabel/hochspannungskabel/&#8221;]
-<h3>Hochspannung</h3>
-[/fancy_box][fancy_box box_style=&#8221;hover_desc&#8221; icon_family=&#8221;custom&#8221; custom_icon_image=&#8221;6484&#8243; image_url=&#8221;6519&#8243; hover_color=&#8221;accent-color&#8221; hover_desc_color_opacity=&#8221;default&#8221; hover_desc_hover_overlay_opacity=&#8221;default&#8221; icon_position=&#8221;bottom&#8221; box_alignment=&#8221;left&#8221; hover_desc_bg_animation=&#8221;long_zoom&#8221; border_radius=&#8221;default&#8221; image_loading=&#8221;lazy-load&#8221; color_scheme=&#8221;dark&#8221; secondary_content=&#8221;here&#8217;s some awesome text that would only be shown on hover&#8221; min_height=&#8221;500&#8243; hover_content=&#8221;Verbindet die Energie der Sonne mit einer nachhaltigen Zukunft.&#8221; link_url=&#8221;/de/solarkabel&#8221;]
-<h3>Solar</h3>
-[/fancy_box]
-<h3>Was wir machen</h3>
-Wir sorgen dafür, dass der Strom fließt – mit qualitätsgeprüften Kabeln. Von Niederspannung bis zur Hochspannung
-<h6>01</h6>
-
-<h4>Belieferung von Energieversorgen, Wind- und Solarparks, Industrie und Handel</h4>
-Wir begleiten Ihre Projekte von 1 bis 220 kV, vom simplem <strong>NYY</strong> bis hin zum Hochspannungskabel mit Segmentleiter und Aluminium-Mantel, und der Schwerpunkt Mittelspannungskabel besonders hervorgehoben. Ob <strong>NA2XS(F)2Y</strong> in Standardausführung, oder mal bis zu 1200 mm2 Querschnitt, mit dickem Mantel oder in gewünschten Passlängen. Wir haben Partner mit ungeheurer Vielfalt.
-<h6>02</h6>
-
-<h4>Lieferung von Kabeln, deren Qualität zertifiziert ist</h4>
-Kabel sind Produkte, die 100% funktionieren müssen. Jahrzehnte, oft 80 bis 100 Jahre. Unsere Kabel haben nicht nur die Approbation durch VDE. Die namhaftesten Energieversorger in Deutschland, den Niederlanden und in Österreich vertrauen uns und unseren Herstellern. Und oft liegen die Anforderungen noch über denen der schon strengen Vorschriften der VDE.
-<h6>03</h6>
-
-<h4>Wir liefern pünktlich, denn wir kennen die Konsequenz für Sie</h4>
-Windpark Norddeutschland, Koordinaten XYZ, Anlieferung Mittwoch 14-16 Uhr, keine Ablademöglichkeit. Ja, das kennen wir. Wir organisieren die Logistik mit einem Backoffice-Team, was bis zu 20 Jahre Kabelerfahrung hat. Verzollung und ordentliche Papierabwicklung inklusive.
-<h6>04</h6>
-
-<div class="flex max-w-full flex-col flex-grow">
-<div class="min-h-8 text-message flex w-full flex-col items-end gap-2 whitespace-normal break-words text-start [.text-message+&amp;]:mt-5" dir="auto" data-message-author-role="assistant" data-message-id="06bd4556-b30a-464e-a28a-e8865e9dd302" data-message-model-slug="gpt-4o">
-<div class="flex w-full flex-col gap-1 empty:hidden first:pt-[3px]">
-<div class="markdown prose w-full break-words dark:prose-invert dark">
-<h4>Das Kabel allein ist noch nicht die Lösung</h4>
-</div>
-</div>
-</div>
-</div>
-
-<div class="flex max-w-full flex-col flex-grow">
-<div class="min-h-8 text-message flex w-full flex-col items-end gap-2 whitespace-normal break-words text-start [.text-message+&amp;]:mt-5" dir="auto" data-message-author-role="assistant" data-message-id="6f143441-86ad-449a-a14e-67511b818d06" data-message-model-slug="gpt-4o">
-<div class="flex w-full flex-col gap-1 empty:hidden first:pt-[3px]">
-<div class="markdown prose w-full break-words dark:prose-invert dark">
-<p>Steiniger Boden? Besser vielleicht einen dickeren Außenmantel? Feuchter Boden? Darf es einen querwasserdichten Schutz noch zusätzlich zum längswasserdichten Band geben? Längere Einzellängen, aber nicht an die Limitierung des Verlegungskran gedacht? Oder oft unterschätzt? Was trägt denn der Boden im Lager. Ein Kupfer-Kabel wiegt gerne schon mal 10 Tonnen pro Kilometer. Wir denken für Sie mit und fragen.</p>
-</div>
-</div>
-</div>
-</div>
-
-<div class="flex max-w-full flex-col flex-grow">
-<div class="min-h-8 text-message flex w-full flex-col items-end gap-2 whitespace-normal break-words text-start [.text-message+&amp;]:mt-5" dir="auto" data-message-author-role="assistant" data-message-id="1dd27af8-cd3b-409c-9f01-e578c14f4e43" data-message-model-slug="gpt-4o">
-<div class="flex w-full flex-col gap-1 empty:hidden first:pt-[3px]">
-<div class="markdown prose w-full break-words dark:prose-invert dark">
-<h3><strong>Jahrzehntelange Kabelkompetenz mit Tradition</strong></h3>
-</div>
-</div>
-</div>
-</div>
-<p>Bei KLZ fließt Kabelgeschichte durch unsere Adern. Klaus begann seine Laufbahn bei der renommierten Felten &amp; Guilleaume – in den Fußstapfen seiner Eltern, die ihr Leben derselben ikonischen Firma widmeten. Für Klaus ist das mehr als nur ein Beruf – es ist ein Erbe, das auf Handwerkskunst, Innovation und Stolz aufbaut.</p>
-<p>Wir ehren diese Geschichte mit originalen Illustrationen aus der Ära von Felten &amp; Guilleaume, die einst als Postkarten verwendet wurden. Diese Bilder erinnern uns an die Generationen, die die Welt miteinander verbunden haben – eine Tradition, die wir mit Stolz fortführen.
-<h3>Warum Sie uns wählen sollten</h3>
-
-<div class="flex max-w-full flex-col flex-grow">
-<div class="min-h-8 text-message flex w-full flex-col items-end gap-2 whitespace-normal break-words text-start [.text-message+&amp;]:mt-5" dir="auto" data-message-author-role="assistant" data-message-id="a3eafd75-c9c1-458b-ad89-f34df883f8e5" data-message-model-slug="gpt-4o">
-<div class="flex w-full flex-col gap-1 empty:hidden first:pt-[3px]">
-<div class="markdown prose w-full break-words dark:prose-invert dark">
-<p>Erfahrung verhindert zwar viele Fehler, aber wir lernen jeden Tag dazu</p>
-</div>
-</div>
-</div>
-</div>
-
-<h6>01</h6>
-
-<div class="flex max-w-full flex-col flex-grow">
-<div class="min-h-8 text-message flex w-full flex-col items-end gap-2 whitespace-normal break-words text-start [.text-message+&amp;]:mt-5" dir="auto" data-message-author-role="assistant" data-message-id="c27756df-b62e-4794-b493-89d6b740edd6" data-message-model-slug="gpt-4o">
-<div class="flex w-full flex-col gap-1 empty:hidden first:pt-[3px]">
-<div class="markdown prose w-full break-words dark:prose-invert dark">
-<h4>Fachkompetenz mit Tiefgang</h4>
-</div>
-</div>
-</div>
-</div>
-
-<div class="flex max-w-full flex-col flex-grow">
-<div class="min-h-8 text-message flex w-full flex-col items-end gap-2 whitespace-normal break-words text-start [.text-message+&amp;]:mt-5" dir="auto" data-message-author-role="assistant" data-message-id="b38876c8-b795-4cb4-be1e-2cd1ea9807b5" data-message-model-slug="gpt-4o">
-<div class="flex w-full flex-col gap-1 empty:hidden first:pt-[3px]">
-<div class="markdown prose w-full break-words dark:prose-invert dark">
-<p>Unser Team bringt jahrzehntelange Erfahrung mit – weit über die Gründung von KLZ im Jahr 2009 hinaus. Im Gesamtteam haben wir über 100 Jahre Kabelerfahrung, gesammelt in verschiedensten Werken, von Niederspannung, über Mittelspannung, bis zur Hochspannung. Wir wissen, wie Kabel riechen, was der Kollege an der Schirmmaschine zu verantworten hat, wie getestet wird. Wir kennen die wesentlichen Rohstoffhersteller, kennen die Risiken einer Fertigung, und können Werke vergleichen. Ob in alten oder neuen Gebäuden. Wer Jahrzehnte Audits und Präqualifikationen hinter sich hat, der weiß, wo er schauen muss. Und was die richtigen Fragen sind.</p>
-</div>
-</div>
-</div>
-</div>
-
-<h6>02</h6>
-
-<div class="flex max-w-full flex-col flex-grow">
-<div class="min-h-8 text-message flex w-full flex-col items-end gap-2 whitespace-normal break-words text-start [.text-message+&amp;]:mt-5" dir="auto" data-message-author-role="assistant" data-message-id="ee8e3a2a-6dbb-4936-aa24-a2a489900578" data-message-model-slug="gpt-4o">
-<div class="flex w-full flex-col gap-1 empty:hidden first:pt-[3px]">
-<div class="markdown prose w-full break-words dark:prose-invert dark">
-<h4>Maßgeschneiderte Lösungen für Ihr Projekt</h4>
-</div>
-</div>
-</div>
-</div>
-
-<div class="flex max-w-full flex-col flex-grow">
-<div class="min-h-8 text-message flex w-full flex-col items-end gap-2 whitespace-normal break-words text-start [.text-message+&amp;]:mt-5" dir="auto" data-message-author-role="assistant" data-message-id="e68fb13a-070e-458e-9a18-b0adb60ab50b" data-message-model-slug="gpt-4o">
-<div class="flex w-full flex-col gap-1 empty:hidden first:pt-[3px]">
-<div class="markdown prose w-full break-words dark:prose-invert dark">
-<p>Wenn es komplexer wird, binden wir unsere technischen Berater ein. Da braucht man Fachleute, die nicht gerade ihre Karriere gestartet haben. Da braucht es Leute die Normen lesen und verstehen, und manchmal mit begleitet haben. Die haben wir, und mit deren und unserer Erfahrung differenzieren wir uns vom einfachen Handel mit Kabeln</p>
-</div>
-</div>
-</div>
-</div>
-
-<h6>03</h6>
-
-<div class="flex max-w-full flex-col flex-grow">
-<div class="min-h-8 text-message flex w-full flex-col items-end gap-2 whitespace-normal break-words text-start [.text-message+&amp;]:mt-5" dir="auto" data-message-author-role="assistant" data-message-id="c714857c-00c3-44e4-98b9-e39eb7384fab" data-message-model-slug="gpt-4o">
-<div class="flex w-full flex-col gap-1 empty:hidden first:pt-[3px]">
-<div class="markdown prose w-full break-words dark:prose-invert dark">
-<h4>Zuverlässigkeit, die Ihre Projekte auf Kurs hält</h4>
-</div>
-</div>
-</div>
-</div>
-
-<div class="flex max-w-full flex-col flex-grow">
-<div class="min-h-8 text-message flex w-full flex-col items-end gap-2 whitespace-normal break-words text-start [.text-message+&amp;]:mt-5" dir="auto" data-message-author-role="assistant" data-message-id="dca855b3-88c2-472f-92f9-1f9490411197" data-message-model-slug="gpt-4o">
-<div class="flex w-full flex-col gap-1 empty:hidden first:pt-[3px]">
-<div class="markdown prose w-full break-words dark:prose-invert dark">
-<p>Erreichbarkeit, schnell reagieren in einer schnelllebigen Welt. Sie haben noch Fragen nach 17 Uhr? Oder am Wochenende? Wir sind immer da. Und so haben wir unsere Partner entwickelt, damit wir als Team das realisieren, wofür Sie bezahlt haben. Und wenn mal doch was nicht gerade läuft, versteckt sich keiner.</p>
-</div>
-</div>
-</div>
-</div>
-
-<h6>04</h6>
-
-<div class="flex max-w-full flex-col flex-grow">
-<div class="min-h-8 text-message flex w-full flex-col items-end gap-2 whitespace-normal break-words text-start [.text-message+&amp;]:mt-5" dir="auto" data-message-author-role="assistant" data-message-id="1f8b2646-94f8-437d-b199-8b99c9f4b45d" data-message-model-slug="gpt-4o">
-<div class="flex w-full flex-col gap-1 empty:hidden first:pt-[3px]">
-<div class="markdown prose w-full break-words dark:prose-invert dark">
-<h4>Nachhaltigkeit ohne Kompromisse</h4>
-</div>
-</div>
-</div>
-</div>
-
-<div class="flex max-w-full flex-col flex-grow">
-<div class="min-h-8 text-message flex w-full flex-col items-end gap-2 whitespace-normal break-words text-start [.text-message+&amp;]:mt-5" dir="auto" data-message-author-role="assistant" data-message-id="50b94e59-2920-4a97-b8b4-daf5f83404bd" data-message-model-slug="gpt-4o">
-<div class="flex w-full flex-col gap-1 empty:hidden first:pt-[3px]">
-<div class="markdown prose w-full break-words dark:prose-invert dark">
-<p>Wir sind überzeugt davon, die Welt besser zu hinterlassen, als wir sie vorgefunden haben. Mit Initiativen wie unserem Trommelrückführungsservice und einem klaren Fokus auf Recycling sorgen wir dafür, dass jede Verbindung so umweltfreundlich wie möglich ist. Jeder unserer Partner hat entsprechende Zertifizierungen, die zunehmend von allen Kunden auch erwartet werden.</p>
-</div>
-</div>
-</div>
-</div>
-
-<div class="flex-shrink-0 flex flex-col relative items-end">
-<div class="pt-0">
-<div class="gizmo-shadow-stroke flex h-8 w-8 items-center justify-center overflow-hidden rounded-full">
-<div class="h-full w-full">
-<h3><strong>Das Team hinter KLZ</strong></h3>
-<p>Bei KLZ steckt die Energie nicht nur in den Kabeln, sondern vor allem im Team. Von erfahrenen Experten wie Michael und Klaus bis hin zu engagierten Planern, Logistikern und Kundenbetreuern – jeder spielt eine entscheidende Rolle. Gemeinsam verbinden wir jahrzehntelange Erfahrung mit innovativem Denken und dem klaren Ziel, zuverlässige Energielösungen zu liefern.</p>
-</div>
-</div>
-</div>
-</div>
-
-<div class="flex max-w-full flex-col flex-grow">
-<div class="min-h-8 text-message flex w-full flex-col items-end gap-2 whitespace-normal break-words text-start [.text-message+&amp;]:mt-5" dir="auto" data-message-author-role="assistant" data-message-id="0c8817e4-3d8c-41b1-9223-0468ae5ddd01" data-message-model-slug="gpt-4o">
-<div class="flex w-full flex-col gap-1 empty:hidden first:pt-[3px]">
-<div class="markdown prose w-full break-words dark:prose-invert dark">
-<h2 style="text-align: center;">Vom einzelnen Draht zur grenzenlosen Energie – die <em>Zukunft</em> beginnt hier.</h2>
-</div>
-</div>
-</div>
-</div>

data/pages/de/team.mdx

@@ -1,144 +0,0 @@
----
-title: Team – Deutsch
-excerpt: >-
-  [vc_row type=”full_width_background”
-  full_screen_row_position=”middle”
-  column_margin=”default” column_direction=”default”
-  column_direction_tablet=”default”
-  column_direction_phone=”default” bg_color=”#ffffff”
-  bg_image=”10440″ bg_position=”center center”
-  background_image_loading=”default”
-  bg_repeat=”no-repeat” scene_position=”center”
-  top_padding=”14%” bottom_padding=”12%”
-  text_color=”light” text_align=”left”
-  row_border_radius=”none”
-  row_border_radius_applies=”bg” overflow=”visible”
-  enable_gradient=”true” color_overlay=”#0a0000″
-  color_overlay_2=”rgba(10,10,10,0.5)”
-  overlay_strength=”0.8″
-  gradient_direction=”left_to_right”
-  shape_divider_color=”#ffffff”
-  shape_divider_position=”bottom”
-  shape_divider_height=”350″
-  bg_image_animation=”none”…
-featuredImage: null
-locale: de
----
-# Team – Deutsch
-
-<div class="flex max-w-full flex-col flex-grow">
-<div class="min-h-8 text-message flex w-full flex-col items-end gap-2 whitespace-normal break-words text-start [.text-message+&amp;]:mt-5" dir="auto" data-message-author-role="assistant" data-message-id="c62f4969-7567-4dbf-99d2-97426de29e09" data-message-model-slug="gpt-4o">
-<div class="flex w-full flex-col gap-1 empty:hidden first:pt-[3px]">
-<div class="markdown prose w-full break-words dark:prose-invert dark">
-<p><strong>Die Köpfe, die Energie zum Laufen bringen</strong></p>
-</div>
-</div>
-</div>
-</div>
-
-<div class="flex-1 overflow-hidden @container/thread">
-<div class="h-full">
-<div class="react-scroll-to-bottom--css-jvmup-79elbk h-full">
-<div class="react-scroll-to-bottom--css-jvmup-1n7m0yu">
-<div class="flex flex-col text-sm md:pb-9">
-<article class="w-full scroll-mb-[var(--thread-trailing-height,150px)] text-token-text-primary focus-visible:outline-2 focus-visible:outline-offset-[-4px]" dir="auto" data-testid="conversation-turn-19" data-scroll-anchor="true">
-<div class="m-auto text-base py-[18px] px-3 md:px-4 w-full md:px-5 lg:px-4 xl:px-5">
-<div class="mx-auto flex flex-1 gap-4 text-base md:gap-5 lg:gap-6 md:max-w-3xl lg:max-w-[40rem] xl:max-w-[48rem]">
-<div class="group/conversation-turn relative flex w-full min-w-0 flex-col agent-turn">
-<div class="flex-col gap-1 md:gap-3">
-<div class="flex max-w-full flex-col flex-grow">
-<div class="min-h-8 text-message flex w-full flex-col items-end gap-2 whitespace-normal break-words text-start [.text-message+&amp;]:mt-5" dir="auto" data-message-author-role="assistant" data-message-id="9b042263-4f19-47df-a312-d13f7eb5e2b1" data-message-model-slug="gpt-4o">
-<div class="flex w-full flex-col gap-1 empty:hidden first:pt-[3px]">
-<div class="markdown prose w-full break-words dark:prose-invert dark">
-<div class="flex max-w-full flex-col flex-grow">
-<div class="min-h-8 text-message flex w-full flex-col items-end gap-2 whitespace-normal break-words text-start [.text-message+&amp;]:mt-5" dir="auto" data-message-author-role="assistant" data-message-id="bcfa4bbf-0457-47d6-8a1e-7ec5a650fc98" data-message-model-slug="gpt-4o">
-<div class="flex w-full flex-col gap-1 empty:hidden first:pt-[3px]">
-<div class="markdown prose w-full break-words dark:prose-invert dark">
-<h2>Wir verbinden Energie, Know-how und Innovation, um eine nachhaltigere Zukunft zu gestalten.</h2>
-</div>
-</div>
-</div>
-</div>
-</div>
-</div>
-</div>
-</div>
-</div>
-</div>
-</div>
-</div>
-</article>
-</div>
-</div>
-</div>
-</div>
-</div>
-
-<h1>Michael Bodemer</h1>
-
-<div class="flex max-w-full flex-col flex-grow">
-<div class="min-h-8 text-message flex w-full flex-col items-end gap-2 whitespace-normal break-words text-start [.text-message+&amp;]:mt-5" dir="auto" data-message-author-role="assistant" data-message-id="66eb3f45-dd35-419f-8c8e-be50fee94d71" data-message-model-slug="gpt-4o">
-<div class="flex w-full flex-col gap-1 empty:hidden first:pt-[3px]">
-<div class="markdown prose w-full break-words dark:prose-invert dark">
-<h2>Herausforderungen sind da, um gelöst zu werden – nicht, um über ihre Komplexität zu diskutieren.</h2>
-</div>
-</div>
-</div>
-</div>
-
-<div class="flex max-w-full flex-col flex-grow">
-<div class="min-h-8 text-message flex w-full flex-col items-end gap-2 whitespace-normal break-words text-start [.text-message+&amp;]:mt-5" dir="auto" data-message-author-role="assistant" data-message-id="637cd8c0-70ac-4835-b453-5f50c9c188eb" data-message-model-slug="gpt-4o">
-<div class="flex w-full flex-col gap-1 empty:hidden first:pt-[3px]">
-<div class="markdown prose w-full break-words dark:prose-invert dark">
-<p>Michael Bodemer ist unser Mann, wenn es kompliziert wird – und das ist bei Kabelnetzen oft der Fall. Mit seinem scharfen Blick und einem Händchen für praktikable Lösungen ist er eine unserer zentralen Säulen. Michael denkt nicht nur an Details, er treibt Projekte voran – sei es in der Planung, im Kundengespräch oder bei der Auswahl der besten Kabel für jedes Vorhaben.</p>
-</div>
-</div>
-</div>
-</div>
-
-<div class="mt-4">
-  <a href="/vcf/michael-bodemer" class="inline-flex items-center px-4 py-2 border border-transparent text-sm font-medium rounded-md shadow-sm text-white bg-blue-600 hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 no-underline">
-    vCard Michael Bodemer herunterladen
-  </a>
-</div>
-
-<h3>Verbindungen, die Geschichte schreiben</h3>
-<p>Bei KLZ vereinen wir Tradition und Innovation zu zuverlässigen Energielösungen. Unsere Wurzeln reichen tief in die Geschichte der Kabeltechnologie zurück – mit jeder Menge praktischer Erfahrung und einem Blick für zukunftsweisende Entwicklungen.</p>
-<p>In jedem Projekt steckt nicht nur technisches Know-how, sondern auch das Bewusstsein für das Handwerk, das die Welt seit Generationen verbindet. Historische Illustrationen aus den frühen Tagen der Energiebranche erinnern uns daran, wie weit wir gekommen sind – und dass echte Exzellenz immer mit Sorgfalt beginnt.
-<h1>Klaus Mintel</h1>
-
-<div class="flex max-w-full flex-col flex-grow">
-<div class="min-h-8 text-message flex w-full flex-col items-end gap-2 whitespace-normal break-words text-start [.text-message+&amp;]:mt-5" dir="auto" data-message-author-role="assistant" data-message-id="d3bd1bc9-d279-4699-991f-cd5809bda6d7" data-message-model-slug="gpt-4o">
-<div class="flex w-full flex-col gap-1 empty:hidden first:pt-[3px]">
-<div class="markdown prose w-full break-words dark:prose-invert dark">
-<h2>Manchmal braucht es nur einen klaren Kopf und das richtige Kabel, um die Welt ein Stück besser zu machen.</h2>
-</div>
-</div>
-</div>
-</div>
-
-<div class="flex max-w-full flex-col flex-grow">
-<div class="min-h-8 text-message flex w-full flex-col items-end gap-2 whitespace-normal break-words text-start [.text-message+&amp;]:mt-5" dir="auto" data-message-author-role="assistant" data-message-id="58971071-dfeb-4164-b61b-b73c04879b2c" data-message-model-slug="gpt-4o">
-<div class="flex w-full flex-col gap-1 empty:hidden first:pt-[3px]">
-<div class="markdown prose w-full break-words dark:prose-invert dark">
-<div class="flex max-w-full flex-col flex-grow">
-<div class="min-h-8 text-message flex w-full flex-col items-end gap-2 whitespace-normal break-words text-start [.text-message+&amp;]:mt-5" dir="auto" data-message-author-role="assistant" data-message-id="60674c1d-d9f3-43f5-baa6-5d0effc3ada4" data-message-model-slug="gpt-4o">
-<div class="flex w-full flex-col gap-1 empty:hidden first:pt-[3px]">
-<div class="markdown prose w-full break-words dark:prose-invert dark">
-<p>Klaus ist der Fels in der Brandung – selbst wenn das Kabelchaos überhandnimmt. Mit jahrzehntelanger Erfahrung und einem stabilen Netzwerk sorgt er dafür, dass alles glatt läuft. Er denkt nicht nur in Lösungen, sondern bringt auch Humor und den nötigen Weitblick mit, um selbst komplexe Themen locker auf den Punkt zu bringen.</p>
-</div>
-</div>
-</div>
-</div>
-</div>
-</div>
-</div>
-</div>
-
-<div class="mt-4">
-  <a href="/vcf/klaus-mintel" class="inline-flex items-center px-4 py-2 border border-transparent text-sm font-medium rounded-md shadow-sm text-white bg-blue-600 hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 no-underline">
-    vCard Klaus Mintel herunterladen
-  </a>
-</div>
-
-<h2>Unser Manifest</h2>

data/pages/en/contact.mdx

@@ -1,89 +0,0 @@
----
-title: Contact – English
-excerpt: '[vc_column column_padding=”no-extra-padding”…'
-featuredImage: null
-locale: en
----
-# Contact – English
-
-<h5>How can we help you?</h5>
-<h2>Have a project in mind?</h2>
-
-<p style="text-align: left;"><div class="frm_forms  with_frm_style frm_style_klz" id="frm_form_1_container" data-token="1bab1f2ae16527f65d9f48545407888d" data-token="1bab1f2ae16527f65d9f48545407888d">
-<form enctype="multipart/form-data" method="post" class="frm-show-form  frm_pro_form " id="form_contact-english" data-token="1bab1f2ae16527f65d9f48545407888d" data-token="1bab1f2ae16527f65d9f48545407888d">
-<div class="frm_form_fields ">
-<fieldset>
-<legend class="frm_screen_reader">Contact Us - English</legend>
-
-<div class="frm_fields_container">
-<input type="hidden" name="frm_action" value="create" />
-<input type="hidden" name="form_id" value="1" />
-<input type="hidden" name="frm_hide_fields_1" id="frm_hide_fields_1" value="" />
-<input type="hidden" name="form_key" value="contact-english" />
-<input type="hidden" name="item_meta[0]" value="" />
-<input type="hidden" id="frm_submit_entry_1" name="frm_submit_entry_1" value="2aee9616df" /><input type="hidden" name="_wp_http_referer" value="/wp-json/wp/v2/pages?per_page=100&#038;page=1&#038;_embed=true" /><div id="frm_field_1_container" class="frm_form_field form-field  frm_required_field frm_top_container frm_first frm_half">
-	<label for="field_qh4icy" id="field_qh4icy_label" class="frm_primary_label">Name
-		<span class="frm_required" aria-hidden="true">*</span>
-	</label>
-	<input  type="text" id="field_qh4icy" name="item_meta[1]" value=""  data-reqmsg="Name cannot be blank." aria-required="true" data-invmsg="Name is invalid" aria-invalid="false"   aria-describedby="frm_desc_field_qh4icy" />
-	<div class="frm_description" id="frm_desc_field_qh4icy">First Name</div>
-	
-</div>
-<div id="frm_field_2_container" class="frm_form_field form-field  frm_required_field frm_hidden_container frm_half">
-	<label for="field_ocfup1" id="field_ocfup1_label" class="frm_primary_label">Last
-		<span class="frm_required" aria-hidden="true">*</span>
-	</label>
-	<input  type="text" id="field_ocfup1" name="item_meta[2]" value=""  data-reqmsg="Last cannot be blank." aria-required="true" data-invmsg="Last is invalid" aria-invalid="false"   aria-describedby="frm_desc_field_ocfup1" />
-	<div class="frm_description" id="frm_desc_field_ocfup1">Last Name</div>
-	
-</div>
-<div id="frm_field_3_container" class="frm_form_field form-field  frm_required_field frm_top_container frm_full">
-	<label for="field_29yf4d" id="field_29yf4d_label" class="frm_primary_label">Email
-		<span class="frm_required" aria-hidden="true">*</span>
-	</label>
-	<input type="email" id="field_29yf4d" name="item_meta[3]" value=""  data-reqmsg="Email cannot be blank." aria-required="true" data-invmsg="Please enter a valid email address" aria-invalid="false"  />
-
-</div>
-<div id="frm_field_4_container" class="frm_form_field form-field  frm_required_field frm_top_container frm_full">
-	<label for="field_e6lis6" id="field_e6lis6_label" class="frm_primary_label">Subject
-		<span class="frm_required" aria-hidden="true">*</span>
-	</label>
-	<input  type="text" id="field_e6lis6" name="item_meta[4]" value=""  data-reqmsg="Subject cannot be blank." aria-required="true" data-invmsg="Subject is invalid" aria-invalid="false"   />
-
-</div>
-<div id="frm_field_5_container" class="frm_form_field form-field  frm_required_field frm_top_container frm_full">
-	<label for="field_9jv0r1" id="field_9jv0r1_label" class="frm_primary_label">Message
-		<span class="frm_required" aria-hidden="true">*</span>
-	</label>
-	<textarea name="item_meta[5]" id="field_9jv0r1" rows="5"  data-reqmsg="Message cannot be blank." aria-required="true" data-invmsg="Message is invalid" aria-invalid="false"  ></textarea>
-
-</div>
-<div id="frm_field_14_container" class="frm_form_field form-field  frm_none_container">
-	<label for="g-recaptcha-response" id="field_cxwsw_label" class="frm_primary_label">Captcha
-		<span class="frm_required" aria-hidden="true"></span>
-	</label>
-	<div  id="field_cxwsw" class="frm-g-recaptcha" data-sitekey="6LczZ7wqAAAAANwlgLaISgENVDZ1rTPe6LnTJgEk" data-size="invisible" data-theme="light"></div>
-
-</div>
-<div id="frm_field_6_container" class="frm_form_field form-field ">
-	<div class="frm_submit frm_flex">
-<button class="frm_button_submit frm_final_submit" type="submit"   formnovalidate="formnovalidate">Submit</button>
-
-</div>
-</div>
-	<input type="hidden" name="item_key" value="" />
-			<div id="frm_field_28_container">
-			<label for="field_bx5bs" >
-				If you are human, leave this field blank.			</label>
-			<input  id="field_bx5bs" type="text" class="frm_form_field form-field frm_verify" name="item_meta[28]" value=""  />
-		</div>
-		<input name="frm_state" type="hidden" value="LzUMsLqCGT3RC/3NDZwBsza9Nq38Ndzzi8fs2DDCQq3+8BPjktzvi4c9uX1qIOIg" /></div>
-</fieldset>
-</div>
-
-</form>
-</div>
-
-KLZ Cables<br />
-Raiffeisenstraße 22<br />
-73630 Remshalden

data/pages/en/start.mdx

@@ -1,112 +0,0 @@
----
-title: Home – English
-excerpt: >-
-  [vc_row type=”full_width_background”
-  full_screen_row_position=”middle”
-  column_margin=”default” equal_height=”yes”
-  content_placement=”bottom” column_direction=”default”
-  column_direction_tablet=”default”
-  column_direction_phone=”default” bg_color=”#d1d1ca”
-  bg_image=”45569″ bg_position=”center bottom”
-  background_image_loading=”lazy-load”
-  bg_repeat=”no-repeat” video_bg=”use_video”
-  video_mp4=”/uploads/2025/02/header.mp4″
-  video_webm=”/uploads/2025/02/header.webm”
-  background_video_loading=”lazy-load”
-  scene_position=”center” top_padding=”15%”
-  bottom_padding=”13%” text_color=”light”
-  text_align=”left” row_border_radius=”none”
-  row_border_radius_applies=”bg” overflow=”visible”
-  enable_gradient=”true”
-  color_overlay=”rgba(0,0,0,0.01)”
-  color_overlay_2=”rgba(0,0,0,0.32)”…
-featuredImage: null
-locale: en
----
-# Home – English
-
-<h1><strong>We are helping to expand the energy cable networks for a <em>green</em> future</strong></h1>
-
-<h4>Low Voltage Cables</h4>
-<p><small>Powering everyday essentials with reliability and safety.</small>
-<h4>Medium Voltage Cables</h4>
-<p><small>The perfect balance between power and performance for industrial and urban grids.</small>
-<h4>High Voltage</h4>
-<p>Delivering maximum power over long distances—without compromise.
-<h4>Solar Cables</h4>
-<p>Connecting the sun’s energy to your sustainable future.[fancy_box box_style=&#8221;hover_desc&#8221; icon_family=&#8221;custom&#8221; custom_icon_image=&#8221;6486&#8243; image_url=&#8221;6521&#8243; hover_color=&#8221;accent-color&#8221; hover_desc_color_opacity=&#8221;default&#8221; hover_desc_hover_overlay_opacity=&#8221;default&#8221; icon_position=&#8221;bottom&#8221; box_alignment=&#8221;left&#8221; hover_desc_bg_animation=&#8221;long_zoom&#8221; border_radius=&#8221;default&#8221; image_loading=&#8221;lazy-load&#8221; color_scheme=&#8221;dark&#8221; secondary_content=&#8221;here&#8217;s some awesome text that would only be shown on hover&#8221; min_height=&#8221;500&#8243; hover_content=&#8221;Powering everyday essentials with reliability and safety.&#8221; link_url=&#8221;/power-cables/low-voltage-cables/&#8221;]
-<h3>Low Voltage Cables</h3>
-[/fancy_box][fancy_box box_style=&#8221;hover_desc&#8221; icon_family=&#8221;custom&#8221; custom_icon_image=&#8221;6487&#8243; image_url=&#8221;6517&#8243; hover_color=&#8221;accent-color&#8221; hover_desc_color_opacity=&#8221;default&#8221; hover_desc_hover_overlay_opacity=&#8221;default&#8221; icon_position=&#8221;bottom&#8221; box_alignment=&#8221;left&#8221; hover_desc_bg_animation=&#8221;long_zoom&#8221; border_radius=&#8221;default&#8221; image_loading=&#8221;lazy-load&#8221; color_scheme=&#8221;dark&#8221; secondary_content=&#8221;&#8221; min_height=&#8221;500&#8243; hover_content=&#8221;The perfect balance between power and performance for industrial and urban grids.&#8221; link_url=&#8221;/power-cables/medium-voltage-cables/&#8221;]
-<h3>Medium Voltage Cables</h3>
-[/fancy_box][fancy_box box_style=&#8221;hover_desc&#8221; icon_family=&#8221;custom&#8221; custom_icon_image=&#8221;6485&#8243; image_url=&#8221;6527&#8243; hover_color=&#8221;accent-color&#8221; hover_desc_color_opacity=&#8221;default&#8221; hover_desc_hover_overlay_opacity=&#8221;default&#8221; icon_position=&#8221;bottom&#8221; box_alignment=&#8221;left&#8221; hover_desc_bg_animation=&#8221;long_zoom&#8221; border_radius=&#8221;default&#8221; image_loading=&#8221;lazy-load&#8221; color_scheme=&#8221;dark&#8221; secondary_content=&#8221;here&#8217;s some awesome text that would only be shown on hover&#8221; min_height=&#8221;500&#8243; hover_content=&#8221;Delivering maximum power over long distances—without compromise.&#8221; link_url=&#8221;/power-cables/high-voltage-cables/&#8221;]
-<h3>High Voltage Cables</h3>
-<h5></h5>
-[/fancy_box][fancy_box box_style=&#8221;hover_desc&#8221; icon_family=&#8221;custom&#8221; custom_icon_image=&#8221;6484&#8243; image_url=&#8221;6519&#8243; hover_color=&#8221;accent-color&#8221; hover_desc_color_opacity=&#8221;default&#8221; hover_desc_hover_overlay_opacity=&#8221;default&#8221; icon_position=&#8221;bottom&#8221; box_alignment=&#8221;left&#8221; hover_desc_bg_animation=&#8221;long_zoom&#8221; border_radius=&#8221;default&#8221; image_loading=&#8221;lazy-load&#8221; color_scheme=&#8221;dark&#8221; secondary_content=&#8221;here&#8217;s some awesome text that would only be shown on hover&#8221; min_height=&#8221;500&#8243; hover_content=&#8221;Connecting the sun’s energy to your sustainable future.&#8221; link_url=&#8221;/solar-cables&#8221;]
-<h3>Solar Cables</h3>
-[/fancy_box]
-<h3>What we do</h3>
-We ensure that the electricity flows &#8211; with quality-tested cables. From low voltage up to high voltage
-<h6>01</h6>
-
-<h4>Supply to energy suppliers, wind and solar parks, industry and trade</h4>
-We support your projects from 1 to 220 kV, from simple NYY to high-voltage cables with segment conductors and aluminum sheaths, with a particular focus on medium-voltage cables. Whether NA2XS(F)2Y in standard design, or up to 1200 mm2 cross-section, with thick sheathing or in the desired lengths. We have partners with an enormous variety.
-<h6>02</h6>
-
-<h4>Supply of cables whose quality is certified</h4>
-Cables are products that have to function 100%. For decades, often 80 to 100 years. Our cables are not only approved by VDE. The most well-known energy suppliers in Germany, the Netherlands and Austria trust us and our manufacturers. And often the requirements are even higher than those of the already strict VDE regulations.
-<h6>03</h6>
-
-<h4>We deliver on time because we know the consequences for you</h4>
-Wind farm North Germany, coordinates XYZ, delivery Wednesday 2-4 p.m., no unloading option. Yes, we know that. We organize the logistics with a back office team that has up to 20 years of cable experience. Customs clearance and proper paperwork included.
-<h6>04</h6>
-
-<h4>The cable alone is not the solution</h4>
-Stony ground? Perhaps a thicker outer sheath would be better? Damp ground? Can there be transverse watertight protection in addition to the longitudinal watertight tape? Longer individual lengths, but no thought given to the limitations of the laying crane? Or often underestimated? What can the floor in the warehouse support? A copper cable can easily weigh 10 tons per kilometer. We think for you and ask questions.
-<h3><strong>Decades of experience rooted in cable history</strong></h3>
-<p>At KLZ, cables run in our veins. Klaus began his journey at the renowned Felten &amp; Guilleaume, following in the footsteps of his parents, who dedicated their lives to the same iconic company. For Klaus, this isn’t just work – it’s a legacy built on craftsmanship, innovation, and pride.</p>
-<p>We honor this history with original illustrations from Felten &amp; Guilleaume’s era, once used as postcards. These images remind us of the generations who wired the world together – a tradition we proudly continue today.
-<h3>Why choose us</h3>
-Experience prevents many mistakes, but we learn something new every day
-<h6>01</h6>
-
-<h4>Expertise with depth</h4>
-Our team has decades of experience &#8211; far beyond the founding of KLZ in 2009. The entire team has over 100 years of cable experience, gained in a wide variety of plants, from low voltage to medium voltage to high voltage. We know what cables smell like, what the colleague at the shielding machine is responsible for how testing is carried out. We know the main raw material manufacturers, know the risks of production, and can compare plants. Whether in old or new buildings. Anyone who has decades of audits and prequalification behind them knows where to look. And what are the right questions.
-<h6>02</h6>
-
-<h4>Tailor-made solutions for your project</h4>
-When things get more complex, we involve our technical consultants. That&#8217;s where you need experts who haven&#8217;t just started their careers. You need people who read and understand standards and have sometimes been involved. We have them, and with their and our experience we differentiate ourselves from simple cable trading
-<h6>03</h6>
-
-<h4>Reliability that keeps your projects on track</h4>
-Accessibility, quick response in a fast-moving world. Do you still have questions after 5 p.m.? Or at the weekend? We are always there. And that is how we have developed our partners so that as a team we can realize what you have paid for. And if something does not go well, no one hides.
-<h6>04</h6>
-
-<h4>Sustainability without compromise</h4>
-We are convinced that we will leave the world better than we found it. With initiatives such as our drum return service and a clear focus on recycling, we ensure that every connection is as environmentally friendly as possible. Each of our partners has the appropriate certificates, which are increasingly expected by all customers.</p>
-<p>At KLZ we focus on precise, reliable and uncomplicated solutions for the energy of the future.
-<div class="flex-shrink-0 flex flex-col relative items-end">
-<div>
-<div class="pt-0">
-<div class="gizmo-shadow-stroke flex h-8 w-8 items-center justify-center overflow-hidden rounded-full">
-<div class="h-full w-full">
-<h3 class="gizmo-shadow-stroke overflow-hidden rounded-full"><strong>Meet the team behind KLZ</strong></h3>
-</div>
-</div>
-</div>
-</div>
-</div>
-<div class="group/conversation-turn relative flex w-full min-w-0 flex-col agent-turn">
-<div class="flex-col gap-1 md:gap-3">
-<div class="flex max-w-full flex-col flex-grow">
-<div class="min-h-8 text-message flex w-full flex-col items-end gap-2 whitespace-normal break-words text-start [.text-message+&amp;]:mt-5" dir="auto" data-message-author-role="assistant" data-message-id="18b243fa-d554-47d5-a716-421a97340912" data-message-model-slug="gpt-4o">
-<div class="flex w-full flex-col gap-1 empty:hidden first:pt-[3px]">
-<div class="markdown prose w-full break-words dark:prose-invert dark">
-<p>At KLZ, our team is the power behind the cables. From seasoned experts like Michael and Klaus to a dedicated group of planners, logistics specialists, and customer support professionals, every member plays a vital role. Together, we combine decades of experience, innovative thinking, and a shared commitment to delivering reliable energy solutions.</p>
-</div>
-</div>
-</div>
-</div>
-</div>
-</div>
-
-<h2 style="text-align: center;">From a single strand to infinite power – the <em>future</em> starts here.</h2>

data/pages/en/team.mdx

@@ -1,86 +0,0 @@
----
-title: Team – English
-excerpt: >-
-  [vc_row type=”full_width_background”
-  full_screen_row_position=”middle”
-  column_margin=”default” column_direction=”default”
-  column_direction_tablet=”default”
-  column_direction_phone=”default” bg_color=”#ffffff”
-  bg_image=”10440″ bg_position=”center center”
-  background_image_loading=”default”
-  bg_repeat=”no-repeat” scene_position=”center”
-  top_padding=”14%” bottom_padding=”12%”
-  text_color=”light” text_align=”left”
-  row_border_radius=”none”
-  row_border_radius_applies=”bg” overflow=”visible”
-  enable_gradient=”true” color_overlay=”#0a0000″
-  color_overlay_2=”rgba(10,10,10,0.5)”
-  overlay_strength=”0.8″
-  gradient_direction=”left_to_right”
-  shape_divider_color=”#ffffff”
-  shape_divider_position=”bottom”
-  shape_divider_height=”350″
-  bg_image_animation=”none”…
-featuredImage: null
-locale: en
----
-# Team – English
-
-<h5>The bright sparks behind the power</h5>
-
-<div class="flex-1 overflow-hidden @container/thread">
-<div class="h-full">
-<div class="react-scroll-to-bottom--css-jvmup-79elbk h-full">
-<div class="react-scroll-to-bottom--css-jvmup-1n7m0yu">
-<div class="flex flex-col text-sm md:pb-9">
-<article class="w-full scroll-mb-[var(--thread-trailing-height,150px)] text-token-text-primary focus-visible:outline-2 focus-visible:outline-offset-[-4px]" dir="auto" data-testid="conversation-turn-19" data-scroll-anchor="true">
-<div class="m-auto text-base py-[18px] px-3 md:px-4 w-full md:px-5 lg:px-4 xl:px-5">
-<div class="mx-auto flex flex-1 gap-4 text-base md:gap-5 lg:gap-6 md:max-w-3xl lg:max-w-[40rem] xl:max-w-[48rem]">
-<div class="group/conversation-turn relative flex w-full min-w-0 flex-col agent-turn">
-<div class="flex-col gap-1 md:gap-3">
-<div class="flex max-w-full flex-col flex-grow">
-<div class="min-h-8 text-message flex w-full flex-col items-end gap-2 whitespace-normal break-words text-start [.text-message+&amp;]:mt-5" dir="auto" data-message-author-role="assistant" data-message-id="9b042263-4f19-47df-a312-d13f7eb5e2b1" data-message-model-slug="gpt-4o">
-<div class="flex w-full flex-col gap-1 empty:hidden first:pt-[3px]">
-<div class="markdown prose w-full break-words dark:prose-invert dark">
-<h2>We connect energy, expertise, and innovation to power a greener future.</h2>
-</div>
-</div>
-</div>
-</div>
-</div>
-</div>
-</div>
-</div>
-</article>
-</div>
-</div>
-</div>
-</div>
-</div>
-
-<h1>Michael Bodemer</h1>
-
-<h2>Challenges exist to be solved, not to debate how complicated they are.</h2>
-Michael Bodemer is the go-to guy when things get complicated—and let’s face it, that’s often the case with cable networks. With sharp insight and a knack for practical solutions, Michael is one of our key players. He’s not just detail-oriented; he’s a driving force—whether it’s in planning, customer interactions, or securing the best cables for every project.
-
-<div class="mt-4">
-  <a href="/vcf/michael-bodemer" class="inline-flex items-center px-4 py-2 border border-transparent text-sm font-medium rounded-md shadow-sm text-white bg-blue-600 hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 no-underline">
-    Download vCard Michael Bodemer
-  </a>
-</div>
-
-<h3><strong>A Legacy of Excellence in Every Connection</strong></h3>
-<p>At KLZ, our expertise is built on generations of dedication to the energy industry. With decades of hands-on experience, we’ve grown alongside the evolution of cable technology, combining traditional craftsmanship with modern innovation. Each project we take on reflects a deep understanding of what it takes to create lasting, reliable energy solutions.</p>
-<p>Paired with historic illustrations from the industry’s early days, our story is a reminder of how far cables have come – and how much care has always gone into connecting the world.
-<h1>Klaus Mintel</h1>
-
-<h2>Sometimes all it takes is a clear head and a good cable to make the world a little better.</h2>
-Klaus is the man with the experience, bringing perspective and calm to the table—even when cable chaos threatens to take over. With impressive industry knowledge and a network as solid as our cables, he ensures everything runs smoothly. Klaus isn’t just a problem solver; he’s a strategic thinker who knows how to get to the point with a touch of humor.
-
-<div class="mt-4">
-  <a href="/vcf/klaus-mintel" class="inline-flex items-center px-4 py-2 border border-transparent text-sm font-medium rounded-md shadow-sm text-white bg-blue-600 hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 no-underline">
-    Download vCard Klaus Mintel
-  </a>
-</div>
-
-<h2>Our manifesto</h2>

data/pages/en/thanks.mdx

@@ -1,10 +0,0 @@
----
-title: Thanks – English
-excerpt: '[vc_column…'
-featuredImage: null
-locale: en
----
-# Thanks – English
-
-<h2>Thank you very much!</h2>
-<p>We’ve received your message and will get back to you as soon as possible. Our team is already rolling up their sleeves to assist you!JTNDJTIxLS0lMjBHb29nbGUlMjB0YWclMjAlMjhndGFnLmpzJTI5JTIwLS0lM0UlMjAlM0NzY3JpcHQlMjBhc3luYyUyMHNyYyUzRCUyMmh0dHBzJTNBJTJGJTJGd3d3Lmdvb2dsZXRhZ21hbmFnZXIuY29tJTJGZ3RhZyUyRmpzJTNGaWQlM0RBVy0xNzA5NTg5MjIzOCUyMiUzRSUzQyUyRnNjcmlwdCUzRSUyMCUzQ3NjcmlwdCUzRSUyMHdpbmRvdy5kYXRhTGF5ZXIlMjAlM0QlMjB3aW5kb3cuZGF0YUxheWVyJTIwJTdDJTdDJTIwJTVCJTVEJTNCJTIwZnVuY3Rpb24lMjBndGFnJTI4JTI5JTdCZGF0YUxheWVyLnB1c2glMjhhcmd1bWVudHMlMjklM0IlN0QlMjBndGFnJTI4JTI3anMlMjclMkMlMjBuZXclMjBEYXRlJTI4JTI5JTI5JTNCJTIwZ3RhZyUyOCUyN2NvbmZpZyUyNyUyQyUyMCUyN0FXLTE3MDk1ODkyMjM4JTI3JTI5JTNCJTIwJTNDJTJGc2NyaXB0JTNF

directus/schema/feedback_schema.yaml

@@ -1,590 +0,0 @@
-version: 1
-directus: 11.14.1
-vendor: postgres
-collections:
-  - collection: contact_submissions
-    meta:
-      accountability: all
-      archive_app_filter: true
-      archive_field: null
-      archive_value: null
-      collapse: open
-      collection: contact_submissions
-      color: '#002b49'
-      display_template: '{{first_name}} {{last_name}} | {{subject}}'
-      group: null
-      hidden: false
-      icon: contact_mail
-      item_duplication_fields: null
-      note: null
-      preview_url: null
-      singleton: false
-      sort: null
-      sort_field: null
-      translations: null
-      unarchive_value: null
-      versioning: false
-    schema:
-      name: contact_submissions
-  - collection: product_requests
-    meta:
-      accountability: all
-      archive_app_filter: true
-      archive_field: null
-      archive_value: null
-      collapse: open
-      collection: product_requests
-      color: '#002b49'
-      display_template: null
-      group: null
-      hidden: false
-      icon: inventory
-      item_duplication_fields: null
-      note: null
-      preview_url: null
-      singleton: false
-      sort: null
-      sort_field: null
-      translations: null
-      unarchive_value: null
-      versioning: false
-    schema:
-      name: product_requests
-  - collection: visual_feedback
-    meta:
-      accountability: all
-      archive_app_filter: true
-      archive_field: null
-      archive_value: null
-      collapse: open
-      collection: visual_feedback
-      color: '#002b49'
-      display_template: '{{user_name}} | {{type}}: {{text}}'
-      group: null
-      hidden: false
-      icon: feedback
-      item_duplication_fields: null
-      note: null
-      preview_url: null
-      singleton: false
-      sort: null
-      sort_field: null
-      translations: null
-      unarchive_value: null
-      versioning: false
-    schema:
-      name: visual_feedback
-  - collection: visual_feedback_comments
-    meta:
-      accountability: all
-      archive_app_filter: true
-      archive_field: null
-      archive_value: null
-      collapse: open
-      collection: visual_feedback_comments
-      color: '#002b49'
-      display_template: '{{user_name}}: {{text}}'
-      group: null
-      hidden: false
-      icon: comment
-      item_duplication_fields: null
-      note: null
-      preview_url: null
-      singleton: false
-      sort: null
-      sort_field: null
-      translations: null
-      unarchive_value: null
-      versioning: false
-    schema:
-      name: visual_feedback_comments
-fields:
-  - collection: visual_feedback
-    field: id
-    type: uuid
-    meta:
-      collection: visual_feedback
-      conditions: null
-      display: null
-      display_options: null
-      field: id
-      group: null
-      hidden: true
-      interface: null
-      note: null
-      options: null
-      readonly: false
-      required: false
-      searchable: true
-      sort: 1
-      special: null
-      translations: null
-      validation: null
-      validation_message: null
-      width: full
-    schema:
-      name: id
-      table: visual_feedback
-      data_type: uuid
-      default_value: null
-      max_length: null
-      numeric_precision: null
-      numeric_scale: null
-      is_nullable: false
-      is_unique: true
-      is_indexed: false
-      is_primary_key: true
-      is_generated: false
-      generation_expression: null
-      has_auto_increment: false
-      foreign_key_table: null
-      foreign_key_column: null
-  - collection: visual_feedback
-    field: status
-    type: string
-    meta:
-      collection: visual_feedback
-      conditions: null
-      display: labels
-      display_options:
-        choices:
-          - background: '#e1f5fe'
-            color: '#01579b'
-            text: Open
-            value: open
-          - background: '#e8f5e9'
-            color: '#1b5e20'
-            text: Resolved
-            value: resolved
-          - background: '#fafafa'
-            color: '#212121'
-            text: Closed
-            value: closed
-        show_as_dot: true
-      field: status
-      group: null
-      hidden: false
-      interface: select-dropdown
-      note: null
-      options:
-        choices:
-          - text: Open
-            value: open
-          - text: Resolved
-            value: resolved
-          - text: Closed
-            value: closed
-      readonly: false
-      required: false
-      searchable: true
-      sort: 2
-      special: null
-      translations: null
-      validation: null
-      validation_message: null
-      width: half
-    schema:
-      name: status
-      table: visual_feedback
-      data_type: character varying
-      default_value: open
-      max_length: 255
-      numeric_precision: null
-      numeric_scale: null
-      is_nullable: true
-      is_unique: false
-      is_indexed: false
-      is_primary_key: false
-      is_generated: false
-      generation_expression: null
-      has_auto_increment: false
-      foreign_key_table: null
-      foreign_key_column: null
-  - collection: visual_feedback
-    field: type
-    type: string
-    meta:
-      collection: visual_feedback
-      conditions: null
-      display: labels
-      display_options:
-        choices:
-          - background: '#fff9c4'
-            color: '#fbc02d'
-            text: Design
-            value: design
-          - background: '#f3e5f5'
-            color: '#7b1fa2'
-            text: Content
-            value: content
-        show_as_dot: true
-      field: type
-      group: null
-      hidden: false
-      interface: select-dropdown
-      note: null
-      options:
-        choices:
-          - text: Design
-            value: design
-          - text: Content
-            value: content
-      readonly: false
-      required: false
-      searchable: true
-      sort: 3
-      special: null
-      translations: null
-      validation: null
-      validation_message: null
-      width: half
-    schema:
-      name: type
-      table: visual_feedback
-      data_type: character varying
-      default_value: null
-      max_length: 255
-      numeric_precision: null
-      numeric_scale: null
-      is_nullable: true
-      is_unique: false
-      is_indexed: false
-      is_primary_key: false
-      is_generated: false
-      generation_expression: null
-      has_auto_increment: false
-      foreign_key_table: null
-      foreign_key_column: null
-  - collection: visual_feedback
-    field: text
-    type: text
-    meta:
-      collection: visual_feedback
-      conditions: null
-      display: formatted-text
-      display_options:
-        soft_limit: 100
-      field: text
-      group: null
-      hidden: false
-      interface: input-multiline
-      note: null
-      options: null
-      readonly: false
-      required: false
-      searchable: true
-      sort: 4
-      special: null
-      translations: null
-      validation: null
-      validation_message: null
-      width: full
-    schema:
-      name: text
-      table: visual_feedback
-      data_type: text
-      default_value: null
-      max_length: null
-      numeric_precision: null
-      numeric_scale: null
-      is_nullable: true
-      is_unique: false
-      is_indexed: false
-      is_primary_key: false
-      is_generated: false
-      generation_expression: null
-      has_auto_increment: false
-      foreign_key_table: null
-      foreign_key_column: null
-  - collection: visual_feedback
-    field: url
-    type: string
-    meta:
-      collection: visual_feedback
-      conditions: null
-      display: link
-      display_options:
-        url: '{{url}}'
-        target: _blank
-        icon: open_in_new
-      field: url
-      group: null
-      hidden: false
-      interface: input
-      note: null
-      options: null
-      readonly: true
-      required: false
-      searchable: true
-      sort: 5
-      special: null
-      translations: null
-      validation: null
-      validation_message: null
-      width: full
-    schema:
-      name: url
-      table: visual_feedback
-      data_type: character varying
-      default_value: null
-      max_length: 255
-      numeric_precision: null
-      numeric_scale: null
-      is_nullable: true
-      is_unique: false
-      is_indexed: false
-      is_primary_key: false
-      is_generated: false
-      generation_expression: null
-      has_auto_increment: false
-      foreign_key_table: null
-      foreign_key_column: null
-  - collection: visual_feedback
-    field: user_info_group
-    type: alias
-    meta:
-      collection: visual_feedback
-      field: user_info_group
-      group: null
-      hidden: false
-      interface: group-detail
-      options:
-        header_icon: person
-        header_text: User Information
-      sort: 6
-      special:
-        - alias
-        - no-data
-        - group
-      width: full
-  - collection: visual_feedback
-    field: user_name
-    type: string
-    meta:
-      collection: visual_feedback
-      field: user_name
-      group: user_info_group
-      hidden: false
-      interface: input
-      sort: 1
-      width: half
-    schema:
-      name: user_name
-      table: visual_feedback
-      data_type: character varying
-      is_nullable: true
-  - collection: visual_feedback
-    field: user_identity
-    type: string
-    meta:
-      collection: visual_feedback
-      field: user_identity
-      group: user_info_group
-      hidden: false
-      interface: input
-      readonly: true
-      sort: 2
-      width: half
-    schema:
-      name: user_identity
-      table: visual_feedback
-      data_type: character varying
-      is_nullable: true
-  - collection: visual_feedback
-    field: technical_details_group
-    type: alias
-    meta:
-      collection: visual_feedback
-      field: technical_details_group
-      group: null
-      hidden: false
-      interface: group-detail
-      options:
-        header_icon: psychology
-        header_text: Technical Context
-      sort: 7
-      special:
-        - alias
-        - no-data
-        - group
-      width: full
-  - collection: visual_feedback
-    field: selector
-    type: string
-    meta:
-      collection: visual_feedback
-      field: selector
-      group: technical_details_group
-      hidden: false
-      interface: input
-      readonly: true
-      sort: 1
-      width: full
-    schema:
-      name: selector
-      table: visual_feedback
-      data_type: character varying
-      is_nullable: true
-  - collection: visual_feedback
-    field: x
-    type: float
-    meta:
-      collection: visual_feedback
-      field: x
-      group: technical_details_group
-      hidden: false
-      interface: input
-      sort: 2
-      width: half
-    schema:
-      name: x
-      table: visual_feedback
-      data_type: real
-      is_nullable: true
-  - collection: visual_feedback
-    field: 'y'
-    type: float
-    meta:
-      collection: visual_feedback
-      field: 'y'
-      group: technical_details_group
-      hidden: false
-      interface: input
-      sort: 3
-      width: half
-    schema:
-      name: 'y'
-      table: visual_feedback
-      data_type: real
-      is_nullable: true
-  - collection: visual_feedback
-    field: date_created
-    type: timestamp
-    meta:
-      collection: visual_feedback
-      conditions: null
-      display: datetime
-      display_options:
-        relative: true
-      field: date_created
-      group: null
-      hidden: false
-      interface: datetime
-      note: null
-      options: null
-      readonly: true
-      required: false
-      searchable: true
-      sort: 8
-      special: null
-      translations: null
-      validation: null
-      validation_message: null
-      width: full
-    schema:
-      name: date_created
-      table: visual_feedback
-      data_type: timestamp with time zone
-      default_value: CURRENT_TIMESTAMP
-      is_nullable: true
-  - collection: visual_feedback_comments
-    field: id
-    type: uuid
-    meta:
-      collection: visual_feedback_comments
-      field: id
-      hidden: true
-    schema:
-      name: id
-      table: visual_feedback_comments
-      data_type: uuid
-      is_primary_key: true
-  - collection: visual_feedback_comments
-    field: feedback_id
-    type: uuid
-    meta:
-      collection: visual_feedback_comments
-      display: null
-      field: feedback_id
-      interface: select-relational
-      sort: 2
-      width: full
-    schema:
-      name: feedback_id
-      table: visual_feedback_comments
-      data_type: uuid
-  - collection: visual_feedback_comments
-    field: user_name
-    type: string
-    meta:
-      collection: visual_feedback_comments
-      field: user_name
-      interface: input
-      sort: 3
-      width: half
-    schema:
-      name: user_name
-      table: visual_feedback_comments
-      data_type: character varying
-  - collection: visual_feedback_comments
-    field: text
-    type: text
-    meta:
-      collection: visual_feedback_comments
-      field: text
-      interface: input-multiline
-      sort: 4
-      width: full
-    schema:
-      name: text
-      table: visual_feedback_comments
-      data_type: text
-  - collection: visual_feedback_comments
-    field: date_created
-    type: timestamp
-    meta:
-      collection: visual_feedback_comments
-      display: datetime
-      display_options:
-        relative: true
-      field: date_created
-      interface: datetime
-      readonly: true
-      sort: 5
-      width: full
-    schema:
-      name: date_created
-      table: visual_feedback_comments
-      data_type: timestamp with time zone
-      default_value: CURRENT_TIMESTAMP
-systemFields:
-  - collection: directus_activity
-    field: timestamp
-    schema:
-      is_indexed: true
-  - collection: directus_revisions
-    field: activity
-    schema:
-      is_indexed: true
-  - collection: directus_revisions
-    field: parent
-    schema:
-      is_indexed: true
-relations:
-  - collection: visual_feedback_comments
-    field: feedback_id
-    related_collection: visual_feedback
-    schema:
-      column: feedback_id
-      foreign_key_column: id
-      foreign_key_table: visual_feedback
-      table: visual_feedback_comments
-    meta:
-      junction_field: null
-      many_collection: visual_feedback_comments
-      many_field: feedback_id
-      one_allowed_m2m: false
-      one_collection: visual_feedback
-      one_deselect_action: nullify
-      one_field: null
-      sort_field: null

directus/schema/minimal_schema.yaml

@@ -0,0 +1,83 @@
+version: 1
+directus: 11.14.1
+vendor: postgres
+collections:
+  - collection: contact_submissions
+    meta:
+      accountability: all
+      archive_app_filter: true
+      collapse: open
+      collection: contact_submissions
+      color: '#002b49'
+      display_template: '{{name}} | {{email}}'
+      hidden: false
+      icon: contact_mail
+      singleton: false
+    schema:
+      name: contact_submissions
+fields:
+  - collection: contact_submissions
+    field: id
+    type: uuid
+    meta:
+      collection: contact_submissions
+      field: id
+      hidden: true
+      sort: 1
+    schema:
+      name: id
+      table: contact_submissions
+      data_type: uuid
+      is_nullable: false
+      is_primary_key: true
+  - collection: contact_submissions
+    field: name
+    type: string
+    meta:
+      collection: contact_submissions
+      field: name
+      interface: input
+      sort: 2
+    schema:
+      name: name
+      table: contact_submissions
+      data_type: character varying
+  - collection: contact_submissions
+    field: email
+    type: string
+    meta:
+      collection: contact_submissions
+      field: email
+      interface: input
+      sort: 3
+    schema:
+      name: email
+      table: contact_submissions
+      data_type: character varying
+  - collection: contact_submissions
+    field: message
+    type: text
+    meta:
+      collection: contact_submissions
+      field: message
+      interface: textarea
+      sort: 4
+    schema:
+      name: message
+      table: contact_submissions
+      data_type: text
+  - collection: contact_submissions
+    field: date_created
+    type: timestamp
+    meta:
+      collection: contact_submissions
+      field: date_created
+      interface: datetime
+      readonly: true
+      sort: 5
+    schema:
+      name: date_created
+      table: contact_submissions
+      data_type: timestamp with time zone
+      default_value: CURRENT_TIMESTAMP
+relations: []

directus/schema/snapshot.yaml

@@ -6,557 +6,210 @@ collections:
     meta:
       accountability: all
       archive_app_filter: true
-      archive_field: null
-      archive_value: null
       collapse: open
       collection: contact_submissions
       color: '#002b49'
-      display_template: '{{first_name}} {{last_name}} | {{subject}}'
-      group: null
+      display_template: '{{name}} | {{email}}'
       hidden: false
       icon: contact_mail
-      item_duplication_fields: null
-      note: null
-      preview_url: null
       singleton: false
-      sort: null
-      sort_field: null
-      translations: null
-      unarchive_value: null
-      versioning: false
     schema:
       name: contact_submissions
   - collection: product_requests
     meta:
       accountability: all
       archive_app_filter: true
-      archive_field: null
-      archive_value: null
       collapse: open
       collection: product_requests
       color: '#002b49'
-      display_template: null
-      group: null
+      display_template: '{{product_name}} | {{email}}'
       hidden: false
       icon: inventory
-      item_duplication_fields: null
-      note: null
-      preview_url: null
       singleton: false
-      sort: null
-      sort_field: null
-      translations: null
-      unarchive_value: null
-      versioning: false
     schema:
       name: product_requests
-  - collection: visual_feedback
+  - collection: products
     meta:
       accountability: all
-      archive_app_filter: true
-      archive_field: null
-      archive_value: null
-      collapse: open
-      collection: visual_feedback
-      color: '#002b49'
-      display_template: '{{user_name}} | {{type}}: {{text}}'
-      group: null
-      hidden: false
-      icon: feedback
-      item_duplication_fields: null
-      note: null
-      preview_url: null
+      collection: products
+      icon: inventory_2
       singleton: false
-      sort: null
-      sort_field: null
-      translations: null
-      unarchive_value: null
-      versioning: false
     schema:
-      name: visual_feedback
-  - collection: visual_feedback_comments
+      name: products
+  - collection: products_translations
     meta:
       accountability: all
-      archive_app_filter: true
-      archive_field: null
-      archive_value: null
-      collapse: open
-      collection: visual_feedback_comments
-      color: '#002b49'
-      display_template: '{{user_name}}: {{text}}'
-      group: null
-      hidden: false
-      icon: comment
-      item_duplication_fields: null
-      note: null
-      preview_url: null
-      singleton: false
-      sort: null
-      sort_field: null
-      translations: null
-      unarchive_value: null
-      versioning: false
+      collection: products_translations
+      hidden: true
     schema:
-      name: visual_feedback_comments
+      name: products_translations
+
 fields:
-  - collection: visual_feedback
+  # contact_submissions
+  - collection: contact_submissions
     field: id
     type: uuid
     meta:
-      collection: visual_feedback
-      conditions: null
-      display: null
-      display_options: null
+      collection: contact_submissions
       field: id
-      group: null
       hidden: true
-      interface: null
-      note: null
-      options: null
-      readonly: false
-      required: false
-      searchable: true
       sort: 1
-      special: null
-      translations: null
-      validation: null
-      validation_message: null
-      width: full
     schema:
       name: id
-      table: visual_feedback
+      table: contact_submissions
       data_type: uuid
-      default_value: null
-      max_length: null
-      numeric_precision: null
-      numeric_scale: null
       is_nullable: false
-      is_unique: true
-      is_indexed: false
       is_primary_key: true
-      is_generated: false
-      generation_expression: null
-      has_auto_increment: false
-      foreign_key_table: null
-      foreign_key_column: null
-  - collection: visual_feedback
-    field: status
+  - collection: contact_submissions
+    field: name
     type: string
     meta:
-      collection: visual_feedback
-      conditions: null
-      display: labels
-      display_options:
-        choices:
-          - background: '#e1f5fe'
-            color: '#01579b'
-            text: Open
-            value: open
-          - background: '#e8f5e9'
-            color: '#1b5e20'
-            text: Resolved
-            value: resolved
-          - background: '#fafafa'
-            color: '#212121'
-            text: Closed
-            value: closed
-        show_as_dot: true
-      field: status
-      group: null
-      hidden: false
-      interface: select-dropdown
-      note: null
-      options:
-        choices:
-          - text: Open
-            value: open
-          - text: Resolved
-            value: resolved
-          - text: Closed
-            value: closed
-      readonly: false
-      required: false
-      searchable: true
+      collection: contact_submissions
+      field: name
+      interface: input
       sort: 2
-      special: null
-      translations: null
-      validation: null
-      validation_message: null
-      width: half
     schema:
-      name: status
-      table: visual_feedback
+      name: name
+      table: contact_submissions
       data_type: character varying
-      default_value: open
-      max_length: 255
-      numeric_precision: null
-      numeric_scale: null
-      is_nullable: true
-      is_unique: false
-      is_indexed: false
-      is_primary_key: false
-      is_generated: false
-      generation_expression: null
-      has_auto_increment: false
-      foreign_key_table: null
-      foreign_key_column: null
-  - collection: visual_feedback
-    field: type
+  - collection: contact_submissions
+    field: email
     type: string
     meta:
-      collection: visual_feedback
-      conditions: null
-      display: labels
-      display_options:
-        choices:
-          - background: '#fff9c4'
-            color: '#fbc02d'
-            text: Design
-            value: design
-          - background: '#f3e5f5'
-            color: '#7b1fa2'
-            text: Content
-            value: content
-        show_as_dot: true
-      field: type
-      group: null
-      hidden: false
-      interface: select-dropdown
-      note: null
-      options:
-        choices:
-          - text: Design
-            value: design
-          - text: Content
-            value: content
-      readonly: false
-      required: false
-      searchable: true
+      collection: contact_submissions
+      field: email
+      interface: input
       sort: 3
-      special: null
-      translations: null
-      validation: null
-      validation_message: null
-      width: half
     schema:
-      name: type
-      table: visual_feedback
+      name: email
+      table: contact_submissions
       data_type: character varying
-      default_value: null
-      max_length: 255
-      numeric_precision: null
-      numeric_scale: null
-      is_nullable: true
-      is_unique: false
-      is_indexed: false
-      is_primary_key: false
-      is_generated: false
-      generation_expression: null
-      has_auto_increment: false
-      foreign_key_table: null
-      foreign_key_column: null
-  - collection: visual_feedback
-    field: text
+  - collection: contact_submissions
+    field: message
     type: text
     meta:
-      collection: visual_feedback
-      conditions: null
-      display: formatted-text
-      display_options:
-        soft_limit: 100
-      field: text
-      group: null
-      hidden: false
-      interface: input-multiline
-      note: null
-      options: null
-      readonly: false
-      required: false
-      searchable: true
+      collection: contact_submissions
+      field: message
+      interface: textarea
       sort: 4
-      special: null
-      translations: null
-      validation: null
-      validation_message: null
-      width: full
     schema:
-      name: text
-      table: visual_feedback
+      name: message
+      table: contact_submissions
       data_type: text
-      default_value: null
-      max_length: null
-      numeric_precision: null
-      numeric_scale: null
-      is_nullable: true
-      is_unique: false
-      is_indexed: false
-      is_primary_key: false
-      is_generated: false
-      generation_expression: null
-      has_auto_increment: false
-      foreign_key_table: null
-      foreign_key_column: null
-  - collection: visual_feedback
-    field: url
-    type: string
-    meta:
-      collection: visual_feedback
-      conditions: null
-      display: link
-      display_options:
-        url: '{{url}}'
-        target: _blank
-        icon: open_in_new
-      field: url
-      group: null
-      hidden: false
-      interface: input
-      note: null
-      options: null
-      readonly: true
-      required: false
-      searchable: true
-      sort: 5
-      special: null
-      translations: null
-      validation: null
-      validation_message: null
-      width: full
-    schema:
-      name: url
-      table: visual_feedback
-      data_type: character varying
-      default_value: null
-      max_length: 255
-      numeric_precision: null
-      numeric_scale: null
-      is_nullable: true
-      is_unique: false
-      is_indexed: false
-      is_primary_key: false
-      is_generated: false
-      generation_expression: null
-      has_auto_increment: false
-      foreign_key_table: null
-      foreign_key_column: null
-  - collection: visual_feedback
-    field: user_info_group
-    type: alias
-    meta:
-      collection: visual_feedback
-      field: user_info_group
-      group: null
-      hidden: false
-      interface: group-detail
-      options:
-        header_icon: person
-        header_text: User Information
-      sort: 6
-      special:
-        - alias
-        - no-data
-        - group
-      width: full
-  - collection: visual_feedback
-    field: user_name
-    type: string
-    meta:
-      collection: visual_feedback
-      field: user_name
-      group: user_info_group
-      hidden: false
-      interface: input
-      sort: 1
-      width: half
-    schema:
-      name: user_name
-      table: visual_feedback
-      data_type: character varying
-      is_nullable: true
-  - collection: visual_feedback
-    field: user_identity
-    type: string
-    meta:
-      collection: visual_feedback
-      field: user_identity
-      group: user_info_group
-      hidden: false
-      interface: input
-      readonly: true
-      sort: 2
-      width: half
-    schema:
-      name: user_identity
-      table: visual_feedback
-      data_type: character varying
-      is_nullable: true
-  - collection: visual_feedback
-    field: technical_details_group
-    type: alias
-    meta:
-      collection: visual_feedback
-      field: technical_details_group
-      group: null
-      hidden: false
-      interface: group-detail
-      options:
-        header_icon: psychology
-        header_text: Technical Context
-      sort: 7
-      special:
-        - alias
-        - no-data
-        - group
-      width: full
-  - collection: visual_feedback
-    field: selector
-    type: string
-    meta:
-      collection: visual_feedback
-      field: selector
-      group: technical_details_group
-      hidden: false
-      interface: input
-      readonly: true
-      sort: 1
-      width: full
-    schema:
-      name: selector
-      table: visual_feedback
-      data_type: character varying
-      is_nullable: true
-  - collection: visual_feedback
-    field: x
-    type: float
-    meta:
-      collection: visual_feedback
-      field: x
-      group: technical_details_group
-      hidden: false
-      interface: input
-      sort: 2
-      width: half
-    schema:
-      name: x
-      table: visual_feedback
-      data_type: real
-      is_nullable: true
-  - collection: visual_feedback
-    field: 'y'
-    type: float
-    meta:
-      collection: visual_feedback
-      field: 'y'
-      group: technical_details_group
-      hidden: false
-      interface: input
-      sort: 3
-      width: half
-    schema:
-      name: 'y'
-      table: visual_feedback
-      data_type: real
-      is_nullable: true
-  - collection: visual_feedback
+  - collection: contact_submissions
     field: date_created
     type: timestamp
     meta:
-      collection: visual_feedback
-      conditions: null
-      display: datetime
-      display_options:
-        relative: true
+      collection: contact_submissions
       field: date_created
-      group: null
-      hidden: false
       interface: datetime
-      note: null
-      options: null
       readonly: true
-      required: false
-      searchable: true
-      sort: 8
-      special: null
-      translations: null
-      validation: null
-      validation_message: null
-      width: full
+      sort: 5
     schema:
       name: date_created
-      table: visual_feedback
+      table: contact_submissions
       data_type: timestamp with time zone
       default_value: CURRENT_TIMESTAMP
-      is_nullable: true
-  - collection: visual_feedback_comments
+
+  # product_requests
+  - collection: product_requests
     field: id
     type: uuid
     meta:
-      collection: visual_feedback_comments
+      collection: product_requests
+      field: id
+      hidden: true
+      sort: 1
+    schema:
+      name: id
+      table: product_requests
+      data_type: uuid
+      is_nullable: false
+      is_primary_key: true
+  - collection: product_requests
+    field: product_name
+    type: string
+    meta:
+      collection: product_requests
+      field: product_name
+      interface: input
+      sort: 2
+    schema:
+      name: product_name
+      table: product_requests
+      data_type: character varying
+  - collection: product_requests
+    field: email
+    type: string
+    meta:
+      collection: product_requests
+      field: email
+      interface: input
+      sort: 3
+    schema:
+      name: email
+      table: product_requests
+      data_type: character varying
+  - collection: product_requests
+    field: message
+    type: text
+    meta:
+      collection: product_requests
+      field: message
+      interface: textarea
+      sort: 4
+    schema:
+      name: message
+      table: product_requests
+      data_type: text
+  - collection: product_requests
+    field: date_created
+    type: timestamp
+    meta:
+      collection: product_requests
+      field: date_created
+      interface: datetime
+      readonly: true
+      sort: 5
+    schema:
+      name: date_created
+      table: product_requests
+      data_type: timestamp with time zone
+      default_value: CURRENT_TIMESTAMP
+
+  # products
+  - collection: products
+    field: id
+    type: uuid
+    meta:
+      collection: products
+      field: id
+      hidden: true
+      sort: 1
+    schema:
+      name: id
+      table: products
+      data_type: uuid
+      is_nullable: false
+      is_primary_key: true
+  
+  # products_translations
+  - collection: products_translations
+    field: id
+    type: integer
+    meta:
+      collection: products_translations
       field: id
       hidden: true
     schema:
       name: id
-      table: visual_feedback_comments
-      data_type: uuid
+      table: products_translations
+      data_type: integer
       is_primary_key: true
-  - collection: visual_feedback_comments
-    field: feedback_id
-    type: uuid
-    meta:
-      collection: visual_feedback_comments
-      display: null
-      field: feedback_id
-      interface: select-relational
-      sort: 2
-      width: full
-    schema:
-      name: feedback_id
-      table: visual_feedback_comments
-      data_type: uuid
-  - collection: visual_feedback_comments
-    field: user_name
-    type: string
-    meta:
-      collection: visual_feedback_comments
-      field: user_name
-      interface: input
-      sort: 3
-      width: half
-    schema:
-      name: user_name
-      table: visual_feedback_comments
-      data_type: character varying
-  - collection: visual_feedback_comments
-    field: text
-    type: text
-    meta:
-      collection: visual_feedback_comments
-      field: text
-      interface: input-multiline
-      sort: 4
-      width: full
-    schema:
-      name: text
-      table: visual_feedback_comments
-      data_type: text
-  - collection: visual_feedback_comments
-    field: date_created
-    type: timestamp
-    meta:
-      collection: visual_feedback_comments
-      display: datetime
-      display_options:
-        relative: true
-      field: date_created
-      interface: datetime
-      readonly: true
-      sort: 5
-      width: full
-    schema:
-      name: date_created
-      table: visual_feedback_comments
-      data_type: timestamp with time zone
-      default_value: CURRENT_TIMESTAMP
+      has_auto_increment: true
+
+
+
 systemFields:
   - collection: directus_activity
     field: timestamp
@@ -570,21 +223,5 @@ systemFields:
     field: parent
     schema:
       is_indexed: true
-relations:
-  - collection: visual_feedback_comments
-    field: feedback_id
-    related_collection: visual_feedback
-    schema:
-      column: feedback_id
-      foreign_key_column: id
-      foreign_key_table: visual_feedback
-      table: visual_feedback_comments
-    meta:
-      junction_field: null
-      many_collection: visual_feedback_comments
-      many_field: feedback_id
-      one_allowed_m2m: false
-      one_collection: visual_feedback
-      one_deselect_action: nullify
-      one_field: null
-      sort_field: null
+
+

docker-compose.override.yml

@@ -1,83 +1,45 @@
 services:
   klz-app:
-    image: node:20-alpine
-    working_dir: /app
-    command: sh -c "npm install --legacy-peer-deps && npx next dev"
-    networks:
-      - default
-      - infra
+    build:
+      context: .
+      dockerfile: Dockerfile
+      target: development
     volumes:
       - .:/app
+      - /app/node_modules
+      - /app/.next
     environment:
-      NODE_ENV: development
-      # Docker Internal Communication
-      DIRECTUS_URL: http://directus:8055
-      INTERNAL_DIRECTUS_URL: http://directus:8055
-      INFRA_DIRECTUS_URL: http://cms-infra-infra-cms-1:8055
-      GATEKEEPER_URL: http://gatekeeper:3000
-      DIRECTUS_API_TOKEN: ${DIRECTUS_API_TOKEN}
-      INFRA_DIRECTUS_TOKEN: ${INFRA_DIRECTUS_TOKEN}
-      NEXT_PUBLIC_FEEDBACK_ENABLED: ${NEXT_PUBLIC_FEEDBACK_ENABLED}
-      GATEKEEPER_BYPASS_ENABLED: ${GATEKEEPER_BYPASS_ENABLED}
+      - WATCHPACK_POLLING=true # Useful for Docker volume mounting issues on some systems
+    restart: "no"
+    container_name: klz-app-dev
+    labels:
+      - "traefik.enable=true"
+      # Clear any production middlewares/headers redirect
+      - "traefik.http.routers.${PROJECT_NAME:-klz-cables}-web.middlewares="
+      - "traefik.http.routers.${PROJECT_NAME:-klz-cables}-web.rule=Host(`${TRAEFIK_HOST:-klz.localhost}`)"
+      - "traefik.http.routers.${PROJECT_NAME:-klz-cables}-web.entrypoints=web"
+      # Configure main router for local HTTP without auth
+      - "traefik.http.routers.${PROJECT_NAME:-klz-cables}.rule=Host(`${TRAEFIK_HOST:-klz.localhost}`)"
+      - "traefik.http.routers.${PROJECT_NAME:-klz-cables}.entrypoints=web"
+      - "traefik.http.routers.${PROJECT_NAME:-klz-cables}.middlewares="
+      - "traefik.http.routers.${PROJECT_NAME:-klz-cables}.tls=false"
+      - "traefik.docker.network=infra"
+
+  klz-cms:
+    container_name: klz-cms-dev
+    restart: "no"
     ports:
-      - "3000:3000"
+      - "8055:8055"
     labels:
       - "traefik.enable=true"
-      # Global local settings
-      - "traefik.http.routers.klz-cables-local.entrypoints=web"
-      - "traefik.http.routers.klz-cables-local.rule=Host(`klz.localhost`)"
-      - "traefik.http.routers.klz-cables-local.tls=false"
-      - "traefik.http.routers.klz-cables-local.middlewares="
-      - "traefik.http.routers.klz-cables-local.service=klz-cables-local"
-      - "traefik.http.services.klz-cables-local.loadbalancer.server.port=3000"
+      - "traefik.http.routers.${PROJECT_NAME:-klz-cables}-cms.rule=Host(`${DIRECTUS_HOST:-cms.klz.localhost}`)"
+      - "traefik.http.routers.${PROJECT_NAME:-klz-cables}-cms.entrypoints=${TRAEFIK_ENTRYPOINT:-web}"
+      - "traefik.http.routers.${PROJECT_NAME:-klz-cables}-cms.service=${PROJECT_NAME:-klz-cables}-cms"
+      - "traefik.http.services.${PROJECT_NAME:-klz-cables}-cms.loadbalancer.server.port=8055"
       - "traefik.docker.network=infra"
 
-      # Web direct router
-      - "traefik.http.routers.klz-cables-local-web.entrypoints=web"
-      - "traefik.http.routers.klz-cables-local-web.rule=Host(`klz.localhost`)"
-      - "traefik.http.routers.klz-cables-local-web.tls=false"
-      - "traefik.http.routers.klz-cables-local-web.middlewares="
-      - "traefik.http.routers.klz-cables-local-web.service=klz-cables-local"
+  klz-db:
+    restart: "no"
 
-  directus:
-    networks:
-      - default
-      - infra
-    labels:
-      - "traefik.enable=true"
-      - "traefik.http.routers.klz-cables-directus-local.entrypoints=web"
-      - "traefik.http.routers.klz-cables-directus-local.rule=Host(`cms.klz.localhost`)"
-      - "traefik.http.routers.klz-cables-directus-local.tls=false"
-      - "traefik.http.routers.klz-cables-directus-local.middlewares="
-      - "traefik.http.routers.klz-cables-directus-local.service=klz-cables-directus-local"
-      - "traefik.http.services.klz-cables-directus-local.loadbalancer.server.port=8055"
-      - "traefik.docker.network=infra"
-    ports:
-      - "${DIRECTUS_PORT:-8055}:8055"
-    environment:
-      PUBLIC_URL: http://cms.klz.localhost
-
-  gatekeeper:
-    image: node:20-alpine
-    working_dir: /app/packages/gatekeeper
-    command: sh -c "corepack enable && CI=true NPM_TOKEN=dummy pnpm install --no-frozen-lockfile && pnpm dev"
-    volumes:
-      - /Users/marcmintel/Projects/at-mintel:/app
-    networks:
-      - default
-      - infra
-    environment:
-      DIRECTUS_URL: http://directus:8055
-      NEXT_PUBLIC_BASE_URL: http://gatekeeper.klz.localhost
-      DIRECTUS_ADMIN_EMAIL: ${DIRECTUS_ADMIN_EMAIL}
-      DIRECTUS_ADMIN_PASSWORD: ${DIRECTUS_ADMIN_PASSWORD}
-      COOKIE_DOMAIN: localhost
-      NODE_ENV: development
-    labels:
-      - "traefik.enable=true"
-      - "traefik.http.routers.klz-cables-gatekeeper-local.entrypoints=web"
-      - "traefik.http.routers.klz-cables-gatekeeper-local.rule=Host(`gatekeeper.klz.localhost`)"
-      - "traefik.http.routers.klz-cables-gatekeeper-local.tls=false"
-      - "traefik.http.routers.klz-cables-gatekeeper-local.service=klz-cables-gatekeeper-local"
-      - "traefik.http.services.klz-cables-gatekeeper-local.loadbalancer.server.port=3000"
-      - "traefik.docker.network=infra"
+  klz-gatekeeper:
+    restart: "no"

docker-compose.yml

@@ -1,103 +1,105 @@
 services:
   klz-app:
+    build:
+      context: .
+      dockerfile: Dockerfile
+      args:
+        NEXT_PUBLIC_BASE_URL: ${NEXT_PUBLIC_BASE_URL}
+        DIRECTUS_URL: ${DIRECTUS_URL}
     image: registry.infra.mintel.me/mintel/klz-cables.com:${IMAGE_TAG:-latest}
-    restart: always
+    restart: unless-stopped
     networks:
-      - default
+      default:
+      infra:
+        aliases:
+          - klz.localhost
     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.${PROJECT_NAME:-klz-cables}-web.rule=${TRAEFIK_HOST_RULE:-Host(`klz-cables.com`)}"
-      - "traefik.http.routers.${PROJECT_NAME:-klz-cables}-web.entrypoints=web"
-      - "traefik.http.routers.${PROJECT_NAME:-klz-cables}-web.middlewares=redirect-https"
-      # HTTPS router (Protected)
-      - "traefik.http.routers.${PROJECT_NAME:-klz-cables}.rule=${TRAEFIK_HOST_RULE:-Host(`klz-cables.com`)}"
-      - "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.routers.${PROJECT_NAME:-klz-cables}.middlewares=${PROJECT_NAME:-klz-cables}-ratelimit,${PROJECT_NAME:-klz-cables}-forward,${AUTH_MIDDLEWARE:-${PROJECT_NAME:-klz-cables}-compress}"
+      - "traefik.http.routers.${PROJECT_NAME:-klz}-web.rule=${TRAEFIK_HOST_RULE:-Host(`${TRAEFIK_HOST:-klz-cables.com}`)}"
+      - "traefik.http.routers.${PROJECT_NAME:-klz}-web.entrypoints=web"
+      - "traefik.http.routers.${PROJECT_NAME:-klz}-web.middlewares=redirect-https"
+      # HTTPS router (Standard)
+      - "traefik.http.routers.${PROJECT_NAME:-klz}.rule=${TRAEFIK_HOST_RULE:-Host(`${TRAEFIK_HOST:-klz-cables.com}`)}"
+      - "traefik.http.routers.${PROJECT_NAME:-klz}.entrypoints=${TRAEFIK_ENTRYPOINT:-web}"
+      - "traefik.http.routers.${PROJECT_NAME:-klz}.tls.certresolver=${TRAEFIK_CERT_RESOLVER:-}"
+      - "traefik.http.routers.${PROJECT_NAME:-klz}.tls=${TRAEFIK_TLS:-false}"
+      - "traefik.http.routers.${PROJECT_NAME:-klz}.service=${PROJECT_NAME:-klz}-app-svc"
+      - "traefik.http.routers.${PROJECT_NAME:-klz}.middlewares=${AUTH_MIDDLEWARE:-klz-ratelimit,klz-forward,klz-compress}"
 
-      # HTTPS router (Unprotected - for Analytics & Errors)
-      - "traefik.http.routers.${PROJECT_NAME:-klz-cables}-unprotected.rule=${TRAEFIK_HOST_RULE:-Host(`klz-cables.com`)} && PathPrefix(`/stats`, `/errors`)"
-      - "traefik.http.routers.${PROJECT_NAME:-klz-cables}-unprotected.entrypoints=websecure"
-      - "traefik.http.routers.${PROJECT_NAME:-klz-cables}-unprotected.tls.certresolver=le"
-      - "traefik.http.routers.${PROJECT_NAME:-klz-cables}-unprotected.tls=true"
-      - "traefik.http.routers.${PROJECT_NAME:-klz-cables}-unprotected.service=${PROJECT_NAME:-klz-cables}"
-      - "traefik.http.routers.${PROJECT_NAME:-klz-cables}-unprotected.middlewares=${PROJECT_NAME:-klz-cables}-ratelimit,${PROJECT_NAME:-klz-cables}-forward,${PROJECT_NAME:-klz-cables}-compress"
+      # Public Router (Whitelist for OG Images, Sitemaps, Health)
+      - "traefik.http.routers.${PROJECT_NAME:-klz}-public.rule=(${TRAEFIK_HOST_RULE:-Host(`${TRAEFIK_HOST:-klz-cables.com}`)}) && (PathPrefix(`/health`) || PathPrefix(`/sitemap.xml`) || PathPrefix(`/robots.txt`) || PathPrefix(`/manifest.webmanifest`) || PathRegexp(`^/([a-z]{2}/)?api/og`) || PathRegexp(`^/([a-z]{2}/)?opengraph-image$`) || PathRegexp(`^/([a-z]{2}/)?blog/opengraph-image$`) || PathRegexp(`^/sitemap(-[0-9]+)?\\.xml$`))"
+      - "traefik.http.routers.${PROJECT_NAME:-klz}-public.entrypoints=${TRAEFIK_ENTRYPOINT:-web}"
+      - "traefik.http.routers.${PROJECT_NAME:-klz}-public.tls.certresolver=${TRAEFIK_CERT_RESOLVER:-}"
+      - "traefik.http.routers.${PROJECT_NAME:-klz}-public.tls=${TRAEFIK_TLS:-false}"
+      - "traefik.http.routers.${PROJECT_NAME:-klz}-public.service=${PROJECT_NAME:-klz}-app-svc"
+      - "traefik.http.routers.${PROJECT_NAME:-klz}-public.middlewares=${AUTH_MIDDLEWARE_UNPROTECTED:-klz-ratelimit,klz-forward,klz-compress}"
+      - "traefik.http.routers.${PROJECT_NAME:-klz}-public.priority=2000"
 
-      - "traefik.http.services.${PROJECT_NAME:-klz-cables}.loadbalancer.server.port=80"
-      - "traefik.http.services.${PROJECT_NAME:-klz-cables}.loadbalancer.server.scheme=http"
+      - "traefik.http.services.${PROJECT_NAME:-klz}-app-svc.loadbalancer.server.scheme=http"
+      - "traefik.http.services.${PROJECT_NAME:-klz}-app-svc.loadbalancer.server.port=3000"
       - "traefik.docker.network=infra"
+      - "caddy=http://${TRAEFIK_HOST:-klz.localhost}"
+      - "caddy.reverse_proxy={{upstreams 3000}}"
 
       # Middleware Definitions
-      - "traefik.http.middlewares.${PROJECT_NAME:-klz-cables}-compress.compress=true"
-
-      # Gatekeeper Router (to show the login page)
-      - "traefik.http.routers.${PROJECT_NAME:-klz-cables}-gatekeeper.rule=Host(`gatekeeper.${TRAEFIK_HOST:-klz-cables.com}`)"
-      - "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"
+      - "traefik.http.middlewares.${PROJECT_NAME:-klz}-compress.compress=true"
 
       # Forwarded Headers
-      - "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"
+      - "traefik.http.middlewares.${PROJECT_NAME:-klz}-forward.headers.customrequestheaders.X-Forwarded-Proto=https"
+      - "traefik.http.middlewares.${PROJECT_NAME:-klz}-forward.headers.customrequestheaders.X-Forwarded-Ssl=on"
 
-      # 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"
+      # Authentication Middleware (ForwardAuth)
+      - "traefik.http.middlewares.${PROJECT_NAME:-klz}-auth.forwardauth.address=http://${PROJECT_NAME:-klz}-gatekeeper:3000/gatekeeper/api/verify"
+      - "traefik.http.middlewares.${PROJECT_NAME:-klz}-auth.forwardauth.trustForwardHeader=true"
+      - "traefik.http.middlewares.${PROJECT_NAME:-klz}-auth.forwardauth.authRequestHeaders=X-Forwarded-Host,X-Forwarded-Proto,X-Forwarded-For,Cookie"
+      - "traefik.http.middlewares.${PROJECT_NAME:-klz}-auth.forwardauth.authResponseHeaders=X-Auth-User"
 
-  gatekeeper:
-    image: registry.infra.mintel.me/mintel/gatekeeper:1.4.0
-    container_name: ${PROJECT_NAME:-klz-cables}-gatekeeper
-    restart: always
+      # Rate Limit Middleware
+      - "traefik.http.middlewares.${PROJECT_NAME:-klz}-ratelimit.ratelimit.average=100"
+      - "traefik.http.middlewares.${PROJECT_NAME:-klz}-ratelimit.ratelimit.burst=50"
+    healthcheck:
+      test: [ "CMD", "curl", "-f", "http://127.0.0.1:3000/health" ]
+      interval: 15s
+      timeout: 10s
+      retries: 3
+      start_period: 45s
+
+  klz-gatekeeper:
+    profiles: [ "gatekeeper" ]
+    image: registry.infra.mintel.me/mintel/gatekeeper:v1.7.12
+    restart: unless-stopped
     networks:
-      - default
-      - infra
+      infra:
+        aliases:
+          - ${PROJECT_NAME:-klz}-gatekeeper
     env_file:
       - ${ENV_FILE:-.env}
     environment:
       PORT: 3000
+      PROJECT_NAME: ${PROJECT_NAME:-KLZ Cables}
+      PROJECT_COLOR: "#82ed20"
       COOKIE_DOMAIN: ${COOKIE_DOMAIN}
-      AUTH_COOKIE_NAME: klz_gatekeeper_session
-      NEXT_PUBLIC_BASE_URL: https://gatekeeper.${TRAEFIK_HOST:-klz-cables.com}
-      GATEKEEPER_PASSWORD: ${GATEKEEPER_PASSWORD:-klz2026}
-      DIRECTUS_URL: ${DIRECTUS_URL}
-      DIRECTUS_ADMIN_EMAIL: ${DIRECTUS_ADMIN_EMAIL}
-      DIRECTUS_ADMIN_PASSWORD: ${DIRECTUS_ADMIN_PASSWORD}
+      AUTH_COOKIE_NAME: ${AUTH_COOKIE_NAME:-klz_gatekeeper_session}
+      GATEKEEPER_PASSWORD: ${GATEKEEPER_PASSWORD}
+      NEXT_PUBLIC_BASE_URL: ${GATEKEEPER_ORIGIN}
     labels:
       - "traefik.enable=true"
-      - "traefik.http.services.${PROJECT_NAME:-klz-cables}-gatekeeper.loadbalancer.server.port=3000"
+      - "traefik.docker.network=infra"
+      - "traefik.http.routers.${PROJECT_NAME:-klz}-gatekeeper.rule=(Host(`${TRAEFIK_HOST:-testing.klz-cables.com}`) && PathPrefix(`/gatekeeper`))"
+      - "traefik.http.routers.${PROJECT_NAME:-klz}-gatekeeper.entrypoints=${TRAEFIK_ENTRYPOINT:-web}"
+      - "traefik.http.routers.${PROJECT_NAME:-klz}-gatekeeper.tls.certresolver=${TRAEFIK_CERT_RESOLVER:-}"
+      - "traefik.http.routers.${PROJECT_NAME:-klz}-gatekeeper.tls=${TRAEFIK_TLS:-false}"
+      - "traefik.http.routers.${PROJECT_NAME:-klz}-gatekeeper.service=${PROJECT_NAME:-klz}-gatekeeper-svc"
+      - "traefik.http.services.${PROJECT_NAME:-klz}-gatekeeper-svc.loadbalancer.server.port=3000"
       - "traefik.docker.network=infra"
 
-  directus:
-    image: directus/directus:11
-    restart: always
-    networks:
-      - default
-      - infra
+  klz-cms:
+    image: registry.infra.mintel.me/mintel/directus:latest
+    restart: unless-stopped
+    command: [ "node", "cli.js", "start" ]
     env_file:
       - ${ENV_FILE:-.env}
     environment:
@@ -106,45 +108,48 @@ services:
       ADMIN_EMAIL: ${DIRECTUS_ADMIN_EMAIL}
       ADMIN_PASSWORD: ${DIRECTUS_ADMIN_PASSWORD}
       DB_CLIENT: 'pg'
-      DB_HOST: 'directus-db'
+      DB_HOST: 'klz-db'
       DB_PORT: '5432'
       DB_DATABASE: ${DIRECTUS_DB_NAME:-directus}
       DB_USER: ${DIRECTUS_DB_USER:-directus}
-      DB_PASSWORD: ${DIRECTUS_DB_PASSWORD:-directus}
+      DB_PASSWORD: ${DIRECTUS_DB_PASSWORD:-120in09oenaoinsd9iaidon}
       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}
+      HOST: '0.0.0.0'
+    networks:
+      - infra
     volumes:
       - ./directus/uploads:/directus/uploads
       - ./directus/extensions:/directus/extensions
       - ./directus/schema:/directus/schema
       - ./directus/migrations:/directus/migrations
+    healthcheck:
+      disable: true
     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"
+      - "traefik.http.routers.${PROJECT_NAME:-klz}-cms.rule=Host(`${DIRECTUS_HOST:-cms.klz-cables.com}`)"
+      - "traefik.http.routers.${PROJECT_NAME:-klz}-cms.entrypoints=websecure"
+      - "traefik.http.routers.${PROJECT_NAME:-klz}-cms.priority=5000"
+      - "traefik.http.routers.${PROJECT_NAME:-klz}-cms.tls=true"
+      - "traefik.http.routers.${PROJECT_NAME:-klz}-cms.tls.certresolver=le"
+      - "traefik.http.routers.${PROJECT_NAME:-klz}-cms.service=${PROJECT_NAME:-klz}-cms-svc"
+      - "traefik.http.services.${PROJECT_NAME:-klz}-cms-svc.loadbalancer.server.port=8055"
       - "traefik.docker.network=infra"
-
-  directus-db:
+      - "caddy=http://${DIRECTUS_HOST:-cms.klz-cables.com}"
+      - "caddy.reverse_proxy={{upstreams 8055}}"
+  klz-db:
     image: postgres:15-alpine
-    restart: always
-    networks:
-      - default
+    restart: unless-stopped
     env_file:
       - ${ENV_FILE:-.env}
     environment:
       POSTGRES_DB: ${DIRECTUS_DB_NAME:-directus}
       POSTGRES_USER: ${DIRECTUS_DB_USER:-directus}
-      POSTGRES_PASSWORD: ${DIRECTUS_DB_PASSWORD:-directus}
+      POSTGRES_PASSWORD: ${DIRECTUS_DB_PASSWORD:-120in09oenaoinsd9iaidon}
     volumes:
       - directus-db-data:/var/lib/postgresql/data
+    networks:
+      - infra
 
 networks:
   default:

eslint.config.mjs

@@ -20,8 +20,11 @@ export default [
             "*.mjs",
             "scripts/**",
             "tests/**",
-            "next-env.d.ts"
+            "next-env.d.ts",
+            "reference/**",
+            "data/**"
         ],
+
     },
     ...baseConfig,
     ...nextConfig.map((config) => ({
@@ -39,7 +42,9 @@ export default [
             "@typescript-eslint/no-require-imports": "off",
             "prefer-const": "warn",
             "react/no-unescaped-entities": "off",
-            "@next/next/no-img-element": "warn"
+            "@next/next/no-img-element": "warn",
+            "react-hooks/set-state-in-effect": "warn"
         }
+
     })),
 ];

i18n/request.ts

@@ -2,11 +2,16 @@ import { getRequestConfig } from 'next-intl/server';
 import * as Sentry from '@sentry/nextjs';
 
 export default getRequestConfig(async ({ requestLocale }) => {
-  let locale = await requestLocale;
+  // Hardened locale validation: only allow 'en' or 'de'
+  // Use a temporary variable to validate before assigning to locale
+  const rawLocale = await requestLocale;
+  const supportedLocales = ['en', 'de'];
+  const locale =
+    typeof rawLocale === 'string' && supportedLocales.includes(rawLocale) ? rawLocale : 'en';
 
-  // Ensure that a valid locale is used
-  if (!locale || !['en', 'de'].includes(locale)) {
-    locale = 'en';
+  // Silent fallback for missing locales to support internal requests (e.g. OG generation)
+  if (!rawLocale || !supportedLocales.includes(rawLocale as string)) {
+    // console.debug(`[i18n] Fallback to "en" for locale: "${rawLocale}"`);
   }
 
   return {
@@ -26,6 +31,6 @@ export default getRequestConfig(async ({ requestLocale }) => {
         return path;
       }
       return 'fallback';
-    }
+    },
   } as any;
 });

lib/config.ts

@@ -2,7 +2,7 @@
  * Centralized configuration management for the application.
  * This file provides a type-safe way to access environment variables.
  */
-import { envSchema, getRawEnv } from './env';
+import { getRawEnv } from './env';
 
 let memoizedConfig: ReturnType<typeof createConfig> | undefined;
 
@@ -11,10 +11,15 @@ let memoizedConfig: ReturnType<typeof createConfig> | undefined;
  * Throws if validation fails.
  */
 function createConfig() {
-  const env = envSchema.parse(getRawEnv());
+  const env = getRawEnv();
 
   const target = env.NEXT_PUBLIC_TARGET || env.TARGET;
 
+  console.log('[Config] Initializing Toggles:', {
+    feedbackEnabled: env.NEXT_PUBLIC_FEEDBACK_ENABLED,
+    recordModeEnabled: env.NEXT_PUBLIC_RECORD_MODE_ENABLED,
+  });
+
   return {
     env: env.NODE_ENV,
     target,
@@ -23,6 +28,7 @@ function createConfig() {
     isTesting: target === 'testing',
     isDevelopment: target === 'development',
     feedbackEnabled: env.NEXT_PUBLIC_FEEDBACK_ENABLED,
+    recordModeEnabled: env.NEXT_PUBLIC_RECORD_MODE_ENABLED,
     gatekeeperUrl: env.GATEKEEPER_URL,
 
     baseUrl: env.NEXT_PUBLIC_BASE_URL,
@@ -50,7 +56,7 @@ function createConfig() {
     },
 
     logging: {
-      level: env.LOG_LEVEL,
+      level: env.LOG_LEVEL || 'info',
     },
 
     mail: {
@@ -144,6 +150,9 @@ export const config = {
   get feedbackEnabled() {
     return getConfig().feedbackEnabled;
   },
+  get recordModeEnabled() {
+    return getConfig().recordModeEnabled;
+  },
   get infraCMS() {
     return getConfig().infraCMS;
   },

lib/directus.ts

@@ -1,20 +1,22 @@
-import { createDirectus, rest, authentication, staticToken, readItems, readCollections } from '@directus/sdk';
+import { readItems, readCollections } from '@directus/sdk';
+import { createMintelDirectusClient, ensureDirectusAuthenticated } from '@mintel/next-utils';
 import { config } from './config';
 import { getServerAppServices } from './services/create-services.server';
 
-const { url, adminEmail, password, token, proxyPath, internalUrl } = config.directus;
+/**
+ * Directus Schema Definitions
+ */
+export interface Schema {
+  products: any[];
+  categories: any[];
+  contact_submissions: any[];
+  product_requests: any[];
+  translations: any[];
+  categories_link: any[];
+}
 
-// 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;
-
-// Initialize client with authentication plugin
-const client = createDirectus(effectiveUrl).with(rest()).with(authentication());
+// Initialize client using Mintel standards (environment-aware)
+const client = createMintelDirectusClient<Schema>();
 
 /**
  * Helper to determine if we should show detailed errors
@@ -31,48 +33,15 @@ function formatError(error: any) {
   return 'A system error occurred. Our team has been notified.';
 }
 
-let authPromise: Promise<void> | null = null;
-
 export async function ensureAuthenticated() {
-  if (token) {
-    (client as any).setToken(token);
-    return;
-  }
-
-  // Check if we already have a valid session token in memory (for login flow)
-  const existingToken = await (client as any).getToken();
-  if (existingToken) {
-    return;
-  }
-
-  if (adminEmail && password) {
-    if (authPromise) {
-      return authPromise;
+  try {
+    await ensureDirectusAuthenticated(client);
+  } catch (e: any) {
+    if (typeof window === 'undefined') {
+      getServerAppServices().errors.captureException(e, { part: 'directus_auth' });
     }
-
-    authPromise = (async () => {
-      try {
-        client.setToken(null as any);
-        await client.login(adminEmail, password);
-        console.log(`✅ Directus: Authenticated successfully as ${adminEmail}`);
-      } catch (e: any) {
-        if (typeof window === 'undefined') {
-          getServerAppServices().errors.captureException(e, { part: 'directus_auth' });
-        }
-        console.error(`Failed to authenticate with Directus (${adminEmail}):`, e.message);
-        if (shouldShowDevErrors && e.errors) {
-          console.error('Directus Auth Details:', JSON.stringify(e.errors, null, 2));
-        }
-        // Clear the promise on failure (especially on invalid credentials) 
-        // so we can retry on next request if credentials were updated
-        authPromise = null;
-        throw e;
-      }
-    })();
-
-    return authPromise;
-  } else if (shouldShowDevErrors && !adminEmail && !password && !token) {
-    console.warn('Directus: No token or admin credentials provided.');
+    console.error(`Failed to authenticate with Directus:`, e.message);
+    throw e;
   }
 }
 
@@ -97,8 +66,8 @@ function mapDirectusProduct(item: any, locale: string): any {
       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,
+    // Use standardized proxy path for assets to avoid CORS
+    data_sheet_url: item.data_sheet ? `/api/directus/assets/${item.data_sheet}` : null,
     categories: (item.categories_link || [])
       .map((c: any) => c.categories_id?.translations?.[0]?.name)
       .filter(Boolean),
@@ -164,14 +133,16 @@ export async function checkHealth() {
       if (typeof window === 'undefined') {
         getServerAppServices().errors.captureException(e, { part: 'directus_health_auth' });
       }
-      console.error('Directus authentication failed during health check:', e);
+      console.error('Directus authentication or collection-read 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,
+          ? `Directus Health Error: ${e.message || 'Unknown'}`
+          : 'CMS is currently unavailable due to an internal authentication or connection error.',
+        code: e.code || 'HEALTH_AUTH_FAILED',
+        details: shouldShowDevErrors
+          ? { message: e.message, code: e.code, errors: e.errors }
+          : undefined,
       };
     }
 

lib/env.ts

@@ -1,124 +1,67 @@
 import { z } from 'zod';
+import { validateMintelEnv, mintelEnvSchema, withMintelRefinements } from '@mintel/next-utils';
 
 /**
- * Helper to treat empty strings as undefined.
+ * Robust boolean preprocessor for environment variables.
+ * Handles strings 'true'/'false' and actual booleans.
  */
-const preprocessEmptyString = (val: unknown) => (val === '' ? undefined : val);
+const booleanSchema = z.preprocess((val) => {
+  if (typeof val === 'string') {
+    if (val.toLowerCase() === 'true') return true;
+    if (val.toLowerCase() === 'false') return false;
+  }
+  return val;
+}, z.boolean());
 
 /**
  * Environment variable schema.
+ * Extends the default Mintel environment 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()),
-    NEXT_PUBLIC_TARGET: z.enum(['development', 'testing', 'staging', 'production']).optional(),
+const envExtension = {
+  // Project specific overrides or additions
+  AUTH_COOKIE_NAME: z.string().default('klz_gatekeeper_session'),
 
-    // Analytics
-    UMAMI_WEBSITE_ID: z.preprocess(preprocessEmptyString, z.string().optional()),
-    UMAMI_API_ENDPOINT: z.preprocess(
-      preprocessEmptyString,
-      z.string().url().default('https://analytics.infra.mintel.me'),
-    ),
+  // Gatekeeper specifics not in base
+  GATEKEEPER_URL: z.string().url().default('http://gatekeeper:3000'),
+  GATEKEEPER_BYPASS_ENABLED: booleanSchema.default(false),
+  NEXT_PUBLIC_FEEDBACK_ENABLED: booleanSchema.default(false),
+  NEXT_PUBLIC_RECORD_MODE_ENABLED: booleanSchema.default(false),
 
-    // Error Tracking
-    SENTRY_DSN: z.preprocess(preprocessEmptyString, z.string().optional()),
+  INFRA_DIRECTUS_URL: z.string().url().optional(),
+  INFRA_DIRECTUS_TOKEN: z.string().optional(),
 
-    // Logging
-    LOG_LEVEL: z.enum(['debug', 'info', 'warn', 'error']).default('info'),
+  // Analytics
+  UMAMI_WEBSITE_ID: z.string().optional(),
+  UMAMI_API_ENDPOINT: z.string().optional(),
 
-    // 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([]),
-    ),
+  // Mail Configuration
+  MAIL_HOST: z.string().optional(),
+  MAIL_PORT: z.coerce.number().optional(),
+  MAIL_USERNAME: z.string().optional(),
+  MAIL_PASSWORD: z.string().optional(),
+  MAIL_FROM: z.string().optional(),
+  MAIL_RECIPIENTS: z.string().optional(),
 
-    // 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()),
-    // Gatekeeper
-    GATEKEEPER_URL: z.preprocess(
-      preprocessEmptyString,
-      z.string().url().default('http://gatekeeper:3000'),
-    ),
-    NEXT_PUBLIC_FEEDBACK_ENABLED: z.preprocess(
-      (val) => val === 'true' || val === true,
-      z.boolean().default(false)
-    ),
-    GATEKEEPER_BYPASS_ENABLED: z.preprocess(
-      (val) => val === 'true' || val === true,
-      z.boolean().default(false)
-    ),
-    INFRA_DIRECTUS_URL: z.preprocess(preprocessEmptyString, z.string().url().optional()),
-    INFRA_DIRECTUS_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>;
+  // Directus Authentication
+  DIRECTUS_URL: z.string().url().optional(),
+  DIRECTUS_ADMIN_EMAIL: z.string().email().optional(),
+  DIRECTUS_ADMIN_PASSWORD: z.string().optional(),
+  DIRECTUS_API_TOKEN: z.string().optional(),
+};
 
 /**
- * Collects all environment variables from the process.
- * Explicitly references NEXT_PUBLIC_ variables for Next.js inlining.
+ * Full schema including Mintel base and refinements
+ */
+export const envSchema = withMintelRefinements(z.object(mintelEnvSchema).extend(envExtension));
+
+/**
+ * Validated environment object.
+ */
+export const env = validateMintelEnv(envExtension);
+
+/**
+ * For legacy compatibility with existing code.
  */
 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,
-    UMAMI_WEBSITE_ID: process.env.UMAMI_WEBSITE_ID,
-    UMAMI_API_ENDPOINT: process.env.UMAMI_API_ENDPOINT,
-    SENTRY_DSN: process.env.SENTRY_DSN,
-    LOG_LEVEL: process.env.LOG_LEVEL,
-    MAIL_HOST: process.env.MAIL_HOST,
-    MAIL_PORT: process.env.MAIL_PORT,
-    MAIL_USERNAME: process.env.MAIL_USERNAME,
-    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,
-    GATEKEEPER_URL: process.env.GATEKEEPER_URL,
-    NEXT_PUBLIC_FEEDBACK_ENABLED: process.env.NEXT_PUBLIC_FEEDBACK_ENABLED,
-    GATEKEEPER_BYPASS_ENABLED: process.env.GATEKEEPER_BYPASS_ENABLED,
-    INFRA_DIRECTUS_URL: process.env.INFRA_DIRECTUS_URL,
-    INFRA_DIRECTUS_TOKEN: process.env.INFRA_DIRECTUS_TOKEN,
-  };
+  return env;
 }

lib/mail/mailer.ts

@@ -1,7 +1,6 @@
 import nodemailer from 'nodemailer';
 import { getServerAppServices } from '@/lib/services/create-services.server';
 import { config } from '../config';
-import { ReactElement } from 'react';
 
 let transporterInstance: nodemailer.Transporter | null = null;
 

lib/og-helper.tsx

@@ -6,37 +6,41 @@ import { join } from 'path';
  * 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');
+  const boldFontPath = join(process.cwd(), 'public/fonts/Inter-Bold.woff');
+  const regularFontPath = join(process.cwd(), 'public/fonts/Inter-Regular.woff');
 
-    try {
-        const boldFont = readFileSync(boldFontPath);
-        const regularFont = readFileSync(regularFontPath);
+  try {
+    console.log(`[OG] Loading fonts: bold=${boldFontPath}, regular=${regularFontPath}`);
+    const boldFont = readFileSync(boldFontPath);
+    const regularFont = readFileSync(regularFontPath);
+    console.log(
+      `[OG] Fonts loaded successfully (${boldFont.length} and ${regularFont.length} bytes)`,
+    );
 
-        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 [];
-    }
+    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(`[OG] Failed to load fonts from ${process.cwd()}:`, error);
+    return [];
+  }
 }
 
 /**
  * Common configuration for OG images
  */
 export const OG_IMAGE_SIZE = {
-    width: 1200,
-    height: 630,
+  width: 1200,
+  height: 630,
 };

lib/schema.ts

@@ -1,6 +1,6 @@
 import { config } from './config';
 
-export const SITE_URL = config.baseUrl || 'https://klz-cables.com';
+export const SITE_URL = (config.baseUrl as string) || 'https://klz-cables.com';
 export const LOGO_URL = `${SITE_URL}/logo.png`;
 
 export const getOrganizationSchema = () => ({

messages/de.json

@@ -206,7 +206,8 @@
       "title": "Produktportfolio | Hochwertige Kabel für jede Anwendung",
       "description": "Entdecken Sie unser umfassendes Sortiment an zertifizierten Kabeln: von Niederspannung über Mittel- und Hochspannung bis hin zu spezialisierten Solarkabeln."
     },
-    "title": "Unsere Produkte",
+    "title": "Unsere <green>Produkte</green>",
+    "breadcrumb": "Produkte",
     "subtitle": "Entdecken Sie unser umfassendes Sortiment an hochwertigen Kabeln für jede Anwendung.",
     "heroSubtitle": "Produktportfolio",
     "categoryLabel": "Kategorie",

messages/en.json

@@ -206,7 +206,8 @@
       "title": "Product Portfolio | High-Quality Cables for Every Application",
       "description": "Explore our comprehensive range of certified cables: from low voltage to medium and high voltage, as well as specialized solar cables."
     },
-    "title": "Our Products",
+    "title": "Our <green>Products</green>",
+    "breadcrumb": "Products",
     "subtitle": "Explore our comprehensive range of high-quality cables designed for every application.",
     "heroSubtitle": "Product Portfolio",
     "categoryLabel": "Category",

middleware.ts

@@ -1,5 +1,5 @@
 import createMiddleware from 'next-intl/middleware';
-import { NextResponse, NextRequest } from 'next/server';
+import { NextRequest } from 'next/server';
 
 // Create the internationalization middleware
 const intlMiddleware = createMiddleware({
@@ -12,6 +12,18 @@ const intlMiddleware = createMiddleware({
 
 export default function middleware(request: NextRequest) {
   const { method, url, headers } = request;
+  const { pathname } = request.nextUrl;
+
+  // Explicit bypass for infrastructure routes to avoid locale redirects/interception
+  if (
+    pathname.startsWith('/stats') ||
+    pathname.startsWith('/errors') ||
+    pathname.startsWith('/health') ||
+    pathname.includes('/api/og') ||
+    pathname.includes('opengraph-image')
+  ) {
+    return;
+  }
 
   // Build header object for logging
   const headerObj: Record<string, string> = {};
@@ -30,11 +42,8 @@ export default function middleware(request: NextRequest) {
     // 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; // Don't rewrite hostname yet as it breaks internal fetches in dev
-    // urlObj.port = ''; // DON'T clear internal port (3000) anymore
 
     effectiveRequest = new NextRequest(urlObj, {
       headers: request.headers,
@@ -43,13 +52,35 @@ export default function middleware(request: NextRequest) {
     });
 
     console.log(
-      `🛡️ Middleware: Fixed internal URL leak: ${url} -> ${urlObj.toString()} | Proto: ${proto} | Host: ${hostHeader}`,
+      `🛡️ Proxy: Fixed internal URL leak: ${url} -> ${urlObj.toString()} | Proto: ${proto} | Host: ${hostHeader}`,
     );
   }
 
   try {
     // Apply internationalization middleware
     const response = intlMiddleware(effectiveRequest);
+
+    // Upgrade 307 (Temporary Redirect) to 308 (Permanent Redirect)
+    // This improves compatibility with scanners (Website Carbon, PageSpeed) and SEO.
+    if (response.status === 307) {
+      const location = response.headers.get('Location');
+      if (location) {
+        const url = new URL(location, request.url);
+        return Response.redirect(url, 308);
+      }
+    }
+
+    // Allow iframe embedding from recorder domains
+    const referer = headers.get('referer') || '';
+    const recorderDomains = ['recorder.localhost', 'recorder.mintel.me'];
+    const isRecorderRequest = recorderDomains.some((domain) => referer.includes(domain));
+
+    if (isRecorderRequest) {
+      response.headers.delete('x-frame-options');
+      response.headers.delete('content-security-policy');
+      response.headers.set('Access-Control-Allow-Origin', '*');
+    }
+
     return response;
   } catch (error) {
     console.error(
@@ -61,6 +92,7 @@ export default function middleware(request: NextRequest) {
 }
 
 export const config = {
-  // Match only internationalized pathnames
-  matcher: ['/((?!api|_next|_vercel|stats|errors|health|.*\\..*).*)', '/', '/(de|en)/:path*'],
+  matcher: [
+    '/((?!api|_next/static|_next/image|favicon.ico|.*\\.(?:svg|png|jpg|jpeg|gif|webp|pdf|txt|vcf)$).*)',
+  ],
 };

mintel-feedback-vendor

@@ -1 +0,0 @@
-../at-mintel/packages/next-feedback

next-env.d.ts

@@ -1,6 +1,6 @@
 /// <reference types="next" />
 /// <reference types="next/image-types/global" />
-import './.next/types/routes.d.ts';
+import "./.next/dev/types/routes.d.ts";
 
 // NOTE: This file should not be edited
 // see https://nextjs.org/docs/app/api-reference/config/typescript for more information.

next.config.mjs

@@ -1,16 +1,19 @@
-import createNextIntlPlugin from 'next-intl/plugin';
-import { withSentryConfig } from '@sentry/nextjs';
-import path from 'path';
-import { fileURLToPath } from 'url';
+import withMintelConfig from '@mintel/next-config';
 
-const __dirname = path.dirname(fileURLToPath(import.meta.url));
-
-const withNextIntl = createNextIntlPlugin();
+console.log('🚀 NEXT CONFIG LOADED FROM:', process.cwd());
 
 /** @type {import('next').NextConfig} */
 const nextConfig = {
+  onDemandEntries: {
+    // Make sure entries are not disposed too quickly
+    maxInactiveAge: 60 * 1000,
+  },
+  logging: {
+    fetches: {
+      fullUrl: true,
+    },
+  },
   output: 'standalone',
-  outputFileTracingRoot: path.join(__dirname, '..'),
   async redirects() {
     return [
       // Blog redirects
@@ -327,6 +330,15 @@ const nextConfig = {
     contentSecurityPolicy: "default-src 'self'; script-src 'none'; sandbox;",
   },
   async rewrites() {
+    const umamiUrl =
+      process.env.UMAMI_API_ENDPOINT ||
+      process.env.UMAMI_SCRIPT_URL ||
+      process.env.NEXT_PUBLIC_UMAMI_SCRIPT_URL ||
+      'https://analytics.infra.mintel.me';
+    const glitchtipUrl = process.env.SENTRY_DSN
+      ? 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 [
@@ -338,20 +350,4 @@ const nextConfig = {
   },
 };
 
-const nextIntlConfig = withNextIntl(nextConfig);
-
-// GlitchTip is Sentry-compatible; we use the Sentry Next.js SDK.
-// Source map upload is optional; we keep this config minimal.
-export default withSentryConfig(
-  nextIntlConfig,
-  {
-    silent: !process.env.CI,
-    // Keep bundle size down; remove SDK debug logging.
-    treeshake: { removeDebugLogging: true },
-  },
-  // Sentry Webpack plugin options (not needed unless you upload sourcemaps)
-  {
-    // no sourcemap upload by default
-    authToken: undefined,
-  }
-);
+export default withMintelConfig(nextConfig);

package.json

@@ -1,23 +1,25 @@
 {
+  "name": "klz-cables-nextjs",
+  "type": "module",
+  "private": true,
   "dependencies": {
-    "@directus/sdk": "^18.0.3",
-    "@mintel/mail": "^1.6.0",
-    "@react-email/components": "^1.0.6",
+    "@directus/sdk": "^21.0.0",
+    "@medv/finder": "^4.0.2",
+    "@mintel/mail": "1.8.3",
+    "@mintel/next-config": "1.8.3",
+    "@mintel/next-feedback": "1.8.10",
+    "@mintel/next-utils": "^1.7.15",
+    "@react-email/components": "^1.0.7",
     "@react-pdf/renderer": "^4.3.2",
     "@sentry/nextjs": "^10.38.0",
-    "@swc/helpers": "^0.5.18",
-    "@types/cheerio": "^0.22.35",
-    "@types/leaflet": "^1.9.21",
-    "axios": "^1.13.2",
-    "cheerio": "^1.1.2",
+    "axios": "^1.13.5",
     "clsx": "^2.1.1",
-    "framer-motion": "^12.27.1",
+    "framer-motion": "^12.34.0",
     "gray-matter": "^4.0.3",
-    "@mintel/next-feedback": "^1.6.0",
     "i18next": "^25.7.3",
+    "import-in-the-middle": "^1.11.0",
     "jsdom": "^27.4.0",
     "leaflet": "^1.9.4",
-    "lucide-react": "^0.562.0",
     "next": "16.1.6",
     "next-i18next": "^15.4.3",
     "next-intl": "^4.8.2",
@@ -30,45 +32,54 @@
     "react-dom": "^19.2.4",
     "react-email": "^5.2.5",
     "react-leaflet": "^4.2.1",
+    "require-in-the-middle": "^8.0.1",
     "resend": "^3.5.0",
     "schema-dts": "^1.1.5",
     "sharp": "^0.34.5",
     "svg-to-pdfkit": "^0.1.8",
     "tailwind-merge": "^3.4.0",
     "xlsx": "^0.18.5",
-    "zod": "^4.3.6",
-    "require-in-the-middle": "^8.0.1",
-    "import-in-the-middle": "^1.11.0"
+    "zod": "3.25.76"
   },
   "devDependencies": {
     "@commitlint/cli": "^20.4.0",
     "@commitlint/config-conventional": "^20.4.0",
     "@lhci/cli": "^0.15.1",
+    "@mintel/eslint-config": "1.8.3",
+    "@mintel/tsconfig": "1.8.3",
+    "@remotion/cli": "^4.0.421",
+    "@remotion/google-fonts": "^4.0.421",
+    "@remotion/player": "^4.0.421",
+    "@remotion/renderer": "^4.0.421",
     "@tailwindcss/cli": "^4.1.18",
     "@tailwindcss/postcss": "^4.1.18",
+    "@types/geojson": "^7946.0.16",
+    "@types/leaflet": "^1.9.21",
     "@types/node": "^22.19.3",
     "@types/nodemailer": "^7.0.5",
     "@types/react": "^19.2.7",
     "@types/react-dom": "^19.2.3",
     "@types/sharp": "^0.31.1",
+    "@vitejs/plugin-react": "^5.1.4",
     "@vitest/ui": "^4.0.16",
     "autoprefixer": "^10.4.23",
     "eslint": "^9.18.0",
-    "@mintel/eslint-config": "^1.6.0",
+    "happy-dom": "^20.6.1",
     "husky": "^9.1.7",
     "lint-staged": "^16.2.7",
+    "lucide-react": "^0.563.0",
     "postcss": "^8.5.6",
     "prettier": "^3.8.1",
+    "remotion": "^4.0.421",
     "sass": "^1.97.1",
     "tailwindcss": "^4.1.18",
     "tsx": "^4.21.0",
     "typescript": "^5.7.2",
     "vitest": "^4.0.16"
   },
-  "name": "klz-cables-nextjs",
-  "private": true,
   "scripts": {
-    "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 gatekeeper",
+    "dev": "docker network create infra 2>/dev/null || true && echo '\\n🚀 Development Environment Starting...\\n\\n📱 App (Next.js): http://localhost:3000\\n📱 App (Traefik): 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 --build klz-app klz-cms klz-db klz-gatekeeper",
+    "dev:infra": "docker network create infra 2>/dev/null || true && docker-compose up -d klz-cms klz-db klz-gatekeeper",
     "dev:local": "next dev",
     "build": "next build",
     "start": "next start",
@@ -76,11 +87,12 @@
     "typecheck": "tsc --noEmit",
     "test": "vitest run --passWithNoTests",
     "test:og": "vitest run tests/og-image.test.ts",
-    "cms:branding:local": "DIRECTUS_URL=http://localhost:8055 npx tsx --env-file=.env scripts/setup-directus-branding.ts",
+    "check:og": "tsx scripts/check-og-images.ts",
+    "cms:branding:local": "DIRECTUS_URL=${DIRECTUS_URL:-http://cms.klz.localhost} npx tsx --env-file=.env scripts/setup-directus-branding.ts",
     "cms:branding:testing": "DIRECTUS_URL=https://cms.testing.klz-cables.com npx tsx --env-file=.env scripts/setup-directus-branding.ts",
     "cms:branding:staging": "DIRECTUS_URL=https://cms.staging.klz-cables.com npx tsx --env-file=.env scripts/setup-directus-branding.ts",
     "cms:branding:prod": "DIRECTUS_URL=https://cms.klz-cables.com npx tsx --env-file=.env scripts/setup-directus-branding.ts",
-    "cms:bootstrap": "npm run cms:branding:local",
+    "cms:bootstrap": "pnpm run cms:branding:local",
     "pdf:datasheets": "tsx ./scripts/generate-pdf-datasheets.ts",
     "pdf:datasheets:legacy": "tsx ./scripts/generate-pdf-datasheets-pdf-lib.ts",
     "cms:schema:snapshot": "./scripts/cms-snapshot.sh",
@@ -96,7 +108,23 @@
     "cms:push:prod:DANGER": "./scripts/sync-directus.sh push 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"
+    "remotion:render": "remotion render WebsiteVideo remotion/index.ts out.mp4",
+    "remotion:preview": "remotion preview remotion/index.ts",
+    "prepare": "husky",
+    "preinstall": "npx only-allow pnpm"
   },
-  "version": "1.0.0"
+  "version": "1.0.0",
+  "pnpm": {
+    "overrides": {
+      "next": "16.1.6"
+    }
+  },
+  "peerDependencies": {
+    "@remotion/cli": "^4.0.421",
+    "@remotion/google-fonts": "^4.0.421",
+    "@remotion/player": "^4.0.421",
+    "@remotion/renderer": "^4.0.421",
+    "lucide-react": "^0.563.0",
+    "remotion": "^4.0.421"
+  }
 }

postcss.config.cjs

@@ -1,3 +1,4 @@
+/* eslint-disable no-undef */
 module.exports = {
   plugins: {
     '@tailwindcss/postcss': {},

remotion/Root.tsx

@@ -0,0 +1,32 @@
+import React from 'react';
+import { Composition } from 'remotion';
+import { WebsiteVideo } from './WebsiteVideo';
+import sessionData from './session.json';
+import { RecordingSession } from '../types/record-mode';
+
+const FPS = 60;
+
+export const RemotionRoot: React.FC = () => {
+    // Calculate duration based on last event + padding
+    const durationMs = (sessionData as unknown as RecordingSession).events.reduce((max, e) => {
+        return Math.max(max, e.timestamp + (e.duration || 1000));
+    }, 0);
+    const durationInFrames = Math.ceil((durationMs + 2000) / 1000 * FPS);
+
+    return (
+        <>
+            <Composition
+                id="WebsiteVideo"
+                component={WebsiteVideo}
+                durationInFrames={durationInFrames}
+                fps={FPS}
+                width={1920}
+                height={1080}
+                defaultProps={{
+                    session: sessionData as unknown as RecordingSession,
+                    siteUrl: 'http://localhost:3000'
+                }}
+            />
+        </>
+    );
+};

remotion/WebsiteVideo.tsx

@@ -0,0 +1,127 @@
+import React, { useMemo } from 'react';
+import {
+  AbsoluteFill,
+  useVideoConfig,
+  useCurrentFrame,
+  interpolate,
+  spring,
+  Easing,
+} from 'remotion';
+import { RecordingSession, RecordEvent } from '../types/record-mode';
+
+export const WebsiteVideo: React.FC<{
+  session: RecordingSession | null;
+  siteUrl: string;
+}> = ({ session, siteUrl }) => {
+  const { fps, width, height, durationInFrames } = useVideoConfig();
+  const frame = useCurrentFrame();
+
+  const sortedEvents = useMemo(() => {
+    if (!session) return [];
+    return [...session.events].sort((a, b) => a.timestamp - b.timestamp);
+  }, [session]);
+
+  if (!session || !session.events.length) {
+    return (
+      <AbsoluteFill
+        style={{
+          backgroundColor: 'black',
+          color: 'white',
+          justifyContent: 'center',
+          alignItems: 'center',
+        }}
+      >
+        No session data found.
+      </AbsoluteFill>
+    );
+  }
+
+  const elapsedTimeMs = (frame / fps) * 1000;
+
+  // --- Interpolation Logic ---
+
+  // 1. Find the current window (between which two events are we?)
+  const nextEventIndex = sortedEvents.findIndex((e) => e.timestamp > elapsedTimeMs);
+  let currentEventIndex;
+
+  if (nextEventIndex === -1) {
+    // We are past the last event, stay at the end
+    currentEventIndex = sortedEvents.length - 1;
+  } else {
+    currentEventIndex = Math.max(0, nextEventIndex - 1);
+  }
+
+  const currentEvent = sortedEvents[currentEventIndex];
+  // If there is no next event, we just stay at current (next=current)
+  const nextEvent = nextEventIndex !== -1 ? sortedEvents[nextEventIndex] : currentEvent;
+
+  // 2. Calculate Progress between events
+  const gap = nextEvent.timestamp - currentEvent.timestamp;
+  const progress = gap > 0 ? (elapsedTimeMs - currentEvent.timestamp) / gap : 1;
+  const easedProgress = Easing.cubic(Math.min(Math.max(progress, 0), 1));
+
+  // 3. Calculate Cursor Position from Rects
+  const getCenter = (event: RecordEvent) => {
+    if (event.rect) {
+      return {
+        x: event.rect.x + event.rect.width / 2,
+        y: event.rect.y + event.rect.height / 2,
+      };
+    }
+    return { x: width / 2, y: height / 2 };
+  };
+
+  const p1 = getCenter(currentEvent);
+  const p2 = getCenter(nextEvent);
+
+  const cursorX = interpolate(easedProgress, [0, 1], [p1.x, p2.x]);
+  const cursorY = interpolate(easedProgress, [0, 1], [p1.y, p2.y]);
+
+  // 4. Zoom & Blur
+  const zoom = interpolate(easedProgress, [0, 1], [currentEvent.zoom || 1, nextEvent.zoom || 1]);
+  const isBlurry = currentEvent.motionBlur || nextEvent.motionBlur;
+
+  return (
+    <AbsoluteFill style={{ backgroundColor: '#000' }}>
+      <div
+        style={{
+          width: '100%',
+          height: '100%',
+          position: 'relative',
+          transform: `scale(${zoom})`,
+          transformOrigin: `${cursorX}px ${cursorY}px`,
+          filter: isBlurry ? 'blur(8px)' : 'none',
+          transition: 'filter 0.1s ease-out',
+        }}
+      >
+        <iframe
+          src={siteUrl}
+          style={{ width: '100%', height: '100%', border: 'none' }}
+          title="Website"
+        />
+      </div>
+
+      {/* Visual Cursor */}
+      <div
+        style={{
+          position: 'absolute',
+          left: cursorX,
+          top: cursorY,
+          width: 34,
+          height: 34,
+          backgroundColor: 'white',
+          borderRadius: '50%',
+          border: '3px solid black',
+          boxShadow: '0 4px 15px rgba(0,0,0,0.4)',
+          transform: 'translate(-50%, -50%)',
+          display: 'flex',
+          alignItems: 'center',
+          justifyContent: 'center',
+          zIndex: 100,
+        }}
+      >
+        <div style={{ width: 12, height: 12, backgroundColor: '#3b82f6', borderRadius: '50%' }} />
+      </div>
+    </AbsoluteFill>
+  );
+};