mmintel/mintel.me
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

refactor: Centralize PDF styling with COLORS and FONT_SIZES and enhance module content and dynamic title generation.

Browse Source
This commit is contained in:
Marc Mintel
2026-02-03 22:35:01 +01:00
parent 38f2b871b9
commit ce421eb8d2
13 changed files with 346 additions and 254 deletions
Download Patch File Download Diff File Expand all files Collapse all files

48
src/components/pdf/modules/BrandingModules.tsx
View File

@@ -2,22 +2,22 @@
import * as React from 'react';
import { View as PDFView, Text as PDFText, StyleSheet } from '@react-pdf/renderer';
import { IndustrialListItem, IndustrialCard, Divider } from '../SharedUI';
import { IndustrialListItem, IndustrialCard, Divider, COLORS, FONT_SIZES } from '../SharedUI';
const styles = StyleSheet.create({
industrialTitle: { fontSize: 24, fontWeight: 'bold', color: '#0f172a', marginBottom: 6, letterSpacing: -0.5 },
industrialSubtitle: { fontSize: 8, fontWeight: 'bold', color: '#94a3b8', textTransform: 'uppercase', marginBottom: 16, letterSpacing: 2 },
industrialTextLead: { fontSize: 10, color: '#334155', lineHeight: 1.6, marginBottom: 12 },
industrialText: { fontSize: 9, color: '#64748b', lineHeight: 1.6, marginBottom: 8 },
industrialTitle: { fontSize: FONT_SIZES.H1, fontWeight: 'bold', color: COLORS.CHARCOAL, marginBottom: 6, letterSpacing: -1 },
industrialSubtitle: { fontSize: FONT_SIZES.SUB, fontWeight: 'bold', color: COLORS.TEXT_LIGHT, textTransform: 'uppercase', marginBottom: 16, letterSpacing: 2 },
industrialTextLead: { fontSize: FONT_SIZES.H3, color: COLORS.TEXT_MAIN, lineHeight: 1.6, marginBottom: 12 },
industrialText: { fontSize: FONT_SIZES.BODY, color: COLORS.TEXT_DIM, lineHeight: 1.6, marginBottom: 8 },
industrialGrid2: { flexDirection: 'row', gap: 32 },
industrialCol: { width: '48%' },
darkBox: { marginTop: 32, padding: 24, backgroundColor: '#0f172a', color: '#ffffff' },
darkTitle: { fontSize: 18, fontWeight: 'bold', color: '#ffffff', marginBottom: 8 },
darkText: { fontSize: 9, color: '#94a3b8', lineHeight: 1.6 },
darkBox: { marginTop: 32, padding: 24, backgroundColor: COLORS.CHARCOAL, color: COLORS.WHITE },
darkTitle: { fontSize: FONT_SIZES.H2, fontWeight: 'bold', color: COLORS.WHITE, marginBottom: 8 },
darkText: { fontSize: FONT_SIZES.BODY, color: COLORS.TEXT_LIGHT, lineHeight: 1.6 },
industrialBulletBox: {
width: 6,
height: 6,
backgroundColor: '#0f172a',
backgroundColor: COLORS.CHARCOAL,
marginRight: 8,
marginTop: 5,
},
@@ -27,16 +27,16 @@ export const AboutModule = () => (
<>
<PDFText style={styles.industrialTitle}>Über mich</PDFText>
<PDFText style={styles.industrialSubtitle}>Direkt. Sauber. Verantwortlich.</PDFText>
<Divider style={{ marginVertical: 16, backgroundColor: '#f8fafc' }} />
<Divider style={{ marginVertical: 16, backgroundColor: COLORS.GRID }} />
<PDFView style={[styles.industrialGrid2, { marginTop: 20 }]}>
<PDFView style={styles.industrialCol}>
<PDFText style={styles.industrialTextLead}>Ich entwickle Websysteme seit 15 Jahren. Ich kenne Agenturen, Konzerne und Startups. Ich arbeite alleine, weil ich Verantwortung nicht teilen will.</PDFText>
<PDFText style={styles.industrialText}>Technik scheitert selten an Bits und Bytes. Sie scheitert an unklaren Zuständigkeiten. Ich bin Ihr einziger Ansprechpartner. Ich treffe die Entscheidungen und ich löse die Probleme.</PDFText>
<PDFText style={styles.industrialTextLead}>Seit 15 Jahren entstehen unter meiner Leitung Websysteme für Agenturen, Konzerne und Startups. Ich arbeite bewusst alleine, um die volle Verantwortung für jedes Projekt zu tragen.</PDFText>
<PDFText style={styles.industrialText}>Technik scheitert selten an Bits und Bytes, sondern meist an unklaren Zuständigkeiten. Als Ihr direkter Ansprechpartner treffe ich die notwendigen Entscheidungen und löse technische Probleme ohne Umwege.</PDFText>
<PDFView style={{ marginTop: 16 }}>
<PDFText style={[styles.industrialText, { fontWeight: 'bold' }]}>Mein Standard:</PDFText>
<IndustrialListItem><PDFText style={styles.industrialText}>Ich liefere Code ohne Altlasten.</PDFText></IndustrialListItem>
<IndustrialListItem><PDFText style={styles.industrialText}>Ich baue Systeme, die ohne mich laufen.</PDFText></IndustrialListItem>
<IndustrialListItem><PDFText style={styles.industrialText}>Ich arbeite ohne Overhead und Stille Post.</PDFText></IndustrialListItem>
<IndustrialListItem><PDFText style={styles.industrialText}>Code-Lieferung ohne technische Altlasten.</PDFText></IndustrialListItem>
<IndustrialListItem><PDFText style={styles.industrialText}>Entwicklung von Systemen, die autark operieren.</PDFText></IndustrialListItem>
<IndustrialListItem><PDFText style={styles.industrialText}>Verzicht auf Overhead und Kommunikationsverluste.</PDFText></IndustrialListItem>
</PDFView>
</PDFView>
<PDFView style={styles.industrialCol}>
@@ -45,10 +45,10 @@ export const AboutModule = () => (
<IndustrialListItem><PDFText style={styles.industrialText}>Ich antworte direkt auf technische Fragen.</PDFText></IndustrialListItem>
<IndustrialListItem><PDFText style={styles.industrialText}>Ich garantiere die Umsetzung.</PDFText></IndustrialListItem>
</IndustrialCard>
<IndustrialCard title="KEIN BALLAST" style={{ backgroundColor: '#ffffff', borderColor: '#cbd5e1' }}>
<PDFText style={[styles.industrialText, { color: '#94a3b8' }]}>Keine Projektmanager.</PDFText>
<PDFText style={[styles.industrialText, { color: '#94a3b8' }]}>Keine Vertriebler.</PDFText>
<PDFText style={[styles.industrialText, { color: '#94a3b8' }]}>Kein Ticket-Chaos.</PDFText>
<IndustrialCard title="KEIN BALLAST" style={{ backgroundColor: COLORS.WHITE, borderColor: COLORS.DIVIDER }}>
<PDFText style={[styles.industrialText, { color: COLORS.TEXT_LIGHT }]}>Keine Projektmanager.</PDFText>
<PDFText style={[styles.industrialText, { color: COLORS.TEXT_LIGHT }]}>Keine Vertriebler.</PDFText>
<PDFText style={[styles.industrialText, { color: COLORS.TEXT_LIGHT }]}>Kein Ticket-Chaos.</PDFText>
</IndustrialCard>
</PDFView>
</PDFView>
@@ -64,16 +64,16 @@ export const CrossSellModule = ({ state }: any) => {
<>
<PDFText style={styles.industrialTitle}>{title}</PDFText>
<PDFText style={styles.industrialSubtitle}>{subtitle}</PDFText>
<Divider style={{ marginVertical: 16, backgroundColor: '#f8fafc' }} />
<Divider style={{ marginVertical: 16, backgroundColor: COLORS.GRID }} />
<PDFView style={[styles.industrialGrid2, { marginTop: 12 }]} >
{isWebsite ? (
<>
<PDFView style={styles.industrialCol}>
<PDFText style={styles.industrialTextLead}>Ich identifiziere manuelle Abläufe in Ihrem Unternehmen und ersetze sie durch Software. Ich eliminiere Tippfehler und Zeitfresser.</PDFText>
<PDFText style={[styles.industrialText, { fontWeight: 'bold' }]}>Ich schaffe Zeit für wertschöpfende Arbeit. Ich digitalisiere das Chaos.</PDFText>
<PDFText style={styles.industrialTextLead}>Manuelle Abläufe binden Kapazitäten. Durch maßgeschneiderte Software ersetze ich fehleranfällige Prozesse und eliminiere Zeitfresser in Ihrem Unternehmen.</PDFText>
<PDFText style={[styles.industrialText, { fontWeight: 'bold' }]}>Ziel ist der Gewinn wertvoller Arbeitszeit. Digitalisierung ordnet das Chaos.</PDFText>
<PDFView style={styles.darkBox}>
<PDFText style={styles.darkTitle}>Direktes Feedback</PDFText>
<PDFText style={styles.darkText}>Ich prüfe Ihren Prozess innerhalb von 48 Stunden. Ich sage Ihnen sofort, ob eine Automatisierung wirtschaftlich sinnvoll ist.</PDFText>
<PDFText style={styles.darkTitle}>Individuelle Prüfung</PDFText>
<PDFText style={styles.darkText}>Ich analysiere Ihren spezifischen Prozess auf technisches Automatisierungspotenzial. Das Ergebnis liefert Klarheit darüber, ob eine Umsetzung wirtschaftlich sinnvoll ist.</PDFText>
</PDFView>
</PDFView>
<PDFView style={styles.industrialCol}>