Lead Magnet implementiert
This commit is contained in:
@@ -38,14 +38,26 @@ export const ReprintSavingsCalculator: React.FC = () => {
|
||||
const annualWaste = cost * updates;
|
||||
const withQRMaster = qrMasterYearlyCost;
|
||||
const savings = annualWaste - withQRMaster;
|
||||
const savingsPercent = Math.round((savings / annualWaste) * 100);
|
||||
const monthsPaidFor = Math.round(annualWaste / (qrMasterYearlyCost / 12));
|
||||
|
||||
// Calculate percentages based on the larger value to avoid overflow bars
|
||||
const maxValue = Math.max(annualWaste, withQRMaster);
|
||||
const wastePercentOfMax = (annualWaste / maxValue) * 100;
|
||||
const costPercentOfMax = (withQRMaster / maxValue) * 100;
|
||||
|
||||
const isPositiveSavings = savings > 0;
|
||||
const savingsPercent = isPositiveSavings
|
||||
? Math.round((savings / annualWaste) * 100)
|
||||
: Math.round((Math.abs(savings) / withQRMaster) * 100);
|
||||
|
||||
const monthsPaidFor = isPositiveSavings
|
||||
? Math.round(annualWaste / (qrMasterYearlyCost / 12))
|
||||
: 0;
|
||||
|
||||
return {
|
||||
annualWaste,
|
||||
withQRMaster,
|
||||
savings: Math.max(0, savings),
|
||||
savingsPercent: Math.max(0, savingsPercent),
|
||||
savings,
|
||||
savingsPercent,
|
||||
monthsPaidFor,
|
||||
};
|
||||
}, [reprintCost, updatesPerYear]);
|
||||
@@ -120,6 +132,8 @@ export const ReprintSavingsCalculator: React.FC = () => {
|
||||
}).format(value);
|
||||
};
|
||||
|
||||
const isPositiveSavings = results ? results.savings > 0 : false;
|
||||
|
||||
return (
|
||||
<>
|
||||
<section className="py-20 bg-gradient-to-br from-slate-50 to-white relative overflow-hidden">
|
||||
@@ -243,21 +257,44 @@ export const ReprintSavingsCalculator: React.FC = () => {
|
||||
className="h-full flex flex-col"
|
||||
>
|
||||
<div className="flex-1">
|
||||
<div className="inline-flex items-center gap-2 px-3 py-1 rounded-full bg-green-50 text-green-700 text-sm font-medium mb-6">
|
||||
<TrendingDown className="w-4 h-4" />
|
||||
Potential Savings Found
|
||||
</div>
|
||||
{isPositiveSavings ? (
|
||||
<div className="inline-flex items-center gap-2 px-3 py-1 rounded-full bg-green-50 text-green-700 text-sm font-medium mb-6">
|
||||
<TrendingDown className="w-4 h-4" />
|
||||
Potential Savings Found
|
||||
</div>
|
||||
) : (
|
||||
<div className="inline-flex items-center gap-2 px-3 py-1 rounded-full bg-blue-50 text-blue-700 text-sm font-medium mb-6">
|
||||
<TrendingDown className="w-4 h-4" />
|
||||
Cost Analysis
|
||||
</div>
|
||||
)}
|
||||
|
||||
<div className="mb-8">
|
||||
<p className="text-slate-500 text-sm font-medium uppercase tracking-wide mb-1">Annual Waste Identified</p>
|
||||
<div className="flex items-baseline gap-2">
|
||||
<span className="text-5xl lg:text-6xl font-black text-slate-900 tracking-tight">
|
||||
{formatCurrency(results.annualWaste)}
|
||||
</span>
|
||||
</div>
|
||||
<p className="text-red-500 text-sm mt-2 font-medium flex items-center gap-1">
|
||||
<AlertTriangle className="w-3 h-3" /> Money currently lost to static reprints
|
||||
</p>
|
||||
{isPositiveSavings ? (
|
||||
<>
|
||||
<p className="text-slate-500 text-sm font-medium uppercase tracking-wide mb-1">Annual Waste Identified</p>
|
||||
<div className="flex items-baseline gap-2">
|
||||
<span className="text-5xl lg:text-6xl font-black text-slate-900 tracking-tight">
|
||||
{formatCurrency(results.annualWaste)}
|
||||
</span>
|
||||
</div>
|
||||
<p className="text-red-500 text-sm mt-2 font-medium flex items-center gap-1">
|
||||
<AlertTriangle className="w-3 h-3" /> Money currently lost to static reprints
|
||||
</p>
|
||||
</>
|
||||
) : (
|
||||
<>
|
||||
<p className="text-slate-500 text-sm font-medium uppercase tracking-wide mb-1">Estimated Annual Investment</p>
|
||||
<div className="flex items-baseline gap-2">
|
||||
<span className="text-5xl lg:text-6xl font-black text-slate-900 tracking-tight">
|
||||
{formatCurrency(Math.abs(results.savings))}
|
||||
</span>
|
||||
</div>
|
||||
<p className="text-slate-500 text-sm mt-2 font-medium">
|
||||
Difference for upgrading to Dynamic QR features
|
||||
</p>
|
||||
</>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{/* Comparison Bars */}
|
||||
@@ -270,7 +307,7 @@ export const ReprintSavingsCalculator: React.FC = () => {
|
||||
<div className="h-3 bg-slate-100 rounded-full w-full overflow-hidden">
|
||||
<motion.div
|
||||
initial={{ width: 0 }}
|
||||
animate={{ width: "100%" }}
|
||||
animate={{ width: `${(results.annualWaste / Math.max(results.annualWaste, results.withQRMaster)) * 100}%` }}
|
||||
transition={{ duration: 1, ease: "easeOut" }}
|
||||
className="h-full bg-red-500 rounded-full"
|
||||
/>
|
||||
@@ -280,35 +317,53 @@ export const ReprintSavingsCalculator: React.FC = () => {
|
||||
<div className="relative">
|
||||
<div className="flex justify-between text-sm mb-2">
|
||||
<span className="font-semibold text-slate-700">QR Master Cost</span>
|
||||
<span className="font-bold text-emerald-600">{formatCurrency(results.withQRMaster)}</span>
|
||||
<span className={isPositiveSavings ? "font-bold text-emerald-600" : "font-bold text-blue-600"}>{formatCurrency(results.withQRMaster)}</span>
|
||||
</div>
|
||||
<div className="h-3 bg-slate-100 rounded-full w-full overflow-hidden">
|
||||
<motion.div
|
||||
initial={{ width: 0 }}
|
||||
animate={{ width: `${(results.withQRMaster / results.annualWaste) * 100}%` }}
|
||||
animate={{ width: `${(results.withQRMaster / Math.max(results.annualWaste, results.withQRMaster)) * 100}%` }}
|
||||
transition={{ duration: 1, ease: "easeOut", delay: 0.5 }}
|
||||
className="h-full bg-emerald-500 rounded-full"
|
||||
className={isPositiveSavings ? "h-full bg-emerald-500 rounded-full" : "h-full bg-blue-500 rounded-full"}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="bg-emerald-50/50 border border-emerald-100 rounded-2xl p-6 mb-8">
|
||||
<div className="flex items-start gap-4">
|
||||
<div className="p-3 bg-emerald-100 rounded-xl text-emerald-600 shrink-0">
|
||||
<CheckCircle className="w-6 h-6" />
|
||||
</div>
|
||||
<div>
|
||||
<h4 className="text-lg font-bold text-emerald-900 mb-1">
|
||||
You save {results.savingsPercent}% instantly
|
||||
</h4>
|
||||
<p className="text-emerald-800/80 leading-relaxed">
|
||||
That's <strong className="text-emerald-900">{formatCurrency(results.savings)}</strong> extra budget per year.
|
||||
Effectively getting <strong className="text-emerald-900">{results.monthsPaidFor} months</strong> of service for free compared to just one single reprint.
|
||||
</p>
|
||||
{isPositiveSavings ? (
|
||||
<div className="bg-emerald-50/50 border border-emerald-100 rounded-2xl p-6 mb-8">
|
||||
<div className="flex items-start gap-4">
|
||||
<div className="p-3 bg-emerald-100 rounded-xl text-emerald-600 shrink-0">
|
||||
<CheckCircle className="w-6 h-6" />
|
||||
</div>
|
||||
<div>
|
||||
<h4 className="text-lg font-bold text-emerald-900 mb-1">
|
||||
You save {results.savingsPercent}% instantly
|
||||
</h4>
|
||||
<p className="text-emerald-800/80 leading-relaxed">
|
||||
That's <strong className="text-emerald-900">{formatCurrency(results.savings)}</strong> extra budget per year.
|
||||
Effectively getting <strong className="text-emerald-900">{results.monthsPaidFor} months</strong> of service for free compared to just one single reprint.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
) : (
|
||||
<div className="bg-blue-50/50 border border-blue-100 rounded-2xl p-6 mb-8">
|
||||
<div className="flex items-start gap-4">
|
||||
<div className="p-3 bg-blue-100 rounded-xl text-blue-600 shrink-0">
|
||||
<CheckCircle className="w-6 h-6" />
|
||||
</div>
|
||||
<div>
|
||||
<h4 className="text-lg font-bold text-blue-900 mb-1">
|
||||
Premium features for just {formatCurrency(Math.abs(results.savings))}/year
|
||||
</h4>
|
||||
<p className="text-blue-800/80 leading-relaxed">
|
||||
For a small investment, you gain full control, analytics, and the ability to update destinations anytime.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
<div className="mt-auto space-y-3">
|
||||
@@ -319,10 +374,10 @@ export const ReprintSavingsCalculator: React.FC = () => {
|
||||
</Link>
|
||||
<button
|
||||
onClick={handleDownloadReport}
|
||||
className="w-full flex items-center justify-center gap-2 py-3 px-4 text-sm font-medium text-slate-700 bg-slate-100 hover:bg-slate-200 rounded-xl transition-colors"
|
||||
className="w-full flex items-center justify-center gap-2 py-4 px-6 text-base font-bold text-white bg-gradient-to-r from-slate-800 to-slate-900 hover:from-slate-700 hover:to-slate-800 rounded-xl shadow-lg shadow-slate-900/10 hover:shadow-slate-900/20 transform hover:-translate-y-0.5 transition-all duration-200"
|
||||
>
|
||||
<FileDown className="w-4 h-4" />
|
||||
Download Your Savings Report (PDF)
|
||||
<FileDown className="w-5 h-5" />
|
||||
Get Official Savings Report PDF
|
||||
</button>
|
||||
<p className="text-center text-xs text-slate-400">
|
||||
Based on QR Master Pro annual plan. No credit card required to start.
|
||||
|
||||
Reference in New Issue
Block a user