klz-cables.com/lib/pdf-business-card.tsx

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>
  );
};