SEO
This commit is contained in:
Timo Knuth
File diff suppressed because it is too large
Load Diff
File diff suppressed because it is too large
Load Diff
@@ -1,234 +1,243 @@
|
||||
import React from 'react';
|
||||
import type { Metadata } from 'next';
|
||||
import SeoJsonLd from '@/components/SeoJsonLd';
|
||||
import { faqPageSchema } from '@/lib/schema';
|
||||
import { Card, CardContent } from '@/components/ui/Card';
|
||||
import { ObfuscatedMailto } from '@/components/ui/ObfuscatedMailto';
|
||||
|
||||
function truncateAtWord(text: string, maxLength: number): string {
|
||||
if (text.length <= maxLength) return text;
|
||||
const truncated = text.slice(0, maxLength);
|
||||
const lastSpace = truncated.lastIndexOf(' ');
|
||||
return lastSpace > 0 ? truncated.slice(0, lastSpace) : truncated;
|
||||
}
|
||||
|
||||
export async function generateMetadata(): Promise<Metadata> {
|
||||
const title = truncateAtWord('QR Master FAQ: Dynamic & Bulk QR', 60);
|
||||
const description = truncateAtWord(
|
||||
'All answers: dynamic QR, security, analytics, bulk, events & print.',
|
||||
160
|
||||
);
|
||||
|
||||
return {
|
||||
title,
|
||||
description,
|
||||
alternates: {
|
||||
canonical: 'https://www.qrmaster.net/faq',
|
||||
languages: {
|
||||
'x-default': 'https://www.qrmaster.net/faq',
|
||||
en: 'https://www.qrmaster.net/faq',
|
||||
},
|
||||
},
|
||||
openGraph: {
|
||||
title,
|
||||
description,
|
||||
url: 'https://www.qrmaster.net/faq',
|
||||
type: 'website',
|
||||
images: [
|
||||
{
|
||||
url: 'https://www.qrmaster.net/og-image.png',
|
||||
width: 1200,
|
||||
height: 630,
|
||||
alt: 'QR Master - Dynamic QR Code Generator and Analytics Platform',
|
||||
},
|
||||
],
|
||||
|
||||
},
|
||||
twitter: {
|
||||
title,
|
||||
description,
|
||||
},
|
||||
};
|
||||
}
|
||||
|
||||
import Link from 'next/link';
|
||||
|
||||
// Extended type for UI with Rich Text support
|
||||
type FAQItemWithRichText = {
|
||||
question: string;
|
||||
answer: string; // Plain text for Schema
|
||||
answerRich?: React.ReactNode; // JSX for UI
|
||||
};
|
||||
|
||||
const faqs: FAQItemWithRichText[] = [
|
||||
{
|
||||
question: 'What is a dynamic QR code?',
|
||||
answer: 'A dynamic QR code points to a redirect URL, so you can change the final destination later without reprinting. Key benefits: Update the destination anytime, Track scans (time, device, location), Pause/disable campaigns.',
|
||||
answerRich: (
|
||||
<>
|
||||
A dynamic QR code points to a redirect URL, so you can change the final destination later without reprinting.
|
||||
<br /><br />
|
||||
<strong>Key benefits:</strong>
|
||||
<ul className="list-disc pl-5 mt-2 space-y-1">
|
||||
<li>Update the destination anytime</li>
|
||||
<li>Track scans (time, device, location) via <Link href="/guide/tracking-analytics" className="text-blue-600 hover:underline">Analytics</Link></li>
|
||||
<li>Pause/disable campaigns without changing the printed code</li>
|
||||
</ul>
|
||||
</>
|
||||
),
|
||||
},
|
||||
{
|
||||
question: 'How do I track QR scans?',
|
||||
answer: 'QR Master tracks scan events in real-time via the short URL redirect. Metrics included: Total and unique scans, Device type, Geographic location, and Time of day.',
|
||||
answerRich: (
|
||||
<>
|
||||
QR Master tracks scan events in real-time via the short URL redirect.
|
||||
<br /><br />
|
||||
<strong>Metrics included:</strong>
|
||||
<ul className="list-disc pl-5 mt-2 space-y-1">
|
||||
<li>Total and unique scans</li>
|
||||
<li>Device type (iOS, Android, Desktop)</li>
|
||||
<li>Geographic location (Country, City)</li>
|
||||
<li>Time of day</li>
|
||||
</ul>
|
||||
<br />
|
||||
<Link href="/qr-code-tracking" className="text-blue-600 hover:underline font-medium">Learn more about Tracking →</Link>
|
||||
</>
|
||||
),
|
||||
},
|
||||
{
|
||||
question: 'What security measures are in place?',
|
||||
answer: 'We prioritize data security through standard industry practices. Security features: HTTPS/TLS encryption, Automated link validation, and Rate limiting.',
|
||||
answerRich: (
|
||||
<>
|
||||
We prioritize data security through standard industry practices.
|
||||
<br /><br />
|
||||
<strong>Security features:</strong>
|
||||
<ul className="list-disc pl-5 mt-2 space-y-1">
|
||||
<li>HTTPS/TLS encryption for all connections</li>
|
||||
<li>Automated link validation to prevent malicious redirects</li>
|
||||
<li>Rate limiting to prevent abuse</li>
|
||||
</ul>
|
||||
</>
|
||||
),
|
||||
},
|
||||
{
|
||||
question: 'Bulk QR codes: Print, Marketing, and API?',
|
||||
answer: 'You can generate thousands of codes via CSV upload or API for scalable campaigns. Features: CSV Upload (1,000+ codes), Customization, and API access.',
|
||||
answerRich: (
|
||||
<>
|
||||
You can generate thousands of codes via CSV upload or API for scalable campaigns.
|
||||
<br /><br />
|
||||
<strong>Features:</strong>
|
||||
<ul className="list-disc pl-5 mt-2 space-y-1">
|
||||
<li><strong>CSV Upload:</strong> Create up to 1,000 codes at once (<Link href="/bulk-qr-code-generator" className="text-blue-600 hover:underline">Bulk Generator</Link>)</li>
|
||||
<li><strong>Customization:</strong> Apply branding to all batch codes</li>
|
||||
<li><strong>API:</strong> Programmatic generation for internal systems</li>
|
||||
</ul>
|
||||
</>
|
||||
),
|
||||
},
|
||||
{
|
||||
question: 'What are the best practices for printing QR codes?',
|
||||
answer: 'Ensure high scannability by following these rules: Minimum size 2x2 cm, High contrast (dark on light), Vector formats (SVG/EPS) for large print, and maintain a quiet zone border.',
|
||||
answerRich: (
|
||||
<>
|
||||
Ensure high scannability by following these rules:
|
||||
<br /><br />
|
||||
<strong>Print Guidelines:</strong>
|
||||
<ul className="list-disc pl-5 mt-2 space-y-1">
|
||||
<li><strong>Size:</strong> Minimum 2x2 cm (0.8x0.8 inch) for close range</li>
|
||||
<li><strong>Format:</strong> Use <span className="font-semibold">SVG/EPS</span> (Vector) for professional print quality</li>
|
||||
<li><strong>Contrast:</strong> Always use dark foreground on light background</li>
|
||||
<li><strong>Quiet Zone:</strong> Leave a margin around the code</li>
|
||||
</ul>
|
||||
</>
|
||||
),
|
||||
},
|
||||
{
|
||||
question: 'Is the service GDPR aligned?',
|
||||
answer: 'Yes, we minimize data collection to ensure privacy compliance. Privacy measures: IP anonymization, No PII storage, and EU-based servers.',
|
||||
answerRich: (
|
||||
<>
|
||||
Yes, we minimize data collection to ensure privacy compliance.
|
||||
<br /><br />
|
||||
<strong>Privacy measures:</strong>
|
||||
<ul className="list-disc pl-5 mt-2 space-y-1">
|
||||
<li>IP addresses are anonymized or hashed</li>
|
||||
<li>No personal data (PII) is stored from scanners</li>
|
||||
<li>Servers located in EU regions (for EU customers)</li>
|
||||
</ul>
|
||||
<br />
|
||||
<Link href="/privacy" className="text-blue-600 hover:underline font-medium">Read Privacy Policy →</Link>
|
||||
</>
|
||||
),
|
||||
},
|
||||
{
|
||||
question: 'Dynamic vs Static QR Codes?',
|
||||
answer: 'Static codes are fixed forever; Dynamic codes can be edited and tracked. Comparison: Static (free, permanent, no tracking) vs Dynamic (editable, analytics, campaign logic).',
|
||||
answerRich: (
|
||||
<>
|
||||
Static codes are fixed forever; Dynamic codes can be edited and tracked.
|
||||
<br /><br />
|
||||
<strong>Comparison:</strong>
|
||||
<ul className="list-disc pl-5 mt-2 space-y-1">
|
||||
<li><strong>Static:</strong> content embedded directly, no tracking, free forever</li>
|
||||
<li><strong>Dynamic:</strong> redirect link, editable destination, scan analytics</li>
|
||||
</ul>
|
||||
<br />
|
||||
<Link href="/dynamic-qr-code-generator" className="text-blue-600 hover:underline font-medium">Create Dynamic QR →</Link>
|
||||
</>
|
||||
),
|
||||
},
|
||||
];
|
||||
|
||||
export default function FAQPage() {
|
||||
return (
|
||||
<>
|
||||
<SeoJsonLd data={faqPageSchema(faqs.map(({ question, answer }) => ({ question, answer })))} />
|
||||
<div className="py-20 bg-gradient-to-b from-gray-50 to-white">
|
||||
<div className="container mx-auto px-4">
|
||||
<div className="max-w-4xl mx-auto">
|
||||
<div className="text-center mb-16">
|
||||
<h1 className="text-4xl lg:text-5xl font-bold text-gray-900 mb-6">
|
||||
Frequently Asked Questions
|
||||
</h1>
|
||||
<p className="text-xl text-gray-600 mb-4">
|
||||
Everything you need to know about dynamic QR codes, security, analytics, bulk generation, events, and print quality.
|
||||
</p>
|
||||
<p className="text-sm text-gray-500">
|
||||
Last updated: January 25, 2025
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div className="space-y-6">
|
||||
{faqs.map((faq, index) => (
|
||||
<Card key={index} className="border-l-4 border-blue-500">
|
||||
<CardContent className="p-8">
|
||||
<h2 className="text-2xl font-semibold mb-4 text-gray-900">
|
||||
{faq.question}
|
||||
</h2>
|
||||
<div className="text-lg text-gray-700 leading-relaxed">
|
||||
{faq.answerRich || faq.answer}
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
))}
|
||||
</div>
|
||||
|
||||
<div className="mt-16 bg-blue-50 border-l-4 border-blue-500 p-8 rounded-r-lg">
|
||||
<h2 className="text-2xl font-bold mb-4 text-gray-900">
|
||||
Still have questions?
|
||||
</h2>
|
||||
<p className="text-lg text-gray-700 mb-6 leading-relaxed">
|
||||
Our support team is here to help. Contact us at{' '}
|
||||
<ObfuscatedMailto email="support@qrmaster.net" className="text-blue-600 hover:text-blue-700 font-semibold" />{' '}
|
||||
or reach out through our live chat.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</>
|
||||
);
|
||||
}
|
||||
import React from 'react';
|
||||
import type { Metadata } from 'next';
|
||||
import Link from 'next/link';
|
||||
import SeoJsonLd from '@/components/SeoJsonLd';
|
||||
import { faqPageSchema } from '@/lib/schema';
|
||||
import { Card, CardContent } from '@/components/ui/Card';
|
||||
import { ObfuscatedMailto } from '@/components/ui/ObfuscatedMailto';
|
||||
|
||||
function truncateAtWord(text: string, maxLength: number): string {
|
||||
if (text.length <= maxLength) return text;
|
||||
const truncated = text.slice(0, maxLength);
|
||||
const lastSpace = truncated.lastIndexOf(' ');
|
||||
return lastSpace > 0 ? truncated.slice(0, lastSpace) : truncated;
|
||||
}
|
||||
|
||||
export async function generateMetadata(): Promise<Metadata> {
|
||||
const title = truncateAtWord('QR Master FAQ: Dynamic, Tracking, Bulk, and Print', 60);
|
||||
const description = truncateAtWord(
|
||||
'Answers about dynamic QR codes, scan tracking, privacy, bulk creation, and print setup.',
|
||||
160
|
||||
);
|
||||
|
||||
return {
|
||||
title,
|
||||
description,
|
||||
alternates: {
|
||||
canonical: 'https://www.qrmaster.net/faq',
|
||||
languages: {
|
||||
'x-default': 'https://www.qrmaster.net/faq',
|
||||
en: 'https://www.qrmaster.net/faq',
|
||||
},
|
||||
},
|
||||
openGraph: {
|
||||
title,
|
||||
description,
|
||||
url: 'https://www.qrmaster.net/faq',
|
||||
type: 'website',
|
||||
images: [
|
||||
{
|
||||
url: 'https://www.qrmaster.net/og-image.png',
|
||||
width: 1200,
|
||||
height: 630,
|
||||
alt: 'QR Master FAQ',
|
||||
},
|
||||
],
|
||||
},
|
||||
twitter: {
|
||||
title,
|
||||
description,
|
||||
},
|
||||
};
|
||||
}
|
||||
|
||||
type FAQItemWithRichText = {
|
||||
question: string;
|
||||
answer: string;
|
||||
answerRich?: React.ReactNode;
|
||||
};
|
||||
|
||||
const faqs: FAQItemWithRichText[] = [
|
||||
{
|
||||
question: 'What is a dynamic QR code?',
|
||||
answer:
|
||||
'A dynamic QR code points to a redirect URL, so you can change the final destination later without replacing the printed QR image.',
|
||||
answerRich: (
|
||||
<>
|
||||
A dynamic QR code points to a redirect URL, so you can change the final destination later without replacing the printed QR image.
|
||||
<br />
|
||||
<br />
|
||||
<strong>Why teams use it:</strong>
|
||||
<ul className="mt-2 list-disc space-y-1 pl-5">
|
||||
<li>Update the destination after print</li>
|
||||
<li>Review scan analytics later</li>
|
||||
<li>Keep one printed QR in use across changing campaigns or content</li>
|
||||
</ul>
|
||||
</>
|
||||
),
|
||||
},
|
||||
{
|
||||
question: 'How do I track QR scans?',
|
||||
answer:
|
||||
'QR Master tracks scans through the dynamic QR redirect step. The analytics views can report time, device, location context, and total or unique scan activity.',
|
||||
answerRich: (
|
||||
<>
|
||||
QR Master tracks scans through the dynamic QR redirect step.
|
||||
<br />
|
||||
<br />
|
||||
<strong>Current analytics context:</strong>
|
||||
<ul className="mt-2 list-disc space-y-1 pl-5">
|
||||
<li>Total and unique scan reporting</li>
|
||||
<li>Device type</li>
|
||||
<li>Location context</li>
|
||||
<li>Time-based scan activity</li>
|
||||
</ul>
|
||||
<br />
|
||||
<Link href="/qr-code-tracking" className="font-medium text-blue-600 hover:underline">
|
||||
Learn more about tracking
|
||||
</Link>
|
||||
</>
|
||||
),
|
||||
},
|
||||
{
|
||||
question: 'What security measures are in place?',
|
||||
answer:
|
||||
'QR Master uses HTTPS/TLS, CSRF protection for relevant write actions, and rate limiting on API routes.',
|
||||
answerRich: (
|
||||
<>
|
||||
QR Master uses standard protective controls that are visible in the current codebase.
|
||||
<br />
|
||||
<br />
|
||||
<strong>Security-related controls:</strong>
|
||||
<ul className="mt-2 list-disc space-y-1 pl-5">
|
||||
<li>HTTPS/TLS encryption for all connections</li>
|
||||
<li>CSRF protection for relevant write actions</li>
|
||||
<li>Rate limiting on API routes</li>
|
||||
</ul>
|
||||
</>
|
||||
),
|
||||
},
|
||||
{
|
||||
question: 'How does bulk QR creation work today?',
|
||||
answer:
|
||||
'QR Master currently supports bulk QR creation through spreadsheet upload in the Business plan. The flow accepts CSV, XLS, and XLSX files, supports up to 1,000 rows per upload, and generates static QR codes.',
|
||||
answerRich: (
|
||||
<>
|
||||
QR Master currently supports bulk QR creation through spreadsheet upload in the Business plan.
|
||||
<br />
|
||||
<br />
|
||||
<strong>Current bulk flow facts:</strong>
|
||||
<ul className="mt-2 list-disc space-y-1 pl-5">
|
||||
<li>CSV, XLS, and XLSX uploads are supported</li>
|
||||
<li>Up to 1,000 rows per upload</li>
|
||||
<li>Output is static QR codes, not dynamic tracking batches</li>
|
||||
</ul>
|
||||
<br />
|
||||
<Link href="/bulk-qr-code-generator" className="font-medium text-blue-600 hover:underline">
|
||||
See the bulk QR workflow
|
||||
</Link>
|
||||
</>
|
||||
),
|
||||
},
|
||||
{
|
||||
question: 'What are the best practices for printing QR codes?',
|
||||
answer:
|
||||
'For reliable scanning, keep the QR code at least 2x2 cm for close-range use, maintain strong contrast, leave a quiet zone around the code, and use SVG or a high-resolution PNG for output.',
|
||||
answerRich: (
|
||||
<>
|
||||
For reliable scanning, follow these print-first basics:
|
||||
<br />
|
||||
<br />
|
||||
<ul className="mt-2 list-disc space-y-1 pl-5">
|
||||
<li>Minimum size around 2x2 cm for close-range scans</li>
|
||||
<li>Dark foreground on a light background</li>
|
||||
<li>Leave a quiet zone around the QR code</li>
|
||||
<li>Use SVG or a high-resolution PNG depending on the print workflow</li>
|
||||
</ul>
|
||||
</>
|
||||
),
|
||||
},
|
||||
{
|
||||
question: 'Is the service privacy-conscious?',
|
||||
answer:
|
||||
'QR Master minimizes scanner data collection. Privacy-related measures visible in the product context include hashed or anonymized IP handling and no scanner PII storage.',
|
||||
answerRich: (
|
||||
<>
|
||||
QR Master is built around minimal scanner data collection.
|
||||
<br />
|
||||
<br />
|
||||
<strong>Privacy-related measures:</strong>
|
||||
<ul className="mt-2 list-disc space-y-1 pl-5">
|
||||
<li>IP addresses are anonymized or hashed</li>
|
||||
<li>No scanner PII storage</li>
|
||||
</ul>
|
||||
<br />
|
||||
<Link href="/privacy" className="font-medium text-blue-600 hover:underline">
|
||||
Read the privacy policy
|
||||
</Link>
|
||||
</>
|
||||
),
|
||||
},
|
||||
{
|
||||
question: 'What is the difference between static and dynamic QR codes?',
|
||||
answer:
|
||||
'Static QR codes store the destination directly in the image and stay fixed. Dynamic QR codes route through QR Master so the destination can be changed later and scan analytics can be reviewed.',
|
||||
answerRich: (
|
||||
<>
|
||||
Static QR codes store the destination directly in the image and stay fixed.
|
||||
Dynamic QR codes route through QR Master so the destination can be changed later and scan analytics can be reviewed.
|
||||
<br />
|
||||
<br />
|
||||
<Link href="/dynamic-qr-code-generator" className="font-medium text-blue-600 hover:underline">
|
||||
Create a dynamic QR code
|
||||
</Link>
|
||||
</>
|
||||
),
|
||||
},
|
||||
];
|
||||
|
||||
export default function FAQPage() {
|
||||
return (
|
||||
<>
|
||||
<SeoJsonLd data={faqPageSchema(faqs.map(({ question, answer }) => ({ question, answer })))} />
|
||||
<div className="bg-gradient-to-b from-gray-50 to-white py-20">
|
||||
<div className="container mx-auto px-4">
|
||||
<div className="mx-auto max-w-4xl">
|
||||
<div className="mb-16 text-center">
|
||||
<h1 className="mb-6 text-4xl font-bold text-gray-900 lg:text-5xl">
|
||||
Frequently Asked Questions
|
||||
</h1>
|
||||
<p className="mb-4 text-xl text-gray-600">
|
||||
Answers about dynamic QR codes, scan tracking, privacy, bulk creation, and print setup.
|
||||
</p>
|
||||
<p className="text-sm text-gray-500">Last updated: March 12, 2026</p>
|
||||
</div>
|
||||
|
||||
<div className="space-y-6">
|
||||
{faqs.map((faq) => (
|
||||
<Card key={faq.question} className="border-l-4 border-blue-500">
|
||||
<CardContent className="p-8">
|
||||
<h2 className="mb-4 text-2xl font-semibold text-gray-900">{faq.question}</h2>
|
||||
<div className="text-lg leading-relaxed text-gray-700">{faq.answerRich || faq.answer}</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
))}
|
||||
</div>
|
||||
|
||||
<div className="mt-16 rounded-r-lg border-l-4 border-blue-500 bg-blue-50 p-8">
|
||||
<h2 className="mb-4 text-2xl font-bold text-gray-900">Still have questions?</h2>
|
||||
<p className="text-lg leading-relaxed text-gray-700">
|
||||
Our support team is here to help. Contact us at{' '}
|
||||
<ObfuscatedMailto
|
||||
email="support@qrmaster.net"
|
||||
className="font-semibold text-blue-600 hover:text-blue-700"
|
||||
/>{' '}
|
||||
and include the workflow you are trying to build.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
||||
File diff suppressed because it is too large
Load Diff
@@ -25,12 +25,12 @@ export default function PressPage() {
|
||||
title: "qrmaster.net Launches Free, Professional QR Code Generator for Global Users",
|
||||
date: "February 05, 2026",
|
||||
excerpt: "qrmaster.net unveils a new intuitive platform allowing businesses and individuals to create customized, high-resolution QR codes instantly. The tool removes technical barriers and subscription costs, simplifying digital connectivity for everyone.",
|
||||
bullets: [
|
||||
"Advanced customization options (colors, shapes, logos)",
|
||||
"No hidden fees or mandatory subscriptions",
|
||||
"High-resolution vector downloads (SVG, EPS, PDF)",
|
||||
"Privacy-focused with no data selling"
|
||||
],
|
||||
bullets: [
|
||||
"Advanced customization options (colors, shapes, logos)",
|
||||
"No hidden fees or mandatory subscriptions",
|
||||
"High-resolution downloads for print workflows",
|
||||
"Privacy-focused with no data selling"
|
||||
],
|
||||
link: "https://www.1888pressrelease.com/qrmaster-net-launches-free-professional-qr-code-generator-f-pr-762219.html",
|
||||
source: "1888PressRelease"
|
||||
},
|
||||
@@ -39,12 +39,12 @@ export default function PressPage() {
|
||||
title: "QR Master Launches Free QR Code and Barcode Tools With Tracking, UTMs, and Business-Ready Templates for 2026",
|
||||
date: "February 04, 2026",
|
||||
excerpt: "QR Master announces the launch of its comprehensive suite of free QR code and barcode generation tools, featuring advanced tracking capabilities, UTM builder integration, and professional business-ready templates.",
|
||||
bullets: [
|
||||
"Free QR code and barcode generation tools for all users",
|
||||
"Built-in tracking and analytics capabilities",
|
||||
"UTM builder for seamless marketing campaign integration",
|
||||
"Business-ready templates for professional use"
|
||||
],
|
||||
bullets: [
|
||||
"Free QR code and barcode generation tools for all users",
|
||||
"Built-in tracking and analytics capabilities",
|
||||
"UTM builder for seamless marketing campaign integration",
|
||||
"Business-ready templates for professional use"
|
||||
],
|
||||
link: "https://www.pr.com/press-release/959199",
|
||||
source: "PR.com"
|
||||
},
|
||||
@@ -53,12 +53,12 @@ export default function PressPage() {
|
||||
title: "qrmaster.net Launches Free, Professional QR Code Generator for Global Users",
|
||||
date: "January 27, 2026",
|
||||
excerpt: "Duesseldorf-based startup unveils qrmaster.net, a comprehensive, free online QR code generator designed to serve as the ultimate bridge between the physical and digital worlds.",
|
||||
bullets: [
|
||||
"Advanced tracking capabilities with UTM builder for GA4 integration",
|
||||
"100% Free professional templates and design customization",
|
||||
"Privacy-focused architecture with no data selling",
|
||||
"Dynamic QR codes that can be edited after printing"
|
||||
],
|
||||
bullets: [
|
||||
"Advanced tracking capabilities with UTM builder for GA4 integration",
|
||||
"Free templates and design options",
|
||||
"Privacy-focused architecture with no data selling",
|
||||
"Dynamic QR codes that can be edited after printing"
|
||||
],
|
||||
link: "https://www.prlog.org/13123883-qrmasternet-launches-free-professional-qr-code-generator-for-global-users.html",
|
||||
source: "PRLog"
|
||||
}
|
||||
|
||||
@@ -1,44 +1,118 @@
|
||||
import React from 'react';
|
||||
import type { Metadata } from 'next';
|
||||
import PricingClient from './PricingClient';
|
||||
|
||||
export const metadata: Metadata = {
|
||||
title: {
|
||||
absolute: 'Pricing Plans | QR Master'
|
||||
},
|
||||
description: 'Choose the perfect QR code plan for your needs. Free, Pro, and Business plans with dynamic QR codes, analytics, bulk generation, and custom branding.',
|
||||
alternates: {
|
||||
canonical: 'https://www.qrmaster.net/pricing',
|
||||
},
|
||||
robots: {
|
||||
index: true,
|
||||
follow: true,
|
||||
},
|
||||
openGraph: {
|
||||
title: 'Pricing Plans | QR Master',
|
||||
description: 'Choose the perfect QR code plan for your needs.',
|
||||
url: 'https://www.qrmaster.net/pricing',
|
||||
type: 'website',
|
||||
images: [
|
||||
{
|
||||
url: 'https://www.qrmaster.net/og-image.png',
|
||||
width: 1200,
|
||||
height: 630,
|
||||
alt: 'QR Master Pricing Plans',
|
||||
},
|
||||
],
|
||||
},
|
||||
};
|
||||
|
||||
export default function PricingPage() {
|
||||
return (
|
||||
<>
|
||||
|
||||
<div className="sr-only">
|
||||
<h2>Compare our plans</h2>
|
||||
<p>Find the best QR code solution for your business. From free personal tiers to enterprise-grade dynamic code management.</p>
|
||||
</div>
|
||||
<PricingClient />
|
||||
</>
|
||||
);
|
||||
}
|
||||
import React from 'react';
|
||||
import type { Metadata } from 'next';
|
||||
import PricingClient from './PricingClient';
|
||||
import SeoJsonLd from '@/components/SeoJsonLd';
|
||||
import { AnswerFirstBlock } from '@/components/marketing/AnswerFirstBlock';
|
||||
import { FAQSection } from '@/components/aeo/FAQSection';
|
||||
import { breadcrumbSchema, faqPageSchema } from '@/lib/schema';
|
||||
|
||||
export const metadata: Metadata = {
|
||||
title: {
|
||||
absolute: 'Pricing Plans | QR Master',
|
||||
},
|
||||
description:
|
||||
'Compare QR Master pricing plans. Free includes 3 active dynamic QR codes, Pro includes 50, and Business includes 500 plus bulk QR creation.',
|
||||
alternates: {
|
||||
canonical: 'https://www.qrmaster.net/pricing',
|
||||
},
|
||||
robots: {
|
||||
index: true,
|
||||
follow: true,
|
||||
},
|
||||
openGraph: {
|
||||
title: 'Pricing Plans | QR Master',
|
||||
description:
|
||||
'Compare QR Master pricing plans. Free includes 3 active dynamic QR codes, Pro includes 50, and Business includes 500 plus bulk QR creation.',
|
||||
url: 'https://www.qrmaster.net/pricing',
|
||||
type: 'website',
|
||||
images: [
|
||||
{
|
||||
url: 'https://www.qrmaster.net/og-image.png',
|
||||
width: 1200,
|
||||
height: 630,
|
||||
alt: 'QR Master Pricing Plans',
|
||||
},
|
||||
],
|
||||
},
|
||||
};
|
||||
|
||||
const faqItems = [
|
||||
{
|
||||
question: 'How many dynamic QR codes are included in each plan?',
|
||||
answer:
|
||||
'Free includes 3 active dynamic QR codes. Pro includes 50 dynamic QR codes. Business includes 500 dynamic QR codes.',
|
||||
},
|
||||
{
|
||||
question: 'Do all plans include static QR codes?',
|
||||
answer:
|
||||
'Yes. All plans include unlimited static QR codes.',
|
||||
},
|
||||
{
|
||||
question: 'Which plan includes bulk QR creation?',
|
||||
answer:
|
||||
'Bulk QR creation is included in the Business plan.',
|
||||
},
|
||||
{
|
||||
question: 'Which plans include analytics and branding?',
|
||||
answer:
|
||||
'The Free plan includes basic scan tracking. Pro adds advanced analytics and custom branding. Business includes everything from Pro plus bulk QR creation and priority email support.',
|
||||
},
|
||||
];
|
||||
|
||||
const breadcrumbItems = [
|
||||
{ name: 'Home', url: '/' },
|
||||
{ name: 'Pricing', url: '/pricing' },
|
||||
];
|
||||
|
||||
export default function PricingPage() {
|
||||
return (
|
||||
<>
|
||||
<SeoJsonLd data={[breadcrumbSchema(breadcrumbItems), faqPageSchema(faqItems)]} />
|
||||
|
||||
<div className="bg-white">
|
||||
<div className="container mx-auto max-w-7xl px-4 py-12 sm:px-6 lg:px-8">
|
||||
<AnswerFirstBlock
|
||||
whatIsIt="QR Master pricing is organized around how many active dynamic QR codes you need and whether you need advanced analytics, branding, or bulk creation. Free includes 3 active dynamic QR codes, Pro includes 50, and Business includes 500 plus bulk QR creation."
|
||||
whenToUse={[
|
||||
'Choose Free when you need a small number of active dynamic QR codes and unlimited static QR codes',
|
||||
'Choose Pro when you need more active dynamic QR codes plus advanced analytics and custom branding',
|
||||
'Choose Business when you need 500 active dynamic QR codes and the bulk QR creation workflow',
|
||||
]}
|
||||
comparison={{
|
||||
leftTitle: 'Lower plans',
|
||||
rightTitle: 'Higher plan adds',
|
||||
items: [
|
||||
{ label: 'Dynamic QR capacity', value: true, text: '3 or 50 active codes' },
|
||||
{ label: 'Bulk QR creation', value: true, text: 'Not included before Business' },
|
||||
{ label: 'Advanced analytics and branding', value: true, text: 'Basic or Pro-level only' },
|
||||
],
|
||||
}}
|
||||
howTo={{
|
||||
steps: [
|
||||
'Estimate how many active dynamic QR codes you need at one time',
|
||||
'Decide whether you also need advanced analytics, branding, or bulk creation',
|
||||
'Choose the plan that matches the current workflow instead of paying for unused capacity',
|
||||
],
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className="container mx-auto max-w-5xl px-4 pb-4 sm:px-6 lg:px-8">
|
||||
<FAQSection items={faqItems} title="Pricing questions" />
|
||||
</div>
|
||||
|
||||
<div className="sr-only">
|
||||
<h2>Compare our plans</h2>
|
||||
<p>
|
||||
Free includes 3 active dynamic QR codes and unlimited static QR codes. Pro
|
||||
includes 50 dynamic QR codes, advanced analytics, and custom branding.
|
||||
Business includes 500 dynamic QR codes, everything from Pro, bulk QR creation
|
||||
up to 1,000, and priority email support.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<PricingClient />
|
||||
</div>
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
||||
@@ -1,402 +1,467 @@
|
||||
import React from 'react';
|
||||
import type { Metadata } from 'next';
|
||||
import React from 'react';
|
||||
import type { Metadata } from 'next';
|
||||
import { Button } from '@/components/ui/Button';
|
||||
import { Card } from '@/components/ui/Card';
|
||||
import SeoJsonLd from '@/components/SeoJsonLd';
|
||||
import Breadcrumbs, { BreadcrumbItem } from '@/components/Breadcrumbs';
|
||||
import { breadcrumbSchema } from '@/lib/schema';
|
||||
import { AnswerFirstBlock } from '@/components/marketing/AnswerFirstBlock';
|
||||
import { FAQSection } from '@/components/aeo/FAQSection';
|
||||
import { GrowthLinksSection } from '@/components/marketing/GrowthLinksSection';
|
||||
import { MarketingPageTracker, TrackedCtaLink } from '@/components/marketing/MarketingAnalytics';
|
||||
|
||||
export const metadata: Metadata = {
|
||||
title: {
|
||||
absolute: 'QR Code Tracking & Analytics - Track Every Scan',
|
||||
},
|
||||
description: 'Track QR code scans with real-time analytics. Monitor location, device, time, and user behavior. Free QR code tracking software with detailed reports.',
|
||||
keywords: 'qr code tracking, qr code analytics, track qr scans, qr code statistics, free qr tracking, qr code monitoring',
|
||||
alternates: {
|
||||
canonical: 'https://www.qrmaster.net/qr-code-tracking',
|
||||
languages: {
|
||||
'x-default': 'https://www.qrmaster.net/qr-code-tracking',
|
||||
en: 'https://www.qrmaster.net/qr-code-tracking',
|
||||
},
|
||||
},
|
||||
openGraph: {
|
||||
title: 'QR Code Tracking & Analytics - Track Every Scan',
|
||||
description: 'Track QR code scans with real-time analytics. Monitor location, device, time, and user behavior.',
|
||||
url: 'https://www.qrmaster.net/qr-code-tracking',
|
||||
type: 'website',
|
||||
images: ['/og-image.png'],
|
||||
},
|
||||
twitter: {
|
||||
title: 'QR Code Tracking & Analytics - Track Every Scan',
|
||||
description: 'Track QR code scans with real-time analytics. Monitor location, device, time, and user behavior.',
|
||||
},
|
||||
};
|
||||
|
||||
export default function QRCodeTrackingPage() {
|
||||
const trackingFeatures = [
|
||||
{
|
||||
icon: '📊',
|
||||
title: 'Real-Time Analytics',
|
||||
description: 'See scan data instantly as it happens. Monitor your QR code performance in real-time with live dashboards.',
|
||||
},
|
||||
{
|
||||
icon: '🌍',
|
||||
title: 'Location Tracking',
|
||||
description: 'Know exactly where your QR codes are being scanned. Track by country, city, and region.',
|
||||
},
|
||||
{
|
||||
icon: '📱',
|
||||
title: 'Device Detection',
|
||||
description: 'Identify which devices scan your codes. Track iOS, Android, desktop, and browser types.',
|
||||
},
|
||||
{
|
||||
icon: '🕐',
|
||||
title: 'Time-Based Reports',
|
||||
description: 'Analyze scan patterns by hour, day, week, or month. Optimize your campaigns with timing insights.',
|
||||
},
|
||||
{
|
||||
icon: '👥',
|
||||
title: 'Unique vs Total Scans',
|
||||
description: 'Distinguish between unique users and repeat scans. Measure true reach and engagement.',
|
||||
},
|
||||
{
|
||||
icon: '📈',
|
||||
title: 'Campaign Performance',
|
||||
description: 'Track ROI with UTM parameters. Measure conversion rates and campaign effectiveness.',
|
||||
},
|
||||
];
|
||||
|
||||
const useCases = [
|
||||
{
|
||||
title: 'Marketing Campaigns',
|
||||
description: 'Track print ads, billboards, and product packaging to measure marketing ROI.',
|
||||
benefits: ['Measure ad performance', 'A/B test campaigns', 'Track conversions'],
|
||||
},
|
||||
{
|
||||
title: 'Event Management',
|
||||
description: 'Monitor event check-ins, booth visits, and attendee engagement in real-time.',
|
||||
benefits: ['Live attendance tracking', 'Booth analytics', 'Engagement metrics'],
|
||||
},
|
||||
{
|
||||
title: 'Product Labels',
|
||||
description: 'Track product authenticity scans, manual downloads, and warranty registrations.',
|
||||
benefits: ['Anti-counterfeiting', 'User registration tracking', 'Product analytics'],
|
||||
},
|
||||
{
|
||||
title: 'Restaurant Menus',
|
||||
description: 'See how many customers scan your menu QR codes and when peak times occur.',
|
||||
benefits: ['Customer insights', 'Peak time analysis', 'Menu engagement'],
|
||||
},
|
||||
];
|
||||
|
||||
const comparisonData = [
|
||||
{ feature: 'Real-Time Analytics', free: true, qrMaster: true },
|
||||
{ feature: 'Location Tracking', free: false, qrMaster: true },
|
||||
{ feature: 'Device Detection', free: false, qrMaster: true },
|
||||
{ feature: 'Unlimited Scans', free: false, qrMaster: true },
|
||||
{ feature: 'Historical Data', free: '7 days', qrMaster: 'Unlimited' },
|
||||
{ feature: 'Export Reports', free: false, qrMaster: true },
|
||||
{ feature: 'API Access', free: false, qrMaster: true },
|
||||
];
|
||||
|
||||
const softwareSchema = {
|
||||
'@context': 'https://schema.org',
|
||||
'@type': 'SoftwareApplication',
|
||||
'@id': 'https://www.qrmaster.net/qr-code-tracking#software',
|
||||
name: 'QR Master - QR Code Tracking & Analytics',
|
||||
applicationCategory: 'BusinessApplication',
|
||||
operatingSystem: 'Web Browser, iOS, Android',
|
||||
offers: {
|
||||
'@type': 'Offer',
|
||||
price: '0',
|
||||
priceCurrency: 'USD',
|
||||
availability: 'https://schema.org/InStock',
|
||||
},
|
||||
|
||||
description: 'Track QR code scans with real-time analytics. Monitor location, device, time, and user behavior with our free QR code tracking software.',
|
||||
features: [
|
||||
'Real-time analytics dashboard',
|
||||
'Location tracking by country and city',
|
||||
'Device detection (iOS, Android, Desktop)',
|
||||
'Time-based scan reports',
|
||||
'Unique vs total scan tracking',
|
||||
'Campaign performance metrics',
|
||||
'Unlimited scans',
|
||||
'Export detailed reports',
|
||||
],
|
||||
};
|
||||
|
||||
const howToSchema = {
|
||||
'@context': 'https://schema.org',
|
||||
'@type': 'HowTo',
|
||||
'@id': 'https://www.qrmaster.net/qr-code-tracking#howto',
|
||||
name: 'How to Track QR Code Scans',
|
||||
description: 'Learn how to track and analyze QR code scans with real-time analytics',
|
||||
totalTime: 'PT5M',
|
||||
step: [
|
||||
{
|
||||
'@type': 'HowToStep',
|
||||
position: 1,
|
||||
name: 'Create QR Code',
|
||||
text: 'Sign up for free and create a dynamic QR code with tracking enabled',
|
||||
url: 'https://www.qrmaster.net/signup',
|
||||
},
|
||||
{
|
||||
'@type': 'HowToStep',
|
||||
position: 2,
|
||||
name: 'Deploy QR Code',
|
||||
text: 'Download and place your QR code on marketing materials, products, or digital platforms',
|
||||
},
|
||||
{
|
||||
'@type': 'HowToStep',
|
||||
position: 3,
|
||||
name: 'Monitor Analytics',
|
||||
text: 'View real-time scan data including location, device, and time patterns in your dashboard',
|
||||
url: 'https://www.qrmaster.net/analytics',
|
||||
},
|
||||
{
|
||||
'@type': 'HowToStep',
|
||||
position: 4,
|
||||
name: 'Optimize Campaigns',
|
||||
text: 'Use insights to optimize placement, timing, and targeting of your QR code campaigns',
|
||||
},
|
||||
],
|
||||
};
|
||||
|
||||
const breadcrumbItems: BreadcrumbItem[] = [
|
||||
{ name: 'Home', url: '/' },
|
||||
{ name: 'QR Code Tracking', url: '/qr-code-tracking' },
|
||||
];
|
||||
|
||||
const relatedUseCaseLinks = [
|
||||
{
|
||||
href: '/use-cases/real-estate-sign-qr-codes',
|
||||
title: 'Real Estate Sign QR Codes',
|
||||
description: 'Compare sign, brochure, and open-house scans without blending every property source together.',
|
||||
ctaLabel: 'Create your real estate QR code',
|
||||
export const metadata: Metadata = {
|
||||
title: {
|
||||
absolute: 'QR Code Tracking & Analytics - Track Every Scan',
|
||||
},
|
||||
description:
|
||||
'Track QR code scans with analytics for time, device, and location context. Use dynamic QR codes to measure placements and keep printed campaigns accountable.',
|
||||
keywords:
|
||||
'qr code tracking, qr code analytics, track qr scans, dynamic qr tracking, qr scan analytics',
|
||||
alternates: {
|
||||
canonical: 'https://www.qrmaster.net/qr-code-tracking',
|
||||
languages: {
|
||||
'x-default': 'https://www.qrmaster.net/qr-code-tracking',
|
||||
en: 'https://www.qrmaster.net/qr-code-tracking',
|
||||
},
|
||||
{
|
||||
href: '/use-cases/feedback-qr-codes',
|
||||
title: 'Feedback QR Codes',
|
||||
description: 'Measure which service surfaces and follow-up prompts actually generate customer responses.',
|
||||
ctaLabel: 'Create your feedback QR code',
|
||||
},
|
||||
{
|
||||
href: '/use-cases/coupon-qr-codes',
|
||||
title: 'Coupon QR Codes',
|
||||
description: 'Tie printed discount placements to measurable scans so you can compare promotion performance.',
|
||||
ctaLabel: 'Create your coupon QR code',
|
||||
},
|
||||
{
|
||||
href: '/use-cases',
|
||||
title: 'Explore the use-case hub',
|
||||
description: 'Browse the first commercial workflows built around dynamic updates and measurable scans.',
|
||||
ctaLabel: 'Explore QR code use cases',
|
||||
},
|
||||
];
|
||||
},
|
||||
openGraph: {
|
||||
title: 'QR Code Tracking & Analytics - Track Every Scan',
|
||||
description:
|
||||
'Track QR code scans with analytics for time, device, and location context. Use dynamic QR codes to measure placements and campaigns.',
|
||||
url: 'https://www.qrmaster.net/qr-code-tracking',
|
||||
type: 'website',
|
||||
images: ['/og-image.png'],
|
||||
},
|
||||
twitter: {
|
||||
title: 'QR Code Tracking & Analytics - Track Every Scan',
|
||||
description:
|
||||
'Track QR code scans with analytics for time, device, and location context. Use dynamic QR codes to measure placements and campaigns.',
|
||||
},
|
||||
};
|
||||
|
||||
const trackingFeatures = [
|
||||
{
|
||||
title: 'Time-based scan activity',
|
||||
description:
|
||||
'Review when scans happen so you can compare campaign bursts, peak service windows, or event timing.',
|
||||
},
|
||||
{
|
||||
title: 'Location context',
|
||||
description:
|
||||
'See country, city, and region-level scan context in the dashboard to understand where scans are coming from.',
|
||||
},
|
||||
{
|
||||
title: 'Device mix',
|
||||
description:
|
||||
'Understand whether scans are happening on phone or desktop-heavy traffic patterns and adapt landing pages accordingly.',
|
||||
},
|
||||
{
|
||||
title: 'Total and unique scan reporting',
|
||||
description:
|
||||
'Use scan counts to understand overall activity and compare repeated scans with broader reach.',
|
||||
},
|
||||
{
|
||||
title: 'Placement-ready measurement',
|
||||
description:
|
||||
'Track scans from print surfaces such as flyers, menus, signs, packaging, and event materials.',
|
||||
},
|
||||
{
|
||||
title: 'Dynamic QR workflow',
|
||||
description:
|
||||
'Tracking works with dynamic QR codes that route through QR Master before the scanner reaches the final destination.',
|
||||
},
|
||||
];
|
||||
|
||||
const trackingUseCases = [
|
||||
{
|
||||
title: 'Marketing campaigns',
|
||||
description:
|
||||
'Measure how printed placements such as flyers, signs, packaging inserts, or booth materials perform over time.',
|
||||
benefits: ['Compare placements', 'Review campaign timing', 'See scan context in one dashboard'],
|
||||
},
|
||||
{
|
||||
title: 'Events',
|
||||
description:
|
||||
'Track which event materials drive scans before, during, and after the event instead of treating every print touchpoint the same.',
|
||||
benefits: ['Compare booth and signage scans', 'Watch event-day traffic', 'Keep destinations updateable'],
|
||||
},
|
||||
{
|
||||
title: 'Product and packaging',
|
||||
description:
|
||||
'Measure which labels, inserts, or support links are getting scans after products leave the warehouse.',
|
||||
benefits: ['Track support content usage', 'Compare packaging placements', 'Keep links current'],
|
||||
},
|
||||
{
|
||||
title: 'Restaurant and in-store surfaces',
|
||||
description:
|
||||
'Review scans from menus, table cards, windows, or counters and compare when in-store prompts actually get used.',
|
||||
benefits: ['Spot peak scan periods', 'Compare service surfaces', 'Keep menu links current'],
|
||||
},
|
||||
];
|
||||
|
||||
const trackingComparison = [
|
||||
{ feature: 'Destination can change later', static: false, dynamic: true },
|
||||
{ feature: 'Scan analytics', static: false, dynamic: true },
|
||||
{ feature: 'Placement comparison after print', static: false, dynamic: true },
|
||||
{ feature: 'Reusable for campaigns that evolve', static: false, dynamic: true },
|
||||
];
|
||||
|
||||
const faqItems = [
|
||||
{
|
||||
question: 'Can I track a static QR code?',
|
||||
answer:
|
||||
'Static QR codes store the destination directly in the image, so QR Master cannot add the redirect step needed for tracking. Tracking requires a dynamic QR workflow.',
|
||||
},
|
||||
{
|
||||
question: 'What can I measure with QR code tracking?',
|
||||
answer:
|
||||
'QR Master can report scan activity such as time, device, and location context, along with total and unique scan reporting in the analytics views.',
|
||||
},
|
||||
{
|
||||
question: 'Why does tracking use a dynamic QR code?',
|
||||
answer:
|
||||
'Tracking happens during the redirect step. A dynamic QR code routes the scan through QR Master first, which makes scan reporting possible before the user reaches the final destination.',
|
||||
},
|
||||
{
|
||||
question: 'When is QR code tracking most useful?',
|
||||
answer:
|
||||
'It is most useful when you need to compare placements, campaign timing, or printed surfaces and want a measurable record instead of guessing which QR code prompt worked.',
|
||||
},
|
||||
];
|
||||
|
||||
const softwareSchema = {
|
||||
'@context': 'https://schema.org',
|
||||
'@type': 'SoftwareApplication',
|
||||
'@id': 'https://www.qrmaster.net/qr-code-tracking#software',
|
||||
name: 'QR Master - QR Code Tracking & Analytics',
|
||||
applicationCategory: 'BusinessApplication',
|
||||
operatingSystem: 'Web Browser',
|
||||
offers: {
|
||||
'@type': 'Offer',
|
||||
price: '0',
|
||||
priceCurrency: 'EUR',
|
||||
availability: 'https://schema.org/InStock',
|
||||
},
|
||||
description:
|
||||
'Track QR code scans with analytics for time, device, and location context. Use dynamic QR codes to measure placements and campaigns.',
|
||||
featureList: [
|
||||
'Time-based scan reporting',
|
||||
'Location context in analytics',
|
||||
'Device mix reporting',
|
||||
'Total and unique scan reporting',
|
||||
'Dynamic QR workflow for trackable printed placements',
|
||||
],
|
||||
};
|
||||
|
||||
const howToSchema = {
|
||||
'@context': 'https://schema.org',
|
||||
'@type': 'HowTo',
|
||||
'@id': 'https://www.qrmaster.net/qr-code-tracking#howto',
|
||||
name: 'How to track QR code scans',
|
||||
description: 'Create a dynamic QR code, deploy it, and review scan analytics from the QR Master dashboard.',
|
||||
totalTime: 'PT5M',
|
||||
step: [
|
||||
{
|
||||
'@type': 'HowToStep',
|
||||
position: 1,
|
||||
name: 'Create a dynamic QR code',
|
||||
text: 'Create a dynamic QR code in QR Master so the scan can route through the tracking step first.',
|
||||
url: 'https://www.qrmaster.net/signup',
|
||||
},
|
||||
{
|
||||
'@type': 'HowToStep',
|
||||
position: 2,
|
||||
name: 'Deploy the QR code',
|
||||
text: 'Place the QR code on the flyer, menu, sign, package, or event material you want to measure.',
|
||||
},
|
||||
{
|
||||
'@type': 'HowToStep',
|
||||
position: 3,
|
||||
name: 'Review analytics',
|
||||
text: 'Open the dashboard to review scan context such as time, device, location, and total activity.',
|
||||
},
|
||||
{
|
||||
'@type': 'HowToStep',
|
||||
position: 4,
|
||||
name: 'Improve the next placement',
|
||||
text: 'Use the scan patterns to improve your next campaign, placement, or destination update.',
|
||||
},
|
||||
],
|
||||
};
|
||||
|
||||
const faqSchema = {
|
||||
'@context': 'https://schema.org',
|
||||
'@type': 'FAQPage',
|
||||
'@id': 'https://www.qrmaster.net/qr-code-tracking#faq',
|
||||
mainEntity: faqItems.map((item) => ({
|
||||
'@type': 'Question',
|
||||
name: item.question,
|
||||
acceptedAnswer: {
|
||||
'@type': 'Answer',
|
||||
text: item.answer,
|
||||
},
|
||||
})),
|
||||
};
|
||||
|
||||
const breadcrumbItems: BreadcrumbItem[] = [
|
||||
{ name: 'Home', url: '/' },
|
||||
{ name: 'QR Code Tracking', url: '/qr-code-tracking' },
|
||||
];
|
||||
|
||||
const relatedUseCaseLinks = [
|
||||
{
|
||||
href: '/use-cases/real-estate-sign-qr-codes',
|
||||
title: 'Real Estate Sign QR Codes',
|
||||
description:
|
||||
'Compare sign, brochure, and open-house scans without blending every property source together.',
|
||||
ctaLabel: 'Create your real estate QR code',
|
||||
},
|
||||
{
|
||||
href: '/use-cases/feedback-qr-codes',
|
||||
title: 'Feedback QR Codes',
|
||||
description:
|
||||
'Measure which service surfaces and follow-up prompts actually generate customer responses.',
|
||||
ctaLabel: 'Create your feedback QR code',
|
||||
},
|
||||
{
|
||||
href: '/use-cases/coupon-qr-codes',
|
||||
title: 'Coupon QR Codes',
|
||||
description:
|
||||
'Tie printed discount placements to measurable scans so you can compare promotion performance.',
|
||||
ctaLabel: 'Create your coupon QR code',
|
||||
},
|
||||
{
|
||||
href: '/use-cases',
|
||||
title: 'Explore the use-case hub',
|
||||
description:
|
||||
'Browse the first commercial workflows built around dynamic updates and measurable scans.',
|
||||
ctaLabel: 'Explore QR code use cases',
|
||||
},
|
||||
];
|
||||
|
||||
export default function QRCodeTrackingPage() {
|
||||
return (
|
||||
<>
|
||||
<SeoJsonLd data={[softwareSchema, howToSchema, breadcrumbSchema(breadcrumbItems)]} />
|
||||
<SeoJsonLd data={[softwareSchema, howToSchema, faqSchema, breadcrumbSchema(breadcrumbItems)]} />
|
||||
<MarketingPageTracker pageType="commercial" cluster="qr-tracking" />
|
||||
<div className="min-h-screen bg-white">
|
||||
{/* Hero Section */}
|
||||
<section className="relative overflow-hidden bg-gradient-to-br from-blue-50 via-white to-purple-50 py-20">
|
||||
<div className="container mx-auto px-4 sm:px-6 lg:px-8 max-w-7xl">
|
||||
<Breadcrumbs items={breadcrumbItems} />
|
||||
<div className="grid lg:grid-cols-2 gap-12 items-center">
|
||||
<div className="space-y-8">
|
||||
<div className="inline-flex items-center space-x-2 bg-blue-100 text-blue-800 px-4 py-2 rounded-full text-sm font-semibold">
|
||||
<span>📊</span>
|
||||
<span>Free QR Code Tracking</span>
|
||||
</div>
|
||||
|
||||
<h1 className="text-5xl lg:text-6xl font-bold text-gray-900 leading-tight">
|
||||
Track Every QR Code Scan with Powerful Analytics
|
||||
</h1>
|
||||
|
||||
<p className="text-xl text-gray-600 leading-relaxed">
|
||||
Monitor your QR code performance in real-time. Get detailed insights on location, device, time, and user behavior. Make data-driven decisions with our free tracking software.
|
||||
</p>
|
||||
<section className="relative overflow-hidden bg-gradient-to-br from-blue-50 via-white to-purple-50 py-20">
|
||||
<div className="container mx-auto max-w-7xl px-4 sm:px-6 lg:px-8">
|
||||
<Breadcrumbs items={breadcrumbItems} />
|
||||
<div className="grid items-center gap-12 lg:grid-cols-2">
|
||||
<div className="space-y-8">
|
||||
<div className="inline-flex items-center rounded-full bg-blue-100 px-4 py-2 text-sm font-semibold text-blue-800">
|
||||
Trackable dynamic QR workflows
|
||||
</div>
|
||||
|
||||
<div className="flex flex-col sm:flex-row gap-4">
|
||||
<TrackedCtaLink href="/signup" ctaLabel="Start Tracking Free" ctaLocation="hero_primary" pageType="commercial" cluster="qr-tracking">
|
||||
<Button size="lg" className="text-lg px-8 py-4 w-full sm:w-auto">
|
||||
<div className="space-y-5">
|
||||
<h1 className="text-5xl font-bold leading-tight text-gray-900 lg:text-6xl">
|
||||
Track every QR code scan with useful context
|
||||
</h1>
|
||||
<p className="text-xl leading-relaxed text-gray-600">
|
||||
Use dynamic QR codes to measure scans by time, device, and location context,
|
||||
so printed campaigns and physical placements stop being guesswork.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div className="space-y-3">
|
||||
{[
|
||||
'Track printed placements with a dynamic QR workflow',
|
||||
'Review time, device, and location context',
|
||||
'Compare total and unique scan activity',
|
||||
'Use one dashboard to improve the next campaign or placement',
|
||||
].map((feature) => (
|
||||
<div key={feature} className="flex items-center gap-3">
|
||||
<div className="flex h-5 w-5 items-center justify-center rounded-full bg-green-500">
|
||||
<svg className="h-3 w-3 text-white" fill="currentColor" viewBox="0 0 20 20">
|
||||
<path
|
||||
fillRule="evenodd"
|
||||
d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z"
|
||||
clipRule="evenodd"
|
||||
/>
|
||||
</svg>
|
||||
</div>
|
||||
<span className="text-gray-700">{feature}</span>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
|
||||
<div className="flex flex-col gap-4 sm:flex-row">
|
||||
<TrackedCtaLink
|
||||
href="/signup"
|
||||
ctaLabel="Start Tracking Free"
|
||||
ctaLocation="hero_primary"
|
||||
pageType="commercial"
|
||||
cluster="qr-tracking"
|
||||
>
|
||||
<Button size="lg" className="w-full px-8 py-4 text-lg sm:w-auto">
|
||||
Start Tracking Free
|
||||
</Button>
|
||||
</TrackedCtaLink>
|
||||
<TrackedCtaLink href="/signup" ctaLabel="Create Trackable QR Code" ctaLocation="hero_secondary" pageType="commercial" cluster="qr-tracking">
|
||||
<Button variant="outline" size="lg" className="text-lg px-8 py-4 w-full sm:w-auto">
|
||||
Create Trackable QR Code
|
||||
<TrackedCtaLink
|
||||
href="/dynamic-qr-code-generator"
|
||||
ctaLabel="Create Dynamic QR Code"
|
||||
ctaLocation="hero_secondary"
|
||||
pageType="commercial"
|
||||
cluster="qr-tracking"
|
||||
>
|
||||
<Button variant="outline" size="lg" className="w-full px-8 py-4 text-lg sm:w-auto">
|
||||
Create Dynamic QR Code
|
||||
</Button>
|
||||
</TrackedCtaLink>
|
||||
</div>
|
||||
|
||||
<div className="flex items-center space-x-6 text-sm text-gray-600">
|
||||
<div className="flex items-center space-x-2">
|
||||
<svg className="w-5 h-5 text-green-500" fill="currentColor" viewBox="0 0 20 20">
|
||||
<path fillRule="evenodd" d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z" clipRule="evenodd" />
|
||||
</svg>
|
||||
<span>No credit card required</span>
|
||||
</div>
|
||||
<div className="flex items-center space-x-2">
|
||||
<svg className="w-5 h-5 text-green-500" fill="currentColor" viewBox="0 0 20 20">
|
||||
<path fillRule="evenodd" d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z" clipRule="evenodd" />
|
||||
</svg>
|
||||
<span>Placement-ready reports</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Analytics Preview */}
|
||||
<div className="relative">
|
||||
<Card className="p-6 shadow-2xl">
|
||||
<h3 className="font-semibold text-lg mb-4">Live Analytics Dashboard</h3>
|
||||
<div className="space-y-4">
|
||||
<div className="flex justify-between items-center pb-3 border-b">
|
||||
</div>
|
||||
|
||||
<div className="relative">
|
||||
<Card className="p-6 shadow-2xl">
|
||||
<h3 className="mb-4 text-lg font-semibold">Analytics overview</h3>
|
||||
<div className="space-y-4">
|
||||
<div className="flex items-center justify-between border-b pb-3">
|
||||
<span className="text-gray-600">Placement view</span>
|
||||
<span className="text-base font-semibold text-primary-600">Flyer vs booth vs table card</span>
|
||||
</div>
|
||||
<div className="flex justify-between items-center pb-3 border-b">
|
||||
<span className="font-semibold text-primary-600">Flyer, sign, menu, package</span>
|
||||
</div>
|
||||
<div className="flex items-center justify-between border-b pb-3">
|
||||
<span className="text-gray-600">Time trend</span>
|
||||
<span className="text-base font-semibold text-primary-600">Lunch, event day, or campaign burst</span>
|
||||
</div>
|
||||
<div className="flex justify-between items-center pb-3 border-b">
|
||||
<span className="font-semibold text-primary-600">Hourly and daily patterns</span>
|
||||
</div>
|
||||
<div className="flex items-center justify-between border-b pb-3">
|
||||
<span className="text-gray-600">Location context</span>
|
||||
<span className="font-semibold">Region and city level view</span>
|
||||
</div>
|
||||
<div className="flex justify-between items-center">
|
||||
<span className="text-gray-600">Device context</span>
|
||||
<span className="font-semibold">Phone, desktop, and scan mix</span>
|
||||
</div>
|
||||
</div>
|
||||
</Card>
|
||||
<div className="absolute -top-4 -right-4 bg-green-500 text-white px-4 py-2 rounded-full text-sm font-semibold shadow-lg animate-pulse">
|
||||
Live Updates
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* Tracking Features */}
|
||||
<section className="py-20 bg-gray-50">
|
||||
<div className="container mx-auto px-4 sm:px-6 lg:px-8 max-w-7xl">
|
||||
<div className="text-center mb-16">
|
||||
<h2 className="text-4xl font-bold text-gray-900 mb-4">
|
||||
Powerful QR Code Tracking Features
|
||||
</h2>
|
||||
<p className="text-xl text-gray-600 max-w-3xl mx-auto">
|
||||
Get complete visibility into your QR code performance with our comprehensive analytics suite
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div className="grid md:grid-cols-2 lg:grid-cols-3 gap-8">
|
||||
{trackingFeatures.map((feature, index) => (
|
||||
<Card key={index} className="p-6 hover:shadow-lg transition-shadow">
|
||||
<div className="text-4xl mb-4">{feature.icon}</div>
|
||||
<h3 className="text-xl font-semibold text-gray-900 mb-2">
|
||||
{feature.title}
|
||||
</h3>
|
||||
<p className="text-gray-600">
|
||||
{feature.description}
|
||||
</p>
|
||||
</Card>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* Use Cases */}
|
||||
<section className="py-20">
|
||||
<div className="container mx-auto px-4 sm:px-6 lg:px-8 max-w-7xl">
|
||||
<div className="text-center mb-16">
|
||||
<h2 className="text-4xl font-bold text-gray-900 mb-4">
|
||||
QR Code Tracking Use Cases
|
||||
</h2>
|
||||
<p className="text-xl text-gray-600 max-w-3xl mx-auto">
|
||||
See how businesses use QR code tracking to improve their operations
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div className="grid md:grid-cols-2 gap-8">
|
||||
{useCases.map((useCase, index) => (
|
||||
<Card key={index} className="p-8">
|
||||
<h3 className="text-2xl font-bold text-gray-900 mb-3">
|
||||
{useCase.title}
|
||||
</h3>
|
||||
<p className="text-gray-600 mb-6">
|
||||
{useCase.description}
|
||||
</p>
|
||||
<ul className="space-y-2">
|
||||
{useCase.benefits.map((benefit, idx) => (
|
||||
<li key={idx} className="flex items-center space-x-2">
|
||||
<svg className="w-5 h-5 text-green-500 flex-shrink-0" fill="currentColor" viewBox="0 0 20 20">
|
||||
<path fillRule="evenodd" d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z" clipRule="evenodd" />
|
||||
</svg>
|
||||
<span className="text-gray-700">{benefit}</span>
|
||||
</li>
|
||||
))}
|
||||
</ul>
|
||||
</Card>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* Comparison Table */}
|
||||
<section className="py-20 bg-gray-50">
|
||||
<div className="container mx-auto px-4 sm:px-6 lg:px-8 max-w-5xl">
|
||||
<div className="text-center mb-16">
|
||||
<h2 className="text-4xl font-bold text-gray-900 mb-4">
|
||||
QR Master vs Free Tools
|
||||
</h2>
|
||||
<p className="text-xl text-gray-600">
|
||||
See why businesses choose QR Master for QR code tracking
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<Card className="overflow-hidden">
|
||||
<table className="w-full">
|
||||
<thead className="bg-gray-100">
|
||||
<tr>
|
||||
<th className="px-6 py-4 text-left text-gray-900 font-semibold">Feature</th>
|
||||
<th className="px-6 py-4 text-center text-gray-900 font-semibold">Free Tools</th>
|
||||
<th className="px-6 py-4 text-center text-primary-600 font-semibold">QR Master</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody className="divide-y divide-gray-200">
|
||||
{comparisonData.map((row, index) => (
|
||||
<tr key={index}>
|
||||
<td className="px-6 py-4 text-gray-900 font-medium">{row.feature}</td>
|
||||
<td className="px-6 py-4 text-center">
|
||||
{typeof row.free === 'boolean' ? (
|
||||
row.free ? (
|
||||
<span className="text-green-500 text-2xl">✓</span>
|
||||
) : (
|
||||
<span className="text-red-500 text-2xl">✗</span>
|
||||
)
|
||||
) : (
|
||||
<span className="text-gray-600">{row.free}</span>
|
||||
)}
|
||||
</td>
|
||||
<td className="px-6 py-4 text-center">
|
||||
{typeof row.qrMaster === 'boolean' ? (
|
||||
<span className="text-green-500 text-2xl">✓</span>
|
||||
) : (
|
||||
<span className="text-primary-600 font-semibold">{row.qrMaster}</span>
|
||||
)}
|
||||
</td>
|
||||
</tr>
|
||||
))}
|
||||
</tbody>
|
||||
</table>
|
||||
<span className="font-semibold">Country, city, region</span>
|
||||
</div>
|
||||
<div className="flex items-center justify-between">
|
||||
<span className="text-gray-600">Device mix</span>
|
||||
<span className="font-semibold">Phone or desktop traffic</span>
|
||||
</div>
|
||||
</div>
|
||||
</Card>
|
||||
<div className="absolute -right-4 -top-4 rounded-full bg-green-500 px-4 py-2 text-sm font-semibold text-white shadow-lg">
|
||||
Dynamic QR required
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<div className="container mx-auto max-w-7xl px-4 sm:px-6 lg:px-8">
|
||||
<AnswerFirstBlock
|
||||
whatIsIt="QR code tracking works when a dynamic QR code routes the scan through QR Master before the scanner reaches the final destination. That redirect step is what makes analytics such as time, device, and location context possible."
|
||||
whenToUse={[
|
||||
'You want to compare placements such as flyers, signs, menus, packaging, or event surfaces',
|
||||
'You need a measurable record of scans instead of relying on guesswork after print is deployed',
|
||||
'You expect the destination to change while keeping the same printed QR code in use',
|
||||
]}
|
||||
comparison={{
|
||||
leftTitle: 'Static QR only',
|
||||
rightTitle: 'Dynamic QR with tracking',
|
||||
items: [
|
||||
{ label: 'Destination can change later', value: true, text: 'Not available' },
|
||||
{ label: 'Scan analytics', value: true, text: 'Not available' },
|
||||
{ label: 'Placement comparison after print', value: true, text: 'Limited' },
|
||||
],
|
||||
}}
|
||||
howTo={{
|
||||
steps: [
|
||||
'Create a dynamic QR code in QR Master',
|
||||
'Place it on the print surface or campaign you want to measure',
|
||||
'Review analytics and improve the next placement or destination update',
|
||||
],
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className="container mx-auto max-w-5xl px-4 pb-8 sm:px-6 lg:px-8">
|
||||
<FAQSection items={faqItems} title="QR tracking questions" />
|
||||
</div>
|
||||
|
||||
<section className="bg-gray-50 py-20">
|
||||
<div className="container mx-auto max-w-7xl px-4 sm:px-6 lg:px-8">
|
||||
<div className="mb-16 text-center">
|
||||
<h2 className="mb-4 text-4xl font-bold text-gray-900">What QR tracking helps you measure</h2>
|
||||
<p className="mx-auto max-w-3xl text-xl text-gray-600">
|
||||
These are the analytics surfaces the current product experience already supports without inventing extra claims.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div className="grid gap-8 md:grid-cols-2 lg:grid-cols-3">
|
||||
{trackingFeatures.map((feature) => (
|
||||
<Card key={feature.title} className="p-6 transition-shadow hover:shadow-lg">
|
||||
<h3 className="mb-2 text-xl font-semibold text-gray-900">{feature.title}</h3>
|
||||
<p className="text-gray-600">{feature.description}</p>
|
||||
</Card>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section className="py-20">
|
||||
<div className="container mx-auto max-w-5xl px-4 sm:px-6 lg:px-8">
|
||||
<div className="mb-16 text-center">
|
||||
<h2 className="mb-4 text-4xl font-bold text-gray-900">Tracking setup comparison</h2>
|
||||
<p className="text-xl text-gray-600">
|
||||
Tracking is a dynamic QR workflow, not a static QR workflow with retroactive reporting.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<Card className="overflow-hidden">
|
||||
<table className="w-full">
|
||||
<thead className="bg-gray-100">
|
||||
<tr>
|
||||
<th className="px-6 py-4 text-left font-semibold text-gray-900">Capability</th>
|
||||
<th className="px-6 py-4 text-center font-semibold text-gray-900">Static QR</th>
|
||||
<th className="px-6 py-4 text-center font-semibold text-primary-600">Dynamic QR tracking</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody className="divide-y divide-gray-200">
|
||||
{trackingComparison.map((row) => (
|
||||
<tr key={row.feature}>
|
||||
<td className="px-6 py-4 font-medium text-gray-900">{row.feature}</td>
|
||||
<td className="px-6 py-4 text-center text-gray-600">{row.static ? 'Yes' : 'No'}</td>
|
||||
<td className="px-6 py-4 text-center font-semibold text-primary-600">
|
||||
{row.dynamic ? 'Yes' : 'No'}
|
||||
</td>
|
||||
</tr>
|
||||
))}
|
||||
</tbody>
|
||||
</table>
|
||||
</Card>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section className="bg-gray-50 py-20">
|
||||
<div className="container mx-auto max-w-7xl px-4 sm:px-6 lg:px-8">
|
||||
<div className="mb-16 text-center">
|
||||
<h2 className="mb-4 text-4xl font-bold text-gray-900">Where tracking is most useful</h2>
|
||||
<p className="mx-auto max-w-3xl text-xl text-gray-600">
|
||||
Use tracking where physical surfaces or campaigns need measurable follow-through after they are deployed.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div className="grid gap-8 md:grid-cols-2">
|
||||
{trackingUseCases.map((useCase) => (
|
||||
<Card key={useCase.title} className="p-8">
|
||||
<h3 className="mb-3 text-2xl font-bold text-gray-900">{useCase.title}</h3>
|
||||
<p className="mb-6 text-gray-600">{useCase.description}</p>
|
||||
<ul className="space-y-2">
|
||||
{useCase.benefits.map((benefit) => (
|
||||
<li key={benefit} className="flex items-center gap-2">
|
||||
<svg className="h-5 w-5 flex-shrink-0 text-green-500" fill="currentColor" viewBox="0 0 20 20">
|
||||
<path
|
||||
fillRule="evenodd"
|
||||
d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z"
|
||||
clipRule="evenodd"
|
||||
/>
|
||||
</svg>
|
||||
<span className="text-gray-700">{benefit}</span>
|
||||
</li>
|
||||
))}
|
||||
</ul>
|
||||
</Card>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<GrowthLinksSection
|
||||
eyebrow="Tracking-led workflows"
|
||||
title="Where scan visibility matters most"
|
||||
@@ -406,30 +471,47 @@ export default function QRCodeTrackingPage() {
|
||||
cluster="qr-tracking"
|
||||
/>
|
||||
|
||||
{/* 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
|
||||
</h2>
|
||||
<p className="text-xl mb-8 text-primary-100">
|
||||
<section className="bg-gradient-to-r from-primary-600 to-purple-600 py-20 text-white">
|
||||
<div className="container mx-auto max-w-4xl px-4 text-center sm:px-6 lg:px-8">
|
||||
<h2 className="mb-6 text-4xl font-bold">Start tracking your QR codes today</h2>
|
||||
<p className="mb-8 text-xl text-primary-100">
|
||||
Measure scans with enough context to improve the next placement, campaign, or printed workflow.
|
||||
</p>
|
||||
<div className="flex flex-col sm:flex-row gap-4 justify-center">
|
||||
<TrackedCtaLink href="/signup" ctaLabel="Create Free Account" ctaLocation="footer_primary" pageType="commercial" cluster="qr-tracking">
|
||||
<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">
|
||||
<div className="flex flex-col justify-center gap-4 sm:flex-row">
|
||||
<TrackedCtaLink
|
||||
href="/signup"
|
||||
ctaLabel="Create Free Account"
|
||||
ctaLocation="footer_primary"
|
||||
pageType="commercial"
|
||||
cluster="qr-tracking"
|
||||
>
|
||||
<Button
|
||||
size="lg"
|
||||
variant="secondary"
|
||||
className="w-full bg-white px-8 py-4 text-lg text-primary-600 hover:bg-gray-100 sm:w-auto"
|
||||
>
|
||||
Create Free Account
|
||||
</Button>
|
||||
</TrackedCtaLink>
|
||||
<TrackedCtaLink href="/pricing" ctaLabel="View Pricing" ctaLocation="footer_secondary" pageType="commercial" cluster="qr-tracking">
|
||||
<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">
|
||||
View Pricing
|
||||
<TrackedCtaLink
|
||||
href="/dynamic-qr-code-generator"
|
||||
ctaLabel="Create Dynamic QR Code"
|
||||
ctaLocation="footer_secondary"
|
||||
pageType="commercial"
|
||||
cluster="qr-tracking"
|
||||
>
|
||||
<Button
|
||||
size="lg"
|
||||
variant="outline"
|
||||
className="w-full border-white px-8 py-4 text-lg text-white hover:bg-white/10 sm:w-auto"
|
||||
>
|
||||
Create Dynamic QR Code
|
||||
</Button>
|
||||
</TrackedCtaLink>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
</>
|
||||
);
|
||||
}
|
||||
</div>
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
||||
@@ -6,9 +6,9 @@ import { StaticVsDynamic } from '@/components/marketing/StaticVsDynamic';
|
||||
import { Pricing } from '@/components/marketing/Pricing';
|
||||
import en from '@/i18n/en.json';
|
||||
|
||||
export const metadata: Metadata = {
|
||||
title: 'QR Master Features | Tracking, Analytics & Bulk Generation',
|
||||
description: 'Explore QR Master features: Dynamic QR codes, real-time analytics, bulk generation, custom branding, and API access.',
|
||||
export const metadata: Metadata = {
|
||||
title: 'QR Master Features | Tracking, Analytics & Bulk Generation',
|
||||
description: 'Explore QR Master features: dynamic QR codes, scan analytics, bulk generation, custom branding, and print-ready exports.',
|
||||
alternates: {
|
||||
canonical: 'https://www.qrmaster.net/features',
|
||||
},
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
import React from 'react';
|
||||
import { Card } from '@/components/ui/Card';
|
||||
import { Check, X } from 'lucide-react';
|
||||
import React from 'react';
|
||||
import { Card } from '@/components/ui/Card';
|
||||
import { Check, X } from 'lucide-react';
|
||||
|
||||
interface ComparisonItem {
|
||||
label: string;
|
||||
@@ -22,86 +22,93 @@ interface AnswerFirstBlockProps {
|
||||
className?: string; // Add className prop
|
||||
}
|
||||
|
||||
export const AnswerFirstBlock: React.FC<AnswerFirstBlockProps> = ({
|
||||
whatIsIt,
|
||||
whenToUse,
|
||||
comparison,
|
||||
howTo,
|
||||
className,
|
||||
}) => {
|
||||
return (
|
||||
<div className={`my-8 space-y-8 ${className || ''}`}>
|
||||
{/* 1. Definition */}
|
||||
<div className="prose max-w-none">
|
||||
<h2 className="text-2xl font-bold text-gray-900 mb-4">Quick Summary</h2>
|
||||
<p className="text-lg text-gray-700 leading-relaxed font-medium">
|
||||
{whatIsIt}
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div className="grid md:grid-cols-2 lg:grid-cols-3 gap-6">
|
||||
{/* 2. Usage Reasons */}
|
||||
<Card className="p-6 bg-blue-50 border-blue-100">
|
||||
<h3 className="font-semibold text-lg text-blue-900 mb-4">When to use this?</h3>
|
||||
<ul className="space-y-3">
|
||||
{whenToUse.map((item, idx) => (
|
||||
<li key={idx} className="flex items-start gap-3 text-blue-800">
|
||||
<span className="mt-1.5 w-1.5 h-1.5 rounded-full bg-blue-500 shrink-0" />
|
||||
export const AnswerFirstBlock: React.FC<AnswerFirstBlockProps> = ({
|
||||
whatIsIt,
|
||||
whenToUse,
|
||||
comparison,
|
||||
howTo,
|
||||
className,
|
||||
}) => {
|
||||
const leftValueFor = (item: ComparisonItem) => item.text ?? 'No';
|
||||
|
||||
return (
|
||||
<section className={`my-8 space-y-8 ${className || ''}`} aria-label="Quick answer">
|
||||
<div className="prose max-w-none">
|
||||
<h2 className="text-2xl font-bold text-gray-900 mb-4">Quick Summary</h2>
|
||||
<p className="text-lg text-gray-700 leading-relaxed font-medium">
|
||||
{whatIsIt}
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div className="grid md:grid-cols-2 lg:grid-cols-3 gap-6">
|
||||
<Card className="p-6 bg-blue-50 border-blue-100">
|
||||
<h3 className="font-semibold text-lg text-blue-900 mb-4">When to use this?</h3>
|
||||
<ul className="space-y-3">
|
||||
{whenToUse.map((item, idx) => (
|
||||
<li key={idx} className="flex items-start gap-3 text-blue-800">
|
||||
<span className="mt-1.5 w-1.5 h-1.5 rounded-full bg-blue-500 shrink-0" />
|
||||
{item}
|
||||
</li>
|
||||
))}
|
||||
</ul>
|
||||
</Card>
|
||||
|
||||
{/* 3. Mini Comparison */}
|
||||
<Card className="p-6 bg-white border-gray-200">
|
||||
<h3 className="font-semibold text-lg text-gray-900 mb-4">Comparison</h3>
|
||||
<div className="space-y-4 text-sm">
|
||||
<div className="grid grid-cols-3 gap-2 font-medium text-gray-500 text-xs uppercase tracking-wider pb-2 border-b">
|
||||
<span>Feature</span>
|
||||
<span className="text-center">{comparison.leftTitle}</span>
|
||||
<span className="text-center">{comparison.rightTitle}</span>
|
||||
</div>
|
||||
{comparison.items.map((item, idx) => (
|
||||
<div key={idx} className="grid grid-cols-3 gap-2 items-center">
|
||||
<span className="text-gray-700 font-medium">{item.label}</span>
|
||||
<div className="flex justify-center">
|
||||
{/* Logic for Left Side (usually Static/Free) might be false/X or true/Check based on context.
|
||||
But user said "Static vs Dynamic / Free vs Pro".
|
||||
Let's assume the comparison object passes explicit logic or we simplify.
|
||||
For now, assuming ComparisonItem has a single boolean for the 'right' side vs left?
|
||||
Actually, let's make it simpler: Items have label, and we show check/x for both columns?
|
||||
Wait, the user requirement is "Mini-Vergleich ... (3-5 Zeilen)".
|
||||
Let's keep it simple: Feature | A | B
|
||||
*/}
|
||||
{/* Placeholder logic: Assuming 'value' applies to the Right Side (Pro/Dynamic) usually being better?
|
||||
Actually, let's request structure: `leftValue`, `rightValue`.
|
||||
*/}
|
||||
{item.text ? <span className="text-gray-600">{item.text}</span> : <X className="w-4 h-4 text-gray-400" />}
|
||||
</div>
|
||||
<div className="flex justify-center">
|
||||
{item.value ? <Check className="w-4 h-4 text-green-600" /> : <X className="w-4 h-4 text-red-400" />}
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</Card>
|
||||
|
||||
{/* 4. How To Steps */}
|
||||
<Card className="p-6 bg-green-50 border-green-100">
|
||||
<h3 className="font-semibold text-lg text-green-900 mb-4">How it works</h3>
|
||||
<ol className="space-y-4">
|
||||
{howTo.steps.map((step, idx) => (
|
||||
<li key={idx} className="flex gap-3 text-green-800">
|
||||
))}
|
||||
</ul>
|
||||
</Card>
|
||||
|
||||
<Card className="p-6 bg-white border-gray-200">
|
||||
<h3 className="font-semibold text-lg text-gray-900 mb-4">Comparison</h3>
|
||||
<div className="overflow-x-auto">
|
||||
<table className="w-full text-sm">
|
||||
<thead>
|
||||
<tr className="border-b text-xs uppercase tracking-wider text-gray-500">
|
||||
<th scope="col" className="py-2 pr-3 text-left font-medium">Feature</th>
|
||||
<th scope="col" className="px-3 py-2 text-center font-medium">{comparison.leftTitle}</th>
|
||||
<th scope="col" className="pl-3 py-2 text-center font-medium">{comparison.rightTitle}</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{comparison.items.map((item, idx) => (
|
||||
<tr key={idx} className="border-b last:border-b-0">
|
||||
<th scope="row" className="py-3 pr-3 text-left font-medium text-gray-700">
|
||||
{item.label}
|
||||
</th>
|
||||
<td className="px-3 py-3 text-center text-gray-600">
|
||||
{leftValueFor(item)}
|
||||
</td>
|
||||
<td className="pl-3 py-3">
|
||||
<div className="flex items-center justify-center text-gray-700">
|
||||
{item.value ? (
|
||||
<>
|
||||
<Check className="w-4 h-4 text-green-600" aria-hidden="true" />
|
||||
<span className="sr-only">Included</span>
|
||||
</>
|
||||
) : (
|
||||
<>
|
||||
<X className="w-4 h-4 text-red-400" aria-hidden="true" />
|
||||
<span className="sr-only">Not included</span>
|
||||
</>
|
||||
)}
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
))}
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</Card>
|
||||
|
||||
<Card className="p-6 bg-green-50 border-green-100">
|
||||
<h3 className="font-semibold text-lg text-green-900 mb-4">How it works</h3>
|
||||
<ol className="space-y-4">
|
||||
{howTo.steps.map((step, idx) => (
|
||||
<li key={idx} className="flex gap-3 text-green-800">
|
||||
<span className="flex-shrink-0 w-6 h-6 rounded-full bg-green-200 text-green-700 flex items-center justify-center text-sm font-bold">
|
||||
{idx + 1}
|
||||
</span>
|
||||
<span>{step}</span>
|
||||
</li>
|
||||
))}
|
||||
</ol>
|
||||
</Card>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
</ol>
|
||||
</Card>
|
||||
</div>
|
||||
</section>
|
||||
);
|
||||
};
|
||||
|
||||
Reference in New Issue
Block a user