Lead Magnet
This commit is contained in:
Timo Knuth
@@ -641,26 +641,35 @@ Product C,https://example.com/product-c,Budget Widget,electronics,sale`}
|
||||
</section>
|
||||
|
||||
{/* CTA Section */}
|
||||
<section className="py-20 bg-gradient-to-r from-green-600 to-blue-600 text-white">
|
||||
<div className="container mx-auto px-4 sm:px-6 lg:px-8 max-w-4xl text-center">
|
||||
<h2 className="text-4xl font-bold mb-6">
|
||||
Generate 1000s of QR Codes in Minutes
|
||||
{/* CTA Section */}
|
||||
<section className="py-24 bg-slate-900 relative overflow-hidden">
|
||||
{/* Background Decorations */}
|
||||
<div className="absolute top-0 right-0 -mr-20 -mt-20 w-96 h-96 bg-blue-500/20 rounded-full blur-3xl opacity-50" />
|
||||
<div className="absolute bottom-0 left-0 -ml-20 -mb-20 w-80 h-80 bg-green-500/20 rounded-full blur-3xl opacity-50" />
|
||||
|
||||
<div className="container mx-auto px-4 sm:px-6 lg:px-8 max-w-4xl text-center relative z-10">
|
||||
<h2 className="text-4xl lg:text-5xl font-bold mb-6 text-white tracking-tight">
|
||||
Ready to Generate <span className="text-transparent bg-clip-text bg-gradient-to-r from-green-400 to-blue-400">1000s of Codes?</span>
|
||||
</h2>
|
||||
<p className="text-xl mb-8 text-green-100">
|
||||
Save hours of manual work. Upload your file and get all QR codes ready instantly.
|
||||
<p className="text-xl mb-10 text-slate-300 leading-relaxed max-w-2xl mx-auto">
|
||||
Stop doing it manually. Upload your Excel file and get your QR codes in seconds. Professional, branded, and trackable.
|
||||
</p>
|
||||
<div className="flex flex-col sm:flex-row gap-4 justify-center">
|
||||
<div className="flex flex-col sm:flex-row gap-5 justify-center">
|
||||
<Link href="/signup">
|
||||
<Button size="lg" variant="secondary" className="text-lg px-8 py-4 w-full sm:w-auto bg-white text-green-600 hover:bg-gray-100">
|
||||
<Button size="lg" className="text-lg px-8 py-6 h-auto w-full sm:w-auto bg-white text-slate-900 hover:bg-slate-50 font-bold shadow-xl shadow-blue-900/20 transition-all hover:-translate-y-1">
|
||||
Start Bulk Generation
|
||||
</Button>
|
||||
</Link>
|
||||
<Link href="/pricing">
|
||||
<Button size="lg" variant="outline" className="text-lg px-8 py-4 w-full sm:w-auto border-white text-white hover:bg-white/10">
|
||||
<Button size="lg" variant="outline" className="text-lg px-8 py-6 h-auto w-full sm:w-auto border-slate-700 text-white hover:bg-slate-800 hover:border-slate-600 transition-all">
|
||||
View Pricing
|
||||
</Button>
|
||||
</Link>
|
||||
</div>
|
||||
|
||||
<p className="mt-8 text-sm text-slate-500">
|
||||
No credit card required for free trial.
|
||||
</p>
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
|
||||
@@ -20,6 +20,8 @@ import {
|
||||
Zap,
|
||||
Send,
|
||||
CheckCircle2,
|
||||
FileDown,
|
||||
DollarSign,
|
||||
} from 'lucide-react';
|
||||
|
||||
interface AdminStats {
|
||||
@@ -81,6 +83,20 @@ export default function NewsletterClient() {
|
||||
message: string;
|
||||
} | null>(null);
|
||||
|
||||
// Lead management state
|
||||
const [leadData, setLeadData] = useState<{
|
||||
total: number;
|
||||
recent: Array<{
|
||||
id: string;
|
||||
email: string;
|
||||
source: string;
|
||||
reprintCost: number | null;
|
||||
updatesPerYear: number | null;
|
||||
annualSavings: number | null;
|
||||
createdAt: string;
|
||||
}>;
|
||||
} | null>(null);
|
||||
|
||||
useEffect(() => {
|
||||
checkAuth();
|
||||
}, []);
|
||||
@@ -93,8 +109,9 @@ export default function NewsletterClient() {
|
||||
const data = await response.json();
|
||||
setStats(data);
|
||||
setLoading(false);
|
||||
// Also fetch newsletter data
|
||||
// Also fetch newsletter and lead data
|
||||
fetchNewsletterData();
|
||||
fetchLeadsData();
|
||||
} else {
|
||||
setIsAuthenticated(false);
|
||||
}
|
||||
@@ -117,6 +134,18 @@ export default function NewsletterClient() {
|
||||
}
|
||||
};
|
||||
|
||||
const fetchLeadsData = async () => {
|
||||
try {
|
||||
const response = await fetch('/api/leads');
|
||||
if (response.ok) {
|
||||
const data = await response.json();
|
||||
setLeadData(data);
|
||||
}
|
||||
} catch (error) {
|
||||
console.error('Failed to fetch leads data:', error);
|
||||
}
|
||||
};
|
||||
|
||||
const handleSendBroadcast = async () => {
|
||||
if (!confirm(`Are you sure you want to send the AI Feature Launch email to all ${newsletterData?.total || 0} subscribers?`)) {
|
||||
return;
|
||||
@@ -641,6 +670,84 @@ export default function NewsletterClient() {
|
||||
</div>
|
||||
</Card>
|
||||
</div>
|
||||
|
||||
{/* Lead Management Section */}
|
||||
<div className="mt-8">
|
||||
<Card className="p-6">
|
||||
<div className="flex items-center gap-3 mb-6">
|
||||
<div className="w-10 h-10 bg-gradient-to-br from-emerald-100 to-teal-100 dark:from-emerald-900/30 dark:to-teal-900/30 rounded-lg flex items-center justify-center">
|
||||
<FileDown className="w-5 h-5 text-emerald-600 dark:text-emerald-400" />
|
||||
</div>
|
||||
<div className="flex-1">
|
||||
<h3 className="font-semibold text-lg">Lead Management</h3>
|
||||
<p className="text-xs text-muted-foreground">Reprint Calculator PDF downloads</p>
|
||||
</div>
|
||||
<div className="text-right">
|
||||
<span className="text-2xl font-bold">{leadData?.total || 0}</span>
|
||||
<p className="text-xs text-muted-foreground">Total Leads</p>
|
||||
</div>
|
||||
<Badge className="bg-emerald-100 text-emerald-700 dark:bg-emerald-900/30 dark:text-emerald-300">
|
||||
Active
|
||||
</Badge>
|
||||
</div>
|
||||
|
||||
{/* Recent Leads */}
|
||||
<div>
|
||||
<h4 className="font-medium mb-3">Recent Leads</h4>
|
||||
{leadData?.recent && leadData.recent.length > 0 ? (
|
||||
<div className="space-y-2">
|
||||
{leadData.recent.map((lead) => (
|
||||
<div
|
||||
key={lead.id}
|
||||
className="flex items-center justify-between py-3 px-4 border border-border rounded-lg bg-gray-50/50 dark:bg-gray-900/30"
|
||||
>
|
||||
<div className="flex items-center gap-3 flex-1 min-w-0">
|
||||
<Mail className="w-4 h-4 text-muted-foreground flex-shrink-0" />
|
||||
<div className="min-w-0">
|
||||
<span className="text-sm font-medium block truncate">{lead.email}</span>
|
||||
{lead.annualSavings && (
|
||||
<span className="text-xs text-emerald-600 flex items-center gap-1">
|
||||
<DollarSign className="w-3 h-3" />
|
||||
€{lead.annualSavings.toLocaleString()} potential savings
|
||||
</span>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
<div className="text-right flex-shrink-0 ml-4">
|
||||
<span className="text-xs text-muted-foreground block">
|
||||
{new Date(lead.createdAt).toLocaleDateString()}
|
||||
</span>
|
||||
{lead.reprintCost && lead.updatesPerYear && (
|
||||
<span className="text-xs text-slate-500">
|
||||
€{lead.reprintCost} × {lead.updatesPerYear}/yr
|
||||
</span>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
) : (
|
||||
<p className="text-sm text-muted-foreground">No leads yet. Leads appear when users download a PDF report from the Reprint Calculator.</p>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{/* Tip */}
|
||||
<div className="mt-4 pt-4 border-t">
|
||||
<p className="text-xs text-muted-foreground">
|
||||
💡 Tip: View all leads in{' '}
|
||||
<a
|
||||
href="http://localhost:5555"
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
className="text-emerald-600 dark:text-emerald-400 hover:underline"
|
||||
>
|
||||
Prisma Studio
|
||||
</a>
|
||||
{' '}(Lead table)
|
||||
</p>
|
||||
</div>
|
||||
</Card>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
|
||||
@@ -378,26 +378,35 @@ export default function QRCodeTrackingPage() {
|
||||
</section>
|
||||
|
||||
{/* CTA Section */}
|
||||
<section className="py-20 bg-gradient-to-r from-primary-600 to-purple-600 text-white">
|
||||
<div className="container mx-auto px-4 sm:px-6 lg:px-8 max-w-4xl text-center">
|
||||
<h2 className="text-4xl font-bold mb-6">
|
||||
Start Tracking Your QR Codes Today
|
||||
{/* CTA Section */}
|
||||
<section className="py-24 bg-slate-900 relative overflow-hidden">
|
||||
{/* Background Decorations */}
|
||||
<div className="absolute top-0 right-0 -mr-20 -mt-20 w-96 h-96 bg-primary-500/20 rounded-full blur-3xl opacity-50" />
|
||||
<div className="absolute bottom-0 left-0 -ml-20 -mb-20 w-80 h-80 bg-purple-500/20 rounded-full blur-3xl opacity-50" />
|
||||
|
||||
<div className="container mx-auto px-4 sm:px-6 lg:px-8 max-w-4xl text-center relative z-10">
|
||||
<h2 className="text-4xl lg:text-5xl font-bold mb-6 text-white tracking-tight">
|
||||
Start Tracking Your <span className="text-transparent bg-clip-text bg-gradient-to-r from-primary-400 to-purple-400">QR Codes Today</span>
|
||||
</h2>
|
||||
<p className="text-xl mb-8 text-primary-100">
|
||||
Join thousands of businesses using QR Master to track and optimize their QR code campaigns
|
||||
<p className="text-xl mb-10 text-slate-300 leading-relaxed max-w-2xl mx-auto">
|
||||
Join thousands of businesses using QR Master to optimize their campaigns with real-time analytics.
|
||||
</p>
|
||||
<div className="flex flex-col sm:flex-row gap-4 justify-center">
|
||||
<div className="flex flex-col sm:flex-row gap-5 justify-center">
|
||||
<Link href="/signup">
|
||||
<Button size="lg" variant="secondary" className="text-lg px-8 py-4 w-full sm:w-auto bg-white text-primary-600 hover:bg-gray-100">
|
||||
<Button size="lg" className="text-lg px-8 py-6 h-auto w-full sm:w-auto bg-white text-slate-900 hover:bg-slate-50 font-bold shadow-xl shadow-primary-900/20 transition-all hover:-translate-y-1">
|
||||
Create Free Account
|
||||
</Button>
|
||||
</Link>
|
||||
<Link href="/pricing">
|
||||
<Button size="lg" variant="outline" className="text-lg px-8 py-4 w-full sm:w-auto border-white text-white hover:bg-white/10">
|
||||
<Button size="lg" variant="outline" className="text-lg px-8 py-6 h-auto w-full sm:w-auto border-slate-700 text-white hover:bg-slate-800 hover:border-slate-600 transition-all">
|
||||
View Pricing
|
||||
</Button>
|
||||
</Link>
|
||||
</div>
|
||||
|
||||
<p className="mt-8 text-sm text-slate-500">
|
||||
Full analytics accessible on free plan.
|
||||
</p>
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
|
||||
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