MVP ready to test
This commit is contained in:
Timo Knuth
393
src/app/(marketing)/dynamic-qr-code-generator/page.tsx
Normal file
393
src/app/(marketing)/dynamic-qr-code-generator/page.tsx
Normal 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>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user