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

feat: Refine PDF module labels and styling, and add a divider to the sitemap module.

Browse Source
This commit is contained in:
Marc Mintel
2026-02-03 19:41:06 +01:00
parent 3e70b00abc
commit 38f2b871b9
10 changed files with 176 additions and 151 deletions
Download Patch File Download Diff File Expand all files Collapse all files

10
src/components/pdf/SharedUI.tsx
View File

@@ -130,6 +130,12 @@ export const pdfStyles = PDFStyleSheet.create({
borderTopWidth: 0.5,
borderTopColor: '#cbd5e1',
},
divider: {
width: '100%',
height: 1,
backgroundColor: '#f1f5f9',
marginVertical: 12,
},
// Atoms
industrialListItem: {
flexDirection: 'row',
@@ -219,6 +225,10 @@ export const IndustrialCard = ({ title, children, style = {} }: { title: string;
export const FoldingMarks = () => (<><PDFView style={[pdfStyles.foldingMark, { top: 297.6 }]} fixed /><PDFView style={[pdfStyles.foldingMark, { top: 420.9, width: 15 }]} fixed /><PDFView style={[pdfStyles.foldingMark, { top: 595.3 }]} fixed /></>);
export const Divider = ({ style = {} }: { style?: any }) => (
<PDFView style={[pdfStyles.divider, style]} />
);
export const Footer = ({ logo, companyData, bankData, showDetails = true, showPageNumber = true }: { logo?: string; companyData: any; bankData: any; showDetails?: boolean; showPageNumber?: boolean }) => (
<PDFView style={pdfStyles.footer}><PDFView style={pdfStyles.footerColumn}>{logo ? (<PDFImage src={logo} style={pdfStyles.footerLogo} />) : (<PDFText style={{ fontSize: 12, fontWeight: 'bold', marginBottom: 8 }}>marc mintel</PDFText>)}</PDFView>{showDetails && (<><PDFView style={pdfStyles.footerColumn}><PDFText style={pdfStyles.footerText}><PDFText style={pdfStyles.footerLabel}>{companyData.name}</PDFText>{"\n"}{companyData.address1}{"\n"}{companyData.address2}{"\n"}UST: {companyData.ustId}</PDFText></PDFView><PDFView style={[pdfStyles.footerColumn, { alignItems: 'flex-end' }]}>{showPageNumber && <PDFText style={pdfStyles.pageNumber} render={({ pageNumber, totalPages }) => `${pageNumber} / ${totalPages}`} fixed />}</PDFView></>)}{!showDetails && (<PDFView style={[pdfStyles.footerColumn, { alignItems: 'flex-end' }]}>{showPageNumber && <PDFText style={pdfStyles.pageNumber} render={({ pageNumber, totalPages }) => `${pageNumber} / ${totalPages}`} fixed />}</PDFView>)}</PDFView>
);

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

@@ -2,7 +2,7 @@
import * as React from 'react';
import { View as PDFView, Text as PDFText, StyleSheet } from '@react-pdf/renderer';
import { IndustrialListItem, IndustrialCard } from '../SharedUI';
import { IndustrialListItem, IndustrialCard, Divider } from '../SharedUI';
const styles = StyleSheet.create({
industrialTitle: { fontSize: 24, fontWeight: 'bold', color: '#0f172a', marginBottom: 6, letterSpacing: -0.5 },
@@ -27,28 +27,28 @@ export const AboutModule = () => (
<>
<PDFText style={styles.industrialTitle}>Über mich</PDFText>
<PDFText style={styles.industrialSubtitle}>Direkt. Sauber. Verantwortlich.</PDFText>
<Divider style={{ marginVertical: 16, backgroundColor: '#f8fafc' }} />
<PDFView style={[styles.industrialGrid2, { marginTop: 20 }]}>
<PDFView style={styles.industrialCol}>
<PDFText style={styles.industrialTextLead}>Ich baue Websites und Systeme seit über 15 Jahren. Nicht weil ich Websites so liebe – sondern weil ich es hasse, wenn Dinge nicht funktionieren.</PDFText>
<PDFText style={styles.industrialText}>In diesen Jahren habe ich Agenturen von innen gesehen, Konzerne erlebt und Startups aufgebaut. Ich habe gelernt, dass das Problem selten die Technik ist – sondern die Zuständigkeit.</PDFText>
<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>
<PDFView style={{ marginTop: 16 }}>
<PDFText style={[styles.industrialText, { fontWeight: 'bold' }]}>Meine Arbeitsweise:</PDFText>
<IndustrialListItem><PDFText style={styles.industrialText}>schnell & stabil</PDFText></IndustrialListItem>
<IndustrialListItem><PDFText style={styles.industrialText}>"boring" (im besten Sinne)</PDFText></IndustrialListItem>
<IndustrialListItem><PDFText style={styles.industrialText}>erweiterbar & wartungsarm</PDFText></IndustrialListItem>
<IndustrialListItem><PDFText style={styles.industrialText}>unabhängig von Agenturen</PDFText></IndustrialListItem>
<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>
</PDFView>
</PDFView>
<PDFView style={styles.industrialCol}>
<IndustrialCard title="WAS SIE BEKOMMEN">
<IndustrialListItem><PDFText style={styles.industrialText}>Eine Person. Eine Verantwortung.</PDFText></IndustrialListItem>
<IndustrialListItem><PDFText style={styles.industrialText}>Direkte Kommunikation ohne Stille Post.</PDFText></IndustrialListItem>
<IndustrialListItem><PDFText style={styles.industrialText}>Code, der Ihnen gehört.</PDFText></IndustrialListItem>
<IndustrialCard title="ZUSTÄNDIGKEIT">
<IndustrialListItem><PDFText style={styles.industrialText}>Ich bin der einzige Entwickler.</PDFText></IndustrialListItem>
<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="WAS SIE NICHT BEKOMMEN" style={{ backgroundColor: '#ffffff', borderColor: '#cbd5e1' }}>
<PDFText style={[styles.industrialText, { color: '#94a3b8', textDecoration: 'line-through' }]}>Projektmanager</PDFText>
<PDFText style={[styles.industrialText, { color: '#94a3b8', textDecoration: 'line-through' }]}>Ticket-Systeme</PDFText>
<PDFText style={[styles.industrialText, { color: '#94a3b8', textDecoration: 'line-through' }]}>CMS-Drama & Update-Angst</PDFText>
<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>
</PDFView>
</PDFView>
@@ -57,40 +57,41 @@ export const AboutModule = () => (
export const CrossSellModule = ({ state }: any) => {
const isWebsite = state.projectType === 'website';
const title = isWebsite ? "Das könnte Sie auch interessieren" : "Websites & Ökosysteme";
const subtitle = isWebsite ? "Kleine Helfer, die den Alltag entlasten" : "Digitale Visitenkarten mit Tiefe";
const title = isWebsite ? "Digitale Routine" : "Websites & Ökosysteme";
const subtitle = isWebsite ? "Automatisierung statt Fleißarbeit" : "Technische Infrastruktur ohne Kompromisse";
return (
<>
<PDFText style={styles.industrialTitle}>Das könnte Sie auch interessieren</PDFText>
<PDFText style={styles.industrialSubtitle}>Kleine helfer, die den alltag entlasten</PDFText>
<PDFView style={[styles.industrialGrid2, { marginTop: 12 }]}>
<PDFText style={styles.industrialTitle}>{title}</PDFText>
<PDFText style={styles.industrialSubtitle}>{subtitle}</PDFText>
<Divider style={{ marginVertical: 16, backgroundColor: '#f8fafc' }} />
<PDFView style={[styles.industrialGrid2, { marginTop: 12 }]} >
{isWebsite ? (
<>
<PDFView style={styles.industrialCol}>
<PDFText style={styles.industrialTextLead}>Zusätzlich zur digitalen Präsenz fressen in vielen Unternehmen wiederkehrende Aufgaben unzählige Stunden: Daten abtippen, Formulare ausfüllen, Angebote anpassen.</PDFText>
<PDFText style={[styles.industrialText, { fontWeight: 'bold' }]}>Das ist keine wertschöpfende Arbeit. Das ist Routine.</PDFText>
<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>
<PDFView style={styles.darkBox}>
<PDFText style={styles.darkTitle}>Der schnelle Check</PDFText>
<PDFText style={styles.darkText}>Wenn bei Ihnen gerade etwas "von Hand gemacht wird" oder "ewig dauert" – ich sage Ihnen in 1-2 Tagen, ob und wie schnell man das sinnvoll digitalisieren kann.</PDFText>
<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>
</PDFView>
</PDFView>
<PDFView style={styles.industrialCol}>
<IndustrialCard title="PDF-GENERATOREN">
<PDFText style={styles.industrialText}>Kurze Eingaben via Formular → fertiges Angebot/Bericht. Von 60min auf 5min reduziert.</PDFText>
<PDFText style={styles.industrialText}>Ich automatisiere Angebote und Berichte. Ich reduziere den Zeitaufwand auf 5 Minuten. Ich garantiere fehlerfreie Exporte.</PDFText>
</IndustrialCard>
<IndustrialCard title="EXCEL-AUTOMATISIERUNG">
<PDFText style={styles.industrialText}>Verkaufszahlen, Lagerbestände oder Kundenlisten automatisch synchronisieren und auswerten.</PDFText>
<PDFText style={styles.industrialText}>Ich synchronisiere Ihre Datenbestände. Ich schaffe Echtzeit-Transparenz ohne manuelle Listenpflege.</PDFText>
</IndustrialCard>
<IndustrialCard title="KI-SCANNER">
<PDFText style={styles.industrialText}>Rechnungen oder handschriftliche Notizen fotografieren → Daten landen direkt strukturiert in der Tabelle.</PDFText>
<IndustrialCard title="DATEN-SCANN">
<PDFText style={styles.industrialText}>Ich implementiere Schrifterkennung für analoge Dokumente. Ich übertrage Daten direkt in Ihre Systeme.</PDFText>
</IndustrialCard>
</PDFView>
</>
) : (
<PDFView style={{ width: '100%' }}>
<PDFText style={styles.industrialTextLead}>Neben Automatisierung baue ich komplette digitale Ökosysteme für Unternehmen, die Wert auf Qualität legen.</PDFText>
<PDFText style={styles.industrialText}>Keine Baukästen. Keine langsamen WordPress-Themes. Sondern maßgeschneiderte Systeme, die technisch und optisch in der ersten Liga spielen.</PDFText>
<PDFText style={styles.industrialTextLead}>Ich baue die technische Basis für Ihr Unternehmen. Ich meide Baukästen und Agentur-Abhängigkeiten.</PDFText>
<PDFText style={styles.industrialText}>Ich entwickle performante Frontends und stabile Backends. Ich liefere Code, den Sie besitzen und selbst kontrollieren.</PDFText>
</PDFView>
)}
</PDFView>

6
src/components/pdf/modules/BriefingModule.tsx
View File

@@ -26,10 +26,10 @@ export const BriefingModule = ({ state }: any) => (
<PDFView style={styles.section}>
<PDFText style={styles.sectionTitle}>Kern-Informationen</PDFText>
<PDFView style={styles.configGrid}>
<PDFView style={styles.configItem}><PDFText style={styles.configLabel}>Ansprechpartner</PDFText><PDFText style={styles.configValue}>{state.personName || "Ihr Team"}</PDFText></PDFView>
<PDFView style={styles.configItem}><PDFText style={styles.configLabel}>Status Quo</PDFText><PDFText style={styles.configValue}>{state.statusQuo || (state.existingWebsite ? 'Relaunch' : 'Neuentwicklung')}</PDFText></PDFView>
<PDFView style={styles.configItem}><PDFText style={styles.configLabel}>Ansprechpartner</PDFText><PDFText style={styles.configValue}>{state.personName || "Sie"}</PDFText></PDFView>
<PDFView style={styles.configItem}><PDFText style={styles.configLabel}>Projektart</PDFText><PDFText style={styles.configValue}>{state.statusQuo || (state.existingWebsite ? 'Relaunch' : 'Neuentwicklung')}</PDFText></PDFView>
<PDFView style={styles.configItem}><PDFText style={styles.configLabel}>Mitarbeiter</PDFText><PDFText style={styles.configValue}>{state.employeeCount || "—"}</PDFText></PDFView>
<PDFView style={styles.configItem}><PDFText style={styles.configLabel}>Deadline / Zeitplan</PDFText><PDFText style={styles.configValue}>{state.deadline || 'Flexibel'}</PDFText></PDFView>
<PDFView style={styles.configItem}><PDFText style={styles.configLabel}>Zeitplan</PDFText><PDFText style={styles.configValue}>{state.deadline || 'Flexibel'}</PDFText></PDFView>
</PDFView>
</PDFView>
{state.designVision && (

37
src/components/pdf/modules/CommonModules.tsx
View File

@@ -2,7 +2,7 @@
import * as React from 'react';
import { View as PDFView, Text as PDFText, StyleSheet, Image as PDFImage } from '@react-pdf/renderer';
import { DocumentTitle } from '../SharedUI';
import { DocumentTitle, Divider } from '../SharedUI';
const styles = StyleSheet.create({
section: { marginBottom: 24 },
@@ -38,47 +38,46 @@ export const TransparenzModule = ({ pricing }: any) => (
<>
<DocumentTitle title="Preis-Transparenz & Modell" />
<PDFView style={styles.section}>
<PDFText style={{ fontSize: 10, fontWeight: 'bold', color: '#000000', marginBottom: 8 }}>Grundlage für kalkulierbare Investitionen</PDFText>
<PDFText style={{ fontSize: 8, color: '#64748b', lineHeight: 1.6, marginBottom: 24 }}>Digitaler Erfolg basiert auf Transparenz. Dieses Dokument dient als detaillierte Grundlage für Ihre Investitionsentscheidung. Es handelt sich um ein Festpreis-Modell für die beschriebenen Leistungen, um Ihnen maximale Planungssicherheit zu gewährleisten.</PDFText>
<PDFText style={{ fontSize: 10, fontWeight: 'bold', color: '#000000', marginBottom: 8 }}>Festpreise statt Stundenabrechnung</PDFText>
<PDFText style={{ fontSize: 8, color: '#64748b', lineHeight: 1.6, marginBottom: 12 }}>Ich biete Planungssicherheit. Ich kalkuliere nach einem modularen Festpreis-System. Sie zahlen für Ergebnisse, nicht für die Zeit. Ich schließe versteckte Kosten aus.</PDFText>
<Divider style={{ backgroundColor: '#f8fafc', marginTop: 12 }} />
</PDFView>
<PDFView style={styles.section}>
<PDFText style={{ fontSize: 9, color: '#0f172a', fontWeight: 'bold', marginBottom: 8 }}>Warum dieser modulare Ansatz?</PDFText>
<PDFText style={{ fontSize: 8, color: '#64748b', lineHeight: 1.6, marginBottom: 20 }}>Meine Kalkulation basiert auf einem transparenten Festpreis-System. Sie zahlen nicht für Stunden, sondern für messbare Ergebnisse. Jeder Baustein ist darauf ausgelegt, Ihre digitale Präsenz zu stärken und den ROI Ihres Projekts zu maximieren.</PDFText>
<PDFView style={styles.pricingGrid}>
<PDFView style={styles.pricingRow}>
<PDFText style={styles.pricingTitle}>1. Das Fundament</PDFText>
<PDFText style={styles.pricingDesc}>Infrastruktur, technisches SEO, Analytics und ein skalierbares Setup. Der Grundstein für eine Website, die technisch perfekt performt.</PDFText>
<PDFText style={styles.pricingDesc}>Ich richte die technische Infrastruktur ein. Ich installiere das Hosting, schaffe SEO-Basics und erstelle die Test-, Staging- und Live-Umgebungen.</PDFText>
<PDFText style={styles.pricingTag}>{pricing.BASE_WEBSITE?.toLocaleString('de-DE')} €</PDFText>
</PDFView>
<PDFView style={styles.pricingRow}>
<PDFText style={styles.pricingTitle}>2. Individuelle Erlebnisse</PDFText>
<PDFText style={styles.pricingDesc}>Pro Seite entwickeln wir ein UI/UX-Konzept, das Besucher führt und überzeugt. Keine Standard-Templates, sondern maßgeschneidertes Design.</PDFText>
<PDFText style={styles.pricingTitle}>2. Seiten</PDFText>
<PDFText style={styles.pricingDesc}>Ich entwickle das individuelle Layout und die Struktur jeder Seite. Ich garantiere die korrekte Darstellung auf allen Endgeräten.</PDFText>
<PDFText style={styles.pricingTag}>{pricing.PAGE?.toLocaleString('de-DE')} € / Stk</PDFText>
</PDFView>
<PDFView style={styles.pricingRow}>
<PDFText style={styles.pricingTitle}>3. Smarte Content-Systeme</PDFText>
<PDFText style={styles.pricingDesc}>Automatisieren Sie Ihre Kommunikation. Ob Blog, Job-Board oder Case Studies – wir bauen Systeme, die sich einfach pflegen lassen.</PDFText>
<PDFText style={styles.pricingTitle}>3. Features</PDFText>
<PDFText style={styles.pricingDesc}>Ich erstelle abgeschlossene technische Systeme (z. B. Blog oder News). Ich definiere die Datenfelder und die Pflege-Oberflächen.</PDFText>
<PDFText style={styles.pricingTag}>{pricing.FEATURE?.toLocaleString('de-DE')} € / Stk</PDFText>
</PDFView>
<PDFView style={styles.pricingRow}>
<PDFText style={styles.pricingTitle}>4. Funktionalität</PDFText>
<PDFText style={styles.pricingDesc}>Suche, Filter oder interaktive Formulare. Wir reduzieren Reibung und machen die Nutzung für Ihre Kunden zum Erlebnis.</PDFText>
<PDFText style={styles.pricingTitle}>4. Funktionen</PDFText>
<PDFText style={styles.pricingDesc}>Ich programmiere Logik-Module wie Filter, Suchen oder Kontakt-Schnittstellen. Ich sorge für die fehlerfreie Verarbeitung Ihrer Daten.</PDFText>
<PDFText style={styles.pricingTag}>{pricing.FUNCTION?.toLocaleString('de-DE')} € / Stk</PDFText>
</PDFView>
<PDFView style={styles.pricingRow}>
<PDFText style={styles.pricingTitle}>5. High-End Inszenierung</PDFText>
<PDFText style={styles.pricingDesc}>Video-Integrationen, Mikro-Animationen und immersive Effekte. So heben Sie sich im Markt ab und wirken als Premium-Marke.</PDFText>
<PDFText style={styles.pricingTitle}>5. Interaktion</PDFText>
<PDFText style={styles.pricingDesc}>Ich entwerfe komplexe UI-Abläufe und Konfiguratoren. Ich optimiere die Nutzerführung für maximale Abschlüsse.</PDFText>
<PDFText style={styles.pricingTag}>{pricing.COMPLEX_INTERACTION?.toLocaleString('de-DE')} € / Stk</PDFText>
</PDFView>
<PDFView style={styles.pricingRow}>
<PDFText style={styles.pricingTitle}>6. Autonomie & Vernetzung</PDFText>
<PDFText style={styles.pricingDesc}>Nahtlose Anbindung an Headless CMS oder Ihre Bestands-APIs (CRM, ERP). Maximale Freiheit bei voller Kontrolle.</PDFText>
<PDFText style={styles.pricingTitle}>6. Integrationen</PDFText>
<PDFText style={styles.pricingDesc}>Ich binde Drittsysteme wie CRM, ERP oder Stripe an. Ich richte CMS-Schnittstellen zur unabhängigen Inhaltsverwaltung ein.</PDFText>
<PDFText style={styles.pricingTag}>ab {pricing.API_INTEGRATION?.toLocaleString('de-DE')} €</PDFText>
</PDFView>
<PDFView style={styles.pricingRow}>
<PDFText style={styles.pricingTitle}>7. Sorglos-Betrieb</PDFText>
<PDFText style={styles.pricingDesc}>Full-Service Hosting, tägliche Backups und proaktive Sicherheitsupdates. Damit Sie sich auf Ihr Kerngeschäft konzentrieren können.</PDFText>
<PDFText style={styles.pricingTag}>{pricing.HOSTING_MONTHLY?.toLocaleString('de-DE')} € / Mon</PDFText>
<PDFText style={styles.pricingTitle}>7. Betrieb (12 Monate)</PDFText>
<PDFText style={styles.pricingDesc}>Ich betreibe das Hosting, pflege Sicherheitsupdates ein und erstelle monatliche Berichte. Ich garantiere die Verfügbarkeit für ein Jahr.</PDFText>
<PDFText style={styles.pricingTag}>1.440 €</PDFText>
</PDFView>
</PDFView>
</PDFView>

8
src/components/pdf/modules/EstimationModule.tsx
View File

@@ -7,7 +7,7 @@ import { DocumentTitle } from '../SharedUI';
const styles = StyleSheet.create({
table: { marginTop: 12 },
tableHeader: { flexDirection: 'row', paddingBottom: 8, borderBottomWidth: 1, borderBottomColor: '#000000', marginBottom: 12 },
tableRow: { flexDirection: 'row', paddingVertical: 6, borderBottomWidth: 1, borderBottomColor: '#eeeeee', alignItems: 'flex-start' },
tableRow: { flexDirection: 'row', paddingVertical: 8, borderBottomWidth: 1, borderBottomColor: '#f8fafc', alignItems: 'flex-start' },
colPos: { width: '8%' },
colDesc: { width: '62%' },
colQty: { width: '10%', textAlign: 'center' },
@@ -47,9 +47,9 @@ export const EstimationModule = ({ state, positions, totalPrice, date }: any) =>
))}
</PDFView>
<PDFView style={styles.summaryContainer} wrap={false}>
<PDFView style={styles.summaryRow}><PDFText style={styles.summaryLabel}>Zwischensumme (Netto)</PDFText><PDFText style={styles.summaryValue}>{totalPrice.toLocaleString('de-DE')} €</PDFText></PDFView>
<PDFView style={styles.summaryRow}><PDFText style={styles.summaryLabel}>zzgl. 19% MwSt.</PDFText><PDFText style={styles.summaryValue}>{(totalPrice * 0.19).toLocaleString('de-DE')} €</PDFText></PDFView>
<PDFView style={styles.totalRow}><PDFText style={styles.summaryLabel}>Gesamtsumme (Brutto)</PDFText><PDFText style={[styles.summaryValue, { fontSize: 14 }]}>{(totalPrice * 1.19).toLocaleString('de-DE')} €</PDFText></PDFView>
<PDFView style={styles.summaryRow}><PDFText style={styles.summaryLabel}>Nettobetrag</PDFText><PDFText style={styles.summaryValue}>{totalPrice.toLocaleString('de-DE')} €</PDFText></PDFView>
<PDFView style={styles.summaryRow}><PDFText style={styles.summaryLabel}>Umsatzsteuer (19%)</PDFText><PDFText style={styles.summaryValue}>{(totalPrice * 0.19).toLocaleString('de-DE')} €</PDFText></PDFView>
<PDFView style={styles.totalRow}><PDFText style={styles.summaryLabel}>Gesamtbetrag (Brutto)</PDFText><PDFText style={[styles.summaryValue, { fontSize: 14 }]}>{(totalPrice * 1.19).toLocaleString('de-DE')} €</PDFText></PDFView>
</PDFView>
</>
);

4
src/components/pdf/modules/FrontPageModule.tsx
View File

@@ -64,10 +64,10 @@ export const FrontPageModule = ({ state, headerIcon, date }: any) => (
<PDFView style={styles.titleBrandIcon}>
{headerIcon ? <PDFImage src={headerIcon} style={{ width: 40, height: 40 }} /> : <PDFText style={styles.brandIconText}>M</PDFText>}
</PDFView>
<PDFText style={styles.titleDocumentType}>Kostenschätzung & Konzept</PDFText>
<PDFText style={styles.titleDocumentType}>Konzept & Kostenschätzung</PDFText>
<PDFText style={styles.titleProjectName}>{state.projectType === 'website' ? 'Digitale Präsenz' : 'Digitale Applikation'}</PDFText>
<PDFView style={styles.titleDivider} />
<PDFText style={styles.titleCustomerName}>für {state.companyName || "Ihre Projektanfrage"}</PDFText>
<PDFText style={styles.titleCustomerName}>für {state.companyName || "Ihr Projekt"}</PDFText>
<PDFText style={styles.titleDate}>{date} | Marc Mintel</PDFText>
</PDFView>
);

3
src/components/pdf/modules/SitemapModule.tsx
View File

@@ -2,7 +2,7 @@
import * as React from 'react';
import { View as PDFView, Text as PDFText, StyleSheet } from '@react-pdf/renderer';
import { DocumentTitle } from '../SharedUI';
import { DocumentTitle, Divider } from '../SharedUI';
const styles = StyleSheet.create({
section: { marginBottom: 24 },
@@ -27,6 +27,7 @@ export const SitemapModule = ({ state }: any) => (
<DocumentTitle title="Seitenstruktur" />
<PDFView style={styles.section}>
<PDFText style={{ fontSize: 8, color: '#64748b', lineHeight: 1.6, marginBottom: 16 }}>Die folgende Struktur bildet das Fundament für die Benutzerführung und Informationsarchitektur Ihres Projekts.</PDFText>
<Divider style={{ backgroundColor: '#f8fafc', marginBottom: 20 }} />
<PDFView style={styles.sitemapTree}>
<PDFView style={styles.sitemapRootNode}><PDFView style={styles.sitemapRootDot} /><PDFText style={styles.sitemapRootTitle}>{state.websiteTopic || 'Digitales Ökosystem'}</PDFText></PDFView>
<PDFView style={styles.sitemapMainLine} />