Merge branch 'feature/excel'

.gitea/workflows/ci.yml

@@ -1,51 +0,0 @@
-name: CI - Lint, Typecheck & Test
-
-on:
-  pull_request:
-
-concurrency:
-  group: deploy-pipeline
-  cancel-in-progress: true
-
-jobs:
-  quality-assurance:
-    runs-on: docker
-    steps:
-      - name: Checkout repository
-        uses: actions/checkout@v4
-
-      - name: Setup pnpm
-        uses: pnpm/action-setup@v3
-        with:
-          version: 10
-          run_install: false
-
-      - name: Setup Node.js
-        uses: actions/setup-node@v4
-        with:
-          node-version: 20
-
-      - name: 🔐 Configure Private Registry
-        run: |
-          echo "@mintel:registry=https://git.infra.mintel.me/api/packages/mmintel/npm" > .npmrc
-          echo "//git.infra.mintel.me/api/packages/mmintel/npm/:_authToken=${{ secrets.NPM_TOKEN }}" >> .npmrc
-
-      - name: Install dependencies
-        run: pnpm install --no-frozen-lockfile
-        env:
-          NPM_TOKEN: ${{ secrets.NPM_TOKEN }}
-
-      - name: 🧪 QA Checks
-        env:
-          TURBO_TELEMETRY_DISABLED: "1"
-        run: npx turbo run check:mdx lint typecheck test --cache-dir=".turbo"
-
-      - name: 🏗️ Build
-        run: pnpm build
-
-      - name: ♿ Accessibility Check
-        run: pnpm start-server-and-test start http://localhost:3000 "pnpm check:a11y http://localhost:3000"
-
-      - name: ♿ WCAG Sitemap Audit
-        run: pnpm start-server-and-test start http://localhost:3000 "pnpm run check:wcag http://localhost:3000"
-# monitor trigger

.gitea/workflows/deploy.yml

@@ -37,6 +37,8 @@ jobs:
       next_public_url:  ${{ steps.determine.outputs.next_public_url }}
       project_name:     ${{ steps.determine.outputs.project_name }}
       short_sha:        ${{ steps.determine.outputs.short_sha }}
+      slug:             ${{ steps.determine.outputs.slug }}
+      gatekeeper_host:  ${{ steps.determine.outputs.gatekeeper_host }}
     container:
       image: catthehacker/ubuntu:act-latest
     steps:
@@ -83,7 +85,7 @@ jobs:
             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"
+            TRAEFIK_HOST="${SLUG}.branch.klz-cables.com"
           fi
 
           # Standardize Traefik Rule (escaped backticks for Traefik v3)
@@ -113,6 +115,7 @@ jobs:
               echo "project_name=$PRJ-$TARGET"
             fi
             echo "short_sha=$SHORT_SHA"
+            echo "slug=$SLUG"
           } >> "$GITHUB_OUTPUT"
 
           # ⏳ Wait for Upstream Packages/Images if Tagged
@@ -156,6 +159,8 @@ jobs:
     needs: prepare
     if: needs.prepare.outputs.target != 'skip'
     runs-on: docker
+    env:
+      PUPPETEER_EXECUTABLE_PATH: /usr/bin/chromium
     container:
       image: catthehacker/ubuntu:act-latest
     steps:
@@ -181,12 +186,12 @@ jobs:
 
       - name: 🔒 Security Audit
         run: pnpm audit --audit-level high || echo "⚠️ Audit found vulnerabilities (non-blocking)"
+
       - name: 🧪 QA Checks
         if: github.event.inputs.skip_checks != 'true'
         env:
           TURBO_TELEMETRY_DISABLED: "1"
         run: npx turbo run lint typecheck test --cache-dir=".turbo"
-
   # ──────────────────────────────────────────────────────────────────────────────
   # JOB 3: Build & Push
   # ──────────────────────────────────────────────────────────────────────────────
@@ -203,7 +208,8 @@ jobs:
       - 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
+        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:
@@ -219,7 +225,7 @@ jobs:
             NPM_TOKEN=${{ secrets.NPM_TOKEN }}
           tags: registry.infra.mintel.me/mintel/klz-2026:${{ needs.prepare.outputs.image_tag }}
           secrets: |
-            "NPM_TOKEN=${{ secrets.NPM_TOKEN }}"
+            NPM_TOKEN=${{ secrets.NPM_TOKEN }}
 
   # ──────────────────────────────────────────────────────────────────────────────
   # JOB 4: Deploy
@@ -237,6 +243,7 @@ jobs:
       NEXT_PUBLIC_BASE_URL: ${{ needs.prepare.outputs.next_public_url }}
       TRAEFIK_HOST:         ${{ needs.prepare.outputs.traefik_host }}
       GATEKEEPER_HOST:      ${{ needs.prepare.outputs.gatekeeper_host }}
+      SLUG:                 ${{ needs.prepare.outputs.slug }}
       
       # Secrets mapping (Payload CMS)
       PAYLOAD_SECRET:          ${{ secrets.PAYLOAD_SECRET || vars.PAYLOAD_SECRET || 'you-need-to-set-a-payload-secret' }}
@@ -261,6 +268,15 @@ jobs:
       # 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' }}
+      
+      # Search & AI
+      OPENROUTER_API_KEY:  ${{ secrets.OPENROUTER_API_KEY || vars.OPENROUTER_API_KEY }}
+      QDRANT_URL:          ${{ secrets.QDRANT_URL || vars.QDRANT_URL || 'http://klz-qdrant:6333' }}
+      QDRANT_API_KEY:      ${{ secrets.QDRANT_API_KEY || vars.QDRANT_API_KEY }}
+      REDIS_URL:           ${{ secrets.REDIS_URL || vars.REDIS_URL || 'redis://klz-redis:6379' }}
+      # Container Registry (standalone)
+      REGISTRY_USER:       ${{ secrets.REGISTRY_USER }}
+      REGISTRY_PASS:       ${{ secrets.REGISTRY_PASS }}
     steps:
       - name: Checkout repository
         uses: actions/checkout@v4
@@ -319,6 +335,12 @@ jobs:
             echo "UMAMI_WEBSITE_ID=$UMAMI_WEBSITE_ID"
             echo "UMAMI_API_ENDPOINT=$UMAMI_API_ENDPOINT"
             echo ""
+            echo "# Search & AI"
+            echo "OPENROUTER_API_KEY=$OPENROUTER_API_KEY"
+            echo "QDRANT_URL=$QDRANT_URL"
+            echo "QDRANT_API_KEY=$QDRANT_API_KEY"
+            echo "REDIS_URL=$REDIS_URL"
+            echo ""
             echo "TARGET=$TARGET"
             echo "SENTRY_ENVIRONMENT=$TARGET"
             echo "PROJECT_NAME=$PROJECT_NAME"
@@ -338,9 +360,39 @@ jobs:
           cat .env.deploy
           echo "----------------------------"
 
+      - name: 🔐 Registry Auth
+        id: auth
+        run: |
+          echo "Testing available secrets against git.infra.mintel.me Docker registry..."
+          TOKENS="${{ secrets.GITEA_PAT }} ${{ secrets.MINTEL_PRIVATE_TOKEN }} ${{ secrets.NPM_TOKEN }}"
+          USERS="${{ github.repository_owner }} ${{ github.actor }} marcmintel mintel mmintel"
+
+          VALID_TOKEN=""
+          VALID_USER=""
+          for T in $TOKENS; do
+            if [ -n "$T" ]; then
+              for U in $USERS; do
+                if [ -n "$U" ]; then
+                  if echo "$T" | docker login git.infra.mintel.me -u "$U" --password-stdin > /dev/null 2>&1; then
+                    VALID_TOKEN="$T"
+                    VALID_USER="$U"
+                    break 2
+                  fi
+                fi
+              done
+            fi
+          done
+          if [ -z "$VALID_TOKEN" ]; then echo "❌ All tokens failed to authenticate!"; exit 1; fi
+          echo "token=$VALID_TOKEN" >> $GITHUB_OUTPUT
+          echo "user=$VALID_USER" >> $GITHUB_OUTPUT
+
       - name: 🚀 SSH Deploy
         shell: bash
         env:
+          TARGET:           ${{ needs.prepare.outputs.target }}
+          SLUG:             ${{ needs.prepare.outputs.slug }}
+          IMAGE_TAG:        ${{ needs.prepare.outputs.image_tag }}
+          PROJECT_NAME:     ${{ needs.prepare.outputs.project_name }}
           ENV_FILE:         ${{ needs.prepare.outputs.env_file }}
         run: |
           mkdir -p ~/.ssh
@@ -348,6 +400,9 @@ jobs:
           chmod 600 ~/.ssh/id_ed25519
           ssh-keyscan -H alpha.mintel.me >> ~/.ssh/known_hosts 2>/dev/null
 
+          # Determine deployment paths
+          echo "Preparing deployment for $TARGET..."
+
           # Transfer and Restart
           if [[ "$TARGET" == "production" ]]; then
             SITE_DIR="/home/deploy/sites/klz-cables.com"
@@ -356,63 +411,19 @@ jobs:
           elif [[ "$TARGET" == "staging" ]]; then
             SITE_DIR="/home/deploy/sites/staging.klz-cables.com"
           else
-            SITE_DIR="/home/deploy/sites/branch.klz-cables.com/${SLUG:-unknown}"
+            SITE_DIR="/home/deploy/sites/branch.klz-cables.com/$SLUG"
           fi
+          # Transfer files
           ssh root@alpha.mintel.me "mkdir -p $SITE_DIR"
-          
           scp .env.deploy root@alpha.mintel.me:$SITE_DIR/$ENV_FILE
           scp docker-compose.yml root@alpha.mintel.me:$SITE_DIR/docker-compose.yml
           
