refactor: estimation generation

apps/web/src/components/pdf/modules/BrandingModules.tsx

@@ -1,108 +1,218 @@
-'use client';
+"use client";
 
-import * as React from 'react';
-import { View as PDFView, Text as PDFText, StyleSheet } from '@react-pdf/renderer';
-import { IndustrialListItem, IndustrialCard, Divider, COLORS, FONT_SIZES } from '../SharedUI';
+import * as React from "react";
+import {
+  View as PDFView,
+  Text as PDFText,
+  StyleSheet,
+} from "@react-pdf/renderer";
+import {
+  DocumentTitle,
+  IndustrialListItem,
+  IndustrialCard,
+  Divider,
+  COLORS,
+  FONT_SIZES,
+} from "../SharedUI";
 
 const styles = StyleSheet.create({
-    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, marginBottom: 16, letterSpacing: 0.5 },
-    industrialTextLead: { fontSize: FONT_SIZES.H3, color: COLORS.TEXT_MAIN, lineHeight: 1.6, marginBottom: 16 },
-    industrialText: { fontSize: FONT_SIZES.BODY, color: COLORS.TEXT_DIM, lineHeight: 1.6, marginBottom: 12 },
-    industrialGrid2: { flexDirection: 'row' },
-    industrialCol: { width: '46%' },
-    industrialBulletBox: {
-        width: 6,
-        height: 6,
-        backgroundColor: COLORS.DIVIDER,
-        marginRight: 8,
-        marginTop: 5,
-    },
+  industrialTextLead: {
+    fontSize: FONT_SIZES.BODY,
+    color: COLORS.TEXT_MAIN,
+    lineHeight: 1.4,
+    marginBottom: 16,
+  },
+  industrialText: {
+    fontSize: FONT_SIZES.BODY,
+    color: COLORS.TEXT_DIM,
+    lineHeight: 1.4,
+    marginBottom: 12,
+  },
+  industrialGrid2: { flexDirection: "row" },
+  industrialCol: { width: "46%" },
 });
 
 export const AboutModule = () => (
-    <>
-        <PDFText style={styles.industrialTitle}>Expertise & Profil</PDFText>
-        <PDFText style={styles.industrialSubtitle}>Entwicklung & Technischer Partner für den Mittelstand</PDFText>
-        <Divider style={{ marginVertical: 16, backgroundColor: COLORS.GRID }} />
+  <>
+    <DocumentTitle
+      title="Expertise & Profil"
+      subLines={["Entwicklung & Technischer Partner für den Mittelstand"]}
+      isHero={true}
+    />
+    <Divider style={{ marginVertical: 16, backgroundColor: COLORS.GRID }} />
 
-        <PDFView style={{ marginTop: 24 }}>
-            <PDFText style={styles.industrialTextLead}>
-                Begleitung mittelständischer Unternehmen und Agenturen bei der Realisierung anspruchsvoller Web-Projekte. Als Senior Software Developer mit über 15 Jahren Erfahrung wird das gesamte technische Spektrum abgedeckt – von der Architektur bis zum fertigen Produkt.
-            </PDFText>
+    <PDFView style={{ marginTop: 24 }}>
+      <PDFText style={styles.industrialTextLead}>
+        Begleitung mittelständischer Unternehmen und Agenturen bei der
+        Realisierung anspruchsvoller Web-Projekte. Als Senior Software Developer
+        mit over 15 Jahren Erfahrung wird das gesamte technische Spektrum
+        abgedeckt – von der Architektur bis zum fertigen Produkt.
+      </PDFText>
 
-            <PDFView style={[styles.industrialGrid2, { marginTop: 20 }]}>
-                <PDFView style={[styles.industrialCol, { marginRight: '8%' }]}>
-                    <PDFText style={[styles.industrialText, { fontWeight: 'bold', color: COLORS.CHARCOAL, marginBottom: 8 }]}>Erfahrung & Substanz</PDFText>
-                    <PDFText style={styles.industrialText}>
-                        Der Werdegang umfasst alle Ebenen der Webentwicklung: von der Teamleitung in Kreativagenturen bis zur Softwareentwicklung für internationale Konzerne.
-                    </PDFText>
-                    <PDFText style={styles.industrialText}>
-                        Die Kenntnis komplexer Enterprise-Systeme wird mit der Agilität kombiniert, die im Mittelstand gefordert ist. Dieses Wissen ermöglicht den Bau von Lösungen, die technologisch auf Augenhöhe mit Konzern-Standards sind, jedoch ohne unnötigen bürokratischen Overhead auskommen.
-                    </PDFText>
-                </PDFView>
-
-                <PDFView style={styles.industrialCol}>
-                    <PDFText style={[styles.industrialText, { fontWeight: 'bold', color: COLORS.CHARCOAL, marginBottom: 8 }]}>Fokus Einzelentwicklung</PDFText>
-                    <PDFText style={styles.industrialText}>
-                        Die Umsetzung erfolgt bewusst als spezialisierter Einzelentwickler. Dies garantiert maximale Geschwindigkeit, direkte Kommunikationswege und volle technologische Verantwortung.
-                    </PDFText>
-                    <PDFText style={styles.industrialText}>
-                        Als direkter technischer Sparringspartner bleibt die Codebasis von der ersten bis zur letzten Zeile transparent und wartbar. Diese Unmittelbarkeit stellt sicher, dass Ergebnisse sowohl technisch sauber als auch wirtschaftlich sinnvoll realisiert werden.
-                    </PDFText>
-                </PDFView>
-            </PDFView>
-
-            <PDFView style={{ marginTop: 32, paddingVertical: 16, borderTopWidth: 1, borderTopColor: COLORS.GRID }}>
-                <PDFText style={[styles.industrialText, { fontWeight: 'bold', color: COLORS.CHARCOAL, marginBottom: 4 }]}>Infrastruktur & Souveränität</PDFText>
-                <PDFText style={styles.industrialText}>
-                    Es wird keine instabile Prototyp-Software geliefert, sondern produktionsreife Systeme, die technisch skalierbar bleiben. Die Codebasis folgt modernen Standards – bei wachsenden Ansprüchen oder dem Wechsel zu einer Agentur kann der Quellcode jederzeit nahtlos übernommen und weitergeführt werden.
-                </PDFText>
-            </PDFView>
+      <PDFView style={[styles.industrialGrid2, { marginTop: 20 }]}>
+        <PDFView style={[styles.industrialCol, { marginRight: "8%" }]}>
+          <PDFText
+            style={[
+              styles.industrialText,
+              { fontWeight: "bold", color: COLORS.CHARCOAL, marginBottom: 8 },
+            ]}
+          >
+            Erfahrung & Substanz
+          </PDFText>
+          <PDFText style={styles.industrialText}>
+            Der Werdegang umfasst alle Ebenen der Webentwicklung: von der
+            Teamleitung in Kreativagenturen bis zur Softwareentwicklung für
+            internationale Konzerne.
+          </PDFText>
+          <PDFText style={styles.industrialText}>
+            Die Kenntnis komplexer Enterprise-Systeme wird mit der Agilität
+            kombiniert, die im Mittelstand gefordert ist. Dieses Wissen
+            ermöglicht den Bau von Lösungen, die technologisch auf Augenhöhe mit
+            Konzern-Standards sind, jedoch ohne unnötigen bürokratischen
+            Overhead auskommen.
+          </PDFText>
         </PDFView>
-    </>
+
+        <PDFView style={styles.industrialCol}>
+          <PDFText
+            style={[
+              styles.industrialText,
+              { fontWeight: "bold", color: COLORS.CHARCOAL, marginBottom: 8 },
+            ]}
+          >
+            Fokus Einzelentwicklung
+          </PDFText>
+          <PDFText style={styles.industrialText}>
+            Die Umsetzung erfolgt bewusst als spezialisierter Einzelentwickler.
+            Dies garantiert maximale Geschwindigkeit, direkte Kommunikationswege
+            und volle technologische Verantwortung.
+          </PDFText>
+          <PDFText style={styles.industrialText}>
+            Als direkter technischer Sparringspartner bleibt die Codebasis von
+            der ersten bis zur letzten Zeile transparent und wartbar. Diese
+            Unmittelbarkeit stellt sicher, dass Ergebnisse sowohl technisch
+            sauber als auch wirtschaftlich sinnvoll realisiert werden.
+          </PDFText>
+        </PDFView>
+      </PDFView>
+
+      <PDFView
+        style={{
+          marginTop: 32,
+          paddingVertical: 16,
+          borderTopWidth: 1,
+          borderTopColor: COLORS.GRID,
+        }}
+      >
+        <PDFText
+          style={[
+            styles.industrialText,
+            { fontWeight: "bold", color: COLORS.CHARCOAL, marginBottom: 4 },
+          ]}
+        >
+          Infrastruktur & Souveränität
+        </PDFText>
+        <PDFText style={styles.industrialText}>
+          Es wird keine instabile Prototyp-Software geliefert, sondern
+          produktionsreife Systeme, die technisch skalierbar bleiben. Die
+          Codebasis folgt modernen Standards – bei wachsenden Ansprüchen oder
+          dem Wechsel zu einer Agentur kann der Quellcode jederzeit nahtlos
+          übernommen und weitergeführt werden.
+        </PDFText>
+      </PDFView>
+    </PDFView>
+  </>
 );
 
 export const CrossSellModule = ({ state }: any) => {
-    const isWebsite = state.projectType === 'website';
-    const title = isWebsite ? "Weitere Potenziale" : "Websites & Ökosysteme";
-    const subtitle = isWebsite ? "Automatisierung und Prozessoptimierung" : "Technische Infrastruktur ohne Kompromisse";
+  const isWebsite = state.projectType === "website";
+  const title = isWebsite ? "Weitere Potenziale" : "Websites & Ökosysteme";
+  const subtitle = isWebsite
+    ? "Automatisierung und Prozessoptimierung"
+    : "Technische Infrastruktur ohne Kompromisse";
 
-    return (
-        <>
-            <PDFText style={styles.industrialTitle}>{title}</PDFText>
-            <PDFText style={styles.industrialSubtitle}>{subtitle}</PDFText>
-            <Divider style={{ marginVertical: 16, backgroundColor: COLORS.GRID }} />
-            <PDFView style={[styles.industrialGrid2, { marginTop: 16 }]} >
-                {isWebsite ? (
-                    <>
-                        <PDFView style={[styles.industrialCol, { marginRight: '8%' }]}>
-                            <PDFText style={styles.industrialTextLead}>Über die klassische Webpräsenz hinaus werden maßgeschneiderte Lösungen zur Automatisierung von Routine-Prozessen angeboten. Dies ermöglicht eine signifikante Effizienzsteigerung im Tagesgeschäft.</PDFText>
-                            <PDFText style={[styles.industrialText, { fontWeight: 'bold' }]}>Keine Abos. Keine komplexen neuen Systeme. Gezielte Zeitersparnis.</PDFText>
-                            <PDFView style={{ marginTop: 24, padding: 16, backgroundColor: '#f8fafc', borderLeftWidth: 2, borderLeftColor: COLORS.GRID }}>
-                                <PDFText style={[styles.industrialText, { fontWeight: 'bold', color: COLORS.CHARCOAL, marginBottom: 4 }]}>Individuelle Analyse</PDFText>
-                                <PDFText style={styles.industrialText}>Spezifische Prozesse werden auf technisches Automatisierungspotenzial untersucht. Das Ergebnis liefert Klarheit über die wirtschaftliche Sinnhaftigkeit einer Umsetzung.</PDFText>
-                            </PDFView>
-                        </PDFView>
-                        <PDFView style={styles.industrialCol}>
-                            <IndustrialCard title="DOKUMENT-AUTOMATION">
-                                <PDFText style={styles.industrialText}>Erstellung von PDF-Angeboten, Berichten oder Protokollen in Sekunden statt Stunden.</PDFText>
-                            </IndustrialCard>
-                            <IndustrialCard title="EXCEL-LOGIK">
-                                <PDFText style={styles.industrialText}>Intelligente Tabellen und automatisierte Auswertungen bestehender Datensätze.</PDFText>
-                            </IndustrialCard>
-                            <IndustrialCard title="KI-ASSISTENZ">
-                                <PDFText style={styles.industrialText}>Effiziente Verarbeitung von analogen Dokumenten oder handschriftlichen Notizen mittels KI.</PDFText>
-                            </IndustrialCard>
-                        </PDFView>
-                    </>
-                ) : (
-                    <PDFView style={{ width: '100%' }}>
-                        <PDFText style={styles.industrialTextLead}>Bereitstellung einer stabilen technischen Basis ohne Abhängigkeiten von Baukasten-Systemen oder Agenturen.</PDFText>
-                        <PDFText style={styles.industrialText}>Entwicklung performanter Frontends und skalierbarer Backends. Die Auslieferung erfolgt als kontrollierbarer und nachhaltiger Quellcode.</PDFText>
-                    </PDFView>
-                )}
+  return (
+    <>
+      <DocumentTitle title={title} subLines={[subtitle]} isHero={true} />
+      <Divider style={{ marginVertical: 16, backgroundColor: COLORS.GRID }} />
+      <PDFView style={[styles.industrialGrid2, { marginTop: 16 }]}>
+        {isWebsite ? (
+          <>
+            <PDFView style={[styles.industrialCol, { marginRight: "8%" }]}>
+              <PDFText style={styles.industrialTextLead}>
+                Über die klassische Webpräsenz hinaus werden maßgeschneiderte
+                Lösungen zur Automatisierung von Routine-Prozessen angeboten.
+                Dies ermöglicht eine signifikante Effizienzsteigerung im
+                Tagesgeschäft.
+              </PDFText>
+              <PDFText style={[styles.industrialText, { fontWeight: "bold" }]}>
+                Keine Abos. Keine komplexen neuen Systeme. Gezielte
+                Zeitersparnis.
+              </PDFText>
+              <PDFView
+                style={{
+                  marginTop: 24,
+                  padding: 16,
+                  backgroundColor: "#f8fafc",
+                  borderLeftWidth: 2,
+                  borderLeftColor: COLORS.GRID,
+                }}
+              >
+                <PDFText
+                  style={[
+                    styles.industrialText,
+                    {
+                      fontWeight: "bold",
+                      color: COLORS.CHARCOAL,
+                      marginBottom: 4,
+                    },
+                  ]}
+                >
+                  Individuelle Analyse
+                </PDFText>
+                <PDFText style={styles.industrialText}>
+                  Spezifische Prozesse werden auf technisches
+                  Automatisierungspotenzial untersucht. Das Ergebnis liefert
+                  Klarheit über die wirtschaftliche Sinnhaftigkeit einer
+                  Umsetzung.
+                </PDFText>
+              </PDFView>
             </PDFView>
-        </>
-    );
+            <PDFView style={styles.industrialCol}>
+              <IndustrialCard title="DOKUMENT-AUTOMATION">
+                <PDFText style={styles.industrialText}>
+                  Erstellung von PDF-Angeboten, Berichten oder Protokollen in
+                  Sekunden statt Stunden.
+                </PDFText>
+              </IndustrialCard>
+              <IndustrialCard title="EXCEL-LOGIK">
+                <PDFText style={styles.industrialText}>
+                  Intelligente Tabellen und automatisierte Auswertungen
+                  bestehender Datensätze.
+                </PDFText>
+              </IndustrialCard>
+              <IndustrialCard title="KI-ASSISTENZ">
+                <PDFText style={styles.industrialText}>
+                  Effiziente Verarbeitung von analogen Dokumenten oder
+                  handschriftlichen Notizen mittels KI.
+                </PDFText>
+              </IndustrialCard>
+            </PDFView>
+          </>
+        ) : (
+          <PDFView style={{ width: "100%" }}>
+            <PDFText style={styles.industrialTextLead}>
+              Bereitstellung einer stabilen technischen Basis ohne
+              Abhängigkeiten von Baukasten-Systemen oder Agenturen.
+            </PDFText>
+            <PDFText style={styles.industrialText}>
+              Entwicklung performanter Frontends und skalierbarer Backends. Die
+              Auslieferung erfolgt als kontrollierbarer und nachhaltiger
+              Quellcode.
+            </PDFText>
+          </PDFView>
+        )}
+      </PDFView>
+    </>
+  );
 };