tknuth/QR-master
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

feat: add marketing landing pages and tools for dynamic QR codes and analytics

Browse Source
This commit is contained in:
Timo Knuth
2026-04-07 14:50:16 +02:00
parent 8408159a96
commit a6fd2ed61f
14 changed files with 1360 additions and 92 deletions
Download Patch File Download Diff File Expand all files Collapse all files

321
src/app/(main)/(marketing)/qr-code-print-size-guide/page.tsx Normal file
View File

@@ -0,0 +1,321 @@
import React from 'react';
import type { Metadata } from 'next';
import SeoJsonLd from '@/components/SeoJsonLd';
import { GrowthLinksSection } from '@/components/marketing/GrowthLinksSection';
import { breadcrumbSchema } from '@/lib/schema';
import Breadcrumbs from '@/components/Breadcrumbs';
export const metadata: Metadata = {
title: 'QR Code Print Size Guide: Minimum Sizes for Every Surface | QR Master',
description: 'The minimum QR code size for print depends on scan distance. This guide gives you exact dimensions for business cards, flyers, posters, and billboards.',
keywords: ['minimum qr code size', 'qr code print size', 'qr code size for print', 'how big should a qr code be', 'qr code dimensions'],
alternates: {
canonical: 'https://www.qrmaster.net/qr-code-print-size-guide',
},
openGraph: {
title: 'QR Code Print Size Guide | QR Master',
description: 'Exact QR code dimensions for every print surface — from business cards to billboards.',
type: 'article',
url: 'https://www.qrmaster.net/qr-code-print-size-guide',
},
robots: {
index: true,
follow: true,
},
};
const breadcrumbs = [
{ name: 'Home', url: '/' },
{ name: 'QR Code Print Size Guide', url: '/qr-code-print-size-guide' },
];
const articleSchema = {
'@context': 'https://schema.org',
'@type': 'Article',
'@id': 'https://www.qrmaster.net/qr-code-print-size-guide#article',
headline: 'QR Code Print Size Guide: Minimum Sizes for Every Surface',
description: 'The minimum QR code size for print depends on scan distance. This guide gives you exact dimensions for business cards, flyers, posters, and billboards.',
author: {
'@type': 'Organization',
name: 'QR Master',
url: 'https://www.qrmaster.net',
},
publisher: {
'@type': 'Organization',
name: 'QR Master',
url: 'https://www.qrmaster.net',
},
datePublished: '2026-04-07',
dateModified: '2026-04-07',
mainEntityOfPage: 'https://www.qrmaster.net/qr-code-print-size-guide',
};
const faqSchema = {
'@context': 'https://schema.org',
'@type': 'FAQPage',
mainEntity: [
{
'@type': 'Question',
name: 'What is the minimum size for a QR code to be scannable?',
acceptedAnswer: {
'@type': 'Answer',
text: 'The minimum recommended size is 2 × 2 cm (0.8 × 0.8 in) for QR codes scanned at very close range (under 10 cm), such as on business cards. For most print materials scanned at arm\'s length (30–40 cm), use at least 3 × 3 cm.',
},
},
{
'@type': 'Question',
name: 'What DPI should I use for printing a QR code?',
acceptedAnswer: {
'@type': 'Answer',
text: 'For print, export your QR code at a minimum of 300 DPI. For large-format printing (posters, banners), use the vector SVG format instead of PNG — SVG scales to any size without quality loss.',
},
},
{
'@type': 'Question',
name: 'How big should a QR code be on a poster?',
acceptedAnswer: {
'@type': 'Answer',
text: 'For an A2 poster (420 × 594 mm) viewed at 1–2 metres, use a QR code that is at least 8 × 8 cm. Larger is always better — a 10 × 10 cm code scans reliably from 2–3 metres away.',
},
},
{
'@type': 'Question',
name: 'How big should a QR code be on a business card?',
acceptedAnswer: {
'@type': 'Answer',
text: 'On a standard business card (85 × 55 mm), a QR code of 2 × 2 cm to 2.5 × 2.5 cm works reliably when held at normal reading distance (15–20 cm).',
},
},
{
'@type': 'Question',
name: 'Does adding a logo to a QR code affect scannability?',
acceptedAnswer: {
'@type': 'Answer',
text: 'Only if the logo covers more than about 30% of the QR code area. QR codes have built-in error correction. At "Q" (25%) or "H" (30%) error correction level, a logo is fine. Always test scan after adding a logo.',
},
},
],
};
const sizeData = [
{ surface: 'Business Card', scanDistance: '15–20 cm', minSize: '2 × 2 cm', recommended: '2.5 × 2.5 cm', dpi: '300 DPI PNG', format: 'PNG or SVG' },
{ surface: 'Flyer / Leaflet', scanDistance: '20–30 cm', minSize: '3 × 3 cm', recommended: '4 × 4 cm', dpi: '300 DPI PNG', format: 'PNG or SVG' },
{ surface: 'A4 Poster', scanDistance: '30–60 cm', minSize: '5 × 5 cm', recommended: '7 × 7 cm', dpi: '300 DPI PNG', format: 'SVG recommended' },
{ surface: 'A2 / A1 Poster', scanDistance: '1–2 m', minSize: '8 × 8 cm', recommended: '10 × 10 cm', dpi: '300 DPI', format: 'SVG required' },
{ surface: 'Window / Banner', scanDistance: '1–3 m', minSize: '10 × 10 cm', recommended: '15 × 15 cm', dpi: 'Vector only', format: 'SVG required' },
{ surface: 'Billboard', scanDistance: '3–10 m', minSize: '20 × 20 cm', recommended: '30 × 30 cm', dpi: 'Vector only', format: 'SVG required' },
];
export default function QRCodePrintSizeGuidePage() {
return (
<>
<SeoJsonLd data={[articleSchema, faqSchema, breadcrumbSchema(breadcrumbs)]} />
<div className="min-h-screen bg-white">
{/* HERO */}
<section className="pt-20 pb-12 bg-gradient-to-br from-slate-900 to-slate-700 text-white">
<div className="container mx-auto px-4 max-w-4xl">
<Breadcrumbs items={breadcrumbs} className="[&_ol]:text-white/70 [&_span.font-semibold]:text-white [&_a]:text-white/70 [&_span]:text-white/70" />
<div className="mt-6 inline-flex items-center gap-2 px-3 py-1 rounded-full bg-white/10 text-white/80 text-sm font-medium mb-6 border border-white/10">
Print Guide
</div>
<h1 className="text-4xl lg:text-5xl font-black mb-6 leading-tight">
QR Code Print Size Guide
</h1>
<p className="text-xl text-slate-300 max-w-2xl leading-relaxed mb-4">
The right QR code size depends on one thing: how far away will the scanner be?
This guide gives you exact minimum dimensions for every print surface.
</p>
<div className="bg-white/10 border border-white/20 rounded-xl p-4 mt-6 max-w-xl">
<p className="text-sm font-semibold text-white mb-1">Quick Rule of Thumb</p>
<p className="text-slate-300 text-sm">
QR code width = scan distance ÷ 10. Example: scanning from 30 cm → minimum 3 cm wide.
</p>
</div>
</div>
</section>
{/* SIZE TABLE */}
<section className="py-16 px-4 sm:px-6 lg:px-8">
<div className="max-w-5xl mx-auto">
<h2 className="text-2xl font-bold text-slate-900 mb-8">
Recommended Size by Print Surface and Scan Distance
</h2>
<div className="overflow-x-auto rounded-2xl border border-slate-200 shadow-sm">
<table className="w-full text-sm">
<thead>
<tr className="bg-slate-900 text-white">
<th className="px-5 py-4 text-left font-semibold">Surface</th>
<th className="px-5 py-4 text-left font-semibold">Scan Distance</th>
<th className="px-5 py-4 text-left font-semibold">Minimum Size</th>
<th className="px-5 py-4 text-left font-semibold">Recommended</th>
<th className="px-5 py-4 text-left font-semibold">Format</th>
</tr>
</thead>
<tbody>
{sizeData.map((row, i) => (
<tr key={row.surface} className={i % 2 === 0 ? 'bg-white' : 'bg-slate-50'}>
<td className="px-5 py-4 font-semibold text-slate-900">{row.surface}</td>
<td className="px-5 py-4 text-slate-600">{row.scanDistance}</td>
<td className="px-5 py-4 text-red-700 font-semibold">{row.minSize}</td>
<td className="px-5 py-4 text-green-700 font-semibold">{row.recommended}</td>
<td className="px-5 py-4 text-slate-600">{row.format}</td>
</tr>
))}
</tbody>
</table>
</div>
<p className="mt-4 text-xs text-slate-500">
Sizes are for QR codes with standard black-on-white contrast at error correction level Q or H. Reduce minimum sizes by 20% only in ideal lighting conditions.
</p>
</div>
</section>
{/* DPI & FORMAT GUIDE */}
<section className="py-16 px-4 sm:px-6 lg:px-8 bg-slate-50 border-y border-slate-200">
<div className="max-w-4xl mx-auto">
<h2 className="text-2xl font-bold text-slate-900 mb-8">DPI and Format Requirements</h2>
<div className="grid md:grid-cols-3 gap-6">
<div className="bg-white p-6 rounded-2xl border border-slate-100 shadow-sm">
<div className="w-10 h-10 rounded-xl bg-blue-100 flex items-center justify-center mb-4">
<span className="font-bold text-blue-700 text-sm">PNG</span>
</div>
<h3 className="font-bold text-slate-900 mb-2">PNG for Small Print</h3>
<p className="text-sm text-slate-600 leading-relaxed">
Use PNG at <strong>300 DPI minimum</strong> for business cards, flyers, and small posters. Export at 10× your target print size in pixels (e.g. 3 cm at 300 DPI = 354 px).
</p>
</div>
<div className="bg-white p-6 rounded-2xl border border-emerald-100 shadow-sm ring-1 ring-emerald-200">
<div className="w-10 h-10 rounded-xl bg-emerald-100 flex items-center justify-center mb-4">
<span className="font-bold text-emerald-700 text-sm">SVG</span>
</div>
<h3 className="font-bold text-slate-900 mb-2">SVG for Everything Larger</h3>
<p className="text-sm text-slate-600 leading-relaxed">
SVG is a vector format — it scales to any size without quality loss. Use SVG for all A2+ posters, banners, and billboards. QR Master exports SVG directly from the generator.
</p>
</div>
<div className="bg-white p-6 rounded-2xl border border-slate-100 shadow-sm">
<div className="w-10 h-10 rounded-xl bg-amber-100 flex items-center justify-center mb-4">
<span className="font-bold text-amber-700 text-sm">ECL</span>
</div>
<h3 className="font-bold text-slate-900 mb-2">Error Correction Level</h3>
<p className="text-sm text-slate-600 leading-relaxed">
Use <strong>Level Q</strong> (25% recovery) or <strong>Level H</strong> (30% recovery) for print — especially if you add a logo. Higher error correction means more modules and a slightly larger minimum size.
</p>
</div>
</div>
</div>
</section>
{/* PRINT CHECKLIST */}
<section className="py-16 px-4 sm:px-6 lg:px-8">
<div className="max-w-3xl mx-auto">
<h2 className="text-2xl font-bold text-slate-900 mb-8">Print QR Code Checklist</h2>
<ul className="space-y-3">
{[
'QR code is at least the minimum size for the intended scan distance',
'High contrast between QR modules and background (black on white preferred)',
'Quiet zone (white border) of at least 4 module widths on all sides',
'Exported as SVG for large format, PNG at 300+ DPI for small format',
'Scanned from target distance before sending to print',
'Error correction set to Q or H if a logo is embedded',
'Dynamic QR code used if the destination URL might change',
].map((item) => (
<li key={item} className="flex items-start gap-3">
<span className="mt-0.5 w-5 h-5 rounded-full bg-green-100 flex items-center justify-center shrink-0">
<svg className="w-3 h-3 text-green-600" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={3}>
<path strokeLinecap="round" strokeLinejoin="round" d="M5 13l4 4L19 7" />
</svg>
</span>
<span className="text-slate-700 text-sm leading-relaxed">{item}</span>
</li>
))}
</ul>
</div>
</section>
<GrowthLinksSection
eyebrow="Ready to print?"
title="Create your print-ready QR code"
description="Generate, customize, and download QR codes in SVG or PNG at any size you need."
links={[
{
href: '/reprint-calculator',
title: 'Reprint Cost Calculator',
description: 'Calculate how much static reprints are costing vs one dynamic QR subscription.',
ctaLabel: 'Calculate reprint savings',
},
{
href: '/dynamic-qr-code-generator',
title: 'Dynamic QR Code Generator',
description: 'Create QR codes you can update after printing. No reprint needed when links change.',
ctaLabel: 'Create dynamic QR code',
},
{
href: '/custom-qr-code-generator',
title: 'Custom QR Code Generator',
description: 'Add your logo, brand colors, and a frame to create print-ready branded QR codes.',
ctaLabel: 'Create custom QR code',
},
]}
pageType="commercial"
cluster="print-size-guide"
/>
{/* FAQ */}
<section className="py-16 px-4 sm:px-6 lg:px-8 bg-slate-50">
<div className="max-w-3xl mx-auto">
<h2 className="text-2xl font-bold text-slate-900 text-center mb-10">
Frequently Asked Questions
</h2>
<div className="space-y-4">
{[
{
question: 'What is the minimum size for a QR code to be scannable?',
answer: 'The absolute minimum is 2 × 2 cm for scanning at very close range (business cards, held 15 cm away). For most materials, use at least 3 × 3 cm. The general rule: minimum width = scan distance ÷ 10.',
},
{
question: 'What DPI should I use for printing a QR code?',
answer: 'Use 300 DPI minimum for all print. For large format (posters, banners, billboards), always use SVG — it is vector-based and scales to any size without quality loss.',
},
{
question: 'How big should a QR code be on a poster?',
answer: 'For an A2 poster viewed at 1–2 metres, use at least 8 × 8 cm. For A1 posters viewed from further away, 10 × 10 cm is recommended.',
},
{
question: 'How big should a QR code be on a business card?',
answer: 'On a standard business card (85 × 55 mm), a 2 × 2 cm to 2.5 × 2.5 cm QR code works reliably when scanned at normal reading distance.',
},
{
question: 'Does adding a logo affect QR code scannability?',
answer: 'Only if the logo covers more than ~30% of the QR area. Use error correction level Q or H when adding logos. Always test scan before printing at scale.',
},
].map((item) => (
<details key={item.question} className="group bg-white rounded-xl shadow-sm border border-slate-200 overflow-hidden">
<summary className="flex items-center justify-between p-5 cursor-pointer list-none text-slate-900 font-semibold hover:bg-slate-50 transition-colors">
{item.question}
<span className="transition group-open:rotate-180 text-slate-400">
<svg fill="none" height="20" stroke="currentColor" strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" viewBox="0 0 24 24" width="20">
<path d="M6 9l6 6 6-6" />
</svg>
</span>
</summary>
<div className="text-slate-600 px-5 pb-5 pt-0 leading-relaxed text-sm">
{item.answer}
</div>
</details>
))}
</div>
</div>
</section>
</div>
</>
);
}