feat(pdf): finalize business card generation with print standards and white variants

- Replaced buggy RGB PDF backgrounds with exact Ghostscript outlining
- Generated front/back dual pages natively in React-PDF
- Applied high-end minimalist design standards to QR codes (no frames)
- Established Ghostscript pipeline for reliable font-to-path generation
- Added White variant generation process

scripts/convert-logo.cjs

@@ -1,34 +0,0 @@
-const fs = require('fs');
-
-const svgContent = fs.readFileSync('public/logo-white.svg', 'utf8');
-
-const pathRegex = /<path d="([^"]+)"/g;
-let paths = [];
-let match;
-while ((match = pathRegex.exec(svgContent)) !== null) {
-  paths.push(match[1]);
-}
-
-const componentCode = `import React from 'react';
-import { Svg, G, Path } from '@react-pdf/renderer';
-
-interface KLZLogoVectorProps {
-  width?: number;
-  color?: string;
-}
-
-export const KLZLogoVector: React.FC<KLZLogoVectorProps> = ({ width = 140, color = '#ffffff' }) => {
-  const height = width * (99 / 295);
-
-  return (
-    <Svg viewBox="0 0 295 99" style={{ width, height }}>
-      <G>
-${paths.map(d => `        <Path d="${d}" fill={color} />`).join('\n')}
-      </G>
-    </Svg>
-  );
-};
-`;
-
-fs.writeFileSync('lib/KLZLogoVector.tsx', componentCode);
-console.log('Successfully wrote lib/KLZLogoVector.tsx');

scripts/gen-logo-vector.ts

@@ -1,21 +0,0 @@
-import * as fs from 'fs';
-
-const svgContent = fs.readFileSync('public/logo-white.svg', 'utf8');
-const dMatches = [...svgContent.matchAll(/d="([^"]+)"/g)].map((m) => m[1]);
-
-let tsx = `import React from 'react';\nimport { Svg, G, Path } from '@react-pdf/renderer';\n\n`;
-tsx += `export const KLZLogoVector = ({ width, color }: { width: number, color: string }) => {\n`;
-tsx += `  // Original viewBox was 0 0 295 99, so height is width * 99 / 295\n`;
-tsx += `  const height = width * (99 / 295);\n`;
-tsx += `  return (\n`;
-tsx += `    <Svg viewBox="0 0 295 99" width={width} height={height}>\n`;
-tsx += `      <G transform="matrix(1,0,0,1,0.000798697,0)">\n`;
-
-for (const d of dMatches) {
-  tsx += `        <Path d="${d}" fill={color} />\n`;
-}
-
-tsx += `      </G>\n    </Svg>\n  );\n};\n`;
-
-fs.writeFileSync('lib/KLZLogoVector.tsx', tsx);
-console.log('Generated KLZLogoVector.tsx');

scripts/generate-business-cards.ts

@@ -13,10 +13,12 @@ import QRCode from 'qrcode';
 
 const CONFIG = {
   outputDir: path.join(process.cwd(), 'public/downloads/business-cards'),
-  logoWhite: path.join(process.cwd(), 'public/logo-white.svg'),
-  logoBlue: path.join(process.cwd(), 'public/logo-blue.svg'),
+  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'),
+  fontRegular: path.join(process.cwd(), 'public/fonts/Inter-Regular.ttf'),
+  fontBold: path.join(process.cwd(), 'public/fonts/Inter-Bold.ttf'),
 };
 
 const PEOPLE: PersonData[] = [
@@ -32,21 +34,14 @@ const PEOPLE: PersonData[] = [
     phone: '+49 151 1775 2873',
     email: 'klaus.mintel@klz-cables.com',
   },
+  {
+    name: 'Johannes Gleich',
+    role: 'Platzhalter Rolle',
+    phone: '+49 000 0000000',
+    email: 'johannes.gleich@klz-cables.com',
+  },
 ];
 
-function convertToCMYK(inputPath: string, outputPath: string) {
-  console.log(`- Converting to CMYK via Ghostscript...`);
-  try {
-    const gsCommand = `gs -dSAFER -dBATCH -dNOPAUSE -dNOCACHE -sDEVICE=pdfwrite -sColorConversionStrategy=CMYK -dProcessColorModel=/DeviceCMYK -dAutoFilterColorImages=false -dColorImageFilter=/FlateEncode -sOutputFile="${outputPath}" "${inputPath}"`;
-
-    execSync(gsCommand, { stdio: 'pipe' });
-    console.log(`✓ CMYK Print File generated: ${path.basename(outputPath)}`);
-  } catch (err: any) {
-    console.error(`❌ Ghostscript CMYK conversion failed! Is ghostscript (gs) installed?`);
-    console.error(err.message);
-  }
-}
-
 async function generateBusinessCards() {
   if (!fs.existsSync(CONFIG.outputDir)) {
     fs.mkdirSync(CONFIG.outputDir, { recursive: true });
@@ -77,10 +72,10 @@ END:VCARD`;
 
     const safeName = person.name.replace(/\s+/g, '_');
     const finalFileName = `KLZ_Visitenkarte_${safeName}.pdf`;
-    const tempRgbPath = path.join(CONFIG.outputDir, `temp_rgb_${safeName}.pdf`);
+    const rgbPath = path.join(CONFIG.outputDir, `RGB_${finalFileName}`);
     const finalPath = path.join(CONFIG.outputDir, finalFileName);
 
-    console.log(`- Rendering React-PDF layout...`);
+    console.log(`- Rendering React-PDF layout (RGB ONLY)...`);
     const buffer = await renderToBuffer(
       React.createElement(PDFBusinessCard, {
         person,
@@ -88,15 +83,36 @@ END:VCARD`;
       }),
     );
 
-    fs.writeFileSync(tempRgbPath, buffer);
-    convertToCMYK(tempRgbPath, finalPath);
+    fs.writeFileSync(rgbPath, buffer);
 
-    // Clean up temporary RGB file
-    if (fs.existsSync(tempRgbPath)) {
-      fs.unlinkSync(tempRgbPath);
-    }
+    console.log(`- Outlining fonts via Ghostscript (Keeping RGB)...`);
+    const gsCommand = `gs -dNoOutputFonts -sDEVICE=pdfwrite -o "${finalPath}" "${rgbPath}"`;
+    execSync(gsCommand, { stdio: 'ignore' });
 
-    console.log(`✓ Final Print File generated: ${finalFileName}`);
+    fs.unlinkSync(rgbPath);
+
+    console.log(`✓ Final Print File generated (Fonts to Paths, RGB preserved): ${finalFileName}`);
+
+    // Generate White Variant
+    const finalFileNameWhite = `KLZ_Visitenkarte_${safeName}_White.pdf`;
+    const rgbPathWhite = path.join(CONFIG.outputDir, `RGB_${finalFileNameWhite}`);
+    const finalPathWhite = path.join(CONFIG.outputDir, finalFileNameWhite);
+
+    console.log(`- Rendering White Variant...`);
+    const bufferWhite = await renderToBuffer(
+      React.createElement(PDFBusinessCard, {
+        person,
+        qrCodeDataUrl,
+        isWhiteVariant: true,
+      }),
+    );
+
+    fs.writeFileSync(rgbPathWhite, bufferWhite);
+
+    const gsCommandWhite = `gs -dNoOutputFonts -sDEVICE=pdfwrite -o "${finalPathWhite}" "${rgbPathWhite}"`;
+    execSync(gsCommandWhite, { stdio: 'ignore' });
+    fs.unlinkSync(rgbPathWhite);
+    console.log(`✓ White Variant generated: ${finalFileNameWhite}`);
   }
 }