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 = () => (
-
-);
-
export const PDFBusinessCard: React.FC = ({ person, qrCodeDataUrl }) => {
return (
- {/* FRONT - Dark Navy Industrial */}
+ {/* FRONT - Clean Modern KLZ Brand */}
-
-
-
+
-
-
+
+ Empowering Energy
+ High-Quality Cable Infrastructure
-
- INDUSTRIAL CABLE SOLUTIONS
- {/* BACK - Clean White with Green Accents */}
+ {/* BACK - Clean White with Bright Blue & Green Accents */}
-
-
-
+
{person.name}
- {person.role.toUpperCase()}
+ {person.role}