Lead Magnet
This commit is contained in:
Timo Knuth
117
src/app/(marketing)/reprint-calculator/page.tsx
Normal file
117
src/app/(marketing)/reprint-calculator/page.tsx
Normal file
@@ -0,0 +1,117 @@
|
||||
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>
|
||||
</>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user