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

MVP ready to test

Browse Source
This commit is contained in:
Timo Knuth
2025-10-28 17:20:37 +01:00
parent 91b78cb284
commit 2f0208ebf9
48 changed files with 6258 additions and 110 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1707
src/app/(marketing)/blog/[slug]/page.tsx
View File

File diff suppressed because it is too large Load Diff

49
src/app/(marketing)/blog/page.tsx
View File

@@ -45,32 +45,41 @@ export async function generateMetadata(): Promise<Metadata> {
}
const blogPosts = [
{
slug: 'qr-code-tracking-guide-2025',
title: 'QR Code Tracking: Complete Guide 2025',
excerpt: 'Learn how to track QR code scans with real-time analytics. Compare free vs paid tracking tools, setup Google Analytics, and measure ROI.',
date: 'October 18, 2025',
readTime: '12 Min',
category: 'Tracking & Analytics',
image: '/blog/1-hero.png',
},
{
slug: 'dynamic-vs-static-qr-codes',
title: 'Dynamic vs Static QR Codes: Which Should You Use?',
excerpt: 'Understand the difference between static and dynamic QR codes. Learn when to use each type, pros/cons, and how dynamic QR codes save money.',
date: 'October 17, 2025',
readTime: '10 Min',
category: 'QR Code Basics',
image: '/blog/2-hero.png',
},
{
slug: 'bulk-qr-code-generator-excel',
title: 'How to Generate Bulk QR Codes from Excel',
excerpt: 'Generate hundreds of QR codes from Excel or CSV files in minutes. Step-by-step guide with templates, best practices, and free tools.',
date: 'October 16, 2025',
readTime: '13 Min',
category: 'Bulk Generation',
image: '/blog/3-hero.png',
},
{
slug: 'qr-code-analytics',
title: 'QR Code Analytics: Track, Measure & Optimize Campaigns',
excerpt: 'Learn how to leverage scan analytics, campaign tracking, and dashboard insights to maximize QR code ROI.',
date: 'October 16, 2025',
readTime: '8 Min',
readTime: '15 Min',
category: 'Analytics',
image: 'https://images.unsplash.com/photo-1460925895917-afdab827c52f?w=800&q=80',
},
{
slug: 'qr-codes-im-restaurant',
title: 'QR Codes in Restaurants: The Digital Menu Revolution',
excerpt: 'Discover how QR codes are revolutionizing the restaurant industry and what benefits they offer for restaurants and guests.',
date: 'January 15, 2025',
readTime: '5 Min',
category: 'Restaurant',
image: 'https://images.unsplash.com/photo-1555396273-367ea4eb4db5?w=800&q=80',
},
{
slug: 'dynamische-vs-statische-qr-codes',
title: 'Dynamic vs Static QR Codes: What\'s the Difference?',
excerpt: 'A comprehensive comparison between dynamic and static QR codes and when you should use each type.',
date: 'January 10, 2025',
readTime: '3 Min',
category: 'Basics',
image: 'https://images.unsplash.com/photo-1603791440384-56cd371ee9a7?w=800&q=80',
image: '/blog/4-hero.png',
},
];

387
src/app/(marketing)/bulk-qr-code-generator/page.tsx Normal file
View File

