118 lines
6.0 KiB
TypeScript
118 lines
6.0 KiB
TypeScript
import React from 'react';
|
|
import type { Metadata } from 'next';
|
|
import ReprintSavingsCalculator from '@/components/marketing/ReprintSavingsCalculator';
|
|
import { ArrowDown, Check, ShieldCheck, Zap } from 'lucide-react';
|
|
|
|
export const metadata: Metadata = {
|
|
title: 'Reprint Cost Calculator | QR Master',
|
|
description:
|
|
'Calculate how much you are wasting on QR code reprints. See your potential savings with dynamic QR codes that never need to be reprinted.',
|
|
alternates: {
|
|
canonical: 'https://www.qrmaster.net/reprint-calculator',
|
|
},
|
|
robots: {
|
|
index: true,
|
|
follow: true,
|
|
},
|
|
openGraph: {
|
|
title: 'Reprint Cost Calculator | QR Master',
|
|
description: 'Stop wasting money on reprints. Calculate your savings now.',
|
|
url: 'https://www.qrmaster.net/reprint-calculator',
|
|
type: 'website',
|
|
images: [
|
|
{
|
|
url: 'https://www.qrmaster.net/og-image.png',
|
|
width: 1200,
|
|
height: 630,
|
|
alt: 'QR Master Reprint Cost Calculator',
|
|
},
|
|
],
|
|
},
|
|
};
|
|
|
|
export default function ReprintCalculatorPage() {
|
|
return (
|
|
<>
|
|
{/* Hero Section */}
|
|
<section className="pt-24 pb-12 bg-white relative overflow-hidden">
|
|
<div className="container mx-auto px-4 text-center max-w-3xl relative z-10">
|
|
<div className="inline-flex items-center gap-2 px-4 py-1.5 rounded-full bg-slate-100/80 backdrop-blur-sm border border-slate-200 text-slate-600 text-sm font-medium mb-8">
|
|
<span className="relative flex h-2 w-2">
|
|
<span className="animate-ping absolute inline-flex h-full w-full rounded-full bg-red-400 opacity-75"></span>
|
|
<span className="relative inline-flex rounded-full h-2 w-2 bg-red-500"></span>
|
|
</span>
|
|
Static QR codes are costing you money
|
|
</div>
|
|
|
|
<h1 className="text-4xl lg:text-6xl font-black text-slate-900 mb-6 tracking-tight leading-[1.1]">
|
|
Stop Burning Budget on <br className="hidden md:block" />
|
|
<span className="text-transparent bg-clip-text bg-gradient-to-r from-red-500 to-orange-600">Avoidable Reprints</span>
|
|
</h1>
|
|
|
|
<p className="text-xl text-slate-600 mb-8 leading-relaxed max-w-2xl mx-auto">
|
|
Every time a URL changes, static QR codes become useless trash.
|
|
Dynamic QR codes update instantly—keeping your print materials alive forever.
|
|
</p>
|
|
|
|
<div className="flex justify-center">
|
|
<ArrowDown className="w-6 h-6 text-slate-400 animate-bounce" />
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
{/* Calculator Component */}
|
|
<ReprintSavingsCalculator />
|
|
|
|
{/* Value Props */}
|
|
<section className="py-24 bg-white border-t border-slate-100">
|
|
<div className="container mx-auto px-4 max-w-6xl">
|
|
<div className="text-center mb-16">
|
|
<h2 className="text-3xl font-bold text-slate-900 mb-4">
|
|
Why Smart Companies Switched Years Ago
|
|
</h2>
|
|
<p className="text-slate-600 text-lg max-w-2xl mx-auto">
|
|
The math is simple. One dynamic subscription costs less than a single batch of reprints.
|
|
</p>
|
|
</div>
|
|
|
|
<div className="grid md:grid-cols-3 gap-8 lg:gap-12">
|
|
{[
|
|
{
|
|
icon: Zap,
|
|
color: "text-amber-500",
|
|
bg: "bg-amber-50",
|
|
title: "Update Instantly",
|
|
desc: "Changed your menu? New promo link? Update the destination in seconds. Your printed codes keep working perfectly."
|
|
},
|
|
{
|
|
icon: ShieldCheck,
|
|
color: "text-blue-500",
|
|
bg: "bg-blue-50",
|
|
title: "Error Proofing",
|
|
desc: "Printed the wrong link? With static codes, that's a disaster. With dynamic codes, it's a 5-second fix in the dashboard."
|
|
},
|
|
{
|
|
icon: Check,
|
|
color: "text-green-500",
|
|
bg: "bg-green-50",
|
|
title: "Real ROI Tracking",
|
|
desc: "Stop guessing if your print ads work. Track every scan, location, and device to measure exactly what's driving value."
|
|
}
|
|
].map((feature, i) => (
|
|
<div key={i} className="group p-8 rounded-2xl bg-slate-50 border border-slate-100 hover:bg-white hover:shadow-xl hover:shadow-slate-200/50 hover:border-slate-200 transition-all duration-300">
|
|
<div className={`w-14 h-14 ${feature.bg} rounded-xl flex items-center justify-center mb-6 group-hover:scale-110 transition-transform duration-300`}>
|
|
<feature.icon className={`w-7 h-7 ${feature.color}`} />
|
|
</div>
|
|
<h3 className="text-xl font-bold text-slate-900 mb-3">{feature.title}</h3>
|
|
<p className="text-slate-600 leading-relaxed">
|
|
{feature.desc}
|
|
</p>
|
|
</div>
|
|
))}
|
|
</div>
|
|
</div>
|
|
</section>
|
|
</>
|
|
);
|
|
}
|