fix: match customer draft layout and correctly use PNG assets for QR Code and Logos

lib/pdf-business-card.tsx

@@ -1,154 +1,201 @@
-import * as React from 'react';
-import { Document, Page, View, Text, Image, StyleSheet, Font } from '@react-pdf/renderer';
-import * as path from 'path';
-
-// Wir nutzen Standard-Helvetica, da das Projekt Helvetica für sauberen Tech-Look vorsieht.
-const styles = StyleSheet.create({
-  // Size incl. 3mm bleed on all sides
-  // 85x55 -> 91x61 -> 257.95 x 172.91 pt
-  pageFront: {
-    backgroundColor: '#001a4d', // KLZ Navy
-    width: 257.95,
-    height: 172.91,
-    flexDirection: 'column',
-    justifyContent: 'center',
-    alignItems: 'center',
-    position: 'relative',
-    fontFamily: 'Helvetica',
-  },
-  pageBack: {
-    backgroundColor: '#FFFFFF',
-    width: 257.95,
-    height: 172.91,
-    flexDirection: 'column',
-    justifyContent: 'center',
-    padding: 24,
-    position: 'relative',
-    fontFamily: 'Helvetica',
-  },
-  logo: {
-    width: 100, // Logo breite
-  },
-  accentLine: {
-    position: 'absolute',
-    bottom: 0,
-    left: 0,
-    width: '100%',
-    height: 8,
-    backgroundColor: '#82ed20', // KLZ Green
-  },
-  accentLineTop: {
-    position: 'absolute',
-    top: 0,
-    left: 0,
-    width: '100%',
-    height: 8,
-    backgroundColor: '#82ed20', // KLZ Green
-  },
-  personInfo: {
-    marginBottom: 16,
-  },
-  name: {
-    fontSize: 16,
-    fontWeight: 'bold',
-    color: '#000d26',
-    letterSpacing: -0.5,
-    marginBottom: 2,
-    textTransform: 'uppercase',
-  },
-  position: {
-    fontSize: 8,
-    color: '#82ed20', // Highlight im Text
-    textTransform: 'uppercase',
-    letterSpacing: 1,
-    fontWeight: 'bold',
-  },
-  contactGrid: {
-    marginTop: 10,
-    display: 'flex',
-    flexDirection: 'column',
-    gap: 4,
-  },
-  contactRow: {
-    flexDirection: 'row',
-    alignItems: 'center',
-  },
-  contactLabel: {
-    width: 40,
-    fontSize: 7,
-    color: '#4b5563',
-    fontWeight: 'bold',
-    textTransform: 'uppercase',
-  },
-  contactValue: {
-    fontSize: 8,
-    color: '#111827',
-  },
-  logoTextWhite: {
-    fontSize: 32,
-    fontWeight: 700,
-    color: '#FFFFFF',
-    letterSpacing: 4,
-    marginBottom: 4,
-  },
-  logoTextBlue: {
-    position: 'absolute',
-    bottom: 24,
-    right: 24,
-    fontSize: 24,
-    fontWeight: 700,
-    color: '#001a4d',
-    letterSpacing: 2,
-    opacity: 0.3,
-  },
-});
+import React from 'react';
+import { Document, Page, Text, View, StyleSheet, Font, Image } from '@react-pdf/renderer';
 
 export interface PersonData {
   name: string;
-  position: string;
+  role: string;
   phone: string;
   email: string;
-  website: string;
 }
 
 interface PDFBusinessCardProps {
   person: PersonData;
+  logoWhitePath: string;
+  logoBluePath: string;
+  logoFullPath: string;
+  truckImagePath: string;
+  qrCodeDataUrl: string;
 }
 