-          ssh root@alpha.mintel.me "cd $SITE_DIR && echo '${{ secrets.REGISTRY_PASS }}' | docker login registry.infra.mintel.me -u '${{ secrets.REGISTRY_USER }}' --password-stdin"
+          # Execute remote commands — alpha is pre-logged into registry.infra.mintel.me
-          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 pull && docker compose -p '${{ needs.prepare.outputs.project_name }}' --env-file $ENV_FILE up -d --remove-orphans"
-          ssh root@alpha.mintel.me "cd $SITE_DIR && docker compose -p '${{ needs.prepare.outputs.project_name }}' --env-file '$ENV_FILE' up -d --remove-orphans"
-          
-          # Sanitize Payload Migrations: Replace 'dev' push entries with proper migration names.
-          # Without this, Payload prompts interactively for confirmation and blocks forever in Docker.
-          DB_CONTAINER="${{ needs.prepare.outputs.project_name }}-klz-db-1"
-          echo "⏳ Waiting for database container to be ready..."
-          for i in $(seq 1 15); do
-            if ssh root@alpha.mintel.me "docker exec $DB_CONTAINER pg_isready -U payload -q 2>/dev/null"; then
-              echo "✅ Database is ready."
-              break
-            fi
-            echo "   Attempt $i/15..."
-            sleep 2
-          done
-          
-          echo "🔧 Sanitizing payload_migrations table (if exists)..."
-          REMOTE_DB_USER=$(ssh root@alpha.mintel.me "grep -h '^PAYLOAD_DB_USER=' $SITE_DIR/.env* 2>/dev/null | tail -1 | cut -d= -f2" || echo "payload")
-          REMOTE_DB_NAME=$(ssh root@alpha.mintel.me "grep -h '^PAYLOAD_DB_NAME=' $SITE_DIR/.env* 2>/dev/null | tail -1 | cut -d= -f2" || echo "payload")
-          REMOTE_DB_USER="${REMOTE_DB_USER:-payload}"
-          REMOTE_DB_NAME="${REMOTE_DB_NAME:-payload}"
-
-          # Auto-detect migrations from src/migrations/*.ts
-          BATCH=1
-          VALUES=""
-          for f in $(ls src/migrations/*.ts 2>/dev/null | sort); do
-            NAME=$(basename "$f" .ts)
-            [ -n "$VALUES" ] && VALUES="$VALUES,"
-            VALUES="$VALUES ('$NAME', $BATCH)"
-            ((BATCH++))
-          done
-
-          if [ -n "$VALUES" ]; then
-            ssh root@alpha.mintel.me "docker exec $DB_CONTAINER psql -U $REMOTE_DB_USER -d $REMOTE_DB_NAME -c \"
-              DO \\\$\\\$ BEGIN
-                DELETE FROM payload_migrations WHERE batch = -1;
-                INSERT INTO payload_migrations (name, batch)
-                SELECT name, batch FROM (VALUES $VALUES) AS v(name, batch)
-                WHERE NOT EXISTS (SELECT 1 FROM payload_migrations pm WHERE pm.name = v.name);
-              EXCEPTION WHEN undefined_table THEN
-                RAISE NOTICE 'payload_migrations table does not exist yet — skipping sanitization';
-              END \\\$\\\$;
-            \"" || echo "⚠️  Migration sanitization skipped (table may not exist yet)"
-          fi
           
           # Restart app to pick up clean migration state
           APP_CONTAINER="${{ needs.prepare.outputs.project_name }}-klz-app-1"
           ssh root@alpha.mintel.me "docker restart $APP_CONTAINER"
-          
           ssh root@alpha.mintel.me "docker system prune -f --filter 'until=24h'"
 
       - name: 🧹 Post-Deploy Cleanup (Runner)
@@ -425,7 +436,7 @@ jobs:
   post_deploy_checks:
     name: 🧪 Post-Deploy Verification
     needs: [prepare, deploy]
-    if: needs.deploy.result == 'success' && needs.prepare.outputs.target != 'branch'
+    if: needs.deploy.result == 'success' && true
     runs-on: docker
     container:
       image: catthehacker/ubuntu:act-latest
@@ -571,11 +582,16 @@ jobs:
             STATUS_LINE="All checks passed"
           fi
 
-          TITLE="$EMOJI klz-cables.com $VERSION → $TARGET"
+          TITLE="$EMOJI klz-cables.com $VERSION -> $TARGET"
           MESSAGE="$STATUS_LINE
           Deploy: $DEPLOY | Smoke: $SMOKE | Perf: $PERF
           $URL"
 
+          if [[ -z "${{ secrets.GOTIFY_URL }}" || -z "${{ secrets.GOTIFY_TOKEN }}" ]]; then
+            echo "⚠️ Gotify credentials missing, skipping notification."
+            exit 0
+          fi
+
           curl -s -k -X POST "${{ secrets.GOTIFY_URL }}/message?token=${{ secrets.GOTIFY_TOKEN }}" \
             -F "title=$TITLE" \
             -F "message=$MESSAGE" \

.gitea/workflows/qa.yml

@@ -1,8 +1,6 @@
 name: Nightly QA
 
 on:
-  push:
-    branches: [main]
   schedule:
     - cron: '0 3 * * *'
   workflow_dispatch:
@@ -200,7 +198,7 @@ jobs:
   notify:
     name: 🔔 Notify
     needs: [static, a11y, lighthouse, links]
-    if: always()
+    if: failure()
     runs-on: docker
     container:
       image: catthehacker/ubuntu:act-latest
@@ -227,6 +225,11 @@ jobs:
           MESSAGE="Static: $STATIC | A11y: $A11Y | Lighthouse: $LIGHTHOUSE | Links: $LINKS
           ${{ env.TARGET_URL }}"
 
+          if [[ -z "${{ secrets.GOTIFY_URL }}" || -z "${{ secrets.GOTIFY_TOKEN }}" ]]; then
+            echo "⚠️ Gotify credentials missing, skipping notification."
+            exit 0
+          fi
+
           curl -s -k -X POST "${{ secrets.GOTIFY_URL }}/message?token=${{ secrets.GOTIFY_TOKEN }}" \
             -F "title=$TITLE" \
             -F "message=$MESSAGE" \

Dockerfile

@@ -1,18 +1,16 @@
 # Stage 1: Builder
-FROM registry.infra.mintel.me/mintel/nextjs:v1.8.20 AS base
+FROM git.infra.mintel.me/mmintel/nextjs:latest AS base
 WORKDIR /app
 
 # 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
 
 # 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
@@ -52,14 +50,9 @@ ENV UV_THREADPOOL_SIZE=3
 RUN pnpm build
 
 # Stage 2: Runner
-FROM registry.infra.mintel.me/mintel/runtime:v1.8.20 AS runner
+FROM git.infra.mintel.me/mmintel/runtime:latest AS runner
 WORKDIR /app
 
-# Create nextjs user and group (standardized in runtime image but ensuring local ownership)
-USER root
-RUN chown -R nextjs:nodejs /app
-USER nextjs
-
 ENV HOSTNAME="0.0.0.0"
 ENV PORT=3000
 ENV NODE_ENV=production
@@ -71,3 +64,4 @@ COPY --from=builder --chown=nextjs:nodejs /app/.next/static ./.next/static
 COPY --from=builder --chown=nextjs:nodejs /app/.next/cache ./.next/cache
 
 CMD ["node", "server.js"]
+

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

@@ -2,7 +2,7 @@ import { notFound, redirect } from 'next/navigation';
 import { Container, Badge, Heading } from '@/components/ui';
 import { getTranslations, setRequestLocale } from 'next-intl/server';
 import { Metadata } from 'next';
-import { getPageBySlug, getAllPages } from '@/lib/pages';
+import { getPageBySlug } from '@/lib/pages';
 import { mapSlugToFileSlug, mapFileSlugToTranslated } from '@/lib/slugs';
 import PayloadRichText from '@/components/PayloadRichText';
 import { SITE_URL } from '@/lib/schema';

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

@@ -134,13 +134,13 @@ export default async function BlogPost({ params }: BlogPostProps) {
                   <span>{getReadingTime(rawTextContent)} min read</span>
                   {(new Date(post.frontmatter.date) > new Date() ||
                     post.frontmatter.public === false) && (
-                      <>
+                    <>
-                        <span className="w-1 h-1 bg-white/30 rounded-full" />
+                      <span className="w-1 h-1 bg-white/30 rounded-full" />
-                        <span className="px-2 py-0.5 border border-white/40 text-white/80 rounded uppercase tracking-widest text-[10px] md:text-xs font-bold">
+                      <span className="px-2 py-0.5 border border-white/40 text-white/80 rounded uppercase tracking-widest text-[10px] md:text-xs font-bold">
-                          Draft Preview
+                        Draft Preview
-                        </span>
+                      </span>
-                      </>
+                    </>
-                    )}
+                  )}
                 </div>
               </div>
             </div>
@@ -171,13 +171,13 @@ export default async function BlogPost({ params }: BlogPostProps) {
               <span>{getReadingTime(rawTextContent)} min read</span>
               {(new Date(post.frontmatter.date) > new Date() ||
                 post.frontmatter.public === false) && (
-                  <>
+                <>
-                    <span className="w-1 h-1 bg-neutral-300 rounded-full" />
+                  <span className="w-1 h-1 bg-neutral-300 rounded-full" />
-                    <span className="px-2 py-0.5 border border-orange-500/50 text-orange-600 rounded uppercase tracking-widest text-[10px] md:text-xs font-bold">
+                  <span className="px-2 py-0.5 border border-orange-500/50 text-orange-600 rounded uppercase tracking-widest text-[10px] md:text-xs font-bold">
-                      Draft Preview
+                    Draft Preview
-                    </span>
+                  </span>
-                  </>
+                </>
-                )}
+              )}
             </div>
           </div>
         </header>

app/[locale]/blog/page.tsx

@@ -14,7 +14,7 @@ interface BlogIndexProps {
   }>;
 }
 
-export async function generateMetadata({ params }: BlogIndexProps) {
+export async function generateMetadata({ params }: BlogIndexProps): Promise<Metadata> {
   const { locale } = await params;
   const t = await getTranslations({ locale, namespace: 'Blog.meta' });
   return {

app/[locale]/contact/page.tsx

@@ -5,7 +5,7 @@ import { Container, Heading, Section } from '@/components/ui';
 import { Metadata } from 'next';
 import { getTranslations, setRequestLocale } from 'next-intl/server';
 import { SITE_URL } from '@/lib/schema';
-import { getOGImageMetadata } from '@/lib/metadata';
+
 import { Suspense } from 'react';
 import ContactMap from '@/components/ContactMap';
 import ObfuscatedEmail from '@/components/ObfuscatedEmail';

app/[locale]/layout.tsx

@@ -7,10 +7,8 @@ import AnalyticsShell from '@/components/analytics/AnalyticsShell';
 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 FeedbackClientWrapper from '@/components/FeedbackClientWrapper';
 import { setRequestLocale } from 'next-intl/server';
 import { Inter } from 'next/font/google';
@@ -61,6 +59,7 @@ export const viewport: Viewport = {
   themeColor: '#001a4d',
 };
 
+import AutoBrochureModal from '@/components/AutoBrochureModal';
 export default async function Layout(props: {
   children: React.ReactNode;
   params: Promise<{ locale: string }>;
@@ -77,7 +76,7 @@ export default async function Layout(props: {
   let messages: Record<string, any> = {};
   try {
     messages = await getMessages();
-  } catch (error) {
+  } catch {
     messages = {};
   }
 
@@ -91,6 +90,7 @@ export default async function Layout(props: {
     'Home',
     'Error',
     'StandardPage',
+    'Brochure',
   ];
   const clientMessages: Record<string, any> = {};
   for (const key of clientKeys) {
@@ -160,6 +160,8 @@ export default async function Layout(props: {
 
           <AnalyticsShell />
           <FeedbackClientWrapper feedbackEnabled={feedbackEnabled} />
+
+          <AutoBrochureModal />
         </NextIntlClientProvider>
       </body>
     </html>

app/[locale]/not-found.tsx

@@ -72,7 +72,7 @@ export default async function NotFound() {
           }
           suggestedUrl = '/' + pathParts.join('/');
         }
-      } catch (e) {
+      } catch {
         // Ignore Payload errors in 404
       }
     }

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

@@ -1,12 +1,11 @@
 import JsonLd from '@/components/JsonLd';
 import { SITE_URL } from '@/lib/schema';
 import ProductSidebar from '@/components/ProductSidebar';
-import ProductTabs from '@/components/ProductTabs';
+import ExcelDownload from '@/components/ExcelDownload';
-import ProductTechnicalData from '@/components/ProductTechnicalData';
 import RelatedProducts from '@/components/RelatedProducts';
 import DatasheetDownload from '@/components/DatasheetDownload';
 import { Badge, Card, Container, Heading, Section } from '@/components/ui';
-import { getDatasheetPath } from '@/lib/datasheets';
+import { getDatasheetPath, getExcelDatasheetPath } from '@/lib/datasheets';
 import { getAllProducts, getProductBySlug } from '@/lib/products';
 import { mapFileSlugToTranslated, mapSlugToFileSlug } from '@/lib/slugs';
 import { Metadata } from 'next';
@@ -278,6 +277,7 @@ export default async function ProductPage({ params }: ProductPageProps) {
   }
 
   const datasheetPath = getDatasheetPath(productSlug, locale);
+  const excelPath = getExcelDatasheetPath(productSlug, locale);
   const isFallback = (product.frontmatter as any).isFallback;
   const categorySlug = slug[0];
   const categoryFileSlug = await mapSlugToFileSlug(categorySlug, locale);
@@ -343,6 +343,7 @@ export default async function ProductPage({ params }: ProductPageProps) {
       productName={product.frontmatter.title}
       productImage={product.frontmatter.images?.[0]}
       datasheetPath={datasheetPath}
+      excelPath={excelPath}
     />
   );
 
@@ -496,7 +497,15 @@ export default async function ProductPage({ params }: ProductPageProps) {
                   </h2>
                   <div className="h-1.5 w-24 bg-accent rounded-full" />
                 </div>
-                <DatasheetDownload datasheetPath={datasheetPath} />
+                <div className="flex flex-row flex-wrap items-center gap-4 max-w-2xl">
+                  <DatasheetDownload
+                    datasheetPath={datasheetPath}
+                    className="mt-0 w-full sm:w-auto"
+                  />
+                  {excelPath && (
+                    <ExcelDownload excelPath={excelPath} className="mt-0 w-full sm:w-auto" />
+                  )}
+                </div>
               </div>
             )}
 

app/[locale]/team/page.tsx

@@ -2,7 +2,7 @@ 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 { Section, Container, Heading, Badge } from '@/components/ui';
 import Image from 'next/image';
 import Reveal from '@/components/Reveal';
 import Gallery from '@/components/team/Gallery';

app/actions/brochure.ts

@@ -0,0 +1,122 @@
+'use server';
+
+import { getServerAppServices } from '@/lib/services/create-services.server';
+
+export async function requestBrochureAction(formData: FormData) {
+  const services = getServerAppServices();
+  const logger = services.logger.child({ action: 'requestBrochureAction' });
+
+  const { headers } = await import('next/headers');
+  const requestHeaders = await headers();
+
+  if ('setServerContext' in services.analytics) {
+    (services.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,
+    });
+  }
+
+  services.analytics.track('brochure-request-attempt');
+
+  const email = formData.get('email') as string;
+  const locale = (formData.get('locale') as string) || 'en';
+
+  // Anti-spam Honeypot Check
+  const honeypot = formData.get('company_website') as string;
+  if (honeypot) {
+    logger.warn('Spam detected via honeypot in brochure request', { email });
+    // Silently succeed to fool the bot without doing actual work
+    return { success: true };
+  }
+
+  if (!email) {
+    logger.warn('Missing email in brochure request');
+    return { success: false, error: 'Missing email address' };
+  }
+
+  // Basic email validation
+  if (!/^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(email)) {
+    return { success: false, error: 'Invalid email address' };
+  }
+
+  // 1. Save to CMS
+  try {
+    const { getPayload } = await import('payload');
+    const configPromise = (await import('@payload-config')).default;
+    const payload = await getPayload({ config: configPromise });
+
+    await payload.create({
+      collection: 'form-submissions',
+      data: {
+        name: email.split('@')[0],
+        email,
+        message: `Brochure download request (${locale})`,
+        type: 'brochure_download' as any,
+      },
+    });
+
+    logger.info('Successfully saved brochure request to Payload CMS', { email });
+  } catch (error) {
+    logger.error('Failed to store brochure request in Payload CMS', { error });
+    services.errors.captureException(error, { action: 'payload_store_brochure_request' });
+  }
+
+  // 2. Notify via Gotify
+  try {
+    await services.notifications.notify({
+      title: '📑 Brochure Download Request',
+      message: `New brochure download request from ${email} (${locale})`,
+      priority: 3,
+    });
+  } catch (error) {
+    logger.error('Failed to send notification', { error });
+  }
+
+  // 3. Send Brochure via Email
+  const brochureUrl = `https://klz-cables.com/brochure/klz-product-catalog-${locale}.pdf`;
+
+  try {
+    const { sendEmail } = await import('@/lib/mail/mailer');
+    const { render } = await import('@mintel/mail');
+    const React = await import('react');
+    const { BrochureDeliveryEmail } = await import('@/components/emails/BrochureDeliveryEmail');
+
+    const html = await render(
+      React.createElement(BrochureDeliveryEmail, {
+        _email: email,
+        brochureUrl,
+        locale: locale as 'en' | 'de',
+      }),
+    );
+
+    const emailResult = await sendEmail({
+      to: email,
+      subject: locale === 'de' ? 'Ihr KLZ Kabelkatalog' : 'Your KLZ Cable Catalog',
+      html,
+    });
+
+    if (emailResult.success) {
+      logger.info('Brochure email sent successfully', { email });
+    } else {
+      logger.error('Failed to send brochure email', { error: emailResult.error, email });
+      services.errors.captureException(new Error(`Brochure email failed: ${emailResult.error}`), {
+        action: 'requestBrochureAction_email',
+        email,
+      });
+      return { success: false, error: 'Failed to send email. Please try again later.' };
+    }
+  } catch (error) {
+    logger.error('Exception while sending brochure email', { error });
+    return { success: false, error: 'Failed to send email. Please try again later.' };
+  }
+
+  // 4. Track success
+  services.analytics.track('brochure-request-success', {
+    locale,
+    delivery_method: 'email',
+  });
+
+  return { success: true };
+}

app/actions/contact.ts

@@ -25,6 +25,14 @@ export async function sendContactFormAction(formData: FormData) {
   // Track attempt
   services.analytics.track('contact-form-attempt');
 
+  // Anti-spam Honeypot Check
+  const honeypot = formData.get('company_website') as string;
+  if (honeypot) {
+    logger.warn('Spam detected via honeypot in contact request', { email: formData.get('email') });
+    // Silently succeed to fool the bot without doing actual work
+    return { success: true };
+  }
+
   const name = formData.get('name') as string;
   const email = formData.get('email') as string;
   const message = formData.get('message') as string;

app/api/health/cms/route.ts

@@ -16,6 +16,14 @@ export async function GET() {
     const payload = await getPayload({ config: configPromise });
     checks.init = 'ok';
 
+    // Ensure migrations are applied on startup (reliable for standalone builds)
+    try {
+      await payload.db.migrate();
+    } catch (e: any) {
+      console.error('Migration failed:', e.message);
+      // We continue to check the collections even if migration fails
+    }
+
     // Verify each collection can be queried (catches missing locale tables, broken migrations)
     const collections = ['posts', 'products', 'pages', 'media'] as const;
     for (const collection of collections) {
@@ -27,7 +35,7 @@ export async function GET() {
       }
     }
 
-    const hasErrors = Object.values(checks).some(v => v.startsWith('error'));
+    const hasErrors = Object.values(checks).some((v) => v.startsWith('error'));
     return NextResponse.json(
       { status: hasErrors ? 'degraded' : 'ok', checks },
       { status: hasErrors ? 503 : 200 },

components/AutoBrochureModal.tsx

@@ -0,0 +1,28 @@
+'use client';
+
+import { useState, useEffect } from 'react';
+import dynamic from 'next/dynamic';
+
+const BrochureModal = dynamic(() => import('./BrochureModal'), { ssr: false });
+
+export default function AutoBrochureModal() {
+  const [isOpen, setIsOpen] = useState(false);
+
+  useEffect(() => {
+    // Check if user has already seen or interacted with the modal
+    const hasSeenModal = localStorage.getItem('klz_brochure_modal_seen');
+
+    if (!hasSeenModal) {
+      // Auto-open after 5 seconds to not interrupt immediate page load
+      const timer = setTimeout(() => {
+        setIsOpen(true);
+        // Mark as seen so it doesn't bother them again on next page load
+        localStorage.setItem('klz_brochure_modal_seen', 'true');
+      }, 5000);
+
+      return () => clearTimeout(timer);
+    }
+  }, []);
+
+  return <BrochureModal isOpen={isOpen} onClose={() => setIsOpen(false)} />;
+}

components/BrochureCTA.tsx

@@ -0,0 +1,88 @@
+'use client';
+
+import { useState } from 'react';
+import { useTranslations } from 'next-intl';
+import { cn } from '@/components/ui/utils';
+import dynamic from 'next/dynamic';
+
+const BrochureModal = dynamic(() => import('./BrochureModal'), { ssr: false });
+
+interface Props {
+  className?: string;
+  compact?: boolean;
+}
+
+/**
+ * BrochureCTA — Shows a button that opens a modal asking for an email address.
+ * The full-catalog PDF is ONLY revealed after email submission.
+ * No direct download link is exposed anywhere.
+ */
+export default function BrochureCTA({ className, compact = false }: Props) {
+  const t = useTranslations('Brochure');
+  const [open, setOpen] = useState(false);
+
+  return (
+    <>
+      <div className={cn(className)}>
+        <button
+          type="button"
+          onClick={() => setOpen(true)}
+          className={cn(
+            'group relative flex w-full items-center gap-4 overflow-hidden rounded-[28px] bg-[#000d26] border border-white/[0.08] text-left cursor-pointer',
+            'transition-all duration-300 hover:border-[#82ed20]/30 hover:shadow-[0_8px_30px_rgba(0,0,0,0.3)]',
+            compact ? 'p-4 md:p-5' : 'p-6 md:p-8',
+          )}
+        >
+          {/* Green top accent */}
+          <span className="pointer-events-none absolute inset-x-0 top-0 h-px bg-gradient-to-r from-transparent via-[#82ed20]/50 to-transparent" />
+
+          {/* Icon */}
+          <span className="flex h-11 w-11 shrink-0 items-center justify-center rounded-xl bg-[#82ed20]/10 border border-[#82ed20]/20 group-hover:bg-[#82ed20] transition-colors duration-300">
+            <svg
+              className="h-5 w-5 text-[#82ed20] group-hover:text-[#000d26] transition-colors duration-300"
+              fill="none"
+              stroke="currentColor"
+              viewBox="0 0 24 24"
+            >
+              <path
+                strokeLinecap="round"
+                strokeLinejoin="round"
+                strokeWidth={1.5}
+                d="M12 6.253v13m0-13C10.832 5.477 9.246 5 7.5 5S4.168 5.477 3 6.253v13C4.168 18.477 5.754 18 7.5 18s3.332.477 4.5 1.253m0-13C13.168 5.477 14.754 5 16.5 5c1.747 0 3.332.477 4.5 1.253v13C19.832 18.477 18.247 18 16.5 18c-1.746 0-3.332.477-4.5 1.253"
+              />
+            </svg>
+          </span>
+
+          {/* Labels */}
+          <span className="flex-1 min-w-0">
+            <span className="block text-[9px] font-black uppercase tracking-[0.2em] text-[#82ed20] mb-0.5">
+              PDF Katalog
+            </span>
+            <span
+              className={cn(
+                'block font-black text-white uppercase tracking-tight group-hover:text-[#82ed20] transition-colors duration-200',
+                compact ? 'text-base' : 'text-lg md:text-xl',
+              )}
+            >
+              {t('ctaTitle')}
+            </span>
+          </span>
+
+          {/* Arrow */}
+          <span className="flex h-8 w-8 shrink-0 items-center justify-center rounded-full bg-white/5 text-white/20 group-hover:bg-[#82ed20] group-hover:text-[#000d26] transition-all duration-300">
+            <svg className="h-4 w-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+              <path
+                strokeLinecap="round"
+                strokeLinejoin="round"
+                strokeWidth={2.5}
+                d="M9 5l7 7-7 7"
+              />
+            </svg>
+          </span>
+        </button>
+      </div>
+
+      <BrochureModal isOpen={open} onClose={() => setOpen(false)} />
+    </>
+  );
+}

components/BrochureModal.tsx

@@ -0,0 +1,254 @@
+'use client';
+
+import { useState, useRef, useEffect } from 'react';
+import { createPortal } from 'react-dom';
+import { useTranslations, useLocale } from 'next-intl';
+import { cn } from '@/components/ui/utils';
+import { requestBrochureAction } from '@/app/actions/brochure';
+import { useAnalytics } from './analytics/useAnalytics';
+import { AnalyticsEvents } from './analytics/analytics-events';
+
+interface BrochureModalProps {
+  isOpen: boolean;
+  onClose: () => void;
+}
+
+export default function BrochureModal({ isOpen, onClose }: BrochureModalProps) {
+  const t = useTranslations('Brochure');
+  const locale = useLocale();
+  const { trackEvent } = useAnalytics();
+  const formRef = useRef<HTMLFormElement>(null);
+  const modalRef = useRef<HTMLDivElement>(null);
+  const [state, setState] = useState<'idle' | 'submitting' | 'success' | 'error'>('idle');
+  const [errorMsg, setErrorMsg] = useState('');
+
+  // Close on escape + lock scroll + focus trap
+  useEffect(() => {
+    if (!isOpen) return;
+
+    // Auto-focus input when opened
+    const firstInput = document.getElementById('brochure-email');
+    if (firstInput) {
+      setTimeout(() => firstInput.focus(), 50);
+    }
+
+    const handleKeyDown = (e: KeyboardEvent) => {
+      if (e.key === 'Escape') onClose();
+
+      if (e.key === 'Tab' && modalRef.current) {
+        const focusable = modalRef.current.querySelectorAll(
+          'button, [href], input, select, textarea, [tabindex]:not([tabindex="-1"])',
+        ) as NodeListOf<HTMLElement>;
+
+        if (focusable.length > 0) {
+          const first = focusable[0];
+          const last = focusable[focusable.length - 1];
+
+          if (e.shiftKey && document.activeElement === first) {
+            last.focus();
+            e.preventDefault();
+          } else if (!e.shiftKey && document.activeElement === last) {
+            first.focus();
+            e.preventDefault();
+          }
+        }
+      }
+    };
+
+    document.addEventListener('keydown', handleKeyDown);
+    // Strict overflow lock on mobile as well
+    document.body.style.setProperty('overflow', 'hidden', 'important');
+
+    return () => {
+      document.removeEventListener('keydown', handleKeyDown);
+      document.body.style.overflow = '';
+    };
+  }, [isOpen, onClose]);
+
+  const handleSubmit = async (e: React.FormEvent) => {
+    e.preventDefault();
+    if (!formRef.current) return;
+
+    setState('submitting');
+    setErrorMsg('');
+
+    try {
+      const formData = new FormData(formRef.current);
+      formData.set('locale', locale);
+
+      const result = await requestBrochureAction(formData);
+
+      if (result.success) {
+        setState('success');
+        trackEvent(AnalyticsEvents.DOWNLOAD, {
+          file_name: `klz-product-catalog-${locale}.pdf`,
+          file_type: 'brochure',
+          location: 'brochure_modal',
+        });
+      } else {
+        setState('error');
+        setErrorMsg(result.error || 'Something went wrong');
+      }
+    } catch {
+      setState('error');
+      setErrorMsg('Network error');
+    }
+  };
+
+  const handleClose = () => {
+    setState('idle');
+    setErrorMsg('');
+    onClose();
+  };
+
+  if (!isOpen) return null;
+
+  const modal = (
+    <div
+      className="fixed inset-0 z-[9999] flex items-center justify-center p-4"
+      role="dialog"
+      aria-modal="true"
+    >
+      {/* Backdrop */}
+      <div
+        className="absolute inset-0 bg-black/70 backdrop-blur-sm"
+        onClick={handleClose}
+        aria-hidden="true"
+      />
+
+      {/* Modal Panel */}
+      <div
+        ref={modalRef}
+        className="relative z-10 w-full max-w-md rounded-[28px] bg-[#000d26] border border-white/10 shadow-[0_40px_80px_rgba(0,0,0,0.6)] overflow-hidden"
+      >
+        {/* Accent bar at top */}
+        <div className="h-1 w-full bg-gradient-to-r from-[#82ed20] via-[#5cb516] to-[#82ed20]" />
+
+        {/* Close Button */}
+        <button
+          type="button"
+          onClick={handleClose}
+          className="absolute top-4 right-4 z-10 flex h-8 w-8 items-center justify-center rounded-full bg-white/5 text-white/40 hover:bg-white/10 hover:text-white transition-colors cursor-pointer"
+          aria-label={t('close')}
+        >
+          <svg className="h-4 w-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+            <path
+              strokeLinecap="round"
+              strokeLinejoin="round"
+              strokeWidth={2}
+              d="M6 18L18 6M6 6l12 12"
+            />
+          </svg>
+        </button>
+
+        <div className="p-8 pt-7">
+          {/* Icon + Header */}
+          <div className="mb-7">
+            <div className="flex h-12 w-12 items-center justify-center rounded-2xl bg-[#82ed20]/10 border border-[#82ed20]/20 mb-4">
+              <svg
+                className="h-6 w-6 text-[#82ed20]"
+                fill="none"
+                stroke="currentColor"
+                viewBox="0 0 24 24"
+              >
+                <path
+                  strokeLinecap="round"
+                  strokeLinejoin="round"
+                  strokeWidth={1.5}
+                  d="M12 6.253v13m0-13C10.832 5.477 9.246 5 7.5 5S4.168 5.477 3 6.253v13C4.168 18.477 5.754 18 7.5 18s3.332.477 4.5 1.253m0-13C13.168 5.477 14.754 5 16.5 5c1.747 0 3.332.477 4.5 1.253v13C19.832 18.477 18.247 18 16.5 18c-1.746 0-3.332.477-4.5 1.253"
+                />
+              </svg>
+            </div>
+            <h2 className="text-2xl font-black text-white uppercase tracking-tight leading-none mb-2">
+              {t('title')}
+            </h2>
+            <p className="text-sm text-white/50 leading-relaxed">{t('subtitle')}</p>
+          </div>
+
+          {state === 'success' ? (
+            <div>
+              <div className="flex items-center gap-3 mb-6 p-4 rounded-2xl bg-[#82ed20]/10 border border-[#82ed20]/20">
+                <div className="flex h-9 w-9 shrink-0 items-center justify-center rounded-xl bg-[#82ed20]/20">
+                  <svg
+                    className="h-5 w-5 text-[#82ed20]"
+                    fill="none"
+                    stroke="currentColor"
+                    viewBox="0 0 24 24"
+                  >
+                    <path
+                      strokeLinecap="round"
+                      strokeLinejoin="round"
+                      strokeWidth={2}
+                      d="M5 13l4 4L19 7"
+                    />
+                  </svg>
+                </div>
+                <div>
+                  <p className="text-sm font-bold text-[#82ed20]">
+                    {locale === 'de' ? 'Erfolgreich gesendet' : 'Successfully sent'}
+                  </p>
+                  <p className="text-xs text-white/50 mt-0.5">
+                    {locale === 'de'
+                      ? 'Bitte prüfen Sie Ihren Posteingang.'
+                      : 'Please check your inbox.'}
+                  </p>
+                </div>
+              </div>
+              <button
+                type="button"
+                onClick={handleClose}
+                className="flex items-center justify-center gap-3 w-full py-4 px-6 rounded-2xl bg-white/10 hover:bg-white/20 text-white font-black text-sm uppercase tracking-widest transition-colors"
+              >
+                {t('close')}
+              </button>
+            </div>
+          ) : (
+            <form ref={formRef} onSubmit={handleSubmit}>
+              <div className="mb-5">
+                <label
+                  htmlFor="brochure-email"
+                  className="block text-[10px] font-black uppercase tracking-[0.2em] text-white/40 mb-2"
+                >
+                  {t('emailLabel')}
+                </label>
+                <input
+                  id="brochure-email"
+                  name="email"
+                  type="email"
+                  required
+                  autoComplete="email"
+                  placeholder={t('emailPlaceholder')}
+                  className="w-full rounded-xl bg-white/5 border border-white/10 px-4 py-3.5 text-white placeholder:text-white/20 text-sm font-medium focus:outline-none focus:border-[#82ed20]/40 transition-colors"
+                  disabled={state === 'submitting'}
+                />
+              </div>
+
+              {state === 'error' && errorMsg && (
+                <p className="text-red-400 text-xs mb-4 font-medium">{errorMsg}</p>
+              )}
+
+              <button
+                type="submit"
+                disabled={state === 'submitting'}
+                className={cn(
+                  'w-full py-4 px-6 rounded-2xl font-black text-sm uppercase tracking-widest transition-colors',
+                  state === 'submitting'
+                    ? 'bg-white/10 text-white/40 cursor-wait'
+                    : 'bg-[#82ed20] hover:bg-[#6dd318] text-[#000d26]',
+                )}
+              >
+                {state === 'submitting' ? t('submitting') : t('submit')}
+              </button>
+
+              <p className="mt-4 text-[10px] text-white/25 text-center leading-relaxed">
+                {t('privacyNote')}
+              </p>
+            </form>
+          )}
+        </div>
+      </div>
+    </div>
+  );
+
+  return createPortal(modal, document.body);
+}

components/CMSConnectivityNotice.tsx

@@ -15,10 +15,12 @@ export default function CMSConnectivityNotice() {
       const isDebug = new URLSearchParams(window.location.search).has('cms_debug');
       const isLocal = config.isDevelopment;
       const isTesting = config.isTesting;
+      const target = process.env.NEXT_PUBLIC_TARGET || '';
+      const isBranch = target === 'branch';
 
-      // Only proceed with check if it's developer context (Local or Testing)
+      // Only proceed with check if it's developer context (Local, Testing, or Branch preview)
       // Staging and Production should NEVER see this unless forced with ?cms_debug
-      if (!isLocal && !isTesting && !isDebug) return;
+      if (!isLocal && !isTesting && !isBranch && !isDebug) return;
 
       try {
         const response = await fetch('/api/health/cms');
@@ -58,8 +60,8 @@ export default function CMSConnectivityNotice() {
             <h4 className="font-bold text-sm mb-1">CMS Issue Detected</h4>
             <p className="text-xs opacity-90 leading-relaxed mb-3">
               {errorMsg === 'relation "products" does not exist'
-                ? 'The database schema is missing. Please sync your local data to this environment.'
+                ? 'The database schema is missing. Please run migrations for this environment.'
-                : errorMsg || 'The application cannot connect to the Directus CMS.'}
+                : 'A content service is unavailable. Check the deployment logs for details.'}
             </p>
             <div className="flex gap-2">
               <button

components/ContactForm.tsx

@@ -139,6 +139,15 @@ export default function ContactForm() {
         {t('form.title')}
       </Heading>
       <form onSubmit={handleSubmit} className="grid grid-cols-1 md:grid-cols-2 gap-4 md:gap-8">
+        {/* Anti-spam Honeypot */}
+        <input
+          type="text"
+          name="company_website"
+          tabIndex={-1}
+          autoComplete="off"
+          style={{ display: 'none' }}
+          aria-hidden="true"
+        />
         <div className="space-y-1 md:space-y-2">
           <Label htmlFor="contact-name">{t('form.name')}</Label>
           <Input

components/DatasheetDownload.tsx

@@ -33,12 +33,12 @@ export default function DatasheetDownload({ datasheetPath, className }: Datashee
         <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">
+        <div className="relative flex items-center gap-5 rounded-[31px] bg-primary-dark/90 backdrop-blur-xl p-6 md:px-6 md:py-6 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="relative flex h-14 w-14 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"
+              className="relative h-7 w-7 text-white transition-transform duration-500 group-hover:scale-110 group-hover:rotate-3"
               fill="none"
               stroke="currentColor"
               viewBox="0 0 24 24"
@@ -54,13 +54,13 @@ export default function DatasheetDownload({ datasheetPath, className }: Datashee
           </div>
 
           {/* Text Content */}
-          <div className="flex-1">
+          <div className="flex-1 min-w-0">
             <div className="flex items-center gap-2 mb-1">
               <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">
+            <h3 className="text-xl font-black text-white uppercase tracking-tighter leading-none group-hover:text-accent transition-colors duration-300">
               {t('downloadDatasheet')}
             </h3>
             <p className="mt-2 text-sm font-medium text-white/60 leading-relaxed">
@@ -69,9 +69,9 @@ export default function DatasheetDownload({ datasheetPath, className }: Datashee
           </div>
 
           {/* 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">
+          <div className="flex h-10 w-10 flex-shrink-0 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"
+              className="h-5 w-5"
               fill="none"
               stroke="currentColor"
               viewBox="0 0 24 24"

components/ExcelDownload.tsx

@@ -0,0 +1,94 @@
+'use client';
+
+import { cn } from '@/components/ui/utils';
+import { useTranslations } from 'next-intl';
+import { useAnalytics } from './analytics/useAnalytics';
+import { AnalyticsEvents } from './analytics/analytics-events';
+
+interface ExcelDownloadProps {
+    excelPath: string;
+    className?: string;
+}
+
+export default function ExcelDownload({ excelPath, className }: ExcelDownloadProps) {
+    const t = useTranslations('Products');
+    const { trackEvent } = useAnalytics();
+
+    return (
+        <div className={cn('mt-4 animate-slight-fade-in-from-bottom', className)}>
+            <a
+                href={excelPath}
+                target="_blank"
+                rel="noopener noreferrer"
+                onClick={() =>
+                    trackEvent(AnalyticsEvents.DOWNLOAD, {
+                        file_name: excelPath.split('/').pop(),
+                        file_path: excelPath,
+                        file_type: 'excel',
+                        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-emerald-500 via-teal-400 to-emerald-500 opacity-20 group-hover:opacity-40 transition-opacity duration-500 animate-gradient-x" />
+
+                {/* Inner Content */}
+                <div className="relative flex items-center gap-5 rounded-[31px] bg-primary-dark/90 backdrop-blur-xl p-6 md:px-6 md:py-6 border border-white/10">
+                    {/* Icon Container */}
+                    <div className="relative flex h-14 w-14 flex-shrink-0 items-center justify-center rounded-2xl bg-white/5 border border-white/10 group-hover:bg-emerald-600 group-hover:border-white/20 transition-all duration-500">
+                        <div className="absolute inset-0 rounded-2xl bg-emerald-500/20 blur-xl opacity-0 group-hover:opacity-100 transition-opacity duration-500" />
+                        {/* Spreadsheet/Table Icon */}
+                        <svg
+                            className="relative h-7 w-7 text-white transition-transform duration-500 group-hover:scale-110 group-hover:rotate-3"
+                            fill="none"
+                            stroke="currentColor"
+                            viewBox="0 0 24 24"
+                            aria-hidden="true"
+                        >
+                            <path
+                                strokeLinecap="round"
+                                strokeLinejoin="round"
+                                strokeWidth={1.5}
+                                d="M3 10h18M3 14h18M10 3v18M3 6a3 3 0 013-3h12a3 3 0 013 3v12a3 3 0 01-3 3H6a3 3 0 01-3-3V6z"
+                            />
+                        </svg>
+                    </div>
+
+                    {/* Text Content */}
+                    <div className="flex-1 min-w-0">
+                        <div className="flex items-center gap-2 mb-1">
+                            <span className="text-[10px] font-black uppercase tracking-[0.2em] text-emerald-400">
+                                Excel Datasheet
+                            </span>
+                        </div>
+                        <h3 className="text-xl font-black text-white uppercase tracking-tighter leading-none group-hover:text-emerald-400 transition-colors duration-300">
+                            {t('downloadExcel')}
+                        </h3>
+                        <p className="mt-2 text-sm font-medium text-white/60 leading-relaxed">
+                            {t('downloadExcelDesc')}
+                        </p>
+                    </div>
+
+                    {/* Arrow Icon */}
+                    <div className="flex h-10 w-10 flex-shrink-0 items-center justify-center rounded-full bg-white/5 text-white/20 group-hover:bg-emerald-600 group-hover:text-white group-hover:translate-x-1 transition-all duration-500">
+                        <svg
+                            className="h-5 w-5"
+                            fill="none"
+                            stroke="currentColor"
+                            viewBox="0 0 24 24"
+                            aria-hidden="true"
+                        >
+                            <path
+                                strokeLinecap="round"
+                                strokeLinejoin="round"
+                                strokeWidth={2.5}
+                                d="M9 5l7 7-7 7"
+                            />
+                        </svg>
+                    </div>
+                </div>
+            </a>
+        </div>
+    );
+}

components/Footer.tsx

@@ -6,6 +6,7 @@ import { useTranslations, useLocale } from 'next-intl';
 import { Container } from './ui';
 import { useAnalytics } from './analytics/useAnalytics';
 import { AnalyticsEvents } from './analytics/analytics-events';
+import FooterBrochureForm from './FooterBrochureForm';
 
 export default function Footer() {
   const t = useTranslations('Footer');
@@ -243,6 +244,10 @@ export default function Footer() {
           </div>
         </div>
 
+        <div className="mb-12 md:mb-16">
+          <FooterBrochureForm />
+        </div>
+
         <div className="pt-8 md:pt-12 border-t border-white/10 flex flex-row justify-between items-center gap-4 text-white/70 text-xs md:text-sm font-medium">
           <p>{t('copyright', { year: currentYear })}</p>
           <div className="flex gap-8">

components/FooterBrochureForm.tsx

@@ -0,0 +1,134 @@
+'use client';
+
+import { useState, useRef } from 'react';
+import { useTranslations, useLocale } from 'next-intl';
+import { requestBrochureAction } from '@/app/actions/brochure';
+import { cn } from '@/components/ui/utils';
+import { useAnalytics } from './analytics/useAnalytics';
+import { AnalyticsEvents } from './analytics/analytics-events';
+
+interface Props {
+  className?: string;
+}
+
+export default function FooterBrochureForm({ className }: Props) {
+  const t = useTranslations('Brochure');
+  const locale = useLocale();
+  const { trackEvent } = useAnalytics();
+  const formRef = useRef<HTMLFormElement>(null);
+
+  const [phase, setPhase] = useState<'idle' | 'loading' | 'success' | 'error'>('idle');
+  const [err, setErr] = useState('');
+
+  async function handleSubmit(e: React.FormEvent) {
+    e.preventDefault();
+    if (!formRef.current) return;
+    setPhase('loading');
+
+    const fd = new FormData(formRef.current);
+    fd.set('locale', locale);
+
+    try {
+      const res = await requestBrochureAction(fd);
+      if (res.success) {
+        setPhase('success');
+        trackEvent(AnalyticsEvents.DOWNLOAD, {
+          file_name: `klz-product-catalog-${locale}.pdf`,
+          file_type: 'brochure',
+          location: 'footer_inline',
+        });
+      } else {
+        setErr(res.error || 'Error');
+        setPhase('error');
+      }
+    } catch {
+      setErr('Network error');
+      setPhase('error');
+    }
+  }
+
+  if (phase === 'success') {
+    return (
+      <div
+        className={cn(
+          'flex flex-col sm:flex-row items-center gap-4 bg-white/5 border border-[#82ed20]/20 rounded-2xl p-6',
+          className,
+        )}
+      >
+        <div className="flex h-10 w-10 shrink-0 items-center justify-center rounded-full bg-[#82ed20]/20 text-[#82ed20]">
+          <svg className="h-5 w-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+            <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M5 13l4 4L19 7" />
+          </svg>
+        </div>
+        <div>
+          <h4 className="text-white font-bold mb-1">
+            {locale === 'de' ? 'Erfolgreich angefordert!' : 'Successfully requested!'}
+          </h4>
+          <p className="text-white/60 text-sm">
+            {locale === 'de'
+              ? 'Wir haben Ihnen den Katalog soeben per E-Mail zugesendet.'
+              : 'We have just sent the catalog to your email.'}
+          </p>
+        </div>
+      </div>
+    );
+  }
+
+  return (
+    <div
+      className={cn(
+        'bg-white/5 border border-white/10 rounded-3xl p-6 md:p-8 flex flex-col md:flex-row items-start md:items-center justify-between gap-6 md:gap-12',
+        className,
+      )}
+    >
+      <div className="flex-1 max-w-xl">
+        <h4 className="text-lg font-black text-white uppercase tracking-tight mb-2">
+          {t('ctaTitle')}
+        </h4>
+        <p className="text-sm text-white/60 leading-relaxed mb-0">{t('subtitle')}</p>
+      </div>
+
+      <form
+        ref={formRef}
+        onSubmit={handleSubmit}
+        className="w-full md:w-auto flex flex-col sm:flex-row gap-3"
+      >
+        {/* Anti-spam Honeypot */}
+        <input
+          type="text"
+          name="company_website"
+          tabIndex={-1}
+          autoComplete="off"
+          style={{ display: 'none' }}
+          aria-hidden="true"
+        />
+
+        <div className="relative w-full sm:w-64">
+          <input
+            name="email"
+            type="email"
+            required
+            placeholder={t('emailPlaceholder')}
+            disabled={phase === 'loading'}
+            className="w-full bg-primary-dark border border-white/20 rounded-xl px-4 py-3 text-sm text-white placeholder:text-white/30 focus:outline-none focus:border-[#82ed20]/50 transition-colors"
+          />
+        </div>
+        <button
+          type="submit"
+          disabled={phase === 'loading'}
+          className={cn(
+            'flex items-center justify-center shrink-0 px-6 py-3 rounded-xl font-bold text-sm uppercase tracking-widest transition-colors',
+            phase === 'loading'
+              ? 'bg-white/10 text-white/40 cursor-wait'
+              : 'bg-[#82ed20] text-[#000d26] hover:bg-[#6dd318] cursor-pointer',
+          )}
+        >
+          {phase === 'loading' ? t('submitting') : t('submit')}
+        </button>
+      </form>
+      {phase === 'error' && err && (
+        <div className="absolute mt-16 text-red-400 text-xs font-medium">{err}</div>
+      )}
+    </div>
+  );
+}

components/Lightbox.tsx

@@ -23,7 +23,7 @@ export default function Lightbox({ isOpen, images, initialIndex, onClose }: Ligh
   const previousFocusRef = useRef<HTMLElement | null>(null);
 
   useEffect(() => {
-    setMounted(true); // eslint-disable-line react-hooks/set-state-in-effect
+    setMounted(true);
     return () => setMounted(false);
   }, []);
 
@@ -61,7 +61,7 @@ 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); // eslint-disable-line react-hooks/set-state-in-effect
+        setCurrentIndex(index);
       }
     }
   }, [searchParams, images.length]);
@@ -139,7 +139,7 @@ export default function Lightbox({ isOpen, images, initialIndex, onClose }: Ligh
   if (!mounted) return null;
 
   return createPortal(
-    <LazyMotion strict features={() => import('@/lib/framer-features').then(res => res.default)}>
+    <LazyMotion strict features={() => import('@/lib/framer-features').then((res) => res.default)}>
       <AnimatePresence>
         {isOpen && (
           <div

components/ObfuscatedEmail.tsx

@@ -17,6 +17,7 @@ export default function ObfuscatedEmail({ email, className = '', children }: Obf
   const [mounted, setMounted] = useState(false);
 
   useEffect(() => {
+    // eslint-disable-next-line react-hooks/set-state-in-effect
     setMounted(true);
   }, []);
 

components/ObfuscatedPhone.tsx

@@ -16,6 +16,7 @@ export default function ObfuscatedPhone({ phone, className = '', children }: Obf
   const [mounted, setMounted] = useState(false);
 
   useEffect(() => {
+    // eslint-disable-next-line react-hooks/set-state-in-effect
     setMounted(true);
   }, []);
 

components/PDFDownloadBlock.tsx

@@ -0,0 +1,34 @@
+'use client';
+
+import React from 'react';
+import { usePathname } from 'next/navigation';
+
+export const PDFDownloadBlock: React.FC<{ label: string; style: string }> = ({ label, style }) => {
+  const pathname = usePathname();
+
+  // Extract slug from pathname
+  const segments = pathname.split('/').filter(Boolean);
+  // Pathname is usually /[locale]/[slug] or /[locale]/products/[slug]
+  // We want the page slug.
+  const slug = segments[segments.length - 1] || 'home';
+
+  const href = `/api/pages/${slug}/pdf`;
+
+  return (
+    <div className="my-8">
+      <a
+        href={href}
+        className={`inline-flex items-center px-8 py-3.5 font-bold rounded-full transition-all duration-300 shadow-lg hover:shadow-xl group ${
+          style === 'primary'
+            ? 'bg-primary text-white hover:bg-primary-dark'
+            : style === 'secondary'
+              ? 'bg-accent text-primary-dark hover:bg-neutral-light'
+              : 'border-2 border-primary text-primary hover:bg-primary hover:text-white'
+        }`}
+      >
+        <span className="mr-3 transition-transform group-hover:scale-12 bit-bounce">📄</span>
+        {label}
+      </a>
+    </div>
+  );
+};

components/PayloadRichText.tsx

@@ -37,6 +37,7 @@ 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 { PDFDownloadBlock } from '@/components/PDFDownloadBlock';
 
 /**
  * Splits a text string on \n and intersperses <br /> elements.
@@ -429,6 +430,12 @@ const jsxConverters: JSXConverters = {
         {node.fields.content && <RichText data={node.fields.content} converters={jsxConverters} />}
       </ProductTabs>
     ),
+    pdfDownload: ({ node }: any) => (
+      <PDFDownloadBlock label={node.fields.label} style={node.fields.style} />
+    ),
+    'block-pdfDownload': ({ node }: any) => (
+      <PDFDownloadBlock label={node.fields.label} style={node.fields.style} />
+    ),
     // ─── New Page Blocks ───────────────────────────────────────────
     heroSection: ({ node }: any) => {
       const f = node.fields;
@@ -786,8 +793,8 @@ const jsxConverters: JSXConverters = {
         </Section>
       );
     },
-    imageGallery: ({ node }: any) => <Gallery />,
+    imageGallery: () => <Gallery />,
-    'block-imageGallery': ({ node }: any) => <Gallery />,
+    'block-imageGallery': () => <Gallery />,
     categoryGrid: ({ node }: any) => {
       const cats = node.fields.categories || [];
       return (

components/ProductSidebar.tsx

@@ -4,6 +4,7 @@ import Image from 'next/image';
 import { useTranslations } from 'next-intl';
 import RequestQuoteForm from '@/components/RequestQuoteForm';
 import DatasheetDownload from '@/components/DatasheetDownload';
+import ExcelDownload from '@/components/ExcelDownload';
 import Scribble from '@/components/Scribble';
 import { cn } from '@/components/ui/utils';
 
@@ -11,6 +12,7 @@ interface ProductSidebarProps {
   productName: string;
   productImage?: string;
   datasheetPath?: string | null;
+  excelPath?: string | null;
   className?: string;
 }
 
@@ -18,6 +20,7 @@ export default function ProductSidebar({
   productName,
   productImage,
   datasheetPath,
+  excelPath,
   className,
 }: ProductSidebarProps) {
   const t = useTranslations('Products');
@@ -70,6 +73,9 @@ export default function ProductSidebar({
 
       {/* Datasheet Download */}
       {datasheetPath && <DatasheetDownload datasheetPath={datasheetPath} className="mt-0" />}
+
+      {/* Excel Download – right below datasheet */}
+      {excelPath && <ExcelDownload excelPath={excelPath} className="mt-0" />}
     </aside>
   );
 }

components/ProductTechnicalData.tsx

@@ -2,6 +2,7 @@
 
 import React, { useState } from 'react';
 import { useTranslations } from 'next-intl';
+import { formatTechnicalValue } from '@/lib/utils/technical';
 
 interface KeyValueItem {
   label: string;
@@ -45,22 +46,40 @@ export default function ProductTechnicalData({ data }: ProductTechnicalDataProps
             <div className="w-2 h-8 bg-accent rounded-full" />
             General Data
           </h3>
-          <dl className="grid grid-cols-2 sm:grid-cols-2 lg:grid-cols-3 gap-x-6 gap-y-6 md:gap-x-12 md:gap-y-8">
+          <dl className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-x-6 gap-y-6 md:gap-x-12 md:gap-y-8">
-            {technicalItems.map((item, idx) => (
+            {technicalItems.map((item, idx) => {
-              <div key={idx} className="flex flex-col group">
+              const formatted = formatTechnicalValue(item.value);
-                <dt className="text-sm font-bold uppercase tracking-widest text-primary/40 mb-2 group-hover:text-accent transition-colors">
+              return (
-                  {item.label}
+                <div key={idx} className="flex flex-col group">
-                </dt>
+                  <dt className="text-sm font-bold uppercase tracking-widest text-primary/40 mb-2 group-hover:text-accent transition-colors">
-                <dd className="text-lg font-semibold text-text-primary">
+                    {item.label}
-                  {item.value}{' '}
+                  </dt>
-                  {item.unit && (
+                  <dd className="text-lg font-semibold text-text-primary">
-                    <span className="text-sm font-normal text-text-secondary ml-1">
+                    {formatted.isList ? (
-                      {item.unit}
+                      <div className="flex flex-wrap gap-2 mt-1">
-                    </span>
+                        {formatted.parts.map((p, pIdx) => (
-                  )}
+                          <span
-                </dd>
+                            key={pIdx}
-              </div>
+                            className="inline-block px-3 py-1 bg-neutral-light border border-neutral-dark/10 rounded-lg text-xs font-bold text-primary shadow-sm hover:border-accent/40 transition-colors"
-            ))}
+                          >
+                            {p}
+                          </span>
+                        ))}
+                      </div>
+                    ) : (
+                      <>
+                        {item.value}{' '}
+                        {item.unit && (
+                          <span className="text-sm font-normal text-text-secondary ml-1">
+                            {item.unit}
+                          </span>
+                        )}
+                      </>
+                    )}
+                  </dd>
+                </div>
+              );
+            })}
           </dl>
         </div>
       )}
@@ -77,7 +96,7 @@ export default function ProductTechnicalData({ data }: ProductTechnicalDataProps
             <h3 className="text-2xl font-bold text-primary mb-8 flex items-center gap-3">
               <div className="w-2 h-8 bg-accent rounded-full" />
               {table.voltageLabel !== 'Voltage unknown' &&
-              table.voltageLabel !== 'Spannung unbekannt'
+                table.voltageLabel !== 'Spannung unbekannt'
                 ? table.voltageLabel
                 : 'Technical Specifications'}
             </h3>
@@ -102,9 +121,8 @@ export default function ProductTechnicalData({ data }: ProductTechnicalDataProps
               <div className="pointer-events-none absolute right-0 top-0 h-full w-8 bg-gradient-to-l from-white to-transparent z-20 md:hidden" />
               <div
                 id={`voltage-table-${idx}`}
-                className={`overflow-x-auto -mx-5 md:-mx-12 px-5 md:px-12 transition-all duration-500 ease-in-out ${
+                className={`overflow-x-auto -mx-5 md:-mx-12 px-5 md:px-12 transition-all duration-500 ease-in-out ${!isExpanded && hasManyRows ? 'max-h-[400px] overflow-y-hidden' : 'max-h-[none]'
-                  !isExpanded && hasManyRows ? 'max-h-[400px] overflow-y-hidden' : 'max-h-[none]'
+                  }`}
-                }`}
               >
                 <table className="min-w-full border-separate border-spacing-0">
                   <thead>

components/RequestQuoteForm.tsx

@@ -165,6 +165,16 @@ export default function RequestQuoteForm({ productName }: RequestQuoteFormProps)
 
   return (
     <form onSubmit={handleSubmit} className="space-y-3 !mt-0">
+      {/* Anti-spam Honeypot */}
+      <input
+        type="text"
+        name="company_website"
+        tabIndex={-1}
+        autoComplete="off"
+        style={{ display: 'none' }}
+        aria-hidden="true"
+      />
+
       <div className="space-y-2 !mt-0">
         <div className="space-y-1 !mt-0">
           <label htmlFor={emailId} className="sr-only">

components/analytics/TrackedLink.tsx

@@ -28,13 +28,13 @@ export default function TrackedLink({
 }: TrackedLinkProps) {
   const { trackEvent } = useAnalytics();
 
-  const handleClick = (e: React.MouseEvent) => {
+  const handleClick = () => {
     try {
       trackEvent(eventName, {
         href,
         ...eventProperties,
       });
-    } catch (_e) {
+    } catch {
       // Analytics tracking should not block navigation, so we catch and ignore errors.
     }
     if (onClick) onClick();

components/blog/TechnicalGrid.tsx

@@ -1,5 +1,5 @@
-import React from 'react';
 import Scribble from '@/components/Scribble';
+import { formatTechnicalValue } from '@/lib/utils/technical';
 
 interface TechnicalGridItem {
   label: string;
@@ -18,25 +18,41 @@ export default function TechnicalGrid({ title, items }: TechnicalGridProps) {
         <h3 className="text-2xl font-bold text-text-primary mb-8 flex items-center gap-4 relative">
           <span className="relative inline-block">
             {title}
-            <Scribble 
+            <Scribble
-              variant="underline" 
+              variant="underline"
-              className="absolute -bottom-2 left-0 w-full h-3 text-accent/40" 
+              className="absolute -bottom-2 left-0 w-full h-3 text-accent/40"
             />
           </span>
         </h3>
       )}
       <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
-        {items.map((item, index) => (
+        {items.map((item, index) => {
-          <div key={index} className="bg-white p-8 rounded-2xl border border-neutral-200 shadow-sm hover:shadow-md transition-all duration-300 group relative overflow-hidden">
+          const formatted = formatTechnicalValue(item.value);
-            <div className="absolute top-0 right-0 w-16 h-16 bg-primary/5 -mr-8 -mt-8 rotate-45 transition-transform group-hover:scale-110" />
+          return (
-            <span className="block text-xs font-bold text-primary uppercase tracking-[0.2em] mb-3 opacity-70">
+            <div key={index} className="bg-white p-8 rounded-2xl border border-neutral-200 shadow-sm hover:shadow-md transition-all duration-300 group relative overflow-hidden">
-              {item.label}
+              <div className="absolute top-0 right-0 w-16 h-16 bg-primary/5 -mr-8 -mt-8 rotate-45 transition-transform group-hover:scale-110" />
-            </span>
+              <span className="block text-xs font-bold text-primary uppercase tracking-[0.2em] mb-3 opacity-70">
-            <span className="text-lg text-text-secondary leading-relaxed group-hover:text-text-primary transition-colors">
+                {item.label}
-              {item.value}
+              </span>
-            </span>
+              <div className="text-lg text-text-secondary leading-relaxed group-hover:text-text-primary transition-colors">
-          </div>
+                {formatted.isList ? (
-        ))}
+                  <div className="flex flex-wrap gap-2 mt-2">
+                    {formatted.parts.map((p, pIdx) => (
+                      <span
+                        key={pIdx}
+                        className="inline-block px-3 py-1 bg-neutral-light border border-neutral-dark/10 rounded-lg text-xs font-bold text-primary shadow-sm group-hover:border-accent/40 transition-colors"
+                      >
+                        {p}
+                      </span>
+                    ))}
+                  </div>
+                ) : (
+                  item.value
+                )}
+              </div>
+            </div>
+          );
+        })}
       </div>
     </div>
   );

components/emails/BrochureDeliveryEmail.tsx

@@ -0,0 +1,145 @@
+import {
+  Body,
+  Container,
+  Head,
+  Heading,
+  Hr,
+  Html,
+  Preview,
+  Section,
+  Text,
+  Button,
+} from '@react-email/components';
+import * as React from 'react';
+
+interface BrochureDeliveryEmailProps {
+  _email: string;
+  brochureUrl: string;
+  locale: 'en' | 'de';
+}
+
+export const BrochureDeliveryEmail = ({
+  _email,
+  brochureUrl,
+  locale = 'en',
+}: BrochureDeliveryEmailProps) => {
+  const t =
+    locale === 'de'
+      ? {
+          subject: 'Ihr KLZ Kabelkatalog',
+          greeting: 'Vielen Dank für Ihr Interesse an KLZ Cables.',
+          body: 'Anbei erhalten Sie den Link zu unserem aktuellen Produktkatalog. Dieser enthält alle wichtigen technischen Spezifikationen und detaillierten Produktdaten.',
+          button: 'Katalog herunterladen',
+          footer: 'Diese E-Mail wurde von klz-cables.com gesendet.',
+        }
+      : {
+          subject: 'Your KLZ Cable Catalog',
+          greeting: 'Thank you for your interest in KLZ Cables.',
+          body: 'Below you will find the link to our current product catalog. It contains all key technical specifications and detailed product data.',
+          button: 'Download Catalog',
+          footer: 'This email was sent from klz-cables.com.',
+        };
+
+  return (
+    <Html>
+      <Head />
+      <Preview>{t.subject}</Preview>
+      <Body style={main}>
+        <Container style={container}>
+          <Section style={headerSection}>
+            <Heading style={h1}>{t.subject}</Heading>
+          </Section>
+
+          <Section style={section}>
+            <Text style={text}>
+              <strong>{t.greeting}</strong>
+            </Text>
+            <Text style={text}>{t.body}</Text>
+
+            <Section style={buttonContainer}>
+              <Button style={button} href={brochureUrl}>
+                {t.button}
+              </Button>
+            </Section>
+
+            <Hr style={hr} />
+          </Section>
+          <Text style={footer}>{t.footer}</Text>
+        </Container>
+      </Body>
+    </Html>
+  );
+};
+
+export default BrochureDeliveryEmail;
+
+const main = {
+  backgroundColor: '#f6f9fc',
+  fontFamily:
+    '-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Ubuntu,sans-serif',
+};
+
+const container = {
+  backgroundColor: '#ffffff',
+  margin: '0 auto',
+  padding: '0 0 48px',
+  marginBottom: '64px',
+  borderRadius: '8px',
+  overflow: 'hidden',
+  border: '1px solid #e6ebf1',
+};
+
+const headerSection = {
+  backgroundColor: '#000d26',
+  padding: '32px 48px',
+  borderBottom: '4px solid #4da612',
+};
+
+const h1 = {
+  color: '#ffffff',
+  fontSize: '24px',
+  fontWeight: 'bold',
+  margin: '0',
+};
+
+const section = {
+  padding: '32px 48px 0',
+};
+
+const text = {
+  color: '#333',
+  fontSize: '16px',
+  lineHeight: '24px',
+  textAlign: 'left' as const,
+};
+
+const buttonContainer = {
+  textAlign: 'center' as const,
+  marginTop: '32px',
+  marginBottom: '32px',
+};
+
+const button = {
+  backgroundColor: '#4da612',
+  borderRadius: '4px',
+  color: '#ffffff',
+  fontSize: '16px',
+  fontWeight: 'bold',
+  textDecoration: 'none',
+  textAlign: 'center' as const,
+  display: 'inline-block',
+  padding: '16px 32px',
+};
+
+const hr = {
+  borderColor: '#e6ebf1',
+  margin: '20px 0',
+};
+
+const footer = {
+  color: '#8898aa',
+  fontSize: '12px',
+  lineHeight: '16px',
+  textAlign: 'center' as const,
+  marginTop: '20px',
+};

components/home/RecentPosts.tsx

@@ -74,11 +74,14 @@ export default async function RecentPosts({ locale, data }: RecentPostsProps) {
                       suppressHydrationWarning
                       className="px-3 py-1 text-white/80 text-[10px] md:text-xs font-bold uppercase tracking-widest border border-white/20 rounded-full bg-white/10 backdrop-blur-md"
                     >
-                      {new Date(post.frontmatter.date).toLocaleDateString(locale || 'de', {
+                      {new Date(post.frontmatter.date).toLocaleDateString(
-                        year: 'numeric',
+                        ['en', 'de'].includes(locale) ? locale : 'de',
-                        month: 'short',
+                        {
-                        day: 'numeric',
+                          year: 'numeric',
-                      })}
+                          month: 'short',
+                          day: 'numeric',
+                        },
+                      )}
                     </time>
                     {(new Date(post.frontmatter.date) > new Date() ||
                       post.frontmatter.public === false) && (

lib/datasheets.ts

@@ -7,7 +7,7 @@ import path from 'path';
  */
 export function getDatasheetPath(slug: string, locale: string): string | null {
   const datasheetsDir = path.join(process.cwd(), 'public', 'datasheets');
-  
+
   if (!fs.existsSync(datasheetsDir)) {
     return null;
   }
@@ -16,16 +16,21 @@ export function getDatasheetPath(slug: string, locale: string): string | null {
   const normalizedSlug = slug.replace(/-hv$|-mv$/, '');
 
   // Subdirectories to search in
-  const subdirs = ['', 'low-voltage', 'medium-voltage', 'high-voltage', 'solar'];
+  const subdirs = ['', 'products', 'low-voltage', 'medium-voltage', 'high-voltage', 'solar'];
 
   // List of patterns to try for the current locale
+  // Also try with -mv and -hv suffixes since some product slugs omit the voltage class
   const patterns = [
     `${slug}-${locale}.pdf`,
     `${slug}-2-${locale}.pdf`,
     `${slug}-3-${locale}.pdf`,
+    `${slug}-mv-${locale}.pdf`,
+    `${slug}-hv-${locale}.pdf`,
     `${normalizedSlug}-${locale}.pdf`,
     `${normalizedSlug}-2-${locale}.pdf`,
     `${normalizedSlug}-3-${locale}.pdf`,
+    `${normalizedSlug}-mv-${locale}.pdf`,
+    `${normalizedSlug}-hv-${locale}.pdf`,
   ];
 
   for (const subdir of subdirs) {
@@ -44,9 +49,70 @@ export function getDatasheetPath(slug: string, locale: string): string | null {
       `${slug}-en.pdf`,
       `${slug}-2-en.pdf`,
       `${slug}-3-en.pdf`,
+      `${slug}-mv-en.pdf`,
+      `${slug}-hv-en.pdf`,
       `${normalizedSlug}-en.pdf`,
       `${normalizedSlug}-2-en.pdf`,
       `${normalizedSlug}-3-en.pdf`,
+      `${normalizedSlug}-mv-en.pdf`,
+      `${normalizedSlug}-hv-en.pdf`,
+    ];
+    for (const subdir of subdirs) {
+      for (const pattern of enPatterns) {
+        const relativePath = path.join(subdir, pattern);
+        const filePath = path.join(datasheetsDir, relativePath);
+        if (fs.existsSync(filePath)) {
+          return `/datasheets/${relativePath}`;
+        }
+      }
+    }
+  }
+
+  return null;
+}
+
+/**
+ * Finds the datasheet Excel path for a given product slug and locale.
+ * Checks public/datasheets for matching .xlsx files.
+ */
+export function getExcelDatasheetPath(slug: string, locale: string): string | null {
+  const datasheetsDir = path.join(process.cwd(), 'public', 'datasheets');
+
+  if (!fs.existsSync(datasheetsDir)) {
+    return null;
+  }
+
+  const normalizedSlug = slug.replace(/-hv$|-mv$/, '');
+  const subdirs = ['', 'products', 'low-voltage', 'medium-voltage', 'high-voltage', 'solar'];
+
+  const patterns = [
+    `${slug}-${locale}.xlsx`,
+    `${slug}-2-${locale}.xlsx`,
+    `${slug}-3-${locale}.xlsx`,
+    `${normalizedSlug}-${locale}.xlsx`,
+    `${normalizedSlug}-2-${locale}.xlsx`,
+    `${normalizedSlug}-3-${locale}.xlsx`,
+  ];
+
+  for (const subdir of subdirs) {
+    for (const pattern of patterns) {
+      const relativePath = path.join(subdir, pattern);
+      const filePath = path.join(datasheetsDir, relativePath);
+      if (fs.existsSync(filePath)) {
+        return `/datasheets/${relativePath}`;
+      }
+    }
+  }
+
+  // Fallback to English if locale is not 'en'
+  if (locale !== 'en') {
+    const enPatterns = [
+      `${slug}-en.xlsx`,
+      `${slug}-2-en.xlsx`,
+      `${slug}-3-en.xlsx`,
+      `${normalizedSlug}-en.xlsx`,
+      `${normalizedSlug}-2-en.xlsx`,
+      `${normalizedSlug}-3-en.xlsx`,
     ];
     for (const subdir of subdirs) {
       for (const pattern of enPatterns) {

lib/pdf-datasheet.tsx

@@ -1,13 +1,5 @@
 import * as React from 'react';
-import {
+import { Document, Page, View, Text, Image, StyleSheet, Font } from '@react-pdf/renderer';
-  Document,
-  Page,
-  View,
-  Text,
-  Image,
-  StyleSheet,
-  Font,
-} from '@react-pdf/renderer';
 
 // Register fonts (using system fonts for now, can be customized)
 Font.register({
@@ -18,27 +10,43 @@ Font.register({
   ],
 });
 
-// Industrial/technical/restrained design - STYLEGUIDE.md compliant
+// ─── Brand Tokens (matching brochure) ────────────────────────────────────────
+const C = {
+  navy: '#001a4d',
+  navyDeep: '#000d26',
+  green: '#4da612',
+  greenLight: '#e8f5d8',
+  white: '#FFFFFF',
+  offWhite: '#f8f9fa',
+  gray100: '#f3f4f6',
+  gray200: '#e5e7eb',
+  gray300: '#d1d5db',
+  gray400: '#9ca3af',
+  gray600: '#4b5563',
+  gray900: '#111827',
+};
+
+const MARGIN = 56;
+
 const styles = StyleSheet.create({
   page: {
-    color: '#111827', // Text Primary
+    color: C.gray900,
     lineHeight: 1.5,
-    backgroundColor: '#FFFFFF',
+    backgroundColor: C.white,
     paddingTop: 0,
-    paddingBottom: 100,
+    paddingBottom: 80,
     fontFamily: 'Helvetica',
   },
 
   // Hero-style header
   hero: {
-    backgroundColor: '#FFFFFF',
+    backgroundColor: C.white,
     paddingTop: 24,
     paddingBottom: 0,
-    paddingHorizontal: 72,
+    paddingHorizontal: MARGIN,
     marginBottom: 20,
     position: 'relative',
     borderBottomWidth: 0,
-    borderBottomColor: '#e5e7eb',
   },
 
   header: {
@@ -49,17 +57,17 @@ const styles = StyleSheet.create({
   },
 
   logoText: {
-    fontSize: 24,
+    fontSize: 22,
     fontWeight: 700,
-    color: '#000d26',
+    color: C.navyDeep,
-    letterSpacing: 1,
+    letterSpacing: 2,
     textTransform: 'uppercase',
   },
 
   docTitle: {
-    fontSize: 10,
+    fontSize: 8,
     fontWeight: 700,
-    color: '#001a4d',
+    color: C.green,
     letterSpacing: 2,
     textTransform: 'uppercase',
   },
@@ -78,10 +86,10 @@ const styles = StyleSheet.create({
     height: 120,
     justifyContent: 'center',
     alignItems: 'center',
-    borderRadius: 8,
+    borderRadius: 4,
     borderWidth: 1,
-    borderColor: '#e5e7eb',
+    borderColor: C.gray200,
-    backgroundColor: '#FFFFFF',
+    backgroundColor: C.white,
     overflow: 'hidden',
   },
 
@@ -93,7 +101,7 @@ const styles = StyleSheet.create({
   productName: {
     fontSize: 24,
     fontWeight: 700,
-    color: '#000d26',
+    color: C.navyDeep,
     marginBottom: 0,
     textTransform: 'uppercase',
     letterSpacing: -0.5,
@@ -101,7 +109,7 @@ const styles = StyleSheet.create({
 
   productMeta: {
     fontSize: 10,
-    color: '#4b5563',
+    color: C.gray600,
     fontWeight: 700,
     textTransform: 'uppercase',
     letterSpacing: 1,
@@ -115,13 +123,13 @@ const styles = StyleSheet.create({
 
   noImage: {
     fontSize: 8,
-    color: '#9ca3af',
+    color: C.gray400,
     textAlign: 'center',
   },
 
   // Content Area
   content: {
-    paddingHorizontal: 72,
+    paddingHorizontal: MARGIN,
   },
 
   // Content sections
@@ -130,40 +138,40 @@ const styles = StyleSheet.create({
   },
 
   sectionTitle: {
-    fontSize: 14,
+    fontSize: 8,
     fontWeight: 700,
-    color: '#000d26', // Primary Dark
+    color: C.green,
-    marginBottom: 8,
+    marginBottom: 6,
     textTransform: 'uppercase',
-    letterSpacing: -0.2,
+    letterSpacing: 1.5,
   },
 
   sectionAccent: {
     width: 30,
-    height: 3,
+    height: 2,
-    backgroundColor: '#82ed20', // Accent Green
+    backgroundColor: C.green,
     marginBottom: 8,
-    borderRadius: 1.5,
+    borderRadius: 1,
   },
 
   description: {
-    fontSize: 11,
+    fontSize: 10,
     lineHeight: 1.7,
-    color: '#4b5563', // Text Secondary
+    color: C.gray600,
   },
 
   // Technical data table
   specsTable: {
-    marginTop: 8,
+    marginTop: 4,
-    border: '1px solid #e5e7eb',
+    borderWidth: 0,
-    borderRadius: 8,
+    borderRadius: 0,
     overflow: 'hidden',
   },
 
   specsTableRow: {
     flexDirection: 'row',
-    borderBottomWidth: 1,
+    borderBottomWidth: 0.5,
-    borderBottomColor: '#e5e7eb',
+    borderBottomColor: C.gray200,
   },
 
   specsTableRowLast: {
@@ -172,83 +180,85 @@ const styles = StyleSheet.create({
 
   specsTableLabelCell: {
     flex: 1,
-    paddingVertical: 4,
+    paddingVertical: 5,
-    paddingHorizontal: 16,
+    paddingHorizontal: 12,
-    backgroundColor: '#f8f9fa',
+    backgroundColor: C.offWhite,
-    borderRightWidth: 1,
+    borderRightWidth: 0.5,
-    borderRightColor: '#e5e7eb',
+    borderRightColor: C.gray200,
   },
 
   specsTableValueCell: {
     flex: 1,
-    paddingVertical: 4,
+    paddingVertical: 5,
-    paddingHorizontal: 16,
+    paddingHorizontal: 12,
   },
 
   specsTableLabelText: {
-    fontSize: 9,
+    fontSize: 8,
     fontWeight: 700,
-    color: '#000d26',
+    color: C.navyDeep,
     textTransform: 'uppercase',
     letterSpacing: 0.5,
   },
 
   specsTableValueText: {
-    fontSize: 10,
+    fontSize: 9,
-    color: '#111827',
+    color: C.gray900,
-    fontWeight: 500,
+    fontWeight: 400,
   },
 
   // Categories
   categories: {
     flexDirection: 'row',
     flexWrap: 'wrap',
-    gap: 8,
+    gap: 6,
   },
 
   categoryTag: {
-    backgroundColor: '#f8f9fa',
+    backgroundColor: C.offWhite,
-    paddingHorizontal: 12,
+    paddingHorizontal: 10,
-    paddingVertical: 6,
+    paddingVertical: 4,
-    border: '1px solid #e5e7eb',
+    borderWidth: 0.5,
-    borderRadius: 100,
+    borderColor: C.gray200,
+    borderRadius: 3,
   },
 
   categoryText: {
-    fontSize: 8,
+    fontSize: 7,
-    color: '#4b5563',
+    color: C.gray600,
     fontWeight: 700,
     textTransform: 'uppercase',
     letterSpacing: 0.5,
   },
 
-  // Footer
+  // Footer — matches brochure style
   footer: {
     position: 'absolute',
-    bottom: 40,
+    bottom: 28,
-    left: 72,
+    left: MARGIN,
-    right: 72,
+    right: MARGIN,
     flexDirection: 'row',
     justifyContent: 'space-between',
     alignItems: 'center',
-    paddingTop: 24,
+    paddingTop: 12,
-    borderTop: '1px solid #e5e7eb',
+    borderTopWidth: 2,
+    borderTopColor: C.green,
   },
 
   footerText: {
-    fontSize: 8,
+    fontSize: 7,
-    color: '#9ca3af',
+    color: C.gray400,
-    fontWeight: 500,
+    fontWeight: 400,
     textTransform: 'uppercase',
-    letterSpacing: 1,
+    letterSpacing: 0.8,
   },
 
   footerBrand: {
-    fontSize: 10,
+    fontSize: 9,
     fontWeight: 700,
-    color: '#000d26',
+    color: C.navyDeep,
     textTransform: 'uppercase',
-    letterSpacing: 1,
+    letterSpacing: 1.5,
   },
 });
 
@@ -302,10 +312,7 @@ const getLabels = (locale: 'en' | 'de') => {
   return labels[locale];
 };
 
-export const PDFDatasheet: React.FC<PDFDatasheetProps> = ({
+export const PDFDatasheet: React.FC<PDFDatasheetProps> = ({ product, locale }) => {
-  product,
-  locale,
-}) => {
   const labels = getLabels(locale);
 
   return (
@@ -317,9 +324,7 @@ export const PDFDatasheet: React.FC<PDFDatasheetProps> = ({
             <View>
               <Text style={styles.logoText}>KLZ</Text>
             </View>
-            <Text style={styles.docTitle}>
+            <Text style={styles.docTitle}>{labels.productDatasheet}</Text>
-              {labels.productDatasheet}
-            </Text>
           </View>
 
           <View style={styles.productRow}>
@@ -328,7 +333,8 @@ export const PDFDatasheet: React.FC<PDFDatasheetProps> = ({
                 <View style={styles.categories}>
                   {product.categories.map((cat, index) => (
                     <Text key={index} style={styles.productMeta}>
-                      {cat.name}{index < product.categories.length - 1 ? ' • ' : ''}
+                      {cat.name}
+                      {index < product.categories.length - 1 ? ' • ' : ''}
                     </Text>
                   ))}
                 </View>
@@ -337,12 +343,8 @@ export const PDFDatasheet: React.FC<PDFDatasheetProps> = ({
             </View>
             <View style={styles.productImageCol}>
               {product.featuredImage ? (
-                <Image
+                <Image src={product.featuredImage} style={styles.heroImage} />
-                  src={product.featuredImage}
-                  style={styles.heroImage}
-                />
               ) : (
-
                 <Text style={styles.noImage}>{labels.noImage}</Text>
               )}
             </View>
@@ -356,7 +358,11 @@ export const PDFDatasheet: React.FC<PDFDatasheetProps> = ({
               <Text style={styles.sectionTitle}>{labels.description}</Text>
               <View style={styles.sectionAccent} />
               <Text style={styles.description}>
-                {stripHtml(product.applicationHtml || product.shortDescriptionHtml || product.descriptionHtml)}
+                {stripHtml(
+                  product.applicationHtml ||
+                    product.shortDescriptionHtml ||
+                    product.descriptionHtml,
+                )}
               </Text>
             </View>
           )}
@@ -372,17 +378,14 @@ export const PDFDatasheet: React.FC<PDFDatasheetProps> = ({
                     key={index}
                     style={[
                       styles.specsTableRow,
-                      index === product.attributes.length - 1 &&
+                      index === product.attributes.length - 1 && styles.specsTableRowLast,
-                      styles.specsTableRowLast,
                     ]}
                   >
                     <View style={styles.specsTableLabelCell}>
                       <Text style={styles.specsTableLabelText}>{attr.name}</Text>
                     </View>
                     <View style={styles.specsTableValueCell}>
-                      <Text style={styles.specsTableValueText}>
+                      <Text style={styles.specsTableValueText}>{attr.options.join(', ')}</Text>
-                        {attr.options.join(', ')}
-                      </Text>
                     </View>
                   </View>
                 ))}

lib/utils/technical.ts

@@ -0,0 +1,104 @@
+/**
+ * Utility for formatting technical data values.
+ * Handles long lists of standards and simplifies repetitive strings.
+ */
+
+export interface FormattedTechnicalValue {
+  original: string;
+  isList: boolean;
+  parts: string[];
+  displayValue: string;
+}
+
+/**
+ * Formats a technical value string.
+ * Detects if it's a list (separated by / or ,) and tries to clean it up.
+ */
+export function formatTechnicalValue(value: string | null | undefined): FormattedTechnicalValue {
+  if (!value) {
+    return { original: '', isList: false, parts: [], displayValue: '' };
+  }
+
+  const str = String(value).trim();
+
+  // Detect list separators
+  let parts: string[] = [];
+  if (str.includes(' / ')) {
+    parts = str.split(' / ').map((p) => p.trim());
+  } else if (str.includes(' /')) {
+    parts = str.split(' /').map((p) => p.trim());
+  } else if (str.includes('/ ')) {
+    parts = str.split('/ ').map((p) => p.trim());
+  } else if (str.split('/').length > 2) {
+    // Check if it's actually many standards separated by / without spaces
+    // e.g. EN123/EN456/EN789
+    const split = str.split('/');
+    if (split.length > 3) {
+      parts = split.map((p) => p.trim());
+    }
+  }
+
+  // If no parts found yet, try comma
+  if (parts.length === 0 && str.includes(', ')) {
+    parts = str.split(', ').map((p) => p.trim());
+  }
+
+  // Filter out empty parts
+  parts = parts.filter(Boolean);
+
+  // If we have parts, let's see if we can simplify them
+  if (parts.length > 2) {
+    // Find common prefix to condense repetitive standards
+    let commonPrefix = '';
+    const first = parts[0];
+    const last = parts[parts.length - 1];
+    let i = 0;
+    while (i < first.length && first.charAt(i) === last.charAt(i)) {
+      i++;
+    }
+    commonPrefix = first.substring(0, i);
+
+    // If a meaningful prefix exists (e.g., "EN 60 332-1-")
+    if (commonPrefix.length > 4) {
+      const suffixParts: string[] = [];
+
+      for (let idx = 0; idx < parts.length; idx++) {
+        if (idx === 0) {
+          suffixParts.push(parts[idx]);
+        } else {
+          const suffix = parts[idx].substring(commonPrefix.length).trim();
+          if (suffix) {
+            suffixParts.push(suffix);
+          }
+        }
+      }
+
+      // Condense into a single string like "EN 60 332-1-2 / -3 / -4"
+      // Wait, returning a single string might still wrap badly.
+      // Instead, we return them as chunks or just a condensed string.
+      const condensedString = suffixParts[0] + ' / -' + suffixParts.slice(1).join(' / -');
+
+      return {
+        original: str,
+        isList: false, // Turn off badge rendering to use text block instead
+        parts: [condensedString],
+        displayValue: condensedString,
+      };
+    }
+
+    // If no common prefix, return as list so UI can render badges
+    return {
+      original: str,
+      isList: true,
+      parts,
+      displayValue: parts.join(', '),
+    };
+  }
+
+  return {
+    original: str,
+    isList: false,
+    parts: [str],
+    displayValue: str,
+  };
+}

messages/de.json

@@ -226,6 +226,10 @@
     "requestQuoteDesc": "Erhalten Sie technische Spezifikationen und Preise für Ihr Projekt.",
     "downloadDatasheet": "Datenblatt herunterladen",
     "downloadDatasheetDesc": "Erhalten Sie die vollständigen technischen Spezifikationen als PDF.",
+    "downloadExcel": "Excel herunterladen",
+    "downloadExcelDesc": "Erhalten Sie die technischen Daten als editierbare Tabelle.",
+    "downloadBrochure": "Produktbroschüre",
+    "downloadBrochureDesc": "Laden Sie unseren kompletten Produktkatalog mit allen technischen Spezifikationen herunter.",
     "form": {
       "contactInfo": "Kontaktinformationen",
       "projectDetails": "Projektdetails",
@@ -395,5 +399,21 @@
       "description": "Es scheint, als wäre das Kabel zu dieser Seite unterbrochen worden. Wir konnten die gesuchte Ressource nicht finden.",
       "cta": "Zurück zur Sicherheit"
     }
+  },
+  "Brochure": {
+    "title": "Produktkatalog",
+    "subtitle": "Erhalten Sie unsere komplette Produktbroschüre mit allen technischen Spezifikationen und Kabellösungen.",
+    "emailPlaceholder": "ihre@email.de",
+    "emailLabel": "E-Mail-Adresse",
+    "submit": "Broschüre erhalten",
+    "submitting": "Wird gesendet...",
+    "successTitle": "Ihre Broschüre ist bereit!",
+    "successDesc": "Vielen Dank für Ihr Interesse. Klicken Sie unten, um den kompletten KLZ-Produktkatalog herunterzuladen.",
+    "download": "Broschüre herunterladen",
+    "privacyNote": "Mit dem Absenden erklären Sie sich mit unserer Datenschutzerklärung einverstanden.",
+    "close": "Schließen",
+    "ctaTitle": "Kompletter Produktkatalog",
+    "ctaDesc": "Alle Datenblätter in einem Premium-PDF — technische Spezifikationen, Kabellösungen & mehr.",
+    "ctaButton": "Kostenlose Broschüre erhalten"
   }
-}
+}

messages/en.json

@@ -226,6 +226,10 @@
     "requestQuoteDesc": "Get technical specifications and pricing for your project.",
     "downloadDatasheet": "Download Datasheet",
     "downloadDatasheetDesc": "Get the full technical specifications in PDF format.",
+    "downloadExcel": "Download Excel",
+    "downloadExcelDesc": "Get the technical data as editable spreadsheet.",
+    "downloadBrochure": "Product Brochure",
+    "downloadBrochureDesc": "Download our complete product catalog with all technical specifications.",
     "form": {
       "contactInfo": "Contact Information",
       "projectDetails": "Project Details",
@@ -395,5 +399,21 @@
       "description": "It seems the cable to this page has been disconnected. We couldn't find the resource you were looking for.",
       "cta": "Back to Safety"
     }
+  },
+  "Brochure": {
+    "title": "Product Catalog",
+    "subtitle": "Get our complete product brochure with all technical specifications and cable solutions.",
+    "emailPlaceholder": "your@email.com",
+    "emailLabel": "Email Address",
+    "submit": "Get Brochure",
+    "submitting": "Sending...",
+    "successTitle": "Your brochure is ready!",
+    "successDesc": "Thank you for your interest. Click below to download the complete KLZ product catalog.",
+    "download": "Download Brochure",
+    "privacyNote": "By submitting you agree to our privacy policy.",
+    "close": "Close",
+    "ctaTitle": "Complete Product Catalog",
+    "ctaDesc": "All datasheets in one premium PDF — technical specifications, cable solutions & more.",
+    "ctaButton": "Get Free Brochure"
   }
 }

middleware.ts

@@ -102,7 +102,7 @@ export default async function middleware(request: NextRequest) {
 
 export const config = {
   matcher: [
-    '/((?!api|_next/static|_next/image|favicon.ico|admin|manifest.webmanifest|.*\\.(?:svg|png|jpg|jpeg|gif|webp|pdf|txt|vcf|xml|webm|mp4|map)$).*)',
+    '/((?!api|_next/static|_next/image|favicon.ico|admin|manifest.webmanifest|.*\\.(?:svg|png|jpg|jpeg|gif|webp|pdf|xlsx|txt|vcf|xml|webm|mp4|map)$).*)',
     '/(de|en)/:path*',
   ],
 };

next-env.d.ts

@@ -1,6 +1,6 @@
 /// <reference types="next" />
 /// <reference types="next/image-types/global" />
-import "./.next/dev/types/routes.d.ts";
+import "./.next/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

@@ -25,6 +25,18 @@ const nextConfig = {
     },
   },
   ...(isProd ? { output: 'standalone' } : {}),
+  async rewrites() {
+    return [
+      {
+        source: '/:locale/datasheets/:path*',
+        destination: '/datasheets/:path*',
+      },
+      {
+        source: '/:locale/brochure/:path*',
+        destination: '/brochure/:path*',
+      },
+    ];
+  },
   async headers() {
     const isProd = process.env.NODE_ENV === 'production';
     const umamiDomain = new URL(process.env.UMAMI_API_ENDPOINT || 'https://analytics.infra.mintel.me').origin;
@@ -79,7 +91,7 @@ const nextConfig = {
       },
       {
         key: 'Strict-Transport-Security',
-        value: 'max-age=63072000; includeSubDomains; preload',
+        value: isProd ? 'max-age=63072000; includeSubDomains; preload' : 'max-age=0',
       },
     ];
 
@@ -393,6 +405,7 @@ const nextConfig = {
     ];
   },
   images: {
+    qualities: [75, 100],
     formats: ['image/webp'],
     deviceSizes: [640, 750, 828, 1080, 1200, 1920, 2048, 3840],
     remotePatterns: [

package.json

@@ -101,6 +101,7 @@
     "typecheck": "tsc --noEmit",
     "test": "vitest run --passWithNoTests",
     "test:og": "vitest run tests/og-image.test.ts",
+    "test:e2e": "vitest run tests/*.e2e.test.ts",
     "check:og": "tsx scripts/check-og-images.ts",
     "check:a11y": "pa11y-ci",
     "check:wcag": "tsx ./scripts/wcag-sitemap.ts",
@@ -115,6 +116,8 @@
     "check:apis": "tsx ./scripts/check-apis.ts",
     "pdf:datasheets": "tsx ./scripts/generate-pdf-datasheets.ts",
     "pdf:datasheets:legacy": "tsx ./scripts/generate-pdf-datasheets-pdf-lib.ts",
+    "excel:datasheets": "tsx ./scripts/generate-excel-datasheets.ts",
+    "brochure:generate": "tsx ./scripts/generate-brochure.ts",
     "cms:migrate": "payload migrate",
     "cms:seed": "tsx ./scripts/seed-payload.ts",
     "assets:push:testing": "bash ./scripts/assets-sync.sh local testing",

payload-types.ts

@@ -249,7 +249,7 @@ export interface FormSubmission {
   id: number;
   name: string;
   email: string;
-  type: 'contact' | 'product_quote';
+  type: 'contact' | 'product_quote' | 'brochure_download';
   /**
    * The specific KLZ product the user requested a quote for.
    */