From ec62704c3a3cfec7f2ebf5b24431d36cafad58d3 Mon Sep 17 00:00:00 2001
From: Marc Mintel <marc@mintel.me>
Date: Tue, 9 Jun 2026 11:44:59 +0200
Subject: [PATCH] fix: adapt business card design to actual prod site brand
 colors

- Switch from Dark Navy to Bright Blue (#011dff)

- Remove industrial grid for a cleaner flat aesthetic
---
 lib/pdf-business-card.tsx | 159 +++++++++++++-------------------------
 1 file changed, 55 insertions(+), 104 deletions(-)

diff --git a/lib/pdf-business-card.tsx b/lib/pdf-business-card.tsx
index ef8d29b5..4a026f00 100644
--- a/lib/pdf-business-card.tsx
+++ b/lib/pdf-business-card.tsx
@@ -1,5 +1,5 @@
 import React from 'react';
-import { Document, Page, Text, View, StyleSheet, Svg, Line, Image } from '@react-pdf/renderer';
+import { Document, Page, Text, View, StyleSheet, Image } from '@react-pdf/renderer';
 import { KLZLogoVector } from './KLZLogoVector';
 
 export interface PersonData {
@@ -14,15 +14,14 @@ interface PDFBusinessCardProps {
   qrCodeDataUrl: string;
 }
 
-// Mintel Aesthetics Colors
+// Mintel Aesthetics Colors - EXACT PROD COLORS
 const COLORS = {
-  navy: '#001a4d',
-  navyLight: '#002870',
-  green: '#82ed20',
+  primary: '#011dff', // Bright Royal Blue
+  primaryDark: '#000e7a',
+  green: '#82ed20', // Brand Accent Green
   white: '#ffffff',
-  grayText: '#8899aa',
-  darkText: '#000000',
-  lightGray: '#f0f0f0',
+  grayText: '#6c757d',
+  lightGray: '#f8f9fa',
 };
 
 const styles = StyleSheet.create({
@@ -30,7 +29,7 @@ const styles = StyleSheet.create({
     // 85x55mm + 3mm bleed on each side = 91x61mm
     width: '91mm',
     height: '61mm',
-    backgroundColor: COLORS.navy,
+    backgroundColor: COLORS.primary,
     position: 'relative',
     fontFamily: 'Helvetica',
     overflow: 'hidden',
@@ -48,38 +47,38 @@ const styles = StyleSheet.create({
   frontContainer: {
     flex: 1,
     position: 'relative',
-    padding: '8mm',
-    flexDirection: 'column',
-    justifyContent: 'center',
-    alignItems: 'center',
   },
   frontLogoPos: {
     position: 'absolute',
     top: '8mm',
     right: '8mm',
   },
-  frontGraphicContainer: {
+  frontBottomBar: {
     position: 'absolute',
-    bottom: '-3mm',
-    left: '-3mm',
-    right: '-3mm',
-    height: '30mm',
-    backgroundColor: COLORS.navyLight,
+    bottom: 0,
+    left: 0,
+    right: 0,
+    height: '35mm',
+    backgroundColor: COLORS.primaryDark,
     borderTopWidth: 2,
     borderTopColor: COLORS.green,
+    display: 'flex',
+    justifyContent: 'center',
+    alignItems: 'center',
   },
   frontTagline: {
-    position: 'absolute',
-    bottom: '8mm',
-    left: '8mm',
-    color: COLORS.green,
-    fontSize: 10,
+    color: COLORS.white,
+    fontSize: 12,
     fontWeight: 'bold',
-    letterSpacing: 1.5,
+    letterSpacing: 2,
+    textTransform: 'uppercase',
   },
-  gridLine: {
-    position: 'absolute',
-    backgroundColor: 'rgba(255,255,255,0.05)',
+  frontSubTagline: {
+    color: COLORS.green,
+    fontSize: 7,
+    marginTop: 4,
+    letterSpacing: 1,
+    textTransform: 'uppercase',
   },
 
   // -- BACK --
@@ -89,13 +88,12 @@ const styles = StyleSheet.create({
     padding: '6mm 6mm',
   },
   backLogo: {
-    marginBottom: '6mm',
+    marginBottom: '8mm',
   },
   backMiddle: {
     flexDirection: 'row',
     justifyContent: 'space-between',
-    alignItems: 'center',
-    marginBottom: '8mm',
+    alignItems: 'flex-start',
     width: '100%',
   },
   nameSection: {
@@ -103,51 +101,51 @@ const styles = StyleSheet.create({
     width: '35%',
   },
   nameText: {
-    fontSize: 14,
+    fontSize: 13,
     fontWeight: 'bold',
-    color: COLORS.navy,
-    marginBottom: 2,
+    color: COLORS.primary,
+    marginBottom: 3,
   },
   roleText: {
-    fontSize: 7.5,
+    fontSize: 7,
     fontWeight: 'normal',
     color: COLORS.grayText,
     letterSpacing: 0.5,
+    textTransform: 'uppercase',
   },
   contactSection: {
     flexDirection: 'column',
     width: '45%',
-    paddingLeft: '2mm',
+    paddingLeft: '3mm',
     borderLeftWidth: 1,
     borderLeftColor: COLORS.lightGray,
   },
   contactRow: {
     flexDirection: 'row',
     alignItems: 'center',
-    marginBottom: 4,
+    marginBottom: 5,
   },
   iconCircle: {
-    width: 10,
-    height: 10,
-    borderRadius: 5,
+    width: 6,
+    height: 6,
+    borderRadius: 3,
     backgroundColor: COLORS.green,
-    marginRight: 5,
+    marginRight: 6,
   },
   contactText: {
     fontSize: 6.5,
-    color: COLORS.navy,
+    color: COLORS.primaryDark,
+    fontWeight: 'normal',
   },
   qrSection: {
     width: '20%',
     alignItems: 'flex-end',
   },
   qrCodeWrapper: {
-    width: '16mm',
-    height: '16mm',
-    padding: 2,
+    width: '15mm',
+    height: '15mm',
+    padding: 1,
     backgroundColor: COLORS.white,
-    borderWidth: 1,
-    borderColor: COLORS.lightGray,
   },
   qrCode: {
     width: '100%',
@@ -161,9 +159,6 @@ const styles = StyleSheet.create({
     flexDirection: 'row',
     justifyContent: 'flex-start',
     alignItems: 'center',
-    borderTopWidth: 1,
-    borderTopColor: COLORS.lightGray,
-    paddingTop: '2mm',
   },
   footerText: {
     fontSize: 6,
@@ -173,85 +168,41 @@ const styles = StyleSheet.create({
   pipe: {
     fontSize: 6,
     color: COLORS.green,
-    marginHorizontal: 4,
+    marginHorizontal: 5,
     fontWeight: 'bold',
   },
-  greenBar: {
-    position: 'absolute',
-    top: 0,
-    left: 0,
-    width: '3mm',
-    height: '61mm',
-    backgroundColor: COLORS.green,
-  },
 });
 
-// A simple technical grid background for the industrial aesthetic
-const IndustrialGrid = () => (
-  <Svg
-    viewBox="0 0 910 610"
-    style={{ position: 'absolute', top: 0, left: 0, right: 0, bottom: 0, opacity: 0.1 }}
-  >
-    {Array.from({ length: 10 }).map((_, i) => (
-      <Line
-        key={`h-${i}`}
-        x1="0"
-        y1={i * 61}
-        x2="910"
-        y2={i * 61}
-        stroke={COLORS.white}
-        strokeWidth={1}
-      />
-    ))}
-    {Array.from({ length: 15 }).map((_, i) => (
-      <Line
-        key={`v-${i}`}
-        x1={i * 61}
-        y1="0"
-        x2={i * 61}
-        y2="610"
-        stroke={COLORS.white}
-        strokeWidth={1}
-      />
-    ))}
-  </Svg>
-);
-
 export const PDFBusinessCard: React.FC<PDFBusinessCardProps> = ({ person, qrCodeDataUrl }) => {
   return (
     <Document
       title={`Business Card - ${person.name}`}
       author="KLZ Cables"
-      creator="KLZ React-PDF Engine"
+      creator="KLZ Print Engine"
     >
-      {/* FRONT - Dark Navy Industrial */}
+      {/* FRONT - Clean Modern KLZ Brand */}
       <Page size={[258, 173]} style={styles.pageBleed}>
-        <IndustrialGrid />
-
         <View style={styles.frontLogoPos}>
-          <KLZLogoVector width={100} color={COLORS.white} />
+          <KLZLogoVector width={110} color={COLORS.white} />
         </View>
 
-        <View style={styles.frontGraphicContainer}>
-          <IndustrialGrid />
+        <View style={styles.frontBottomBar}>
+          <Text style={styles.frontTagline}>Empowering Energy</Text>
+          <Text style={styles.frontSubTagline}>High-Quality Cable Infrastructure</Text>
         </View>
-
-        <Text style={styles.frontTagline}>INDUSTRIAL CABLE SOLUTIONS</Text>
       </Page>
 
-      {/* BACK - Clean White with Green Accents */}
+      {/* BACK - Clean White with Bright Blue & Green Accents */}
       <Page size={[258, 173]} style={styles.pageBleedBack}>
-        <View style={styles.greenBar} />
-
         <View style={styles.backContainer}>
           <View style={styles.backLogo}>
-            <KLZLogoVector width={80} color={COLORS.navy} />
+            <KLZLogoVector width={70} color={COLORS.primary} />
           </View>
 
           <View style={styles.backMiddle}>
             <View style={styles.nameSection}>
               <Text style={styles.nameText}>{person.name}</Text>
-              <Text style={styles.roleText}>{person.role.toUpperCase()}</Text>
+              <Text style={styles.roleText}>{person.role}</Text>
             </View>
 
             <View style={styles.contactSection}>