@@ -0,0 +1,387 @@
import React from 'react';
import type { Metadata } from 'next';
import Link from 'next/link';
import { Button } from '@/components/ui/Button';
import { Card } from '@/components/ui/Card';
export const metadata: Metadata = {
title: 'Bulk QR Code Generator - Create 1000s of QR Codes from Excel | QR Master',
description: 'Generate hundreds of QR codes at once from CSV or Excel files. Perfect for products, events, inventory management. Free bulk QR code generator with custom branding.',
keywords: 'bulk qr code generator, batch qr code, qr code from excel, csv qr code generator, mass qr code generation, bulk qr codes free',
openGraph: {
title: 'Bulk QR Code Generator - Create 1000s of QR Codes from Excel',
description: 'Generate hundreds of QR codes at once from CSV or Excel files. Perfect for products, events, and inventory.',
type: 'website',
},
};
export default function BulkQRCodeGeneratorPage() {
const bulkFeatures = [
{
icon: '📊',
title: 'Excel & CSV Import',
description: 'Upload Excel or CSV files to generate hundreds of QR codes in seconds. Simple column mapping.',
},
{
icon: '⚡',
title: 'Fast Processing',
description: 'Generate up to 1000 QR codes in under a minute. Optimized for speed and reliability.',
},
{
icon: '🎨',
title: 'Unified Branding',
description: 'Apply your logo, colors, and design to all QR codes at once. Consistent brand identity.',
},
{
icon: '📦',
title: 'Batch Download',
description: 'Download all QR codes as a ZIP file with custom filenames. Organized and ready to use.',
},
{
icon: '📈',
title: 'Individual Tracking',
description: 'Track each QR code separately. See which products or locations perform best.',
},
{
icon: '🔄',
title: 'Update in Bulk',
description: 'Edit multiple QR codes at once. Save time when updating campaigns or product info.',
},
];
const useCases = [
{
title: 'Product Labels',
icon: '🏷️',
description: 'Generate unique QR codes for each product SKU. Link to manuals, warranty info, or product pages.',
stats: ['1000+ products', 'Individual tracking', 'Custom naming'],
},
{
title: 'Event Tickets',
icon: '🎟️',
description: 'Create unique QR codes for every attendee. Enable fast check-ins and track attendance.',
stats: ['Unique per ticket', 'Real-time validation', 'Analytics dashboard'],
},
{
title: 'Asset Management',
icon: '💼',
description: 'Tag equipment, furniture, and assets with unique QR codes. Track location and maintenance.',
stats: ['Equipment tracking', 'Maintenance logs', 'Location history'],
},
{
title: 'Marketing Campaigns',
icon: '📢',
description: 'Generate codes for different locations or channels. Track which campaigns perform best.',
stats: ['Location-specific', 'Campaign tracking', 'ROI measurement'],
},
];
const howItWorks = [
{
step: 1,
title: 'Prepare Your File',
description: 'Create an Excel or CSV file with your URLs, names, and any custom data.',
example: 'Product Name | URL | SKU',
},
{
step: 2,
title: 'Upload & Map',
description: 'Upload your file and map columns to QR code fields. Preview before generating.',
example: 'Map columns: Name → Title, URL → Destination',
},
{
step: 3,
title: 'Customize Design',
description: 'Apply logo, colors, and branding to all QR codes at once. Consistent look.',
example: 'Add logo, set colors, choose frame',
},
{
step: 4,
title: 'Generate & Download',
description: 'Click generate and download all QR codes as PNG files in a ZIP archive.',
example: 'product-001.png, product-002.png, ...',
},
];
const fileFormat = [
{ column: 'name', description: 'QR code title/label', required: true },
{ column: 'url', description: 'Destination URL', required: true },
{ column: 'description', description: 'Optional description', required: false },
{ column: 'tags', description: 'Comma-separated tags', required: false },
];
return (
<div className="min-h-screen bg-white">
{/* Hero Section */}
<section className="relative overflow-hidden bg-gradient-to-br from-green-50 via-white to-blue-50 py-20">
<div className="container mx-auto px-4 sm:px-6 lg:px-8 max-w-7xl">
<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-green-100 text-green-800 px-4 py-2 rounded-full text-sm font-semibold">
<span>⚡</span>
<span>Generate 1000s in Minutes</span>
</div>
<h1 className="text-5xl lg:text-6xl font-bold text-gray-900 leading-tight">
Bulk QR Code Generator
</h1>
<p className="text-xl text-gray-600 leading-relaxed">
Create hundreds or thousands of QR codes from Excel or CSV files. Perfect for products, events, inventory, and marketing campaigns. Fast, efficient, and with your branding.
</p>
<div className="space-y-3">
{[
'Upload Excel or CSV files',
'Generate up to 1000 QR codes',
'Custom branding on all codes',
'Download as organized ZIP',
].map((feature, index) => (
<div key={index} className="flex items-center space-x-3">
<div className="flex-shrink-0 w-5 h-5 bg-green-500 rounded-full flex items-center justify-center">
<svg className="w-3 h-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 sm:flex-row gap-4">
<Link href="/signup">
<Button size="lg" className="text-lg px-8 py-4 w-full sm:w-auto">
Start Bulk Generation
</Button>
</Link>
<Link href="/create">
<Button variant="outline" size="lg" className="text-lg px-8 py-4 w-full sm:w-auto">
Try Single QR First
</Button>
</Link>
</div>
</div>
{/* Visual Example */}
<div className="relative">
<Card className="p-6 shadow-2xl">
<h3 className="font-semibold text-lg mb-4">Upload Your File</h3>
<div className="bg-gray-50 border-2 border-dashed border-gray-300 rounded-lg p-8 text-center mb-4">
<div className="text-4xl mb-2">📊</div>
<p className="text-gray-600 font-medium mb-1">products.xlsx</p>
<p className="text-sm text-gray-500">1,247 rows ready</p>
</div>
<div className="flex items-center justify-center mb-4">
<svg className="w-6 h-6 text-green-500" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M19 14l-7 7m0 0l-7-7m7 7V3" />
</svg>
</div>
<div className="grid grid-cols-4 gap-2">
{[1, 2, 3, 4, 5, 6, 7, 8].map((i) => (
<div key={i} className="aspect-square bg-gray-200 rounded flex items-center justify-center text-xs text-gray-500">
QR {i}
</div>
))}
</div>
<p className="text-center text-sm text-gray-600 mt-4">
+ 1,239 more codes
</p>
</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">
1000s at Once!
</div>
</div>
</div>
</div>
</section>
{/* 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 Bulk Generation Features
</h2>
<p className="text-xl text-gray-600 max-w-3xl mx-auto">
Everything you need to create and manage QR codes at scale
</p>
</div>
<div className="grid md:grid-cols-2 lg:grid-cols-3 gap-8">
{bulkFeatures.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>
{/* How It Works */}
<section className="py-20">
<div className="container mx-auto px-4 sm:px-6 lg:px-8 max-w-6xl">
<div className="text-center mb-16">
<h2 className="text-4xl font-bold text-gray-900 mb-4">
How Bulk QR Generation Works
</h2>
<p className="text-xl text-gray-600">
Simple 4-step process to create hundreds of QR codes
</p>
</div>
<div className="space-y-8">
{howItWorks.map((item, index) => (
<Card key={index} className="p-8">
<div className="flex items-start space-x-6">
<div className="flex-shrink-0 w-16 h-16 bg-primary-100 rounded-full flex items-center justify-center">
<span className="text-2xl font-bold text-primary-600">{item.step}</span>
</div>
<div className="flex-1">
<h3 className="text-2xl font-bold text-gray-900 mb-2">
{item.title}
</h3>
<p className="text-gray-600 mb-3">
{item.description}
</p>
<div className="bg-blue-50 border-l-4 border-blue-500 p-3">
<p className="text-sm text-gray-700 font-mono">
{item.example}
</p>
</div>
</div>
</div>
</Card>
))}
</div>
</div>
</section>
{/* File Format Guide */}
<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">
CSV/Excel File Format
</h2>
<p className="text-xl text-gray-600">
Simple file structure for bulk QR code generation
</p>
</div>
<Card className="overflow-hidden shadow-xl mb-8">
<table className="w-full">
<thead className="bg-gray-100">
<tr>
<th className="px-6 py-4 text-left text-gray-900 font-semibold">Column</th>
<th className="px-6 py-4 text-left text-gray-900 font-semibold">Description</th>
<th className="px-6 py-4 text-center text-gray-900 font-semibold">Required</th>
</tr>
</thead>
<tbody className="divide-y divide-gray-200">
{fileFormat.map((field, index) => (
<tr key={index}>
<td className="px-6 py-4">
<code className="bg-gray-100 px-2 py-1 rounded text-sm font-mono text-gray-900">
{field.column}
</code>
</td>
<td className="px-6 py-4 text-gray-600">{field.description}</td>
<td className="px-6 py-4 text-center">
{field.required ? (
<span className="text-red-500 font-semibold">Yes</span>
) : (
<span className="text-gray-400">No</span>
)}
</td>
</tr>
))}
</tbody>
</table>
</Card>
<Card className="p-6 bg-blue-50 border border-blue-200">
<h4 className="font-semibold text-gray-900 mb-2">Example CSV:</h4>
<pre className="bg-white p-4 rounded border border-blue-200 overflow-x-auto text-sm font-mono">
{`name,url,description,tags
Product A,https://example.com/product-a,Premium Widget,electronics,featured
Product B,https://example.com/product-b,Standard Widget,electronics
Product C,https://example.com/product-c,Budget Widget,electronics,sale`}
</pre>
</Card>
</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">
Bulk QR Code Use Cases
</h2>
<p className="text-xl text-gray-600 max-w-3xl mx-auto">
Industries and scenarios where bulk generation shines
</p>
</div>
<div className="grid md:grid-cols-2 gap-8">
{useCases.map((useCase, index) => (
<Card key={index} className="p-8">
<div className="flex items-start space-x-4">
<div className="text-4xl">{useCase.icon}</div>
<div className="flex-1">
<h3 className="text-2xl font-bold text-gray-900 mb-3">
{useCase.title}
</h3>
<p className="text-gray-600 mb-4">
{useCase.description}
</p>
<ul className="space-y-2">
{useCase.stats.map((stat, 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">{stat}</span>
</li>
))}
</ul>
</div>
</div>
</Card>
))}
</div>
</div>
</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
</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>
<div className="flex flex-col sm:flex-row gap-4 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">
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">
View Pricing
</Button>
</Link>
</div>
</div>
</section>
</div>
);
}

393
src/app/(marketing)/dynamic-qr-code-generator/page.tsx Normal file
View File

@@ -0,0 +1,393 @@
import React from 'react';
import type { Metadata } from 'next';
import Link from 'next/link';
import { Button } from '@/components/ui/Button';
import { Card } from '@/components/ui/Card';
export const metadata: Metadata = {
title: 'Dynamic QR Code Generator - Edit QR Codes Anytime | QR Master',
description: 'Create dynamic QR codes that can be edited after printing. Change destination URL, track scans, and update content without reprinting. Free dynamic QR code generator.',
keywords: 'dynamic qr code generator, editable qr code, dynamic qr code, free dynamic qr code, qr code generator dynamic, best dynamic qr code generator',
openGraph: {
title: 'Dynamic QR Code Generator - Edit QR Codes Anytime | QR Master',
description: 'Create dynamic QR codes that can be edited after printing. Change URLs, track scans, and update content anytime.',
type: 'website',
},
};
export default function DynamicQRCodeGeneratorPage() {
const dynamicFeatures = [
{
icon: '✏️',
title: 'Edit Anytime',
description: 'Change the destination URL or content after your QR code is printed. No need to reprint!',
},
{
icon: '📊',
title: 'Advanced Analytics',
description: 'Track scans, locations, devices, and time patterns. Get insights to optimize your campaigns.',
},
{
icon: '🎨',
title: 'Full Customization',
description: 'Add your logo, brand colors, custom shapes, and frames. Make your QR code stand out.',
},
{
icon: '🔄',
title: 'A/B Testing',
description: 'Test different landing pages without changing the QR code. Optimize conversions easily.',
},
{
icon: '⏰',
title: 'Schedule Content',
description: 'Set time-based redirects. Show different content based on day, time, or season.',
},
{
icon: '🌍',
title: 'Geo-Targeting',
description: 'Redirect users to different pages based on their location. Perfect for multi-region campaigns.',
},
];
const staticVsDynamic = [
{
feature: 'Edit After Printing',
static: false,
dynamic: true,
},
{
feature: 'Track Scans',
static: false,
dynamic: true,
},
{
feature: 'A/B Testing',
static: false,
dynamic: true,
},
{
feature: 'Analytics Dashboard',
static: false,
dynamic: true,
},
{
feature: 'Custom Domain',
static: false,
dynamic: true,
},
{
feature: 'Password Protection',
static: false,
dynamic: true,
},
{
feature: 'Expiration Date',
static: false,
dynamic: true,
},
];
const useCases = [
{
title: 'Marketing Campaigns',
icon: '📢',
description: 'Update campaign landing pages without reprinting materials. Test different offers and track performance.',
example: 'Print QR codes on billboards, then test different promotions weekly.',
},
{
title: 'Product Packaging',
icon: '📦',
description: 'Link to product manuals, videos, or registration forms. Update information as products evolve.',
example: 'Update software download links without changing packaging.',
},
{
title: 'Business Cards',
icon: '💼',
description: 'Keep your contact information current. Update your vCard details without printing new cards.',
example: 'Change job title, phone, or email anytime.',
},
{
title: 'Restaurant Menus',
icon: '🍽️',
description: 'Update menu items, prices, and specials daily. Track which items get the most views.',
example: 'Show daily specials without printing new menus.',
},
];
return (
<div className="min-h-screen bg-white">
{/* Hero Section */}
<section className="relative overflow-hidden bg-gradient-to-br from-purple-50 via-white to-blue-50 py-20">
<div className="container mx-auto px-4 sm:px-6 lg:px-8 max-w-7xl">
<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-purple-100 text-purple-800 px-4 py-2 rounded-full text-sm font-semibold">
<span>✨</span>
<span>Edit After Printing</span>
</div>
<h1 className="text-5xl lg:text-6xl font-bold text-gray-900 leading-tight">
Dynamic QR Code Generator
</h1>
<p className="text-xl text-gray-600 leading-relaxed">
Create QR codes you can edit anytime - even after printing. Change URLs, track scans, and update content without reprinting. The smart choice for businesses.
</p>
<div className="space-y-3">
{[
'Edit content after printing',
'Track scans and analytics',
'A/B test without reprinting',
'Custom branding and design',
].map((feature, index) => (
<div key={index} className="flex items-center space-x-3">
<div className="flex-shrink-0 w-5 h-5 bg-green-500 rounded-full flex items-center justify-center">
<svg className="w-3 h-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 sm:flex-row gap-4">
<Link href="/signup">
<Button size="lg" className="text-lg px-8 py-4 w-full sm:w-auto">
Create Dynamic QR Code
</Button>
</Link>
<Link href="/pricing">
<Button variant="outline" size="lg" className="text-lg px-8 py-4 w-full sm:w-auto">
View Pricing
</Button>
</Link>
</div>
</div>
{/* Visual Demo */}
<div className="relative">
<Card className="p-8 shadow-2xl">
<div className="text-center mb-6">
<div className="inline-block bg-gray-200 rounded-lg p-8">
<div className="w-48 h-48 bg-black rounded-lg flex items-center justify-center">
<span className="text-white text-sm font-mono">QR Code</span>
</div>
</div>
</div>
<div className="space-y-3 text-sm">
<div className="flex items-center justify-between p-3 bg-blue-50 rounded-lg">
<span className="text-gray-700">Current URL:</span>
<span className="text-blue-600 font-mono">summer-sale.com</span>
</div>
<div className="flex items-center justify-center">
<svg className="w-6 h-6 text-green-500" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M19 14l-7 7m0 0l-7-7m7 7V3" />
</svg>
</div>
<div className="flex items-center justify-between p-3 bg-green-50 rounded-lg">
<span className="text-gray-700">Updated URL:</span>
<span className="text-green-600 font-mono">fall-sale.com</span>
</div>
</div>
<p className="text-center text-sm text-gray-600 mt-4">
Same QR code, different destination!
</p>
</Card>
<div className="absolute -top-4 -right-4 bg-purple-500 text-white px-4 py-2 rounded-full text-sm font-semibold shadow-lg">
No Reprint Needed!
</div>
</div>
</div>
</div>
</section>
{/* Static vs Dynamic */}
<section className="py-20 bg-gray-50">
<div className="container mx-auto px-4 sm:px-6 lg:px-8 max-w-6xl">
<div className="text-center mb-16">
<h2 className="text-4xl font-bold text-gray-900 mb-4">
Dynamic vs Static QR Codes
</h2>
<p className="text-xl text-gray-600 max-w-3xl mx-auto">
Understand why dynamic QR codes are the smart choice for businesses
</p>
</div>
<Card className="overflow-hidden shadow-xl">
<div className="grid md:grid-cols-3">
<div className="p-6 bg-white">
<h3 className="font-semibold text-lg mb-4">Feature</h3>
{staticVsDynamic.map((item, index) => (
<div key={index} className="py-4 border-b last:border-b-0">
<p className="text-gray-900 font-medium">{item.feature}</p>
</div>
))}
</div>
<div className="p-6 bg-gray-50">
<h3 className="font-semibold text-lg mb-4 text-gray-600">Static QR</h3>
{staticVsDynamic.map((item, index) => (
<div key={index} className="py-4 border-b last:border-b-0 flex items-center justify-center">
{item.static ? (
<span className="text-green-500 text-2xl">✓</span>
) : (
<span className="text-red-500 text-2xl">✗</span>
)}
</div>
))}
</div>
<div className="p-6 bg-primary-50">
<h3 className="font-semibold text-lg mb-4 text-primary-600">Dynamic QR</h3>
{staticVsDynamic.map((item, index) => (
<div key={index} className="py-4 border-b last:border-b-0 flex items-center justify-center">
{item.dynamic ? (
<span className="text-green-500 text-2xl">✓</span>
) : (
<span className="text-red-500 text-2xl">✗</span>
)}
</div>
))}
</div>
</div>
</Card>
</div>
</section>
{/* Features */}
<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">
Powerful Dynamic QR Features
</h2>
<p className="text-xl text-gray-600 max-w-3xl mx-auto">
Everything you need to create, manage, and optimize your QR code campaigns
</p>
</div>
<div className="grid md:grid-cols-2 lg:grid-cols-3 gap-8">
{dynamicFeatures.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 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">
How Businesses Use Dynamic QR Codes
</h2>
<p className="text-xl text-gray-600 max-w-3xl mx-auto">
Real-world examples of dynamic QR code applications
</p>
</div>
<div className="grid md:grid-cols-2 gap-8">
{useCases.map((useCase, index) => (
<Card key={index} className="p-8">
<div className="flex items-start space-x-4">
<div className="text-4xl">{useCase.icon}</div>
<div className="flex-1">
<h3 className="text-2xl font-bold text-gray-900 mb-3">
{useCase.title}
</h3>
<p className="text-gray-600 mb-4">
{useCase.description}
</p>
<div className="bg-blue-50 border-l-4 border-blue-500 p-4">
<p className="text-sm text-gray-700">
<strong>Example:</strong> {useCase.example}
</p>
</div>
</div>
</div>
</Card>
))}
</div>
</div>
</section>
{/* How It Works */}
<section className="py-20">
<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">
How Dynamic QR Codes Work
</h2>
<p className="text-xl text-gray-600">
Simple technology, powerful results
</p>
</div>
<div className="grid md:grid-cols-3 gap-8">
<Card className="p-6 text-center">
<div className="w-16 h-16 bg-primary-100 rounded-full flex items-center justify-center mx-auto mb-4">
<span className="text-2xl font-bold text-primary-600">1</span>
</div>
<h3 className="text-xl font-semibold text-gray-900 mb-2">Create QR Code</h3>
<p className="text-gray-600">
Generate a dynamic QR code with a short redirect URL
</p>
</Card>
<Card className="p-6 text-center">
<div className="w-16 h-16 bg-primary-100 rounded-full flex items-center justify-center mx-auto mb-4">
<span className="text-2xl font-bold text-primary-600">2</span>
</div>
<h3 className="text-xl font-semibold text-gray-900 mb-2">Print Anywhere</h3>
<p className="text-gray-600">
Add to packaging, posters, cards, or anywhere you need
</p>
</Card>
<Card className="p-6 text-center">
<div className="w-16 h-16 bg-primary-100 rounded-full flex items-center justify-center mx-auto mb-4">
<span className="text-2xl font-bold text-primary-600">3</span>
</div>
<h3 className="text-xl font-semibold text-gray-900 mb-2">Update Anytime</h3>
<p className="text-gray-600">
Change the destination URL from your dashboard whenever needed
</p>
</Card>
</div>
</div>
</section>
{/* CTA Section */}
<section className="py-20 bg-gradient-to-r from-purple-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">
Start Creating Dynamic QR Codes Today
</h2>
<p className="text-xl mb-8 text-purple-100">
Join thousands of businesses who never worry about reprinting QR codes again
</p>
<div className="flex flex-col sm:flex-row gap-4 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-purple-600 hover:bg-gray-100">
Get Started Free
</Button>
</Link>
<Link href="/create">
<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">
Create QR Code Now
</Button>
</Link>
</div>
</div>
</section>
</div>
);
}

306
src/app/(marketing)/qr-code-tracking/page.tsx Normal file
View File

@@ -0,0 +1,306 @@
import React from 'react';
import type { Metadata } from 'next';
import Link from 'next/link';
import { Button } from '@/components/ui/Button';
import { Card } from '@/components/ui/Card';
export const metadata: Metadata = {
title: 'QR Code Tracking & Analytics - Track Every Scan | QR Master',
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',
openGraph: {
title: 'QR Code Tracking & Analytics - Track Every Scan | QR Master',
description: 'Track QR code scans with real-time analytics. Monitor location, device, time, and user behavior.',
type: 'website',
},
};
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 },
];
return (
<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">
<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>
<div className="flex flex-col sm:flex-row gap-4">
<Link href="/signup">
<Button size="lg" className="text-lg px-8 py-4 w-full sm:w-auto">
Start Tracking Free
</Button>
</Link>
<Link href="/create">
<Button variant="outline" size="lg" className="text-lg px-8 py-4 w-full sm:w-auto">
Create Trackable QR Code
</Button>
</Link>
</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>Unlimited scans</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">
<span className="text-gray-600">Total Scans</span>
<span className="text-2xl font-bold text-primary-600">12,547</span>
</div>
<div className="flex justify-between items-center pb-3 border-b">
<span className="text-gray-600">Unique Users</span>
<span className="text-2xl font-bold text-primary-600">8,392</span>
</div>
<div className="flex justify-between items-center pb-3 border-b">
<span className="text-gray-600">Top Location</span>
<span className="font-semibold">🇩🇪 Germany</span>
</div>
<div className="flex justify-between items-center">
<span className="text-gray-600">Top Device</span>
<span className="font-semibold">📱 iPhone</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>
</Card>
</div>
</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
</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>
<div className="flex flex-col sm:flex-row gap-4 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">
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">
View Pricing
</Button>
</Link>
</div>
</div>
</section>
</div>
);
}