feat: Add white and black color variants for business cards with precise SVG fills

lib/pdf-business-card.tsx

@@ -27,13 +27,14 @@ export interface PersonData {
 export interface PDFBusinessCardProps {
   person: PersonData;
   qrCodeDataUrl: string;
-  isWhiteVariant?: boolean;
+  variant?: 'blue' | 'white' | 'black';
 }
 
 // Mintel Aesthetics Colors - EXACT PROD COLORS
 const COLORS = {
   primary: '#011dff', // Brand Royal Blue
   green: '#82ed20', // Brand Accent Green
+  darkGreen: '#4A9E00', // Darker green for white background visibility
   white: '#ffffff',
   grayText: '#6c757d',
   black: '#0a0a0a',
@@ -74,7 +75,7 @@ const styles = StyleSheet.create({
     objectFit: 'contain',
     objectPositionX: 'center',
     objectPositionY: 'center',
-    opacity: 0.2, // Much more transparent
+    opacity: 0.4, // Less transparent, more contrast
   },
   frontContainer: {
     flex: 1,
@@ -83,7 +84,7 @@ const styles = StyleSheet.create({
     alignItems: 'center',
   },
   frontLogo: {
-    width: 140,
+    width: 175,
     zIndex: 100,
   },
   frontTagline: {
@@ -118,12 +119,12 @@ const styles = StyleSheet.create({
     gap: 2,
   },
   frontBrandIcon: {
-    width: 14,
-    height: 14,
+    width: 18,
+    height: 18,
     opacity: 0.9,
   },
   frontBrandText: {
-    fontSize: 4,
+    fontSize: 5.5,
     color: COLORS.white,
     textTransform: 'uppercase',
     letterSpacing: 0.5,
@@ -131,7 +132,7 @@ const styles = StyleSheet.create({
   },
   frontTaglineBar: {
     color: COLORS.green,
-    fontSize: 5.5,
+    fontSize: 7,
     letterSpacing: 1.5,
     fontWeight: 'bold',
     textTransform: 'uppercase',
@@ -192,14 +193,14 @@ const styles = StyleSheet.create({
     marginBottom: '5mm',
   },
   nameText: {
-    fontSize: 14,
+    fontSize: 16,
     fontWeight: 'bold',
     color: COLORS.neutralDark,
     marginBottom: 2,
     letterSpacing: -0.2,
   },
   roleText: {
-    fontSize: 7.5,
+    fontSize: 9,
     fontWeight: 'bold',
     color: COLORS.primary,
     letterSpacing: 0.5,
@@ -214,12 +215,12 @@ const styles = StyleSheet.create({
     alignItems: 'center',
   },
   iconWrapper: {
-    width: 10,
+    width: 12,
     justifyContent: 'center',
     alignItems: 'flex-start',
   },
   contactText: {
-    fontSize: 7.5,
+    fontSize: 9,
     color: COLORS.neutralDark,
     fontWeight: 'normal',
     paddingTop: 1,
@@ -244,7 +245,7 @@ const styles = StyleSheet.create({
     height: '100%',
   },
   qrLabel: {
-    fontSize: 3.5,
+    fontSize: 5,
     color: COLORS.neutralDark, // Subtle grey instead of loud blue
     fontWeight: 'bold',
     letterSpacing: 1.2,
@@ -253,7 +254,7 @@ const styles = StyleSheet.create({
 
 // SVG Icons
 const PhoneIcon = () => (
-  <Svg viewBox="0 0 24 24" width={7} height={7}>
+  <Svg viewBox="0 0 24 24" width={9} height={9}>
     <Path
       d="M6.62 10.79c1.44 2.83 3.76 5.14 6.59 6.59l2.2-2.2c.27-.27.67-.36 1.02-.24 1.12.37 2.33.57 3.57.57.55 0 1 .45 1 1V20c0 .55-.45 1-1 1-9.39 0-17-7.61-17-17 0-.55.45-1 1-1h3.5c.55 0 1 .45 1 1 0 1.25.2 2.45.57 3.57.11.35.03.74-.25 1.02l-2.2 2.2z"
       fill="#000000"
@@ -262,7 +263,7 @@ const PhoneIcon = () => (
 );
 
 const EmailIcon = () => (
-  <Svg viewBox="0 0 24 24" width={7} height={7}>
+  <Svg viewBox="0 0 24 24" width={9} height={9}>
     <Path
       d="M20 4H4c-1.1 0-1.99.9-1.99 2L2 18c0 1.1.9 2 2 2h16c1.1 0 2-.9 2-2V6c0-1.1-.9-2-2-2zm0 4l-8 5-8-5V6l8 5 8-5v2z"
       fill="#000000"
@@ -271,7 +272,7 @@ const EmailIcon = () => (
 );
 
 const GlobeIcon = () => (
-  <Svg viewBox="0 0 24 24" width={7} height={7}>
+  <Svg viewBox="0 0 24 24" width={9} height={9}>
     <Path
       d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm-1 17.93c-3.95-.49-7-3.85-7-7.93 0-.62.08-1.21.21-1.79L9 15v1c0 1.1.9 2 2 2v1.93zm6.9-2.54c-.26-.81-1-1.39-1.9-1.39h-1v-3c0-.55-.45-1-1-1H8v-2h2c.55 0 1-.45 1-1V7h2c1.1 0 2-.9 2-2v-.41c2.93 1.19 5 4.06 5 7.41 0 2.08-.8 3.97-2.1 5.39z"
       fill="#000000"
@@ -280,7 +281,7 @@ const GlobeIcon = () => (
 );
 
 const ScanIcon = () => (
-  <Svg viewBox="0 0 24 24" width={7} height={7}>
+  <Svg viewBox="0 0 24 24" width={9} height={9}>
     <Path
       d="M3 3h6v2H5v4H3V3zm18 0h-6v2h4v4h2V3zM3 21h6v-2H5v-4H3v6zm18 0h-6v-2h4v-4h2v6zM7 7h10v10H7V7z"
       fill="#000000"
@@ -325,7 +326,7 @@ const VectorLogo = ({ paths, style }: { paths: { d: string; fill: string }[]; st
 );
 
 export const IconSolar = ({ style, color = 'white' }: { style: any; color?: string }) => (
-  <Svg viewBox="0 0 46 45" width={14} height={14} style={style}>
+  <Svg viewBox="0 0 46 45" width={18} height={18} style={style}>
     <G>
       <Path
         d="M44.798,22.471c-0,-11.988 -9.733,-21.721 -21.722,-21.721c-11.988,0 -21.721,9.733 -21.721,21.721c-0,11.989 9.733,21.722 21.721,21.722c11.989,0 21.722,-9.733 21.722,-21.722Z"
@@ -435,7 +436,7 @@ export const AbstractCable = ({
 );
 
 export const IconLowVoltage = ({ style, color = 'white' }: { style: any; color?: string }) => (
-  <Svg viewBox="0 0 45 45" width={14} height={14} style={style}>
+  <Svg viewBox="0 0 45 45" width={18} height={18} style={style}>
     <G>
       <Path
         d="M44.193,22.471c0,-11.988 -9.733,-21.721 -21.722,-21.721c-11.988,0 -21.721,9.733 -21.721,21.721c0,11.989 9.733,21.722 21.722,21.722c11.988,0 21.721,-9.733 21.721,-21.722Z"
@@ -462,7 +463,7 @@ export const IconLowVoltage = ({ style, color = 'white' }: { style: any; color?:
 );
 
 export const IconMediumVoltage = ({ style, color = 'white' }: { style: any; color?: string }) => (
-  <Svg viewBox="0 0 46 45" width={14} height={14} style={style}>
+  <Svg viewBox="0 0 46 45" width={18} height={18} style={style}>
     <G>
       <Path
         d="M44.475,22.471c0,-11.988 -9.733,-21.721 -21.721,-21.721c-11.988,0 -21.722,9.733 -21.722,21.721c0,11.989 9.734,21.722 21.722,21.722c11.988,0 21.721,-9.733 21.721,-21.722Z"
@@ -505,7 +506,7 @@ export const IconMediumVoltage = ({ style, color = 'white' }: { style: any; colo
 );
 
 export const IconHighVoltage = ({ style, color = 'white' }: { style: any; color?: string }) => (
-  <Svg viewBox="0 0 46 46" width={14} height={14} style={style}>
+  <Svg viewBox="0 0 46 46" width={18} height={18} style={style}>
     <G>
       <Path
         d="M44.612,22.931c0,-11.988 -9.733,-21.722 -21.721,-21.722c-11.988,0 -21.722,9.734 -21.722,21.722c0,11.988 9.734,21.721 21.722,21.721c11.988,0 21.721,-9.733 21.721,-21.721Z"
@@ -608,8 +609,10 @@ export const IconHighVoltage = ({ style, color = 'white' }: { style: any; color?
 export const PDFBusinessCard: React.FC<PDFBusinessCardProps> = ({
   person,
   qrCodeDataUrl,
-  isWhiteVariant = false,
+  variant = 'blue',
 }) => {
+  const isWhiteVariant = variant === 'white' || variant === 'black';
+
   const logoWhitePath = path.join(process.cwd(), 'public', 'logo-green-text.svg');
   const logoBluePath = path.join(process.cwd(), 'public', 'logo-green-text-blue.svg');
   const logoBlueWithTaglinePath = path.join(
@@ -617,12 +620,25 @@ export const PDFBusinessCard: React.FC<PDFBusinessCardProps> = ({
     'public',
     'logo-green-text-blue-with-tagline.svg',
   );
+  const logoBlackWithTaglinePath = path.join(
+    process.cwd(),
+    'public',
+    'logo-green-text-black-with-tagline.svg',
+  );
 
   const logoWhitePaths = parseSvgPaths(logoWhitePath);
   const logoBluePaths = parseSvgPaths(logoBluePath);
   const logoBlueWithTaglinePaths = parseSvgPaths(logoBlueWithTaglinePath);
+  const logoBlackWithTaglinePaths = parseSvgPaths(logoBlackWithTaglinePath);
+
+  const getFrontLogoPaths = () => {
+    if (variant === 'black') return logoBlackWithTaglinePaths;
+    if (variant === 'white') return logoBlueWithTaglinePaths;
+    return logoWhitePaths;
+  };
+
   const bgImagePath = isWhiteVariant
-    ? path.join(process.cwd(), 'public', 'truck_original_rasterized.png')
+    ? path.join(process.cwd(), 'public', 'media', 'cable_drums_truck.png')
     : path.join(process.cwd(), 'public', 'cable_drums_bg.png');
 
   return (
@@ -639,14 +655,17 @@ export const PDFBusinessCard: React.FC<PDFBusinessCardProps> = ({
         <View style={styles.truckWrapper}>
           <Image
             src={bgImagePath}
-            style={[styles.frontBackgroundImage, isWhiteVariant && { opacity: 0.08 }]}
+            style={[styles.frontBackgroundImage, isWhiteVariant && { opacity: 0.2 }]}
           />
         </View>
         <View
-          style={[styles.frontGreenBarBottom, isWhiteVariant && { backgroundColor: '#ffffff' }]}
+          style={[
+            styles.frontGreenBarBottom,
+            isWhiteVariant && { backgroundColor: '#ffffff', borderTopColor: COLORS.darkGreen },
+          ]}
         >
           <Text style={[styles.frontTaglineBar, isWhiteVariant && { color: COLORS.black }]}>
-            VON 0,6 KV BIS 110 KV
+            VON 0,6/1,0 KV BIS 64/110 KV
           </Text>
           <View style={styles.frontIconsGroup}>
             <View style={styles.frontBrandIconWrapper}>
@@ -688,10 +707,7 @@ export const PDFBusinessCard: React.FC<PDFBusinessCardProps> = ({
           </View>
         </View>
         <View style={styles.frontContainer}>
-          <VectorLogo
-            paths={isWhiteVariant ? logoBlueWithTaglinePaths : logoWhitePaths}
-            style={styles.frontLogo}
-          />
+          <VectorLogo paths={getFrontLogoPaths()} style={styles.frontLogo} />
         </View>
       </Page>