traefik

.env.example

@@ -40,6 +40,14 @@ MAIL_RECIPIENTS=info@klz-cables.com
 # ────────────────────────────────────────────────────────────────────────────
 LOG_LEVEL=info
 
+# ────────────────────────────────────────────────────────────────────────────
+# Deployment Configuration (CI/CD only)
+# ────────────────────────────────────────────────────────────────────────────
+# These are typically set by the CI/CD workflow
+IMAGE_TAG=latest
+TRAEFIK_HOST=klz-cables.com
+ENV_FILE=.env
+
 # ────────────────────────────────────────────────────────────────────────────
 # Varnish Cache (Docker only)
 # ────────────────────────────────────────────────────────────────────────────
@@ -61,7 +69,11 @@ VARNISH_CACHE_SIZE=256m
 # ──────────────────
 # 1. Build-time: Only NEXT_PUBLIC_* vars are needed (via --build-arg)
 # 2. Runtime: All vars are loaded from .env file on the server
-# 3. The .env file should exist at: /home/deploy/sites/klz-cables.com/.env
+# 3. Branch Deployments:
+#    - main branch uses .env.prod
+#    - staging branch uses .env.staging
+#    - CI/CD supports STAGING_ prefix for all secrets to override defaults
+#    - TRAEFIK_HOST is automatically derived from NEXT_PUBLIC_BASE_URL
 #
 # Security:
 # ─────────

.gitea/workflows/deploy.yml

@@ -2,7 +2,7 @@ name: Build & Deploy KLZ Cables
 
 on:
   push:
-    branches: [main]
+    branches: [main, staging]
 
 jobs:
   build-and-deploy:
@@ -15,6 +15,7 @@ jobs:
       - name: 📋 Log Workflow Start
         run: |
           echo "🚀 Starting deployment for ${{ github.repository }} (${{ github.ref }})"
+          echo "  • Branch: ${{ github.ref_name }}"
           echo "  • Commit: ${{ github.sha }}"
           echo "  • Timestamp: $(date -u +'%Y-%m-%d %H:%M:%S UTC')"
 
@@ -33,23 +34,54 @@ jobs:
       # LOGGING: Build Phase
       # ═══════════════════════════════════════════════════════════════════════════════
       - name: 🏗️ Build Docker image
+        env:
+          NEXT_PUBLIC_BASE_URL: ${{ github.ref_name == 'main' && secrets.NEXT_PUBLIC_BASE_URL || (secrets.STAGING_NEXT_PUBLIC_BASE_URL || secrets.NEXT_PUBLIC_BASE_URL) }}
+          NEXT_PUBLIC_UMAMI_WEBSITE_ID: ${{ github.ref_name == 'main' && secrets.NEXT_PUBLIC_UMAMI_WEBSITE_ID || (secrets.STAGING_NEXT_PUBLIC_UMAMI_WEBSITE_ID || secrets.NEXT_PUBLIC_UMAMI_WEBSITE_ID) }}
+          NEXT_PUBLIC_UMAMI_SCRIPT_URL: ${{ github.ref_name == 'main' && secrets.NEXT_PUBLIC_UMAMI_SCRIPT_URL || (secrets.STAGING_NEXT_PUBLIC_UMAMI_SCRIPT_URL || secrets.NEXT_PUBLIC_UMAMI_SCRIPT_URL) }}
         run: |
-          echo "🏗️ Building Docker image (linux/arm64)..."
+          echo "🏗️ Building Docker image (linux/arm64) for branch ${{ github.ref_name }}..."
           docker buildx build \
             --pull \
             --platform linux/arm64 \
-            --build-arg NEXT_PUBLIC_BASE_URL="${{ secrets.NEXT_PUBLIC_BASE_URL }}" \
-            --build-arg NEXT_PUBLIC_UMAMI_WEBSITE_ID="${{ secrets.NEXT_PUBLIC_UMAMI_WEBSITE_ID }}" \
-            --build-arg NEXT_PUBLIC_UMAMI_SCRIPT_URL="${{ secrets.NEXT_PUBLIC_UMAMI_SCRIPT_URL }}" \
+            --build-arg NEXT_PUBLIC_BASE_URL="$NEXT_PUBLIC_BASE_URL" \
+            --build-arg NEXT_PUBLIC_UMAMI_WEBSITE_ID="$NEXT_PUBLIC_UMAMI_WEBSITE_ID" \
+            --build-arg NEXT_PUBLIC_UMAMI_SCRIPT_URL="$NEXT_PUBLIC_UMAMI_SCRIPT_URL" \
+            -t registry.infra.mintel.me/mintel/klz-cables.com:${{ github.sha }} \
             -t registry.infra.mintel.me/mintel/klz-cables.com:latest \
             --push .
 
       # ═══════════════════════════════════════════════════════════════════════════════
       # LOGGING: Deployment Phase
       # ═══════════════════════════════════════════════════════════════════════════════
-      - name: 🚀 Deploy to production server
+      - name: 🚀 Deploy to server
+        env:
+          NEXT_PUBLIC_BASE_URL: ${{ github.ref_name == 'main' && secrets.NEXT_PUBLIC_BASE_URL || (secrets.STAGING_NEXT_PUBLIC_BASE_URL || secrets.NEXT_PUBLIC_BASE_URL) }}
+          NEXT_PUBLIC_UMAMI_WEBSITE_ID: ${{ github.ref_name == 'main' && secrets.NEXT_PUBLIC_UMAMI_WEBSITE_ID || (secrets.STAGING_NEXT_PUBLIC_UMAMI_WEBSITE_ID || secrets.NEXT_PUBLIC_UMAMI_WEBSITE_ID) }}
+          NEXT_PUBLIC_UMAMI_SCRIPT_URL: ${{ github.ref_name == 'main' && secrets.NEXT_PUBLIC_UMAMI_SCRIPT_URL || (secrets.STAGING_NEXT_PUBLIC_UMAMI_SCRIPT_URL || secrets.NEXT_PUBLIC_UMAMI_SCRIPT_URL) }}
+          SENTRY_DSN: ${{ github.ref_name == 'main' && secrets.SENTRY_DSN || (secrets.STAGING_SENTRY_DSN || secrets.SENTRY_DSN) }}
+          MAIL_HOST: ${{ github.ref_name == 'main' && secrets.MAIL_HOST || (secrets.STAGING_MAIL_HOST || secrets.MAIL_HOST) }}
+          MAIL_PORT: ${{ github.ref_name == 'main' && secrets.MAIL_PORT || (secrets.STAGING_MAIL_PORT || secrets.MAIL_PORT) }}
+          MAIL_USERNAME: ${{ github.ref_name == 'main' && secrets.MAIL_USERNAME || (secrets.STAGING_MAIL_USERNAME || secrets.MAIL_USERNAME) }}
+          MAIL_PASSWORD: ${{ github.ref_name == 'main' && secrets.MAIL_PASSWORD || (secrets.STAGING_MAIL_PASSWORD || secrets.MAIL_PASSWORD) }}
+          MAIL_FROM: ${{ github.ref_name == 'main' && secrets.MAIL_FROM || (secrets.STAGING_MAIL_FROM || secrets.MAIL_FROM) }}
+          MAIL_RECIPIENTS: ${{ github.ref_name == 'main' && secrets.MAIL_RECIPIENTS || (secrets.STAGING_MAIL_RECIPIENTS || secrets.MAIL_RECIPIENTS) }}
         run: |
-          echo "🚀 Deploying to alpha.mintel.me..."
+          BRANCH=${{ github.ref_name }}
+          
+          # Derive domain from NEXT_PUBLIC_BASE_URL (strip https:// and trailing slash)
+          DOMAIN=$(echo "$NEXT_PUBLIC_BASE_URL" | sed -E 's|https?://||' | sed -E 's|/.*||')
+          
+          if [ "$BRANCH" = "main" ]; then
+            ENV_FILE=.env.prod
+            # For production, we want both root and www
+            TRAEFIK_HOST="\`$DOMAIN\`, \`www.$DOMAIN\`"
+          else
+            ENV_FILE=.env.staging
+            TRAEFIK_HOST="\`$DOMAIN\`"
+          fi
+          
+          echo "🚀 Deploying branch $BRANCH to $ENV_FILE..."
+          echo "🌐 Domain: $DOMAIN"
           
           # Setup SSH
           mkdir -p ~/.ssh
