diff --git a/lib/pdf-business-card.tsx b/lib/pdf-business-card.tsx index e686d15e..6a7324d7 100644 --- a/lib/pdf-business-card.tsx +++ b/lib/pdf-business-card.tsx @@ -1,7 +1,21 @@ import React from 'react'; -import { Document, Page, Text, View, StyleSheet, Image } from '@react-pdf/renderer'; - -import { KLZLogoVector } from './KLZLogoVector'; +import * as fs from 'fs'; +import { + Document, + Page, + Text, + View, + StyleSheet, + Font, + Image, + Svg, + Path, + G, + Rect, + ClipPath, + Circle, +} from '@react-pdf/renderer'; +import * as path from 'path'; export interface PersonData { name: string; @@ -10,22 +24,25 @@ export interface PersonData { email: string; } -interface PDFBusinessCardProps { +export interface PDFBusinessCardProps { person: PersonData; qrCodeDataUrl: string; + isWhiteVariant?: boolean; } // Mintel Aesthetics Colors - EXACT PROD COLORS const COLORS = { - primary: '#011dff', // Bright Royal Blue + primary: '#011dff', // Brand Royal Blue green: '#82ed20', // Brand Accent Green white: '#ffffff', grayText: '#6c757d', + black: '#0a0a0a', + neutralDark: '#263336', + lightGray: '#f8f9fa', }; const styles = StyleSheet.create({ pageBleed: { - // 85x55mm + 3mm bleed on each side = 91x61mm width: '91mm', height: '61mm', backgroundColor: COLORS.primary, @@ -42,14 +59,85 @@ const styles = StyleSheet.create({ overflow: 'hidden', }, - // -- FRONT -- + // -- BLUE PAGE (Rückseite) -- + truckWrapper: { + position: 'absolute', + top: 0, + left: 0, + right: 0, + bottom: '16mm', // Leave space for the bar below + zIndex: 1, + }, + frontBackgroundImage: { + width: '100%', + height: '100%', + objectFit: 'contain', + objectPositionX: 'center', + objectPositionY: 'center', + opacity: 0.2, // Much more transparent + }, frontContainer: { flex: 1, + paddingBottom: '16mm', // Push the logo up to center it in the area above the bar justifyContent: 'center', alignItems: 'center', }, + frontLogo: { + width: 140, + zIndex: 100, + }, + frontTagline: { + color: COLORS.white, + fontSize: 6, + marginTop: 10, + letterSpacing: 1.5, + fontWeight: 'bold', + textTransform: 'uppercase', + zIndex: 100, + }, + frontGreenBarBottom: { + position: 'absolute', + bottom: 0, + left: 0, + right: 0, + height: '16mm', + borderTop: `2pt solid ${COLORS.green}`, + backgroundColor: '#000a66', + zIndex: 50, + flexDirection: 'column', + justifyContent: 'center', + alignItems: 'center', + gap: 6, // Increased gap for more spacing under tagline + }, + frontIconsGroup: { + flexDirection: 'row', + gap: 12, + }, + frontBrandIconWrapper: { + alignItems: 'center', + gap: 2, + }, + frontBrandIcon: { + width: 14, + height: 14, + opacity: 0.9, + }, + frontBrandText: { + fontSize: 4, + color: COLORS.white, + textTransform: 'uppercase', + letterSpacing: 0.5, + opacity: 0.9, + }, + frontTaglineBar: { + color: COLORS.green, + fontSize: 5.5, + letterSpacing: 1.5, + fontWeight: 'bold', + textTransform: 'uppercase', + }, - // -- BACK -- + // -- WHITE PAGE (Vorderseite) -- backContainer: { flex: 1, padding: '8mm', @@ -58,6 +146,35 @@ const styles = StyleSheet.create({ }, backHeader: { marginBottom: 'auto', + flexDirection: 'row', + alignItems: 'center', + width: '100%', + }, + backLogo: { + width: 70, + }, + accentLineHorizontal: { + flex: 1, + height: 1.5, + backgroundColor: COLORS.primary, // Brand blue line + marginLeft: 15, + marginRight: 0, + }, + accentDot: { + width: 4, + height: 4, + borderRadius: 2, + backgroundColor: COLORS.green, + marginRight: 20, // Keep away from the edge! + }, + + accentBoxEdge: { + width: 3, + height: 25, // Sleek vertical bar on the edge + backgroundColor: COLORS.green, + position: 'absolute', + right: '-8mm', // Bleed edge + top: -5, }, backBody: { flexDirection: 'row', @@ -69,79 +186,521 @@ const styles = StyleSheet.create({ flex: 1, flexDirection: 'column', paddingRight: '4mm', + paddingBottom: '2mm', }, nameSection: { - marginBottom: '6mm', + marginBottom: '5mm', }, nameText: { fontSize: 14, fontWeight: 'bold', - color: COLORS.primary, + color: COLORS.neutralDark, marginBottom: 2, + letterSpacing: -0.2, }, roleText: { fontSize: 7.5, - fontWeight: 'normal', - color: COLORS.grayText, + fontWeight: 'bold', + color: COLORS.primary, letterSpacing: 0.5, textTransform: 'uppercase', }, contactSection: { flexDirection: 'column', + gap: 5, }, contactRow: { flexDirection: 'row', alignItems: 'center', - marginBottom: 4, }, - iconCircle: { - width: 4, - height: 4, - borderRadius: 2, - backgroundColor: COLORS.green, - marginRight: 6, + iconWrapper: { + width: 10, + justifyContent: 'center', + alignItems: 'flex-start', }, contactText: { - fontSize: 7, - color: COLORS.primary, + fontSize: 7.5, + color: COLORS.neutralDark, fontWeight: 'normal', + paddingTop: 1, }, rightColumn: { - width: '18mm', flexDirection: 'column', alignItems: 'flex-end', + justifyContent: 'flex-end', + }, + // Ultra Minimalist QR Area + qrContainer: { + flexDirection: 'column', + alignItems: 'center', + gap: 4, }, qrCodeWrapper: { - width: '18mm', - height: '18mm', - padding: 1, - backgroundColor: COLORS.white, + width: '15mm', + height: '15mm', }, qrCode: { width: '100%', height: '100%', }, + qrLabel: { + fontSize: 3.5, + color: COLORS.neutralDark, // Subtle grey instead of loud blue + fontWeight: 'bold', + letterSpacing: 1.2, + }, }); -export const PDFBusinessCard: React.FC = ({ person, qrCodeDataUrl }) => { +// SVG Icons +const PhoneIcon = () => ( + + + +); + +const EmailIcon = () => ( + + + +); + +const GlobeIcon = () => ( + + + +); + +const ScanIcon = () => ( + + + +); + +const parseSvgPaths = (filePath: string) => { + try { + const raw = fs.readFileSync(filePath, 'utf8'); + const paths = []; + const pathRegex = /]+)>/g; + let match; + while ((match = pathRegex.exec(raw)) !== null) { + const attrs = match[1]; + const dMatch = attrs.match(/d="([^"]+)"/); + if (!dMatch) continue; + + let fill = 'white'; + const fillMatch = attrs.match(/fill(?:[:=])"?([^;"\s>]+)/); + if (fillMatch) { + fill = fillMatch[1].replace(/"$/, ''); + if (fill === 'none') continue; + } + paths.push({ d: dMatch[1], fill }); + } + return paths; + } catch (e) { + console.error('Could not parse SVG:', filePath); + return []; + } +}; + +const VectorLogo = ({ paths, style }: { paths: { d: string; fill: string }[]; style: any }) => ( + + + {paths.map((p, i) => ( + + ))} + + +); + +export const IconSolar = ({ style, color = 'white' }: { style: any; color?: string }) => ( + + + + + + + + + + + + + + + + + + + + + + + + + +); + +export const AbstractCable = ({ + size = 10, + color = COLORS.green, +}: { + size?: number; + color?: string; +}) => ( + + + + +); + +export const IconLowVoltage = ({ style, color = 'white' }: { style: any; color?: string }) => ( + + + + + + + + + +); + +export const IconMediumVoltage = ({ style, color = 'white' }: { style: any; color?: string }) => ( + + + + + + + + + + + + + +); + +export const IconHighVoltage = ({ style, color = 'white' }: { style: any; color?: string }) => ( + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +); + +export const PDFBusinessCard: React.FC = ({ + person, + qrCodeDataUrl, + isWhiteVariant = false, +}) => { + const logoWhitePath = path.join(process.cwd(), 'public', 'logo-green-text.svg'); + const logoBluePath = path.join(process.cwd(), 'public', 'logo-green-text-blue.svg'); + const logoBlueWithTaglinePath = path.join( + process.cwd(), + 'public', + 'logo-green-text-blue-with-tagline.svg', + ); + + const logoWhitePaths = parseSvgPaths(logoWhitePath); + const logoBluePaths = parseSvgPaths(logoBluePath); + const logoBlueWithTaglinePaths = parseSvgPaths(logoBlueWithTaglinePath); + const bgImagePath = isWhiteVariant + ? path.join(process.cwd(), 'public', 'truck_original_rasterized.png') + : path.join(process.cwd(), 'public', 'cable_drums_bg.png'); + return ( - {/* FRONT - Clean Modern KLZ Brand */} - + {/* VORDERSEITE (Blue page with logo, truck and tagline) */} + + + + + + + VON 0,6 KV BIS 110 KV + + + + + + Niederspannung + + + + + + Mittelspannung + + + + + + Hochspannung + + + + + + Solar + + + + - + - {/* BACK - Clean White with Bright Blue & Green Accents */} + {/* RÜCKSEITE (White page with contact info) */} - + + @@ -153,23 +712,32 @@ export const PDFBusinessCard: React.FC = ({ person, qrCode - + + + {person.phone} - + + + {person.email} - + + + klz-cables.com - - + + + + + ABSPEICHERN diff --git a/lib/pdf-icons.tsx b/lib/pdf-icons.tsx new file mode 100644 index 00000000..58fb5023 --- /dev/null +++ b/lib/pdf-icons.tsx @@ -0,0 +1,487 @@ +/* eslint-disable react/prop-types */ +import React from 'react'; +import { Svg, Path, G } from '@react-pdf/renderer'; + +export const LowVoltageIcon = ({ color = '#ffffff', width = 20, height = 20 }) => ( + + + + + + + +); + +export const MediumVoltageIcon = ({ color = '#ffffff', width = 20, height = 20 }) => ( + + + + + + + + + + + +); + +export const HighVoltageIcon = ({ color = '#ffffff', width = 20, height = 20 }) => ( + + + + + + + + + + + + + + + + + + + + + + + + + +); + +export const SolarIcon = ({ color = '#ffffff', width = 20, height = 20 }) => ( + + + + + + + + + + + + + + + + + + + + + + + +); diff --git a/lib/pdf-logos.tsx b/lib/pdf-logos.tsx new file mode 100644 index 00000000..285d3ec1 --- /dev/null +++ b/lib/pdf-logos.tsx @@ -0,0 +1,223 @@ +/* eslint-disable react/prop-types */ +import React from 'react'; +import { Svg, Path } from '@react-pdf/renderer'; + +export const LogoWhite = ({ width = 140 }) => { + const height = width * (99 / 295); + return ( + + + + + + + + + + + + + + + + + + + + ); +}; + +export const LogoBlue = ({ width = 140 }) => { + const height = width * (99 / 295); + return ( + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + ); +}; diff --git a/public/cable_drums_bg.png b/public/cable_drums_bg.png new file mode 100644 index 00000000..91eb2046 Binary files /dev/null and b/public/cable_drums_bg.png differ diff --git a/public/downloads/business-cards/KLZ_Visitenkarte_Johannes_Gleich.pdf b/public/downloads/business-cards/KLZ_Visitenkarte_Johannes_Gleich.pdf new file mode 100644 index 00000000..39dbcc8f Binary files /dev/null and b/public/downloads/business-cards/KLZ_Visitenkarte_Johannes_Gleich.pdf differ diff --git a/public/downloads/business-cards/KLZ_Visitenkarte_Johannes_Gleich_White.pdf b/public/downloads/business-cards/KLZ_Visitenkarte_Johannes_Gleich_White.pdf new file mode 100644 index 00000000..61185314 Binary files /dev/null and b/public/downloads/business-cards/KLZ_Visitenkarte_Johannes_Gleich_White.pdf differ diff --git a/public/downloads/business-cards/KLZ_Visitenkarte_Klaus_Mintel.pdf b/public/downloads/business-cards/KLZ_Visitenkarte_Klaus_Mintel.pdf new file mode 100644 index 00000000..87835143 Binary files /dev/null and b/public/downloads/business-cards/KLZ_Visitenkarte_Klaus_Mintel.pdf differ diff --git a/public/downloads/business-cards/KLZ_Visitenkarte_Klaus_Mintel_White.pdf b/public/downloads/business-cards/KLZ_Visitenkarte_Klaus_Mintel_White.pdf new file mode 100644 index 00000000..39e2265b Binary files /dev/null and b/public/downloads/business-cards/KLZ_Visitenkarte_Klaus_Mintel_White.pdf differ diff --git a/public/downloads/business-cards/KLZ_Visitenkarte_Michael_Bodemer.pdf b/public/downloads/business-cards/KLZ_Visitenkarte_Michael_Bodemer.pdf new file mode 100644 index 00000000..c860394e Binary files /dev/null and b/public/downloads/business-cards/KLZ_Visitenkarte_Michael_Bodemer.pdf differ diff --git a/public/downloads/business-cards/KLZ_Visitenkarte_Michael_Bodemer_White.pdf b/public/downloads/business-cards/KLZ_Visitenkarte_Michael_Bodemer_White.pdf new file mode 100644 index 00000000..b4a712c7 Binary files /dev/null and b/public/downloads/business-cards/KLZ_Visitenkarte_Michael_Bodemer_White.pdf differ diff --git a/public/fonts/Inter-Bold.ttf b/public/fonts/Inter-Bold.ttf new file mode 100644 index 00000000..a0c7af21 --- /dev/null +++ b/public/fonts/Inter-Bold.ttf @@ -0,0 +1,1482 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + Page not found · GitHub · GitHub + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
+
+ + +
+ Skip to content + + + + + + + + + + + +
+ + + + + + + + + + + + + + + + + + + + +
+ +
+ + + + + + + + +
+ + + + + +
+ + + + + + + + + +
+
+ + + +
+
+ +
+
+ 404 “This is not the web page you are looking for” + + + + + + + + + + + + +
+
+ +
+
+ +
+ + +
+
+
+ Contact Support — + GitHub Status — + @githubstatus +
+
+ +
+ +
+ + + + + + + + + + + + + + + + + + + + + + +
+
+
+ + + diff --git a/public/fonts/Inter-Regular.ttf b/public/fonts/Inter-Regular.ttf new file mode 100644 index 00000000..21683db1 --- /dev/null +++ b/public/fonts/Inter-Regular.ttf @@ -0,0 +1,1482 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + Page not found · GitHub · GitHub + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
+
+ + +
+ Skip to content + + + + + + + + + + + +
+ + + + + + + + + + + + + + + + + + + + +
+ +
+ + + + + + + + +
+ + + + + +
+ + + + + + + + + +
+
+ + + +
+
+ +
+
+ 404 “This is not the web page you are looking for” + + + + + + + + + + + + +
+
+ +
+
+ +
+ + +
+
+
+ Contact Support — + GitHub Status — + @githubstatus +
+
+ +
+ +
+ + + + + + + + + + + + + + + + + + + + + + +
+
+
+ + + diff --git a/public/logo-green-text-blue-with-tagline.svg b/public/logo-green-text-blue-with-tagline.svg new file mode 100644 index 00000000..6ff42d85 --- /dev/null +++ b/public/logo-green-text-blue-with-tagline.svg @@ -0,0 +1,40 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/public/logo-green-text-blue.png b/public/logo-green-text-blue.png new file mode 100644 index 00000000..8bbece65 Binary files /dev/null and b/public/logo-green-text-blue.png differ diff --git a/public/logo-green-text-blue.svg b/public/logo-green-text-blue.svg new file mode 100644 index 00000000..d32fbc3a --- /dev/null +++ b/public/logo-green-text-blue.svg @@ -0,0 +1,15 @@ + + + + + + + + + + + + + + + diff --git a/public/logo-green-text.png b/public/logo-green-text.png new file mode 100644 index 00000000..e204905b Binary files /dev/null and b/public/logo-green-text.png differ diff --git a/public/logo-green-text.svg b/public/logo-green-text.svg new file mode 100644 index 00000000..74cccef7 --- /dev/null +++ b/public/logo-green-text.svg @@ -0,0 +1,40 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/public/media/cable_drums_truck.svg b/public/media/cable_drums_truck.svg new file mode 100644 index 00000000..9ed28d58 --- /dev/null +++ b/public/media/cable_drums_truck.svg @@ -0,0 +1,4407 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/public/media/cable_drums_truck_blueprint.svg b/public/media/cable_drums_truck_blueprint.svg new file mode 100644 index 00000000..07efa8f8 --- /dev/null +++ b/public/media/cable_drums_truck_blueprint.svg @@ -0,0 +1,4407 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/public/media/cable_drums_truck_white.svg b/public/media/cable_drums_truck_white.svg new file mode 100644 index 00000000..5e76342e --- /dev/null +++ b/public/media/cable_drums_truck_white.svg @@ -0,0 +1,4407 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/public/uploads/2024/11/High-Voltage.png b/public/uploads/2024/11/High-Voltage.png new file mode 100644 index 00000000..ac610188 Binary files /dev/null and b/public/uploads/2024/11/High-Voltage.png differ diff --git a/public/uploads/2024/11/High-Voltage_white.png b/public/uploads/2024/11/High-Voltage_white.png new file mode 100644 index 00000000..051c2ea5 Binary files /dev/null and b/public/uploads/2024/11/High-Voltage_white.png differ diff --git a/public/uploads/2024/11/Low-Voltage.png b/public/uploads/2024/11/Low-Voltage.png new file mode 100644 index 00000000..8cc21477 Binary files /dev/null and b/public/uploads/2024/11/Low-Voltage.png differ diff --git a/public/uploads/2024/11/Low-Voltage_white.png b/public/uploads/2024/11/Low-Voltage_white.png new file mode 100644 index 00000000..f2ae82f5 Binary files /dev/null and b/public/uploads/2024/11/Low-Voltage_white.png differ diff --git a/public/uploads/2024/11/Medium-Voltage.png b/public/uploads/2024/11/Medium-Voltage.png new file mode 100644 index 00000000..d9be398b Binary files /dev/null and b/public/uploads/2024/11/Medium-Voltage.png differ diff --git a/public/uploads/2024/11/Medium-Voltage_white.png b/public/uploads/2024/11/Medium-Voltage_white.png new file mode 100644 index 00000000..d1d89915 Binary files /dev/null and b/public/uploads/2024/11/Medium-Voltage_white.png differ diff --git a/public/uploads/2024/11/Solar.png b/public/uploads/2024/11/Solar.png new file mode 100644 index 00000000..6aeec753 Binary files /dev/null and b/public/uploads/2024/11/Solar.png differ diff --git a/public/uploads/2024/11/Solar_white.png b/public/uploads/2024/11/Solar_white.png new file mode 100644 index 00000000..79556490 Binary files /dev/null and b/public/uploads/2024/11/Solar_white.png differ diff --git a/scripts/convert-logo.cjs b/scripts/convert-logo.cjs deleted file mode 100644 index 4ef70c71..00000000 --- a/scripts/convert-logo.cjs +++ /dev/null @@ -1,34 +0,0 @@ -const fs = require('fs'); - -const svgContent = fs.readFileSync('public/logo-white.svg', 'utf8'); - -const pathRegex = / = ({ width = 140, color = '#ffffff' }) => { - const height = width * (99 / 295); - - return ( - - -${paths.map(d => ` `).join('\n')} - - - ); -}; -`; - -fs.writeFileSync('lib/KLZLogoVector.tsx', componentCode); -console.log('Successfully wrote lib/KLZLogoVector.tsx'); diff --git a/scripts/gen-logo-vector.ts b/scripts/gen-logo-vector.ts deleted file mode 100644 index a5af22b3..00000000 --- a/scripts/gen-logo-vector.ts +++ /dev/null @@ -1,21 +0,0 @@ -import * as fs from 'fs'; - -const svgContent = fs.readFileSync('public/logo-white.svg', 'utf8'); -const dMatches = [...svgContent.matchAll(/d="([^"]+)"/g)].map((m) => m[1]); - -let tsx = `import React from 'react';\nimport { Svg, G, Path } from '@react-pdf/renderer';\n\n`; -tsx += `export const KLZLogoVector = ({ width, color }: { width: number, color: string }) => {\n`; -tsx += ` // Original viewBox was 0 0 295 99, so height is width * 99 / 295\n`; -tsx += ` const height = width * (99 / 295);\n`; -tsx += ` return (\n`; -tsx += ` \n`; -tsx += ` \n`; - -for (const d of dMatches) { - tsx += ` \n`; -} - -tsx += ` \n \n );\n};\n`; - -fs.writeFileSync('lib/KLZLogoVector.tsx', tsx); -console.log('Generated KLZLogoVector.tsx'); diff --git a/scripts/generate-business-cards.ts b/scripts/generate-business-cards.ts index 51fd6ff6..089bc6d4 100644 --- a/scripts/generate-business-cards.ts +++ b/scripts/generate-business-cards.ts @@ -13,10 +13,12 @@ import QRCode from 'qrcode'; const CONFIG = { outputDir: path.join(process.cwd(), 'public/downloads/business-cards'), - logoWhite: path.join(process.cwd(), 'public/logo-white.svg'), - logoBlue: path.join(process.cwd(), 'public/logo-blue.svg'), + logoWhite: path.join(process.cwd(), 'public/logo-white.png'), + logoBlue: path.join(process.cwd(), 'public/logo-blue.png'), logoFull: path.join(process.cwd(), 'public/logo-full.png'), truckImage: path.join(process.cwd(), 'public/truck.png'), + fontRegular: path.join(process.cwd(), 'public/fonts/Inter-Regular.ttf'), + fontBold: path.join(process.cwd(), 'public/fonts/Inter-Bold.ttf'), }; const PEOPLE: PersonData[] = [ @@ -32,21 +34,14 @@ const PEOPLE: PersonData[] = [ phone: '+49 151 1775 2873', email: 'klaus.mintel@klz-cables.com', }, + { + name: 'Johannes Gleich', + role: 'Platzhalter Rolle', + phone: '+49 000 0000000', + email: 'johannes.gleich@klz-cables.com', + }, ]; -function convertToCMYK(inputPath: string, outputPath: string) { - console.log(`- Converting to CMYK via Ghostscript...`); - try { - const gsCommand = `gs -dSAFER -dBATCH -dNOPAUSE -dNOCACHE -sDEVICE=pdfwrite -sColorConversionStrategy=CMYK -dProcessColorModel=/DeviceCMYK -dAutoFilterColorImages=false -dColorImageFilter=/FlateEncode -sOutputFile="${outputPath}" "${inputPath}"`; - - execSync(gsCommand, { stdio: 'pipe' }); - console.log(`✓ CMYK Print File generated: ${path.basename(outputPath)}`); - } catch (err: any) { - console.error(`❌ Ghostscript CMYK conversion failed! Is ghostscript (gs) installed?`); - console.error(err.message); - } -} - async function generateBusinessCards() { if (!fs.existsSync(CONFIG.outputDir)) { fs.mkdirSync(CONFIG.outputDir, { recursive: true }); @@ -77,10 +72,10 @@ END:VCARD`; const safeName = person.name.replace(/\s+/g, '_'); const finalFileName = `KLZ_Visitenkarte_${safeName}.pdf`; - const tempRgbPath = path.join(CONFIG.outputDir, `temp_rgb_${safeName}.pdf`); + const rgbPath = path.join(CONFIG.outputDir, `RGB_${finalFileName}`); const finalPath = path.join(CONFIG.outputDir, finalFileName); - console.log(`- Rendering React-PDF layout...`); + console.log(`- Rendering React-PDF layout (RGB ONLY)...`); const buffer = await renderToBuffer( React.createElement(PDFBusinessCard, { person, @@ -88,15 +83,36 @@ END:VCARD`; }), ); - fs.writeFileSync(tempRgbPath, buffer); - convertToCMYK(tempRgbPath, finalPath); + fs.writeFileSync(rgbPath, buffer); - // Clean up temporary RGB file - if (fs.existsSync(tempRgbPath)) { - fs.unlinkSync(tempRgbPath); - } + console.log(`- Outlining fonts via Ghostscript (Keeping RGB)...`); + const gsCommand = `gs -dNoOutputFonts -sDEVICE=pdfwrite -o "${finalPath}" "${rgbPath}"`; + execSync(gsCommand, { stdio: 'ignore' }); - console.log(`✓ Final Print File generated: ${finalFileName}`); + fs.unlinkSync(rgbPath); + + console.log(`✓ Final Print File generated (Fonts to Paths, RGB preserved): ${finalFileName}`); + + // Generate White Variant + const finalFileNameWhite = `KLZ_Visitenkarte_${safeName}_White.pdf`; + const rgbPathWhite = path.join(CONFIG.outputDir, `RGB_${finalFileNameWhite}`); + const finalPathWhite = path.join(CONFIG.outputDir, finalFileNameWhite); + + console.log(`- Rendering White Variant...`); + const bufferWhite = await renderToBuffer( + React.createElement(PDFBusinessCard, { + person, + qrCodeDataUrl, + isWhiteVariant: true, + }), + ); + + fs.writeFileSync(rgbPathWhite, bufferWhite); + + const gsCommandWhite = `gs -dNoOutputFonts -sDEVICE=pdfwrite -o "${finalPathWhite}" "${rgbPathWhite}"`; + execSync(gsCommandWhite, { stdio: 'ignore' }); + fs.unlinkSync(rgbPathWhite); + console.log(`✓ White Variant generated: ${finalFileNameWhite}`); } }