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

7
src/app/(app)/bulk-creation/page.tsx
View File

@@ -11,6 +11,7 @@ import { Select } from '@/components/ui/Select';
import { QRCodeSVG } from 'qrcode.react';
import { showToast } from '@/components/ui/Toast';
import { useTranslation } from '@/hooks/useTranslation';
import { useCsrf } from '@/hooks/useCsrf';
import JSZip from 'jszip';
import { saveAs } from 'file-saver';
@@ -27,6 +28,7 @@ interface GeneratedQR {
export default function BulkCreationPage() {
const { t } = useTranslation();
const { fetchWithCsrf } = useCsrf();
const [step, setStep] = useState<'upload' | 'preview' | 'complete'>('upload');
const [data, setData] = useState<BulkQRData[]>([]);
const [mapping, setMapping] = useState<Record<string, string>>({});
@@ -200,11 +202,8 @@ export default function BulkCreationPage() {
// Save each QR code to the database
const savePromises = qrCodesToSave.map((qr) =>
fetch('/api/qrs', {
fetchWithCsrf('/api/qrs', {
method: 'POST',
headers: {
'Content-Type': 'application/json',
},
body: JSON.stringify(qr),
})
);

5
src/app/(app)/create/page.tsx
View File

@@ -11,11 +11,13 @@ import { Button } from '@/components/ui/Button';
import { Badge } from '@/components/ui/Badge';
import { calculateContrast } from '@/lib/utils';
import { useTranslation } from '@/hooks/useTranslation';
import { useCsrf } from '@/hooks/useCsrf';
import { showToast } from '@/components/ui/Toast';
export default function CreatePage() {
const router = useRouter();
const { t } = useTranslation();
const { fetchWithCsrf } = useCsrf();
const [loading, setLoading] = useState(false);
const [userPlan, setUserPlan] = useState<string>('FREE');
@@ -168,9 +170,8 @@ export default function CreatePage() {
console.log('SENDING QR DATA:', qrData);
const response = await fetch('/api/qrs', {
const response = await fetchWithCsrf('/api/qrs', {
method: 'POST',
headers: { 'Content-Type': 'application/json' },
body: JSON.stringify(qrData),
});

56
src/app/(app)/dashboard/page.tsx
View File

@@ -108,22 +108,28 @@ export default function DashboardPage() {
const blogPosts = [
{
title: 'QR-Codes im Restaurant: Die digitale Revolution der Speisekarte',
excerpt: 'Erfahren Sie, wie QR-Codes die Gastronomie revolutionieren...',
readTime: '5 Min',
slug: 'qr-codes-im-restaurant',
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.',
readTime: '12 Min',
slug: 'qr-code-tracking-guide',
},
{
title: 'Dynamische vs. Statische QR-Codes: Was ist der Unterschied?',
excerpt: 'Ein umfassender Vergleich zwischen dynamischen und statischen QR-Codes...',
readTime: '3 Min',
slug: 'dynamische-vs-statische-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.',
readTime: '10 Min',
slug: 'dynamic-vs-static-qr-codes',
},
{
title: 'QR-Code Marketing-Strategien für 2025',
excerpt: 'Die besten Marketing-Strategien mit QR-Codes für Ihr Unternehmen...',
readTime: '7 Min',
slug: 'qr-code-marketing-strategien',
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.',
readTime: '13 Min',
slug: 'bulk-qr-code-generator-excel',
},
{
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.',
readTime: '15 Min',
slug: 'qr-code-analytics-guide',
},
];
@@ -398,7 +404,7 @@ export default function DashboardPage() {
{/* Blog & Resources */}
<div>
<h2 className="text-xl font-semibold text-gray-900 mb-6">{t('dashboard.blog_resources')}</h2>
<div className="grid md:grid-cols-3 gap-6">
<div className="grid md:grid-cols-2 lg:grid-cols-4 gap-6">
{blogPosts.map((post) => (
<Card key={post.slug} hover>
<CardHeader>
@@ -426,34 +432,34 @@ export default function DashboardPage() {
<DialogContent>
<DialogHeader>
<DialogTitle className="text-2xl text-center">
Upgrade erfolgreich!
Upgrade Successful!
</DialogTitle>
<DialogDescription className="text-center text-base pt-4">
Willkommen im <strong>{upgradedPlan} Plan</strong>! Ihr Konto wurde erfolgreich aktualisiert.
Welcome to the <strong>{upgradedPlan} Plan</strong>! Your account has been successfully upgraded.
</DialogDescription>
</DialogHeader>
<div className="py-6 space-y-4">
<div className="bg-gradient-to-r from-blue-50 to-indigo-50 p-6 rounded-lg border border-blue-200">
<h3 className="font-semibold text-gray-900 mb-3">Ihre neuen Features:</h3>
<h3 className="font-semibold text-gray-900 mb-3">Your New Features:</h3>
<ul className="space-y-2 text-sm text-gray-700">
{upgradedPlan === 'PRO' && (
<>
<li className="flex items-start">
<span className="text-green-600 mr-2">✓</span>
<span>50 dynamische QR-Codes</span>
<span>50 Dynamic QR Codes</span>
</li>
<li className="flex items-start">
<span className="text-green-600 mr-2">✓</span>
<span>Branding (Farben anpassen)</span>
<span>Custom Branding (Colors & Logo)</span>
</li>
<li className="flex items-start">
<span className="text-green-600 mr-2">✓</span>
<span>Detaillierte Analytics (Devices, Locations, Time-Series)</span>
<span>Detailed Analytics (Devices, Locations, Time-Series)</span>
</li>
<li className="flex items-start">
<span className="text-green-600 mr-2">✓</span>
<span>CSV-Export</span>
<span>CSV Export</span>
</li>
<li className="flex items-start">
<span className="text-green-600 mr-2">✓</span>
@@ -465,19 +471,19 @@ export default function DashboardPage() {
<>
<li className="flex items-start">
<span className="text-green-600 mr-2">✓</span>
<span>500 dynamische QR-Codes</span>
<span>500 Dynamic QR Codes</span>
</li>
<li className="flex items-start">
<span className="text-green-600 mr-2">✓</span>
<span>Alles von Pro</span>
<span>Everything from Pro</span>
</li>
<li className="flex items-start">
<span className="text-green-600 mr-2">✓</span>
<span>Bulk QR-Generierung (bis 1,000)</span>
<span>Bulk QR Generation (up to 1,000)</span>
</li>
<li className="flex items-start">
<span className="text-green-600 mr-2">✓</span>
<span>Prioritäts-Support</span>
<span>Priority Support</span>
</li>
</>
)}
@@ -494,7 +500,7 @@ export default function DashboardPage() {
}}
className="w-full"
>
Ersten QR-Code erstellen
Create First QR Code
</Button>
</DialogFooter>
</DialogContent>

11
src/app/(app)/settings/page.tsx
View File

@@ -4,12 +4,14 @@ import React, { useState, useEffect } from 'react';
import { Card, CardHeader, CardTitle, CardContent } from '@/components/ui/Card';
import { Button } from '@/components/ui/Button';
import { Badge } from '@/components/ui/Badge';
import { useCsrf } from '@/hooks/useCsrf';
import { showToast } from '@/components/ui/Toast';
import ChangePasswordModal from '@/components/settings/ChangePasswordModal';
type TabType = 'profile' | 'subscription';
export default function SettingsPage() {
const { fetchWithCsrf } = useCsrf();
const [activeTab, setActiveTab] = useState<TabType>('profile');
const [loading, setLoading] = useState(false);
const [showPasswordModal, setShowPasswordModal] = useState(false);
@@ -64,9 +66,8 @@ export default function SettingsPage() {
try {
// Save to backend API
const response = await fetch('/api/user/profile', {
const response = await fetchWithCsrf('/api/user/profile', {
method: 'PATCH',
headers: { 'Content-Type': 'application/json' },
body: JSON.stringify({ name }),
});
@@ -97,9 +98,8 @@ export default function SettingsPage() {
setLoading(true);
try {
const response = await fetch('/api/stripe/portal', {
const response = await fetchWithCsrf('/api/stripe/portal', {
method: 'POST',
headers: { 'Content-Type': 'application/json' },
});
const data = await response.json();
@@ -134,9 +134,8 @@ export default function SettingsPage() {
setLoading(true);
try {
const response = await fetch('/api/user/delete', {
const response = await fetchWithCsrf('/api/user/delete', {
method: 'DELETE',
headers: { 'Content-Type': 'application/json' },
});
const data = await response.json();

5
src/app/(auth)/signup/page.tsx
View File

@@ -7,10 +7,12 @@ import { Card, CardHeader, CardTitle, CardContent } from '@/components/ui/Card';
import { Input } from '@/components/ui/Input';
import { Button } from '@/components/ui/Button';
import { useTranslation } from '@/hooks/useTranslation';
import { useCsrf } from '@/hooks/useCsrf';
export default function SignupPage() {
const router = useRouter();
const { t } = useTranslation();
const { fetchWithCsrf } = useCsrf();
const [name, setName] = useState('');
const [email, setEmail] = useState('');
const [password, setPassword] = useState('');
@@ -36,9 +38,8 @@ export default function SignupPage() {
}
try {
const response = await fetch('/api/auth/signup', {
const response = await fetchWithCsrf('/api/auth/signup', {
method: 'POST',
headers: { 'Content-Type': 'application/json' },
body: JSON.stringify({ name, email, password }),
});

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>
);
}

22
src/app/api/analytics/summary/route.ts
View File

@@ -1,12 +1,34 @@
import { NextRequest, NextResponse } from 'next/server';
import { cookies } from 'next/headers';
import { db } from '@/lib/db';
import { rateLimit, getClientIdentifier, RateLimits } from '@/lib/rateLimit';
export const dynamic = 'force-dynamic';
export async function GET(request: NextRequest) {
try {
const userId = cookies().get('userId')?.value;
// Rate Limiting (user-based)
const clientId = userId || getClientIdentifier(request);
const rateLimitResult = rateLimit(clientId, RateLimits.ANALYTICS);
if (!rateLimitResult.success) {
return NextResponse.json(
{
error: 'Too many requests. Please try again later.',
retryAfter: Math.ceil((rateLimitResult.reset - Date.now()) / 1000)
},
{
status: 429,
headers: {
'X-RateLimit-Limit': rateLimitResult.limit.toString(),
'X-RateLimit-Remaining': rateLimitResult.remaining.toString(),
'X-RateLimit-Reset': rateLimitResult.reset.toString(),
}
}
);
}
if (!userId) {
return NextResponse.json({ error: 'Unauthorized' }, { status: 401 });
}

16
src/app/api/auth/signup/route.ts
View File

@@ -6,12 +6,7 @@ import { z } from 'zod';
import { csrfProtection } from '@/lib/csrf';
import { rateLimit, getClientIdentifier, RateLimits } from '@/lib/rateLimit';
import { getAuthCookieOptions } from '@/lib/cookieConfig';
const signupSchema = z.object({
name: z.string().min(2),
email: z.string().email(),
password: z.string().min(8),
});
import { signupSchema, validateRequest } from '@/lib/validationSchemas';
export async function POST(request: NextRequest) {
try {
@@ -46,7 +41,14 @@ export async function POST(request: NextRequest) {
}
const body = await request.json();
const { name, email, password } = signupSchema.parse(body);
// Validate request body
const validation = await validateRequest(signupSchema, body);
if (!validation.success) {
return NextResponse.json(validation.error, { status: 400 });
}
const { name, email, password } = validation.data;
// Check if user already exists
const existingUser = await db.user.findUnique({

11
src/app/api/auth/simple-login/route.ts
View File

@@ -5,6 +5,7 @@ import { cookies } from 'next/headers';
import { csrfProtection } from '@/lib/csrf';
import { rateLimit, getClientIdentifier, RateLimits } from '@/lib/rateLimit';
import { getAuthCookieOptions } from '@/lib/cookieConfig';
import { loginSchema, validateRequest } from '@/lib/validationSchemas';
export async function POST(request: NextRequest) {
try {
@@ -38,7 +39,15 @@ export async function POST(request: NextRequest) {
);
}
const { email, password } = await request.json();
const body = await request.json();
// Validate request body
const validation = await validateRequest(loginSchema, body);
if (!validation.success) {
return NextResponse.json(validation.error, { status: 400 });
}
const { email, password } = validation.data;
// Find user
const user = await db.user.findUnique({

22
src/app/api/bulk/route.ts
View File

@@ -4,6 +4,7 @@ import { authOptions } from '@/lib/auth';
import { db } from '@/lib/db';
import { generateSlug } from '@/lib/hash';
import { z } from 'zod';
import { rateLimit, getClientIdentifier, RateLimits } from '@/lib/rateLimit';
const bulkCreateSchema = z.object({
qrCodes: z.array(z.object({
@@ -22,6 +23,27 @@ export async function POST(request: NextRequest) {
return NextResponse.json({ error: 'Unauthorized' }, { status: 401 });
}
// Rate Limiting (user-based)
const clientId = session.user.id || getClientIdentifier(request);
const rateLimitResult = rateLimit(clientId, RateLimits.BULK_CREATE);
if (!rateLimitResult.success) {
return NextResponse.json(
{
error: 'Too many requests. Please try again later.',
retryAfter: Math.ceil((rateLimitResult.reset - Date.now()) / 1000)
},
{
status: 429,
headers: {
'X-RateLimit-Limit': rateLimitResult.limit.toString(),
'X-RateLimit-Remaining': rateLimitResult.remaining.toString(),
'X-RateLimit-Reset': rateLimitResult.reset.toString(),
}
}
);
}
const body = await request.json();
const { qrCodes } = bulkCreateSchema.parse(body);

56
src/app/api/qrs/[id]/route.ts
View File

@@ -2,6 +2,8 @@ import { NextRequest, NextResponse } from 'next/server';
import { cookies } from 'next/headers';
import { db } from '@/lib/db';
import { z } from 'zod';
import { csrfProtection } from '@/lib/csrf';
import { rateLimit, getClientIdentifier, RateLimits } from '@/lib/rateLimit';
const updateQRSchema = z.object({
title: z.string().min(1).optional(),
@@ -55,7 +57,34 @@ export async function PATCH(
{ params }: { params: { id: string } }
) {
try {
// CSRF Protection
const csrfCheck = csrfProtection(request);
if (!csrfCheck.valid) {
return NextResponse.json({ error: csrfCheck.error }, { status: 403 });
}
const userId = cookies().get('userId')?.value;
// Rate Limiting (user-based)
const clientId = userId || getClientIdentifier(request);
const rateLimitResult = rateLimit(clientId, RateLimits.QR_MODIFY);
if (!rateLimitResult.success) {
return NextResponse.json(
{
error: 'Too many requests. Please try again later.',
retryAfter: Math.ceil((rateLimitResult.reset - Date.now()) / 1000)
},
{
status: 429,
headers: {
'X-RateLimit-Limit': rateLimitResult.limit.toString(),
'X-RateLimit-Remaining': rateLimitResult.remaining.toString(),
'X-RateLimit-Reset': rateLimitResult.reset.toString(),
}
}
);
}
if (!userId) {
return NextResponse.json({ error: 'Unauthorized' }, { status: 401 });
}
@@ -118,7 +147,34 @@ export async function DELETE(
{ params }: { params: { id: string } }
) {
try {
// CSRF Protection
const csrfCheck = csrfProtection(request);
if (!csrfCheck.valid) {
return NextResponse.json({ error: csrfCheck.error }, { status: 403 });
}
const userId = cookies().get('userId')?.value;
// Rate Limiting (user-based)
const clientId = userId || getClientIdentifier(request);
const rateLimitResult = rateLimit(clientId, RateLimits.QR_MODIFY);
if (!rateLimitResult.success) {
return NextResponse.json(
{
error: 'Too many requests. Please try again later.',
retryAfter: Math.ceil((rateLimitResult.reset - Date.now()) / 1000)
},
{
status: 429,
headers: {
'X-RateLimit-Limit': rateLimitResult.limit.toString(),
'X-RateLimit-Remaining': rateLimitResult.remaining.toString(),
'X-RateLimit-Reset': rateLimitResult.reset.toString(),
}
}
);
}
if (!userId) {
return NextResponse.json({ error: 'Unauthorized' }, { status: 401 });
}

22
src/app/api/qrs/delete-all/route.ts
View File

@@ -2,6 +2,7 @@ import { NextRequest, NextResponse } from 'next/server';
import { cookies } from 'next/headers';
import { db } from '@/lib/db';
import { csrfProtection } from '@/lib/csrf';
import { rateLimit, getClientIdentifier, RateLimits } from '@/lib/rateLimit';
export async function DELETE(request: NextRequest) {
try {
@@ -15,6 +16,27 @@ export async function DELETE(request: NextRequest) {
}
const userId = cookies().get('userId')?.value;
// Rate Limiting (user-based)
const clientId = userId || getClientIdentifier(request);
const rateLimitResult = rateLimit(clientId, RateLimits.QR_DELETE_ALL);
if (!rateLimitResult.success) {
return NextResponse.json(
{
error: 'Too many requests. Please try again later.',
retryAfter: Math.ceil((rateLimitResult.reset - Date.now()) / 1000)
},
{
status: 429,
headers: {
'X-RateLimit-Limit': rateLimitResult.limit.toString(),
'X-RateLimit-Remaining': rateLimitResult.remaining.toString(),
'X-RateLimit-Reset': rateLimitResult.reset.toString(),
}
}
);
}
if (!userId) {
return NextResponse.json({ error: 'Unauthorized' }, { status: 401 });
}

39
src/app/api/qrs/route.ts
View File

@@ -2,6 +2,9 @@ import { NextRequest, NextResponse } from 'next/server';
import { cookies } from 'next/headers';
import { db } from '@/lib/db';
import { generateSlug } from '@/lib/hash';
import { createQRSchema, validateRequest } from '@/lib/validationSchemas';
import { csrfProtection } from '@/lib/csrf';
import { rateLimit, getClientIdentifier, RateLimits } from '@/lib/rateLimit';
// GET /api/qrs - List user's QR codes
export async function GET(request: NextRequest) {
@@ -48,9 +51,36 @@ const PLAN_LIMITS = {
// POST /api/qrs - Create a new QR code
export async function POST(request: NextRequest) {
try {
// CSRF Protection
const csrfCheck = csrfProtection(request);
if (!csrfCheck.valid) {
return NextResponse.json({ error: csrfCheck.error }, { status: 403 });
}
const userId = cookies().get('userId')?.value;
console.log('POST /api/qrs - userId from cookie:', userId);
// Rate Limiting (user-based)
const clientId = userId || getClientIdentifier(request);
const rateLimitResult = rateLimit(clientId, RateLimits.QR_CREATE);
if (!rateLimitResult.success) {
return NextResponse.json(
{
error: 'Too many requests. Please try again later.',
retryAfter: Math.ceil((rateLimitResult.reset - Date.now()) / 1000)
},
{
status: 429,
headers: {
'X-RateLimit-Limit': rateLimitResult.limit.toString(),
'X-RateLimit-Remaining': rateLimitResult.remaining.toString(),
'X-RateLimit-Reset': rateLimitResult.reset.toString(),
}
}
);
}
if (!userId) {
return NextResponse.json({ error: 'Unauthorized - no userId cookie' }, { status: 401 });
}
@@ -70,6 +100,15 @@ export async function POST(request: NextRequest) {
const body = await request.json();
console.log('Request body:', body);
// Validate request body with Zod (only for non-static QRs or simplified validation)
// Note: Static QRs have complex nested content structure, so we do basic validation
if (!body.isStatic) {
const validation = await validateRequest(createQRSchema, body);
if (!validation.success) {
return NextResponse.json(validation.error, { status: 400 });
}
}
// Check if this is a static QR request
const isStatic = body.isStatic === true;

22
src/app/api/stripe/cancel-subscription/route.ts
View File

@@ -2,10 +2,32 @@ import { NextRequest, NextResponse } from 'next/server';
import { cookies } from 'next/headers';
import { stripe } from '@/lib/stripe';
import { db } from '@/lib/db';
import { rateLimit, getClientIdentifier, RateLimits } from '@/lib/rateLimit';
export async function POST(request: NextRequest) {
try {
const userId = cookies().get('userId')?.value;
// Rate Limiting (user-based)
const clientId = userId || getClientIdentifier(request);
const rateLimitResult = rateLimit(clientId, RateLimits.STRIPE_CANCEL);
if (!rateLimitResult.success) {
return NextResponse.json(
{
error: 'Too many requests. Please try again later.',
retryAfter: Math.ceil((rateLimitResult.reset - Date.now()) / 1000)
},
{
status: 429,
headers: {
'X-RateLimit-Limit': rateLimitResult.limit.toString(),
'X-RateLimit-Remaining': rateLimitResult.remaining.toString(),
'X-RateLimit-Reset': rateLimitResult.reset.toString(),
}
}
);
}
if (!userId) {
return NextResponse.json({ error: 'Unauthorized' }, { status: 401 });
}

22
src/app/api/stripe/create-checkout-session/route.ts
View File

@@ -2,6 +2,7 @@ import { NextRequest, NextResponse } from 'next/server';
import { stripe, STRIPE_PLANS } from '@/lib/stripe';
import { db } from '@/lib/db';
import { cookies } from 'next/headers';
import { rateLimit, getClientIdentifier, RateLimits } from '@/lib/rateLimit';
export async function POST(request: NextRequest) {
try {
@@ -9,6 +10,27 @@ export async function POST(request: NextRequest) {
const cookieStore = await cookies();
const userId = cookieStore.get('userId')?.value;
// Rate Limiting (user-based)
const clientId = userId || getClientIdentifier(request);
const rateLimitResult = rateLimit(clientId, RateLimits.STRIPE_CHECKOUT);
if (!rateLimitResult.success) {
return NextResponse.json(
{
error: 'Too many requests. Please try again later.',
retryAfter: Math.ceil((rateLimitResult.reset - Date.now()) / 1000)
},
{
status: 429,
headers: {
'X-RateLimit-Limit': rateLimitResult.limit.toString(),
'X-RateLimit-Remaining': rateLimitResult.remaining.toString(),
'X-RateLimit-Reset': rateLimitResult.reset.toString(),
}
}
);
}
if (!userId) {
return NextResponse.json({ error: 'Unauthorized - Please log in' }, { status: 401 });
}

22
src/app/api/stripe/portal/route.ts
View File

@@ -2,10 +2,32 @@ import { NextRequest, NextResponse } from 'next/server';
import { cookies } from 'next/headers';
import { stripe } from '@/lib/stripe';
import { db } from '@/lib/db';
import { rateLimit, getClientIdentifier, RateLimits } from '@/lib/rateLimit';
export async function POST(request: NextRequest) {
try {
const userId = cookies().get('userId')?.value;
// Rate Limiting (user-based)
const clientId = userId || getClientIdentifier(request);
const rateLimitResult = rateLimit(clientId, RateLimits.STRIPE_PORTAL);
if (!rateLimitResult.success) {
return NextResponse.json(
{
error: 'Too many requests. Please try again later.',
retryAfter: Math.ceil((rateLimitResult.reset - Date.now()) / 1000)
},
{
status: 429,
headers: {
'X-RateLimit-Limit': rateLimitResult.limit.toString(),
'X-RateLimit-Remaining': rateLimitResult.remaining.toString(),
'X-RateLimit-Reset': rateLimitResult.reset.toString(),
}
}
);
}
if (!userId) {
return NextResponse.json({ error: 'Unauthorized' }, { status: 401 });
}

22
src/app/api/user/delete/route.ts
View File

@@ -3,6 +3,7 @@ import { cookies } from 'next/headers';
import { db } from '@/lib/db';
import { stripe } from '@/lib/stripe';
import { csrfProtection } from '@/lib/csrf';
import { rateLimit, getClientIdentifier, RateLimits } from '@/lib/rateLimit';
export async function DELETE(request: NextRequest) {
try {
@@ -16,6 +17,27 @@ export async function DELETE(request: NextRequest) {
}
const userId = cookies().get('userId')?.value;
// Rate Limiting (user-based)
const clientId = userId || getClientIdentifier(request);
const rateLimitResult = rateLimit(clientId, RateLimits.ACCOUNT_DELETE);
if (!rateLimitResult.success) {
return NextResponse.json(
{
error: 'Too many requests. Please try again later.',
retryAfter: Math.ceil((rateLimitResult.reset - Date.now()) / 1000)
},
{
status: 429,
headers: {
'X-RateLimit-Limit': rateLimitResult.limit.toString(),
'X-RateLimit-Remaining': rateLimitResult.remaining.toString(),
'X-RateLimit-Reset': rateLimitResult.reset.toString(),
}
}
);
}
if (!userId) {
return NextResponse.json({ error: 'Unauthorized' }, { status: 401 });
}

48
src/app/api/user/password/route.ts
View File

@@ -3,6 +3,8 @@ import { cookies } from 'next/headers';
import { db } from '@/lib/db';
import bcrypt from 'bcryptjs';
import { csrfProtection } from '@/lib/csrf';
import { changePasswordSchema, validateRequest } from '@/lib/validationSchemas';
import { rateLimit, getClientIdentifier, RateLimits } from '@/lib/rateLimit';
export async function PATCH(request: NextRequest) {
try {
@@ -16,26 +18,40 @@ export async function PATCH(request: NextRequest) {
}
const userId = cookies().get('userId')?.value;
// Rate Limiting (user-based)
const clientId = userId || getClientIdentifier(request);
const rateLimitResult = rateLimit(clientId, RateLimits.PASSWORD_CHANGE);
if (!rateLimitResult.success) {
return NextResponse.json(
{
error: 'Too many requests. Please try again later.',
retryAfter: Math.ceil((rateLimitResult.reset - Date.now()) / 1000)
},
{
status: 429,
headers: {
'X-RateLimit-Limit': rateLimitResult.limit.toString(),
'X-RateLimit-Remaining': rateLimitResult.remaining.toString(),
'X-RateLimit-Reset': rateLimitResult.reset.toString(),
}
}
);
}
if (!userId) {
return NextResponse.json({ error: 'Unauthorized' }, { status: 401 });
}
const body = await request.json();
const { currentPassword, newPassword } = body;
if (!currentPassword || !newPassword) {
return NextResponse.json(
{ error: 'Current password and new password are required' },
{ status: 400 }
);
// Validate request body
const validation = await validateRequest(changePasswordSchema, body);
if (!validation.success) {
return NextResponse.json(validation.error, { status: 400 });
}
if (newPassword.length < 8) {
return NextResponse.json(
{ error: 'New password must be at least 8 characters' },
{ status: 400 }
);
}
const { currentPassword, newPassword } = validation.data;
// Get user with password
const user = await db.user.findUnique({
@@ -50,6 +66,14 @@ export async function PATCH(request: NextRequest) {
return NextResponse.json({ error: 'User not found' }, { status: 404 });
}
// Check if user has a password (OAuth users don't have passwords)
if (!user.password) {
return NextResponse.json(
{ error: 'Cannot change password for OAuth accounts' },
{ status: 400 }
);
}
// Verify current password
const isPasswordValid = await bcrypt.compare(currentPassword, user.password);
if (!isPasswordValid) {

42
src/app/api/user/profile/route.ts
View File

@@ -1,24 +1,54 @@
import { NextRequest, NextResponse } from 'next/server';
import { cookies } from 'next/headers';
import { db } from '@/lib/db';
import { csrfProtection } from '@/lib/csrf';
import { updateProfileSchema, validateRequest } from '@/lib/validationSchemas';
import { rateLimit, getClientIdentifier, RateLimits } from '@/lib/rateLimit';
export async function PATCH(request: NextRequest) {
try {
// CSRF Protection
const csrfCheck = csrfProtection(request);
if (!csrfCheck.valid) {
return NextResponse.json({ error: csrfCheck.error }, { status: 403 });
}
const userId = cookies().get('userId')?.value;
// Rate Limiting (user-based)
const clientId = userId || getClientIdentifier(request);
const rateLimitResult = rateLimit(clientId, RateLimits.PROFILE_UPDATE);
if (!rateLimitResult.success) {
return NextResponse.json(
{
error: 'Too many requests. Please try again later.',
retryAfter: Math.ceil((rateLimitResult.reset - Date.now()) / 1000)
},
{
status: 429,
headers: {
'X-RateLimit-Limit': rateLimitResult.limit.toString(),
'X-RateLimit-Remaining': rateLimitResult.remaining.toString(),
'X-RateLimit-Reset': rateLimitResult.reset.toString(),
}
}
);
}
if (!userId) {
return NextResponse.json({ error: 'Unauthorized' }, { status: 401 });
}
const body = await request.json();
const { name } = body;
if (!name || name.trim().length === 0) {
return NextResponse.json(
{ error: 'Name is required' },
{ status: 400 }
);
// Validate request body
const validation = await validateRequest(updateProfileSchema, body);
if (!validation.success) {
return NextResponse.json(validation.error, { status: 400 });
}
const { name } = validation.data;
// Update user name in database
const updatedUser = await db.user.update({
where: { id: userId },

119
src/app/error.tsx Normal file
View File

@@ -0,0 +1,119 @@
'use client';
import React, { useEffect } from 'react';
import Link from 'next/link';
import { Button } from '@/components/ui/Button';
export default function Error({
error,
reset,
}: {
error: Error & { digest?: string };
reset: () => void;
}) {
useEffect(() => {
// Log the error to an error reporting service
console.error('Error:', error);
}, [error]);
return (
<div className="min-h-screen bg-white flex items-center justify-center px-4">
<div className="max-w-2xl w-full text-center">
{/* Error Icon */}
<div className="mb-8">
<div className="inline-flex items-center justify-center w-24 h-24 bg-red-100 rounded-full mb-6">
<svg
className="w-12 h-12 text-red-600"
fill="none"
stroke="currentColor"
viewBox="0 0 24 24"
xmlns="http://www.w3.org/2000/svg"
>
<path
strokeLinecap="round"
strokeLinejoin="round"
strokeWidth={2}
d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z"
/>
</svg>
</div>
{/* Error Text */}
<h1 className="text-6xl md:text-8xl font-bold text-gray-900 mb-4">500</h1>
<h2 className="text-2xl md:text-3xl font-semibold text-gray-700 mb-4">
Something Went Wrong
</h2>
<p className="text-lg text-gray-600 mb-8 max-w-md mx-auto">
We're sorry, but something unexpected happened. Our team has been notified and is working on a fix.
</p>
{/* Error Details (only in development) */}
{process.env.NODE_ENV === 'development' && error.message && (
<div className="mb-8 p-4 bg-red-50 border border-red-200 rounded-lg text-left">
<p className="text-sm font-mono text-red-800 break-all">
<strong>Error:</strong> {error.message}
</p>
{error.digest && (
<p className="text-sm font-mono text-red-600 mt-2">
<strong>Digest:</strong> {error.digest}
</p>
)}
</div>
)}
</div>
{/* Action Buttons */}
<div className="flex flex-col sm:flex-row gap-4 justify-center items-center">
<Button size="lg" onClick={reset}>
<svg
className="w-5 h-5 mr-2"
fill="none"
stroke="currentColor"
viewBox="0 0 24 24"
xmlns="http://www.w3.org/2000/svg"
>
<path
strokeLinecap="round"
strokeLinejoin="round"
strokeWidth={2}
d="M4 4v5h.582m15.356 2A8.001 8.001 0 004.582 9m0 0H9m11 11v-5h-.581m0 0a8.003 8.003 0 01-15.357-2m15.357 2H15"
/>
</svg>
Try Again
</Button>
<Link href="/">
<Button variant="outline" size="lg">
<svg
className="w-5 h-5 mr-2"
fill="none"
stroke="currentColor"
viewBox="0 0 24 24"
xmlns="http://www.w3.org/2000/svg"
>
<path
strokeLinecap="round"
strokeLinejoin="round"
strokeWidth={2}
d="M3 12l2-2m0 0l7-7 7 7M5 10v10a1 1 0 001 1h3m10-11l2 2m-2-2v10a1 1 0 01-1 1h-3m-6 0a1 1 0 001-1v-4a1 1 0 011-1h2a1 1 0 011 1v4a1 1 0 001 1m-6 0h6"
/>
</svg>
Go Home
</Button>
</Link>
</div>
{/* Help Text */}
<div className="mt-12 pt-8 border-t border-gray-200">
<p className="text-sm text-gray-500">
If this problem persists, please{' '}
<Link href="/#faq" className="text-primary-600 hover:text-primary-700 font-medium">
check our FAQ
</Link>
{' '}or contact support.
</p>
</div>
</div>
</div>
);
}

83
src/app/not-found.tsx Normal file
View File

@@ -0,0 +1,83 @@
import React from 'react';
import Link from 'next/link';
import { Button } from '@/components/ui/Button';
export default function NotFound() {
return (
<div className="min-h-screen bg-white flex items-center justify-center px-4">
<div className="max-w-2xl w-full text-center">
{/* 404 Icon */}
<div className="mb-8">
<div className="inline-flex items-center justify-center w-24 h-24 bg-primary-100 rounded-full mb-6">
<svg
className="w-12 h-12 text-primary-600"
fill="none"
stroke="currentColor"
viewBox="0 0 24 24"
xmlns="http://www.w3.org/2000/svg"
>
<path
strokeLinecap="round"
strokeLinejoin="round"
strokeWidth={2}
d="M9.172 16.172a4 4 0 015.656 0M9 10h.01M15 10h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"
/>
</svg>
</div>
{/* 404 Text */}
<h1 className="text-6xl md:text-8xl font-bold text-gray-900 mb-4">404</h1>
<h2 className="text-2xl md:text-3xl font-semibold text-gray-700 mb-4">
Page Not Found
</h2>
<p className="text-lg text-gray-600 mb-8 max-w-md mx-auto">
Sorry, we couldn't find the page you're looking for. It might have been moved or deleted.
</p>
</div>
{/* Action Buttons */}
<div className="flex flex-col sm:flex-row gap-4 justify-center items-center">
<Link href="/">
<Button size="lg">
<svg
className="w-5 h-5 mr-2"
fill="none"
stroke="currentColor"
viewBox="0 0 24 24"
xmlns="http://www.w3.org/2000/svg"
>
<path
strokeLinecap="round"
strokeLinejoin="round"
strokeWidth={2}
d="M3 12l2-2m0 0l7-7 7 7M5 10v10a1 1 0 001 1h3m10-11l2 2m-2-2v10a1 1 0 01-1 1h-3m-6 0a1 1 0 001-1v-4a1 1 0 011-1h2a1 1 0 011 1v4a1 1 0 001 1m-6 0h6"
/>
</svg>
Go Home
</Button>
</Link>
<Link href="/create">
<Button variant="outline" size="lg">
Create QR Code
</Button>
</Link>
</div>
{/* Help Text */}
<div className="mt-12 pt-8 border-t border-gray-200">
<p className="text-sm text-gray-500">
Need help?{' '}
<Link href="/#faq" className="text-primary-600 hover:text-primary-700 font-medium">
Visit our FAQ
</Link>{' '}
or{' '}
<Link href="/blog" className="text-primary-600 hover:text-primary-700 font-medium">
read our blog
</Link>
</p>
</div>
</div>
</div>
);
}

21
src/app/robots.ts Normal file
View File

@@ -0,0 +1,21 @@
import { MetadataRoute } from 'next';
export default function robots(): MetadataRoute.Robots {
const baseUrl = 'https://www.qrmaster.com';
return {
rules: [
{
userAgent: '*',
allow: '/',
disallow: [
'/api/',
'/dashboard/',
'/create/',
'/settings/',
],
},
],
sitemap: `${baseUrl}/sitemap.xml`,
};
}

74
src/app/sitemap.ts Normal file
View File

@@ -0,0 +1,74 @@
import { MetadataRoute } from 'next';
export default function sitemap(): MetadataRoute.Sitemap {
const baseUrl = 'https://www.qrmaster.com';
return [
{
url: baseUrl,
lastModified: new Date(),
changeFrequency: 'weekly',
priority: 1.0,
},
{
url: `${baseUrl}/qr-code-tracking`,
lastModified: new Date(),
changeFrequency: 'monthly',
priority: 0.9,
},
{
url: `${baseUrl}/dynamic-qr-code-generator`,
lastModified: new Date(),
changeFrequency: 'monthly',
priority: 0.9,
},
{
url: `${baseUrl}/bulk-qr-code-generator`,
lastModified: new Date(),
changeFrequency: 'monthly',
priority: 0.9,
},
{
url: `${baseUrl}/pricing`,
lastModified: new Date(),
changeFrequency: 'monthly',
priority: 0.8,
},
{
url: `${baseUrl}/faq`,
lastModified: new Date(),
changeFrequency: 'monthly',
priority: 0.7,
},
{
url: `${baseUrl}/blog`,
lastModified: new Date(),
changeFrequency: 'weekly',
priority: 0.8,
},
{
url: `${baseUrl}/signup`,
lastModified: new Date(),
changeFrequency: 'monthly',
priority: 0.8,
},
{
url: `${baseUrl}/login`,
lastModified: new Date(),
changeFrequency: 'yearly',
priority: 0.5,
},
{
url: `${baseUrl}/privacy`,
lastModified: new Date(),
changeFrequency: 'yearly',
priority: 0.4,
},
{
url: `${baseUrl}/terms`,
lastModified: new Date(),
changeFrequency: 'yearly',
priority: 0.4,
},
];
}