From b6d6637e020f2a4878ed7ed84b33c7338b50526e Mon Sep 17 00:00:00 2001
From: Marc Mintel <marc@mintel.me>
Date: Tue, 9 Jun 2026 14:58:52 +0200
Subject: [PATCH] fix: refactor layout to stack elements vertically and prevent
 overlapping

- Name and Contact info are now vertically stacked in a left column

- Guarantees no horizontal overlap issues for long names or emails
---
 lib/pdf-business-card.tsx | 164 ++++++++++++--------------------------
 1 file changed, 51 insertions(+), 113 deletions(-)

diff --git a/lib/pdf-business-card.tsx b/lib/pdf-business-card.tsx
index 4a026f00..f965e05f 100644
--- a/lib/pdf-business-card.tsx
+++ b/lib/pdf-business-card.tsx
@@ -17,11 +17,9 @@ interface PDFBusinessCardProps {
 // Mintel Aesthetics Colors - EXACT PROD COLORS
 const COLORS = {
   primary: '#011dff', // Bright Royal Blue
-  primaryDark: '#000e7a',
   green: '#82ed20', // Brand Accent Green
   white: '#ffffff',
   grayText: '#6c757d',
-  lightGray: '#f8f9fa',
 };
 
 const styles = StyleSheet.create({
@@ -46,68 +44,42 @@ const styles = StyleSheet.create({
   // -- FRONT --
   frontContainer: {
     flex: 1,
-    position: 'relative',
-  },
-  frontLogoPos: {
-    position: 'absolute',
-    top: '8mm',
-    right: '8mm',
-  },
-  frontBottomBar: {
-    position: 'absolute',
-    bottom: 0,
-    left: 0,
-    right: 0,
-    height: '35mm',
-    backgroundColor: COLORS.primaryDark,
-    borderTopWidth: 2,
-    borderTopColor: COLORS.green,
-    display: 'flex',
     justifyContent: 'center',
     alignItems: 'center',
   },
-  frontTagline: {
-    color: COLORS.white,
-    fontSize: 12,
-    fontWeight: 'bold',
-    letterSpacing: 2,
-    textTransform: 'uppercase',
-  },
-  frontSubTagline: {
-    color: COLORS.green,
-    fontSize: 7,
-    marginTop: 4,
-    letterSpacing: 1,
-    textTransform: 'uppercase',
-  },
 
   // -- BACK --
   backContainer: {
     flex: 1,
-    position: 'relative',
-    padding: '6mm 6mm',
+    padding: '8mm',
+    flexDirection: 'column',
+    justifyContent: 'space-between',
   },
-  backLogo: {
-    marginBottom: '8mm',
+  backHeader: {
+    marginBottom: 'auto',
   },
-  backMiddle: {
+  backBody: {
     flexDirection: 'row',
     justifyContent: 'space-between',
-    alignItems: 'flex-start',
+    alignItems: 'flex-end',
     width: '100%',
   },
-  nameSection: {
+  leftColumn: {
+    flex: 1,
     flexDirection: 'column',
-    width: '35%',
+    paddingRight: '4mm',
+  },
+  nameSection: {
+    marginBottom: '6mm',
   },
   nameText: {
-    fontSize: 13,
+    fontSize: 14,
     fontWeight: 'bold',
     color: COLORS.primary,
-    marginBottom: 3,
+    marginBottom: 2,
   },
   roleText: {
-    fontSize: 7,
+    fontSize: 7.5,
     fontWeight: 'normal',
     color: COLORS.grayText,
     letterSpacing: 0.5,
@@ -115,35 +87,32 @@ const styles = StyleSheet.create({
   },
   contactSection: {
     flexDirection: 'column',
-    width: '45%',
-    paddingLeft: '3mm',
-    borderLeftWidth: 1,
-    borderLeftColor: COLORS.lightGray,
   },
   contactRow: {
     flexDirection: 'row',
     alignItems: 'center',
-    marginBottom: 5,
+    marginBottom: 4,
   },
   iconCircle: {
-    width: 6,
-    height: 6,
-    borderRadius: 3,
+    width: 4,
+    height: 4,
+    borderRadius: 2,
     backgroundColor: COLORS.green,
     marginRight: 6,
   },
   contactText: {
-    fontSize: 6.5,
-    color: COLORS.primaryDark,
+    fontSize: 7,
+    color: COLORS.primary,
     fontWeight: 'normal',
   },
-  qrSection: {
-    width: '20%',
+  rightColumn: {
+    width: '18mm',
+    flexDirection: 'column',
     alignItems: 'flex-end',
   },
   qrCodeWrapper: {
-    width: '15mm',
-    height: '15mm',
+    width: '18mm',
+    height: '18mm',
     padding: 1,
     backgroundColor: COLORS.white,
   },
@@ -151,26 +120,6 @@ const styles = StyleSheet.create({
     width: '100%',
     height: '100%',
   },
-  footer: {
-    position: 'absolute',
-    bottom: '5mm',
-    left: '6mm',
-    right: '6mm',
-    flexDirection: 'row',
-    justifyContent: 'flex-start',
-    alignItems: 'center',
-  },
-  footerText: {
-    fontSize: 6,
-    color: COLORS.grayText,
-    letterSpacing: 0.5,
-  },
-  pipe: {
-    fontSize: 6,
-    color: COLORS.green,
-    marginHorizontal: 5,
-    fontWeight: 'bold',
-  },
 });
 
 export const PDFBusinessCard: React.FC<PDFBusinessCardProps> = ({ person, qrCodeDataUrl }) => {
@@ -182,58 +131,47 @@ export const PDFBusinessCard: React.FC<PDFBusinessCardProps> = ({ person, qrCode
     >
       {/* FRONT - Clean Modern KLZ Brand */}
       <Page size={[258, 173]} style={styles.pageBleed}>
-        <View style={styles.frontLogoPos}>
-          <KLZLogoVector width={110} color={COLORS.white} />
-        </View>
-
-        <View style={styles.frontBottomBar}>
-          <Text style={styles.frontTagline}>Empowering Energy</Text>
-          <Text style={styles.frontSubTagline}>High-Quality Cable Infrastructure</Text>
+        <View style={styles.frontContainer}>
+          <KLZLogoVector width={140} color={COLORS.white} />
         </View>
       </Page>
 
       {/* BACK - Clean White with Bright Blue & Green Accents */}
       <Page size={[258, 173]} style={styles.pageBleedBack}>
         <View style={styles.backContainer}>
-          <View style={styles.backLogo}>
-            <KLZLogoVector width={70} color={COLORS.primary} />
+          <View style={styles.backHeader}>
+            <KLZLogoVector width={80} 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}</Text>
-            </View>
+          <View style={styles.backBody}>
+            <View style={styles.leftColumn}>
+              <View style={styles.nameSection}>
+                <Text style={styles.nameText}>{person.name}</Text>
+                <Text style={styles.roleText}>{person.role}</Text>
+              </View>
 
-            <View style={styles.contactSection}>
-              <View style={styles.contactRow}>
-                <View style={styles.iconCircle} />
-                <Text style={styles.contactText}>{person.phone}</Text>
-              </View>
-              <View style={styles.contactRow}>
-                <View style={styles.iconCircle} />
-                <Text style={styles.contactText}>{person.email}</Text>
-              </View>
-              <View style={styles.contactRow}>
-                <View style={styles.iconCircle} />
-                <Text style={styles.contactText}>klz-cables.com</Text>
+              <View style={styles.contactSection}>
+                <View style={styles.contactRow}>
+                  <View style={styles.iconCircle} />
+                  <Text style={styles.contactText}>{person.phone}</Text>
+                </View>
+                <View style={styles.contactRow}>
+                  <View style={styles.iconCircle} />
+                  <Text style={styles.contactText}>{person.email}</Text>
+                </View>
+                <View style={styles.contactRow}>
+                  <View style={styles.iconCircle} />
+                  <Text style={styles.contactText}>klz-cables.com</Text>
+                </View>
               </View>
             </View>
 
-            <View style={styles.qrSection}>
+            <View style={styles.rightColumn}>
               <View style={styles.qrCodeWrapper}>
                 <Image src={qrCodeDataUrl} style={styles.qrCode} />
               </View>
             </View>
           </View>
-
-          <View style={styles.footer}>
-            <Text style={styles.footerText}>KLZ Vertriebs GmbH</Text>
-            <Text style={styles.pipe}>|</Text>
-            <Text style={styles.footerText}>Raiffeisenstraße 22</Text>
-            <Text style={styles.pipe}>|</Text>
-            <Text style={styles.footerText}>73630 Remshalden</Text>
-          </View>
         </View>
       </Page>
     </Document>