Lead Magnet
This commit is contained in:
142
src/lib/generateSavingsReport.ts
Normal file
142
src/lib/generateSavingsReport.ts
Normal file
@@ -0,0 +1,142 @@
|
||||
import { jsPDF } from 'jspdf';
|
||||
|
||||
interface ReportData {
|
||||
reprintCost: number;
|
||||
updatesPerYear: number;
|
||||
annualWaste: number;
|
||||
qrMasterCost: number;
|
||||
savings: number;
|
||||
savingsPercent: number;
|
||||
}
|
||||
|
||||
export function generateSavingsReport(data: ReportData): void {
|
||||
const doc = new jsPDF();
|
||||
const pageWidth = doc.internal.pageSize.getWidth();
|
||||
|
||||
// Colors
|
||||
const primaryColor: [number, number, number] = [79, 70, 229]; // Indigo
|
||||
const greenColor: [number, number, number] = [16, 185, 129]; // Emerald
|
||||
const redColor: [number, number, number] = [239, 68, 68]; // Red
|
||||
const grayColor: [number, number, number] = [100, 116, 139]; // Slate
|
||||
|
||||
// Header section with brand color
|
||||
doc.setFillColor(...primaryColor);
|
||||
doc.rect(0, 0, pageWidth, 45, 'F');
|
||||
|
||||
// Logo text
|
||||
doc.setTextColor(255, 255, 255);
|
||||
doc.setFontSize(28);
|
||||
doc.setFont('helvetica', 'bold');
|
||||
doc.text('QR Master', 20, 28);
|
||||
|
||||
// Subtitle
|
||||
doc.setFontSize(12);
|
||||
doc.setFont('helvetica', 'normal');
|
||||
doc.text('Your Personalized Savings Report', 20, 38);
|
||||
|
||||
// Main title
|
||||
doc.setTextColor(30, 41, 59);
|
||||
doc.setFontSize(22);
|
||||
doc.setFont('helvetica', 'bold');
|
||||
doc.text('Reprint Cost Analysis', 20, 65);
|
||||
|
||||
// Date
|
||||
doc.setTextColor(...grayColor);
|
||||
doc.setFontSize(10);
|
||||
doc.setFont('helvetica', 'normal');
|
||||
doc.text(`Generated on ${new Date().toLocaleDateString('en-US', {
|
||||
year: 'numeric',
|
||||
month: 'long',
|
||||
day: 'numeric'
|
||||
})}`, 20, 75);
|
||||
|
||||
// Input summary box
|
||||
doc.setFillColor(248, 250, 252);
|
||||
doc.roundedRect(20, 85, pageWidth - 40, 45, 3, 3, 'F');
|
||||
|
||||
doc.setTextColor(30, 41, 59);
|
||||
doc.setFontSize(12);
|
||||
doc.setFont('helvetica', 'bold');
|
||||
doc.text('Your Input', 28, 98);
|
||||
|
||||
doc.setFont('helvetica', 'normal');
|
||||
doc.setFontSize(11);
|
||||
doc.setTextColor(...grayColor);
|
||||
doc.text(`Reprint Cost per Batch:`, 28, 112);
|
||||
doc.text(`URL Updates per Year:`, 28, 122);
|
||||
|
||||
doc.setTextColor(30, 41, 59);
|
||||
doc.setFont('helvetica', 'bold');
|
||||
doc.text(`€${data.reprintCost.toLocaleString()}`, 100, 112);
|
||||
doc.text(`${data.updatesPerYear}`, 100, 122);
|
||||
|
||||
// Results section
|
||||
doc.setTextColor(30, 41, 59);
|
||||
doc.setFontSize(14);
|
||||
doc.setFont('helvetica', 'bold');
|
||||
doc.text('Cost Comparison', 20, 150);
|
||||
|
||||
// Static QR Code cost (red)
|
||||
doc.setFillColor(254, 242, 242);
|
||||
doc.roundedRect(20, 158, pageWidth - 40, 28, 3, 3, 'F');
|
||||
|
||||
doc.setTextColor(...redColor);
|
||||
doc.setFontSize(11);
|
||||
doc.setFont('helvetica', 'bold');
|
||||
doc.text('Static QR Codes (Annual Waste)', 28, 172);
|
||||
doc.setFontSize(16);
|
||||
doc.text(`€${data.annualWaste.toLocaleString()}`, pageWidth - 28, 172, { align: 'right' });
|
||||
|
||||
// QR Master cost (green)
|
||||
doc.setFillColor(236, 253, 245);
|
||||
doc.roundedRect(20, 192, pageWidth - 40, 28, 3, 3, 'F');
|
||||
|
||||
doc.setTextColor(...greenColor);
|
||||
doc.setFontSize(11);
|
||||
doc.setFont('helvetica', 'bold');
|
||||
doc.text('QR Master Pro (Annual Cost)', 28, 206);
|
||||
doc.setFontSize(16);
|
||||
doc.text(`€${data.qrMasterCost.toLocaleString()}`, pageWidth - 28, 206, { align: 'right' });
|
||||
|
||||
// Savings highlight
|
||||
doc.setFillColor(...greenColor);
|
||||
doc.roundedRect(20, 230, pageWidth - 40, 40, 3, 3, 'F');
|
||||
|
||||
doc.setTextColor(255, 255, 255);
|
||||
doc.setFontSize(12);
|
||||
doc.setFont('helvetica', 'normal');
|
||||
doc.text('Your Annual Savings', 28, 245);
|
||||
doc.setFontSize(24);
|
||||
doc.setFont('helvetica', 'bold');
|
||||
doc.text(`€${data.savings.toLocaleString()}`, 28, 262);
|
||||
doc.setFontSize(14);
|
||||
doc.text(`(${data.savingsPercent}%)`, 90, 262);
|
||||
|
||||
// CTA section
|
||||
doc.setTextColor(30, 41, 59);
|
||||
doc.setFontSize(14);
|
||||
doc.setFont('helvetica', 'bold');
|
||||
doc.text('Ready to Start Saving?', 20, 295);
|
||||
|
||||
doc.setTextColor(...grayColor);
|
||||
doc.setFontSize(10);
|
||||
doc.setFont('helvetica', 'normal');
|
||||
doc.text('Dynamic QR codes let you update destinations without reprinting.', 20, 307);
|
||||
doc.text('Track scans, analyze performance, and never waste print budget again.', 20, 317);
|
||||
|
||||
// Website link
|
||||
doc.setTextColor(...primaryColor);
|
||||
doc.setFont('helvetica', 'bold');
|
||||
doc.text('Start your free trial: www.qrmaster.net/signup', 20, 332);
|
||||
|
||||
// Footer
|
||||
doc.setTextColor(...grayColor);
|
||||
doc.setFontSize(8);
|
||||
doc.setFont('helvetica', 'normal');
|
||||
const footerY = doc.internal.pageSize.getHeight() - 15;
|
||||
doc.text('© 2026 QR Master. All rights reserved.', pageWidth / 2, footerY, { align: 'center' });
|
||||
doc.text('www.qrmaster.net', pageWidth / 2, footerY + 8, { align: 'center' });
|
||||
|
||||
// Download the PDF
|
||||
doc.save('QRMaster-Savings-Report.pdf');
|
||||
}
|
||||
Reference in New Issue
Block a user