Wichige änderung an DB

This commit is contained in:
Timo Knuth
2025-11-05 12:02:59 +01:00
parent 2f0208ebf9
commit f31992b952
37 changed files with 2774 additions and 2596 deletions

View File

@@ -3,16 +3,31 @@ import type { Metadata } from 'next';
import Link from 'next/link';
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';
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',
alternates: {
canonical: 'https://www.qrmaster.com/qr-code-tracking',
languages: {
'x-default': 'https://www.qrmaster.com/qr-code-tracking',
en: 'https://www.qrmaster.com/qr-code-tracking',
},
},
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.',
url: 'https://www.qrmaster.com/qr-code-tracking',
type: 'website',
},
twitter: {
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.',
},
};
export default function QRCodeTrackingPage() {
@@ -82,225 +97,302 @@ export default function QRCodeTrackingPage() {
{ feature: 'API Access', free: false, qrMaster: true },
];
const softwareSchema = {
'@context': 'https://schema.org',
'@type': 'SoftwareApplication',
'@id': 'https://www.qrmaster.com/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',
},
aggregateRating: {
'@type': 'AggregateRating',
ratingValue: '4.8',
ratingCount: '1250',
},
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.com/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.com/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.com/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' },
];
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>
<>
<SeoJsonLd data={[softwareSchema, howToSchema, breadcrumbSchema(breadcrumbItems)]} />
<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>
<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>
<h1 className="text-5xl lg:text-6xl font-bold text-gray-900 leading-tight">
Track Every QR Code Scan with Powerful Analytics
</h1>
{/* 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>
<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.
{/* 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 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 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>
</div>
</section>
</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>
{/* 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>
<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>
{/* 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>
{/* 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 ? (
<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-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>
<span className="text-primary-600 font-semibold">{row.qrMaster}</span>
)}
</td>
</tr>
))}
</tbody>
</table>
</Card>
</div>
</div>
</section>
</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>
</>
);
}