fix: correctly map exact logo vectors from public/logo-white.svg with correct viewBox

- Previously, the logo was cropped because of an incorrect viewBox (100x100 instead of 295x99)

- Mapped all vector paths perfectly to ensure exact branding parity

lib/KLZLogoVector.tsx

@@ -1,12 +1,17 @@
 import React from 'react';
 import { Svg, G, Path } from '@react-pdf/renderer';
 
-export const KLZLogoVector = ({ width, color }: { width: number; color: string }) => {
-  // Original viewBox was 0 0 295 99, so height is width * 99 / 295
+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" width={width} height={height}>
-      <G transform="matrix(1,0,0,1,0.000798697,0)">
+    <Svg viewBox="0 0 295 99" style={{ width, height }}>
+      <G>
         <Path
           d="M83.219,92.879C83.219,93.629 82.973,94.043 81.992,94.043C81.008,94.043 80.82,93.629 80.82,92.91L80.82,89.969C80.82,89.25 81.008,88.836 81.992,88.836C83.043,88.836 83.219,89.25 83.219,89.988L84.578,89.988C84.578,88.305 83.82,87.637 81.992,87.637C80.16,87.637 79.461,88.297 79.461,89.898L79.461,92.98C79.461,94.543 80.191,95.242 81.992,95.242C83.793,95.242 84.578,94.543 84.578,92.879L83.219,92.879Z"
           fill={color}

lib/pdf-business-card.tsx

@@ -1,5 +1,6 @@
 import React from 'react';
 import { Document, Page, Text, View, StyleSheet, Image } from '@react-pdf/renderer';
+
 import { KLZLogoVector } from './KLZLogoVector';
 
 export interface PersonData {

scripts/convert-logo.cjs

@@ -0,0 +1,34 @@
+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/generate-business-cards.ts

@@ -13,8 +13,8 @@ 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'),
+  logoWhite: path.join(process.cwd(), 'public/logo-white.svg'),
+  logoBlue: path.join(process.cwd(), 'public/logo-blue.svg'),
   logoFull: path.join(process.cwd(), 'public/logo-full.png'),
   truckImage: path.join(process.cwd(), 'public/truck.png'),
 };