AEO / SEO
This commit is contained in:
Timo Knuth
740
src/app/(marketing)/manage-qr-codes/page.tsx
Normal file
740
src/app/(marketing)/manage-qr-codes/page.tsx
Normal file
@@ -0,0 +1,740 @@
|
||||
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';
|
||||
import SeoJsonLd from '@/components/SeoJsonLd';
|
||||
import Breadcrumbs, { BreadcrumbItem } from '@/components/Breadcrumbs';
|
||||
import { breadcrumbSchema } from '@/lib/schema';
|
||||
import {
|
||||
LayoutDashboard,
|
||||
FolderTree,
|
||||
Edit3,
|
||||
Users,
|
||||
BarChart3,
|
||||
Bell,
|
||||
CheckCircle2,
|
||||
XCircle,
|
||||
Store,
|
||||
UtensilsCrossed,
|
||||
CalendarDays,
|
||||
Megaphone,
|
||||
} from 'lucide-react';
|
||||
|
||||
export const metadata: Metadata = {
|
||||
title: 'QR Code Management Software – Organize, Edit & Scale | QR Master',
|
||||
description: 'Manage QR codes at scale with folders, bulk editing, team collaboration, and campaign organization. Centralized dashboard for businesses. Free trial available.',
|
||||
keywords: [
|
||||
'manage qr codes',
|
||||
'qr code management software',
|
||||
'qr code management system',
|
||||
'bulk qr code management',
|
||||
'qr code campaign management',
|
||||
'qr code dashboard',
|
||||
'organize qr codes',
|
||||
],
|
||||
alternates: {
|
||||
canonical: 'https://www.qrmaster.net/manage-qr-codes',
|
||||
languages: {
|
||||
'x-default': 'https://www.qrmaster.net/manage-qr-codes',
|
||||
en: 'https://www.qrmaster.net/manage-qr-codes',
|
||||
},
|
||||
},
|
||||
openGraph: {
|
||||
title: 'QR Code Management Software – Organize, Edit & Scale',
|
||||
description: 'Manage QR codes at scale with folders, bulk editing, team collaboration, and campaign organization.',
|
||||
url: 'https://www.qrmaster.net/manage-qr-codes',
|
||||
type: 'website',
|
||||
images: [{
|
||||
url: '/images/og/og-manage-qr-codes.png',
|
||||
width: 1200,
|
||||
height: 630
|
||||
}]
|
||||
},
|
||||
twitter: {
|
||||
title: 'QR Code Management Software – Organize, Edit & Scale',
|
||||
description: 'Manage QR codes at scale with folders, bulk editing, team collaboration, and campaign organization.',
|
||||
},
|
||||
};
|
||||
|
||||
export default function ManageQRCodesPage() {
|
||||
const problems = [
|
||||
{
|
||||
icon: BarChart3,
|
||||
title: 'No Visibility',
|
||||
issues: [
|
||||
'Can\'t find QR codes across campaigns',
|
||||
'No central place to see all codes',
|
||||
'Hard to track which ones are active',
|
||||
],
|
||||
},
|
||||
{
|
||||
icon: Edit3,
|
||||
title: 'Can\'t Update or Organize',
|
||||
issues: [
|
||||
'Printed QR codes are permanent (static)',
|
||||
'No way to organize by campaign/location',
|
||||
'Manual spreadsheet tracking',
|
||||
],
|
||||
},
|
||||
{
|
||||
icon: Users,
|
||||
title: 'No Team Collaboration',
|
||||
issues: [
|
||||
'QR codes scattered across devices',
|
||||
'No centralized management system',
|
||||
'No permissions or access control',
|
||||
'Can\'t track who created/edited what',
|
||||
],
|
||||
},
|
||||
];
|
||||
|
||||
const features = [
|
||||
{
|
||||
icon: LayoutDashboard,
|
||||
title: 'Centralized Dashboard',
|
||||
description: 'All QR codes in one place. Search, filter, sort by campaign/date/type. Quick performance overview.',
|
||||
},
|
||||
{
|
||||
icon: FolderTree,
|
||||
title: 'Campaign Organization',
|
||||
description: 'Create folders and tags. Group by location, product, event. Archive old campaigns.',
|
||||
},
|
||||
{
|
||||
icon: Edit3,
|
||||
title: 'Bulk Editing',
|
||||
description: 'Edit multiple QR destinations at once. Bulk export, duplicate, archive. Schedule URL changes in advance.',
|
||||
},
|
||||
{
|
||||
icon: Users,
|
||||
title: 'Team Collaboration',
|
||||
description: 'Invite team members. Set roles (viewer, editor, admin). Activity log for accountability.',
|
||||
},
|
||||
{
|
||||
icon: BarChart3,
|
||||
title: 'Performance Tracking',
|
||||
description: 'Track scans per QR code. See locations, devices, timestamps. Export analytics to CSV.',
|
||||
},
|
||||
{
|
||||
icon: Bell,
|
||||
title: 'Smart Alerts',
|
||||
description: 'Get notified on high scan activity. Alert when errors occur. Weekly performance summaries.',
|
||||
},
|
||||
];
|
||||
|
||||
const useCases = [
|
||||
{
|
||||
icon: Store,
|
||||
title: 'Retail & E-Commerce',
|
||||
description: 'Manage product QR codes across locations. Track in-store vs online performance. Update promo URLs seasonally.',
|
||||
},
|
||||
{
|
||||
icon: UtensilsCrossed,
|
||||
title: 'Restaurants & Hospitality',
|
||||
description: 'Manage digital menu QR codes. Update locations/specials easily. Track table/location-specific scans.',
|
||||
},
|
||||
{
|
||||
icon: CalendarDays,
|
||||
title: 'Events & Conferences',
|
||||
description: 'Manage attendee/session QR codes. Track check-ins in real-time. Organize by event, date, venue.',
|
||||
},
|
||||
{
|
||||
icon: Megaphone,
|
||||
title: 'Marketing Agencies',
|
||||
description: 'Manage multiple client campaigns. Team permissions and white-label reports. Client-specific analytics.',
|
||||
},
|
||||
];
|
||||
|
||||
const comparison = [
|
||||
{ feature: 'Create QR Codes', free: 'Static only', qrMaster: 'Static + Dynamic' },
|
||||
{ feature: 'Central Dashboard', free: false, qrMaster: true },
|
||||
{ feature: 'Edit After Deploy', free: false, qrMaster: true },
|
||||
{ feature: 'Organize Campaigns', free: false, qrMaster: true },
|
||||
{ feature: 'Team Collaboration', free: false, qrMaster: true },
|
||||
{ feature: 'Bulk Operations', free: false, qrMaster: true },
|
||||
{ feature: 'Analytics', free: false, qrMaster: true },
|
||||
{ feature: 'API Access', free: false, qrMaster: true },
|
||||
];
|
||||
|
||||
const plans = [
|
||||
{
|
||||
name: 'Free',
|
||||
price: '€0',
|
||||
period: 'forever',
|
||||
features: [
|
||||
'3 Dynamic QR Codes',
|
||||
'Basic Dashboard',
|
||||
'Basic Analytics',
|
||||
'Perfect for trying',
|
||||
],
|
||||
cta: 'Start Free',
|
||||
href: '/signup',
|
||||
highlighted: false,
|
||||
},
|
||||
{
|
||||
name: 'Pro',
|
||||
price: '€9',
|
||||
period: 'per month',
|
||||
features: [
|
||||
'50 Dynamic QR Codes',
|
||||
'Advanced Analytics',
|
||||
'Team Collaboration (3 users)',
|
||||
'Priority Support',
|
||||
],
|
||||
cta: 'Start Free Trial',
|
||||
href: '/signup?plan=pro',
|
||||
highlighted: true,
|
||||
},
|
||||
{
|
||||
name: 'Business',
|
||||
price: '€29',
|
||||
period: 'per month',
|
||||
features: [
|
||||
'500 Dynamic QR Codes',
|
||||
'Full Analytics + CSV Export',
|
||||
'Unlimited Team Members',
|
||||
'API Access',
|
||||
],
|
||||
cta: 'Start Free Trial',
|
||||
href: '/signup?plan=business',
|
||||
highlighted: false,
|
||||
},
|
||||
];
|
||||
|
||||
const faqs = [
|
||||
{
|
||||
question: 'What does "manage QR codes" mean?',
|
||||
answer: 'QR code management means having a central dashboard to create, organize, edit, track, and analyze all your QR codes in one place instead of scattered files.',
|
||||
},
|
||||
{
|
||||
question: 'Can I edit a QR code after printing it?',
|
||||
answer: 'Yes, with dynamic QR codes. QR Master uses a redirect URL, so you can change the destination anytime. The printed QR code image stays the same.',
|
||||
},
|
||||
{
|
||||
question: 'How many QR codes can I manage?',
|
||||
answer: 'Pro plan: 50 dynamic QR codes. Business plan: 500. Enterprise: Unlimited. All plans include unlimited static QR codes.',
|
||||
},
|
||||
{
|
||||
question: 'Can my team access and edit QR codes?',
|
||||
answer: 'Yes! Invite team members on Business and Enterprise plans. Set permissions (viewer, editor, admin) for each member.',
|
||||
},
|
||||
{
|
||||
question: 'What analytics can I track?',
|
||||
answer: 'Total scans, unique scans, locations (city/country), devices (iOS/Android), browsers, timestamps, referrers. Export to CSV.',
|
||||
},
|
||||
{
|
||||
question: 'Can I organize QR codes by campaign?',
|
||||
answer: 'Absolutely. Use folders, tags, and custom labels to organize by campaign, location, product, or any criteria.',
|
||||
},
|
||||
{
|
||||
question: 'What happens to my dynamic QR codes if I cancel?',
|
||||
answer: 'Dynamic QR codes require an active subscription to redirect. Check our terms for data retention policies. You can always export your data and download static versions.',
|
||||
},
|
||||
{
|
||||
question: 'Is there an API for bulk management?',
|
||||
answer: 'Yes, Business and Enterprise plans include full API access for creating, editing, and tracking QR codes programmatically.',
|
||||
},
|
||||
];
|
||||
|
||||
const softwareSchema = {
|
||||
'@context': 'https://schema.org',
|
||||
'@type': 'SoftwareApplication',
|
||||
'@id': 'https://www.qrmaster.net/manage-qr-codes#software',
|
||||
name: 'QR Master - QR Code Management Platform',
|
||||
applicationCategory: 'BusinessApplication',
|
||||
offers: {
|
||||
'@type': 'AggregateOffer',
|
||||
lowPrice: '0',
|
||||
highPrice: '29',
|
||||
priceCurrency: 'EUR',
|
||||
},
|
||||
featureList: [
|
||||
'Centralized QR code dashboard',
|
||||
'Campaign organization with folders and tags',
|
||||
'Bulk editing and operations',
|
||||
'Team collaboration with permissions',
|
||||
'Real-time scan analytics',
|
||||
'API access for automation',
|
||||
],
|
||||
};
|
||||
|
||||
const breadcrumbItems: BreadcrumbItem[] = [
|
||||
{ name: 'Home', url: '/' },
|
||||
{ name: 'Manage QR Codes', url: '/manage-qr-codes' },
|
||||
];
|
||||
|
||||
return (
|
||||
<>
|
||||
<SeoJsonLd data={[softwareSchema, breadcrumbSchema(breadcrumbItems)]} />
|
||||
<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">
|
||||
<Breadcrumbs items={breadcrumbItems} />
|
||||
<div className="grid lg:grid-cols-2 gap-12 items-center mt-8">
|
||||
<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>Get Started Free</span>
|
||||
</div>
|
||||
|
||||
<h1 className="text-5xl lg:text-6xl font-bold text-gray-900 leading-tight">
|
||||
QR Code Management Software – Organize, Edit & Scale
|
||||
</h1>
|
||||
|
||||
<p className="text-xl text-gray-600 leading-relaxed">
|
||||
The complete QR code management platform for businesses. Organize campaigns, edit in bulk, collaborate with teams, and track performance from one central dashboard.
|
||||
</p>
|
||||
|
||||
<div className="space-y-3">
|
||||
{[
|
||||
'No Credit Card Required',
|
||||
'Full Features',
|
||||
'Cancel Anytime',
|
||||
].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">
|
||||
<CheckCircle2 className="w-3 h-3 text-white" />
|
||||
</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">
|
||||
Get Started Free
|
||||
</Button>
|
||||
</Link>
|
||||
<Link
|
||||
href="#dashboard-preview"
|
||||
className="inline-flex items-center justify-center font-medium rounded-lg transition-colors focus:outline-none focus:ring-2 focus:ring-offset-2 border border-gray-300 text-gray-700 hover:bg-gray-50 focus:ring-gray-500 px-6 py-3 text-lg w-full sm:w-auto"
|
||||
>
|
||||
See Dashboard Demo
|
||||
</Link>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Dashboard Preview Card */}
|
||||
<div className="relative">
|
||||
<Card className="p-6 shadow-2xl">
|
||||
<h3 className="font-semibold text-lg mb-4">Dashboard Overview</h3>
|
||||
<div className="space-y-3">
|
||||
<div className="bg-blue-50 border border-blue-200 rounded-lg p-4">
|
||||
<div className="flex items-center justify-between mb-2">
|
||||
<span className="text-sm font-semibold text-gray-700">All QR Codes</span>
|
||||
<span className="text-2xl font-bold text-blue-600">127</span>
|
||||
</div>
|
||||
<div className="text-xs text-gray-600">Across 12 campaigns</div>
|
||||
</div>
|
||||
<div className="grid grid-cols-2 gap-3">
|
||||
<div className="bg-green-50 border border-green-200 rounded-lg p-3">
|
||||
<div className="text-xs text-gray-600 mb-1">Active</div>
|
||||
<div className="text-xl font-bold text-green-600">94</div>
|
||||
</div>
|
||||
<div className="bg-gray-100 border border-gray-200 rounded-lg p-3">
|
||||
<div className="text-xs text-gray-600 mb-1">Archived</div>
|
||||
<div className="text-xl font-bold text-gray-600">33</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="bg-purple-50 border border-purple-200 rounded-lg p-3">
|
||||
<div className="text-xs text-gray-600 mb-2">Recent Activity</div>
|
||||
<div className="space-y-1 text-xs">
|
||||
<div className="flex items-center justify-between">
|
||||
<span className="text-gray-700">Campaign "Summer Sale" edited</span>
|
||||
<span className="text-gray-500">2m ago</span>
|
||||
</div>
|
||||
<div className="flex items-center justify-between">
|
||||
<span className="text-gray-700">Bulk update: 12 codes</span>
|
||||
<span className="text-gray-500">1h ago</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="mt-4 pt-4 border-t border-gray-200">
|
||||
<div className="flex items-center justify-between text-sm">
|
||||
<span className="text-gray-600">Team Members</span>
|
||||
<div className="flex -space-x-2">
|
||||
{[1, 2, 3].map((i) => (
|
||||
<div key={i} className="w-8 h-8 rounded-full bg-gradient-to-br from-blue-400 to-purple-500 border-2 border-white" />
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</Card>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* Problem Statement */}
|
||||
<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">
|
||||
Why Managing QR Codes Manually is Chaos
|
||||
</h2>
|
||||
</div>
|
||||
|
||||
<div className="grid md:grid-cols-3 gap-8">
|
||||
{problems.map((problem, index) => (
|
||||
<Card key={index} className="p-6">
|
||||
<problem.icon className="w-12 h-12 text-red-600 mb-4" />
|
||||
<h3 className="text-xl font-bold text-gray-900 mb-4">{problem.title}</h3>
|
||||
<ul className="space-y-2">
|
||||
{problem.issues.map((issue, idx) => (
|
||||
<li key={idx} className="flex items-start space-x-2">
|
||||
<XCircle className="w-5 h-5 text-red-500 flex-shrink-0 mt-0.5" />
|
||||
<span className="text-gray-600">{issue}</span>
|
||||
</li>
|
||||
))}
|
||||
</ul>
|
||||
</Card>
|
||||
))}
|
||||
</div>
|
||||
|
||||
<div className="text-center mt-12">
|
||||
<p className="text-2xl font-semibold text-gray-700">
|
||||
A Complete Management Platform Solves All of This ↓
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* Core 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">
|
||||
Everything You Need to Manage QR Codes at Scale
|
||||
</h2>
|
||||
</div>
|
||||
|
||||
<div className="grid md:grid-cols-2 lg:grid-cols-3 gap-8">
|
||||
{features.map((feature, index) => (
|
||||
<Card key={index} className="p-6 hover:shadow-lg transition-shadow">
|
||||
<feature.icon className="w-10 h-10 text-primary-600 mb-4" />
|
||||
<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>
|
||||
|
||||
{/* Workflow Diagram */}
|
||||
<section className="py-20 bg-blue-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">
|
||||
Your QR Code Management Workflow
|
||||
</h2>
|
||||
</div>
|
||||
|
||||
<div className="space-y-6">
|
||||
{[
|
||||
{
|
||||
step: 1,
|
||||
title: 'Create & Customize',
|
||||
description: 'Upload CSV or create individually',
|
||||
},
|
||||
{
|
||||
step: 2,
|
||||
title: 'Organize',
|
||||
description: 'Tag, folder, assign to campaigns',
|
||||
},
|
||||
{
|
||||
step: 3,
|
||||
title: 'Deploy',
|
||||
description: 'Download, print, distribute',
|
||||
},
|
||||
{
|
||||
step: 4,
|
||||
title: 'Track & Analyze',
|
||||
description: 'Monitor scans, locations, devices',
|
||||
},
|
||||
{
|
||||
step: 5,
|
||||
title: 'Optimize',
|
||||
description: 'Edit URLs, A/B test, improve',
|
||||
},
|
||||
].map((step, index) => (
|
||||
<div key={index}>
|
||||
<Card className="p-6">
|
||||
<div className="flex items-center space-x-4">
|
||||
<div className="flex-shrink-0 w-12 h-12 bg-primary-600 text-white rounded-full flex items-center justify-center text-xl font-bold">
|
||||
{step.step}
|
||||
</div>
|
||||
<div className="flex-1">
|
||||
<h3 className="text-xl font-bold text-gray-900">{step.title}</h3>
|
||||
<p className="text-gray-600">{step.description}</p>
|
||||
</div>
|
||||
</div>
|
||||
</Card>
|
||||
{index < 4 && (
|
||||
<div className="flex justify-center my-2">
|
||||
<div className="w-1 h-8 bg-primary-300" />
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* Dashboard Preview */}
|
||||
<section id="dashboard-preview" 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">
|
||||
See Your Dashboard in Action
|
||||
</h2>
|
||||
</div>
|
||||
|
||||
<Card className="p-8 bg-gradient-to-br from-gray-50 to-white">
|
||||
<div className="space-y-6">
|
||||
<div className="flex items-center justify-between pb-4 border-b border-gray-200">
|
||||
<h3 className="text-xl font-bold">QR Code Management</h3>
|
||||
<Link href="/signup">
|
||||
<Button size="sm">Sign Up</Button>
|
||||
</Link>
|
||||
</div>
|
||||
|
||||
<div className="grid gap-4">
|
||||
{[
|
||||
{ name: 'Summer Campaign 2024', scans: 1247, status: 'Active', folder: 'Marketing' },
|
||||
{ name: 'Product Launch - Widget Pro', scans: 892, status: 'Active', folder: 'Products' },
|
||||
{ name: 'Event Check-in - TechConf', scans: 2341, status: 'Complete', folder: 'Events' },
|
||||
].map((qr, index) => (
|
||||
<div key={index} className="flex items-center justify-between p-4 bg-white border border-gray-200 rounded-lg hover:shadow-md transition-shadow">
|
||||
<div className="flex-1">
|
||||
<div className="font-semibold text-gray-900">{qr.name}</div>
|
||||
<div className="text-sm text-gray-500">📁 {qr.folder}</div>
|
||||
</div>
|
||||
<div className="flex items-center space-x-6">
|
||||
<div className="text-center">
|
||||
<div className="text-2xl font-bold text-primary-600">{qr.scans.toLocaleString()}</div>
|
||||
<div className="text-xs text-gray-500">scans</div>
|
||||
</div>
|
||||
<div className={`px-3 py-1 rounded-full text-xs font-semibold ${qr.status === 'Active'
|
||||
? 'bg-green-100 text-green-800'
|
||||
: 'bg-gray-100 text-gray-600'
|
||||
}`}>
|
||||
{qr.status}
|
||||
</div>
|
||||
<Button variant="ghost" size="sm">
|
||||
<Edit3 className="w-4 h-4" />
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
|
||||
<div className="flex items-center justify-center space-x-8 pt-6 border-t border-gray-200 text-sm text-gray-600">
|
||||
<div className="flex items-center space-x-2">
|
||||
<CheckCircle2 className="w-4 h-4 text-green-500" />
|
||||
<span>View all codes at a glance</span>
|
||||
</div>
|
||||
<div className="flex items-center space-x-2">
|
||||
<CheckCircle2 className="w-4 h-4 text-green-500" />
|
||||
<span>Click to edit destination instantly</span>
|
||||
</div>
|
||||
<div className="flex items-center space-x-2">
|
||||
<CheckCircle2 className="w-4 h-4 text-green-500" />
|
||||
<span>Filter by campaign or folder</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</Card>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* Use Cases by Industry */}
|
||||
<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">
|
||||
QR Code Management for Every Business
|
||||
</h2>
|
||||
</div>
|
||||
|
||||
<div className="grid md:grid-cols-2 gap-8">
|
||||
{useCases.map((useCase, index) => (
|
||||
<Card key={index} className="p-8">
|
||||
<useCase.icon className="w-12 h-12 text-primary-600 mb-4" />
|
||||
<h3 className="text-2xl font-bold text-gray-900 mb-3">{useCase.title}</h3>
|
||||
<p className="text-gray-600">{useCase.description}</p>
|
||||
</Card>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* Feature Comparison */}
|
||||
<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">
|
||||
Free QR Tools vs QR Code Management Platform
|
||||
</h2>
|
||||
</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 QR Tool</th>
|
||||
<th className="px-6 py-4 text-center text-primary-600 font-semibold">QR Master Manage</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody className="divide-y divide-gray-200">
|
||||
{comparison.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>
|
||||
|
||||
{/* FAQ Section */}
|
||||
<section className="py-20 bg-gray-50">
|
||||
<div className="container mx-auto px-4 sm:px-6 lg:px-8 max-w-4xl">
|
||||
<div className="text-center mb-16">
|
||||
<h2 className="text-4xl font-bold text-gray-900 mb-4">
|
||||
Frequently Asked Questions
|
||||
</h2>
|
||||
</div>
|
||||
|
||||
<div className="space-y-6">
|
||||
{faqs.map((faq, index) => (
|
||||
<Card key={index} className="p-6">
|
||||
<h3 className="text-lg font-semibold text-gray-900 mb-3">
|
||||
{faq.question}
|
||||
</h3>
|
||||
<p className="text-gray-600">{faq.answer}</p>
|
||||
</Card>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* Pricing Teaser */}
|
||||
<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">
|
||||
Start Managing Your QR Codes Today
|
||||
</h2>
|
||||
</div>
|
||||
|
||||
<div className="grid md:grid-cols-3 gap-8">
|
||||
{plans.map((plan, index) => (
|
||||
<Card
|
||||
key={index}
|
||||
className={`p-8 ${plan.highlighted
|
||||
? 'border-2 border-primary-600 shadow-xl relative'
|
||||
: ''
|
||||
}`}
|
||||
>
|
||||
{plan.highlighted && (
|
||||
<div className="absolute -top-4 left-1/2 transform -translate-x-1/2 bg-primary-600 text-white px-4 py-1 rounded-full text-sm font-semibold">
|
||||
Most Popular
|
||||
</div>
|
||||
)}
|
||||
<div className="text-center mb-6">
|
||||
<h3 className="text-2xl font-bold text-gray-900 mb-2">{plan.name}</h3>
|
||||
<div className="flex items-baseline justify-center">
|
||||
<span className="text-4xl font-bold text-gray-900">{plan.price}</span>
|
||||
<span className="text-gray-600 ml-2">/{plan.period}</span>
|
||||
</div>
|
||||
</div>
|
||||
<ul className="space-y-3 mb-8">
|
||||
{plan.features.map((feature, idx) => (
|
||||
<li key={idx} className="flex items-start space-x-3">
|
||||
<CheckCircle2 className="w-5 h-5 text-green-500 flex-shrink-0 mt-0.5" />
|
||||
<span className="text-gray-600">{feature}</span>
|
||||
</li>
|
||||
))}
|
||||
</ul>
|
||||
<Link href={plan.href}>
|
||||
<Button
|
||||
size="lg"
|
||||
variant={plan.highlighted ? undefined : 'outline'}
|
||||
className="w-full"
|
||||
>
|
||||
{plan.cta}
|
||||
</Button>
|
||||
</Link>
|
||||
</Card>
|
||||
))}
|
||||
</div>
|
||||
|
||||
<div className="text-center mt-8 text-sm text-gray-600">
|
||||
No credit card required • Full features • Cancel anytime
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* Trust & CTA */}
|
||||
<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-5xl text-center">
|
||||
<h2 className="text-4xl font-bold mb-6">
|
||||
Built for Teams and Businesses
|
||||
</h2>
|
||||
<p className="text-xl mb-8 text-green-100">
|
||||
QR Master helps marketing teams, agencies, event organizers, and businesses manage their QR codes efficiently.
|
||||
</p>
|
||||
<div className="flex flex-wrap justify-center gap-8 mb-8">
|
||||
<div className="flex items-center space-x-2">
|
||||
<CheckCircle2 className="w-6 h-6" />
|
||||
<span>Built for retail, events, hospitality, and more</span>
|
||||
</div>
|
||||
<div className="flex items-center space-x-2">
|
||||
<CheckCircle2 className="w-6 h-6" />
|
||||
<span>Secure data handling</span>
|
||||
</div>
|
||||
<div className="flex items-center space-x-2">
|
||||
<CheckCircle2 className="w-6 h-6" />
|
||||
<span>Reliable uptime and performance</span>
|
||||
</div>
|
||||
</div>
|
||||
<Link href="/signup">
|
||||
<Button
|
||||
size="lg"
|
||||
variant="secondary"
|
||||
className="text-lg px-8 py-4 bg-white text-green-600 hover:bg-gray-100"
|
||||
>
|
||||
Start Free Trial
|
||||
</Button>
|
||||
</Link>
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
</>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user