101 lines
6.5 KiB
TypeScript
101 lines
6.5 KiB
TypeScript
'use client';
|
|
|
|
import * as React from 'react';
|
|
import { View as PDFView, Text as PDFText, StyleSheet, Image as PDFImage } from '@react-pdf/renderer';
|
|
import { DocumentTitle, Divider, COLORS, FONT_SIZES } from '../SharedUI';
|
|
|
|
const styles = StyleSheet.create({
|
|
section: { marginBottom: 24 },
|
|
pricingGrid: { marginTop: 24 },
|
|
pricingRow: { flexDirection: 'row', borderBottomWidth: 1, borderBottomColor: COLORS.DIVIDER, paddingVertical: 10, alignItems: 'flex-start' },
|
|
pricingTitle: { width: '30%', fontSize: FONT_SIZES.BODY, fontWeight: 'bold', color: COLORS.CHARCOAL },
|
|
pricingDesc: { width: '55%', fontSize: FONT_SIZES.SUB, color: COLORS.TEXT_DIM, lineHeight: 1.4 },
|
|
pricingTag: { width: '15%', fontSize: FONT_SIZES.BODY, fontWeight: 'bold', textAlign: 'right', color: COLORS.CHARCOAL },
|
|
configLabel: { fontSize: FONT_SIZES.BLUEPRINT, color: COLORS.TEXT_LIGHT, textTransform: 'uppercase', marginBottom: 8 },
|
|
});
|
|
|
|
const CHROME_ICON = '/Users/marcmintel/Projects/mintel.me/src/assets/browser/chrome.png'; // Fallback to a placeholder if not found
|
|
const SAFARI_ICON = '/Users/marcmintel/Projects/mintel.me/src/assets/browser/safari.png';
|
|
|
|
export const techPageModule = ({ techDetails, headerIcon }: any) => (
|
|
<>
|
|
<DocumentTitle title="Technische Umsetzung" />
|
|
<PDFView style={styles.section}>
|
|
<PDFText style={{ fontSize: FONT_SIZES.SUB, color: COLORS.TEXT_DIM, lineHeight: 1.6, marginBottom: 16 }}>Ich entwickle Websites als moderne, performante Websysteme.</PDFText>
|
|
<PDFView style={styles.pricingGrid}>
|
|
{techDetails?.map((item: any, i: number) => (
|
|
<PDFView key={i} style={styles.pricingRow}>
|
|
<PDFText style={[styles.pricingTitle, { width: '35%' }]}>{item.t}</PDFText>
|
|
<PDFText style={[styles.pricingDesc, { width: '65%' }]}>{item.d}</PDFText>
|
|
</PDFView>
|
|
))}
|
|
</PDFView>
|
|
</PDFView>
|
|
</>
|
|
);
|
|
|
|
export const TransparenzModule = ({ pricing }: any) => (
|
|
<>
|
|
<DocumentTitle title="Preis-Transparenz & Modell" />
|
|
<PDFView style={styles.section}>
|
|
<PDFText style={{ fontSize: FONT_SIZES.BODY + 1, fontWeight: 'bold', color: COLORS.CHARCOAL, marginBottom: 8 }}>Festpreise statt Stundenabrechnung</PDFText>
|
|
<PDFText style={{ fontSize: FONT_SIZES.SUB, color: COLORS.TEXT_DIM, 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={{ marginTop: 12 }} />
|
|
</PDFView>
|
|
<PDFView style={styles.section}>
|
|
<PDFView style={styles.pricingGrid}>
|
|
<PDFView style={styles.pricingRow}>
|
|
<PDFText style={styles.pricingTitle}>1. Das Fundament</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. 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. 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. 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. 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. 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')} € / Stk</PDFText>
|
|
</PDFView>
|
|
<PDFView style={styles.pricingRow}>
|
|
<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>
|
|
</>
|
|
);
|
|
|
|
export const PrinciplesModule = ({ principles }: any) => (
|
|
<>
|
|
<DocumentTitle title="Meine Prinzipien" />
|
|
<PDFView style={styles.pricingGrid}>
|
|
{principles?.map((item: any, i: number) => (
|
|
<PDFView key={i} style={styles.pricingRow}>
|
|
<PDFText style={[styles.pricingTitle, { width: '35%' }]}>{item.t}</PDFText>
|
|
<PDFText style={[styles.pricingDesc, { width: '65%' }]}>{item.d}</PDFText>
|
|
</PDFView>
|
|
))}
|
|
</PDFView>
|
|
</>
|
|
);
|
|
|