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

scripts/generate-business-cards.ts

@@ -9,45 +9,34 @@ import * as React from 'react';
 import { renderToBuffer } from '@react-pdf/renderer';
 import { execSync } from 'child_process';
 import { PDFBusinessCard, PersonData } from '../lib/pdf-business-card';
+import QRCode from 'qrcode';
 
 const CONFIG = {
   outputDir: path.join(process.cwd(), 'public/downloads/business-cards'),
+  logoWhite: path.join(process.cwd(), 'public/logo-white.png'),
+  logoBlue: path.join(process.cwd(), 'public/logo-blue.png'),
+  logoFull: path.join(process.cwd(), 'public/logo-full.png'),
+  truckImage: path.join(process.cwd(), 'public/truck.png'),
 };
 
 const PEOPLE: PersonData[] = [
   {
     name: 'Michael Bodemer',
-    position: 'Owner & Managing Director',
-    phone: '+49 151 462 467 98',
+    role: 'Managing Director',
+    phone: '+49 171 785 2420',
     email: 'michael.bodemer@klz-cables.com',
-    website: 'www.klz-cables.com',
   },
   {
     name: 'Klaus Mintel',
-    position: 'Managing Director',
+    role: 'Managing Director',
     phone: '+49 151 1775 2873',
     email: 'klaus.mintel@klz-cables.com',
-    website: 'www.klz-cables.com',
   },
 ];
 
-async function ensureOutputDir() {
-  if (!fs.existsSync(CONFIG.outputDir)) {
-    fs.mkdirSync(CONFIG.outputDir, { recursive: true });
-  }
-}
-
-/**
- * Konvertiert ein RGB PDF zu CMYK via Ghostscript.
- */
 function convertToCMYK(inputPath: string, outputPath: string) {
   console.log(`- Converting to CMYK via Ghostscript...`);
   try {
-    // Basic CMYK conversion via Ghostscript.
-    // -dSAFER -dBATCH -dNOPAUSE
-    // -sDEVICE=pdfwrite
-    // -sColorConversionStrategy=CMYK
-    // -dProcessColorModel=/DeviceCMYK
     const gsCommand = `gs -dSAFER -dBATCH -dNOPAUSE -dNOCACHE -sDEVICE=pdfwrite -sColorConversionStrategy=CMYK -dProcessColorModel=/DeviceCMYK -dAutoFilterColorImages=false -dColorImageFilter=/FlateEncode -sOutputFile="${outputPath}" "${inputPath}"`;
 
     execSync(gsCommand, { stdio: 'pipe' });
@@ -59,11 +48,33 @@ function convertToCMYK(inputPath: string, outputPath: string) {
 }
 
 async function generateBusinessCards() {
-  await ensureOutputDir();
+  if (!fs.existsSync(CONFIG.outputDir)) {
+    fs.mkdirSync(CONFIG.outputDir, { recursive: true });
+  }
 
   for (const person of PEOPLE) {
     console.log(`\nGenerating Business Card for: ${person.name}`);
 
+    // Generate VCard QR Code
+    const lastName = person.name.split(' ').slice(1).join(' ');
+    const firstName = person.name.split(' ')[0];
+    const vcard = `BEGIN:VCARD
+VERSION:3.0
+N:${lastName};${firstName};;;
+FN:${person.name}
+ORG:KLZ Vertriebs GmbH
+TITLE:${person.role}
+TEL;TYPE=WORK,VOICE:${person.phone}
+EMAIL;TYPE=PREF,INTERNET:${person.email}
+URL:https://klz-cables.com
+END:VCARD`;
+
+    const qrCodeDataUrl = await QRCode.toDataURL(vcard, {
+      width: 400,
+      margin: 0,
+      color: { dark: '#000000', light: '#ffffff' },
+    });
+
     const safeName = person.name.replace(/\s+/g, '_');
     const rgbFileName = `KLZ_BusinessCard_${safeName}_RGB.pdf`;
     const cmykFileName = `KLZ_BusinessCard_${safeName}_CMYK_Print.pdf`;
@@ -75,6 +86,11 @@ async function generateBusinessCards() {
     const buffer = await renderToBuffer(
       React.createElement(PDFBusinessCard, {
         person,
+        logoWhitePath: CONFIG.logoWhite,
+        logoBluePath: CONFIG.logoBlue,
+        logoFullPath: CONFIG.logoFull,
+        truckImagePath: CONFIG.truckImage,
+        qrCodeDataUrl,
       }),
     );
 
@@ -93,7 +109,7 @@ async function main() {
     await generateBusinessCards();
     console.log(`\n✅ Finished in ${((Date.now() - start) / 1000).toFixed(2)}s`);
   } catch (error) {
-    console.error('\\n❌ Fatal error:', error);
+    console.error('\n❌ Fatal error:', error);
     process.exit(1);
   }
 }