feat: business card generator engine

Adds react-pdf business card components and a ghostscript CMYK converter script

lib/pdf-business-card.tsx

@@ -0,0 +1,155 @@
+import * as React from 'react';
+import { Document, Page, View, Text, Image, StyleSheet, Font } from '@react-pdf/renderer';
+import * as path from 'path';
+
+// Wir nutzen Standard-Helvetica, da das Projekt Helvetica für sauberen Tech-Look vorsieht.
+const styles = StyleSheet.create({
+  // Size incl. 3mm bleed on all sides
+  // 85x55 -> 91x61 -> 257.95 x 172.91 pt
+  pageFront: {
+    backgroundColor: '#001a4d', // KLZ Navy
+    width: 257.95,
+    height: 172.91,
+    flexDirection: 'column',
+    justifyContent: 'center',
+    alignItems: 'center',
+    position: 'relative',
+    fontFamily: 'Helvetica',
+  },
+  pageBack: {
+    backgroundColor: '#FFFFFF',
+    width: 257.95,
+    height: 172.91,
+    flexDirection: 'column',
+    justifyContent: 'center',
+    padding: 24,
+    position: 'relative',
+    fontFamily: 'Helvetica',
+  },
+  logo: {
+    width: 100, // Logo breite
+  },
+  accentLine: {
+    position: 'absolute',
+    bottom: 0,
+    left: 0,
+    width: '100%',
+    height: 8,
+    backgroundColor: '#82ed20', // KLZ Green
+  },
+  accentLineTop: {
+    position: 'absolute',
+    top: 0,
+    left: 0,
+    width: '100%',
+    height: 8,
+    backgroundColor: '#82ed20', // KLZ Green
+  },
+  personInfo: {
+    marginBottom: 16,
+  },
+  name: {
+    fontSize: 16,
+    fontWeight: 'bold',
+    color: '#000d26',
+    letterSpacing: -0.5,
+    marginBottom: 2,
+    textTransform: 'uppercase',
+  },
+  position: {
+    fontSize: 8,
+    color: '#82ed20', // Highlight im Text
+    textTransform: 'uppercase',
+    letterSpacing: 1,
+    fontWeight: 'bold',
+  },
+  contactGrid: {
+    marginTop: 10,
+    display: 'flex',
+    flexDirection: 'column',
+    gap: 4,
+  },
+  contactRow: {
+    flexDirection: 'row',
+    alignItems: 'center',
+  },
+  contactLabel: {
+    width: 40,
+    fontSize: 7,
+    color: '#4b5563',
+    fontWeight: 'bold',
+    textTransform: 'uppercase',
+  },
+  contactValue: {
+    fontSize: 8,
+    color: '#111827',
+  },
+  logoTextWhite: {
+    fontSize: 32,
+    fontWeight: 700,
+    color: '#FFFFFF',
+    letterSpacing: 4,
+    marginBottom: 4,
+  },
+  logoTextBlue: {
+    position: 'absolute',
+    bottom: 24,
+    right: 24,
+    fontSize: 24,
+    fontWeight: 700,
+    color: '#001a4d',
+    letterSpacing: 2,
+    opacity: 0.3,
+  },
+});
+
+export interface PersonData {
+  name: string;
+  position: string;
+  phone: string;
+  email: string;
+  website: string;
+}
+
+interface PDFBusinessCardProps {
+  person: PersonData;
+}
+
+export const PDFBusinessCard: React.FC<PDFBusinessCardProps> = ({ person }) => {
+  return (
+    <Document>
+      {/* Front: Logo and Navy Background */}
+      <Page size={[257.95, 172.91]} style={styles.pageFront}>
+        <Text style={styles.logoTextWhite}>KLZ</Text>
+        <View style={styles.accentLine} />
+      </Page>
+
+      {/* Back: Contact Details */}
+      <Page size={[257.95, 172.91]} style={styles.pageBack}>
+        <View style={styles.accentLineTop} />
+
+        <View style={styles.personInfo}>
+          <Text style={styles.name}>{person.name}</Text>
+          <Text style={styles.position}>{person.position}</Text>
+        </View>
+
+        <View style={styles.contactGrid}>
+          <View style={styles.contactRow}>
+            <Text style={styles.contactLabel}>Phone</Text>
+            <Text style={styles.contactValue}>{person.phone}</Text>
+          </View>
+          <View style={styles.contactRow}>
+            <Text style={styles.contactLabel}>Email</Text>
+            <Text style={styles.contactValue}>{person.email}</Text>
+          </View>
+          <View style={styles.contactRow}>
+            <Text style={styles.contactLabel}>Web</Text>
+            <Text style={styles.contactValue}>{person.website}</Text>
+          </View>
+        </View>
+
+        <Text style={styles.logoTextBlue}>KLZ</Text>
+      </Page>
+    </Document>
+  );
+};