@@ -60,60 +92,61 @@ jobs:
           # Create .env file content
           cat > /tmp/klz-cables.env << EOF
           # ============================================================================
-          # KLZ Cables - Production Environment Configuration
+          # KLZ Cables - Environment Configuration ($BRANCH)
           # ============================================================================
           # Auto-generated by CI/CD workflow
           # DO NOT EDIT MANUALLY - Changes will be overwritten on next deployment
           # ============================================================================
           
-          # Application
           NODE_ENV=production
-          NEXT_PUBLIC_BASE_URL=${{ secrets.NEXT_PUBLIC_BASE_URL }}
-          
-          # Analytics (Umami)
-          NEXT_PUBLIC_UMAMI_WEBSITE_ID=${{ secrets.NEXT_PUBLIC_UMAMI_WEBSITE_ID }}
-          NEXT_PUBLIC_UMAMI_SCRIPT_URL=${{ secrets.NEXT_PUBLIC_UMAMI_SCRIPT_URL }}
-          
-          # Error Tracking (GlitchTip/Sentry)
-          SENTRY_DSN=${{ secrets.SENTRY_DSN }}
-          
-          # Email Configuration (Mailgun)
-          MAIL_HOST=${{ secrets.MAIL_HOST }}
-          MAIL_PORT=${{ secrets.MAIL_PORT }}
-          MAIL_USERNAME=${{ secrets.MAIL_USERNAME }}
-          MAIL_PASSWORD=${{ secrets.MAIL_PASSWORD }}
-          MAIL_FROM=${{ secrets.MAIL_FROM }}
-          MAIL_RECIPIENTS=${{ secrets.MAIL_RECIPIENTS }}
+          NEXT_PUBLIC_BASE_URL=$NEXT_PUBLIC_BASE_URL
+          NEXT_PUBLIC_UMAMI_WEBSITE_ID=$NEXT_PUBLIC_UMAMI_WEBSITE_ID
+          NEXT_PUBLIC_UMAMI_SCRIPT_URL=$NEXT_PUBLIC_UMAMI_SCRIPT_URL
+          SENTRY_DSN=$SENTRY_DSN
+          MAIL_HOST=$MAIL_HOST
+          MAIL_PORT=$MAIL_PORT
+          MAIL_USERNAME=$MAIL_USERNAME
+          MAIL_PASSWORD=$MAIL_PASSWORD
+          MAIL_FROM=$MAIL_FROM
+          MAIL_RECIPIENTS=$MAIL_RECIPIENTS
           
+          # Deployment variables for docker-compose
+          IMAGE_TAG=${{ github.sha }}
+          TRAEFIK_HOST=$TRAEFIK_HOST
+          ENV_FILE=$ENV_FILE
           EOF
           
-          # Upload .env and deploy
-          scp -o StrictHostKeyChecking=accept-new /tmp/klz-cables.env root@alpha.mintel.me:/home/deploy/sites/klz-cables.com/.env
+          # Upload .env and docker-compose.yml
+          scp -o StrictHostKeyChecking=accept-new /tmp/klz-cables.env root@alpha.mintel.me:/home/deploy/sites/klz-cables.com/$ENV_FILE
+          scp -o StrictHostKeyChecking=accept-new docker-compose.yml root@alpha.mintel.me:/home/deploy/sites/klz-cables.com/docker-compose.yml
           
           ssh -o StrictHostKeyChecking=accept-new root@alpha.mintel.me bash << EOF
           set -e
           cd /home/deploy/sites/klz-cables.com
           
-          chmod 600 .env
-          chown deploy:deploy .env
+          chmod 600 $ENV_FILE
+          chown deploy:deploy $ENV_FILE
           
           echo "${{ secrets.REGISTRY_PASS }}" | docker login registry.infra.mintel.me -u "${{ secrets.REGISTRY_USER }}" --password-stdin
-          docker pull registry.infra.mintel.me/mintel/klz-cables.com:latest
           
-          docker-compose down
+          echo "📥 Pulling images..."
+          IMAGE_TAG=${{ github.sha }} ENV_FILE=$ENV_FILE TRAEFIK_HOST="$TRAEFIK_HOST" docker compose --env-file $ENV_FILE pull
           
           echo "🚀 Starting containers..."
-          docker-compose up -d
+          IMAGE_TAG=${{ github.sha }} ENV_FILE=$ENV_FILE TRAEFIK_HOST="$TRAEFIK_HOST" docker compose --env-file $ENV_FILE up -d
+          
+          echo "🧹 Cleaning up old images..."
+          docker system prune -f
           
           echo "⏳ Giving the app a few seconds to warm up..."
           sleep 10
           
           echo "🔍 Checking container status..."
-          docker-compose ps
+          docker compose --env-file $ENV_FILE ps
           
-          if ! docker-compose ps | grep -q "Up"; then
+          if ! docker compose --env-file $ENV_FILE ps | grep -q "Up"; then
             echo "❌ Container failed to start"
-            docker-compose logs --tail=100
+            docker compose --env-file $ENV_FILE logs --tail=100
             exit 1
           fi
 
@@ -130,6 +163,7 @@ jobs:
         run: |
           echo "📊 Status: ${{ job.status }}"
           echo "🎯 Target: alpha.mintel.me"
+          echo "🌿 Branch: ${{ github.ref_name }}"
 
       # ═══════════════════════════════════════════════════════════════════════════════
       # NOTIFICATION: Gotify