-export const PDFBusinessCard: React.FC<PDFBusinessCardProps> = ({ person }) => {
+const styles = StyleSheet.create({
+  page: {
+    width: '85mm',
+    height: '55mm',
+    backgroundColor: '#ffffff',
+    position: 'relative',
+    fontFamily: 'Helvetica',
+  },
+  pageBleed: {
+    // 85x55mm + 3mm bleed on each side = 91x61mm
+    width: '91mm',
+    height: '61mm',
+    backgroundColor: '#ffffff',
+    position: 'relative',
+    fontFamily: 'Helvetica',
+    overflow: 'hidden',
+  },
+  // FRONT PAGE
+  frontContainer: {
+    flex: 1,
+    position: 'relative',
+    padding: '8mm',
+  },
+  frontLogo: {
+    position: 'absolute',
+    top: '5mm',
+    right: '5mm',
+    width: '25mm',
+  },
+  truckImage: {
+    position: 'absolute',
+    bottom: '-2mm',
+    left: '-5mm',
+    width: '100mm', // cover bleed width
+    height: '50mm',
+    objectFit: 'contain',
+  },
+  // BACK PAGE
+  backContainer: {
+    flex: 1,
+    position: 'relative',
+    padding: '6mm 6mm',
+  },
+  backLogo: {
+    width: '20mm',
+    marginBottom: '8mm',
+  },
+  backMiddle: {
+    flexDirection: 'row',
+    justifyContent: 'space-between',
+    alignItems: 'center',
+    marginBottom: '8mm',
+  },
+  nameSection: {
+    flexDirection: 'column',
+    width: '35%',
+  },
+  nameText: {
+    fontSize: 16,
+    fontWeight: 700,
+    color: '#000000',
+    marginBottom: 2,
+  },
+  roleText: {
+    fontSize: 8,
+    fontWeight: 400,
+    color: '#333333',
+  },
+  contactSection: {
+    flexDirection: 'column',
+    width: '45%',
+    paddingLeft: '2mm',
+  },
+  contactRow: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    marginBottom: 3,
+  },
+  iconCircle: {
+    width: 12,
+    height: 12,
+    borderRadius: 6,
+    backgroundColor: '#82ed20',
+    justifyContent: 'center',
+    alignItems: 'center',
+    marginRight: 4,
+  },
+  contactText: {
+    fontSize: 6.5,
+    fontWeight: 500,
+    color: '#000000',
+  },
+  qrSection: {
+    width: '20%',
+    alignItems: 'flex-end',
+  },
+  qrCode: {
+    width: '18mm',
+    height: '18mm',
+  },
+  footer: {
+    position: 'absolute',
+    bottom: '5mm',
+    left: '6mm',
+    right: '6mm',
+    flexDirection: 'row',
+    justifyContent: 'center',
+    alignItems: 'center',
+  },
+  footerText: {
+    fontSize: 6.5,
+    fontWeight: 500,
+    color: '#000000',
+  },
+  pipe: {
+    fontSize: 6.5,
+    fontWeight: 500,
+    color: '#82ed20',
+    marginHorizontal: 3,
+  },
+});
+
+export const PDFBusinessCard: React.FC<PDFBusinessCardProps> = ({
+  person,
+  logoFullPath,
+  truckImagePath,
+  qrCodeDataUrl,
+}) => {
   return (
-    <Document>
-      {/* Front: Logo and Navy Background */}
-      <Page size={[257.95, 172.91]} style={styles.pageFront}>
-        <Text style={styles.logoTextWhite}>KLZ</Text>
-        <View style={styles.accentLine} />
+    <Document
+      title={`Business Card - ${person.name}`}
+      author="KLZ Cables"
+      creator="KLZ React-PDF Engine"
+    >
+      {/* FRONT - 91x61mm with Bleed */}
+      <Page size={[258, 173]} style={styles.pageBleed}>
+        <Image src={truckImagePath} style={styles.truckImage} />
+        <Image src={logoFullPath} style={styles.frontLogo} />
       </Page>
 
-      {/* Back: Contact Details */}
-      <Page size={[257.95, 172.91]} style={styles.pageBack}>
-        <View style={styles.accentLineTop} />
+      {/* BACK - 91x61mm with Bleed */}
+      <Page size={[258, 173]} style={styles.pageBleed}>
+        <View style={styles.backContainer}>
+          <Image src={logoFullPath} style={styles.backLogo} />
 
-        <View style={styles.personInfo}>
-          <Text style={styles.name}>{person.name}</Text>
-          <Text style={styles.position}>{person.position}</Text>
-        </View>
+          <View style={styles.backMiddle}>
+            <View style={styles.nameSection}>
+              <Text style={styles.nameText}>{person.name}</Text>
+              <Text style={styles.roleText}>{person.role}</Text>
+            </View>
 
-        <View style={styles.contactGrid}>
-          <View style={styles.contactRow}>
-            <Text style={styles.contactLabel}>Phone</Text>
-            <Text style={styles.contactValue}>{person.phone}</Text>
+            <View style={styles.contactSection}>
+              <View style={styles.contactRow}>
+                <View style={styles.iconCircle} />
+                <Text style={styles.contactText}>{person.phone}</Text>
+              </View>
+              <View style={styles.contactRow}>
+                <View style={styles.iconCircle} />
+                <Text style={styles.contactText}>{person.email}</Text>
+              </View>
+              <View style={styles.contactRow}>
+                <View style={styles.iconCircle} />
+                <Text style={styles.contactText}>klz-cables.com</Text>
+              </View>
+            </View>
+
+            <View style={styles.qrSection}>
+              <Image src={qrCodeDataUrl} style={styles.qrCode} />
+            </View>
           </View>
-          <View style={styles.contactRow}>
-            <Text style={styles.contactLabel}>Email</Text>
-            <Text style={styles.contactValue}>{person.email}</Text>
-          </View>
-          <View style={styles.contactRow}>
-            <Text style={styles.contactLabel}>Web</Text>
-            <Text style={styles.contactValue}>{person.website}</Text>
+
+          <View style={styles.footer}>
+            <Text style={styles.footerText}>KLZ Vertriebs GmbH</Text>
+            <Text style={styles.pipe}>|</Text>
+            <Text style={styles.footerText}>Raiffeisenstraße 22</Text>
+            <Text style={styles.pipe}>|</Text>
+            <Text style={styles.footerText}>73630 Remshalden</Text>
           </View>
         </View>
-
-        <Text style={styles.logoTextBlue}>KLZ</Text>
       </Page>
     </Document>
   );