diff --git a/lib/pdf-page.tsx b/lib/pdf-page.tsx index e6e4eb16..3d05e9c1 100644 --- a/lib/pdf-page.tsx +++ b/lib/pdf-page.tsx @@ -1,5 +1,5 @@ -import * as React from 'react'; -import { Document, Page, View, Text, StyleSheet, Font, Link } from '@react-pdf/renderer'; +import { Document, Page, View, Text, StyleSheet, Font, Link, Image } from '@react-pdf/renderer'; +import path from 'path'; // Standard fonts like Helvetica are built-in to PDF and don't require registration // unless we want to use specific TTF files. Using built-in Helvetica for maximum stability. @@ -24,67 +24,65 @@ const MARGIN = 72; const styles = StyleSheet.create({ page: { color: C.gray900, - lineHeight: 1.5, + lineHeight: 1.6, backgroundColor: C.white, paddingTop: 0, - paddingBottom: 100, + paddingBottom: 80, fontFamily: 'Helvetica', }, - // Hero-style header + // Premium Header Layout hero: { - backgroundColor: C.white, - paddingTop: 24, - paddingBottom: 20, + backgroundColor: C.offWhite, + paddingTop: 40, + paddingBottom: 32, paddingHorizontal: MARGIN, - marginBottom: 20, - position: 'relative', + marginBottom: 40, borderBottomWidth: 1, borderBottomColor: C.gray200, + position: 'relative', }, - header: { + headerTop: { flexDirection: 'row', justifyContent: 'space-between', alignItems: 'center', - marginBottom: 16, + marginBottom: 32, }, - logoText: { - fontSize: 24, - fontWeight: 700, - color: C.navyDeep, - letterSpacing: 1, - textTransform: 'uppercase', + logo: { + width: 60, + height: 'auto', }, - docTitle: { - fontSize: 10, + docType: { + fontSize: 9, fontWeight: 700, color: C.navy, letterSpacing: 2, textTransform: 'uppercase', + opacity: 0.6, }, - productHero: { + headerTitleArea: { marginTop: 0, }, pageTitle: { - fontSize: 24, + fontSize: 28, fontWeight: 700, color: C.navyDeep, - marginBottom: 0, + marginBottom: 4, textTransform: 'uppercase', letterSpacing: -0.5, }, accentBar: { - width: 30, - height: 3, + width: 40, + height: 4, backgroundColor: C.accent, - marginTop: 8, - borderRadius: 1.5, + marginTop: 12, + borderRadius: 2, }, // Content Area @@ -92,89 +90,103 @@ const styles = StyleSheet.create({ paddingHorizontal: MARGIN, }, - // Lexical Elements + // Lexical Elements with high-fidelity formatting paragraph: { fontSize: 10, color: C.gray600, lineHeight: 1.7, - marginBottom: 12, + marginBottom: 14, + textAlign: 'justify', }, + heading1: { - fontSize: 16, + fontSize: 14, fontWeight: 700, color: C.navyDeep, - marginTop: 20, + marginTop: 24, + marginBottom: 12, + textTransform: 'uppercase', + letterSpacing: 0.8, + borderLeftWidth: 3, + borderLeftColor: C.accent, + paddingLeft: 12, + }, + + heading2: { + fontSize: 11, + fontWeight: 700, + color: C.navyDeep, + marginTop: 18, marginBottom: 10, textTransform: 'uppercase', letterSpacing: 0.5, }, - heading2: { - fontSize: 12, - fontWeight: 700, - color: C.navyDeep, - marginTop: 16, - marginBottom: 8, - }, + heading3: { fontSize: 10, fontWeight: 700, color: C.navyDeep, - marginTop: 12, - marginBottom: 6, + marginTop: 14, + marginBottom: 8, }, + list: { - marginBottom: 12, - marginLeft: 8, + marginBottom: 16, + marginLeft: 4, }, + listItem: { flexDirection: 'row', - marginBottom: 4, + marginBottom: 6, }, + listItemBullet: { - width: 12, + width: 20, fontSize: 10, - color: C.accent, + color: C.gray400, fontWeight: 700, }, + listItemContent: { flex: 1, fontSize: 10, color: C.gray600, lineHeight: 1.7, + textAlign: 'justify', }, + link: { - color: C.accent, - textDecoration: 'none', + color: C.navy, + textDecoration: 'underline', }, + textBold: { fontWeight: 700, fontFamily: 'Helvetica-Bold', color: C.navyDeep, }, + textItalic: { fontStyle: 'italic', }, - // Footer — matches brochure style + // Industrial Footer footer: { position: 'absolute', - bottom: 40, + bottom: 30, left: MARGIN, right: MARGIN, flexDirection: 'row', justifyContent: 'space-between', - alignItems: 'center', - paddingTop: 24, - borderTopWidth: 1, + alignItems: 'flex-end', + paddingTop: 16, + borderTopWidth: 0.5, borderTopColor: C.gray200, }, - footerText: { - fontSize: 8, - color: C.gray400, - fontWeight: 500, - textTransform: 'uppercase', - letterSpacing: 1, + footerInfo: { + flexDirection: 'column', + gap: 2, }, footerBrand: { @@ -183,6 +195,20 @@ const styles = StyleSheet.create({ color: C.navyDeep, textTransform: 'uppercase', letterSpacing: 1, + marginBottom: 2, + }, + + footerText: { + fontSize: 7, + color: C.gray400, + fontWeight: 500, + textTransform: 'uppercase', + letterSpacing: 0.5, + }, + + pageNum: { + fontSize: 8, + color: C.gray400, }, }); @@ -291,19 +317,21 @@ export const PDFPage: React.FC = ({ page, locale = 'de' }) => { day: 'numeric', }); + const logoPath = path.join(process.cwd(), 'public/logo.png'); + return ( - {/* Hero Header */} + {/* Improved Hero Header */} - - - KLZ - - {locale === 'en' ? 'Document' : 'Dokument'} + + + + {locale === 'en' ? 'Official Document' : 'Offizielles Dokument'} + - + {page.title} @@ -317,10 +345,18 @@ export const PDFPage: React.FC = ({ page, locale = 'de' }) => { - {/* Minimal footer */} + {/* Industrial footer with page numbers */} - KLZ CABLES - {dateStr} + + KLZ VERTRIEBS GMBH + + RAIFFEISENSTRASSE 22 • 73630 REMSHALDEN • {dateStr} + + + `${pageNumber} / ${totalPages}`} + /> diff --git a/package.json b/package.json index 595a4464..9a85dcb6 100644 --- a/package.json +++ b/package.json @@ -139,7 +139,7 @@ "prepare": "husky", "preinstall": "npx only-allow pnpm" }, - "version": "2.3.18-rc.1", + "version": "2.3.18-rc.2", "pnpm": { "onlyBuiltDependencies": [ "@parcel/watcher",