@@ -140,7 +174,7 @@ jobs:
           echo "Sending success notification to Gotify..."
           RESPONSE=$(curl -k -s -w "\n%{http_code}" -X POST "${{ secrets.GOTIFY_URL }}/message?token=${{ secrets.GOTIFY_TOKEN }}" \
             -F "title=✅ Deployment Success: ${{ github.repository }}" \
-            -F "message=The deployment of ${{ github.repository }} (branch: ${{ github.ref }}) was successful.
+            -F "message=The deployment of ${{ github.repository }} (branch: ${{ github.ref_name }}) was successful.
             
             Commit: ${{ github.sha }}
             Actor: ${{ github.actor }}
@@ -164,7 +198,7 @@ jobs:
           echo "Sending failure notification to Gotify..."
           RESPONSE=$(curl -k -s -w "\n%{http_code}" -X POST "${{ secrets.GOTIFY_URL }}/message?token=${{ secrets.GOTIFY_TOKEN }}" \
             -F "title=❌ Deployment Failed: ${{ github.repository }}" \
-            -F "message=The deployment of ${{ github.repository }} (branch: ${{ github.ref }}) failed!
+            -F "message=The deployment of ${{ github.repository }} (branch: ${{ github.ref_name }}) failed!
             
             Commit: ${{ github.sha }}
             Actor: ${{ github.actor }}

README.md

@@ -103,7 +103,7 @@ app/
 ├── api/
 │   └── contact/route.ts # Contact API
 ├── sitemap.ts          # Sitemap generator
-└── robots.ts           # Robots.txt generator
+├── robots.ts           # Robots.txt generator
 
 lib/
 ├── data.ts             # Data access
@@ -114,7 +114,7 @@ components/
 ├── LocaleSwitcher.tsx  # Language switcher
 ├── ContactForm.tsx     # Contact form
 ├── CookieConsent.tsx   # GDPR banner
-└── SEO.tsx             # SEO utilities
+├── SEO.tsx             # SEO utilities
 
 data/
 ├── raw/                # WordPress export
@@ -222,21 +222,30 @@ GET /robots.txt
 
 ### Automatic Deployment (Current Setup)
 
-The project uses **Gitea Actions** for CI/CD. Every push to `main` triggers:
+The project uses **Gitea Actions** for CI/CD. Every push to `main` or `staging` triggers:
 
-1. **Build**: Docker image built for `linux/arm64`
-2. **Push**: Image pushed to `registry.infra.mintel.me`
-3. **Deploy**: SSH to production server, pull and restart containers
+1. **Build**: Docker image built for `linux/arm64` with branch-specific build args
+2. **Push**: Image pushed to `registry.infra.mintel.me` with commit SHA tag
+3. **Deploy**: SSH to production server, pull and restart containers using branch-specific `.env` files
 
 **Workflow**: `.gitea/workflows/deploy.yml`
 
+**Branch Deployments**:
+- `main` branch: Deploys to production using `.env.prod`
+- `staging` branch: Deploys to staging using `.env.staging`
+
+**Environment Overrides**:
+The CI/CD workflow supports `STAGING_`-prefixed secrets (e.g., `STAGING_NEXT_PUBLIC_BASE_URL`) to override default secrets when deploying the `staging` branch.
+
 **Required Secrets** (configure in Gitea repository settings):
 - `REGISTRY_USER` - Docker registry username
 - `REGISTRY_PASS` - Docker registry password
 - `ALPHA_SSH_KEY` - SSH private key for deployment
+- `NEXT_PUBLIC_BASE_URL` - Application base URL (e.g., `https://klz-cables.com`)
 - `NEXT_PUBLIC_UMAMI_WEBSITE_ID` - Analytics ID
 - `NEXT_PUBLIC_UMAMI_SCRIPT_URL` - Analytics script URL
 - `SENTRY_DSN` - Error tracking DSN
+- `MAIL_HOST`, `MAIL_PORT`, `MAIL_USERNAME`, `MAIL_PASSWORD`, `MAIL_FROM`, `MAIL_RECIPIENTS` - Email configuration
 
 ### Manual Deployment
 

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

@@ -63,7 +63,7 @@ export async function GET(
         title={product.frontmatter.title}
         description={product.frontmatter.description}
         label={product.frontmatter.categories?.[0] || 'Product'}
-        image={featuredImage}
+        image={featuredImage?.startsWith('http') ? featuredImage : undefined}
       />
     ),
     {

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

@@ -25,7 +25,7 @@ export default async function Image({ params: { locale, slug } }: { params: { lo
         title={post.frontmatter.title}
         description={post.frontmatter.excerpt}
         label={post.frontmatter.category || 'Blog'}
-        image={featuredImage}
+        image={featuredImage?.startsWith('http') ? featuredImage : undefined}
       />
     ),
     {

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

@@ -5,6 +5,7 @@ import ProductSidebar from '@/components/ProductSidebar';
 import ProductTabs from '@/components/ProductTabs';
 import ProductTechnicalData from '@/components/ProductTechnicalData';
 import RelatedProducts from '@/components/RelatedProducts';
+import DatasheetDownload from '@/components/DatasheetDownload';
 import { Badge, Container, Heading, Section } from '@/components/ui';
 import { getDatasheetPath } from '@/lib/datasheets';
 import { getAllProducts, getProductBySlug } from '@/lib/mdx';
@@ -362,6 +363,19 @@ export default async function ProductPage({ params }: ProductPageProps) {
                  <MDXRemote source={processedContent} components={productComponents} />
               </div>
 
+              {/* Datasheet Download Section - Only for Medium Voltage for now */}
+              {categoryFileSlug === 'medium-voltage-cables' && datasheetPath && (
+                <div className="mt-24 pt-24 border-t-2 border-neutral-dark/5">
+                  <div className="mb-12">
+                    <h2 className="text-3xl md:text-4xl font-black text-primary tracking-tighter uppercase mb-4">
+                      {t('downloadDatasheet')}
+                    </h2>
+                    <div className="h-1.5 w-24 bg-accent rounded-full" />
+                  </div>
+                  <DatasheetDownload datasheetPath={datasheetPath} />
+                </div>
+              )}
+
               {/* Structured Data */}
               <JsonLd
                 id={`jsonld-${product.slug}`}

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

@@ -72,7 +72,7 @@ export default async function Image({ params: { locale, slug } }: { params: { lo
         title={product.frontmatter.title}
         description={product.frontmatter.description}
         label={product.frontmatter.categories?.[0] || 'Product'}
-        image={featuredImage}
+        image={featuredImage?.startsWith('http') ? featuredImage : undefined}
       />
     ),
     {

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

@@ -15,7 +15,6 @@ export default async function Image({ params: { locale } }: { params: { locale:
         title={title}
         description={description}
         label="Our Team"
-        image="https://klz-cables.com/uploads/2024/12/DSC07655-Large.webp"
       />
     ),
     {

components/DatasheetDownload.tsx

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

components/OGImageTemplate.tsx

@@ -29,7 +29,6 @@ export function OGImageTemplate({
     backgroundColor: mode === 'light' ? '#ffffff' : primaryBlue,
     padding: '80px',
     position: 'relative',
-    fontFamily: 'Inter, sans-serif',
   };
 
   return (
@@ -39,7 +38,10 @@ export function OGImageTemplate({
         <div
           style={{
             position: 'absolute',
-            inset: 0,
+            top: 0,
+            left: 0,
+            right: 0,
+            bottom: 0,
             display: 'flex',
           }}
         >
@@ -57,8 +59,11 @@ export function OGImageTemplate({
           <div
             style={{
               position: 'absolute',
-              inset: 0,
-              background: 'linear-gradient(to right, rgba(0,26,77,0.9) 0%, rgba(0,26,77,0.4) 100%)',
+              top: 0,
+              left: 0,
+              right: 0,
+              bottom: 0,
+              background: 'linear-gradient(to right, rgba(0,26,77,0.9), rgba(0,26,77,0.4))',
             }}
           />
         </div>
@@ -72,8 +77,8 @@ export function OGImageTemplate({
           right: '-100px',
           width: '600px',
           height: '600px',
-          borderRadius: '50%',
-          background: `radial-gradient(circle, ${accentGreen}1a 0%, transparent 70%)`,
+          borderRadius: '300px',
+          backgroundColor: `${accentGreen}1a`,
           display: 'flex',
         }}
       />

components/ProductSidebar.tsx

@@ -3,6 +3,7 @@
 import Image from 'next/image';
 import { useTranslations } from 'next-intl';
 import RequestQuoteForm from '@/components/RequestQuoteForm';
+import DatasheetDownload from '@/components/DatasheetDownload';
 import Scribble from '@/components/Scribble';
 import { cn } from '@/components/ui/utils';
 
@@ -64,33 +65,7 @@ export default function ProductSidebar({ productName, productImage, datasheetPat
 
       {/* Datasheet Download */}
       {datasheetPath && (
-        <a 
-          href={datasheetPath} 
-          target="_blank"
-          rel="noopener noreferrer"
-          className="block bg-white rounded-2xl border border-neutral-medium overflow-hidden group transition-all duration-500 hover:shadow-xl hover:border-saturated/30 hover:-translate-y-0.5"
-        >
-          <div className="p-4 flex items-center gap-4">
-            <div className="w-12 h-12 rounded-xl bg-neutral-medium/20 flex items-center justify-center flex-shrink-0 group-hover:bg-saturated group-hover:text-white transition-all duration-500 text-saturated border border-transparent group-hover:border-white/20">
-              <svg className="w-6 h-6 transition-transform duration-500 group-hover:scale-110" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-                <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={1.5} d="M12 10v6m0 0l-3-3m3 3l3-3m2 8H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z" />
-              </svg>
-            </div>
-            <div className="flex-1 min-w-0">
-              <h3 className="text-sm md:text-base font-heading font-black text-neutral-dark m-0 uppercase tracking-tighter leading-tight group-hover:text-saturated transition-colors duration-300">
-                {t('downloadDatasheet')}
-              </h3>
-              <p className="text-text-secondary text-[10px] md:text-xs m-0 mt-0.5 font-semibold leading-tight truncate uppercase tracking-widest opacity-60">
-                {t('downloadDatasheetDesc')}
-              </p>
-            </div>
-            <div className="text-neutral-dark/20 group-hover:text-saturated transition-all duration-500 transform group-hover:translate-x-1">
-              <svg className="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-                <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2.5} d="M9 5l7 7-7 7" />
-              </svg>
-            </div>
-          </div>
-        </a>
+        <DatasheetDownload datasheetPath={datasheetPath} className="mt-0" />
       )}
     </div>
   );

data/pages/de/agbs.mdx

@@ -5,7 +5,7 @@ featuredImage: null
 locale: de
 ---
 
-*Stand November 2024*
+*Stand Januar 2026*
 
 ## 1. Allgemeines
 
@@ -21,13 +21,12 @@ Sofern nicht ausdrücklich als bindend bezeichnet, sind unsere Angebote freiblei
 
 ## 3. Preise
 
-Alle von uns genannten Preise verstehen sich zzgl. der jeweiligen gesetzlichen Mehrwertsteuer vor Metallzuschlag fracht- frei innerhalb der Bundesrepublik Deutschland (Festland), jedoch ohne Abladen. Die Verkaufspreise, soweit sie als Hohlpreis deklariert sind, enthalten keinerlei Metallwerte. Diese werden zusätzlich separat berechnet.
+Die Preise gelten für den in unseren Angeboten und Auftragsbestätigungen aufgeführten Leistungs- und Lieferumfang. Mehrleistungen werden gesondert berechnet. Die Hohlpreise verstehen sich in Euro zuzüglich Metallzuschlag, gegebenenfalls Verpackung, auftragsspezifischer Schnittkosten und der gesetzlichen Mehrwertsteuer.
 
 ## 4. Metallnotierung
 
-Basis zur Kupferabrechnung ist die Notierung "LME Copper official price cash offer", Durchschnitt des Liefervormonats zuzüglich der dann aktuellen von uns benannten Kupfer-Prämie.
-
-Basis zur Aluminiumabrechnung ist die Notierung "LME Aluminium official price cash offer", Durchschnitt des Liefervormonats zuzüglich der dann von uns benannten Aluminium-Prämie. USD werden auf Basis des EUR/USD LME-FX-Rate (MTLE) in EUR umgerechnet. Die entsprechenden Notierungen können Sie der Web-Seite [www.westmetall.com](https://www.westmetall.com) entnehmen. Die Prämienzuschläge können stark variieren und KLZ behält sich das Recht vor, diese fristgerecht anzupassen, ungeachtet der Angebotslegung.
+Basis zur Kupferabrechnung ist die Notierung „LME Copper official price cash offer“, Durchschnitt des Liefervormonats zuzüglich der dann aktuellen von uns benannten Kupfer-Prämie.
+Basis zur Aluminiumabrechnung ist die Notierung „LME Aluminium official price cash offer“, Durchschnitt des Liefervormonats zuzüglich der dann von uns benannten Aluminium-Prämie. USD werden auf Basis des EUR/USD LME-FX-Rate (MTLE) in EUR umgerechnet. Die entsprechenden Notierungen können Sie der Web-Seite [www.westmetall.com](https://www.westmetall.com) entnehmen. Die Prämienzuschläge können stark variieren und KLZ behält sich das Recht vor, diese fristgerecht anzupassen, ungeachtet der Angebotslegung.
 
 ## 5. Metallzahl
 
@@ -43,7 +42,7 @@ Wir behalten uns an den von uns gelieferten Waren – nachfolgend: Vorbehaltswar
 
 ## 8. Zahlungsbedingungen | Aufrechnung | Zurückbehaltungsrechte
 
-Unsere Rechnungen sind 14 Tage nach Rechnungsdatum ohne jeden Abzug zahlbar. Bei Nichteinhaltung der vereinbarten Zahlungsbedingungen sind wir berechtigt, Zinsen in Höhe von 7 %-Punkten über dem Basiszinssatz zu berechnen; das Recht zur Geltendmachung weitergehender Schäden, insbesondere nachgewiesener höherer Zinsen, bleibt hiervon unberührt.
+Unsere Rechnungen sind 10 Tage nach Rechnungsdatum ohne jeden Abzug zahlbar. Rechnungsstellung bzw. Datum ist grundsätzlich der Tag der Übergabe an den Spediteur soweit wir aus unseren deutschen Lägern liefern. Ansonsten gilt bei Direktimporten der Tag der Verzollung, der zeitnah zum Anliefertag liegt. Bei Nichteinhaltung der vereinbarten Zahlungsbedingungen sind wir berechtigt, Zinsen in Höhe von 7 %-Punkten über dem Basiszinssatz zu berechnen; das Recht zur Geltendmachung weitergehender Schäden, insbesondere nachgewiesener höherer Zinsen, bleibt hiervon unberührt.
 
 ## 9. Liefervorbehalt | Teillieferungen
 
@@ -69,13 +68,13 @@ Wird uns ein Abrufauftrag erteilt und werden über die Abruftermine keine gesond
 
 ## 12. Maß- und Gewichtsangaben
 
-Alle Angaben über Durchmesser, Gewicht, technische Gestaltung, Herstellung und Umfang der von uns zu liefernden Ware stehen unter dem Vorbehalt der Abweichung innerhalb der handelsüblichen zulässigen Toleranzen. Darüber hinaus behalten wir uns Änderungen, die einer technischen Verbesserung dienen, jederzeit vor. Farbabweichungen und/oder Abweichungen in der äußeren Beschaffenheit der von uns zu liefernden Ware, die jedoch deren Qualität und technische Wirksamkeit unbeeinflusst lassen, begründen keine Mängelhaftungsansprüche des Bestellers.
+Alle Angaben über Durchmesser, Gewicht, technische Gestaltung, Herstellung und Umfang der von uns zu liefernden Ware stehen unter dem Vorbehalt der Abweichung innerhalb der handelsüblichen zulässigen Toleranzen. Darüber hinaus behalten wir uns Änderungen, die einer technischen Verbesserung dienen, jederzeit vor. Farbabweichungen und/oder Abweichungen in der äußeren Beschaffenheit der von uns zu liefernden Ware, die jedoch deren Qualität und technische Wirksamkeit unbeeinflusst lässt, begründen keine Mängelhaftungsansprüche des Bestellers.
 
 ## 13. Gefahrübergang und -tragung
 
 Die Lieferung erfolgt DAP frei Bestimmungsort Deutschland, wo auch der Erfüllungsort für die Lieferung und eine etwaige Nacherfüllung ist.
 
-Wird die bestellte Ware von uns versandbereit gestellt und/oder verzögert sich die Versendung und/oder der Abruf aus Gründen, die vom Besteller zu vertreten sind, sind wir berechtigt, Ersatz des hieraus entstehenden Schadens einschließlich Mehraufwendungen zu verlangen. Hierfür berechnen wir eine pauschale Entschädigung i.H.v 2% des Rechnungsbetrages für jeden angefangenen Monat, maximal jedoch 10 % insgesamt beginnend mit der Lieferfrist bzw. – mangels einer Lieferfrist – mit der Mitteilung der Versandbereitschaft der Ware.
+Wird die bestellte Ware von uns versandbereit gestellt und/oder verzögert sich die Versendung und/oder der Abruf aus Gründen, die vom Besteller zu vertreten sind, sind wir berechtigt, Ersatz des hieraus entstehenden Schadens einschließlich Mehraufwendungen für Einlagerungen zu verlangen. Hierfür berechnen wir eine pauschale Entschädigung i.H. von 2% des Rechnungsbetrages für jeden angefangenen Monat, maximal jedoch 10 % insgesamt beginnend mit der Lieferfrist bzw. – mangels einer Lieferfrist – mit der Mitteilung der Versandbereitschaft der Ware.
 
 Der Nachweis eines höheren Schadens und unsere gesetzlichen Ansprüche (insbesondere Ersatz von Mehraufwendungen, angemessene Entschädigung, Kündigung) bleiben unberührt; die Pauschale ist aber auf weitergehende Geldansprüche anzurechnen. Dem Besteller bleibt der Nachweis gestattet, dass uns überhaupt kein oder nur ein wesentlich geringerer Schaden als vorstehende Pauschale entstanden ist. Rücksendungen an uns, die nicht vorher von uns schriftlich bestätigt worden sind, erfolgen auf alleinige Gefahr des Bestellers.
 
@@ -93,7 +92,9 @@ Weitergehende Ansprüche des Bestellers, gleich aus welchem Rechtsgrund, sind na
 
 Die Verjährungsfristen für Mängelhaftungsansprüche beträgt 24 Monate ab Übergabe der Ware.
 
-Sollte es bei einer Mängelrüge zu unterschiedlichen Meinungen bezüglich des Kabelschaden kommen, gilt hier im Zweifelsfall nur die Expertise des VDE-Instituts selbst. Andere, auch akkreditierte Testlabore, akzeptieren wir nicht. Wir weisen ausdrücklich daraufhin, dass beim Verlegen des Kabels in den Graben oder in Rohren, bzw. in Bauwerke eine ständige Sichtkontrolle durch den Kabelverleger vorzunehmen ist, ob Auffälligkeiten zu vermerken sind. Eine spätere Reklamation, die fahrlässiges Verhalten vermuten lässt, schränkt sich damit ein.
+Sollte es bei einer Mängelrüge zu unterschiedlichen Meinungen bezüglich des Kabelschaden kommen, gilt hier im Zweifelsfall nur die Expertise des VDE-Instituts selbst. Andere, auch akkreditierte Testlabore, akzeptieren wir nicht.
+
+Wir weisen ausdrücklich daraufhin, dass beim Verlegen des Kabels in den Gräben oder in Rohren, bzw. in Bauwerke eine ständige Sichtkontrolle durch den Kabelverleger vorzunehmen ist, ob Auffälligkeiten zu vermerken sind. Eine spätere Reklamation, die fahrlässiges Verhalten vermuten lässt, schränkt sich damit ein. Dies gilt auch bei der Annahme der Ware, wo offensichtliche Beschädigungen direkt zu kommunizieren sind. Spätere Ansprüche nach Akzeptanz einer einwandfreien Belieferung sind detailliert zu beweisen.
 
 ## 15. Schadenersatz | Gesamthaftung
 
@@ -109,4 +110,6 @@ Es gilt ausschließlich das Recht der Bundesrepublik Deutschland unter Ausschlus
 
 Mit der Veröffentlichung der vorliegenden L&Z im Internet werden alle von uns früher verwendeten Bedingungen gegenstandslos.
 
+Remshalden, 28.1.2026
+
 [Download als PDF](/AGB-KLZ-1-2026.pdf)

data/pages/en/terms.mdx

@@ -5,7 +5,7 @@ featuredImage: null
 locale: en
 ---
 
-*Status November 2024*
+*Status January 2026*
 
 ## 1. General
 
@@ -21,7 +21,7 @@ Unless expressly designated as binding, our offers are non-binding; the customer
 
 ## 3. Prices
 
-All prices stated by us are understood plus the respective statutory value-added tax, before metal surcharge, freight-free within the Federal Republic of Germany (mainland), however without unloading. The sales prices, insofar as they are declared as hollow prices, contain no metal values whatsoever. These are additionally calculated separately.
+The prices apply to the scope of services and deliveries listed in our offers and order confirmations. Additional services will be charged separately. The hollow prices are in Euro plus metal surcharge, if applicable packaging, order-specific cutting costs and the statutory value-added tax.
 
 ## 4. Metal quotation
 
@@ -43,7 +43,7 @@ We retain title to the goods delivered by us – hereinafter: reserved goods –
 
 ## 8. Payment terms | Offsetting | Right of retention
 
-Our invoices are payable 14 days after invoice date without any deduction. In case of non-compliance with the agreed payment terms, we are entitled to calculate interest at a rate of 7 percentage points above the base interest rate; the right to assert further damages, in particular proven higher interest, remains unaffected by this.
+Our invoices are payable 10 days after invoice date without any deduction. Invoicing or date is basically the day of handover to the forwarder as far as we deliver from our German warehouses. Otherwise, in the case of direct imports, the day of customs clearance, which is close to the delivery day, applies. In case of non-compliance with the agreed payment terms, we are entitled to calculate interest at a rate of 7 percentage points above the base interest rate; the right to assert further damages, in particular proven higher interest, remains unaffected by this.
 
 ## 9. Delivery reservation | Partial deliveries
 
@@ -69,13 +69,13 @@ If a call-off order is issued to us and no separate written agreements are made
 
 ## 12. Dimension and weight specifications
 
-All information about diameter, weight, technical design, manufacture and scope of the goods to be delivered by us are subject to the reservation of deviation within the commercially usual permissible tolerances. Darüber hinaus behalten wir uns Änderungen, die einer technischen Verbesserung dienen, jederzeit vor. Color deviations and/or deviations in the external characteristics of the goods to be delivered by us, which however leave their quality and technical effectiveness unaffected, do not give rise to any claims for defects by the orderer.
+All information about diameter, weight, technical design, manufacture and scope of the goods to be delivered by us are subject to the reservation of deviation within the commercially usual permissible tolerances. Furthermore, we reserve the right to make changes that serve technical improvement at any time. Color deviations and/or deviations in the external characteristics of the goods to be delivered by us, which however leave their quality and technical effectiveness unaffected, do not give rise to any claims for defects by the orderer.
 
 ## 13. Transfer of risk and burden
 
 Delivery is made DAP free destination Germany, where the place of performance for delivery and any subsequent performance is also located.
 
-If the ordered goods are made ready for shipment by us and/or the dispatch and/or the call-off is delayed for reasons for which the orderer is responsible, we are entitled to demand compensation for the damage resulting therefrom including additional expenses. For this, we calculate a flat-rate compensation of 2% of the invoice amount for each month started, however maximum 10% in total, starting with the delivery period or – lacking a delivery period – with the notification of readiness for shipment of the goods.
+If the ordered goods are made ready for shipment by us and/or the dispatch and/or the call-off is delayed for reasons for which the orderer is responsible, we are entitled to demand compensation for the damage resulting therefrom including additional expenses for storage. For this, we calculate a flat-rate compensation of 2% of the invoice amount for each month started, however maximum 10% in total, starting with the delivery period or – lacking a delivery period – with the notification of readiness for shipment of the goods.
 
 Proof of higher damage and our legal claims (in particular compensation for additional expenses, reasonable compensation, termination) remain unaffected; the flat-rate is however to be credited against further monetary claims. The orderer is permitted to prove that no damage or only a substantially lower damage than the aforementioned flat-rate has arisen for us. Returns to us, which have not been confirmed by us in writing beforehand, are at the sole risk of the orderer.
 
@@ -93,7 +93,9 @@ Further claims of the orderer, regardless of the legal basis, are excluded or li
 
 The limitation periods for claims for defects are 24 months from delivery of the goods.
 
-If there are different opinions regarding cable damage in the event of a defect notification, only the expertise of the VDE Institute itself applies in case of doubt. We do not accept other, even accredited test laboratories. We expressly point out that when laying the cable in the trench or in pipes, or in buildings, a constant visual inspection must be carried out by the cable layer to check for any noticeable features. A later complaint that suggests negligent behavior is thus restricted.
+If there are different opinions regarding cable damage in the event of a defect notification, only the expertise of the VDE Institute itself applies in case of doubt. We do not accept other, even accredited test laboratories.
+
+We expressly point out that when laying the cable in the trench or in pipes, or in buildings, a constant visual inspection must be carried out by the cable layer to check for any noticeable features. A later complaint that suggests negligent behavior is thus restricted. This also applies to the acceptance of the goods, where obvious damage must be communicated directly. Subsequent claims after acceptance of a faultless delivery must be proven in detail.
 
 ## 15. Damages | Total liability
 
@@ -109,4 +111,6 @@ Only the law of the Federal Republic of Germany applies, excluding the UN Conven
 
 With the publication of these DPT on the Internet, all previously used conditions of ours become void.
 
+Remshalden, January 28, 2026
+
 [Download as PDF](/AGB-KLZ-1-2026.pdf)

docker-compose.yml

@@ -1,21 +1,21 @@
 services:
   app:
-    image: registry.infra.mintel.me/mintel/klz-cables.com:latest
+    image: registry.infra.mintel.me/mintel/klz-cables.com:${IMAGE_TAG:-latest}
     restart: always
     networks:
       - infra
     ports:
       - "3000:3000"
     env_file:
-      - .env
+      - ${ENV_FILE:-.env}
     labels:
       - "traefik.enable=true"
       # HTTP ⇒ HTTPS redirect
-      - "traefik.http.routers.klz-cables-web.rule=(Host(`klz-cables.com`) || Host(`www.klz-cables.com`) || Host(`staging.klz-cables.com`)) && !PathPrefix(`/.well-known/acme-challenge/`)"
+      - "traefik.http.routers.klz-cables-web.rule=Host(${TRAEFIK_HOST}) && !PathPrefix(`/.well-known/acme-challenge/`)"
       - "traefik.http.routers.klz-cables-web.entrypoints=web"
       - "traefik.http.routers.klz-cables-web.middlewares=redirect-https"
       # HTTPS router
-      - "traefik.http.routers.klz-cables.rule=Host(`klz-cables.com`) || Host(`www.klz-cables.com`) || Host(`staging.klz-cables.com`)"
+      - "traefik.http.routers.klz-cables.rule=Host(${TRAEFIK_HOST})"
       - "traefik.http.routers.klz-cables.entrypoints=websecure"
       - "traefik.http.routers.klz-cables.tls.certresolver=le"
       - "traefik.http.routers.klz-cables.tls=true"

lib/datasheets.ts

@@ -15,6 +15,9 @@ export function getDatasheetPath(slug: string, locale: string): string | null {
   // Normalize slug: remove common suffixes that might not be in the PDF filename
   const normalizedSlug = slug.replace(/-hv$|-mv$/, '');
 
+  // Subdirectories to search in
+  const subdirs = ['', 'low-voltage', 'medium-voltage', 'high-voltage', 'solar'];
+
   // List of patterns to try for the current locale
   const patterns = [
     `${slug}-${locale}.pdf`,
@@ -25,10 +28,13 @@ export function getDatasheetPath(slug: string, locale: string): string | null {
     `${normalizedSlug}-3-${locale}.pdf`,
   ];
 
-  for (const pattern of patterns) {
-    const filePath = path.join(datasheetsDir, pattern);
-    if (fs.existsSync(filePath)) {
-      return `/datasheets/${pattern}`;
+  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}`;
+      }
     }
   }
 
@@ -42,10 +48,13 @@ export function getDatasheetPath(slug: string, locale: string): string | null {
       `${normalizedSlug}-2-en.pdf`,
       `${normalizedSlug}-3-en.pdf`,
     ];
-    for (const pattern of enPatterns) {
-      const filePath = path.join(datasheetsDir, pattern);
-      if (fs.existsSync(filePath)) {
-        return `/datasheets/${pattern}`;
+    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}`;
+        }
       }
     }
   }

lib/metadata.ts

@@ -2,9 +2,10 @@ import { Metadata } from 'next';
 import { SITE_URL } from './schema';
 
 export function getOGImageMetadata(path: string, title: string, locale: string): NonNullable<Metadata['openGraph']>['images'] {
+  const cleanPath = path ? (path.startsWith('/') ? path : `/${path}`) : '';
   return [
     {
-      url: `${SITE_URL}/${locale}/${path}/opengraph-image`,
+      url: `${SITE_URL}/${locale}${cleanPath}/opengraph-image`,
       width: 1200,
       height: 630,
       alt: title,

lib/pdf-datasheet.tsx

@@ -21,234 +21,149 @@ Font.register({
 // Industrial/technical/restrained design - STYLEGUIDE.md compliant
 const styles = StyleSheet.create({
   page: {
-    // Large margins for engineering documentation feel.
-    // Extra bottom padding reserves space for the fixed footer so content
-    // (esp. long descriptions) doesn't render underneath it.
-    paddingTop: 72,
-    paddingLeft: 72,
-    paddingRight: 72,
-    paddingBottom: 140,
+    color: '#111827', // Text Primary
+    lineHeight: 1.5,
+    backgroundColor: '#FFFFFF',
+    paddingTop: 0,
+    paddingBottom: 100,
     fontFamily: 'Helvetica',
-    fontSize: 10,
-    color: '#1F2933', // Dark gray text
-    lineHeight: 1.5, // Generous line height
-    backgroundColor: '#F8F9FA', // Almost white background
   },
 
-  // Engineering documentation header
+  // Hero-style header
+  hero: {
+    backgroundColor: '#FFFFFF',
+    paddingTop: 24,
+    paddingBottom: 0,
+    paddingHorizontal: 72,
+    marginBottom: 20,
+    position: 'relative',
+    borderBottomWidth: 0,
+    borderBottomColor: '#e5e7eb',
+  },
+
   header: {
     flexDirection: 'row',
     justifyContent: 'space-between',
-    alignItems: 'flex-start',
-    marginBottom: 48, // Large spacing
-    paddingBottom: 24,
-    borderBottom: '2px solid #E6E9ED', // Light gray separator
-  },
-
-  // Logo area - industrial style
-  logoArea: {
-    flexDirection: 'column',
-    alignItems: 'flex-start',
-  },
-
-  // Optional image logo container (keeps header height stable)
-  logoContainer: {
-    width: 120,
-    height: 32,
-    justifyContent: 'center',
-  },
-
-  // Image logo (preferred when available)
-  logo: {
-    width: 110,
-    height: 28,
-    objectFit: 'contain',
+    alignItems: 'center',
+    marginBottom: 16,
   },
 
   logoText: {
-    fontSize: 20,
+    fontSize: 24,
     fontWeight: 700,
-    color: '#0E2A47', // Dark navy
+    color: '#000d26',
     letterSpacing: 1,
     textTransform: 'uppercase',
   },
 
-  logoSubtext: {
-    fontSize: 10,
-    fontWeight: 400,
-    color: '#6B7280', // Medium gray
-    letterSpacing: 0.5,
-    marginTop: 2,
-  },
-
-  // Document info - technical style
-  docInfo: {
-    textAlign: 'right',
-    alignItems: 'flex-end',
-  },
-
   docTitle: {
-    fontSize: 16,
+    fontSize: 10,
     fontWeight: 700,
-    color: '#0E2A47', // Dark navy
-    marginBottom: 8,
-    letterSpacing: 0.5,
+    color: '#001a4d',
+    letterSpacing: 2,
     textTransform: 'uppercase',
   },
 
-  skuContainer: {
-    backgroundColor: '#E6E9ED', // Light gray background
-    paddingHorizontal: 16,
-    paddingVertical: 8,
-    border: '1px solid #E6E9ED',
+  productRow: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    gap: 20,
+  },
+  productInfoCol: {
+    flex: 1,
+    justifyContent: 'center',
+  },
+  productImageCol: {
+    flex: 1,
+    height: 120,
+    justifyContent: 'center',
+    alignItems: 'center',
+    borderRadius: 8,
+    borderWidth: 1,
+    borderColor: '#e5e7eb',
+    backgroundColor: '#FFFFFF',
+    overflow: 'hidden',
   },
 
-  skuLabel: {
-    fontSize: 8,
-    color: '#6B7280', // Medium gray
-    textTransform: 'uppercase',
-    letterSpacing: 0.5,
-    marginBottom: 4,
-  },
-
-  skuValue: {
-    fontSize: 14,
-    fontWeight: 700,
-    color: '#0E2A47', // Dark navy
-  },
-
-  // Product section - technical specification style
-  productSection: {
-    marginBottom: 40,
-    backgroundColor: '#FFFFFF', // White background for content blocks
-    padding: 24,
-    border: '1px solid #E6E9ED',
+  // Product Hero Info
+  productHero: {
+    marginTop: 0,
   },
 
   productName: {
     fontSize: 24,
     fontWeight: 700,
-    color: '#0E2A47', // Dark navy
-    marginBottom: 12,
-    lineHeight: 1.2,
+    color: '#000d26',
+    marginBottom: 0,
     textTransform: 'uppercase',
-    letterSpacing: 0.5,
+    letterSpacing: -0.5,
   },
 
   productMeta: {
-    fontSize: 12,
-    color: '#6B7280', // Medium gray
-    fontWeight: 500,
+    fontSize: 10,
+    color: '#4b5563',
+    fontWeight: 700,
+    textTransform: 'uppercase',
+    letterSpacing: 1,
   },
 
-  // Content sections - rectangular blocks
+  heroImage: {
+    width: '100%',
+    height: '100%',
+    objectFit: 'contain',
+  },
+
+  noImage: {
+    fontSize: 8,
+    color: '#9ca3af',
+    textAlign: 'center',
+  },
+
+  // Content Area
+  content: {
+    paddingHorizontal: 72,
+  },
+
+  // Content sections
   section: {
-    marginBottom: 32,
-    backgroundColor: '#FFFFFF',
-    padding: 24,
-    border: '1px solid #E6E9ED',
+    marginBottom: 20,
   },
 
   sectionTitle: {
     fontSize: 14,
     fontWeight: 700,
-    color: '#0E2A47', // Dark navy
-    marginBottom: 16,
-    letterSpacing: 0.5,
+    color: '#000d26', // Primary Dark
+    marginBottom: 8,
     textTransform: 'uppercase',
-    borderBottom: '1px solid #E6E9ED',
-    paddingBottom: 8,
+    letterSpacing: -0.2,
+  },
+
+  sectionAccent: {
+    width: 30,
+    height: 3,
+    backgroundColor: '#82ed20', // Accent Green
+    marginBottom: 8,
+    borderRadius: 1.5,
   },
 
-  // Description - technical documentation style
   description: {
-    fontSize: 10,
-    lineHeight: 1.6,
-    color: '#1F2933', // Dark gray text
-    marginBottom: 0,
+    fontSize: 11,
+    lineHeight: 1.7,
+    color: '#4b5563', // Text Secondary
   },
 
-  // Cross-section table - engineering specification style
-  table: {
-    marginTop: 16,
-    borderWidth: 1,
-    borderColor: '#E6E9ED',
-  },
-
-  tableHeader: {
-    flexDirection: 'row',
-    backgroundColor: '#E6E9ED',
-    borderBottomWidth: 1,
-    borderBottomColor: '#E6E9ED',
-  },
-
-  tableHeaderCell: {
-    flex: 1,
-    padding: 8,
-    fontSize: 10,
-    fontWeight: 700,
-    color: '#0E2A47',
-    textTransform: 'uppercase',
-    letterSpacing: 0.3,
-  },
-
-  tableHeaderCellLast: {
-    borderRightWidth: 0,
-  },
-
-  tableHeaderCellWithDivider: {
-    borderRightWidth: 1,
-    borderRightColor: '#E6E9ED',
-  },
-
-  tableRow: {
-    flexDirection: 'row',
-    borderBottomWidth: 1,
-    borderBottomColor: '#E6E9ED',
-  },
-
-  tableCell: {
-    flex: 1,
-    padding: 8,
-    fontSize: 10,
-    color: '#1F2933',
-  },
-
-  tableCellLast: {
-    borderRightWidth: 0,
-  },
-
-  tableCellWithDivider: {
-    borderRightWidth: 1,
-    borderRightColor: '#E6E9ED',
-  },
-
-  tableRowAlt: {
-    backgroundColor: '#F8F9FA',
-  },
-
-  // Specifications - technical data style
-  specsContainer: {
-    flexDirection: 'row',
-    flexWrap: 'wrap',
-  },
-
-  // Backwards-compatible alias used by the component markup
-  specsGrid: {
-    flexDirection: 'row',
-    flexWrap: 'wrap',
-  },
-
-  // Technical data table (used for the metagrid)
+  // Technical data table
   specsTable: {
-    borderWidth: 1,
-    borderColor: '#E6E9ED',
+    marginTop: 8,
+    border: '1px solid #e5e7eb',
+    borderRadius: 8,
+    overflow: 'hidden',
   },
 
   specsTableRow: {
     flexDirection: 'row',
     borderBottomWidth: 1,
-    borderBottomColor: '#E6E9ED',
+    borderBottomColor: '#e5e7eb',
   },
 
   specsTableRowLast: {
@@ -256,63 +171,35 @@ const styles = StyleSheet.create({
   },
 
   specsTableLabelCell: {
-    flex: 3,
-    paddingVertical: 8,
-    paddingHorizontal: 8,
-    backgroundColor: '#F8F9FA',
+    flex: 1,
+    paddingVertical: 4,
+    paddingHorizontal: 16,
+    backgroundColor: '#f8f9fa',
     borderRightWidth: 1,
-    borderRightColor: '#E6E9ED',
-    justifyContent: 'center',
+    borderRightColor: '#e5e7eb',
   },
 
   specsTableValueCell: {
-    flex: 4,
-    paddingVertical: 8,
-    paddingHorizontal: 8,
-    justifyContent: 'center',
+    flex: 1,
+    paddingVertical: 4,
+    paddingHorizontal: 16,
   },
 
   specsTableLabelText: {
     fontSize: 9,
     fontWeight: 700,
-    color: '#0E2A47',
+    color: '#000d26',
     textTransform: 'uppercase',
-    letterSpacing: 0.3,
-    lineHeight: 1.2,
+    letterSpacing: 0.5,
   },
 
   specsTableValueText: {
     fontSize: 10,
-    color: '#1F2933',
-    lineHeight: 1.4,
+    color: '#111827',
+    fontWeight: 500,
   },
 
-  specColumn: {
-    width: '48%',
-    marginRight: '4%',
-    marginBottom: 16,
-  },
-
-  specItem: {
-    marginBottom: 12,
-  },
-
-  specLabel: {
-    fontSize: 9,
-    fontWeight: 700,
-    color: '#0E2A47',
-    marginBottom: 4,
-    textTransform: 'uppercase',
-    letterSpacing: 0.3,
-  },
-
-  specValue: {
-    fontSize: 10,
-    color: '#1F2933',
-    lineHeight: 1.4,
-  },
-
-  // Categories - technical classification
+  // Categories
   categories: {
     flexDirection: 'row',
     flexWrap: 'wrap',
@@ -320,42 +207,48 @@ const styles = StyleSheet.create({
   },
 
   categoryTag: {
-    backgroundColor: '#E6E9ED',
+    backgroundColor: '#f8f9fa',
     paddingHorizontal: 12,
     paddingVertical: 6,
-    border: '1px solid #E6E9ED',
+    border: '1px solid #e5e7eb',
+    borderRadius: 100,
   },
 
   categoryText: {
-    fontSize: 9,
-    color: '#6B7280',
-    fontWeight: 500,
+    fontSize: 8,
+    color: '#4b5563',
+    fontWeight: 700,
     textTransform: 'uppercase',
-    letterSpacing: 0.3,
+    letterSpacing: 0.5,
   },
 
-  // Engineering documentation footer
+  // Footer
   footer: {
     position: 'absolute',
-    bottom: 48,
+    bottom: 40,
     left: 72,
     right: 72,
     flexDirection: 'row',
     justifyContent: 'space-between',
     alignItems: 'center',
     paddingTop: 24,
-    borderTop: '2px solid #E6E9ED',
-    fontSize: 9,
-    color: '#6B7280',
+    borderTop: '1px solid #e5e7eb',
   },
 
-  footerLeft: {
+  footerText: {
+    fontSize: 8,
+    color: '#9ca3af',
+    fontWeight: 500,
+    textTransform: 'uppercase',
+    letterSpacing: 1,
+  },
+
+  footerBrand: {
+    fontSize: 10,
     fontWeight: 700,
-    color: '#0E2A47',
-  },
-
-  footerRight: {
-    color: '#6B7280',
+    color: '#000d26',
+    textTransform: 'uppercase',
+    letterSpacing: 1,
   },
 });
 
@@ -364,6 +257,7 @@ interface ProductData {
   name: string;
   shortDescriptionHtml: string;
   descriptionHtml: string;
+  applicationHtml?: string;
   images: string[];
   featuredImage: string | null;
   sku: string;
@@ -389,19 +283,19 @@ const stripHtml = (html: string): string => {
 const getLabels = (locale: 'en' | 'de') => {
   const labels = {
     en: {
-      productDatasheet: 'Product Datasheet',
-      description: 'Description',
-      specifications: 'Technical Specifications',
-      categories: 'Categories',
+      productDatasheet: 'Technical Datasheet',
+      description: 'APPLICATION',
+      specifications: 'TECHNICAL DATA',
+      categories: 'CATEGORIES',
       sku: 'SKU',
       noImage: 'No image available',
     },
     de: {
-      productDatasheet: 'Produktdatenblatt',
-      description: 'Beschreibung',
-      specifications: 'Technische Spezifikationen',
-      categories: 'Kategorien',
-      sku: 'Artikelnummer',
+      productDatasheet: 'Technisches Datenblatt',
+      description: 'ANWENDUNG',
+      specifications: 'TECHNISCHE DATEN',
+      categories: 'KATEGORIEN',
+      sku: 'ARTIKELNUMMER',
       noImage: 'Kein Bild verfügbar',
     },
   };
@@ -418,99 +312,101 @@ export const PDFDatasheet: React.FC<PDFDatasheetProps> = ({
   return (
     <Document>
       <Page size="A4" style={styles.page}>
-        {/* Clean, minimal header */}
-        <View style={styles.header}>
-          <View style={styles.logoArea}>
-            <View style={styles.logoContainer}>
-              {logoUrl ? (
-                /* eslint-disable-next-line jsx-a11y/alt-text */
-                <Image src={logoUrl} style={styles.logo} />
-              ) : (
-                <View>
-                  <Text style={styles.logoText}>KLZ</Text>
-                  <Text style={styles.logoSubtext}>Cables</Text>
+        {/* Hero Header */}
+        <View style={styles.hero}>
+          <View style={styles.header}>
+            <View>
+              <Text style={styles.logoText}>KLZ</Text>
+            </View>
+            <Text style={styles.docTitle}>
+              {labels.productDatasheet}
+            </Text>
+          </View>
+
+          <View style={styles.productRow}>
+            <View style={styles.productInfoCol}>
+              <View style={styles.productHero}>
+                <View style={styles.categories}>
+                  {product.categories.map((cat, index) => (
+                    <Text key={index} style={styles.productMeta}>
+                      {cat.name}{index < product.categories.length - 1 ? ' • ' : ''}
+                    </Text>
+                  ))}
                 </View>
+                <Text style={styles.productName}>{product.name}</Text>
+              </View>
+            </View>
+            <View style={styles.productImageCol}>
+              {product.featuredImage ? (
+                <Image src={product.featuredImage} style={styles.heroImage} />
+              ) : (
+                <Text style={styles.noImage}>{labels.noImage}</Text>
               )}
             </View>
           </View>
-
-          <View style={styles.docInfo}>
-            <Text style={styles.docTitle}>
-              {locale === 'en' ? 'Product Datasheet' : 'Produktdatenblatt'}
-            </Text>
-            <View style={styles.skuContainer}>
-              <Text style={styles.skuLabel}>{labels.sku}</Text>
-              <Text style={styles.skuValue}>{product.sku}</Text>
-            </View>
-          </View>
         </View>
 
-        {/* Product section - clean and prominent */}
-        <View style={styles.productSection}>
-          <Text style={styles.productName}>{product.name}</Text>
-          <Text style={styles.productMeta}>
-            {product.categories.map(cat => cat.name).join(' • ')}
-          </Text>
+        <View style={styles.content}>
+          {/* Description section */}
+          {(product.applicationHtml || product.shortDescriptionHtml || product.descriptionHtml) && (
+            <View style={styles.section}>
+              <Text style={styles.sectionTitle}>{labels.description}</Text>
+              <View style={styles.sectionAccent} />
+              <Text style={styles.description}>
+                {stripHtml(product.applicationHtml || product.shortDescriptionHtml || product.descriptionHtml)}
+              </Text>
+            </View>
+          )}
+
+          {/* Technical specifications */}
+          {product.attributes && product.attributes.length > 0 && (
+            <View style={styles.section}>
+              <Text style={styles.sectionTitle}>{labels.specifications}</Text>
+              <View style={styles.sectionAccent} />
+              <View style={styles.specsTable}>
+                {product.attributes.map((attr, index) => (
+                  <View
+                    key={index}
+                    style={[
+                      styles.specsTableRow,
+                      index === product.attributes.length - 1 &&
+                        styles.specsTableRowLast,
+                    ]}
+                  >
+                    <View style={styles.specsTableLabelCell}>
+                      <Text style={styles.specsTableLabelText}>{attr.name}</Text>
+                    </View>
+                    <View style={styles.specsTableValueCell}>
+                      <Text style={styles.specsTableValueText}>
+                        {attr.options.join(', ')}
+                      </Text>
+                    </View>
+                  </View>
+                ))}
+              </View>
+            </View>
+          )}
+
+          {/* Categories as clean tags */}
+          {product.categories && product.categories.length > 0 && (
+            <View style={styles.section}>
+              <Text style={styles.sectionTitle}>{labels.categories}</Text>
+              <View style={styles.sectionAccent} />
+              <View style={styles.categories}>
+                {product.categories.map((cat, index) => (
+                  <View key={index} style={styles.categoryTag}>
+                    <Text style={styles.categoryText}>{cat.name}</Text>
+                  </View>
+                ))}
+              </View>
+            </View>
+          )}
         </View>
 
-        {/* Description section */}
-        {(product.shortDescriptionHtml || product.descriptionHtml) && (
-          <View style={styles.section}>
-            <Text style={styles.sectionTitle}>{labels.description}</Text>
-            <Text style={styles.description}>
-              {stripHtml(product.shortDescriptionHtml || product.descriptionHtml)}
-            </Text>
-          </View>
-        )}
-
-        {/* Technical specifications */}
-        {product.attributes && product.attributes.length > 0 && (
-          <View style={styles.section}>
-            <Text style={styles.sectionTitle}>{labels.specifications}</Text>
-            <View style={styles.specsTable}>
-              {product.attributes.map((attr, index) => (
-                <View
-                  key={index}
-                  style={[
-                    styles.specsTableRow,
-                    index === product.attributes.length - 1 &&
-                      styles.specsTableRowLast,
-                  ]}
-                >
-                  <View style={styles.specsTableLabelCell}>
-                    <Text style={styles.specsTableLabelText}>{attr.name}</Text>
-                  </View>
-                  <View style={styles.specsTableValueCell}>
-                    <Text style={styles.specsTableValueText}>
-                      {attr.options.join(', ')}
-                    </Text>
-                  </View>
-                </View>
-              ))}
-            </View>
-          </View>
-        )}
-
-        {/* Categories as clean tags */}
-        {product.categories && product.categories.length > 0 && (
-          <View style={styles.section}>
-            <Text style={styles.sectionTitle}>{labels.categories}</Text>
-            <View style={styles.categories}>
-              {product.categories.map((cat, index) => (
-                <View key={index} style={styles.categoryTag}>
-                  <Text style={styles.categoryText}>{cat.name}</Text>
-                </View>
-              ))}
-            </View>
-          </View>
-        )}
-
         {/* Minimal footer */}
         <View style={styles.footer} fixed>
-          <Text style={styles.footerLeft}>
-            {labels.sku}: {product.sku}
-          </Text>
-          <Text style={styles.footerRight}>
+          <Text style={styles.footerBrand}>KLZ CABLES</Text>
+          <Text style={styles.footerText}>
             {new Date().toLocaleDateString(locale === 'en' ? 'en-US' : 'de-DE', {
               year: 'numeric',
               month: 'long',