feat(pdf): implement premium industrial layout and integrate brand logo

lib/pdf-page.tsx

@@ -1,5 +1,5 @@
-import * as React from 'react';
-import { Document, Page, View, Text, StyleSheet, Font, Link } from '@react-pdf/renderer';
+import { Document, Page, View, Text, StyleSheet, Font, Link, Image } from '@react-pdf/renderer';
+import path from 'path';
 
 // Standard fonts like Helvetica are built-in to PDF and don't require registration
 // unless we want to use specific TTF files. Using built-in Helvetica for maximum stability.
@@ -24,67 +24,65 @@ const MARGIN = 72;
 const styles = StyleSheet.create({
   page: {
     color: C.gray900,
-    lineHeight: 1.5,
+    lineHeight: 1.6,
     backgroundColor: C.white,
     paddingTop: 0,
-    paddingBottom: 100,
+    paddingBottom: 80,
     fontFamily: 'Helvetica',
   },
 
-  // Hero-style header
+  // Premium Header Layout
   hero: {
-    backgroundColor: C.white,
-    paddingTop: 24,
-    paddingBottom: 20,
+    backgroundColor: C.offWhite,
+    paddingTop: 40,
+    paddingBottom: 32,
     paddingHorizontal: MARGIN,
-    marginBottom: 20,
-    position: 'relative',
+    marginBottom: 40,
     borderBottomWidth: 1,
     borderBottomColor: C.gray200,
+    position: 'relative',
   },
 
-  header: {
+  headerTop: {
     flexDirection: 'row',
     justifyContent: 'space-between',
     alignItems: 'center',
-    marginBottom: 16,
+    marginBottom: 32,
   },
 
-  logoText: {
-    fontSize: 24,
-    fontWeight: 700,
-    color: C.navyDeep,
-    letterSpacing: 1,
-    textTransform: 'uppercase',
+  logo: {
+    width: 60,
+    height: 'auto',
   },
 
-  docTitle: {
-    fontSize: 10,
+  docType: {
+    fontSize: 9,
     fontWeight: 700,
     color: C.navy,
     letterSpacing: 2,
     textTransform: 'uppercase',
+    opacity: 0.6,
   },
 
-  productHero: {
+  headerTitleArea: {
     marginTop: 0,
   },
 
   pageTitle: {
-    fontSize: 24,
+    fontSize: 28,
     fontWeight: 700,
     color: C.navyDeep,
-    marginBottom: 0,
+    marginBottom: 4,
     textTransform: 'uppercase',
     letterSpacing: -0.5,
   },
 
   accentBar: {
-    width: 30,
-    height: 3,
+    width: 40,
+    height: 4,
     backgroundColor: C.accent,
-    marginTop: 8,
-    borderRadius: 1.5,
+    marginTop: 12,
+    borderRadius: 2,
   },
 
   // Content Area
@@ -92,89 +90,103 @@ const styles = StyleSheet.create({
     paddingHorizontal: MARGIN,
   },
 
-  // Lexical Elements
+  // Lexical Elements with high-fidelity formatting
   paragraph: {
     fontSize: 10,
     color: C.gray600,
     lineHeight: 1.7,
-    marginBottom: 12,
+    marginBottom: 14,
+    textAlign: 'justify',
   },
+
   heading1: {
-    fontSize: 16,
+    fontSize: 14,
     fontWeight: 700,
     color: C.navyDeep,
-    marginTop: 20,
+    marginTop: 24,
+    marginBottom: 12,
+    textTransform: 'uppercase',
+    letterSpacing: 0.8,
+    borderLeftWidth: 3,
+    borderLeftColor: C.accent,
+    paddingLeft: 12,
+  },
+
+  heading2: {
+    fontSize: 11,
+    fontWeight: 700,
+    color: C.navyDeep,
+    marginTop: 18,
     marginBottom: 10,
     textTransform: 'uppercase',
     letterSpacing: 0.5,
   },
-  heading2: {
-    fontSize: 12,
-    fontWeight: 700,
-    color: C.navyDeep,
-    marginTop: 16,
-    marginBottom: 8,
-  },
+
   heading3: {
     fontSize: 10,
     fontWeight: 700,
     color: C.navyDeep,
-    marginTop: 12,
-    marginBottom: 6,
+    marginTop: 14,
+    marginBottom: 8,
   },
+
   list: {
-    marginBottom: 12,
-    marginLeft: 8,
+    marginBottom: 16,
+    marginLeft: 4,
   },
+
   listItem: {
     flexDirection: 'row',
-    marginBottom: 4,
+    marginBottom: 6,
   },
+
   listItemBullet: {
-    width: 12,
+    width: 20,
     fontSize: 10,
-    color: C.accent,
+    color: C.gray400,
     fontWeight: 700,
   },
+
   listItemContent: {
     flex: 1,
     fontSize: 10,
     color: C.gray600,
     lineHeight: 1.7,
+    textAlign: 'justify',
   },
+
   link: {
-    color: C.accent,
-    textDecoration: 'none',
+    color: C.navy,
+    textDecoration: 'underline',
   },
+
   textBold: {
     fontWeight: 700,
     fontFamily: 'Helvetica-Bold',
     color: C.navyDeep,
   },
+
   textItalic: {
     fontStyle: 'italic',
   },
 
-  // Footer — matches brochure style
+  // Industrial Footer
   footer: {
     position: 'absolute',
-    bottom: 40,
+    bottom: 30,
     left: MARGIN,
     right: MARGIN,
     flexDirection: 'row',
     justifyContent: 'space-between',
-    alignItems: 'center',
-    paddingTop: 24,
-    borderTopWidth: 1,
+    alignItems: 'flex-end',
+    paddingTop: 16,
+    borderTopWidth: 0.5,
     borderTopColor: C.gray200,
   },
 
-  footerText: {
-    fontSize: 8,
-    color: C.gray400,
-    fontWeight: 500,
-    textTransform: 'uppercase',
-    letterSpacing: 1,
+  footerInfo: {
+    flexDirection: 'column',
+    gap: 2,
   },
 
   footerBrand: {
@@ -183,6 +195,20 @@ const styles = StyleSheet.create({
     color: C.navyDeep,
     textTransform: 'uppercase',
     letterSpacing: 1,
+    marginBottom: 2,
+  },
+
+  footerText: {
+    fontSize: 7,
+    color: C.gray400,
+    fontWeight: 500,
+    textTransform: 'uppercase',
+    letterSpacing: 0.5,
+  },
+
+  pageNum: {
+    fontSize: 8,
+    color: C.gray400,
   },
 });
 
@@ -291,19 +317,21 @@ export const PDFPage: React.FC<PDFPageProps> = ({ page, locale = 'de' }) => {
     day: 'numeric',
   });
 
+  const logoPath = path.join(process.cwd(), 'public/logo.png');
+
   return (
     <Document>
       <Page size="A4" style={styles.page}>
-        {/* Hero Header */}
+        {/* Improved Hero Header */}
         <View style={styles.hero} fixed>
-          <View style={styles.header}>
-            <View>
-              <Text style={styles.logoText}>KLZ</Text>
-            </View>
-            <Text style={styles.docTitle}>{locale === 'en' ? 'Document' : 'Dokument'}</Text>
+          <View style={styles.headerTop}>
+            <Image src={logoPath} style={styles.logo} />
+            <Text style={styles.docType}>
+              {locale === 'en' ? 'Official Document' : 'Offizielles Dokument'}
+            </Text>
           </View>
 
-          <View style={styles.productHero}>
+          <View style={styles.headerTitleArea}>
             <Text style={styles.pageTitle}>{page.title}</Text>
             <View style={styles.accentBar} />
           </View>
@@ -317,10 +345,18 @@ export const PDFPage: React.FC<PDFPageProps> = ({ page, locale = 'de' }) => {
           </View>
         </View>
 
-        {/* Minimal footer */}
+        {/* Industrial footer with page numbers */}
         <View style={styles.footer} fixed>
-          <Text style={styles.footerBrand}>KLZ CABLES</Text>
-          <Text style={styles.footerText}>{dateStr}</Text>
+          <View style={styles.footerInfo}>
+            <Text style={styles.footerBrand}>KLZ VERTRIEBS GMBH</Text>
+            <Text style={styles.footerText}>
+              RAIFFEISENSTRASSE 22 • 73630 REMSHALDEN • {dateStr}
+            </Text>
+          </View>
+          <Text
+            style={styles.pageNum}
+            render={({ pageNumber, totalPages }) => `${pageNumber} / ${totalPages}`}
+          />
         </View>
       </Page>
     </Document>

package.json

@@ -139,7 +139,7 @@
     "prepare": "husky",
     "preinstall": "npx only-allow pnpm"
   },
-  "version": "2.3.18-rc.1",
+  "version": "2.3.18-rc.2",
   "pnpm": {
     "onlyBuiltDependencies": [
       "@parcel/watcher",