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

Shema

Browse Source
This commit is contained in:
Timo Knuth
2026-01-25 14:59:25 +01:00
parent eef4855c1b
commit 30c1e57eab
104 changed files with 24652 additions and 24741 deletions
Download Patch File Download Diff File Expand all files Collapse all files

506
src/app/(main)/(app)/AppLayout.tsx
View File

@@ -1,254 +1,254 @@
'use client';
import React, { useState, useEffect } from 'react';
import Link from 'next/link';
import { usePathname, useRouter } from 'next/navigation';
import { Button } from '@/components/ui/Button';
import { Dropdown, DropdownItem } from '@/components/ui/Dropdown';
import { Footer } from '@/components/ui/Footer';
import { useTranslation } from '@/hooks/useTranslation';
interface User {
id: string;
name: string | null;
email: string;
plan: string | null;
}
export default function AppLayout({
children,
}: {
children: React.ReactNode;
}) {
const pathname = usePathname();
const router = useRouter();
const { t } = useTranslation();
const [sidebarOpen, setSidebarOpen] = useState(false);
const [user, setUser] = useState<User | null>(null);
// Fetch user data on mount
useEffect(() => {
const fetchUser = async () => {
try {
const response = await fetch('/api/user');
if (response.ok) {
const userData = await response.json();
setUser(userData);
}
} catch (error) {
console.error('Error fetching user:', error);
}
};
fetchUser();
}, []);
const handleSignOut = async () => {
// Track logout event before clearing data
try {
const { trackEvent, resetUser } = await import('@/components/PostHogProvider');
trackEvent('user_logout');
resetUser(); // Reset PostHog user session
} catch (error) {
console.error('PostHog tracking error:', error);
}
// Clear all cookies
document.cookie.split(";").forEach(c => {
document.cookie = c.replace(/^ +/, "").replace(/=.*/, "=;expires=" + new Date().toUTCString() + ";path=/");
});
// Clear localStorage
localStorage.clear();
// Redirect to home
router.push('/');
};
// Get user initials for avatar (e.g., "Timo Schmidt" -> "TS")
const getUserInitials = () => {
if (!user) return 'U';
if (user.name) {
const names = user.name.trim().split(' ');
if (names.length >= 2) {
return (names[0][0] + names[names.length - 1][0]).toUpperCase();
}
return user.name.substring(0, 2).toUpperCase();
}
// Fallback to email
return user.email.substring(0, 1).toUpperCase();
};
// Get display name (first name or full name)
const getDisplayName = () => {
if (!user) return 'User';
if (user.name) {
return user.name;
}
// Fallback to email without domain
return user.email.split('@')[0];
};
const navigation = [
{
name: t('nav.dashboard'),
href: '/dashboard',
icon: (
<svg className="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<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>
),
},
{
name: t('nav.create_qr'),
href: '/create',
icon: (
<svg className="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M12 4v16m8-8H4" />
</svg>
),
},
{
name: t('nav.bulk_creation'),
href: '/bulk-creation',
icon: (
<svg className="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M19 11H5m14 0a2 2 0 012 2v6a2 2 0 01-2 2H5a2 2 0 01-2-2v-6a2 2 0 012-2m14 0V9a2 2 0 00-2-2M5 11V9a2 2 0 012-2m0 0V5a2 2 0 012-2h6a2 2 0 012 2v2M7 7h10" />
</svg>
),
},
{
name: t('nav.analytics'),
href: '/analytics',
icon: (
<svg className="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M9 19v-6a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2a2 2 0 002-2zm0 0V9a2 2 0 012-2h2a2 2 0 012 2v10m-6 0a2 2 0 002 2h2a2 2 0 002-2m0 0V5a2 2 0 012-2h2a2 2 0 012 2v14a2 2 0 01-2 2h-2a2 2 0 01-2-2z" />
</svg>
),
},
{
name: t('nav.pricing'),
href: '/pricing',
icon: (
<svg className="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M12 8c-1.657 0-3 .895-3 2s1.343 2 3 2 3 .895 3 2-1.343 2-3 2m0-8c1.11 0 2.08.402 2.599 1M12 8V7m0 1v8m0 0v1m0-1c-1.11 0-2.08-.402-2.599-1M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
</svg>
),
},
{
name: t('nav.settings'),
href: '/settings',
icon: (
<svg className="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M10.325 4.317c.426-1.756 2.924-1.756 3.35 0a1.724 1.724 0 002.573 1.066c1.543-.94 3.31.826 2.37 2.37a1.724 1.724 0 001.065 2.572c1.756.426 1.756 2.924 0 3.35a1.724 1.724 0 00-1.066 2.573c.94 1.543-.826 3.31-2.37 2.37a1.724 1.724 0 00-2.572 1.065c-.426 1.756-2.924 1.756-3.35 0a1.724 1.724 0 00-2.573-1.066c-1.543.94-3.31-.826-2.37-2.37a1.724 1.724 0 00-1.065-2.572c-1.756-.426-1.756-2.924 0-3.35a1.724 1.724 0 001.066-2.573c-.94-1.543.826-3.31 2.37-2.37.996.608 2.296.07 2.572-1.065z" />
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M15 12a3 3 0 11-6 0 3 3 0 016 0z" />
</svg>
),
},
];
return (
<div className="min-h-screen bg-gray-50">
{/* Mobile sidebar backdrop */}
{sidebarOpen && (
<div
className="fixed inset-0 bg-black bg-opacity-50 z-40 lg:hidden"
onClick={() => setSidebarOpen(false)}
/>
)}
{/* Sidebar */}
<aside
className={`fixed top-0 left-0 z-50 h-full w-64 bg-white border-r border-gray-200 transform transition-transform lg:translate-x-0 ${sidebarOpen ? 'translate-x-0' : '-translate-x-full'
}`}
>
<div className="flex items-center justify-between p-4 border-b border-gray-200">
<Link href="/" className="flex items-center space-x-2">
<img src="/logo.svg" alt="QR Master" className="w-8 h-8" />
<span className="text-xl font-bold text-gray-900">QR Master</span>
</Link>
<button
className="lg:hidden"
onClick={() => setSidebarOpen(false)}
>
<svg className="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M6 18L18 6M6 6l12 12" />
</svg>
</button>
</div>
<nav className="p-4 space-y-1">
{navigation.map((item) => {
const isActive = pathname === item.href;
return (
<Link
key={item.name}
href={item.href}
className={`flex items-center space-x-3 px-3 py-2 rounded-lg transition-colors ${isActive
? 'bg-primary-50 text-primary-600'
: 'text-gray-700 hover:bg-gray-100'
}`}
>
{item.icon}
<span className="font-medium">{item.name}</span>
</Link>
);
})}
</nav>
</aside>
{/* Main content */}
<div className="lg:ml-64">
{/* Top bar */}
<header className="bg-white border-b border-gray-200">
<div className="flex items-center justify-between px-4 py-3">
<button
className="lg:hidden"
onClick={() => setSidebarOpen(true)}
>
<svg className="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M4 6h16M4 12h16M4 18h16" />
</svg>
</button>
<div className="flex items-center space-x-4 ml-auto">
{/* User Menu */}
<Dropdown
align="right"
trigger={
<button className="flex items-center space-x-2 text-gray-700 hover:text-gray-900">
<div className="w-8 h-8 bg-primary-100 rounded-full flex items-center justify-center">
<span className="text-sm font-medium text-primary-600">
{getUserInitials()}
</span>
</div>
<span className="hidden md:block font-medium">
{getDisplayName()}
</span>
<svg className="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M19 9l-7 7-7-7" />
</svg>
</button>
}
>
<DropdownItem onClick={handleSignOut}>
Sign Out
</DropdownItem>
</Dropdown>
</div>
</div>
</header>
{/* Page content */}
<main className="p-6">
{children}
</main>
{/* Footer */}
<Footer variant="dashboard" />
</div>
</div>
);
'use client';
import React, { useState, useEffect } from 'react';
import Link from 'next/link';
import { usePathname, useRouter } from 'next/navigation';
import { Button } from '@/components/ui/Button';
import { Dropdown, DropdownItem } from '@/components/ui/Dropdown';
import { Footer } from '@/components/ui/Footer';
import { useTranslation } from '@/hooks/useTranslation';
interface User {
id: string;
name: string | null;
email: string;
plan: string | null;
}
export default function AppLayout({
children,
}: {
children: React.ReactNode;
}) {
const pathname = usePathname();
const router = useRouter();
const { t } = useTranslation();
const [sidebarOpen, setSidebarOpen] = useState(false);
const [user, setUser] = useState<User | null>(null);
// Fetch user data on mount
useEffect(() => {
const fetchUser = async () => {
try {
const response = await fetch('/api/user');
if (response.ok) {
const userData = await response.json();
setUser(userData);
}
} catch (error) {
console.error('Error fetching user:', error);
}
};
fetchUser();
}, []);
const handleSignOut = async () => {
// Track logout event before clearing data
try {
const { trackEvent, resetUser } = await import('@/components/PostHogProvider');
trackEvent('user_logout');
resetUser(); // Reset PostHog user session
} catch (error) {
console.error('PostHog tracking error:', error);
}
// Clear all cookies
document.cookie.split(";").forEach(c => {
document.cookie = c.replace(/^ +/, "").replace(/=.*/, "=;expires=" + new Date().toUTCString() + ";path=/");
});
// Clear localStorage
localStorage.clear();
// Redirect to home
router.push('/');
};
// Get user initials for avatar (e.g., "Timo Schmidt" -> "TS")
const getUserInitials = () => {
if (!user) return 'U';
if (user.name) {
const names = user.name.trim().split(' ');
if (names.length >= 2) {
return (names[0][0] + names[names.length - 1][0]).toUpperCase();
}
return user.name.substring(0, 2).toUpperCase();
}
// Fallback to email
return user.email.substring(0, 1).toUpperCase();
};
// Get display name (first name or full name)
const getDisplayName = () => {
if (!user) return 'User';
if (user.name) {
return user.name;
}
// Fallback to email without domain
return user.email.split('@')[0];
};
const navigation = [
{
name: t('nav.dashboard'),
href: '/dashboard',
icon: (
<svg className="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<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>
),
},
{
name: t('nav.create_qr'),
href: '/create',
icon: (
<svg className="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M12 4v16m8-8H4" />
</svg>
),
},
{
name: t('nav.bulk_creation'),
href: '/bulk-creation',
icon: (
<svg className="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M19 11H5m14 0a2 2 0 012 2v6a2 2 0 01-2 2H5a2 2 0 01-2-2v-6a2 2 0 012-2m14 0V9a2 2 0 00-2-2M5 11V9a2 2 0 012-2m0 0V5a2 2 0 012-2h6a2 2 0 012 2v2M7 7h10" />
</svg>
),
},
{
name: t('nav.analytics'),
href: '/analytics',
icon: (
<svg className="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M9 19v-6a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2a2 2 0 002-2zm0 0V9a2 2 0 012-2h2a2 2 0 012 2v10m-6 0a2 2 0 002 2h2a2 2 0 002-2m0 0V5a2 2 0 012-2h2a2 2 0 012 2v14a2 2 0 01-2 2h-2a2 2 0 01-2-2z" />
</svg>
),
},
{
name: t('nav.pricing'),
href: '/pricing',
icon: (
<svg className="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M12 8c-1.657 0-3 .895-3 2s1.343 2 3 2 3 .895 3 2-1.343 2-3 2m0-8c1.11 0 2.08.402 2.599 1M12 8V7m0 1v8m0 0v1m0-1c-1.11 0-2.08-.402-2.599-1M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
</svg>
),
},
{
name: t('nav.settings'),
href: '/settings',
icon: (
<svg className="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M10.325 4.317c.426-1.756 2.924-1.756 3.35 0a1.724 1.724 0 002.573 1.066c1.543-.94 3.31.826 2.37 2.37a1.724 1.724 0 001.065 2.572c1.756.426 1.756 2.924 0 3.35a1.724 1.724 0 00-1.066 2.573c.94 1.543-.826 3.31-2.37 2.37a1.724 1.724 0 00-2.572 1.065c-.426 1.756-2.924 1.756-3.35 0a1.724 1.724 0 00-2.573-1.066c-1.543.94-3.31-.826-2.37-2.37a1.724 1.724 0 00-1.065-2.572c-1.756-.426-1.756-2.924 0-3.35a1.724 1.724 0 001.066-2.573c-.94-1.543.826-3.31 2.37-2.37.996.608 2.296.07 2.572-1.065z" />
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M15 12a3 3 0 11-6 0 3 3 0 016 0z" />
</svg>
),
},
];
return (
<div className="min-h-screen bg-gray-50">
{/* Mobile sidebar backdrop */}
{sidebarOpen && (
<div
className="fixed inset-0 bg-black bg-opacity-50 z-40 lg:hidden"
onClick={() => setSidebarOpen(false)}
/>
)}
{/* Sidebar */}
<aside
className={`fixed top-0 left-0 z-50 h-full w-64 bg-white border-r border-gray-200 transform transition-transform lg:translate-x-0 ${sidebarOpen ? 'translate-x-0' : '-translate-x-full'
}`}
>
<div className="flex items-center justify-between p-4 border-b border-gray-200">
<Link href="/" className="flex items-center space-x-2">
<img src="/logo.svg" alt="QR Master" className="w-8 h-8" />
<span className="text-xl font-bold text-gray-900">QR Master</span>
</Link>
<button
className="lg:hidden"
onClick={() => setSidebarOpen(false)}
>
<svg className="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M6 18L18 6M6 6l12 12" />
</svg>
</button>
</div>
<nav className="p-4 space-y-1">
{navigation.map((item) => {
const isActive = pathname === item.href;
return (
<Link
key={item.name}
href={item.href}
className={`flex items-center space-x-3 px-3 py-2 rounded-lg transition-colors ${isActive
? 'bg-primary-50 text-primary-600'
: 'text-gray-700 hover:bg-gray-100'
}`}
>
{item.icon}
<span className="font-medium">{item.name}</span>
</Link>
);
})}
</nav>
</aside>
{/* Main content */}
<div className="lg:ml-64">
{/* Top bar */}
<header className="bg-white border-b border-gray-200">
<div className="flex items-center justify-between px-4 py-3">
<button
className="lg:hidden"
onClick={() => setSidebarOpen(true)}
>
<svg className="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M4 6h16M4 12h16M4 18h16" />
</svg>
</button>
<div className="flex items-center space-x-4 ml-auto">
{/* User Menu */}
<Dropdown
align="right"
trigger={
<button className="flex items-center space-x-2 text-gray-700 hover:text-gray-900">
<div className="w-8 h-8 bg-primary-100 rounded-full flex items-center justify-center">
<span className="text-sm font-medium text-primary-600">
{getUserInitials()}
</span>
</div>
<span className="hidden md:block font-medium">
{getDisplayName()}
</span>
<svg className="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M19 9l-7 7-7-7" />
</svg>
</button>
}
>
<DropdownItem onClick={handleSignOut}>
Sign Out
</DropdownItem>
</Dropdown>
</div>
</div>
</header>
{/* Page content */}
<main className="p-6">
{children}
</main>
{/* Footer */}
<Footer variant="dashboard" />
</div>
</div>
);
}

1186
src/app/(main)/(app)/analytics/page.tsx
View File

File diff suppressed because it is too large Load Diff

2052
src/app/(main)/(app)/create/page.tsx
View File

File diff suppressed because it is too large Load Diff

64
src/app/(main)/(app)/layout.tsx
View File

@@ -1,32 +1,32 @@
import type { Metadata } from 'next';
import '@/styles/globals.css';
import { Suspense } from 'react';
import { Providers } from '@/components/Providers';
import AppLayout from './AppLayout';
export const metadata: Metadata = {
title: 'Dashboard | QR Master',
description: 'Manage your QR Master dashboard. Create dynamic QR codes, view real-time scan analytics, and configure your account settings in one secure place.',
robots: { index: false, follow: false },
icons: {
icon: [
{ url: '/favicon.svg', type: 'image/svg+xml' },
{ url: '/logo.svg', type: 'image/svg+xml' },
],
apple: '/logo.svg',
},
};
export default function AppGroupLayout({
children,
}: {
children: React.ReactNode;
}) {
return (
<Suspense fallback={null}>
<AppLayout>
{children}
</AppLayout>
</Suspense>
);
}
import type { Metadata } from 'next';
import '@/styles/globals.css';
import { Suspense } from 'react';
import { Providers } from '@/components/Providers';
import AppLayout from './AppLayout';
export const metadata: Metadata = {
title: 'Dashboard | QR Master',
description: 'Manage your QR Master dashboard. Create dynamic QR codes, view real-time scan analytics, and configure your account settings in one secure place.',
robots: { index: false, follow: false },
icons: {
icon: [
{ url: '/favicon.svg', type: 'image/svg+xml' },
{ url: '/logo.svg', type: 'image/svg+xml' },
],
apple: '/logo.svg',
},
};
export default function AppGroupLayout({
children,
}: {
children: React.ReactNode;
}) {
return (
<Suspense fallback={null}>
<AppLayout>
{children}
</AppLayout>
</Suspense>
);
}

918
src/app/(main)/(app)/qr/[id]/edit/page.tsx
View File

@@ -1,459 +1,459 @@
'use client';
import React, { useState, useEffect } from 'react';
import { useRouter, useParams } from 'next/navigation';
import { Card, CardHeader, CardTitle, CardContent } from '@/components/ui/Card';
import { Button } from '@/components/ui/Button';
import { Input } from '@/components/ui/Input';
import { showToast } from '@/components/ui/Toast';
import { useCsrf } from '@/hooks/useCsrf';
import { Upload, FileText, HelpCircle } from 'lucide-react';
// Tooltip component for form field help
const Tooltip = ({ text }: { text: string }) => (
<div className="group relative inline-block ml-1">
<HelpCircle className="w-4 h-4 text-gray-400 cursor-help" />
<div className="absolute bottom-full left-1/2 -translate-x-1/2 mb-2 px-3 py-2 bg-gray-900 text-white text-xs rounded-lg opacity-0 invisible group-hover:opacity-100 group-hover:visible transition-all duration-200 z-50 w-48 text-center">
{text}
<div className="absolute top-full left-1/2 -translate-x-1/2 border-4 border-transparent border-t-gray-900"></div>
</div>
</div>
);
export default function EditQRPage() {
const router = useRouter();
const params = useParams();
const qrId = params.id as string;
const { fetchWithCsrf, loading: csrfLoading } = useCsrf();
const [loading, setLoading] = useState(true);
const [saving, setSaving] = useState(false);
const [uploading, setUploading] = useState(false);
const [qrCode, setQrCode] = useState<any>(null);
const [title, setTitle] = useState('');
const [content, setContent] = useState<any>({});
useEffect(() => {
const fetchQRCode = async () => {
try {
const response = await fetch(`/api/qrs/${qrId}`);
if (response.ok) {
const data = await response.json();
setQrCode(data);
setTitle(data.title);
setContent(data.content || {});
} else {
showToast('Failed to load QR code', 'error');
router.push('/dashboard');
}
} catch (error) {
console.error('Error fetching QR code:', error);
showToast('Failed to load QR code', 'error');
router.push('/dashboard');
} finally {
setLoading(false);
}
};
fetchQRCode();
}, [qrId, router]);
const handleFileUpload = async (e: React.ChangeEvent<HTMLInputElement>) => {
const file = e.target.files?.[0];
if (!file) return;
// 10MB limit
if (file.size > 10 * 1024 * 1024) {
showToast('File size too large (max 10MB)', 'error');
return;
}
setUploading(true);
const formData = new FormData();
formData.append('file', file);
try {
const response = await fetch('/api/upload', {
method: 'POST',
body: formData,
});
const data = await response.json();
if (response.ok) {
setContent({ ...content, fileUrl: data.url, fileName: data.filename });
showToast('File uploaded successfully!', 'success');
} else {
showToast(data.error || 'Upload failed', 'error');
}
} catch (error) {
console.error('Upload error:', error);
showToast('Error uploading file', 'error');
} finally {
setUploading(false);
}
};
const handleSave = async () => {
setSaving(true);
try {
const response = await fetchWithCsrf(`/api/qrs/${qrId}`, {
method: 'PATCH',
body: JSON.stringify({
title,
content,
}),
});
if (response.ok) {
showToast('QR code updated successfully!', 'success');
router.push('/dashboard');
} else {
const error = await response.json();
showToast(error.error || 'Failed to update QR code', 'error');
}
} catch (error) {
console.error('Error updating QR code:', error);
showToast('Failed to update QR code', 'error');
} finally {
setSaving(false);
}
};
if (loading) {
return (
<div className="flex items-center justify-center min-h-screen">
<div className="text-center">
<div className="animate-spin rounded-full h-12 w-12 border-b-2 border-primary-600 mx-auto mb-4"></div>
<p className="text-gray-600">Loading QR code...</p>
</div>
</div>
);
}
if (!qrCode) {
return null;
}
// Static QR codes cannot be edited
if (qrCode.type === 'STATIC') {
return (
<div className="max-w-2xl mx-auto mt-12">
<Card>
<CardContent className="p-12 text-center">
<div className="w-20 h-20 bg-warning-100 rounded-full flex items-center justify-center mx-auto mb-6">
<svg className="w-10 h-10 text-warning-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<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>
<h2 className="text-2xl font-bold text-gray-900 mb-2">Static QR Code</h2>
<p className="text-gray-600 mb-8">
Static QR codes cannot be edited because their content is embedded directly in the QR code image.
</p>
<Button onClick={() => router.push('/dashboard')}>
Back to Dashboard
</Button>
</CardContent>
</Card>
</div>
);
}
return (
<div className="max-w-3xl mx-auto">
<div className="mb-8">
<h1 className="text-3xl font-bold text-gray-900">Edit QR Code</h1>
<p className="text-gray-600 mt-2">Update your dynamic QR code content</p>
</div>
<Card>
<CardHeader>
<CardTitle>QR Code Details</CardTitle>
</CardHeader>
<CardContent className="space-y-6">
<Input
label="Title"
value={title}
onChange={(e) => setTitle(e.target.value)}
placeholder="Enter QR code title"
required
/>
{qrCode.contentType === 'URL' && (
<Input
label="URL"
type="url"
value={content.url || ''}
onChange={(e) => setContent({ ...content, url: e.target.value })}
placeholder="https://example.com"
required
/>
)}
{qrCode.contentType === 'PHONE' && (
<Input
label="Phone Number"
type="tel"
value={content.phone || ''}
onChange={(e) => setContent({ ...content, phone: e.target.value })}
placeholder="+1234567890"
required
/>
)}
{qrCode.contentType === 'VCARD' && (
<>
<Input
label="First Name"
value={content.firstName || ''}
onChange={(e) => setContent({ ...content, firstName: e.target.value })}
placeholder="John"
required
/>
<Input
label="Last Name"
value={content.lastName || ''}
onChange={(e) => setContent({ ...content, lastName: e.target.value })}
placeholder="Doe"
required
/>
<Input
label="Email"
type="email"
value={content.email || ''}
onChange={(e) => setContent({ ...content, email: e.target.value })}
placeholder="john@example.com"
/>
<Input
label="Phone"
value={content.phone || ''}
onChange={(e) => setContent({ ...content, phone: e.target.value })}
placeholder="+1234567890"
/>
<Input
label="Organization"
value={content.organization || ''}
onChange={(e) => setContent({ ...content, organization: e.target.value })}
placeholder="Company Name"
/>
<Input
label="Job Title"
value={content.title || ''}
onChange={(e) => setContent({ ...content, title: e.target.value })}
placeholder="CEO"
/>
</>
)}
{qrCode.contentType === 'GEO' && (
<>
<Input
label="Latitude"
type="number"
step="any"
value={content.latitude || ''}
onChange={(e) => setContent({ ...content, latitude: parseFloat(e.target.value) || 0 })}
placeholder="37.7749"
required
/>
<Input
label="Longitude"
type="number"
step="any"
value={content.longitude || ''}
onChange={(e) => setContent({ ...content, longitude: parseFloat(e.target.value) || 0 })}
placeholder="-122.4194"
required
/>
<Input
label="Location Label (Optional)"
value={content.label || ''}
onChange={(e) => setContent({ ...content, label: e.target.value })}
placeholder="Golden Gate Bridge"
/>
</>
)}
{qrCode.contentType === 'TEXT' && (
<div>
<label className="block text-sm font-medium text-gray-700 mb-2">
Text Content
</label>
<textarea
value={content.text || ''}
onChange={(e) => setContent({ ...content, text: e.target.value })}
className="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-primary-500 focus:border-primary-500"
rows={4}
placeholder="Enter your text content"
required
/>
</div>
)}
{qrCode.contentType === 'PDF' && (
<>
<div>
<div className="flex items-center mb-1">
<label className="block text-sm font-medium text-gray-700">Upload Menu / PDF</label>
<Tooltip text="Upload your menu PDF (Max 10MB). Hosted securely." />
</div>
<div className="mt-2 flex justify-center px-6 pt-5 pb-6 border-2 border-gray-300 border-dashed rounded-lg hover:bg-gray-50 transition-colors relative">
<div className="space-y-1 text-center">
{uploading ? (
<div className="flex flex-col items-center">
<div className="animate-spin rounded-full h-8 w-8 border-b-2 border-primary-500 mb-2"></div>
<p className="text-sm text-gray-500">Uploading...</p>
</div>
) : content.fileUrl ? (
<div className="flex flex-col items-center">
<div className="mx-auto h-12 w-12 text-primary-500 bg-primary-50 rounded-full flex items-center justify-center mb-2">
<FileText className="h-6 w-6" />
</div>
<p className="text-sm text-green-600 font-medium mb-1">Upload Complete!</p>
<a href={content.fileUrl} target="_blank" rel="noopener noreferrer" className="text-xs text-primary-500 hover:underline break-all max-w-xs mb-3 block">
{content.fileName || 'View File'}
</a>
<label htmlFor="file-upload" className="cursor-pointer bg-white py-2 px-3 border border-gray-300 rounded-md shadow-sm text-sm leading-4 font-medium text-gray-700 hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-primary-500">
<span>Replace File</span>
<input id="file-upload" name="file-upload" type="file" className="sr-only" accept=".pdf,image/*" onChange={handleFileUpload} />
</label>
</div>
) : (
<>
<Upload className="mx-auto h-12 w-12 text-gray-400" />
<div className="flex text-sm text-gray-600 justify-center">
<label htmlFor="file-upload" className="relative cursor-pointer bg-white rounded-md font-medium text-primary-600 hover:text-primary-500 focus-within:outline-none focus-within:ring-2 focus-within:ring-offset-2 focus-within:ring-primary-500">
<span>Upload a file</span>
<input id="file-upload" name="file-upload" type="file" className="sr-only" accept=".pdf,image/*" onChange={handleFileUpload} />
</label>
<p className="pl-1">or drag and drop</p>
</div>
<p className="text-xs text-gray-500">PDF, PNG, JPG up to 10MB</p>
</>
)}
</div>
</div>
</div>
{content.fileUrl && (
<Input
label="File Name / Menu Title"
value={content.fileName || ''}
onChange={(e) => setContent({ ...content, fileName: e.target.value })}
placeholder="Product Catalog 2026"
/>
)}
</>
)}
{qrCode.contentType === 'APP' && (
<>
<Input
label="iOS App Store URL"
value={content.iosUrl || ''}
onChange={(e) => setContent({ ...content, iosUrl: e.target.value })}
placeholder="https://apps.apple.com/app/..."
/>
<Input
label="Android Play Store URL"
value={content.androidUrl || ''}
onChange={(e) => setContent({ ...content, androidUrl: e.target.value })}
placeholder="https://play.google.com/store/apps/..."
/>
<Input
label="Fallback URL (Desktop)"
value={content.fallbackUrl || ''}
onChange={(e) => setContent({ ...content, fallbackUrl: e.target.value })}
placeholder="https://yourapp.com"
/>
</>
)}
{qrCode.contentType === 'COUPON' && (
<>
<Input
label="Coupon Code"
value={content.code || ''}
onChange={(e) => setContent({ ...content, code: e.target.value })}
placeholder="SUMMER20"
required
/>
<Input
label="Discount"
value={content.discount || ''}
onChange={(e) => setContent({ ...content, discount: e.target.value })}
placeholder="20% OFF"
required
/>
<Input
label="Title"
value={content.title || ''}
onChange={(e) => setContent({ ...content, title: e.target.value })}
placeholder="Summer Sale 2026"
/>
<Input
label="Description (optional)"
value={content.description || ''}
onChange={(e) => setContent({ ...content, description: e.target.value })}
placeholder="Valid on all products"
/>
<Input
label="Expiry Date (optional)"
type="date"
value={content.expiryDate || ''}
onChange={(e) => setContent({ ...content, expiryDate: e.target.value })}
/>
<Input
label="Redeem URL (optional)"
value={content.redeemUrl || ''}
onChange={(e) => setContent({ ...content, redeemUrl: e.target.value })}
placeholder="https://shop.example.com"
/>
</>
)}
{qrCode.contentType === 'FEEDBACK' && (
<>
<Input
label="Business Name"
value={content.businessName || ''}
onChange={(e) => setContent({ ...content, businessName: e.target.value })}
placeholder="Your Restaurant Name"
required
/>
<Input
label="Google Review URL (optional)"
value={content.googleReviewUrl || ''}
onChange={(e) => setContent({ ...content, googleReviewUrl: e.target.value })}
placeholder="https://search.google.com/local/writereview?placeid=..."
/>
<Input
label="Thank You Message"
value={content.thankYouMessage || ''}
onChange={(e) => setContent({ ...content, thankYouMessage: e.target.value })}
placeholder="Thanks for your feedback!"
/>
</>
)}
<div className="flex justify-end space-x-4 pt-4">
<Button
variant="outline"
onClick={() => router.push('/dashboard')}
>
Cancel
</Button>
<Button
onClick={handleSave}
loading={saving}
disabled={csrfLoading || saving}
>
{csrfLoading ? 'Loading...' : 'Save Changes'}
</Button>
</div>
</CardContent>
</Card>
</div>
);
}
'use client';
import React, { useState, useEffect } from 'react';
import { useRouter, useParams } from 'next/navigation';
import { Card, CardHeader, CardTitle, CardContent } from '@/components/ui/Card';
import { Button } from '@/components/ui/Button';
import { Input } from '@/components/ui/Input';
import { showToast } from '@/components/ui/Toast';
import { useCsrf } from '@/hooks/useCsrf';
import { Upload, FileText, HelpCircle } from 'lucide-react';
// Tooltip component for form field help
const Tooltip = ({ text }: { text: string }) => (
<div className="group relative inline-block ml-1">
<HelpCircle className="w-4 h-4 text-gray-400 cursor-help" />
<div className="absolute bottom-full left-1/2 -translate-x-1/2 mb-2 px-3 py-2 bg-gray-900 text-white text-xs rounded-lg opacity-0 invisible group-hover:opacity-100 group-hover:visible transition-all duration-200 z-50 w-48 text-center">
{text}
<div className="absolute top-full left-1/2 -translate-x-1/2 border-4 border-transparent border-t-gray-900"></div>
</div>
</div>
);
export default function EditQRPage() {
const router = useRouter();
const params = useParams();
const qrId = params.id as string;
const { fetchWithCsrf, loading: csrfLoading } = useCsrf();
const [loading, setLoading] = useState(true);
const [saving, setSaving] = useState(false);
const [uploading, setUploading] = useState(false);
const [qrCode, setQrCode] = useState<any>(null);
const [title, setTitle] = useState('');
const [content, setContent] = useState<any>({});
useEffect(() => {
const fetchQRCode = async () => {
try {
const response = await fetch(`/api/qrs/${qrId}`);
if (response.ok) {
const data = await response.json();
setQrCode(data);
setTitle(data.title);
setContent(data.content || {});
} else {
showToast('Failed to load QR code', 'error');
router.push('/dashboard');
}
} catch (error) {
console.error('Error fetching QR code:', error);
showToast('Failed to load QR code', 'error');
router.push('/dashboard');
} finally {
setLoading(false);
}
};
fetchQRCode();
}, [qrId, router]);
const handleFileUpload = async (e: React.ChangeEvent<HTMLInputElement>) => {
const file = e.target.files?.[0];
if (!file) return;
// 10MB limit
if (file.size > 10 * 1024 * 1024) {
showToast('File size too large (max 10MB)', 'error');
return;
}
setUploading(true);
const formData = new FormData();
formData.append('file', file);
try {
const response = await fetch('/api/upload', {
method: 'POST',
body: formData,
});
const data = await response.json();
if (response.ok) {
setContent({ ...content, fileUrl: data.url, fileName: data.filename });
showToast('File uploaded successfully!', 'success');
} else {
showToast(data.error || 'Upload failed', 'error');
}
} catch (error) {
console.error('Upload error:', error);
showToast('Error uploading file', 'error');
} finally {
setUploading(false);
}
};
const handleSave = async () => {
setSaving(true);
try {
const response = await fetchWithCsrf(`/api/qrs/${qrId}`, {
method: 'PATCH',
body: JSON.stringify({
title,
content,
}),
});
if (response.ok) {
showToast('QR code updated successfully!', 'success');
router.push('/dashboard');
} else {
const error = await response.json();
showToast(error.error || 'Failed to update QR code', 'error');
}
} catch (error) {
console.error('Error updating QR code:', error);
showToast('Failed to update QR code', 'error');
} finally {
setSaving(false);
}
};
if (loading) {
return (
<div className="flex items-center justify-center min-h-screen">
<div className="text-center">
<div className="animate-spin rounded-full h-12 w-12 border-b-2 border-primary-600 mx-auto mb-4"></div>
<p className="text-gray-600">Loading QR code...</p>
</div>
</div>
);
}
if (!qrCode) {
return null;
}
// Static QR codes cannot be edited
if (qrCode.type === 'STATIC') {
return (
<div className="max-w-2xl mx-auto mt-12">
<Card>
<CardContent className="p-12 text-center">
<div className="w-20 h-20 bg-warning-100 rounded-full flex items-center justify-center mx-auto mb-6">
<svg className="w-10 h-10 text-warning-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<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>
<h2 className="text-2xl font-bold text-gray-900 mb-2">Static QR Code</h2>
<p className="text-gray-600 mb-8">
Static QR codes cannot be edited because their content is embedded directly in the QR code image.
</p>
<Button onClick={() => router.push('/dashboard')}>
Back to Dashboard
</Button>
</CardContent>
</Card>
</div>
);
}
return (
<div className="max-w-3xl mx-auto">
<div className="mb-8">
<h1 className="text-3xl font-bold text-gray-900">Edit QR Code</h1>
<p className="text-gray-600 mt-2">Update your dynamic QR code content</p>
</div>
<Card>
<CardHeader>
<CardTitle>QR Code Details</CardTitle>
</CardHeader>
<CardContent className="space-y-6">
<Input
label="Title"
value={title}
onChange={(e) => setTitle(e.target.value)}
placeholder="Enter QR code title"
required
/>
{qrCode.contentType === 'URL' && (
<Input
label="URL"
type="url"
value={content.url || ''}
onChange={(e) => setContent({ ...content, url: e.target.value })}
placeholder="https://example.com"
required
/>
)}
{qrCode.contentType === 'PHONE' && (
<Input
label="Phone Number"
type="tel"
value={content.phone || ''}
onChange={(e) => setContent({ ...content, phone: e.target.value })}
placeholder="+1234567890"
required
/>
)}
{qrCode.contentType === 'VCARD' && (
<>
<Input
label="First Name"
value={content.firstName || ''}
onChange={(e) => setContent({ ...content, firstName: e.target.value })}
placeholder="John"
required
/>
<Input
label="Last Name"
value={content.lastName || ''}
onChange={(e) => setContent({ ...content, lastName: e.target.value })}
placeholder="Doe"
required
/>
<Input
label="Email"
type="email"
value={content.email || ''}
onChange={(e) => setContent({ ...content, email: e.target.value })}
placeholder="john@example.com"
/>
<Input
label="Phone"
value={content.phone || ''}
onChange={(e) => setContent({ ...content, phone: e.target.value })}
placeholder="+1234567890"
/>
<Input
label="Organization"
value={content.organization || ''}
onChange={(e) => setContent({ ...content, organization: e.target.value })}
placeholder="Company Name"
/>
<Input
label="Job Title"
value={content.title || ''}
onChange={(e) => setContent({ ...content, title: e.target.value })}
placeholder="CEO"
/>
</>
)}
{qrCode.contentType === 'GEO' && (
<>
<Input
label="Latitude"
type="number"
step="any"
value={content.latitude || ''}
onChange={(e) => setContent({ ...content, latitude: parseFloat(e.target.value) || 0 })}
placeholder="37.7749"
required
/>
<Input
label="Longitude"
type="number"
step="any"
value={content.longitude || ''}
onChange={(e) => setContent({ ...content, longitude: parseFloat(e.target.value) || 0 })}
placeholder="-122.4194"
required
/>
<Input
label="Location Label (Optional)"
value={content.label || ''}
onChange={(e) => setContent({ ...content, label: e.target.value })}
placeholder="Golden Gate Bridge"
/>
</>
)}
{qrCode.contentType === 'TEXT' && (
<div>
<label className="block text-sm font-medium text-gray-700 mb-2">
Text Content
</label>
<textarea
value={content.text || ''}
onChange={(e) => setContent({ ...content, text: e.target.value })}
className="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-primary-500 focus:border-primary-500"
rows={4}
placeholder="Enter your text content"
required
/>
</div>
)}
{qrCode.contentType === 'PDF' && (
<>
<div>
<div className="flex items-center mb-1">
<label className="block text-sm font-medium text-gray-700">Upload Menu / PDF</label>
<Tooltip text="Upload your menu PDF (Max 10MB). Hosted securely." />
</div>
<div className="mt-2 flex justify-center px-6 pt-5 pb-6 border-2 border-gray-300 border-dashed rounded-lg hover:bg-gray-50 transition-colors relative">
<div className="space-y-1 text-center">
{uploading ? (
<div className="flex flex-col items-center">
<div className="animate-spin rounded-full h-8 w-8 border-b-2 border-primary-500 mb-2"></div>
<p className="text-sm text-gray-500">Uploading...</p>
</div>
) : content.fileUrl ? (
<div className="flex flex-col items-center">
<div className="mx-auto h-12 w-12 text-primary-500 bg-primary-50 rounded-full flex items-center justify-center mb-2">
<FileText className="h-6 w-6" />
</div>
<p className="text-sm text-green-600 font-medium mb-1">Upload Complete!</p>
<a href={content.fileUrl} target="_blank" rel="noopener noreferrer" className="text-xs text-primary-500 hover:underline break-all max-w-xs mb-3 block">
{content.fileName || 'View File'}
</a>
<label htmlFor="file-upload" className="cursor-pointer bg-white py-2 px-3 border border-gray-300 rounded-md shadow-sm text-sm leading-4 font-medium text-gray-700 hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-primary-500">
<span>Replace File</span>
<input id="file-upload" name="file-upload" type="file" className="sr-only" accept=".pdf,image/*" onChange={handleFileUpload} />
</label>
</div>
) : (
<>
<Upload className="mx-auto h-12 w-12 text-gray-400" />
<div className="flex text-sm text-gray-600 justify-center">
<label htmlFor="file-upload" className="relative cursor-pointer bg-white rounded-md font-medium text-primary-600 hover:text-primary-500 focus-within:outline-none focus-within:ring-2 focus-within:ring-offset-2 focus-within:ring-primary-500">
<span>Upload a file</span>
<input id="file-upload" name="file-upload" type="file" className="sr-only" accept=".pdf,image/*" onChange={handleFileUpload} />
</label>
<p className="pl-1">or drag and drop</p>
</div>
<p className="text-xs text-gray-500">PDF, PNG, JPG up to 10MB</p>
</>
)}
</div>
</div>
</div>
{content.fileUrl && (
<Input
label="File Name / Menu Title"
value={content.fileName || ''}
onChange={(e) => setContent({ ...content, fileName: e.target.value })}
placeholder="Product Catalog 2026"
/>
)}
</>
)}
{qrCode.contentType === 'APP' && (
<>
<Input
label="iOS App Store URL"
value={content.iosUrl || ''}
onChange={(e) => setContent({ ...content, iosUrl: e.target.value })}
placeholder="https://apps.apple.com/app/..."
/>
<Input
label="Android Play Store URL"
value={content.androidUrl || ''}
onChange={(e) => setContent({ ...content, androidUrl: e.target.value })}
placeholder="https://play.google.com/store/apps/..."
/>
<Input
label="Fallback URL (Desktop)"
value={content.fallbackUrl || ''}
onChange={(e) => setContent({ ...content, fallbackUrl: e.target.value })}
placeholder="https://yourapp.com"
/>
</>
)}
{qrCode.contentType === 'COUPON' && (
<>
<Input
label="Coupon Code"
value={content.code || ''}
onChange={(e) => setContent({ ...content, code: e.target.value })}
placeholder="SUMMER20"
required
/>
<Input
label="Discount"
value={content.discount || ''}
onChange={(e) => setContent({ ...content, discount: e.target.value })}
placeholder="20% OFF"
required
/>
<Input
label="Title"
value={content.title || ''}
onChange={(e) => setContent({ ...content, title: e.target.value })}
placeholder="Summer Sale 2026"
/>
<Input
label="Description (optional)"
value={content.description || ''}
onChange={(e) => setContent({ ...content, description: e.target.value })}
placeholder="Valid on all products"
/>
<Input
label="Expiry Date (optional)"
type="date"
value={content.expiryDate || ''}
onChange={(e) => setContent({ ...content, expiryDate: e.target.value })}
/>
<Input
label="Redeem URL (optional)"
value={content.redeemUrl || ''}
onChange={(e) => setContent({ ...content, redeemUrl: e.target.value })}
placeholder="https://shop.example.com"
/>
</>
)}
{qrCode.contentType === 'FEEDBACK' && (
<>
<Input
label="Business Name"
value={content.businessName || ''}
onChange={(e) => setContent({ ...content, businessName: e.target.value })}
placeholder="Your Restaurant Name"
required
/>
<Input
label="Google Review URL (optional)"
value={content.googleReviewUrl || ''}
onChange={(e) => setContent({ ...content, googleReviewUrl: e.target.value })}
placeholder="https://search.google.com/local/writereview?placeid=..."
/>
<Input
label="Thank You Message"
value={content.thankYouMessage || ''}
onChange={(e) => setContent({ ...content, thankYouMessage: e.target.value })}
placeholder="Thanks for your feedback!"
/>
</>
)}
<div className="flex justify-end space-x-4 pt-4">
<Button
variant="outline"
onClick={() => router.push('/dashboard')}
>
Cancel
</Button>
<Button
onClick={handleSave}
loading={saving}
disabled={csrfLoading || saving}
>
{csrfLoading ? 'Loading...' : 'Save Changes'}
</Button>
</div>
</CardContent>
</Card>
</div>
);
}

392
src/app/(main)/(app)/qr/[id]/feedback/page.tsx
View File

@@ -1,196 +1,196 @@
'use client';
import React, { useState, useEffect } from 'react';
import { useParams, useRouter } from 'next/navigation';
import Link from 'next/link';
import { Card, CardHeader, CardTitle, CardContent } from '@/components/ui/Card';
import { Button } from '@/components/ui/Button';
import { Star, ArrowLeft, ChevronLeft, ChevronRight, MessageSquare } from 'lucide-react';
interface Feedback {
id: string;
rating: number;
comment: string;
date: string;
}
interface FeedbackStats {
total: number;
avgRating: number;
distribution: { [key: number]: number };
}
interface Pagination {
page: number;
totalPages: number;
hasMore: boolean;
}
export default function FeedbackListPage() {
const params = useParams();
const router = useRouter();
const qrId = params.id as string;
const [feedbacks, setFeedbacks] = useState<Feedback[]>([]);
const [stats, setStats] = useState<FeedbackStats | null>(null);
const [pagination, setPagination] = useState<Pagination>({ page: 1, totalPages: 1, hasMore: false });
const [loading, setLoading] = useState(true);
const [currentPage, setCurrentPage] = useState(1);
useEffect(() => {
fetchFeedback(currentPage);
}, [qrId, currentPage]);
const fetchFeedback = async (page: number) => {
setLoading(true);
try {
const res = await fetch(`/api/qrs/${qrId}/feedback?page=${page}&limit=20`);
if (res.ok) {
const data = await res.json();
setFeedbacks(data.feedbacks);
setStats(data.stats);
setPagination(data.pagination);
}
} catch (error) {
console.error('Error fetching feedback:', error);
} finally {
setLoading(false);
}
};
const renderStars = (rating: number) => (
<div className="flex gap-0.5">
{[1, 2, 3, 4, 5].map((star) => (
<Star
key={star}
className={`w-4 h-4 ${star <= rating ? 'text-amber-400 fill-amber-400' : 'text-gray-200'}`}
/>
))}
</div>
);
if (loading && !stats) {
return (
<div className="flex items-center justify-center min-h-[400px]">
<div className="animate-spin rounded-full h-8 w-8 border-b-2 border-indigo-600"></div>
</div>
);
}
return (
<div className="max-w-4xl mx-auto">
{/* Header */}
<div className="mb-8">
<Link href={`/qr/${qrId}`} className="inline-flex items-center text-gray-500 hover:text-gray-700 mb-4">
<ArrowLeft className="w-4 h-4 mr-2" />
Back to QR Code
</Link>
<h1 className="text-3xl font-bold text-gray-900">Customer Feedback</h1>
<p className="text-gray-600 mt-1">{stats?.total || 0} total responses</p>
</div>
{/* Stats Overview */}
{stats && (
<Card className="mb-8">
<CardContent className="p-6">
<div className="flex flex-col md:flex-row md:items-center gap-8">
{/* Average Rating */}
<div className="text-center md:text-left">
<div className="text-5xl font-bold text-gray-900 mb-1">{stats.avgRating}</div>
<div className="flex justify-center md:justify-start mb-1">
{renderStars(Math.round(stats.avgRating))}
</div>
<p className="text-sm text-gray-500">{stats.total} reviews</p>
</div>
{/* Distribution */}
<div className="flex-1 space-y-2">
{[5, 4, 3, 2, 1].map((rating) => {
const count = stats.distribution[rating] || 0;
const percentage = stats.total > 0 ? (count / stats.total) * 100 : 0;
return (
<div key={rating} className="flex items-center gap-3">
<span className="text-sm text-gray-600 w-12">{rating} stars</span>
<div className="flex-1 h-2 bg-gray-100 rounded-full overflow-hidden">
<div
className="h-full bg-amber-400 rounded-full transition-all"
style={{ width: `${percentage}%` }}
/>
</div>
<span className="text-sm text-gray-500 w-12 text-right">{count}</span>
</div>
);
})}
</div>
</div>
</CardContent>
</Card>
)}
{/* Feedback List */}
<Card>
<CardHeader>
<CardTitle className="flex items-center gap-2">
<MessageSquare className="w-5 h-5" />
All Reviews
</CardTitle>
</CardHeader>
<CardContent>
{feedbacks.length === 0 ? (
<div className="text-center py-12 text-gray-500">
<Star className="w-12 h-12 mx-auto mb-4 text-gray-300" />
<p>No feedback received yet</p>
</div>
) : (
<div className="divide-y divide-gray-100">
{feedbacks.map((feedback) => (
<div key={feedback.id} className="py-4">
<div className="flex items-center justify-between mb-2">
{renderStars(feedback.rating)}
<span className="text-sm text-gray-400">
{new Date(feedback.date).toLocaleDateString('en-US', {
month: 'short',
day: 'numeric',
year: 'numeric',
})}
</span>
</div>
{feedback.comment && (
<p className="text-gray-700">{feedback.comment}</p>
)}
</div>
))}
</div>
)}
{/* Pagination */}
{pagination.totalPages > 1 && (
<div className="flex items-center justify-between mt-6 pt-6 border-t">
<Button
variant="outline"
size="sm"
onClick={() => setCurrentPage((p) => Math.max(1, p - 1))}
disabled={currentPage === 1}
>
<ChevronLeft className="w-4 h-4 mr-1" />
Previous
</Button>
<span className="text-sm text-gray-500">
Page {currentPage} of {pagination.totalPages}
</span>
<Button
variant="outline"
size="sm"
onClick={() => setCurrentPage((p) => p + 1)}
disabled={!pagination.hasMore}
>
Next
<ChevronRight className="w-4 h-4 ml-1" />
</Button>
</div>
)}
</CardContent>
</Card>
</div>
);
}
'use client';
import React, { useState, useEffect } from 'react';
import { useParams, useRouter } from 'next/navigation';
import Link from 'next/link';
import { Card, CardHeader, CardTitle, CardContent } from '@/components/ui/Card';
import { Button } from '@/components/ui/Button';
import { Star, ArrowLeft, ChevronLeft, ChevronRight, MessageSquare } from 'lucide-react';
interface Feedback {
id: string;
rating: number;
comment: string;
date: string;
}
interface FeedbackStats {
total: number;
avgRating: number;
distribution: { [key: number]: number };
}
interface Pagination {
page: number;
totalPages: number;
hasMore: boolean;
}
export default function FeedbackListPage() {
const params = useParams();
const router = useRouter();
const qrId = params.id as string;
const [feedbacks, setFeedbacks] = useState<Feedback[]>([]);
const [stats, setStats] = useState<FeedbackStats | null>(null);
const [pagination, setPagination] = useState<Pagination>({ page: 1, totalPages: 1, hasMore: false });
const [loading, setLoading] = useState(true);
const [currentPage, setCurrentPage] = useState(1);
useEffect(() => {
fetchFeedback(currentPage);
}, [qrId, currentPage]);
const fetchFeedback = async (page: number) => {
setLoading(true);
try {
const res = await fetch(`/api/qrs/${qrId}/feedback?page=${page}&limit=20`);
if (res.ok) {
const data = await res.json();
setFeedbacks(data.feedbacks);
setStats(data.stats);
setPagination(data.pagination);
}
} catch (error) {
console.error('Error fetching feedback:', error);
} finally {
setLoading(false);
}
};
const renderStars = (rating: number) => (
<div className="flex gap-0.5">
{[1, 2, 3, 4, 5].map((star) => (
<Star
key={star}
className={`w-4 h-4 ${star <= rating ? 'text-amber-400 fill-amber-400' : 'text-gray-200'}`}
/>
))}
</div>
);
if (loading && !stats) {
return (
<div className="flex items-center justify-center min-h-[400px]">
<div className="animate-spin rounded-full h-8 w-8 border-b-2 border-indigo-600"></div>
</div>
);
}
return (
<div className="max-w-4xl mx-auto">
{/* Header */}
<div className="mb-8">
<Link href={`/qr/${qrId}`} className="inline-flex items-center text-gray-500 hover:text-gray-700 mb-4">
<ArrowLeft className="w-4 h-4 mr-2" />
Back to QR Code
</Link>
<h1 className="text-3xl font-bold text-gray-900">Customer Feedback</h1>
<p className="text-gray-600 mt-1">{stats?.total || 0} total responses</p>
</div>
{/* Stats Overview */}
{stats && (
<Card className="mb-8">
<CardContent className="p-6">
<div className="flex flex-col md:flex-row md:items-center gap-8">
{/* Average Rating */}
<div className="text-center md:text-left">
<div className="text-5xl font-bold text-gray-900 mb-1">{stats.avgRating}</div>
<div className="flex justify-center md:justify-start mb-1">
{renderStars(Math.round(stats.avgRating))}
</div>
<p className="text-sm text-gray-500">{stats.total} reviews</p>
</div>
{/* Distribution */}
<div className="flex-1 space-y-2">
{[5, 4, 3, 2, 1].map((rating) => {
const count = stats.distribution[rating] || 0;
const percentage = stats.total > 0 ? (count / stats.total) * 100 : 0;
return (
<div key={rating} className="flex items-center gap-3">
<span className="text-sm text-gray-600 w-12">{rating} stars</span>
<div className="flex-1 h-2 bg-gray-100 rounded-full overflow-hidden">
<div
className="h-full bg-amber-400 rounded-full transition-all"
style={{ width: `${percentage}%` }}
/>
</div>
<span className="text-sm text-gray-500 w-12 text-right">{count}</span>
</div>
);
})}
</div>
</div>
</CardContent>
</Card>
)}
{/* Feedback List */}
<Card>
<CardHeader>
<CardTitle className="flex items-center gap-2">
<MessageSquare className="w-5 h-5" />
All Reviews
</CardTitle>
</CardHeader>
<CardContent>
{feedbacks.length === 0 ? (
<div className="text-center py-12 text-gray-500">
<Star className="w-12 h-12 mx-auto mb-4 text-gray-300" />
<p>No feedback received yet</p>
</div>
) : (
<div className="divide-y divide-gray-100">
{feedbacks.map((feedback) => (
<div key={feedback.id} className="py-4">
<div className="flex items-center justify-between mb-2">
{renderStars(feedback.rating)}
<span className="text-sm text-gray-400">
{new Date(feedback.date).toLocaleDateString('en-US', {
month: 'short',
day: 'numeric',
year: 'numeric',
})}
</span>
</div>
{feedback.comment && (
<p className="text-gray-700">{feedback.comment}</p>
)}
</div>
))}
</div>
)}
{/* Pagination */}
{pagination.totalPages > 1 && (
<div className="flex items-center justify-between mt-6 pt-6 border-t">
<Button
variant="outline"
size="sm"
onClick={() => setCurrentPage((p) => Math.max(1, p - 1))}
disabled={currentPage === 1}
>
<ChevronLeft className="w-4 h-4 mr-1" />
Previous
</Button>
<span className="text-sm text-gray-500">
Page {currentPage} of {pagination.totalPages}
</span>
<Button
variant="outline"
size="sm"
onClick={() => setCurrentPage((p) => p + 1)}
disabled={!pagination.hasMore}
>
Next
<ChevronRight className="w-4 h-4 ml-1" />
</Button>
</div>
)}
</CardContent>
</Card>
</div>
);
}

574
src/app/(main)/(app)/qr/[id]/page.tsx
View File

@@ -1,287 +1,287 @@
'use client';
import React, { useState, useEffect } from 'react';
import { useParams, useRouter } from 'next/navigation';
import Link from 'next/link';
import { QRCodeSVG } from 'qrcode.react';
import { Card, CardHeader, CardTitle, CardContent } from '@/components/ui/Card';
import { Button } from '@/components/ui/Button';
import { Badge } from '@/components/ui/Badge';
import {
ArrowLeft, Edit, ExternalLink, Star, MessageSquare,
BarChart3, Copy, Check, Pause, Play
} from 'lucide-react';
import { showToast } from '@/components/ui/Toast';
import { useCsrf } from '@/hooks/useCsrf';
interface QRCode {
id: string;
title: string;
type: 'STATIC' | 'DYNAMIC';
contentType: string;
content: any;
slug: string;
status: 'ACTIVE' | 'PAUSED';
style: any;
createdAt: string;
_count?: { scans: number };
}
interface FeedbackStats {
total: number;
avgRating: number;
distribution: { [key: number]: number };
}
export default function QRDetailPage() {
const params = useParams();
const router = useRouter();
const qrId = params.id as string;
const { fetchWithCsrf } = useCsrf();
const [qrCode, setQrCode] = useState<QRCode | null>(null);
const [feedbackStats, setFeedbackStats] = useState<FeedbackStats | null>(null);
const [loading, setLoading] = useState(true);
const [copied, setCopied] = useState(false);
useEffect(() => {
fetchQRCode();
}, [qrId]);
const fetchQRCode = async () => {
try {
const res = await fetch(`/api/qrs/${qrId}`);
if (res.ok) {
const data = await res.json();
setQrCode(data);
// Fetch feedback stats if it's a feedback QR
if (data.contentType === 'FEEDBACK') {
const feedbackRes = await fetch(`/api/qrs/${qrId}/feedback?limit=1`);
if (feedbackRes.ok) {
const feedbackData = await feedbackRes.json();
setFeedbackStats(feedbackData.stats);
}
}
} else {
showToast('QR code not found', 'error');
router.push('/dashboard');
}
} catch (error) {
console.error('Error fetching QR code:', error);
} finally {
setLoading(false);
}
};
const copyLink = async () => {
const url = `${window.location.origin}/r/${qrCode?.slug}`;
await navigator.clipboard.writeText(url);
setCopied(true);
setTimeout(() => setCopied(false), 2000);
showToast('Link copied!', 'success');
};
const toggleStatus = async () => {
if (!qrCode) return;
const newStatus = qrCode.status === 'ACTIVE' ? 'PAUSED' : 'ACTIVE';
try {
const res = await fetchWithCsrf(`/api/qrs/${qrId}`, {
method: 'PATCH',
body: JSON.stringify({ status: newStatus }),
});
if (res.ok) {
setQrCode({ ...qrCode, status: newStatus });
showToast(`QR code ${newStatus === 'ACTIVE' ? 'activated' : 'paused'}`, 'success');
}
} catch (error) {
showToast('Failed to update status', 'error');
}
};
const renderStars = (rating: number) => (
<div className="flex gap-0.5">
{[1, 2, 3, 4, 5].map((star) => (
<Star
key={star}
className={`w-4 h-4 ${star <= rating ? 'text-amber-400 fill-amber-400' : 'text-gray-200'}`}
/>
))}
</div>
);
if (loading) {
return (
<div className="flex items-center justify-center min-h-[400px]">
<div className="animate-spin rounded-full h-8 w-8 border-b-2 border-indigo-600"></div>
</div>
);
}
if (!qrCode) return null;
const qrUrl = `${typeof window !== 'undefined' ? window.location.origin : ''}/r/${qrCode.slug}`;
return (
<div className="max-w-6xl mx-auto">
{/* Header */}
<div className="mb-8">
<Link href="/dashboard" className="inline-flex items-center text-gray-500 hover:text-gray-700 mb-4">
<ArrowLeft className="w-4 h-4 mr-2" />
Back to Dashboard
</Link>
<div className="flex flex-col sm:flex-row sm:items-center sm:justify-between gap-4">
<div>
<h1 className="text-3xl font-bold text-gray-900">{qrCode.title}</h1>
<div className="flex items-center gap-2 mt-2">
<Badge variant={qrCode.type === 'DYNAMIC' ? 'info' : 'default'}>
{qrCode.type}
</Badge>
<Badge variant={qrCode.status === 'ACTIVE' ? 'success' : 'warning'}>
{qrCode.status}
</Badge>
<Badge>{qrCode.contentType}</Badge>
</div>
</div>
<div className="flex gap-2">
{qrCode.type === 'DYNAMIC' && (
<>
<Button variant="outline" size="sm" onClick={toggleStatus}>
{qrCode.status === 'ACTIVE' ? <Pause className="w-4 h-4 mr-1" /> : <Play className="w-4 h-4 mr-1" />}
{qrCode.status === 'ACTIVE' ? 'Pause' : 'Activate'}
</Button>
<Link href={`/qr/${qrId}/edit`}>
<Button variant="outline" size="sm">
<Edit className="w-4 h-4 mr-1" /> Edit
</Button>
</Link>
</>
)}
</div>
</div>
</div>
<div className="grid lg:grid-cols-3 gap-8">
{/* Left: QR Code */}
<div>
<Card>
<CardContent className="p-6 flex flex-col items-center">
<div className="bg-white p-4 rounded-xl shadow-sm mb-4">
<QRCodeSVG
value={qrUrl}
size={200}
fgColor={qrCode.style?.foregroundColor || '#000000'}
bgColor={qrCode.style?.backgroundColor || '#FFFFFF'}
/>
</div>
<div className="w-full space-y-2">
<Button variant="outline" className="w-full" onClick={copyLink}>
{copied ? <Check className="w-4 h-4 mr-2" /> : <Copy className="w-4 h-4 mr-2" />}
{copied ? 'Copied!' : 'Copy Link'}
</Button>
<a href={qrUrl} target="_blank" rel="noopener noreferrer" className="block">
<Button variant="outline" className="w-full">
<ExternalLink className="w-4 h-4 mr-2" /> Open Link
</Button>
</a>
</div>
</CardContent>
</Card>
</div>
{/* Right: Stats & Info */}
<div className="lg:col-span-2 space-y-6">
{/* Quick Stats */}
<div className="grid grid-cols-2 sm:grid-cols-3 gap-4">
<Card>
<CardContent className="p-4 text-center">
<BarChart3 className="w-6 h-6 mx-auto mb-2 text-indigo-500" />
<p className="text-2xl font-bold text-gray-900">{qrCode._count?.scans || 0}</p>
<p className="text-sm text-gray-500">Total Scans</p>
</CardContent>
</Card>
<Card>
<CardContent className="p-4 text-center">
<p className="text-2xl font-bold text-gray-900">{qrCode.type}</p>
<p className="text-sm text-gray-500">QR Type</p>
</CardContent>
</Card>
<Card>
<CardContent className="p-4 text-center">
<p className="text-2xl font-bold text-gray-900">
{new Date(qrCode.createdAt).toLocaleDateString('en-US', { month: 'short', day: 'numeric' })}
</p>
<p className="text-sm text-gray-500">Created</p>
</CardContent>
</Card>
</div>
{/* Feedback Summary (only for FEEDBACK type) */}
{qrCode.contentType === 'FEEDBACK' && (
<Card>
<CardHeader>
<CardTitle className="flex items-center gap-2">
<Star className="w-5 h-5 text-amber-400" />
Customer Feedback
</CardTitle>
</CardHeader>
<CardContent>
{feedbackStats && feedbackStats.total > 0 ? (
<div className="flex flex-col sm:flex-row sm:items-center gap-6 mb-4">
{/* Average */}
<div className="text-center sm:text-left">
<div className="text-4xl font-bold text-gray-900">{feedbackStats.avgRating}</div>
{renderStars(Math.round(feedbackStats.avgRating))}
<p className="text-sm text-gray-500 mt-1">{feedbackStats.total} reviews</p>
</div>
{/* Distribution */}
<div className="flex-1 space-y-1">
{[5, 4, 3, 2, 1].map((rating) => {
const count = feedbackStats.distribution[rating] || 0;
const pct = feedbackStats.total > 0 ? (count / feedbackStats.total) * 100 : 0;
return (
<div key={rating} className="flex items-center gap-2 text-sm">
<span className="w-8 text-gray-500">{rating}★</span>
<div className="flex-1 h-2 bg-gray-100 rounded-full overflow-hidden">
<div className="h-full bg-amber-400 rounded-full" style={{ width: `${pct}%` }} />
</div>
<span className="w-8 text-gray-400 text-right">{count}</span>
</div>
);
})}
</div>
</div>
) : (
<p className="text-gray-500 mb-4">No feedback received yet. Share your QR code to collect reviews!</p>
)}
<Link href={`/qr/${qrId}/feedback`} className="block">
<Button variant="outline" className="w-full">
<MessageSquare className="w-4 h-4 mr-2" />
View All Feedback
</Button>
</Link>
</CardContent>
</Card>
)}
{/* Content Info */}
<Card>
<CardHeader>
<CardTitle>Content Details</CardTitle>
</CardHeader>
<CardContent>
<pre className="bg-gray-50 p-4 rounded-lg text-sm overflow-auto">
{JSON.stringify(qrCode.content, null, 2)}
</pre>
</CardContent>
</Card>
</div>
</div>
</div>
);
}
'use client';
import React, { useState, useEffect } from 'react';
import { useParams, useRouter } from 'next/navigation';
import Link from 'next/link';
import { QRCodeSVG } from 'qrcode.react';
import { Card, CardHeader, CardTitle, CardContent } from '@/components/ui/Card';
import { Button } from '@/components/ui/Button';
import { Badge } from '@/components/ui/Badge';
import {
ArrowLeft, Edit, ExternalLink, Star, MessageSquare,
BarChart3, Copy, Check, Pause, Play
} from 'lucide-react';
import { showToast } from '@/components/ui/Toast';
import { useCsrf } from '@/hooks/useCsrf';
interface QRCode {
id: string;
title: string;
type: 'STATIC' | 'DYNAMIC';
contentType: string;
content: any;
slug: string;
status: 'ACTIVE' | 'PAUSED';
style: any;
createdAt: string;
_count?: { scans: number };
}
interface FeedbackStats {
total: number;
avgRating: number;
distribution: { [key: number]: number };
}
export default function QRDetailPage() {
const params = useParams();
const router = useRouter();
const qrId = params.id as string;
const { fetchWithCsrf } = useCsrf();
const [qrCode, setQrCode] = useState<QRCode | null>(null);
const [feedbackStats, setFeedbackStats] = useState<FeedbackStats | null>(null);
const [loading, setLoading] = useState(true);
const [copied, setCopied] = useState(false);
useEffect(() => {
fetchQRCode();
}, [qrId]);
const fetchQRCode = async () => {
try {
const res = await fetch(`/api/qrs/${qrId}`);
if (res.ok) {
const data = await res.json();
setQrCode(data);
// Fetch feedback stats if it's a feedback QR
if (data.contentType === 'FEEDBACK') {
const feedbackRes = await fetch(`/api/qrs/${qrId}/feedback?limit=1`);
if (feedbackRes.ok) {
const feedbackData = await feedbackRes.json();
setFeedbackStats(feedbackData.stats);
}
}
} else {
showToast('QR code not found', 'error');
router.push('/dashboard');
}
} catch (error) {
console.error('Error fetching QR code:', error);
} finally {
setLoading(false);
}
};
const copyLink = async () => {
const url = `${window.location.origin}/r/${qrCode?.slug}`;
await navigator.clipboard.writeText(url);
setCopied(true);
setTimeout(() => setCopied(false), 2000);
showToast('Link copied!', 'success');
};
const toggleStatus = async () => {
if (!qrCode) return;
const newStatus = qrCode.status === 'ACTIVE' ? 'PAUSED' : 'ACTIVE';
try {
const res = await fetchWithCsrf(`/api/qrs/${qrId}`, {
method: 'PATCH',
body: JSON.stringify({ status: newStatus }),
});
if (res.ok) {
setQrCode({ ...qrCode, status: newStatus });
showToast(`QR code ${newStatus === 'ACTIVE' ? 'activated' : 'paused'}`, 'success');
}
} catch (error) {
showToast('Failed to update status', 'error');
}
};
const renderStars = (rating: number) => (
<div className="flex gap-0.5">
{[1, 2, 3, 4, 5].map((star) => (
<Star
key={star}
className={`w-4 h-4 ${star <= rating ? 'text-amber-400 fill-amber-400' : 'text-gray-200'}`}
/>
))}
</div>
);
if (loading) {
return (
<div className="flex items-center justify-center min-h-[400px]">
<div className="animate-spin rounded-full h-8 w-8 border-b-2 border-indigo-600"></div>
</div>
);
}
if (!qrCode) return null;
const qrUrl = `${typeof window !== 'undefined' ? window.location.origin : ''}/r/${qrCode.slug}`;
return (
<div className="max-w-6xl mx-auto">
{/* Header */}
<div className="mb-8">
<Link href="/dashboard" className="inline-flex items-center text-gray-500 hover:text-gray-700 mb-4">
<ArrowLeft className="w-4 h-4 mr-2" />
Back to Dashboard
</Link>
<div className="flex flex-col sm:flex-row sm:items-center sm:justify-between gap-4">
<div>
<h1 className="text-3xl font-bold text-gray-900">{qrCode.title}</h1>
<div className="flex items-center gap-2 mt-2">
<Badge variant={qrCode.type === 'DYNAMIC' ? 'info' : 'default'}>
{qrCode.type}
</Badge>
<Badge variant={qrCode.status === 'ACTIVE' ? 'success' : 'warning'}>
{qrCode.status}
</Badge>
<Badge>{qrCode.contentType}</Badge>
</div>
</div>
<div className="flex gap-2">
{qrCode.type === 'DYNAMIC' && (
<>
<Button variant="outline" size="sm" onClick={toggleStatus}>
{qrCode.status === 'ACTIVE' ? <Pause className="w-4 h-4 mr-1" /> : <Play className="w-4 h-4 mr-1" />}
{qrCode.status === 'ACTIVE' ? 'Pause' : 'Activate'}
</Button>
<Link href={`/qr/${qrId}/edit`}>
<Button variant="outline" size="sm">
<Edit className="w-4 h-4 mr-1" /> Edit
</Button>
</Link>
</>
)}
</div>
</div>
</div>
<div className="grid lg:grid-cols-3 gap-8">
{/* Left: QR Code */}
<div>
<Card>
<CardContent className="p-6 flex flex-col items-center">
<div className="bg-white p-4 rounded-xl shadow-sm mb-4">
<QRCodeSVG
value={qrUrl}
size={200}
fgColor={qrCode.style?.foregroundColor || '#000000'}
bgColor={qrCode.style?.backgroundColor || '#FFFFFF'}
/>
</div>
<div className="w-full space-y-2">
<Button variant="outline" className="w-full" onClick={copyLink}>
{copied ? <Check className="w-4 h-4 mr-2" /> : <Copy className="w-4 h-4 mr-2" />}
{copied ? 'Copied!' : 'Copy Link'}
</Button>
<a href={qrUrl} target="_blank" rel="noopener noreferrer" className="block">
<Button variant="outline" className="w-full">
<ExternalLink className="w-4 h-4 mr-2" /> Open Link
</Button>
</a>
</div>
</CardContent>
</Card>
</div>
{/* Right: Stats & Info */}
<div className="lg:col-span-2 space-y-6">
{/* Quick Stats */}
<div className="grid grid-cols-2 sm:grid-cols-3 gap-4">
<Card>
<CardContent className="p-4 text-center">
<BarChart3 className="w-6 h-6 mx-auto mb-2 text-indigo-500" />
<p className="text-2xl font-bold text-gray-900">{qrCode._count?.scans || 0}</p>
<p className="text-sm text-gray-500">Total Scans</p>
</CardContent>
</Card>
<Card>
<CardContent className="p-4 text-center">
<p className="text-2xl font-bold text-gray-900">{qrCode.type}</p>
<p className="text-sm text-gray-500">QR Type</p>
</CardContent>
</Card>
<Card>
<CardContent className="p-4 text-center">
<p className="text-2xl font-bold text-gray-900">
{new Date(qrCode.createdAt).toLocaleDateString('en-US', { month: 'short', day: 'numeric' })}
</p>
<p className="text-sm text-gray-500">Created</p>
</CardContent>
</Card>
</div>
{/* Feedback Summary (only for FEEDBACK type) */}
{qrCode.contentType === 'FEEDBACK' && (
<Card>
<CardHeader>
<CardTitle className="flex items-center gap-2">
<Star className="w-5 h-5 text-amber-400" />
Customer Feedback
</CardTitle>
</CardHeader>
<CardContent>
{feedbackStats && feedbackStats.total > 0 ? (
<div className="flex flex-col sm:flex-row sm:items-center gap-6 mb-4">
{/* Average */}
<div className="text-center sm:text-left">
<div className="text-4xl font-bold text-gray-900">{feedbackStats.avgRating}</div>
{renderStars(Math.round(feedbackStats.avgRating))}
<p className="text-sm text-gray-500 mt-1">{feedbackStats.total} reviews</p>
</div>
{/* Distribution */}
<div className="flex-1 space-y-1">
{[5, 4, 3, 2, 1].map((rating) => {
const count = feedbackStats.distribution[rating] || 0;
const pct = feedbackStats.total > 0 ? (count / feedbackStats.total) * 100 : 0;
return (
<div key={rating} className="flex items-center gap-2 text-sm">
<span className="w-8 text-gray-500">{rating}★</span>
<div className="flex-1 h-2 bg-gray-100 rounded-full overflow-hidden">
<div className="h-full bg-amber-400 rounded-full" style={{ width: `${pct}%` }} />
</div>
<span className="w-8 text-gray-400 text-right">{count}</span>
</div>
);
})}
</div>
</div>
) : (
<p className="text-gray-500 mb-4">No feedback received yet. Share your QR code to collect reviews!</p>
)}
<Link href={`/qr/${qrId}/feedback`} className="block">
<Button variant="outline" className="w-full">
<MessageSquare className="w-4 h-4 mr-2" />
View All Feedback
</Button>
</Link>
</CardContent>
</Card>
)}
{/* Content Info */}
<Card>
<CardHeader>
<CardTitle>Content Details</CardTitle>
</CardHeader>
<CardContent>
<pre className="bg-gray-50 p-4 rounded-lg text-sm overflow-auto">
{JSON.stringify(qrCode.content, null, 2)}
</pre>
</CardContent>
</Card>
</div>
</div>
</div>
);
}

48
src/app/(main)/(auth)/layout.tsx
View File

@@ -1,25 +1,25 @@
import Link from 'next/link';
export default function AuthLayout({
children,
}: {
children: React.ReactNode;
}) {
return (
<div className="min-h-screen bg-gradient-to-br from-primary-50 to-white flex flex-col">
<div className="flex-grow">
{children}
</div>
<footer className="py-6 text-center text-sm text-gray-500 bg-transparent">
<div className="space-x-6 mb-2">
<Link href="/" className="hover:text-gray-900 transition-colors">Home</Link>
<Link href="/pricing" className="hover:text-gray-900 transition-colors">Pricing</Link>
<Link href="/privacy" className="hover:text-gray-900 transition-colors">Privacy</Link>
<Link href="/faq" className="hover:text-gray-900 transition-colors">FAQ</Link>
</div>
<p>&copy; {new Date().getFullYear()} QR Master</p>
</footer>
</div>
);
import Link from 'next/link';
export default function AuthLayout({
children,
}: {
children: React.ReactNode;
}) {
return (
<div className="min-h-screen bg-gradient-to-br from-primary-50 to-white flex flex-col">
<div className="flex-grow">
{children}
</div>
<footer className="py-6 text-center text-sm text-gray-500 bg-transparent">
<div className="space-x-6 mb-2">
<Link href="/" className="hover:text-gray-900 transition-colors">Home</Link>
<Link href="/pricing" className="hover:text-gray-900 transition-colors">Pricing</Link>
<Link href="/privacy" className="hover:text-gray-900 transition-colors">Privacy</Link>
<Link href="/faq" className="hover:text-gray-900 transition-colors">FAQ</Link>
</div>
<p>&copy; {new Date().getFullYear()} QR Master</p>
</footer>
</div>
);
}

328
src/app/(main)/(auth)/login/ClientPage.tsx
View File

@@ -1,164 +1,164 @@
'use client';
import React, { useState, useEffect } from 'react';
import { useRouter, useSearchParams } from 'next/navigation';
import Link from 'next/link';
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 LoginClientPage() {
const router = useRouter();
const searchParams = useSearchParams();
const { t } = useTranslation();
const { fetchWithCsrf, loading: csrfLoading } = useCsrf();
const [email, setEmail] = useState('');
const [password, setPassword] = useState('');
const [loading, setLoading] = useState(false);
const [error, setError] = useState('');
const handleSubmit = async (e: React.FormEvent) => {
e.preventDefault();
setLoading(true);
setError('');
try {
const response = await fetchWithCsrf('/api/auth/simple-login', {
method: 'POST',
body: JSON.stringify({ email, password }),
});
const data = await response.json();
if (response.ok && data.success) {
// Store user in localStorage for client-side
localStorage.setItem('user', JSON.stringify(data.user));
// Track successful login with PostHog
try {
const { identifyUser, trackEvent } = await import('@/components/PostHogProvider');
identifyUser(data.user.id, {
email: data.user.email,
name: data.user.name,
plan: data.user.plan || 'FREE',
});
trackEvent('user_login', {
method: 'email',
email: data.user.email,
});
} catch (error) {
console.error('PostHog tracking error:', error);
}
// Check for redirect parameter
const redirectUrl = searchParams.get('redirect') || '/dashboard';
router.push(redirectUrl);
router.refresh();
} else {
setError(data.error || 'Invalid email or password');
}
} catch (err) {
setError('An error occurred. Please try again.');
} finally {
setLoading(false);
}
};
const handleGoogleSignIn = () => {
// Redirect to Google OAuth API route
window.location.href = '/api/auth/google';
};
return (
<Card>
<CardContent className="p-6">
<form onSubmit={handleSubmit} className="space-y-4">
{error && (
<div className="bg-red-50 text-red-600 p-3 rounded-lg text-sm">
{error}
</div>
)}
<Input
label="Email"
type="email"
value={email}
onChange={(e) => setEmail(e.target.value)}
placeholder="you@example.com"
required
/>
<Input
label="Password"
type="password"
value={password}
onChange={(e) => setPassword(e.target.value)}
placeholder="••••••••"
required
/>
<div className="flex items-center justify-between">
<label className="flex items-center">
<input type="checkbox" className="mr-2" />
<span className="text-sm text-gray-600">Remember me</span>
</label>
<Link href="/forgot-password" className="text-sm text-primary-600 hover:text-primary-700">
Forgot password?
</Link>
</div>
<Button type="submit" className="w-full" loading={loading} disabled={csrfLoading || loading}>
{csrfLoading ? 'Loading...' : 'Sign In'}
</Button>
<div className="relative my-6">
<div className="absolute inset-0 flex items-center">
<div className="w-full border-t border-gray-300"></div>
</div>
<div className="relative flex justify-center text-sm">
<span className="px-2 bg-white text-gray-500">Or continue with</span>
</div>
</div>
<Button
type="button"
variant="outline"
className="w-full"
onClick={handleGoogleSignIn}
>
<svg className="w-5 h-5 mr-2" viewBox="0 0 24 24">
<path
fill="#4285F4"
d="M22.56 12.25c0-.78-.07-1.53-.2-2.25H12v4.26h5.92c-.26 1.37-1.04 2.53-2.21 3.31v2.77h3.57c2.08-1.92 3.28-4.74 3.28-8.09z"
/>
<path
fill="#34A853"
d="M12 23c2.97 0 5.46-.98 7.28-2.66l-3.57-2.77c-.98.66-2.23 1.06-3.71 1.06-2.86 0-5.29-1.93-6.16-4.53H2.18v2.84C3.99 20.53 7.7 23 12 23z"
/>
<path
fill="#FBBC05"
d="M5.84 14.09c-.22-.66-.35-1.36-.35-2.09s.13-1.43.35-2.09V7.07H2.18C1.43 8.55 1 10.22 1 12s.43 3.45 1.18 4.93l2.85-2.22.81-.62z"
/>
<path
fill="#EA4335"
d="M12 5.38c1.62 0 3.06.56 4.21 1.64l3.15-3.15C17.45 2.09 14.97 1 12 1 7.7 1 3.99 3.47 2.18 7.07l3.66 2.84c.87-2.6 3.3-4.53 6.16-4.53z"
/>
</svg>
Sign in with Google
</Button>
</form>
<div className="mt-6 text-center">
<p className="text-sm text-gray-600">
Don't have an account?{' '}
<Link href="/signup" className="text-primary-600 hover:text-primary-700 font-medium">
Sign up
</Link>
</p>
</div>
</CardContent>
</Card>
);
}
'use client';
import React, { useState, useEffect } from 'react';
import { useRouter, useSearchParams } from 'next/navigation';
import Link from 'next/link';
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 LoginClientPage() {
const router = useRouter();
const searchParams = useSearchParams();
const { t } = useTranslation();
const { fetchWithCsrf, loading: csrfLoading } = useCsrf();
const [email, setEmail] = useState('');
const [password, setPassword] = useState('');
const [loading, setLoading] = useState(false);
const [error, setError] = useState('');
const handleSubmit = async (e: React.FormEvent) => {
e.preventDefault();
setLoading(true);
setError('');
try {
const response = await fetchWithCsrf('/api/auth/simple-login', {
method: 'POST',
body: JSON.stringify({ email, password }),
});
const data = await response.json();
if (response.ok && data.success) {
// Store user in localStorage for client-side
localStorage.setItem('user', JSON.stringify(data.user));
// Track successful login with PostHog
try {
const { identifyUser, trackEvent } = await import('@/components/PostHogProvider');
identifyUser(data.user.id, {
email: data.user.email,
name: data.user.name,
plan: data.user.plan || 'FREE',
});
trackEvent('user_login', {
method: 'email',
email: data.user.email,
});
} catch (error) {
console.error('PostHog tracking error:', error);
}
// Check for redirect parameter
const redirectUrl = searchParams.get('redirect') || '/dashboard';
router.push(redirectUrl);
router.refresh();
} else {
setError(data.error || 'Invalid email or password');
}
} catch (err) {
setError('An error occurred. Please try again.');
} finally {
setLoading(false);
}
};
const handleGoogleSignIn = () => {
// Redirect to Google OAuth API route
window.location.href = '/api/auth/google';
};
return (
<Card>
<CardContent className="p-6">
<form onSubmit={handleSubmit} className="space-y-4">
{error && (
<div className="bg-red-50 text-red-600 p-3 rounded-lg text-sm">
{error}
</div>
)}
<Input
label="Email"
type="email"
value={email}
onChange={(e) => setEmail(e.target.value)}
placeholder="you@example.com"
required
/>
<Input
label="Password"
type="password"
value={password}
onChange={(e) => setPassword(e.target.value)}
placeholder="••••••••"
required
/>
<div className="flex items-center justify-between">
<label className="flex items-center">
<input type="checkbox" className="mr-2" />
<span className="text-sm text-gray-600">Remember me</span>
</label>
<Link href="/forgot-password" className="text-sm text-primary-600 hover:text-primary-700">
Forgot password?
</Link>
</div>
<Button type="submit" className="w-full" loading={loading} disabled={csrfLoading || loading}>
{csrfLoading ? 'Loading...' : 'Sign In'}
</Button>
<div className="relative my-6">
<div className="absolute inset-0 flex items-center">
<div className="w-full border-t border-gray-300"></div>
</div>
<div className="relative flex justify-center text-sm">
<span className="px-2 bg-white text-gray-500">Or continue with</span>
</div>
</div>
<Button
type="button"
variant="outline"
className="w-full"
onClick={handleGoogleSignIn}
>
<svg className="w-5 h-5 mr-2" viewBox="0 0 24 24">
<path
fill="#4285F4"
d="M22.56 12.25c0-.78-.07-1.53-.2-2.25H12v4.26h5.92c-.26 1.37-1.04 2.53-2.21 3.31v2.77h3.57c2.08-1.92 3.28-4.74 3.28-8.09z"
/>
<path
fill="#34A853"
d="M12 23c2.97 0 5.46-.98 7.28-2.66l-3.57-2.77c-.98.66-2.23 1.06-3.71 1.06-2.86 0-5.29-1.93-6.16-4.53H2.18v2.84C3.99 20.53 7.7 23 12 23z"
/>
<path
fill="#FBBC05"
d="M5.84 14.09c-.22-.66-.35-1.36-.35-2.09s.13-1.43.35-2.09V7.07H2.18C1.43 8.55 1 10.22 1 12s.43 3.45 1.18 4.93l2.85-2.22.81-.62z"
/>
<path
fill="#EA4335"
d="M12 5.38c1.62 0 3.06.56 4.21 1.64l3.15-3.15C17.45 2.09 14.97 1 12 1 7.7 1 3.99 3.47 2.18 7.07l3.66 2.84c.87-2.6 3.3-4.53 6.16-4.53z"
/>
</svg>
Sign in with Google
</Button>
</form>
<div className="mt-6 text-center">
<p className="text-sm text-gray-600">
Don't have an account?{' '}
<Link href="/signup" className="text-primary-600 hover:text-primary-700 font-medium">
Sign up
</Link>
</p>
</div>
</CardContent>
</Card>
);
}

374
src/app/(main)/(auth)/login/LoginClient.tsx
View File

@@ -1,187 +1,187 @@
'use client';
import React, { useState } from 'react';
import { useRouter, useSearchParams } from 'next/navigation';
import Link from 'next/link';
import { Card, 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 LoginClient() {
const router = useRouter();
const searchParams = useSearchParams();
const { t } = useTranslation();
const { fetchWithCsrf, loading: csrfLoading } = useCsrf();
const [email, setEmail] = useState('');
const [password, setPassword] = useState('');
const [loading, setLoading] = useState(false);
const [error, setError] = useState('');
const handleSubmit = async (e: React.FormEvent) => {
e.preventDefault();
setLoading(true);
setError('');
try {
const response = await fetchWithCsrf('/api/auth/simple-login', {
method: 'POST',
body: JSON.stringify({ email, password }),
});
const data = await response.json();
if (response.ok && data.success) {
// Store user in localStorage for client-side
localStorage.setItem('user', JSON.stringify(data.user));
// Track successful login with PostHog
try {
const { identifyUser, trackEvent } = await import('@/components/PostHogProvider');
identifyUser(data.user.id, {
email: data.user.email,
name: data.user.name,
plan: data.user.plan || 'FREE',
});
trackEvent('user_login', {
method: 'email',
email: data.user.email,
});
} catch (error) {
console.error('PostHog tracking error:', error);
}
// Check for redirect parameter
const redirectUrl = searchParams.get('redirect') || '/dashboard';
router.push(redirectUrl);
router.refresh();
} else {
setError(data.error || 'Invalid email or password');
}
} catch (err) {
setError('An error occurred. Please try again.');
} finally {
setLoading(false);
}
};
const handleGoogleSignIn = () => {
// Redirect to Google OAuth API route
window.location.href = '/api/auth/google';
};
return (
<div className="min-h-screen bg-gradient-to-br from-primary-50 to-white flex items-center justify-center p-4">
<div className="w-full max-w-md">
<div className="text-center mb-8">
<Link href="/" className="inline-flex items-center space-x-2 mb-6">
<img src="/logo.svg" alt="QR Master" className="w-10 h-10" />
<span className="text-2xl font-bold text-gray-900">QR Master</span>
</Link>
<h1 className="text-3xl font-bold text-gray-900">Welcome Back</h1>
<p className="text-gray-600 mt-2">Sign in to your account</p>
<Link href="/" className="text-sm text-primary-600 hover:text-primary-700 font-medium mt-2 inline-block border border-primary-600 hover:border-primary-700 px-4 py-2 rounded-lg transition-colors">
← Back to Home
</Link>
</div>
<Card>
<CardContent className="p-6">
<form onSubmit={handleSubmit} className="space-y-4">
{error && (
<div className="bg-red-50 text-red-600 p-3 rounded-lg text-sm">
{error}
</div>
)}
<Input
label="Email"
type="email"
value={email}
onChange={(e) => setEmail(e.target.value)}
placeholder="you@example.com"
required
/>
<Input
label="Password"
type="password"
value={password}
onChange={(e) => setPassword(e.target.value)}
placeholder="••••••••"
required
/>
<div className="flex items-center justify-between">
<label className="flex items-center">
<input type="checkbox" className="mr-2" />
<span className="text-sm text-gray-600">Remember me</span>
</label>
<Link href="/forgot-password" className="text-sm text-primary-600 hover:text-primary-700">
Forgot password?
</Link>
</div>
<Button type="submit" className="w-full" loading={loading} disabled={csrfLoading || loading}>
{csrfLoading ? 'Loading...' : 'Sign In'}
</Button>
<div className="relative my-6">
<div className="absolute inset-0 flex items-center">
<div className="w-full border-t border-gray-300"></div>
</div>
<div className="relative flex justify-center text-sm">
<span className="px-2 bg-white text-gray-500">Or continue with</span>
</div>
</div>
<Button
type="button"
variant="outline"
className="w-full"
onClick={handleGoogleSignIn}
>
<svg className="w-5 h-5 mr-2" viewBox="0 0 24 24">
<path
fill="#4285F4"
d="M22.56 12.25c0-.78-.07-1.53-.2-2.25H12v4.26h5.92c-.26 1.37-1.04 2.53-2.21 3.31v2.77h3.57c2.08-1.92 3.28-4.74 3.28-8.09z"
/>
<path
fill="#34A853"
d="M12 23c2.97 0 5.46-.98 7.28-2.66l-3.57-2.77c-.98.66-2.23 1.06-3.71 1.06-2.86 0-5.29-1.93-6.16-4.53H2.18v2.84C3.99 20.53 7.7 23 12 23z"
/>
<path
fill="#FBBC05"
d="M5.84 14.09c-.22-.66-.35-1.36-.35-2.09s.13-1.43.35-2.09V7.07H2.18C1.43 8.55 1 10.22 1 12s.43 3.45 1.18 4.93l2.85-2.22.81-.62z"
/>
<path
fill="#EA4335"
d="M12 5.38c1.62 0 3.06.56 4.21 1.64l3.15-3.15C17.45 2.09 14.97 1 12 1 7.7 1 3.99 3.47 2.18 7.07l3.66 2.84c.87-2.6 3.3-4.53 6.16-4.53z"
/>
</svg>
Sign in with Google
</Button>
</form>
<div className="mt-6 text-center">
<p className="text-sm text-gray-600">
Don't have an account?{' '}
<Link href="/signup" className="text-primary-600 hover:text-primary-700 font-medium">
Sign up
</Link>
</p>
</div>
</CardContent>
</Card>
<p className="text-center text-sm text-gray-500 mt-6">
By signing in, you agree to our{' '}
<Link href="/privacy" className="text-primary-600 hover:text-primary-700">
Privacy Policy
</Link>
</p>
</div>
</div>
);
}
'use client';
import React, { useState } from 'react';
import { useRouter, useSearchParams } from 'next/navigation';
import Link from 'next/link';
import { Card, 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 LoginClient() {
const router = useRouter();
const searchParams = useSearchParams();
const { t } = useTranslation();
const { fetchWithCsrf, loading: csrfLoading } = useCsrf();
const [email, setEmail] = useState('');
const [password, setPassword] = useState('');
const [loading, setLoading] = useState(false);
const [error, setError] = useState('');
const handleSubmit = async (e: React.FormEvent) => {
e.preventDefault();
setLoading(true);
setError('');
try {
const response = await fetchWithCsrf('/api/auth/simple-login', {
method: 'POST',
body: JSON.stringify({ email, password }),
});
const data = await response.json();
if (response.ok && data.success) {
// Store user in localStorage for client-side
localStorage.setItem('user', JSON.stringify(data.user));
// Track successful login with PostHog
try {
const { identifyUser, trackEvent } = await import('@/components/PostHogProvider');
identifyUser(data.user.id, {
email: data.user.email,
name: data.user.name,
plan: data.user.plan || 'FREE',
});
trackEvent('user_login', {
method: 'email',
email: data.user.email,
});
} catch (error) {
console.error('PostHog tracking error:', error);
}
// Check for redirect parameter
const redirectUrl = searchParams.get('redirect') || '/dashboard';
router.push(redirectUrl);
router.refresh();
} else {
setError(data.error || 'Invalid email or password');
}
} catch (err) {
setError('An error occurred. Please try again.');
} finally {
setLoading(false);
}
};
const handleGoogleSignIn = () => {
// Redirect to Google OAuth API route
window.location.href = '/api/auth/google';
};
return (
<div className="min-h-screen bg-gradient-to-br from-primary-50 to-white flex items-center justify-center p-4">
<div className="w-full max-w-md">
<div className="text-center mb-8">
<Link href="/" className="inline-flex items-center space-x-2 mb-6">
<img src="/logo.svg" alt="QR Master" className="w-10 h-10" />
<span className="text-2xl font-bold text-gray-900">QR Master</span>
</Link>
<h1 className="text-3xl font-bold text-gray-900">Welcome Back</h1>
<p className="text-gray-600 mt-2">Sign in to your account</p>
<Link href="/" className="text-sm text-primary-600 hover:text-primary-700 font-medium mt-2 inline-block border border-primary-600 hover:border-primary-700 px-4 py-2 rounded-lg transition-colors">
← Back to Home
</Link>
</div>
<Card>
<CardContent className="p-6">
<form onSubmit={handleSubmit} className="space-y-4">
{error && (
<div className="bg-red-50 text-red-600 p-3 rounded-lg text-sm">
{error}
</div>
)}
<Input
label="Email"
type="email"
value={email}
onChange={(e) => setEmail(e.target.value)}
placeholder="you@example.com"
required
/>
<Input
label="Password"
type="password"
value={password}
onChange={(e) => setPassword(e.target.value)}
placeholder="••••••••"
required
/>
<div className="flex items-center justify-between">
<label className="flex items-center">
<input type="checkbox" className="mr-2" />
<span className="text-sm text-gray-600">Remember me</span>
</label>
<Link href="/forgot-password" className="text-sm text-primary-600 hover:text-primary-700">
Forgot password?
</Link>
</div>
<Button type="submit" className="w-full" loading={loading} disabled={csrfLoading || loading}>
{csrfLoading ? 'Loading...' : 'Sign In'}
</Button>
<div className="relative my-6">
<div className="absolute inset-0 flex items-center">
<div className="w-full border-t border-gray-300"></div>
</div>
<div className="relative flex justify-center text-sm">
<span className="px-2 bg-white text-gray-500">Or continue with</span>
</div>
</div>
<Button
type="button"
variant="outline"
className="w-full"
onClick={handleGoogleSignIn}
>
<svg className="w-5 h-5 mr-2" viewBox="0 0 24 24">
<path
fill="#4285F4"
d="M22.56 12.25c0-.78-.07-1.53-.2-2.25H12v4.26h5.92c-.26 1.37-1.04 2.53-2.21 3.31v2.77h3.57c2.08-1.92 3.28-4.74 3.28-8.09z"
/>
<path
fill="#34A853"
d="M12 23c2.97 0 5.46-.98 7.28-2.66l-3.57-2.77c-.98.66-2.23 1.06-3.71 1.06-2.86 0-5.29-1.93-6.16-4.53H2.18v2.84C3.99 20.53 7.7 23 12 23z"
/>
<path
fill="#FBBC05"
d="M5.84 14.09c-.22-.66-.35-1.36-.35-2.09s.13-1.43.35-2.09V7.07H2.18C1.43 8.55 1 10.22 1 12s.43 3.45 1.18 4.93l2.85-2.22.81-.62z"
/>
<path
fill="#EA4335"
d="M12 5.38c1.62 0 3.06.56 4.21 1.64l3.15-3.15C17.45 2.09 14.97 1 12 1 7.7 1 3.99 3.47 2.18 7.07l3.66 2.84c.87-2.6 3.3-4.53 6.16-4.53z"
/>
</svg>
Sign in with Google
</Button>
</form>
<div className="mt-6 text-center">
<p className="text-sm text-gray-600">
Don't have an account?{' '}
<Link href="/signup" className="text-primary-600 hover:text-primary-700 font-medium">
Sign up
</Link>
</p>
</div>
</CardContent>
</Card>
<p className="text-center text-sm text-gray-500 mt-6">
By signing in, you agree to our{' '}
<Link href="/privacy" className="text-primary-600 hover:text-primary-700">
Privacy Policy
</Link>
</p>
</div>
</div>
);
}

20
src/app/(main)/(auth)/login/page.tsx
View File

@@ -1,11 +1,11 @@
import type { Metadata } from 'next';
import LoginClient from './LoginClient';
export const metadata: Metadata = {
title: 'QR Master – Smart QR Generator & Analytics',
description: 'Create dynamic QR codes, track scans, and scale campaigns with secure analytics. Free advanced features, bulk generation, and custom branding available.',
};
export default function LoginPage() {
return <LoginClient />;
import type { Metadata } from 'next';
import LoginClient from './LoginClient';
export const metadata: Metadata = {
title: 'QR Master – Smart QR Generator & Analytics',
description: 'Create dynamic QR codes, track scans, and scale campaigns with secure analytics. Free advanced features, bulk generation, and custom branding available.',
};
export default function LoginPage() {
return <LoginClient />;
}

416
src/app/(main)/(auth)/reset-password/page.tsx
View File

@@ -1,208 +1,208 @@
'use client';
import React, { useState, useEffect } from 'react';
import Link from 'next/link';
import { useSearchParams, useRouter } from 'next/navigation';
import { Card, CardContent } from '@/components/ui/Card';
import { Input } from '@/components/ui/Input';
import { Button } from '@/components/ui/Button';
import { useCsrf } from '@/hooks/useCsrf';
export default function ResetPasswordPage() {
const { fetchWithCsrf, loading: csrfLoading } = useCsrf();
const searchParams = useSearchParams();
const router = useRouter();
const [token, setToken] = useState('');
const [password, setPassword] = useState('');
const [confirmPassword, setConfirmPassword] = useState('');
const [loading, setLoading] = useState(false);
const [success, setSuccess] = useState(false);
const [error, setError] = useState('');
useEffect(() => {
const tokenParam = searchParams.get('token');
if (!tokenParam) {
setError('Invalid or missing reset token. Please request a new password reset link.');
} else {
setToken(tokenParam);
}
}, [searchParams]);
const handleSubmit = async (e: React.FormEvent) => {
e.preventDefault();
setLoading(true);
setError('');
// Validate passwords match
if (password !== confirmPassword) {
setError('Passwords do not match');
setLoading(false);
return;
}
// Validate password length
if (password.length < 8) {
setError('Password must be at least 8 characters long');
setLoading(false);
return;
}
try {
const response = await fetchWithCsrf('/api/auth/reset-password', {
method: 'POST',
body: JSON.stringify({ token, password }),
});
const data = await response.json();
if (response.ok) {
setSuccess(true);
// Redirect to login after 3 seconds
setTimeout(() => {
router.push('/login');
}, 3000);
} else {
setError(data.error || 'Failed to reset password');
}
} catch (err) {
setError('An error occurred. Please try again.');
} finally {
setLoading(false);
}
};
if (success) {
return (
<div className="min-h-screen bg-gradient-to-br from-primary-50 to-white flex items-center justify-center p-4">
<div className="w-full max-w-md">
<div className="text-center mb-8">
<Link href="/" className="inline-flex items-center space-x-2 mb-6">
<img src="/logo.svg" alt="QR Master" className="w-10 h-10" />
<span className="text-2xl font-bold text-gray-900">QR Master</span>
</Link>
<h1 className="text-3xl font-bold text-gray-900">Password Reset Successful</h1>
<p className="text-gray-600 mt-2">Your password has been updated</p>
</div>
<Card>
<CardContent className="p-6">
<div className="text-center">
<div className="inline-flex items-center justify-center w-16 h-16 bg-green-100 rounded-full mb-4">
<svg className="w-8 h-8 text-green-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M5 13l4 4L19 7" />
</svg>
</div>
<p className="text-gray-700 mb-4">
Your password has been successfully reset!
</p>
<p className="text-sm text-gray-600 mb-6">
Redirecting you to the login page in 3 seconds...
</p>
<Link href="/login" className="block">
<Button variant="primary" className="w-full">
Go to Login
</Button>
</Link>
</div>
</CardContent>
</Card>
</div>
</div>
);
}
return (
<div className="min-h-screen bg-gradient-to-br from-primary-50 to-white flex items-center justify-center p-4">
<div className="w-full max-w-md">
<div className="text-center mb-8">
<Link href="/" className="inline-flex items-center space-x-2 mb-6">
<img src="/logo.svg" alt="QR Master" className="w-10 h-10" />
<span className="text-2xl font-bold text-gray-900">QR Master</span>
</Link>
<h1 className="text-3xl font-bold text-gray-900">Reset Your Password</h1>
<p className="text-gray-600 mt-2">Enter your new password below</p>
</div>
<Card>
<CardContent className="p-6">
{!token ? (
<div className="text-center">
<div className="inline-flex items-center justify-center w-16 h-16 bg-red-100 rounded-full mb-4">
<svg className="w-8 h-8 text-red-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M6 18L18 6M6 6l12 12" />
</svg>
</div>
<p className="text-red-600 mb-4">{error}</p>
<Link href="/forgot-password" className="block">
<Button variant="primary" className="w-full">
Request New Reset Link
</Button>
</Link>
</div>
) : (
<form onSubmit={handleSubmit} className="space-y-4">
{error && (
<div className="bg-red-50 text-red-600 p-3 rounded-lg text-sm">
{error}
</div>
)}
<Input
label="New Password"
type="password"
value={password}
onChange={(e) => setPassword(e.target.value)}
placeholder="Enter new password"
required
disabled={loading || csrfLoading}
minLength={8}
/>
<Input
label="Confirm Password"
type="password"
value={confirmPassword}
onChange={(e) => setConfirmPassword(e.target.value)}
placeholder="Confirm new password"
required
disabled={loading || csrfLoading}
minLength={8}
/>
<div className="text-xs text-gray-500">
Password must be at least 8 characters long
</div>
<Button
type="submit"
className="w-full"
loading={loading}
disabled={csrfLoading || loading}
>
{csrfLoading ? 'Loading...' : 'Reset Password'}
</Button>
<div className="text-center">
<Link href="/login" className="text-sm text-primary-600 hover:text-primary-700 font-medium">
← Back to Login
</Link>
</div>
</form>
)}
</CardContent>
</Card>
<p className="text-center text-sm text-gray-500 mt-6">
Remember your password?{' '}
<Link href="/login" className="text-primary-600 hover:text-primary-700 font-medium">
Sign in
</Link>
</p>
</div>
</div>
);
}
'use client';
import React, { useState, useEffect } from 'react';
import Link from 'next/link';
import { useSearchParams, useRouter } from 'next/navigation';
import { Card, CardContent } from '@/components/ui/Card';
import { Input } from '@/components/ui/Input';
import { Button } from '@/components/ui/Button';
import { useCsrf } from '@/hooks/useCsrf';
export default function ResetPasswordPage() {
const { fetchWithCsrf, loading: csrfLoading } = useCsrf();
const searchParams = useSearchParams();
const router = useRouter();
const [token, setToken] = useState('');
const [password, setPassword] = useState('');
const [confirmPassword, setConfirmPassword] = useState('');
const [loading, setLoading] = useState(false);
const [success, setSuccess] = useState(false);
const [error, setError] = useState('');
useEffect(() => {
const tokenParam = searchParams.get('token');
if (!tokenParam) {
setError('Invalid or missing reset token. Please request a new password reset link.');
} else {
setToken(tokenParam);
}
}, [searchParams]);
const handleSubmit = async (e: React.FormEvent) => {
e.preventDefault();
setLoading(true);
setError('');
// Validate passwords match
if (password !== confirmPassword) {
setError('Passwords do not match');
setLoading(false);
return;
}
// Validate password length
if (password.length < 8) {
setError('Password must be at least 8 characters long');
setLoading(false);
return;
}
try {
const response = await fetchWithCsrf('/api/auth/reset-password', {
method: 'POST',
body: JSON.stringify({ token, password }),
});
const data = await response.json();
if (response.ok) {
setSuccess(true);
// Redirect to login after 3 seconds
setTimeout(() => {
router.push('/login');
}, 3000);
} else {
setError(data.error || 'Failed to reset password');
}
} catch (err) {
setError('An error occurred. Please try again.');
} finally {
setLoading(false);
}
};
if (success) {
return (
<div className="min-h-screen bg-gradient-to-br from-primary-50 to-white flex items-center justify-center p-4">
<div className="w-full max-w-md">
<div className="text-center mb-8">
<Link href="/" className="inline-flex items-center space-x-2 mb-6">
<img src="/logo.svg" alt="QR Master" className="w-10 h-10" />
<span className="text-2xl font-bold text-gray-900">QR Master</span>
</Link>
<h1 className="text-3xl font-bold text-gray-900">Password Reset Successful</h1>
<p className="text-gray-600 mt-2">Your password has been updated</p>
</div>
<Card>
<CardContent className="p-6">
<div className="text-center">
<div className="inline-flex items-center justify-center w-16 h-16 bg-green-100 rounded-full mb-4">
<svg className="w-8 h-8 text-green-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M5 13l4 4L19 7" />
</svg>
</div>
<p className="text-gray-700 mb-4">
Your password has been successfully reset!
</p>
<p className="text-sm text-gray-600 mb-6">
Redirecting you to the login page in 3 seconds...
</p>
<Link href="/login" className="block">
<Button variant="primary" className="w-full">
Go to Login
</Button>
</Link>
</div>
</CardContent>
</Card>
</div>
</div>
);
}
return (
<div className="min-h-screen bg-gradient-to-br from-primary-50 to-white flex items-center justify-center p-4">
<div className="w-full max-w-md">
<div className="text-center mb-8">
<Link href="/" className="inline-flex items-center space-x-2 mb-6">
<img src="/logo.svg" alt="QR Master" className="w-10 h-10" />
<span className="text-2xl font-bold text-gray-900">QR Master</span>
</Link>
<h1 className="text-3xl font-bold text-gray-900">Reset Your Password</h1>
<p className="text-gray-600 mt-2">Enter your new password below</p>
</div>
<Card>
<CardContent className="p-6">
{!token ? (
<div className="text-center">
<div className="inline-flex items-center justify-center w-16 h-16 bg-red-100 rounded-full mb-4">
<svg className="w-8 h-8 text-red-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M6 18L18 6M6 6l12 12" />
</svg>
</div>
<p className="text-red-600 mb-4">{error}</p>
<Link href="/forgot-password" className="block">
<Button variant="primary" className="w-full">
Request New Reset Link
</Button>
</Link>
</div>
) : (
<form onSubmit={handleSubmit} className="space-y-4">
{error && (
<div className="bg-red-50 text-red-600 p-3 rounded-lg text-sm">
{error}
</div>
)}
<Input
label="New Password"
type="password"
value={password}
onChange={(e) => setPassword(e.target.value)}
placeholder="Enter new password"
required
disabled={loading || csrfLoading}
minLength={8}
/>
<Input
label="Confirm Password"
type="password"
value={confirmPassword}
onChange={(e) => setConfirmPassword(e.target.value)}
placeholder="Confirm new password"
required
disabled={loading || csrfLoading}
minLength={8}
/>
<div className="text-xs text-gray-500">
Password must be at least 8 characters long
</div>
<Button
type="submit"
className="w-full"
loading={loading}
disabled={csrfLoading || loading}
>
{csrfLoading ? 'Loading...' : 'Reset Password'}
</Button>
<div className="text-center">
<Link href="/login" className="text-sm text-primary-600 hover:text-primary-700 font-medium">
← Back to Login
</Link>
</div>
</form>
)}
</CardContent>
</Card>
<p className="text-center text-sm text-gray-500 mt-6">
Remember your password?{' '}
<Link href="/login" className="text-primary-600 hover:text-primary-700 font-medium">
Sign in
</Link>
</p>
</div>
</div>
);
}

370
src/app/(main)/(auth)/signup/ClientPage.tsx
View File

@@ -1,185 +1,185 @@
'use client';
import React, { useState } from 'react';
import { useRouter } from 'next/navigation';
import Link from 'next/link';
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 SignupClientPage() {
const router = useRouter();
const { t } = useTranslation();
const { fetchWithCsrf } = useCsrf();
const [name, setName] = useState('');
const [email, setEmail] = useState('');
const [password, setPassword] = useState('');
const [confirmPassword, setConfirmPassword] = useState('');
const [loading, setLoading] = useState(false);
const [error, setError] = useState('');
const handleSubmit = async (e: React.FormEvent) => {
e.preventDefault();
setLoading(true);
setError('');
if (password !== confirmPassword) {
setError('Passwords do not match');
setLoading(false);
return;
}
if (password.length < 8) {
setError('Password must be at least 8 characters');
setLoading(false);
return;
}
try {
const response = await fetchWithCsrf('/api/auth/signup', {
method: 'POST',
body: JSON.stringify({ name, email, password }),
});
const data = await response.json();
if (response.ok && data.success) {
// Store user in localStorage for client-side
localStorage.setItem('user', JSON.stringify(data.user));
// Track successful signup with PostHog
try {
const { identifyUser, trackEvent } = await import('@/components/PostHogProvider');
identifyUser(data.user.id, {
email: data.user.email,
name: data.user.name,
plan: data.user.plan || 'FREE',
signupMethod: 'email',
});
trackEvent('user_signup', {
method: 'email',
email: data.user.email,
});
} catch (error) {
console.error('PostHog tracking error:', error);
}
// Redirect to dashboard
router.push('/dashboard');
router.refresh();
} else {
setError(data.error || 'Failed to create account');
}
} catch (err) {
setError('An error occurred. Please try again.');
} finally {
setLoading(false);
}
};
const handleGoogleSignIn = () => {
// Redirect to Google OAuth API route
window.location.href = '/api/auth/google';
};
return (
<Card>
<CardContent className="p-6">
<form onSubmit={handleSubmit} className="space-y-4">
{error && (
<div className="bg-red-50 text-red-600 p-3 rounded-lg text-sm">
{error}
</div>
)}
<Input
label="Full Name"
type="text"
value={name}
onChange={(e) => setName(e.target.value)}
placeholder="John Doe"
required
/>
<Input
label="Email"
type="email"
value={email}
onChange={(e) => setEmail(e.target.value)}
placeholder="you@example.com"
required
/>
<Input
label="Password"
type="password"
value={password}
onChange={(e) => setPassword(e.target.value)}
placeholder="••••••••"
required
/>
<Input
label="Confirm Password"
type="password"
value={confirmPassword}
onChange={(e) => setConfirmPassword(e.target.value)}
placeholder="••••••••"
required
/>
<Button type="submit" className="w-full" loading={loading}>
Create Account
</Button>
<div className="relative my-6">
<div className="absolute inset-0 flex items-center">
<div className="w-full border-t border-gray-300"></div>
</div>
<div className="relative flex justify-center text-sm">
<span className="px-2 bg-white text-gray-500">Or continue with</span>
</div>
</div>
<Button
type="button"
variant="outline"
className="w-full"
onClick={handleGoogleSignIn}
>
<svg className="w-5 h-5 mr-2" viewBox="0 0 24 24">
<path
fill="#4285F4"
d="M22.56 12.25c0-.78-.07-1.53-.2-2.25H12v4.26h5.92c-.26 1.37-1.04 2.53-2.21 3.31v2.77h3.57c2.08-1.92 3.28-4.74 3.28-8.09z"
/>
<path
fill="#34A853"
d="M12 23c2.97 0 5.46-.98 7.28-2.66l-3.57-2.77c-.98.66-2.23 1.06-3.71 1.06-2.86 0-5.29-1.93-6.16-4.53H2.18v2.84C3.99 20.53 7.7 23 12 23z"
/>
<path
fill="#FBBC05"
d="M5.84 14.09c-.22-.66-.35-1.36-.35-2.09s.13-1.43.35-2.09V7.07H2.18C1.43 8.55 1 10.22 1 12s.43 3.45 1.18 4.93l2.85-2.22.81-.62z"
/>
<path
fill="#EA4335"
d="M12 5.38c1.62 0 3.06.56 4.21 1.64l3.15-3.15C17.45 2.09 14.97 1 12 1 7.7 1 3.99 3.47 2.18 7.07l3.66 2.84c.87-2.6 3.3-4.53 6.16-4.53z"
/>
</svg>
Sign up with Google
</Button>
</form>
<div className="mt-6 text-center">
<p className="text-sm text-gray-600">
Already have an account?{' '}
<Link href="/login" className="text-primary-600 hover:text-primary-700 font-medium">
Sign in
</Link>
</p>
</div>
</CardContent>
</Card>
);
}
'use client';
import React, { useState } from 'react';
import { useRouter } from 'next/navigation';
import Link from 'next/link';
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 SignupClientPage() {
const router = useRouter();
const { t } = useTranslation();
const { fetchWithCsrf } = useCsrf();
const [name, setName] = useState('');
const [email, setEmail] = useState('');
const [password, setPassword] = useState('');
const [confirmPassword, setConfirmPassword] = useState('');
const [loading, setLoading] = useState(false);
const [error, setError] = useState('');
const handleSubmit = async (e: React.FormEvent) => {
e.preventDefault();
setLoading(true);
setError('');
if (password !== confirmPassword) {
setError('Passwords do not match');
setLoading(false);
return;
}
if (password.length < 8) {
setError('Password must be at least 8 characters');
setLoading(false);
return;
}
try {
const response = await fetchWithCsrf('/api/auth/signup', {
method: 'POST',
body: JSON.stringify({ name, email, password }),
});
const data = await response.json();
if (response.ok && data.success) {
// Store user in localStorage for client-side
localStorage.setItem('user', JSON.stringify(data.user));
// Track successful signup with PostHog
try {
const { identifyUser, trackEvent } = await import('@/components/PostHogProvider');
identifyUser(data.user.id, {
email: data.user.email,
name: data.user.name,
plan: data.user.plan || 'FREE',
signupMethod: 'email',
});
trackEvent('user_signup', {
method: 'email',
email: data.user.email,
});
} catch (error) {
console.error('PostHog tracking error:', error);
}
// Redirect to dashboard
router.push('/dashboard');
router.refresh();
} else {
setError(data.error || 'Failed to create account');
}
} catch (err) {
setError('An error occurred. Please try again.');
} finally {
setLoading(false);
}
};
const handleGoogleSignIn = () => {
// Redirect to Google OAuth API route
window.location.href = '/api/auth/google';
};
return (
<Card>
<CardContent className="p-6">
<form onSubmit={handleSubmit} className="space-y-4">
{error && (
<div className="bg-red-50 text-red-600 p-3 rounded-lg text-sm">
{error}
</div>
)}
<Input
label="Full Name"
type="text"
value={name}
onChange={(e) => setName(e.target.value)}
placeholder="John Doe"
required
/>
<Input
label="Email"
type="email"
value={email}
onChange={(e) => setEmail(e.target.value)}
placeholder="you@example.com"
required
/>
<Input
label="Password"
type="password"
value={password}
onChange={(e) => setPassword(e.target.value)}
placeholder="••••••••"
required
/>
<Input
label="Confirm Password"
type="password"
value={confirmPassword}
onChange={(e) => setConfirmPassword(e.target.value)}
placeholder="••••••••"
required
/>
<Button type="submit" className="w-full" loading={loading}>
Create Account
</Button>
<div className="relative my-6">
<div className="absolute inset-0 flex items-center">
<div className="w-full border-t border-gray-300"></div>
</div>
<div className="relative flex justify-center text-sm">
<span className="px-2 bg-white text-gray-500">Or continue with</span>
</div>
</div>
<Button
type="button"
variant="outline"
className="w-full"
onClick={handleGoogleSignIn}
>
<svg className="w-5 h-5 mr-2" viewBox="0 0 24 24">
<path
fill="#4285F4"
d="M22.56 12.25c0-.78-.07-1.53-.2-2.25H12v4.26h5.92c-.26 1.37-1.04 2.53-2.21 3.31v2.77h3.57c2.08-1.92 3.28-4.74 3.28-8.09z"
/>
<path
fill="#34A853"
d="M12 23c2.97 0 5.46-.98 7.28-2.66l-3.57-2.77c-.98.66-2.23 1.06-3.71 1.06-2.86 0-5.29-1.93-6.16-4.53H2.18v2.84C3.99 20.53 7.7 23 12 23z"
/>
<path
fill="#FBBC05"
d="M5.84 14.09c-.22-.66-.35-1.36-.35-2.09s.13-1.43.35-2.09V7.07H2.18C1.43 8.55 1 10.22 1 12s.43 3.45 1.18 4.93l2.85-2.22.81-.62z"
/>
<path
fill="#EA4335"
d="M12 5.38c1.62 0 3.06.56 4.21 1.64l3.15-3.15C17.45 2.09 14.97 1 12 1 7.7 1 3.99 3.47 2.18 7.07l3.66 2.84c.87-2.6 3.3-4.53 6.16-4.53z"
/>
</svg>
Sign up with Google
</Button>
</form>
<div className="mt-6 text-center">
<p className="text-sm text-gray-600">
Already have an account?{' '}
<Link href="/login" className="text-primary-600 hover:text-primary-700 font-medium">
Sign in
</Link>
</p>
</div>
</CardContent>
</Card>
);
}

416
src/app/(main)/(auth)/signup/SignupClient.tsx
View File

@@ -1,208 +1,208 @@
'use client';
import React, { useState } from 'react';
import { useRouter } from 'next/navigation';
import Link from 'next/link';
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 SignupClient() {
const router = useRouter();
const { t } = useTranslation();
const { fetchWithCsrf } = useCsrf();
const [name, setName] = useState('');
const [email, setEmail] = useState('');
const [password, setPassword] = useState('');
const [confirmPassword, setConfirmPassword] = useState('');
const [loading, setLoading] = useState(false);
const [error, setError] = useState('');
const handleSubmit = async (e: React.FormEvent) => {
e.preventDefault();
setLoading(true);
setError('');
if (password !== confirmPassword) {
setError('Passwords do not match');
setLoading(false);
return;
}
if (password.length < 8) {
setError('Password must be at least 8 characters');
setLoading(false);
return;
}
try {
const response = await fetchWithCsrf('/api/auth/signup', {
method: 'POST',
body: JSON.stringify({ name, email, password }),
});
const data = await response.json();
if (response.ok && data.success) {
// Store user in localStorage for client-side
localStorage.setItem('user', JSON.stringify(data.user));
// Track successful signup with PostHog
try {
const { identifyUser, trackEvent } = await import('@/components/PostHogProvider');
identifyUser(data.user.id, {
email: data.user.email,
name: data.user.name,
plan: data.user.plan || 'FREE',
signupMethod: 'email',
});
trackEvent('user_signup', {
method: 'email',
email: data.user.email,
});
} catch (error) {
console.error('PostHog tracking error:', error);
}
// Redirect to dashboard
router.push('/dashboard');
router.refresh();
} else {
setError(data.error || 'Failed to create account');
}
} catch (err) {
setError('An error occurred. Please try again.');
} finally {
setLoading(false);
}
};
const handleGoogleSignIn = () => {
// Redirect to Google OAuth API route
window.location.href = '/api/auth/google';
};
return (
<div className="min-h-screen bg-gradient-to-br from-primary-50 to-white flex items-center justify-center p-4">
<div className="w-full max-w-md">
<div className="text-center mb-8">
<Link href="/" className="inline-flex items-center space-x-2 mb-6">
<img src="/logo.svg" alt="QR Master" className="w-10 h-10" />
<span className="text-2xl font-bold text-gray-900">QR Master</span>
</Link>
<h1 className="text-3xl font-bold text-gray-900">Create Account</h1>
<p className="text-gray-600 mt-2">Start creating QR codes in seconds</p>
<Link href="/" className="text-sm text-primary-600 hover:text-primary-700 font-medium mt-2 inline-block border border-primary-600 hover:border-primary-700 px-4 py-2 rounded-lg transition-colors">
← Back to Home
</Link>
</div>
<Card>
<CardContent className="p-6">
<form onSubmit={handleSubmit} className="space-y-4">
{error && (
<div className="bg-red-50 text-red-600 p-3 rounded-lg text-sm">
{error}
</div>
)}
<Input
label="Full Name"
type="text"
value={name}
onChange={(e) => setName(e.target.value)}
placeholder="John Doe"
required
/>
<Input
label="Email"
type="email"
value={email}
onChange={(e) => setEmail(e.target.value)}
placeholder="you@example.com"
required
/>
<Input
label="Password"
type="password"
value={password}
onChange={(e) => setPassword(e.target.value)}
placeholder="••••••••"
required
/>
<Input
label="Confirm Password"
type="password"
value={confirmPassword}
onChange={(e) => setConfirmPassword(e.target.value)}
placeholder="••••••••"
required
/>
<Button type="submit" className="w-full" loading={loading}>
Create Account
</Button>
<div className="relative my-6">
<div className="absolute inset-0 flex items-center">
<div className="w-full border-t border-gray-300"></div>
</div>
<div className="relative flex justify-center text-sm">
<span className="px-2 bg-white text-gray-500">Or continue with</span>
</div>
</div>
<Button
type="button"
variant="outline"
className="w-full"
onClick={handleGoogleSignIn}
>
<svg className="w-5 h-5 mr-2" viewBox="0 0 24 24">
<path
fill="#4285F4"
d="M22.56 12.25c0-.78-.07-1.53-.2-2.25H12v4.26h5.92c-.26 1.37-1.04 2.53-2.21 3.31v2.77h3.57c2.08-1.92 3.28-4.74 3.28-8.09z"
/>
<path
fill="#34A853"
d="M12 23c2.97 0 5.46-.98 7.28-2.66l-3.57-2.77c-.98.66-2.23 1.06-3.71 1.06-2.86 0-5.29-1.93-6.16-4.53H2.18v2.84C3.99 20.53 7.7 23 12 23z"
/>
<path
fill="#FBBC05"
d="M5.84 14.09c-.22-.66-.35-1.36-.35-2.09s.13-1.43.35-2.09V7.07H2.18C1.43 8.55 1 10.22 1 12s.43 3.45 1.18 4.93l2.85-2.22.81-.62z"
/>
<path
fill="#EA4335"
d="M12 5.38c1.62 0 3.06.56 4.21 1.64l3.15-3.15C17.45 2.09 14.97 1 12 1 7.7 1 3.99 3.47 2.18 7.07l3.66 2.84c.87-2.6 3.3-4.53 6.16-4.53z"
/>
</svg>
Sign up with Google
</Button>
</form>
<div className="mt-6 text-center">
<p className="text-sm text-gray-600">
Already have an account?{' '}
<Link href="/login" className="text-primary-600 hover:text-primary-700 font-medium">
Sign in
</Link>
</p>
</div>
</CardContent>
</Card>
<p className="text-center text-sm text-gray-500 mt-6">
By signing up, you agree to our{' '}
<Link href="/privacy" className="text-primary-600 hover:text-primary-700">
Privacy Policy
</Link>
</p>
</div>
</div>
);
}
'use client';
import React, { useState } from 'react';
import { useRouter } from 'next/navigation';
import Link from 'next/link';
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 SignupClient() {
const router = useRouter();
const { t } = useTranslation();
const { fetchWithCsrf } = useCsrf();
const [name, setName] = useState('');
const [email, setEmail] = useState('');
const [password, setPassword] = useState('');
const [confirmPassword, setConfirmPassword] = useState('');
const [loading, setLoading] = useState(false);
const [error, setError] = useState('');
const handleSubmit = async (e: React.FormEvent) => {
e.preventDefault();
setLoading(true);
setError('');
if (password !== confirmPassword) {
setError('Passwords do not match');
setLoading(false);
return;
}
if (password.length < 8) {
setError('Password must be at least 8 characters');
setLoading(false);
return;
}
try {
const response = await fetchWithCsrf('/api/auth/signup', {
method: 'POST',
body: JSON.stringify({ name, email, password }),
});
const data = await response.json();
if (response.ok && data.success) {
// Store user in localStorage for client-side
localStorage.setItem('user', JSON.stringify(data.user));
// Track successful signup with PostHog
try {
const { identifyUser, trackEvent } = await import('@/components/PostHogProvider');
identifyUser(data.user.id, {
email: data.user.email,
name: data.user.name,
plan: data.user.plan || 'FREE',
signupMethod: 'email',
});
trackEvent('user_signup', {
method: 'email',
email: data.user.email,
});
} catch (error) {
console.error('PostHog tracking error:', error);
}
// Redirect to dashboard
router.push('/dashboard');
router.refresh();
} else {
setError(data.error || 'Failed to create account');
}
} catch (err) {
setError('An error occurred. Please try again.');
} finally {
setLoading(false);
}
};
const handleGoogleSignIn = () => {
// Redirect to Google OAuth API route
window.location.href = '/api/auth/google';
};
return (
<div className="min-h-screen bg-gradient-to-br from-primary-50 to-white flex items-center justify-center p-4">
<div className="w-full max-w-md">
<div className="text-center mb-8">
<Link href="/" className="inline-flex items-center space-x-2 mb-6">
<img src="/logo.svg" alt="QR Master" className="w-10 h-10" />
<span className="text-2xl font-bold text-gray-900">QR Master</span>
</Link>
<h1 className="text-3xl font-bold text-gray-900">Create Account</h1>
<p className="text-gray-600 mt-2">Start creating QR codes in seconds</p>
<Link href="/" className="text-sm text-primary-600 hover:text-primary-700 font-medium mt-2 inline-block border border-primary-600 hover:border-primary-700 px-4 py-2 rounded-lg transition-colors">
← Back to Home
</Link>
</div>
<Card>
<CardContent className="p-6">
<form onSubmit={handleSubmit} className="space-y-4">
{error && (
<div className="bg-red-50 text-red-600 p-3 rounded-lg text-sm">
{error}
</div>
)}
<Input
label="Full Name"
type="text"
value={name}
onChange={(e) => setName(e.target.value)}
placeholder="John Doe"
required
/>
<Input
label="Email"
type="email"
value={email}
onChange={(e) => setEmail(e.target.value)}
placeholder="you@example.com"
required
/>
<Input
label="Password"
type="password"
value={password}
onChange={(e) => setPassword(e.target.value)}
placeholder="••••••••"
required
/>
<Input
label="Confirm Password"
type="password"
value={confirmPassword}
onChange={(e) => setConfirmPassword(e.target.value)}
placeholder="••••••••"
required
/>
<Button type="submit" className="w-full" loading={loading}>
Create Account
</Button>
<div className="relative my-6">
<div className="absolute inset-0 flex items-center">
<div className="w-full border-t border-gray-300"></div>
</div>
<div className="relative flex justify-center text-sm">
<span className="px-2 bg-white text-gray-500">Or continue with</span>
</div>
</div>
<Button
type="button"
variant="outline"
className="w-full"
onClick={handleGoogleSignIn}
>
<svg className="w-5 h-5 mr-2" viewBox="0 0 24 24">
<path
fill="#4285F4"
d="M22.56 12.25c0-.78-.07-1.53-.2-2.25H12v4.26h5.92c-.26 1.37-1.04 2.53-2.21 3.31v2.77h3.57c2.08-1.92 3.28-4.74 3.28-8.09z"
/>
<path
fill="#34A853"
d="M12 23c2.97 0 5.46-.98 7.28-2.66l-3.57-2.77c-.98.66-2.23 1.06-3.71 1.06-2.86 0-5.29-1.93-6.16-4.53H2.18v2.84C3.99 20.53 7.7 23 12 23z"
/>
<path
fill="#FBBC05"
d="M5.84 14.09c-.22-.66-.35-1.36-.35-2.09s.13-1.43.35-2.09V7.07H2.18C1.43 8.55 1 10.22 1 12s.43 3.45 1.18 4.93l2.85-2.22.81-.62z"
/>
<path
fill="#EA4335"
d="M12 5.38c1.62 0 3.06.56 4.21 1.64l3.15-3.15C17.45 2.09 14.97 1 12 1 7.7 1 3.99 3.47 2.18 7.07l3.66 2.84c.87-2.6 3.3-4.53 6.16-4.53z"
/>
</svg>
Sign up with Google
</Button>
</form>
<div className="mt-6 text-center">
<p className="text-sm text-gray-600">
Already have an account?{' '}
<Link href="/login" className="text-primary-600 hover:text-primary-700 font-medium">
Sign in
</Link>
</p>
</div>
</CardContent>
</Card>
<p className="text-center text-sm text-gray-500 mt-6">
By signing up, you agree to our{' '}
<Link href="/privacy" className="text-primary-600 hover:text-primary-700">
Privacy Policy
</Link>
</p>
</div>
</div>
);
}

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

@@ -1,14 +1,14 @@
import { Metadata } from 'next';
import SignupClient from './SignupClient';
export const metadata: Metadata = {
title: 'Create Account | QR Master',
description: 'Start creating dynamic QR codes in seconds. Join thousands of businesses using QR Master.',
alternates: {
canonical: 'https://www.qrmaster.net/signup',
},
};
export default function SignupPage() {
return <SignupClient />;
import { Metadata } from 'next';
import SignupClient from './SignupClient';
export const metadata: Metadata = {
title: 'Create Account | QR Master',
description: 'Start creating dynamic QR codes in seconds. Join thousands of businesses using QR Master.',
alternates: {
canonical: 'https://www.qrmaster.net/signup',
},
};
export default function SignupPage() {
return <SignupClient />;
}

578
src/app/(main)/(marketing)/MarketingLayout.tsx
View File

@@ -1,289 +1,289 @@
'use client';
import React, { useState, useEffect } from 'react';
import Link from 'next/link';
import { usePathname } from 'next/navigation';
import { Button } from '@/components/ui/Button';
import { Footer } from '@/components/ui/Footer';
import en from '@/i18n/en.json';
import { ChevronDown, Wifi, Contact, MessageCircle, QrCode, Link2, Type, Mail, MessageSquare, Phone, Calendar, MapPin, Facebook, Instagram, Twitter, Youtube, Music, Bitcoin, CreditCard, Video, Users, Barcode as BarcodeIcon } from 'lucide-react';
import { cn } from '@/lib/utils';
import { AnimatePresence, motion } from 'framer-motion';
export default function MarketingLayout({
children,
}: {
children: React.ReactNode;
}) {
const [mobileMenuOpen, setMobileMenuOpen] = useState(false);
const [scrolled, setScrolled] = useState(false);
const [toolsOpen, setToolsOpen] = useState(false);
const [mobileToolsOpen, setMobileToolsOpen] = useState(false);
const pathname = usePathname();
useEffect(() => {
const handleScroll = () => {
setScrolled(window.scrollY > 20);
};
// Check immediately on mount
handleScroll();
window.addEventListener('scroll', handleScroll, { passive: true });
return () => window.removeEventListener('scroll', handleScroll);
}, []);
// Close simple menus when path changes
useEffect(() => {
setMobileMenuOpen(false);
setToolsOpen(false);
}, [pathname]);
// Default to English for general marketing pages
const t = en;
const tools = [
{ name: 'URL / Link', description: 'Link to any website', href: '/tools/url-qr-code', icon: Link2, color: 'text-blue-500', bgColor: 'bg-blue-50' },
{ name: 'Text', description: 'Plain text message', href: '/tools/text-qr-code', icon: Type, color: 'text-slate-500', bgColor: 'bg-slate-50' },
{ name: 'WiFi', description: 'Share WiFi credentials', href: '/tools/wifi-qr-code', icon: Wifi, color: 'text-indigo-500', bgColor: 'bg-indigo-50' },
{ name: 'VCard', description: 'Digital business card', href: '/tools/vcard-qr-code', icon: Contact, color: 'text-pink-500', bgColor: 'bg-pink-50' },
{ name: 'WhatsApp', description: 'Start a chat', href: '/tools/whatsapp-qr-code', icon: MessageCircle, color: 'text-green-500', bgColor: 'bg-green-50' },
{ name: 'Email', description: 'Compose an email', href: '/tools/email-qr-code', icon: Mail, color: 'text-amber-500', bgColor: 'bg-amber-50' },
{ name: 'SMS', description: 'Send a text message', href: '/tools/sms-qr-code', icon: MessageSquare, color: 'text-cyan-500', bgColor: 'bg-cyan-50' },
{ name: 'Call', description: 'Start a call', href: '/tools/call-qr-code-generator', icon: Phone, color: 'text-violet-500', bgColor: 'bg-violet-50' },
{ name: 'Event', description: 'Add calendar event', href: '/tools/event-qr-code', icon: Calendar, color: 'text-red-500', bgColor: 'bg-red-50' },
{ name: 'Location', description: 'Share a place', href: '/tools/geolocation-qr-code', icon: MapPin, color: 'text-emerald-500', bgColor: 'bg-emerald-50' },
{ name: 'Facebook', description: 'Facebook profile/page', href: '/tools/facebook-qr-code', icon: Facebook, color: 'text-blue-600', bgColor: 'bg-blue-50' },
{ name: 'Instagram', description: 'Instagram profile', href: '/tools/instagram-qr-code', icon: Instagram, color: 'text-pink-600', bgColor: 'bg-pink-50' },
{ name: 'Twitter / X', description: 'Twitter profile', href: '/tools/twitter-qr-code', icon: Twitter, color: 'text-sky-500', bgColor: 'bg-sky-50' },
{ name: 'YouTube', description: 'YouTube video/channel', href: '/tools/youtube-qr-code', icon: Youtube, color: 'text-red-600', bgColor: 'bg-red-50' },
{ name: 'TikTok', description: 'TikTok profile', href: '/tools/tiktok-qr-code', icon: Music, color: 'text-slate-800', bgColor: 'bg-slate-100' },
{ name: 'Crypto', description: 'Share wallet address', href: '/tools/crypto-qr-code', icon: Bitcoin, color: 'text-orange-500', bgColor: 'bg-orange-50' },
{ name: 'PayPal', description: 'Receive payments', href: '/tools/paypal-qr-code', icon: CreditCard, color: 'text-blue-700', bgColor: 'bg-blue-50' },
{ name: 'Zoom', description: 'Join Zoom meeting', href: '/tools/zoom-qr-code', icon: Video, color: 'text-sky-500', bgColor: 'bg-sky-50' },
{ name: 'Teams', description: 'Join Teams meeting', href: '/tools/teams-qr-code', icon: Users, color: 'text-violet-500', bgColor: 'bg-violet-50' },
{ name: 'Barcode', description: 'Generate barcodes', href: '/tools/barcode-generator', icon: BarcodeIcon, color: 'text-slate-800', bgColor: 'bg-slate-100' },
];
return (
<div className="min-h-screen bg-white">
{/* Server-rendered navigation links for SEO (crawlers) - Placed first for priority */}
<div className="sr-only" aria-hidden="false">
<nav aria-label="Site Map">
<ul>
<li><a href="/">Home</a></li>
<li><a href="/pricing">Pricing</a></li>
<li><a href="/blog">Blog</a></li>
<li><a href="/faq">FAQ</a></li>
<li><a href="/login">Login</a></li>
<li><a href="/signup">Sign Up</a></li>
{/* Tools */}
<li><a href="/tools/url-qr-code">URL QR Code</a></li>
<li><a href="/tools/text-qr-code">Text QR Code</a></li>
<li><a href="/tools/wifi-qr-code">WiFi QR Code</a></li>
<li><a href="/tools/vcard-qr-code">vCard QR Code</a></li>
<li><a href="/tools/whatsapp-qr-code">WhatsApp QR Code</a></li>
<li><a href="/tools/email-qr-code">Email QR Code</a></li>
<li><a href="/tools/sms-qr-code">SMS QR Code</a></li>
<li><a href="/tools/call-qr-code-generator">Call QR Code</a></li>
<li><a href="/tools/event-qr-code">Event QR Code</a></li>
<li><a href="/tools/geolocation-qr-code">Location QR Code</a></li>
<li><a href="/tools/facebook-qr-code">Facebook QR Code</a></li>
<li><a href="/tools/instagram-qr-code">Instagram QR Code</a></li>
<li><a href="/tools/twitter-qr-code">Twitter QR Code</a></li>
<li><a href="/tools/youtube-qr-code">YouTube QR Code</a></li>
<li><a href="/tools/tiktok-qr-code">TikTok QR Code</a></li>
<li><a href="/tools/crypto-qr-code">Crypto QR Code</a></li>
<li><a href="/tools/paypal-qr-code">PayPal QR Code</a></li>
<li><a href="/tools/zoom-qr-code">Zoom QR Code</a></li>
<li><a href="/tools/teams-qr-code">Teams QR Code</a></li>
<li><a href="/tools/barcode-generator">Barcode Generator</a></li>
</ul>
</nav>
</div>
{/* Header */}
<header
className="fixed top-0 left-0 right-0 z-50 bg-white/80 backdrop-blur-md border-b border-slate-200 shadow-sm"
>
<nav className="container mx-auto px-4 sm:px-6 lg:px-8 max-w-7xl h-20 flex items-center justify-between">
{/* Logo */}
<Link href="/" className="flex items-center space-x-2.5 group">
<div className="relative w-9 h-9 flex items-center justify-center bg-indigo-600 rounded-lg shadow-indigo-200 shadow-lg group-hover:scale-105 transition-transform duration-200">
<QrCode className="w-5 h-5 text-white" />
</div>
<span className="text-xl font-bold text-slate-900 tracking-tight group-hover:text-indigo-600 transition-colors">QR Master</span>
</Link>
{/* Desktop Navigation */}
<div className="hidden md:flex items-center space-x-1">
{/* Tools Dropdown */}
<div
className="relative group px-3 py-2"
onMouseEnter={() => setToolsOpen(true)}
onMouseLeave={() => setToolsOpen(false)}
>
<button className="flex items-center space-x-1 text-sm font-medium text-slate-600 group-hover:text-slate-900 transition-colors">
<span>{t.nav.tools}</span>
<ChevronDown className={cn("w-4 h-4 transition-transform duration-200", toolsOpen && "rotate-180")} />
</button>
<AnimatePresence>
{toolsOpen && (
<motion.div
initial={{ opacity: 0, y: 10 }}
animate={{ opacity: 1, y: 0 }}
exit={{ opacity: 0, y: 10 }}
transition={{ duration: 0.15 }}
className="absolute left-1/2 -translate-x-1/2 top-full mt-2 w-[750px] bg-white rounded-2xl shadow-lg border border-slate-100 p-4 overflow-hidden"
>
<div className="grid grid-cols-3 gap-1">
{tools.map((tool) => (
<Link
key={tool.name}
href={tool.href}
className="flex items-center space-x-3 p-2.5 rounded-xl transition-colors hover:bg-slate-50"
>
<div className={cn("p-2 rounded-lg shrink-0", tool.bgColor, tool.color)}>
<tool.icon className="w-4 h-4" />
</div>
<div>
<div className="text-sm font-semibold text-slate-900">{tool.name}</div>
<p className="text-xs text-slate-500 leading-snug">{tool.description}</p>
</div>
</Link>
))}
</div>
<div className="mt-3 pt-3 border-t border-slate-100 -mx-4 -mb-4 px-4 py-3 text-center bg-slate-50/50">
<p className="text-xs text-slate-500 font-medium">{t.nav.all_free}</p>
</div>
</motion.div>
)}
</AnimatePresence>
</div>
<Link href="/#features" className="px-3 py-2 text-sm font-medium text-slate-600 hover:text-slate-900 transition-colors">
{t.nav.features}
</Link>
<Link href="/#pricing" className="px-3 py-2 text-sm font-medium text-slate-600 hover:text-slate-900 transition-colors">
{t.nav.pricing}
</Link>
<Link href="/blog" className="px-3 py-2 text-sm font-medium text-slate-600 hover:text-slate-900 transition-colors">
{t.nav.blog}
</Link>
<Link href="/#faq" className="px-3 py-2 text-sm font-medium text-slate-600 hover:text-slate-900 transition-colors">
{t.nav.faq}
</Link>
</div>
<div className="hidden md:flex items-center space-x-4">
<Link href="/login" className="text-sm font-medium text-slate-600 hover:text-slate-900 transition-colors">
{t.nav.login}
</Link>
<Link href="/signup">
<Button className={cn(
"font-semibold shadow-lg shadow-indigo-500/20 transition-all hover:scale-105",
scrolled ? "bg-blue-600 text-white hover:bg-blue-700" : "bg-blue-600 text-white hover:bg-blue-700"
)}>
{t.nav.cta || "Get Started Free"}
</Button>
</Link>
</div>
{/* Mobile Menu Button - Always dark */}
<button
className="md:hidden p-2 text-slate-900"
onClick={() => setMobileMenuOpen(!mobileMenuOpen)}
aria-label="Toggle menu"
>
<svg className="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
{mobileMenuOpen ? (
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M6 18L18 6M6 6l12 12" />
) : (
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M4 6h16M4 12h16M4 18h16" />
)}
</svg>
</button>
</nav>
{/* Mobile Menu */}
<AnimatePresence>
{mobileMenuOpen && (
<motion.div
initial={{ opacity: 0, height: 0 }}
animate={{ opacity: 1, height: 'auto' }}
exit={{ opacity: 0, height: 0 }}
className="md:hidden bg-white border-b border-slate-100 overflow-hidden"
>
<div className="container mx-auto px-4 py-6 space-y-2">
{/* Free Tools Accordion */}
<button
onClick={() => setMobileToolsOpen(!mobileToolsOpen)}
className="flex items-center justify-between w-full px-4 py-3 rounded-xl hover:bg-slate-50 text-slate-700 font-semibold"
>
<span>{t.nav.tools}</span>
<ChevronDown className={cn("w-5 h-5 transition-transform", mobileToolsOpen && "rotate-180")} />
</button>
<AnimatePresence>
{mobileToolsOpen && (
<motion.div
initial={{ opacity: 0, height: 0 }}
animate={{ opacity: 1, height: 'auto' }}
exit={{ opacity: 0, height: 0 }}
className="overflow-hidden"
>
<div className="max-h-[50vh] overflow-y-auto pl-4 space-y-1 border-l-2 border-slate-100 ml-4">
{tools.map((tool) => (
<Link
key={tool.name}
href={tool.href}
className="flex items-center gap-3 px-4 py-2.5 rounded-lg hover:bg-slate-50 text-slate-600 text-sm"
onClick={() => { setMobileMenuOpen(false); setMobileToolsOpen(false); }}
>
<tool.icon className={cn("w-4 h-4", tool.color)} />
{tool.name}
</Link>
))}
</div>
</motion.div>
)}
</AnimatePresence>
<div className="h-px bg-slate-100 my-2"></div>
<Link href="/#features" className="block px-4 py-3 text-slate-700 font-medium rounded-xl hover:bg-slate-50" onClick={() => setMobileMenuOpen(false)}>{t.nav.features}</Link>
<Link href="/#pricing" className="block px-4 py-3 text-slate-700 font-medium rounded-xl hover:bg-slate-50" onClick={() => setMobileMenuOpen(false)}>{t.nav.pricing}</Link>
<Link href="/blog" className="block px-4 py-3 text-slate-700 font-medium rounded-xl hover:bg-slate-50" onClick={() => setMobileMenuOpen(false)}>{t.nav.blog}</Link>
<Link href="/#faq" className="block px-4 py-3 text-slate-700 font-medium rounded-xl hover:bg-slate-50" onClick={() => setMobileMenuOpen(false)}>{t.nav.faq}</Link>
<div className="grid grid-cols-2 gap-4 pt-4">
<Link href="/login" onClick={() => setMobileMenuOpen(false)}>
<Button variant="outline" className="w-full justify-center">{t.nav.login}</Button>
</Link>
<Link href="/signup" onClick={() => setMobileMenuOpen(false)}>
<Button className="w-full justify-center bg-indigo-600 hover:bg-indigo-700">{t.nav.cta}</Button>
</Link>
</div>
</div>
</motion.div>
)}
</AnimatePresence>
</header>
{/* Main Content */}
<main className="pt-20">
{/* Server-rendered navigation links for SEO (crawlers) */}
{children}
</main>
{/* Footer */}
<Footer t={t} />
</div >
);
}
'use client';
import React, { useState, useEffect } from 'react';
import Link from 'next/link';
import { usePathname } from 'next/navigation';
import { Button } from '@/components/ui/Button';
import { Footer } from '@/components/ui/Footer';
import en from '@/i18n/en.json';
import { ChevronDown, Wifi, Contact, MessageCircle, QrCode, Link2, Type, Mail, MessageSquare, Phone, Calendar, MapPin, Facebook, Instagram, Twitter, Youtube, Music, Bitcoin, CreditCard, Video, Users, Barcode as BarcodeIcon } from 'lucide-react';
import { cn } from '@/lib/utils';
import { AnimatePresence, motion } from 'framer-motion';
export default function MarketingLayout({
children,
}: {
children: React.ReactNode;
}) {
const [mobileMenuOpen, setMobileMenuOpen] = useState(false);
const [scrolled, setScrolled] = useState(false);
const [toolsOpen, setToolsOpen] = useState(false);
const [mobileToolsOpen, setMobileToolsOpen] = useState(false);
const pathname = usePathname();
useEffect(() => {
const handleScroll = () => {
setScrolled(window.scrollY > 20);
};
// Check immediately on mount
handleScroll();
window.addEventListener('scroll', handleScroll, { passive: true });
return () => window.removeEventListener('scroll', handleScroll);
}, []);
// Close simple menus when path changes
useEffect(() => {
setMobileMenuOpen(false);
setToolsOpen(false);
}, [pathname]);
// Default to English for general marketing pages
const t = en;
const tools = [
{ name: 'URL / Link', description: 'Link to any website', href: '/tools/url-qr-code', icon: Link2, color: 'text-blue-500', bgColor: 'bg-blue-50' },
{ name: 'Text', description: 'Plain text message', href: '/tools/text-qr-code', icon: Type, color: 'text-slate-500', bgColor: 'bg-slate-50' },
{ name: 'WiFi', description: 'Share WiFi credentials', href: '/tools/wifi-qr-code', icon: Wifi, color: 'text-indigo-500', bgColor: 'bg-indigo-50' },
{ name: 'VCard', description: 'Digital business card', href: '/tools/vcard-qr-code', icon: Contact, color: 'text-pink-500', bgColor: 'bg-pink-50' },
{ name: 'WhatsApp', description: 'Start a chat', href: '/tools/whatsapp-qr-code', icon: MessageCircle, color: 'text-green-500', bgColor: 'bg-green-50' },
{ name: 'Email', description: 'Compose an email', href: '/tools/email-qr-code', icon: Mail, color: 'text-amber-500', bgColor: 'bg-amber-50' },
{ name: 'SMS', description: 'Send a text message', href: '/tools/sms-qr-code', icon: MessageSquare, color: 'text-cyan-500', bgColor: 'bg-cyan-50' },
{ name: 'Call', description: 'Start a call', href: '/tools/call-qr-code-generator', icon: Phone, color: 'text-violet-500', bgColor: 'bg-violet-50' },
{ name: 'Event', description: 'Add calendar event', href: '/tools/event-qr-code', icon: Calendar, color: 'text-red-500', bgColor: 'bg-red-50' },
{ name: 'Location', description: 'Share a place', href: '/tools/geolocation-qr-code', icon: MapPin, color: 'text-emerald-500', bgColor: 'bg-emerald-50' },
{ name: 'Facebook', description: 'Facebook profile/page', href: '/tools/facebook-qr-code', icon: Facebook, color: 'text-blue-600', bgColor: 'bg-blue-50' },
{ name: 'Instagram', description: 'Instagram profile', href: '/tools/instagram-qr-code', icon: Instagram, color: 'text-pink-600', bgColor: 'bg-pink-50' },
{ name: 'Twitter / X', description: 'Twitter profile', href: '/tools/twitter-qr-code', icon: Twitter, color: 'text-sky-500', bgColor: 'bg-sky-50' },
{ name: 'YouTube', description: 'YouTube video/channel', href: '/tools/youtube-qr-code', icon: Youtube, color: 'text-red-600', bgColor: 'bg-red-50' },
{ name: 'TikTok', description: 'TikTok profile', href: '/tools/tiktok-qr-code', icon: Music, color: 'text-slate-800', bgColor: 'bg-slate-100' },
{ name: 'Crypto', description: 'Share wallet address', href: '/tools/crypto-qr-code', icon: Bitcoin, color: 'text-orange-500', bgColor: 'bg-orange-50' },
{ name: 'PayPal', description: 'Receive payments', href: '/tools/paypal-qr-code', icon: CreditCard, color: 'text-blue-700', bgColor: 'bg-blue-50' },
{ name: 'Zoom', description: 'Join Zoom meeting', href: '/tools/zoom-qr-code', icon: Video, color: 'text-sky-500', bgColor: 'bg-sky-50' },
{ name: 'Teams', description: 'Join Teams meeting', href: '/tools/teams-qr-code', icon: Users, color: 'text-violet-500', bgColor: 'bg-violet-50' },
{ name: 'Barcode', description: 'Generate barcodes', href: '/tools/barcode-generator', icon: BarcodeIcon, color: 'text-slate-800', bgColor: 'bg-slate-100' },
];
return (
<div className="min-h-screen bg-white">
{/* Server-rendered navigation links for SEO (crawlers) - Placed first for priority */}
<div className="sr-only" aria-hidden="false">
<nav aria-label="Site Map">
<ul>
<li><a href="/">Home</a></li>
<li><a href="/pricing">Pricing</a></li>
<li><a href="/blog">Blog</a></li>
<li><a href="/faq">FAQ</a></li>
<li><a href="/login">Login</a></li>
<li><a href="/signup">Sign Up</a></li>
{/* Tools */}
<li><a href="/tools/url-qr-code">URL QR Code</a></li>
<li><a href="/tools/text-qr-code">Text QR Code</a></li>
<li><a href="/tools/wifi-qr-code">WiFi QR Code</a></li>
<li><a href="/tools/vcard-qr-code">vCard QR Code</a></li>
<li><a href="/tools/whatsapp-qr-code">WhatsApp QR Code</a></li>
<li><a href="/tools/email-qr-code">Email QR Code</a></li>
<li><a href="/tools/sms-qr-code">SMS QR Code</a></li>
<li><a href="/tools/call-qr-code-generator">Call QR Code</a></li>
<li><a href="/tools/event-qr-code">Event QR Code</a></li>
<li><a href="/tools/geolocation-qr-code">Location QR Code</a></li>
<li><a href="/tools/facebook-qr-code">Facebook QR Code</a></li>
<li><a href="/tools/instagram-qr-code">Instagram QR Code</a></li>
<li><a href="/tools/twitter-qr-code">Twitter QR Code</a></li>
<li><a href="/tools/youtube-qr-code">YouTube QR Code</a></li>
<li><a href="/tools/tiktok-qr-code">TikTok QR Code</a></li>
<li><a href="/tools/crypto-qr-code">Crypto QR Code</a></li>
<li><a href="/tools/paypal-qr-code">PayPal QR Code</a></li>
<li><a href="/tools/zoom-qr-code">Zoom QR Code</a></li>
<li><a href="/tools/teams-qr-code">Teams QR Code</a></li>
<li><a href="/tools/barcode-generator">Barcode Generator</a></li>
</ul>
</nav>
</div>
{/* Header */}
<header
className="fixed top-0 left-0 right-0 z-50 bg-white/80 backdrop-blur-md border-b border-slate-200 shadow-sm"
>
<nav className="container mx-auto px-4 sm:px-6 lg:px-8 max-w-7xl h-20 flex items-center justify-between">
{/* Logo */}
<Link href="/" className="flex items-center space-x-2.5 group">
<div className="relative w-9 h-9 flex items-center justify-center bg-indigo-600 rounded-lg shadow-indigo-200 shadow-lg group-hover:scale-105 transition-transform duration-200">
<QrCode className="w-5 h-5 text-white" />
</div>
<span className="text-xl font-bold text-slate-900 tracking-tight group-hover:text-indigo-600 transition-colors">QR Master</span>
</Link>
{/* Desktop Navigation */}
<div className="hidden md:flex items-center space-x-1">
{/* Tools Dropdown */}
<div
className="relative group px-3 py-2"
onMouseEnter={() => setToolsOpen(true)}
onMouseLeave={() => setToolsOpen(false)}
>
<button className="flex items-center space-x-1 text-sm font-medium text-slate-600 group-hover:text-slate-900 transition-colors">
<span>{t.nav.tools}</span>
<ChevronDown className={cn("w-4 h-4 transition-transform duration-200", toolsOpen && "rotate-180")} />
</button>
<AnimatePresence>
{toolsOpen && (
<motion.div
initial={{ opacity: 0, y: 10 }}
animate={{ opacity: 1, y: 0 }}
exit={{ opacity: 0, y: 10 }}
transition={{ duration: 0.15 }}
className="absolute left-1/2 -translate-x-1/2 top-full mt-2 w-[750px] bg-white rounded-2xl shadow-lg border border-slate-100 p-4 overflow-hidden"
>
<div className="grid grid-cols-3 gap-1">
{tools.map((tool) => (
<Link
key={tool.name}
href={tool.href}
className="flex items-center space-x-3 p-2.5 rounded-xl transition-colors hover:bg-slate-50"
>
<div className={cn("p-2 rounded-lg shrink-0", tool.bgColor, tool.color)}>
<tool.icon className="w-4 h-4" />
</div>
<div>
<div className="text-sm font-semibold text-slate-900">{tool.name}</div>
<p className="text-xs text-slate-500 leading-snug">{tool.description}</p>
</div>
</Link>
))}
</div>
<div className="mt-3 pt-3 border-t border-slate-100 -mx-4 -mb-4 px-4 py-3 text-center bg-slate-50/50">
<p className="text-xs text-slate-500 font-medium">{t.nav.all_free}</p>
</div>
</motion.div>
)}
</AnimatePresence>
</div>
<Link href="/#features" className="px-3 py-2 text-sm font-medium text-slate-600 hover:text-slate-900 transition-colors">
{t.nav.features}
</Link>
<Link href="/#pricing" className="px-3 py-2 text-sm font-medium text-slate-600 hover:text-slate-900 transition-colors">
{t.nav.pricing}
</Link>
<Link href="/blog" className="px-3 py-2 text-sm font-medium text-slate-600 hover:text-slate-900 transition-colors">
{t.nav.blog}
</Link>
<Link href="/#faq" className="px-3 py-2 text-sm font-medium text-slate-600 hover:text-slate-900 transition-colors">
{t.nav.faq}
</Link>
</div>
<div className="hidden md:flex items-center space-x-4">
<Link href="/login" className="text-sm font-medium text-slate-600 hover:text-slate-900 transition-colors">
{t.nav.login}
</Link>
<Link href="/signup">
<Button className={cn(
"font-semibold shadow-lg shadow-indigo-500/20 transition-all hover:scale-105",
scrolled ? "bg-blue-600 text-white hover:bg-blue-700" : "bg-blue-600 text-white hover:bg-blue-700"
)}>
{t.nav.cta || "Get Started Free"}
</Button>
</Link>
</div>
{/* Mobile Menu Button - Always dark */}
<button
className="md:hidden p-2 text-slate-900"
onClick={() => setMobileMenuOpen(!mobileMenuOpen)}
aria-label="Toggle menu"
>
<svg className="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
{mobileMenuOpen ? (
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M6 18L18 6M6 6l12 12" />
) : (
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M4 6h16M4 12h16M4 18h16" />
)}
</svg>
</button>
</nav>
{/* Mobile Menu */}
<AnimatePresence>
{mobileMenuOpen && (
<motion.div
initial={{ opacity: 0, height: 0 }}
animate={{ opacity: 1, height: 'auto' }}
exit={{ opacity: 0, height: 0 }}
className="md:hidden bg-white border-b border-slate-100 overflow-hidden"
>
<div className="container mx-auto px-4 py-6 space-y-2">
{/* Free Tools Accordion */}
<button
onClick={() => setMobileToolsOpen(!mobileToolsOpen)}
className="flex items-center justify-between w-full px-4 py-3 rounded-xl hover:bg-slate-50 text-slate-700 font-semibold"
>
<span>{t.nav.tools}</span>
<ChevronDown className={cn("w-5 h-5 transition-transform", mobileToolsOpen && "rotate-180")} />
</button>
<AnimatePresence>
{mobileToolsOpen && (
<motion.div
initial={{ opacity: 0, height: 0 }}
animate={{ opacity: 1, height: 'auto' }}
exit={{ opacity: 0, height: 0 }}
className="overflow-hidden"
>
<div className="max-h-[50vh] overflow-y-auto pl-4 space-y-1 border-l-2 border-slate-100 ml-4">
{tools.map((tool) => (
<Link
key={tool.name}
href={tool.href}
className="flex items-center gap-3 px-4 py-2.5 rounded-lg hover:bg-slate-50 text-slate-600 text-sm"
onClick={() => { setMobileMenuOpen(false); setMobileToolsOpen(false); }}
>
<tool.icon className={cn("w-4 h-4", tool.color)} />
{tool.name}
</Link>
))}
</div>
</motion.div>
)}
</AnimatePresence>
<div className="h-px bg-slate-100 my-2"></div>
<Link href="/#features" className="block px-4 py-3 text-slate-700 font-medium rounded-xl hover:bg-slate-50" onClick={() => setMobileMenuOpen(false)}>{t.nav.features}</Link>
<Link href="/#pricing" className="block px-4 py-3 text-slate-700 font-medium rounded-xl hover:bg-slate-50" onClick={() => setMobileMenuOpen(false)}>{t.nav.pricing}</Link>
<Link href="/blog" className="block px-4 py-3 text-slate-700 font-medium rounded-xl hover:bg-slate-50" onClick={() => setMobileMenuOpen(false)}>{t.nav.blog}</Link>
<Link href="/#faq" className="block px-4 py-3 text-slate-700 font-medium rounded-xl hover:bg-slate-50" onClick={() => setMobileMenuOpen(false)}>{t.nav.faq}</Link>
<div className="grid grid-cols-2 gap-4 pt-4">
<Link href="/login" onClick={() => setMobileMenuOpen(false)}>
<Button variant="outline" className="w-full justify-center">{t.nav.login}</Button>
</Link>
<Link href="/signup" onClick={() => setMobileMenuOpen(false)}>
<Button className="w-full justify-center bg-indigo-600 hover:bg-indigo-700">{t.nav.cta}</Button>
</Link>
</div>
</div>
</motion.div>
)}
</AnimatePresence>
</header>
{/* Main Content */}
<main className="pt-20">
{/* Server-rendered navigation links for SEO (crawlers) */}
{children}
</main>
{/* Footer */}
<Footer t={t} />
</div >
);
}

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

@@ -1,157 +1,157 @@
import React from 'react';
import type { Metadata } from 'next';
import Link from 'next/link';
import Image from 'next/image';
import { notFound } from 'next/navigation';
import SeoJsonLd from '@/components/SeoJsonLd';
import Breadcrumbs from '@/components/Breadcrumbs';
import { Button } from '@/components/ui/Button';
import { Badge } from '@/components/ui/Badge';
import { blogPosts } from '@/lib/blog-data';
interface PageProps {
params: {
slug: string;
};
}
export function generateStaticParams() {
return Object.keys(blogPosts).map((slug) => ({
slug,
}));
}
export function generateMetadata({ params }: PageProps): Metadata {
const post = blogPosts[params.slug];
if (!post) {
notFound();
return {} as Metadata; // Typescript satisfaction (unreachable)
}
return {
title: {
absolute: `${post.title} | QR Master Blog`,
},
description: post.excerpt,
openGraph: {
title: post.title,
description: post.excerpt,
type: 'article',
publishedTime: post.datePublished,
modifiedTime: post.dateModified,
authors: [post.author],
images: [
{
url: post.image,
alt: post.imageAlt,
},
],
},
twitter: {
card: 'summary_large_image',
title: post.title,
description: post.excerpt,
images: [post.image],
},
};
}
export default function BlogPostPage({ params }: PageProps) {
const post = blogPosts[params.slug];
if (!post) {
notFound();
}
const jsonLd = {
'@context': 'https://schema.org',
'@type': 'BlogPosting',
headline: post.title,
image: post.image,
datePublished: post.datePublished,
dateModified: post.dateModified,
author: {
'@type': 'Organization',
name: post.author,
url: post.authorUrl,
},
};
const breadcrumbItems = [
{ name: 'Home', url: '/' },
{ name: 'Blog', url: '/blog' },
{ name: post.title, url: `/blog/${post.slug}` },
];
return (
<>
<SeoJsonLd data={[jsonLd]} />
<div className="min-h-screen bg-white pb-20">
{/* Hero Header */}
<div className="bg-gray-50 border-b border-gray-100">
<div className="container mx-auto px-4 sm:px-6 lg:px-8 py-12 max-w-4xl">
<Breadcrumbs items={breadcrumbItems} className="mb-8" />
<Badge variant="info" className="mb-6">
{post.category}
</Badge>
<h1 className="text-4xl md:text-5xl font-bold text-gray-900 leading-tight mb-6">
{post.title}
</h1>
<div className="flex items-center text-gray-600 mb-8 space-x-6 text-sm">
<div className="flex items-center">
<span className="font-medium text-gray-900 mr-2">{post.author}</span>
</div>
<div>•</div>
<div>{post.date}</div>
<div>•</div>
<div>{post.readTime} read</div>
</div>
</div>
</div>
{/* Featured Image */}
<div className="container mx-auto px-4 sm:px-6 lg:px-8 max-w-4xl -mt-8 mb-12">
<div className="relative aspect-video w-full overflow-hidden rounded-2xl shadow-xl">
<Image
src={post.image}
alt={post.imageAlt}
fill
className="object-cover"
priority
/>
</div>
</div>
{/* Content */}
<article className="container mx-auto px-4 sm:px-6 lg:px-8 max-w-3xl">
<div
className="prose prose-lg prose-blue max-w-none hover:prose-a:text-blue-600 transition-colors"
dangerouslySetInnerHTML={{ __html: post.content }}
/>
{/* Share / CTA */}
<div className="mt-16 pt-8 border-t border-gray-200">
<div className="bg-blue-50 rounded-2xl p-8 text-center">
<h3 className="text-2xl font-bold text-gray-900 mb-4">
Enjoyed this article?
</h3>
<p className="text-gray-600 mb-6 text-lg">
Create your first dynamic QR code for free and start tracking your campaigns today.
</p>
<Link href="/signup">
<Button size="lg" className="px-8">
Create Free QR Code
</Button>
</Link>
</div>
</div>
</article>
</div>
</>
);
}
import React from 'react';
import type { Metadata } from 'next';
import Link from 'next/link';
import Image from 'next/image';
import { notFound } from 'next/navigation';
import SeoJsonLd from '@/components/SeoJsonLd';
import Breadcrumbs from '@/components/Breadcrumbs';
import { Button } from '@/components/ui/Button';
import { Badge } from '@/components/ui/Badge';
import { blogPosts } from '@/lib/blog-data';
interface PageProps {
params: {
slug: string;
};
}
export function generateStaticParams() {
return Object.keys(blogPosts).map((slug) => ({
slug,
}));
}
export function generateMetadata({ params }: PageProps): Metadata {
const post = blogPosts[params.slug];
if (!post) {
notFound();
return {} as Metadata; // Typescript satisfaction (unreachable)
}
return {
title: {
absolute: `${post.title} | QR Master Blog`,
},
description: post.excerpt,
openGraph: {
title: post.title,
description: post.excerpt,
type: 'article',
publishedTime: post.datePublished,
modifiedTime: post.dateModified,
authors: [post.author],
images: [
{
url: post.image,
alt: post.imageAlt,
},
],
},
twitter: {
card: 'summary_large_image',
title: post.title,
description: post.excerpt,
images: [post.image],
},
};
}
export default function BlogPostPage({ params }: PageProps) {
const post = blogPosts[params.slug];
if (!post) {
notFound();
}
const jsonLd = {
'@context': 'https://schema.org',
'@type': 'BlogPosting',
headline: post.title,
image: post.image,
datePublished: post.datePublished,
dateModified: post.dateModified,
author: {
'@type': 'Organization',
name: post.author,
url: post.authorUrl,
},
};
const breadcrumbItems = [
{ name: 'Home', url: '/' },
{ name: 'Blog', url: '/blog' },
{ name: post.title, url: `/blog/${post.slug}` },
];
return (
<>
<SeoJsonLd data={[jsonLd]} />
<div className="min-h-screen bg-white pb-20">
{/* Hero Header */}
<div className="bg-gray-50 border-b border-gray-100">
<div className="container mx-auto px-4 sm:px-6 lg:px-8 py-12 max-w-4xl">
<Breadcrumbs items={breadcrumbItems} className="mb-8" />
<Badge variant="info" className="mb-6">
{post.category}
</Badge>
<h1 className="text-4xl md:text-5xl font-bold text-gray-900 leading-tight mb-6">
{post.title}
</h1>
<div className="flex items-center text-gray-600 mb-8 space-x-6 text-sm">
<div className="flex items-center">
<span className="font-medium text-gray-900 mr-2">{post.author}</span>
</div>
<div>•</div>
<div>{post.date}</div>
<div>•</div>
<div>{post.readTime} read</div>
</div>
</div>
</div>
{/* Featured Image */}
<div className="container mx-auto px-4 sm:px-6 lg:px-8 max-w-4xl -mt-8 mb-12">
<div className="relative aspect-video w-full overflow-hidden rounded-2xl shadow-xl">
<Image
src={post.image}
alt={post.imageAlt}
fill
className="object-cover"
priority
/>
</div>
</div>
{/* Content */}
<article className="container mx-auto px-4 sm:px-6 lg:px-8 max-w-3xl">
<div
className="prose prose-lg prose-blue max-w-none hover:prose-a:text-blue-600 transition-colors"
dangerouslySetInnerHTML={{ __html: post.content }}
/>
{/* Share / CTA */}
<div className="mt-16 pt-8 border-t border-gray-200">
<div className="bg-blue-50 rounded-2xl p-8 text-center">
<h3 className="text-2xl font-bold text-gray-900 mb-4">
Enjoyed this article?
</h3>
<p className="text-gray-600 mb-6 text-lg">
Create your first dynamic QR code for free and start tracking your campaigns today.
</p>
<Link href="/signup">
<Button size="lg" className="px-8">
Create Free QR Code
</Button>
</Link>
</div>
</div>
</article>
</div>
</>
);
}

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

@@ -1,182 +1,182 @@
import React from 'react';
import type { Metadata } from 'next';
import Link from 'next/link';
import Image from 'next/image';
import SeoJsonLd from '@/components/SeoJsonLd';
import { websiteSchema, breadcrumbSchema } from '@/lib/schema';
import { Card, CardHeader, CardTitle, CardContent } from '@/components/ui/Card';
import { Badge } from '@/components/ui/Badge';
import Breadcrumbs, { BreadcrumbItem } from '@/components/Breadcrumbs';
function truncateAtWord(text: string, maxLength: number): string {
if (text.length <= maxLength) return text;
const truncated = text.slice(0, maxLength);
const lastSpace = truncated.lastIndexOf(' ');
return lastSpace > 0 ? truncated.slice(0, lastSpace) : truncated;
}
export async function generateMetadata(): Promise<Metadata> {
const title = truncateAtWord('QR Insights: Latest QR Strategies', 60);
const description = truncateAtWord(
'Expert guides on QR code strategies, marketing campaigns, tracking analytics, and best practices for small businesses and enterprises.',
160
);
return {
title,
description,
alternates: {
canonical: 'https://www.qrmaster.net/blog',
languages: {
'x-default': 'https://www.qrmaster.net/blog',
en: 'https://www.qrmaster.net/blog',
},
},
openGraph: {
title,
description,
url: 'https://www.qrmaster.net/blog',
type: 'website',
},
twitter: {
title,
description,
},
};
}
const blogPosts = [
// NEW POSTS (January 2026)
{
slug: 'qr-code-restaurant-menu',
title: 'How to Create a QR Code for Restaurant Menu',
excerpt: 'Step-by-step guide to creating digital menu QR codes for your restaurant. Learn best practices for touchless menus, placement tips, and tracking.',
date: 'January 5, 2026',
readTime: '12 Min',
category: 'Restaurant',
image: '/blog/restaurant-qr-menu.png',
},
{
slug: 'vcard-qr-code-generator',
title: 'Free vCard QR Code Generator: Digital Business Cards',
excerpt: 'Create professional vCard QR codes for digital business cards. Share contact info instantly with a scan—includes templates and best practices.',
date: 'January 5, 2026',
readTime: '10 Min',
category: 'Business Cards',
image: '/blog/vcard-qr-code.png',
},
{
slug: 'qr-code-small-business',
title: 'Best QR Code Generator for Small Business: 2025 Guide',
excerpt: 'Find the best QR code solution for your small business. Compare features, pricing, and use cases for marketing, payments, and operations.',
date: 'January 5, 2026',
readTime: '14 Min',
category: 'Business',
image: '/blog/small-business-qr.png',
},
{
slug: 'qr-code-print-size-guide',
title: 'QR Code Print Size Guide: Minimum Sizes for Every Use Case',
excerpt: 'Complete guide to QR code print sizes. Learn minimum dimensions for business cards, posters, banners, and more to ensure reliable scanning.',
date: 'January 5, 2026',
readTime: '8 Min',
category: 'Printing',
image: '/blog/qr-print-sizes.png',
},
// EXISTING POSTS
{
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.webp',
},
{
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.webp',
},
{
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/bulk-qr-events-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: '15 Min',
category: 'Analytics',
image: '/blog/qr-code-analytics-hero.webp',
},
];
export default function BlogPage() {
const breadcrumbItems: BreadcrumbItem[] = [
{ name: 'Home', url: '/' },
{ name: 'Blog', url: '/blog' },
];
return (
<>
<SeoJsonLd data={[websiteSchema(), breadcrumbSchema(breadcrumbItems)]} />
<div className="py-20 bg-gradient-to-b from-gray-50 to-white">
<div className="container mx-auto px-4">
<Breadcrumbs items={breadcrumbItems} />
<div className="text-center mb-16">
<h1 className="text-4xl lg:text-5xl font-bold text-gray-900 mb-6">
QR Code Insights
</h1>
<p className="text-xl text-gray-600 max-w-2xl mx-auto">
Expert guides on dynamic QR codes, campaign tracking, UTM analytics, and smart marketing use cases.
Discover how-to tutorials and best practices for QR code analytics.
</p>
</div>
<div className="grid md:grid-cols-2 lg:grid-cols-3 gap-8 max-w-6xl mx-auto">
{blogPosts.map((post) => (
<Link key={post.slug} href={`/blog/${post.slug}`}>
<Card hover className="h-full overflow-hidden shadow-md hover:shadow-xl transition-all duration-300">
<div className="relative h-56 overflow-hidden">
<Image
src={post.image}
alt={`${post.title} - QR code guide showing ${post.category.toLowerCase()} strategies`}
width={800}
height={600}
className="w-full h-full object-cover transition-transform duration-500 hover:scale-110"
/>
</div>
<CardHeader className="pb-3">
<div className="flex items-center justify-between mb-3">
<Badge variant="info">{post.category}</Badge>
<span className="text-sm text-gray-500 font-medium">{post.readTime} read</span>
</div>
<CardTitle className="text-xl leading-tight mb-3">{post.title}</CardTitle>
</CardHeader>
<CardContent className="pt-0">
<p className="text-gray-600 mb-4 leading-relaxed">{post.excerpt}</p>
<div className="flex items-center justify-between pt-4 border-t border-gray-100">
<p className="text-sm text-gray-500">{post.date}</p>
<span className="text-primary-600 text-sm font-medium">Read more →</span>
</div>
</CardContent>
</Card>
</Link>
))}
</div>
</div>
</div>
</>
);
}
import React from 'react';
import type { Metadata } from 'next';
import Link from 'next/link';
import Image from 'next/image';
import SeoJsonLd from '@/components/SeoJsonLd';
import { websiteSchema, breadcrumbSchema } from '@/lib/schema';
import { Card, CardHeader, CardTitle, CardContent } from '@/components/ui/Card';
import { Badge } from '@/components/ui/Badge';
import Breadcrumbs, { BreadcrumbItem } from '@/components/Breadcrumbs';
function truncateAtWord(text: string, maxLength: number): string {
if (text.length <= maxLength) return text;
const truncated = text.slice(0, maxLength);
const lastSpace = truncated.lastIndexOf(' ');
return lastSpace > 0 ? truncated.slice(0, lastSpace) : truncated;
}
export async function generateMetadata(): Promise<Metadata> {
const title = truncateAtWord('QR Insights: Latest QR Strategies', 60);
const description = truncateAtWord(
'Expert guides on QR code strategies, marketing campaigns, tracking analytics, and best practices for small businesses and enterprises.',
160
);
return {
title,
description,
alternates: {
canonical: 'https://www.qrmaster.net/blog',
languages: {
'x-default': 'https://www.qrmaster.net/blog',
en: 'https://www.qrmaster.net/blog',
},
},
openGraph: {
title,
description,
url: 'https://www.qrmaster.net/blog',
type: 'website',
},
twitter: {
title,
description,
},
};
}
const blogPosts = [
// NEW POSTS (January 2026)
{
slug: 'qr-code-restaurant-menu',
title: 'How to Create a QR Code for Restaurant Menu',
excerpt: 'Step-by-step guide to creating digital menu QR codes for your restaurant. Learn best practices for touchless menus, placement tips, and tracking.',
date: 'January 5, 2026',
readTime: '12 Min',
category: 'Restaurant',
image: '/blog/restaurant-qr-menu.png',
},
{
slug: 'vcard-qr-code-generator',
title: 'Free vCard QR Code Generator: Digital Business Cards',
excerpt: 'Create professional vCard QR codes for digital business cards. Share contact info instantly with a scan—includes templates and best practices.',
date: 'January 5, 2026',
readTime: '10 Min',
category: 'Business Cards',
image: '/blog/vcard-qr-code.png',
},
{
slug: 'qr-code-small-business',
title: 'Best QR Code Generator for Small Business: 2025 Guide',
excerpt: 'Find the best QR code solution for your small business. Compare features, pricing, and use cases for marketing, payments, and operations.',
date: 'January 5, 2026',
readTime: '14 Min',
category: 'Business',
image: '/blog/small-business-qr.png',
},
{
slug: 'qr-code-print-size-guide',
title: 'QR Code Print Size Guide: Minimum Sizes for Every Use Case',
excerpt: 'Complete guide to QR code print sizes. Learn minimum dimensions for business cards, posters, banners, and more to ensure reliable scanning.',
date: 'January 5, 2026',
readTime: '8 Min',
category: 'Printing',
image: '/blog/qr-print-sizes.png',
},
// EXISTING POSTS
{
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.webp',
},
{
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.webp',
},
{
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/bulk-qr-events-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: '15 Min',
category: 'Analytics',
image: '/blog/qr-code-analytics-hero.webp',
},
];
export default function BlogPage() {
const breadcrumbItems: BreadcrumbItem[] = [
{ name: 'Home', url: '/' },
{ name: 'Blog', url: '/blog' },
];
return (
<>
<SeoJsonLd data={[websiteSchema(), breadcrumbSchema(breadcrumbItems)]} />
<div className="py-20 bg-gradient-to-b from-gray-50 to-white">
<div className="container mx-auto px-4">
<Breadcrumbs items={breadcrumbItems} />
<div className="text-center mb-16">
<h1 className="text-4xl lg:text-5xl font-bold text-gray-900 mb-6">
QR Code Insights
</h1>
<p className="text-xl text-gray-600 max-w-2xl mx-auto">
Expert guides on dynamic QR codes, campaign tracking, UTM analytics, and smart marketing use cases.
Discover how-to tutorials and best practices for QR code analytics.
</p>
</div>
<div className="grid md:grid-cols-2 lg:grid-cols-3 gap-8 max-w-6xl mx-auto">
{blogPosts.map((post) => (
<Link key={post.slug} href={`/blog/${post.slug}`}>
<Card hover className="h-full overflow-hidden shadow-md hover:shadow-xl transition-all duration-300">
<div className="relative h-56 overflow-hidden">
<Image
src={post.image}
alt={`${post.title} - QR code guide showing ${post.category.toLowerCase()} strategies`}
width={800}
height={600}
className="w-full h-full object-cover transition-transform duration-500 hover:scale-110"
/>
</div>
<CardHeader className="pb-3">
<div className="flex items-center justify-between mb-3">
<Badge variant="info">{post.category}</Badge>
<span className="text-sm text-gray-500 font-medium">{post.readTime} read</span>
</div>
<CardTitle className="text-xl leading-tight mb-3">{post.title}</CardTitle>
</CardHeader>
<CardContent className="pt-0">
<p className="text-gray-600 mb-4 leading-relaxed">{post.excerpt}</p>
<div className="flex items-center justify-between pt-4 border-t border-gray-100">
<p className="text-sm text-gray-500">{post.date}</p>
<span className="text-primary-600 text-sm font-medium">Read more →</span>
</div>
</CardContent>
</Card>
</Link>
))}
</div>
</div>
</div>
</>
);
}

1328
src/app/(main)/(marketing)/bulk-qr-code-generator/page.tsx
View File

File diff suppressed because it is too large Load Diff

1322
src/app/(main)/(marketing)/custom-qr-code-generator/page.tsx
View File

File diff suppressed because it is too large Load Diff

1036
src/app/(main)/(marketing)/dynamic-qr-code-generator/page.tsx
View File

File diff suppressed because it is too large Load Diff

238
src/app/(main)/(marketing)/error.tsx
View File

@@ -1,119 +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>
);
}
'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>
);
}

44
src/app/(main)/(marketing)/faq/ContactSupport.tsx
View File

@@ -1,22 +1,22 @@
'use client';
import React from 'react';
import { ObfuscatedMailto } from '@/components/ui/ObfuscatedMailto';
export function ContactSupport() {
return (
<div className="mt-16 bg-blue-50 border-l-4 border-blue-500 p-8 rounded-r-lg">
<h2 className="text-2xl font-bold mb-4 text-gray-900">
Still have questions?
</h2>
<p className="text-lg text-gray-700 mb-6 leading-relaxed">
Our support team is here to help. Contact us at{' '}
<ObfuscatedMailto
email="support@qrmaster.net"
className="text-blue-600 hover:text-blue-700 font-semibold"
/>{' '}
or reach out through our live chat.
</p>
</div>
);
}
'use client';
import React from 'react';
import { ObfuscatedMailto } from '@/components/ui/ObfuscatedMailto';
export function ContactSupport() {
return (
<div className="mt-16 bg-blue-50 border-l-4 border-blue-500 p-8 rounded-r-lg">
<h2 className="text-2xl font-bold mb-4 text-gray-900">
Still have questions?
</h2>
<p className="text-lg text-gray-700 mb-6 leading-relaxed">
Our support team is here to help. Contact us at{' '}
<ObfuscatedMailto
email="support@qrmaster.net"
className="text-blue-600 hover:text-blue-700 font-semibold"
/>{' '}
or reach out through our live chat.
</p>
</div>
);
}

284
src/app/(main)/(marketing)/faq/page.tsx
View File

@@ -1,142 +1,142 @@
import React from 'react';
import type { Metadata } from 'next';
import SeoJsonLd from '@/components/SeoJsonLd';
import { faqPageSchema } from '@/lib/schema';
import { Card, CardContent } from '@/components/ui/Card';
import { ObfuscatedMailto } from '@/components/ui/ObfuscatedMailto';
function truncateAtWord(text: string, maxLength: number): string {
if (text.length <= maxLength) return text;
const truncated = text.slice(0, maxLength);
const lastSpace = truncated.lastIndexOf(' ');
return lastSpace > 0 ? truncated.slice(0, lastSpace) : truncated;
}
export async function generateMetadata(): Promise<Metadata> {
const title = truncateAtWord('QR Master FAQ: Dynamic & Bulk QR', 60);
const description = truncateAtWord(
'All answers: dynamic QR, security, analytics, bulk, events & print.',
160
);
return {
title,
description,
alternates: {
canonical: 'https://www.qrmaster.net/faq',
languages: {
'x-default': 'https://www.qrmaster.net/faq',
en: 'https://www.qrmaster.net/faq',
},
},
openGraph: {
title,
description,
url: 'https://www.qrmaster.net/faq',
type: 'website',
},
twitter: {
title,
description,
},
};
}
const faqs = [
{
question: 'What is a dynamic QR code?',
answer: 'A dynamic QR code allows you to change the destination URL after the code has been created and printed. Unlike static QR codes, dynamic codes redirect through a short URL that you control, enabling real-time updates, scan analytics, and campaign tracking without reprinting the code.',
},
{
question: 'How do I track QR scans?',
answer: 'QR Master provides a comprehensive analytics dashboard that tracks every scan in real-time. You can monitor scan rates, geographic locations, device types, timestamps, and user behavior. Enable UTM parameters to integrate with Google Analytics for advanced campaign tracking and conversion attribution.',
},
{
question: 'What security features does QR Master offer?',
answer: 'QR Master employs enterprise-grade security including SSL encryption, link validation to prevent malicious redirects, fraud detection, and GDPR-compliant data handling. All scan analytics are stored securely and access is protected with multi-factor authentication for business accounts.',
},
{
question: 'Can I generate bulk QR codes for print?',
answer: 'Yes. Our bulk QR generation tool allows you to create thousands of QR codes at once by uploading a CSV file. Each code can be customized with unique URLs, UTM parameters, and branding. Download print-ready files in SVG, PNG, or PDF formats optimized for high-resolution printing.',
},
{
question: 'How do I brand my QR codes?',
answer: 'QR Master offers customization options including custom colors, corner styles, and pattern designs. Branded QR codes maintain scannability while matching your brand identity. Choose your color palette and preview designs before downloading.',
},
{
question: 'Is scan analytics GDPR compliant?',
answer: 'Yes. All QR Master analytics are fully GDPR compliant. We collect only necessary data, provide transparent privacy policies, allow users to opt out, and store data securely in EU-compliant data centers. You maintain full control over data retention and deletion.',
},
{
question: 'Can QR Master track campaigns with UTM?',
answer: 'Absolutely. QR Master supports UTM parameter integration for all dynamic QR codes. Automatically append source, medium, campaign, term, and content parameters to track QR performance in Google Analytics, Adobe Analytics, and other marketing platforms. UTM tracking enables multi-channel attribution and ROI measurement.',
},
{
question: 'Difference between static and dynamic QR codes?',
answer: 'Static QR codes encode the destination URL directly in the code pattern and cannot be changed after creation. Dynamic QR codes use a short redirect URL, allowing you to update destinations, track scans, enable/disable codes, and gather analytics—all without reprinting. Dynamic codes are essential for professional marketing campaigns.',
},
{
question: 'How are QR codes used for events?',
answer: 'QR codes streamline event check-ins, ticket validation, attendee tracking, and engagement measurement. Generate unique codes for each ticket, track scan times and locations, enable contactless entry, and analyze attendee behavior. Event organizers use QR analytics to measure session popularity and optimize future events.',
},
{
question: 'Can I make QR codes for business cards?',
answer: 'Yes. QR codes on business cards provide instant contact sharing via vCard format, link to your portfolio or LinkedIn profile, and track networking effectiveness. Use branded QR codes that match your card design, and leverage scan analytics to see how many contacts engage and when they follow up.',
},
{
question: 'How do I use QR codes for bulk marketing?',
answer: 'Bulk QR codes enable scalable campaigns across print ads, packaging, direct mail, and retail displays. Generate thousands of codes with unique tracking URLs, distribute them across channels, and use analytics to measure which placements drive the highest engagement. Bulk generation supports CSV upload, API integration, and automated workflows.',
},
{
question: 'Is API access available for bulk QR generation?',
answer: 'Yes. QR Master offers a developer-friendly REST API for programmatic QR code generation, URL management, and analytics retrieval. Integrate QR creation into your CRM, marketing automation platform, or e-commerce system. API access is included in Business plans and supports bulk operations, webhooks, and real-time updates.',
},
];
export default function FAQPage() {
return (
<>
<SeoJsonLd data={faqPageSchema(faqs)} />
<div className="py-20 bg-gradient-to-b from-gray-50 to-white">
<div className="container mx-auto px-4">
<div className="max-w-4xl mx-auto">
<div className="text-center mb-16">
<h1 className="text-4xl lg:text-5xl font-bold text-gray-900 mb-6">
Frequently Asked Questions
</h1>
<p className="text-xl text-gray-600">
Everything you need to know about dynamic QR codes, security, analytics, bulk generation, events, and print quality.
</p>
</div>
<div className="space-y-6">
{faqs.map((faq, index) => (
<Card key={index} className="border-l-4 border-blue-500">
<CardContent className="p-8">
<h2 className="text-2xl font-semibold mb-4 text-gray-900">
{faq.question}
</h2>
<p className="text-lg text-gray-700 leading-relaxed">
{faq.answer}
</p>
</CardContent>
</Card>
))}
</div>
<div className="mt-16 bg-blue-50 border-l-4 border-blue-500 p-8 rounded-r-lg">
<h2 className="text-2xl font-bold mb-4 text-gray-900">
Still have questions?
</h2>
<p className="text-lg text-gray-700 mb-6 leading-relaxed">
Our support team is here to help. Contact us at{' '}
<ObfuscatedMailto email="support@qrmaster.net" className="text-blue-600 hover:text-blue-700 font-semibold" />{' '}
or reach out through our live chat.
</p>
</div>
</div>
</div>
</div>
</>
);
}
import React from 'react';
import type { Metadata } from 'next';
import SeoJsonLd from '@/components/SeoJsonLd';
import { faqPageSchema } from '@/lib/schema';
import { Card, CardContent } from '@/components/ui/Card';
import { ObfuscatedMailto } from '@/components/ui/ObfuscatedMailto';
function truncateAtWord(text: string, maxLength: number): string {
if (text.length <= maxLength) return text;
const truncated = text.slice(0, maxLength);
const lastSpace = truncated.lastIndexOf(' ');
return lastSpace > 0 ? truncated.slice(0, lastSpace) : truncated;
}
export async function generateMetadata(): Promise<Metadata> {
const title = truncateAtWord('QR Master FAQ: Dynamic & Bulk QR', 60);
const description = truncateAtWord(
'All answers: dynamic QR, security, analytics, bulk, events & print.',
160
);
return {
title,
description,
alternates: {
canonical: 'https://www.qrmaster.net/faq',
languages: {
'x-default': 'https://www.qrmaster.net/faq',
en: 'https://www.qrmaster.net/faq',
},
},
openGraph: {
title,
description,
url: 'https://www.qrmaster.net/faq',
type: 'website',
},
twitter: {
title,
description,
},
};
}
const faqs = [
{
question: 'What is a dynamic QR code?',
answer: 'A dynamic QR code allows you to change the destination URL after the code has been created and printed. Unlike static QR codes, dynamic codes redirect through a short URL that you control, enabling real-time updates, scan analytics, and campaign tracking without reprinting the code.',
},
{
question: 'How do I track QR scans?',
answer: 'QR Master provides a comprehensive analytics dashboard that tracks every scan in real-time. You can monitor scan rates, geographic locations, device types, timestamps, and user behavior. Enable UTM parameters to integrate with Google Analytics for advanced campaign tracking and conversion attribution.',
},
{
question: 'What security features does QR Master offer?',
answer: 'QR Master employs enterprise-grade security including SSL encryption, link validation to prevent malicious redirects, fraud detection, and GDPR-compliant data handling. All scan analytics are stored securely and access is protected with multi-factor authentication for business accounts.',
},
{
question: 'Can I generate bulk QR codes for print?',
answer: 'Yes. Our bulk QR generation tool allows you to create thousands of QR codes at once by uploading a CSV file. Each code can be customized with unique URLs, UTM parameters, and branding. Download print-ready files in SVG, PNG, or PDF formats optimized for high-resolution printing.',
},
{
question: 'How do I brand my QR codes?',
answer: 'QR Master offers customization options including custom colors, corner styles, and pattern designs. Branded QR codes maintain scannability while matching your brand identity. Choose your color palette and preview designs before downloading.',
},
{
question: 'Is scan analytics GDPR compliant?',
answer: 'Yes. All QR Master analytics are fully GDPR compliant. We collect only necessary data, provide transparent privacy policies, allow users to opt out, and store data securely in EU-compliant data centers. You maintain full control over data retention and deletion.',
},
{
question: 'Can QR Master track campaigns with UTM?',
answer: 'Absolutely. QR Master supports UTM parameter integration for all dynamic QR codes. Automatically append source, medium, campaign, term, and content parameters to track QR performance in Google Analytics, Adobe Analytics, and other marketing platforms. UTM tracking enables multi-channel attribution and ROI measurement.',
},
{
question: 'Difference between static and dynamic QR codes?',
answer: 'Static QR codes encode the destination URL directly in the code pattern and cannot be changed after creation. Dynamic QR codes use a short redirect URL, allowing you to update destinations, track scans, enable/disable codes, and gather analytics—all without reprinting. Dynamic codes are essential for professional marketing campaigns.',
},
{
question: 'How are QR codes used for events?',
answer: 'QR codes streamline event check-ins, ticket validation, attendee tracking, and engagement measurement. Generate unique codes for each ticket, track scan times and locations, enable contactless entry, and analyze attendee behavior. Event organizers use QR analytics to measure session popularity and optimize future events.',
},
{
question: 'Can I make QR codes for business cards?',
answer: 'Yes. QR codes on business cards provide instant contact sharing via vCard format, link to your portfolio or LinkedIn profile, and track networking effectiveness. Use branded QR codes that match your card design, and leverage scan analytics to see how many contacts engage and when they follow up.',
},
{
question: 'How do I use QR codes for bulk marketing?',
answer: 'Bulk QR codes enable scalable campaigns across print ads, packaging, direct mail, and retail displays. Generate thousands of codes with unique tracking URLs, distribute them across channels, and use analytics to measure which placements drive the highest engagement. Bulk generation supports CSV upload, API integration, and automated workflows.',
},
{
question: 'Is API access available for bulk QR generation?',
answer: 'Yes. QR Master offers a developer-friendly REST API for programmatic QR code generation, URL management, and analytics retrieval. Integrate QR creation into your CRM, marketing automation platform, or e-commerce system. API access is included in Business plans and supports bulk operations, webhooks, and real-time updates.',
},
];
export default function FAQPage() {
return (
<>
<SeoJsonLd data={faqPageSchema(faqs)} />
<div className="py-20 bg-gradient-to-b from-gray-50 to-white">
<div className="container mx-auto px-4">
<div className="max-w-4xl mx-auto">
<div className="text-center mb-16">
<h1 className="text-4xl lg:text-5xl font-bold text-gray-900 mb-6">
Frequently Asked Questions
</h1>
<p className="text-xl text-gray-600">
Everything you need to know about dynamic QR codes, security, analytics, bulk generation, events, and print quality.
</p>
</div>
<div className="space-y-6">
{faqs.map((faq, index) => (
<Card key={index} className="border-l-4 border-blue-500">
<CardContent className="p-8">
<h2 className="text-2xl font-semibold mb-4 text-gray-900">
{faq.question}
</h2>
<p className="text-lg text-gray-700 leading-relaxed">
{faq.answer}
</p>
</CardContent>
</Card>
))}
</div>
<div className="mt-16 bg-blue-50 border-l-4 border-blue-500 p-8 rounded-r-lg">
<h2 className="text-2xl font-bold mb-4 text-gray-900">
Still have questions?
</h2>
<p className="text-lg text-gray-700 mb-6 leading-relaxed">
Our support team is here to help. Contact us at{' '}
<ObfuscatedMailto email="support@qrmaster.net" className="text-blue-600 hover:text-blue-700 font-semibold" />{' '}
or reach out through our live chat.
</p>
</div>
</div>
</div>
</div>
</>
);
}

136
src/app/(main)/(marketing)/layout.tsx
View File

@@ -1,70 +1,66 @@
import type { Metadata } from 'next';
import '@/styles/globals.css';
import { Providers } from '@/components/Providers';
import MarketingLayout from './MarketingLayout';
// Import schema functions from library
import { organizationSchema, websiteSchema } from '@/lib/schema';
const isIndexable = process.env.NEXT_PUBLIC_INDEXABLE === 'true';
export const metadata: Metadata = {
metadataBase: new URL('https://www.qrmaster.net'),
title: {
default: 'QR Master – Smart QR Generator & Analytics',
template: '%s | QR Master',
},
description: 'Create dynamic QR codes, track scans, and scale campaigns with secure analytics.',
keywords: 'QR code, QR generator, dynamic QR, QR tracking, QR analytics, branded QR, bulk QR generator',
robots: isIndexable
? { index: true, follow: true }
: { index: false, follow: false },
icons: {
icon: [
{ url: '/favicon.svg', type: 'image/svg+xml' },
{ url: '/logo.svg', type: 'image/svg+xml' },
],
apple: '/logo.svg',
},
twitter: {
card: 'summary_large_image',
site: '@qrmaster',
images: ['https://www.qrmaster.net/og-image.png'],
},
openGraph: {
type: 'website',
siteName: 'QR Master',
title: 'QR Master – Smart QR Generator & Analytics',
description: 'Create dynamic QR codes, track scans, and scale campaigns with secure analytics.',
images: [
{
url: 'https://www.qrmaster.net/og-image.png',
width: 1200,
height: 630,
alt: 'QR Master - Dynamic QR Code Generator and Analytics Platform',
},
],
locale: 'en_US',
},
};
export default function MarketingGroupLayout({
children,
}: {
children: React.ReactNode;
}) {
return (
<>
<script
type="application/ld+json"
dangerouslySetInnerHTML={{ __html: JSON.stringify(organizationSchema()) }}
/>
<script
type="application/ld+json"
dangerouslySetInnerHTML={{ __html: JSON.stringify(websiteSchema()) }}
/>
<MarketingLayout>
{children}
</MarketingLayout>
</>
);
}
import type { Metadata } from 'next';
import '@/styles/globals.css';
import { Providers } from '@/components/Providers';
import MarketingLayout from './MarketingLayout';
// Import schema functions from library
import { organizationSchema, websiteSchema } from '@/lib/schema';
const isIndexable = process.env.NEXT_PUBLIC_INDEXABLE === 'true';
export const metadata: Metadata = {
metadataBase: new URL('https://www.qrmaster.net'),
title: {
default: 'QR Master – Smart QR Generator & Analytics',
template: '%s | QR Master',
},
description: 'Create dynamic QR codes, track scans, and scale campaigns with secure analytics.',
keywords: 'QR code, QR generator, dynamic QR, QR tracking, QR analytics, branded QR, bulk QR generator',
robots: isIndexable
? { index: true, follow: true }
: { index: false, follow: false },
icons: {
icon: [
{ url: '/favicon.svg', type: 'image/svg+xml' },
{ url: '/logo.svg', type: 'image/svg+xml' },
],
apple: '/logo.svg',
},
twitter: {
card: 'summary_large_image',
site: '@qrmaster',
images: ['https://www.qrmaster.net/og-image.png'],
},
openGraph: {
type: 'website',
siteName: 'QR Master',
title: 'QR Master – Smart QR Generator & Analytics',
description: 'Create dynamic QR codes, track scans, and scale campaigns with secure analytics.',
images: [
{
url: 'https://www.qrmaster.net/og-image.png',
width: 1200,
height: 630,
alt: 'QR Master - Dynamic QR Code Generator and Analytics Platform',
},
],
locale: 'en_US',
},
};
export default function MarketingGroupLayout({
children,
}: {
children: React.ReactNode;
}) {
return (
<>
<script
type="application/ld+json"
dangerouslySetInnerHTML={{ __html: JSON.stringify(organizationSchema()) }}
/>
<MarketingLayout>
{children}
</MarketingLayout>
</>
);
}

1484
src/app/(main)/(marketing)/manage-qr-codes/page.tsx
View File

File diff suppressed because it is too large Load Diff

1508
src/app/(main)/(marketing)/newsletter/NewsletterClient.tsx
View File

File diff suppressed because it is too large Load Diff

38
src/app/(main)/(marketing)/newsletter/page.tsx
View File

@@ -1,19 +1,19 @@
import React from 'react';
import type { Metadata } from 'next';
import NewsletterClient from './NewsletterClient';
export const metadata: Metadata = {
title: 'Newsletter Admin | QR Master',
description: 'Administrative access for QR Master newsletter management. This area is restricted to authorized personnel only.',
robots: {
index: false,
follow: false,
},
alternates: {
canonical: 'https://www.qrmaster.net/newsletter',
},
};
export default function NewsletterPage() {
return <NewsletterClient />;
}
import React from 'react';
import type { Metadata } from 'next';
import NewsletterClient from './NewsletterClient';
export const metadata: Metadata = {
title: 'Newsletter Admin | QR Master',
description: 'Administrative access for QR Master newsletter management. This area is restricted to authorized personnel only.',
robots: {
index: false,
follow: false,
},
alternates: {
canonical: 'https://www.qrmaster.net/newsletter',
},
};
export default function NewsletterPage() {
return <NewsletterClient />;
}

126
src/app/(main)/(marketing)/not-found.tsx
View File

@@ -1,63 +1,63 @@
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 Button */}
<div className="flex justify-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>
Back to Home
</Button>
</Link>
</div>
</div>
</div>
);
}
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 Button */}
<div className="flex justify-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>
Back to Home
</Button>
</Link>
</div>
</div>
</div>
);
}

146
src/app/(main)/(marketing)/page.tsx
View File

@@ -1,73 +1,73 @@
import React from 'react';
import type { Metadata } from 'next';
import SeoJsonLd from '@/components/SeoJsonLd';
import { organizationSchema, websiteSchema } from '@/lib/schema';
import HomePageClient from '@/components/marketing/HomePageClient';
function truncateAtWord(text: string, maxLength: number): string {
if (text.length <= maxLength) return text;
const truncated = text.slice(0, maxLength);
const lastSpace = truncated.lastIndexOf(' ');
return lastSpace > 0 ? truncated.slice(0, lastSpace) : truncated;
}
export async function generateMetadata(): Promise<Metadata> {
const title = truncateAtWord('QR Master: Dynamic QR Generator', 60);
const description = truncateAtWord(
'Create dynamic QR codes, track scans, and scale campaigns with secure analytics. Free advanced features, bulk generation, and custom branding available.',
160
);
return {
title,
description,
keywords: ['qr generator', 'free qr code generator', 'custom qr code generator', 'qr code maker', 'online qr code generator', 'dynamic qr code', 'qr code with logo'],
alternates: {
canonical: 'https://www.qrmaster.net/',
languages: {
'x-default': 'https://www.qrmaster.net/',
en: 'https://www.qrmaster.net/',
de: 'https://www.qrmaster.net/qr-code-erstellen',
},
},
openGraph: {
title,
description,
url: 'https://www.qrmaster.net/',
type: 'website',
},
twitter: {
title,
description,
},
};
}
export default function HomePage() {
return (
<>
<SeoJsonLd data={[organizationSchema(), websiteSchema()]} />
{/* Server-rendered SEO content for crawlers */}
<div className="sr-only" aria-hidden="false">
<p>
Create professional QR codes for your business with QR Master. Our dynamic QR code generator
lets you create trackable QR codes, edit destinations anytime, and view detailed analytics.
Perfect for restaurants, retail, events, and marketing campaigns.
</p>
<p>
Features include: Dynamic QR codes with real-time tracking, bulk QR code generation from Excel/CSV,
custom branding with colors and logos, advanced scan analytics showing device types and locations,
vCard QR codes for digital business cards, and restaurant menu QR codes.
</p>
<p>
Start free with 3 active dynamic QR codes and unlimited static codes. Upgrade to Pro for 50 codes
with advanced analytics, or Business for 500 codes with bulk creation and priority support.
</p>
</div>
<HomePageClient />
</>
);
}
import React from 'react';
import type { Metadata } from 'next';
import SeoJsonLd from '@/components/SeoJsonLd';
import { organizationSchema, websiteSchema } from '@/lib/schema';
import HomePageClient from '@/components/marketing/HomePageClient';
function truncateAtWord(text: string, maxLength: number): string {
if (text.length <= maxLength) return text;
const truncated = text.slice(0, maxLength);
const lastSpace = truncated.lastIndexOf(' ');
return lastSpace > 0 ? truncated.slice(0, lastSpace) : truncated;
}
export async function generateMetadata(): Promise<Metadata> {
const title = truncateAtWord('QR Master: Dynamic QR Generator', 60);
const description = truncateAtWord(
'Create dynamic QR codes, track scans, and scale campaigns with secure analytics. Free advanced features, bulk generation, and custom branding available.',
160
);
return {
title,
description,
keywords: ['qr generator', 'free qr code generator', 'custom qr code generator', 'qr code maker', 'online qr code generator', 'dynamic qr code', 'qr code with logo'],
alternates: {
canonical: 'https://www.qrmaster.net/',
languages: {
'x-default': 'https://www.qrmaster.net/',
en: 'https://www.qrmaster.net/',
de: 'https://www.qrmaster.net/qr-code-erstellen',
},
},
openGraph: {
title,
description,
url: 'https://www.qrmaster.net/',
type: 'website',
},
twitter: {
title,
description,
},
};
}
export default function HomePage() {
return (
<>
<SeoJsonLd data={[websiteSchema()]} />
{/* Server-rendered SEO content for crawlers */}
<div className="sr-only" aria-hidden="false">
<p>
Create professional QR codes for your business with QR Master. Our dynamic QR code generator
lets you create trackable QR codes, edit destinations anytime, and view detailed analytics.
Perfect for restaurants, retail, events, and marketing campaigns.
</p>
<p>
Features include: Dynamic QR codes with real-time tracking, bulk QR code generation from Excel/CSV,
custom branding with colors and logos, advanced scan analytics showing device types and locations,
vCard QR codes for digital business cards, and restaurant menu QR codes.
</p>
<p>
Start free with 3 active dynamic QR codes and unlimited static codes. Upgrade to Pro for 50 codes
with advanced analytics, or Business for 500 codes with bulk creation and priority support.
</p>
</div>
<HomePageClient />
</>
);
}

538
src/app/(main)/(marketing)/pricing/PricingClient.tsx
View File

@@ -1,269 +1,269 @@
'use client';
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 { showToast } from '@/components/ui/Toast';
import { useRouter } from 'next/navigation';
import { BillingToggle } from '@/components/ui/BillingToggle';
import { ObfuscatedMailto } from '@/components/ui/ObfuscatedMailto';
export default function PricingPage() {
const router = useRouter();
const [loading, setLoading] = useState<string | null>(null);
const [currentPlan, setCurrentPlan] = useState<string>('FREE');
const [currentInterval, setCurrentInterval] = useState<'month' | 'year' | null>(null);
const [billingPeriod, setBillingPeriod] = useState<'month' | 'year'>('month');
useEffect(() => {
// Fetch current user plan
const fetchUserPlan = async () => {
try {
const response = await fetch('/api/user/plan');
if (response.ok) {
const data = await response.json();
setCurrentPlan(data.plan || 'FREE');
setCurrentInterval(data.interval || null);
}
} catch (error) {
console.error('Error fetching user plan:', error);
}
};
fetchUserPlan();
}, []);
const handleUpgrade = async (plan: 'PRO' | 'BUSINESS') => {
setLoading(plan);
try {
const response = await fetch('/api/stripe/create-checkout-session', {
method: 'POST',
headers: {
'Content-Type': 'application/json',
},
body: JSON.stringify({
plan,
billingInterval: billingPeriod === 'month' ? 'month' : 'year',
}),
});
if (!response.ok) {
throw new Error('Failed to create checkout session');
}
const { url } = await response.json();
window.location.href = url;
} catch (error) {
console.error('Error creating checkout session:', error);
showToast('Failed to start checkout. Please try again.', 'error');
setLoading(null);
}
};
const handleDowngrade = async () => {
// Show confirmation dialog
const confirmed = window.confirm(
'Are you sure you want to downgrade to the Free plan? Your subscription will be canceled immediately and you will lose access to premium features.'
);
if (!confirmed) {
return;
}
setLoading('FREE');
try {
const response = await fetch('/api/stripe/cancel-subscription', {
method: 'POST',
headers: {
'Content-Type': 'application/json',
},
});
if (!response.ok) {
const error = await response.json();
throw new Error(error.error || 'Failed to cancel subscription');
}
showToast('Successfully downgraded to Free plan', 'success');
// Refresh to update the plan
setTimeout(() => {
window.location.reload();
}, 1500);
} catch (error: any) {
console.error('Error canceling subscription:', error);
showToast(error.message || 'Failed to downgrade. Please try again.', 'error');
setLoading(null);
}
};
// Helper function to check if this is the user's exact current plan (plan + interval)
const isCurrentPlanWithInterval = (planType: string, interval: 'month' | 'year') => {
return currentPlan === planType && currentInterval === interval;
};
// Helper function to check if user has this plan but different interval
const hasPlanDifferentInterval = (planType: string) => {
return currentPlan === planType && currentInterval && currentInterval !== billingPeriod;
};
const selectedInterval = billingPeriod === 'month' ? 'month' : 'year';
const plans = [
{
key: 'free',
name: 'Free',
price: '€0',
period: 'forever',
showDiscount: false,
features: [
'3 active dynamic QR codes (8 types available)',
'Unlimited static QR codes',
'Basic scan tracking',
'Standard QR design templates',
'Download as SVG/PNG',
],
buttonText: currentPlan === 'FREE' ? 'Current Plan' : 'Downgrade to Free',
buttonVariant: 'outline' as const,
disabled: currentPlan === 'FREE',
popular: false,
onDowngrade: handleDowngrade,
},
{
key: 'pro',
name: 'Pro',
price: billingPeriod === 'month' ? '€9' : '€90',
period: billingPeriod === 'month' ? 'per month' : 'per year',
showDiscount: billingPeriod === 'year',
features: [
'50 dynamic QR codes',
'Unlimited static QR codes',
'Advanced analytics (scans, devices, locations)',
'Custom branding (colors & logos)',
],
buttonText: isCurrentPlanWithInterval('PRO', selectedInterval)
? 'Current Plan'
: hasPlanDifferentInterval('PRO')
? `Switch to ${billingPeriod === 'month' ? 'Monthly' : 'Yearly'}`
: 'Upgrade to Pro',
buttonVariant: 'primary' as const,
disabled: isCurrentPlanWithInterval('PRO', selectedInterval),
popular: true,
onUpgrade: () => handleUpgrade('PRO'),
},
{
key: 'business',
name: 'Business',
price: billingPeriod === 'month' ? '€29' : '€290',
period: billingPeriod === 'month' ? 'per month' : 'per year',
showDiscount: billingPeriod === 'year',
features: [
'500 dynamic QR codes',
'Unlimited static QR codes',
'Everything from Pro',
'Bulk QR Creation (up to 1,000)',
'Priority email support',
'Advanced tracking & insights',
],
buttonText: isCurrentPlanWithInterval('BUSINESS', selectedInterval)
? 'Current Plan'
: hasPlanDifferentInterval('BUSINESS')
? `Switch to ${billingPeriod === 'month' ? 'Monthly' : 'Yearly'}`
: 'Upgrade to Business',
buttonVariant: 'primary' as const,
disabled: isCurrentPlanWithInterval('BUSINESS', selectedInterval),
popular: false,
onUpgrade: () => handleUpgrade('BUSINESS'),
},
];
return (
<div className="container mx-auto px-4 py-12">
<div className="text-center mb-12">
<h1 className="text-4xl font-bold text-gray-900 mb-4">
Choose Your Plan
</h1>
<p className="text-xl text-gray-600">
Select the perfect plan for your QR code needs
</p>
</div>
<div className="flex justify-center mb-8">
<BillingToggle value={billingPeriod} onChange={setBillingPeriod} />
</div>
<div className="grid md:grid-cols-3 gap-8 max-w-6xl mx-auto">
{plans.map((plan) => (
<Card
key={plan.key}
className={plan.popular ? 'border-primary-500 shadow-xl relative' : ''}
>
{plan.popular && (
<div className="absolute -top-4 left-1/2 transform -translate-x-1/2">
<Badge variant="info" className="px-3 py-1">
Most Popular
</Badge>
</div>
)}
<CardHeader className="text-center pb-8">
<CardTitle className="text-2xl mb-4">
{plan.name}
</CardTitle>
<div className="flex flex-col items-center">
<div className="flex items-baseline justify-center">
<span className="text-4xl font-bold">
{plan.price}
</span>
<span className="text-gray-600 ml-2">
{plan.period}
</span>
</div>
{plan.showDiscount && (
<Badge variant="success" className="mt-2">
Save 16%
</Badge>
)}
</div>
</CardHeader>
<CardContent className="space-y-6">
<ul className="space-y-3">
{plan.features.map((feature: string, index: number) => (
<li key={index} className="flex items-start space-x-3">
<svg className="w-5 h-5 text-success-500 flex-shrink-0 mt-0.5" 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">{feature}</span>
</li>
))}
</ul>
<Button
variant={plan.buttonVariant}
className="w-full"
size="lg"
disabled={plan.disabled || loading === plan.key.toUpperCase()}
onClick={plan.key === 'free' ? (plan as any).onDowngrade : (plan as any).onUpgrade}
>
{loading === plan.key.toUpperCase() ? 'Processing...' : plan.buttonText}
</Button>
</CardContent>
</Card>
))}
</div>
<div className="text-center mt-12">
<p className="text-gray-600">
All plans include unlimited static QR codes and basic customization.
</p>
<p className="text-gray-600 mt-2">
Need help choosing? <ObfuscatedMailto email="support@qrmaster.net" className="text-primary-600 hover:text-primary-700 underline">Contact our team</ObfuscatedMailto>
</p>
</div>
</div>
);
}
'use client';
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 { showToast } from '@/components/ui/Toast';
import { useRouter } from 'next/navigation';
import { BillingToggle } from '@/components/ui/BillingToggle';
import { ObfuscatedMailto } from '@/components/ui/ObfuscatedMailto';
export default function PricingPage() {
const router = useRouter();
const [loading, setLoading] = useState<string | null>(null);
const [currentPlan, setCurrentPlan] = useState<string>('FREE');
const [currentInterval, setCurrentInterval] = useState<'month' | 'year' | null>(null);
const [billingPeriod, setBillingPeriod] = useState<'month' | 'year'>('month');
useEffect(() => {
// Fetch current user plan
const fetchUserPlan = async () => {
try {
const response = await fetch('/api/user/plan');
if (response.ok) {
const data = await response.json();
setCurrentPlan(data.plan || 'FREE');
setCurrentInterval(data.interval || null);
}
} catch (error) {
console.error('Error fetching user plan:', error);
}
};
fetchUserPlan();
}, []);
const handleUpgrade = async (plan: 'PRO' | 'BUSINESS') => {
setLoading(plan);
try {
const response = await fetch('/api/stripe/create-checkout-session', {
method: 'POST',
headers: {
'Content-Type': 'application/json',
},
body: JSON.stringify({
plan,
billingInterval: billingPeriod === 'month' ? 'month' : 'year',
}),
});
if (!response.ok) {
throw new Error('Failed to create checkout session');
}
const { url } = await response.json();
window.location.href = url;
} catch (error) {
console.error('Error creating checkout session:', error);
showToast('Failed to start checkout. Please try again.', 'error');
setLoading(null);
}
};
const handleDowngrade = async () => {
// Show confirmation dialog
const confirmed = window.confirm(
'Are you sure you want to downgrade to the Free plan? Your subscription will be canceled immediately and you will lose access to premium features.'
);
if (!confirmed) {
return;
}
setLoading('FREE');
try {
const response = await fetch('/api/stripe/cancel-subscription', {
method: 'POST',
headers: {
'Content-Type': 'application/json',
},
});
if (!response.ok) {
const error = await response.json();
throw new Error(error.error || 'Failed to cancel subscription');
}
showToast('Successfully downgraded to Free plan', 'success');
// Refresh to update the plan
setTimeout(() => {
window.location.reload();
}, 1500);
} catch (error: any) {
console.error('Error canceling subscription:', error);
showToast(error.message || 'Failed to downgrade. Please try again.', 'error');
setLoading(null);
}
};
// Helper function to check if this is the user's exact current plan (plan + interval)
const isCurrentPlanWithInterval = (planType: string, interval: 'month' | 'year') => {
return currentPlan === planType && currentInterval === interval;
};
// Helper function to check if user has this plan but different interval
const hasPlanDifferentInterval = (planType: string) => {
return currentPlan === planType && currentInterval && currentInterval !== billingPeriod;
};
const selectedInterval = billingPeriod === 'month' ? 'month' : 'year';
const plans = [
{
key: 'free',
name: 'Free',
price: '€0',
period: 'forever',
showDiscount: false,
features: [
'3 active dynamic QR codes (8 types available)',
'Unlimited static QR codes',
'Basic scan tracking',
'Standard QR design templates',
'Download as SVG/PNG',
],
buttonText: currentPlan === 'FREE' ? 'Current Plan' : 'Downgrade to Free',
buttonVariant: 'outline' as const,
disabled: currentPlan === 'FREE',
popular: false,
onDowngrade: handleDowngrade,
},
{
key: 'pro',
name: 'Pro',
price: billingPeriod === 'month' ? '€9' : '€90',
period: billingPeriod === 'month' ? 'per month' : 'per year',
showDiscount: billingPeriod === 'year',
features: [
'50 dynamic QR codes',
'Unlimited static QR codes',
'Advanced analytics (scans, devices, locations)',
'Custom branding (colors & logos)',
],
buttonText: isCurrentPlanWithInterval('PRO', selectedInterval)
? 'Current Plan'
: hasPlanDifferentInterval('PRO')
? `Switch to ${billingPeriod === 'month' ? 'Monthly' : 'Yearly'}`
: 'Upgrade to Pro',
buttonVariant: 'primary' as const,
disabled: isCurrentPlanWithInterval('PRO', selectedInterval),
popular: true,
onUpgrade: () => handleUpgrade('PRO'),
},
{
key: 'business',
name: 'Business',
price: billingPeriod === 'month' ? '€29' : '€290',
period: billingPeriod === 'month' ? 'per month' : 'per year',
showDiscount: billingPeriod === 'year',
features: [
'500 dynamic QR codes',
'Unlimited static QR codes',
'Everything from Pro',
'Bulk QR Creation (up to 1,000)',
'Priority email support',
'Advanced tracking & insights',
],
buttonText: isCurrentPlanWithInterval('BUSINESS', selectedInterval)
? 'Current Plan'
: hasPlanDifferentInterval('BUSINESS')
? `Switch to ${billingPeriod === 'month' ? 'Monthly' : 'Yearly'}`
: 'Upgrade to Business',
buttonVariant: 'primary' as const,
disabled: isCurrentPlanWithInterval('BUSINESS', selectedInterval),
popular: false,
onUpgrade: () => handleUpgrade('BUSINESS'),
},
];
return (
<div className="container mx-auto px-4 py-12">
<div className="text-center mb-12">
<h1 className="text-4xl font-bold text-gray-900 mb-4">
Choose Your Plan
</h1>
<p className="text-xl text-gray-600">
Select the perfect plan for your QR code needs
</p>
</div>
<div className="flex justify-center mb-8">
<BillingToggle value={billingPeriod} onChange={setBillingPeriod} />
</div>
<div className="grid md:grid-cols-3 gap-8 max-w-6xl mx-auto">
{plans.map((plan) => (
<Card
key={plan.key}
className={plan.popular ? 'border-primary-500 shadow-xl relative' : ''}
>
{plan.popular && (
<div className="absolute -top-4 left-1/2 transform -translate-x-1/2">
<Badge variant="info" className="px-3 py-1">
Most Popular
</Badge>
</div>
)}
<CardHeader className="text-center pb-8">
<CardTitle className="text-2xl mb-4">
{plan.name}
</CardTitle>
<div className="flex flex-col items-center">
<div className="flex items-baseline justify-center">
<span className="text-4xl font-bold">
{plan.price}
</span>
<span className="text-gray-600 ml-2">
{plan.period}
</span>
</div>
{plan.showDiscount && (
<Badge variant="success" className="mt-2">
Save 16%
</Badge>
)}
</div>
</CardHeader>
<CardContent className="space-y-6">
<ul className="space-y-3">
{plan.features.map((feature: string, index: number) => (
<li key={index} className="flex items-start space-x-3">
<svg className="w-5 h-5 text-success-500 flex-shrink-0 mt-0.5" 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">{feature}</span>
</li>
))}
</ul>
<Button
variant={plan.buttonVariant}
className="w-full"
size="lg"
disabled={plan.disabled || loading === plan.key.toUpperCase()}
onClick={plan.key === 'free' ? (plan as any).onDowngrade : (plan as any).onUpgrade}
>
{loading === plan.key.toUpperCase() ? 'Processing...' : plan.buttonText}
</Button>
</CardContent>
</Card>
))}
</div>
<div className="text-center mt-12">
<p className="text-gray-600">
All plans include unlimited static QR codes and basic customization.
</p>
<p className="text-gray-600 mt-2">
Need help choosing? <ObfuscatedMailto email="support@qrmaster.net" className="text-primary-600 hover:text-primary-700 underline">Contact our team</ObfuscatedMailto>
</p>
</div>
</div>
);
}

88
src/app/(main)/(marketing)/pricing/page.tsx
View File

@@ -1,44 +1,44 @@
import React from 'react';
import type { Metadata } from 'next';
import PricingClient from './PricingClient';
export const metadata: Metadata = {
title: {
absolute: 'Pricing Plans | QR Master'
},
description: 'Choose the perfect QR code plan for your needs. Free, Pro, and Business plans with dynamic QR codes, analytics, bulk generation, and custom branding.',
alternates: {
canonical: 'https://www.qrmaster.net/pricing',
},
robots: {
index: true,
follow: true,
},
openGraph: {
title: 'Pricing Plans | QR Master',
description: 'Choose the perfect QR code plan for your needs.',
url: 'https://www.qrmaster.net/pricing',
type: 'website',
images: [
{
url: 'https://www.qrmaster.net/og-image.png',
width: 1200,
height: 630,
alt: 'QR Master Pricing Plans',
},
],
},
};
export default function PricingPage() {
return (
<>
<div className="sr-only">
<h2>Compare our plans</h2>
<p>Find the best QR code solution for your business. From free personal tiers to enterprise-grade dynamic code management.</p>
</div>
<PricingClient />
</>
);
}
import React from 'react';
import type { Metadata } from 'next';
import PricingClient from './PricingClient';
export const metadata: Metadata = {
title: {
absolute: 'Pricing Plans | QR Master'
},
description: 'Choose the perfect QR code plan for your needs. Free, Pro, and Business plans with dynamic QR codes, analytics, bulk generation, and custom branding.',
alternates: {
canonical: 'https://www.qrmaster.net/pricing',
},
robots: {
index: true,
follow: true,
},
openGraph: {
title: 'Pricing Plans | QR Master',
description: 'Choose the perfect QR code plan for your needs.',
url: 'https://www.qrmaster.net/pricing',
type: 'website',
images: [
{
url: 'https://www.qrmaster.net/og-image.png',
width: 1200,
height: 630,
alt: 'QR Master Pricing Plans',
},
],
},
};
export default function PricingPage() {
return (
<>
<div className="sr-only">
<h2>Compare our plans</h2>
<p>Find the best QR code solution for your business. From free personal tiers to enterprise-grade dynamic code management.</p>
</div>
<PricingClient />
</>
);
}

26
src/app/(main)/(marketing)/privacy/PrivacyEmailLink.tsx
View File

@@ -1,13 +1,13 @@
'use client';
import React from 'react';
import { ObfuscatedMailto } from '@/components/ui/ObfuscatedMailto';
export function PrivacyEmailLink() {
return (
<ObfuscatedMailto
email="support@qrmaster.net"
className="text-primary-600 hover:text-primary-700"
/>
);
}
'use client';
import React from 'react';
import { ObfuscatedMailto } from '@/components/ui/ObfuscatedMailto';
export function PrivacyEmailLink() {
return (
<ObfuscatedMailto
email="support@qrmaster.net"
className="text-primary-600 hover:text-primary-700"
/>
);
}

264
src/app/(main)/(marketing)/privacy/page.tsx
View File

@@ -1,132 +1,132 @@
import React from 'react';
import Link from 'next/link';
import { ObfuscatedMailto } from '@/components/ui/ObfuscatedMailto';
export const metadata = {
title: 'Privacy Policy | QR Master',
description: 'Read our Privacy Policy to understand how QR Master collects, uses, and protects your data. We are GDPR compliant and committed to user privacy and security.',
};
export default function PrivacyPage() {
return (
<div className="min-h-screen bg-white py-12">
<div className="container mx-auto px-4 sm:px-6 lg:px-8 max-w-4xl">
<div className="mb-8">
<Link href="/" className="text-primary-600 hover:text-primary-700 font-medium">
← Back to Home
</Link>
</div>
<h1 className="text-4xl font-bold text-gray-900 mb-4">Privacy Policy</h1>
<p className="text-gray-600 mb-8">Last updated: January 2025</p>
<div className="prose prose-lg max-w-none">
<section className="mb-8">
<h2 className="text-2xl font-bold text-gray-900 mb-4">1. Introduction</h2>
<p className="text-gray-700 mb-4">
Welcome to QR Master ("we," "our," or "us"). We respect your privacy and are committed to protecting your personal data.
This privacy policy explains how we collect, use, and protect your information when you use our services.
</p>
<p className="text-gray-700 mb-4">
We implement appropriate security measures including secure HTTPS transmission, password hashing, database access controls,
and CSRF protection to keep your data safe.
</p>
</section>
<section className="mb-8">
<h2 className="text-2xl font-bold text-gray-900 mb-4">2. Information We Collect</h2>
<h3 className="text-xl font-semibold text-gray-900 mb-3">Information You Provide</h3>
<ul className="list-disc pl-6 mb-4 text-gray-700 space-y-2">
<li><strong>Account Information:</strong> Name, email address, and password</li>
<li><strong>Payment Information:</strong> Processed securely through Stripe (we do not store credit card information)</li>
<li><strong>QR Code Content:</strong> URLs, text, and customization settings for your QR codes</li>
</ul>
<h3 className="text-xl font-semibold text-gray-900 mb-3">Information Collected Automatically</h3>
<ul className="list-disc pl-6 mb-4 text-gray-700 space-y-2">
<li><strong>Usage Data:</strong> QR code scans and analytics</li>
<li><strong>Technical Data:</strong> IP address, browser type, and device information</li>
<li><strong>Cookies:</strong> Essential cookies for authentication and optional analytics cookies (PostHog) with your consent</li>
</ul>
</section>
<section className="mb-8">
<h2 className="text-2xl font-bold text-gray-900 mb-4">3. How We Use Your Information</h2>
<p className="text-gray-700 mb-4">We use your data to:</p>
<ul className="list-disc pl-6 mb-4 text-gray-700 space-y-2">
<li>Provide and maintain our QR code services</li>
<li>Process payments and manage subscriptions</li>
<li>Provide customer support</li>
<li>Improve our services and develop new features</li>
<li>Detect and prevent fraud</li>
</ul>
<p className="text-gray-700 mb-4">
We retain your data while your account is active. Upon account deletion, most data is removed immediately,
though some may be retained for legal compliance. Aggregated, anonymized analytics may be kept indefinitely.
</p>
</section>
<section className="mb-8">
<h2 className="text-2xl font-bold text-gray-900 mb-4">4. Data Sharing</h2>
<p className="text-gray-700 mb-4">We may share your data with:</p>
<ul className="list-disc pl-6 mb-4 text-gray-700 space-y-2">
<li><strong>Stripe:</strong> Payment processing</li>
<li><strong>PostHog:</strong> Analytics (only with your consent, respects Do Not Track)</li>
<li><strong>Vercel:</strong> Cloud hosting provider</li>
<li><strong>Legal Requirements:</strong> When required by law</li>
</ul>
<p className="text-gray-700 mb-4">
We do not sell your personal data. Analytics are only activated if you accept optional cookies.
</p>
</section>
<section className="mb-8">
<h2 className="text-2xl font-bold text-gray-900 mb-4">5. Your Rights (GDPR)</h2>
<p className="text-gray-700 mb-4">You have the right to:</p>
<ul className="list-disc pl-6 mb-4 text-gray-700 space-y-2">
<li><strong>Access:</strong> Request a copy of your personal data</li>
<li><strong>Rectification:</strong> Correct inaccurate data (update in account settings)</li>
<li><strong>Erasure:</strong> Delete your data (account deletion available in settings)</li>
<li><strong>Data Portability:</strong> Receive your data in a portable format</li>
<li><strong>Object:</strong> Object to processing based on legitimate interests</li>
<li><strong>Withdraw Consent:</strong> Withdraw cookie consent at any time</li>
</ul>
<p className="text-gray-700 mb-4">
To exercise these rights, contact us at{' '}
<a href="mailto:support@qrmaster.net" className="text-primary-600 hover:text-primary-700">
support@qrmaster.net
</a>
</p>
<p className="text-gray-700 mb-4">
Our service is for users 16 years and older. If you're in the EEA and have concerns,
you may lodge a complaint with your local data protection authority.
</p>
</section>
<section className="mb-8">
<h2 className="text-2xl font-bold text-gray-900 mb-4">6. Contact Us</h2>
<p className="text-gray-700 mb-4">
If you have questions about this privacy policy, please contact us:
</p>
<div className="bg-gray-50 p-6 rounded-lg">
<p className="text-gray-700 mb-2">
<strong>Email:</strong>{' '}
<ObfuscatedMailto email="support@qrmaster.net" className="text-primary-600 hover:text-primary-700" />
</p>
<p className="text-gray-700 mb-2"><strong>Website:</strong> <a href="/" className="text-primary-600 hover:text-primary-700">qrmaster.net</a></p>
</div>
</section>
</div>
<div className="mt-12 pt-8 border-t border-gray-200">
<p className="text-gray-600 text-center">
<Link href="/" className="text-primary-600 hover:text-primary-700">
Back to Home
</Link>
</p>
</div>
</div>
</div>
);
}
import React from 'react';
import Link from 'next/link';
import { ObfuscatedMailto } from '@/components/ui/ObfuscatedMailto';
export const metadata = {
title: 'Privacy Policy | QR Master',
description: 'Read our Privacy Policy to understand how QR Master collects, uses, and protects your data. We are GDPR compliant and committed to user privacy and security.',
};
export default function PrivacyPage() {
return (
<div className="min-h-screen bg-white py-12">
<div className="container mx-auto px-4 sm:px-6 lg:px-8 max-w-4xl">
<div className="mb-8">
<Link href="/" className="text-primary-600 hover:text-primary-700 font-medium">
← Back to Home
</Link>
</div>
<h1 className="text-4xl font-bold text-gray-900 mb-4">Privacy Policy</h1>
<p className="text-gray-600 mb-8">Last updated: January 2025</p>
<div className="prose prose-lg max-w-none">
<section className="mb-8">
<h2 className="text-2xl font-bold text-gray-900 mb-4">1. Introduction</h2>
<p className="text-gray-700 mb-4">
Welcome to QR Master ("we," "our," or "us"). We respect your privacy and are committed to protecting your personal data.
This privacy policy explains how we collect, use, and protect your information when you use our services.
</p>
<p className="text-gray-700 mb-4">
We implement appropriate security measures including secure HTTPS transmission, password hashing, database access controls,
and CSRF protection to keep your data safe.
</p>
</section>
<section className="mb-8">
<h2 className="text-2xl font-bold text-gray-900 mb-4">2. Information We Collect</h2>
<h3 className="text-xl font-semibold text-gray-900 mb-3">Information You Provide</h3>
<ul className="list-disc pl-6 mb-4 text-gray-700 space-y-2">
<li><strong>Account Information:</strong> Name, email address, and password</li>
<li><strong>Payment Information:</strong> Processed securely through Stripe (we do not store credit card information)</li>
<li><strong>QR Code Content:</strong> URLs, text, and customization settings for your QR codes</li>
</ul>
<h3 className="text-xl font-semibold text-gray-900 mb-3">Information Collected Automatically</h3>
<ul className="list-disc pl-6 mb-4 text-gray-700 space-y-2">
<li><strong>Usage Data:</strong> QR code scans and analytics</li>
<li><strong>Technical Data:</strong> IP address, browser type, and device information</li>
<li><strong>Cookies:</strong> Essential cookies for authentication and optional analytics cookies (PostHog) with your consent</li>
</ul>
</section>
<section className="mb-8">
<h2 className="text-2xl font-bold text-gray-900 mb-4">3. How We Use Your Information</h2>
<p className="text-gray-700 mb-4">We use your data to:</p>
<ul className="list-disc pl-6 mb-4 text-gray-700 space-y-2">
<li>Provide and maintain our QR code services</li>
<li>Process payments and manage subscriptions</li>
<li>Provide customer support</li>
<li>Improve our services and develop new features</li>
<li>Detect and prevent fraud</li>
</ul>
<p className="text-gray-700 mb-4">
We retain your data while your account is active. Upon account deletion, most data is removed immediately,
though some may be retained for legal compliance. Aggregated, anonymized analytics may be kept indefinitely.
</p>
</section>
<section className="mb-8">
<h2 className="text-2xl font-bold text-gray-900 mb-4">4. Data Sharing</h2>
<p className="text-gray-700 mb-4">We may share your data with:</p>
<ul className="list-disc pl-6 mb-4 text-gray-700 space-y-2">
<li><strong>Stripe:</strong> Payment processing</li>
<li><strong>PostHog:</strong> Analytics (only with your consent, respects Do Not Track)</li>
<li><strong>Vercel:</strong> Cloud hosting provider</li>
<li><strong>Legal Requirements:</strong> When required by law</li>
</ul>
<p className="text-gray-700 mb-4">
We do not sell your personal data. Analytics are only activated if you accept optional cookies.
</p>
</section>
<section className="mb-8">
<h2 className="text-2xl font-bold text-gray-900 mb-4">5. Your Rights (GDPR)</h2>
<p className="text-gray-700 mb-4">You have the right to:</p>
<ul className="list-disc pl-6 mb-4 text-gray-700 space-y-2">
<li><strong>Access:</strong> Request a copy of your personal data</li>
<li><strong>Rectification:</strong> Correct inaccurate data (update in account settings)</li>
<li><strong>Erasure:</strong> Delete your data (account deletion available in settings)</li>
<li><strong>Data Portability:</strong> Receive your data in a portable format</li>
<li><strong>Object:</strong> Object to processing based on legitimate interests</li>
<li><strong>Withdraw Consent:</strong> Withdraw cookie consent at any time</li>
</ul>
<p className="text-gray-700 mb-4">
To exercise these rights, contact us at{' '}
<a href="mailto:support@qrmaster.net" className="text-primary-600 hover:text-primary-700">
support@qrmaster.net
</a>
</p>
<p className="text-gray-700 mb-4">
Our service is for users 16 years and older. If you're in the EEA and have concerns,
you may lodge a complaint with your local data protection authority.
</p>
</section>
<section className="mb-8">
<h2 className="text-2xl font-bold text-gray-900 mb-4">6. Contact Us</h2>
<p className="text-gray-700 mb-4">
If you have questions about this privacy policy, please contact us:
</p>
<div className="bg-gray-50 p-6 rounded-lg">
<p className="text-gray-700 mb-2">
<strong>Email:</strong>{' '}
<ObfuscatedMailto email="support@qrmaster.net" className="text-primary-600 hover:text-primary-700" />
</p>
<p className="text-gray-700 mb-2"><strong>Website:</strong> <a href="/" className="text-primary-600 hover:text-primary-700">qrmaster.net</a></p>
</div>
</section>
</div>
<div className="mt-12 pt-8 border-t border-gray-200">
<p className="text-gray-600 text-center">
<Link href="/" className="text-primary-600 hover:text-primary-700">
Back to Home
</Link>
</p>
</div>
</div>
</div>
);
}

796
src/app/(main)/(marketing)/qr-code-tracking/page.tsx
View File

@@ -1,400 +1,396 @@
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';
export const metadata: Metadata = {
title: {
absolute: 'QR Code Tracking & Analytics - Track Every Scan',
},
description: 'Track QR code scans with real-time analytics. Monitor location, device, time, and user behavior. Free QR code tracking software with detailed reports.',
keywords: 'qr code tracking, qr code analytics, track qr scans, qr code statistics, free qr tracking, qr code monitoring',
alternates: {
canonical: 'https://www.qrmaster.net/qr-code-tracking',
languages: {
'x-default': 'https://www.qrmaster.net/qr-code-tracking',
en: 'https://www.qrmaster.net/qr-code-tracking',
},
},
openGraph: {
title: 'QR Code Tracking & Analytics - Track Every Scan',
description: 'Track QR code scans with real-time analytics. Monitor location, device, time, and user behavior.',
url: 'https://www.qrmaster.net/qr-code-tracking',
type: 'website',
},
twitter: {
title: 'QR Code Tracking & Analytics - Track Every Scan',
description: 'Track QR code scans with real-time analytics. Monitor location, device, time, and user behavior.',
},
};
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 },
];
const softwareSchema = {
'@context': 'https://schema.org',
'@type': 'SoftwareApplication',
'@id': 'https://www.qrmaster.net/qr-code-tracking#software',
name: 'QR Master - QR Code Tracking & Analytics',
applicationCategory: 'BusinessApplication',
operatingSystem: 'Web Browser, iOS, Android',
offers: {
'@type': 'Offer',
price: '0',
priceCurrency: 'USD',
availability: 'https://schema.org/InStock',
},
aggregateRating: {
'@type': 'AggregateRating',
ratingValue: '4.8',
ratingCount: '1250',
},
description: 'Track QR code scans with real-time analytics. Monitor location, device, time, and user behavior with our free QR code tracking software.',
features: [
'Real-time analytics dashboard',
'Location tracking by country and city',
'Device detection (iOS, Android, Desktop)',
'Time-based scan reports',
'Unique vs total scan tracking',
'Campaign performance metrics',
'Unlimited scans',
'Export detailed reports',
],
};
const howToSchema = {
'@context': 'https://schema.org',
'@type': 'HowTo',
'@id': 'https://www.qrmaster.net/qr-code-tracking#howto',
name: 'How to Track QR Code Scans',
description: 'Learn how to track and analyze QR code scans with real-time analytics',
totalTime: 'PT5M',
step: [
{
'@type': 'HowToStep',
position: 1,
name: 'Create QR Code',
text: 'Sign up for free and create a dynamic QR code with tracking enabled',
url: 'https://www.qrmaster.net/signup',
},
{
'@type': 'HowToStep',
position: 2,
name: 'Deploy QR Code',
text: 'Download and place your QR code on marketing materials, products, or digital platforms',
},
{
'@type': 'HowToStep',
position: 3,
name: 'Monitor Analytics',
text: 'View real-time scan data including location, device, and time patterns in your dashboard',
url: 'https://www.qrmaster.net/analytics',
},
{
'@type': 'HowToStep',
position: 4,
name: 'Optimize Campaigns',
text: 'Use insights to optimize placement, timing, and targeting of your QR code campaigns',
},
],
};
const breadcrumbItems: BreadcrumbItem[] = [
{ name: 'Home', url: '/' },
{ name: 'QR Code Tracking', url: '/qr-code-tracking' },
];
return (
<>
<SeoJsonLd data={[softwareSchema, howToSchema, breadcrumbSchema(breadcrumbItems)]} />
<div className="min-h-screen bg-white">
{/* Hero Section */}
<section className="relative overflow-hidden bg-gradient-to-br from-blue-50 via-white to-purple-50 py-20">
<div className="container mx-auto px-4 sm:px-6 lg:px-8 max-w-7xl">
<Breadcrumbs items={breadcrumbItems} />
<div className="grid lg:grid-cols-2 gap-12 items-center">
<div className="space-y-8">
<div className="inline-flex items-center space-x-2 bg-blue-100 text-blue-800 px-4 py-2 rounded-full text-sm font-semibold">
<span>📊</span>
<span>Free QR Code Tracking</span>
</div>
<h1 className="text-5xl lg:text-6xl font-bold text-gray-900 leading-tight">
Track Every QR Code Scan with Powerful Analytics
</h1>
<p className="text-xl text-gray-600 leading-relaxed">
Monitor your QR code performance in real-time. Get detailed insights on location, device, time, and user behavior. Make data-driven decisions with our free tracking software.
</p>
<div className="flex flex-col sm:flex-row gap-4">
<Link href="/signup">
<Button size="lg" className="text-lg px-8 py-4 w-full sm:w-auto">
Start Tracking Free
</Button>
</Link>
<Link href="/signup">
<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>
</>
);
}
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';
export const metadata: Metadata = {
title: {
absolute: 'QR Code Tracking & Analytics - Track Every Scan',
},
description: 'Track QR code scans with real-time analytics. Monitor location, device, time, and user behavior. Free QR code tracking software with detailed reports.',
keywords: 'qr code tracking, qr code analytics, track qr scans, qr code statistics, free qr tracking, qr code monitoring',
alternates: {
canonical: 'https://www.qrmaster.net/qr-code-tracking',
languages: {
'x-default': 'https://www.qrmaster.net/qr-code-tracking',
en: 'https://www.qrmaster.net/qr-code-tracking',
},
},
openGraph: {
title: 'QR Code Tracking & Analytics - Track Every Scan',
description: 'Track QR code scans with real-time analytics. Monitor location, device, time, and user behavior.',
url: 'https://www.qrmaster.net/qr-code-tracking',
type: 'website',
},
twitter: {
title: 'QR Code Tracking & Analytics - Track Every Scan',
description: 'Track QR code scans with real-time analytics. Monitor location, device, time, and user behavior.',
},
};
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 },
];
const softwareSchema = {
'@context': 'https://schema.org',
'@type': 'SoftwareApplication',
'@id': 'https://www.qrmaster.net/qr-code-tracking#software',
name: 'QR Master - QR Code Tracking & Analytics',
applicationCategory: 'BusinessApplication',
operatingSystem: 'Web Browser, iOS, Android',
offers: {
'@type': 'Offer',
price: '0',
priceCurrency: 'USD',
availability: 'https://schema.org/InStock',
},
description: 'Track QR code scans with real-time analytics. Monitor location, device, time, and user behavior with our free QR code tracking software.',
features: [
'Real-time analytics dashboard',
'Location tracking by country and city',
'Device detection (iOS, Android, Desktop)',
'Time-based scan reports',
'Unique vs total scan tracking',
'Campaign performance metrics',
'Unlimited scans',
'Export detailed reports',
],
};
const howToSchema = {
'@context': 'https://schema.org',
'@type': 'HowTo',
'@id': 'https://www.qrmaster.net/qr-code-tracking#howto',
name: 'How to Track QR Code Scans',
description: 'Learn how to track and analyze QR code scans with real-time analytics',
totalTime: 'PT5M',
step: [
{
'@type': 'HowToStep',
position: 1,
name: 'Create QR Code',
text: 'Sign up for free and create a dynamic QR code with tracking enabled',
url: 'https://www.qrmaster.net/signup',
},
{
'@type': 'HowToStep',
position: 2,
name: 'Deploy QR Code',
text: 'Download and place your QR code on marketing materials, products, or digital platforms',
},
{
'@type': 'HowToStep',
position: 3,
name: 'Monitor Analytics',
text: 'View real-time scan data including location, device, and time patterns in your dashboard',
url: 'https://www.qrmaster.net/analytics',
},
{
'@type': 'HowToStep',
position: 4,
name: 'Optimize Campaigns',
text: 'Use insights to optimize placement, timing, and targeting of your QR code campaigns',
},
],
};
const breadcrumbItems: BreadcrumbItem[] = [
{ name: 'Home', url: '/' },
{ name: 'QR Code Tracking', url: '/qr-code-tracking' },
];
return (
<>
<SeoJsonLd data={[softwareSchema, howToSchema, breadcrumbSchema(breadcrumbItems)]} />
<div className="min-h-screen bg-white">
{/* Hero Section */}
<section className="relative overflow-hidden bg-gradient-to-br from-blue-50 via-white to-purple-50 py-20">
<div className="container mx-auto px-4 sm:px-6 lg:px-8 max-w-7xl">
<Breadcrumbs items={breadcrumbItems} />
<div className="grid lg:grid-cols-2 gap-12 items-center">
<div className="space-y-8">
<div className="inline-flex items-center space-x-2 bg-blue-100 text-blue-800 px-4 py-2 rounded-full text-sm font-semibold">
<span>📊</span>
<span>Free QR Code Tracking</span>
</div>
<h1 className="text-5xl lg:text-6xl font-bold text-gray-900 leading-tight">
Track Every QR Code Scan with Powerful Analytics
</h1>
<p className="text-xl text-gray-600 leading-relaxed">
Monitor your QR code performance in real-time. Get detailed insights on location, device, time, and user behavior. Make data-driven decisions with our free tracking software.
</p>
<div className="flex flex-col sm:flex-row gap-4">
<Link href="/signup">
<Button size="lg" className="text-lg px-8 py-4 w-full sm:w-auto">
Start Tracking Free
</Button>
</Link>
<Link href="/signup">
<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>
</>
);
}

234
src/app/(main)/(marketing)/reprint-calculator/page.tsx
View File

@@ -1,117 +1,117 @@
import React from 'react';
import type { Metadata } from 'next';
import ReprintSavingsCalculator from '@/components/marketing/ReprintSavingsCalculator';
import { ArrowDown, Check, ShieldCheck, Zap } from 'lucide-react';
export const metadata: Metadata = {
title: 'Reprint Cost Calculator | QR Master',
description:
'Calculate how much you are wasting on QR code reprints. See your potential savings with dynamic QR codes that never need to be reprinted.',
alternates: {
canonical: 'https://www.qrmaster.net/reprint-calculator',
},
robots: {
index: true,
follow: true,
},
openGraph: {
title: 'Reprint Cost Calculator | QR Master',
description: 'Stop wasting money on reprints. Calculate your savings now.',
url: 'https://www.qrmaster.net/reprint-calculator',
type: 'website',
images: [
{
url: 'https://www.qrmaster.net/og-image.png',
width: 1200,
height: 630,
alt: 'QR Master Reprint Cost Calculator',
},
],
},
};
export default function ReprintCalculatorPage() {
return (
<>
{/* Hero Section */}
<section className="pt-24 pb-12 bg-white relative overflow-hidden">
<div className="container mx-auto px-4 text-center max-w-3xl relative z-10">
<div className="inline-flex items-center gap-2 px-4 py-1.5 rounded-full bg-slate-100/80 backdrop-blur-sm border border-slate-200 text-slate-600 text-sm font-medium mb-8">
<span className="relative flex h-2 w-2">
<span className="animate-ping absolute inline-flex h-full w-full rounded-full bg-red-400 opacity-75"></span>
<span className="relative inline-flex rounded-full h-2 w-2 bg-red-500"></span>
</span>
Static QR codes are costing you money
</div>
<h1 className="text-4xl lg:text-6xl font-black text-slate-900 mb-6 tracking-tight leading-[1.1]">
Stop Burning Budget on <br className="hidden md:block" />
<span className="text-transparent bg-clip-text bg-gradient-to-r from-red-500 to-orange-600">Avoidable Reprints</span>
</h1>
<p className="text-xl text-slate-600 mb-8 leading-relaxed max-w-2xl mx-auto">
Every time a URL changes, static QR codes become useless trash.
Dynamic QR codes update instantly—keeping your print materials alive forever.
</p>
<div className="flex justify-center">
<ArrowDown className="w-6 h-6 text-slate-400 animate-bounce" />
</div>
</div>
</section>
{/* Calculator Component */}
<ReprintSavingsCalculator />
{/* Value Props */}
<section className="py-24 bg-white border-t border-slate-100">
<div className="container mx-auto px-4 max-w-6xl">
<div className="text-center mb-16">
<h2 className="text-3xl font-bold text-slate-900 mb-4">
Why Smart Companies Switched Years Ago
</h2>
<p className="text-slate-600 text-lg max-w-2xl mx-auto">
The math is simple. One dynamic subscription costs less than a single batch of reprints.
</p>
</div>
<div className="grid md:grid-cols-3 gap-8 lg:gap-12">
{[
{
icon: Zap,
color: "text-amber-500",
bg: "bg-amber-50",
title: "Update Instantly",
desc: "Changed your menu? New promo link? Update the destination in seconds. Your printed codes keep working perfectly."
},
{
icon: ShieldCheck,
color: "text-blue-500",
bg: "bg-blue-50",
title: "Error Proofing",
desc: "Printed the wrong link? With static codes, that's a disaster. With dynamic codes, it's a 5-second fix in the dashboard."
},
{
icon: Check,
color: "text-green-500",
bg: "bg-green-50",
title: "Real ROI Tracking",
desc: "Stop guessing if your print ads work. Track every scan, location, and device to measure exactly what's driving value."
}
].map((feature, i) => (
<div key={i} className="group p-8 rounded-2xl bg-slate-50 border border-slate-100 hover:bg-white hover:shadow-xl hover:shadow-slate-200/50 hover:border-slate-200 transition-all duration-300">
<div className={`w-14 h-14 ${feature.bg} rounded-xl flex items-center justify-center mb-6 group-hover:scale-110 transition-transform duration-300`}>
<feature.icon className={`w-7 h-7 ${feature.color}`} />
</div>
<h3 className="text-xl font-bold text-slate-900 mb-3">{feature.title}</h3>
<p className="text-slate-600 leading-relaxed">
{feature.desc}
</p>
</div>
))}
</div>
</div>
</section>
</>
);
}
import React from 'react';
import type { Metadata } from 'next';
import ReprintSavingsCalculator from '@/components/marketing/ReprintSavingsCalculator';
import { ArrowDown, Check, ShieldCheck, Zap } from 'lucide-react';
export const metadata: Metadata = {
title: 'Reprint Cost Calculator | QR Master',
description:
'Calculate how much you are wasting on QR code reprints. See your potential savings with dynamic QR codes that never need to be reprinted.',
alternates: {
canonical: 'https://www.qrmaster.net/reprint-calculator',
},
robots: {
index: true,
follow: true,
},
openGraph: {
title: 'Reprint Cost Calculator | QR Master',
description: 'Stop wasting money on reprints. Calculate your savings now.',
url: 'https://www.qrmaster.net/reprint-calculator',
type: 'website',
images: [
{
url: 'https://www.qrmaster.net/og-image.png',
width: 1200,
height: 630,
alt: 'QR Master Reprint Cost Calculator',
},
],
},
};
export default function ReprintCalculatorPage() {
return (
<>
{/* Hero Section */}
<section className="pt-24 pb-12 bg-white relative overflow-hidden">
<div className="container mx-auto px-4 text-center max-w-3xl relative z-10">
<div className="inline-flex items-center gap-2 px-4 py-1.5 rounded-full bg-slate-100/80 backdrop-blur-sm border border-slate-200 text-slate-600 text-sm font-medium mb-8">
<span className="relative flex h-2 w-2">
<span className="animate-ping absolute inline-flex h-full w-full rounded-full bg-red-400 opacity-75"></span>
<span className="relative inline-flex rounded-full h-2 w-2 bg-red-500"></span>
</span>
Static QR codes are costing you money
</div>
<h1 className="text-4xl lg:text-6xl font-black text-slate-900 mb-6 tracking-tight leading-[1.1]">
Stop Burning Budget on <br className="hidden md:block" />
<span className="text-transparent bg-clip-text bg-gradient-to-r from-red-500 to-orange-600">Avoidable Reprints</span>
</h1>
<p className="text-xl text-slate-600 mb-8 leading-relaxed max-w-2xl mx-auto">
Every time a URL changes, static QR codes become useless trash.
Dynamic QR codes update instantly—keeping your print materials alive forever.
</p>
<div className="flex justify-center">
<ArrowDown className="w-6 h-6 text-slate-400 animate-bounce" />
</div>
</div>
</section>
{/* Calculator Component */}
<ReprintSavingsCalculator />
{/* Value Props */}
<section className="py-24 bg-white border-t border-slate-100">
<div className="container mx-auto px-4 max-w-6xl">
<div className="text-center mb-16">
<h2 className="text-3xl font-bold text-slate-900 mb-4">
Why Smart Companies Switched Years Ago
</h2>
<p className="text-slate-600 text-lg max-w-2xl mx-auto">
The math is simple. One dynamic subscription costs less than a single batch of reprints.
</p>
</div>
<div className="grid md:grid-cols-3 gap-8 lg:gap-12">
{[
{
icon: Zap,
color: "text-amber-500",
bg: "bg-amber-50",
title: "Update Instantly",
desc: "Changed your menu? New promo link? Update the destination in seconds. Your printed codes keep working perfectly."
},
{
icon: ShieldCheck,
color: "text-blue-500",
bg: "bg-blue-50",
title: "Error Proofing",
desc: "Printed the wrong link? With static codes, that's a disaster. With dynamic codes, it's a 5-second fix in the dashboard."
},
{
icon: Check,
color: "text-green-500",
bg: "bg-green-50",
title: "Real ROI Tracking",
desc: "Stop guessing if your print ads work. Track every scan, location, and device to measure exactly what's driving value."
}
].map((feature, i) => (
<div key={i} className="group p-8 rounded-2xl bg-slate-50 border border-slate-100 hover:bg-white hover:shadow-xl hover:shadow-slate-200/50 hover:border-slate-200 transition-all duration-300">
<div className={`w-14 h-14 ${feature.bg} rounded-xl flex items-center justify-center mb-6 group-hover:scale-110 transition-transform duration-300`}>
<feature.icon className={`w-7 h-7 ${feature.color}`} />
</div>
<h3 className="text-xl font-bold text-slate-900 mb-3">{feature.title}</h3>
<p className="text-slate-600 leading-relaxed">
{feature.desc}
</p>
</div>
))}
</div>
</div>
</section>
</>
);
}

914
src/app/(main)/(marketing)/tools/barcode-generator/BarcodeGeneratorClient.tsx
View File

@@ -1,457 +1,457 @@
'use client';
import React, { useState, useRef } from 'react';
import Barcode from 'react-barcode';
import Link from 'next/link';
import { Download, Printer, Barcode as BarcodeIcon, Sparkles, Sliders, Check, Info, Copy } from 'lucide-react';
import { Button } from '@/components/ui/Button';
import { Input } from '@/components/ui/Input';
import { Select } from '@/components/ui/Select';
import { showToast } from '@/components/ui/Toast';
import { cn } from '@/lib/utils';
import { toPng, toSvg, toBlob } from 'html-to-image';
import { trackEvent } from '@/components/PostHogProvider';
// Brand Colors
const BRAND = {
paleGrey: '#EBEBDF',
slate900: '#0f172a',
};
const BARCODE_COLORS = [
{ name: 'Classic Black', value: '#000000' },
{ name: 'Dark Blue', value: '#1A1265' },
{ name: 'Rich Indigo', value: '#4338CA' },
{ name: 'Deep Emerald', value: '#065F46' },
{ name: 'Crimson', value: '#991B1B' },
{ name: 'Slate Gray', value: '#334155' },
{ name: 'Business Navy', value: '#1E293B' },
];
const FRAME_OPTIONS = [
{ id: 'none', label: 'No Frame' },
{ id: 'scanme', label: 'Scan Me' },
{ id: 'product', label: 'Product' },
{ id: 'serial', label: 'Serial' },
];
const FORMAT_INFO: Record<string, string> = {
'CODE128': 'High-density alphanumeric format. Best for general purpose use.',
'EAN13': 'International retail standard for products worldwide.',
'UPC': 'Standard retail format used primarily in North America.',
'CODE39': 'Older industrial standard supporting uppercase letters and numbers.',
'ITF14': 'Used on shipping containers and logistics packaging.',
'MSI': 'Specialized format for retail shelf labeling and inventory.',
'pharmacode': 'Pharmaceutical packaging control standard.',
};
export default function BarcodeGeneratorClient() {
const [value, setValue] = useState('123456789');
const [format, setFormat] = useState('CODE128');
const [width, setWidth] = useState(2);
const [height, setHeight] = useState(100);
const [displayValue, setDisplayValue] = useState(true);
const [lineColor, setLineColor] = useState('#000000');
const [frameType, setFrameType] = useState('none');
const [error, setError] = useState<string | null>(null);
const barcodeRef = useRef<HTMLDivElement>(null);
// Validation Logic
React.useEffect(() => {
setError(null);
if (!value) return;
if (format === 'EAN13' && !/^\d{12,13}$/.test(value)) {
setError('EAN-13 requires 12 or 13 digits.');
} else if (format === 'UPC' && !/^\d{11,12}$/.test(value)) {
setError('UPC requires 11 or 12 digits.');
} else if (format === 'CODE39' && !/^[0-9A-Z\-\.\ \$\/\+\%]+$/.test(value)) {
setError('Code 39 only supports numbers, uppercase letters, and - . $ / + % spaces.');
} else if ((format === 'ITF14' || format === 'MSI') && !/^\d+$/.test(value)) {
setError('This format only supports numbers.');
}
if (value && !error) {
trackEvent('barcode_generated', {
format: format,
content_length: value.length,
width: width,
height: height,
display_value: displayValue,
line_color: lineColor,
frame_type: frameType
});
}
}, [value, format, width, height, displayValue, lineColor, frameType, error]);
const downloadBarcode = async (extension: 'png' | 'svg') => {
if (!barcodeRef.current) return;
try {
let dataUrl;
if (extension === 'png') {
dataUrl = await toPng(barcodeRef.current, {
backgroundColor: '#ffffff',
pixelRatio: 3,
});
} else {
dataUrl = await toSvg(barcodeRef.current, {
backgroundColor: '#ffffff',
});
}
const link = document.createElement('a');
link.href = dataUrl;
link.download = `barcode-${value || 'generator'}.${extension}`;
document.body.appendChild(link);
link.click();
document.body.removeChild(link);
showToast(`Barcode downloaded as ${extension.toUpperCase()}`, 'success');
trackEvent('barcode_downloaded', {
format: format,
extension: extension,
frame_type: frameType
});
} catch (err) {
console.error('Download failed', err);
showToast('Download failed', 'error');
}
};
const copyBarcode = async () => {
if (!barcodeRef.current) return;
try {
// Use toBlob directly for better performance and compatibility
const blob = await toBlob(barcodeRef.current, {
backgroundColor: '#ffffff',
pixelRatio: 3,
});
if (!blob) {
throw new Error('Failed to generate image blob');
}
await navigator.clipboard.write([
new ClipboardItem({
'image/png': blob,
}),
]);
showToast('Barcode copied to clipboard', 'success');
trackEvent('barcode_copied', {
format: format,
frame_type: frameType
});
} catch (err) {
console.error('Copy failed', err);
showToast('Failed to copy barcode', 'error');
}
};
const formats = [
{ value: 'CODE128', label: 'Code 128 (Standard)' },
{ value: 'EAN13', label: 'EAN-13 (Retail)' },
{ value: 'UPC', label: 'UPC-A (US Retail)' },
{ value: 'CODE39', label: 'Code 39' },
{ value: 'ITF14', label: 'ITF-14' },
{ value: 'MSI', label: 'MSI' },
{ value: 'pharmacode', label: 'Pharmacode' },
];
return (
<div className="w-full max-w-5xl mx-auto px-4 md:px-6">
{/* Main Generator Card */}
<div className="bg-white rounded-3xl shadow-2xl shadow-slate-900/10 overflow-hidden border border-slate-100">
<div className="grid lg:grid-cols-2">
{/* LEFT: Input Section */}
<div className="p-6 md:p-8 lg:p-10 space-y-8 border-r border-slate-100">
{/* Configuration */}
<div className="space-y-6">
<h2 className="text-lg font-bold text-slate-900 flex items-center gap-2">
<Sliders className="w-5 h-5 text-slate-900" aria-hidden="true" />
Configuration
</h2>
<div className="space-y-4">
<div>
<label htmlFor="barcode-content" className="block text-sm font-medium text-slate-700 mb-2">Content</label>
<Input
id="barcode-content"
value={value}
onChange={(e) => setValue(e.target.value)}
placeholder="Enter barcode data (e.g. 12345678)"
className="h-12 text-base rounded-xl border-slate-200 focus:border-slate-900 focus:ring-slate-900"
aria-label="Barcode content"
/>
</div>
<div>
<div className="flex items-center justify-between mb-2">
<label className="block text-sm font-medium text-slate-700">Format</label>
<div className="group relative">
<Info className="w-4 h-4 text-slate-400 cursor-help" />
<div className="absolute right-0 bottom-full mb-2 w-64 p-3 bg-slate-900 text-white text-[11px] rounded-xl opacity-0 group-hover:opacity-100 transition-opacity pointer-events-none shadow-xl z-50">
<p className="font-bold mb-1">Format Guide:</p>
<p>{FORMAT_INFO[format]}</p>
</div>
</div>
</div>
<Select
value={format}
onChange={(e) => setFormat(e.target.value)}
className="h-12 rounded-xl border-slate-200"
options={formats}
aria-label="Format"
/>
<p className="text-[10px] text-slate-500 mt-2 px-1">
{FORMAT_INFO[format]}
</p>
</div>
</div>
</div>
<div className="border-t border-slate-100"></div>
{/* Design Options */}
<div className="space-y-6">
<h2 className="text-lg font-bold text-slate-900 flex items-center gap-2">
<Sparkles className="w-5 h-5 text-slate-900" aria-hidden="true" />
Design Options
</h2>
<div className="grid grid-cols-2 gap-6">
<div className="space-y-3">
<div className="flex justify-between">
<label htmlFor="width-range" className="text-sm font-medium text-slate-700">Width</label>
<span className="text-xs text-slate-500 bg-slate-100 px-2 py-1 rounded-md font-bold">{width}px</span>
</div>
<input
id="width-range"
type="range"
min="1"
max="4"
step="0.5"
value={width}
onChange={(e) => setWidth(parseFloat(e.target.value))}
className="w-full h-2 bg-slate-200 rounded-lg appearance-none cursor-pointer accent-slate-900"
aria-label="Barcode width"
/>
</div>
<div className="space-y-3">
<div className="flex justify-between">
<label htmlFor="height-range" className="text-sm font-medium text-slate-700">Height</label>
<span className="text-xs text-slate-500 bg-slate-100 px-2 py-1 rounded-md font-bold">{height}px</span>
</div>
<input
id="height-range"
type="range"
min="30"
max="200"
step="5"
value={height}
onChange={(e) => setHeight(parseInt(e.target.value))}
className="w-full h-2 bg-slate-200 rounded-lg appearance-none cursor-pointer accent-slate-900"
aria-label="Barcode height"
/>
</div>
</div>
<div>
<label className="block text-sm font-medium text-slate-700 mb-3">Line Color</label>
<div className="flex flex-wrap gap-2">
{BARCODE_COLORS.map((c) => (
<button
key={c.name}
onClick={() => setLineColor(c.value)}
className={cn(
"w-9 h-9 rounded-full border-2 flex items-center justify-center transition-all hover:scale-110",
lineColor === c.value ? "border-slate-900 ring-2 ring-offset-2 ring-slate-200" : "border-white shadow-md"
)}
style={{ backgroundColor: c.value }}
aria-label={`Select color ${c.name}`}
title={c.name}
>
{lineColor === c.value && <Check className="w-4 h-4 text-white" strokeWidth={3} aria-hidden="true" />}
</button>
))}
</div>
</div>
<div>
<label className="block text-sm font-medium text-slate-700 mb-3">Frame Label</label>
<div className="grid grid-cols-2 sm:grid-cols-4 gap-2">
{FRAME_OPTIONS.map((frame) => (
<button
key={frame.id}
onClick={() => setFrameType(frame.id)}
className={cn(
"py-2.5 px-3 rounded-lg text-sm font-medium transition-all border",
frameType === frame.id
? "bg-slate-900 text-white border-slate-900"
: "bg-slate-50 text-slate-600 border-slate-200 hover:border-slate-300"
)}
>
{frame.label}
</button>
))}
</div>
</div>
<label className="flex items-center gap-3 cursor-pointer group p-3 border border-slate-200 rounded-xl hover:border-slate-900 transition-colors bg-slate-50/50">
<div className={cn(
"w-5 h-5 rounded border-2 flex items-center justify-center transition-all",
displayValue ? "bg-slate-900 border-slate-900" : "border-slate-300 group-hover:border-slate-400"
)}>
{displayValue && <Check className="w-3.5 h-3.5 text-white" strokeWidth={3} />}
</div>
<input
type="checkbox"
checked={displayValue}
onChange={(e) => setDisplayValue(e.target.checked)}
className="sr-only"
/>
<span className="text-sm font-medium text-slate-700">Show Value Text</span>
</label>
</div>
</div>
{/* RIGHT: Preview Section */}
<div className="p-6 md:p-8 lg:p-10 flex flex-col items-center justify-center" style={{ backgroundColor: BRAND.paleGrey }}>
{/* Barcode Card */}
<div
className="bg-white rounded-3xl shadow-xl p-8 flex flex-col items-center justify-center min-h-[300px] w-full max-w-[400px] border border-slate-100 relative"
>
<div className="absolute top-4 right-4">
<div className="flex items-center gap-1.5 px-2 py-1 bg-slate-100 rounded-md text-[10px] font-bold text-slate-500 uppercase tracking-wider">
Live Preview
</div>
</div>
<div ref={barcodeRef} className="py-4 bg-white flex flex-col items-center justify-center overflow-hidden w-full">
{frameType !== 'none' && !error && (
<div
className="mb-4 px-6 py-2 rounded-full text-white font-bold text-xs tracking-widest uppercase shadow-md"
style={{ backgroundColor: lineColor }}
>
{FRAME_OPTIONS.find(f => f.id === frameType)?.label}
</div>
)}
{error ? (
<div className="flex flex-col items-center text-center p-6 animate-in fade-in zoom-in duration-200">
<div className="w-12 h-12 bg-red-100 rounded-full flex items-center justify-center mb-3">
<Info className="w-6 h-6 text-red-500" />
</div>
<p className="text-red-500 font-bold text-sm">{error}</p>
<p className="text-slate-400 text-xs mt-1">Please correct your input.</p>
</div>
) : value ? (
<Barcode
key={`${format}-${lineColor}-${value}-${width}-${height}-${displayValue}`}
value={value}
format={format as any}
width={width}
height={height}
displayValue={displayValue}
background="#ffffff"
lineColor={lineColor}
margin={10}
/>
) : (
<div className="text-center text-slate-400 p-6">
<BarcodeIcon className="w-12 h-12 mx-auto mb-3 opacity-30" />
<p className="text-sm font-medium">Enter data to generate</p>
</div>
)}
</div>
{/* Info Preview */}
<div className="mt-6 text-center w-full">
<h3 className="font-bold text-slate-900 text-lg flex items-center justify-center gap-2 truncate">
<span className="truncate">{formats.find(f => f.value === format)?.label}</span>
</h3>
<div className="text-xs text-slate-600 mt-1 truncate px-2 font-mono">
{value || 'Barcode Value'}
</div>
</div>
</div>
{/* Download Buttons */}
<div className="flex flex-col gap-4 mt-8 w-full max-w-[450px]">
<div className="flex flex-col sm:flex-row items-center gap-3 w-full">
<Button
onClick={() => downloadBarcode('png')}
className="w-full sm:flex-1 bg-slate-900 hover:bg-black text-white shadow-lg h-12 rounded-xl"
aria-label="Download barcode as PNG"
>
<Download className="w-4 h-4 mr-2" aria-hidden="true" />
Download PNG
</Button>
<div className="relative w-full sm:w-auto">
<div className="absolute -top-3 left-1/2 -translate-x-1/2 bg-indigo-600 text-white text-[9px] font-bold px-2 py-0.5 rounded-full whitespace-nowrap shadow-sm z-10 pointer-events-none">
BEST FOR PRINT
</div>
<Button
onClick={() => downloadBarcode('svg')}
variant="outline"
className="w-full sm:w-auto px-6 border-slate-300 hover:bg-white h-12 rounded-xl font-bold"
aria-label="Download barcode as SVG"
>
SVG
</Button>
</div>
<Button
onClick={copyBarcode}
variant="outline"
className="w-full sm:w-auto px-4 border-slate-300 hover:bg-white h-12 rounded-xl"
title="Copy to Clipboard"
aria-label="Copy barcode image to clipboard"
>
<Copy className="w-4 h-4 text-slate-600" aria-hidden="true" />
</Button>
<Button
onClick={() => window.print()}
variant="outline"
className="w-full sm:w-auto px-4 border-slate-300 hover:bg-white h-12 rounded-xl"
title="Print"
aria-label="Print barcode"
>
<Printer className="w-4 h-4 text-slate-600" aria-hidden="true" />
</Button>
</div>
<div className="text-center">
<Link href="/signup" className="text-xs font-medium text-slate-400 hover:text-indigo-600 transition-colors flex items-center justify-center gap-1 group">
Need bulk generation?
<span className="underline decoration-slate-300 group-hover:decoration-indigo-300 underline-offset-4">Available in Pro &rarr;</span>
</Link>
</div>
</div>
</div>
</div>
</div>
{/* Upsell Banner */}
<div className="mt-8 bg-gradient-to-r from-slate-900 to-slate-700 rounded-2xl p-6 flex flex-col sm:flex-row items-center justify-between gap-4">
<div className="text-white text-center sm:text-left">
<h3 className="font-bold text-lg">Need Dynamic QR Codes?</h3>
<p className="text-white/80 text-sm mt-1">
Switch to QR codes to edit content later and track your scans.
</p>
</div>
<Link href="/signup">
<Button className="bg-white text-slate-900 hover:bg-slate-100 shrink-0 shadow-lg px-8">
Get Started Free
</Button>
</Link>
</div>
</div>
);
}
'use client';
import React, { useState, useRef } from 'react';
import Barcode from 'react-barcode';
import Link from 'next/link';
import { Download, Printer, Barcode as BarcodeIcon, Sparkles, Sliders, Check, Info, Copy } from 'lucide-react';
import { Button } from '@/components/ui/Button';
import { Input } from '@/components/ui/Input';
import { Select } from '@/components/ui/Select';
import { showToast } from '@/components/ui/Toast';
import { cn } from '@/lib/utils';
import { toPng, toSvg, toBlob } from 'html-to-image';
import { trackEvent } from '@/components/PostHogProvider';
// Brand Colors
const BRAND = {
paleGrey: '#EBEBDF',
slate900: '#0f172a',
};
const BARCODE_COLORS = [
{ name: 'Classic Black', value: '#000000' },
{ name: 'Dark Blue', value: '#1A1265' },
{ name: 'Rich Indigo', value: '#4338CA' },
{ name: 'Deep Emerald', value: '#065F46' },
{ name: 'Crimson', value: '#991B1B' },
{ name: 'Slate Gray', value: '#334155' },
{ name: 'Business Navy', value: '#1E293B' },
];
const FRAME_OPTIONS = [
{ id: 'none', label: 'No Frame' },
{ id: 'scanme', label: 'Scan Me' },
{ id: 'product', label: 'Product' },
{ id: 'serial', label: 'Serial' },
];
const FORMAT_INFO: Record<string, string> = {
'CODE128': 'High-density alphanumeric format. Best for general purpose use.',
'EAN13': 'International retail standard for products worldwide.',
'UPC': 'Standard retail format used primarily in North America.',
'CODE39': 'Older industrial standard supporting uppercase letters and numbers.',
'ITF14': 'Used on shipping containers and logistics packaging.',
'MSI': 'Specialized format for retail shelf labeling and inventory.',
'pharmacode': 'Pharmaceutical packaging control standard.',
};
export default function BarcodeGeneratorClient() {
const [value, setValue] = useState('123456789');
const [format, setFormat] = useState('CODE128');
const [width, setWidth] = useState(2);
const [height, setHeight] = useState(100);
const [displayValue, setDisplayValue] = useState(true);
const [lineColor, setLineColor] = useState('#000000');
const [frameType, setFrameType] = useState('none');
const [error, setError] = useState<string | null>(null);
const barcodeRef = useRef<HTMLDivElement>(null);
// Validation Logic
React.useEffect(() => {
setError(null);
if (!value) return;
if (format === 'EAN13' && !/^\d{12,13}$/.test(value)) {
setError('EAN-13 requires 12 or 13 digits.');
} else if (format === 'UPC' && !/^\d{11,12}$/.test(value)) {
setError('UPC requires 11 or 12 digits.');
} else if (format === 'CODE39' && !/^[0-9A-Z\-\.\ \$\/\+\%]+$/.test(value)) {
setError('Code 39 only supports numbers, uppercase letters, and - . $ / + % spaces.');
} else if ((format === 'ITF14' || format === 'MSI') && !/^\d+$/.test(value)) {
setError('This format only supports numbers.');
}
if (value && !error) {
trackEvent('barcode_generated', {
format: format,
content_length: value.length,
width: width,
height: height,
display_value: displayValue,
line_color: lineColor,
frame_type: frameType
});
}
}, [value, format, width, height, displayValue, lineColor, frameType, error]);
const downloadBarcode = async (extension: 'png' | 'svg') => {
if (!barcodeRef.current) return;
try {
let dataUrl;
if (extension === 'png') {
dataUrl = await toPng(barcodeRef.current, {
backgroundColor: '#ffffff',
pixelRatio: 3,
});
} else {
dataUrl = await toSvg(barcodeRef.current, {
backgroundColor: '#ffffff',
});
}
const link = document.createElement('a');
link.href = dataUrl;
link.download = `barcode-${value || 'generator'}.${extension}`;
document.body.appendChild(link);
link.click();
document.body.removeChild(link);
showToast(`Barcode downloaded as ${extension.toUpperCase()}`, 'success');
trackEvent('barcode_downloaded', {
format: format,
extension: extension,
frame_type: frameType
});
} catch (err) {
console.error('Download failed', err);
showToast('Download failed', 'error');
}
};
const copyBarcode = async () => {
if (!barcodeRef.current) return;
try {
// Use toBlob directly for better performance and compatibility
const blob = await toBlob(barcodeRef.current, {
backgroundColor: '#ffffff',
pixelRatio: 3,
});
if (!blob) {
throw new Error('Failed to generate image blob');
}
await navigator.clipboard.write([
new ClipboardItem({
'image/png': blob,
}),
]);
showToast('Barcode copied to clipboard', 'success');
trackEvent('barcode_copied', {
format: format,
frame_type: frameType
});
} catch (err) {
console.error('Copy failed', err);
showToast('Failed to copy barcode', 'error');
}
};
const formats = [
{ value: 'CODE128', label: 'Code 128 (Standard)' },
{ value: 'EAN13', label: 'EAN-13 (Retail)' },
{ value: 'UPC', label: 'UPC-A (US Retail)' },
{ value: 'CODE39', label: 'Code 39' },
{ value: 'ITF14', label: 'ITF-14' },
{ value: 'MSI', label: 'MSI' },
{ value: 'pharmacode', label: 'Pharmacode' },
];
return (
<div className="w-full max-w-5xl mx-auto px-4 md:px-6">
{/* Main Generator Card */}
<div className="bg-white rounded-3xl shadow-2xl shadow-slate-900/10 overflow-hidden border border-slate-100">
<div className="grid lg:grid-cols-2">
{/* LEFT: Input Section */}
<div className="p-6 md:p-8 lg:p-10 space-y-8 border-r border-slate-100">
{/* Configuration */}
<div className="space-y-6">
<h2 className="text-lg font-bold text-slate-900 flex items-center gap-2">
<Sliders className="w-5 h-5 text-slate-900" aria-hidden="true" />
Configuration
</h2>
<div className="space-y-4">
<div>
<label htmlFor="barcode-content" className="block text-sm font-medium text-slate-700 mb-2">Content</label>
<Input
id="barcode-content"
value={value}
onChange={(e) => setValue(e.target.value)}
placeholder="Enter barcode data (e.g. 12345678)"
className="h-12 text-base rounded-xl border-slate-200 focus:border-slate-900 focus:ring-slate-900"
aria-label="Barcode content"
/>
</div>
<div>
<div className="flex items-center justify-between mb-2">
<label className="block text-sm font-medium text-slate-700">Format</label>
<div className="group relative">
<Info className="w-4 h-4 text-slate-400 cursor-help" />
<div className="absolute right-0 bottom-full mb-2 w-64 p-3 bg-slate-900 text-white text-[11px] rounded-xl opacity-0 group-hover:opacity-100 transition-opacity pointer-events-none shadow-xl z-50">
<p className="font-bold mb-1">Format Guide:</p>
<p>{FORMAT_INFO[format]}</p>
</div>
</div>
</div>
<Select
value={format}
onChange={(e) => setFormat(e.target.value)}
className="h-12 rounded-xl border-slate-200"
options={formats}
aria-label="Format"
/>
<p className="text-[10px] text-slate-500 mt-2 px-1">
{FORMAT_INFO[format]}
</p>
</div>
</div>
</div>
<div className="border-t border-slate-100"></div>
{/* Design Options */}
<div className="space-y-6">
<h2 className="text-lg font-bold text-slate-900 flex items-center gap-2">
<Sparkles className="w-5 h-5 text-slate-900" aria-hidden="true" />
Design Options
</h2>
<div className="grid grid-cols-2 gap-6">
<div className="space-y-3">
<div className="flex justify-between">
<label htmlFor="width-range" className="text-sm font-medium text-slate-700">Width</label>
<span className="text-xs text-slate-500 bg-slate-100 px-2 py-1 rounded-md font-bold">{width}px</span>
</div>
<input
id="width-range"
type="range"
min="1"
max="4"
step="0.5"
value={width}
onChange={(e) => setWidth(parseFloat(e.target.value))}
className="w-full h-2 bg-slate-200 rounded-lg appearance-none cursor-pointer accent-slate-900"
aria-label="Barcode width"
/>
</div>
<div className="space-y-3">
<div className="flex justify-between">
<label htmlFor="height-range" className="text-sm font-medium text-slate-700">Height</label>
<span className="text-xs text-slate-500 bg-slate-100 px-2 py-1 rounded-md font-bold">{height}px</span>
</div>
<input
id="height-range"
type="range"
min="30"
max="200"
step="5"
value={height}
onChange={(e) => setHeight(parseInt(e.target.value))}
className="w-full h-2 bg-slate-200 rounded-lg appearance-none cursor-pointer accent-slate-900"
aria-label="Barcode height"
/>
</div>
</div>
<div>
<label className="block text-sm font-medium text-slate-700 mb-3">Line Color</label>
<div className="flex flex-wrap gap-2">
{BARCODE_COLORS.map((c) => (
<button
key={c.name}
onClick={() => setLineColor(c.value)}
className={cn(
"w-9 h-9 rounded-full border-2 flex items-center justify-center transition-all hover:scale-110",
lineColor === c.value ? "border-slate-900 ring-2 ring-offset-2 ring-slate-200" : "border-white shadow-md"
)}
style={{ backgroundColor: c.value }}
aria-label={`Select color ${c.name}`}
title={c.name}
>
{lineColor === c.value && <Check className="w-4 h-4 text-white" strokeWidth={3} aria-hidden="true" />}
</button>
))}
</div>
</div>
<div>
<label className="block text-sm font-medium text-slate-700 mb-3">Frame Label</label>
<div className="grid grid-cols-2 sm:grid-cols-4 gap-2">
{FRAME_OPTIONS.map((frame) => (
<button
key={frame.id}
onClick={() => setFrameType(frame.id)}
className={cn(
"py-2.5 px-3 rounded-lg text-sm font-medium transition-all border",
frameType === frame.id
? "bg-slate-900 text-white border-slate-900"
: "bg-slate-50 text-slate-600 border-slate-200 hover:border-slate-300"
)}
>
{frame.label}
</button>
))}
</div>
</div>
<label className="flex items-center gap-3 cursor-pointer group p-3 border border-slate-200 rounded-xl hover:border-slate-900 transition-colors bg-slate-50/50">
<div className={cn(
"w-5 h-5 rounded border-2 flex items-center justify-center transition-all",
displayValue ? "bg-slate-900 border-slate-900" : "border-slate-300 group-hover:border-slate-400"
)}>
{displayValue && <Check className="w-3.5 h-3.5 text-white" strokeWidth={3} />}
</div>
<input
type="checkbox"
checked={displayValue}
onChange={(e) => setDisplayValue(e.target.checked)}
className="sr-only"
/>
<span className="text-sm font-medium text-slate-700">Show Value Text</span>
</label>
</div>
</div>
{/* RIGHT: Preview Section */}
<div className="p-6 md:p-8 lg:p-10 flex flex-col items-center justify-center" style={{ backgroundColor: BRAND.paleGrey }}>
{/* Barcode Card */}
<div
className="bg-white rounded-3xl shadow-xl p-8 flex flex-col items-center justify-center min-h-[300px] w-full max-w-[400px] border border-slate-100 relative"
>
<div className="absolute top-4 right-4">
<div className="flex items-center gap-1.5 px-2 py-1 bg-slate-100 rounded-md text-[10px] font-bold text-slate-500 uppercase tracking-wider">
Live Preview
</div>
</div>
<div ref={barcodeRef} className="py-4 bg-white flex flex-col items-center justify-center overflow-hidden w-full">
{frameType !== 'none' && !error && (
<div
className="mb-4 px-6 py-2 rounded-full text-white font-bold text-xs tracking-widest uppercase shadow-md"
style={{ backgroundColor: lineColor }}
>
{FRAME_OPTIONS.find(f => f.id === frameType)?.label}
</div>
)}
{error ? (
<div className="flex flex-col items-center text-center p-6 animate-in fade-in zoom-in duration-200">
<div className="w-12 h-12 bg-red-100 rounded-full flex items-center justify-center mb-3">
<Info className="w-6 h-6 text-red-500" />
</div>
<p className="text-red-500 font-bold text-sm">{error}</p>
<p className="text-slate-400 text-xs mt-1">Please correct your input.</p>
</div>
) : value ? (
<Barcode
key={`${format}-${lineColor}-${value}-${width}-${height}-${displayValue}`}
value={value}
format={format as any}
width={width}
height={height}
displayValue={displayValue}
background="#ffffff"
lineColor={lineColor}
margin={10}
/>
) : (
<div className="text-center text-slate-400 p-6">
<BarcodeIcon className="w-12 h-12 mx-auto mb-3 opacity-30" />
<p className="text-sm font-medium">Enter data to generate</p>
</div>
)}
</div>
{/* Info Preview */}
<div className="mt-6 text-center w-full">
<h3 className="font-bold text-slate-900 text-lg flex items-center justify-center gap-2 truncate">
<span className="truncate">{formats.find(f => f.value === format)?.label}</span>
</h3>
<div className="text-xs text-slate-600 mt-1 truncate px-2 font-mono">
{value || 'Barcode Value'}
</div>
</div>
</div>
{/* Download Buttons */}
<div className="flex flex-col gap-4 mt-8 w-full max-w-[450px]">
<div className="flex flex-col sm:flex-row items-center gap-3 w-full">
<Button
onClick={() => downloadBarcode('png')}
className="w-full sm:flex-1 bg-slate-900 hover:bg-black text-white shadow-lg h-12 rounded-xl"
aria-label="Download barcode as PNG"
>
<Download className="w-4 h-4 mr-2" aria-hidden="true" />
Download PNG
</Button>
<div className="relative w-full sm:w-auto">
<div className="absolute -top-3 left-1/2 -translate-x-1/2 bg-indigo-600 text-white text-[9px] font-bold px-2 py-0.5 rounded-full whitespace-nowrap shadow-sm z-10 pointer-events-none">
BEST FOR PRINT
</div>
<Button
onClick={() => downloadBarcode('svg')}
variant="outline"
className="w-full sm:w-auto px-6 border-slate-300 hover:bg-white h-12 rounded-xl font-bold"
aria-label="Download barcode as SVG"
>
SVG
</Button>
</div>
<Button
onClick={copyBarcode}
variant="outline"
className="w-full sm:w-auto px-4 border-slate-300 hover:bg-white h-12 rounded-xl"
title="Copy to Clipboard"
aria-label="Copy barcode image to clipboard"
>
<Copy className="w-4 h-4 text-slate-600" aria-hidden="true" />
</Button>
<Button
onClick={() => window.print()}
variant="outline"
className="w-full sm:w-auto px-4 border-slate-300 hover:bg-white h-12 rounded-xl"
title="Print"
aria-label="Print barcode"
>
<Printer className="w-4 h-4 text-slate-600" aria-hidden="true" />
</Button>
</div>
<div className="text-center">
<Link href="/signup" className="text-xs font-medium text-slate-400 hover:text-indigo-600 transition-colors flex items-center justify-center gap-1 group">
Need bulk generation?
<span className="underline decoration-slate-300 group-hover:decoration-indigo-300 underline-offset-4">Available in Pro &rarr;</span>
</Link>
</div>
</div>
</div>
</div>
</div>
{/* Upsell Banner */}
<div className="mt-8 bg-gradient-to-r from-slate-900 to-slate-700 rounded-2xl p-6 flex flex-col sm:flex-row items-center justify-between gap-4">
<div className="text-white text-center sm:text-left">
<h3 className="font-bold text-lg">Need Dynamic QR Codes?</h3>
<p className="text-white/80 text-sm mt-1">
Switch to QR codes to edit content later and track your scans.
</p>
</div>
<Link href="/signup">
<Button className="bg-white text-slate-900 hover:bg-slate-100 shrink-0 shadow-lg px-8">
Get Started Free
</Button>
</Link>
</div>
</div>
);
}

642
src/app/(main)/(marketing)/tools/barcode-generator/BarcodeGuide.tsx
View File

@@ -1,321 +1,321 @@
import { BookOpen, CheckCircle, HelpCircle, Layers, Settings, ShoppingCart, Tag, Activity, Factory } from 'lucide-react';
import Link from 'next/link';
export function BarcodeGuide() {
return (
<section className="py-16 px-4 sm:px-6 lg:px-8 bg-white" id="guide">
<div className="max-w-3xl mx-auto prose prose-slate prose-lg">
<div className="flex items-center gap-3 mb-8 not-prose">
<div className="p-3 bg-blue-100/50 rounded-xl">
<BookOpen className="w-8 h-8 text-blue-600" />
</div>
<h2 className="text-3xl font-bold text-slate-900 m-0">
Barcode Generator – How Barcodes Work and Why They Matter
</h2>
</div>
<p className="lead text-xl text-slate-600">
Barcodes are an essential part of modern commerce, logistics, and inventory management. A <strong>Barcode Generator</strong> allows businesses and individuals to create scannable barcodes quickly and efficiently for products, packaging, and internal systems. Whether you run an online shop, manage a warehouse, or sell products locally, understanding how barcodes work can save time and reduce errors.
</p>
<p>
In this article, you will learn what barcodes are, how they work, and how a <strong>Barcode Generator</strong> helps you create professional barcodes in seconds.
</p>
{/* SEO Image */}
<div className="my-8 rounded-2xl overflow-hidden shadow-lg not-prose border border-slate-100">
<img
src="/barcode-generator-preview.png"
alt="Free Online Barcode Generator Preview - Create EAN, UPC, and Code 128 Barcodes"
className="w-full h-64 sm:h-80 object-cover"
width="800"
height="320"
/>
<div className="bg-slate-50 p-4 text-sm text-slate-500 text-center border-t border-slate-100">
Use our <strong>free barcode generator</strong> to create scannable codes.
</div>
</div>
<h2>What Is a Barcode?</h2>
<p>
A barcode is a visual representation of data that can be read by machines. It consists of vertical lines with different widths and spacing, which encode numbers or characters. When scanned with a barcode scanner or smartphone, the information is instantly translated into readable data.
</p>
<p>
Barcodes are commonly used to identify products, track inventory, manage logistics, and speed up checkout processes. They reduce manual input and significantly lower the risk of human error.
</p>
<h2>How Does a Barcode Generator Work?</h2>
<p>
A Barcode Generator converts text or numeric input into a barcode format that scanners can read. The process is simple:
</p>
<ul className="list-none pl-0 space-y-4 not-prose my-8">
<li className="flex gap-4">
<div className="w-8 h-8 mt-1 rounded-full bg-slate-100 flex items-center justify-center shrink-0 text-slate-600 font-bold text-sm">1</div>
<div>
<strong className="text-slate-900 block mb-1">Input Data</strong>
<p className="text-slate-600 m-0 text-base">You enter a number or text (for example, a product ID).</p>
</div>
</li>
<li className="flex gap-4">
<div className="w-8 h-8 mt-1 rounded-full bg-slate-100 flex items-center justify-center shrink-0 text-slate-600 font-bold text-sm">2</div>
<div>
<strong className="text-slate-900 block mb-1">Select Format</strong>
<p className="text-slate-600 m-0 text-base">You select a barcode format such as EAN-13 or Code 128.</p>
</div>
</li>
<li className="flex gap-4">
<div className="w-8 h-8 mt-1 rounded-full bg-slate-100 flex items-center justify-center shrink-0 text-slate-600 font-bold text-sm">3</div>
<div>
<strong className="text-slate-900 block mb-1">Generate</strong>
<p className="text-slate-600 m-0 text-base">The generator creates a scannable barcode image instantly.</p>
</div>
</li>
<li className="flex gap-4">
<div className="w-8 h-8 mt-1 rounded-full bg-slate-100 flex items-center justify-center shrink-0 text-slate-600 font-bold text-sm">4</div>
<div>
<strong className="text-slate-900 block mb-1">Download</strong>
<p className="text-slate-600 m-0 text-base">You download or print the barcode for use.</p>
</div>
</li>
</ul>
<p>
A modern <strong>Barcode Generator</strong> works directly in the browser and does not require additional software.
</p>
<h2>Common Types of Barcodes</h2>
<p>
Different barcode formats are used for different purposes. Choosing the right one is important for compatibility and scanning accuracy.
</p>
<div className="grid md:grid-cols-2 gap-6 not-prose my-8">
{/* EAN-13 Card */}
<div className="bg-white p-6 rounded-xl border border-slate-200 shadow-sm hover:shadow-md transition-shadow">
<div className="flex items-center gap-3 mb-3">
<Tag className="w-5 h-5 text-blue-500" />
<h4 className="text-lg font-bold text-slate-900 m-0">EAN-13</h4>
</div>
<div className="text-xs font-mono bg-slate-100 inline-block px-2 py-1 rounded text-slate-500 mb-3">Retail • Europe</div>
<div className="mb-3 bg-slate-50 rounded border border-slate-100 p-2 flex justify-center">
<img src="/barcode-generator-preview.png" alt="EAN-13 Barcode Sample for International Products" className="h-10 object-contain opacity-75 grayscale" width="200" height="40" />
</div>
<p className="text-sm text-slate-600 m-0">
EAN-13 is widely used in retail, especially in Europe. It is designed for consumer products sold in stores and supermarkets.
</p>
</div>
{/* UPC-A Card */}
<div className="bg-white p-6 rounded-xl border border-slate-200 shadow-sm hover:shadow-md transition-shadow">
<div className="flex items-center gap-3 mb-3">
<ShoppingCart className="w-5 h-5 text-indigo-500" />
<h4 className="text-lg font-bold text-slate-900 m-0">UPC-A</h4>
</div>
<div className="text-xs font-mono bg-slate-100 inline-block px-2 py-1 rounded text-slate-500 mb-3">Retail • USA/Canada</div>
<div className="mb-3 bg-slate-50 rounded border border-slate-100 p-2 flex justify-center">
<img src="/barcode-generator-preview.png" alt="UPC-A Barcode Example for Retail Products in USA" className="h-10 object-contain opacity-75 grayscale" width="200" height="40" />
</div>
<p className="text-sm text-slate-600 m-0">
UPC-A is similar to EAN-13 but is mainly used in the United States and Canada for retail products.
</p>
</div>
{/* Code 128 Card */}
<div className="bg-white p-6 rounded-xl border border-slate-200 shadow-sm hover:shadow-md transition-shadow">
<div className="flex items-center gap-3 mb-3">
<Settings className="w-5 h-5 text-emerald-500" />
<h4 className="text-lg font-bold text-slate-900 m-0">Code 128</h4>
</div>
<div className="text-xs font-mono bg-slate-100 inline-block px-2 py-1 rounded text-slate-500 mb-3">Logistics • Universal</div>
<div className="mb-3 bg-slate-50 rounded border border-slate-100 p-2 flex justify-center">
<img src="/barcode-generator-preview.png" alt="Code 128 Barcode for Inventory and Shipping Labels" className="h-10 object-contain opacity-75 grayscale" width="200" height="40" />
</div>
<p className="text-sm text-slate-600 m-0">
Code 128 is a flexible barcode format that supports letters and numbers. It is commonly used in logistics, shipping, and internal tracking systems.
</p>
</div>
{/* Code 39 Card */}
<div className="bg-white p-6 rounded-xl border border-slate-200 shadow-sm hover:shadow-md transition-shadow">
<div className="flex items-center gap-3 mb-3">
<Factory className="w-5 h-5 text-orange-500" />
<h4 className="text-lg font-bold text-slate-900 m-0">Code 39</h4>
</div>
<div className="text-xs font-mono bg-slate-100 inline-block px-2 py-1 rounded text-slate-500 mb-3">Industrial • Military</div>
<div className="mb-3 bg-slate-50 rounded border border-slate-100 p-2 flex justify-center">
<img src="/barcode-generator-preview.png" alt="Code 39 Barcode for Industrial Use" className="h-10 object-contain opacity-75 grayscale" width="200" height="40" />
</div>
<p className="text-sm text-slate-600 m-0">
The first alphanumeric barcode, Code 39 is still widely used in automotive and defense industries. It supports numbers and uppercase letters.
</p>
</div>
{/* MSI Card */}
<div className="bg-white p-6 rounded-xl border border-slate-200 shadow-sm hover:shadow-md transition-shadow">
<div className="flex items-center gap-3 mb-3">
<Layers className="w-5 h-5 text-purple-500" />
<h4 className="text-lg font-bold text-slate-900 m-0">MSI</h4>
</div>
<div className="text-xs font-mono bg-slate-100 inline-block px-2 py-1 rounded text-slate-500 mb-3">Inventory • Shelves</div>
<div className="mb-3 bg-slate-50 rounded border border-slate-100 p-2 flex justify-center">
<img src="/barcode-generator-preview.png" alt="MSI Barcode for Inventory Management" className="h-10 object-contain opacity-75 grayscale" width="200" height="40" />
</div>
<p className="text-sm text-slate-600 m-0">
MSI (Modified Plessey) is often used for inventory control in retail environments, such as labeling shelves in supermarkets and warehouses.
</p>
</div>
{/* Pharmacode Card */}
<div className="bg-white p-6 rounded-xl border border-slate-200 shadow-sm hover:shadow-md transition-shadow">
<div className="flex items-center gap-3 mb-3">
<Activity className="w-5 h-5 text-red-500" />
<h4 className="text-lg font-bold text-slate-900 m-0">Pharmacode</h4>
</div>
<div className="text-xs font-mono bg-slate-100 inline-block px-2 py-1 rounded text-slate-500 mb-3">Pharma • Packaging</div>
<div className="mb-3 bg-slate-50 rounded border border-slate-100 p-2 flex justify-center">
<img src="/barcode-generator-preview.png" alt="Pharmacode for Pharmaceutical Packaging" className="h-10 object-contain opacity-75 grayscale" width="200" height="40" />
</div>
<p className="text-sm text-slate-600 m-0">
Pharmacode is a specialized barcode standard used in the pharmaceutical industry for packaging control to prevent medication errors.
</p>
</div>
</div>
<h2>Why Use a Barcode Generator?</h2>
<p>Using a Barcode Generator offers several advantages:</p>
<div className="not-prose grid gap-4 mb-8">
<div className="flex gap-4 items-start">
<CheckCircle className="w-5 h-5 text-green-500 mt-1 shrink-0" />
<div>
<h5 className="font-bold text-slate-900 m-0">Speed</h5>
<p className="text-slate-600 text-sm m-0">Create barcodes instantly without technical knowledge.</p>
</div>
</div>
<div className="flex gap-4 items-start">
<CheckCircle className="w-5 h-5 text-green-500 mt-1 shrink-0" />
<div>
<h5 className="font-bold text-slate-900 m-0">Accuracy</h5>
<p className="text-slate-600 text-sm m-0">Reduce manual data entry errors.</p>
</div>
</div>
<div className="flex gap-4 items-start">
<CheckCircle className="w-5 h-5 text-green-500 mt-1 shrink-0" />
<div>
<h5 className="font-bold text-slate-900 m-0">Flexibility</h5>
<p className="text-slate-600 text-sm m-0">Generate barcodes for different formats and use cases.</p>
</div>
</div>
<div className="flex gap-4 items-start">
<CheckCircle className="w-5 h-5 text-green-500 mt-1 shrink-0" />
<div>
<h5 className="font-bold text-slate-900 m-0">Cost-effective</h5>
<p className="text-slate-600 text-sm m-0">No need for expensive software or hardware.</p>
</div>
</div>
</div>
<p>
For small businesses, online shops, and startups, a <strong>free Barcode Generator</strong> is often the easiest way to get started.
</p>
<h2>Barcode vs QR Code</h2>
<p>
Although barcodes and QR codes are often confused, they serve different purposes. A barcode stores data horizontally and is mainly used for product identification. A <Link href="/tools/url-qr-code" className="text-blue-600 hover:underline">QR code</Link> stores data both horizontally and vertically and can contain more complex information such as URLs or <Link href="/tools/vcard-qr-code" className="text-blue-600 hover:underline">contact details</Link>.
</p>
<p>
If you only need to identify products or inventory items, a classic barcode is usually the better choice.
</p>
<h2>Are Barcodes Free to Use?</h2>
<p>
The barcode image itself can be generated for free using a Barcode Generator. However, for retail products sold internationally, the barcode number may need to be officially registered through organizations such as GS1. This ensures that the barcode is unique and recognized globally.
</p>
<p>
For internal use, testing, or small projects, free barcode generation is usually sufficient.
</p>
<h2>Use Cases for Barcodes</h2>
<p>Barcodes are used in many industries, including:</p>
<ul className="list-disc pl-6 space-y-2 mb-8">
<li>Retail and e-commerce</li>
<li>Inventory and warehouse management</li>
<li>Shipping and logistics</li>
<li>Libraries and document tracking</li>
<li>Event tickets and labeling</li>
</ul>
<p>
A reliable <strong>Barcode Generator</strong> helps streamline these processes and improves efficiency.
</p>
<h2>Understanding Check Digits</h2>
<p>
Most barcodes (like EAN and UPC) include a "Check Digit"—the last number in the sequence. This digit is calculated mathematically from the other numbers to ensure the barcode is scanned correctly. Even if a barcode is slightly damaged or scratched, the scanner uses the check digit to verify the integrity of the data.
</p>
<h2>Best Practices for Printing Barcodes</h2>
<p>
To ensure your barcodes scan instantly at the checkout or in the warehouse, follow these printing tips:
</p>
<ul className="list-disc pl-6 space-y-2 mb-8">
<li><strong>High Contrast:</strong> Always print black bars on a white background. Reverse colors (white bars on black) often fail to scan.</li>
<li><strong>Quiet Zone:</strong> Leave enough white space (margins) on the left and right sides of the barcode.</li>
<li><strong>Resolution:</strong> For professional labels, use <strong>SVG format</strong> (vector) or high-resolution PNGs (at least 300 DPI) to avoid blurry edges.</li>
<li><strong>Size:</strong> Do not scale the barcode too small. Standard EAN-13 codes should be at least 30mm wide for reliable scanning.</li>
</ul>
<hr className="my-12 border-slate-200" />
<div className="flex items-center gap-3 mb-6 not-prose">
<HelpCircle className="w-6 h-6 text-blue-500" />
<h2 className="text-2xl font-bold text-slate-900 m-0">Frequently Asked Questions (FAQ)</h2>
</div>
<div className="not-prose space-y-8">
<div>
<h5 className="font-bold text-slate-900 text-lg mb-2">❓ What is a Barcode Generator?</h5>
<p className="text-slate-600">A Barcode Generator is an online tool that converts numbers or text into scannable barcode images that can be used for products, labels, and inventory systems.</p>
</div>
<div>
<h5 className="font-bold text-slate-900 text-lg mb-2">❓ Is this barcode generator free to use?</h5>
<p className="text-slate-600">Yes, our online barcode generator is completely free to use with no hidden costs or sign-ups required. You can generate, download, and print barcodes instantly.</p>
</div>
<div>
<h5 className="font-bold text-slate-900 text-lg mb-2">❓ Which barcode format should I use?</h5>
<p className="text-slate-600">
<strong>EAN-13:</strong> Standard for retail products in Europe and globally.<br />
<strong>UPC-A:</strong> Standard for retail products in USA/Canada.<br />
<strong>Code 128:</strong> Best for logistics, shipping, and internal tracking (supports letters & numbers).
</p>
</div>
<div>
<h5 className="font-bold text-slate-900 text-lg mb-2">❓ Can I download barcodes in vector format (SVG)?</h5>
<p className="text-slate-600">Yes! We offer <strong>SVG downloads</strong>. SVG files are vector-based, meaning they can be scaled to any size without losing quality—perfect for professional product packaging.</p>
</div>
<div>
<h5 className="font-bold text-slate-900 text-lg mb-2">❓ How do I generate a barcode online?</h5>
<p className="text-slate-600">To generate a barcode online, enter your product number or text, select the desired barcode format (such as EAN-13 or Code 128), and click the generate button. The barcode will be created instantly.</p>
</div>
<div>
<h5 className="font-bold text-slate-900 text-lg mb-2">❓ Are generated barcodes scannable?</h5>
<p className="text-slate-600">Yes, barcodes generated with a proper barcode generator are fully scannable. We generate standard-compliant barcodes readable by any standard optical or laser barcode scanner.</p>
</div>
<div>
<h5 className="font-bold text-slate-900 text-lg mb-2">❓ Can I use these barcodes for Amazon (EAN/UPC)?</h5>
<p className="text-slate-600">You can generate the <em>image</em> for Amazon here if you already have your EAN/UPC number. However, you cannot "create" a valid global EAN number here—you must purchase those official numbers from GS1 to sell on major platforms like Amazon.</p>
</div>
<div>
<h5 className="font-bold text-slate-900 text-lg mb-2">❓ What is the difference between a barcode and a QR code?</h5>
<p className="text-slate-600">A barcode stores data horizontally (1D) and is mainly used for product IDs. A QR code stores data in 2D (matrix) and can hold much more information, such as URLs, vCards, or WiFi credentials.</p>
</div>
</div>
<div className="mt-12 p-6 bg-slate-900 rounded-xl text-white not-prose">
<h4 className="text-lg font-bold mb-2">Final Thoughts</h4>
<p className="text-slate-300 m-0">
A Barcode Generator is a simple yet powerful tool that helps businesses save time, reduce errors, and improve operational efficiency. By choosing the right barcode format and using a reliable generator, you can create professional barcodes that work across different systems and industries.
</p>
</div>
</div>
</section>
);
}
import { BookOpen, CheckCircle, HelpCircle, Layers, Settings, ShoppingCart, Tag, Activity, Factory } from 'lucide-react';
import Link from 'next/link';
export function BarcodeGuide() {
return (
<section className="py-16 px-4 sm:px-6 lg:px-8 bg-white" id="guide">
<div className="max-w-3xl mx-auto prose prose-slate prose-lg">
<div className="flex items-center gap-3 mb-8 not-prose">
<div className="p-3 bg-blue-100/50 rounded-xl">
<BookOpen className="w-8 h-8 text-blue-600" />
</div>
<h2 className="text-3xl font-bold text-slate-900 m-0">
Barcode Generator – How Barcodes Work and Why They Matter
</h2>
</div>
<p className="lead text-xl text-slate-600">
Barcodes are an essential part of modern commerce, logistics, and inventory management. A <strong>Barcode Generator</strong> allows businesses and individuals to create scannable barcodes quickly and efficiently for products, packaging, and internal systems. Whether you run an online shop, manage a warehouse, or sell products locally, understanding how barcodes work can save time and reduce errors.
</p>
<p>
In this article, you will learn what barcodes are, how they work, and how a <strong>Barcode Generator</strong> helps you create professional barcodes in seconds.
</p>
{/* SEO Image */}
<div className="my-8 rounded-2xl overflow-hidden shadow-lg not-prose border border-slate-100">
<img
src="/barcode-generator-preview.png"
alt="Free Online Barcode Generator Preview - Create EAN, UPC, and Code 128 Barcodes"
className="w-full h-64 sm:h-80 object-cover"
width="800"
height="320"
/>
<div className="bg-slate-50 p-4 text-sm text-slate-500 text-center border-t border-slate-100">
Use our <strong>free barcode generator</strong> to create scannable codes.
</div>
</div>
<h2>What Is a Barcode?</h2>
<p>
A barcode is a visual representation of data that can be read by machines. It consists of vertical lines with different widths and spacing, which encode numbers or characters. When scanned with a barcode scanner or smartphone, the information is instantly translated into readable data.
</p>
<p>
Barcodes are commonly used to identify products, track inventory, manage logistics, and speed up checkout processes. They reduce manual input and significantly lower the risk of human error.
</p>
<h2>How Does a Barcode Generator Work?</h2>
<p>
A Barcode Generator converts text or numeric input into a barcode format that scanners can read. The process is simple:
</p>
<ul className="list-none pl-0 space-y-4 not-prose my-8">
<li className="flex gap-4">
<div className="w-8 h-8 mt-1 rounded-full bg-slate-100 flex items-center justify-center shrink-0 text-slate-600 font-bold text-sm">1</div>
<div>
<strong className="text-slate-900 block mb-1">Input Data</strong>
<p className="text-slate-600 m-0 text-base">You enter a number or text (for example, a product ID).</p>
</div>
</li>
<li className="flex gap-4">
<div className="w-8 h-8 mt-1 rounded-full bg-slate-100 flex items-center justify-center shrink-0 text-slate-600 font-bold text-sm">2</div>
<div>
<strong className="text-slate-900 block mb-1">Select Format</strong>
<p className="text-slate-600 m-0 text-base">You select a barcode format such as EAN-13 or Code 128.</p>
</div>
</li>
<li className="flex gap-4">
<div className="w-8 h-8 mt-1 rounded-full bg-slate-100 flex items-center justify-center shrink-0 text-slate-600 font-bold text-sm">3</div>
<div>
<strong className="text-slate-900 block mb-1">Generate</strong>
<p className="text-slate-600 m-0 text-base">The generator creates a scannable barcode image instantly.</p>
</div>
</li>
<li className="flex gap-4">
<div className="w-8 h-8 mt-1 rounded-full bg-slate-100 flex items-center justify-center shrink-0 text-slate-600 font-bold text-sm">4</div>
<div>
<strong className="text-slate-900 block mb-1">Download</strong>
<p className="text-slate-600 m-0 text-base">You download or print the barcode for use.</p>
</div>
</li>
</ul>
<p>
A modern <strong>Barcode Generator</strong> works directly in the browser and does not require additional software.
</p>
<h2>Common Types of Barcodes</h2>
<p>
Different barcode formats are used for different purposes. Choosing the right one is important for compatibility and scanning accuracy.
</p>
<div className="grid md:grid-cols-2 gap-6 not-prose my-8">
{/* EAN-13 Card */}
<div className="bg-white p-6 rounded-xl border border-slate-200 shadow-sm hover:shadow-md transition-shadow">
<div className="flex items-center gap-3 mb-3">
<Tag className="w-5 h-5 text-blue-500" />
<h4 className="text-lg font-bold text-slate-900 m-0">EAN-13</h4>
</div>
<div className="text-xs font-mono bg-slate-100 inline-block px-2 py-1 rounded text-slate-500 mb-3">Retail • Europe</div>
<div className="mb-3 bg-slate-50 rounded border border-slate-100 p-2 flex justify-center">
<img src="/barcode-generator-preview.png" alt="EAN-13 Barcode Sample for International Products" className="h-10 object-contain opacity-75 grayscale" width="200" height="40" />
</div>
<p className="text-sm text-slate-600 m-0">
EAN-13 is widely used in retail, especially in Europe. It is designed for consumer products sold in stores and supermarkets.
</p>
</div>
{/* UPC-A Card */}
<div className="bg-white p-6 rounded-xl border border-slate-200 shadow-sm hover:shadow-md transition-shadow">
<div className="flex items-center gap-3 mb-3">
<ShoppingCart className="w-5 h-5 text-indigo-500" />
<h4 className="text-lg font-bold text-slate-900 m-0">UPC-A</h4>
</div>
<div className="text-xs font-mono bg-slate-100 inline-block px-2 py-1 rounded text-slate-500 mb-3">Retail • USA/Canada</div>
<div className="mb-3 bg-slate-50 rounded border border-slate-100 p-2 flex justify-center">
<img src="/barcode-generator-preview.png" alt="UPC-A Barcode Example for Retail Products in USA" className="h-10 object-contain opacity-75 grayscale" width="200" height="40" />
</div>
<p className="text-sm text-slate-600 m-0">
UPC-A is similar to EAN-13 but is mainly used in the United States and Canada for retail products.
</p>
</div>
{/* Code 128 Card */}
<div className="bg-white p-6 rounded-xl border border-slate-200 shadow-sm hover:shadow-md transition-shadow">
<div className="flex items-center gap-3 mb-3">
<Settings className="w-5 h-5 text-emerald-500" />
<h4 className="text-lg font-bold text-slate-900 m-0">Code 128</h4>
</div>
<div className="text-xs font-mono bg-slate-100 inline-block px-2 py-1 rounded text-slate-500 mb-3">Logistics • Universal</div>
<div className="mb-3 bg-slate-50 rounded border border-slate-100 p-2 flex justify-center">
<img src="/barcode-generator-preview.png" alt="Code 128 Barcode for Inventory and Shipping Labels" className="h-10 object-contain opacity-75 grayscale" width="200" height="40" />
</div>
<p className="text-sm text-slate-600 m-0">
Code 128 is a flexible barcode format that supports letters and numbers. It is commonly used in logistics, shipping, and internal tracking systems.
</p>
</div>
{/* Code 39 Card */}
<div className="bg-white p-6 rounded-xl border border-slate-200 shadow-sm hover:shadow-md transition-shadow">
<div className="flex items-center gap-3 mb-3">
<Factory className="w-5 h-5 text-orange-500" />
<h4 className="text-lg font-bold text-slate-900 m-0">Code 39</h4>
</div>
<div className="text-xs font-mono bg-slate-100 inline-block px-2 py-1 rounded text-slate-500 mb-3">Industrial • Military</div>
<div className="mb-3 bg-slate-50 rounded border border-slate-100 p-2 flex justify-center">
<img src="/barcode-generator-preview.png" alt="Code 39 Barcode for Industrial Use" className="h-10 object-contain opacity-75 grayscale" width="200" height="40" />
</div>
<p className="text-sm text-slate-600 m-0">
The first alphanumeric barcode, Code 39 is still widely used in automotive and defense industries. It supports numbers and uppercase letters.
</p>
</div>
{/* MSI Card */}
<div className="bg-white p-6 rounded-xl border border-slate-200 shadow-sm hover:shadow-md transition-shadow">
<div className="flex items-center gap-3 mb-3">
<Layers className="w-5 h-5 text-purple-500" />
<h4 className="text-lg font-bold text-slate-900 m-0">MSI</h4>
</div>
<div className="text-xs font-mono bg-slate-100 inline-block px-2 py-1 rounded text-slate-500 mb-3">Inventory • Shelves</div>
<div className="mb-3 bg-slate-50 rounded border border-slate-100 p-2 flex justify-center">
<img src="/barcode-generator-preview.png" alt="MSI Barcode for Inventory Management" className="h-10 object-contain opacity-75 grayscale" width="200" height="40" />
</div>
<p className="text-sm text-slate-600 m-0">
MSI (Modified Plessey) is often used for inventory control in retail environments, such as labeling shelves in supermarkets and warehouses.
</p>
</div>
{/* Pharmacode Card */}
<div className="bg-white p-6 rounded-xl border border-slate-200 shadow-sm hover:shadow-md transition-shadow">
<div className="flex items-center gap-3 mb-3">
<Activity className="w-5 h-5 text-red-500" />
<h4 className="text-lg font-bold text-slate-900 m-0">Pharmacode</h4>
</div>
<div className="text-xs font-mono bg-slate-100 inline-block px-2 py-1 rounded text-slate-500 mb-3">Pharma • Packaging</div>
<div className="mb-3 bg-slate-50 rounded border border-slate-100 p-2 flex justify-center">
<img src="/barcode-generator-preview.png" alt="Pharmacode for Pharmaceutical Packaging" className="h-10 object-contain opacity-75 grayscale" width="200" height="40" />
</div>
<p className="text-sm text-slate-600 m-0">
Pharmacode is a specialized barcode standard used in the pharmaceutical industry for packaging control to prevent medication errors.
</p>
</div>
</div>
<h2>Why Use a Barcode Generator?</h2>
<p>Using a Barcode Generator offers several advantages:</p>
<div className="not-prose grid gap-4 mb-8">
<div className="flex gap-4 items-start">
<CheckCircle className="w-5 h-5 text-green-500 mt-1 shrink-0" />
<div>
<h5 className="font-bold text-slate-900 m-0">Speed</h5>
<p className="text-slate-600 text-sm m-0">Create barcodes instantly without technical knowledge.</p>
</div>
</div>
<div className="flex gap-4 items-start">
<CheckCircle className="w-5 h-5 text-green-500 mt-1 shrink-0" />
<div>
<h5 className="font-bold text-slate-900 m-0">Accuracy</h5>
<p className="text-slate-600 text-sm m-0">Reduce manual data entry errors.</p>
</div>
</div>
<div className="flex gap-4 items-start">
<CheckCircle className="w-5 h-5 text-green-500 mt-1 shrink-0" />
<div>
<h5 className="font-bold text-slate-900 m-0">Flexibility</h5>
<p className="text-slate-600 text-sm m-0">Generate barcodes for different formats and use cases.</p>
</div>
</div>
<div className="flex gap-4 items-start">
<CheckCircle className="w-5 h-5 text-green-500 mt-1 shrink-0" />
<div>
<h5 className="font-bold text-slate-900 m-0">Cost-effective</h5>
<p className="text-slate-600 text-sm m-0">No need for expensive software or hardware.</p>
</div>
</div>
</div>
<p>
For small businesses, online shops, and startups, a <strong>free Barcode Generator</strong> is often the easiest way to get started.
</p>
<h2>Barcode vs QR Code</h2>
<p>
Although barcodes and QR codes are often confused, they serve different purposes. A barcode stores data horizontally and is mainly used for product identification. A <Link href="/tools/url-qr-code" className="text-blue-600 hover:underline">QR code</Link> stores data both horizontally and vertically and can contain more complex information such as URLs or <Link href="/tools/vcard-qr-code" className="text-blue-600 hover:underline">contact details</Link>.
</p>
<p>
If you only need to identify products or inventory items, a classic barcode is usually the better choice.
</p>
<h2>Are Barcodes Free to Use?</h2>
<p>
The barcode image itself can be generated for free using a Barcode Generator. However, for retail products sold internationally, the barcode number may need to be officially registered through organizations such as GS1. This ensures that the barcode is unique and recognized globally.
</p>
<p>
For internal use, testing, or small projects, free barcode generation is usually sufficient.
</p>
<h2>Use Cases for Barcodes</h2>
<p>Barcodes are used in many industries, including:</p>
<ul className="list-disc pl-6 space-y-2 mb-8">
<li>Retail and e-commerce</li>
<li>Inventory and warehouse management</li>
<li>Shipping and logistics</li>
<li>Libraries and document tracking</li>
<li>Event tickets and labeling</li>
</ul>
<p>
A reliable <strong>Barcode Generator</strong> helps streamline these processes and improves efficiency.
</p>
<h2>Understanding Check Digits</h2>
<p>
Most barcodes (like EAN and UPC) include a "Check Digit"—the last number in the sequence. This digit is calculated mathematically from the other numbers to ensure the barcode is scanned correctly. Even if a barcode is slightly damaged or scratched, the scanner uses the check digit to verify the integrity of the data.
</p>
<h2>Best Practices for Printing Barcodes</h2>
<p>
To ensure your barcodes scan instantly at the checkout or in the warehouse, follow these printing tips:
</p>
<ul className="list-disc pl-6 space-y-2 mb-8">
<li><strong>High Contrast:</strong> Always print black bars on a white background. Reverse colors (white bars on black) often fail to scan.</li>
<li><strong>Quiet Zone:</strong> Leave enough white space (margins) on the left and right sides of the barcode.</li>
<li><strong>Resolution:</strong> For professional labels, use <strong>SVG format</strong> (vector) or high-resolution PNGs (at least 300 DPI) to avoid blurry edges.</li>
<li><strong>Size:</strong> Do not scale the barcode too small. Standard EAN-13 codes should be at least 30mm wide for reliable scanning.</li>
</ul>
<hr className="my-12 border-slate-200" />
<div className="flex items-center gap-3 mb-6 not-prose">
<HelpCircle className="w-6 h-6 text-blue-500" />
<h2 className="text-2xl font-bold text-slate-900 m-0">Frequently Asked Questions (FAQ)</h2>
</div>
<div className="not-prose space-y-8">
<div>
<h5 className="font-bold text-slate-900 text-lg mb-2">❓ What is a Barcode Generator?</h5>
<p className="text-slate-600">A Barcode Generator is an online tool that converts numbers or text into scannable barcode images that can be used for products, labels, and inventory systems.</p>
</div>
<div>
<h5 className="font-bold text-slate-900 text-lg mb-2">❓ Is this barcode generator free to use?</h5>
<p className="text-slate-600">Yes, our online barcode generator is completely free to use with no hidden costs or sign-ups required. You can generate, download, and print barcodes instantly.</p>
</div>
<div>
<h5 className="font-bold text-slate-900 text-lg mb-2">❓ Which barcode format should I use?</h5>
<p className="text-slate-600">
<strong>EAN-13:</strong> Standard for retail products in Europe and globally.<br />
<strong>UPC-A:</strong> Standard for retail products in USA/Canada.<br />
<strong>Code 128:</strong> Best for logistics, shipping, and internal tracking (supports letters & numbers).
</p>
</div>
<div>
<h5 className="font-bold text-slate-900 text-lg mb-2">❓ Can I download barcodes in vector format (SVG)?</h5>
<p className="text-slate-600">Yes! We offer <strong>SVG downloads</strong>. SVG files are vector-based, meaning they can be scaled to any size without losing quality—perfect for professional product packaging.</p>
</div>
<div>
<h5 className="font-bold text-slate-900 text-lg mb-2">❓ How do I generate a barcode online?</h5>
<p className="text-slate-600">To generate a barcode online, enter your product number or text, select the desired barcode format (such as EAN-13 or Code 128), and click the generate button. The barcode will be created instantly.</p>
</div>
<div>
<h5 className="font-bold text-slate-900 text-lg mb-2">❓ Are generated barcodes scannable?</h5>
<p className="text-slate-600">Yes, barcodes generated with a proper barcode generator are fully scannable. We generate standard-compliant barcodes readable by any standard optical or laser barcode scanner.</p>
</div>
<div>
<h5 className="font-bold text-slate-900 text-lg mb-2">❓ Can I use these barcodes for Amazon (EAN/UPC)?</h5>
<p className="text-slate-600">You can generate the <em>image</em> for Amazon here if you already have your EAN/UPC number. However, you cannot "create" a valid global EAN number here—you must purchase those official numbers from GS1 to sell on major platforms like Amazon.</p>
</div>
<div>
<h5 className="font-bold text-slate-900 text-lg mb-2">❓ What is the difference between a barcode and a QR code?</h5>
<p className="text-slate-600">A barcode stores data horizontally (1D) and is mainly used for product IDs. A QR code stores data in 2D (matrix) and can hold much more information, such as URLs, vCards, or WiFi credentials.</p>
</div>
</div>
<div className="mt-12 p-6 bg-slate-900 rounded-xl text-white not-prose">
<h4 className="text-lg font-bold mb-2">Final Thoughts</h4>
<p className="text-slate-300 m-0">
A Barcode Generator is a simple yet powerful tool that helps businesses save time, reduce errors, and improve operational efficiency. By choosing the right barcode format and using a reliable generator, you can create professional barcodes that work across different systems and industries.
</p>
</div>
</div>
</section>
);
}

606
src/app/(main)/(marketing)/tools/barcode-generator/page.tsx
View File

@@ -1,303 +1,303 @@
import React from 'react';
import type { Metadata } from 'next';
import BarcodeGeneratorClient from './BarcodeGeneratorClient';
import { BarcodeGuide } from './BarcodeGuide';
import { Barcode as BarcodeIcon, Shield, Zap, Printer, Download, Share2, Sparkles, Sliders, Check } from 'lucide-react';
import { ToolBreadcrumb } from '@/components/seo/BreadcrumbSchema';
import { RelatedTools } from '@/components/marketing/RelatedTools';
import { generateSoftwareAppSchema, generateFaqSchema } from '@/lib/schema-utils';
// SEO Optimized Metadata
export const metadata: Metadata = {
title: {
absolute: 'Barcode Generator – Create Barcodes Online for Free',
},
description: 'Use a free Barcode Generator to create scannable barcodes online. Supports EAN, UPC and Code 128 for products, labels and inventory.',
keywords: ['barcode generator', 'online barcode maker', 'create barcode free', 'ean-13 generator', 'upc-a generator', 'code 128 generator', 'barcode creator', 'printable barcodes'],
alternates: {
canonical: 'https://www.qrmaster.net/tools/barcode-generator',
},
openGraph: {
title: 'Barcode Generator: Create EAN, UPC & Code 128',
description: 'Barcode Generator: Create professional labels instantly. Free & Secured.',
url: 'https://www.qrmaster.net/tools/barcode-generator',
siteName: 'QR Master',
locale: 'en_US',
type: 'website',
images: [{ url: '/barcode-generator-preview.png', width: 1200, height: 630 }],
},
twitter: {
card: 'summary_large_image',
title: 'Free Barcode Generator',
description: 'Create custom barcodes in seconds. Download high-quality PNG/SVG.',
},
robots: {
index: true,
follow: true,
},
};
// JSON-LD Structured Data
const jsonLd = {
'@context': 'https://schema.org',
'@graph': [
generateSoftwareAppSchema(
'Barcode Generator',
'Generate custom printable barcodes instantly for EAN, UPC, Code 128 and more.',
'/og-barcode-generator.png',
'UtilitiesApplication'
),
{
'@type': 'HowTo',
name: 'How to Create a Barcode',
description: 'Create custom barcodes for products or inventory.',
step: [
{
'@type': 'HowToStep',
position: 1,
name: 'Enter Content',
text: 'Type or paste the numeric or alphanumeric data for your barcode.',
},
{
'@type': 'HowToStep',
position: 2,
name: 'Select Format',
text: 'Choose the appropriate barcode type (e.g., Code 128 for general use, EAN-13 for retail).',
},
{
'@type': 'HowToStep',
position: 3,
name: 'Customize Design',
text: 'Adjust the height and width of the barcode to fit your needs.',
},
{
'@type': 'HowToStep',
position: 4,
name: 'Toggle Text',
text: 'Decide if you want the human-readable value to appear below the barcode.',
},
{
'@type': 'HowToStep',
position: 5,
name: 'Download & Print',
text: 'Save your barcode as PNG or SVG and print it for labels or inventory.',
},
],
totalTime: 'PT20S',
},
generateFaqSchema({
'What is a Barcode Generator?': {
question: 'What is a Barcode Generator?',
answer: 'A Barcode Generator is an online tool that converts numbers or text into scannable barcode images that can be used for products, labels, and inventory systems.',
},
'Is this barcode generator free to use?': {
question: 'Is this barcode generator free to use?',
answer: 'Yes, our online barcode generator is completely free to use with no hidden costs or sign-ups required. You can generate, download, and print barcodes instantly.',
},
'Which barcode format should I use?': {
question: 'Which barcode format should I use?',
answer: 'EAN-13 is standard for retail in Europe/Global. UPC-A is standard for retail in USA/Canada. Code 128 is best for logistics and internal tracking as it supports letters and numbers.',
},
'Can I download barcodes in vector format (SVG)?': {
question: 'Can I download barcodes in vector format (SVG)?',
answer: 'Yes! We offer SVG downloads. SVG files are vector-based, meaning they can be scaled to any size without losing quality—perfect for professional product packaging.',
},
'How do I generate a barcode online?': {
question: 'How do I generate a barcode online?',
answer: 'To generate a barcode online, enter your product number or text, select the desired barcode format (such as EAN-13 or Code 128), and click the generate button. The barcode will be created instantly.',
},
'Are generated barcodes scannable?': {
question: 'Are generated barcodes scannable?',
answer: 'Yes, barcodes generated with a proper barcode generator are fully scannable. We generate standard-compliant barcodes readable by any standard optical or laser barcode scanner.',
},
'Can I use these barcodes for Amazon (EAN/UPC)?': {
question: 'Can I use these barcodes for Amazon (EAN/UPC)?',
answer: 'You can generate the image for Amazon here if you already have your EAN/UPC number. However, you cannot "create" a valid global EAN number here—you must purchase those official numbers from GS1 to sell on major platforms like Amazon.',
},
'What is the difference between a barcode and a QR code?': {
question: 'What is the difference between a barcode and a QR code?',
answer: 'A barcode stores data horizontally (1D) and is mainly used for product IDs. A QR code stores data in 2D (matrix) and can hold much more information, such as URLs, vCards, or WiFi credentials.',
},
}),
],
};
export default function BarcodeGeneratorPage() {
return (
<>
<script
type="application/ld+json"
dangerouslySetInnerHTML={{ __html: JSON.stringify(jsonLd) }}
/>
<ToolBreadcrumb toolName="Barcode Generator" toolSlug="barcode-generator" />
<div className="min-h-screen" style={{ backgroundColor: '#EBEBDF' }}>
{/* HERO SECTION */}
<section className="relative pt-20 pb-20 lg:pt-32 lg:pb-32 px-4 sm:px-6 lg:px-8 overflow-hidden bg-slate-900">
<div className="absolute inset-0 opacity-10">
{/* Barcode Pattern */}
<svg className="w-full h-full" width="100%" height="100%" xmlns="http://www.w3.org/2000/svg">
<defs>
<pattern id="barcode_pattern" width="60" height="60" patternUnits="userSpaceOnUse">
<path d="M5 0 V 60 M15 0 V 60 M20 0 V 60 M35 0 V 60 M40 0 V 60 M55 0 V 60" stroke="white" strokeWidth="2" strokeOpacity="0.5" />
</pattern>
</defs>
<rect width="100%" height="100%" fill="url(#barcode_pattern)" />
</svg>
</div>
<div className="max-w-7xl mx-auto grid lg:grid-cols-2 gap-12 items-center relative z-10">
<div className="text-center lg:text-left">
<div className="inline-flex items-center gap-2 px-3 py-1 rounded-full bg-white/10 text-white/90 text-sm font-medium mb-6 backdrop-blur-sm border border-white/10 hover:bg-white/20 transition-colors cursor-default">
<span className="flex h-2 w-2 relative">
<span className="animate-ping absolute inline-flex h-full w-full rounded-full bg-blue-400 opacity-75"></span>
<span className="relative inline-flex rounded-full h-2 w-2 bg-blue-400"></span>
</span>
Free Tool — Professional & Fast
</div>
<h1 className="text-4xl md:text-5xl lg:text-6xl font-extrabold text-white tracking-tight leading-tight mb-6">
Free Online <span className="text-blue-400">Barcode Generator</span>
</h1>
<p className="text-lg md:text-xl text-slate-400 max-w-2xl mx-auto lg:mx-0 mb-8 leading-relaxed">
Our <strong>barcode generator</strong> makes it easy to create and print high-quality labels for products and inventory.
<span className="text-white block sm:inline mt-2 sm:mt-0"> Supports EAN, UPC, Code 128.</span>
</p>
<div className="flex flex-wrap justify-center lg:justify-start gap-4 text-sm font-medium text-white/80">
<div className="flex items-center gap-2 bg-white/5 px-4 py-2.5 rounded-xl border border-white/10 backdrop-blur-sm">
<Check className="w-4 h-4 text-blue-400" />
Retail Ready
</div>
<div className="flex items-center gap-2 bg-white/5 px-4 py-2.5 rounded-xl border border-white/10 backdrop-blur-sm">
<Check className="w-4 h-4 text-blue-400" />
Vector SVG Export
</div>
<div className="flex items-center gap-2 bg-white/5 px-4 py-2.5 rounded-xl border border-white/10 backdrop-blur-sm">
<Check className="w-4 h-4 text-blue-400" />
No Registration
</div>
</div>
</div>
{/* Visual Abstract */}
<div className="hidden lg:flex relative items-center justify-center min-h-[400px]">
<div className="absolute w-[500px] h-[500px] bg-blue-500/10 rounded-full blur-[100px] -top-20 -right-20 animate-pulse" />
<div className="relative w-80 h-96 bg-white/5 backdrop-blur-xl border border-white/20 rounded-3xl shadow-2xl flex flex-col items-center justify-center p-8 transform rotate-2 hover:-rotate-1 transition-all duration-700 group">
<div className="absolute inset-0 bg-gradient-to-br from-white/5 to-transparent rounded-3xl" />
<div className="w-full bg-gradient-to-br from-blue-400 to-indigo-600 rounded-xl shadow-lg p-5 mb-6 relative overflow-hidden text-white">
<div className="flex justify-between items-start mb-4">
<BarcodeIcon className="w-8 h-8 opacity-80" />
<div className="bg-white/20 px-2 py-1 rounded text-xs font-bold uppercase tracking-wider">Label</div>
</div>
<div className="text-xl font-bold tracking-wider mb-1">PROD-98234</div>
<div className="text-xs opacity-70">Inventory ID</div>
</div>
<div className="w-48 h-32 bg-white rounded-xl p-4 shadow-inner relative overflow-hidden flex flex-col items-center justify-center">
<div className="w-full h-16 bg-black flex gap-1 mb-2">
{[2, 4, 1, 3, 2, 1, 4, 2, 1, 3].map((w, i) => (
<div key={i} className="bg-black flex-1" style={{ flex: w }} />
))}
</div>
<div className="text-[10px] font-mono font-bold tracking-widest uppercase">98234001A</div>
</div>
{/* Floating Badge */}
<div className="absolute -bottom-6 -right-6 bg-slate-900 border border-white/10 py-3 px-5 rounded-xl shadow-xl flex items-center gap-3 transform transition-transform hover:scale-105 duration-300">
<div className="bg-blue-500/20 p-2 rounded-full">
<Printer className="w-5 h-5 text-blue-500" />
</div>
<div className="text-left">
<div className="text-[10px] text-slate-400 font-bold uppercase tracking-wider">Ready</div>
<div className="text-sm font-bold text-white">Print Instantly</div>
</div>
</div>
</div>
</div>
</div>
</section>
{/* GENERATOR SECTION */}
<section className="py-12 px-4 sm:px-6 lg:px-8 -mt-8">
<BarcodeGeneratorClient />
</section>
{/* HOW IT WORKS */}
<section className="py-16 px-4 sm:px-6 lg:px-8 bg-white">
<div className="max-w-4xl mx-auto">
<h2 className="text-3xl font-bold text-slate-900 text-center mb-12">
How Our Barcode Generator Works
</h2>
<div className="grid md:grid-cols-3 lg:grid-cols-5 gap-8">
<article className="text-center">
<div className="w-12 h-12 rounded-2xl bg-black flex items-center justify-center mx-auto mb-4">
<Sliders className="w-6 h-6 text-white" />
</div>
<h3 className="font-bold text-slate-900 mb-2">1. Configure</h3>
<p className="text-slate-600 text-xs leading-relaxed">
Enter your data and select the format.
</p>
</article>
<article className="text-center">
<div className="w-12 h-12 rounded-2xl bg-black flex items-center justify-center mx-auto mb-4">
<Sparkles className="w-6 h-6 text-white" />
</div>
<h3 className="font-bold text-slate-900 mb-2">2. Customize</h3>
<p className="text-slate-600 text-xs leading-relaxed">
Adjust height, width and text display.
</p>
</article>
<article className="text-center">
<div className="w-12 h-12 rounded-2xl bg-black flex items-center justify-center mx-auto mb-4">
<Zap className="w-6 h-6 text-white" />
</div>
<h3 className="font-bold text-slate-900 mb-2">3. Preview</h3>
<p className="text-slate-600 text-xs leading-relaxed">
See your barcode update in real-time.
</p>
</article>
<article className="text-center">
<div className="w-12 h-12 rounded-2xl bg-black flex items-center justify-center mx-auto mb-4">
<Download className="w-6 h-6 text-white" />
</div>
<h3 className="font-bold text-slate-900 mb-2">4. Download</h3>
<p className="text-slate-600 text-xs leading-relaxed">
Save as professional PNG or SVG.
</p>
</article>
<article className="text-center">
<div className="w-12 h-12 rounded-2xl bg-black flex items-center justify-center mx-auto mb-4">
<Printer className="w-6 h-6 text-white" />
</div>
<h3 className="font-bold text-slate-900 mb-2">5. Print</h3>
<p className="text-slate-600 text-xs leading-relaxed">
Print labels directly from your browser.
</p>
</article>
</div>
</div>
</section>
{/* RELATED TOOLS */}
<RelatedTools />
{/* SEO GUIDE */}
<BarcodeGuide />
</div>
</>
);
}
import React from 'react';
import type { Metadata } from 'next';
import BarcodeGeneratorClient from './BarcodeGeneratorClient';
import { BarcodeGuide } from './BarcodeGuide';
import { Barcode as BarcodeIcon, Shield, Zap, Printer, Download, Share2, Sparkles, Sliders, Check } from 'lucide-react';
import { ToolBreadcrumb } from '@/components/seo/BreadcrumbSchema';
import { RelatedTools } from '@/components/marketing/RelatedTools';
import { generateSoftwareAppSchema, generateFaqSchema } from '@/lib/schema-utils';
// SEO Optimized Metadata
export const metadata: Metadata = {
title: {
absolute: 'Barcode Generator – Create Barcodes Online for Free',
},
description: 'Use a free Barcode Generator to create scannable barcodes online. Supports EAN, UPC and Code 128 for products, labels and inventory.',
keywords: ['barcode generator', 'online barcode maker', 'create barcode free', 'ean-13 generator', 'upc-a generator', 'code 128 generator', 'barcode creator', 'printable barcodes'],
alternates: {
canonical: 'https://www.qrmaster.net/tools/barcode-generator',
},
openGraph: {
title: 'Barcode Generator: Create EAN, UPC & Code 128',
description: 'Barcode Generator: Create professional labels instantly. Free & Secured.',
url: 'https://www.qrmaster.net/tools/barcode-generator',
siteName: 'QR Master',
locale: 'en_US',
type: 'website',
images: [{ url: '/barcode-generator-preview.png', width: 1200, height: 630 }],
},
twitter: {
card: 'summary_large_image',
title: 'Free Barcode Generator',
description: 'Create custom barcodes in seconds. Download high-quality PNG/SVG.',
},
robots: {
index: true,
follow: true,
},
};
// JSON-LD Structured Data
const jsonLd = {
'@context': 'https://schema.org',
'@graph': [
generateSoftwareAppSchema(
'Barcode Generator',
'Generate custom printable barcodes instantly for EAN, UPC, Code 128 and more.',
'/og-barcode-generator.png',
'UtilitiesApplication'
),
{
'@type': 'HowTo',
name: 'How to Create a Barcode',
description: 'Create custom barcodes for products or inventory.',
step: [
{
'@type': 'HowToStep',
position: 1,
name: 'Enter Content',
text: 'Type or paste the numeric or alphanumeric data for your barcode.',
},
{
'@type': 'HowToStep',
position: 2,
name: 'Select Format',
text: 'Choose the appropriate barcode type (e.g., Code 128 for general use, EAN-13 for retail).',
},
{
'@type': 'HowToStep',
position: 3,
name: 'Customize Design',
text: 'Adjust the height and width of the barcode to fit your needs.',
},
{
'@type': 'HowToStep',
position: 4,
name: 'Toggle Text',
text: 'Decide if you want the human-readable value to appear below the barcode.',
},
{
'@type': 'HowToStep',
position: 5,
name: 'Download & Print',
text: 'Save your barcode as PNG or SVG and print it for labels or inventory.',
},
],
totalTime: 'PT20S',
},
generateFaqSchema({
'What is a Barcode Generator?': {
question: 'What is a Barcode Generator?',
answer: 'A Barcode Generator is an online tool that converts numbers or text into scannable barcode images that can be used for products, labels, and inventory systems.',
},
'Is this barcode generator free to use?': {
question: 'Is this barcode generator free to use?',
answer: 'Yes, our online barcode generator is completely free to use with no hidden costs or sign-ups required. You can generate, download, and print barcodes instantly.',
},
'Which barcode format should I use?': {
question: 'Which barcode format should I use?',
answer: 'EAN-13 is standard for retail in Europe/Global. UPC-A is standard for retail in USA/Canada. Code 128 is best for logistics and internal tracking as it supports letters and numbers.',
},
'Can I download barcodes in vector format (SVG)?': {
question: 'Can I download barcodes in vector format (SVG)?',
answer: 'Yes! We offer SVG downloads. SVG files are vector-based, meaning they can be scaled to any size without losing quality—perfect for professional product packaging.',
},
'How do I generate a barcode online?': {
question: 'How do I generate a barcode online?',
answer: 'To generate a barcode online, enter your product number or text, select the desired barcode format (such as EAN-13 or Code 128), and click the generate button. The barcode will be created instantly.',
},
'Are generated barcodes scannable?': {
question: 'Are generated barcodes scannable?',
answer: 'Yes, barcodes generated with a proper barcode generator are fully scannable. We generate standard-compliant barcodes readable by any standard optical or laser barcode scanner.',
},
'Can I use these barcodes for Amazon (EAN/UPC)?': {
question: 'Can I use these barcodes for Amazon (EAN/UPC)?',
answer: 'You can generate the image for Amazon here if you already have your EAN/UPC number. However, you cannot "create" a valid global EAN number here—you must purchase those official numbers from GS1 to sell on major platforms like Amazon.',
},
'What is the difference between a barcode and a QR code?': {
question: 'What is the difference between a barcode and a QR code?',
answer: 'A barcode stores data horizontally (1D) and is mainly used for product IDs. A QR code stores data in 2D (matrix) and can hold much more information, such as URLs, vCards, or WiFi credentials.',
},
}),
],
};
export default function BarcodeGeneratorPage() {
return (
<>
<script
type="application/ld+json"
dangerouslySetInnerHTML={{ __html: JSON.stringify(jsonLd) }}
/>
<ToolBreadcrumb toolName="Barcode Generator" toolSlug="barcode-generator" />
<div className="min-h-screen" style={{ backgroundColor: '#EBEBDF' }}>
{/* HERO SECTION */}
<section className="relative pt-20 pb-20 lg:pt-32 lg:pb-32 px-4 sm:px-6 lg:px-8 overflow-hidden bg-slate-900">
<div className="absolute inset-0 opacity-10">
{/* Barcode Pattern */}
<svg className="w-full h-full" width="100%" height="100%" xmlns="http://www.w3.org/2000/svg">
<defs>
<pattern id="barcode_pattern" width="60" height="60" patternUnits="userSpaceOnUse">
<path d="M5 0 V 60 M15 0 V 60 M20 0 V 60 M35 0 V 60 M40 0 V 60 M55 0 V 60" stroke="white" strokeWidth="2" strokeOpacity="0.5" />
</pattern>
</defs>
<rect width="100%" height="100%" fill="url(#barcode_pattern)" />
</svg>
</div>
<div className="max-w-7xl mx-auto grid lg:grid-cols-2 gap-12 items-center relative z-10">
<div className="text-center lg:text-left">
<div className="inline-flex items-center gap-2 px-3 py-1 rounded-full bg-white/10 text-white/90 text-sm font-medium mb-6 backdrop-blur-sm border border-white/10 hover:bg-white/20 transition-colors cursor-default">
<span className="flex h-2 w-2 relative">
<span className="animate-ping absolute inline-flex h-full w-full rounded-full bg-blue-400 opacity-75"></span>
<span className="relative inline-flex rounded-full h-2 w-2 bg-blue-400"></span>
</span>
Free Tool — Professional & Fast
</div>
<h1 className="text-4xl md:text-5xl lg:text-6xl font-extrabold text-white tracking-tight leading-tight mb-6">
Free Online <span className="text-blue-400">Barcode Generator</span>
</h1>
<p className="text-lg md:text-xl text-slate-400 max-w-2xl mx-auto lg:mx-0 mb-8 leading-relaxed">
Our <strong>barcode generator</strong> makes it easy to create and print high-quality labels for products and inventory.
<span className="text-white block sm:inline mt-2 sm:mt-0"> Supports EAN, UPC, Code 128.</span>
</p>
<div className="flex flex-wrap justify-center lg:justify-start gap-4 text-sm font-medium text-white/80">
<div className="flex items-center gap-2 bg-white/5 px-4 py-2.5 rounded-xl border border-white/10 backdrop-blur-sm">
<Check className="w-4 h-4 text-blue-400" />
Retail Ready
</div>
<div className="flex items-center gap-2 bg-white/5 px-4 py-2.5 rounded-xl border border-white/10 backdrop-blur-sm">
<Check className="w-4 h-4 text-blue-400" />
Vector SVG Export
</div>
<div className="flex items-center gap-2 bg-white/5 px-4 py-2.5 rounded-xl border border-white/10 backdrop-blur-sm">
<Check className="w-4 h-4 text-blue-400" />
No Registration
</div>
</div>
</div>
{/* Visual Abstract */}
<div className="hidden lg:flex relative items-center justify-center min-h-[400px]">
<div className="absolute w-[500px] h-[500px] bg-blue-500/10 rounded-full blur-[100px] -top-20 -right-20 animate-pulse" />
<div className="relative w-80 h-96 bg-white/5 backdrop-blur-xl border border-white/20 rounded-3xl shadow-2xl flex flex-col items-center justify-center p-8 transform rotate-2 hover:-rotate-1 transition-all duration-700 group">
<div className="absolute inset-0 bg-gradient-to-br from-white/5 to-transparent rounded-3xl" />
<div className="w-full bg-gradient-to-br from-blue-400 to-indigo-600 rounded-xl shadow-lg p-5 mb-6 relative overflow-hidden text-white">
<div className="flex justify-between items-start mb-4">
<BarcodeIcon className="w-8 h-8 opacity-80" />
<div className="bg-white/20 px-2 py-1 rounded text-xs font-bold uppercase tracking-wider">Label</div>
</div>
<div className="text-xl font-bold tracking-wider mb-1">PROD-98234</div>
<div className="text-xs opacity-70">Inventory ID</div>
</div>
<div className="w-48 h-32 bg-white rounded-xl p-4 shadow-inner relative overflow-hidden flex flex-col items-center justify-center">
<div className="w-full h-16 bg-black flex gap-1 mb-2">
{[2, 4, 1, 3, 2, 1, 4, 2, 1, 3].map((w, i) => (
<div key={i} className="bg-black flex-1" style={{ flex: w }} />
))}
</div>
<div className="text-[10px] font-mono font-bold tracking-widest uppercase">98234001A</div>
</div>
{/* Floating Badge */}
<div className="absolute -bottom-6 -right-6 bg-slate-900 border border-white/10 py-3 px-5 rounded-xl shadow-xl flex items-center gap-3 transform transition-transform hover:scale-105 duration-300">
<div className="bg-blue-500/20 p-2 rounded-full">
<Printer className="w-5 h-5 text-blue-500" />
</div>
<div className="text-left">
<div className="text-[10px] text-slate-400 font-bold uppercase tracking-wider">Ready</div>
<div className="text-sm font-bold text-white">Print Instantly</div>
</div>
</div>
</div>
</div>
</div>
</section>
{/* GENERATOR SECTION */}
<section className="py-12 px-4 sm:px-6 lg:px-8 -mt-8">
<BarcodeGeneratorClient />
</section>
{/* HOW IT WORKS */}
<section className="py-16 px-4 sm:px-6 lg:px-8 bg-white">
<div className="max-w-4xl mx-auto">
<h2 className="text-3xl font-bold text-slate-900 text-center mb-12">
How Our Barcode Generator Works
</h2>
<div className="grid md:grid-cols-3 lg:grid-cols-5 gap-8">
<article className="text-center">
<div className="w-12 h-12 rounded-2xl bg-black flex items-center justify-center mx-auto mb-4">
<Sliders className="w-6 h-6 text-white" />
</div>
<h3 className="font-bold text-slate-900 mb-2">1. Configure</h3>
<p className="text-slate-600 text-xs leading-relaxed">
Enter your data and select the format.
</p>
</article>
<article className="text-center">
<div className="w-12 h-12 rounded-2xl bg-black flex items-center justify-center mx-auto mb-4">
<Sparkles className="w-6 h-6 text-white" />
</div>
<h3 className="font-bold text-slate-900 mb-2">2. Customize</h3>
<p className="text-slate-600 text-xs leading-relaxed">
Adjust height, width and text display.
</p>
</article>
<article className="text-center">
<div className="w-12 h-12 rounded-2xl bg-black flex items-center justify-center mx-auto mb-4">
<Zap className="w-6 h-6 text-white" />
</div>
<h3 className="font-bold text-slate-900 mb-2">3. Preview</h3>
<p className="text-slate-600 text-xs leading-relaxed">
See your barcode update in real-time.
</p>
</article>
<article className="text-center">
<div className="w-12 h-12 rounded-2xl bg-black flex items-center justify-center mx-auto mb-4">
<Download className="w-6 h-6 text-white" />
</div>
<h3 className="font-bold text-slate-900 mb-2">4. Download</h3>
<p className="text-slate-600 text-xs leading-relaxed">
Save as professional PNG or SVG.
</p>
</article>
<article className="text-center">
<div className="w-12 h-12 rounded-2xl bg-black flex items-center justify-center mx-auto mb-4">
<Printer className="w-6 h-6 text-white" />
</div>
<h3 className="font-bold text-slate-900 mb-2">5. Print</h3>
<p className="text-slate-600 text-xs leading-relaxed">
Print labels directly from your browser.
</p>
</article>
</div>
</div>
</section>
{/* RELATED TOOLS */}
<RelatedTools />
{/* SEO GUIDE */}
<BarcodeGuide />
</div>
</>
);
}

494
src/app/(main)/(marketing)/tools/call-qr-code-generator/PhoneGenerator.tsx
View File

@@ -1,247 +1,247 @@
'use client';
import React, { useState, useRef } from 'react';
import Link from 'next/link';
import { QRCodeSVG } from 'qrcode.react';
import {
Phone,
Download,
Check,
Sparkles,
Smartphone
} from 'lucide-react';
import { Button } from '@/components/ui/Button';
import { Input } from '@/components/ui/Input';
import { cn } from '@/lib/utils';
// Brand Colors
const BRAND = {
paleGrey: '#EBEBDF',
richBlue: '#1A1265',
richBlueLight: '#2A2275',
};
// QR Color Options
const QR_COLORS = [
{ name: 'Classic Black', value: '#000000' },
{ name: 'Deep Blue', value: '#1E40AF' },
{ name: 'Violet', value: '#7C3AED' },
{ name: 'Teal', value: '#0D9488' },
{ name: 'Coral', value: '#F43F5E' },
{ name: 'Amber', value: '#D97706' },
{ name: 'Emerald', value: '#10B981' },
{ name: 'Rose', value: '#F43F5E' },
];
// Frame Options
const FRAME_OPTIONS = [
{ id: 'none', label: 'No Frame' },
{ id: 'scanme', label: 'Scan Me' },
{ id: 'call', label: 'Call Me' },
{ id: 'contact', label: 'Contact' },
];
export default function PhoneGenerator() {
const [phone, setPhone] = useState('');
const [qrColor, setQrColor] = useState(BRAND.richBlue);
const [frameType, setFrameType] = useState('none');
const qrRef = useRef<HTMLDivElement>(null);
const qrValue = `tel:${phone}`;
const handleDownload = async (format: 'png' | 'svg') => {
if (!qrRef.current) return;
try {
if (format === 'png') {
const { toPng } = await import('html-to-image');
const dataUrl = await toPng(qrRef.current, { cacheBust: true, pixelRatio: 3 });
const link = document.createElement('a');
link.download = `call-qr-code.png`;
link.href = dataUrl;
link.click();
} else {
const svgData = qrRef.current.querySelector('svg')?.outerHTML;
if (svgData) {
const blob = new Blob([svgData], { type: 'image/svg+xml;charset=utf-8' });
const url = URL.createObjectURL(blob);
const link = document.createElement('a');
link.href = url;
link.download = `call-qr-code.svg`;
link.click();
}
}
} catch (err) {
console.error('Download failed', err);
}
};
const getFrameLabel = () => {
const frame = FRAME_OPTIONS.find(f => f.id === frameType);
return frame?.id !== 'none' ? frame?.label : null;
};
return (
<div className="w-full max-w-5xl mx-auto px-4 md:px-6">
{/* Main Generator Card */}
<div className="bg-white rounded-3xl shadow-2xl shadow-slate-900/10 overflow-hidden border border-slate-100">
<div className="grid lg:grid-cols-2">
{/* LEFT: Input Section */}
<div className="p-6 md:p-8 lg:p-10 space-y-8 border-r border-slate-100">
{/* Phone Details */}
<div className="space-y-6">
<h2 className="text-lg font-bold text-slate-900 flex items-center gap-2">
<Phone className="w-5 h-5 text-[#1A1265]" />
Call Number
</h2>
<div>
<label className="block text-sm font-medium text-slate-700 mb-2">Number to Call</label>
<Input
placeholder="+1 (555) 123-4567"
value={phone}
onChange={(e) => setPhone(e.target.value)}
className="h-12 text-base rounded-xl border-slate-200 focus:border-[#1A1265] focus:ring-[#1A1265]"
/>
<p className="text-xs text-slate-600 mt-2">Enter with country code for best results (e.g. +1).</p>
</div>
</div>
<div className="border-t border-slate-100"></div>
{/* Design Options */}
<div className="space-y-6">
<h2 className="text-lg font-bold text-slate-900 flex items-center gap-2">
<Sparkles className="w-5 h-5 text-[#1A1265]" />
Design Options
</h2>
{/* Color Picker */}
<div>
<label className="block text-sm font-medium text-slate-700 mb-3">QR Code Color</label>
<div className="flex flex-wrap gap-2">
{QR_COLORS.map((c) => (
<button
key={c.name}
onClick={() => setQrColor(c.value)}
className={cn(
"w-9 h-9 rounded-full border-2 flex items-center justify-center transition-all hover:scale-110",
qrColor === c.value ? "border-slate-900 ring-2 ring-offset-2 ring-slate-200" : "border-white shadow-md"
)}
style={{ backgroundColor: c.value }}
aria-label={`Select ${c.name}`}
title={c.name}
>
{qrColor === c.value && <Check className="w-4 h-4 text-white" strokeWidth={3} />}
</button>
))}
</div>
</div>
{/* Frame Selector */}
<div>
<label className="block text-sm font-medium text-slate-700 mb-3">Frame Label</label>
<div className="grid grid-cols-2 sm:grid-cols-4 gap-2">
{FRAME_OPTIONS.map((frame) => (
<button
key={frame.id}
onClick={() => setFrameType(frame.id)}
className={cn(
"py-2.5 px-3 rounded-lg text-sm font-medium transition-all border",
frameType === frame.id
? "bg-[#1A1265] text-white border-[#1A1265]"
: "bg-slate-50 text-slate-600 border-slate-200 hover:border-slate-300"
)}
>
{frame.label}
</button>
))}
</div>
</div>
</div>
</div>
{/* RIGHT: Preview Section */}
<div className="p-6 md:p-8 lg:p-10 flex flex-col items-center justify-center" style={{ backgroundColor: BRAND.paleGrey }}>
{/* QR Card with Frame */}
<div
ref={qrRef}
className="bg-white rounded-3xl shadow-xl p-6 sm:p-8 flex flex-col items-center w-full max-w-[320px]"
>
{/* Frame Label */}
{getFrameLabel() && (
<div
className="mb-5 px-8 py-2.5 rounded-full text-white font-bold text-sm tracking-widest uppercase shadow-md"
style={{ backgroundColor: qrColor }}
>
{getFrameLabel()}
</div>
)}
{/* QR Code */}
<div className="bg-white">
<QRCodeSVG
value={phone ? qrValue : "tel:+123456789"}
size={240}
level="M"
includeMargin={false}
fgColor={qrColor}
/>
</div>
{/* Info Preview */}
<div className="mt-6 text-center max-w-[260px]">
<h3 className="font-bold text-slate-900 text-lg flex items-center justify-center gap-2 truncate">
<Phone className="w-4 h-4 text-slate-400 shrink-0" />
<span className="truncate">{phone || '+1 555 ...'}</span>
</h3>
</div>
</div>
{/* Download Buttons */}
<div className="flex items-center gap-3 mt-8">
<Button
onClick={() => handleDownload('png')}
className="bg-[#1A1265] hover:bg-[#2A2275] text-white shadow-lg"
>
<Download className="w-4 h-4 mr-2" />
Download PNG
</Button>
<Button
onClick={() => handleDownload('svg')}
variant="outline"
className="border-slate-300 hover:bg-white"
>
<Download className="w-4 h-4 mr-2" />
SVG
</Button>
</div>
<p className="text-xs text-slate-600 mt-4 text-center">
Scanning initiates a direct call on any mobile phone.
</p>
</div>
</div>
</div>
{/* Upsell Banner */}
<div className="mt-8 bg-gradient-to-r from-[#1A1265] to-[#2A2275] rounded-2xl p-6 flex flex-col sm:flex-row items-center justify-between gap-4">
<div className="text-white text-center sm:text-left">
<h3 className="font-bold text-lg">Need to change contact info?</h3>
<p className="text-white/80 text-sm mt-1">
Dynamic QR Codes act as a digital business card that you can update anytime.
</p>
</div>
<Link href="/signup">
<Button className="bg-white text-[#1A1265] hover:bg-slate-100 shrink-0 shadow-lg">
Create vCard Plus
</Button>
</Link>
</div>
</div>
);
}
'use client';
import React, { useState, useRef } from 'react';
import Link from 'next/link';
import { QRCodeSVG } from 'qrcode.react';
import {
Phone,
Download,
Check,
Sparkles,
Smartphone
} from 'lucide-react';
import { Button } from '@/components/ui/Button';
import { Input } from '@/components/ui/Input';
import { cn } from '@/lib/utils';
// Brand Colors
const BRAND = {
paleGrey: '#EBEBDF',
richBlue: '#1A1265',
richBlueLight: '#2A2275',
};
// QR Color Options
const QR_COLORS = [
{ name: 'Classic Black', value: '#000000' },
{ name: 'Deep Blue', value: '#1E40AF' },
{ name: 'Violet', value: '#7C3AED' },
{ name: 'Teal', value: '#0D9488' },
{ name: 'Coral', value: '#F43F5E' },
{ name: 'Amber', value: '#D97706' },
{ name: 'Emerald', value: '#10B981' },
{ name: 'Rose', value: '#F43F5E' },
];
// Frame Options
const FRAME_OPTIONS = [
{ id: 'none', label: 'No Frame' },
{ id: 'scanme', label: 'Scan Me' },
{ id: 'call', label: 'Call Me' },
{ id: 'contact', label: 'Contact' },
];
export default function PhoneGenerator() {
const [phone, setPhone] = useState('');
const [qrColor, setQrColor] = useState(BRAND.richBlue);
const [frameType, setFrameType] = useState('none');
const qrRef = useRef<HTMLDivElement>(null);
const qrValue = `tel:${phone}`;
const handleDownload = async (format: 'png' | 'svg') => {
if (!qrRef.current) return;
try {
if (format === 'png') {
const { toPng } = await import('html-to-image');
const dataUrl = await toPng(qrRef.current, { cacheBust: true, pixelRatio: 3 });
const link = document.createElement('a');
link.download = `call-qr-code.png`;
link.href = dataUrl;
link.click();
} else {
const svgData = qrRef.current.querySelector('svg')?.outerHTML;
if (svgData) {
const blob = new Blob([svgData], { type: 'image/svg+xml;charset=utf-8' });
const url = URL.createObjectURL(blob);
const link = document.createElement('a');
link.href = url;
link.download = `call-qr-code.svg`;
link.click();
}
}
} catch (err) {
console.error('Download failed', err);
}
};
const getFrameLabel = () => {
const frame = FRAME_OPTIONS.find(f => f.id === frameType);
return frame?.id !== 'none' ? frame?.label : null;
};
return (
<div className="w-full max-w-5xl mx-auto px-4 md:px-6">
{/* Main Generator Card */}
<div className="bg-white rounded-3xl shadow-2xl shadow-slate-900/10 overflow-hidden border border-slate-100">
<div className="grid lg:grid-cols-2">
{/* LEFT: Input Section */}
<div className="p-6 md:p-8 lg:p-10 space-y-8 border-r border-slate-100">
{/* Phone Details */}
<div className="space-y-6">
<h2 className="text-lg font-bold text-slate-900 flex items-center gap-2">
<Phone className="w-5 h-5 text-[#1A1265]" />
Call Number
</h2>
<div>
<label className="block text-sm font-medium text-slate-700 mb-2">Number to Call</label>
<Input
placeholder="+1 (555) 123-4567"
value={phone}
onChange={(e) => setPhone(e.target.value)}
className="h-12 text-base rounded-xl border-slate-200 focus:border-[#1A1265] focus:ring-[#1A1265]"
/>
<p className="text-xs text-slate-600 mt-2">Enter with country code for best results (e.g. +1).</p>
</div>
</div>
<div className="border-t border-slate-100"></div>
{/* Design Options */}
<div className="space-y-6">
<h2 className="text-lg font-bold text-slate-900 flex items-center gap-2">
<Sparkles className="w-5 h-5 text-[#1A1265]" />
Design Options
</h2>
{/* Color Picker */}
<div>
<label className="block text-sm font-medium text-slate-700 mb-3">QR Code Color</label>
<div className="flex flex-wrap gap-2">
{QR_COLORS.map((c) => (
<button
key={c.name}
onClick={() => setQrColor(c.value)}
className={cn(
"w-9 h-9 rounded-full border-2 flex items-center justify-center transition-all hover:scale-110",
qrColor === c.value ? "border-slate-900 ring-2 ring-offset-2 ring-slate-200" : "border-white shadow-md"
)}
style={{ backgroundColor: c.value }}
aria-label={`Select ${c.name}`}
title={c.name}
>
{qrColor === c.value && <Check className="w-4 h-4 text-white" strokeWidth={3} />}
</button>
))}
</div>
</div>
{/* Frame Selector */}
<div>
<label className="block text-sm font-medium text-slate-700 mb-3">Frame Label</label>
<div className="grid grid-cols-2 sm:grid-cols-4 gap-2">
{FRAME_OPTIONS.map((frame) => (
<button
key={frame.id}
onClick={() => setFrameType(frame.id)}
className={cn(
"py-2.5 px-3 rounded-lg text-sm font-medium transition-all border",
frameType === frame.id
? "bg-[#1A1265] text-white border-[#1A1265]"
: "bg-slate-50 text-slate-600 border-slate-200 hover:border-slate-300"
)}
>
{frame.label}
</button>
))}
</div>
</div>
</div>
</div>
{/* RIGHT: Preview Section */}
<div className="p-6 md:p-8 lg:p-10 flex flex-col items-center justify-center" style={{ backgroundColor: BRAND.paleGrey }}>
{/* QR Card with Frame */}
<div
ref={qrRef}
className="bg-white rounded-3xl shadow-xl p-6 sm:p-8 flex flex-col items-center w-full max-w-[320px]"
>
{/* Frame Label */}
{getFrameLabel() && (
<div
className="mb-5 px-8 py-2.5 rounded-full text-white font-bold text-sm tracking-widest uppercase shadow-md"
style={{ backgroundColor: qrColor }}
>
{getFrameLabel()}
</div>
)}
{/* QR Code */}
<div className="bg-white">
<QRCodeSVG
value={phone ? qrValue : "tel:+123456789"}
size={240}
level="M"
includeMargin={false}
fgColor={qrColor}
/>
</div>
{/* Info Preview */}
<div className="mt-6 text-center max-w-[260px]">
<h3 className="font-bold text-slate-900 text-lg flex items-center justify-center gap-2 truncate">
<Phone className="w-4 h-4 text-slate-400 shrink-0" />
<span className="truncate">{phone || '+1 555 ...'}</span>
</h3>
</div>
</div>
{/* Download Buttons */}
<div className="flex items-center gap-3 mt-8">
<Button
onClick={() => handleDownload('png')}
className="bg-[#1A1265] hover:bg-[#2A2275] text-white shadow-lg"
>
<Download className="w-4 h-4 mr-2" />
Download PNG
</Button>
<Button
onClick={() => handleDownload('svg')}
variant="outline"
className="border-slate-300 hover:bg-white"
>
<Download className="w-4 h-4 mr-2" />
SVG
</Button>
</div>
<p className="text-xs text-slate-600 mt-4 text-center">
Scanning initiates a direct call on any mobile phone.
</p>
</div>
</div>
</div>
{/* Upsell Banner */}
<div className="mt-8 bg-gradient-to-r from-[#1A1265] to-[#2A2275] rounded-2xl p-6 flex flex-col sm:flex-row items-center justify-between gap-4">
<div className="text-white text-center sm:text-left">
<h3 className="font-bold text-lg">Need to change contact info?</h3>
<p className="text-white/80 text-sm mt-1">
Dynamic QR Codes act as a digital business card that you can update anytime.
</p>
</div>
<Link href="/signup">
<Button className="bg-white text-[#1A1265] hover:bg-slate-100 shrink-0 shadow-lg">
Create vCard Plus
</Button>
</Link>
</div>
</div>
);
}

668
src/app/(main)/(marketing)/tools/call-qr-code-generator/page.tsx
View File

@@ -1,334 +1,334 @@
import React from 'react';
import type { Metadata } from 'next';
import PhoneGenerator from './PhoneGenerator';
import { Phone, Shield, Zap, Smartphone, PhoneCall, Download } from 'lucide-react';
import { QRCodeSVG } from 'qrcode.react';
import { ToolBreadcrumb } from '@/components/seo/BreadcrumbSchema';
import { RelatedTools } from '@/components/marketing/RelatedTools';
import { generateSoftwareAppSchema, generateFaqSchema } from '@/lib/schema-utils';
// SEO Optimized Metadata for "Call QR Code"
export const metadata: Metadata = {
title: {
absolute: 'Free Call QR Code Generator | Click-to-Call & Phone QR | QR Master',
},
description: 'Create Action-Oriented Call QR Codes. Scanners instantly dial your number. Perfect for "Call Now" buttons on print & flyers. Free & No Signup.',
keywords: ['call qr code', 'click to call qr code', 'call now qr code', 'phone call qr generator', 'qr code for calling', 'call me qr', 'direct call qr code', 'dialer qr code', 'telefon qr code', 'anruf qr code'],
alternates: {
canonical: 'https://www.qrmaster.net/tools/call-qr-code-generator',
},
openGraph: {
title: 'Free Call QR Code Generator | Click-to-Call | QR Master',
description: 'Generate Click-to-Call QR Codes. One scan to start a phone call instantly. Best for flyers and business cards.',
type: 'website',
url: 'https://www.qrmaster.net/tools/call-qr-code-generator',
images: [{ url: '/og-phone-generator.png', width: 1200, height: 630 }],
},
twitter: {
card: 'summary_large_image',
title: 'Free Call QR Code Generator | Start Calls with a Scan',
description: 'Create QR codes for instant calling. Free and reliable.',
},
robots: {
index: true,
follow: true,
},
};
// JSON-LD Structured Data
const jsonLd = {
'@context': 'https://schema.org',
'@graph': [
generateSoftwareAppSchema(
'Call QR Code Generator',
'Generate QR codes that trigger a phone call when scanned on a mobile device.',
'/og-phone-generator.png'
),
{
'@type': 'HowTo',
name: 'How to Create a Call QR Code',
description: 'Create a QR code that dials a number automatically.',
step: [
{
'@type': 'HowToStep',
position: 1,
name: 'Enter Number',
text: 'Type your phone number with country code (e.g., +1 555-0199).',
},
{
'@type': 'HowToStep',
position: 2,
name: 'Customize',
text: 'Choose a color and add a label like "Call Me".',
},
{
'@type': 'HowToStep',
position: 3,
name: 'Download',
text: 'Save the "Call Now" QR code and print it on your materials.',
},
{
'@type': 'HowToStep',
position: 4,
name: 'Test',
text: 'Scan the code with your phone to ensure the number is correct.',
},
{
'@type': 'HowToStep',
position: 5,
name: 'Share',
text: 'Add to business cards, flyers, or supports desks.',
},
],
totalTime: 'PT30S',
},
generateFaqSchema({
'Does it call automatically?': {
question: 'Does it call automatically?',
answer: 'Scanning the QR code opens the phone dialer with the number pre-filled. The user must tap the call button to initiate the call (security feature of phones).',
},
'Does it work internationally?': {
question: 'Does it work internationally?',
answer: 'Yes! We recommend entering your number in international format (starting with +) to ensure it works anywhere in the world.',
},
'Is my phone number private?': {
question: 'Is my phone number private?',
answer: 'Yes. We do not store your number. It is encoded directly into the QR code image.',
},
'Can I track calls?': {
question: 'Can I track calls?',
answer: 'This static Call QR Code cannot track calls. For tracking scans and analytics, consider using our VCard Plus solution.',
},
'Is it free?': {
question: 'Is it free?',
answer: 'Yes, completely free. We do not charge for generating or scanning the code.',
},
}),
],
};
export default function CallQRCodePage() {
return (
<>
<script
type="application/ld+json"
dangerouslySetInnerHTML={{ __html: JSON.stringify(jsonLd) }}
/>
<ToolBreadcrumb toolName="Call QR Code Generator" toolSlug="call-qr-code-generator" />
<div className="min-h-screen" style={{ backgroundColor: '#EBEBDF' }}>
{/* HERO SECTION */}
<section className="relative pt-20 pb-20 lg:pt-32 lg:pb-32 px-4 sm:px-6 lg:px-8 overflow-hidden" style={{ backgroundColor: '#1A1265' }}>
<div className="absolute inset-0 opacity-10">
<svg className="w-full h-full" viewBox="0 0 100 100" preserveAspectRatio="none">
<path d="M0 100 C 20 0 50 0 100 100 Z" fill="url(#grad1)" />
<defs>
<linearGradient id="grad1" x1="0%" y1="0%" x2="100%" y2="0%">
<stop offset="0%" style={{ stopColor: 'white', stopOpacity: 1 }} />
<stop offset="100%" style={{ stopColor: 'white', stopOpacity: 0 }} />
</linearGradient>
</defs>
</svg>
</div>
<div className="max-w-7xl mx-auto grid lg:grid-cols-2 gap-12 items-center relative z-10">
<div className="text-center lg:text-left">
<div className="inline-flex items-center gap-2 px-3 py-1 rounded-full bg-white/10 text-white/90 text-sm font-medium mb-6 backdrop-blur-sm border border-white/10 hover:bg-white/20 transition-colors cursor-default">
<span className="flex h-2 w-2 relative">
<span className="animate-ping absolute inline-flex h-full w-full rounded-full bg-emerald-400 opacity-75"></span>
<span className="relative inline-flex rounded-full h-2 w-2 bg-emerald-400"></span>
</span>
Free Tool — No Signup Required
</div>
<h1 className="text-4xl md:text-5xl lg:text-6xl font-extrabold text-white tracking-tight leading-tight mb-6">
Create Instant <br className="hidden lg:block" />
<span className="text-transparent bg-clip-text bg-gradient-to-r from-emerald-400 to-cyan-400">&quot;Call Now&quot; QR Codes</span>
</h1>
<p className="text-lg md:text-xl text-indigo-100 max-w-2xl mx-auto lg:mx-0 mb-8 leading-relaxed">
The #1 Tool for Click-to-Call QR Codes. Scanners instantly open their phone dialer with your number pre-filled.
<strong className="text-white block sm:inline mt-2 sm:mt-0"> Perfect for print marketing.</strong>
</p>
<div className="flex flex-wrap justify-center lg:justify-start gap-4 text-sm font-medium text-white/80">
<div className="flex items-center gap-2 bg-white/5 px-4 py-2.5 rounded-xl border border-white/5 backdrop-blur-sm">
<PhoneCall className="w-4 h-4 text-emerald-400" />
One-Tap Call
</div>
<div className="flex items-center gap-2 bg-white/5 px-4 py-2.5 rounded-xl border border-white/5 backdrop-blur-sm">
<Zap className="w-4 h-4 text-amber-400" />
Instant Dial
</div>
<div className="flex items-center gap-2 bg-white/5 px-4 py-2.5 rounded-xl border border-white/5 backdrop-blur-sm">
<Shield className="w-4 h-4 text-purple-400" />
No Data Saved
</div>
</div>
</div>
{/* Visual Abstract */}
<div className="hidden lg:flex relative items-center justify-center min-h-[400px]">
<div className="absolute w-[500px] h-[500px] bg-indigo-500/30 rounded-full blur-[100px] -top-20 -right-20 animate-pulse" />
<div className="relative w-80 h-96 bg-white/5 backdrop-blur-xl border border-white/20 rounded-3xl shadow-2xl flex flex-col items-center justify-center p-8 transform rotate-6 hover:rotate-3 transition-all duration-700 group">
<div className="absolute inset-0 bg-gradient-to-br from-white/10 to-transparent rounded-3xl" />
<div className="w-full bg-white rounded-xl shadow-lg p-4 mb-6 relative overflow-hidden">
<div className="flex items-center gap-3">
<div className="w-10 h-10 rounded-full bg-green-100 flex items-center justify-center animate-pulse">
<Phone className="w-5 h-5 text-green-600" />
</div>
<div>
<div className="h-2 w-24 bg-slate-200 rounded-full mb-1" />
<div className="h-2 w-16 bg-slate-100 rounded-full" />
</div>
</div>
</div>
<div className="w-48 h-48 bg-white rounded-xl p-2 shadow-inner relative overflow-hidden flex items-center justify-center">
<QRCodeSVG value="https://www.qrmaster.net" size={170} fgColor="#0f172a" level="Q" />
</div>
{/* Floating Badge */}
<div className="absolute -bottom-6 -right-6 bg-white py-3 px-5 rounded-xl shadow-xl flex items-center gap-3 transform transition-transform hover:scale-105 duration-300">
<div className="bg-emerald-100 p-2 rounded-full">
<PhoneCall className="w-5 h-5 text-emerald-600" />
</div>
<div className="text-left">
<div className="text-[10px] text-slate-400 font-bold uppercase tracking-wider">Status</div>
<div className="text-sm font-bold text-slate-900">Calling...</div>
</div>
</div>
</div>
</div>
</div>
</section>
{/* GENERATOR SECTION */}
<section className="py-12 px-4 sm:px-6 lg:px-8 -mt-8">
<PhoneGenerator />
</section>
{/* HOW IT WORKS */}
<section className="py-16 px-4 sm:px-6 lg:px-8 bg-white">
<div className="max-w-4xl mx-auto">
<h2 className="text-3xl font-bold text-slate-900 text-center mb-12">
How Call QR Codes Work
</h2>
<div className="grid md:grid-cols-3 lg:grid-cols-5 gap-8">
<article className="text-center">
<div className="w-14 h-14 rounded-2xl bg-[#1A1265]/10 flex items-center justify-center mx-auto mb-4">
<Phone className="w-7 h-7 text-[#1A1265]" />
</div>
<h3 className="font-bold text-slate-900 mb-2">1. Enter Number</h3>
<p className="text-slate-600 text-sm">
Type your phone number. Include the country code for international compatibility.
</p>
</article>
<article className="text-center">
<div className="w-14 h-14 rounded-2xl bg-[#1A1265]/10 flex items-center justify-center mx-auto mb-4">
<Smartphone className="w-7 h-7 text-[#1A1265]" />
</div>
<h3 className="font-bold text-slate-900 mb-2">2. Scan</h3>
<p className="text-slate-600 text-sm">
Customers scan the QR code with their mobile phone's camera.
</p>
</article>
<article className="text-center">
<div className="w-12 h-12 rounded-2xl bg-[#1A1265]/10 flex items-center justify-center mx-auto mb-4">
<PhoneCall className="w-6 h-6 text-[#1A1265]" />
</div>
<h3 className="font-bold text-slate-900 mb-2">3. Call</h3>
<p className="text-slate-600 text-xs leading-relaxed">
Their phone dialer opens automatically with your number.
</p>
</article>
<article className="text-center">
<div className="w-12 h-12 rounded-2xl bg-[#1A1265]/10 flex items-center justify-center mx-auto mb-4">
<Download className="w-6 h-6 text-[#1A1265]" />
</div>
<h3 className="font-bold text-slate-900 mb-2">4. Download</h3>
<p className="text-slate-600 text-xs leading-relaxed">
Save the QR code image.
</p>
</article>
<article className="text-center">
<div className="w-12 h-12 rounded-2xl bg-[#1A1265]/10 flex items-center justify-center mx-auto mb-4">
<Shield className="w-6 h-6 text-[#1A1265]" />
</div>
<h3 className="font-bold text-slate-900 mb-2">5. Share</h3>
<p className="text-slate-600 text-xs leading-relaxed">
Add it to your marketing materials.
</p>
</article>
</div>
</div>
</section>
{/* RELATED TOOLS */}
<RelatedTools />
{/* FAQ SECTION */}
<section className="py-16 px-4 sm:px-6 lg:px-8" style={{ backgroundColor: '#EBEBDF' }}>
<div className="max-w-3xl mx-auto">
<h2 className="text-3xl font-bold text-slate-900 text-center mb-4">
Frequently Asked Questions
</h2>
<p className="text-slate-600 text-center mb-10">
Common questions about Call QR codes.
</p>
<div className="space-y-4">
<FaqItem
question="Do I need to include the country code?"
answer="We highly recommend it. Adding the country code (e.g., +1 for USA/Canada, +44 for UK) ensures any phone from any region can dial your number correctly."
/>
<FaqItem
question="Does this work on iPhone and Android?"
answer="Yes, Call QR codes are a standard format supported natively by iOS and Android camera apps."
/>
<FaqItem
question="Can I change the number later?"
answer="No. Static Call QR codes can't be edited. If your phone number changes, you'll need a new QR code. Use a Dynamic QR Code if you anticipate changes."
/>
<FaqItem
question="Is there a cost per scan?"
answer="No. There are no fees or limits on scanning. It works just like sharing your phone number."
/>
<FaqItem
question="Is it free?"
answer="Yes, completely free. We do not charge for generating or scanning the code."
/>
</div>
</div>
</section>
</div>
</>
);
}
function FaqItem({ question, answer }: { question: string; answer: string }) {
return (
<details className="group bg-white rounded-xl shadow-sm border border-slate-200 overflow-hidden">
<summary className="flex items-center justify-between p-5 cursor-pointer list-none text-slate-900 font-semibold hover:bg-slate-50 transition-colors">
{question}
<span className="transition group-open:rotate-180 text-slate-400">
<svg fill="none" height="20" stroke="currentColor" strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" viewBox="0 0 24 24" width="20">
<path d="M6 9l6 6 6-6" />
</svg>
</span>
</summary>
<div className="text-slate-600 px-5 pb-5 pt-0 leading-relaxed text-sm">
{answer}
</div>
</details>
);
}
import React from 'react';
import type { Metadata } from 'next';
import PhoneGenerator from './PhoneGenerator';
import { Phone, Shield, Zap, Smartphone, PhoneCall, Download } from 'lucide-react';
import { QRCodeSVG } from 'qrcode.react';
import { ToolBreadcrumb } from '@/components/seo/BreadcrumbSchema';
import { RelatedTools } from '@/components/marketing/RelatedTools';
import { generateSoftwareAppSchema, generateFaqSchema } from '@/lib/schema-utils';
// SEO Optimized Metadata for "Call QR Code"
export const metadata: Metadata = {
title: {
absolute: 'Free Call QR Code Generator | Click-to-Call & Phone QR | QR Master',
},
description: 'Create Action-Oriented Call QR Codes. Scanners instantly dial your number. Perfect for "Call Now" buttons on print & flyers. Free & No Signup.',
keywords: ['call qr code', 'click to call qr code', 'call now qr code', 'phone call qr generator', 'qr code for calling', 'call me qr', 'direct call qr code', 'dialer qr code', 'telefon qr code', 'anruf qr code'],
alternates: {
canonical: 'https://www.qrmaster.net/tools/call-qr-code-generator',
},
openGraph: {
title: 'Free Call QR Code Generator | Click-to-Call | QR Master',
description: 'Generate Click-to-Call QR Codes. One scan to start a phone call instantly. Best for flyers and business cards.',
type: 'website',
url: 'https://www.qrmaster.net/tools/call-qr-code-generator',
images: [{ url: '/og-phone-generator.png', width: 1200, height: 630 }],
},
twitter: {
card: 'summary_large_image',
title: 'Free Call QR Code Generator | Start Calls with a Scan',
description: 'Create QR codes for instant calling. Free and reliable.',
},
robots: {
index: true,
follow: true,
},
};
// JSON-LD Structured Data
const jsonLd = {
'@context': 'https://schema.org',
'@graph': [
generateSoftwareAppSchema(
'Call QR Code Generator',
'Generate QR codes that trigger a phone call when scanned on a mobile device.',
'/og-phone-generator.png'
),
{
'@type': 'HowTo',
name: 'How to Create a Call QR Code',
description: 'Create a QR code that dials a number automatically.',
step: [
{
'@type': 'HowToStep',
position: 1,
name: 'Enter Number',
text: 'Type your phone number with country code (e.g., +1 555-0199).',
},
{
'@type': 'HowToStep',
position: 2,
name: 'Customize',
text: 'Choose a color and add a label like "Call Me".',
},
{
'@type': 'HowToStep',
position: 3,
name: 'Download',
text: 'Save the "Call Now" QR code and print it on your materials.',
},
{
'@type': 'HowToStep',
position: 4,
name: 'Test',
text: 'Scan the code with your phone to ensure the number is correct.',
},
{
'@type': 'HowToStep',
position: 5,
name: 'Share',
text: 'Add to business cards, flyers, or supports desks.',
},
],
totalTime: 'PT30S',
},
generateFaqSchema({
'Does it call automatically?': {
question: 'Does it call automatically?',
answer: 'Scanning the QR code opens the phone dialer with the number pre-filled. The user must tap the call button to initiate the call (security feature of phones).',
},
'Does it work internationally?': {
question: 'Does it work internationally?',
answer: 'Yes! We recommend entering your number in international format (starting with +) to ensure it works anywhere in the world.',
},
'Is my phone number private?': {
question: 'Is my phone number private?',
answer: 'Yes. We do not store your number. It is encoded directly into the QR code image.',
},
'Can I track calls?': {
question: 'Can I track calls?',
answer: 'This static Call QR Code cannot track calls. For tracking scans and analytics, consider using our VCard Plus solution.',
},
'Is it free?': {
question: 'Is it free?',
answer: 'Yes, completely free. We do not charge for generating or scanning the code.',
},
}),
],
};
export default function CallQRCodePage() {
return (
<>
<script
type="application/ld+json"
dangerouslySetInnerHTML={{ __html: JSON.stringify(jsonLd) }}
/>
<ToolBreadcrumb toolName="Call QR Code Generator" toolSlug="call-qr-code-generator" />
<div className="min-h-screen" style={{ backgroundColor: '#EBEBDF' }}>
{/* HERO SECTION */}
<section className="relative pt-20 pb-20 lg:pt-32 lg:pb-32 px-4 sm:px-6 lg:px-8 overflow-hidden" style={{ backgroundColor: '#1A1265' }}>
<div className="absolute inset-0 opacity-10">
<svg className="w-full h-full" viewBox="0 0 100 100" preserveAspectRatio="none">
<path d="M0 100 C 20 0 50 0 100 100 Z" fill="url(#grad1)" />
<defs>
<linearGradient id="grad1" x1="0%" y1="0%" x2="100%" y2="0%">
<stop offset="0%" style={{ stopColor: 'white', stopOpacity: 1 }} />
<stop offset="100%" style={{ stopColor: 'white', stopOpacity: 0 }} />
</linearGradient>
</defs>
</svg>
</div>
<div className="max-w-7xl mx-auto grid lg:grid-cols-2 gap-12 items-center relative z-10">
<div className="text-center lg:text-left">
<div className="inline-flex items-center gap-2 px-3 py-1 rounded-full bg-white/10 text-white/90 text-sm font-medium mb-6 backdrop-blur-sm border border-white/10 hover:bg-white/20 transition-colors cursor-default">
<span className="flex h-2 w-2 relative">
<span className="animate-ping absolute inline-flex h-full w-full rounded-full bg-emerald-400 opacity-75"></span>
<span className="relative inline-flex rounded-full h-2 w-2 bg-emerald-400"></span>
</span>
Free Tool — No Signup Required
</div>
<h1 className="text-4xl md:text-5xl lg:text-6xl font-extrabold text-white tracking-tight leading-tight mb-6">
Create Instant <br className="hidden lg:block" />
<span className="text-transparent bg-clip-text bg-gradient-to-r from-emerald-400 to-cyan-400">&quot;Call Now&quot; QR Codes</span>
</h1>
<p className="text-lg md:text-xl text-indigo-100 max-w-2xl mx-auto lg:mx-0 mb-8 leading-relaxed">
The #1 Tool for Click-to-Call QR Codes. Scanners instantly open their phone dialer with your number pre-filled.
<strong className="text-white block sm:inline mt-2 sm:mt-0"> Perfect for print marketing.</strong>
</p>
<div className="flex flex-wrap justify-center lg:justify-start gap-4 text-sm font-medium text-white/80">
<div className="flex items-center gap-2 bg-white/5 px-4 py-2.5 rounded-xl border border-white/5 backdrop-blur-sm">
<PhoneCall className="w-4 h-4 text-emerald-400" />
One-Tap Call
</div>
<div className="flex items-center gap-2 bg-white/5 px-4 py-2.5 rounded-xl border border-white/5 backdrop-blur-sm">
<Zap className="w-4 h-4 text-amber-400" />
Instant Dial
</div>
<div className="flex items-center gap-2 bg-white/5 px-4 py-2.5 rounded-xl border border-white/5 backdrop-blur-sm">
<Shield className="w-4 h-4 text-purple-400" />
No Data Saved
</div>
</div>
</div>
{/* Visual Abstract */}
<div className="hidden lg:flex relative items-center justify-center min-h-[400px]">
<div className="absolute w-[500px] h-[500px] bg-indigo-500/30 rounded-full blur-[100px] -top-20 -right-20 animate-pulse" />
<div className="relative w-80 h-96 bg-white/5 backdrop-blur-xl border border-white/20 rounded-3xl shadow-2xl flex flex-col items-center justify-center p-8 transform rotate-6 hover:rotate-3 transition-all duration-700 group">
<div className="absolute inset-0 bg-gradient-to-br from-white/10 to-transparent rounded-3xl" />
<div className="w-full bg-white rounded-xl shadow-lg p-4 mb-6 relative overflow-hidden">
<div className="flex items-center gap-3">
<div className="w-10 h-10 rounded-full bg-green-100 flex items-center justify-center animate-pulse">
<Phone className="w-5 h-5 text-green-600" />
</div>
<div>
<div className="h-2 w-24 bg-slate-200 rounded-full mb-1" />
<div className="h-2 w-16 bg-slate-100 rounded-full" />
</div>
</div>
</div>
<div className="w-48 h-48 bg-white rounded-xl p-2 shadow-inner relative overflow-hidden flex items-center justify-center">
<QRCodeSVG value="https://www.qrmaster.net" size={170} fgColor="#0f172a" level="Q" />
</div>
{/* Floating Badge */}
<div className="absolute -bottom-6 -right-6 bg-white py-3 px-5 rounded-xl shadow-xl flex items-center gap-3 transform transition-transform hover:scale-105 duration-300">
<div className="bg-emerald-100 p-2 rounded-full">
<PhoneCall className="w-5 h-5 text-emerald-600" />
</div>
<div className="text-left">
<div className="text-[10px] text-slate-400 font-bold uppercase tracking-wider">Status</div>
<div className="text-sm font-bold text-slate-900">Calling...</div>
</div>
</div>
</div>
</div>
</div>
</section>
{/* GENERATOR SECTION */}
<section className="py-12 px-4 sm:px-6 lg:px-8 -mt-8">
<PhoneGenerator />
</section>
{/* HOW IT WORKS */}
<section className="py-16 px-4 sm:px-6 lg:px-8 bg-white">
<div className="max-w-4xl mx-auto">
<h2 className="text-3xl font-bold text-slate-900 text-center mb-12">
How Call QR Codes Work
</h2>
<div className="grid md:grid-cols-3 lg:grid-cols-5 gap-8">
<article className="text-center">
<div className="w-14 h-14 rounded-2xl bg-[#1A1265]/10 flex items-center justify-center mx-auto mb-4">
<Phone className="w-7 h-7 text-[#1A1265]" />
</div>
<h3 className="font-bold text-slate-900 mb-2">1. Enter Number</h3>
<p className="text-slate-600 text-sm">
Type your phone number. Include the country code for international compatibility.
</p>
</article>
<article className="text-center">
<div className="w-14 h-14 rounded-2xl bg-[#1A1265]/10 flex items-center justify-center mx-auto mb-4">
<Smartphone className="w-7 h-7 text-[#1A1265]" />
</div>
<h3 className="font-bold text-slate-900 mb-2">2. Scan</h3>
<p className="text-slate-600 text-sm">
Customers scan the QR code with their mobile phone's camera.
</p>
</article>
<article className="text-center">
<div className="w-12 h-12 rounded-2xl bg-[#1A1265]/10 flex items-center justify-center mx-auto mb-4">
<PhoneCall className="w-6 h-6 text-[#1A1265]" />
</div>
<h3 className="font-bold text-slate-900 mb-2">3. Call</h3>
<p className="text-slate-600 text-xs leading-relaxed">
Their phone dialer opens automatically with your number.
</p>
</article>
<article className="text-center">
<div className="w-12 h-12 rounded-2xl bg-[#1A1265]/10 flex items-center justify-center mx-auto mb-4">
<Download className="w-6 h-6 text-[#1A1265]" />
</div>
<h3 className="font-bold text-slate-900 mb-2">4. Download</h3>
<p className="text-slate-600 text-xs leading-relaxed">
Save the QR code image.
</p>
</article>
<article className="text-center">
<div className="w-12 h-12 rounded-2xl bg-[#1A1265]/10 flex items-center justify-center mx-auto mb-4">
<Shield className="w-6 h-6 text-[#1A1265]" />
</div>
<h3 className="font-bold text-slate-900 mb-2">5. Share</h3>
<p className="text-slate-600 text-xs leading-relaxed">
Add it to your marketing materials.
</p>
</article>
</div>
</div>
</section>
{/* RELATED TOOLS */}
<RelatedTools />
{/* FAQ SECTION */}
<section className="py-16 px-4 sm:px-6 lg:px-8" style={{ backgroundColor: '#EBEBDF' }}>
<div className="max-w-3xl mx-auto">
<h2 className="text-3xl font-bold text-slate-900 text-center mb-4">
Frequently Asked Questions
</h2>
<p className="text-slate-600 text-center mb-10">
Common questions about Call QR codes.
</p>
<div className="space-y-4">
<FaqItem
question="Do I need to include the country code?"
answer="We highly recommend it. Adding the country code (e.g., +1 for USA/Canada, +44 for UK) ensures any phone from any region can dial your number correctly."
/>
<FaqItem
question="Does this work on iPhone and Android?"
answer="Yes, Call QR codes are a standard format supported natively by iOS and Android camera apps."
/>
<FaqItem
question="Can I change the number later?"
answer="No. Static Call QR codes can't be edited. If your phone number changes, you'll need a new QR code. Use a Dynamic QR Code if you anticipate changes."
/>
<FaqItem
question="Is there a cost per scan?"
answer="No. There are no fees or limits on scanning. It works just like sharing your phone number."
/>
<FaqItem
question="Is it free?"
answer="Yes, completely free. We do not charge for generating or scanning the code."
/>
</div>
</div>
</section>
</div>
</>
);
}
function FaqItem({ question, answer }: { question: string; answer: string }) {
return (
<details className="group bg-white rounded-xl shadow-sm border border-slate-200 overflow-hidden">
<summary className="flex items-center justify-between p-5 cursor-pointer list-none text-slate-900 font-semibold hover:bg-slate-50 transition-colors">
{question}
<span className="transition group-open:rotate-180 text-slate-400">
<svg fill="none" height="20" stroke="currentColor" strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" viewBox="0 0 24 24" width="20">
<path d="M6 9l6 6 6-6" />
</svg>
</span>
</summary>
<div className="text-slate-600 px-5 pb-5 pt-0 leading-relaxed text-sm">
{answer}
</div>
</details>
);
}

748
src/app/(main)/(marketing)/tools/crypto-qr-code/CryptoGenerator.tsx
View File

@@ -1,374 +1,374 @@
'use client';
import React, { useState, useRef } from 'react';
import Link from 'next/link';
import { QRCodeSVG } from 'qrcode.react';
import {
Bitcoin,
Download,
Check,
Sparkles,
Wallet,
} from 'lucide-react';
import { Button } from '@/components/ui/Button';
import { Input } from '@/components/ui/Input';
import { Select } from '@/components/ui/Select';
import { cn } from '@/lib/utils';
import AdBanner from '@/components/ads/AdBanner';
// Brand Colors
const BRAND = {
paleGrey: '#EBEBDF',
richBlue: '#1A1265',
richBlueLight: '#2A2275',
};
// Crypto Options
const CRYPTO_CURRENCIES = [
{ value: 'bitcoin', label: 'Bitcoin (BTC)', color: '#F7931A', prefix: 'bitcoin:' },
{ value: 'ethereum', label: 'Ethereum (ETH)', color: '#627EEA', prefix: 'ethereum:' },
{ value: 'usdt', label: 'Tether (USDT)', color: '#26A17B', prefix: '' }, // Commonly ERC20/TRC20 - keeping raw for safety
{ value: 'solana', label: 'Solana (SOL)', color: '#14F195', prefix: 'solana:' },
];
// QR Color Options
const QR_COLORS = [
{ name: 'Bitcoin Orange', value: '#F7931A' },
{ name: 'Ethereum Blue', value: '#627EEA' },
{ name: 'Tether Green', value: '#26A17B' },
{ name: 'Classic Black', value: '#000000' },
{ name: 'Dark Blue', value: '#1A1265' },
{ name: 'Emerald', value: '#10B981' },
{ name: 'Rose', value: '#F43F5E' },
];
// Frame Options
const FRAME_OPTIONS = [
{ id: 'none', label: 'No Frame' },
{ id: 'scanme', label: 'Scan Me' },
{ id: 'pay', label: 'Pay Now' },
{ id: 'donate', label: 'Donate' },
];
export default function CryptoGenerator() {
const [currency, setCurrency] = useState('bitcoin');
const [address, setAddress] = useState('');
const [amount, setAmount] = useState('');
const [qrMode, setQrMode] = useState<'universal' | 'wallet'>('universal');
const [qrColor, setQrColor] = useState('#F7931A');
const [frameType, setFrameType] = useState('none');
const qrRef = useRef<HTMLDivElement>(null);
// Generate URL based on selected mode
const getUrl = () => {
if (!address.trim()) return 'https://www.qrmaster.net';
const cleanAddr = address.trim();
if (qrMode === 'wallet') {
// Wallet Direct Mode - Uses crypto URI scheme
// Only works when scanning FROM a wallet app (Coinbase, Trust Wallet, etc.)
const prefixes: Record<string, string> = {
bitcoin: 'bitcoin:',
ethereum: 'ethereum:',
solana: 'solana:',
usdt: '', // USDT doesn't have a standard URI
};
const prefix = prefixes[currency] || '';
if (!prefix) return cleanAddr; // USDT fallback
let uri = `${prefix}${cleanAddr}`;
if (amount) uri += `?amount=${amount}`;
return uri;
} else {
// Universal Mode - Blockchain explorer links
// Works with ANY phone camera
switch (currency) {
case 'bitcoin':
return `https://blockchair.com/bitcoin/address/${cleanAddr}`;
case 'ethereum':
return `https://etherscan.io/address/${cleanAddr}`;
case 'solana':
return `https://solscan.io/account/${cleanAddr}`;
case 'usdt':
return `https://etherscan.io/token/0xdac17f958d2ee523a2206206994597c13d831ec7?a=${cleanAddr}`;
default:
return cleanAddr;
}
}
};
const handleDownload = async (format: 'png' | 'svg') => {
if (!qrRef.current) return;
try {
if (format === 'png') {
const { toPng } = await import('html-to-image');
const dataUrl = await toPng(qrRef.current, { cacheBust: true, pixelRatio: 3 });
const link = document.createElement('a');
link.download = `${currency}-qr-code.png`;
link.href = dataUrl;
link.click();
} else {
const svgData = qrRef.current.querySelector('svg')?.outerHTML;
if (svgData) {
const blob = new Blob([svgData], { type: 'image/svg+xml;charset=utf-8' });
const url = URL.createObjectURL(blob);
const link = document.createElement('a');
link.href = url;
link.download = `${currency}-qr-code.svg`;
link.click();
}
}
} catch (err) {
console.error('Download failed', err);
}
};
const getFrameLabel = () => {
const frame = FRAME_OPTIONS.find(f => f.id === frameType);
return frame?.id !== 'none' ? frame?.label : null;
};
return (
<div className="w-full max-w-5xl mx-auto px-4 md:px-6">
{/* Main Generator Card */}
<div className="bg-white rounded-3xl shadow-2xl shadow-slate-900/10 overflow-hidden border border-slate-100">
<div className="grid lg:grid-cols-2">
{/* LEFT: Input Section */}
<div className="p-6 md:p-8 lg:p-10 space-y-8 border-r border-slate-100">
{/* Crypto Details */}
<div className="space-y-6">
<h2 className="text-lg font-bold text-slate-900 flex items-center gap-2">
<Wallet className="w-5 h-5 text-slate-900" />
Wallet Details
</h2>
<div>
<label className="block text-sm font-medium text-slate-700 mb-2">Currency</label>
<Select
value={currency}
options={CRYPTO_CURRENCIES}
onChange={(e) => {
const val = e.target.value;
setCurrency(val);
const col = CRYPTO_CURRENCIES.find(c => c.value === val)?.color;
if (col) setQrColor(col);
}}
className="h-12 w-full rounded-xl border-slate-200"
aria-label="Currency"
/>
</div>
<div>
<label className="block text-sm font-medium text-slate-700 mb-2">Wallet Address</label>
<Input
placeholder={`Enter ${currency} address`}
value={address}
onChange={(e) => setAddress(e.target.value)}
className="h-12 text-base rounded-xl border-slate-200 focus:border-slate-900 focus:ring-slate-900 font-mono text-sm"
/>
</div>
<div>
<label className="block text-sm font-medium text-slate-700 mb-2">Amount (Optional)</label>
<Input
placeholder="0.00"
type="number"
value={amount}
onChange={(e) => setAmount(e.target.value)}
className="h-12 text-base rounded-xl border-slate-200 focus:border-slate-900 focus:ring-slate-900"
/>
</div>
{/* QR Mode Toggle */}
<div>
<label className="block text-sm font-medium text-slate-700 mb-2">QR Code Mode</label>
<div className="grid grid-cols-2 gap-2">
<button
onClick={() => setQrMode('universal')}
className={cn(
"py-3 px-4 rounded-xl text-sm font-medium transition-all border",
qrMode === 'universal'
? "bg-slate-900 text-white border-slate-900"
: "bg-slate-50 text-slate-600 border-slate-200 hover:border-slate-300"
)}
>
Universal (Web)
</button>
<button
onClick={() => setQrMode('wallet')}
className={cn(
"py-3 px-4 rounded-xl text-sm font-medium transition-all border",
qrMode === 'wallet'
? "bg-slate-900 text-white border-slate-900"
: "bg-slate-50 text-slate-600 border-slate-200 hover:border-slate-300"
)}
>
Wallet Direct
</button>
</div>
<p className="text-xs text-slate-600 mt-2">
{qrMode === 'universal'
? "Works with any phone camera. Opens blockchain explorer."
: "Requires scanning from a wallet app. Enables direct payment."}
</p>
</div>
</div>
<div className="border-t border-slate-100"></div>
{/* Design Options */}
<div className="space-y-6">
<h2 className="text-lg font-bold text-slate-900 flex items-center gap-2">
<Sparkles className="w-5 h-5 text-slate-900" />
Design Options
</h2>
{/* Color Picker */}
<div>
<label className="block text-sm font-medium text-slate-700 mb-3">QR Code Color</label>
<div className="flex flex-wrap gap-2">
{QR_COLORS.map((c) => (
<button
key={c.name}
onClick={() => setQrColor(c.value)}
className={cn(
"w-9 h-9 rounded-full border-2 flex items-center justify-center transition-all hover:scale-110",
qrColor === c.value ? "border-slate-900 ring-2 ring-offset-2 ring-slate-200" : "border-white shadow-md"
)}
style={{ backgroundColor: c.value }}
aria-label={`Select ${c.name}`}
title={c.name}
>
{qrColor === c.value && <Check className="w-4 h-4 text-white" strokeWidth={3} />}
</button>
))}
</div>
</div>
{/* Frame Selector */}
<div>
<label className="block text-sm font-medium text-slate-700 mb-3">Frame Label</label>
<div className="grid grid-cols-2 sm:grid-cols-4 gap-2">
{FRAME_OPTIONS.map((frame) => (
<button
key={frame.id}
onClick={() => setFrameType(frame.id)}
className={cn(
"py-2.5 px-3 rounded-lg text-sm font-medium transition-all border",
frameType === frame.id
? "bg-slate-900 text-white border-slate-900"
: "bg-slate-50 text-slate-600 border-slate-200 hover:border-slate-300"
)}
>
{frame.label}
</button>
))}
</div>
</div>
</div>
</div>
{/* RIGHT: Preview Section */}
<div className="p-6 md:p-8 lg:p-10 flex flex-col items-center justify-center" style={{ backgroundColor: BRAND.paleGrey }}>
{/* QR Card with Frame */}
<div
ref={qrRef}
className="bg-white rounded-3xl shadow-xl p-6 sm:p-8 flex flex-col items-center w-full max-w-[320px]"
>
{/* Frame Label */}
{getFrameLabel() && (
<div
className="mb-5 px-8 py-2.5 rounded-full text-white font-bold text-sm tracking-widest uppercase shadow-md"
style={{ backgroundColor: qrColor }}
>
{getFrameLabel()}
</div>
)}
{/* QR Code */}
<div className="bg-white">
{address.trim() ? (
<QRCodeSVG
value={getUrl()}
size={240}
level="Q"
includeMargin={false}
fgColor={qrColor}
/>
) : (
<div
className="flex items-center justify-center border-2 border-dashed border-slate-200 rounded-xl"
style={{ width: 240, height: 240 }}
>
<div className="text-center text-slate-400 p-6">
<Wallet className="w-12 h-12 mx-auto mb-3 opacity-50" />
<p className="text-sm font-medium">Enter wallet address</p>
<p className="text-xs mt-1">to generate QR code</p>
</div>
</div>
)}
</div>
{/* Info Preview */}
<div className="mt-6 text-center max-w-[260px]">
<h3 className="font-bold text-slate-900 text-lg flex items-center justify-center gap-2 truncate">
<Bitcoin className="w-4 h-4 text-slate-400 shrink-0" />
<span className="truncate capitalize">{currency}</span>
</h3>
<div className="text-xs text-slate-600 mt-1 truncate px-2">
{address || 'Wallet Address'}
</div>
</div>
</div>
{/* Download Buttons */}
<div className="flex items-center gap-3 mt-8">
<Button
onClick={() => handleDownload('png')}
className="bg-slate-900 hover:bg-black text-white shadow-lg"
>
<Download className="w-4 h-4 mr-2" />
Download PNG
</Button>
<Button
onClick={() => handleDownload('svg')}
variant="outline"
className="border-slate-300 hover:bg-white"
>
<Download className="w-4 h-4 mr-2" />
SVG
</Button>
</div>
<p className="text-xs text-slate-600 mt-4 text-center">
Scanning copies the wallet address or opens a crypto app.
</p>
</div>
</div>
</div>
{/* Upsell Banner */}
<div className="mt-8 bg-gradient-to-r from-slate-900 to-slate-700 rounded-2xl p-6 flex flex-col sm:flex-row items-center justify-between gap-4">
<div className="text-white text-center sm:text-left">
<h3 className="font-bold text-lg">Accept Crypto for Business?</h3>
<p className="text-white/80 text-sm mt-1">
Create professional, branded payment pages for your store.
</p>
</div>
<Link href="/signup">
<Button className="bg-white text-slate-900 hover:bg-slate-100 shrink-0 shadow-lg">
Get Business Tools
</Button>
</Link>
</div>
</div>
);
}
'use client';
import React, { useState, useRef } from 'react';
import Link from 'next/link';
import { QRCodeSVG } from 'qrcode.react';
import {
Bitcoin,
Download,
Check,
Sparkles,
Wallet,
} from 'lucide-react';
import { Button } from '@/components/ui/Button';
import { Input } from '@/components/ui/Input';
import { Select } from '@/components/ui/Select';
import { cn } from '@/lib/utils';
import AdBanner from '@/components/ads/AdBanner';
// Brand Colors
const BRAND = {
paleGrey: '#EBEBDF',
richBlue: '#1A1265',
richBlueLight: '#2A2275',
};
// Crypto Options
const CRYPTO_CURRENCIES = [
{ value: 'bitcoin', label: 'Bitcoin (BTC)', color: '#F7931A', prefix: 'bitcoin:' },
{ value: 'ethereum', label: 'Ethereum (ETH)', color: '#627EEA', prefix: 'ethereum:' },
{ value: 'usdt', label: 'Tether (USDT)', color: '#26A17B', prefix: '' }, // Commonly ERC20/TRC20 - keeping raw for safety
{ value: 'solana', label: 'Solana (SOL)', color: '#14F195', prefix: 'solana:' },
];
// QR Color Options
const QR_COLORS = [
{ name: 'Bitcoin Orange', value: '#F7931A' },
{ name: 'Ethereum Blue', value: '#627EEA' },
{ name: 'Tether Green', value: '#26A17B' },
{ name: 'Classic Black', value: '#000000' },
{ name: 'Dark Blue', value: '#1A1265' },
{ name: 'Emerald', value: '#10B981' },
{ name: 'Rose', value: '#F43F5E' },
];
// Frame Options
const FRAME_OPTIONS = [
{ id: 'none', label: 'No Frame' },
{ id: 'scanme', label: 'Scan Me' },
{ id: 'pay', label: 'Pay Now' },
{ id: 'donate', label: 'Donate' },
];
export default function CryptoGenerator() {
const [currency, setCurrency] = useState('bitcoin');
const [address, setAddress] = useState('');
const [amount, setAmount] = useState('');
const [qrMode, setQrMode] = useState<'universal' | 'wallet'>('universal');
const [qrColor, setQrColor] = useState('#F7931A');
const [frameType, setFrameType] = useState('none');
const qrRef = useRef<HTMLDivElement>(null);
// Generate URL based on selected mode
const getUrl = () => {
if (!address.trim()) return 'https://www.qrmaster.net';
const cleanAddr = address.trim();
if (qrMode === 'wallet') {
// Wallet Direct Mode - Uses crypto URI scheme
// Only works when scanning FROM a wallet app (Coinbase, Trust Wallet, etc.)
const prefixes: Record<string, string> = {
bitcoin: 'bitcoin:',
ethereum: 'ethereum:',
solana: 'solana:',
usdt: '', // USDT doesn't have a standard URI
};
const prefix = prefixes[currency] || '';
if (!prefix) return cleanAddr; // USDT fallback
let uri = `${prefix}${cleanAddr}`;
if (amount) uri += `?amount=${amount}`;
return uri;
} else {
// Universal Mode - Blockchain explorer links
// Works with ANY phone camera
switch (currency) {
case 'bitcoin':
return `https://blockchair.com/bitcoin/address/${cleanAddr}`;
case 'ethereum':
return `https://etherscan.io/address/${cleanAddr}`;
case 'solana':
return `https://solscan.io/account/${cleanAddr}`;
case 'usdt':
return `https://etherscan.io/token/0xdac17f958d2ee523a2206206994597c13d831ec7?a=${cleanAddr}`;
default:
return cleanAddr;
}
}
};
const handleDownload = async (format: 'png' | 'svg') => {
if (!qrRef.current) return;
try {
if (format === 'png') {
const { toPng } = await import('html-to-image');
const dataUrl = await toPng(qrRef.current, { cacheBust: true, pixelRatio: 3 });
const link = document.createElement('a');
link.download = `${currency}-qr-code.png`;
link.href = dataUrl;
link.click();
} else {
const svgData = qrRef.current.querySelector('svg')?.outerHTML;
if (svgData) {
const blob = new Blob([svgData], { type: 'image/svg+xml;charset=utf-8' });
const url = URL.createObjectURL(blob);
const link = document.createElement('a');
link.href = url;
link.download = `${currency}-qr-code.svg`;
link.click();
}
}
} catch (err) {
console.error('Download failed', err);
}
};
const getFrameLabel = () => {
const frame = FRAME_OPTIONS.find(f => f.id === frameType);
return frame?.id !== 'none' ? frame?.label : null;
};
return (
<div className="w-full max-w-5xl mx-auto px-4 md:px-6">
{/* Main Generator Card */}
<div className="bg-white rounded-3xl shadow-2xl shadow-slate-900/10 overflow-hidden border border-slate-100">
<div className="grid lg:grid-cols-2">
{/* LEFT: Input Section */}
<div className="p-6 md:p-8 lg:p-10 space-y-8 border-r border-slate-100">
{/* Crypto Details */}
<div className="space-y-6">
<h2 className="text-lg font-bold text-slate-900 flex items-center gap-2">
<Wallet className="w-5 h-5 text-slate-900" />
Wallet Details
</h2>
<div>
<label className="block text-sm font-medium text-slate-700 mb-2">Currency</label>
<Select
value={currency}
options={CRYPTO_CURRENCIES}
onChange={(e) => {
const val = e.target.value;
setCurrency(val);
const col = CRYPTO_CURRENCIES.find(c => c.value === val)?.color;
if (col) setQrColor(col);
}}
className="h-12 w-full rounded-xl border-slate-200"
aria-label="Currency"
/>
</div>
<div>
<label className="block text-sm font-medium text-slate-700 mb-2">Wallet Address</label>
<Input
placeholder={`Enter ${currency} address`}
value={address}
onChange={(e) => setAddress(e.target.value)}
className="h-12 text-base rounded-xl border-slate-200 focus:border-slate-900 focus:ring-slate-900 font-mono text-sm"
/>
</div>
<div>
<label className="block text-sm font-medium text-slate-700 mb-2">Amount (Optional)</label>
<Input
placeholder="0.00"
type="number"
value={amount}
onChange={(e) => setAmount(e.target.value)}
className="h-12 text-base rounded-xl border-slate-200 focus:border-slate-900 focus:ring-slate-900"
/>
</div>
{/* QR Mode Toggle */}
<div>
<label className="block text-sm font-medium text-slate-700 mb-2">QR Code Mode</label>
<div className="grid grid-cols-2 gap-2">
<button
onClick={() => setQrMode('universal')}
className={cn(
"py-3 px-4 rounded-xl text-sm font-medium transition-all border",
qrMode === 'universal'
? "bg-slate-900 text-white border-slate-900"
: "bg-slate-50 text-slate-600 border-slate-200 hover:border-slate-300"
)}
>
Universal (Web)
</button>
<button
onClick={() => setQrMode('wallet')}
className={cn(
"py-3 px-4 rounded-xl text-sm font-medium transition-all border",
qrMode === 'wallet'
? "bg-slate-900 text-white border-slate-900"
: "bg-slate-50 text-slate-600 border-slate-200 hover:border-slate-300"
)}
>
Wallet Direct
</button>
</div>
<p className="text-xs text-slate-600 mt-2">
{qrMode === 'universal'
? "Works with any phone camera. Opens blockchain explorer."
: "Requires scanning from a wallet app. Enables direct payment."}
</p>
</div>
</div>
<div className="border-t border-slate-100"></div>
{/* Design Options */}
<div className="space-y-6">
<h2 className="text-lg font-bold text-slate-900 flex items-center gap-2">
<Sparkles className="w-5 h-5 text-slate-900" />
Design Options
</h2>
{/* Color Picker */}
<div>
<label className="block text-sm font-medium text-slate-700 mb-3">QR Code Color</label>
<div className="flex flex-wrap gap-2">
{QR_COLORS.map((c) => (
<button
key={c.name}
onClick={() => setQrColor(c.value)}
className={cn(
"w-9 h-9 rounded-full border-2 flex items-center justify-center transition-all hover:scale-110",
qrColor === c.value ? "border-slate-900 ring-2 ring-offset-2 ring-slate-200" : "border-white shadow-md"
)}
style={{ backgroundColor: c.value }}
aria-label={`Select ${c.name}`}
title={c.name}
>
{qrColor === c.value && <Check className="w-4 h-4 text-white" strokeWidth={3} />}
</button>
))}
</div>
</div>
{/* Frame Selector */}
<div>
<label className="block text-sm font-medium text-slate-700 mb-3">Frame Label</label>
<div className="grid grid-cols-2 sm:grid-cols-4 gap-2">
{FRAME_OPTIONS.map((frame) => (
<button
key={frame.id}
onClick={() => setFrameType(frame.id)}
className={cn(
"py-2.5 px-3 rounded-lg text-sm font-medium transition-all border",
frameType === frame.id
? "bg-slate-900 text-white border-slate-900"
: "bg-slate-50 text-slate-600 border-slate-200 hover:border-slate-300"
)}
>
{frame.label}
</button>
))}
</div>
</div>
</div>
</div>
{/* RIGHT: Preview Section */}
<div className="p-6 md:p-8 lg:p-10 flex flex-col items-center justify-center" style={{ backgroundColor: BRAND.paleGrey }}>
{/* QR Card with Frame */}
<div
ref={qrRef}
className="bg-white rounded-3xl shadow-xl p-6 sm:p-8 flex flex-col items-center w-full max-w-[320px]"
>
{/* Frame Label */}
{getFrameLabel() && (
<div
className="mb-5 px-8 py-2.5 rounded-full text-white font-bold text-sm tracking-widest uppercase shadow-md"
style={{ backgroundColor: qrColor }}
>
{getFrameLabel()}
</div>
)}
{/* QR Code */}
<div className="bg-white">
{address.trim() ? (
<QRCodeSVG
value={getUrl()}
size={240}
level="Q"
includeMargin={false}
fgColor={qrColor}
/>
) : (
<div
className="flex items-center justify-center border-2 border-dashed border-slate-200 rounded-xl"
style={{ width: 240, height: 240 }}
>
<div className="text-center text-slate-400 p-6">
<Wallet className="w-12 h-12 mx-auto mb-3 opacity-50" />
<p className="text-sm font-medium">Enter wallet address</p>
<p className="text-xs mt-1">to generate QR code</p>
</div>
</div>
)}
</div>
{/* Info Preview */}
<div className="mt-6 text-center max-w-[260px]">
<h3 className="font-bold text-slate-900 text-lg flex items-center justify-center gap-2 truncate">
<Bitcoin className="w-4 h-4 text-slate-400 shrink-0" />
<span className="truncate capitalize">{currency}</span>
</h3>
<div className="text-xs text-slate-600 mt-1 truncate px-2">
{address || 'Wallet Address'}
</div>
</div>
</div>
{/* Download Buttons */}
<div className="flex items-center gap-3 mt-8">
<Button
onClick={() => handleDownload('png')}
className="bg-slate-900 hover:bg-black text-white shadow-lg"
>
<Download className="w-4 h-4 mr-2" />
Download PNG
</Button>
<Button
onClick={() => handleDownload('svg')}
variant="outline"
className="border-slate-300 hover:bg-white"
>
<Download className="w-4 h-4 mr-2" />
SVG
</Button>
</div>
<p className="text-xs text-slate-600 mt-4 text-center">
Scanning copies the wallet address or opens a crypto app.
</p>
</div>
</div>
</div>
{/* Upsell Banner */}
<div className="mt-8 bg-gradient-to-r from-slate-900 to-slate-700 rounded-2xl p-6 flex flex-col sm:flex-row items-center justify-between gap-4">
<div className="text-white text-center sm:text-left">
<h3 className="font-bold text-lg">Accept Crypto for Business?</h3>
<p className="text-white/80 text-sm mt-1">
Create professional, branded payment pages for your store.
</p>
</div>
<Link href="/signup">
<Button className="bg-white text-slate-900 hover:bg-slate-100 shrink-0 shadow-lg">
Get Business Tools
</Button>
</Link>
</div>
</div>
);
}

670
src/app/(main)/(marketing)/tools/crypto-qr-code/page.tsx
View File

@@ -1,335 +1,335 @@
import React from 'react';
import type { Metadata } from 'next';
import CryptoGenerator from './CryptoGenerator';
import { Bitcoin, Shield, Zap, Smartphone, Wallet, Coins, Sparkles, Download, Share2 } from 'lucide-react';
import { QRCodeSVG } from 'qrcode.react';
import { ToolBreadcrumb } from '@/components/seo/BreadcrumbSchema';
import { RelatedTools } from '@/components/marketing/RelatedTools';
import { generateSoftwareAppSchema, generateFaqSchema } from '@/lib/schema-utils';
// SEO Optimized Metadata
export const metadata: Metadata = {
title: {
absolute: 'Free Crypto QR Code Generator | Krypto QR Code Erstellen | QR Master',
},
description: 'Create a QR code for your Crypto wallet address. Erstelle Bitcoin & Ethereum QR Codes für einfache Zahlungen. Supports BTC, ETH, USDT & more.',
keywords: ['crypto qr code', 'bitcoin qr generator', 'ethereum qr code', 'crypto wallet qr', 'donation qr code', 'krypto qr code', 'bitcoin qr code erstellen', 'kryptowährung qr code', 'wallet adresse qr code'],
alternates: {
canonical: 'https://www.qrmaster.net/tools/crypto-qr-code',
},
openGraph: {
title: 'Free Crypto QR Code Generator | QR Master',
description: 'Generate QR codes to accept Crypto payments securely. Supports BTC, ETH, SOL.',
type: 'website',
url: 'https://www.qrmaster.net/tools/crypto-qr-code',
images: [{ url: '/og-crypto-generator.png', width: 1200, height: 630 }],
},
twitter: {
card: 'summary_large_image',
title: 'Free Crypto QR Code Generator',
description: 'Create secure QR codes for your crypto wallet.',
},
robots: {
index: true,
follow: true,
},
};
// JSON-LD Structured Data
const jsonLd = {
'@context': 'https://schema.org',
'@graph': [
generateSoftwareAppSchema(
'Crypto QR Code Generator',
'Generate QR codes that contain your cryptocurrency wallet address for easy payments.',
'/og-crypto-generator.png',
'FinanceApplication'
),
{
'@type': 'HowTo',
name: 'How to Create a Crypto QR Code',
description: 'Create a QR code for your Bitcoin or Ethereum wallet.',
step: [
{
'@type': 'HowToStep',
position: 1,
name: 'Select Currency',
text: 'Choose your cryptocurrency from the list (Bitcoin, Ethereum, USDT, etc.).',
},
{
'@type': 'HowToStep',
position: 2,
name: 'Enter Address',
text: 'Copy your public wallet address from your crypto app and paste it into the "Wallet Address" field.',
},
{
'@type': 'HowToStep',
position: 3,
name: 'Add Amount (Optional)',
text: 'If you are requesting a specific payment, enter the amount to pre-fill the transaction.',
},
{
'@type': 'HowToStep',
position: 4,
name: 'Customize QR',
text: 'Select a brand color (like Bitcoin Orange or Ethereum Blue) and add a frame like "Pay Now".',
},
{
'@type': 'HowToStep',
position: 5,
name: 'Download',
text: 'Download the QR code image and share it to receive funds securely.',
},
],
totalTime: 'PT30S',
},
generateFaqSchema({
'Is it safe to share my wallet address?': {
question: 'Is it safe to share my wallet address?',
answer: 'Yes. Your public wallet address is designed to be shared so you can receive funds. Never share your private key.',
},
'Which currencies are supported?': {
question: 'Which currencies are supported?',
answer: 'Our generator supports standard URI schemes for Bitcoin, Ethereum, Solana, and can generally store any wallet string for other coins.',
},
'Can I add a specific amount?': {
question: 'Can I add a specific amount?',
answer: 'Yes, you can pre-fill an amount so when the user scans, their wallet app automatically suggests the correct payment value.',
},
'Does it work with all wallets?': {
question: 'Does it work with all wallets?',
answer: 'Yes, standard crypto QR codes are universally readable by almost all modern wallet apps (Coinbase, MetaMask, Trust Wallet, etc.).',
},
'Are there any fees?': {
question: 'Are there any fees?',
answer: 'No. This generator is completely free. We do not charge any fees for generating codes or for the transactions made using them.',
},
}),
],
};
export default function CryptoQRCodePage() {
return (
<>
<script
type="application/ld+json"
dangerouslySetInnerHTML={{ __html: JSON.stringify(jsonLd) }}
/>
<ToolBreadcrumb toolName="Crypto QR Code Generator" toolSlug="crypto-qr-code" />
<div className="min-h-screen" style={{ backgroundColor: '#EBEBDF' }}>
{/* HERO SECTION */}
<section className="relative pt-20 pb-20 lg:pt-32 lg:pb-32 px-4 sm:px-6 lg:px-8 overflow-hidden bg-slate-900">
<div className="absolute inset-0 opacity-20">
{/* Circuit Pattern */}
<svg className="w-full h-full" width="100%" height="100%" xmlns="http://www.w3.org/2000/svg">
<defs>
<pattern id="circuit_pattern" width="100" height="100" patternUnits="userSpaceOnUse">
<path d="M10 10 H 90 V 90 H 10 Z" stroke="none" fill="none" />
<circle cx="20" cy="20" r="2" fill="#F7931A" />
<circle cx="80" cy="80" r="2" fill="#627EEA" />
<path d="M20 20 L 50 20 L 50 50" stroke="white" strokeWidth="1" strokeOpacity="0.1" />
</pattern>
</defs>
<rect width="100%" height="100%" fill="url(#circuit_pattern)" />
</svg>
</div>
<div className="max-w-7xl mx-auto grid lg:grid-cols-2 gap-12 items-center relative z-10">
<div className="text-center lg:text-left">
<div className="inline-flex items-center gap-2 px-3 py-1 rounded-full bg-white/10 text-white/90 text-sm font-medium mb-6 backdrop-blur-sm border border-white/10 hover:bg-white/20 transition-colors cursor-default">
<span className="flex h-2 w-2 relative">
<span className="animate-ping absolute inline-flex h-full w-full rounded-full bg-orange-400 opacity-75"></span>
<span className="relative inline-flex rounded-full h-2 w-2 bg-orange-400"></span>
</span>
Free Tool — Secure & Private
</div>
<h1 className="text-4xl md:text-5xl lg:text-6xl font-extrabold text-white tracking-tight leading-tight mb-6">
Accept Payments with <br className="hidden lg:block" />
<span className="text-transparent bg-clip-text bg-gradient-to-r from-[#F7931A] to-[#F2A900]">Crypto QR Codes</span>
</h1>
<p className="text-lg md:text-xl text-slate-400 max-w-2xl mx-auto lg:mx-0 mb-8 leading-relaxed">
Share your wallet address securely. Supports Bitcoin, Ethereum, USDT, and more.
<strong className="text-white block sm:inline mt-2 sm:mt-0"> Error-free transfers.</strong>
</p>
<div className="flex flex-wrap justify-center lg:justify-start gap-4 text-sm font-medium text-white/80">
<div className="flex items-center gap-2 bg-white/5 px-4 py-2.5 rounded-xl border border-white/10 backdrop-blur-sm">
<Bitcoin className="w-4 h-4 text-[#F7931A]" />
Bitcoin
</div>
<div className="flex items-center gap-2 bg-white/5 px-4 py-2.5 rounded-xl border border-white/10 backdrop-blur-sm">
<Coins className="w-4 h-4 text-[#627EEA]" />
Ethereum & Altcoins
</div>
<div className="flex items-center gap-2 bg-white/5 px-4 py-2.5 rounded-xl border border-white/10 backdrop-blur-sm">
<Wallet className="w-4 h-4 text-white" />
Wallet Connect
</div>
</div>
</div>
{/* Visual Abstract */}
<div className="hidden lg:flex relative items-center justify-center min-h-[400px]">
<div className="absolute w-[500px] h-[500px] bg-orange-500/10 rounded-full blur-[100px] -top-20 -right-20 animate-pulse" />
<div className="relative w-80 h-96 bg-white/5 backdrop-blur-xl border border-white/20 rounded-3xl shadow-2xl flex flex-col items-center justify-center p-8 transform rotate-2 hover:-rotate-1 transition-all duration-700 group">
<div className="absolute inset-0 bg-gradient-to-br from-white/5 to-transparent rounded-3xl" />
<div className="w-full bg-gradient-to-br from-orange-400 to-orange-600 rounded-xl shadow-lg p-5 mb-6 relative overflow-hidden text-white">
<div className="flex justify-between items-start mb-4">
<Bitcoin className="w-8 h-8 opacity-80" />
<div className="bg-white/20 px-2 py-1 rounded text-xs">BTC</div>
</div>
<div className="text-2xl font-bold tracking-wider mb-1">0.05 BTC</div>
<div className="text-xs opacity-70">$3,450.25 USD</div>
</div>
<div className="w-48 h-48 bg-white rounded-xl p-2 shadow-inner relative overflow-hidden flex items-center justify-center">
<QRCodeSVG value="https://www.qrmaster.net" size={170} fgColor="#333" level="Q" />
</div>
{/* Floating Badge */}
<div className="absolute -bottom-6 -right-6 bg-slate-900 border border-white/10 py-3 px-5 rounded-xl shadow-xl flex items-center gap-3 transform transition-transform hover:scale-105 duration-300">
<div className="bg-orange-500/20 p-2 rounded-full">
<Wallet className="w-5 h-5 text-orange-500" />
</div>
<div className="text-left">
<div className="text-[10px] text-slate-400 font-bold uppercase tracking-wider">Payment</div>
<div className="text-sm font-bold text-white">Receive Crypto</div>
</div>
</div>
</div>
</div>
</div>
</section>
{/* GENERATOR SECTION */}
<section className="py-12 px-4 sm:px-6 lg:px-8 -mt-8">
<CryptoGenerator />
</section>
{/* HOW IT WORKS */}
<section className="py-16 px-4 sm:px-6 lg:px-8 bg-white">
<div className="max-w-4xl mx-auto">
<h2 className="text-3xl font-bold text-slate-900 text-center mb-12">
How Crypto QR Codes Work
</h2>
<div className="grid md:grid-cols-3 lg:grid-cols-5 gap-8">
<article className="text-center">
<div className="w-12 h-12 rounded-2xl bg-black flex items-center justify-center mx-auto mb-4">
<Coins className="w-6 h-6 text-white" />
</div>
<h3 className="font-bold text-slate-900 mb-2">1. Select</h3>
<p className="text-slate-600 text-xs leading-relaxed">
Choose your crypto currency (BTC, ETH, etc.).
</p>
</article>
<article className="text-center">
<div className="w-12 h-12 rounded-2xl bg-black flex items-center justify-center mx-auto mb-4">
<Wallet className="w-6 h-6 text-white" />
</div>
<h3 className="font-bold text-slate-900 mb-2">2. Paste</h3>
<p className="text-slate-600 text-xs leading-relaxed">
Enter your public wallet address.
</p>
</article>
<article className="text-center">
<div className="w-12 h-12 rounded-2xl bg-black flex items-center justify-center mx-auto mb-4">
<Zap className="w-6 h-6 text-white" />
</div>
<h3 className="font-bold text-slate-900 mb-2">3. Amount</h3>
<p className="text-slate-600 text-xs leading-relaxed">
Optionally specify an amount to request.
</p>
</article>
<article className="text-center">
<div className="w-12 h-12 rounded-2xl bg-black flex items-center justify-center mx-auto mb-4">
<Sparkles className="w-6 h-6 text-white" />
</div>
<h3 className="font-bold text-slate-900 mb-2">4. Style</h3>
<p className="text-slate-600 text-xs leading-relaxed">
Customize colors and add a 'Pay' frame.
</p>
</article>
<article className="text-center">
<div className="w-12 h-12 rounded-2xl bg-black flex items-center justify-center mx-auto mb-4">
<Download className="w-6 h-6 text-white" />
</div>
<h3 className="font-bold text-slate-900 mb-2">5. Download</h3>
<p className="text-slate-600 text-xs leading-relaxed">
Save your secure QR code image.
</p>
</article>
</div>
</div>
</section>
{/* RELATED TOOLS */}
<RelatedTools />
{/* FAQ SECTION */}
<section className="py-16 px-4 sm:px-6 lg:px-8" style={{ backgroundColor: '#EBEBDF' }}>
<div className="max-w-3xl mx-auto">
<h2 className="text-3xl font-bold text-slate-900 text-center mb-4">
Frequently Asked Questions
</h2>
<p className="text-slate-600 text-center mb-10">
Common questions about Crypto QR codes.
</p>
<div className="space-y-4">
<FaqItem
question="Is it safe to share my wallet address?"
answer="Yes. Your public wallet address is designed to be shared so you can receive funds. Never share your private key."
/>
<FaqItem
question="Which currencies are supported?"
answer="Our generator supports standard URI schemes for Bitcoin, Ethereum, Solana, and can generally store any wallet string for other coins."
/>
<FaqItem
question="Can I add a specific amount?"
answer="Yes, you can pre-fill an amount so when the user scans, their wallet app automatically suggests the correct payment value."
/>
<FaqItem
question="Does it work with all wallets?"
answer="Yes, standard crypto QR codes are universally readable by almost all modern wallet apps (Coinbase, MetaMask, Trust Wallet, etc.)."
/>
<FaqItem
question="Are there any fees?"
answer="No. This generator is completely free. We do not charge any fees for generating codes or for the transactions made using them."
/>
</div>
</div>
</section>
</div>
</>
);
}
function FaqItem({ question, answer }: { question: string; answer: string }) {
return (
<details className="group bg-white rounded-xl shadow-sm border border-slate-200 overflow-hidden">
<summary className="flex items-center justify-between p-5 cursor-pointer list-none text-slate-900 font-semibold hover:bg-slate-50 transition-colors">
{question}
<span className="transition group-open:rotate-180 text-slate-400">
<svg fill="none" height="20" stroke="currentColor" strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" viewBox="0 0 24 24" width="20">
<path d="M6 9l6 6 6-6" />
</svg>
</span>
</summary>
<div className="text-slate-600 px-5 pb-5 pt-0 leading-relaxed text-sm">
{answer}
</div>
</details>
);
}
import React from 'react';
import type { Metadata } from 'next';
import CryptoGenerator from './CryptoGenerator';
import { Bitcoin, Shield, Zap, Smartphone, Wallet, Coins, Sparkles, Download, Share2 } from 'lucide-react';
import { QRCodeSVG } from 'qrcode.react';
import { ToolBreadcrumb } from '@/components/seo/BreadcrumbSchema';
import { RelatedTools } from '@/components/marketing/RelatedTools';
import { generateSoftwareAppSchema, generateFaqSchema } from '@/lib/schema-utils';
// SEO Optimized Metadata
export const metadata: Metadata = {
title: {
absolute: 'Free Crypto QR Code Generator | Krypto QR Code Erstellen | QR Master',
},
description: 'Create a QR code for your Crypto wallet address. Erstelle Bitcoin & Ethereum QR Codes für einfache Zahlungen. Supports BTC, ETH, USDT & more.',
keywords: ['crypto qr code', 'bitcoin qr generator', 'ethereum qr code', 'crypto wallet qr', 'donation qr code', 'krypto qr code', 'bitcoin qr code erstellen', 'kryptowährung qr code', 'wallet adresse qr code'],
alternates: {
canonical: 'https://www.qrmaster.net/tools/crypto-qr-code',
},
openGraph: {
title: 'Free Crypto QR Code Generator | QR Master',
description: 'Generate QR codes to accept Crypto payments securely. Supports BTC, ETH, SOL.',
type: 'website',
url: 'https://www.qrmaster.net/tools/crypto-qr-code',
images: [{ url: '/og-crypto-generator.png', width: 1200, height: 630 }],
},
twitter: {
card: 'summary_large_image',
title: 'Free Crypto QR Code Generator',
description: 'Create secure QR codes for your crypto wallet.',
},
robots: {
index: true,
follow: true,
},
};
// JSON-LD Structured Data
const jsonLd = {
'@context': 'https://schema.org',
'@graph': [
generateSoftwareAppSchema(
'Crypto QR Code Generator',
'Generate QR codes that contain your cryptocurrency wallet address for easy payments.',
'/og-crypto-generator.png',
'FinanceApplication'
),
{
'@type': 'HowTo',
name: 'How to Create a Crypto QR Code',
description: 'Create a QR code for your Bitcoin or Ethereum wallet.',
step: [
{
'@type': 'HowToStep',
position: 1,
name: 'Select Currency',
text: 'Choose your cryptocurrency from the list (Bitcoin, Ethereum, USDT, etc.).',
},
{
'@type': 'HowToStep',
position: 2,
name: 'Enter Address',
text: 'Copy your public wallet address from your crypto app and paste it into the "Wallet Address" field.',
},
{
'@type': 'HowToStep',
position: 3,
name: 'Add Amount (Optional)',
text: 'If you are requesting a specific payment, enter the amount to pre-fill the transaction.',
},
{
'@type': 'HowToStep',
position: 4,
name: 'Customize QR',
text: 'Select a brand color (like Bitcoin Orange or Ethereum Blue) and add a frame like "Pay Now".',
},
{
'@type': 'HowToStep',
position: 5,
name: 'Download',
text: 'Download the QR code image and share it to receive funds securely.',
},
],
totalTime: 'PT30S',
},
generateFaqSchema({
'Is it safe to share my wallet address?': {
question: 'Is it safe to share my wallet address?',
answer: 'Yes. Your public wallet address is designed to be shared so you can receive funds. Never share your private key.',
},
'Which currencies are supported?': {
question: 'Which currencies are supported?',
answer: 'Our generator supports standard URI schemes for Bitcoin, Ethereum, Solana, and can generally store any wallet string for other coins.',
},
'Can I add a specific amount?': {
question: 'Can I add a specific amount?',
answer: 'Yes, you can pre-fill an amount so when the user scans, their wallet app automatically suggests the correct payment value.',
},
'Does it work with all wallets?': {
question: 'Does it work with all wallets?',
answer: 'Yes, standard crypto QR codes are universally readable by almost all modern wallet apps (Coinbase, MetaMask, Trust Wallet, etc.).',
},
'Are there any fees?': {
question: 'Are there any fees?',
answer: 'No. This generator is completely free. We do not charge any fees for generating codes or for the transactions made using them.',
},
}),
],
};
export default function CryptoQRCodePage() {
return (
<>
<script
type="application/ld+json"
dangerouslySetInnerHTML={{ __html: JSON.stringify(jsonLd) }}
/>
<ToolBreadcrumb toolName="Crypto QR Code Generator" toolSlug="crypto-qr-code" />
<div className="min-h-screen" style={{ backgroundColor: '#EBEBDF' }}>
{/* HERO SECTION */}
<section className="relative pt-20 pb-20 lg:pt-32 lg:pb-32 px-4 sm:px-6 lg:px-8 overflow-hidden bg-slate-900">
<div className="absolute inset-0 opacity-20">
{/* Circuit Pattern */}
<svg className="w-full h-full" width="100%" height="100%" xmlns="http://www.w3.org/2000/svg">
<defs>
<pattern id="circuit_pattern" width="100" height="100" patternUnits="userSpaceOnUse">
<path d="M10 10 H 90 V 90 H 10 Z" stroke="none" fill="none" />
<circle cx="20" cy="20" r="2" fill="#F7931A" />
<circle cx="80" cy="80" r="2" fill="#627EEA" />
<path d="M20 20 L 50 20 L 50 50" stroke="white" strokeWidth="1" strokeOpacity="0.1" />
</pattern>
</defs>
<rect width="100%" height="100%" fill="url(#circuit_pattern)" />
</svg>
</div>
<div className="max-w-7xl mx-auto grid lg:grid-cols-2 gap-12 items-center relative z-10">
<div className="text-center lg:text-left">
<div className="inline-flex items-center gap-2 px-3 py-1 rounded-full bg-white/10 text-white/90 text-sm font-medium mb-6 backdrop-blur-sm border border-white/10 hover:bg-white/20 transition-colors cursor-default">
<span className="flex h-2 w-2 relative">
<span className="animate-ping absolute inline-flex h-full w-full rounded-full bg-orange-400 opacity-75"></span>
<span className="relative inline-flex rounded-full h-2 w-2 bg-orange-400"></span>
</span>
Free Tool — Secure & Private
</div>
<h1 className="text-4xl md:text-5xl lg:text-6xl font-extrabold text-white tracking-tight leading-tight mb-6">
Accept Payments with <br className="hidden lg:block" />
<span className="text-transparent bg-clip-text bg-gradient-to-r from-[#F7931A] to-[#F2A900]">Crypto QR Codes</span>
</h1>
<p className="text-lg md:text-xl text-slate-400 max-w-2xl mx-auto lg:mx-0 mb-8 leading-relaxed">
Share your wallet address securely. Supports Bitcoin, Ethereum, USDT, and more.
<strong className="text-white block sm:inline mt-2 sm:mt-0"> Error-free transfers.</strong>
</p>
<div className="flex flex-wrap justify-center lg:justify-start gap-4 text-sm font-medium text-white/80">
<div className="flex items-center gap-2 bg-white/5 px-4 py-2.5 rounded-xl border border-white/10 backdrop-blur-sm">
<Bitcoin className="w-4 h-4 text-[#F7931A]" />
Bitcoin
</div>
<div className="flex items-center gap-2 bg-white/5 px-4 py-2.5 rounded-xl border border-white/10 backdrop-blur-sm">
<Coins className="w-4 h-4 text-[#627EEA]" />
Ethereum & Altcoins
</div>
<div className="flex items-center gap-2 bg-white/5 px-4 py-2.5 rounded-xl border border-white/10 backdrop-blur-sm">
<Wallet className="w-4 h-4 text-white" />
Wallet Connect
</div>
</div>
</div>
{/* Visual Abstract */}
<div className="hidden lg:flex relative items-center justify-center min-h-[400px]">
<div className="absolute w-[500px] h-[500px] bg-orange-500/10 rounded-full blur-[100px] -top-20 -right-20 animate-pulse" />
<div className="relative w-80 h-96 bg-white/5 backdrop-blur-xl border border-white/20 rounded-3xl shadow-2xl flex flex-col items-center justify-center p-8 transform rotate-2 hover:-rotate-1 transition-all duration-700 group">
<div className="absolute inset-0 bg-gradient-to-br from-white/5 to-transparent rounded-3xl" />
<div className="w-full bg-gradient-to-br from-orange-400 to-orange-600 rounded-xl shadow-lg p-5 mb-6 relative overflow-hidden text-white">
<div className="flex justify-between items-start mb-4">
<Bitcoin className="w-8 h-8 opacity-80" />
<div className="bg-white/20 px-2 py-1 rounded text-xs">BTC</div>
</div>
<div className="text-2xl font-bold tracking-wider mb-1">0.05 BTC</div>
<div className="text-xs opacity-70">$3,450.25 USD</div>
</div>
<div className="w-48 h-48 bg-white rounded-xl p-2 shadow-inner relative overflow-hidden flex items-center justify-center">
<QRCodeSVG value="https://www.qrmaster.net" size={170} fgColor="#333" level="Q" />
</div>
{/* Floating Badge */}
<div className="absolute -bottom-6 -right-6 bg-slate-900 border border-white/10 py-3 px-5 rounded-xl shadow-xl flex items-center gap-3 transform transition-transform hover:scale-105 duration-300">
<div className="bg-orange-500/20 p-2 rounded-full">
<Wallet className="w-5 h-5 text-orange-500" />
</div>
<div className="text-left">
<div className="text-[10px] text-slate-400 font-bold uppercase tracking-wider">Payment</div>
<div className="text-sm font-bold text-white">Receive Crypto</div>
</div>
</div>
</div>
</div>
</div>
</section>
{/* GENERATOR SECTION */}
<section className="py-12 px-4 sm:px-6 lg:px-8 -mt-8">
<CryptoGenerator />
</section>
{/* HOW IT WORKS */}
<section className="py-16 px-4 sm:px-6 lg:px-8 bg-white">
<div className="max-w-4xl mx-auto">
<h2 className="text-3xl font-bold text-slate-900 text-center mb-12">
How Crypto QR Codes Work
</h2>
<div className="grid md:grid-cols-3 lg:grid-cols-5 gap-8">
<article className="text-center">
<div className="w-12 h-12 rounded-2xl bg-black flex items-center justify-center mx-auto mb-4">
<Coins className="w-6 h-6 text-white" />
</div>
<h3 className="font-bold text-slate-900 mb-2">1. Select</h3>
<p className="text-slate-600 text-xs leading-relaxed">
Choose your crypto currency (BTC, ETH, etc.).
</p>
</article>
<article className="text-center">
<div className="w-12 h-12 rounded-2xl bg-black flex items-center justify-center mx-auto mb-4">
<Wallet className="w-6 h-6 text-white" />
</div>
<h3 className="font-bold text-slate-900 mb-2">2. Paste</h3>
<p className="text-slate-600 text-xs leading-relaxed">
Enter your public wallet address.
</p>
</article>
<article className="text-center">
<div className="w-12 h-12 rounded-2xl bg-black flex items-center justify-center mx-auto mb-4">
<Zap className="w-6 h-6 text-white" />
</div>
<h3 className="font-bold text-slate-900 mb-2">3. Amount</h3>
<p className="text-slate-600 text-xs leading-relaxed">
Optionally specify an amount to request.
</p>
</article>
<article className="text-center">
<div className="w-12 h-12 rounded-2xl bg-black flex items-center justify-center mx-auto mb-4">
<Sparkles className="w-6 h-6 text-white" />
</div>
<h3 className="font-bold text-slate-900 mb-2">4. Style</h3>
<p className="text-slate-600 text-xs leading-relaxed">
Customize colors and add a 'Pay' frame.
</p>
</article>
<article className="text-center">
<div className="w-12 h-12 rounded-2xl bg-black flex items-center justify-center mx-auto mb-4">
<Download className="w-6 h-6 text-white" />
</div>
<h3 className="font-bold text-slate-900 mb-2">5. Download</h3>
<p className="text-slate-600 text-xs leading-relaxed">
Save your secure QR code image.
</p>
</article>
</div>
</div>
</section>
{/* RELATED TOOLS */}
<RelatedTools />
{/* FAQ SECTION */}
<section className="py-16 px-4 sm:px-6 lg:px-8" style={{ backgroundColor: '#EBEBDF' }}>
<div className="max-w-3xl mx-auto">
<h2 className="text-3xl font-bold text-slate-900 text-center mb-4">
Frequently Asked Questions
</h2>
<p className="text-slate-600 text-center mb-10">
Common questions about Crypto QR codes.
</p>
<div className="space-y-4">
<FaqItem
question="Is it safe to share my wallet address?"
answer="Yes. Your public wallet address is designed to be shared so you can receive funds. Never share your private key."
/>
<FaqItem
question="Which currencies are supported?"
answer="Our generator supports standard URI schemes for Bitcoin, Ethereum, Solana, and can generally store any wallet string for other coins."
/>
<FaqItem
question="Can I add a specific amount?"
answer="Yes, you can pre-fill an amount so when the user scans, their wallet app automatically suggests the correct payment value."
/>
<FaqItem
question="Does it work with all wallets?"
answer="Yes, standard crypto QR codes are universally readable by almost all modern wallet apps (Coinbase, MetaMask, Trust Wallet, etc.)."
/>
<FaqItem
question="Are there any fees?"
answer="No. This generator is completely free. We do not charge any fees for generating codes or for the transactions made using them."
/>
</div>
</div>
</section>
</div>
</>
);
}
function FaqItem({ question, answer }: { question: string; answer: string }) {
return (
<details className="group bg-white rounded-xl shadow-sm border border-slate-200 overflow-hidden">
<summary className="flex items-center justify-between p-5 cursor-pointer list-none text-slate-900 font-semibold hover:bg-slate-50 transition-colors">
{question}
<span className="transition group-open:rotate-180 text-slate-400">
<svg fill="none" height="20" stroke="currentColor" strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" viewBox="0 0 24 24" width="20">
<path d="M6 9l6 6 6-6" />
</svg>
</span>
</summary>
<div className="text-slate-600 px-5 pb-5 pt-0 leading-relaxed text-sm">
{answer}
</div>
</details>
);
}

592
src/app/(main)/(marketing)/tools/email-qr-code/EmailGenerator.tsx
View File

@@ -1,296 +1,296 @@
'use client';
import React, { useState, useRef } from 'react';
import Link from 'next/link';
import { QRCodeSVG } from 'qrcode.react';
import {
Mail,
Download,
Check,
Sparkles,
Type,
FileText
} from 'lucide-react';
import { Button } from '@/components/ui/Button';
import { Input } from '@/components/ui/Input';
import { cn } from '@/lib/utils';
// Brand Colors
const BRAND = {
paleGrey: '#EBEBDF',
richRed: '#dc2626',
};
// QR Color Options
const QR_COLORS = [
{ name: 'Classic Black', value: '#000000' },
{ name: 'Email Red', value: '#dc2626' },
{ name: 'Deep Blue', value: '#1E40AF' },
{ name: 'Violet', value: '#7C3AED' },
{ name: 'Teal', value: '#0D9488' },
{ name: 'Coral', value: '#F43F5E' },
{ name: 'Emerald', value: '#10B981' },
{ name: 'Rose', value: '#F43F5E' },
];
// Frame Options
const FRAME_OPTIONS = [
{ id: 'none', label: 'No Frame' },
{ id: 'email', label: 'Email Me' },
{ id: 'contact', label: 'Contact' },
{ id: 'send', label: 'Send Mail' },
];
export default function EmailGenerator() {
const [formData, setFormData] = useState({
email: '',
subject: '',
body: ''
});
const [qrColor, setQrColor] = useState('#dc2626');
const [frameType, setFrameType] = useState('none');
const qrRef = useRef<HTMLDivElement>(null);
// Generate Mailto Link
// Format: mailto:email?subject=...&body=...
const getMailtoUrl = () => {
const params = new URLSearchParams();
if (formData.subject) params.append('subject', formData.subject);
if (formData.body) params.append('body', formData.body);
const queryString = params.toString();
return `mailto:${formData.email}${queryString ? `?${queryString}` : ''}`;
};
const handleDownload = async (format: 'png' | 'svg') => {
if (!qrRef.current) return;
try {
if (format === 'png') {
const { toPng } = await import('html-to-image');
const dataUrl = await toPng(qrRef.current, { cacheBust: true, pixelRatio: 3 });
const link = document.createElement('a');
link.download = `email-qr-code.png`;
link.href = dataUrl;
link.click();
} else {
const svgData = qrRef.current.querySelector('svg')?.outerHTML;
if (svgData) {
const blob = new Blob([svgData], { type: 'image/svg+xml;charset=utf-8' });
const urlBlob = URL.createObjectURL(blob);
const link = document.createElement('a');
link.href = urlBlob;
link.download = `email-qr-code.svg`;
link.click();
}
}
} catch (err) {
console.error('Download failed', err);
}
};
const getFrameLabel = () => {
const frame = FRAME_OPTIONS.find(f => f.id === frameType);
return frame?.id !== 'none' ? frame?.label : null;
};
const handleChange = (e: React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement>) => {
setFormData({ ...formData, [e.target.name]: e.target.value });
};
return (
<div className="w-full max-w-5xl mx-auto px-4 md:px-6">
{/* Main Generator Card */}
<div className="bg-white rounded-3xl shadow-2xl shadow-slate-900/10 overflow-hidden border border-slate-100">
<div className="grid lg:grid-cols-2">
{/* LEFT: Input Section */}
<div className="p-6 md:p-8 lg:p-10 space-y-8 border-r border-slate-100">
{/* Input Fields */}
<div className="space-y-6">
<h2 className="text-lg font-bold text-slate-900 flex items-center gap-2">
<Mail className="w-5 h-5 text-red-600" />
Email Details
</h2>
<div>
<label className="block text-sm font-medium text-slate-700 mb-2">Recipient Email</label>
<div className="relative">
<Mail className="absolute left-3 top-3 w-4 h-4 text-slate-400" />
<Input
name="email"
placeholder="recipient@example.com"
value={formData.email}
onChange={handleChange}
className="h-11 rounded-xl pl-9"
type="email"
/>
</div>
</div>
<div>
<label className="block text-sm font-medium text-slate-700 mb-2">Subject Line</label>
<div className="relative">
<Type className="absolute left-3 top-3 w-4 h-4 text-slate-400" />
<Input
name="subject"
placeholder="e.g. Inquiry about services"
value={formData.subject}
onChange={handleChange}
className="h-11 rounded-xl pl-9"
/>
</div>
</div>
<div>
<label className="block text-sm font-medium text-slate-700 mb-2">Body Message (Optional)</label>
<textarea
name="body"
placeholder="Hi there, I would like to know more about..."
value={formData.body}
onChange={handleChange}
className="w-full h-32 p-3 rounded-xl border border-slate-200 focus:border-red-600 focus:ring-1 focus:ring-red-600 focus:outline-none resize-none text-base"
/>
</div>
</div>
{/* Divider */}
<div className="border-t border-slate-100"></div>
{/* Design Options */}
<div className="space-y-6">
<h2 className="text-lg font-bold text-slate-900 flex items-center gap-2">
<Sparkles className="w-5 h-5 text-red-600" />
Design Options
</h2>
{/* Color Picker */}
<div>
<label className="block text-sm font-medium text-slate-700 mb-3">QR Code Color</label>
<div className="flex flex-wrap gap-2">
{QR_COLORS.map((c) => (
<button
key={c.name}
onClick={() => setQrColor(c.value)}
className={cn(
"w-9 h-9 rounded-full border-2 flex items-center justify-center transition-all hover:scale-110",
qrColor === c.value ? "border-slate-900 ring-2 ring-offset-2 ring-slate-200" : "border-white shadow-md"
)}
style={{ backgroundColor: c.value }}
aria-label={`Select ${c.name}`}
title={c.name}
>
{qrColor === c.value && <Check className="w-4 h-4 text-white" strokeWidth={3} />}
</button>
))}
</div>
</div>
{/* Frame Selector */}
<div>
<label className="block text-sm font-medium text-slate-700 mb-3">Frame Label</label>
<div className="grid grid-cols-2 sm:grid-cols-4 gap-2">
{FRAME_OPTIONS.map((frame) => (
<button
key={frame.id}
onClick={() => setFrameType(frame.id)}
className={cn(
"py-2.5 px-3 rounded-lg text-sm font-medium transition-all border",
frameType === frame.id
? "bg-red-600 text-white border-red-600"
: "bg-slate-50 text-slate-600 border-slate-200 hover:border-slate-300"
)}
>
{frame.label}
</button>
))}
</div>
</div>
</div>
</div>
{/* RIGHT: Preview Section */}
<div className="p-6 md:p-8 lg:p-10 flex flex-col items-center justify-center" style={{ backgroundColor: BRAND.paleGrey }}>
{/* QR Card with Frame */}
<div
ref={qrRef}
className="bg-white rounded-3xl shadow-xl p-6 sm:p-8 flex flex-col items-center w-full max-w-[320px]"
>
{/* Frame Label */}
{getFrameLabel() && (
<div
className="mb-5 px-8 py-2.5 rounded-full text-white font-bold text-sm tracking-widest uppercase shadow-md"
style={{ backgroundColor: qrColor }}
>
{getFrameLabel()}
</div>
)}
{/* QR Code */}
<div className="bg-white">
<QRCodeSVG
value={getMailtoUrl() || 'mailto:hello@example.com'}
size={240}
level="M"
includeMargin={false}
fgColor={qrColor}
/>
</div>
{/* Info */}
<div className="mt-6 text-center">
<div className="flex items-center justify-center w-12 h-12 rounded-full bg-red-50 mx-auto mb-3">
<Mail className="w-6 h-6 text-red-600" />
</div>
<h3 className="font-bold text-slate-900 text-lg truncate max-w-[260px] mx-auto">
{formData.email || 'Email QR Code'}
</h3>
</div>
</div>
{/* Download Buttons */}
<div className="flex items-center gap-3 mt-8">
<Button
onClick={() => handleDownload('png')}
className="bg-red-600 hover:bg-red-700 text-white shadow-lg"
>
<Download className="w-4 h-4 mr-2" />
Download PNG
</Button>
<Button
onClick={() => handleDownload('svg')}
variant="outline"
className="border-slate-300 hover:bg-white"
>
<Download className="w-4 h-4 mr-2" />
SVG
</Button>
</div>
<p className="text-xs text-slate-600 mt-4 text-center">
100% free. No signup required.
</p>
</div>
</div>
</div>
{/* Upsell Banner */}
<div className="mt-8 bg-gradient-to-r from-red-600 to-rose-700 rounded-2xl p-6 flex flex-col sm:flex-row items-center justify-between gap-4">
<div className="text-white text-center sm:text-left">
<h3 className="font-bold text-lg">Change your email address often?</h3>
<p className="text-white/80 text-sm mt-1">Dynamic QR Codes allow you to update the recipient without reprinting.</p>
</div>
<Link href="/signup">
<Button className="bg-white text-red-700 hover:bg-slate-100 shrink-0 shadow-lg">
Go Dynamic
</Button>
</Link>
</div>
</div>
);
}
'use client';
import React, { useState, useRef } from 'react';
import Link from 'next/link';
import { QRCodeSVG } from 'qrcode.react';
import {
Mail,
Download,
Check,
Sparkles,
Type,
FileText
} from 'lucide-react';
import { Button } from '@/components/ui/Button';
import { Input } from '@/components/ui/Input';
import { cn } from '@/lib/utils';
// Brand Colors
const BRAND = {
paleGrey: '#EBEBDF',
richRed: '#dc2626',
};
// QR Color Options
const QR_COLORS = [
{ name: 'Classic Black', value: '#000000' },
{ name: 'Email Red', value: '#dc2626' },
{ name: 'Deep Blue', value: '#1E40AF' },
{ name: 'Violet', value: '#7C3AED' },
{ name: 'Teal', value: '#0D9488' },
{ name: 'Coral', value: '#F43F5E' },
{ name: 'Emerald', value: '#10B981' },
{ name: 'Rose', value: '#F43F5E' },
];
// Frame Options
const FRAME_OPTIONS = [
{ id: 'none', label: 'No Frame' },
{ id: 'email', label: 'Email Me' },
{ id: 'contact', label: 'Contact' },
{ id: 'send', label: 'Send Mail' },
];
export default function EmailGenerator() {
const [formData, setFormData] = useState({
email: '',
subject: '',
body: ''
});
const [qrColor, setQrColor] = useState('#dc2626');
const [frameType, setFrameType] = useState('none');
const qrRef = useRef<HTMLDivElement>(null);
// Generate Mailto Link
// Format: mailto:email?subject=...&body=...
const getMailtoUrl = () => {
const params = new URLSearchParams();
if (formData.subject) params.append('subject', formData.subject);
if (formData.body) params.append('body', formData.body);
const queryString = params.toString();
return `mailto:${formData.email}${queryString ? `?${queryString}` : ''}`;
};
const handleDownload = async (format: 'png' | 'svg') => {
if (!qrRef.current) return;
try {
if (format === 'png') {
const { toPng } = await import('html-to-image');
const dataUrl = await toPng(qrRef.current, { cacheBust: true, pixelRatio: 3 });
const link = document.createElement('a');
link.download = `email-qr-code.png`;
link.href = dataUrl;
link.click();
} else {
const svgData = qrRef.current.querySelector('svg')?.outerHTML;
if (svgData) {
const blob = new Blob([svgData], { type: 'image/svg+xml;charset=utf-8' });
const urlBlob = URL.createObjectURL(blob);
const link = document.createElement('a');
link.href = urlBlob;
link.download = `email-qr-code.svg`;
link.click();
}
}
} catch (err) {
console.error('Download failed', err);
}
};
const getFrameLabel = () => {
const frame = FRAME_OPTIONS.find(f => f.id === frameType);
return frame?.id !== 'none' ? frame?.label : null;
};
const handleChange = (e: React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement>) => {
setFormData({ ...formData, [e.target.name]: e.target.value });
};
return (
<div className="w-full max-w-5xl mx-auto px-4 md:px-6">
{/* Main Generator Card */}
<div className="bg-white rounded-3xl shadow-2xl shadow-slate-900/10 overflow-hidden border border-slate-100">
<div className="grid lg:grid-cols-2">
{/* LEFT: Input Section */}
<div className="p-6 md:p-8 lg:p-10 space-y-8 border-r border-slate-100">
{/* Input Fields */}
<div className="space-y-6">
<h2 className="text-lg font-bold text-slate-900 flex items-center gap-2">
<Mail className="w-5 h-5 text-red-600" />
Email Details
</h2>
<div>
<label className="block text-sm font-medium text-slate-700 mb-2">Recipient Email</label>
<div className="relative">
<Mail className="absolute left-3 top-3 w-4 h-4 text-slate-400" />
<Input
name="email"
placeholder="recipient@example.com"
value={formData.email}
onChange={handleChange}
className="h-11 rounded-xl pl-9"
type="email"
/>
</div>
</div>
<div>
<label className="block text-sm font-medium text-slate-700 mb-2">Subject Line</label>
<div className="relative">
<Type className="absolute left-3 top-3 w-4 h-4 text-slate-400" />
<Input
name="subject"
placeholder="e.g. Inquiry about services"
value={formData.subject}
onChange={handleChange}
className="h-11 rounded-xl pl-9"
/>
</div>
</div>
<div>
<label className="block text-sm font-medium text-slate-700 mb-2">Body Message (Optional)</label>
<textarea
name="body"
placeholder="Hi there, I would like to know more about..."
value={formData.body}
onChange={handleChange}
className="w-full h-32 p-3 rounded-xl border border-slate-200 focus:border-red-600 focus:ring-1 focus:ring-red-600 focus:outline-none resize-none text-base"
/>
</div>
</div>
{/* Divider */}
<div className="border-t border-slate-100"></div>
{/* Design Options */}
<div className="space-y-6">
<h2 className="text-lg font-bold text-slate-900 flex items-center gap-2">
<Sparkles className="w-5 h-5 text-red-600" />
Design Options
</h2>
{/* Color Picker */}
<div>
<label className="block text-sm font-medium text-slate-700 mb-3">QR Code Color</label>
<div className="flex flex-wrap gap-2">
{QR_COLORS.map((c) => (
<button
key={c.name}
onClick={() => setQrColor(c.value)}
className={cn(
"w-9 h-9 rounded-full border-2 flex items-center justify-center transition-all hover:scale-110",
qrColor === c.value ? "border-slate-900 ring-2 ring-offset-2 ring-slate-200" : "border-white shadow-md"
)}
style={{ backgroundColor: c.value }}
aria-label={`Select ${c.name}`}
title={c.name}
>
{qrColor === c.value && <Check className="w-4 h-4 text-white" strokeWidth={3} />}
</button>
))}
</div>
</div>
{/* Frame Selector */}
<div>
<label className="block text-sm font-medium text-slate-700 mb-3">Frame Label</label>
<div className="grid grid-cols-2 sm:grid-cols-4 gap-2">
{FRAME_OPTIONS.map((frame) => (
<button
key={frame.id}
onClick={() => setFrameType(frame.id)}
className={cn(
"py-2.5 px-3 rounded-lg text-sm font-medium transition-all border",
frameType === frame.id
? "bg-red-600 text-white border-red-600"
: "bg-slate-50 text-slate-600 border-slate-200 hover:border-slate-300"
)}
>
{frame.label}
</button>
))}
</div>
</div>
</div>
</div>
{/* RIGHT: Preview Section */}
<div className="p-6 md:p-8 lg:p-10 flex flex-col items-center justify-center" style={{ backgroundColor: BRAND.paleGrey }}>
{/* QR Card with Frame */}
<div
ref={qrRef}
className="bg-white rounded-3xl shadow-xl p-6 sm:p-8 flex flex-col items-center w-full max-w-[320px]"
>
{/* Frame Label */}
{getFrameLabel() && (
<div
className="mb-5 px-8 py-2.5 rounded-full text-white font-bold text-sm tracking-widest uppercase shadow-md"
style={{ backgroundColor: qrColor }}
>
{getFrameLabel()}
</div>
)}
{/* QR Code */}
<div className="bg-white">
<QRCodeSVG
value={getMailtoUrl() || 'mailto:hello@example.com'}
size={240}
level="M"
includeMargin={false}
fgColor={qrColor}
/>
</div>
{/* Info */}
<div className="mt-6 text-center">
<div className="flex items-center justify-center w-12 h-12 rounded-full bg-red-50 mx-auto mb-3">
<Mail className="w-6 h-6 text-red-600" />
</div>
<h3 className="font-bold text-slate-900 text-lg truncate max-w-[260px] mx-auto">
{formData.email || 'Email QR Code'}
</h3>
</div>
</div>
{/* Download Buttons */}
<div className="flex items-center gap-3 mt-8">
<Button
onClick={() => handleDownload('png')}
className="bg-red-600 hover:bg-red-700 text-white shadow-lg"
>
<Download className="w-4 h-4 mr-2" />
Download PNG
</Button>
<Button
onClick={() => handleDownload('svg')}
variant="outline"
className="border-slate-300 hover:bg-white"
>
<Download className="w-4 h-4 mr-2" />
SVG
</Button>
</div>
<p className="text-xs text-slate-600 mt-4 text-center">
100% free. No signup required.
</p>
</div>
</div>
</div>
{/* Upsell Banner */}
<div className="mt-8 bg-gradient-to-r from-red-600 to-rose-700 rounded-2xl p-6 flex flex-col sm:flex-row items-center justify-between gap-4">
<div className="text-white text-center sm:text-left">
<h3 className="font-bold text-lg">Change your email address often?</h3>
<p className="text-white/80 text-sm mt-1">Dynamic QR Codes allow you to update the recipient without reprinting.</p>
</div>
<Link href="/signup">
<Button className="bg-white text-red-700 hover:bg-slate-100 shrink-0 shadow-lg">
Go Dynamic
</Button>
</Link>
</div>
</div>
);
}

538
src/app/(main)/(marketing)/tools/email-qr-code/page.tsx
View File

@@ -1,269 +1,269 @@
import React from 'react';
import type { Metadata } from 'next';
import EmailGenerator from './EmailGenerator';
import { Mail, Zap, Smartphone, Lock, Download, Sparkles } from 'lucide-react';
import { QRCodeSVG } from 'qrcode.react';
import { ToolBreadcrumb } from '@/components/seo/BreadcrumbSchema';
import { RelatedTools } from '@/components/marketing/RelatedTools';
import { generateSoftwareAppSchema, generateFaqSchema } from '@/lib/schema-utils';
// SEO Optimized Metadata
export const metadata: Metadata = {
title: {
absolute: 'Free Email QR Code Generator | Email QR Code Erstellen | QR Master',
},
description: 'Create an Email QR code to send emails instantly. Email QR Code erstellen mit Betreff und Text. 100% free and secure.',
keywords: ['email qr code', 'mailto qr', 'email generator', 'free qr code', 'email qr code erstellen', 'email schreiben qr code', 'qr code für email', 'mailto qr code generator', 'email vorlage qr code'],
alternates: {
canonical: 'https://www.qrmaster.net/tools/email-qr-code',
},
openGraph: {
title: 'Free Email QR Code Generator | QR Master',
description: 'Send emails instantly with a custom QR code. Add recipient, subject, and body.',
type: 'website',
url: 'https://www.qrmaster.net/tools/email-qr-code',
images: [{ url: '/og-email-generator.png', width: 1200, height: 630 }],
},
};
// JSON-LD
const jsonLd = {
'@context': 'https://schema.org',
'@graph': [
generateSoftwareAppSchema(
'Email QR Code Generator',
'Generate Email QR codes for mailto links with subject and body.',
'/og-email-generator.png'
),
{
'@type': 'HowTo',
name: 'How to Create an Email QR Code',
step: [
{ '@type': 'HowToStep', position: 1, name: 'Enter Recipient', text: 'Type the email address you want to receive emails at.' },
{ '@type': 'HowToStep', position: 2, name: 'Add Details', text: 'Optional: Add a pre-filled subject line and body text.' },
{ '@type': 'HowToStep', position: 3, name: 'Customize', text: 'Choose a brand color and add a call-to-action frame.' },
{ '@type': 'HowToStep', position: 4, name: 'Download', text: 'Download your QR code in PNG or SVG.' },
{ '@type': 'HowToStep', position: 5, name: 'Share', text: 'Add to business cards or flyers.' },
],
totalTime: 'PT30S',
},
generateFaqSchema({
'How does it work?': {
question: 'How does it work?',
answer: 'When scanned, it opens the user\'s default email app (like Gmail or Outlook) with a new draft composed to your address.',
},
'Can I add a subject line?': {
question: 'Can I add a subject line?',
answer: 'Yes! You can pre-fill the subject line and the body content so the sender just has to hit send.',
},
'Is it free?': {
question: 'Is it free?',
answer: 'Yes, 100% free with unlimited scans.',
},
'Does it work with attachments?': {
question: 'Does it work with attachments?',
answer: 'No. The standard mailto format does not support attaching files automatically. Users will have to attach files manually.',
},
'Is it private?': {
question: 'Is it private?',
answer: 'Yes. The data is encoded directly into the QR code. We do not store your email or message data.',
},
}),
]
};
export default function EmailPage() {
return (
<>
<script
type="application/ld+json"
dangerouslySetInnerHTML={{ __html: JSON.stringify(jsonLd) }}
/>
<ToolBreadcrumb toolName="Email QR Code Generator" toolSlug="email-qr-code" />
<div className="min-h-screen" style={{ backgroundColor: '#EBEBDF' }}>
{/* HERO SECTION */}
<section className="relative pt-20 pb-20 lg:pt-32 lg:pb-32 px-4 sm:px-6 lg:px-8 overflow-hidden" style={{ backgroundColor: '#dc2626' }}>
{/* Background Pattern */}
<div className="absolute inset-0 opacity-10">
<svg className="w-full h-full" viewBox="0 0 100 100" preserveAspectRatio="none">
<path d="M0 100 C 20 0 50 0 100 100 Z" fill="url(#grad1)" />
<defs>
<linearGradient id="grad1" x1="0%" y1="0%" x2="100%" y2="0%">
<stop offset="0%" style={{ stopColor: 'white', stopOpacity: 1 }} />
<stop offset="100%" style={{ stopColor: 'white', stopOpacity: 0 }} />
</linearGradient>
</defs>
</svg>
</div>
<div className="max-w-7xl mx-auto grid lg:grid-cols-2 gap-12 items-center relative z-10">
{/* Left: Text Content */}
<div className="text-center lg:text-left">
<div className="inline-flex items-center gap-2 px-3 py-1 rounded-full bg-white/10 text-white/90 text-sm font-medium mb-6 backdrop-blur-sm border border-white/10 hover:bg-white/20 transition-colors cursor-default">
<span className="flex h-2 w-2 relative">
<span className="animate-ping absolute inline-flex h-full w-full rounded-full bg-red-300 opacity-75"></span>
<span className="relative inline-flex rounded-full h-2 w-2 bg-red-300"></span>
</span>
Free Tool — No Signup Required
</div>
<h1 className="text-4xl md:text-5xl lg:text-6xl font-extrabold text-white tracking-tight leading-tight mb-6">
The Smartest Way to <br className="hidden lg:block" />
<span className="text-transparent bg-clip-text bg-gradient-to-r from-red-200 to-rose-200">Receive Emails</span>
</h1>
<p className="text-lg md:text-xl text-red-50 max-w-2xl mx-auto lg:mx-0 mb-8 leading-relaxed">
Create a QR code that opens a pre-composed email instantly.
<strong className="text-white block sm:inline mt-2 sm:mt-0"> Perfect for feedback & inquiries.</strong>
</p>
<div className="flex flex-wrap justify-center lg:justify-start gap-4 text-sm font-medium text-white/80">
<div className="flex items-center gap-2 bg-white/5 px-4 py-2.5 rounded-xl border border-white/5 backdrop-blur-sm">
<Mail className="w-4 h-4 text-red-300" />
Instant Draft
</div>
<div className="flex items-center gap-2 bg-white/5 px-4 py-2.5 rounded-xl border border-white/5 backdrop-blur-sm">
<Zap className="w-4 h-4 text-yellow-300" />
Pre-filled Content
</div>
<div className="flex items-center gap-2 bg-white/5 px-4 py-2.5 rounded-xl border border-white/5 backdrop-blur-sm">
<Smartphone className="w-4 h-4 text-red-300" />
Mobile Ready
</div>
</div>
</div>
{/* Right: Visual Abstract Composition */}
<div className="hidden lg:flex relative items-center justify-center min-h-[400px]">
{/* Decorative Glow */}
<div className="absolute w-[500px] h-[500px] bg-red-500/30 rounded-full blur-[100px] -top-20 -right-20 animate-pulse" />
{/* Floating Glass Card */}
<div className="relative w-80 h-96 bg-white/5 backdrop-blur-xl border border-white/20 rounded-3xl shadow-2xl flex flex-col items-center justify-center p-8 transform rotate-6 hover:rotate-3 transition-all duration-700 group">
<div className="absolute inset-0 bg-gradient-to-br from-white/10 to-transparent rounded-3xl" />
{/* Mock QR */}
<div className="w-48 h-48 bg-white rounded-xl p-2 shadow-inner mb-6 relative overflow-hidden flex items-center justify-center">
<QRCodeSVG value="https://www.qrmaster.net" size={170} fgColor="#b91c1c" level="Q" />
{/* Scan Line */}
<div className="absolute top-1/2 left-0 w-full h-1 bg-red-500 shadow-[0_0_20px_rgba(220,38,38,1)] animate-pulse" />
</div>
<div className="w-full space-y-3">
<div className="h-2 w-32 bg-white/20 rounded-full mx-auto" />
<div className="h-2 w-20 bg-white/10 rounded-full mx-auto" />
</div>
{/* Floating Badge */}
<div className="absolute -bottom-6 -left-6 bg-white py-3 px-5 rounded-xl shadow-xl flex items-center gap-3 transform transition-transform hover:scale-105 duration-300">
<div className="bg-red-100 p-2 rounded-full">
<Mail className="w-5 h-5 text-red-600" />
</div>
<div className="text-left">
<div className="text-[10px] text-slate-400 font-bold uppercase tracking-wider">Status</div>
<div className="text-sm font-bold text-slate-900">Live</div>
</div>
</div>
</div>
</div>
</div>
</section>
{/* GENERATOR SECTION */}
<section className="py-12 px-4 sm:px-6 lg:px-8 -mt-8">
<EmailGenerator />
</section>
{/* HOW IT WORKS */}
<section className="py-16 px-4 sm:px-6 lg:px-8 bg-white">
<div className="max-w-4xl mx-auto">
<h2 className="text-3xl font-bold text-slate-900 text-center mb-12">
How Email QR Codes Work
</h2>
<div className="grid md:grid-cols-3 lg:grid-cols-5 gap-8">
<article className="text-center">
<div className="w-12 h-12 rounded-2xl bg-[#1A1265]/10 flex items-center justify-center mx-auto mb-4">
<Mail className="w-6 h-6 text-[#1A1265]" />
</div>
<h3 className="font-bold text-slate-900 mb-2">1. Add Email</h3>
<p className="text-slate-600 text-xs leading-relaxed">Enter the address and subject.</p>
</article>
<article className="text-center">
<div className="w-12 h-12 rounded-2xl bg-[#1A1265]/10 flex items-center justify-center mx-auto mb-4">
<Sparkles className="w-6 h-6 text-[#1A1265]" />
</div>
<h3 className="font-bold text-slate-900 mb-2">2. Customize</h3>
<p className="text-slate-600 text-xs leading-relaxed">Pick a brand color.</p>
</article>
<article className="text-center">
<div className="w-12 h-12 rounded-2xl bg-[#1A1265]/10 flex items-center justify-center mx-auto mb-4">
<Zap className="w-6 h-6 text-[#1A1265]" />
</div>
<h3 className="font-bold text-slate-900 mb-2">3. Style</h3>
<p className="text-slate-600 text-xs leading-relaxed">Add a cool frame.</p>
</article>
<article className="text-center">
<div className="w-12 h-12 rounded-2xl bg-[#1A1265]/10 flex items-center justify-center mx-auto mb-4">
<Download className="w-6 h-6 text-[#1A1265]" />
</div>
<h3 className="font-bold text-slate-900 mb-2">4. Download</h3>
<p className="text-slate-600 text-xs leading-relaxed">Save your QR code.</p>
</article>
<article className="text-center">
<div className="w-12 h-12 rounded-2xl bg-[#1A1265]/10 flex items-center justify-center mx-auto mb-4">
<Smartphone className="w-6 h-6 text-[#1A1265]" />
</div>
<h3 className="font-bold text-slate-900 mb-2">5. Share</h3>
<p className="text-slate-600 text-xs leading-relaxed">Print and get emails.</p>
</article>
</div>
</div>
</section>
{/* RELATED TOOLS */}
<RelatedTools />
{/* FAQ SECTION */}
<section className="py-16 px-4 sm:px-6 lg:px-8" style={{ backgroundColor: '#EBEBDF' }}>
<div className="max-w-3xl mx-auto">
<h2 className="text-3xl font-bold text-slate-900 text-center mb-4">
Frequently Asked Questions
</h2>
<p className="text-slate-600 text-center mb-10">Common questions about Email QR codes.</p>
<div className="space-y-4">
<FaqItem question="Does it work with Gmail?" answer="Yes, and Outlook, Apple Mail, Yahoo, etc. It opens the default mail app on the user's device." />
<FaqItem question="Is it reversible?" answer="Yes, if you made a mistake you would need to generate a new code, as static QR codes cannot be edited after creation." />
<FaqItem question="Is this tool free?" answer="Yes, completely free to use." />
<FaqItem question="Can I attach files?" answer="No. The mailto standard does not support automatic attachment of files. Users must attach them manually." />
<FaqItem question="Is it private?" answer="Yes. The data is encoded directly into the QR code. We do not store your email or message data." />
</div>
</div>
</section>
</div>
</>
);
}
// FAQ Item Component
function FaqItem({ question, answer }: { question: string; answer: string }) {
return (
<details className="group bg-white rounded-xl shadow-sm border border-slate-200 overflow-hidden">
<summary className="flex items-center justify-between p-5 cursor-pointer list-none text-slate-900 font-semibold hover:bg-slate-50 transition-colors">
{question}
<span className="transition group-open:rotate-180 text-slate-400">
<svg fill="none" height="20" stroke="currentColor" strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" viewBox="0 0 24 24" width="20">
<path d="M6 9l6 6 6-6" />
</svg>
</span>
</summary>
<div className="text-slate-600 px-5 pb-5 pt-0 leading-relaxed text-sm">
{answer}
</div>
</details>
);
}
import React from 'react';
import type { Metadata } from 'next';
import EmailGenerator from './EmailGenerator';
import { Mail, Zap, Smartphone, Lock, Download, Sparkles } from 'lucide-react';
import { QRCodeSVG } from 'qrcode.react';
import { ToolBreadcrumb } from '@/components/seo/BreadcrumbSchema';
import { RelatedTools } from '@/components/marketing/RelatedTools';
import { generateSoftwareAppSchema, generateFaqSchema } from '@/lib/schema-utils';
// SEO Optimized Metadata
export const metadata: Metadata = {
title: {
absolute: 'Free Email QR Code Generator | Email QR Code Erstellen | QR Master',
},
description: 'Create an Email QR code to send emails instantly. Email QR Code erstellen mit Betreff und Text. 100% free and secure.',
keywords: ['email qr code', 'mailto qr', 'email generator', 'free qr code', 'email qr code erstellen', 'email schreiben qr code', 'qr code für email', 'mailto qr code generator', 'email vorlage qr code'],
alternates: {
canonical: 'https://www.qrmaster.net/tools/email-qr-code',
},
openGraph: {
title: 'Free Email QR Code Generator | QR Master',
description: 'Send emails instantly with a custom QR code. Add recipient, subject, and body.',
type: 'website',
url: 'https://www.qrmaster.net/tools/email-qr-code',
images: [{ url: '/og-email-generator.png', width: 1200, height: 630 }],
},
};
// JSON-LD
const jsonLd = {
'@context': 'https://schema.org',
'@graph': [
generateSoftwareAppSchema(
'Email QR Code Generator',
'Generate Email QR codes for mailto links with subject and body.',
'/og-email-generator.png'
),
{
'@type': 'HowTo',
name: 'How to Create an Email QR Code',
step: [
{ '@type': 'HowToStep', position: 1, name: 'Enter Recipient', text: 'Type the email address you want to receive emails at.' },
{ '@type': 'HowToStep', position: 2, name: 'Add Details', text: 'Optional: Add a pre-filled subject line and body text.' },
{ '@type': 'HowToStep', position: 3, name: 'Customize', text: 'Choose a brand color and add a call-to-action frame.' },
{ '@type': 'HowToStep', position: 4, name: 'Download', text: 'Download your QR code in PNG or SVG.' },
{ '@type': 'HowToStep', position: 5, name: 'Share', text: 'Add to business cards or flyers.' },
],
totalTime: 'PT30S',
},
generateFaqSchema({
'How does it work?': {
question: 'How does it work?',
answer: 'When scanned, it opens the user\'s default email app (like Gmail or Outlook) with a new draft composed to your address.',
},
'Can I add a subject line?': {
question: 'Can I add a subject line?',
answer: 'Yes! You can pre-fill the subject line and the body content so the sender just has to hit send.',
},
'Is it free?': {
question: 'Is it free?',
answer: 'Yes, 100% free with unlimited scans.',
},
'Does it work with attachments?': {
question: 'Does it work with attachments?',
answer: 'No. The standard mailto format does not support attaching files automatically. Users will have to attach files manually.',
},
'Is it private?': {
question: 'Is it private?',
answer: 'Yes. The data is encoded directly into the QR code. We do not store your email or message data.',
},
}),
]
};
export default function EmailPage() {
return (
<>
<script
type="application/ld+json"
dangerouslySetInnerHTML={{ __html: JSON.stringify(jsonLd) }}
/>
<ToolBreadcrumb toolName="Email QR Code Generator" toolSlug="email-qr-code" />
<div className="min-h-screen" style={{ backgroundColor: '#EBEBDF' }}>
{/* HERO SECTION */}
<section className="relative pt-20 pb-20 lg:pt-32 lg:pb-32 px-4 sm:px-6 lg:px-8 overflow-hidden" style={{ backgroundColor: '#dc2626' }}>
{/* Background Pattern */}
<div className="absolute inset-0 opacity-10">
<svg className="w-full h-full" viewBox="0 0 100 100" preserveAspectRatio="none">
<path d="M0 100 C 20 0 50 0 100 100 Z" fill="url(#grad1)" />
<defs>
<linearGradient id="grad1" x1="0%" y1="0%" x2="100%" y2="0%">
<stop offset="0%" style={{ stopColor: 'white', stopOpacity: 1 }} />
<stop offset="100%" style={{ stopColor: 'white', stopOpacity: 0 }} />
</linearGradient>
</defs>
</svg>
</div>
<div className="max-w-7xl mx-auto grid lg:grid-cols-2 gap-12 items-center relative z-10">
{/* Left: Text Content */}
<div className="text-center lg:text-left">
<div className="inline-flex items-center gap-2 px-3 py-1 rounded-full bg-white/10 text-white/90 text-sm font-medium mb-6 backdrop-blur-sm border border-white/10 hover:bg-white/20 transition-colors cursor-default">
<span className="flex h-2 w-2 relative">
<span className="animate-ping absolute inline-flex h-full w-full rounded-full bg-red-300 opacity-75"></span>
<span className="relative inline-flex rounded-full h-2 w-2 bg-red-300"></span>
</span>
Free Tool — No Signup Required
</div>
<h1 className="text-4xl md:text-5xl lg:text-6xl font-extrabold text-white tracking-tight leading-tight mb-6">
The Smartest Way to <br className="hidden lg:block" />
<span className="text-transparent bg-clip-text bg-gradient-to-r from-red-200 to-rose-200">Receive Emails</span>
</h1>
<p className="text-lg md:text-xl text-red-50 max-w-2xl mx-auto lg:mx-0 mb-8 leading-relaxed">
Create a QR code that opens a pre-composed email instantly.
<strong className="text-white block sm:inline mt-2 sm:mt-0"> Perfect for feedback & inquiries.</strong>
</p>
<div className="flex flex-wrap justify-center lg:justify-start gap-4 text-sm font-medium text-white/80">
<div className="flex items-center gap-2 bg-white/5 px-4 py-2.5 rounded-xl border border-white/5 backdrop-blur-sm">
<Mail className="w-4 h-4 text-red-300" />
Instant Draft
</div>
<div className="flex items-center gap-2 bg-white/5 px-4 py-2.5 rounded-xl border border-white/5 backdrop-blur-sm">
<Zap className="w-4 h-4 text-yellow-300" />
Pre-filled Content
</div>
<div className="flex items-center gap-2 bg-white/5 px-4 py-2.5 rounded-xl border border-white/5 backdrop-blur-sm">
<Smartphone className="w-4 h-4 text-red-300" />
Mobile Ready
</div>
</div>
</div>
{/* Right: Visual Abstract Composition */}
<div className="hidden lg:flex relative items-center justify-center min-h-[400px]">
{/* Decorative Glow */}
<div className="absolute w-[500px] h-[500px] bg-red-500/30 rounded-full blur-[100px] -top-20 -right-20 animate-pulse" />
{/* Floating Glass Card */}
<div className="relative w-80 h-96 bg-white/5 backdrop-blur-xl border border-white/20 rounded-3xl shadow-2xl flex flex-col items-center justify-center p-8 transform rotate-6 hover:rotate-3 transition-all duration-700 group">
<div className="absolute inset-0 bg-gradient-to-br from-white/10 to-transparent rounded-3xl" />
{/* Mock QR */}
<div className="w-48 h-48 bg-white rounded-xl p-2 shadow-inner mb-6 relative overflow-hidden flex items-center justify-center">
<QRCodeSVG value="https://www.qrmaster.net" size={170} fgColor="#b91c1c" level="Q" />
{/* Scan Line */}
<div className="absolute top-1/2 left-0 w-full h-1 bg-red-500 shadow-[0_0_20px_rgba(220,38,38,1)] animate-pulse" />
</div>
<div className="w-full space-y-3">
<div className="h-2 w-32 bg-white/20 rounded-full mx-auto" />
<div className="h-2 w-20 bg-white/10 rounded-full mx-auto" />
</div>
{/* Floating Badge */}
<div className="absolute -bottom-6 -left-6 bg-white py-3 px-5 rounded-xl shadow-xl flex items-center gap-3 transform transition-transform hover:scale-105 duration-300">
<div className="bg-red-100 p-2 rounded-full">
<Mail className="w-5 h-5 text-red-600" />
</div>
<div className="text-left">
<div className="text-[10px] text-slate-400 font-bold uppercase tracking-wider">Status</div>
<div className="text-sm font-bold text-slate-900">Live</div>
</div>
</div>
</div>
</div>
</div>
</section>
{/* GENERATOR SECTION */}
<section className="py-12 px-4 sm:px-6 lg:px-8 -mt-8">
<EmailGenerator />
</section>
{/* HOW IT WORKS */}
<section className="py-16 px-4 sm:px-6 lg:px-8 bg-white">
<div className="max-w-4xl mx-auto">
<h2 className="text-3xl font-bold text-slate-900 text-center mb-12">
How Email QR Codes Work
</h2>
<div className="grid md:grid-cols-3 lg:grid-cols-5 gap-8">
<article className="text-center">
<div className="w-12 h-12 rounded-2xl bg-[#1A1265]/10 flex items-center justify-center mx-auto mb-4">
<Mail className="w-6 h-6 text-[#1A1265]" />
</div>
<h3 className="font-bold text-slate-900 mb-2">1. Add Email</h3>
<p className="text-slate-600 text-xs leading-relaxed">Enter the address and subject.</p>
</article>
<article className="text-center">
<div className="w-12 h-12 rounded-2xl bg-[#1A1265]/10 flex items-center justify-center mx-auto mb-4">
<Sparkles className="w-6 h-6 text-[#1A1265]" />
</div>
<h3 className="font-bold text-slate-900 mb-2">2. Customize</h3>
<p className="text-slate-600 text-xs leading-relaxed">Pick a brand color.</p>
</article>
<article className="text-center">
<div className="w-12 h-12 rounded-2xl bg-[#1A1265]/10 flex items-center justify-center mx-auto mb-4">
<Zap className="w-6 h-6 text-[#1A1265]" />
</div>
<h3 className="font-bold text-slate-900 mb-2">3. Style</h3>
<p className="text-slate-600 text-xs leading-relaxed">Add a cool frame.</p>
</article>
<article className="text-center">
<div className="w-12 h-12 rounded-2xl bg-[#1A1265]/10 flex items-center justify-center mx-auto mb-4">
<Download className="w-6 h-6 text-[#1A1265]" />
</div>
<h3 className="font-bold text-slate-900 mb-2">4. Download</h3>
<p className="text-slate-600 text-xs leading-relaxed">Save your QR code.</p>
</article>
<article className="text-center">
<div className="w-12 h-12 rounded-2xl bg-[#1A1265]/10 flex items-center justify-center mx-auto mb-4">
<Smartphone className="w-6 h-6 text-[#1A1265]" />
</div>
<h3 className="font-bold text-slate-900 mb-2">5. Share</h3>
<p className="text-slate-600 text-xs leading-relaxed">Print and get emails.</p>
</article>
</div>
</div>
</section>
{/* RELATED TOOLS */}
<RelatedTools />
{/* FAQ SECTION */}
<section className="py-16 px-4 sm:px-6 lg:px-8" style={{ backgroundColor: '#EBEBDF' }}>
<div className="max-w-3xl mx-auto">
<h2 className="text-3xl font-bold text-slate-900 text-center mb-4">
Frequently Asked Questions
</h2>
<p className="text-slate-600 text-center mb-10">Common questions about Email QR codes.</p>
<div className="space-y-4">
<FaqItem question="Does it work with Gmail?" answer="Yes, and Outlook, Apple Mail, Yahoo, etc. It opens the default mail app on the user's device." />
<FaqItem question="Is it reversible?" answer="Yes, if you made a mistake you would need to generate a new code, as static QR codes cannot be edited after creation." />
<FaqItem question="Is this tool free?" answer="Yes, completely free to use." />
<FaqItem question="Can I attach files?" answer="No. The mailto standard does not support automatic attachment of files. Users must attach them manually." />
<FaqItem question="Is it private?" answer="Yes. The data is encoded directly into the QR code. We do not store your email or message data." />
</div>
</div>
</section>
</div>
</>
);
}
// FAQ Item Component
function FaqItem({ question, answer }: { question: string; answer: string }) {
return (
<details className="group bg-white rounded-xl shadow-sm border border-slate-200 overflow-hidden">
<summary className="flex items-center justify-between p-5 cursor-pointer list-none text-slate-900 font-semibold hover:bg-slate-50 transition-colors">
{question}
<span className="transition group-open:rotate-180 text-slate-400">
<svg fill="none" height="20" stroke="currentColor" strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" viewBox="0 0 24 24" width="20">
<path d="M6 9l6 6 6-6" />
</svg>
</span>
</summary>
<div className="text-slate-600 px-5 pb-5 pt-0 leading-relaxed text-sm">
{answer}
</div>
</details>
);
}

660
src/app/(main)/(marketing)/tools/event-qr-code/EventGenerator.tsx
View File

@@ -1,330 +1,330 @@
'use client';
import React, { useState, useRef } from 'react';
import Link from 'next/link';
import { QRCodeSVG } from 'qrcode.react';
import {
Calendar,
Download,
Check,
Sparkles,
Clock,
MapPin,
AlignLeft
} from 'lucide-react';
import { Button } from '@/components/ui/Button';
import { Input } from '@/components/ui/Input';
import { cn } from '@/lib/utils';
// Brand Colors
const BRAND = {
paleGrey: '#F5F3FF', // Violet-50
primary: '#7C3AED', // Violet-600
primaryDark: '#6D28D9', // Violet-700
};
// QR Color Options
const QR_COLORS = [
{ name: 'Violet', value: '#7C3AED' },
{ name: 'Purple', value: '#9333EA' },
{ name: 'Classic Black', value: '#000000' },
{ name: 'Deep Blue', value: '#1E40AF' },
{ name: 'Pink', value: '#DB2777' },
{ name: 'Emerald', value: '#10B981' },
{ name: 'Rose', value: '#F43F5E' },
];
// Frame Options
const FRAME_OPTIONS = [
{ id: 'none', label: 'No Frame' },
{ id: 'scanme', label: 'Scan Me' },
{ id: 'event', label: 'Event' },
{ id: 'save', label: 'Save Date' },
];
export default function EventGenerator() {
const [title, setTitle] = useState('');
const [location, setLocation] = useState('');
const [description, setDescription] = useState('');
const [startDate, setStartDate] = useState('');
const [endDate, setEndDate] = useState('');
const [qrColor, setQrColor] = useState(BRAND.primary);
const [frameType, setFrameType] = useState('none');
const qrRef = useRef<HTMLDivElement>(null);
// Format Date for iCal: YYYYMMDDTHHMMSS
const formatDate = (dateString: string) => {
if (!dateString) return '';
const d = new Date(dateString);
// Basic formatting, assumes local time for simplicity in this static tool
const year = d.getFullYear();
const month = ('0' + (d.getMonth() + 1)).slice(-2);
const day = ('0' + d.getDate()).slice(-2);
const hours = ('0' + d.getHours()).slice(-2);
const minutes = ('0' + d.getMinutes()).slice(-2);
const seconds = ('0' + d.getSeconds()).slice(-2);
return `${year}${month}${day}T${hours}${minutes}${seconds}`;
};
const qrValue = [
'BEGIN:VEVENT',
`SUMMARY:${title}`,
`LOCATION:${location}`,
`DESCRIPTION:${description}`,
`DTSTART:${formatDate(startDate)}`,
`DTEND:${formatDate(endDate)}`,
'END:VEVENT'
].join('\n');
const handleDownload = async (format: 'png' | 'svg') => {
if (!qrRef.current) return;
try {
if (format === 'png') {
const { toPng } = await import('html-to-image');
const dataUrl = await toPng(qrRef.current, { cacheBust: true, pixelRatio: 3 });
const link = document.createElement('a');
link.download = `event-qr-code.png`;
link.href = dataUrl;
link.click();
} else {
const svgData = qrRef.current.querySelector('svg')?.outerHTML;
if (svgData) {
const blob = new Blob([svgData], { type: 'image/svg+xml;charset=utf-8' });
const url = URL.createObjectURL(blob);
const link = document.createElement('a');
link.href = url;
link.download = `event-qr-code.svg`;
link.click();
}
}
} catch (err) {
console.error('Download failed', err);
}
};
const getFrameLabel = () => {
const frame = FRAME_OPTIONS.find(f => f.id === frameType);
return frame?.id !== 'none' ? frame?.label : null;
};
return (
<div className="w-full max-w-5xl mx-auto px-4 md:px-6">
{/* Main Generator Card */}
<div className="bg-white rounded-3xl shadow-2xl shadow-slate-900/10 overflow-hidden border border-slate-100">
<div className="grid lg:grid-cols-2">
{/* LEFT: Input Section */}
<div className="p-6 md:p-8 lg:p-10 space-y-8 border-r border-slate-100">
{/* Event Details */}
<div className="space-y-6">
<h2 className="text-lg font-bold text-slate-900 flex items-center gap-2">
<Calendar className="w-5 h-5 text-[#7C3AED]" />
Event Details
</h2>
<div className="space-y-4">
<div>
<label className="block text-sm font-medium text-slate-700 mb-2">Event Title</label>
<Input
placeholder="Summer Party"
value={title}
onChange={(e) => setTitle(e.target.value)}
className="h-12 text-base rounded-xl border-slate-200 focus:border-[#7C3AED] focus:ring-[#7C3AED]"
/>
</div>
<div className="grid grid-cols-2 gap-4">
<div>
<label className="block text-sm font-medium text-slate-700 mb-2">Start Time</label>
<div className="relative">
<Input
type="datetime-local"
value={startDate}
onChange={(e) => setStartDate(e.target.value)}
className="h-12 text-sm rounded-xl border-slate-200 focus:border-[#1A1265] focus:ring-[#1A1265]"
/>
</div>
</div>
<div>
<label className="block text-sm font-medium text-slate-700 mb-2">End Time</label>
<div className="relative">
<Input
type="datetime-local"
value={endDate}
onChange={(e) => setEndDate(e.target.value)}
className="h-12 text-sm rounded-xl border-slate-200 focus:border-[#7C3AED] focus:ring-[#7C3AED]"
/>
</div>
</div>
</div>
<div>
<label className="block text-sm font-medium text-slate-700 mb-2">Location</label>
<div className="relative">
<MapPin className="absolute left-3 top-3.5 w-5 h-5 text-slate-400" />
<Input
placeholder="123 Main St, New York"
value={location}
onChange={(e) => setLocation(e.target.value)}
className="pl-10 h-12 text-base rounded-xl border-slate-200 focus:border-[#1A1265] focus:ring-[#1A1265]"
/>
</div>
</div>
<div>
<label className="block text-sm font-medium text-slate-700 mb-2">Description</label>
<textarea
className="w-full h-24 p-4 border border-slate-200 rounded-xl focus:outline-none focus:ring-2 focus:ring-[#1A1265] resize-none text-slate-800 placeholder:text-slate-400"
placeholder="Join us for a celebration..."
value={description}
onChange={(e) => setDescription(e.target.value)}
/>
</div>
</div>
</div>
<div className="border-t border-slate-100"></div>
{/* Design Options */}
<div className="space-y-6">
<h2 className="text-lg font-bold text-slate-900 flex items-center gap-2">
<Sparkles className="w-5 h-5 text-[#7C3AED]" />
Design Options
</h2>
{/* Color Picker */}
<div>
<label className="block text-sm font-medium text-slate-700 mb-3">QR Code Color</label>
<div className="flex flex-wrap gap-2">
{QR_COLORS.map((c) => (
<button
key={c.name}
onClick={() => setQrColor(c.value)}
className={cn(
"w-9 h-9 rounded-full border-2 flex items-center justify-center transition-all hover:scale-110",
qrColor === c.value ? "border-slate-900 ring-2 ring-offset-2 ring-slate-200" : "border-white shadow-md"
)}
style={{ backgroundColor: c.value }}
aria-label={`Select ${c.name}`}
title={c.name}
>
{qrColor === c.value && <Check className="w-4 h-4 text-white" strokeWidth={3} />}
</button>
))}
</div>
</div>
{/* Frame Selector */}
<div>
<label className="block text-sm font-medium text-slate-700 mb-3">Frame Label</label>
<div className="grid grid-cols-2 sm:grid-cols-4 gap-2">
{FRAME_OPTIONS.map((frame) => (
<button
key={frame.id}
onClick={() => setFrameType(frame.id)}
className={cn(
"py-2.5 px-3 rounded-lg text-sm font-medium transition-all border",
frameType === frame.id
? "bg-[#7C3AED] text-white border-[#7C3AED]"
: "bg-slate-50 text-slate-600 border-slate-200 hover:border-slate-300"
)}
>
{frame.label}
</button>
))}
</div>
</div>
</div>
</div>
{/* RIGHT: Preview Section */}
<div className="p-6 md:p-8 lg:p-10 flex flex-col items-center justify-center" style={{ backgroundColor: BRAND.paleGrey }}>
{/* QR Card with Frame */}
<div
ref={qrRef}
className="bg-white rounded-3xl shadow-xl p-6 sm:p-8 flex flex-col items-center w-full max-w-[320px]"
>
{/* Frame Label */}
{getFrameLabel() && (
<div
className="mb-5 px-8 py-2.5 rounded-full text-white font-bold text-sm tracking-widest uppercase shadow-md"
style={{ backgroundColor: qrColor }}
>
{getFrameLabel()}
</div>
)}
{/* QR Code */}
<div className="bg-white">
<QRCodeSVG
value={(title || startDate) ? qrValue : "Title"}
size={240}
level="M"
includeMargin={false}
fgColor={qrColor}
/>
</div>
{/* Info Preview */}
<div className="mt-6 text-center max-w-[260px]">
<h3 className="font-bold text-slate-900 text-lg flex items-center justify-center gap-2 truncate">
<Calendar className="w-4 h-4 text-[#7C3AED] shrink-0" />
<span className="truncate">{title || 'Event Title'}</span>
</h3>
{(startDate) && (
<div className="text-xs text-slate-600 mt-1 flex items-center justify-center gap-1">
<Clock className="w-3 h-3" />
{new Date(startDate).toLocaleDateString()}
</div>
)}
</div>
</div>
{/* Download Buttons */}
<div className="flex items-center gap-3 mt-8">
<Button
onClick={() => handleDownload('png')}
className="bg-[#7C3AED] hover:bg-[#6D28D9] text-white shadow-lg"
>
<Download className="w-4 h-4 mr-2" />
Download PNG
</Button>
<Button
onClick={() => handleDownload('svg')}
variant="outline"
className="border-slate-300 hover:bg-white"
>
<Download className="w-4 h-4 mr-2" />
SVG
</Button>
</div>
<p className="text-xs text-slate-600 mt-4 text-center">
Scanning adds the event to the user's calendar.
</p>
</div>
</div>
</div>
{/* Upsell Banner */}
<div className="mt-8 bg-gradient-to-r from-[#7C3AED] to-[#6D28D9] rounded-2xl p-6 flex flex-col sm:flex-row items-center justify-between gap-4">
<div className="text-white text-center sm:text-left">
<h3 className="font-bold text-lg">Planning a big event?</h3>
<p className="text-white/80 text-sm mt-1">
Use a Dynamic QR Code to track RSVPs and update event details if the schedule changes.
</p>
</div>
<Link href="/signup">
<Button className="bg-white text-[#7C3AED] hover:bg-slate-100 shrink-0 shadow-lg">
Get Dynamic Events
</Button>
</Link>
</div>
</div>
);
}
'use client';
import React, { useState, useRef } from 'react';
import Link from 'next/link';
import { QRCodeSVG } from 'qrcode.react';
import {
Calendar,
Download,
Check,
Sparkles,
Clock,
MapPin,
AlignLeft
} from 'lucide-react';
import { Button } from '@/components/ui/Button';
import { Input } from '@/components/ui/Input';
import { cn } from '@/lib/utils';
// Brand Colors
const BRAND = {
paleGrey: '#F5F3FF', // Violet-50
primary: '#7C3AED', // Violet-600
primaryDark: '#6D28D9', // Violet-700
};
// QR Color Options
const QR_COLORS = [
{ name: 'Violet', value: '#7C3AED' },
{ name: 'Purple', value: '#9333EA' },
{ name: 'Classic Black', value: '#000000' },
{ name: 'Deep Blue', value: '#1E40AF' },
{ name: 'Pink', value: '#DB2777' },
{ name: 'Emerald', value: '#10B981' },
{ name: 'Rose', value: '#F43F5E' },
];
// Frame Options
const FRAME_OPTIONS = [
{ id: 'none', label: 'No Frame' },
{ id: 'scanme', label: 'Scan Me' },
{ id: 'event', label: 'Event' },
{ id: 'save', label: 'Save Date' },
];
export default function EventGenerator() {
const [title, setTitle] = useState('');
const [location, setLocation] = useState('');
const [description, setDescription] = useState('');
const [startDate, setStartDate] = useState('');
const [endDate, setEndDate] = useState('');
const [qrColor, setQrColor] = useState(BRAND.primary);
const [frameType, setFrameType] = useState('none');
const qrRef = useRef<HTMLDivElement>(null);
// Format Date for iCal: YYYYMMDDTHHMMSS
const formatDate = (dateString: string) => {
if (!dateString) return '';
const d = new Date(dateString);
// Basic formatting, assumes local time for simplicity in this static tool
const year = d.getFullYear();
const month = ('0' + (d.getMonth() + 1)).slice(-2);
const day = ('0' + d.getDate()).slice(-2);
const hours = ('0' + d.getHours()).slice(-2);
const minutes = ('0' + d.getMinutes()).slice(-2);
const seconds = ('0' + d.getSeconds()).slice(-2);
return `${year}${month}${day}T${hours}${minutes}${seconds}`;
};
const qrValue = [
'BEGIN:VEVENT',
`SUMMARY:${title}`,
`LOCATION:${location}`,
`DESCRIPTION:${description}`,
`DTSTART:${formatDate(startDate)}`,
`DTEND:${formatDate(endDate)}`,
'END:VEVENT'
].join('\n');
const handleDownload = async (format: 'png' | 'svg') => {
if (!qrRef.current) return;
try {
if (format === 'png') {
const { toPng } = await import('html-to-image');
const dataUrl = await toPng(qrRef.current, { cacheBust: true, pixelRatio: 3 });
const link = document.createElement('a');
link.download = `event-qr-code.png`;
link.href = dataUrl;
link.click();
} else {
const svgData = qrRef.current.querySelector('svg')?.outerHTML;
if (svgData) {
const blob = new Blob([svgData], { type: 'image/svg+xml;charset=utf-8' });
const url = URL.createObjectURL(blob);
const link = document.createElement('a');
link.href = url;
link.download = `event-qr-code.svg`;
link.click();
}
}
} catch (err) {
console.error('Download failed', err);
}
};
const getFrameLabel = () => {
const frame = FRAME_OPTIONS.find(f => f.id === frameType);
return frame?.id !== 'none' ? frame?.label : null;
};
return (
<div className="w-full max-w-5xl mx-auto px-4 md:px-6">
{/* Main Generator Card */}
<div className="bg-white rounded-3xl shadow-2xl shadow-slate-900/10 overflow-hidden border border-slate-100">
<div className="grid lg:grid-cols-2">
{/* LEFT: Input Section */}
<div className="p-6 md:p-8 lg:p-10 space-y-8 border-r border-slate-100">
{/* Event Details */}
<div className="space-y-6">
<h2 className="text-lg font-bold text-slate-900 flex items-center gap-2">
<Calendar className="w-5 h-5 text-[#7C3AED]" />
Event Details
</h2>
<div className="space-y-4">
<div>
<label className="block text-sm font-medium text-slate-700 mb-2">Event Title</label>
<Input
placeholder="Summer Party"
value={title}
onChange={(e) => setTitle(e.target.value)}
className="h-12 text-base rounded-xl border-slate-200 focus:border-[#7C3AED] focus:ring-[#7C3AED]"
/>
</div>
<div className="grid grid-cols-2 gap-4">
<div>
<label className="block text-sm font-medium text-slate-700 mb-2">Start Time</label>
<div className="relative">
<Input
type="datetime-local"
value={startDate}
onChange={(e) => setStartDate(e.target.value)}
className="h-12 text-sm rounded-xl border-slate-200 focus:border-[#1A1265] focus:ring-[#1A1265]"
/>
</div>
</div>
<div>
<label className="block text-sm font-medium text-slate-700 mb-2">End Time</label>
<div className="relative">
<Input
type="datetime-local"
value={endDate}
onChange={(e) => setEndDate(e.target.value)}
className="h-12 text-sm rounded-xl border-slate-200 focus:border-[#7C3AED] focus:ring-[#7C3AED]"
/>
</div>
</div>
</div>
<div>
<label className="block text-sm font-medium text-slate-700 mb-2">Location</label>
<div className="relative">
<MapPin className="absolute left-3 top-3.5 w-5 h-5 text-slate-400" />
<Input
placeholder="123 Main St, New York"
value={location}
onChange={(e) => setLocation(e.target.value)}
className="pl-10 h-12 text-base rounded-xl border-slate-200 focus:border-[#1A1265] focus:ring-[#1A1265]"
/>
</div>
</div>
<div>
<label className="block text-sm font-medium text-slate-700 mb-2">Description</label>
<textarea
className="w-full h-24 p-4 border border-slate-200 rounded-xl focus:outline-none focus:ring-2 focus:ring-[#1A1265] resize-none text-slate-800 placeholder:text-slate-400"
placeholder="Join us for a celebration..."
value={description}
onChange={(e) => setDescription(e.target.value)}
/>
</div>
</div>
</div>
<div className="border-t border-slate-100"></div>
{/* Design Options */}
<div className="space-y-6">
<h2 className="text-lg font-bold text-slate-900 flex items-center gap-2">
<Sparkles className="w-5 h-5 text-[#7C3AED]" />
Design Options
</h2>
{/* Color Picker */}
<div>
<label className="block text-sm font-medium text-slate-700 mb-3">QR Code Color</label>
<div className="flex flex-wrap gap-2">
{QR_COLORS.map((c) => (
<button
key={c.name}
onClick={() => setQrColor(c.value)}
className={cn(
"w-9 h-9 rounded-full border-2 flex items-center justify-center transition-all hover:scale-110",
qrColor === c.value ? "border-slate-900 ring-2 ring-offset-2 ring-slate-200" : "border-white shadow-md"
)}
style={{ backgroundColor: c.value }}
aria-label={`Select ${c.name}`}
title={c.name}
>
{qrColor === c.value && <Check className="w-4 h-4 text-white" strokeWidth={3} />}
</button>
))}
</div>
</div>
{/* Frame Selector */}
<div>
<label className="block text-sm font-medium text-slate-700 mb-3">Frame Label</label>
<div className="grid grid-cols-2 sm:grid-cols-4 gap-2">
{FRAME_OPTIONS.map((frame) => (
<button
key={frame.id}
onClick={() => setFrameType(frame.id)}
className={cn(
"py-2.5 px-3 rounded-lg text-sm font-medium transition-all border",
frameType === frame.id
? "bg-[#7C3AED] text-white border-[#7C3AED]"
: "bg-slate-50 text-slate-600 border-slate-200 hover:border-slate-300"
)}
>
{frame.label}
</button>
))}
</div>
</div>
</div>
</div>
{/* RIGHT: Preview Section */}
<div className="p-6 md:p-8 lg:p-10 flex flex-col items-center justify-center" style={{ backgroundColor: BRAND.paleGrey }}>
{/* QR Card with Frame */}
<div
ref={qrRef}
className="bg-white rounded-3xl shadow-xl p-6 sm:p-8 flex flex-col items-center w-full max-w-[320px]"
>
{/* Frame Label */}
{getFrameLabel() && (
<div
className="mb-5 px-8 py-2.5 rounded-full text-white font-bold text-sm tracking-widest uppercase shadow-md"
style={{ backgroundColor: qrColor }}
>
{getFrameLabel()}
</div>
)}
{/* QR Code */}
<div className="bg-white">
<QRCodeSVG
value={(title || startDate) ? qrValue : "Title"}
size={240}
level="M"
includeMargin={false}
fgColor={qrColor}
/>
</div>
{/* Info Preview */}
<div className="mt-6 text-center max-w-[260px]">
<h3 className="font-bold text-slate-900 text-lg flex items-center justify-center gap-2 truncate">
<Calendar className="w-4 h-4 text-[#7C3AED] shrink-0" />
<span className="truncate">{title || 'Event Title'}</span>
</h3>
{(startDate) && (
<div className="text-xs text-slate-600 mt-1 flex items-center justify-center gap-1">
<Clock className="w-3 h-3" />
{new Date(startDate).toLocaleDateString()}
</div>
)}
</div>
</div>
{/* Download Buttons */}
<div className="flex items-center gap-3 mt-8">
<Button
onClick={() => handleDownload('png')}
className="bg-[#7C3AED] hover:bg-[#6D28D9] text-white shadow-lg"
>
<Download className="w-4 h-4 mr-2" />
Download PNG
</Button>
<Button
onClick={() => handleDownload('svg')}
variant="outline"
className="border-slate-300 hover:bg-white"
>
<Download className="w-4 h-4 mr-2" />
SVG
</Button>
</div>
<p className="text-xs text-slate-600 mt-4 text-center">
Scanning adds the event to the user's calendar.
</p>
</div>
</div>
</div>
{/* Upsell Banner */}
<div className="mt-8 bg-gradient-to-r from-[#7C3AED] to-[#6D28D9] rounded-2xl p-6 flex flex-col sm:flex-row items-center justify-between gap-4">
<div className="text-white text-center sm:text-left">
<h3 className="font-bold text-lg">Planning a big event?</h3>
<p className="text-white/80 text-sm mt-1">
Use a Dynamic QR Code to track RSVPs and update event details if the schedule changes.
</p>
</div>
<Link href="/signup">
<Button className="bg-white text-[#7C3AED] hover:bg-slate-100 shrink-0 shadow-lg">
Get Dynamic Events
</Button>
</Link>
</div>
</div>
);
}

650
src/app/(main)/(marketing)/tools/event-qr-code/page.tsx
View File

@@ -1,325 +1,325 @@
import React from 'react';
import type { Metadata } from 'next';
import EventGenerator from './EventGenerator';
import { Calendar, Shield, Zap, Smartphone, Clock, UserCheck, Download, Share2, Check } from 'lucide-react';
import { QRCodeSVG } from 'qrcode.react';
import { ToolBreadcrumb } from '@/components/seo/BreadcrumbSchema';
import { RelatedTools } from '@/components/marketing/RelatedTools';
import { generateSoftwareAppSchema, generateFaqSchema } from '@/lib/schema-utils';
// SEO Optimized Metadata
export const metadata: Metadata = {
title: {
absolute: 'Free Event QR Code Generator | Termin & Kalender QR | QR Master',
},
description: 'Create a QR code for your event. Verabredung & Termine direkt in den Kalender speichern. Save the date instantly. Free & Easy.',
keywords: ['event qr code', 'calendar qr code', 'save the date qr', 'ical qr generator', 'invitation qr code', 'event qr code erstellen', 'veranstaltung qr code', 'kalender qr code', 'termin qr code', 'save the date qr code'],
alternates: {
canonical: 'https://www.qrmaster.net/tools/event-qr-code',
},
openGraph: {
title: 'Free Event QR Code Generator | QR Master',
description: 'Generate QR codes to save events to calendars. Share dates easily.',
type: 'website',
url: 'https://www.qrmaster.net/tools/event-qr-code',
images: [{ url: '/og-event-generator.png', width: 1200, height: 630 }],
},
twitter: {
card: 'summary_large_image',
title: 'Free Event QR Code Generator',
description: 'Create QR codes for events. Instant save-to-calendar.',
},
robots: {
index: true,
follow: true,
},
};
// JSON-LD Structured Data
const jsonLd = {
'@context': 'https://schema.org',
'@graph': [
generateSoftwareAppSchema(
'Event QR Code Generator',
'Generate QR codes that add event details to the user\'s digital calendar.',
'/og-event-generator.png'
),
{
'@type': 'HowTo',
name: 'How to Create an Event QR Code',
description: 'Create a QR code that saves an event to a calendar.',
step: [
{
'@type': 'HowToStep',
position: 1,
name: 'Enter Event Details',
text: 'Fill in the Event Title, Location, Description, Start Time, and End Time.',
},
{
'@type': 'HowToStep',
position: 2,
name: 'Customize',
text: 'Choose a color and frame style like "Save the Date".',
},
{
'@type': 'HowToStep',
position: 3,
name: 'Download',
text: 'Save the QR code and add it to your invitations.',
},
{
'@type': 'HowToStep',
position: 4,
name: 'Test',
text: 'Scan the code to ensure the event details and times are correct.',
},
{
'@type': 'HowToStep',
position: 5,
name: 'Share',
text: 'Distribute it via email, flyers, or social media.',
},
],
totalTime: 'PT45S',
},
generateFaqSchema({
'Which calendars does it support?': {
question: 'Which calendars does it support?',
answer: 'The QR code uses the standard iCalendar (ICS) format. It works with Apple Calendar, Google Calendar, Outlook, and most other mobile calendar apps.',
},
'Can I change the date after printing?': {
question: 'Can I change the date after printing?',
answer: 'No. This is a static QR code, meaning the event details are permanently embedded in the image. If the date changes, you must create a new QR code. Use our Dynamic QR Code to edit events anytime.',
},
'Is there a limit to the description length?': {
question: 'Is there a limit to the description length?',
answer: 'Yes, because the data is stored in the QR code pattern. We recommend keeping descriptions concise (under 300 characters) to ensure the code remains easy to scan.',
},
'Do users need an app?': {
question: 'Do users need an app?',
answer: 'No special app is needed. Standard camera apps on iOS and Android can read the code and will prompt the user to "Add to Calendar".',
},
'Is it free?': {
question: 'Is it free?',
answer: 'Yes. Creating and scanning the code is completely free and requires no signup.',
},
}),
],
};
export default function EventQRCodePage() {
return (
<>
<script
type="application/ld+json"
dangerouslySetInnerHTML={{ __html: JSON.stringify(jsonLd) }}
/>
<ToolBreadcrumb toolName="Event QR Code Generator" toolSlug="event-qr-code" />
<div className="min-h-screen" style={{ backgroundColor: '#EBEBDF' }}>
{/* HERO SECTION */}
<section className="relative pt-20 pb-20 lg:pt-32 lg:pb-32 px-4 sm:px-6 lg:px-8 overflow-hidden" style={{ backgroundColor: '#5B21B6' }}>
<div className="absolute inset-0 opacity-10">
<svg className="w-full h-full" viewBox="0 0 100 100" preserveAspectRatio="none">
<path d="M0 100 C 20 0 50 0 100 100 Z" fill="url(#grad1)" />
<defs>
<linearGradient id="grad1" x1="0%" y1="0%" x2="100%" y2="0%">
<stop offset="0%" style={{ stopColor: 'white', stopOpacity: 1 }} />
<stop offset="100%" style={{ stopColor: 'white', stopOpacity: 0 }} />
</linearGradient>
</defs>
</svg>
</div>
<div className="max-w-7xl mx-auto grid lg:grid-cols-2 gap-12 items-center relative z-10">
<div className="text-center lg:text-left">
<div className="inline-flex items-center gap-2 px-3 py-1 rounded-full bg-white/10 text-white/90 text-sm font-medium mb-6 backdrop-blur-sm border border-white/10 hover:bg-white/20 transition-colors cursor-default">
<span className="flex h-2 w-2 relative">
<span className="animate-ping absolute inline-flex h-full w-full rounded-full bg-violet-400 opacity-75"></span>
<span className="relative inline-flex rounded-full h-2 w-2 bg-violet-400"></span>
</span>
Free Tool — No Signup Required
</div>
<h1 className="text-4xl md:text-5xl lg:text-6xl font-extrabold text-white tracking-tight leading-tight mb-6">
Create Scannable <br className="hidden lg:block" />
<span className="text-transparent bg-clip-text bg-gradient-to-r from-violet-300 to-fuchsia-300">Calendar Invites</span>
</h1>
<p className="text-lg md:text-xl text-indigo-100 max-w-2xl mx-auto lg:mx-0 mb-8 leading-relaxed">
Share your event details instantly. Visitors scan to "Save the Date" directly to their phone calendar.
<strong className="text-white block sm:inline mt-2 sm:mt-0"> Perfect for invitations.</strong>
</p>
<div className="flex flex-wrap justify-center lg:justify-start gap-4 text-sm font-medium text-white/80">
<div className="flex items-center gap-2 bg-white/5 px-4 py-2.5 rounded-xl border border-white/5 backdrop-blur-sm">
<Calendar className="w-4 h-4 text-violet-300" />
Instant Save
</div>
<div className="flex items-center gap-2 bg-white/5 px-4 py-2.5 rounded-xl border border-white/5 backdrop-blur-sm">
<Clock className="w-4 h-4 text-amber-400" />
Timezone Smart
</div>
<div className="flex items-center gap-2 bg-white/5 px-4 py-2.5 rounded-xl border border-white/5 backdrop-blur-sm">
<UserCheck className="w-4 h-4 text-purple-400" />
Native Support
</div>
</div>
</div>
{/* Visual Abstract */}
<div className="hidden lg:flex relative items-center justify-center min-h-[400px]">
<div className="absolute w-[500px] h-[500px] bg-indigo-500/30 rounded-full blur-[100px] -top-20 -right-20 animate-pulse" />
<div className="relative w-80 h-96 bg-white/5 backdrop-blur-xl border border-white/20 rounded-3xl shadow-2xl flex flex-col items-center justify-center p-8 transform -rotate-2 hover:rotate-1 transition-all duration-700 group">
<div className="absolute inset-0 bg-gradient-to-br from-white/10 to-transparent rounded-3xl" />
<div className="w-full bg-white rounded-xl shadow-lg p-4 mb-6 relative overflow-hidden flex flex-col items-center text-center">
<div className="w-full h-2 bg-red-500 rounded-full mb-3" />
<div className="text-xs uppercase font-bold text-red-500 tracking-widest mb-1">DECEMBER</div>
<div className="text-4xl font-black text-slate-900 leading-none mb-1">25</div>
<div className="text-xs text-slate-400">Saturday • 8:00 PM</div>
</div>
<div className="w-44 h-44 bg-white rounded-xl p-2 shadow-inner relative overflow-hidden flex items-center justify-center">
<QRCodeSVG value="https://www.qrmaster.net" size={160} fgColor="#0f172a" level="Q" />
</div>
{/* Floating Badge */}
<div className="absolute -bottom-6 -left-6 bg-white py-3 px-5 rounded-xl shadow-xl flex items-center gap-3 transform transition-transform hover:scale-105 duration-300">
<div className="bg-emerald-100 p-2 rounded-full">
<Check className="w-5 h-5 text-emerald-600" />
</div>
<div className="text-left">
<div className="text-[10px] text-slate-400 font-bold uppercase tracking-wider">Event</div>
<div className="text-sm font-bold text-slate-900">Added to Cal</div>
</div>
</div>
</div>
</div>
</div>
</section>
{/* GENERATOR SECTION */}
<section className="py-12 px-4 sm:px-6 lg:px-8 -mt-8">
<EventGenerator />
</section>
{/* HOW IT WORKS */}
<section className="py-16 px-4 sm:px-6 lg:px-8 bg-white">
<div className="max-w-4xl mx-auto">
<h2 className="text-3xl font-bold text-slate-900 text-center mb-12">
How Event QR Codes Work
</h2>
<div className="grid md:grid-cols-3 lg:grid-cols-5 gap-8">
<article className="text-center">
<div className="w-14 h-14 rounded-2xl bg-[#1A1265]/10 flex items-center justify-center mx-auto mb-4">
<Calendar className="w-7 h-7 text-[#1A1265]" />
</div>
<h3 className="font-bold text-slate-900 mb-2">1. Set Details</h3>
<p className="text-slate-600 text-sm">
Enter the event name, location, and start/end times.
</p>
</article>
<article className="text-center">
<div className="w-14 h-14 rounded-2xl bg-[#1A1265]/10 flex items-center justify-center mx-auto mb-4">
<Smartphone className="w-7 h-7 text-[#1A1265]" />
</div>
<h3 className="font-bold text-slate-900 mb-2">2. Scan</h3>
<p className="text-slate-600 text-sm">
Guests scan the code from your invite, poster, or flyer.
</p>
</article>
<article className="text-center">
<div className="w-12 h-12 rounded-2xl bg-[#1A1265]/10 flex items-center justify-center mx-auto mb-4">
<Clock className="w-6 h-6 text-[#1A1265]" />
</div>
<h3 className="font-bold text-slate-900 mb-2">3. Download</h3>
<p className="text-slate-600 text-xs leading-relaxed">
Save your event QR code.
</p>
</article>
<article className="text-center">
<div className="w-12 h-12 rounded-2xl bg-[#1A1265]/10 flex items-center justify-center mx-auto mb-4">
<Smartphone className="w-6 h-6 text-[#1A1265]" />
</div>
<h3 className="font-bold text-slate-900 mb-2">4. Scan</h3>
<p className="text-slate-600 text-xs leading-relaxed">
Guests scan the code.
</p>
</article>
<article className="text-center">
<div className="w-12 h-12 rounded-2xl bg-[#1A1265]/10 flex items-center justify-center mx-auto mb-4">
<UserCheck className="w-6 h-6 text-[#1A1265]" />
</div>
<h3 className="font-bold text-slate-900 mb-2">5. Save</h3>
<p className="text-slate-600 text-xs leading-relaxed">
They tap "Add to Calendar."
</p>
</article>
</div>
</div>
</section>
{/* RELATED TOOLS */}
<RelatedTools />
{/* FAQ SECTION */}
<section className="py-16 px-4 sm:px-6 lg:px-8" style={{ backgroundColor: '#EBEBDF' }}>
<div className="max-w-3xl mx-auto">
<h2 className="text-3xl font-bold text-slate-900 text-center mb-4">
Frequently Asked Questions
</h2>
<p className="text-slate-600 text-center mb-10">
Common questions about Event QR codes.
</p>
<div className="space-y-4">
<FaqItem
question="Does this work with Google Calendar?"
answer="Yes, the generated QR code creates a standard .ics file event, which is compatible with Google Calendar, Apple Calendar, Outlook, and most others."
/>
<FaqItem
question="Is the QR code reusable?"
answer="No. Because the specific date and time are embedded in the code, you cannot change them later. If the event is rescheduled, you must generate a new QR code."
/>
<FaqItem
question="What happens if the event is in a different time zone?"
answer="The user's calendar will usually convert the time to their local time zone automatically when they save it."
/>
<FaqItem
question="Is it free?"
answer="Yes. Creating and scanning the code is completely free."
/>
</div>
</div>
</section>
</div>
</>
);
}
function FaqItem({ question, answer }: { question: string; answer: string }) {
return (
<details className="group bg-white rounded-xl shadow-sm border border-slate-200 overflow-hidden">
<summary className="flex items-center justify-between p-5 cursor-pointer list-none text-slate-900 font-semibold hover:bg-slate-50 transition-colors">
{question}
<span className="transition group-open:rotate-180 text-slate-400">
<svg fill="none" height="20" stroke="currentColor" strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" viewBox="0 0 24 24" width="20">
<path d="M6 9l6 6 6-6" />
</svg>
</span>
</summary>
<div className="text-slate-600 px-5 pb-5 pt-0 leading-relaxed text-sm">
{answer}
</div>
</details>
);
}
import React from 'react';
import type { Metadata } from 'next';
import EventGenerator from './EventGenerator';
import { Calendar, Shield, Zap, Smartphone, Clock, UserCheck, Download, Share2, Check } from 'lucide-react';
import { QRCodeSVG } from 'qrcode.react';
import { ToolBreadcrumb } from '@/components/seo/BreadcrumbSchema';
import { RelatedTools } from '@/components/marketing/RelatedTools';
import { generateSoftwareAppSchema, generateFaqSchema } from '@/lib/schema-utils';
// SEO Optimized Metadata
export const metadata: Metadata = {
title: {
absolute: 'Free Event QR Code Generator | Termin & Kalender QR | QR Master',
},
description: 'Create a QR code for your event. Verabredung & Termine direkt in den Kalender speichern. Save the date instantly. Free & Easy.',
keywords: ['event qr code', 'calendar qr code', 'save the date qr', 'ical qr generator', 'invitation qr code', 'event qr code erstellen', 'veranstaltung qr code', 'kalender qr code', 'termin qr code', 'save the date qr code'],
alternates: {
canonical: 'https://www.qrmaster.net/tools/event-qr-code',
},
openGraph: {
title: 'Free Event QR Code Generator | QR Master',
description: 'Generate QR codes to save events to calendars. Share dates easily.',
type: 'website',
url: 'https://www.qrmaster.net/tools/event-qr-code',
images: [{ url: '/og-event-generator.png', width: 1200, height: 630 }],
},
twitter: {
card: 'summary_large_image',
title: 'Free Event QR Code Generator',
description: 'Create QR codes for events. Instant save-to-calendar.',
},
robots: {
index: true,
follow: true,
},
};
// JSON-LD Structured Data
const jsonLd = {
'@context': 'https://schema.org',
'@graph': [
generateSoftwareAppSchema(
'Event QR Code Generator',
'Generate QR codes that add event details to the user\'s digital calendar.',
'/og-event-generator.png'
),
{
'@type': 'HowTo',
name: 'How to Create an Event QR Code',
description: 'Create a QR code that saves an event to a calendar.',
step: [
{
'@type': 'HowToStep',
position: 1,
name: 'Enter Event Details',
text: 'Fill in the Event Title, Location, Description, Start Time, and End Time.',
},
{
'@type': 'HowToStep',
position: 2,
name: 'Customize',
text: 'Choose a color and frame style like "Save the Date".',
},
{
'@type': 'HowToStep',
position: 3,
name: 'Download',
text: 'Save the QR code and add it to your invitations.',
},
{
'@type': 'HowToStep',
position: 4,
name: 'Test',
text: 'Scan the code to ensure the event details and times are correct.',
},
{
'@type': 'HowToStep',
position: 5,
name: 'Share',
text: 'Distribute it via email, flyers, or social media.',
},
],
totalTime: 'PT45S',
},
generateFaqSchema({
'Which calendars does it support?': {
question: 'Which calendars does it support?',
answer: 'The QR code uses the standard iCalendar (ICS) format. It works with Apple Calendar, Google Calendar, Outlook, and most other mobile calendar apps.',
},
'Can I change the date after printing?': {
question: 'Can I change the date after printing?',
answer: 'No. This is a static QR code, meaning the event details are permanently embedded in the image. If the date changes, you must create a new QR code. Use our Dynamic QR Code to edit events anytime.',
},
'Is there a limit to the description length?': {
question: 'Is there a limit to the description length?',
answer: 'Yes, because the data is stored in the QR code pattern. We recommend keeping descriptions concise (under 300 characters) to ensure the code remains easy to scan.',
},
'Do users need an app?': {
question: 'Do users need an app?',
answer: 'No special app is needed. Standard camera apps on iOS and Android can read the code and will prompt the user to "Add to Calendar".',
},
'Is it free?': {
question: 'Is it free?',
answer: 'Yes. Creating and scanning the code is completely free and requires no signup.',
},
}),
],
};
export default function EventQRCodePage() {
return (
<>
<script
type="application/ld+json"
dangerouslySetInnerHTML={{ __html: JSON.stringify(jsonLd) }}
/>
<ToolBreadcrumb toolName="Event QR Code Generator" toolSlug="event-qr-code" />
<div className="min-h-screen" style={{ backgroundColor: '#EBEBDF' }}>
{/* HERO SECTION */}
<section className="relative pt-20 pb-20 lg:pt-32 lg:pb-32 px-4 sm:px-6 lg:px-8 overflow-hidden" style={{ backgroundColor: '#5B21B6' }}>
<div className="absolute inset-0 opacity-10">
<svg className="w-full h-full" viewBox="0 0 100 100" preserveAspectRatio="none">
<path d="M0 100 C 20 0 50 0 100 100 Z" fill="url(#grad1)" />
<defs>
<linearGradient id="grad1" x1="0%" y1="0%" x2="100%" y2="0%">
<stop offset="0%" style={{ stopColor: 'white', stopOpacity: 1 }} />
<stop offset="100%" style={{ stopColor: 'white', stopOpacity: 0 }} />
</linearGradient>
</defs>
</svg>
</div>
<div className="max-w-7xl mx-auto grid lg:grid-cols-2 gap-12 items-center relative z-10">
<div className="text-center lg:text-left">
<div className="inline-flex items-center gap-2 px-3 py-1 rounded-full bg-white/10 text-white/90 text-sm font-medium mb-6 backdrop-blur-sm border border-white/10 hover:bg-white/20 transition-colors cursor-default">
<span className="flex h-2 w-2 relative">
<span className="animate-ping absolute inline-flex h-full w-full rounded-full bg-violet-400 opacity-75"></span>
<span className="relative inline-flex rounded-full h-2 w-2 bg-violet-400"></span>
</span>
Free Tool — No Signup Required
</div>
<h1 className="text-4xl md:text-5xl lg:text-6xl font-extrabold text-white tracking-tight leading-tight mb-6">
Create Scannable <br className="hidden lg:block" />
<span className="text-transparent bg-clip-text bg-gradient-to-r from-violet-300 to-fuchsia-300">Calendar Invites</span>
</h1>
<p className="text-lg md:text-xl text-indigo-100 max-w-2xl mx-auto lg:mx-0 mb-8 leading-relaxed">
Share your event details instantly. Visitors scan to "Save the Date" directly to their phone calendar.
<strong className="text-white block sm:inline mt-2 sm:mt-0"> Perfect for invitations.</strong>
</p>
<div className="flex flex-wrap justify-center lg:justify-start gap-4 text-sm font-medium text-white/80">
<div className="flex items-center gap-2 bg-white/5 px-4 py-2.5 rounded-xl border border-white/5 backdrop-blur-sm">
<Calendar className="w-4 h-4 text-violet-300" />
Instant Save
</div>
<div className="flex items-center gap-2 bg-white/5 px-4 py-2.5 rounded-xl border border-white/5 backdrop-blur-sm">
<Clock className="w-4 h-4 text-amber-400" />
Timezone Smart
</div>
<div className="flex items-center gap-2 bg-white/5 px-4 py-2.5 rounded-xl border border-white/5 backdrop-blur-sm">
<UserCheck className="w-4 h-4 text-purple-400" />
Native Support
</div>
</div>
</div>
{/* Visual Abstract */}
<div className="hidden lg:flex relative items-center justify-center min-h-[400px]">
<div className="absolute w-[500px] h-[500px] bg-indigo-500/30 rounded-full blur-[100px] -top-20 -right-20 animate-pulse" />
<div className="relative w-80 h-96 bg-white/5 backdrop-blur-xl border border-white/20 rounded-3xl shadow-2xl flex flex-col items-center justify-center p-8 transform -rotate-2 hover:rotate-1 transition-all duration-700 group">
<div className="absolute inset-0 bg-gradient-to-br from-white/10 to-transparent rounded-3xl" />
<div className="w-full bg-white rounded-xl shadow-lg p-4 mb-6 relative overflow-hidden flex flex-col items-center text-center">
<div className="w-full h-2 bg-red-500 rounded-full mb-3" />
<div className="text-xs uppercase font-bold text-red-500 tracking-widest mb-1">DECEMBER</div>
<div className="text-4xl font-black text-slate-900 leading-none mb-1">25</div>
<div className="text-xs text-slate-400">Saturday • 8:00 PM</div>
</div>
<div className="w-44 h-44 bg-white rounded-xl p-2 shadow-inner relative overflow-hidden flex items-center justify-center">
<QRCodeSVG value="https://www.qrmaster.net" size={160} fgColor="#0f172a" level="Q" />
</div>
{/* Floating Badge */}
<div className="absolute -bottom-6 -left-6 bg-white py-3 px-5 rounded-xl shadow-xl flex items-center gap-3 transform transition-transform hover:scale-105 duration-300">
<div className="bg-emerald-100 p-2 rounded-full">
<Check className="w-5 h-5 text-emerald-600" />
</div>
<div className="text-left">
<div className="text-[10px] text-slate-400 font-bold uppercase tracking-wider">Event</div>
<div className="text-sm font-bold text-slate-900">Added to Cal</div>
</div>
</div>
</div>
</div>
</div>
</section>
{/* GENERATOR SECTION */}
<section className="py-12 px-4 sm:px-6 lg:px-8 -mt-8">
<EventGenerator />
</section>
{/* HOW IT WORKS */}
<section className="py-16 px-4 sm:px-6 lg:px-8 bg-white">
<div className="max-w-4xl mx-auto">
<h2 className="text-3xl font-bold text-slate-900 text-center mb-12">
How Event QR Codes Work
</h2>
<div className="grid md:grid-cols-3 lg:grid-cols-5 gap-8">
<article className="text-center">
<div className="w-14 h-14 rounded-2xl bg-[#1A1265]/10 flex items-center justify-center mx-auto mb-4">
<Calendar className="w-7 h-7 text-[#1A1265]" />
</div>
<h3 className="font-bold text-slate-900 mb-2">1. Set Details</h3>
<p className="text-slate-600 text-sm">
Enter the event name, location, and start/end times.
</p>
</article>
<article className="text-center">
<div className="w-14 h-14 rounded-2xl bg-[#1A1265]/10 flex items-center justify-center mx-auto mb-4">
<Smartphone className="w-7 h-7 text-[#1A1265]" />
</div>
<h3 className="font-bold text-slate-900 mb-2">2. Scan</h3>
<p className="text-slate-600 text-sm">
Guests scan the code from your invite, poster, or flyer.
</p>
</article>
<article className="text-center">
<div className="w-12 h-12 rounded-2xl bg-[#1A1265]/10 flex items-center justify-center mx-auto mb-4">
<Clock className="w-6 h-6 text-[#1A1265]" />
</div>
<h3 className="font-bold text-slate-900 mb-2">3. Download</h3>
<p className="text-slate-600 text-xs leading-relaxed">
Save your event QR code.
</p>
</article>
<article className="text-center">
<div className="w-12 h-12 rounded-2xl bg-[#1A1265]/10 flex items-center justify-center mx-auto mb-4">
<Smartphone className="w-6 h-6 text-[#1A1265]" />
</div>
<h3 className="font-bold text-slate-900 mb-2">4. Scan</h3>
<p className="text-slate-600 text-xs leading-relaxed">
Guests scan the code.
</p>
</article>
<article className="text-center">
<div className="w-12 h-12 rounded-2xl bg-[#1A1265]/10 flex items-center justify-center mx-auto mb-4">
<UserCheck className="w-6 h-6 text-[#1A1265]" />
</div>
<h3 className="font-bold text-slate-900 mb-2">5. Save</h3>
<p className="text-slate-600 text-xs leading-relaxed">
They tap "Add to Calendar."
</p>
</article>
</div>
</div>
</section>
{/* RELATED TOOLS */}
<RelatedTools />
{/* FAQ SECTION */}
<section className="py-16 px-4 sm:px-6 lg:px-8" style={{ backgroundColor: '#EBEBDF' }}>
<div className="max-w-3xl mx-auto">
<h2 className="text-3xl font-bold text-slate-900 text-center mb-4">
Frequently Asked Questions
</h2>
<p className="text-slate-600 text-center mb-10">
Common questions about Event QR codes.
</p>
<div className="space-y-4">
<FaqItem
question="Does this work with Google Calendar?"
answer="Yes, the generated QR code creates a standard .ics file event, which is compatible with Google Calendar, Apple Calendar, Outlook, and most others."
/>
<FaqItem
question="Is the QR code reusable?"
answer="No. Because the specific date and time are embedded in the code, you cannot change them later. If the event is rescheduled, you must generate a new QR code."
/>
<FaqItem
question="What happens if the event is in a different time zone?"
answer="The user's calendar will usually convert the time to their local time zone automatically when they save it."
/>
<FaqItem
question="Is it free?"
answer="Yes. Creating and scanning the code is completely free."
/>
</div>
</div>
</section>
</div>
</>
);
}
function FaqItem({ question, answer }: { question: string; answer: string }) {
return (
<details className="group bg-white rounded-xl shadow-sm border border-slate-200 overflow-hidden">
<summary className="flex items-center justify-between p-5 cursor-pointer list-none text-slate-900 font-semibold hover:bg-slate-50 transition-colors">
{question}
<span className="transition group-open:rotate-180 text-slate-400">
<svg fill="none" height="20" stroke="currentColor" strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" viewBox="0 0 24 24" width="20">
<path d="M6 9l6 6 6-6" />
</svg>
</span>
</summary>
<div className="text-slate-600 px-5 pb-5 pt-0 leading-relaxed text-sm">
{answer}
</div>
</details>
);
}

494
src/app/(main)/(marketing)/tools/facebook-qr-code/FacebookGenerator.tsx
View File

@@ -1,247 +1,247 @@
'use client';
import React, { useState, useRef } from 'react';
import Link from 'next/link';
import { QRCodeSVG } from 'qrcode.react';
import {
Facebook,
Download,
Check,
Sparkles,
ThumbsUp,
Globe
} from 'lucide-react';
import { Button } from '@/components/ui/Button';
import { Input } from '@/components/ui/Input';
import { cn } from '@/lib/utils';
// Brand Colors
const BRAND = {
paleGrey: '#EBEBDF',
richBlue: '#1A1265',
richBlueLight: '#2A2275',
};
// QR Color Options - Facebook Theme
const QR_COLORS = [
{ name: 'Facebook Blue', value: '#1877F2' },
{ name: 'Classic Black', value: '#000000' },
{ name: 'Dark Blue', value: '#1A1265' },
{ name: 'Teal', value: '#0D9488' },
{ name: 'Coral', value: '#F43F5E' },
{ name: 'Purple', value: '#7C3AED' },
{ name: 'Emerald', value: '#10B981' },
{ name: 'Rose', value: '#F43F5E' },
];
// Frame Options
const FRAME_OPTIONS = [
{ id: 'none', label: 'No Frame' },
{ id: 'scanme', label: 'Scan Me' },
{ id: 'follow', label: 'Follow Us' },
{ id: 'like', label: 'Like Us' },
];
export default function FacebookGenerator() {
const [url, setUrl] = useState('');
const [qrColor, setQrColor] = useState('#1877F2'); // Default to FB Blue
const [frameType, setFrameType] = useState('none');
const qrRef = useRef<HTMLDivElement>(null);
const handleDownload = async (format: 'png' | 'svg') => {
if (!qrRef.current) return;
try {
if (format === 'png') {
const { toPng } = await import('html-to-image');
const dataUrl = await toPng(qrRef.current, { cacheBust: true, pixelRatio: 3 });
const link = document.createElement('a');
link.download = `facebook-qr-code.png`;
link.href = dataUrl;
link.click();
} else {
const svgData = qrRef.current.querySelector('svg')?.outerHTML;
if (svgData) {
const blob = new Blob([svgData], { type: 'image/svg+xml;charset=utf-8' });
const url = URL.createObjectURL(blob);
const link = document.createElement('a');
link.href = url;
link.download = `facebook-qr-code.svg`;
link.click();
}
}
} catch (err) {
console.error('Download failed', err);
}
};
const getFrameLabel = () => {
const frame = FRAME_OPTIONS.find(f => f.id === frameType);
return frame?.id !== 'none' ? frame?.label : null;
};
return (
<div className="w-full max-w-5xl mx-auto px-4 md:px-6">
{/* Main Generator Card */}
<div className="bg-white rounded-3xl shadow-2xl shadow-slate-900/10 overflow-hidden border border-slate-100">
<div className="grid lg:grid-cols-2">
{/* LEFT: Input Section */}
<div className="p-6 md:p-8 lg:p-10 space-y-8 border-r border-slate-100">
{/* Facebook Details */}
<div className="space-y-6">
<h2 className="text-lg font-bold text-slate-900 flex items-center gap-2">
<Facebook className="w-5 h-5 text-[#1877F2]" />
Facebook Page or Profile
</h2>
<div>
<label className="block text-sm font-medium text-slate-700 mb-2">Facebook URL</label>
<Input
placeholder="https://facebook.com/yourpage"
value={url}
onChange={(e) => setUrl(e.target.value)}
className="h-12 text-base rounded-xl border-slate-200 focus:border-[#1877F2] focus:ring-[#1877F2]"
/>
<p className="text-xs text-slate-600 mt-2">Paste the full link to your profile, page, group, or post.</p>
</div>
</div>
<div className="border-t border-slate-100"></div>
{/* Design Options */}
<div className="space-y-6">
<h2 className="text-lg font-bold text-slate-900 flex items-center gap-2">
<Sparkles className="w-5 h-5 text-[#1877F2]" />
Design Options
</h2>
{/* Color Picker */}
<div>
<label className="block text-sm font-medium text-slate-700 mb-3">QR Code Color</label>
<div className="flex flex-wrap gap-2">
{QR_COLORS.map((c) => (
<button
key={c.name}
onClick={() => setQrColor(c.value)}
className={cn(
"w-9 h-9 rounded-full border-2 flex items-center justify-center transition-all hover:scale-110",
qrColor === c.value ? "border-slate-900 ring-2 ring-offset-2 ring-slate-200" : "border-white shadow-md"
)}
style={{ backgroundColor: c.value }}
aria-label={`Select ${c.name}`}
title={c.name}
>
{qrColor === c.value && <Check className="w-4 h-4 text-white" strokeWidth={3} />}
</button>
))}
</div>
</div>
{/* Frame Selector */}
<div>
<label className="block text-sm font-medium text-slate-700 mb-3">Frame Label</label>
<div className="grid grid-cols-2 sm:grid-cols-4 gap-2">
{FRAME_OPTIONS.map((frame) => (
<button
key={frame.id}
onClick={() => setFrameType(frame.id)}
className={cn(
"py-2.5 px-3 rounded-lg text-sm font-medium transition-all border",
frameType === frame.id
? "bg-[#1877F2] text-white border-[#1877F2]"
: "bg-slate-50 text-slate-600 border-slate-200 hover:border-slate-300"
)}
>
{frame.label}
</button>
))}
</div>
</div>
</div>
</div>
{/* RIGHT: Preview Section */}
<div className="p-6 md:p-8 lg:p-10 flex flex-col items-center justify-center" style={{ backgroundColor: BRAND.paleGrey }}>
{/* QR Card with Frame */}
<div
ref={qrRef}
className="bg-white rounded-3xl shadow-xl p-6 sm:p-8 flex flex-col items-center w-full max-w-[320px]"
>
{/* Frame Label */}
{getFrameLabel() && (
<div
className="mb-5 px-8 py-2.5 rounded-full text-white font-bold text-sm tracking-widest uppercase shadow-md"
style={{ backgroundColor: qrColor }}
>
{getFrameLabel()}
</div>
)}
{/* QR Code */}
<div className="bg-white">
<QRCodeSVG
value={url || "https://facebook.com"}
size={240}
level="M"
includeMargin={false}
fgColor={qrColor}
/>
</div>
{/* Info Preview */}
<div className="mt-6 text-center max-w-[260px]">
<h3 className="font-bold text-slate-900 text-lg flex items-center justify-center gap-2 truncate">
<Facebook className="w-4 h-4 text-slate-400 shrink-0" />
<span className="truncate">{url ? url.replace('https://', '') : 'facebook.com/...'}</span>
</h3>
<div className="text-xs text-slate-600 mt-1">Opens in Facebook App</div>
</div>
</div>
{/* Download Buttons */}
<div className="flex items-center gap-3 mt-8">
<Button
onClick={() => handleDownload('png')}
className="bg-[#1877F2] hover:bg-[#155ebd] text-white shadow-lg"
>
<Download className="w-4 h-4 mr-2" />
Download PNG
</Button>
<Button
onClick={() => handleDownload('svg')}
variant="outline"
className="border-slate-300 hover:bg-white"
>
<Download className="w-4 h-4 mr-2" />
SVG
</Button>
</div>
<p className="text-xs text-slate-600 mt-4 text-center">
Scanning redirects directly to the Facebook profile or page.
</p>
</div>
</div>
</div>
{/* Upsell Banner */}
<div className="mt-8 bg-gradient-to-r from-[#1877F2] to-[#155ebd] rounded-2xl p-6 flex flex-col sm:flex-row items-center justify-between gap-4">
<div className="text-white text-center sm:text-left">
<h3 className="font-bold text-lg">Running a Social Media Campaign?</h3>
<p className="text-white/80 text-sm mt-1">
Dynamic QR Codes allow you to track clicks, likes, and engagement rates in real-time.
</p>
</div>
<Link href="/signup">
<Button className="bg-white text-[#1877F2] hover:bg-slate-100 shrink-0 shadow-lg">
Get Social Analytics
</Button>
</Link>
</div>
</div>
);
}
'use client';
import React, { useState, useRef } from 'react';
import Link from 'next/link';
import { QRCodeSVG } from 'qrcode.react';
import {
Facebook,
Download,
Check,
Sparkles,
ThumbsUp,
Globe
} from 'lucide-react';
import { Button } from '@/components/ui/Button';
import { Input } from '@/components/ui/Input';
import { cn } from '@/lib/utils';
// Brand Colors
const BRAND = {
paleGrey: '#EBEBDF',
richBlue: '#1A1265',
richBlueLight: '#2A2275',
};
// QR Color Options - Facebook Theme
const QR_COLORS = [
{ name: 'Facebook Blue', value: '#1877F2' },
{ name: 'Classic Black', value: '#000000' },
{ name: 'Dark Blue', value: '#1A1265' },
{ name: 'Teal', value: '#0D9488' },
{ name: 'Coral', value: '#F43F5E' },
{ name: 'Purple', value: '#7C3AED' },
{ name: 'Emerald', value: '#10B981' },
{ name: 'Rose', value: '#F43F5E' },
];
// Frame Options
const FRAME_OPTIONS = [
{ id: 'none', label: 'No Frame' },
{ id: 'scanme', label: 'Scan Me' },
{ id: 'follow', label: 'Follow Us' },
{ id: 'like', label: 'Like Us' },
];
export default function FacebookGenerator() {
const [url, setUrl] = useState('');
const [qrColor, setQrColor] = useState('#1877F2'); // Default to FB Blue
const [frameType, setFrameType] = useState('none');
const qrRef = useRef<HTMLDivElement>(null);
const handleDownload = async (format: 'png' | 'svg') => {
if (!qrRef.current) return;
try {
if (format === 'png') {
const { toPng } = await import('html-to-image');
const dataUrl = await toPng(qrRef.current, { cacheBust: true, pixelRatio: 3 });
const link = document.createElement('a');
link.download = `facebook-qr-code.png`;
link.href = dataUrl;
link.click();
} else {
const svgData = qrRef.current.querySelector('svg')?.outerHTML;
if (svgData) {
const blob = new Blob([svgData], { type: 'image/svg+xml;charset=utf-8' });
const url = URL.createObjectURL(blob);
const link = document.createElement('a');
link.href = url;
link.download = `facebook-qr-code.svg`;
link.click();
}
}
} catch (err) {
console.error('Download failed', err);
}
};
const getFrameLabel = () => {
const frame = FRAME_OPTIONS.find(f => f.id === frameType);
return frame?.id !== 'none' ? frame?.label : null;
};
return (
<div className="w-full max-w-5xl mx-auto px-4 md:px-6">
{/* Main Generator Card */}
<div className="bg-white rounded-3xl shadow-2xl shadow-slate-900/10 overflow-hidden border border-slate-100">
<div className="grid lg:grid-cols-2">
{/* LEFT: Input Section */}
<div className="p-6 md:p-8 lg:p-10 space-y-8 border-r border-slate-100">
{/* Facebook Details */}
<div className="space-y-6">
<h2 className="text-lg font-bold text-slate-900 flex items-center gap-2">
<Facebook className="w-5 h-5 text-[#1877F2]" />
Facebook Page or Profile
</h2>
<div>
<label className="block text-sm font-medium text-slate-700 mb-2">Facebook URL</label>
<Input
placeholder="https://facebook.com/yourpage"
value={url}
onChange={(e) => setUrl(e.target.value)}
className="h-12 text-base rounded-xl border-slate-200 focus:border-[#1877F2] focus:ring-[#1877F2]"
/>
<p className="text-xs text-slate-600 mt-2">Paste the full link to your profile, page, group, or post.</p>
</div>
</div>
<div className="border-t border-slate-100"></div>
{/* Design Options */}
<div className="space-y-6">
<h2 className="text-lg font-bold text-slate-900 flex items-center gap-2">
<Sparkles className="w-5 h-5 text-[#1877F2]" />
Design Options
</h2>
{/* Color Picker */}
<div>
<label className="block text-sm font-medium text-slate-700 mb-3">QR Code Color</label>
<div className="flex flex-wrap gap-2">
{QR_COLORS.map((c) => (
<button
key={c.name}
onClick={() => setQrColor(c.value)}
className={cn(
"w-9 h-9 rounded-full border-2 flex items-center justify-center transition-all hover:scale-110",
qrColor === c.value ? "border-slate-900 ring-2 ring-offset-2 ring-slate-200" : "border-white shadow-md"
)}
style={{ backgroundColor: c.value }}
aria-label={`Select ${c.name}`}
title={c.name}
>
{qrColor === c.value && <Check className="w-4 h-4 text-white" strokeWidth={3} />}
</button>
))}
</div>
</div>
{/* Frame Selector */}
<div>
<label className="block text-sm font-medium text-slate-700 mb-3">Frame Label</label>
<div className="grid grid-cols-2 sm:grid-cols-4 gap-2">
{FRAME_OPTIONS.map((frame) => (
<button
key={frame.id}
onClick={() => setFrameType(frame.id)}
className={cn(
"py-2.5 px-3 rounded-lg text-sm font-medium transition-all border",
frameType === frame.id
? "bg-[#1877F2] text-white border-[#1877F2]"
: "bg-slate-50 text-slate-600 border-slate-200 hover:border-slate-300"
)}
>
{frame.label}
</button>
))}
</div>
</div>
</div>
</div>
{/* RIGHT: Preview Section */}
<div className="p-6 md:p-8 lg:p-10 flex flex-col items-center justify-center" style={{ backgroundColor: BRAND.paleGrey }}>
{/* QR Card with Frame */}
<div
ref={qrRef}
className="bg-white rounded-3xl shadow-xl p-6 sm:p-8 flex flex-col items-center w-full max-w-[320px]"
>
{/* Frame Label */}
{getFrameLabel() && (
<div
className="mb-5 px-8 py-2.5 rounded-full text-white font-bold text-sm tracking-widest uppercase shadow-md"
style={{ backgroundColor: qrColor }}
>
{getFrameLabel()}
</div>
)}
{/* QR Code */}
<div className="bg-white">
<QRCodeSVG
value={url || "https://facebook.com"}
size={240}
level="M"
includeMargin={false}
fgColor={qrColor}
/>
</div>
{/* Info Preview */}
<div className="mt-6 text-center max-w-[260px]">
<h3 className="font-bold text-slate-900 text-lg flex items-center justify-center gap-2 truncate">
<Facebook className="w-4 h-4 text-slate-400 shrink-0" />
<span className="truncate">{url ? url.replace('https://', '') : 'facebook.com/...'}</span>
</h3>
<div className="text-xs text-slate-600 mt-1">Opens in Facebook App</div>
</div>
</div>
{/* Download Buttons */}
<div className="flex items-center gap-3 mt-8">
<Button
onClick={() => handleDownload('png')}
className="bg-[#1877F2] hover:bg-[#155ebd] text-white shadow-lg"
>
<Download className="w-4 h-4 mr-2" />
Download PNG
</Button>
<Button
onClick={() => handleDownload('svg')}
variant="outline"
className="border-slate-300 hover:bg-white"
>
<Download className="w-4 h-4 mr-2" />
SVG
</Button>
</div>
<p className="text-xs text-slate-600 mt-4 text-center">
Scanning redirects directly to the Facebook profile or page.
</p>
</div>
</div>
</div>
{/* Upsell Banner */}
<div className="mt-8 bg-gradient-to-r from-[#1877F2] to-[#155ebd] rounded-2xl p-6 flex flex-col sm:flex-row items-center justify-between gap-4">
<div className="text-white text-center sm:text-left">
<h3 className="font-bold text-lg">Running a Social Media Campaign?</h3>
<p className="text-white/80 text-sm mt-1">
Dynamic QR Codes allow you to track clicks, likes, and engagement rates in real-time.
</p>
</div>
<Link href="/signup">
<Button className="bg-white text-[#1877F2] hover:bg-slate-100 shrink-0 shadow-lg">
Get Social Analytics
</Button>
</Link>
</div>
</div>
);
}

674
src/app/(main)/(marketing)/tools/facebook-qr-code/page.tsx
View File

@@ -1,337 +1,337 @@
import React from 'react';
import type { Metadata } from 'next';
import FacebookGenerator from './FacebookGenerator';
import { Facebook, Shield, Zap, Smartphone, ThumbsUp, Users, Download, Share2 } from 'lucide-react';
import { QRCodeSVG } from 'qrcode.react';
import { ToolBreadcrumb } from '@/components/seo/BreadcrumbSchema';
import { RelatedTools } from '@/components/marketing/RelatedTools';
import { generateSoftwareAppSchema, generateFaqSchema } from '@/lib/schema-utils';
// SEO Optimized Metadata
export const metadata: Metadata = {
title: {
absolute: 'Free Facebook QR Code Generator | Get Likes & Follows | QR Master',
},
description: 'Create a QR code for your Facebook Page, Profile, or Group. Facebook QR Code erstellen. Scanners follow you instantly. Free & Easy.',
keywords: ['facebook qr code', 'fb qr generator', 'facebook page qr', 'follow qr code', 'social media qr code', 'facebook qr code erstellen', 'facebook seite qr code', 'facebook gruppe qr code', 'facebook profil qr code', 'mehr likes qr code'],
alternates: {
canonical: 'https://www.qrmaster.net/tools/facebook-qr-code',
},
openGraph: {
title: 'Free Facebook QR Code Generator | QR Master',
description: 'Generate QR codes to grow your Facebook audience. Instant app redirect.',
type: 'website',
url: 'https://www.qrmaster.net/tools/facebook-qr-code',
images: [{ url: '/og-facebook-generator.png', width: 1200, height: 630 }],
},
twitter: {
card: 'summary_large_image',
title: 'Free Facebook QR Code Generator',
description: 'Create QR codes for Facebook. Boost your engagement.',
},
robots: {
index: true,
follow: true,
},
};
// JSON-LD Structured Data
const jsonLd = {
'@context': 'https://schema.org',
'@graph': [
generateSoftwareAppSchema(
'Facebook QR Code Generator',
'Generate QR codes that direct users to a Facebook page, profile, or post.',
'/og-facebook-generator.png'
),
{
'@type': 'HowTo',
name: 'How to Create a Facebook QR Code',
description: 'Create a QR code that opens a Facebook page.',
step: [
{
'@type': 'HowToStep',
position: 1,
name: 'Get Link',
text: 'Copy the URL of your Facebook Page, Profile, or Group.',
},
{
'@type': 'HowToStep',
position: 2,
name: 'Paste Link',
text: 'Paste the URL into the generator.',
},
{
'@type': 'HowToStep',
position: 3,
name: 'Customize',
text: 'Choose your brand color and add a call-to-action frame.',
},
{
'@type': 'HowToStep',
position: 4,
name: 'Download',
text: 'Save the QR code and print it on your marketing materials.',
},
{
'@type': 'HowToStep',
position: 5,
name: 'Share',
text: 'Distribute it on flyers, business cards, or posters.',
},
],
totalTime: 'PT30S',
},
generateFaqSchema({
'Does it open the Facebook app?': {
question: 'Does it open the Facebook app?',
answer: 'Yes! On most mobile devices, standard Facebook links are automatically detected and opened in the Facebook app if it is installed.',
},
'Can I link to a specific post?': {
question: 'Can I link to a specific post?',
answer: 'Absolutely. Just paste the direct link to the post (click the timestamp on the post to get the link).',
},
'Does it work for Facebook Events?': {
question: 'Does it work for Facebook Events?',
answer: 'Yes. Simply copy the full URL of your Facebook Event and paste it into the generator.',
},
'Is it free?': {
question: 'Is it free?',
answer: 'Yes, this generator is 100% free to use for personal or business purposes.',
},
'Can I track scans?': {
question: 'Can I track scans?',
answer: 'This static QR code does not include analytics. To track how many people scan your code, you should use our Dynamic QR Code service.',
},
}),
],
};
export default function FacebookQRCodePage() {
return (
<>
<script
type="application/ld+json"
dangerouslySetInnerHTML={{ __html: JSON.stringify(jsonLd) }}
/>
<ToolBreadcrumb toolName="Facebook QR Code Generator" toolSlug="facebook-qr-code" />
<div className="min-h-screen" style={{ backgroundColor: '#EBEBDF' }}>
{/* HERO SECTION */}
<section className="relative pt-20 pb-20 lg:pt-32 lg:pb-32 px-4 sm:px-6 lg:px-8 overflow-hidden" style={{ backgroundColor: '#1877F2' }}>
<div className="absolute inset-0 opacity-10">
{/* Facebook Pattern */}
<svg className="w-full h-full" width="100%" height="100%" xmlns="http://www.w3.org/2000/svg">
<defs>
<pattern id="fb_pattern" width="60" height="60" patternUnits="userSpaceOnUse">
<path d="M30 30L35 35M25 35L30 30" stroke="white" strokeWidth="2" strokeOpacity="0.2" />
</pattern>
</defs>
<rect width="100%" height="100%" fill="url(#fb_pattern)" />
</svg>
</div>
<div className="max-w-7xl mx-auto grid lg:grid-cols-2 gap-12 items-center relative z-10">
<div className="text-center lg:text-left">
<div className="inline-flex items-center gap-2 px-3 py-1 rounded-full bg-white/10 text-white/90 text-sm font-medium mb-6 backdrop-blur-sm border border-white/10 hover:bg-white/20 transition-colors cursor-default">
<span className="flex h-2 w-2 relative">
<span className="animate-ping absolute inline-flex h-full w-full rounded-full bg-blue-300 opacity-75"></span>
<span className="relative inline-flex rounded-full h-2 w-2 bg-blue-300"></span>
</span>
Free Tool — No Signup Required
</div>
<h1 className="text-4xl md:text-5xl lg:text-6xl font-extrabold text-white tracking-tight leading-tight mb-6">
Grow Your Audience with <br className="hidden lg:block" />
<span className="text-white drop-shadow-md">Facebook QR Codes</span>
</h1>
<p className="text-lg md:text-xl text-blue-50 max-w-2xl mx-auto lg:mx-0 mb-8 leading-relaxed">
Make it easy for customers to find and follow you. A single scan opens your Page directly in the Facebook app.
<strong className="text-white block sm:inline mt-2 sm:mt-0"> Boost likes instantly.</strong>
</p>
<div className="flex flex-wrap justify-center lg:justify-start gap-4 text-sm font-medium text-white/80">
<div className="flex items-center gap-2 bg-white/10 px-4 py-2.5 rounded-xl border border-white/10 backdrop-blur-sm">
<ThumbsUp className="w-4 h-4 text-blue-200" />
Get Likes
</div>
<div className="flex items-center gap-2 bg-white/10 px-4 py-2.5 rounded-xl border border-white/10 backdrop-blur-sm">
<Zap className="w-4 h-4 text-yellow-300" />
Instant Follow
</div>
<div className="flex items-center gap-2 bg-white/10 px-4 py-2.5 rounded-xl border border-white/10 backdrop-blur-sm">
<Smartphone className="w-4 h-4 text-green-300" />
App Friendly
</div>
</div>
</div>
{/* Visual Abstract */}
<div className="hidden lg:flex relative items-center justify-center min-h-[400px]">
<div className="absolute w-[500px] h-[500px] bg-blue-500/30 rounded-full blur-[100px] -top-20 -right-20 animate-pulse" />
<div className="relative w-80 h-96 bg-white/5 backdrop-blur-xl border border-white/20 rounded-3xl shadow-2xl flex flex-col items-center justify-center p-8 transform rotate-6 hover:rotate-3 transition-all duration-700 group">
<div className="absolute inset-0 bg-gradient-to-br from-white/10 to-transparent rounded-3xl" />
<div className="w-full bg-white rounded-xl shadow-lg p-4 mb-6 relative overflow-hidden flex items-center gap-3">
<div className="w-12 h-12 rounded-full bg-gradient-to-tr from-blue-600 to-blue-400 p-0.5">
<div className="w-full h-full bg-white rounded-full flex items-center justify-center">
<Facebook className="w-6 h-6 text-[#1877F2]" fill="#1877F2" />
</div>
</div>
<div>
<div className="h-2.5 w-24 bg-slate-800 rounded-full mb-1.5" />
<div className="h-2 w-16 bg-slate-300 rounded-full" />
</div>
<button className="ml-auto bg-[#1877F2] text-white px-3 py-1 rounded text-xs font-bold">
Like
</button>
</div>
<div className="w-48 h-48 bg-white rounded-xl p-2 shadow-inner relative overflow-hidden flex items-center justify-center">
<QRCodeSVG value="https://www.qrmaster.net" size={170} fgColor="#1877F2" level="Q" />
</div>
{/* Floating Badge */}
<div className="absolute -bottom-6 -right-6 bg-white py-3 px-5 rounded-xl shadow-xl flex items-center gap-3 transform transition-transform hover:scale-105 duration-300">
<div className="bg-blue-100 p-2 rounded-full">
<Users className="w-5 h-5 text-blue-600" />
</div>
<div className="text-left">
<div className="text-[10px] text-slate-400 font-bold uppercase tracking-wider">Followers</div>
<div className="text-sm font-bold text-slate-900">+1 New</div>
</div>
</div>
</div>
</div>
</div>
</section>
{/* GENERATOR SECTION */}
<section className="py-12 px-4 sm:px-6 lg:px-8 -mt-8">
<FacebookGenerator />
</section>
{/* HOW IT WORKS */}
<section className="py-16 px-4 sm:px-6 lg:px-8 bg-white">
<div className="max-w-4xl mx-auto">
<h2 className="text-3xl font-bold text-slate-900 text-center mb-12">
How Facebook QR Codes Work
</h2>
<div className="grid md:grid-cols-3 lg:grid-cols-5 gap-8">
<article className="text-center">
<div className="w-14 h-14 rounded-2xl bg-[#1877F2]/10 flex items-center justify-center mx-auto mb-4">
<Facebook className="w-7 h-7 text-[#1877F2]" />
</div>
<h3 className="font-bold text-slate-900 mb-2">1. Copy Link</h3>
<p className="text-slate-600 text-sm">
Go to your Facebook Page or Profile and copy the URL from the browser address bar.
</p>
</article>
<article className="text-center">
<div className="w-14 h-14 rounded-2xl bg-[#1877F2]/10 flex items-center justify-center mx-auto mb-4">
<Smartphone className="w-7 h-7 text-[#1877F2]" />
</div>
<h3 className="font-bold text-slate-900 mb-2">2. Scan</h3>
<p className="text-slate-600 text-sm">
Your customers scan the code using their phone camera.
</p>
</article>
<article className="text-center">
<div className="w-12 h-12 rounded-2xl bg-[#1877F2]/10 flex items-center justify-center mx-auto mb-4">
<ThumbsUp className="w-6 h-6 text-[#1877F2]" />
</div>
<h3 className="font-bold text-slate-900 mb-2">3. Engage</h3>
<p className="text-slate-600 text-xs leading-relaxed">
The Facebook app opens directly.
</p>
</article>
<article className="text-center">
<div className="w-12 h-12 rounded-2xl bg-[#1877F2]/10 flex items-center justify-center mx-auto mb-4">
<Download className="w-6 h-6 text-[#1877F2]" />
</div>
<h3 className="font-bold text-slate-900 mb-2">4. Download</h3>
<p className="text-slate-600 text-xs leading-relaxed">
Save your high-res QR code.
</p>
</article>
<article className="text-center">
<div className="w-12 h-12 rounded-2xl bg-[#1877F2]/10 flex items-center justify-center mx-auto mb-4">
<Share2 className="w-6 h-6 text-[#1877F2]" />
</div>
<h3 className="font-bold text-slate-900 mb-2">5. Share</h3>
<p className="text-slate-600 text-xs leading-relaxed">
Print it and start getting likes.
</p>
</article>
</div>
</div>
</section>
{/* RELATED TOOLS */}
<RelatedTools />
{/* FAQ SECTION */}
<section className="py-16 px-4 sm:px-6 lg:px-8" style={{ backgroundColor: '#EBEBDF' }}>
<div className="max-w-3xl mx-auto">
<h2 className="text-3xl font-bold text-slate-900 text-center mb-4">
Frequently Asked Questions
</h2>
<p className="text-slate-600 text-center mb-10">
Common questions about Facebook QR codes.
</p>
<div className="space-y-4">
<FaqItem
question="Will this work for Facebook Groups?"
answer="Yes! You can paste the link to your Facebook Group, and the QR code will direcr users to join."
/>
<FaqItem
question="What if the user doesn't have the Facebook app?"
answer="The link will open in their mobile web browser instead, so they can still see your page and log in."
/>
<FaqItem
question="Can I customize the color?"
answer="Yes. While Facebook Blue is recommended for recognition, you can choose any color to match your brand."
/>
<FaqItem
question="Is the QR code permanent?"
answer="Yes. As long as your Facebook URL doesn't change, this QR code will work forever."
/>
<FaqItem
question="Does it work for Facebook Events?"
answer="Yes. Simply copy the full URL of your Facebook Event and paste it into the generator."
/>
</div>
</div>
</section>
</div>
</>
);
}
function FaqItem({ question, answer }: { question: string; answer: string }) {
return (
<details className="group bg-white rounded-xl shadow-sm border border-slate-200 overflow-hidden">
<summary className="flex items-center justify-between p-5 cursor-pointer list-none text-slate-900 font-semibold hover:bg-slate-50 transition-colors">
{question}
<span className="transition group-open:rotate-180 text-slate-400">
<svg fill="none" height="20" stroke="currentColor" strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" viewBox="0 0 24 24" width="20">
<path d="M6 9l6 6 6-6" />
</svg>
</span>
</summary>
<div className="text-slate-600 px-5 pb-5 pt-0 leading-relaxed text-sm">
{answer}
</div>
</details>
);
}
import React from 'react';
import type { Metadata } from 'next';
import FacebookGenerator from './FacebookGenerator';
import { Facebook, Shield, Zap, Smartphone, ThumbsUp, Users, Download, Share2 } from 'lucide-react';
import { QRCodeSVG } from 'qrcode.react';
import { ToolBreadcrumb } from '@/components/seo/BreadcrumbSchema';
import { RelatedTools } from '@/components/marketing/RelatedTools';
import { generateSoftwareAppSchema, generateFaqSchema } from '@/lib/schema-utils';
// SEO Optimized Metadata
export const metadata: Metadata = {
title: {
absolute: 'Free Facebook QR Code Generator | Get Likes & Follows | QR Master',
},
description: 'Create a QR code for your Facebook Page, Profile, or Group. Facebook QR Code erstellen. Scanners follow you instantly. Free & Easy.',
keywords: ['facebook qr code', 'fb qr generator', 'facebook page qr', 'follow qr code', 'social media qr code', 'facebook qr code erstellen', 'facebook seite qr code', 'facebook gruppe qr code', 'facebook profil qr code', 'mehr likes qr code'],
alternates: {
canonical: 'https://www.qrmaster.net/tools/facebook-qr-code',
},
openGraph: {
title: 'Free Facebook QR Code Generator | QR Master',
description: 'Generate QR codes to grow your Facebook audience. Instant app redirect.',
type: 'website',
url: 'https://www.qrmaster.net/tools/facebook-qr-code',
images: [{ url: '/og-facebook-generator.png', width: 1200, height: 630 }],
},
twitter: {
card: 'summary_large_image',
title: 'Free Facebook QR Code Generator',
description: 'Create QR codes for Facebook. Boost your engagement.',
},
robots: {
index: true,
follow: true,
},
};
// JSON-LD Structured Data
const jsonLd = {
'@context': 'https://schema.org',
'@graph': [
generateSoftwareAppSchema(
'Facebook QR Code Generator',
'Generate QR codes that direct users to a Facebook page, profile, or post.',
'/og-facebook-generator.png'
),
{
'@type': 'HowTo',
name: 'How to Create a Facebook QR Code',
description: 'Create a QR code that opens a Facebook page.',
step: [
{
'@type': 'HowToStep',
position: 1,
name: 'Get Link',
text: 'Copy the URL of your Facebook Page, Profile, or Group.',
},
{
'@type': 'HowToStep',
position: 2,
name: 'Paste Link',
text: 'Paste the URL into the generator.',
},
{
'@type': 'HowToStep',
position: 3,
name: 'Customize',
text: 'Choose your brand color and add a call-to-action frame.',
},
{
'@type': 'HowToStep',
position: 4,
name: 'Download',
text: 'Save the QR code and print it on your marketing materials.',
},
{
'@type': 'HowToStep',
position: 5,
name: 'Share',
text: 'Distribute it on flyers, business cards, or posters.',
},
],
totalTime: 'PT30S',
},
generateFaqSchema({
'Does it open the Facebook app?': {
question: 'Does it open the Facebook app?',
answer: 'Yes! On most mobile devices, standard Facebook links are automatically detected and opened in the Facebook app if it is installed.',
},
'Can I link to a specific post?': {
question: 'Can I link to a specific post?',
answer: 'Absolutely. Just paste the direct link to the post (click the timestamp on the post to get the link).',
},
'Does it work for Facebook Events?': {
question: 'Does it work for Facebook Events?',
answer: 'Yes. Simply copy the full URL of your Facebook Event and paste it into the generator.',
},
'Is it free?': {
question: 'Is it free?',
answer: 'Yes, this generator is 100% free to use for personal or business purposes.',
},
'Can I track scans?': {
question: 'Can I track scans?',
answer: 'This static QR code does not include analytics. To track how many people scan your code, you should use our Dynamic QR Code service.',
},
}),
],
};
export default function FacebookQRCodePage() {
return (
<>
<script
type="application/ld+json"
dangerouslySetInnerHTML={{ __html: JSON.stringify(jsonLd) }}
/>
<ToolBreadcrumb toolName="Facebook QR Code Generator" toolSlug="facebook-qr-code" />
<div className="min-h-screen" style={{ backgroundColor: '#EBEBDF' }}>
{/* HERO SECTION */}
<section className="relative pt-20 pb-20 lg:pt-32 lg:pb-32 px-4 sm:px-6 lg:px-8 overflow-hidden" style={{ backgroundColor: '#1877F2' }}>
<div className="absolute inset-0 opacity-10">
{/* Facebook Pattern */}
<svg className="w-full h-full" width="100%" height="100%" xmlns="http://www.w3.org/2000/svg">
<defs>
<pattern id="fb_pattern" width="60" height="60" patternUnits="userSpaceOnUse">
<path d="M30 30L35 35M25 35L30 30" stroke="white" strokeWidth="2" strokeOpacity="0.2" />
</pattern>
</defs>
<rect width="100%" height="100%" fill="url(#fb_pattern)" />
</svg>
</div>
<div className="max-w-7xl mx-auto grid lg:grid-cols-2 gap-12 items-center relative z-10">
<div className="text-center lg:text-left">
<div className="inline-flex items-center gap-2 px-3 py-1 rounded-full bg-white/10 text-white/90 text-sm font-medium mb-6 backdrop-blur-sm border border-white/10 hover:bg-white/20 transition-colors cursor-default">
<span className="flex h-2 w-2 relative">
<span className="animate-ping absolute inline-flex h-full w-full rounded-full bg-blue-300 opacity-75"></span>
<span className="relative inline-flex rounded-full h-2 w-2 bg-blue-300"></span>
</span>
Free Tool — No Signup Required
</div>
<h1 className="text-4xl md:text-5xl lg:text-6xl font-extrabold text-white tracking-tight leading-tight mb-6">
Grow Your Audience with <br className="hidden lg:block" />
<span className="text-white drop-shadow-md">Facebook QR Codes</span>
</h1>
<p className="text-lg md:text-xl text-blue-50 max-w-2xl mx-auto lg:mx-0 mb-8 leading-relaxed">
Make it easy for customers to find and follow you. A single scan opens your Page directly in the Facebook app.
<strong className="text-white block sm:inline mt-2 sm:mt-0"> Boost likes instantly.</strong>
</p>
<div className="flex flex-wrap justify-center lg:justify-start gap-4 text-sm font-medium text-white/80">
<div className="flex items-center gap-2 bg-white/10 px-4 py-2.5 rounded-xl border border-white/10 backdrop-blur-sm">
<ThumbsUp className="w-4 h-4 text-blue-200" />
Get Likes
</div>
<div className="flex items-center gap-2 bg-white/10 px-4 py-2.5 rounded-xl border border-white/10 backdrop-blur-sm">
<Zap className="w-4 h-4 text-yellow-300" />
Instant Follow
</div>
<div className="flex items-center gap-2 bg-white/10 px-4 py-2.5 rounded-xl border border-white/10 backdrop-blur-sm">
<Smartphone className="w-4 h-4 text-green-300" />
App Friendly
</div>
</div>
</div>
{/* Visual Abstract */}
<div className="hidden lg:flex relative items-center justify-center min-h-[400px]">
<div className="absolute w-[500px] h-[500px] bg-blue-500/30 rounded-full blur-[100px] -top-20 -right-20 animate-pulse" />
<div className="relative w-80 h-96 bg-white/5 backdrop-blur-xl border border-white/20 rounded-3xl shadow-2xl flex flex-col items-center justify-center p-8 transform rotate-6 hover:rotate-3 transition-all duration-700 group">
<div className="absolute inset-0 bg-gradient-to-br from-white/10 to-transparent rounded-3xl" />
<div className="w-full bg-white rounded-xl shadow-lg p-4 mb-6 relative overflow-hidden flex items-center gap-3">
<div className="w-12 h-12 rounded-full bg-gradient-to-tr from-blue-600 to-blue-400 p-0.5">
<div className="w-full h-full bg-white rounded-full flex items-center justify-center">
<Facebook className="w-6 h-6 text-[#1877F2]" fill="#1877F2" />
</div>
</div>
<div>
<div className="h-2.5 w-24 bg-slate-800 rounded-full mb-1.5" />
<div className="h-2 w-16 bg-slate-300 rounded-full" />
</div>
<button className="ml-auto bg-[#1877F2] text-white px-3 py-1 rounded text-xs font-bold">
Like
</button>
</div>
<div className="w-48 h-48 bg-white rounded-xl p-2 shadow-inner relative overflow-hidden flex items-center justify-center">
<QRCodeSVG value="https://www.qrmaster.net" size={170} fgColor="#1877F2" level="Q" />
</div>
{/* Floating Badge */}
<div className="absolute -bottom-6 -right-6 bg-white py-3 px-5 rounded-xl shadow-xl flex items-center gap-3 transform transition-transform hover:scale-105 duration-300">
<div className="bg-blue-100 p-2 rounded-full">
<Users className="w-5 h-5 text-blue-600" />
</div>
<div className="text-left">
<div className="text-[10px] text-slate-400 font-bold uppercase tracking-wider">Followers</div>
<div className="text-sm font-bold text-slate-900">+1 New</div>
</div>
</div>
</div>
</div>
</div>
</section>
{/* GENERATOR SECTION */}
<section className="py-12 px-4 sm:px-6 lg:px-8 -mt-8">
<FacebookGenerator />
</section>
{/* HOW IT WORKS */}
<section className="py-16 px-4 sm:px-6 lg:px-8 bg-white">
<div className="max-w-4xl mx-auto">
<h2 className="text-3xl font-bold text-slate-900 text-center mb-12">
How Facebook QR Codes Work
</h2>
<div className="grid md:grid-cols-3 lg:grid-cols-5 gap-8">
<article className="text-center">
<div className="w-14 h-14 rounded-2xl bg-[#1877F2]/10 flex items-center justify-center mx-auto mb-4">
<Facebook className="w-7 h-7 text-[#1877F2]" />
</div>
<h3 className="font-bold text-slate-900 mb-2">1. Copy Link</h3>
<p className="text-slate-600 text-sm">
Go to your Facebook Page or Profile and copy the URL from the browser address bar.
</p>
</article>
<article className="text-center">
<div className="w-14 h-14 rounded-2xl bg-[#1877F2]/10 flex items-center justify-center mx-auto mb-4">
<Smartphone className="w-7 h-7 text-[#1877F2]" />
</div>
<h3 className="font-bold text-slate-900 mb-2">2. Scan</h3>
<p className="text-slate-600 text-sm">
Your customers scan the code using their phone camera.
</p>
</article>
<article className="text-center">
<div className="w-12 h-12 rounded-2xl bg-[#1877F2]/10 flex items-center justify-center mx-auto mb-4">
<ThumbsUp className="w-6 h-6 text-[#1877F2]" />
</div>
<h3 className="font-bold text-slate-900 mb-2">3. Engage</h3>
<p className="text-slate-600 text-xs leading-relaxed">
The Facebook app opens directly.
</p>
</article>
<article className="text-center">
<div className="w-12 h-12 rounded-2xl bg-[#1877F2]/10 flex items-center justify-center mx-auto mb-4">
<Download className="w-6 h-6 text-[#1877F2]" />
</div>
<h3 className="font-bold text-slate-900 mb-2">4. Download</h3>
<p className="text-slate-600 text-xs leading-relaxed">
Save your high-res QR code.
</p>
</article>
<article className="text-center">
<div className="w-12 h-12 rounded-2xl bg-[#1877F2]/10 flex items-center justify-center mx-auto mb-4">
<Share2 className="w-6 h-6 text-[#1877F2]" />
</div>
<h3 className="font-bold text-slate-900 mb-2">5. Share</h3>
<p className="text-slate-600 text-xs leading-relaxed">
Print it and start getting likes.
</p>
</article>
</div>
</div>
</section>
{/* RELATED TOOLS */}
<RelatedTools />
{/* FAQ SECTION */}
<section className="py-16 px-4 sm:px-6 lg:px-8" style={{ backgroundColor: '#EBEBDF' }}>
<div className="max-w-3xl mx-auto">
<h2 className="text-3xl font-bold text-slate-900 text-center mb-4">
Frequently Asked Questions
</h2>
<p className="text-slate-600 text-center mb-10">
Common questions about Facebook QR codes.
</p>
<div className="space-y-4">
<FaqItem
question="Will this work for Facebook Groups?"
answer="Yes! You can paste the link to your Facebook Group, and the QR code will direcr users to join."
/>
<FaqItem
question="What if the user doesn't have the Facebook app?"
answer="The link will open in their mobile web browser instead, so they can still see your page and log in."
/>
<FaqItem
question="Can I customize the color?"
answer="Yes. While Facebook Blue is recommended for recognition, you can choose any color to match your brand."
/>
<FaqItem
question="Is the QR code permanent?"
answer="Yes. As long as your Facebook URL doesn't change, this QR code will work forever."
/>
<FaqItem
question="Does it work for Facebook Events?"
answer="Yes. Simply copy the full URL of your Facebook Event and paste it into the generator."
/>
</div>
</div>
</section>
</div>
</>
);
}
function FaqItem({ question, answer }: { question: string; answer: string }) {
return (
<details className="group bg-white rounded-xl shadow-sm border border-slate-200 overflow-hidden">
<summary className="flex items-center justify-between p-5 cursor-pointer list-none text-slate-900 font-semibold hover:bg-slate-50 transition-colors">
{question}
<span className="transition group-open:rotate-180 text-slate-400">
<svg fill="none" height="20" stroke="currentColor" strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" viewBox="0 0 24 24" width="20">
<path d="M6 9l6 6 6-6" />
</svg>
</span>
</summary>
<div className="text-slate-600 px-5 pb-5 pt-0 leading-relaxed text-sm">
{answer}
</div>
</details>
);
}

584
src/app/(main)/(marketing)/tools/geolocation-qr-code/GeolocationGenerator.tsx
View File

@@ -1,292 +1,292 @@
'use client';
import React, { useState, useRef } from 'react';
import Link from 'next/link';
import { QRCodeSVG } from 'qrcode.react';
import {
MapPin,
Download,
Check,
Sparkles,
Navigation,
Globe
} from 'lucide-react';
import { Button } from '@/components/ui/Button';
import { Input } from '@/components/ui/Input';
import { cn } from '@/lib/utils';
// Brand Colors
const BRAND = {
paleGrey: '#ECFDF5', // Emerald-50
primary: '#10B981', // Emerald-500
primaryDark: '#047857', // Emerald-700
};
// QR Color Options
const QR_COLORS = [
{ name: 'Emerald', value: '#10B981' },
{ name: 'Teal', value: '#0D9488' },
{ name: 'Classic Black', value: '#000000' },
{ name: 'Navy', value: '#1E3A8A' },
{ name: 'Sky', value: '#0EA5E9' },
{ name: 'Emerald', value: '#10B981' },
{ name: 'Rose', value: '#F43F5E' },
];
// Frame Options
const FRAME_OPTIONS = [
{ id: 'none', label: 'No Frame' },
{ id: 'scanme', label: 'Scan Me' },
{ id: 'location', label: 'Location' },
{ id: 'map', label: 'View Map' },
];
export default function GeolocationGenerator() {
const [latitude, setLatitude] = useState('');
const [longitude, setLongitude] = useState('');
const [qrColor, setQrColor] = useState(BRAND.primary);
const [frameType, setFrameType] = useState('none');
const qrRef = useRef<HTMLDivElement>(null);
// Using Google Maps Universal Link for best compatibility
const qrValue = `https://www.google.com/maps/search/?api=1&query=${latitude},${longitude}`;
const handleDownload = async (format: 'png' | 'svg') => {
if (!qrRef.current) return;
try {
if (format === 'png') {
const { toPng } = await import('html-to-image');
const dataUrl = await toPng(qrRef.current, { cacheBust: true, pixelRatio: 3 });
const link = document.createElement('a');
link.download = `location-qr-code.png`;
link.href = dataUrl;
link.click();
} else {
const svgData = qrRef.current.querySelector('svg')?.outerHTML;
if (svgData) {
const blob = new Blob([svgData], { type: 'image/svg+xml;charset=utf-8' });
const url = URL.createObjectURL(blob);
const link = document.createElement('a');
link.href = url;
link.download = `location-qr-code.svg`;
link.click();
}
}
} catch (err) {
console.error('Download failed', err);
}
};
const getFrameLabel = () => {
const frame = FRAME_OPTIONS.find(f => f.id === frameType);
return frame?.id !== 'none' ? frame?.label : null;
};
const getCurrentLocation = () => {
if (navigator.geolocation) {
navigator.geolocation.getCurrentPosition(
(position) => {
setLatitude(position.coords.latitude.toFixed(6));
setLongitude(position.coords.longitude.toFixed(6));
},
(error) => {
console.error("Error getting location: ", error);
alert("Could not access location. Please enter manually.");
}
);
} else {
alert("Geolocation is not supported by this browser.");
}
};
return (
<div className="w-full max-w-5xl mx-auto px-4 md:px-6">
{/* Main Generator Card */}
<div className="bg-white rounded-3xl shadow-2xl shadow-slate-900/10 overflow-hidden border border-slate-100">
<div className="grid lg:grid-cols-2">
{/* LEFT: Input Section */}
<div className="p-6 md:p-8 lg:p-10 space-y-8 border-r border-slate-100">
{/* Location Details */}
<div className="space-y-6">
<div className="flex items-center justify-between">
<h2 className="text-lg font-bold text-slate-900 flex items-center gap-2">
<MapPin className="w-5 h-5 text-[#10B981]" />
Coordinates
</h2>
<Button
onClick={getCurrentLocation}
variant="outline"
size="sm"
className="text-[#047857] border-[#047857]/20 hover:bg-[#047857]/5"
>
<Navigation className="w-3 h-3 mr-2" />
Get Current Location
</Button>
</div>
<div className="grid grid-cols-2 gap-4">
<div>
<label className="block text-sm font-medium text-slate-700 mb-2">Latitude</label>
<Input
placeholder="40.712776"
value={latitude}
onChange={(e) => setLatitude(e.target.value)}
className="h-12 text-base rounded-xl border-slate-200 focus:border-[#10B981] focus:ring-[#10B981]"
/>
</div>
<div>
<label className="block text-sm font-medium text-slate-700 mb-2">Longitude</label>
<Input
placeholder="-74.005974"
value={longitude}
onChange={(e) => setLongitude(e.target.value)}
className="h-12 text-base rounded-xl border-slate-200 focus:border-[#10B981] focus:ring-[#10B981]"
/>
</div>
</div>
<p className="text-xs text-slate-600">
Tip: You can copy-paste coordinates directly from Google Maps.
(Right-click a location on standard Maps, then click the coordinates to copy).
</p>
</div>
<div className="border-t border-slate-100"></div>
{/* Design Options */}
<div className="space-y-6">
<h2 className="text-lg font-bold text-slate-900 flex items-center gap-2">
<Sparkles className="w-5 h-5 text-[#10B981]" />
Design Options
</h2>
{/* Color Picker */}
<div>
<label className="block text-sm font-medium text-slate-700 mb-3">QR Code Color</label>
<div className="flex flex-wrap gap-2">
{QR_COLORS.map((c) => (
<button
key={c.name}
onClick={() => setQrColor(c.value)}
className={cn(
"w-9 h-9 rounded-full border-2 flex items-center justify-center transition-all hover:scale-110",
qrColor === c.value ? "border-slate-900 ring-2 ring-offset-2 ring-slate-200" : "border-white shadow-md"
)}
style={{ backgroundColor: c.value }}
aria-label={`Select ${c.name}`}
title={c.name}
>
{qrColor === c.value && <Check className="w-4 h-4 text-white" strokeWidth={3} />}
</button>
))}
</div>
</div>
{/* Frame Selector */}
<div>
<label className="block text-sm font-medium text-slate-700 mb-3">Frame Label</label>
<div className="grid grid-cols-2 sm:grid-cols-4 gap-2">
{FRAME_OPTIONS.map((frame) => (
<button
key={frame.id}
onClick={() => setFrameType(frame.id)}
className={cn(
"py-2.5 px-3 rounded-lg text-sm font-medium transition-all border",
frameType === frame.id
? "bg-[#10B981] text-white border-[#10B981]"
: "bg-slate-50 text-slate-600 border-slate-200 hover:border-slate-300"
)}
>
{frame.label}
</button>
))}
</div>
</div>
</div>
</div>
{/* RIGHT: Preview Section */}
<div className="p-6 md:p-8 lg:p-10 flex flex-col items-center justify-center" style={{ backgroundColor: BRAND.paleGrey }}>
{/* QR Card with Frame */}
<div
ref={qrRef}
className="bg-white rounded-3xl shadow-xl p-6 sm:p-8 flex flex-col items-center w-full max-w-[320px]"
>
{/* Frame Label */}
{getFrameLabel() && (
<div
className="mb-5 px-8 py-2.5 rounded-full text-white font-bold text-sm tracking-widest uppercase shadow-md"
style={{ backgroundColor: qrColor }}
>
{getFrameLabel()}
</div>
)}
{/* QR Code */}
<div className="bg-white">
<QRCodeSVG
value={(latitude && longitude) ? qrValue : "https://maps.google.com"}
size={240}
level="M"
includeMargin={false}
fgColor={qrColor}
/>
</div>
{/* Info Preview */}
<div className="mt-6 text-center max-w-[260px]">
<h3 className="font-bold text-slate-900 text-lg flex items-center justify-center gap-2 truncate">
<MapPin className="w-4 h-4 text-[#10B981] shrink-0" />
<span className="truncate">{latitude || 'Lat'}, {longitude || 'Long'}</span>
</h3>
<div className="text-xs text-slate-600 mt-1">Google Maps Location</div>
</div>
</div>
{/* Download Buttons */}
<div className="flex items-center gap-3 mt-8">
<Button
onClick={() => handleDownload('png')}
className="bg-[#10B981] hover:bg-[#047857] text-white shadow-lg"
>
<Download className="w-4 h-4 mr-2" />
Download PNG
</Button>
<Button
onClick={() => handleDownload('svg')}
variant="outline"
className="border-slate-300 hover:bg-white"
>
<Download className="w-4 h-4 mr-2" />
SVG
</Button>
</div>
<p className="text-xs text-slate-600 mt-4 text-center">
Scanning opens the location directly in Google Maps.
</p>
</div>
</div>
</div>
{/* Upsell Banner */}
<div className="mt-8 bg-gradient-to-r from-[#10B981] to-[#047857] rounded-2xl p-6 flex flex-col sm:flex-row items-center justify-between gap-4">
<div className="text-white text-center sm:text-left">
<h3 className="font-bold text-lg">Need a Business Map?</h3>
<p className="text-white/80 text-sm mt-1">
Create a Dynamic QR Code for your business location. If you move, just update the location without reprinting.
</p>
</div>
<Link href="/signup">
<Button className="bg-white text-[#047857] hover:bg-slate-100 shrink-0 shadow-lg">
Get Dynamic Maps
</Button>
</Link>
</div>
</div>
);
}
'use client';
import React, { useState, useRef } from 'react';
import Link from 'next/link';
import { QRCodeSVG } from 'qrcode.react';
import {
MapPin,
Download,
Check,
Sparkles,
Navigation,
Globe
} from 'lucide-react';
import { Button } from '@/components/ui/Button';
import { Input } from '@/components/ui/Input';
import { cn } from '@/lib/utils';
// Brand Colors
const BRAND = {
paleGrey: '#ECFDF5', // Emerald-50
primary: '#10B981', // Emerald-500
primaryDark: '#047857', // Emerald-700
};
// QR Color Options
const QR_COLORS = [
{ name: 'Emerald', value: '#10B981' },
{ name: 'Teal', value: '#0D9488' },
{ name: 'Classic Black', value: '#000000' },
{ name: 'Navy', value: '#1E3A8A' },
{ name: 'Sky', value: '#0EA5E9' },
{ name: 'Emerald', value: '#10B981' },
{ name: 'Rose', value: '#F43F5E' },
];
// Frame Options
const FRAME_OPTIONS = [
{ id: 'none', label: 'No Frame' },
{ id: 'scanme', label: 'Scan Me' },
{ id: 'location', label: 'Location' },
{ id: 'map', label: 'View Map' },
];
export default function GeolocationGenerator() {
const [latitude, setLatitude] = useState('');
const [longitude, setLongitude] = useState('');
const [qrColor, setQrColor] = useState(BRAND.primary);
const [frameType, setFrameType] = useState('none');
const qrRef = useRef<HTMLDivElement>(null);
// Using Google Maps Universal Link for best compatibility
const qrValue = `https://www.google.com/maps/search/?api=1&query=${latitude},${longitude}`;
const handleDownload = async (format: 'png' | 'svg') => {
if (!qrRef.current) return;
try {
if (format === 'png') {
const { toPng } = await import('html-to-image');
const dataUrl = await toPng(qrRef.current, { cacheBust: true, pixelRatio: 3 });
const link = document.createElement('a');
link.download = `location-qr-code.png`;
link.href = dataUrl;
link.click();
} else {
const svgData = qrRef.current.querySelector('svg')?.outerHTML;
if (svgData) {
const blob = new Blob([svgData], { type: 'image/svg+xml;charset=utf-8' });
const url = URL.createObjectURL(blob);
const link = document.createElement('a');
link.href = url;
link.download = `location-qr-code.svg`;
link.click();
}
}
} catch (err) {
console.error('Download failed', err);
}
};
const getFrameLabel = () => {
const frame = FRAME_OPTIONS.find(f => f.id === frameType);
return frame?.id !== 'none' ? frame?.label : null;
};
const getCurrentLocation = () => {
if (navigator.geolocation) {
navigator.geolocation.getCurrentPosition(
(position) => {
setLatitude(position.coords.latitude.toFixed(6));
setLongitude(position.coords.longitude.toFixed(6));
},
(error) => {
console.error("Error getting location: ", error);
alert("Could not access location. Please enter manually.");
}
);
} else {
alert("Geolocation is not supported by this browser.");
}
};
return (
<div className="w-full max-w-5xl mx-auto px-4 md:px-6">
{/* Main Generator Card */}
<div className="bg-white rounded-3xl shadow-2xl shadow-slate-900/10 overflow-hidden border border-slate-100">
<div className="grid lg:grid-cols-2">
{/* LEFT: Input Section */}
<div className="p-6 md:p-8 lg:p-10 space-y-8 border-r border-slate-100">
{/* Location Details */}
<div className="space-y-6">
<div className="flex items-center justify-between">
<h2 className="text-lg font-bold text-slate-900 flex items-center gap-2">
<MapPin className="w-5 h-5 text-[#10B981]" />
Coordinates
</h2>
<Button
onClick={getCurrentLocation}
variant="outline"
size="sm"
className="text-[#047857] border-[#047857]/20 hover:bg-[#047857]/5"
>
<Navigation className="w-3 h-3 mr-2" />
Get Current Location
</Button>
</div>
<div className="grid grid-cols-2 gap-4">
<div>
<label className="block text-sm font-medium text-slate-700 mb-2">Latitude</label>
<Input
placeholder="40.712776"
value={latitude}
onChange={(e) => setLatitude(e.target.value)}
className="h-12 text-base rounded-xl border-slate-200 focus:border-[#10B981] focus:ring-[#10B981]"
/>
</div>
<div>
<label className="block text-sm font-medium text-slate-700 mb-2">Longitude</label>
<Input
placeholder="-74.005974"
value={longitude}
onChange={(e) => setLongitude(e.target.value)}
className="h-12 text-base rounded-xl border-slate-200 focus:border-[#10B981] focus:ring-[#10B981]"
/>
</div>
</div>
<p className="text-xs text-slate-600">
Tip: You can copy-paste coordinates directly from Google Maps.
(Right-click a location on standard Maps, then click the coordinates to copy).
</p>
</div>
<div className="border-t border-slate-100"></div>
{/* Design Options */}
<div className="space-y-6">
<h2 className="text-lg font-bold text-slate-900 flex items-center gap-2">
<Sparkles className="w-5 h-5 text-[#10B981]" />
Design Options
</h2>
{/* Color Picker */}
<div>
<label className="block text-sm font-medium text-slate-700 mb-3">QR Code Color</label>
<div className="flex flex-wrap gap-2">
{QR_COLORS.map((c) => (
<button
key={c.name}
onClick={() => setQrColor(c.value)}
className={cn(
"w-9 h-9 rounded-full border-2 flex items-center justify-center transition-all hover:scale-110",
qrColor === c.value ? "border-slate-900 ring-2 ring-offset-2 ring-slate-200" : "border-white shadow-md"
)}
style={{ backgroundColor: c.value }}
aria-label={`Select ${c.name}`}
title={c.name}
>
{qrColor === c.value && <Check className="w-4 h-4 text-white" strokeWidth={3} />}
</button>
))}
</div>
</div>
{/* Frame Selector */}
<div>
<label className="block text-sm font-medium text-slate-700 mb-3">Frame Label</label>
<div className="grid grid-cols-2 sm:grid-cols-4 gap-2">
{FRAME_OPTIONS.map((frame) => (
<button
key={frame.id}
onClick={() => setFrameType(frame.id)}
className={cn(
"py-2.5 px-3 rounded-lg text-sm font-medium transition-all border",
frameType === frame.id
? "bg-[#10B981] text-white border-[#10B981]"
: "bg-slate-50 text-slate-600 border-slate-200 hover:border-slate-300"
)}
>
{frame.label}
</button>
))}
</div>
</div>
</div>
</div>
{/* RIGHT: Preview Section */}
<div className="p-6 md:p-8 lg:p-10 flex flex-col items-center justify-center" style={{ backgroundColor: BRAND.paleGrey }}>
{/* QR Card with Frame */}
<div
ref={qrRef}
className="bg-white rounded-3xl shadow-xl p-6 sm:p-8 flex flex-col items-center w-full max-w-[320px]"
>
{/* Frame Label */}
{getFrameLabel() && (
<div
className="mb-5 px-8 py-2.5 rounded-full text-white font-bold text-sm tracking-widest uppercase shadow-md"
style={{ backgroundColor: qrColor }}
>
{getFrameLabel()}
</div>
)}
{/* QR Code */}
<div className="bg-white">
<QRCodeSVG
value={(latitude && longitude) ? qrValue : "https://maps.google.com"}
size={240}
level="M"
includeMargin={false}
fgColor={qrColor}
/>
</div>
{/* Info Preview */}
<div className="mt-6 text-center max-w-[260px]">
<h3 className="font-bold text-slate-900 text-lg flex items-center justify-center gap-2 truncate">
<MapPin className="w-4 h-4 text-[#10B981] shrink-0" />
<span className="truncate">{latitude || 'Lat'}, {longitude || 'Long'}</span>
</h3>
<div className="text-xs text-slate-600 mt-1">Google Maps Location</div>
</div>
</div>
{/* Download Buttons */}
<div className="flex items-center gap-3 mt-8">
<Button
onClick={() => handleDownload('png')}
className="bg-[#10B981] hover:bg-[#047857] text-white shadow-lg"
>
<Download className="w-4 h-4 mr-2" />
Download PNG
</Button>
<Button
onClick={() => handleDownload('svg')}
variant="outline"
className="border-slate-300 hover:bg-white"
>
<Download className="w-4 h-4 mr-2" />
SVG
</Button>
</div>
<p className="text-xs text-slate-600 mt-4 text-center">
Scanning opens the location directly in Google Maps.
</p>
</div>
</div>
</div>
{/* Upsell Banner */}
<div className="mt-8 bg-gradient-to-r from-[#10B981] to-[#047857] rounded-2xl p-6 flex flex-col sm:flex-row items-center justify-between gap-4">
<div className="text-white text-center sm:text-left">
<h3 className="font-bold text-lg">Need a Business Map?</h3>
<p className="text-white/80 text-sm mt-1">
Create a Dynamic QR Code for your business location. If you move, just update the location without reprinting.
</p>
</div>
<Link href="/signup">
<Button className="bg-white text-[#047857] hover:bg-slate-100 shrink-0 shadow-lg">
Get Dynamic Maps
</Button>
</Link>
</div>
</div>
);
}

664
src/app/(main)/(marketing)/tools/geolocation-qr-code/page.tsx
View File

@@ -1,332 +1,332 @@
import React from 'react';
import type { Metadata } from 'next';
import GeolocationGenerator from './GeolocationGenerator';
import { MapPin, Shield, Zap, Smartphone, Navigation, Map, Download, Share2 } from 'lucide-react';
import { QRCodeSVG } from 'qrcode.react';
import { ToolBreadcrumb } from '@/components/seo/BreadcrumbSchema';
import { RelatedTools } from '@/components/marketing/RelatedTools';
import { generateSoftwareAppSchema, generateFaqSchema } from '@/lib/schema-utils';
// SEO Optimized Metadata
export const metadata: Metadata = {
title: {
absolute: 'Free Geolocation QR Code Generator | Standort & Map Links | QR Master',
},
description: 'Create a QR code for a specific location. Erstelle einen Map QR Code für Google Maps. Coordinates & Directions instantly. Standort teilen leicht gemacht.',
keywords: ['location qr code', 'maps qr code', 'google maps qr generator', 'geolocation qr', 'coordinates qr code', 'standort qr code', 'google maps qr code erstellen', 'koordinaten qr code', 'wegbeschreibung qr code', 'maps qr code generator'],
alternates: {
canonical: 'https://www.qrmaster.net/tools/geolocation-qr-code',
},
openGraph: {
title: 'Free Geolocation QR Code Generator | QR Master',
description: 'Navigate users to any location with a QR code. Opens directly in Google Maps.',
type: 'website',
url: 'https://www.qrmaster.net/tools/geolocation-qr-code',
images: [{ url: '/og-geolocation-generator.png', width: 1200, height: 630 }],
},
twitter: {
card: 'summary_large_image',
title: 'Free Geolocation QR Code Generator',
description: 'Create QR codes for maps and locations. Instant and free.',
},
robots: {
index: true,
follow: true,
},
};
// JSON-LD Structured Data
const jsonLd = {
'@context': 'https://schema.org',
'@graph': [
generateSoftwareAppSchema(
'Geolocation QR Code Generator',
'Generate QR codes that open specific geographic coordinates in map applications.',
'/og-geolocation-generator.png'
),
{
'@type': 'HowTo',
name: 'How to Create a Location QR Code',
description: 'Create a QR code that points to a specific map location.',
step: [
{
'@type': 'HowToStep',
position: 1,
name: 'Get Coordinates',
text: 'Find the Latitude and Longitude of your location (e.g., from Google Maps).',
},
{
'@type': 'HowToStep',
position: 2,
name: 'Enter Data',
text: 'Paste the coordinates into the generator.',
},
{
'@type': 'HowToStep',
position: 3,
name: 'Customize',
text: 'Choose a color and style for your map QR code.',
},
{
'@type': 'HowToStep',
position: 4,
name: 'Download',
text: 'Save your QR code as a high-quality image.',
},
{
'@type': 'HowToStep',
position: 5,
name: 'Share',
text: 'Place it on invitations, signs, or your website.',
},
],
totalTime: 'PT45S',
},
generateFaqSchema({
'Which map app does it open?': {
question: 'Which map app does it open?',
answer: 'Our generator creates a universal Google Maps link. On most devices, this will open the Google Maps app if installed, or the browser version if not. It is the most compatible method.',
},
'How do I find my Latitude and Longitude?': {
question: 'How do I find my Latitude and Longitude?',
answer: 'On Google Maps desktop: Right-click any spot on the map. The first item in the menu is the coordinates. Click to copy them.',
},
'Does it work offline?': {
question: 'Does it work offline?',
answer: 'The QR code itself can be scanned offline, but the user will likely need an internet connection to load the map and get directions.',
},
'Can I use an address instead?': {
question: 'Can I use an address instead?',
answer: 'For precise results, we use coordinates. However, you can use our URL Generator and paste a link to your Google Maps address search result if you prefer.',
},
'Is it free?': {
question: 'Is it free?',
answer: 'Yes, generating this location QR code is completely free and requires no signup.',
},
}),
],
};
export default function GeolocationQRCodePage() {
return (
<>
<script
type="application/ld+json"
dangerouslySetInnerHTML={{ __html: JSON.stringify(jsonLd) }}
/>
<ToolBreadcrumb toolName="Location QR Code Generator" toolSlug="geolocation-qr-code" />
<div className="min-h-screen" style={{ backgroundColor: '#EBEBDF' }}>
{/* HERO SECTION */}
<section className="relative pt-20 pb-20 lg:pt-32 lg:pb-32 px-4 sm:px-6 lg:px-8 overflow-hidden" style={{ backgroundColor: '#047857' }}>
<div className="absolute inset-0 opacity-10">
<svg className="w-full h-full" viewBox="0 0 100 100" preserveAspectRatio="none">
<path d="M0 100 C 20 0 50 0 100 100 Z" fill="url(#grad1)" />
<defs>
<linearGradient id="grad1" x1="0%" y1="0%" x2="100%" y2="0%">
<stop offset="0%" style={{ stopColor: 'white', stopOpacity: 1 }} />
<stop offset="100%" style={{ stopColor: 'white', stopOpacity: 0 }} />
</linearGradient>
</defs>
</svg>
</div>
<div className="max-w-7xl mx-auto grid lg:grid-cols-2 gap-12 items-center relative z-10">
<div className="text-center lg:text-left">
<div className="inline-flex items-center gap-2 px-3 py-1 rounded-full bg-white/10 text-white/90 text-sm font-medium mb-6 backdrop-blur-sm border border-white/10 hover:bg-white/20 transition-colors cursor-default">
<span className="flex h-2 w-2 relative">
<span className="animate-ping absolute inline-flex h-full w-full rounded-full bg-emerald-400 opacity-75"></span>
<span className="relative inline-flex rounded-full h-2 w-2 bg-emerald-400"></span>
</span>
Free Tool — No Signup Required
</div>
<h1 className="text-4xl md:text-5xl lg:text-6xl font-extrabold text-white tracking-tight leading-tight mb-6">
Share Perfect Locations with <br className="hidden lg:block" />
<span className="text-transparent bg-clip-text bg-gradient-to-r from-emerald-300 to-teal-300">Map QR Codes</span>
</h1>
<p className="text-lg md:text-xl text-indigo-100 max-w-2xl mx-auto lg:mx-0 mb-8 leading-relaxed">
Provide exact directions to your event, store, or secret spot.
<strong className="text-white block sm:inline mt-2 sm:mt-0"> Opens directly in Google Maps.</strong>
</p>
<div className="flex flex-wrap justify-center lg:justify-start gap-4 text-sm font-medium text-white/80">
<div className="flex items-center gap-2 bg-white/5 px-4 py-2.5 rounded-xl border border-white/5 backdrop-blur-sm">
<Navigation className="w-4 h-4 text-emerald-400" />
Exact Directions
</div>
<div className="flex items-center gap-2 bg-white/5 px-4 py-2.5 rounded-xl border border-white/5 backdrop-blur-sm">
<Zap className="w-4 h-4 text-amber-400" />
Instant Load
</div>
<div className="flex items-center gap-2 bg-white/5 px-4 py-2.5 rounded-xl border border-white/5 backdrop-blur-sm">
<Shield className="w-4 h-4 text-purple-400" />
No Data Saved
</div>
</div>
</div>
{/* Visual Abstract */}
<div className="hidden lg:flex relative items-center justify-center min-h-[400px]">
<div className="absolute w-[500px] h-[500px] bg-indigo-500/30 rounded-full blur-[100px] -top-20 -right-20 animate-pulse" />
<div className="relative w-80 h-96 bg-white/5 backdrop-blur-xl border border-white/20 rounded-3xl shadow-2xl flex flex-col items-center justify-center p-8 transform rotate-3 hover:rotate-0 transition-all duration-700 group">
<div className="absolute inset-0 bg-gradient-to-br from-white/10 to-transparent rounded-3xl" />
<div className="w-full bg-white rounded-xl shadow-lg h-32 mb-6 relative overflow-hidden grayscale group-hover:grayscale-0 transition-all duration-500">
<div className="absolute inset-0 opacity-20 bg-[radial-gradient(#e5e7eb_1px,transparent_1px)] [background-size:16px_16px]"></div>
<div className="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2">
<MapPin className="w-8 h-8 text-red-500 drop-shadow-lg animate-bounce" />
</div>
<div className="absolute bottom-2 left-2 right-2 bg-white/90 p-2 rounded text-[10px] text-slate-600 font-mono text-center">
40.7128° N, 74.0060° W
</div>
</div>
<div className="w-44 h-44 bg-white rounded-xl p-2 shadow-inner relative overflow-hidden flex items-center justify-center">
<QRCodeSVG value="https://www.qrmaster.net" size={160} fgColor="#0f172a" level="Q" />
</div>
{/* Floating Badge */}
<div className="absolute -bottom-6 -right-6 bg-white py-3 px-5 rounded-xl shadow-xl flex items-center gap-3 transform transition-transform hover:scale-105 duration-300">
<div className="bg-emerald-100 p-2 rounded-full">
<Map className="w-5 h-5 text-emerald-600" />
</div>
<div className="text-left">
<div className="text-[10px] text-slate-400 font-bold uppercase tracking-wider">Map</div>
<div className="text-sm font-bold text-slate-900">Open</div>
</div>
</div>
</div>
</div>
</div>
</section>
{/* GENERATOR SECTION */}
<section className="py-12 px-4 sm:px-6 lg:px-8 -mt-8">
<GeolocationGenerator />
</section>
{/* HOW IT WORKS */}
<section className="py-16 px-4 sm:px-6 lg:px-8 bg-white">
<div className="max-w-4xl mx-auto">
<h2 className="text-3xl font-bold text-slate-900 text-center mb-12">
How Geolocation QR Codes Work
</h2>
<div className="grid md:grid-cols-3 lg:grid-cols-5 gap-8">
<article className="text-center">
<div className="w-14 h-14 rounded-2xl bg-[#1A1265]/10 flex items-center justify-center mx-auto mb-4">
<MapPin className="w-7 h-7 text-[#1A1265]" />
</div>
<h3 className="font-bold text-slate-900 mb-2">1. Pinpoint</h3>
<p className="text-slate-600 text-sm">
Enter exact GPS coordinates. This ensures users go to the precise spot (e.g., a specific building entrance).
</p>
</article>
<article className="text-center">
<div className="w-14 h-14 rounded-2xl bg-[#1A1265]/10 flex items-center justify-center mx-auto mb-4">
<Smartphone className="w-7 h-7 text-[#1A1265]" />
</div>
<h3 className="font-bold text-slate-900 mb-2">2. Scan</h3>
<p className="text-slate-600 text-sm">
Users scan the code. It is encoded with a universal map link.
</p>
</article>
<article className="text-center">
<div className="w-12 h-12 rounded-2xl bg-[#1A1265]/10 flex items-center justify-center mx-auto mb-4">
<Download className="w-6 h-6 text-[#1A1265]" />
</div>
<h3 className="font-bold text-slate-900 mb-2">3. Download</h3>
<p className="text-slate-600 text-xs leading-relaxed">
Save your high-quality QR image.
</p>
</article>
<article className="text-center">
<div className="w-12 h-12 rounded-2xl bg-[#1A1265]/10 flex items-center justify-center mx-auto mb-4">
<Smartphone className="w-6 h-6 text-[#1A1265]" />
</div>
<h3 className="font-bold text-slate-900 mb-2">4. Scan</h3>
<p className="text-slate-600 text-xs leading-relaxed">
Users scan the code to load coordinates.
</p>
</article>
<article className="text-center">
<div className="w-12 h-12 rounded-2xl bg-[#1A1265]/10 flex items-center justify-center mx-auto mb-4">
<Share2 className="w-6 h-6 text-[#1A1265]" />
</div>
<h3 className="font-bold text-slate-900 mb-2">5. Go</h3>
<p className="text-slate-600 text-xs leading-relaxed">
They get instant directions to your spot.
</p>
</article>
</div>
</div>
</section>
{/* RELATED TOOLS */}
<RelatedTools />
{/* FAQ SECTION */}
<section className="py-16 px-4 sm:px-6 lg:px-8" style={{ backgroundColor: '#EBEBDF' }}>
<div className="max-w-3xl mx-auto">
<h2 className="text-3xl font-bold text-slate-900 text-center mb-4">
Frequently Asked Questions
</h2>
<p className="text-slate-600 text-center mb-10">
Common questions about Map QR codes.
</p>
<div className="space-y-4">
<FaqItem
question="Why not just use an address?"
answer="Addresses can be ambiguous or cover large areas (like a park or stadium). Coordinates point to an exact geographic spot, ensuring visitors find the specific meeting point or parking entrance."
/>
<FaqItem
question="Does it work on Apple Maps?"
answer="Yes. While the underlying link is a Google Maps link, iOS devices usually handle these gracefully, either opening them in the Google Maps app (if installed) or the browser, where Apple Maps can often intercept directions."
/>
<FaqItem
question="Is it free?"
answer="Yes, generating this location QR code is completely free and requires no signup."
/>
<FaqItem
question="Can I track who scanned it?"
answer="Not with this static tool. If you need scan analytics (e.g., how many people scanned your storefront QR), you should use our Dynamic QR Code service."
/>
<FaqItem
question="Is it free?"
answer="Yes, generating this location QR code is completely free and requires no signup."
/>
</div>
</div>
</section>
</div>
</>
);
}
function FaqItem({ question, answer }: { question: string; answer: string }) {
return (
<details className="group bg-white rounded-xl shadow-sm border border-slate-200 overflow-hidden">
<summary className="flex items-center justify-between p-5 cursor-pointer list-none text-slate-900 font-semibold hover:bg-slate-50 transition-colors">
{question}
<span className="transition group-open:rotate-180 text-slate-400">
<svg fill="none" height="20" stroke="currentColor" strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" viewBox="0 0 24 24" width="20">
<path d="M6 9l6 6 6-6" />
</svg>
</span>
</summary>
<div className="text-slate-600 px-5 pb-5 pt-0 leading-relaxed text-sm">
{answer}
</div>
</details>
);
}
import React from 'react';
import type { Metadata } from 'next';
import GeolocationGenerator from './GeolocationGenerator';
import { MapPin, Shield, Zap, Smartphone, Navigation, Map, Download, Share2 } from 'lucide-react';
import { QRCodeSVG } from 'qrcode.react';
import { ToolBreadcrumb } from '@/components/seo/BreadcrumbSchema';
import { RelatedTools } from '@/components/marketing/RelatedTools';
import { generateSoftwareAppSchema, generateFaqSchema } from '@/lib/schema-utils';
// SEO Optimized Metadata
export const metadata: Metadata = {
title: {
absolute: 'Free Geolocation QR Code Generator | Standort & Map Links | QR Master',
},
description: 'Create a QR code for a specific location. Erstelle einen Map QR Code für Google Maps. Coordinates & Directions instantly. Standort teilen leicht gemacht.',
keywords: ['location qr code', 'maps qr code', 'google maps qr generator', 'geolocation qr', 'coordinates qr code', 'standort qr code', 'google maps qr code erstellen', 'koordinaten qr code', 'wegbeschreibung qr code', 'maps qr code generator'],
alternates: {
canonical: 'https://www.qrmaster.net/tools/geolocation-qr-code',
},
openGraph: {
title: 'Free Geolocation QR Code Generator | QR Master',
description: 'Navigate users to any location with a QR code. Opens directly in Google Maps.',
type: 'website',
url: 'https://www.qrmaster.net/tools/geolocation-qr-code',
images: [{ url: '/og-geolocation-generator.png', width: 1200, height: 630 }],
},
twitter: {
card: 'summary_large_image',
title: 'Free Geolocation QR Code Generator',
description: 'Create QR codes for maps and locations. Instant and free.',
},
robots: {
index: true,
follow: true,
},
};
// JSON-LD Structured Data
const jsonLd = {
'@context': 'https://schema.org',
'@graph': [
generateSoftwareAppSchema(
'Geolocation QR Code Generator',
'Generate QR codes that open specific geographic coordinates in map applications.',
'/og-geolocation-generator.png'
),
{
'@type': 'HowTo',
name: 'How to Create a Location QR Code',
description: 'Create a QR code that points to a specific map location.',
step: [
{
'@type': 'HowToStep',
position: 1,
name: 'Get Coordinates',
text: 'Find the Latitude and Longitude of your location (e.g., from Google Maps).',
},
{
'@type': 'HowToStep',
position: 2,
name: 'Enter Data',
text: 'Paste the coordinates into the generator.',
},
{
'@type': 'HowToStep',
position: 3,
name: 'Customize',
text: 'Choose a color and style for your map QR code.',
},
{
'@type': 'HowToStep',
position: 4,
name: 'Download',
text: 'Save your QR code as a high-quality image.',
},
{
'@type': 'HowToStep',
position: 5,
name: 'Share',
text: 'Place it on invitations, signs, or your website.',
},
],
totalTime: 'PT45S',
},
generateFaqSchema({
'Which map app does it open?': {
question: 'Which map app does it open?',
answer: 'Our generator creates a universal Google Maps link. On most devices, this will open the Google Maps app if installed, or the browser version if not. It is the most compatible method.',
},
'How do I find my Latitude and Longitude?': {
question: 'How do I find my Latitude and Longitude?',
answer: 'On Google Maps desktop: Right-click any spot on the map. The first item in the menu is the coordinates. Click to copy them.',
},
'Does it work offline?': {
question: 'Does it work offline?',
answer: 'The QR code itself can be scanned offline, but the user will likely need an internet connection to load the map and get directions.',
},
'Can I use an address instead?': {
question: 'Can I use an address instead?',
answer: 'For precise results, we use coordinates. However, you can use our URL Generator and paste a link to your Google Maps address search result if you prefer.',
},
'Is it free?': {
question: 'Is it free?',
answer: 'Yes, generating this location QR code is completely free and requires no signup.',
},
}),
],
};
export default function GeolocationQRCodePage() {
return (
<>
<script
type="application/ld+json"
dangerouslySetInnerHTML={{ __html: JSON.stringify(jsonLd) }}
/>
<ToolBreadcrumb toolName="Location QR Code Generator" toolSlug="geolocation-qr-code" />
<div className="min-h-screen" style={{ backgroundColor: '#EBEBDF' }}>
{/* HERO SECTION */}
<section className="relative pt-20 pb-20 lg:pt-32 lg:pb-32 px-4 sm:px-6 lg:px-8 overflow-hidden" style={{ backgroundColor: '#047857' }}>
<div className="absolute inset-0 opacity-10">
<svg className="w-full h-full" viewBox="0 0 100 100" preserveAspectRatio="none">
<path d="M0 100 C 20 0 50 0 100 100 Z" fill="url(#grad1)" />
<defs>
<linearGradient id="grad1" x1="0%" y1="0%" x2="100%" y2="0%">
<stop offset="0%" style={{ stopColor: 'white', stopOpacity: 1 }} />
<stop offset="100%" style={{ stopColor: 'white', stopOpacity: 0 }} />
</linearGradient>
</defs>
</svg>
</div>
<div className="max-w-7xl mx-auto grid lg:grid-cols-2 gap-12 items-center relative z-10">
<div className="text-center lg:text-left">
<div className="inline-flex items-center gap-2 px-3 py-1 rounded-full bg-white/10 text-white/90 text-sm font-medium mb-6 backdrop-blur-sm border border-white/10 hover:bg-white/20 transition-colors cursor-default">
<span className="flex h-2 w-2 relative">
<span className="animate-ping absolute inline-flex h-full w-full rounded-full bg-emerald-400 opacity-75"></span>
<span className="relative inline-flex rounded-full h-2 w-2 bg-emerald-400"></span>
</span>
Free Tool — No Signup Required
</div>
<h1 className="text-4xl md:text-5xl lg:text-6xl font-extrabold text-white tracking-tight leading-tight mb-6">
Share Perfect Locations with <br className="hidden lg:block" />
<span className="text-transparent bg-clip-text bg-gradient-to-r from-emerald-300 to-teal-300">Map QR Codes</span>
</h1>
<p className="text-lg md:text-xl text-indigo-100 max-w-2xl mx-auto lg:mx-0 mb-8 leading-relaxed">
Provide exact directions to your event, store, or secret spot.
<strong className="text-white block sm:inline mt-2 sm:mt-0"> Opens directly in Google Maps.</strong>
</p>
<div className="flex flex-wrap justify-center lg:justify-start gap-4 text-sm font-medium text-white/80">
<div className="flex items-center gap-2 bg-white/5 px-4 py-2.5 rounded-xl border border-white/5 backdrop-blur-sm">
<Navigation className="w-4 h-4 text-emerald-400" />
Exact Directions
</div>
<div className="flex items-center gap-2 bg-white/5 px-4 py-2.5 rounded-xl border border-white/5 backdrop-blur-sm">
<Zap className="w-4 h-4 text-amber-400" />
Instant Load
</div>
<div className="flex items-center gap-2 bg-white/5 px-4 py-2.5 rounded-xl border border-white/5 backdrop-blur-sm">
<Shield className="w-4 h-4 text-purple-400" />
No Data Saved
</div>
</div>
</div>
{/* Visual Abstract */}
<div className="hidden lg:flex relative items-center justify-center min-h-[400px]">
<div className="absolute w-[500px] h-[500px] bg-indigo-500/30 rounded-full blur-[100px] -top-20 -right-20 animate-pulse" />
<div className="relative w-80 h-96 bg-white/5 backdrop-blur-xl border border-white/20 rounded-3xl shadow-2xl flex flex-col items-center justify-center p-8 transform rotate-3 hover:rotate-0 transition-all duration-700 group">
<div className="absolute inset-0 bg-gradient-to-br from-white/10 to-transparent rounded-3xl" />
<div className="w-full bg-white rounded-xl shadow-lg h-32 mb-6 relative overflow-hidden grayscale group-hover:grayscale-0 transition-all duration-500">
<div className="absolute inset-0 opacity-20 bg-[radial-gradient(#e5e7eb_1px,transparent_1px)] [background-size:16px_16px]"></div>
<div className="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2">
<MapPin className="w-8 h-8 text-red-500 drop-shadow-lg animate-bounce" />
</div>
<div className="absolute bottom-2 left-2 right-2 bg-white/90 p-2 rounded text-[10px] text-slate-600 font-mono text-center">
40.7128° N, 74.0060° W
</div>
</div>
<div className="w-44 h-44 bg-white rounded-xl p-2 shadow-inner relative overflow-hidden flex items-center justify-center">
<QRCodeSVG value="https://www.qrmaster.net" size={160} fgColor="#0f172a" level="Q" />
</div>
{/* Floating Badge */}
<div className="absolute -bottom-6 -right-6 bg-white py-3 px-5 rounded-xl shadow-xl flex items-center gap-3 transform transition-transform hover:scale-105 duration-300">
<div className="bg-emerald-100 p-2 rounded-full">
<Map className="w-5 h-5 text-emerald-600" />
</div>
<div className="text-left">
<div className="text-[10px] text-slate-400 font-bold uppercase tracking-wider">Map</div>
<div className="text-sm font-bold text-slate-900">Open</div>
</div>
</div>
</div>
</div>
</div>
</section>
{/* GENERATOR SECTION */}
<section className="py-12 px-4 sm:px-6 lg:px-8 -mt-8">
<GeolocationGenerator />
</section>
{/* HOW IT WORKS */}
<section className="py-16 px-4 sm:px-6 lg:px-8 bg-white">
<div className="max-w-4xl mx-auto">
<h2 className="text-3xl font-bold text-slate-900 text-center mb-12">
How Geolocation QR Codes Work
</h2>
<div className="grid md:grid-cols-3 lg:grid-cols-5 gap-8">
<article className="text-center">
<div className="w-14 h-14 rounded-2xl bg-[#1A1265]/10 flex items-center justify-center mx-auto mb-4">
<MapPin className="w-7 h-7 text-[#1A1265]" />
</div>
<h3 className="font-bold text-slate-900 mb-2">1. Pinpoint</h3>
<p className="text-slate-600 text-sm">
Enter exact GPS coordinates. This ensures users go to the precise spot (e.g., a specific building entrance).
</p>
</article>
<article className="text-center">
<div className="w-14 h-14 rounded-2xl bg-[#1A1265]/10 flex items-center justify-center mx-auto mb-4">
<Smartphone className="w-7 h-7 text-[#1A1265]" />
</div>
<h3 className="font-bold text-slate-900 mb-2">2. Scan</h3>
<p className="text-slate-600 text-sm">
Users scan the code. It is encoded with a universal map link.
</p>
</article>
<article className="text-center">
<div className="w-12 h-12 rounded-2xl bg-[#1A1265]/10 flex items-center justify-center mx-auto mb-4">
<Download className="w-6 h-6 text-[#1A1265]" />
</div>
<h3 className="font-bold text-slate-900 mb-2">3. Download</h3>
<p className="text-slate-600 text-xs leading-relaxed">
Save your high-quality QR image.
</p>
</article>
<article className="text-center">
<div className="w-12 h-12 rounded-2xl bg-[#1A1265]/10 flex items-center justify-center mx-auto mb-4">
<Smartphone className="w-6 h-6 text-[#1A1265]" />
</div>
<h3 className="font-bold text-slate-900 mb-2">4. Scan</h3>
<p className="text-slate-600 text-xs leading-relaxed">
Users scan the code to load coordinates.
</p>
</article>
<article className="text-center">
<div className="w-12 h-12 rounded-2xl bg-[#1A1265]/10 flex items-center justify-center mx-auto mb-4">
<Share2 className="w-6 h-6 text-[#1A1265]" />
</div>
<h3 className="font-bold text-slate-900 mb-2">5. Go</h3>
<p className="text-slate-600 text-xs leading-relaxed">
They get instant directions to your spot.
</p>
</article>
</div>
</div>
</section>
{/* RELATED TOOLS */}
<RelatedTools />
{/* FAQ SECTION */}
<section className="py-16 px-4 sm:px-6 lg:px-8" style={{ backgroundColor: '#EBEBDF' }}>
<div className="max-w-3xl mx-auto">
<h2 className="text-3xl font-bold text-slate-900 text-center mb-4">
Frequently Asked Questions
</h2>
<p className="text-slate-600 text-center mb-10">
Common questions about Map QR codes.
</p>
<div className="space-y-4">
<FaqItem
question="Why not just use an address?"
answer="Addresses can be ambiguous or cover large areas (like a park or stadium). Coordinates point to an exact geographic spot, ensuring visitors find the specific meeting point or parking entrance."
/>
<FaqItem
question="Does it work on Apple Maps?"
answer="Yes. While the underlying link is a Google Maps link, iOS devices usually handle these gracefully, either opening them in the Google Maps app (if installed) or the browser, where Apple Maps can often intercept directions."
/>
<FaqItem
question="Is it free?"
answer="Yes, generating this location QR code is completely free and requires no signup."
/>
<FaqItem
question="Can I track who scanned it?"
answer="Not with this static tool. If you need scan analytics (e.g., how many people scanned your storefront QR), you should use our Dynamic QR Code service."
/>
<FaqItem
question="Is it free?"
answer="Yes, generating this location QR code is completely free and requires no signup."
/>
</div>
</div>
</section>
</div>
</>
);
}
function FaqItem({ question, answer }: { question: string; answer: string }) {
return (
<details className="group bg-white rounded-xl shadow-sm border border-slate-200 overflow-hidden">
<summary className="flex items-center justify-between p-5 cursor-pointer list-none text-slate-900 font-semibold hover:bg-slate-50 transition-colors">
{question}
<span className="transition group-open:rotate-180 text-slate-400">
<svg fill="none" height="20" stroke="currentColor" strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" viewBox="0 0 24 24" width="20">
<path d="M6 9l6 6 6-6" />
</svg>
</span>
</summary>
<div className="text-slate-600 px-5 pb-5 pt-0 leading-relaxed text-sm">
{answer}
</div>
</details>
);
}

504
src/app/(main)/(marketing)/tools/instagram-qr-code/InstagramGenerator.tsx
View File

@@ -1,252 +1,252 @@
'use client';
import React, { useState, useRef } from 'react';
import Link from 'next/link';
import { QRCodeSVG } from 'qrcode.react';
import {
Instagram,
Download,
Check,
Sparkles,
Camera
} from 'lucide-react';
import { Button } from '@/components/ui/Button';
import { Input } from '@/components/ui/Input';
import { cn } from '@/lib/utils';
// Brand Colors
const BRAND = {
paleGrey: '#EBEBDF',
richBlue: '#1A1265',
richBlueLight: '#2A2275',
};
// QR Color Options - Insta Theme
const QR_COLORS = [
{ name: 'Insta Pink', value: '#E1306C' },
{ name: 'Insta Purple', value: '#833AB4' },
{ name: 'Insta Orange', value: '#F77737' },
{ name: 'Classic Black', value: '#000000' },
{ name: 'Rich Blue', value: '#1A1265' },
{ name: 'Teal', value: '#0D9488' },
{ name: 'Emerald', value: '#10B981' },
{ name: 'Rose', value: '#F43F5E' },
];
// Frame Options
const FRAME_OPTIONS = [
{ id: 'none', label: 'No Frame' },
{ id: 'scanme', label: 'Scan Me' },
{ id: 'follow', label: 'Follow Us' },
{ id: 'insta', label: 'Instagram' },
];
export default function InstagramGenerator() {
const [username, setUsername] = useState('');
const [qrColor, setQrColor] = useState('#E1306C');
const [frameType, setFrameType] = useState('none');
const qrRef = useRef<HTMLDivElement>(null);
// Instagram URL construction: https://instagram.com/username
const getUrl = () => {
const cleanUser = username.replace(/^@/, '').replace(/https?:\/\/(www\.)?instagram\.com\//, '').replace(/\/$/, '');
return cleanUser ? `https://instagram.com/${cleanUser}` : 'https://instagram.com';
};
const handleDownload = async (format: 'png' | 'svg') => {
if (!qrRef.current) return;
try {
if (format === 'png') {
const { toPng } = await import('html-to-image');
const dataUrl = await toPng(qrRef.current, { cacheBust: true, pixelRatio: 3 });
const link = document.createElement('a');
link.download = `instagram-qr-code.png`;
link.href = dataUrl;
link.click();
} else {
const svgData = qrRef.current.querySelector('svg')?.outerHTML;
if (svgData) {
const blob = new Blob([svgData], { type: 'image/svg+xml;charset=utf-8' });
const url = URL.createObjectURL(blob);
const link = document.createElement('a');
link.href = url;
link.download = `instagram-qr-code.svg`;
link.click();
}
}
} catch (err) {
console.error('Download failed', err);
}
};
const getFrameLabel = () => {
const frame = FRAME_OPTIONS.find(f => f.id === frameType);
return frame?.id !== 'none' ? frame?.label : null;
};
return (
<div className="w-full max-w-5xl mx-auto px-4 md:px-6">
{/* Main Generator Card */}
<div className="bg-white rounded-3xl shadow-2xl shadow-slate-900/10 overflow-hidden border border-slate-100">
<div className="grid lg:grid-cols-2">
{/* LEFT: Input Section */}
<div className="p-6 md:p-8 lg:p-10 space-y-8 border-r border-slate-100">
{/* Instagram Details */}
<div className="space-y-6">
<h2 className="text-lg font-bold text-slate-900 flex items-center gap-2">
<Instagram className="w-5 h-5 text-[#E1306C]" />
Instagram Username
</h2>
<div>
<label className="block text-sm font-medium text-slate-700 mb-2">Username or Link</label>
<Input
placeholder="@username"
value={username}
onChange={(e) => setUsername(e.target.value)}
className="h-12 text-base rounded-xl border-slate-200 focus:border-[#E1306C] focus:ring-[#E1306C]"
/>
<p className="text-xs text-slate-600 mt-2">Enter your username (without @) or paste full profile link.</p>
</div>
</div>
<div className="border-t border-slate-100"></div>
{/* Design Options */}
<div className="space-y-6">
<h2 className="text-lg font-bold text-slate-900 flex items-center gap-2">
<Sparkles className="w-5 h-5 text-[#E1306C]" />
Design Options
</h2>
{/* Color Picker */}
<div>
<label className="block text-sm font-medium text-slate-700 mb-3">QR Code Color</label>
<div className="flex flex-wrap gap-2">
{QR_COLORS.map((c) => (
<button
key={c.name}
onClick={() => setQrColor(c.value)}
className={cn(
"w-9 h-9 rounded-full border-2 flex items-center justify-center transition-all hover:scale-110",
qrColor === c.value ? "border-slate-900 ring-2 ring-offset-2 ring-slate-200" : "border-white shadow-md"
)}
style={{ backgroundColor: c.value }}
aria-label={`Select ${c.name}`}
title={c.name}
>
{qrColor === c.value && <Check className="w-4 h-4 text-white" strokeWidth={3} />}
</button>
))}
</div>
</div>
{/* Frame Selector */}
<div>
<label className="block text-sm font-medium text-slate-700 mb-3">Frame Label</label>
<div className="grid grid-cols-2 sm:grid-cols-4 gap-2">
{FRAME_OPTIONS.map((frame) => (
<button
key={frame.id}
onClick={() => setFrameType(frame.id)}
className={cn(
"py-2.5 px-3 rounded-lg text-sm font-medium transition-all border",
frameType === frame.id
? "bg-[#E1306C] text-white border-[#E1306C]"
: "bg-slate-50 text-slate-600 border-slate-200 hover:border-slate-300"
)}
>
{frame.label}
</button>
))}
</div>
</div>
</div>
</div>
{/* RIGHT: Preview Section */}
<div className="p-6 md:p-8 lg:p-10 flex flex-col items-center justify-center" style={{ backgroundColor: BRAND.paleGrey }}>
{/* QR Card with Frame */}
<div
ref={qrRef}
className="bg-white rounded-3xl shadow-xl p-6 sm:p-8 flex flex-col items-center w-full max-w-[320px]"
>
{/* Frame Label */}
{getFrameLabel() && (
<div
className="mb-5 px-8 py-2.5 rounded-full text-white font-bold text-sm tracking-widest uppercase shadow-md"
style={{ backgroundColor: qrColor }}
>
{getFrameLabel()}
</div>
)}
{/* QR Code */}
<div className="bg-white">
<QRCodeSVG
value={getUrl()}
size={240}
level="M"
includeMargin={false}
fgColor={qrColor}
/>
</div>
{/* Info Preview */}
<div className="mt-6 text-center max-w-[260px]">
<h3 className="font-bold text-slate-900 text-lg flex items-center justify-center gap-2 truncate">
<Instagram className="w-4 h-4 text-slate-400 shrink-0" />
<span className="truncate">{username || '@username'}</span>
</h3>
<div className="text-xs text-slate-600 mt-1">Opens in Instagram</div>
</div>
</div>
{/* Download Buttons */}
<div className="flex items-center gap-3 mt-8">
<Button
onClick={() => handleDownload('png')}
className="bg-[#E1306C] hover:bg-[#C13584] text-white shadow-lg"
>
<Download className="w-4 h-4 mr-2" />
Download PNG
</Button>
<Button
onClick={() => handleDownload('svg')}
variant="outline"
className="border-slate-300 hover:bg-white"
>
<Download className="w-4 h-4 mr-2" />
SVG
</Button>
</div>
<p className="text-xs text-slate-600 mt-4 text-center">
Scanning redirects directly to your Instagram profile.
</p>
</div>
</div>
</div>
{/* Upsell Banner */}
<div className="mt-8 bg-gradient-to-r from-[#833AB4] via-[#FD1D1D] to-[#FCA145] rounded-2xl p-6 flex flex-col sm:flex-row items-center justify-between gap-4">
<div className="text-white text-center sm:text-left">
<h3 className="font-bold text-lg">Want a "Link in Bio" QR?</h3>
<p className="text-white/80 text-sm mt-1">
Create a digital landing page with links to all your socials using Dynamic Codes.
</p>
</div>
<Link href="/signup">
<Button className="bg-white text-[#E1306C] hover:bg-slate-100 shrink-0 shadow-lg">
Create Bio Link
</Button>
</Link>
</div>
</div>
);
}
'use client';
import React, { useState, useRef } from 'react';
import Link from 'next/link';
import { QRCodeSVG } from 'qrcode.react';
import {
Instagram,
Download,
Check,
Sparkles,
Camera
} from 'lucide-react';
import { Button } from '@/components/ui/Button';
import { Input } from '@/components/ui/Input';
import { cn } from '@/lib/utils';
// Brand Colors
const BRAND = {
paleGrey: '#EBEBDF',
richBlue: '#1A1265',
richBlueLight: '#2A2275',
};
// QR Color Options - Insta Theme
const QR_COLORS = [
{ name: 'Insta Pink', value: '#E1306C' },
{ name: 'Insta Purple', value: '#833AB4' },
{ name: 'Insta Orange', value: '#F77737' },
{ name: 'Classic Black', value: '#000000' },
{ name: 'Rich Blue', value: '#1A1265' },
{ name: 'Teal', value: '#0D9488' },
{ name: 'Emerald', value: '#10B981' },
{ name: 'Rose', value: '#F43F5E' },
];
// Frame Options
const FRAME_OPTIONS = [
{ id: 'none', label: 'No Frame' },
{ id: 'scanme', label: 'Scan Me' },
{ id: 'follow', label: 'Follow Us' },
{ id: 'insta', label: 'Instagram' },
];
export default function InstagramGenerator() {
const [username, setUsername] = useState('');
const [qrColor, setQrColor] = useState('#E1306C');
const [frameType, setFrameType] = useState('none');
const qrRef = useRef<HTMLDivElement>(null);
// Instagram URL construction: https://instagram.com/username
const getUrl = () => {
const cleanUser = username.replace(/^@/, '').replace(/https?:\/\/(www\.)?instagram\.com\//, '').replace(/\/$/, '');
return cleanUser ? `https://instagram.com/${cleanUser}` : 'https://instagram.com';
};
const handleDownload = async (format: 'png' | 'svg') => {
if (!qrRef.current) return;
try {
if (format === 'png') {
const { toPng } = await import('html-to-image');
const dataUrl = await toPng(qrRef.current, { cacheBust: true, pixelRatio: 3 });
const link = document.createElement('a');
link.download = `instagram-qr-code.png`;
link.href = dataUrl;
link.click();
} else {
const svgData = qrRef.current.querySelector('svg')?.outerHTML;
if (svgData) {
const blob = new Blob([svgData], { type: 'image/svg+xml;charset=utf-8' });
const url = URL.createObjectURL(blob);
const link = document.createElement('a');
link.href = url;
link.download = `instagram-qr-code.svg`;
link.click();
}
}
} catch (err) {
console.error('Download failed', err);
}
};
const getFrameLabel = () => {
const frame = FRAME_OPTIONS.find(f => f.id === frameType);
return frame?.id !== 'none' ? frame?.label : null;
};
return (
<div className="w-full max-w-5xl mx-auto px-4 md:px-6">
{/* Main Generator Card */}
<div className="bg-white rounded-3xl shadow-2xl shadow-slate-900/10 overflow-hidden border border-slate-100">
<div className="grid lg:grid-cols-2">
{/* LEFT: Input Section */}
<div className="p-6 md:p-8 lg:p-10 space-y-8 border-r border-slate-100">
{/* Instagram Details */}
<div className="space-y-6">
<h2 className="text-lg font-bold text-slate-900 flex items-center gap-2">
<Instagram className="w-5 h-5 text-[#E1306C]" />
Instagram Username
</h2>
<div>
<label className="block text-sm font-medium text-slate-700 mb-2">Username or Link</label>
<Input
placeholder="@username"
value={username}
onChange={(e) => setUsername(e.target.value)}
className="h-12 text-base rounded-xl border-slate-200 focus:border-[#E1306C] focus:ring-[#E1306C]"
/>
<p className="text-xs text-slate-600 mt-2">Enter your username (without @) or paste full profile link.</p>
</div>
</div>
<div className="border-t border-slate-100"></div>
{/* Design Options */}
<div className="space-y-6">
<h2 className="text-lg font-bold text-slate-900 flex items-center gap-2">
<Sparkles className="w-5 h-5 text-[#E1306C]" />
Design Options
</h2>
{/* Color Picker */}
<div>
<label className="block text-sm font-medium text-slate-700 mb-3">QR Code Color</label>
<div className="flex flex-wrap gap-2">
{QR_COLORS.map((c) => (
<button
key={c.name}
onClick={() => setQrColor(c.value)}
className={cn(
"w-9 h-9 rounded-full border-2 flex items-center justify-center transition-all hover:scale-110",
qrColor === c.value ? "border-slate-900 ring-2 ring-offset-2 ring-slate-200" : "border-white shadow-md"
)}
style={{ backgroundColor: c.value }}
aria-label={`Select ${c.name}`}
title={c.name}
>
{qrColor === c.value && <Check className="w-4 h-4 text-white" strokeWidth={3} />}
</button>
))}
</div>
</div>
{/* Frame Selector */}
<div>
<label className="block text-sm font-medium text-slate-700 mb-3">Frame Label</label>
<div className="grid grid-cols-2 sm:grid-cols-4 gap-2">
{FRAME_OPTIONS.map((frame) => (
<button
key={frame.id}
onClick={() => setFrameType(frame.id)}
className={cn(
"py-2.5 px-3 rounded-lg text-sm font-medium transition-all border",
frameType === frame.id
? "bg-[#E1306C] text-white border-[#E1306C]"
: "bg-slate-50 text-slate-600 border-slate-200 hover:border-slate-300"
)}
>
{frame.label}
</button>
))}
</div>
</div>
</div>
</div>
{/* RIGHT: Preview Section */}
<div className="p-6 md:p-8 lg:p-10 flex flex-col items-center justify-center" style={{ backgroundColor: BRAND.paleGrey }}>
{/* QR Card with Frame */}
<div
ref={qrRef}
className="bg-white rounded-3xl shadow-xl p-6 sm:p-8 flex flex-col items-center w-full max-w-[320px]"
>
{/* Frame Label */}
{getFrameLabel() && (
<div
className="mb-5 px-8 py-2.5 rounded-full text-white font-bold text-sm tracking-widest uppercase shadow-md"
style={{ backgroundColor: qrColor }}
>
{getFrameLabel()}
</div>
)}
{/* QR Code */}
<div className="bg-white">
<QRCodeSVG
value={getUrl()}
size={240}
level="M"
includeMargin={false}
fgColor={qrColor}
/>
</div>
{/* Info Preview */}
<div className="mt-6 text-center max-w-[260px]">
<h3 className="font-bold text-slate-900 text-lg flex items-center justify-center gap-2 truncate">
<Instagram className="w-4 h-4 text-slate-400 shrink-0" />
<span className="truncate">{username || '@username'}</span>
</h3>
<div className="text-xs text-slate-600 mt-1">Opens in Instagram</div>
</div>
</div>
{/* Download Buttons */}
<div className="flex items-center gap-3 mt-8">
<Button
onClick={() => handleDownload('png')}
className="bg-[#E1306C] hover:bg-[#C13584] text-white shadow-lg"
>
<Download className="w-4 h-4 mr-2" />
Download PNG
</Button>
<Button
onClick={() => handleDownload('svg')}
variant="outline"
className="border-slate-300 hover:bg-white"
>
<Download className="w-4 h-4 mr-2" />
SVG
</Button>
</div>
<p className="text-xs text-slate-600 mt-4 text-center">
Scanning redirects directly to your Instagram profile.
</p>
</div>
</div>
</div>
{/* Upsell Banner */}
<div className="mt-8 bg-gradient-to-r from-[#833AB4] via-[#FD1D1D] to-[#FCA145] rounded-2xl p-6 flex flex-col sm:flex-row items-center justify-between gap-4">
<div className="text-white text-center sm:text-left">
<h3 className="font-bold text-lg">Want a "Link in Bio" QR?</h3>
<p className="text-white/80 text-sm mt-1">
Create a digital landing page with links to all your socials using Dynamic Codes.
</p>
</div>
<Link href="/signup">
<Button className="bg-white text-[#E1306C] hover:bg-slate-100 shrink-0 shadow-lg">
Create Bio Link
</Button>
</Link>
</div>
</div>
);
}

650
src/app/(main)/(marketing)/tools/instagram-qr-code/page.tsx
View File

@@ -1,325 +1,325 @@
import React from 'react';
import type { Metadata } from 'next';
import InstagramGenerator from './InstagramGenerator';
import { Instagram, Shield, Zap, Smartphone, Camera, Heart, Download, Share2 } from 'lucide-react';
import { QRCodeSVG } from 'qrcode.react';
import { ToolBreadcrumb } from '@/components/seo/BreadcrumbSchema';
import { RelatedTools } from '@/components/marketing/RelatedTools';
import { generateSoftwareAppSchema, generateFaqSchema } from '@/lib/schema-utils';
// SEO Optimized Metadata
export const metadata: Metadata = {
title: {
absolute: 'Free Instagram QR Code Generator | Get More Followers | QR Master',
},
description: 'Create a QR code for your Instagram profile. Erstelle einen Insta QR Code. Scanners follow you instantly. Free & Customizable.',
keywords: ['instagram qr code', 'insta qr generator', 'ig nametag generator', 'instagram follow qr', 'social media qr code', 'instagram qr code erstellen', 'instagram profil qr code', 'insta qr code', 'mehr follower qr code', 'instagram nametag generator'],
alternates: {
canonical: 'https://www.qrmaster.net/tools/instagram-qr-code',
},
openGraph: {
title: 'Free Instagram QR Code Generator | QR Master',
description: 'Generate QR codes to grow your Instagram following. Instant app redirect.',
type: 'website',
url: 'https://www.qrmaster.net/tools/instagram-qr-code',
images: [{ url: '/og-instagram-generator.png', width: 1200, height: 630 }],
},
twitter: {
card: 'summary_large_image',
title: 'Free Instagram QR Code Generator',
description: 'Create QR codes for Instagram. Boost your followers.',
},
robots: {
index: true,
follow: true,
},
};
// JSON-LD Structured Data
const jsonLd = {
'@context': 'https://schema.org',
'@graph': [
generateSoftwareAppSchema(
'Instagram QR Code Generator',
'Generate QR codes that direct users to an Instagram profile or post.',
'/og-instagram-generator.png'
),
{
'@type': 'HowTo',
name: 'How to Create an Instagram QR Code',
description: 'Create a QR code that opens an Instagram profile.',
step: [
{
'@type': 'HowToStep',
position: 1,
name: 'Enter Username',
text: 'Type your Instagram handle (e.g. @yourbrand) or paste your profile link.',
},
{
'@type': 'HowToStep',
position: 2,
name: 'Customize',
text: 'Choose a gradient color that matches the Instagram vibe or your own brand.',
},
{
'@type': 'HowToStep',
position: 3,
name: 'Download',
text: 'Save the QR code image.',
},
{
'@type': 'HowToStep',
position: 4,
name: 'Test',
text: 'Scan the code to ensure it opens the correct profile.',
},
{
'@type': 'HowToStep',
position: 5,
name: 'Share',
text: 'Put it on your packaging, business cards, or storefront.',
},
],
totalTime: 'PT30S',
},
generateFaqSchema({
'Is this an Instagram Nametag?': {
question: 'Is this an Instagram Nametag?',
answer: 'It works similarly! While Instagram has its own internal "Nametag" or "QR Code" feature, our generator allows you to create a standard QR code that is more customizable and can be tracked with our Dynamic plans.',
},
'Does it open the Instagram app?': {
question: 'Does it open the Instagram app?',
answer: 'Yes. When scanned on a mobile device with Instagram installed, it will deep-link directly to the profile in the app.',
},
'Can I link to a specific photo or reel?': {
question: 'Can I link to a specific photo or reel?',
answer: 'Yes! Instead of your username, just paste the full link to the specific post or reel.',
},
'Is it free?': {
question: 'Is it free?',
answer: 'Yes, generating this QR code is 100% free.',
},
'Can I track scans?': {
question: 'Can I track scans?',
answer: 'Not with this static tool. If you need scan analytics, consider using our Dynamic QR Code solution.',
},
}),
],
};
export default function InstagramQRCodePage() {
return (
<>
<script
type="application/ld+json"
dangerouslySetInnerHTML={{ __html: JSON.stringify(jsonLd) }}
/>
<ToolBreadcrumb toolName="Instagram QR Code Generator" toolSlug="instagram-qr-code" />
<div className="min-h-screen" style={{ backgroundColor: '#EBEBDF' }}>
{/* HERO SECTION */}
<section className="relative pt-20 pb-20 lg:pt-32 lg:pb-32 px-4 sm:px-6 lg:px-8 overflow-hidden bg-gradient-to-br from-[#833AB4] via-[#FD1D1D] to-[#FCA145]">
<div className="absolute inset-0 opacity-10">
<svg className="w-full h-full" width="100%" height="100%" viewBox="0 0 100 100" preserveAspectRatio="none">
<circle cx="0" cy="0" r="40" fill="white" fillOpacity="0.1" />
<circle cx="100" cy="100" r="50" fill="white" fillOpacity="0.1" />
</svg>
</div>
<div className="max-w-7xl mx-auto grid lg:grid-cols-2 gap-12 items-center relative z-10">
<div className="text-center lg:text-left">
<div className="inline-flex items-center gap-2 px-3 py-1 rounded-full bg-white/10 text-white/90 text-sm font-medium mb-6 backdrop-blur-sm border border-white/10 hover:bg-white/20 transition-colors cursor-default">
<span className="flex h-2 w-2 relative">
<span className="animate-ping absolute inline-flex h-full w-full rounded-full bg-pink-300 opacity-75"></span>
<span className="relative inline-flex rounded-full h-2 w-2 bg-pink-300"></span>
</span>
Free Tool — No Signup Required
</div>
<h1 className="text-4xl md:text-5xl lg:text-6xl font-extrabold text-white tracking-tight leading-tight mb-6">
Boost Your Following with <br className="hidden lg:block" />
<span className="text-white drop-shadow-md">Instagram QR Codes</span>
</h1>
<p className="text-lg md:text-xl text-pink-50 max-w-2xl mx-auto lg:mx-0 mb-8 leading-relaxed">
Connect physically to digitally. Let customers scan to follow your Instagram profile instantly.
<strong className="text-white block sm:inline mt-2 sm:mt-0"> Grow your brand effortlessly.</strong>
</p>
<div className="flex flex-wrap justify-center lg:justify-start gap-4 text-sm font-medium text-white/80">
<div className="flex items-center gap-2 bg-white/10 px-4 py-2.5 rounded-xl border border-white/10 backdrop-blur-sm">
<Heart className="w-4 h-4 text-pink-200" />
More Likes
</div>
<div className="flex items-center gap-2 bg-white/10 px-4 py-2.5 rounded-xl border border-white/10 backdrop-blur-sm">
<Zap className="w-4 h-4 text-yellow-200" />
Instant Follow
</div>
<div className="flex items-center gap-2 bg-white/10 px-4 py-2.5 rounded-xl border border-white/10 backdrop-blur-sm">
<Smartphone className="w-4 h-4 text-white" />
App Deep Link
</div>
</div>
</div>
{/* Visual Abstract */}
<div className="hidden lg:flex relative items-center justify-center min-h-[400px]">
<div className="absolute w-[500px] h-[500px] bg-white/10 rounded-full blur-[100px] -top-20 -right-20 animate-pulse" />
<div className="relative w-80 h-96 bg-white/5 backdrop-blur-xl border border-white/20 rounded-3xl shadow-2xl flex flex-col items-center justify-center p-8 transform -rotate-3 hover:rotate-0 transition-all duration-700 group">
<div className="absolute inset-0 bg-gradient-to-br from-white/10 to-transparent rounded-3xl" />
<div className="w-full bg-white rounded-xl shadow-lg p-4 mb-6 relative overflow-hidden flex flex-col items-center">
<div className="w-16 h-16 rounded-full p-[2px] bg-gradient-to-tr from-[#FCA145] via-[#FD1D1D] to-[#833AB4] mb-2">
<div className="w-full h-full rounded-full bg-white p-1">
<div className="w-full h-full rounded-full bg-slate-200" />
</div>
</div>
<div className="text-sm font-bold text-slate-900">@yourbrand</div>
</div>
<div className="w-48 h-48 bg-white rounded-xl p-2 shadow-inner relative overflow-hidden flex items-center justify-center">
<QRCodeSVG value="https://www.qrmaster.net" size={170} fgColor="#E1306C" level="Q" />
</div>
{/* Floating Badge */}
<div className="absolute -bottom-6 -left-6 bg-white py-3 px-5 rounded-xl shadow-xl flex items-center gap-3 transform transition-transform hover:scale-105 duration-300">
<div className="bg-gradient-to-tr from-[#FCA145] to-[#E1306C] p-2 rounded-full text-white">
<Camera className="w-5 h-5" />
</div>
<div className="text-left">
<div className="text-[10px] text-slate-400 font-bold uppercase tracking-wider">Profile</div>
<div className="text-sm font-bold text-slate-900">Following</div>
</div>
</div>
</div>
</div>
</div>
</section>
{/* GENERATOR SECTION */}
<section className="py-12 px-4 sm:px-6 lg:px-8 -mt-8">
<InstagramGenerator />
</section>
{/* HOW IT WORKS */}
<section className="py-16 px-4 sm:px-6 lg:px-8 bg-white">
<div className="max-w-4xl mx-auto">
<h2 className="text-3xl font-bold text-slate-900 text-center mb-12">
How Instagram QR Codes Work
</h2>
<div className="grid md:grid-cols-3 lg:grid-cols-5 gap-8">
<article className="text-center">
<div className="w-14 h-14 rounded-2xl bg-[#E1306C]/10 flex items-center justify-center mx-auto mb-4">
<Instagram className="w-7 h-7 text-[#E1306C]" />
</div>
<h3 className="font-bold text-slate-900 mb-2">1. Username</h3>
<p className="text-slate-600 text-sm">
Enter your Instagram handle. No need to login or connect your account.
</p>
</article>
<article className="text-center">
<div className="w-14 h-14 rounded-2xl bg-[#E1306C]/10 flex items-center justify-center mx-auto mb-4">
<Smartphone className="w-7 h-7 text-[#E1306C]" />
</div>
<h3 className="font-bold text-slate-900 mb-2">2. Print</h3>
<p className="text-slate-600 text-sm">
Add the QR code to your packaging, business cards, or table tents.
</p>
</article>
<article className="text-center">
<div className="w-12 h-12 rounded-2xl bg-[#E1306C]/10 flex items-center justify-center mx-auto mb-4">
<Download className="w-6 h-6 text-[#E1306C]" />
</div>
<h3 className="font-bold text-slate-900 mb-2">3. Download</h3>
<p className="text-slate-600 text-xs leading-relaxed">
Save your custom QR code.
</p>
</article>
<article className="text-center">
<div className="w-12 h-12 rounded-2xl bg-[#E1306C]/10 flex items-center justify-center mx-auto mb-4">
<Heart className="w-6 h-6 text-[#E1306C]" />
</div>
<h3 className="font-bold text-slate-900 mb-2">4. Scan</h3>
<p className="text-slate-600 text-xs leading-relaxed">
Fans scan to instantly visit your profile.
</p>
</article>
<article className="text-center">
<div className="w-12 h-12 rounded-2xl bg-[#E1306C]/10 flex items-center justify-center mx-auto mb-4">
<Share2 className="w-6 h-6 text-[#E1306C]" />
</div>
<h3 className="font-bold text-slate-900 mb-2">5. Grow</h3>
<p className="text-slate-600 text-xs leading-relaxed">
Convert offline traffic into followers.
</p>
</article>
</div>
</div>
</section>
<RelatedTools />
{/* FAQ SECTION */}
<section className="py-16 px-4 sm:px-6 lg:px-8" style={{ backgroundColor: '#EBEBDF' }}>
<div className="max-w-3xl mx-auto">
<h2 className="text-3xl font-bold text-slate-900 text-center mb-4">
Frequently Asked Questions
</h2>
<p className="text-slate-600 text-center mb-10">
Common questions about Instagram QR codes.
</p>
<div className="space-y-4">
<FaqItem
question="Does this work for private accounts?"
answer="Yes, the link will take users to your profile. If your account is private, they will still have to request to follow you."
/>
<FaqItem
question="Can I link to a Story?"
answer="Yes, but Stories expire after 24 hours (unless saved as a Highlight). Linking to a Highlight or your main Profile is usually better for printed materials."
/>
<FaqItem
question="Can I customize the frame?"
answer="Yes, we offer several frame options like 'Follow Us' or 'Scan Me' to encourage action."
/>
<FaqItem
question="Does it expire?"
answer="No. The QR code will work as long as your Instagram username remains the same."
/>
<FaqItem
question="Can I track scans?"
answer="Not with this static tool. If you need scan analytics, consider using our Dynamic QR Code solution."
/>
</div>
</div>
</section>
</div>
</>
);
}
function FaqItem({ question, answer }: { question: string; answer: string }) {
return (
<details className="group bg-white rounded-xl shadow-sm border border-slate-200 overflow-hidden">
<summary className="flex items-center justify-between p-5 cursor-pointer list-none text-slate-900 font-semibold hover:bg-slate-50 transition-colors">
{question}
<span className="transition group-open:rotate-180 text-slate-400">
<svg fill="none" height="20" stroke="currentColor" strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" viewBox="0 0 24 24" width="20">
<path d="M6 9l6 6 6-6" />
</svg>
</span>
</summary>
<div className="text-slate-600 px-5 pb-5 pt-0 leading-relaxed text-sm">
{answer}
</div>
</details>
);
}
import React from 'react';
import type { Metadata } from 'next';
import InstagramGenerator from './InstagramGenerator';
import { Instagram, Shield, Zap, Smartphone, Camera, Heart, Download, Share2 } from 'lucide-react';
import { QRCodeSVG } from 'qrcode.react';
import { ToolBreadcrumb } from '@/components/seo/BreadcrumbSchema';
import { RelatedTools } from '@/components/marketing/RelatedTools';
import { generateSoftwareAppSchema, generateFaqSchema } from '@/lib/schema-utils';
// SEO Optimized Metadata
export const metadata: Metadata = {
title: {
absolute: 'Free Instagram QR Code Generator | Get More Followers | QR Master',
},
description: 'Create a QR code for your Instagram profile. Erstelle einen Insta QR Code. Scanners follow you instantly. Free & Customizable.',
keywords: ['instagram qr code', 'insta qr generator', 'ig nametag generator', 'instagram follow qr', 'social media qr code', 'instagram qr code erstellen', 'instagram profil qr code', 'insta qr code', 'mehr follower qr code', 'instagram nametag generator'],
alternates: {
canonical: 'https://www.qrmaster.net/tools/instagram-qr-code',
},
openGraph: {
title: 'Free Instagram QR Code Generator | QR Master',
description: 'Generate QR codes to grow your Instagram following. Instant app redirect.',
type: 'website',
url: 'https://www.qrmaster.net/tools/instagram-qr-code',
images: [{ url: '/og-instagram-generator.png', width: 1200, height: 630 }],
},
twitter: {
card: 'summary_large_image',
title: 'Free Instagram QR Code Generator',
description: 'Create QR codes for Instagram. Boost your followers.',
},
robots: {
index: true,
follow: true,
},
};
// JSON-LD Structured Data
const jsonLd = {
'@context': 'https://schema.org',
'@graph': [
generateSoftwareAppSchema(
'Instagram QR Code Generator',
'Generate QR codes that direct users to an Instagram profile or post.',
'/og-instagram-generator.png'
),
{
'@type': 'HowTo',
name: 'How to Create an Instagram QR Code',
description: 'Create a QR code that opens an Instagram profile.',
step: [
{
'@type': 'HowToStep',
position: 1,
name: 'Enter Username',
text: 'Type your Instagram handle (e.g. @yourbrand) or paste your profile link.',
},
{
'@type': 'HowToStep',
position: 2,
name: 'Customize',
text: 'Choose a gradient color that matches the Instagram vibe or your own brand.',
},
{
'@type': 'HowToStep',
position: 3,
name: 'Download',
text: 'Save the QR code image.',
},
{
'@type': 'HowToStep',
position: 4,
name: 'Test',
text: 'Scan the code to ensure it opens the correct profile.',
},
{
'@type': 'HowToStep',
position: 5,
name: 'Share',
text: 'Put it on your packaging, business cards, or storefront.',
},
],
totalTime: 'PT30S',
},
generateFaqSchema({
'Is this an Instagram Nametag?': {
question: 'Is this an Instagram Nametag?',
answer: 'It works similarly! While Instagram has its own internal "Nametag" or "QR Code" feature, our generator allows you to create a standard QR code that is more customizable and can be tracked with our Dynamic plans.',
},
'Does it open the Instagram app?': {
question: 'Does it open the Instagram app?',
answer: 'Yes. When scanned on a mobile device with Instagram installed, it will deep-link directly to the profile in the app.',
},
'Can I link to a specific photo or reel?': {
question: 'Can I link to a specific photo or reel?',
answer: 'Yes! Instead of your username, just paste the full link to the specific post or reel.',
},
'Is it free?': {
question: 'Is it free?',
answer: 'Yes, generating this QR code is 100% free.',
},
'Can I track scans?': {
question: 'Can I track scans?',
answer: 'Not with this static tool. If you need scan analytics, consider using our Dynamic QR Code solution.',
},
}),
],
};
export default function InstagramQRCodePage() {
return (
<>
<script
type="application/ld+json"
dangerouslySetInnerHTML={{ __html: JSON.stringify(jsonLd) }}
/>
<ToolBreadcrumb toolName="Instagram QR Code Generator" toolSlug="instagram-qr-code" />
<div className="min-h-screen" style={{ backgroundColor: '#EBEBDF' }}>
{/* HERO SECTION */}
<section className="relative pt-20 pb-20 lg:pt-32 lg:pb-32 px-4 sm:px-6 lg:px-8 overflow-hidden bg-gradient-to-br from-[#833AB4] via-[#FD1D1D] to-[#FCA145]">
<div className="absolute inset-0 opacity-10">
<svg className="w-full h-full" width="100%" height="100%" viewBox="0 0 100 100" preserveAspectRatio="none">
<circle cx="0" cy="0" r="40" fill="white" fillOpacity="0.1" />
<circle cx="100" cy="100" r="50" fill="white" fillOpacity="0.1" />
</svg>
</div>
<div className="max-w-7xl mx-auto grid lg:grid-cols-2 gap-12 items-center relative z-10">
<div className="text-center lg:text-left">
<div className="inline-flex items-center gap-2 px-3 py-1 rounded-full bg-white/10 text-white/90 text-sm font-medium mb-6 backdrop-blur-sm border border-white/10 hover:bg-white/20 transition-colors cursor-default">
<span className="flex h-2 w-2 relative">
<span className="animate-ping absolute inline-flex h-full w-full rounded-full bg-pink-300 opacity-75"></span>
<span className="relative inline-flex rounded-full h-2 w-2 bg-pink-300"></span>
</span>
Free Tool — No Signup Required
</div>
<h1 className="text-4xl md:text-5xl lg:text-6xl font-extrabold text-white tracking-tight leading-tight mb-6">
Boost Your Following with <br className="hidden lg:block" />
<span className="text-white drop-shadow-md">Instagram QR Codes</span>
</h1>
<p className="text-lg md:text-xl text-pink-50 max-w-2xl mx-auto lg:mx-0 mb-8 leading-relaxed">
Connect physically to digitally. Let customers scan to follow your Instagram profile instantly.
<strong className="text-white block sm:inline mt-2 sm:mt-0"> Grow your brand effortlessly.</strong>
</p>
<div className="flex flex-wrap justify-center lg:justify-start gap-4 text-sm font-medium text-white/80">
<div className="flex items-center gap-2 bg-white/10 px-4 py-2.5 rounded-xl border border-white/10 backdrop-blur-sm">
<Heart className="w-4 h-4 text-pink-200" />
More Likes
</div>
<div className="flex items-center gap-2 bg-white/10 px-4 py-2.5 rounded-xl border border-white/10 backdrop-blur-sm">
<Zap className="w-4 h-4 text-yellow-200" />
Instant Follow
</div>
<div className="flex items-center gap-2 bg-white/10 px-4 py-2.5 rounded-xl border border-white/10 backdrop-blur-sm">
<Smartphone className="w-4 h-4 text-white" />
App Deep Link
</div>
</div>
</div>
{/* Visual Abstract */}
<div className="hidden lg:flex relative items-center justify-center min-h-[400px]">
<div className="absolute w-[500px] h-[500px] bg-white/10 rounded-full blur-[100px] -top-20 -right-20 animate-pulse" />
<div className="relative w-80 h-96 bg-white/5 backdrop-blur-xl border border-white/20 rounded-3xl shadow-2xl flex flex-col items-center justify-center p-8 transform -rotate-3 hover:rotate-0 transition-all duration-700 group">
<div className="absolute inset-0 bg-gradient-to-br from-white/10 to-transparent rounded-3xl" />
<div className="w-full bg-white rounded-xl shadow-lg p-4 mb-6 relative overflow-hidden flex flex-col items-center">
<div className="w-16 h-16 rounded-full p-[2px] bg-gradient-to-tr from-[#FCA145] via-[#FD1D1D] to-[#833AB4] mb-2">
<div className="w-full h-full rounded-full bg-white p-1">
<div className="w-full h-full rounded-full bg-slate-200" />
</div>
</div>
<div className="text-sm font-bold text-slate-900">@yourbrand</div>
</div>
<div className="w-48 h-48 bg-white rounded-xl p-2 shadow-inner relative overflow-hidden flex items-center justify-center">
<QRCodeSVG value="https://www.qrmaster.net" size={170} fgColor="#E1306C" level="Q" />
</div>
{/* Floating Badge */}
<div className="absolute -bottom-6 -left-6 bg-white py-3 px-5 rounded-xl shadow-xl flex items-center gap-3 transform transition-transform hover:scale-105 duration-300">
<div className="bg-gradient-to-tr from-[#FCA145] to-[#E1306C] p-2 rounded-full text-white">
<Camera className="w-5 h-5" />
</div>
<div className="text-left">
<div className="text-[10px] text-slate-400 font-bold uppercase tracking-wider">Profile</div>
<div className="text-sm font-bold text-slate-900">Following</div>
</div>
</div>
</div>
</div>
</div>
</section>
{/* GENERATOR SECTION */}
<section className="py-12 px-4 sm:px-6 lg:px-8 -mt-8">
<InstagramGenerator />
</section>
{/* HOW IT WORKS */}
<section className="py-16 px-4 sm:px-6 lg:px-8 bg-white">
<div className="max-w-4xl mx-auto">
<h2 className="text-3xl font-bold text-slate-900 text-center mb-12">
How Instagram QR Codes Work
</h2>
<div className="grid md:grid-cols-3 lg:grid-cols-5 gap-8">
<article className="text-center">
<div className="w-14 h-14 rounded-2xl bg-[#E1306C]/10 flex items-center justify-center mx-auto mb-4">
<Instagram className="w-7 h-7 text-[#E1306C]" />
</div>
<h3 className="font-bold text-slate-900 mb-2">1. Username</h3>
<p className="text-slate-600 text-sm">
Enter your Instagram handle. No need to login or connect your account.
</p>
</article>
<article className="text-center">
<div className="w-14 h-14 rounded-2xl bg-[#E1306C]/10 flex items-center justify-center mx-auto mb-4">
<Smartphone className="w-7 h-7 text-[#E1306C]" />
</div>
<h3 className="font-bold text-slate-900 mb-2">2. Print</h3>
<p className="text-slate-600 text-sm">
Add the QR code to your packaging, business cards, or table tents.
</p>
</article>
<article className="text-center">
<div className="w-12 h-12 rounded-2xl bg-[#E1306C]/10 flex items-center justify-center mx-auto mb-4">
<Download className="w-6 h-6 text-[#E1306C]" />
</div>
<h3 className="font-bold text-slate-900 mb-2">3. Download</h3>
<p className="text-slate-600 text-xs leading-relaxed">
Save your custom QR code.
</p>
</article>
<article className="text-center">
<div className="w-12 h-12 rounded-2xl bg-[#E1306C]/10 flex items-center justify-center mx-auto mb-4">
<Heart className="w-6 h-6 text-[#E1306C]" />
</div>
<h3 className="font-bold text-slate-900 mb-2">4. Scan</h3>
<p className="text-slate-600 text-xs leading-relaxed">
Fans scan to instantly visit your profile.
</p>
</article>
<article className="text-center">
<div className="w-12 h-12 rounded-2xl bg-[#E1306C]/10 flex items-center justify-center mx-auto mb-4">
<Share2 className="w-6 h-6 text-[#E1306C]" />
</div>
<h3 className="font-bold text-slate-900 mb-2">5. Grow</h3>
<p className="text-slate-600 text-xs leading-relaxed">
Convert offline traffic into followers.
</p>
</article>
</div>
</div>
</section>
<RelatedTools />
{/* FAQ SECTION */}
<section className="py-16 px-4 sm:px-6 lg:px-8" style={{ backgroundColor: '#EBEBDF' }}>
<div className="max-w-3xl mx-auto">
<h2 className="text-3xl font-bold text-slate-900 text-center mb-4">
Frequently Asked Questions
</h2>
<p className="text-slate-600 text-center mb-10">
Common questions about Instagram QR codes.
</p>
<div className="space-y-4">
<FaqItem
question="Does this work for private accounts?"
answer="Yes, the link will take users to your profile. If your account is private, they will still have to request to follow you."
/>
<FaqItem
question="Can I link to a Story?"
answer="Yes, but Stories expire after 24 hours (unless saved as a Highlight). Linking to a Highlight or your main Profile is usually better for printed materials."
/>
<FaqItem
question="Can I customize the frame?"
answer="Yes, we offer several frame options like 'Follow Us' or 'Scan Me' to encourage action."
/>
<FaqItem
question="Does it expire?"
answer="No. The QR code will work as long as your Instagram username remains the same."
/>
<FaqItem
question="Can I track scans?"
answer="Not with this static tool. If you need scan analytics, consider using our Dynamic QR Code solution."
/>
</div>
</div>
</section>
</div>
</>
);
}
function FaqItem({ question, answer }: { question: string; answer: string }) {
return (
<details className="group bg-white rounded-xl shadow-sm border border-slate-200 overflow-hidden">
<summary className="flex items-center justify-between p-5 cursor-pointer list-none text-slate-900 font-semibold hover:bg-slate-50 transition-colors">
{question}
<span className="transition group-open:rotate-180 text-slate-400">
<svg fill="none" height="20" stroke="currentColor" strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" viewBox="0 0 24 24" width="20">
<path d="M6 9l6 6 6-6" />
</svg>
</span>
</summary>
<div className="text-slate-600 px-5 pb-5 pt-0 leading-relaxed text-sm">
{answer}
</div>
</details>
);
}

60
src/app/(main)/(marketing)/tools/layout.tsx
View File

@@ -1,30 +1,30 @@
'use client';
import React from 'react';
import AdBanner from '@/components/ads/AdBanner';
export default function ToolsLayout({
children,
}: {
children: React.ReactNode;
}) {
return (
<div className="flex flex-col min-h-screen">
{/* AdSense script - managed by global AdSenseScript component */}
<div className="flex-grow relative">
{children}
</div>
{/* Footer Ad Placement - Appears on ALL tool pages */}
{/* AdBanner handles its own visibility - only shows when an ad is filled */}
<div className="container mx-auto px-4 sm:px-6 lg:px-8 max-w-7xl pb-8">
<AdBanner
dataAdSlot="1234567890" // Placeholder
dataAdFormat="auto"
fullWidthResponsive={true}
className="bg-slate-50 rounded-xl p-4 border border-slate-100"
/>
</div>
</div>
);
}
'use client';
import React from 'react';
import AdBanner from '@/components/ads/AdBanner';
export default function ToolsLayout({
children,
}: {
children: React.ReactNode;
}) {
return (
<div className="flex flex-col min-h-screen">
{/* AdSense script - managed by global AdSenseScript component */}
<div className="flex-grow relative">
{children}
</div>
{/* Footer Ad Placement - Appears on ALL tool pages */}
{/* AdBanner handles its own visibility - only shows when an ad is filled */}
<div className="container mx-auto px-4 sm:px-6 lg:px-8 max-w-7xl pb-8">
<AdBanner
dataAdSlot="1234567890" // Placeholder
dataAdFormat="auto"
fullWidthResponsive={true}
className="bg-slate-50 rounded-xl p-4 border border-slate-100"
/>
</div>
</div>
);
}

684
src/app/(main)/(marketing)/tools/paypal-qr-code/PayPalGenerator.tsx
View File

@@ -1,342 +1,342 @@
'use client';
import React, { useState, useRef } from 'react';
import Link from 'next/link';
import { QRCodeSVG } from 'qrcode.react';
import {
CreditCard,
Download,
Check,
Sparkles,
DollarSign
} from 'lucide-react';
import { Button } from '@/components/ui/Button';
import { Input } from '@/components/ui/Input';
import { Select } from '@/components/ui/Select';
import { cn } from '@/lib/utils';
// Brand Colors - PayPal Blue
const BRAND = {
paleGrey: '#EFF6FF', // Blue-50
primary: '#003087', // PayPal Dark Blue
primaryDark: '#001F5C',
accent: '#0070BA', // PayPal Light Blue
};
// QR Color Options
const QR_COLORS = [
{ name: 'PayPal Blue', value: '#003087' },
{ name: 'PayPal Light', value: '#0070BA' },
{ name: 'Classic Black', value: '#000000' },
{ name: 'Indigo', value: '#4F46E5' },
{ name: 'Violet', value: '#7C3AED' },
{ name: 'Emerald', value: '#10B981' },
{ name: 'Rose', value: '#F43F5E' },
];
// Frame Options
const FRAME_OPTIONS = [
{ id: 'none', label: 'No Frame' },
{ id: 'scanme', label: 'Scan Me' },
{ id: 'pay', label: 'Pay Now' },
{ id: 'donate', label: 'Donate' },
{ id: 'tip', label: 'Tip Me' },
];
// Currency Options
const CURRENCIES = [
{ value: 'EUR', label: 'EUR (€)' },
{ value: 'USD', label: 'USD ($)' },
{ value: 'GBP', label: 'GBP (£)' },
{ value: 'CHF', label: 'CHF' },
];
// Input type options
const INPUT_TYPES = [
{ id: 'username', label: 'PayPal.me Username' },
{ id: 'email', label: 'PayPal Email' },
];
export default function PayPalGenerator() {
const [inputType, setInputType] = useState('email');
const [paypalId, setPaypalId] = useState('');
const [amount, setAmount] = useState('');
const [currency, setCurrency] = useState('EUR');
const [qrColor, setQrColor] = useState(BRAND.primary);
const [frameType, setFrameType] = useState('none');
const qrRef = useRef<HTMLDivElement>(null);
// Generate PayPal payment link
const generatePayPalLink = () => {
if (!paypalId.trim()) return 'https://paypal.com';
if (inputType === 'username') {
// PayPal.me link
let link = `https://paypal.me/${paypalId.trim()}`;
if (amount && parseFloat(amount) > 0) {
link += `/${amount}`;
}
return link;
} else {
// PayPal email payment link (donation/payment format)
const params = new URLSearchParams({
cmd: '_donations',
business: paypalId.trim(),
currency_code: currency,
...(amount && parseFloat(amount) > 0 ? { amount } : {}),
});
return `https://www.paypal.com/cgi-bin/webscr?${params.toString()}`;
}
};
const handleDownload = async (format: 'png' | 'svg') => {
if (!qrRef.current) return;
try {
if (format === 'png') {
const { toPng } = await import('html-to-image');
const dataUrl = await toPng(qrRef.current, { cacheBust: true, pixelRatio: 3 });
const link = document.createElement('a');
link.download = `paypal-qr-${paypalId || 'code'}.png`;
link.href = dataUrl;
link.click();
} else {
const svgData = qrRef.current.querySelector('svg')?.outerHTML;
if (svgData) {
const blob = new Blob([svgData], { type: 'image/svg+xml;charset=utf-8' });
const url = URL.createObjectURL(blob);
const link = document.createElement('a');
link.href = url;
link.download = `paypal-qr-${paypalId || 'code'}.svg`;
link.click();
}
}
} catch (err) {
console.error('Download failed', err);
}
};
const getFrameLabel = () => {
const frame = FRAME_OPTIONS.find(f => f.id === frameType);
return frame?.id !== 'none' ? frame?.label : null;
};
return (
<div className="w-full max-w-5xl mx-auto px-4 md:px-6">
{/* Main Generator Card */}
<div className="bg-white rounded-3xl shadow-2xl shadow-slate-900/10 overflow-hidden border border-slate-100">
<div className="grid lg:grid-cols-2">
{/* LEFT: Input Section */}
<div className="p-6 md:p-8 lg:p-10 space-y-8 border-r border-slate-100">
{/* PayPal Details */}
<div className="space-y-6">
<h2 className="text-lg font-bold text-slate-900 flex items-center gap-2">
<CreditCard className="w-5 h-5 text-[#003087]" />
PayPal Details
</h2>
<div className="space-y-4">
{/* Input Type Toggle */}
<div>
<label className="block text-sm font-medium text-slate-700 mb-2">Payment Method</label>
<div className="grid grid-cols-2 gap-2">
{INPUT_TYPES.map((type) => (
<button
key={type.id}
onClick={() => setInputType(type.id)}
className={cn(
"py-2.5 px-3 rounded-lg text-sm font-medium transition-all border",
inputType === type.id
? "bg-[#003087] text-white border-[#003087]"
: "bg-slate-50 text-slate-600 border-slate-200 hover:border-slate-300"
)}
>
{type.label}
</button>
))}
</div>
</div>
<div>
<label className="block text-sm font-medium text-slate-700 mb-2">
{inputType === 'username' ? 'PayPal.me Username' : 'PayPal Email Address'}
</label>
<Input
type={inputType === 'email' ? 'email' : 'text'}
placeholder={inputType === 'username' ? 'e.g. johndoe' : 'e.g. mail@example.com'}
value={paypalId}
onChange={(e) => setPaypalId(e.target.value)}
className="h-12 text-base rounded-xl border-slate-200 focus:border-[#003087] focus:ring-[#003087]"
/>
<p className="text-xs text-slate-600 mt-2">
{inputType === 'username'
? <>Find yours at <a href="https://paypal.me" target="_blank" rel="noopener noreferrer" className="text-[#003087] underline">paypal.me</a></>
: 'The email address linked to your PayPal account'
}
</p>
</div>
<div className="grid grid-cols-2 gap-4">
<div>
<label className="block text-sm font-medium text-slate-700 mb-2">Amount (Optional)</label>
<Input
type="number"
placeholder="25.00"
value={amount}
onChange={(e) => setAmount(e.target.value)}
className="h-12 text-base rounded-xl border-slate-200 focus:border-[#003087] focus:ring-[#003087]"
/>
</div>
<div>
<label className="block text-sm font-medium text-slate-700 mb-2">Currency</label>
<Select
value={currency}
onChange={(e) => setCurrency(e.target.value)}
className="h-12 rounded-xl border-slate-200"
aria-label="Currency"
options={CURRENCIES}
/>
</div>
</div>
</div>
</div>
<div className="border-t border-slate-100"></div>
{/* Design Options */}
<div className="space-y-6">
<h2 className="text-lg font-bold text-slate-900 flex items-center gap-2">
<Sparkles className="w-5 h-5 text-[#003087]" />
Design Options
</h2>
{/* Color Picker */}
<div>
<label className="block text-sm font-medium text-slate-700 mb-3">QR Code Color</label>
<div className="flex flex-wrap gap-2">
{QR_COLORS.map((c) => (
<button
key={c.name}
onClick={() => setQrColor(c.value)}
className={cn(
"w-9 h-9 rounded-full border-2 flex items-center justify-center transition-all hover:scale-110",
qrColor === c.value ? "border-slate-900 ring-2 ring-offset-2 ring-slate-200" : "border-white shadow-md"
)}
style={{ backgroundColor: c.value }}
aria-label={`Select ${c.name}`}
title={c.name}
>
{qrColor === c.value && <Check className="w-4 h-4 text-white" strokeWidth={3} />}
</button>
))}
</div>
</div>
{/* Frame Selector */}
<div>
<label className="block text-sm font-medium text-slate-700 mb-3">Frame Label</label>
<div className="grid grid-cols-2 sm:grid-cols-5 gap-2">
{FRAME_OPTIONS.map((frame) => (
<button
key={frame.id}
onClick={() => setFrameType(frame.id)}
className={cn(
"py-2.5 px-2 rounded-lg text-xs font-medium transition-all border",
frameType === frame.id
? "bg-[#003087] text-white border-[#003087]"
: "bg-slate-50 text-slate-600 border-slate-200 hover:border-slate-300"
)}
>
{frame.label}
</button>
))}
</div>
</div>
</div>
</div>
{/* RIGHT: Preview Section */}
<div className="p-6 md:p-8 lg:p-10 flex flex-col items-center justify-center" style={{ backgroundColor: BRAND.paleGrey }}>
{/* QR Card with Frame */}
<div
ref={qrRef}
className="bg-white rounded-3xl shadow-xl p-6 sm:p-8 flex flex-col items-center w-full max-w-[320px]"
>
{/* Frame Label */}
{getFrameLabel() && (
<div
className="mb-5 px-8 py-2.5 rounded-full text-white font-bold text-sm tracking-widest uppercase shadow-md"
style={{ backgroundColor: qrColor }}
>
{getFrameLabel()}
</div>
)}
{/* QR Code */}
<div className="bg-white">
<QRCodeSVG
value={generatePayPalLink()}
size={240}
level="M"
includeMargin={false}
fgColor={qrColor}
/>
</div>
{/* PayPal Info */}
<div className="mt-6 text-center max-w-[260px]">
<h3 className="font-bold text-slate-900 text-lg flex items-center justify-center gap-2 truncate">
<DollarSign className="w-4 h-4 text-[#003087] shrink-0" />
<span className="truncate">{paypalId || 'Your PayPal'}</span>
</h3>
{amount && (
<p className="text-sm text-slate-600 mt-1">{amount} {currency}</p>
)}
</div>
</div>
{/* Download Buttons */}
<div className="flex items-center gap-3 mt-8">
<Button
onClick={() => handleDownload('png')}
className="bg-[#003087] hover:bg-[#001F5C] text-white shadow-lg"
>
<Download className="w-4 h-4 mr-2" />
Download PNG
</Button>
<Button
onClick={() => handleDownload('svg')}
variant="outline"
className="border-slate-300 hover:bg-white"
>
<Download className="w-4 h-4 mr-2" />
SVG
</Button>
</div>
<p className="text-xs text-slate-600 mt-4 text-center">
Your PayPal link is encoded directly. Static and forever free.
</p>
</div>
</div>
</div>
{/* Upsell Banner */}
<div className="mt-8 bg-gradient-to-r from-[#003087] to-[#0070BA] rounded-2xl p-6 flex flex-col sm:flex-row items-center justify-between gap-4">
<div className="text-white text-center sm:text-left">
<h3 className="font-bold text-lg">Need payment analytics?</h3>
<p className="text-white/80 text-sm mt-1">Track how many people scan your payment QR code with Dynamic QR Codes.</p>
</div>
<Link href="/signup">
<Button className="bg-white text-[#003087] hover:bg-slate-100 shrink-0 shadow-lg">
Get Analytics
</Button>
</Link>
</div>
</div>
);
}
'use client';
import React, { useState, useRef } from 'react';
import Link from 'next/link';
import { QRCodeSVG } from 'qrcode.react';
import {
CreditCard,
Download,
Check,
Sparkles,
DollarSign
} from 'lucide-react';
import { Button } from '@/components/ui/Button';
import { Input } from '@/components/ui/Input';
import { Select } from '@/components/ui/Select';
import { cn } from '@/lib/utils';
// Brand Colors - PayPal Blue
const BRAND = {
paleGrey: '#EFF6FF', // Blue-50
primary: '#003087', // PayPal Dark Blue
primaryDark: '#001F5C',
accent: '#0070BA', // PayPal Light Blue
};
// QR Color Options
const QR_COLORS = [
{ name: 'PayPal Blue', value: '#003087' },
{ name: 'PayPal Light', value: '#0070BA' },
{ name: 'Classic Black', value: '#000000' },
{ name: 'Indigo', value: '#4F46E5' },
{ name: 'Violet', value: '#7C3AED' },
{ name: 'Emerald', value: '#10B981' },
{ name: 'Rose', value: '#F43F5E' },
];
// Frame Options
const FRAME_OPTIONS = [
{ id: 'none', label: 'No Frame' },
{ id: 'scanme', label: 'Scan Me' },
{ id: 'pay', label: 'Pay Now' },
{ id: 'donate', label: 'Donate' },
{ id: 'tip', label: 'Tip Me' },
];
// Currency Options
const CURRENCIES = [
{ value: 'EUR', label: 'EUR (€)' },
{ value: 'USD', label: 'USD ($)' },
{ value: 'GBP', label: 'GBP (£)' },
{ value: 'CHF', label: 'CHF' },
];
// Input type options
const INPUT_TYPES = [
{ id: 'username', label: 'PayPal.me Username' },
{ id: 'email', label: 'PayPal Email' },
];
export default function PayPalGenerator() {
const [inputType, setInputType] = useState('email');
const [paypalId, setPaypalId] = useState('');
const [amount, setAmount] = useState('');
const [currency, setCurrency] = useState('EUR');
const [qrColor, setQrColor] = useState(BRAND.primary);
const [frameType, setFrameType] = useState('none');
const qrRef = useRef<HTMLDivElement>(null);
// Generate PayPal payment link
const generatePayPalLink = () => {
if (!paypalId.trim()) return 'https://paypal.com';
if (inputType === 'username') {
// PayPal.me link
let link = `https://paypal.me/${paypalId.trim()}`;
if (amount && parseFloat(amount) > 0) {
link += `/${amount}`;
}
return link;
} else {
// PayPal email payment link (donation/payment format)
const params = new URLSearchParams({
cmd: '_donations',
business: paypalId.trim(),
currency_code: currency,
...(amount && parseFloat(amount) > 0 ? { amount } : {}),
});
return `https://www.paypal.com/cgi-bin/webscr?${params.toString()}`;
}
};
const handleDownload = async (format: 'png' | 'svg') => {
if (!qrRef.current) return;
try {
if (format === 'png') {
const { toPng } = await import('html-to-image');
const dataUrl = await toPng(qrRef.current, { cacheBust: true, pixelRatio: 3 });
const link = document.createElement('a');
link.download = `paypal-qr-${paypalId || 'code'}.png`;
link.href = dataUrl;
link.click();
} else {
const svgData = qrRef.current.querySelector('svg')?.outerHTML;
if (svgData) {
const blob = new Blob([svgData], { type: 'image/svg+xml;charset=utf-8' });
const url = URL.createObjectURL(blob);
const link = document.createElement('a');
link.href = url;
link.download = `paypal-qr-${paypalId || 'code'}.svg`;
link.click();
}
}
} catch (err) {
console.error('Download failed', err);
}
};
const getFrameLabel = () => {
const frame = FRAME_OPTIONS.find(f => f.id === frameType);
return frame?.id !== 'none' ? frame?.label : null;
};
return (
<div className="w-full max-w-5xl mx-auto px-4 md:px-6">
{/* Main Generator Card */}
<div className="bg-white rounded-3xl shadow-2xl shadow-slate-900/10 overflow-hidden border border-slate-100">
<div className="grid lg:grid-cols-2">
{/* LEFT: Input Section */}
<div className="p-6 md:p-8 lg:p-10 space-y-8 border-r border-slate-100">
{/* PayPal Details */}
<div className="space-y-6">
<h2 className="text-lg font-bold text-slate-900 flex items-center gap-2">
<CreditCard className="w-5 h-5 text-[#003087]" />
PayPal Details
</h2>
<div className="space-y-4">
{/* Input Type Toggle */}
<div>
<label className="block text-sm font-medium text-slate-700 mb-2">Payment Method</label>
<div className="grid grid-cols-2 gap-2">
{INPUT_TYPES.map((type) => (
<button
key={type.id}
onClick={() => setInputType(type.id)}
className={cn(
"py-2.5 px-3 rounded-lg text-sm font-medium transition-all border",
inputType === type.id
? "bg-[#003087] text-white border-[#003087]"
: "bg-slate-50 text-slate-600 border-slate-200 hover:border-slate-300"
)}
>
{type.label}
</button>
))}
</div>
</div>
<div>
<label className="block text-sm font-medium text-slate-700 mb-2">
{inputType === 'username' ? 'PayPal.me Username' : 'PayPal Email Address'}
</label>
<Input
type={inputType === 'email' ? 'email' : 'text'}
placeholder={inputType === 'username' ? 'e.g. johndoe' : 'e.g. mail@example.com'}
value={paypalId}
onChange={(e) => setPaypalId(e.target.value)}
className="h-12 text-base rounded-xl border-slate-200 focus:border-[#003087] focus:ring-[#003087]"
/>
<p className="text-xs text-slate-600 mt-2">
{inputType === 'username'
? <>Find yours at <a href="https://paypal.me" target="_blank" rel="noopener noreferrer" className="text-[#003087] underline">paypal.me</a></>
: 'The email address linked to your PayPal account'
}
</p>
</div>
<div className="grid grid-cols-2 gap-4">
<div>
<label className="block text-sm font-medium text-slate-700 mb-2">Amount (Optional)</label>
<Input
type="number"
placeholder="25.00"
value={amount}
onChange={(e) => setAmount(e.target.value)}
className="h-12 text-base rounded-xl border-slate-200 focus:border-[#003087] focus:ring-[#003087]"
/>
</div>
<div>
<label className="block text-sm font-medium text-slate-700 mb-2">Currency</label>
<Select
value={currency}
onChange={(e) => setCurrency(e.target.value)}
className="h-12 rounded-xl border-slate-200"
aria-label="Currency"
options={CURRENCIES}
/>
</div>
</div>
</div>
</div>
<div className="border-t border-slate-100"></div>
{/* Design Options */}
<div className="space-y-6">
<h2 className="text-lg font-bold text-slate-900 flex items-center gap-2">
<Sparkles className="w-5 h-5 text-[#003087]" />
Design Options
</h2>
{/* Color Picker */}
<div>
<label className="block text-sm font-medium text-slate-700 mb-3">QR Code Color</label>
<div className="flex flex-wrap gap-2">
{QR_COLORS.map((c) => (
<button
key={c.name}
onClick={() => setQrColor(c.value)}
className={cn(
"w-9 h-9 rounded-full border-2 flex items-center justify-center transition-all hover:scale-110",
qrColor === c.value ? "border-slate-900 ring-2 ring-offset-2 ring-slate-200" : "border-white shadow-md"
)}
style={{ backgroundColor: c.value }}
aria-label={`Select ${c.name}`}
title={c.name}
>
{qrColor === c.value && <Check className="w-4 h-4 text-white" strokeWidth={3} />}
</button>
))}
</div>
</div>
{/* Frame Selector */}
<div>
<label className="block text-sm font-medium text-slate-700 mb-3">Frame Label</label>
<div className="grid grid-cols-2 sm:grid-cols-5 gap-2">
{FRAME_OPTIONS.map((frame) => (
<button
key={frame.id}
onClick={() => setFrameType(frame.id)}
className={cn(
"py-2.5 px-2 rounded-lg text-xs font-medium transition-all border",
frameType === frame.id
? "bg-[#003087] text-white border-[#003087]"
: "bg-slate-50 text-slate-600 border-slate-200 hover:border-slate-300"
)}
>
{frame.label}
</button>
))}
</div>
</div>
</div>
</div>
{/* RIGHT: Preview Section */}
<div className="p-6 md:p-8 lg:p-10 flex flex-col items-center justify-center" style={{ backgroundColor: BRAND.paleGrey }}>
{/* QR Card with Frame */}
<div
ref={qrRef}
className="bg-white rounded-3xl shadow-xl p-6 sm:p-8 flex flex-col items-center w-full max-w-[320px]"
>
{/* Frame Label */}
{getFrameLabel() && (
<div
className="mb-5 px-8 py-2.5 rounded-full text-white font-bold text-sm tracking-widest uppercase shadow-md"
style={{ backgroundColor: qrColor }}
>
{getFrameLabel()}
</div>
)}
{/* QR Code */}
<div className="bg-white">
<QRCodeSVG
value={generatePayPalLink()}
size={240}
level="M"
includeMargin={false}
fgColor={qrColor}
/>
</div>
{/* PayPal Info */}
<div className="mt-6 text-center max-w-[260px]">
<h3 className="font-bold text-slate-900 text-lg flex items-center justify-center gap-2 truncate">
<DollarSign className="w-4 h-4 text-[#003087] shrink-0" />
<span className="truncate">{paypalId || 'Your PayPal'}</span>
</h3>
{amount && (
<p className="text-sm text-slate-600 mt-1">{amount} {currency}</p>
)}
</div>
</div>
{/* Download Buttons */}
<div className="flex items-center gap-3 mt-8">
<Button
onClick={() => handleDownload('png')}
className="bg-[#003087] hover:bg-[#001F5C] text-white shadow-lg"
>
<Download className="w-4 h-4 mr-2" />
Download PNG
</Button>
<Button
onClick={() => handleDownload('svg')}
variant="outline"
className="border-slate-300 hover:bg-white"
>
<Download className="w-4 h-4 mr-2" />
SVG
</Button>
</div>
<p className="text-xs text-slate-600 mt-4 text-center">
Your PayPal link is encoded directly. Static and forever free.
</p>
</div>
</div>
</div>
{/* Upsell Banner */}
<div className="mt-8 bg-gradient-to-r from-[#003087] to-[#0070BA] rounded-2xl p-6 flex flex-col sm:flex-row items-center justify-between gap-4">
<div className="text-white text-center sm:text-left">
<h3 className="font-bold text-lg">Need payment analytics?</h3>
<p className="text-white/80 text-sm mt-1">Track how many people scan your payment QR code with Dynamic QR Codes.</p>
</div>
<Link href="/signup">
<Button className="bg-white text-[#003087] hover:bg-slate-100 shrink-0 shadow-lg">
Get Analytics
</Button>
</Link>
</div>
</div>
);
}

662
src/app/(main)/(marketing)/tools/paypal-qr-code/page.tsx
View File

@@ -1,331 +1,331 @@
import React from 'react';
import type { Metadata } from 'next';
import PayPalGenerator from './PayPalGenerator';
import { CreditCard, Shield, Zap, Smartphone, DollarSign, Download, Share2, Banknote } from 'lucide-react';
import { QRCodeSVG } from 'qrcode.react';
import { ToolBreadcrumb } from '@/components/seo/BreadcrumbSchema';
import { RelatedTools } from '@/components/marketing/RelatedTools';
import { generateSoftwareAppSchema, generateFaqSchema } from '@/lib/schema-utils';
// SEO Optimized Metadata
export const metadata: Metadata = {
title: {
absolute: 'Free PayPal QR Code Generator | Accept Payments Instantly | QR Master',
},
description: 'Create a QR code for your PayPal.me link. PayPal QR Code erstellen. Receive payments instantly. Support tips, donations, and fixed amounts.',
keywords: ['paypal qr code', 'paypal.me qr generator', 'payment qr code', 'accept payments qr', 'paypal qr generator', 'tip qr code', 'donation qr code', 'paypal qr code erstellen', 'zahlungs qr code', 'spenden qr code', 'paypal bezahlen qr'],
alternates: {
canonical: 'https://www.qrmaster.net/tools/paypal-qr-code',
},
openGraph: {
title: 'Free PayPal QR Code Generator | QR Master',
description: 'Generate QR codes for PayPal payments. Perfect for tips, donations, and invoices.',
type: 'website',
url: 'https://www.qrmaster.net/tools/paypal-qr-code',
images: [{ url: '/og-paypal-generator.png', width: 1200, height: 630 }],
},
twitter: {
card: 'summary_large_image',
title: 'Free PayPal QR Code Generator',
description: 'Create PayPal payment QR codes. Instant and free.',
},
robots: {
index: true,
follow: true,
},
};
// JSON-LD Structured Data
const jsonLd = {
'@context': 'https://schema.org',
'@graph': [
generateSoftwareAppSchema(
'PayPal QR Code Generator',
'Generate QR codes that link to your PayPal.me page for instant payments.',
'/og-paypal-generator.png',
'FinanceApplication'
),
{
'@type': 'HowTo',
name: 'How to Create a PayPal QR Code',
description: 'Create a QR code for receiving PayPal payments.',
step: [
{
'@type': 'HowToStep',
position: 1,
name: 'Enter Username',
text: 'Type your PayPal.me username (the part after paypal.me/).',
},
{
'@type': 'HowToStep',
position: 2,
name: 'Set Amount (Optional)',
text: 'Enter a pre-filled amount and currency for fixed payments.',
},
{
'@type': 'HowToStep',
position: 3,
name: 'Customize Design',
text: 'Choose PayPal brand colors and add a frame like "Pay Now" or "Tip Me".',
},
{
'@type': 'HowToStep',
position: 4,
name: 'Download QR Code',
text: 'Download your high-quality QR code in PNG or SVG format.',
},
{
'@type': 'HowToStep',
position: 5,
name: 'Share',
text: 'Print it on invoices, display at your shop, or share digitally.',
},
],
totalTime: 'PT30S',
},
generateFaqSchema({
'How does the PayPal QR code work?': {
question: 'How does the PayPal QR code work?',
answer: 'When scanned, it opens the PayPal app or website with your PayPal.me link. If you set an amount, it will be pre-filled for the payer.',
},
'Do I need a PayPal Business account?': {
question: 'Do I need a PayPal Business account?',
answer: 'No. Any PayPal account with a PayPal.me link can use this generator. Personal accounts work fine for tips and donations.',
},
'Is there a fee for using the QR code?': {
question: 'Is there a fee for using the QR code?',
answer: 'This generator is 100% free. PayPal may charge their standard transaction fees when you receive payments.',
},
'Can I change the amount later?': {
question: 'Can I change the amount later?',
answer: 'No, this is a static QR code. The amount is encoded permanently. For variable amounts, leave the amount field empty.',
},
'What currencies are supported?': {
question: 'What currencies are supported?',
answer: 'We support EUR, USD, GBP, and CHF. PayPal handles currency conversion automatically.',
},
}),
],
};
export default function PayPalQRCodePage() {
return (
<>
<script
type="application/ld+json"
dangerouslySetInnerHTML={{ __html: JSON.stringify(jsonLd) }}
/>
<ToolBreadcrumb toolName="PayPal QR Code Generator" toolSlug="paypal-qr-code" />
<div className="min-h-screen" style={{ backgroundColor: '#EBEBDF' }}>
{/* HERO SECTION */}
<section className="relative pt-20 pb-20 lg:pt-32 lg:pb-32 px-4 sm:px-6 lg:px-8 overflow-hidden" style={{ backgroundColor: '#003087' }}>
<div className="absolute inset-0 opacity-10">
<svg className="w-full h-full" viewBox="0 0 100 100" preserveAspectRatio="none">
<path d="M0 100 C 20 0 50 0 100 100 Z" fill="url(#grad1)" />
<defs>
<linearGradient id="grad1" x1="0%" y1="0%" x2="100%" y2="0%">
<stop offset="0%" style={{ stopColor: 'white', stopOpacity: 1 }} />
<stop offset="100%" style={{ stopColor: 'white', stopOpacity: 0 }} />
</linearGradient>
</defs>
</svg>
</div>
<div className="max-w-7xl mx-auto grid lg:grid-cols-2 gap-12 items-center relative z-10">
<div className="text-center lg:text-left">
<div className="inline-flex items-center gap-2 px-3 py-1 rounded-full bg-white/10 text-white/90 text-sm font-medium mb-6 backdrop-blur-sm border border-white/10 hover:bg-white/20 transition-colors cursor-default">
<span className="flex h-2 w-2 relative">
<span className="animate-ping absolute inline-flex h-full w-full rounded-full bg-sky-400 opacity-75"></span>
<span className="relative inline-flex rounded-full h-2 w-2 bg-sky-400"></span>
</span>
Free Tool — No Signup Required
</div>
<h1 className="text-4xl md:text-5xl lg:text-6xl font-extrabold text-white tracking-tight leading-tight mb-6">
Accept Payments with <br className="hidden lg:block" />
<span className="text-transparent bg-clip-text bg-gradient-to-r from-sky-300 to-blue-200">PayPal QR Codes</span>
</h1>
<p className="text-lg md:text-xl text-blue-100 max-w-2xl mx-auto lg:mx-0 mb-8 leading-relaxed">
Let customers pay you by scanning. Perfect for tips, donations, and invoices.
<strong className="text-white block sm:inline mt-2 sm:mt-0"> Instant payments.</strong>
</p>
<div className="flex flex-wrap justify-center lg:justify-start gap-4 text-sm font-medium text-white/80">
<div className="flex items-center gap-2 bg-white/5 px-4 py-2.5 rounded-xl border border-white/5 backdrop-blur-sm">
<CreditCard className="w-4 h-4 text-sky-300" />
PayPal.me Links
</div>
<div className="flex items-center gap-2 bg-white/5 px-4 py-2.5 rounded-xl border border-white/5 backdrop-blur-sm">
<Zap className="w-4 h-4 text-amber-300" />
Pre-fill Amount
</div>
<div className="flex items-center gap-2 bg-white/5 px-4 py-2.5 rounded-xl border border-white/5 backdrop-blur-sm">
<Shield className="w-4 h-4 text-emerald-300" />
Secure Payments
</div>
</div>
</div>
{/* Visual Abstract */}
<div className="hidden lg:flex relative items-center justify-center min-h-[400px]">
<div className="absolute w-[500px] h-[500px] bg-blue-500/30 rounded-full blur-[100px] -top-20 -right-20 animate-pulse" />
<div className="relative w-80 h-96 bg-white/5 backdrop-blur-xl border border-white/20 rounded-3xl shadow-2xl flex flex-col items-center justify-center p-8 transform rotate-3 hover:rotate-0 transition-all duration-700 group">
<div className="absolute inset-0 bg-gradient-to-br from-white/10 to-transparent rounded-3xl" />
{/* Payment Card Mock */}
<div className="w-full bg-gradient-to-br from-[#0070BA] to-[#003087] rounded-xl shadow-lg p-4 mb-6 relative overflow-hidden text-white">
<div className="flex justify-between items-start mb-3">
<Banknote className="w-6 h-6 opacity-80" />
<div className="bg-white/20 px-2 py-1 rounded text-xs">EUR</div>
</div>
<div className="text-2xl font-bold tracking-wider">€25.00</div>
<div className="text-xs opacity-70 mt-1">Payment Request</div>
</div>
<div className="w-48 h-48 bg-white rounded-xl p-2 shadow-inner relative overflow-hidden flex items-center justify-center">
<QRCodeSVG value="https://www.qrmaster.net" size={170} fgColor="#003087" level="Q" />
</div>
{/* Floating Badge */}
<div className="absolute -bottom-6 -left-6 bg-white py-3 px-5 rounded-xl shadow-xl flex items-center gap-3 transform transition-transform hover:scale-105 duration-300">
<div className="bg-blue-100 p-2 rounded-full">
<DollarSign className="w-5 h-5 text-[#003087]" />
</div>
<div className="text-left">
<div className="text-[10px] text-slate-400 font-bold uppercase tracking-wider">PayPal</div>
<div className="text-sm font-bold text-slate-900">Ready</div>
</div>
</div>
</div>
</div>
</div>
</section>
{/* GENERATOR SECTION */}
<section className="py-12 px-4 sm:px-6 lg:px-8 -mt-8">
<PayPalGenerator />
</section>
{/* HOW IT WORKS */}
<section className="py-16 px-4 sm:px-6 lg:px-8 bg-white">
<div className="max-w-4xl mx-auto">
<h2 className="text-3xl font-bold text-slate-900 text-center mb-12">
How PayPal QR Codes Work
</h2>
<div className="grid md:grid-cols-3 lg:grid-cols-5 gap-8">
<article className="text-center">
<div className="w-12 h-12 rounded-2xl bg-[#003087]/10 flex items-center justify-center mx-auto mb-4">
<CreditCard className="w-6 h-6 text-[#003087]" />
</div>
<h3 className="font-bold text-slate-900 mb-2">1. Username</h3>
<p className="text-slate-600 text-xs leading-relaxed">Enter your PayPal.me username.</p>
</article>
<article className="text-center">
<div className="w-12 h-12 rounded-2xl bg-[#003087]/10 flex items-center justify-center mx-auto mb-4">
<DollarSign className="w-6 h-6 text-[#003087]" />
</div>
<h3 className="font-bold text-slate-900 mb-2">2. Amount</h3>
<p className="text-slate-600 text-xs leading-relaxed">Optional: Set a fixed payment amount.</p>
</article>
<article className="text-center">
<div className="w-12 h-12 rounded-2xl bg-[#003087]/10 flex items-center justify-center mx-auto mb-4">
<Sparkles className="w-6 h-6 text-[#003087]" />
</div>
<h3 className="font-bold text-slate-900 mb-2">3. Design</h3>
<p className="text-slate-600 text-xs leading-relaxed">Pick colors and add a frame.</p>
</article>
<article className="text-center">
<div className="w-12 h-12 rounded-2xl bg-[#003087]/10 flex items-center justify-center mx-auto mb-4">
<Download className="w-6 h-6 text-[#003087]" />
</div>
<h3 className="font-bold text-slate-900 mb-2">4. Download</h3>
<p className="text-slate-600 text-xs leading-relaxed">Save as PNG or SVG file.</p>
</article>
<article className="text-center">
<div className="w-12 h-12 rounded-2xl bg-[#003087]/10 flex items-center justify-center mx-auto mb-4">
<Share2 className="w-6 h-6 text-[#003087]" />
</div>
<h3 className="font-bold text-slate-900 mb-2">5. Share</h3>
<p className="text-slate-600 text-xs leading-relaxed">Print or share to receive payments.</p>
</article>
</div>
</div>
</section>
{/* RELATED TOOLS */}
<RelatedTools />
{/* FAQ SECTION */}
<section className="py-16 px-4 sm:px-6 lg:px-8" style={{ backgroundColor: '#EBEBDF' }}>
<div className="max-w-3xl mx-auto">
<h2 className="text-3xl font-bold text-slate-900 text-center mb-4">
Frequently Asked Questions
</h2>
<p className="text-slate-600 text-center mb-10">
Common questions about PayPal QR codes.
</p>
<div className="space-y-4">
<FaqItem
question="How does the PayPal QR code work?"
answer="When scanned, it opens the PayPal app or website with your PayPal.me link. If you set an amount, it will be pre-filled for the payer."
/>
<FaqItem
question="Do I need a PayPal Business account?"
answer="No. Any PayPal account with a PayPal.me link can use this generator. Personal accounts work fine for tips and donations."
/>
<FaqItem
question="Is there a fee for using the QR code?"
answer="This generator is 100% free. PayPal may charge their standard transaction fees when you receive payments."
/>
<FaqItem
question="Can I change the amount later?"
answer="No, this is a static QR code. The amount is encoded permanently. For variable amounts, leave the amount field empty."
/>
<FaqItem
question="What if I don't have a PayPal.me link?"
answer="You can create one for free in your PayPal account settings. Go to paypal.me to set up your personalized link."
/>
</div>
</div>
</section>
</div>
</>
);
}
function FaqItem({ question, answer }: { question: string; answer: string }) {
return (
<details className="group bg-white rounded-xl shadow-sm border border-slate-200 overflow-hidden">
<summary className="flex items-center justify-between p-5 cursor-pointer list-none text-slate-900 font-semibold hover:bg-slate-50 transition-colors">
{question}
<span className="transition group-open:rotate-180 text-slate-400">
<svg fill="none" height="20" stroke="currentColor" strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" viewBox="0 0 24 24" width="20">
<path d="M6 9l6 6 6-6" />
</svg>
</span>
</summary>
<div className="text-slate-600 px-5 pb-5 pt-0 leading-relaxed text-sm">
{answer}
</div>
</details>
);
}
function Sparkles({ className }: { className?: string }) {
return (
<svg className={className} fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={2}>
<path strokeLinecap="round" strokeLinejoin="round" d="M5 3v4M3 5h4M6 17v4m-2-2h4m5-16l2.286 6.857L21 12l-5.714 2.143L13 21l-2.286-6.857L5 12l5.714-2.143L13 3z" />
</svg>
);
}
import React from 'react';
import type { Metadata } from 'next';
import PayPalGenerator from './PayPalGenerator';
import { CreditCard, Shield, Zap, Smartphone, DollarSign, Download, Share2, Banknote } from 'lucide-react';
import { QRCodeSVG } from 'qrcode.react';
import { ToolBreadcrumb } from '@/components/seo/BreadcrumbSchema';
import { RelatedTools } from '@/components/marketing/RelatedTools';
import { generateSoftwareAppSchema, generateFaqSchema } from '@/lib/schema-utils';
// SEO Optimized Metadata
export const metadata: Metadata = {
title: {
absolute: 'Free PayPal QR Code Generator | Accept Payments Instantly | QR Master',
},
description: 'Create a QR code for your PayPal.me link. PayPal QR Code erstellen. Receive payments instantly. Support tips, donations, and fixed amounts.',
keywords: ['paypal qr code', 'paypal.me qr generator', 'payment qr code', 'accept payments qr', 'paypal qr generator', 'tip qr code', 'donation qr code', 'paypal qr code erstellen', 'zahlungs qr code', 'spenden qr code', 'paypal bezahlen qr'],
alternates: {
canonical: 'https://www.qrmaster.net/tools/paypal-qr-code',
},
openGraph: {
title: 'Free PayPal QR Code Generator | QR Master',
description: 'Generate QR codes for PayPal payments. Perfect for tips, donations, and invoices.',
type: 'website',
url: 'https://www.qrmaster.net/tools/paypal-qr-code',
images: [{ url: '/og-paypal-generator.png', width: 1200, height: 630 }],
},
twitter: {
card: 'summary_large_image',
title: 'Free PayPal QR Code Generator',
description: 'Create PayPal payment QR codes. Instant and free.',
},
robots: {
index: true,
follow: true,
},
};
// JSON-LD Structured Data
const jsonLd = {
'@context': 'https://schema.org',
'@graph': [
generateSoftwareAppSchema(
'PayPal QR Code Generator',
'Generate QR codes that link to your PayPal.me page for instant payments.',
'/og-paypal-generator.png',
'FinanceApplication'
),
{
'@type': 'HowTo',
name: 'How to Create a PayPal QR Code',
description: 'Create a QR code for receiving PayPal payments.',
step: [
{
'@type': 'HowToStep',
position: 1,
name: 'Enter Username',
text: 'Type your PayPal.me username (the part after paypal.me/).',
},
{
'@type': 'HowToStep',
position: 2,
name: 'Set Amount (Optional)',
text: 'Enter a pre-filled amount and currency for fixed payments.',
},
{
'@type': 'HowToStep',
position: 3,
name: 'Customize Design',
text: 'Choose PayPal brand colors and add a frame like "Pay Now" or "Tip Me".',
},
{
'@type': 'HowToStep',
position: 4,
name: 'Download QR Code',
text: 'Download your high-quality QR code in PNG or SVG format.',
},
{
'@type': 'HowToStep',
position: 5,
name: 'Share',
text: 'Print it on invoices, display at your shop, or share digitally.',
},
],
totalTime: 'PT30S',
},
generateFaqSchema({
'How does the PayPal QR code work?': {
question: 'How does the PayPal QR code work?',
answer: 'When scanned, it opens the PayPal app or website with your PayPal.me link. If you set an amount, it will be pre-filled for the payer.',
},
'Do I need a PayPal Business account?': {
question: 'Do I need a PayPal Business account?',
answer: 'No. Any PayPal account with a PayPal.me link can use this generator. Personal accounts work fine for tips and donations.',
},
'Is there a fee for using the QR code?': {
question: 'Is there a fee for using the QR code?',
answer: 'This generator is 100% free. PayPal may charge their standard transaction fees when you receive payments.',
},
'Can I change the amount later?': {
question: 'Can I change the amount later?',
answer: 'No, this is a static QR code. The amount is encoded permanently. For variable amounts, leave the amount field empty.',
},
'What currencies are supported?': {
question: 'What currencies are supported?',
answer: 'We support EUR, USD, GBP, and CHF. PayPal handles currency conversion automatically.',
},
}),
],
};
export default function PayPalQRCodePage() {
return (
<>
<script
type="application/ld+json"
dangerouslySetInnerHTML={{ __html: JSON.stringify(jsonLd) }}
/>
<ToolBreadcrumb toolName="PayPal QR Code Generator" toolSlug="paypal-qr-code" />
<div className="min-h-screen" style={{ backgroundColor: '#EBEBDF' }}>
{/* HERO SECTION */}
<section className="relative pt-20 pb-20 lg:pt-32 lg:pb-32 px-4 sm:px-6 lg:px-8 overflow-hidden" style={{ backgroundColor: '#003087' }}>
<div className="absolute inset-0 opacity-10">
<svg className="w-full h-full" viewBox="0 0 100 100" preserveAspectRatio="none">
<path d="M0 100 C 20 0 50 0 100 100 Z" fill="url(#grad1)" />
<defs>
<linearGradient id="grad1" x1="0%" y1="0%" x2="100%" y2="0%">
<stop offset="0%" style={{ stopColor: 'white', stopOpacity: 1 }} />
<stop offset="100%" style={{ stopColor: 'white', stopOpacity: 0 }} />
</linearGradient>
</defs>
</svg>
</div>
<div className="max-w-7xl mx-auto grid lg:grid-cols-2 gap-12 items-center relative z-10">
<div className="text-center lg:text-left">
<div className="inline-flex items-center gap-2 px-3 py-1 rounded-full bg-white/10 text-white/90 text-sm font-medium mb-6 backdrop-blur-sm border border-white/10 hover:bg-white/20 transition-colors cursor-default">
<span className="flex h-2 w-2 relative">
<span className="animate-ping absolute inline-flex h-full w-full rounded-full bg-sky-400 opacity-75"></span>
<span className="relative inline-flex rounded-full h-2 w-2 bg-sky-400"></span>
</span>
Free Tool — No Signup Required
</div>
<h1 className="text-4xl md:text-5xl lg:text-6xl font-extrabold text-white tracking-tight leading-tight mb-6">
Accept Payments with <br className="hidden lg:block" />
<span className="text-transparent bg-clip-text bg-gradient-to-r from-sky-300 to-blue-200">PayPal QR Codes</span>
</h1>
<p className="text-lg md:text-xl text-blue-100 max-w-2xl mx-auto lg:mx-0 mb-8 leading-relaxed">
Let customers pay you by scanning. Perfect for tips, donations, and invoices.
<strong className="text-white block sm:inline mt-2 sm:mt-0"> Instant payments.</strong>
</p>
<div className="flex flex-wrap justify-center lg:justify-start gap-4 text-sm font-medium text-white/80">
<div className="flex items-center gap-2 bg-white/5 px-4 py-2.5 rounded-xl border border-white/5 backdrop-blur-sm">
<CreditCard className="w-4 h-4 text-sky-300" />
PayPal.me Links
</div>
<div className="flex items-center gap-2 bg-white/5 px-4 py-2.5 rounded-xl border border-white/5 backdrop-blur-sm">
<Zap className="w-4 h-4 text-amber-300" />
Pre-fill Amount
</div>
<div className="flex items-center gap-2 bg-white/5 px-4 py-2.5 rounded-xl border border-white/5 backdrop-blur-sm">
<Shield className="w-4 h-4 text-emerald-300" />
Secure Payments
</div>
</div>
</div>
{/* Visual Abstract */}
<div className="hidden lg:flex relative items-center justify-center min-h-[400px]">
<div className="absolute w-[500px] h-[500px] bg-blue-500/30 rounded-full blur-[100px] -top-20 -right-20 animate-pulse" />
<div className="relative w-80 h-96 bg-white/5 backdrop-blur-xl border border-white/20 rounded-3xl shadow-2xl flex flex-col items-center justify-center p-8 transform rotate-3 hover:rotate-0 transition-all duration-700 group">
<div className="absolute inset-0 bg-gradient-to-br from-white/10 to-transparent rounded-3xl" />
{/* Payment Card Mock */}
<div className="w-full bg-gradient-to-br from-[#0070BA] to-[#003087] rounded-xl shadow-lg p-4 mb-6 relative overflow-hidden text-white">
<div className="flex justify-between items-start mb-3">
<Banknote className="w-6 h-6 opacity-80" />
<div className="bg-white/20 px-2 py-1 rounded text-xs">EUR</div>
</div>
<div className="text-2xl font-bold tracking-wider">€25.00</div>
<div className="text-xs opacity-70 mt-1">Payment Request</div>
</div>
<div className="w-48 h-48 bg-white rounded-xl p-2 shadow-inner relative overflow-hidden flex items-center justify-center">
<QRCodeSVG value="https://www.qrmaster.net" size={170} fgColor="#003087" level="Q" />
</div>
{/* Floating Badge */}
<div className="absolute -bottom-6 -left-6 bg-white py-3 px-5 rounded-xl shadow-xl flex items-center gap-3 transform transition-transform hover:scale-105 duration-300">
<div className="bg-blue-100 p-2 rounded-full">
<DollarSign className="w-5 h-5 text-[#003087]" />
</div>
<div className="text-left">
<div className="text-[10px] text-slate-400 font-bold uppercase tracking-wider">PayPal</div>
<div className="text-sm font-bold text-slate-900">Ready</div>
</div>
</div>
</div>
</div>
</div>
</section>
{/* GENERATOR SECTION */}
<section className="py-12 px-4 sm:px-6 lg:px-8 -mt-8">
<PayPalGenerator />
</section>
{/* HOW IT WORKS */}
<section className="py-16 px-4 sm:px-6 lg:px-8 bg-white">
<div className="max-w-4xl mx-auto">
<h2 className="text-3xl font-bold text-slate-900 text-center mb-12">
How PayPal QR Codes Work
</h2>
<div className="grid md:grid-cols-3 lg:grid-cols-5 gap-8">
<article className="text-center">
<div className="w-12 h-12 rounded-2xl bg-[#003087]/10 flex items-center justify-center mx-auto mb-4">
<CreditCard className="w-6 h-6 text-[#003087]" />
</div>
<h3 className="font-bold text-slate-900 mb-2">1. Username</h3>
<p className="text-slate-600 text-xs leading-relaxed">Enter your PayPal.me username.</p>
</article>
<article className="text-center">
<div className="w-12 h-12 rounded-2xl bg-[#003087]/10 flex items-center justify-center mx-auto mb-4">
<DollarSign className="w-6 h-6 text-[#003087]" />
</div>
<h3 className="font-bold text-slate-900 mb-2">2. Amount</h3>
<p className="text-slate-600 text-xs leading-relaxed">Optional: Set a fixed payment amount.</p>
</article>
<article className="text-center">
<div className="w-12 h-12 rounded-2xl bg-[#003087]/10 flex items-center justify-center mx-auto mb-4">
<Sparkles className="w-6 h-6 text-[#003087]" />
</div>
<h3 className="font-bold text-slate-900 mb-2">3. Design</h3>
<p className="text-slate-600 text-xs leading-relaxed">Pick colors and add a frame.</p>
</article>
<article className="text-center">
<div className="w-12 h-12 rounded-2xl bg-[#003087]/10 flex items-center justify-center mx-auto mb-4">
<Download className="w-6 h-6 text-[#003087]" />
</div>
<h3 className="font-bold text-slate-900 mb-2">4. Download</h3>
<p className="text-slate-600 text-xs leading-relaxed">Save as PNG or SVG file.</p>
</article>
<article className="text-center">
<div className="w-12 h-12 rounded-2xl bg-[#003087]/10 flex items-center justify-center mx-auto mb-4">
<Share2 className="w-6 h-6 text-[#003087]" />
</div>
<h3 className="font-bold text-slate-900 mb-2">5. Share</h3>
<p className="text-slate-600 text-xs leading-relaxed">Print or share to receive payments.</p>
</article>
</div>
</div>
</section>
{/* RELATED TOOLS */}
<RelatedTools />
{/* FAQ SECTION */}
<section className="py-16 px-4 sm:px-6 lg:px-8" style={{ backgroundColor: '#EBEBDF' }}>
<div className="max-w-3xl mx-auto">
<h2 className="text-3xl font-bold text-slate-900 text-center mb-4">
Frequently Asked Questions
</h2>
<p className="text-slate-600 text-center mb-10">
Common questions about PayPal QR codes.
</p>
<div className="space-y-4">
<FaqItem
question="How does the PayPal QR code work?"
answer="When scanned, it opens the PayPal app or website with your PayPal.me link. If you set an amount, it will be pre-filled for the payer."
/>
<FaqItem
question="Do I need a PayPal Business account?"
answer="No. Any PayPal account with a PayPal.me link can use this generator. Personal accounts work fine for tips and donations."
/>
<FaqItem
question="Is there a fee for using the QR code?"
answer="This generator is 100% free. PayPal may charge their standard transaction fees when you receive payments."
/>
<FaqItem
question="Can I change the amount later?"
answer="No, this is a static QR code. The amount is encoded permanently. For variable amounts, leave the amount field empty."
/>
<FaqItem
question="What if I don't have a PayPal.me link?"
answer="You can create one for free in your PayPal account settings. Go to paypal.me to set up your personalized link."
/>
</div>
</div>
</section>
</div>
</>
);
}
function FaqItem({ question, answer }: { question: string; answer: string }) {
return (
<details className="group bg-white rounded-xl shadow-sm border border-slate-200 overflow-hidden">
<summary className="flex items-center justify-between p-5 cursor-pointer list-none text-slate-900 font-semibold hover:bg-slate-50 transition-colors">
{question}
<span className="transition group-open:rotate-180 text-slate-400">
<svg fill="none" height="20" stroke="currentColor" strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" viewBox="0 0 24 24" width="20">
<path d="M6 9l6 6 6-6" />
</svg>
</span>
</summary>
<div className="text-slate-600 px-5 pb-5 pt-0 leading-relaxed text-sm">
{answer}
</div>
</details>
);
}
function Sparkles({ className }: { className?: string }) {
return (
<svg className={className} fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={2}>
<path strokeLinecap="round" strokeLinejoin="round" d="M5 3v4M3 5h4M6 17v4m-2-2h4m5-16l2.286 6.857L21 12l-5.714 2.143L13 21l-2.286-6.857L5 12l5.714-2.143L13 3z" />
</svg>
);
}

532
src/app/(main)/(marketing)/tools/sms-qr-code/SMSGenerator.tsx
View File

@@ -1,266 +1,266 @@
'use client';
import React, { useState, useRef } from 'react';
import Link from 'next/link';
import { QRCodeSVG } from 'qrcode.react';
import {
MessageSquare,
Download,
Check,
Sparkles,
Phone
} from 'lucide-react';
import { Button } from '@/components/ui/Button';
import { Input } from '@/components/ui/Input';
import { cn } from '@/lib/utils';
// Brand Colors
const BRAND = {
paleGrey: '#EBEBDF',
primary: '#ea580c', // Orange-600
primaryDark: '#c2410c', // Orange-700
};
// QR Color Options
const QR_COLORS = [
{ name: 'Classic Black', value: '#000000' },
{ name: 'Deep Blue', value: '#1E40AF' },
{ name: 'Violet', value: '#7C3AED' },
{ name: 'Teal', value: '#0D9488' },
{ name: 'Coral', value: '#F43F5E' },
{ name: 'Amber', value: '#D97706' },
{ name: 'Emerald', value: '#10B981' },
{ name: 'Rose', value: '#F43F5E' },
];
// Frame Options
const FRAME_OPTIONS = [
{ id: 'none', label: 'No Frame' },
{ id: 'scanme', label: 'Scan Me' },
{ id: 'sms', label: 'SMS Us' },
{ id: 'text', label: 'Text Us' },
];
export default function SMSGenerator() {
const [phone, setPhone] = useState('');
const [message, setMessage] = useState('');
const [qrColor, setQrColor] = useState(BRAND.primary);
const [frameType, setFrameType] = useState('none');
const qrRef = useRef<HTMLDivElement>(null);
// sms:number?body=message
const qrValue = `sms:${phone}?body=${encodeURIComponent(message)}`;
const handleDownload = async (format: 'png' | 'svg') => {
if (!qrRef.current) return;
try {
if (format === 'png') {
const { toPng } = await import('html-to-image');
const dataUrl = await toPng(qrRef.current, { cacheBust: true, pixelRatio: 3 });
const link = document.createElement('a');
link.download = `sms-qr-code.png`;
link.href = dataUrl;
link.click();
} else {
const svgData = qrRef.current.querySelector('svg')?.outerHTML;
if (svgData) {
const blob = new Blob([svgData], { type: 'image/svg+xml;charset=utf-8' });
const url = URL.createObjectURL(blob);
const link = document.createElement('a');
link.href = url;
link.download = `sms-qr-code.svg`;
link.click();
}
}
} catch (err) {
console.error('Download failed', err);
}
};
const getFrameLabel = () => {
const frame = FRAME_OPTIONS.find(f => f.id === frameType);
return frame?.id !== 'none' ? frame?.label : null;
};
return (
<div className="w-full max-w-5xl mx-auto px-4 md:px-6">
{/* Main Generator Card */}
<div className="bg-white rounded-3xl shadow-2xl shadow-slate-900/10 overflow-hidden border border-slate-100">
<div className="grid lg:grid-cols-2">
{/* LEFT: Input Section */}
<div className="p-6 md:p-8 lg:p-10 space-y-8 border-r border-slate-100">
{/* SMS Details */}
<div className="space-y-6">
<h2 className="text-lg font-bold text-slate-900 flex items-center gap-2">
<MessageSquare className="w-5 h-5 text-orange-600" />
SMS Details
</h2>
<div className="space-y-4">
<div>
<label className="block text-sm font-medium text-slate-700 mb-2">Phone Number</label>
<Input
placeholder="+1 555 123 4567"
value={phone}
onChange={(e) => setPhone(e.target.value)}
className="h-12 text-base rounded-xl border-slate-200 focus:border-orange-600 focus:ring-orange-600"
/>
</div>
<div>
<label className="block text-sm font-medium text-slate-700 mb-2">Pre-filled Message</label>
<textarea
className="w-full h-32 p-4 border border-slate-200 rounded-xl focus:outline-none focus:ring-2 focus:ring-orange-600 resize-none text-slate-800 placeholder:text-slate-400"
placeholder="I'm interested in..."
value={message}
onChange={(e) => setMessage(e.target.value)}
maxLength={160}
/>
<p className="text-xs text-slate-600 mt-2 text-right">{message.length}/160</p>
</div>
</div>
</div>
<div className="border-t border-slate-100"></div>
{/* Design Options */}
<div className="space-y-6">
<h2 className="text-lg font-bold text-slate-900 flex items-center gap-2">
<Sparkles className="w-5 h-5 text-orange-600" />
Design Options
</h2>
{/* Color Picker */}
<div>
<label className="block text-sm font-medium text-slate-700 mb-3">QR Code Color</label>
<div className="flex flex-wrap gap-2">
{QR_COLORS.map((c) => (
<button
key={c.name}
onClick={() => setQrColor(c.value)}
className={cn(
"w-9 h-9 rounded-full border-2 flex items-center justify-center transition-all hover:scale-110",
qrColor === c.value ? "border-slate-900 ring-2 ring-offset-2 ring-slate-200" : "border-white shadow-md"
)}
style={{ backgroundColor: c.value }}
aria-label={`Select ${c.name}`}
title={c.name}
>
{qrColor === c.value && <Check className="w-4 h-4 text-white" strokeWidth={3} />}
</button>
))}
</div>
</div>
{/* Frame Selector */}
<div>
<label className="block text-sm font-medium text-slate-700 mb-3">Frame Label</label>
<div className="grid grid-cols-2 sm:grid-cols-4 gap-2">
{FRAME_OPTIONS.map((frame) => (
<button
key={frame.id}
onClick={() => setFrameType(frame.id)}
className={cn(
"py-2.5 px-3 rounded-lg text-sm font-medium transition-all border",
frameType === frame.id
? "bg-orange-600 text-white border-orange-600"
: "bg-slate-50 text-slate-600 border-slate-200 hover:border-slate-300"
)}
>
{frame.label}
</button>
))}
</div>
</div>
</div>
</div>
{/* RIGHT: Preview Section */}
<div className="p-6 md:p-8 lg:p-10 flex flex-col items-center justify-center" style={{ backgroundColor: BRAND.paleGrey }}>
{/* QR Card with Frame */}
<div
ref={qrRef}
className="bg-white rounded-3xl shadow-xl p-6 sm:p-8 flex flex-col items-center w-full max-w-[320px]"
>
{/* Frame Label */}
{getFrameLabel() && (
<div
className="mb-5 px-8 py-2.5 rounded-full text-white font-bold text-sm tracking-widest uppercase shadow-md"
style={{ backgroundColor: qrColor }}
>
{getFrameLabel()}
</div>
)}
{/* QR Code */}
<div className="bg-white">
<QRCodeSVG
value={phone ? qrValue : "sms:+123456789?body=Hello"}
size={240}
level="M"
includeMargin={false}
fgColor={qrColor}
/>
</div>
{/* Info Preview */}
<div className="mt-6 text-center max-w-[260px]">
<h3 className="font-bold text-slate-900 text-lg flex items-center justify-center gap-2 truncate">
<Phone className="w-4 h-4 text-slate-400 shrink-0" />
<span className="truncate">{phone || 'Number'}</span>
</h3>
<div className="flex items-center justify-center gap-2 mt-2 text-slate-600 text-xs">
<MessageSquare className="w-3 h-3" />
<span className="italic truncate">{message || 'Your message...'}</span>
</div>
</div>
</div>
{/* Download Buttons */}
<div className="flex items-center gap-3 mt-8">
<Button
onClick={() => handleDownload('png')}
className="bg-orange-600 hover:bg-orange-700 text-white shadow-lg"
>
<Download className="w-4 h-4 mr-2" />
Download PNG
</Button>
<Button
onClick={() => handleDownload('svg')}
variant="outline"
className="border-slate-300 hover:bg-white"
>
<Download className="w-4 h-4 mr-2" />
SVG
</Button>
</div>
<p className="text-xs text-slate-600 mt-4 text-center">
Opens the messaging app with text pre-filled.
</p>
</div>
</div>
</div>
{/* Upsell Banner */}
<div className="mt-8 bg-gradient-to-r from-orange-600 to-orange-700 rounded-2xl p-6 flex flex-col sm:flex-row items-center justify-between gap-4">
<div className="text-white text-center sm:text-left">
<h3 className="font-bold text-lg">Use SMS for marketing?</h3>
<p className="text-white/80 text-sm mt-1">
Dynamic QR Codes offer better tracking and allow you to change the campaign message later.
</p>
</div>
<Link href="/signup">
<Button className="bg-white text-orange-700 hover:bg-slate-100 shrink-0 shadow-lg">
Try Dynamic Codes
</Button>
</Link>
</div>
</div>
);
}
'use client';
import React, { useState, useRef } from 'react';
import Link from 'next/link';
import { QRCodeSVG } from 'qrcode.react';
import {
MessageSquare,
Download,
Check,
Sparkles,
Phone
} from 'lucide-react';
import { Button } from '@/components/ui/Button';
import { Input } from '@/components/ui/Input';
import { cn } from '@/lib/utils';
// Brand Colors
const BRAND = {
paleGrey: '#EBEBDF',
primary: '#ea580c', // Orange-600
primaryDark: '#c2410c', // Orange-700
};
// QR Color Options
const QR_COLORS = [
{ name: 'Classic Black', value: '#000000' },
{ name: 'Deep Blue', value: '#1E40AF' },
{ name: 'Violet', value: '#7C3AED' },
{ name: 'Teal', value: '#0D9488' },
{ name: 'Coral', value: '#F43F5E' },
{ name: 'Amber', value: '#D97706' },
{ name: 'Emerald', value: '#10B981' },
{ name: 'Rose', value: '#F43F5E' },
];
// Frame Options
const FRAME_OPTIONS = [
{ id: 'none', label: 'No Frame' },
{ id: 'scanme', label: 'Scan Me' },
{ id: 'sms', label: 'SMS Us' },
{ id: 'text', label: 'Text Us' },
];
export default function SMSGenerator() {
const [phone, setPhone] = useState('');
const [message, setMessage] = useState('');
const [qrColor, setQrColor] = useState(BRAND.primary);
const [frameType, setFrameType] = useState('none');
const qrRef = useRef<HTMLDivElement>(null);
// sms:number?body=message
const qrValue = `sms:${phone}?body=${encodeURIComponent(message)}`;
const handleDownload = async (format: 'png' | 'svg') => {
if (!qrRef.current) return;
try {
if (format === 'png') {
const { toPng } = await import('html-to-image');
const dataUrl = await toPng(qrRef.current, { cacheBust: true, pixelRatio: 3 });
const link = document.createElement('a');
link.download = `sms-qr-code.png`;
link.href = dataUrl;
link.click();
} else {
const svgData = qrRef.current.querySelector('svg')?.outerHTML;
if (svgData) {
const blob = new Blob([svgData], { type: 'image/svg+xml;charset=utf-8' });
const url = URL.createObjectURL(blob);
const link = document.createElement('a');
link.href = url;
link.download = `sms-qr-code.svg`;
link.click();
}
}
} catch (err) {
console.error('Download failed', err);
}
};
const getFrameLabel = () => {
const frame = FRAME_OPTIONS.find(f => f.id === frameType);
return frame?.id !== 'none' ? frame?.label : null;
};
return (
<div className="w-full max-w-5xl mx-auto px-4 md:px-6">
{/* Main Generator Card */}
<div className="bg-white rounded-3xl shadow-2xl shadow-slate-900/10 overflow-hidden border border-slate-100">
<div className="grid lg:grid-cols-2">
{/* LEFT: Input Section */}
<div className="p-6 md:p-8 lg:p-10 space-y-8 border-r border-slate-100">
{/* SMS Details */}
<div className="space-y-6">
<h2 className="text-lg font-bold text-slate-900 flex items-center gap-2">
<MessageSquare className="w-5 h-5 text-orange-600" />
SMS Details
</h2>
<div className="space-y-4">
<div>
<label className="block text-sm font-medium text-slate-700 mb-2">Phone Number</label>
<Input
placeholder="+1 555 123 4567"
value={phone}
onChange={(e) => setPhone(e.target.value)}
className="h-12 text-base rounded-xl border-slate-200 focus:border-orange-600 focus:ring-orange-600"
/>
</div>
<div>
<label className="block text-sm font-medium text-slate-700 mb-2">Pre-filled Message</label>
<textarea
className="w-full h-32 p-4 border border-slate-200 rounded-xl focus:outline-none focus:ring-2 focus:ring-orange-600 resize-none text-slate-800 placeholder:text-slate-400"
placeholder="I'm interested in..."
value={message}
onChange={(e) => setMessage(e.target.value)}
maxLength={160}
/>
<p className="text-xs text-slate-600 mt-2 text-right">{message.length}/160</p>
</div>
</div>
</div>
<div className="border-t border-slate-100"></div>
{/* Design Options */}
<div className="space-y-6">
<h2 className="text-lg font-bold text-slate-900 flex items-center gap-2">
<Sparkles className="w-5 h-5 text-orange-600" />
Design Options
</h2>
{/* Color Picker */}
<div>
<label className="block text-sm font-medium text-slate-700 mb-3">QR Code Color</label>
<div className="flex flex-wrap gap-2">
{QR_COLORS.map((c) => (
<button
key={c.name}
onClick={() => setQrColor(c.value)}
className={cn(
"w-9 h-9 rounded-full border-2 flex items-center justify-center transition-all hover:scale-110",
qrColor === c.value ? "border-slate-900 ring-2 ring-offset-2 ring-slate-200" : "border-white shadow-md"
)}
style={{ backgroundColor: c.value }}
aria-label={`Select ${c.name}`}
title={c.name}
>
{qrColor === c.value && <Check className="w-4 h-4 text-white" strokeWidth={3} />}
</button>
))}
</div>
</div>
{/* Frame Selector */}
<div>
<label className="block text-sm font-medium text-slate-700 mb-3">Frame Label</label>
<div className="grid grid-cols-2 sm:grid-cols-4 gap-2">
{FRAME_OPTIONS.map((frame) => (
<button
key={frame.id}
onClick={() => setFrameType(frame.id)}
className={cn(
"py-2.5 px-3 rounded-lg text-sm font-medium transition-all border",
frameType === frame.id
? "bg-orange-600 text-white border-orange-600"
: "bg-slate-50 text-slate-600 border-slate-200 hover:border-slate-300"
)}
>
{frame.label}
</button>
))}
</div>
</div>
</div>
</div>
{/* RIGHT: Preview Section */}
<div className="p-6 md:p-8 lg:p-10 flex flex-col items-center justify-center" style={{ backgroundColor: BRAND.paleGrey }}>
{/* QR Card with Frame */}
<div
ref={qrRef}
className="bg-white rounded-3xl shadow-xl p-6 sm:p-8 flex flex-col items-center w-full max-w-[320px]"
>
{/* Frame Label */}
{getFrameLabel() && (
<div
className="mb-5 px-8 py-2.5 rounded-full text-white font-bold text-sm tracking-widest uppercase shadow-md"
style={{ backgroundColor: qrColor }}
>
{getFrameLabel()}
</div>
)}
{/* QR Code */}
<div className="bg-white">
<QRCodeSVG
value={phone ? qrValue : "sms:+123456789?body=Hello"}
size={240}
level="M"
includeMargin={false}
fgColor={qrColor}
/>
</div>
{/* Info Preview */}
<div className="mt-6 text-center max-w-[260px]">
<h3 className="font-bold text-slate-900 text-lg flex items-center justify-center gap-2 truncate">
<Phone className="w-4 h-4 text-slate-400 shrink-0" />
<span className="truncate">{phone || 'Number'}</span>
</h3>
<div className="flex items-center justify-center gap-2 mt-2 text-slate-600 text-xs">
<MessageSquare className="w-3 h-3" />
<span className="italic truncate">{message || 'Your message...'}</span>
</div>
</div>
</div>
{/* Download Buttons */}
<div className="flex items-center gap-3 mt-8">
<Button
onClick={() => handleDownload('png')}
className="bg-orange-600 hover:bg-orange-700 text-white shadow-lg"
>
<Download className="w-4 h-4 mr-2" />
Download PNG
</Button>
<Button
onClick={() => handleDownload('svg')}
variant="outline"
className="border-slate-300 hover:bg-white"
>
<Download className="w-4 h-4 mr-2" />
SVG
</Button>
</div>
<p className="text-xs text-slate-600 mt-4 text-center">
Opens the messaging app with text pre-filled.
</p>
</div>
</div>
</div>
{/* Upsell Banner */}
<div className="mt-8 bg-gradient-to-r from-orange-600 to-orange-700 rounded-2xl p-6 flex flex-col sm:flex-row items-center justify-between gap-4">
<div className="text-white text-center sm:text-left">
<h3 className="font-bold text-lg">Use SMS for marketing?</h3>
<p className="text-white/80 text-sm mt-1">
Dynamic QR Codes offer better tracking and allow you to change the campaign message later.
</p>
</div>
<Link href="/signup">
<Button className="bg-white text-orange-700 hover:bg-slate-100 shrink-0 shadow-lg">
Try Dynamic Codes
</Button>
</Link>
</div>
</div>
);
}

582
src/app/(main)/(marketing)/tools/sms-qr-code/page.tsx
View File

@@ -1,291 +1,291 @@
import React from 'react';
import type { Metadata } from 'next';
import SMSGenerator from './SMSGenerator';
import { MessageSquare, Shield, Zap, Smartphone, Send } from 'lucide-react';
import { QRCodeSVG } from 'qrcode.react';
import { ToolBreadcrumb } from '@/components/seo/BreadcrumbSchema';
import { RelatedTools } from '@/components/marketing/RelatedTools';
import { generateSoftwareAppSchema, generateFaqSchema } from '@/lib/schema-utils';
// SEO Optimized Metadata
export const metadata: Metadata = {
title: {
absolute: 'Free SMS QR Code Generator | SMS QR Code Erstellen | QR Master',
},
description: 'Create a QR code to send an SMS text message instantly. SMS QR Code erstellen mit vorgefertigtem Text. Free, private, and works on all phones.',
keywords: ['sms qr code', 'text message qr code', 'send sms qr', 'sms generator', 'text qr', 'sms qr code erstellen', 'qr code für sms', 'nachricht qr code', 'sms vorlage qr code', 'sms versenden qr'],
alternates: {
canonical: 'https://www.qrmaster.net/tools/sms-qr-code',
},
openGraph: {
title: 'Free SMS QR Code Generator | QR Master',
description: 'Generate QR codes for instant SMS messages. Pre-fill text and number.',
type: 'website',
url: 'https://www.qrmaster.net/tools/sms-qr-code',
images: [{ url: '/og-sms-generator.png', width: 1200, height: 630 }],
},
twitter: {
card: 'summary_large_image',
title: 'Free SMS QR Code Generator',
description: 'Create QR codes to send texts. Instant and free.',
},
robots: {
index: true,
follow: true,
},
};
// JSON-LD Structured Data
const jsonLd = {
'@context': 'https://schema.org',
'@graph': [
generateSoftwareAppSchema(
'SMS QR Code Generator',
'Generate QR codes that open the user\'s SMS app with a pre-filled message.',
'/og-sms-generator.png'
),
{
'@type': 'HowTo',
name: 'How to Create an SMS QR Code',
description: 'Create a QR code that prepares a text message.',
step: [
{
'@type': 'HowToStep',
position: 1,
name: 'Enter Phone Number',
text: 'Type the destination phone number.',
},
{
'@type': 'HowToStep',
position: 2,
name: 'Enter Message',
text: 'Type the message you want pre-filled (e.g., "Send me info!").',
},
{
'@type': 'HowToStep',
position: 3,
name: 'Download',
text: 'Save the QR code and share it.',
},
],
totalTime: 'PT30S',
},
generateFaqSchema({
'Does the text send automatically?': {
question: 'Does the text send automatically?',
answer: 'No. The QR code opens the messaging app with the text typed out. The user must simply tap "Send". This is a security feature of all smartphones.',
},
'Is there a cost?': {
question: 'Is there a cost?',
answer: 'Generating the code is free. Standard SMS rates apply for the person sending the text message, depending on their carrier plan.',
},
'Can I change the message later?': {
question: 'Can I change the message later?',
answer: 'No. Static QR codes have the message embedded in them. To change the message, you need a new QR code.',
},
'What uses are there for SMS QR codes?': {
question: 'What uses are there for SMS QR codes?',
answer: 'They are great for SMS marketing opt-ins ("Text JOIN to 12345"), customer support requests, or voting via text.',
},
}),
],
};
export default function SMSQRCodePage() {
return (
<>
<script
type="application/ld+json"
dangerouslySetInnerHTML={{ __html: JSON.stringify(jsonLd) }}
/>
<ToolBreadcrumb toolName="SMS QR Code Generator" toolSlug="sms-qr-code" />
<div className="min-h-screen" style={{ backgroundColor: '#EBEBDF' }}>
{/* HERO SECTION */}
<section className="relative pt-20 pb-20 lg:pt-32 lg:pb-32 px-4 sm:px-6 lg:px-8 overflow-hidden" style={{ backgroundColor: '#ea580c' }}>
<div className="absolute inset-0 opacity-10">
<svg className="w-full h-full" viewBox="0 0 100 100" preserveAspectRatio="none">
<path d="M0 100 C 20 0 50 0 100 100 Z" fill="url(#grad1)" />
<defs>
<linearGradient id="grad1" x1="0%" y1="0%" x2="100%" y2="0%">
<stop offset="0%" style={{ stopColor: 'white', stopOpacity: 1 }} />
<stop offset="100%" style={{ stopColor: 'white', stopOpacity: 0 }} />
</linearGradient>
</defs>
</svg>
</div>
<div className="max-w-7xl mx-auto grid lg:grid-cols-2 gap-12 items-center relative z-10">
<div className="text-center lg:text-left">
<div className="inline-flex items-center gap-2 px-3 py-1 rounded-full bg-white/10 text-white/90 text-sm font-medium mb-6 backdrop-blur-sm border border-white/10 hover:bg-white/20 transition-colors cursor-default">
<span className="flex h-2 w-2 relative">
<span className="animate-ping absolute inline-flex h-full w-full rounded-full bg-amber-400 opacity-75"></span>
<span className="relative inline-flex rounded-full h-2 w-2 bg-amber-400"></span>
</span>
Free Tool — No Signup Required
</div>
<h1 className="text-4xl md:text-5xl lg:text-6xl font-extrabold text-white tracking-tight leading-tight mb-6">
Make Texting Easy with <br className="hidden lg:block" />
<span className="text-transparent bg-clip-text bg-gradient-to-r from-amber-200 to-orange-100">SMS QR Codes</span>
</h1>
<p className="text-lg md:text-xl text-orange-50 max-w-2xl mx-auto lg:mx-0 mb-8 leading-relaxed">
Let users send you a pre-written text with one scan. Ideal for opt-ins and support.
<strong className="text-white block sm:inline mt-2 sm:mt-0"> Universal compatibility.</strong>
</p>
<div className="flex flex-wrap justify-center lg:justify-start gap-4 text-sm font-medium text-white/80">
<div className="flex items-center gap-2 bg-white/5 px-4 py-2.5 rounded-xl border border-white/5 backdrop-blur-sm">
<MessageSquare className="w-4 h-4 text-amber-300" />
Pre-fill Texts
</div>
<div className="flex items-center gap-2 bg-white/5 px-4 py-2.5 rounded-xl border border-white/5 backdrop-blur-sm">
<Zap className="w-4 h-4 text-amber-300" />
Instant Open
</div>
<div className="flex items-center gap-2 bg-white/5 px-4 py-2.5 rounded-xl border border-white/5 backdrop-blur-sm">
<Shield className="w-4 h-4 text-amber-300" />
Zero Friction
</div>
</div>
</div>
{/* Visual Abstract */}
<div className="hidden lg:flex relative items-center justify-center min-h-[400px]">
<div className="absolute w-[500px] h-[500px] bg-orange-500/30 rounded-full blur-[100px] -top-20 -right-20 animate-pulse" />
<div className="relative w-80 h-96 bg-white/5 backdrop-blur-xl border border-white/20 rounded-3xl shadow-2xl flex flex-col items-center justify-center p-8 transform -rotate-3 hover:rotate-0 transition-all duration-700 group">
<div className="absolute inset-0 bg-gradient-to-br from-white/10 to-transparent rounded-3xl" />
<div className="w-full bg-white rounded-xl shadow-lg p-3 mb-6 relative overflow-hidden flex gap-3 items-center">
<div className="w-10 h-10 rounded-full bg-orange-100 flex items-center justify-center shrink-0">
<MessageSquare className="w-5 h-5 text-orange-600" />
</div>
<div className="bg-slate-100 rounded-2xl rounded-tl-none p-3 text-xs text-slate-600 w-full">
Hi, I want to join the club!
</div>
</div>
<div className="w-48 h-48 bg-white rounded-xl p-2 shadow-inner relative overflow-hidden flex items-center justify-center">
<QRCodeSVG value="https://www.qrmaster.net" size={170} fgColor="#0f172a" level="Q" />
</div>
{/* Floating Badge */}
<div className="absolute -bottom-6 -left-6 bg-white py-3 px-5 rounded-xl shadow-xl flex items-center gap-3 transform transition-transform hover:scale-105 duration-300">
<div className="bg-orange-100 p-2 rounded-full">
<Send className="w-5 h-5 text-orange-600" />
</div>
<div className="text-left">
<div className="text-[10px] text-slate-400 font-bold uppercase tracking-wider">SMS</div>
<div className="text-sm font-bold text-slate-900">Sent!</div>
</div>
</div>
</div>
</div>
</div>
</section>
{/* GENERATOR SECTION */}
<section className="py-12 px-4 sm:px-6 lg:px-8 -mt-8">
<SMSGenerator />
</section>
{/* HOW IT WORKS */}
<section className="py-16 px-4 sm:px-6 lg:px-8 bg-white">
<div className="max-w-4xl mx-auto">
<h2 className="text-3xl font-bold text-slate-900 text-center mb-12">
How SMS QR Codes Work
</h2>
<div className="grid md:grid-cols-3 gap-8">
<article className="text-center">
<div className="w-14 h-14 rounded-2xl bg-orange-50 flex items-center justify-center mx-auto mb-4">
<MessageSquare className="w-7 h-7 text-orange-600" />
</div>
<h3 className="font-bold text-slate-900 mb-2">1. Compose</h3>
<p className="text-slate-600 text-sm">
Enter the number and the message you want your customers to send.
</p>
</article>
<article className="text-center">
<div className="w-14 h-14 rounded-2xl bg-orange-50 flex items-center justify-center mx-auto mb-4">
<Smartphone className="w-7 h-7 text-orange-600" />
</div>
<h3 className="font-bold text-slate-900 mb-2">2. Scan</h3>
<p className="text-slate-600 text-sm">
User scans the code. The messages app opens automatically.
</p>
</article>
<article className="text-center">
<div className="w-14 h-14 rounded-2xl bg-orange-50 flex items-center justify-center mx-auto mb-4">
<Send className="w-7 h-7 text-orange-600" />
</div>
<h3 className="font-bold text-slate-900 mb-2">3. Send</h3>
<p className="text-slate-600 text-sm">
User hits "Send" to trigger the text. Perfect for quick sign-ups or votes.
</p>
</article>
</div>
</div>
</section>
{/* RELATED TOOLS */}
<RelatedTools />
{/* FAQ SECTION */}
<section className="py-16 px-4 sm:px-6 lg:px-8" style={{ backgroundColor: '#EBEBDF' }}>
<div className="max-w-3xl mx-auto">
<h2 className="text-3xl font-bold text-slate-900 text-center mb-4">
Frequently Asked Questions
</h2>
<p className="text-slate-600 text-center mb-10">
Common questions about SMS QR codes.
</p>
<div className="space-y-4">
<FaqItem
question="Does the user need an internet connection?"
answer="No. The QR code contains all the info offline. However, the user needs a cellular signal to actually send the SMS message."
/>
<FaqItem
question="Is it free for the user to send?"
answer="It depends on their mobile plan. Standard SMS rates apply, though most modern plans include unlimited texting."
/>
<FaqItem
question="Can I use shortcodes?"
answer="Yes. You can enter a shortcode (e.g. 55555) in the phone number field instead of a regular number."
/>
<FaqItem
question="Is my phone number visible?"
answer="Yes. Since the user is sending a text to you, they will see your number (or shortcode) in their messaging app."
/>
</div>
</div>
</section>
</div>
</>
);
}
function FaqItem({ question, answer }: { question: string; answer: string }) {
return (
<details className="group bg-white rounded-xl shadow-sm border border-slate-200 overflow-hidden">
<summary className="flex items-center justify-between p-5 cursor-pointer list-none text-slate-900 font-semibold hover:bg-slate-50 transition-colors">
{question}
<span className="transition group-open:rotate-180 text-slate-400">
<svg fill="none" height="20" stroke="currentColor" strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" viewBox="0 0 24 24" width="20">
<path d="M6 9l6 6 6-6" />
</svg>
</span>
</summary>
<div className="text-slate-600 px-5 pb-5 pt-0 leading-relaxed text-sm">
{answer}
</div>
</details>
);
}
import React from 'react';
import type { Metadata } from 'next';
import SMSGenerator from './SMSGenerator';
import { MessageSquare, Shield, Zap, Smartphone, Send } from 'lucide-react';
import { QRCodeSVG } from 'qrcode.react';
import { ToolBreadcrumb } from '@/components/seo/BreadcrumbSchema';
import { RelatedTools } from '@/components/marketing/RelatedTools';
import { generateSoftwareAppSchema, generateFaqSchema } from '@/lib/schema-utils';
// SEO Optimized Metadata
export const metadata: Metadata = {
title: {
absolute: 'Free SMS QR Code Generator | SMS QR Code Erstellen | QR Master',
},
description: 'Create a QR code to send an SMS text message instantly. SMS QR Code erstellen mit vorgefertigtem Text. Free, private, and works on all phones.',
keywords: ['sms qr code', 'text message qr code', 'send sms qr', 'sms generator', 'text qr', 'sms qr code erstellen', 'qr code für sms', 'nachricht qr code', 'sms vorlage qr code', 'sms versenden qr'],
alternates: {
canonical: 'https://www.qrmaster.net/tools/sms-qr-code',
},
openGraph: {
title: 'Free SMS QR Code Generator | QR Master',
description: 'Generate QR codes for instant SMS messages. Pre-fill text and number.',
type: 'website',
url: 'https://www.qrmaster.net/tools/sms-qr-code',
images: [{ url: '/og-sms-generator.png', width: 1200, height: 630 }],
},
twitter: {
card: 'summary_large_image',
title: 'Free SMS QR Code Generator',
description: 'Create QR codes to send texts. Instant and free.',
},
robots: {
index: true,
follow: true,
},
};
// JSON-LD Structured Data
const jsonLd = {
'@context': 'https://schema.org',
'@graph': [
generateSoftwareAppSchema(
'SMS QR Code Generator',
'Generate QR codes that open the user\'s SMS app with a pre-filled message.',
'/og-sms-generator.png'
),
{
'@type': 'HowTo',
name: 'How to Create an SMS QR Code',
description: 'Create a QR code that prepares a text message.',
step: [
{
'@type': 'HowToStep',
position: 1,
name: 'Enter Phone Number',
text: 'Type the destination phone number.',
},
{
'@type': 'HowToStep',
position: 2,
name: 'Enter Message',
text: 'Type the message you want pre-filled (e.g., "Send me info!").',
},
{
'@type': 'HowToStep',
position: 3,
name: 'Download',
text: 'Save the QR code and share it.',
},
],
totalTime: 'PT30S',
},
generateFaqSchema({
'Does the text send automatically?': {
question: 'Does the text send automatically?',
answer: 'No. The QR code opens the messaging app with the text typed out. The user must simply tap "Send". This is a security feature of all smartphones.',
},
'Is there a cost?': {
question: 'Is there a cost?',
answer: 'Generating the code is free. Standard SMS rates apply for the person sending the text message, depending on their carrier plan.',
},
'Can I change the message later?': {
question: 'Can I change the message later?',
answer: 'No. Static QR codes have the message embedded in them. To change the message, you need a new QR code.',
},
'What uses are there for SMS QR codes?': {
question: 'What uses are there for SMS QR codes?',
answer: 'They are great for SMS marketing opt-ins ("Text JOIN to 12345"), customer support requests, or voting via text.',
},
}),
],
};
export default function SMSQRCodePage() {
return (
<>
<script
type="application/ld+json"
dangerouslySetInnerHTML={{ __html: JSON.stringify(jsonLd) }}
/>
<ToolBreadcrumb toolName="SMS QR Code Generator" toolSlug="sms-qr-code" />
<div className="min-h-screen" style={{ backgroundColor: '#EBEBDF' }}>
{/* HERO SECTION */}
<section className="relative pt-20 pb-20 lg:pt-32 lg:pb-32 px-4 sm:px-6 lg:px-8 overflow-hidden" style={{ backgroundColor: '#ea580c' }}>
<div className="absolute inset-0 opacity-10">
<svg className="w-full h-full" viewBox="0 0 100 100" preserveAspectRatio="none">
<path d="M0 100 C 20 0 50 0 100 100 Z" fill="url(#grad1)" />
<defs>
<linearGradient id="grad1" x1="0%" y1="0%" x2="100%" y2="0%">
<stop offset="0%" style={{ stopColor: 'white', stopOpacity: 1 }} />
<stop offset="100%" style={{ stopColor: 'white', stopOpacity: 0 }} />
</linearGradient>
</defs>
</svg>
</div>
<div className="max-w-7xl mx-auto grid lg:grid-cols-2 gap-12 items-center relative z-10">
<div className="text-center lg:text-left">
<div className="inline-flex items-center gap-2 px-3 py-1 rounded-full bg-white/10 text-white/90 text-sm font-medium mb-6 backdrop-blur-sm border border-white/10 hover:bg-white/20 transition-colors cursor-default">
<span className="flex h-2 w-2 relative">
<span className="animate-ping absolute inline-flex h-full w-full rounded-full bg-amber-400 opacity-75"></span>
<span className="relative inline-flex rounded-full h-2 w-2 bg-amber-400"></span>
</span>
Free Tool — No Signup Required
</div>
<h1 className="text-4xl md:text-5xl lg:text-6xl font-extrabold text-white tracking-tight leading-tight mb-6">
Make Texting Easy with <br className="hidden lg:block" />
<span className="text-transparent bg-clip-text bg-gradient-to-r from-amber-200 to-orange-100">SMS QR Codes</span>
</h1>
<p className="text-lg md:text-xl text-orange-50 max-w-2xl mx-auto lg:mx-0 mb-8 leading-relaxed">
Let users send you a pre-written text with one scan. Ideal for opt-ins and support.
<strong className="text-white block sm:inline mt-2 sm:mt-0"> Universal compatibility.</strong>
</p>
<div className="flex flex-wrap justify-center lg:justify-start gap-4 text-sm font-medium text-white/80">
<div className="flex items-center gap-2 bg-white/5 px-4 py-2.5 rounded-xl border border-white/5 backdrop-blur-sm">
<MessageSquare className="w-4 h-4 text-amber-300" />
Pre-fill Texts
</div>
<div className="flex items-center gap-2 bg-white/5 px-4 py-2.5 rounded-xl border border-white/5 backdrop-blur-sm">
<Zap className="w-4 h-4 text-amber-300" />
Instant Open
</div>
<div className="flex items-center gap-2 bg-white/5 px-4 py-2.5 rounded-xl border border-white/5 backdrop-blur-sm">
<Shield className="w-4 h-4 text-amber-300" />
Zero Friction
</div>
</div>
</div>
{/* Visual Abstract */}
<div className="hidden lg:flex relative items-center justify-center min-h-[400px]">
<div className="absolute w-[500px] h-[500px] bg-orange-500/30 rounded-full blur-[100px] -top-20 -right-20 animate-pulse" />
<div className="relative w-80 h-96 bg-white/5 backdrop-blur-xl border border-white/20 rounded-3xl shadow-2xl flex flex-col items-center justify-center p-8 transform -rotate-3 hover:rotate-0 transition-all duration-700 group">
<div className="absolute inset-0 bg-gradient-to-br from-white/10 to-transparent rounded-3xl" />
<div className="w-full bg-white rounded-xl shadow-lg p-3 mb-6 relative overflow-hidden flex gap-3 items-center">
<div className="w-10 h-10 rounded-full bg-orange-100 flex items-center justify-center shrink-0">
<MessageSquare className="w-5 h-5 text-orange-600" />
</div>
<div className="bg-slate-100 rounded-2xl rounded-tl-none p-3 text-xs text-slate-600 w-full">
Hi, I want to join the club!
</div>
</div>
<div className="w-48 h-48 bg-white rounded-xl p-2 shadow-inner relative overflow-hidden flex items-center justify-center">
<QRCodeSVG value="https://www.qrmaster.net" size={170} fgColor="#0f172a" level="Q" />
</div>
{/* Floating Badge */}
<div className="absolute -bottom-6 -left-6 bg-white py-3 px-5 rounded-xl shadow-xl flex items-center gap-3 transform transition-transform hover:scale-105 duration-300">
<div className="bg-orange-100 p-2 rounded-full">
<Send className="w-5 h-5 text-orange-600" />
</div>
<div className="text-left">
<div className="text-[10px] text-slate-400 font-bold uppercase tracking-wider">SMS</div>
<div className="text-sm font-bold text-slate-900">Sent!</div>
</div>
</div>
</div>
</div>
</div>
</section>
{/* GENERATOR SECTION */}
<section className="py-12 px-4 sm:px-6 lg:px-8 -mt-8">
<SMSGenerator />
</section>
{/* HOW IT WORKS */}
<section className="py-16 px-4 sm:px-6 lg:px-8 bg-white">
<div className="max-w-4xl mx-auto">
<h2 className="text-3xl font-bold text-slate-900 text-center mb-12">
How SMS QR Codes Work
</h2>
<div className="grid md:grid-cols-3 gap-8">
<article className="text-center">
<div className="w-14 h-14 rounded-2xl bg-orange-50 flex items-center justify-center mx-auto mb-4">
<MessageSquare className="w-7 h-7 text-orange-600" />
</div>
<h3 className="font-bold text-slate-900 mb-2">1. Compose</h3>
<p className="text-slate-600 text-sm">
Enter the number and the message you want your customers to send.
</p>
</article>
<article className="text-center">
<div className="w-14 h-14 rounded-2xl bg-orange-50 flex items-center justify-center mx-auto mb-4">
<Smartphone className="w-7 h-7 text-orange-600" />
</div>
<h3 className="font-bold text-slate-900 mb-2">2. Scan</h3>
<p className="text-slate-600 text-sm">
User scans the code. The messages app opens automatically.
</p>
</article>
<article className="text-center">
<div className="w-14 h-14 rounded-2xl bg-orange-50 flex items-center justify-center mx-auto mb-4">
<Send className="w-7 h-7 text-orange-600" />
</div>
<h3 className="font-bold text-slate-900 mb-2">3. Send</h3>
<p className="text-slate-600 text-sm">
User hits "Send" to trigger the text. Perfect for quick sign-ups or votes.
</p>
</article>
</div>
</div>
</section>
{/* RELATED TOOLS */}
<RelatedTools />
{/* FAQ SECTION */}
<section className="py-16 px-4 sm:px-6 lg:px-8" style={{ backgroundColor: '#EBEBDF' }}>
<div className="max-w-3xl mx-auto">
<h2 className="text-3xl font-bold text-slate-900 text-center mb-4">
Frequently Asked Questions
</h2>
<p className="text-slate-600 text-center mb-10">
Common questions about SMS QR codes.
</p>
<div className="space-y-4">
<FaqItem
question="Does the user need an internet connection?"
answer="No. The QR code contains all the info offline. However, the user needs a cellular signal to actually send the SMS message."
/>
<FaqItem
question="Is it free for the user to send?"
answer="It depends on their mobile plan. Standard SMS rates apply, though most modern plans include unlimited texting."
/>
<FaqItem
question="Can I use shortcodes?"
answer="Yes. You can enter a shortcode (e.g. 55555) in the phone number field instead of a regular number."
/>
<FaqItem
question="Is my phone number visible?"
answer="Yes. Since the user is sending a text to you, they will see your number (or shortcode) in their messaging app."
/>
</div>
</div>
</section>
</div>
</>
);
}
function FaqItem({ question, answer }: { question: string; answer: string }) {
return (
<details className="group bg-white rounded-xl shadow-sm border border-slate-200 overflow-hidden">
<summary className="flex items-center justify-between p-5 cursor-pointer list-none text-slate-900 font-semibold hover:bg-slate-50 transition-colors">
{question}
<span className="transition group-open:rotate-180 text-slate-400">
<svg fill="none" height="20" stroke="currentColor" strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" viewBox="0 0 24 24" width="20">
<path d="M6 9l6 6 6-6" />
</svg>
</span>
</summary>
<div className="text-slate-600 px-5 pb-5 pt-0 leading-relaxed text-sm">
{answer}
</div>
</details>
);
}

636
src/app/(main)/(marketing)/tools/teams-qr-code/TeamsGenerator.tsx
View File

@@ -1,318 +1,318 @@
'use client';
import React, { useState, useRef } from 'react';
import Link from 'next/link';
import { QRCodeSVG } from 'qrcode.react';
import {
Users,
Download,
Check,
Sparkles,
Video,
MessageCircle
} from 'lucide-react';
import { Button } from '@/components/ui/Button';
import { Input } from '@/components/ui/Input';
import { cn } from '@/lib/utils';
// Brand Colors - Microsoft Teams Purple
const BRAND = {
paleGrey: '#F3F2F1',
primary: '#6264A7',
primaryDark: '#464775',
};
// QR Color Options
const QR_COLORS = [
{ name: 'Teams Purple', value: '#6264A7' },
{ name: 'Teams Dark', value: '#464775' },
{ name: 'Classic Black', value: '#000000' },
{ name: 'Indigo', value: '#4F46E5' },
{ name: 'Violet', value: '#7C3AED' },
{ name: 'Emerald', value: '#10B981' },
{ name: 'Rose', value: '#F43F5E' },
];
// Frame Options
const FRAME_OPTIONS = [
{ id: 'none', label: 'No Frame' },
{ id: 'scanme', label: 'Scan Me' },
{ id: 'join', label: 'Join Meeting' },
{ id: 'teams', label: 'Teams' },
];
// Link Type Options
const LINK_TYPES = [
{ id: 'meeting', label: 'Meeting Link', icon: Video },
{ id: 'chat', label: 'Chat with User', icon: MessageCircle },
];
export default function TeamsGenerator() {
const [linkType, setLinkType] = useState('meeting');
const [meetingUrl, setMeetingUrl] = useState('');
const [userEmail, setUserEmail] = useState('');
const [qrColor, setQrColor] = useState(BRAND.primary);
const [frameType, setFrameType] = useState('none');
const qrRef = useRef<HTMLDivElement>(null);
// Generate Teams link
const generateTeamsLink = () => {
if (linkType === 'meeting') {
// If user pastes full Teams meeting URL, use it directly
if (meetingUrl.trim().includes('teams.microsoft.com') || meetingUrl.trim().includes('teams.live.com')) {
return meetingUrl.trim();
}
// Otherwise return placeholder
return meetingUrl.trim() || 'https://teams.microsoft.com';
} else {
// Chat link with email
if (!userEmail.trim()) return 'https://teams.microsoft.com';
return `https://teams.microsoft.com/l/chat/0/0?users=${encodeURIComponent(userEmail.trim())}`;
}
};
const handleDownload = async (format: 'png' | 'svg') => {
if (!qrRef.current) return;
try {
if (format === 'png') {
const { toPng } = await import('html-to-image');
const dataUrl = await toPng(qrRef.current, { cacheBust: true, pixelRatio: 3 });
const link = document.createElement('a');
link.download = `teams-qr-code.png`;
link.href = dataUrl;
link.click();
} else {
const svgData = qrRef.current.querySelector('svg')?.outerHTML;
if (svgData) {
const blob = new Blob([svgData], { type: 'image/svg+xml;charset=utf-8' });
const url = URL.createObjectURL(blob);
const link = document.createElement('a');
link.href = url;
link.download = `teams-qr-code.svg`;
link.click();
}
}
} catch (err) {
console.error('Download failed', err);
}
};
const getFrameLabel = () => {
const frame = FRAME_OPTIONS.find(f => f.id === frameType);
return frame?.id !== 'none' ? frame?.label : null;
};
return (
<div className="w-full max-w-5xl mx-auto px-4 md:px-6">
{/* Main Generator Card */}
<div className="bg-white rounded-3xl shadow-2xl shadow-slate-900/10 overflow-hidden border border-slate-100">
<div className="grid lg:grid-cols-2">
{/* LEFT: Input Section */}
<div className="p-6 md:p-8 lg:p-10 space-y-8 border-r border-slate-100">
{/* Teams Details */}
<div className="space-y-6">
<h2 className="text-lg font-bold text-slate-900 flex items-center gap-2">
<Users className="w-5 h-5 text-[#6264A7]" />
Microsoft Teams
</h2>
<div className="space-y-4">
{/* Link Type Toggle */}
<div>
<label className="block text-sm font-medium text-slate-700 mb-2">What do you want to share?</label>
<div className="grid grid-cols-2 gap-3">
{LINK_TYPES.map((type) => (
<button
key={type.id}
onClick={() => setLinkType(type.id)}
className={cn(
"flex items-center justify-center gap-2 py-3 px-4 rounded-xl font-medium transition-all border",
linkType === type.id
? "bg-[#6264A7] text-white border-[#6264A7]"
: "bg-slate-50 text-slate-600 border-slate-200 hover:border-slate-300"
)}
>
<type.icon className="w-4 h-4" />
{type.label}
</button>
))}
</div>
</div>
{linkType === 'meeting' ? (
<div>
<label className="block text-sm font-medium text-slate-700 mb-2">Teams Meeting URL</label>
<Input
placeholder="Paste your Teams meeting link here"
value={meetingUrl}
onChange={(e) => setMeetingUrl(e.target.value)}
className="h-12 text-base rounded-xl border-slate-200 focus:border-[#6264A7] focus:ring-[#6264A7]"
/>
<p className="text-xs text-slate-600 mt-2">
Copy the meeting link from your Teams calendar invite.
</p>
</div>
) : (
<div>
<label className="block text-sm font-medium text-slate-700 mb-2">User Email Address</label>
<Input
type="email"
placeholder="e.g. colleague@company.com"
value={userEmail}
onChange={(e) => setUserEmail(e.target.value)}
className="h-12 text-base rounded-xl border-slate-200 focus:border-[#6264A7] focus:ring-[#6264A7]"
/>
<p className="text-xs text-slate-600 mt-2">
The person's work email to start a Teams chat.
</p>
</div>
)}
</div>
</div>
<div className="border-t border-slate-100"></div>
{/* Design Options */}
<div className="space-y-6">
<h2 className="text-lg font-bold text-slate-900 flex items-center gap-2">
<Sparkles className="w-5 h-5 text-[#6264A7]" />
Design Options
</h2>
{/* Color Picker */}
<div>
<label className="block text-sm font-medium text-slate-700 mb-3">QR Code Color</label>
<div className="flex flex-wrap gap-2">
{QR_COLORS.map((c) => (
<button
key={c.name}
onClick={() => setQrColor(c.value)}
className={cn(
"w-9 h-9 rounded-full border-2 flex items-center justify-center transition-all hover:scale-110",
qrColor === c.value ? "border-slate-900 ring-2 ring-offset-2 ring-slate-200" : "border-white shadow-md"
)}
style={{ backgroundColor: c.value }}
aria-label={`Select ${c.name}`}
title={c.name}
>
{qrColor === c.value && <Check className="w-4 h-4 text-white" strokeWidth={3} />}
</button>
))}
</div>
</div>
{/* Frame Selector */}
<div>
<label className="block text-sm font-medium text-slate-700 mb-3">Frame Label</label>
<div className="grid grid-cols-2 sm:grid-cols-4 gap-2">
{FRAME_OPTIONS.map((frame) => (
<button
key={frame.id}
onClick={() => setFrameType(frame.id)}
className={cn(
"py-2.5 px-2 rounded-lg text-xs font-medium transition-all border",
frameType === frame.id
? "bg-[#6264A7] text-white border-[#6264A7]"
: "bg-slate-50 text-slate-600 border-slate-200 hover:border-slate-300"
)}
>
{frame.label}
</button>
))}
</div>
</div>
</div>
</div>
{/* RIGHT: Preview Section */}
<div className="p-6 md:p-8 lg:p-10 flex flex-col items-center justify-center" style={{ backgroundColor: BRAND.paleGrey }}>
{/* QR Card with Frame */}
<div
ref={qrRef}
className="bg-white rounded-3xl shadow-xl p-6 sm:p-8 flex flex-col items-center w-full max-w-[320px]"
>
{/* Frame Label */}
{getFrameLabel() && (
<div
className="mb-5 px-8 py-2.5 rounded-full text-white font-bold text-sm tracking-widest uppercase shadow-md"
style={{ backgroundColor: qrColor }}
>
{getFrameLabel()}
</div>
)}
{/* QR Code */}
<div className="bg-white">
<QRCodeSVG
value={generateTeamsLink()}
size={240}
level="M"
includeMargin={false}
fgColor={qrColor}
/>
</div>
{/* Teams Info */}
<div className="mt-6 text-center max-w-[260px]">
<h3 className="font-bold text-slate-900 text-lg flex items-center justify-center gap-2">
{linkType === 'meeting' ? (
<Video className="w-4 h-4 text-[#6264A7] shrink-0" />
) : (
<MessageCircle className="w-4 h-4 text-[#6264A7] shrink-0" />
)}
<span className="truncate">
{linkType === 'meeting' ? 'Teams Meeting' : (userEmail || 'Teams Chat')}
</span>
</h3>
<p className="text-sm text-slate-600 mt-1">
{linkType === 'meeting' ? 'Join Meeting' : 'Start Chat'}
</p>
</div>
</div>
{/* Download Buttons */}
<div className="flex items-center gap-3 mt-8">
<Button
onClick={() => handleDownload('png')}
className="bg-[#6264A7] hover:bg-[#464775] text-white shadow-lg"
>
<Download className="w-4 h-4 mr-2" />
Download PNG
</Button>
<Button
onClick={() => handleDownload('svg')}
variant="outline"
className="border-slate-300 hover:bg-white"
>
<Download className="w-4 h-4 mr-2" />
SVG
</Button>
</div>
<p className="text-xs text-slate-600 mt-4 text-center">
Works with Microsoft Teams desktop and mobile apps.
</p>
</div>
</div>
</div>
{/* Upsell Banner */}
<div className="mt-8 bg-gradient-to-r from-[#6264A7] to-[#464775] rounded-2xl p-6 flex flex-col sm:flex-row items-center justify-between gap-4">
<div className="text-white text-center sm:text-left">
<h3 className="font-bold text-lg">Need to update meeting links?</h3>
<p className="text-white/80 text-sm mt-1">Dynamic QR Codes let you change the destination without reprinting.</p>
</div>
<Link href="/signup">
<Button className="bg-white text-[#6264A7] hover:bg-slate-100 shrink-0 shadow-lg">
Create Dynamic QR
</Button>
</Link>
</div>
</div>
);
}
'use client';
import React, { useState, useRef } from 'react';
import Link from 'next/link';
import { QRCodeSVG } from 'qrcode.react';
import {
Users,
Download,
Check,
Sparkles,
Video,
MessageCircle
} from 'lucide-react';
import { Button } from '@/components/ui/Button';
import { Input } from '@/components/ui/Input';
import { cn } from '@/lib/utils';
// Brand Colors - Microsoft Teams Purple
const BRAND = {
paleGrey: '#F3F2F1',
primary: '#6264A7',
primaryDark: '#464775',
};
// QR Color Options
const QR_COLORS = [
{ name: 'Teams Purple', value: '#6264A7' },
{ name: 'Teams Dark', value: '#464775' },
{ name: 'Classic Black', value: '#000000' },
{ name: 'Indigo', value: '#4F46E5' },
{ name: 'Violet', value: '#7C3AED' },
{ name: 'Emerald', value: '#10B981' },
{ name: 'Rose', value: '#F43F5E' },
];
// Frame Options
const FRAME_OPTIONS = [
{ id: 'none', label: 'No Frame' },
{ id: 'scanme', label: 'Scan Me' },
{ id: 'join', label: 'Join Meeting' },
{ id: 'teams', label: 'Teams' },
];
// Link Type Options
const LINK_TYPES = [
{ id: 'meeting', label: 'Meeting Link', icon: Video },
{ id: 'chat', label: 'Chat with User', icon: MessageCircle },
];
export default function TeamsGenerator() {
const [linkType, setLinkType] = useState('meeting');
const [meetingUrl, setMeetingUrl] = useState('');
const [userEmail, setUserEmail] = useState('');
const [qrColor, setQrColor] = useState(BRAND.primary);
const [frameType, setFrameType] = useState('none');
const qrRef = useRef<HTMLDivElement>(null);
// Generate Teams link
const generateTeamsLink = () => {
if (linkType === 'meeting') {
// If user pastes full Teams meeting URL, use it directly
if (meetingUrl.trim().includes('teams.microsoft.com') || meetingUrl.trim().includes('teams.live.com')) {
return meetingUrl.trim();
}
// Otherwise return placeholder
return meetingUrl.trim() || 'https://teams.microsoft.com';
} else {
// Chat link with email
if (!userEmail.trim()) return 'https://teams.microsoft.com';
return `https://teams.microsoft.com/l/chat/0/0?users=${encodeURIComponent(userEmail.trim())}`;
}
};
const handleDownload = async (format: 'png' | 'svg') => {
if (!qrRef.current) return;
try {
if (format === 'png') {
const { toPng } = await import('html-to-image');
const dataUrl = await toPng(qrRef.current, { cacheBust: true, pixelRatio: 3 });
const link = document.createElement('a');
link.download = `teams-qr-code.png`;
link.href = dataUrl;
link.click();
} else {
const svgData = qrRef.current.querySelector('svg')?.outerHTML;
if (svgData) {
const blob = new Blob([svgData], { type: 'image/svg+xml;charset=utf-8' });
const url = URL.createObjectURL(blob);
const link = document.createElement('a');
link.href = url;
link.download = `teams-qr-code.svg`;
link.click();
}
}
} catch (err) {
console.error('Download failed', err);
}
};
const getFrameLabel = () => {
const frame = FRAME_OPTIONS.find(f => f.id === frameType);
return frame?.id !== 'none' ? frame?.label : null;
};
return (
<div className="w-full max-w-5xl mx-auto px-4 md:px-6">
{/* Main Generator Card */}
<div className="bg-white rounded-3xl shadow-2xl shadow-slate-900/10 overflow-hidden border border-slate-100">
<div className="grid lg:grid-cols-2">
{/* LEFT: Input Section */}
<div className="p-6 md:p-8 lg:p-10 space-y-8 border-r border-slate-100">
{/* Teams Details */}
<div className="space-y-6">
<h2 className="text-lg font-bold text-slate-900 flex items-center gap-2">
<Users className="w-5 h-5 text-[#6264A7]" />
Microsoft Teams
</h2>
<div className="space-y-4">
{/* Link Type Toggle */}
<div>
<label className="block text-sm font-medium text-slate-700 mb-2">What do you want to share?</label>
<div className="grid grid-cols-2 gap-3">
{LINK_TYPES.map((type) => (
<button
key={type.id}
onClick={() => setLinkType(type.id)}
className={cn(
"flex items-center justify-center gap-2 py-3 px-4 rounded-xl font-medium transition-all border",
linkType === type.id
? "bg-[#6264A7] text-white border-[#6264A7]"
: "bg-slate-50 text-slate-600 border-slate-200 hover:border-slate-300"
)}
>
<type.icon className="w-4 h-4" />
{type.label}
</button>
))}
</div>
</div>
{linkType === 'meeting' ? (
<div>
<label className="block text-sm font-medium text-slate-700 mb-2">Teams Meeting URL</label>
<Input
placeholder="Paste your Teams meeting link here"
value={meetingUrl}
onChange={(e) => setMeetingUrl(e.target.value)}
className="h-12 text-base rounded-xl border-slate-200 focus:border-[#6264A7] focus:ring-[#6264A7]"
/>
<p className="text-xs text-slate-600 mt-2">
Copy the meeting link from your Teams calendar invite.
</p>
</div>
) : (
<div>
<label className="block text-sm font-medium text-slate-700 mb-2">User Email Address</label>
<Input
type="email"
placeholder="e.g. colleague@company.com"
value={userEmail}
onChange={(e) => setUserEmail(e.target.value)}
className="h-12 text-base rounded-xl border-slate-200 focus:border-[#6264A7] focus:ring-[#6264A7]"
/>
<p className="text-xs text-slate-600 mt-2">
The person's work email to start a Teams chat.
</p>
</div>
)}
</div>
</div>
<div className="border-t border-slate-100"></div>
{/* Design Options */}
<div className="space-y-6">
<h2 className="text-lg font-bold text-slate-900 flex items-center gap-2">
<Sparkles className="w-5 h-5 text-[#6264A7]" />
Design Options
</h2>
{/* Color Picker */}
<div>
<label className="block text-sm font-medium text-slate-700 mb-3">QR Code Color</label>
<div className="flex flex-wrap gap-2">
{QR_COLORS.map((c) => (
<button
key={c.name}
onClick={() => setQrColor(c.value)}
className={cn(
"w-9 h-9 rounded-full border-2 flex items-center justify-center transition-all hover:scale-110",
qrColor === c.value ? "border-slate-900 ring-2 ring-offset-2 ring-slate-200" : "border-white shadow-md"
)}
style={{ backgroundColor: c.value }}
aria-label={`Select ${c.name}`}
title={c.name}
>
{qrColor === c.value && <Check className="w-4 h-4 text-white" strokeWidth={3} />}
</button>
))}
</div>
</div>
{/* Frame Selector */}
<div>
<label className="block text-sm font-medium text-slate-700 mb-3">Frame Label</label>
<div className="grid grid-cols-2 sm:grid-cols-4 gap-2">
{FRAME_OPTIONS.map((frame) => (
<button
key={frame.id}
onClick={() => setFrameType(frame.id)}
className={cn(
"py-2.5 px-2 rounded-lg text-xs font-medium transition-all border",
frameType === frame.id
? "bg-[#6264A7] text-white border-[#6264A7]"
: "bg-slate-50 text-slate-600 border-slate-200 hover:border-slate-300"
)}
>
{frame.label}
</button>
))}
</div>
</div>
</div>
</div>
{/* RIGHT: Preview Section */}
<div className="p-6 md:p-8 lg:p-10 flex flex-col items-center justify-center" style={{ backgroundColor: BRAND.paleGrey }}>
{/* QR Card with Frame */}
<div
ref={qrRef}
className="bg-white rounded-3xl shadow-xl p-6 sm:p-8 flex flex-col items-center w-full max-w-[320px]"
>
{/* Frame Label */}
{getFrameLabel() && (
<div
className="mb-5 px-8 py-2.5 rounded-full text-white font-bold text-sm tracking-widest uppercase shadow-md"
style={{ backgroundColor: qrColor }}
>
{getFrameLabel()}
</div>
)}
{/* QR Code */}
<div className="bg-white">
<QRCodeSVG
value={generateTeamsLink()}
size={240}
level="M"
includeMargin={false}
fgColor={qrColor}
/>
</div>
{/* Teams Info */}
<div className="mt-6 text-center max-w-[260px]">
<h3 className="font-bold text-slate-900 text-lg flex items-center justify-center gap-2">
{linkType === 'meeting' ? (
<Video className="w-4 h-4 text-[#6264A7] shrink-0" />
) : (
<MessageCircle className="w-4 h-4 text-[#6264A7] shrink-0" />
)}
<span className="truncate">
{linkType === 'meeting' ? 'Teams Meeting' : (userEmail || 'Teams Chat')}
</span>
</h3>
<p className="text-sm text-slate-600 mt-1">
{linkType === 'meeting' ? 'Join Meeting' : 'Start Chat'}
</p>
</div>
</div>
{/* Download Buttons */}
<div className="flex items-center gap-3 mt-8">
<Button
onClick={() => handleDownload('png')}
className="bg-[#6264A7] hover:bg-[#464775] text-white shadow-lg"
>
<Download className="w-4 h-4 mr-2" />
Download PNG
</Button>
<Button
onClick={() => handleDownload('svg')}
variant="outline"
className="border-slate-300 hover:bg-white"
>
<Download className="w-4 h-4 mr-2" />
SVG
</Button>
</div>
<p className="text-xs text-slate-600 mt-4 text-center">
Works with Microsoft Teams desktop and mobile apps.
</p>
</div>
</div>
</div>
{/* Upsell Banner */}
<div className="mt-8 bg-gradient-to-r from-[#6264A7] to-[#464775] rounded-2xl p-6 flex flex-col sm:flex-row items-center justify-between gap-4">
<div className="text-white text-center sm:text-left">
<h3 className="font-bold text-lg">Need to update meeting links?</h3>
<p className="text-white/80 text-sm mt-1">Dynamic QR Codes let you change the destination without reprinting.</p>
</div>
<Link href="/signup">
<Button className="bg-white text-[#6264A7] hover:bg-slate-100 shrink-0 shadow-lg">
Create Dynamic QR
</Button>
</Link>
</div>
</div>
);
}

616
src/app/(main)/(marketing)/tools/teams-qr-code/page.tsx
View File

@@ -1,308 +1,308 @@
import React from 'react';
import type { Metadata } from 'next';
import TeamsGenerator from './TeamsGenerator';
import { Users, Shield, Zap, Video, MessageCircle, Download, Share2 } from 'lucide-react';
import { QRCodeSVG } from 'qrcode.react';
import { ToolBreadcrumb } from '@/components/seo/BreadcrumbSchema';
import { RelatedTools } from '@/components/marketing/RelatedTools';
import { generateSoftwareAppSchema, generateFaqSchema } from '@/lib/schema-utils';
// SEO Optimized Metadata
export const metadata: Metadata = {
title: {
absolute: 'Free Microsoft Teams QR Code Generator | Join Meetings | QR Master',
},
description: 'Create a QR code for your Microsoft Teams meeting. Teams QR Code erstellen. Attendees scan to join instantly. For hybrid meetings & office displays.',
keywords: ['teams qr code', 'microsoft teams meeting qr', 'join teams qr code', 'meeting room qr', 'teams invitation qr', 'hybrid meeting qr code', 'microsoft teams qr code erstellen', 'teams meeting qr code', 'teams besprechung qr', 'teams beitreten qr'],
alternates: {
canonical: 'https://www.qrmaster.net/tools/teams-qr-code',
},
openGraph: {
title: 'Free Microsoft Teams QR Code Generator | QR Master',
description: 'Generate QR codes for Teams meetings. One scan to join instantly.',
type: 'website',
url: 'https://www.qrmaster.net/tools/teams-qr-code',
images: [{ url: '/og-teams-generator.png', width: 1200, height: 630 }],
},
twitter: {
card: 'summary_large_image',
title: 'Free Microsoft Teams QR Code Generator',
description: 'Create Teams meeting QR codes. Instant and free.',
},
robots: {
index: true,
follow: true,
},
};
// JSON-LD Structured Data
const jsonLd = {
'@context': 'https://schema.org',
'@graph': [
generateSoftwareAppSchema(
'Microsoft Teams QR Code Generator',
'Generate QR codes that let people join your Microsoft Teams meeting with one scan.',
'/og-teams-generator.png',
'BusinessApplication'
),
{
'@type': 'HowTo',
name: 'How to Create a Microsoft Teams QR Code',
description: 'Create a QR code for joining Teams meetings.',
step: [
{
'@type': 'HowToStep',
position: 1,
name: 'Copy Meeting Link',
text: 'Copy the Teams meeting URL from your calendar invitation.',
},
{
'@type': 'HowToStep',
position: 2,
name: 'Paste Link',
text: 'Paste the meeting link into the generator.',
},
{
'@type': 'HowToStep',
position: 3,
name: 'Customize',
text: 'Choose Teams colors and add a frame label.',
},
{
'@type': 'HowToStep',
position: 4,
name: 'Download',
text: 'Download your QR code and display it in your meeting room.',
},
],
totalTime: 'PT30S',
},
generateFaqSchema({
'What happens when someone scans the QR code?': {
question: 'What happens when someone scans the QR code?',
answer: 'Microsoft Teams opens and the user is prompted to join the meeting. Works on desktop, mobile, and web.',
},
'Does it work for recurring meetings?': {
question: 'Does it work for recurring meetings?',
answer: 'Yes! If your recurring meeting uses the same meeting link, the QR code will work for all sessions.',
},
'Can guests without Teams accounts join?': {
question: 'Can guests without Teams accounts join?',
answer: 'Yes. Guests can join Teams meetings via the web browser without needing a Microsoft account.',
},
'Is this for personal or business Teams?': {
question: 'Is this for personal or business Teams?',
answer: 'Both! Works with Microsoft Teams for work, school, and personal accounts.',
},
}),
],
};
export default function TeamsQRCodePage() {
return (
<>
<script
type="application/ld+json"
dangerouslySetInnerHTML={{ __html: JSON.stringify(jsonLd) }}
/>
<ToolBreadcrumb toolName="Teams QR Code Generator" toolSlug="teams-qr-code" />
<div className="min-h-screen" style={{ backgroundColor: '#EBEBDF' }}>
{/* HERO SECTION */}
<section className="relative pt-20 pb-20 lg:pt-32 lg:pb-32 px-4 sm:px-6 lg:px-8 overflow-hidden" style={{ backgroundColor: '#6264A7' }}>
<div className="absolute inset-0 opacity-10">
<svg className="w-full h-full" viewBox="0 0 100 100" preserveAspectRatio="none">
<path d="M0 100 C 20 0 50 0 100 100 Z" fill="url(#grad1)" />
<defs>
<linearGradient id="grad1" x1="0%" y1="0%" x2="100%" y2="0%">
<stop offset="0%" style={{ stopColor: 'white', stopOpacity: 1 }} />
<stop offset="100%" style={{ stopColor: 'white', stopOpacity: 0 }} />
</linearGradient>
</defs>
</svg>
</div>
<div className="max-w-7xl mx-auto grid lg:grid-cols-2 gap-12 items-center relative z-10">
<div className="text-center lg:text-left">
<div className="inline-flex items-center gap-2 px-3 py-1 rounded-full bg-white/10 text-white/90 text-sm font-medium mb-6 backdrop-blur-sm border border-white/10 hover:bg-white/20 transition-colors cursor-default">
<span className="flex h-2 w-2 relative">
<span className="animate-ping absolute inline-flex h-full w-full rounded-full bg-white opacity-75"></span>
<span className="relative inline-flex rounded-full h-2 w-2 bg-white"></span>
</span>
Free Tool — No Signup Required
</div>
<h1 className="text-4xl md:text-5xl lg:text-6xl font-extrabold text-white tracking-tight leading-tight mb-6">
Join Meetings with <br className="hidden lg:block" />
<span className="text-transparent bg-clip-text bg-gradient-to-r from-violet-200 to-white">Teams QR Codes</span>
</h1>
<p className="text-lg md:text-xl text-violet-100 max-w-2xl mx-auto lg:mx-0 mb-8 leading-relaxed">
Create QR codes for Microsoft Teams meetings. Attendees scan to join instantly.
<strong className="text-white block sm:inline mt-2 sm:mt-0"> Perfect for hybrid workplaces.</strong>
</p>
<div className="flex flex-wrap justify-center lg:justify-start gap-4 text-sm font-medium text-white/80">
<div className="flex items-center gap-2 bg-white/5 px-4 py-2.5 rounded-xl border border-white/5 backdrop-blur-sm">
<Video className="w-4 h-4 text-white" />
Meeting Links
</div>
<div className="flex items-center gap-2 bg-white/5 px-4 py-2.5 rounded-xl border border-white/5 backdrop-blur-sm">
<MessageCircle className="w-4 h-4 text-white" />
Chat Links
</div>
<div className="flex items-center gap-2 bg-white/5 px-4 py-2.5 rounded-xl border border-white/5 backdrop-blur-sm">
<Zap className="w-4 h-4 text-amber-300" />
Instant Join
</div>
</div>
</div>
{/* Visual Abstract */}
<div className="hidden lg:flex relative items-center justify-center min-h-[400px]">
<div className="absolute w-[500px] h-[500px] bg-violet-400/30 rounded-full blur-[100px] -top-20 -right-20 animate-pulse" />
<div className="relative w-80 h-96 bg-white/5 backdrop-blur-xl border border-white/20 rounded-3xl shadow-2xl flex flex-col items-center justify-center p-8 transform rotate-3 hover:rotate-0 transition-all duration-700 group">
<div className="absolute inset-0 bg-gradient-to-br from-white/10 to-transparent rounded-3xl" />
{/* Meeting Card Mock */}
<div className="w-full bg-white rounded-xl shadow-lg p-4 mb-6 relative overflow-hidden">
<div className="flex items-center gap-3 mb-3">
<div className="w-10 h-10 bg-[#6264A7] rounded-lg flex items-center justify-center">
<Users className="w-5 h-5 text-white" />
</div>
<div>
<div className="font-bold text-slate-900 text-sm">Team Standup</div>
<div className="text-xs text-slate-600">Daily at 9:00 AM</div>
</div>
</div>
<div className="flex gap-2">
<div className="bg-green-100 text-green-700 text-xs px-2 py-1 rounded-full">Live Now</div>
<div className="bg-slate-100 text-slate-600 text-xs px-2 py-1 rounded-full">8 attending</div>
</div>
</div>
<div className="w-48 h-48 bg-white rounded-xl p-2 shadow-inner relative overflow-hidden flex items-center justify-center">
<QRCodeSVG value="https://www.qrmaster.net" size={170} fgColor="#6264A7" level="Q" />
</div>
{/* Floating Badge */}
<div className="absolute -bottom-6 -left-6 bg-white py-3 px-5 rounded-xl shadow-xl flex items-center gap-3 transform transition-transform hover:scale-105 duration-300">
<div className="bg-violet-100 p-2 rounded-full">
<Video className="w-5 h-5 text-[#6264A7]" />
</div>
<div className="text-left">
<div className="text-[10px] text-slate-400 font-bold uppercase tracking-wider">Status</div>
<div className="text-sm font-bold text-slate-900">Ready to Join</div>
</div>
</div>
</div>
</div>
</div>
</section>
{/* GENERATOR SECTION */}
<section className="py-12 px-4 sm:px-6 lg:px-8 -mt-8">
<TeamsGenerator />
</section>
{/* HOW IT WORKS */}
<section className="py-16 px-4 sm:px-6 lg:px-8 bg-white">
<div className="max-w-4xl mx-auto">
<h2 className="text-3xl font-bold text-slate-900 text-center mb-12">
How Teams QR Codes Work
</h2>
<div className="grid md:grid-cols-4 gap-8">
<article className="text-center">
<div className="w-12 h-12 rounded-2xl bg-[#6264A7]/10 flex items-center justify-center mx-auto mb-4">
<Video className="w-6 h-6 text-[#6264A7]" />
</div>
<h3 className="font-bold text-slate-900 mb-2">1. Get Link</h3>
<p className="text-slate-600 text-xs leading-relaxed">Copy your Teams meeting URL.</p>
</article>
<article className="text-center">
<div className="w-12 h-12 rounded-2xl bg-[#6264A7]/10 flex items-center justify-center mx-auto mb-4">
<Shield className="w-6 h-6 text-[#6264A7]" />
</div>
<h3 className="font-bold text-slate-900 mb-2">2. Paste</h3>
<p className="text-slate-600 text-xs leading-relaxed">Paste into the generator.</p>
</article>
<article className="text-center">
<div className="w-12 h-12 rounded-2xl bg-[#6264A7]/10 flex items-center justify-center mx-auto mb-4">
<Download className="w-6 h-6 text-[#6264A7]" />
</div>
<h3 className="font-bold text-slate-900 mb-2">3. Download</h3>
<p className="text-slate-600 text-xs leading-relaxed">Save your QR code.</p>
</article>
<article className="text-center">
<div className="w-12 h-12 rounded-2xl bg-[#6264A7]/10 flex items-center justify-center mx-auto mb-4">
<Share2 className="w-6 h-6 text-[#6264A7]" />
</div>
<h3 className="font-bold text-slate-900 mb-2">4. Display</h3>
<p className="text-slate-600 text-xs leading-relaxed">Put in meeting rooms or invites.</p>
</article>
</div>
</div>
</section>
{/* RELATED TOOLS */}
<RelatedTools />
{/* FAQ SECTION */}
<section className="py-16 px-4 sm:px-6 lg:px-8" style={{ backgroundColor: '#EBEBDF' }}>
<div className="max-w-3xl mx-auto">
<h2 className="text-3xl font-bold text-slate-900 text-center mb-4">
Frequently Asked Questions
</h2>
<p className="text-slate-600 text-center mb-10">
Common questions about Teams QR codes.
</p>
<div className="space-y-4">
<FaqItem
question="What happens when someone scans the QR code?"
answer="Microsoft Teams opens and the user is prompted to join the meeting. Works on desktop, mobile, and web browser."
/>
<FaqItem
question="Does it work for recurring meetings?"
answer="Yes! If your recurring meeting uses the same meeting link, the QR code will work for all sessions."
/>
<FaqItem
question="Can guests without Teams accounts join?"
answer="Yes. Guests can join Teams meetings via the web browser without needing a Microsoft account."
/>
<FaqItem
question="What about meeting rooms with digital displays?"
answer="Perfect for that! Display the QR code on your room's screen so attendees can scan to join from their devices."
/>
</div>
</div>
</section>
</div>
</>
);
}
function FaqItem({ question, answer }: { question: string; answer: string }) {
return (
<details className="group bg-white rounded-xl shadow-sm border border-slate-200 overflow-hidden">
<summary className="flex items-center justify-between p-5 cursor-pointer list-none text-slate-900 font-semibold hover:bg-slate-50 transition-colors">
{question}
<span className="transition group-open:rotate-180 text-slate-400">
<svg fill="none" height="20" stroke="currentColor" strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" viewBox="0 0 24 24" width="20">
<path d="M6 9l6 6 6-6" />
</svg>
</span>
</summary>
<div className="text-slate-600 px-5 pb-5 pt-0 leading-relaxed text-sm">
{answer}
</div>
</details>
);
}
import React from 'react';
import type { Metadata } from 'next';
import TeamsGenerator from './TeamsGenerator';
import { Users, Shield, Zap, Video, MessageCircle, Download, Share2 } from 'lucide-react';
import { QRCodeSVG } from 'qrcode.react';
import { ToolBreadcrumb } from '@/components/seo/BreadcrumbSchema';
import { RelatedTools } from '@/components/marketing/RelatedTools';
import { generateSoftwareAppSchema, generateFaqSchema } from '@/lib/schema-utils';
// SEO Optimized Metadata
export const metadata: Metadata = {
title: {
absolute: 'Free Microsoft Teams QR Code Generator | Join Meetings | QR Master',
},
description: 'Create a QR code for your Microsoft Teams meeting. Teams QR Code erstellen. Attendees scan to join instantly. For hybrid meetings & office displays.',
keywords: ['teams qr code', 'microsoft teams meeting qr', 'join teams qr code', 'meeting room qr', 'teams invitation qr', 'hybrid meeting qr code', 'microsoft teams qr code erstellen', 'teams meeting qr code', 'teams besprechung qr', 'teams beitreten qr'],
alternates: {
canonical: 'https://www.qrmaster.net/tools/teams-qr-code',
},
openGraph: {
title: 'Free Microsoft Teams QR Code Generator | QR Master',
description: 'Generate QR codes for Teams meetings. One scan to join instantly.',
type: 'website',
url: 'https://www.qrmaster.net/tools/teams-qr-code',
images: [{ url: '/og-teams-generator.png', width: 1200, height: 630 }],
},
twitter: {
card: 'summary_large_image',
title: 'Free Microsoft Teams QR Code Generator',
description: 'Create Teams meeting QR codes. Instant and free.',
},
robots: {
index: true,
follow: true,
},
};
// JSON-LD Structured Data
const jsonLd = {
'@context': 'https://schema.org',
'@graph': [
generateSoftwareAppSchema(
'Microsoft Teams QR Code Generator',
'Generate QR codes that let people join your Microsoft Teams meeting with one scan.',
'/og-teams-generator.png',
'BusinessApplication'
),
{
'@type': 'HowTo',
name: 'How to Create a Microsoft Teams QR Code',
description: 'Create a QR code for joining Teams meetings.',
step: [
{
'@type': 'HowToStep',
position: 1,
name: 'Copy Meeting Link',
text: 'Copy the Teams meeting URL from your calendar invitation.',
},
{
'@type': 'HowToStep',
position: 2,
name: 'Paste Link',
text: 'Paste the meeting link into the generator.',
},
{
'@type': 'HowToStep',
position: 3,
name: 'Customize',
text: 'Choose Teams colors and add a frame label.',
},
{
'@type': 'HowToStep',
position: 4,
name: 'Download',
text: 'Download your QR code and display it in your meeting room.',
},
],
totalTime: 'PT30S',
},
generateFaqSchema({
'What happens when someone scans the QR code?': {
question: 'What happens when someone scans the QR code?',
answer: 'Microsoft Teams opens and the user is prompted to join the meeting. Works on desktop, mobile, and web.',
},
'Does it work for recurring meetings?': {
question: 'Does it work for recurring meetings?',
answer: 'Yes! If your recurring meeting uses the same meeting link, the QR code will work for all sessions.',
},
'Can guests without Teams accounts join?': {
question: 'Can guests without Teams accounts join?',
answer: 'Yes. Guests can join Teams meetings via the web browser without needing a Microsoft account.',
},
'Is this for personal or business Teams?': {
question: 'Is this for personal or business Teams?',
answer: 'Both! Works with Microsoft Teams for work, school, and personal accounts.',
},
}),
],
};
export default function TeamsQRCodePage() {
return (
<>
<script
type="application/ld+json"
dangerouslySetInnerHTML={{ __html: JSON.stringify(jsonLd) }}
/>
<ToolBreadcrumb toolName="Teams QR Code Generator" toolSlug="teams-qr-code" />
<div className="min-h-screen" style={{ backgroundColor: '#EBEBDF' }}>
{/* HERO SECTION */}
<section className="relative pt-20 pb-20 lg:pt-32 lg:pb-32 px-4 sm:px-6 lg:px-8 overflow-hidden" style={{ backgroundColor: '#6264A7' }}>
<div className="absolute inset-0 opacity-10">
<svg className="w-full h-full" viewBox="0 0 100 100" preserveAspectRatio="none">
<path d="M0 100 C 20 0 50 0 100 100 Z" fill="url(#grad1)" />
<defs>
<linearGradient id="grad1" x1="0%" y1="0%" x2="100%" y2="0%">
<stop offset="0%" style={{ stopColor: 'white', stopOpacity: 1 }} />
<stop offset="100%" style={{ stopColor: 'white', stopOpacity: 0 }} />
</linearGradient>
</defs>
</svg>
</div>
<div className="max-w-7xl mx-auto grid lg:grid-cols-2 gap-12 items-center relative z-10">
<div className="text-center lg:text-left">
<div className="inline-flex items-center gap-2 px-3 py-1 rounded-full bg-white/10 text-white/90 text-sm font-medium mb-6 backdrop-blur-sm border border-white/10 hover:bg-white/20 transition-colors cursor-default">
<span className="flex h-2 w-2 relative">
<span className="animate-ping absolute inline-flex h-full w-full rounded-full bg-white opacity-75"></span>
<span className="relative inline-flex rounded-full h-2 w-2 bg-white"></span>
</span>
Free Tool — No Signup Required
</div>
<h1 className="text-4xl md:text-5xl lg:text-6xl font-extrabold text-white tracking-tight leading-tight mb-6">
Join Meetings with <br className="hidden lg:block" />
<span className="text-transparent bg-clip-text bg-gradient-to-r from-violet-200 to-white">Teams QR Codes</span>
</h1>
<p className="text-lg md:text-xl text-violet-100 max-w-2xl mx-auto lg:mx-0 mb-8 leading-relaxed">
Create QR codes for Microsoft Teams meetings. Attendees scan to join instantly.
<strong className="text-white block sm:inline mt-2 sm:mt-0"> Perfect for hybrid workplaces.</strong>
</p>
<div className="flex flex-wrap justify-center lg:justify-start gap-4 text-sm font-medium text-white/80">
<div className="flex items-center gap-2 bg-white/5 px-4 py-2.5 rounded-xl border border-white/5 backdrop-blur-sm">
<Video className="w-4 h-4 text-white" />
Meeting Links
</div>
<div className="flex items-center gap-2 bg-white/5 px-4 py-2.5 rounded-xl border border-white/5 backdrop-blur-sm">
<MessageCircle className="w-4 h-4 text-white" />
Chat Links
</div>
<div className="flex items-center gap-2 bg-white/5 px-4 py-2.5 rounded-xl border border-white/5 backdrop-blur-sm">
<Zap className="w-4 h-4 text-amber-300" />
Instant Join
</div>
</div>
</div>
{/* Visual Abstract */}
<div className="hidden lg:flex relative items-center justify-center min-h-[400px]">
<div className="absolute w-[500px] h-[500px] bg-violet-400/30 rounded-full blur-[100px] -top-20 -right-20 animate-pulse" />
<div className="relative w-80 h-96 bg-white/5 backdrop-blur-xl border border-white/20 rounded-3xl shadow-2xl flex flex-col items-center justify-center p-8 transform rotate-3 hover:rotate-0 transition-all duration-700 group">
<div className="absolute inset-0 bg-gradient-to-br from-white/10 to-transparent rounded-3xl" />
{/* Meeting Card Mock */}
<div className="w-full bg-white rounded-xl shadow-lg p-4 mb-6 relative overflow-hidden">
<div className="flex items-center gap-3 mb-3">
<div className="w-10 h-10 bg-[#6264A7] rounded-lg flex items-center justify-center">
<Users className="w-5 h-5 text-white" />
</div>
<div>
<div className="font-bold text-slate-900 text-sm">Team Standup</div>
<div className="text-xs text-slate-600">Daily at 9:00 AM</div>
</div>
</div>
<div className="flex gap-2">
<div className="bg-green-100 text-green-700 text-xs px-2 py-1 rounded-full">Live Now</div>
<div className="bg-slate-100 text-slate-600 text-xs px-2 py-1 rounded-full">8 attending</div>
</div>
</div>
<div className="w-48 h-48 bg-white rounded-xl p-2 shadow-inner relative overflow-hidden flex items-center justify-center">
<QRCodeSVG value="https://www.qrmaster.net" size={170} fgColor="#6264A7" level="Q" />
</div>
{/* Floating Badge */}
<div className="absolute -bottom-6 -left-6 bg-white py-3 px-5 rounded-xl shadow-xl flex items-center gap-3 transform transition-transform hover:scale-105 duration-300">
<div className="bg-violet-100 p-2 rounded-full">
<Video className="w-5 h-5 text-[#6264A7]" />
</div>
<div className="text-left">
<div className="text-[10px] text-slate-400 font-bold uppercase tracking-wider">Status</div>
<div className="text-sm font-bold text-slate-900">Ready to Join</div>
</div>
</div>
</div>
</div>
</div>
</section>
{/* GENERATOR SECTION */}
<section className="py-12 px-4 sm:px-6 lg:px-8 -mt-8">
<TeamsGenerator />
</section>
{/* HOW IT WORKS */}
<section className="py-16 px-4 sm:px-6 lg:px-8 bg-white">
<div className="max-w-4xl mx-auto">
<h2 className="text-3xl font-bold text-slate-900 text-center mb-12">
How Teams QR Codes Work
</h2>
<div className="grid md:grid-cols-4 gap-8">
<article className="text-center">
<div className="w-12 h-12 rounded-2xl bg-[#6264A7]/10 flex items-center justify-center mx-auto mb-4">
<Video className="w-6 h-6 text-[#6264A7]" />
</div>
<h3 className="font-bold text-slate-900 mb-2">1. Get Link</h3>
<p className="text-slate-600 text-xs leading-relaxed">Copy your Teams meeting URL.</p>
</article>
<article className="text-center">
<div className="w-12 h-12 rounded-2xl bg-[#6264A7]/10 flex items-center justify-center mx-auto mb-4">
<Shield className="w-6 h-6 text-[#6264A7]" />
</div>
<h3 className="font-bold text-slate-900 mb-2">2. Paste</h3>
<p className="text-slate-600 text-xs leading-relaxed">Paste into the generator.</p>
</article>
<article className="text-center">
<div className="w-12 h-12 rounded-2xl bg-[#6264A7]/10 flex items-center justify-center mx-auto mb-4">
<Download className="w-6 h-6 text-[#6264A7]" />
</div>
<h3 className="font-bold text-slate-900 mb-2">3. Download</h3>
<p className="text-slate-600 text-xs leading-relaxed">Save your QR code.</p>
</article>
<article className="text-center">
<div className="w-12 h-12 rounded-2xl bg-[#6264A7]/10 flex items-center justify-center mx-auto mb-4">
<Share2 className="w-6 h-6 text-[#6264A7]" />
</div>
<h3 className="font-bold text-slate-900 mb-2">4. Display</h3>
<p className="text-slate-600 text-xs leading-relaxed">Put in meeting rooms or invites.</p>
</article>
</div>
</div>
</section>
{/* RELATED TOOLS */}
<RelatedTools />
{/* FAQ SECTION */}
<section className="py-16 px-4 sm:px-6 lg:px-8" style={{ backgroundColor: '#EBEBDF' }}>
<div className="max-w-3xl mx-auto">
<h2 className="text-3xl font-bold text-slate-900 text-center mb-4">
Frequently Asked Questions
</h2>
<p className="text-slate-600 text-center mb-10">
Common questions about Teams QR codes.
</p>
<div className="space-y-4">
<FaqItem
question="What happens when someone scans the QR code?"
answer="Microsoft Teams opens and the user is prompted to join the meeting. Works on desktop, mobile, and web browser."
/>
<FaqItem
question="Does it work for recurring meetings?"
answer="Yes! If your recurring meeting uses the same meeting link, the QR code will work for all sessions."
/>
<FaqItem
question="Can guests without Teams accounts join?"
answer="Yes. Guests can join Teams meetings via the web browser without needing a Microsoft account."
/>
<FaqItem
question="What about meeting rooms with digital displays?"
answer="Perfect for that! Display the QR code on your room's screen so attendees can scan to join from their devices."
/>
</div>
</div>
</section>
</div>
</>
);
}
function FaqItem({ question, answer }: { question: string; answer: string }) {
return (
<details className="group bg-white rounded-xl shadow-sm border border-slate-200 overflow-hidden">
<summary className="flex items-center justify-between p-5 cursor-pointer list-none text-slate-900 font-semibold hover:bg-slate-50 transition-colors">
{question}
<span className="transition group-open:rotate-180 text-slate-400">
<svg fill="none" height="20" stroke="currentColor" strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" viewBox="0 0 24 24" width="20">
<path d="M6 9l6 6 6-6" />
</svg>
</span>
</summary>
<div className="text-slate-600 px-5 pb-5 pt-0 leading-relaxed text-sm">
{answer}
</div>
</details>
);
}

490
src/app/(main)/(marketing)/tools/text-qr-code/TextGenerator.tsx
View File

@@ -1,245 +1,245 @@
'use client';
import React, { useState, useRef } from 'react';
import Link from 'next/link';
import { QRCodeSVG } from 'qrcode.react';
import {
Type,
Download,
Check,
Sparkles,
Copy,
FileText
} from 'lucide-react';
import { Button } from '@/components/ui/Button';
import { cn } from '@/lib/utils';
// Brand Colors
const BRAND = {
paleGrey: '#EBEBDF',
richBlue: '#1A1265',
richBlueLight: '#2A2275',
};
// QR Color Options
const QR_COLORS = [
{ name: 'Classic Black', value: '#000000' },
{ name: 'Deep Blue', value: '#1E40AF' },
{ name: 'Violet', value: '#7C3AED' },
{ name: 'Teal', value: '#0D9488' },
{ name: 'Coral', value: '#F43F5E' },
{ name: 'Amber', value: '#D97706' },
{ name: 'Emerald', value: '#10B981' },
{ name: 'Rose', value: '#F43F5E' },
];
// Frame Options
const FRAME_OPTIONS = [
{ id: 'none', label: 'No Frame' },
{ id: 'scanme', label: 'Scan Me' },
{ id: 'text', label: 'Text' },
{ id: 'message', label: 'Message' },
];
export default function TextGenerator() {
const [text, setText] = useState('');
const [qrColor, setQrColor] = useState(BRAND.richBlue);
const [frameType, setFrameType] = useState('none');
const qrRef = useRef<HTMLDivElement>(null);
const handleDownload = async (format: 'png' | 'svg') => {
if (!qrRef.current) return;
try {
if (format === 'png') {
const { toPng } = await import('html-to-image');
const dataUrl = await toPng(qrRef.current, { cacheBust: true, pixelRatio: 3 });
const link = document.createElement('a');
link.download = `text-qr-code.png`;
link.href = dataUrl;
link.click();
} else {
const svgData = qrRef.current.querySelector('svg')?.outerHTML;
if (svgData) {
const blob = new Blob([svgData], { type: 'image/svg+xml;charset=utf-8' });
const url = URL.createObjectURL(blob);
const link = document.createElement('a');
link.href = url;
link.download = `text-qr-code.svg`;
link.click();
}
}
} catch (err) {
console.error('Download failed', err);
}
};
const getFrameLabel = () => {
const frame = FRAME_OPTIONS.find(f => f.id === frameType);
return frame?.id !== 'none' ? frame?.label : null;
};
return (
<div className="w-full max-w-5xl mx-auto px-4 md:px-6">
{/* Main Generator Card */}
<div className="bg-white rounded-3xl shadow-2xl shadow-slate-900/10 overflow-hidden border border-slate-100">
<div className="grid lg:grid-cols-2">
{/* LEFT: Input Section */}
<div className="p-6 md:p-8 lg:p-10 space-y-8 border-r border-slate-100">
{/* Text Input */}
<div className="space-y-6">
<h2 className="text-lg font-bold text-slate-900 flex items-center gap-2">
<Type className="w-5 h-5 text-[#1A1265]" />
Enter Content
</h2>
<div className="relative">
<textarea
className="w-full h-40 p-4 pb-8 border border-slate-200 rounded-xl focus:outline-none focus:ring-2 focus:ring-[#1A1265] resize-none text-slate-800 placeholder:text-slate-400"
placeholder="Type your text here (up to 300 characters)..."
maxLength={300}
value={text}
onChange={(e) => setText(e.target.value)}
/>
<div className="absolute bottom-3 right-3 text-xs text-slate-400 font-medium">
{text.length}/300
</div>
</div>
</div>
<div className="border-t border-slate-100"></div>
{/* Design Options */}
<div className="space-y-6">
<h2 className="text-lg font-bold text-slate-900 flex items-center gap-2">
<Sparkles className="w-5 h-5 text-[#1A1265]" />
Design Options
</h2>
{/* Color Picker */}
<div>
<label className="block text-sm font-medium text-slate-700 mb-3">QR Code Color</label>
<div className="flex flex-wrap gap-2">
{QR_COLORS.map((c) => (
<button
key={c.name}
onClick={() => setQrColor(c.value)}
className={cn(
"w-9 h-9 rounded-full border-2 flex items-center justify-center transition-all hover:scale-110",
qrColor === c.value ? "border-slate-900 ring-2 ring-offset-2 ring-slate-200" : "border-white shadow-md"
)}
style={{ backgroundColor: c.value }}
aria-label={`Select ${c.name}`}
title={c.name}
>
{qrColor === c.value && <Check className="w-4 h-4 text-white" strokeWidth={3} />}
</button>
))}
</div>
</div>
{/* Frame Selector */}
<div>
<label className="block text-sm font-medium text-slate-700 mb-3">Frame Label</label>
<div className="grid grid-cols-2 sm:grid-cols-4 gap-2">
{FRAME_OPTIONS.map((frame) => (
<button
key={frame.id}
onClick={() => setFrameType(frame.id)}
className={cn(
"py-2.5 px-3 rounded-lg text-sm font-medium transition-all border",
frameType === frame.id
? "bg-[#1A1265] text-white border-[#1A1265]"
: "bg-slate-50 text-slate-600 border-slate-200 hover:border-slate-300"
)}
>
{frame.label}
</button>
))}
</div>
</div>
</div>
</div>
{/* RIGHT: Preview Section */}
<div className="p-6 md:p-8 lg:p-10 flex flex-col items-center justify-center" style={{ backgroundColor: BRAND.paleGrey }}>
{/* QR Card with Frame */}
<div
ref={qrRef}
className="bg-white rounded-3xl shadow-xl p-6 sm:p-8 flex flex-col items-center w-full max-w-[320px]"
>
{/* Frame Label */}
{getFrameLabel() && (
<div
className="mb-5 px-8 py-2.5 rounded-full text-white font-bold text-sm tracking-widest uppercase shadow-md"
style={{ backgroundColor: qrColor }}
>
{getFrameLabel()}
</div>
)}
{/* QR Code */}
<div className="bg-white">
<QRCodeSVG
value={text || "Your Text Here"}
size={240}
level="M"
includeMargin={false}
fgColor={qrColor}
/>
</div>
{/* Text Info Preview */}
<div className="mt-6 text-center max-w-[260px]">
<h3 className="font-bold text-slate-900 text-lg flex items-center justify-center gap-2">
<FileText className="w-4 h-4 text-slate-400" />
Plain Text
</h3>
</div>
</div>
{/* Download Buttons */}
<div className="flex items-center gap-3 mt-8">
<Button
onClick={() => handleDownload('png')}
className="bg-[#1A1265] hover:bg-[#2A2275] text-white shadow-lg"
>
<Download className="w-4 h-4 mr-2" />
Download PNG
</Button>
<Button
onClick={() => handleDownload('svg')}
variant="outline"
className="border-slate-300 hover:bg-white"
>
<Download className="w-4 h-4 mr-2" />
SVG
</Button>
</div>
<p className="text-xs text-slate-600 mt-4 text-center">
Your text stays on your device. Nothing is sent to servers.
</p>
</div>
</div>
</div>
{/* Upsell Banner */}
<div className="mt-8 bg-gradient-to-r from-[#1A1265] to-[#2A2275] rounded-2xl p-6 flex flex-col sm:flex-row items-center justify-between gap-4">
<div className="text-white text-center sm:text-left">
<h3 className="font-bold text-lg">Want to track who scans your QR code?</h3>
<p className="text-white/80 text-sm mt-1">Dynamic QR codes give you scan analytics and let you edit content anytime.</p>
</div>
<Link href="/signup">
<Button className="bg-white text-[#1A1265] hover:bg-slate-100 shrink-0 shadow-lg">
Try Dynamic Codes
</Button>
</Link>
</div>
</div>
);
}
'use client';
import React, { useState, useRef } from 'react';
import Link from 'next/link';
import { QRCodeSVG } from 'qrcode.react';
import {
Type,
Download,
Check,
Sparkles,
Copy,
FileText
} from 'lucide-react';
import { Button } from '@/components/ui/Button';
import { cn } from '@/lib/utils';
// Brand Colors
const BRAND = {
paleGrey: '#EBEBDF',
richBlue: '#1A1265',
richBlueLight: '#2A2275',
};
// QR Color Options
const QR_COLORS = [
{ name: 'Classic Black', value: '#000000' },
{ name: 'Deep Blue', value: '#1E40AF' },
{ name: 'Violet', value: '#7C3AED' },
{ name: 'Teal', value: '#0D9488' },
{ name: 'Coral', value: '#F43F5E' },
{ name: 'Amber', value: '#D97706' },
{ name: 'Emerald', value: '#10B981' },
{ name: 'Rose', value: '#F43F5E' },
];
// Frame Options
const FRAME_OPTIONS = [
{ id: 'none', label: 'No Frame' },
{ id: 'scanme', label: 'Scan Me' },
{ id: 'text', label: 'Text' },
{ id: 'message', label: 'Message' },
];
export default function TextGenerator() {
const [text, setText] = useState('');
const [qrColor, setQrColor] = useState(BRAND.richBlue);
const [frameType, setFrameType] = useState('none');
const qrRef = useRef<HTMLDivElement>(null);
const handleDownload = async (format: 'png' | 'svg') => {
if (!qrRef.current) return;
try {
if (format === 'png') {
const { toPng } = await import('html-to-image');
const dataUrl = await toPng(qrRef.current, { cacheBust: true, pixelRatio: 3 });
const link = document.createElement('a');
link.download = `text-qr-code.png`;
link.href = dataUrl;
link.click();
} else {
const svgData = qrRef.current.querySelector('svg')?.outerHTML;
if (svgData) {
const blob = new Blob([svgData], { type: 'image/svg+xml;charset=utf-8' });
const url = URL.createObjectURL(blob);
const link = document.createElement('a');
link.href = url;
link.download = `text-qr-code.svg`;
link.click();
}
}
} catch (err) {
console.error('Download failed', err);
}
};
const getFrameLabel = () => {
const frame = FRAME_OPTIONS.find(f => f.id === frameType);
return frame?.id !== 'none' ? frame?.label : null;
};
return (
<div className="w-full max-w-5xl mx-auto px-4 md:px-6">
{/* Main Generator Card */}
<div className="bg-white rounded-3xl shadow-2xl shadow-slate-900/10 overflow-hidden border border-slate-100">
<div className="grid lg:grid-cols-2">
{/* LEFT: Input Section */}
<div className="p-6 md:p-8 lg:p-10 space-y-8 border-r border-slate-100">
{/* Text Input */}
<div className="space-y-6">
<h2 className="text-lg font-bold text-slate-900 flex items-center gap-2">
<Type className="w-5 h-5 text-[#1A1265]" />
Enter Content
</h2>
<div className="relative">
<textarea
className="w-full h-40 p-4 pb-8 border border-slate-200 rounded-xl focus:outline-none focus:ring-2 focus:ring-[#1A1265] resize-none text-slate-800 placeholder:text-slate-400"
placeholder="Type your text here (up to 300 characters)..."
maxLength={300}
value={text}
onChange={(e) => setText(e.target.value)}
/>
<div className="absolute bottom-3 right-3 text-xs text-slate-400 font-medium">
{text.length}/300
</div>
</div>
</div>
<div className="border-t border-slate-100"></div>
{/* Design Options */}
<div className="space-y-6">
<h2 className="text-lg font-bold text-slate-900 flex items-center gap-2">
<Sparkles className="w-5 h-5 text-[#1A1265]" />
Design Options
</h2>
{/* Color Picker */}
<div>
<label className="block text-sm font-medium text-slate-700 mb-3">QR Code Color</label>
<div className="flex flex-wrap gap-2">
{QR_COLORS.map((c) => (
<button
key={c.name}
onClick={() => setQrColor(c.value)}
className={cn(
"w-9 h-9 rounded-full border-2 flex items-center justify-center transition-all hover:scale-110",
qrColor === c.value ? "border-slate-900 ring-2 ring-offset-2 ring-slate-200" : "border-white shadow-md"
)}
style={{ backgroundColor: c.value }}
aria-label={`Select ${c.name}`}
title={c.name}
>
{qrColor === c.value && <Check className="w-4 h-4 text-white" strokeWidth={3} />}
</button>
))}
</div>
</div>
{/* Frame Selector */}
<div>
<label className="block text-sm font-medium text-slate-700 mb-3">Frame Label</label>
<div className="grid grid-cols-2 sm:grid-cols-4 gap-2">
{FRAME_OPTIONS.map((frame) => (
<button
key={frame.id}
onClick={() => setFrameType(frame.id)}
className={cn(
"py-2.5 px-3 rounded-lg text-sm font-medium transition-all border",
frameType === frame.id
? "bg-[#1A1265] text-white border-[#1A1265]"
: "bg-slate-50 text-slate-600 border-slate-200 hover:border-slate-300"
)}
>
{frame.label}
</button>
))}
</div>
</div>
</div>
</div>
{/* RIGHT: Preview Section */}
<div className="p-6 md:p-8 lg:p-10 flex flex-col items-center justify-center" style={{ backgroundColor: BRAND.paleGrey }}>
{/* QR Card with Frame */}
<div
ref={qrRef}
className="bg-white rounded-3xl shadow-xl p-6 sm:p-8 flex flex-col items-center w-full max-w-[320px]"
>
{/* Frame Label */}
{getFrameLabel() && (
<div
className="mb-5 px-8 py-2.5 rounded-full text-white font-bold text-sm tracking-widest uppercase shadow-md"
style={{ backgroundColor: qrColor }}
>
{getFrameLabel()}
</div>
)}
{/* QR Code */}
<div className="bg-white">
<QRCodeSVG
value={text || "Your Text Here"}
size={240}
level="M"
includeMargin={false}
fgColor={qrColor}
/>
</div>
{/* Text Info Preview */}
<div className="mt-6 text-center max-w-[260px]">
<h3 className="font-bold text-slate-900 text-lg flex items-center justify-center gap-2">
<FileText className="w-4 h-4 text-slate-400" />
Plain Text
</h3>
</div>
</div>
{/* Download Buttons */}
<div className="flex items-center gap-3 mt-8">
<Button
onClick={() => handleDownload('png')}
className="bg-[#1A1265] hover:bg-[#2A2275] text-white shadow-lg"
>
<Download className="w-4 h-4 mr-2" />
Download PNG
</Button>
<Button
onClick={() => handleDownload('svg')}
variant="outline"
className="border-slate-300 hover:bg-white"
>
<Download className="w-4 h-4 mr-2" />
SVG
</Button>
</div>
<p className="text-xs text-slate-600 mt-4 text-center">
Your text stays on your device. Nothing is sent to servers.
</p>
</div>
</div>
</div>
{/* Upsell Banner */}
<div className="mt-8 bg-gradient-to-r from-[#1A1265] to-[#2A2275] rounded-2xl p-6 flex flex-col sm:flex-row items-center justify-between gap-4">
<div className="text-white text-center sm:text-left">
<h3 className="font-bold text-lg">Want to track who scans your QR code?</h3>
<p className="text-white/80 text-sm mt-1">Dynamic QR codes give you scan analytics and let you edit content anytime.</p>
</div>
<Link href="/signup">
<Button className="bg-white text-[#1A1265] hover:bg-slate-100 shrink-0 shadow-lg">
Try Dynamic Codes
</Button>
</Link>
</div>
</div>
);
}

648
src/app/(main)/(marketing)/tools/text-qr-code/page.tsx
View File

@@ -1,324 +1,324 @@
import React from 'react';
import type { Metadata } from 'next';
import TextGenerator from './TextGenerator';
import { Type, Shield, Zap, Smartphone, FileText, QrCode, Download, Share2 } from 'lucide-react';
import { QRCodeSVG } from 'qrcode.react';
import { ToolBreadcrumb } from '@/components/seo/BreadcrumbSchema';
import { RelatedTools } from '@/components/marketing/RelatedTools';
import { generateSoftwareAppSchema, generateFaqSchema } from '@/lib/schema-utils';
// SEO Optimized Metadata
export const metadata: Metadata = {
title: {
absolute: 'Free Text QR Code Generator | Text zu QR Code | QR Master',
},
description: 'Create a QR code for any plain text message. Erstelle einen Text QR Code kostenlos. Works offline & 100% private. Nachricht als QR Code teilen.',
keywords: ['text qr code', 'qr code text generator', 'message to qr code', 'offline qr code', 'text qr generator', 'free qr code', 'text zu qr code', 'qr code text erstellen', 'nachricht in qr code', 'textnachricht qr code', 'geheimnachricht qr code'],
alternates: {
canonical: 'https://www.qrmaster.net/tools/text-qr-code',
},
openGraph: {
title: 'Free Text QR Code Generator | QR Master',
description: 'Turn any text into a QR code instantly. No signup required. 100% text privacy.',
type: 'website',
url: 'https://www.qrmaster.net/tools/text-qr-code',
images: [{ url: '/og-text-generator.png', width: 1200, height: 630 }],
},
twitter: {
card: 'summary_large_image',
title: 'Free Text QR Code Generator',
description: 'Create QR codes for text. Instant, free, and private.',
},
robots: {
index: true,
follow: true,
},
};
// JSON-LD Structured Data
const jsonLd = {
'@context': 'https://schema.org',
'@graph': [
generateSoftwareAppSchema(
'Text QR Code Generator',
'Generate QR codes for plain text messages. Works offline once generated. No data collection.',
'/og-text-generator.png'
),
{
'@type': 'HowTo',
name: 'How to Create a Text QR Code',
description: 'Turn any plain text into a scannable QR code.',
step: [
{
'@type': 'HowToStep',
position: 1,
name: 'Enter Content',
text: 'Type or paste your text message into the input field.',
},
{
'@type': 'HowToStep',
position: 2,
name: 'Customize Design',
text: 'Choose a color and add a frame label like "Scan Me" or "Read".',
},
{
'@type': 'HowToStep',
position: 3,
name: 'Download QR Code',
text: 'Download your high-quality QR code in PNG or SVG format.',
},
{
'@type': 'HowToStep',
position: 4,
name: 'Test',
text: 'Scan the code to ensure the text appears correctly.',
},
{
'@type': 'HowToStep',
position: 5,
name: 'Share',
text: 'Print it or display it where you want people to read the message.',
},
],
totalTime: 'PT30S',
},
generateFaqSchema({
'Is there a character limit?': {
question: 'Is there a character limit?',
answer: 'Yes, we recommend keeping it under 300 characters for optimal scanning. While QR codes can hold more, more text makes the code denser and harder to scan.',
},
'Do I need internet to scan a Text QR code?': {
question: 'Do I need internet to scan a Text QR code?',
answer: 'No. Text QR codes work completely offline. The text content is embedded directly into the QR code pattern.',
},
'Is my text private?': {
question: 'Is my text private?',
answer: 'Yes. This generator runs 100% in your browser. We do not store or see the text you type.',
},
'How do I scan a text QR code?': {
question: 'How do I scan a text QR code?',
answer: 'Open your phone camera or a QR scanner app and point it at the code. The text will appear on your screen automatically.',
},
'Can I edit the text later?': {
question: 'Can I edit the text later?',
answer: 'No, this is a static QR code. The text is permanent. If you need to change it, you must create a new QR code.',
},
}),
],
};
export default function TextQRCodePage() {
return (
<>
<script
type="application/ld+json"
dangerouslySetInnerHTML={{ __html: JSON.stringify(jsonLd) }}
/>
<ToolBreadcrumb toolName="Text QR Code Generator" toolSlug="text-qr-code" />
<div className="min-h-screen" style={{ backgroundColor: '#EBEBDF' }}>
{/* HERO SECTION */}
<section className="relative pt-20 pb-20 lg:pt-32 lg:pb-32 px-4 sm:px-6 lg:px-8 overflow-hidden" style={{ backgroundColor: '#1A1265' }}>
<div className="absolute inset-0 opacity-10">
<svg className="w-full h-full" viewBox="0 0 100 100" preserveAspectRatio="none">
<path d="M0 100 C 20 0 50 0 100 100 Z" fill="url(#grad1)" />
<defs>
<linearGradient id="grad1" x1="0%" y1="0%" x2="100%" y2="0%">
<stop offset="0%" style={{ stopColor: 'white', stopOpacity: 1 }} />
<stop offset="100%" style={{ stopColor: 'white', stopOpacity: 0 }} />
</linearGradient>
</defs>
</svg>
</div>
<div className="max-w-7xl mx-auto grid lg:grid-cols-2 gap-12 items-center relative z-10">
<div className="text-center lg:text-left">
<div className="inline-flex items-center gap-2 px-3 py-1 rounded-full bg-white/10 text-white/90 text-sm font-medium mb-6 backdrop-blur-sm border border-white/10 hover:bg-white/20 transition-colors cursor-default">
<span className="flex h-2 w-2 relative">
<span className="animate-ping absolute inline-flex h-full w-full rounded-full bg-emerald-400 opacity-75"></span>
<span className="relative inline-flex rounded-full h-2 w-2 bg-emerald-400"></span>
</span>
Free Tool — No Signup Required
</div>
<h1 className="text-4xl md:text-5xl lg:text-6xl font-extrabold text-white tracking-tight leading-tight mb-6">
Turn Text content into <br className="hidden lg:block" />
<span className="text-transparent bg-clip-text bg-gradient-to-r from-emerald-400 to-cyan-400">Scannable QR Codes</span>
</h1>
<p className="text-lg md:text-xl text-indigo-100 max-w-2xl mx-auto lg:mx-0 mb-8 leading-relaxed">
Share notes, codes, keys, or messages instantly. Scan to read without internet.
<strong className="text-white block sm:inline mt-2 sm:mt-0"> 100% Private.</strong>
</p>
<div className="flex flex-wrap justify-center lg:justify-start gap-4 text-sm font-medium text-white/80">
<div className="flex items-center gap-2 bg-white/5 px-4 py-2.5 rounded-xl border border-white/5 backdrop-blur-sm">
<Shield className="w-4 h-4 text-emerald-400" />
No Data Storage
</div>
<div className="flex items-center gap-2 bg-white/5 px-4 py-2.5 rounded-xl border border-white/5 backdrop-blur-sm">
<Zap className="w-4 h-4 text-amber-400" />
Instant Create
</div>
<div className="flex items-center gap-2 bg-white/5 px-4 py-2.5 rounded-xl border border-white/5 backdrop-blur-sm">
<Smartphone className="w-4 h-4 text-purple-400" />
Offline Readable
</div>
</div>
</div>
{/* Visual Abstract */}
<div className="hidden lg:flex relative items-center justify-center min-h-[400px]">
<div className="absolute w-[500px] h-[500px] bg-indigo-500/30 rounded-full blur-[100px] -top-20 -right-20 animate-pulse" />
<div className="relative w-80 h-96 bg-white/5 backdrop-blur-xl border border-white/20 rounded-3xl shadow-2xl flex flex-col items-center justify-center p-8 transform rotate-6 hover:rotate-3 transition-all duration-700 group">
<div className="absolute inset-0 bg-gradient-to-br from-white/10 to-transparent rounded-3xl" />
<div className="w-48 h-48 bg-white rounded-xl p-2 shadow-inner mb-6 relative overflow-hidden flex items-center justify-center">
<QRCodeSVG value="https://www.qrmaster.net" size={170} fgColor="#0f172a" level="Q" />
<div className="absolute top-1/2 left-0 w-full h-1 bg-emerald-500 shadow-[0_0_20px_rgba(16,185,129,1)] animate-pulse" />
</div>
<div className="w-full bg-white/10 rounded-xl p-4 backdrop-blur-sm border border-white/10">
<div className="flex items-center gap-3">
<div className="w-8 h-8 rounded-full bg-indigo-500/20 flex items-center justify-center">
<FileText className="w-4 h-4 text-indigo-300" />
</div>
<div className="space-y-1">
<div className="h-1.5 w-20 bg-white/30 rounded-full" />
<div className="h-1.5 w-12 bg-white/20 rounded-full" />
</div>
</div>
</div>
</div>
</div>
</div>
</section>
{/* GENERATOR SECTION */}
<section className="py-12 px-4 sm:px-6 lg:px-8 -mt-8">
<TextGenerator />
</section>
{/* HOW IT WORKS */}
<section className="py-16 px-4 sm:px-6 lg:px-8 bg-white">
<div className="max-w-4xl mx-auto">
<h2 className="text-3xl font-bold text-slate-900 text-center mb-12">
How Text QR Codes Work
</h2>
<div className="grid md:grid-cols-3 lg:grid-cols-5 gap-8">
<article className="text-center">
<div className="w-14 h-14 rounded-2xl bg-[#1A1265]/10 flex items-center justify-center mx-auto mb-4">
<Type className="w-7 h-7 text-[#1A1265]" />
</div>
<h3 className="font-bold text-slate-900 mb-2">1. Enter Text</h3>
<p className="text-slate-600 text-sm">
Type your message, code, or note. It is instantly encoded into the QR pattern.
</p>
</article>
<article className="text-center">
<div className="w-12 h-12 rounded-2xl bg-[#1A1265]/10 flex items-center justify-center mx-auto mb-4">
<Zap className="w-6 h-6 text-[#1A1265]" />
</div>
<h3 className="font-bold text-slate-900 mb-2">2. Customize</h3>
<p className="text-slate-600 text-xs leading-relaxed">
Choose a color and add a call-to-action frame.
</p>
</article>
<article className="text-center">
<div className="w-12 h-12 rounded-2xl bg-[#1A1265]/10 flex items-center justify-center mx-auto mb-4">
<Download className="w-6 h-6 text-[#1A1265]" />
</div>
<h3 className="font-bold text-slate-900 mb-2">3. Download</h3>
<p className="text-slate-600 text-xs leading-relaxed">
Get your ready-to-use QR code.
</p>
</article>
<article className="text-center">
<div className="w-12 h-12 rounded-2xl bg-[#1A1265]/10 flex items-center justify-center mx-auto mb-4">
<Smartphone className="w-6 h-6 text-[#1A1265]" />
</div>
<h3 className="font-bold text-slate-900 mb-2">4. Test</h3>
<p className="text-slate-600 text-xs leading-relaxed">
Point camera to read text.
</p>
</article>
<article className="text-center">
<div className="w-12 h-12 rounded-2xl bg-[#1A1265]/10 flex items-center justify-center mx-auto mb-4">
<Share2 className="w-6 h-6 text-[#1A1265]" />
</div>
<h3 className="font-bold text-slate-900 mb-2">5. Share</h3>
<p className="text-slate-600 text-xs leading-relaxed">
Pass information instantly.
</p>
</article>
</div>
</div>
</section>
{/* RELATED TOOLS */}
<RelatedTools />
{/* FAQ SECTION */}
<section className="py-16 px-4 sm:px-6 lg:px-8" style={{ backgroundColor: '#EBEBDF' }}>
<div className="max-w-3xl mx-auto">
<h2 className="text-3xl font-bold text-slate-900 text-center mb-4">
Frequently Asked Questions
</h2>
<p className="text-slate-600 text-center mb-10">
Common questions about Text QR codes.
</p>
<div className="space-y-4">
<FaqItem
question="How do I scan a text QR code?"
answer="Open your phone camera or a QR scanner app and point it at the code. The text will appear on your screen automatically."
/>
<FaqItem
question="Is there a character limit?"
answer="We recommend keeping it under 300 characters for the best scanning experience. Theoretically, QR codes can hold up to 4,296 characters, but the code becomes very complex and harder to scan with standard phone cameras."
/>
<FaqItem
question="Do I need internet to scan a Text QR code?"
answer="No. Text QR codes are 'static' codes, meaning the data is encoded directly into the image pattern. You can scan and read them completely offline, making them perfect for remote locations or secure environments."
/>
<FaqItem
question="Is my text private?"
answer="Yes. We prioritize your privacy. The generation process happens entirely in your browser using JavaScript. Your text data is never sent to our servers or stored anywhere."
/>
<FaqItem
question="Can I change the text after printing?"
answer="No. Static QR codes are permanent. If you need to change the text later, you must generate a new QR code. For editable content, you would need a Dynamic QR Code (which we also offer)."
/>
</div>
</div>
</section>
</div>
</>
);
}
function FaqItem({ question, answer }: { question: string; answer: string }) {
return (
<details className="group bg-white rounded-xl shadow-sm border border-slate-200 overflow-hidden">
<summary className="flex items-center justify-between p-5 cursor-pointer list-none text-slate-900 font-semibold hover:bg-slate-50 transition-colors">
{question}
<span className="transition group-open:rotate-180 text-slate-400">
<svg fill="none" height="20" stroke="currentColor" strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" viewBox="0 0 24 24" width="20">
<path d="M6 9l6 6 6-6" />
</svg>
</span>
</summary>
<div className="text-slate-600 px-5 pb-5 pt-0 leading-relaxed text-sm">
{answer}
</div>
</details>
);
}
import React from 'react';
import type { Metadata } from 'next';
import TextGenerator from './TextGenerator';
import { Type, Shield, Zap, Smartphone, FileText, QrCode, Download, Share2 } from 'lucide-react';
import { QRCodeSVG } from 'qrcode.react';
import { ToolBreadcrumb } from '@/components/seo/BreadcrumbSchema';
import { RelatedTools } from '@/components/marketing/RelatedTools';
import { generateSoftwareAppSchema, generateFaqSchema } from '@/lib/schema-utils';
// SEO Optimized Metadata
export const metadata: Metadata = {
title: {
absolute: 'Free Text QR Code Generator | Text zu QR Code | QR Master',
},
description: 'Create a QR code for any plain text message. Erstelle einen Text QR Code kostenlos. Works offline & 100% private. Nachricht als QR Code teilen.',
keywords: ['text qr code', 'qr code text generator', 'message to qr code', 'offline qr code', 'text qr generator', 'free qr code', 'text zu qr code', 'qr code text erstellen', 'nachricht in qr code', 'textnachricht qr code', 'geheimnachricht qr code'],
alternates: {
canonical: 'https://www.qrmaster.net/tools/text-qr-code',
},
openGraph: {
title: 'Free Text QR Code Generator | QR Master',
description: 'Turn any text into a QR code instantly. No signup required. 100% text privacy.',
type: 'website',
url: 'https://www.qrmaster.net/tools/text-qr-code',
images: [{ url: '/og-text-generator.png', width: 1200, height: 630 }],
},
twitter: {
card: 'summary_large_image',
title: 'Free Text QR Code Generator',
description: 'Create QR codes for text. Instant, free, and private.',
},
robots: {
index: true,
follow: true,
},
};
// JSON-LD Structured Data
const jsonLd = {
'@context': 'https://schema.org',
'@graph': [
generateSoftwareAppSchema(
'Text QR Code Generator',
'Generate QR codes for plain text messages. Works offline once generated. No data collection.',
'/og-text-generator.png'
),
{
'@type': 'HowTo',
name: 'How to Create a Text QR Code',
description: 'Turn any plain text into a scannable QR code.',
step: [
{
'@type': 'HowToStep',
position: 1,
name: 'Enter Content',
text: 'Type or paste your text message into the input field.',
},
{
'@type': 'HowToStep',
position: 2,
name: 'Customize Design',
text: 'Choose a color and add a frame label like "Scan Me" or "Read".',
},
{
'@type': 'HowToStep',
position: 3,
name: 'Download QR Code',
text: 'Download your high-quality QR code in PNG or SVG format.',
},
{
'@type': 'HowToStep',
position: 4,
name: 'Test',
text: 'Scan the code to ensure the text appears correctly.',
},
{
'@type': 'HowToStep',
position: 5,
name: 'Share',
text: 'Print it or display it where you want people to read the message.',
},
],
totalTime: 'PT30S',
},
generateFaqSchema({
'Is there a character limit?': {
question: 'Is there a character limit?',
answer: 'Yes, we recommend keeping it under 300 characters for optimal scanning. While QR codes can hold more, more text makes the code denser and harder to scan.',
},
'Do I need internet to scan a Text QR code?': {
question: 'Do I need internet to scan a Text QR code?',
answer: 'No. Text QR codes work completely offline. The text content is embedded directly into the QR code pattern.',
},
'Is my text private?': {
question: 'Is my text private?',
answer: 'Yes. This generator runs 100% in your browser. We do not store or see the text you type.',
},
'How do I scan a text QR code?': {
question: 'How do I scan a text QR code?',
answer: 'Open your phone camera or a QR scanner app and point it at the code. The text will appear on your screen automatically.',
},
'Can I edit the text later?': {
question: 'Can I edit the text later?',
answer: 'No, this is a static QR code. The text is permanent. If you need to change it, you must create a new QR code.',
},
}),
],
};
export default function TextQRCodePage() {
return (
<>
<script
type="application/ld+json"
dangerouslySetInnerHTML={{ __html: JSON.stringify(jsonLd) }}
/>
<ToolBreadcrumb toolName="Text QR Code Generator" toolSlug="text-qr-code" />
<div className="min-h-screen" style={{ backgroundColor: '#EBEBDF' }}>
{/* HERO SECTION */}
<section className="relative pt-20 pb-20 lg:pt-32 lg:pb-32 px-4 sm:px-6 lg:px-8 overflow-hidden" style={{ backgroundColor: '#1A1265' }}>
<div className="absolute inset-0 opacity-10">
<svg className="w-full h-full" viewBox="0 0 100 100" preserveAspectRatio="none">
<path d="M0 100 C 20 0 50 0 100 100 Z" fill="url(#grad1)" />
<defs>
<linearGradient id="grad1" x1="0%" y1="0%" x2="100%" y2="0%">
<stop offset="0%" style={{ stopColor: 'white', stopOpacity: 1 }} />
<stop offset="100%" style={{ stopColor: 'white', stopOpacity: 0 }} />
</linearGradient>
</defs>
</svg>
</div>
<div className="max-w-7xl mx-auto grid lg:grid-cols-2 gap-12 items-center relative z-10">
<div className="text-center lg:text-left">
<div className="inline-flex items-center gap-2 px-3 py-1 rounded-full bg-white/10 text-white/90 text-sm font-medium mb-6 backdrop-blur-sm border border-white/10 hover:bg-white/20 transition-colors cursor-default">
<span className="flex h-2 w-2 relative">
<span className="animate-ping absolute inline-flex h-full w-full rounded-full bg-emerald-400 opacity-75"></span>
<span className="relative inline-flex rounded-full h-2 w-2 bg-emerald-400"></span>
</span>
Free Tool — No Signup Required
</div>
<h1 className="text-4xl md:text-5xl lg:text-6xl font-extrabold text-white tracking-tight leading-tight mb-6">
Turn Text content into <br className="hidden lg:block" />
<span className="text-transparent bg-clip-text bg-gradient-to-r from-emerald-400 to-cyan-400">Scannable QR Codes</span>
</h1>
<p className="text-lg md:text-xl text-indigo-100 max-w-2xl mx-auto lg:mx-0 mb-8 leading-relaxed">
Share notes, codes, keys, or messages instantly. Scan to read without internet.
<strong className="text-white block sm:inline mt-2 sm:mt-0"> 100% Private.</strong>
</p>
<div className="flex flex-wrap justify-center lg:justify-start gap-4 text-sm font-medium text-white/80">
<div className="flex items-center gap-2 bg-white/5 px-4 py-2.5 rounded-xl border border-white/5 backdrop-blur-sm">
<Shield className="w-4 h-4 text-emerald-400" />
No Data Storage
</div>
<div className="flex items-center gap-2 bg-white/5 px-4 py-2.5 rounded-xl border border-white/5 backdrop-blur-sm">
<Zap className="w-4 h-4 text-amber-400" />
Instant Create
</div>
<div className="flex items-center gap-2 bg-white/5 px-4 py-2.5 rounded-xl border border-white/5 backdrop-blur-sm">
<Smartphone className="w-4 h-4 text-purple-400" />
Offline Readable
</div>
</div>
</div>
{/* Visual Abstract */}
<div className="hidden lg:flex relative items-center justify-center min-h-[400px]">
<div className="absolute w-[500px] h-[500px] bg-indigo-500/30 rounded-full blur-[100px] -top-20 -right-20 animate-pulse" />
<div className="relative w-80 h-96 bg-white/5 backdrop-blur-xl border border-white/20 rounded-3xl shadow-2xl flex flex-col items-center justify-center p-8 transform rotate-6 hover:rotate-3 transition-all duration-700 group">
<div className="absolute inset-0 bg-gradient-to-br from-white/10 to-transparent rounded-3xl" />
<div className="w-48 h-48 bg-white rounded-xl p-2 shadow-inner mb-6 relative overflow-hidden flex items-center justify-center">
<QRCodeSVG value="https://www.qrmaster.net" size={170} fgColor="#0f172a" level="Q" />
<div className="absolute top-1/2 left-0 w-full h-1 bg-emerald-500 shadow-[0_0_20px_rgba(16,185,129,1)] animate-pulse" />
</div>
<div className="w-full bg-white/10 rounded-xl p-4 backdrop-blur-sm border border-white/10">
<div className="flex items-center gap-3">
<div className="w-8 h-8 rounded-full bg-indigo-500/20 flex items-center justify-center">
<FileText className="w-4 h-4 text-indigo-300" />
</div>
<div className="space-y-1">
<div className="h-1.5 w-20 bg-white/30 rounded-full" />
<div className="h-1.5 w-12 bg-white/20 rounded-full" />
</div>
</div>
</div>
</div>
</div>
</div>
</section>
{/* GENERATOR SECTION */}
<section className="py-12 px-4 sm:px-6 lg:px-8 -mt-8">
<TextGenerator />
</section>
{/* HOW IT WORKS */}
<section className="py-16 px-4 sm:px-6 lg:px-8 bg-white">
<div className="max-w-4xl mx-auto">
<h2 className="text-3xl font-bold text-slate-900 text-center mb-12">
How Text QR Codes Work
</h2>
<div className="grid md:grid-cols-3 lg:grid-cols-5 gap-8">
<article className="text-center">
<div className="w-14 h-14 rounded-2xl bg-[#1A1265]/10 flex items-center justify-center mx-auto mb-4">
<Type className="w-7 h-7 text-[#1A1265]" />
</div>
<h3 className="font-bold text-slate-900 mb-2">1. Enter Text</h3>
<p className="text-slate-600 text-sm">
Type your message, code, or note. It is instantly encoded into the QR pattern.
</p>
</article>
<article className="text-center">
<div className="w-12 h-12 rounded-2xl bg-[#1A1265]/10 flex items-center justify-center mx-auto mb-4">
<Zap className="w-6 h-6 text-[#1A1265]" />
</div>
<h3 className="font-bold text-slate-900 mb-2">2. Customize</h3>
<p className="text-slate-600 text-xs leading-relaxed">
Choose a color and add a call-to-action frame.
</p>
</article>
<article className="text-center">
<div className="w-12 h-12 rounded-2xl bg-[#1A1265]/10 flex items-center justify-center mx-auto mb-4">
<Download className="w-6 h-6 text-[#1A1265]" />
</div>
<h3 className="font-bold text-slate-900 mb-2">3. Download</h3>
<p className="text-slate-600 text-xs leading-relaxed">
Get your ready-to-use QR code.
</p>
</article>
<article className="text-center">
<div className="w-12 h-12 rounded-2xl bg-[#1A1265]/10 flex items-center justify-center mx-auto mb-4">
<Smartphone className="w-6 h-6 text-[#1A1265]" />
</div>
<h3 className="font-bold text-slate-900 mb-2">4. Test</h3>
<p className="text-slate-600 text-xs leading-relaxed">
Point camera to read text.
</p>
</article>
<article className="text-center">
<div className="w-12 h-12 rounded-2xl bg-[#1A1265]/10 flex items-center justify-center mx-auto mb-4">
<Share2 className="w-6 h-6 text-[#1A1265]" />
</div>
<h3 className="font-bold text-slate-900 mb-2">5. Share</h3>
<p className="text-slate-600 text-xs leading-relaxed">
Pass information instantly.
</p>
</article>
</div>
</div>
</section>
{/* RELATED TOOLS */}
<RelatedTools />
{/* FAQ SECTION */}
<section className="py-16 px-4 sm:px-6 lg:px-8" style={{ backgroundColor: '#EBEBDF' }}>
<div className="max-w-3xl mx-auto">
<h2 className="text-3xl font-bold text-slate-900 text-center mb-4">
Frequently Asked Questions
</h2>
<p className="text-slate-600 text-center mb-10">
Common questions about Text QR codes.
</p>
<div className="space-y-4">
<FaqItem
question="How do I scan a text QR code?"
answer="Open your phone camera or a QR scanner app and point it at the code. The text will appear on your screen automatically."
/>
<FaqItem
question="Is there a character limit?"
answer="We recommend keeping it under 300 characters for the best scanning experience. Theoretically, QR codes can hold up to 4,296 characters, but the code becomes very complex and harder to scan with standard phone cameras."
/>
<FaqItem
question="Do I need internet to scan a Text QR code?"
answer="No. Text QR codes are 'static' codes, meaning the data is encoded directly into the image pattern. You can scan and read them completely offline, making them perfect for remote locations or secure environments."
/>
<FaqItem
question="Is my text private?"
answer="Yes. We prioritize your privacy. The generation process happens entirely in your browser using JavaScript. Your text data is never sent to our servers or stored anywhere."
/>
<FaqItem
question="Can I change the text after printing?"
answer="No. Static QR codes are permanent. If you need to change the text later, you must generate a new QR code. For editable content, you would need a Dynamic QR Code (which we also offer)."
/>
</div>
</div>
</section>
</div>
</>
);
}
function FaqItem({ question, answer }: { question: string; answer: string }) {
return (
<details className="group bg-white rounded-xl shadow-sm border border-slate-200 overflow-hidden">
<summary className="flex items-center justify-between p-5 cursor-pointer list-none text-slate-900 font-semibold hover:bg-slate-50 transition-colors">
{question}
<span className="transition group-open:rotate-180 text-slate-400">
<svg fill="none" height="20" stroke="currentColor" strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" viewBox="0 0 24 24" width="20">
<path d="M6 9l6 6 6-6" />
</svg>
</span>
</summary>
<div className="text-slate-600 px-5 pb-5 pt-0 leading-relaxed text-sm">
{answer}
</div>
</details>
);
}

504
src/app/(main)/(marketing)/tools/tiktok-qr-code/TikTokGenerator.tsx
View File

@@ -1,252 +1,252 @@
'use client';
import React, { useState, useRef } from 'react';
import Link from 'next/link';
import { QRCodeSVG } from 'qrcode.react';
import {
Music,
Download,
Check,
Sparkles,
Video,
Share2
} from 'lucide-react';
import { Button } from '@/components/ui/Button';
import { Input } from '@/components/ui/Input';
import { cn } from '@/lib/utils';
// Brand Colors
const BRAND = {
paleGrey: '#EBEBDF',
richBlue: '#1A1265',
richBlueLight: '#2A2275',
};
// QR Color Options - TikTok Theme
const QR_COLORS = [
{ name: 'TikTok Black', value: '#000000' },
{ name: 'TikTok Pink', value: '#FE2C55' },
{ name: 'TikTok Cyan', value: '#25F4EE' },
{ name: 'Deep Blue', value: '#1A1265' },
{ name: 'Purple', value: '#7C3AED' },
{ name: 'Emerald', value: '#10B981' },
{ name: 'Rose', value: '#F43F5E' },
];
// Frame Options
const FRAME_OPTIONS = [
{ id: 'none', label: 'No Frame' },
{ id: 'scanme', label: 'Scan Me' },
{ id: 'follow', label: 'Follow' },
{ id: 'watch', label: 'Watch' },
];
export default function TiktokGenerator() {
const [username, setUsername] = useState('');
const [qrColor, setQrColor] = useState('#000000');
const [frameType, setFrameType] = useState('none');
const qrRef = useRef<HTMLDivElement>(null);
// TikTok URL: https://www.tiktok.com/@username
const getUrl = () => {
const cleanUser = username.replace(/^@/, '').replace(/https?:\/\/(www\.)?tiktok\.com\/@?/, '').replace(/\/$/, '');
return cleanUser ? `https://www.tiktok.com/@${cleanUser}` : 'https://www.tiktok.com';
};
const handleDownload = async (format: 'png' | 'svg') => {
if (!qrRef.current) return;
try {
if (format === 'png') {
const { toPng } = await import('html-to-image');
const dataUrl = await toPng(qrRef.current, { cacheBust: true, pixelRatio: 3 });
const link = document.createElement('a');
link.download = `tiktok-qr-code.png`;
link.href = dataUrl;
link.click();
} else {
const svgData = qrRef.current.querySelector('svg')?.outerHTML;
if (svgData) {
const blob = new Blob([svgData], { type: 'image/svg+xml;charset=utf-8' });
const url = URL.createObjectURL(blob);
const link = document.createElement('a');
link.href = url;
link.download = `tiktok-qr-code.svg`;
link.click();
}
}
} catch (err) {
console.error('Download failed', err);
}
};
const getFrameLabel = () => {
const frame = FRAME_OPTIONS.find(f => f.id === frameType);
return frame?.id !== 'none' ? frame?.label : null;
};
return (
<div className="w-full max-w-5xl mx-auto px-4 md:px-6">
{/* Main Generator Card */}
<div className="bg-white rounded-3xl shadow-2xl shadow-slate-900/10 overflow-hidden border border-slate-100">
<div className="grid lg:grid-cols-2">
{/* LEFT: Input Section */}
<div className="p-6 md:p-8 lg:p-10 space-y-8 border-r border-slate-100">
{/* TikTok Details */}
<div className="space-y-6">
<h2 className="text-lg font-bold text-slate-900 flex items-center gap-2">
<Music className="w-5 h-5 text-black" />
TikTok Username
</h2>
<div>
<label className="block text-sm font-medium text-slate-700 mb-2">Username</label>
<Input
placeholder="@username"
value={username}
onChange={(e) => setUsername(e.target.value)}
className="h-12 text-base rounded-xl border-slate-200 focus:border-black focus:ring-black"
/>
<p className="text-xs text-slate-600 mt-2">Enter your TikTok handle (e.g. @charlidamelio).</p>
</div>
</div>
<div className="border-t border-slate-100"></div>
{/* Design Options */}
<div className="space-y-6">
<h2 className="text-lg font-bold text-slate-900 flex items-center gap-2">
<Sparkles className="w-5 h-5 text-black" />
Design Options
</h2>
{/* Color Picker */}
<div>
<label className="block text-sm font-medium text-slate-700 mb-3">QR Code Color</label>
<div className="flex flex-wrap gap-2">
{QR_COLORS.map((c) => (
<button
key={c.name}
onClick={() => setQrColor(c.value)}
className={cn(
"w-9 h-9 rounded-full border-2 flex items-center justify-center transition-all hover:scale-110",
qrColor === c.value ? "border-slate-900 ring-2 ring-offset-2 ring-slate-200" : "border-white shadow-md"
)}
style={{ backgroundColor: c.value }}
aria-label={`Select ${c.name}`}
title={c.name}
>
{qrColor === c.value && <Check className="w-4 h-4 text-white" strokeWidth={3} />}
</button>
))}
</div>
</div>
{/* Frame Selector */}
<div>
<label className="block text-sm font-medium text-slate-700 mb-3">Frame Label</label>
<div className="grid grid-cols-2 sm:grid-cols-4 gap-2">
{FRAME_OPTIONS.map((frame) => (
<button
key={frame.id}
onClick={() => setFrameType(frame.id)}
className={cn(
"py-2.5 px-3 rounded-lg text-sm font-medium transition-all border",
frameType === frame.id
? "bg-black text-white border-black"
: "bg-slate-50 text-slate-600 border-slate-200 hover:border-slate-300"
)}
>
{frame.label}
</button>
))}
</div>
</div>
</div>
</div>
{/* RIGHT: Preview Section */}
<div className="p-6 md:p-8 lg:p-10 flex flex-col items-center justify-center" style={{ backgroundColor: BRAND.paleGrey }}>
{/* QR Card with Frame */}
<div
ref={qrRef}
className="bg-white rounded-3xl shadow-xl p-6 sm:p-8 flex flex-col items-center w-full max-w-[320px]"
>
{/* Frame Label */}
{getFrameLabel() && (
<div
className="mb-5 px-8 py-2.5 rounded-full text-white font-bold text-sm tracking-widest uppercase shadow-md"
style={{ backgroundColor: qrColor }}
>
{getFrameLabel()}
</div>
)}
{/* QR Code */}
<div className="bg-white">
<QRCodeSVG
value={getUrl()}
size={240}
level="M"
includeMargin={false}
fgColor={qrColor}
/>
</div>
{/* Info Preview */}
<div className="mt-6 text-center max-w-[260px]">
<h3 className="font-bold text-slate-900 text-lg flex items-center justify-center gap-2 truncate">
<Music className="w-4 h-4 text-slate-400 shrink-0" />
<span className="truncate">{username || '@username'}</span>
</h3>
<div className="text-xs text-slate-600 mt-1">Opens in TikTok</div>
</div>
</div>
{/* Download Buttons */}
<div className="flex items-center gap-3 mt-8">
<Button
onClick={() => handleDownload('png')}
className="bg-black hover:bg-slate-800 text-white shadow-lg"
>
<Download className="w-4 h-4 mr-2" />
Download PNG
</Button>
<Button
onClick={() => handleDownload('svg')}
variant="outline"
className="border-slate-300 hover:bg-white"
>
<Download className="w-4 h-4 mr-2" />
SVG
</Button>
</div>
<p className="text-xs text-slate-600 mt-4 text-center">
Scanning redirects directly to your TikTok profile.
</p>
</div>
</div>
</div>
{/* Upsell Banner */}
<div className="mt-8 bg-gradient-to-r from-[#000000] via-[#25F4EE] to-[#FE2C55] rounded-2xl p-6 flex flex-col sm:flex-row items-center justify-between gap-4">
<div className="text-white text-center sm:text-left">
<h3 className="font-bold text-lg">Cross-promote on Socials?</h3>
<p className="text-white/80 text-sm mt-1">
Use one Dynamic Link to share your TikTok, Insta, and YouTube all at once.
</p>
</div>
<Link href="/signup">
<Button className="bg-white text-black hover:bg-slate-100 shrink-0 shadow-lg">
Create All-in-One Link
</Button>
</Link>
</div>
</div>
);
}
'use client';
import React, { useState, useRef } from 'react';
import Link from 'next/link';
import { QRCodeSVG } from 'qrcode.react';
import {
Music,
Download,
Check,
Sparkles,
Video,
Share2
} from 'lucide-react';
import { Button } from '@/components/ui/Button';
import { Input } from '@/components/ui/Input';
import { cn } from '@/lib/utils';
// Brand Colors
const BRAND = {
paleGrey: '#EBEBDF',
richBlue: '#1A1265',
richBlueLight: '#2A2275',
};
// QR Color Options - TikTok Theme
const QR_COLORS = [
{ name: 'TikTok Black', value: '#000000' },
{ name: 'TikTok Pink', value: '#FE2C55' },
{ name: 'TikTok Cyan', value: '#25F4EE' },
{ name: 'Deep Blue', value: '#1A1265' },
{ name: 'Purple', value: '#7C3AED' },
{ name: 'Emerald', value: '#10B981' },
{ name: 'Rose', value: '#F43F5E' },
];
// Frame Options
const FRAME_OPTIONS = [
{ id: 'none', label: 'No Frame' },
{ id: 'scanme', label: 'Scan Me' },
{ id: 'follow', label: 'Follow' },
{ id: 'watch', label: 'Watch' },
];
export default function TiktokGenerator() {
const [username, setUsername] = useState('');
const [qrColor, setQrColor] = useState('#000000');
const [frameType, setFrameType] = useState('none');
const qrRef = useRef<HTMLDivElement>(null);
// TikTok URL: https://www.tiktok.com/@username
const getUrl = () => {
const cleanUser = username.replace(/^@/, '').replace(/https?:\/\/(www\.)?tiktok\.com\/@?/, '').replace(/\/$/, '');
return cleanUser ? `https://www.tiktok.com/@${cleanUser}` : 'https://www.tiktok.com';
};
const handleDownload = async (format: 'png' | 'svg') => {
if (!qrRef.current) return;
try {
if (format === 'png') {
const { toPng } = await import('html-to-image');
const dataUrl = await toPng(qrRef.current, { cacheBust: true, pixelRatio: 3 });
const link = document.createElement('a');
link.download = `tiktok-qr-code.png`;
link.href = dataUrl;
link.click();
} else {
const svgData = qrRef.current.querySelector('svg')?.outerHTML;
if (svgData) {
const blob = new Blob([svgData], { type: 'image/svg+xml;charset=utf-8' });
const url = URL.createObjectURL(blob);
const link = document.createElement('a');
link.href = url;
link.download = `tiktok-qr-code.svg`;
link.click();
}
}
} catch (err) {
console.error('Download failed', err);
}
};
const getFrameLabel = () => {
const frame = FRAME_OPTIONS.find(f => f.id === frameType);
return frame?.id !== 'none' ? frame?.label : null;
};
return (
<div className="w-full max-w-5xl mx-auto px-4 md:px-6">
{/* Main Generator Card */}
<div className="bg-white rounded-3xl shadow-2xl shadow-slate-900/10 overflow-hidden border border-slate-100">
<div className="grid lg:grid-cols-2">
{/* LEFT: Input Section */}
<div className="p-6 md:p-8 lg:p-10 space-y-8 border-r border-slate-100">
{/* TikTok Details */}
<div className="space-y-6">
<h2 className="text-lg font-bold text-slate-900 flex items-center gap-2">
<Music className="w-5 h-5 text-black" />
TikTok Username
</h2>
<div>
<label className="block text-sm font-medium text-slate-700 mb-2">Username</label>
<Input
placeholder="@username"
value={username}
onChange={(e) => setUsername(e.target.value)}
className="h-12 text-base rounded-xl border-slate-200 focus:border-black focus:ring-black"
/>
<p className="text-xs text-slate-600 mt-2">Enter your TikTok handle (e.g. @charlidamelio).</p>
</div>
</div>
<div className="border-t border-slate-100"></div>
{/* Design Options */}
<div className="space-y-6">
<h2 className="text-lg font-bold text-slate-900 flex items-center gap-2">
<Sparkles className="w-5 h-5 text-black" />
Design Options
</h2>
{/* Color Picker */}
<div>
<label className="block text-sm font-medium text-slate-700 mb-3">QR Code Color</label>
<div className="flex flex-wrap gap-2">
{QR_COLORS.map((c) => (
<button
key={c.name}
onClick={() => setQrColor(c.value)}
className={cn(
"w-9 h-9 rounded-full border-2 flex items-center justify-center transition-all hover:scale-110",
qrColor === c.value ? "border-slate-900 ring-2 ring-offset-2 ring-slate-200" : "border-white shadow-md"
)}
style={{ backgroundColor: c.value }}
aria-label={`Select ${c.name}`}
title={c.name}
>
{qrColor === c.value && <Check className="w-4 h-4 text-white" strokeWidth={3} />}
</button>
))}
</div>
</div>
{/* Frame Selector */}
<div>
<label className="block text-sm font-medium text-slate-700 mb-3">Frame Label</label>
<div className="grid grid-cols-2 sm:grid-cols-4 gap-2">
{FRAME_OPTIONS.map((frame) => (
<button
key={frame.id}
onClick={() => setFrameType(frame.id)}
className={cn(
"py-2.5 px-3 rounded-lg text-sm font-medium transition-all border",
frameType === frame.id
? "bg-black text-white border-black"
: "bg-slate-50 text-slate-600 border-slate-200 hover:border-slate-300"
)}
>
{frame.label}
</button>
))}
</div>
</div>
</div>
</div>
{/* RIGHT: Preview Section */}
<div className="p-6 md:p-8 lg:p-10 flex flex-col items-center justify-center" style={{ backgroundColor: BRAND.paleGrey }}>
{/* QR Card with Frame */}
<div
ref={qrRef}
className="bg-white rounded-3xl shadow-xl p-6 sm:p-8 flex flex-col items-center w-full max-w-[320px]"
>
{/* Frame Label */}
{getFrameLabel() && (
<div
className="mb-5 px-8 py-2.5 rounded-full text-white font-bold text-sm tracking-widest uppercase shadow-md"
style={{ backgroundColor: qrColor }}
>
{getFrameLabel()}
</div>
)}
{/* QR Code */}
<div className="bg-white">
<QRCodeSVG
value={getUrl()}
size={240}
level="M"
includeMargin={false}
fgColor={qrColor}
/>
</div>
{/* Info Preview */}
<div className="mt-6 text-center max-w-[260px]">
<h3 className="font-bold text-slate-900 text-lg flex items-center justify-center gap-2 truncate">
<Music className="w-4 h-4 text-slate-400 shrink-0" />
<span className="truncate">{username || '@username'}</span>
</h3>
<div className="text-xs text-slate-600 mt-1">Opens in TikTok</div>
</div>
</div>
{/* Download Buttons */}
<div className="flex items-center gap-3 mt-8">
<Button
onClick={() => handleDownload('png')}
className="bg-black hover:bg-slate-800 text-white shadow-lg"
>
<Download className="w-4 h-4 mr-2" />
Download PNG
</Button>
<Button
onClick={() => handleDownload('svg')}
variant="outline"
className="border-slate-300 hover:bg-white"
>
<Download className="w-4 h-4 mr-2" />
SVG
</Button>
</div>
<p className="text-xs text-slate-600 mt-4 text-center">
Scanning redirects directly to your TikTok profile.
</p>
</div>
</div>
</div>
{/* Upsell Banner */}
<div className="mt-8 bg-gradient-to-r from-[#000000] via-[#25F4EE] to-[#FE2C55] rounded-2xl p-6 flex flex-col sm:flex-row items-center justify-between gap-4">
<div className="text-white text-center sm:text-left">
<h3 className="font-bold text-lg">Cross-promote on Socials?</h3>
<p className="text-white/80 text-sm mt-1">
Use one Dynamic Link to share your TikTok, Insta, and YouTube all at once.
</p>
</div>
<Link href="/signup">
<Button className="bg-white text-black hover:bg-slate-100 shrink-0 shadow-lg">
Create All-in-One Link
</Button>
</Link>
</div>
</div>
);
}

666
src/app/(main)/(marketing)/tools/tiktok-qr-code/page.tsx
View File

@@ -1,333 +1,333 @@
import React from 'react';
import type { Metadata } from 'next';
import TiktokGenerator from './TikTokGenerator';
import { Music, Shield, Zap, Smartphone, Video, Heart, Download, Share2 } from 'lucide-react';
import { QRCodeSVG } from 'qrcode.react';
import { ToolBreadcrumb } from '@/components/seo/BreadcrumbSchema';
import { RelatedTools } from '@/components/marketing/RelatedTools';
import { generateSoftwareAppSchema, generateFaqSchema } from '@/lib/schema-utils';
// SEO Optimized Metadata
export const metadata: Metadata = {
title: {
absolute: 'Free TikTok QR Code Generator | Get Followers | QR Master',
},
description: 'Create a QR code for your TikTok profile. TikTok QR Code erstellen. Scanners follow you instantly. Customize with colors and frames.',
keywords: ['tiktok qr code', 'tik tok qr generator', 'tiktok follow qr', 'social media qr code', 'tiktok profile qr', 'tiktok qr code erstellen', 'tiktok profil qr code', 'mehr tiktok follower', 'tiktok scanncode'],
alternates: {
canonical: 'https://www.qrmaster.net/tools/tiktok-qr-code',
},
openGraph: {
title: 'Free TikTok QR Code Generator | QR Master',
description: 'Generate QR codes to grow your TikTok following. Instant app redirect.',
type: 'website',
url: 'https://www.qrmaster.net/tools/tiktok-qr-code',
images: [{ url: '/og-tiktok-generator.png', width: 1200, height: 630 }],
},
twitter: {
card: 'summary_large_image',
title: 'Free TikTok QR Code Generator',
description: 'Create QR codes for TikTok. Get more followers.',
},
robots: {
index: true,
follow: true,
},
};
// JSON-LD Structured Data
const jsonLd = {
'@context': 'https://schema.org',
'@graph': [
generateSoftwareAppSchema(
'TikTok QR Code Generator',
'Generate QR codes that direct users to a TikTok profile.',
'/og-tiktok-generator.png'
),
{
'@type': 'HowTo',
name: 'How to Create a TikTok QR Code',
description: 'Create a QR code that opens a TikTok profile.',
step: [
{
'@type': 'HowToStep',
position: 1,
name: 'Enter Username',
text: 'Type your TikTok handle (e.g. @user).',
},
{
'@type': 'HowToStep',
position: 2,
name: 'Customize',
text: 'Select colors like Cyan or Pink to match the TikTok brand.',
},
{
'@type': 'HowToStep',
position: 3,
name: 'Download',
text: 'Save the QR code.',
},
{
'@type': 'HowToStep',
position: 4,
name: 'Test',
text: 'Scan the code to ensure it links to your profile.',
},
{
'@type': 'HowToStep',
position: 5,
name: 'Share',
text: 'Share it on other social media or print it out.',
},
],
totalTime: 'PT30S',
},
generateFaqSchema({
'Does this replace the in-app QR code?': {
question: 'Does this replace the in-app QR code?',
answer: 'You can use either! The advantage of our generator is that you can print high-resolution versions for large posters, customize the color/frame, and it works with any standard QR scanner.',
},
'Can I link to a specific video?': {
question: 'Can I link to a specific video?',
answer: 'Yes, just paste the full video URL (e.g. tiktok.com/@user/video/123...) instead of your username.',
},
'Is it free?': {
question: 'Is it free?',
answer: 'Yes, completely free from start to finish.',
},
'Can I track who scanned my code?': {
question: 'Can I track who scanned my code?',
answer: 'No, this is a static QR code. For analytics, you need a Dynamic QR Code.',
},
'Is it safe?': {
question: 'Is it safe?',
answer: 'Yes. The QR code simply contains a link to your TikTok profile. No personal data is collected.',
},
}),
],
};
export default function TiktokQRCodePage() {
return (
<>
<script
type="application/ld+json"
dangerouslySetInnerHTML={{ __html: JSON.stringify(jsonLd) }}
/>
<ToolBreadcrumb toolName="TikTok QR Code Generator" toolSlug="tiktok-qr-code" />
<div className="min-h-screen" style={{ backgroundColor: '#EBEBDF' }}>
{/* HERO SECTION */}
<section className="relative pt-20 pb-20 lg:pt-32 lg:pb-32 px-4 sm:px-6 lg:px-8 overflow-hidden bg-black">
<div className="absolute inset-0 opacity-20">
{/* TikTok Pattern */}
<svg className="w-full h-full" width="100%" height="100%" xmlns="http://www.w3.org/2000/svg">
<defs>
<pattern id="tt_pattern" width="60" height="60" patternUnits="userSpaceOnUse">
<circle cx="30" cy="30" r="2" fill="cyan" />
<circle cx="40" cy="40" r="2" fill="magenta" />
</pattern>
</defs>
<rect width="100%" height="100%" fill="url(#tt_pattern)" />
</svg>
</div>
<div className="max-w-7xl mx-auto grid lg:grid-cols-2 gap-12 items-center relative z-10">
<div className="text-center lg:text-left">
<div className="inline-flex items-center gap-2 px-3 py-1 rounded-full bg-white/10 text-white/90 text-sm font-medium mb-6 backdrop-blur-sm border border-white/10 hover:bg-white/20 transition-colors cursor-default">
<span className="flex h-2 w-2 relative">
<span className="animate-ping absolute inline-flex h-full w-full rounded-full bg-cyan-400 opacity-75"></span>
<span className="relative inline-flex rounded-full h-2 w-2 bg-cyan-400"></span>
</span>
Free Tool — No Signup Required
</div>
<h1 className="text-4xl md:text-5xl lg:text-6xl font-extrabold text-white tracking-tight leading-tight mb-6">
Go Viral with <br className="hidden lg:block" />
<span className="text-transparent bg-clip-text bg-gradient-to-r from-[#25F4EE] to-[#FE2C55]">TikTok QR Codes</span>
</h1>
<p className="text-lg md:text-xl text-slate-400 max-w-2xl mx-auto lg:mx-0 mb-8 leading-relaxed">
Share your TikTok immediately. A quick scan sends fans straight to your profile to follow and watch.
<strong className="text-white block sm:inline mt-2 sm:mt-0"> Grow your audience.</strong>
</p>
<div className="flex flex-wrap justify-center lg:justify-start gap-4 text-sm font-medium text-white/80">
<div className="flex items-center gap-2 bg-white/10 px-4 py-2.5 rounded-xl border border-white/10 backdrop-blur-sm">
<Music className="w-4 h-4 text-[#25F4EE]" />
Get Followers
</div>
<div className="flex items-center gap-2 bg-white/10 px-4 py-2.5 rounded-xl border border-white/10 backdrop-blur-sm">
<Video className="w-4 h-4 text-[#FE2C55]" />
Share Videos
</div>
<div className="flex items-center gap-2 bg-white/10 px-4 py-2.5 rounded-xl border border-white/10 backdrop-blur-sm">
<Smartphone className="w-4 h-4 text-white" />
Deep Link
</div>
</div>
</div>
{/* Visual Abstract */}
<div className="hidden lg:flex relative items-center justify-center min-h-[400px]">
{/* Glow Effects */}
<div className="absolute w-[300px] h-[300px] bg-[#25F4EE]/20 rounded-full blur-[80px] -top-10 -right-10 animate-pulse" />
<div className="absolute w-[300px] h-[300px] bg-[#FE2C55]/20 rounded-full blur-[80px] bottom-10 left-10 animate-pulse delay-75" />
<div className="relative w-80 h-96 bg-white/5 backdrop-blur-xl border border-white/20 rounded-3xl shadow-2xl flex flex-col items-center justify-center p-8 transform rotate-3 hover:rotate-0 transition-all duration-700 group">
<div className="absolute inset-0 bg-gradient-to-br from-white/10 to-transparent rounded-3xl" />
<div className="w-20 h-20 rounded-full bg-black border-2 border-[#25F4EE] p-1 mb-6 shadow-[#FE2C55]/50 shadow-lg relative">
<div className="w-full h-full rounded-full bg-slate-800 flex items-center justify-center overflow-hidden">
<Music className="w-10 h-10 text-white animate-bounce" />
</div>
<div className="absolute -bottom-1 -right-1 bg-[#FE2C55] w-6 h-6 rounded-full border-2 border-black flex items-center justify-center">
<Heart className="w-3 h-3 text-white fill-current" />
</div>
</div>
<div className="w-48 h-48 bg-white rounded-xl p-2 shadow-inner relative overflow-hidden flex items-center justify-center">
<QRCodeSVG value="https://www.qrmaster.net" size={170} fgColor="#000000" level="Q" />
</div>
{/* Floating Badge */}
<div className="absolute -bottom-6 -right-6 bg-black border border-white/10 py-3 px-5 rounded-xl shadow-xl flex items-center gap-3 transform transition-transform hover:scale-105 duration-300">
<div className="bg-white/10 p-2 rounded-full">
<Music className="w-5 h-5 text-[#25F4EE]" />
</div>
<div className="text-left">
<div className="text-[10px] text-slate-400 font-bold uppercase tracking-wider">TikTok</div>
<div className="text-sm font-bold text-white">Following</div>
</div>
</div>
</div>
</div>
</div>
</section>
{/* GENERATOR SECTION */}
<section className="py-12 px-4 sm:px-6 lg:px-8 -mt-8">
<TiktokGenerator />
</section>
{/* HOW IT WORKS */}
<section className="py-16 px-4 sm:px-6 lg:px-8 bg-white">
<div className="max-w-4xl mx-auto">
<h2 className="text-3xl font-bold text-slate-900 text-center mb-12">
How TikTok QR Codes Work
</h2>
<div className="grid md:grid-cols-3 lg:grid-cols-5 gap-8">
<article className="text-center">
<div className="w-14 h-14 rounded-2xl bg-black flex items-center justify-center mx-auto mb-4">
<Music className="w-7 h-7 text-[#25F4EE]" />
</div>
<h3 className="font-bold text-slate-900 mb-2">1. Enter Handle</h3>
<p className="text-slate-600 text-sm">
Type in your username. No password required.
</p>
</article>
<article className="text-center">
<div className="w-14 h-14 rounded-2xl bg-black flex items-center justify-center mx-auto mb-4">
<Smartphone className="w-7 h-7 text-[#FE2C55]" />
</div>
<h3 className="font-bold text-slate-900 mb-2">2. Scan</h3>
<p className="text-slate-600 text-sm">
Fans scan the code to instantly find you in the app.
</p>
</article>
<article className="text-center">
<div className="w-12 h-12 rounded-2xl bg-black flex items-center justify-center mx-auto mb-4">
<Download className="w-6 h-6 text-white" />
</div>
<h3 className="font-bold text-slate-900 mb-2">3. Download</h3>
<p className="text-slate-600 text-xs leading-relaxed">
Save your custom QR code.
</p>
</article>
<article className="text-center">
<div className="w-12 h-12 rounded-2xl bg-black flex items-center justify-center mx-auto mb-4">
<Heart className="w-6 h-6 text-white" />
</div>
<h3 className="font-bold text-slate-900 mb-2">4. Follow</h3>
<p className="text-slate-600 text-xs leading-relaxed">
Fans scan to find you instantly.
</p>
</article>
<article className="text-center">
<div className="w-12 h-12 rounded-2xl bg-black flex items-center justify-center mx-auto mb-4">
<Share2 className="w-6 h-6 text-white" />
</div>
<h3 className="font-bold text-slate-900 mb-2">5. Viral</h3>
<p className="text-slate-600 text-xs leading-relaxed">
Grow your audience everywhere.
</p>
</article>
</div>
</div>
</section>
<RelatedTools />
{/* FAQ SECTION */}
<section className="py-16 px-4 sm:px-6 lg:px-8" style={{ backgroundColor: '#EBEBDF' }}>
<div className="max-w-3xl mx-auto">
<h2 className="text-3xl font-bold text-slate-900 text-center mb-4">
Frequently Asked Questions
</h2>
<p className="text-slate-600 text-center mb-10">
Common questions about TikTok QR codes.
</p>
<div className="space-y-4">
<FaqItem
question="Does this replace the in-app QR code?"
answer="You can use either! The advantage of our generator is that you can print high-resolution versions for large posters, customize the color/frame, and it works with any standard QR scanner."
/>
<FaqItem
question="Can I link to a specific video?"
answer="Yes, just paste the full video URL (e.g. tiktok.com/@user/video/123...) instead of your username."
/>
<FaqItem
question="Is it free?"
answer="Yes, completely free from start to finish."
/>
<FaqItem
question="Can I track who scanned my code?"
answer="No, this is a static QR code. For analytics, you need a Dynamic QR Code."
/>
<FaqItem
question="Is it safe?"
answer="Yes. The QR code simply contains a link to your TikTok profile. No personal data is collected."
/>
</div>
</div>
</section>
</div>
</>
);
}
function FaqItem({ question, answer }: { question: string; answer: string }) {
return (
<details className="group bg-white rounded-xl shadow-sm border border-slate-200 overflow-hidden">
<summary className="flex items-center justify-between p-5 cursor-pointer list-none text-slate-900 font-semibold hover:bg-slate-50 transition-colors">
{question}
<span className="transition group-open:rotate-180 text-slate-400">
<svg fill="none" height="20" stroke="currentColor" strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" viewBox="0 0 24 24" width="20">
<path d="M6 9l6 6 6-6" />
</svg>
</span>
</summary>
<div className="text-slate-600 px-5 pb-5 pt-0 leading-relaxed text-sm">
{answer}
</div>
</details>
);
}
import React from 'react';
import type { Metadata } from 'next';
import TiktokGenerator from './TikTokGenerator';
import { Music, Shield, Zap, Smartphone, Video, Heart, Download, Share2 } from 'lucide-react';
import { QRCodeSVG } from 'qrcode.react';
import { ToolBreadcrumb } from '@/components/seo/BreadcrumbSchema';
import { RelatedTools } from '@/components/marketing/RelatedTools';
import { generateSoftwareAppSchema, generateFaqSchema } from '@/lib/schema-utils';
// SEO Optimized Metadata
export const metadata: Metadata = {
title: {
absolute: 'Free TikTok QR Code Generator | Get Followers | QR Master',
},
description: 'Create a QR code for your TikTok profile. TikTok QR Code erstellen. Scanners follow you instantly. Customize with colors and frames.',
keywords: ['tiktok qr code', 'tik tok qr generator', 'tiktok follow qr', 'social media qr code', 'tiktok profile qr', 'tiktok qr code erstellen', 'tiktok profil qr code', 'mehr tiktok follower', 'tiktok scanncode'],
alternates: {
canonical: 'https://www.qrmaster.net/tools/tiktok-qr-code',
},
openGraph: {
title: 'Free TikTok QR Code Generator | QR Master',
description: 'Generate QR codes to grow your TikTok following. Instant app redirect.',
type: 'website',
url: 'https://www.qrmaster.net/tools/tiktok-qr-code',
images: [{ url: '/og-tiktok-generator.png', width: 1200, height: 630 }],
},
twitter: {
card: 'summary_large_image',
title: 'Free TikTok QR Code Generator',
description: 'Create QR codes for TikTok. Get more followers.',
},
robots: {
index: true,
follow: true,
},
};
// JSON-LD Structured Data
const jsonLd = {
'@context': 'https://schema.org',
'@graph': [
generateSoftwareAppSchema(
'TikTok QR Code Generator',
'Generate QR codes that direct users to a TikTok profile.',
'/og-tiktok-generator.png'
),
{
'@type': 'HowTo',
name: 'How to Create a TikTok QR Code',
description: 'Create a QR code that opens a TikTok profile.',
step: [
{
'@type': 'HowToStep',
position: 1,
name: 'Enter Username',
text: 'Type your TikTok handle (e.g. @user).',
},
{
'@type': 'HowToStep',
position: 2,
name: 'Customize',
text: 'Select colors like Cyan or Pink to match the TikTok brand.',
},
{
'@type': 'HowToStep',
position: 3,
name: 'Download',
text: 'Save the QR code.',
},
{
'@type': 'HowToStep',
position: 4,
name: 'Test',
text: 'Scan the code to ensure it links to your profile.',
},
{
'@type': 'HowToStep',
position: 5,
name: 'Share',
text: 'Share it on other social media or print it out.',
},
],
totalTime: 'PT30S',
},
generateFaqSchema({
'Does this replace the in-app QR code?': {
question: 'Does this replace the in-app QR code?',
answer: 'You can use either! The advantage of our generator is that you can print high-resolution versions for large posters, customize the color/frame, and it works with any standard QR scanner.',
},
'Can I link to a specific video?': {
question: 'Can I link to a specific video?',
answer: 'Yes, just paste the full video URL (e.g. tiktok.com/@user/video/123...) instead of your username.',
},
'Is it free?': {
question: 'Is it free?',
answer: 'Yes, completely free from start to finish.',
},
'Can I track who scanned my code?': {
question: 'Can I track who scanned my code?',
answer: 'No, this is a static QR code. For analytics, you need a Dynamic QR Code.',
},
'Is it safe?': {
question: 'Is it safe?',
answer: 'Yes. The QR code simply contains a link to your TikTok profile. No personal data is collected.',
},
}),
],
};
export default function TiktokQRCodePage() {
return (
<>
<script
type="application/ld+json"
dangerouslySetInnerHTML={{ __html: JSON.stringify(jsonLd) }}
/>
<ToolBreadcrumb toolName="TikTok QR Code Generator" toolSlug="tiktok-qr-code" />
<div className="min-h-screen" style={{ backgroundColor: '#EBEBDF' }}>
{/* HERO SECTION */}
<section className="relative pt-20 pb-20 lg:pt-32 lg:pb-32 px-4 sm:px-6 lg:px-8 overflow-hidden bg-black">
<div className="absolute inset-0 opacity-20">
{/* TikTok Pattern */}
<svg className="w-full h-full" width="100%" height="100%" xmlns="http://www.w3.org/2000/svg">
<defs>
<pattern id="tt_pattern" width="60" height="60" patternUnits="userSpaceOnUse">
<circle cx="30" cy="30" r="2" fill="cyan" />
<circle cx="40" cy="40" r="2" fill="magenta" />
</pattern>
</defs>
<rect width="100%" height="100%" fill="url(#tt_pattern)" />
</svg>
</div>
<div className="max-w-7xl mx-auto grid lg:grid-cols-2 gap-12 items-center relative z-10">
<div className="text-center lg:text-left">
<div className="inline-flex items-center gap-2 px-3 py-1 rounded-full bg-white/10 text-white/90 text-sm font-medium mb-6 backdrop-blur-sm border border-white/10 hover:bg-white/20 transition-colors cursor-default">
<span className="flex h-2 w-2 relative">
<span className="animate-ping absolute inline-flex h-full w-full rounded-full bg-cyan-400 opacity-75"></span>
<span className="relative inline-flex rounded-full h-2 w-2 bg-cyan-400"></span>
</span>
Free Tool — No Signup Required
</div>
<h1 className="text-4xl md:text-5xl lg:text-6xl font-extrabold text-white tracking-tight leading-tight mb-6">
Go Viral with <br className="hidden lg:block" />
<span className="text-transparent bg-clip-text bg-gradient-to-r from-[#25F4EE] to-[#FE2C55]">TikTok QR Codes</span>
</h1>
<p className="text-lg md:text-xl text-slate-400 max-w-2xl mx-auto lg:mx-0 mb-8 leading-relaxed">
Share your TikTok immediately. A quick scan sends fans straight to your profile to follow and watch.
<strong className="text-white block sm:inline mt-2 sm:mt-0"> Grow your audience.</strong>
</p>
<div className="flex flex-wrap justify-center lg:justify-start gap-4 text-sm font-medium text-white/80">
<div className="flex items-center gap-2 bg-white/10 px-4 py-2.5 rounded-xl border border-white/10 backdrop-blur-sm">
<Music className="w-4 h-4 text-[#25F4EE]" />
Get Followers
</div>
<div className="flex items-center gap-2 bg-white/10 px-4 py-2.5 rounded-xl border border-white/10 backdrop-blur-sm">
<Video className="w-4 h-4 text-[#FE2C55]" />
Share Videos
</div>
<div className="flex items-center gap-2 bg-white/10 px-4 py-2.5 rounded-xl border border-white/10 backdrop-blur-sm">
<Smartphone className="w-4 h-4 text-white" />
Deep Link
</div>
</div>
</div>
{/* Visual Abstract */}
<div className="hidden lg:flex relative items-center justify-center min-h-[400px]">
{/* Glow Effects */}
<div className="absolute w-[300px] h-[300px] bg-[#25F4EE]/20 rounded-full blur-[80px] -top-10 -right-10 animate-pulse" />
<div className="absolute w-[300px] h-[300px] bg-[#FE2C55]/20 rounded-full blur-[80px] bottom-10 left-10 animate-pulse delay-75" />
<div className="relative w-80 h-96 bg-white/5 backdrop-blur-xl border border-white/20 rounded-3xl shadow-2xl flex flex-col items-center justify-center p-8 transform rotate-3 hover:rotate-0 transition-all duration-700 group">
<div className="absolute inset-0 bg-gradient-to-br from-white/10 to-transparent rounded-3xl" />
<div className="w-20 h-20 rounded-full bg-black border-2 border-[#25F4EE] p-1 mb-6 shadow-[#FE2C55]/50 shadow-lg relative">
<div className="w-full h-full rounded-full bg-slate-800 flex items-center justify-center overflow-hidden">
<Music className="w-10 h-10 text-white animate-bounce" />
</div>
<div className="absolute -bottom-1 -right-1 bg-[#FE2C55] w-6 h-6 rounded-full border-2 border-black flex items-center justify-center">
<Heart className="w-3 h-3 text-white fill-current" />
</div>
</div>
<div className="w-48 h-48 bg-white rounded-xl p-2 shadow-inner relative overflow-hidden flex items-center justify-center">
<QRCodeSVG value="https://www.qrmaster.net" size={170} fgColor="#000000" level="Q" />
</div>
{/* Floating Badge */}
<div className="absolute -bottom-6 -right-6 bg-black border border-white/10 py-3 px-5 rounded-xl shadow-xl flex items-center gap-3 transform transition-transform hover:scale-105 duration-300">
<div className="bg-white/10 p-2 rounded-full">
<Music className="w-5 h-5 text-[#25F4EE]" />
</div>
<div className="text-left">
<div className="text-[10px] text-slate-400 font-bold uppercase tracking-wider">TikTok</div>
<div className="text-sm font-bold text-white">Following</div>
</div>
</div>
</div>
</div>
</div>
</section>
{/* GENERATOR SECTION */}
<section className="py-12 px-4 sm:px-6 lg:px-8 -mt-8">
<TiktokGenerator />
</section>
{/* HOW IT WORKS */}
<section className="py-16 px-4 sm:px-6 lg:px-8 bg-white">
<div className="max-w-4xl mx-auto">
<h2 className="text-3xl font-bold text-slate-900 text-center mb-12">
How TikTok QR Codes Work
</h2>
<div className="grid md:grid-cols-3 lg:grid-cols-5 gap-8">
<article className="text-center">
<div className="w-14 h-14 rounded-2xl bg-black flex items-center justify-center mx-auto mb-4">
<Music className="w-7 h-7 text-[#25F4EE]" />
</div>
<h3 className="font-bold text-slate-900 mb-2">1. Enter Handle</h3>
<p className="text-slate-600 text-sm">
Type in your username. No password required.
</p>
</article>
<article className="text-center">
<div className="w-14 h-14 rounded-2xl bg-black flex items-center justify-center mx-auto mb-4">
<Smartphone className="w-7 h-7 text-[#FE2C55]" />
</div>
<h3 className="font-bold text-slate-900 mb-2">2. Scan</h3>
<p className="text-slate-600 text-sm">
Fans scan the code to instantly find you in the app.
</p>
</article>
<article className="text-center">
<div className="w-12 h-12 rounded-2xl bg-black flex items-center justify-center mx-auto mb-4">
<Download className="w-6 h-6 text-white" />
</div>
<h3 className="font-bold text-slate-900 mb-2">3. Download</h3>
<p className="text-slate-600 text-xs leading-relaxed">
Save your custom QR code.
</p>
</article>
<article className="text-center">
<div className="w-12 h-12 rounded-2xl bg-black flex items-center justify-center mx-auto mb-4">
<Heart className="w-6 h-6 text-white" />
</div>
<h3 className="font-bold text-slate-900 mb-2">4. Follow</h3>
<p className="text-slate-600 text-xs leading-relaxed">
Fans scan to find you instantly.
</p>
</article>
<article className="text-center">
<div className="w-12 h-12 rounded-2xl bg-black flex items-center justify-center mx-auto mb-4">
<Share2 className="w-6 h-6 text-white" />
</div>
<h3 className="font-bold text-slate-900 mb-2">5. Viral</h3>
<p className="text-slate-600 text-xs leading-relaxed">
Grow your audience everywhere.
</p>
</article>
</div>
</div>
</section>
<RelatedTools />
{/* FAQ SECTION */}
<section className="py-16 px-4 sm:px-6 lg:px-8" style={{ backgroundColor: '#EBEBDF' }}>
<div className="max-w-3xl mx-auto">
<h2 className="text-3xl font-bold text-slate-900 text-center mb-4">
Frequently Asked Questions
</h2>
<p className="text-slate-600 text-center mb-10">
Common questions about TikTok QR codes.
</p>
<div className="space-y-4">
<FaqItem
question="Does this replace the in-app QR code?"
answer="You can use either! The advantage of our generator is that you can print high-resolution versions for large posters, customize the color/frame, and it works with any standard QR scanner."
/>
<FaqItem
question="Can I link to a specific video?"
answer="Yes, just paste the full video URL (e.g. tiktok.com/@user/video/123...) instead of your username."
/>
<FaqItem
question="Is it free?"
answer="Yes, completely free from start to finish."
/>
<FaqItem
question="Can I track who scanned my code?"
answer="No, this is a static QR code. For analytics, you need a Dynamic QR Code."
/>
<FaqItem
question="Is it safe?"
answer="Yes. The QR code simply contains a link to your TikTok profile. No personal data is collected."
/>
</div>
</div>
</section>
</div>
</>
);
}
function FaqItem({ question, answer }: { question: string; answer: string }) {
return (
<details className="group bg-white rounded-xl shadow-sm border border-slate-200 overflow-hidden">
<summary className="flex items-center justify-between p-5 cursor-pointer list-none text-slate-900 font-semibold hover:bg-slate-50 transition-colors">
{question}
<span className="transition group-open:rotate-180 text-slate-400">
<svg fill="none" height="20" stroke="currentColor" strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" viewBox="0 0 24 24" width="20">
<path d="M6 9l6 6 6-6" />
</svg>
</span>
</summary>
<div className="text-slate-600 px-5 pb-5 pt-0 leading-relaxed text-sm">
{answer}
</div>
</details>
);
}

504
src/app/(main)/(marketing)/tools/twitter-qr-code/TwitterGenerator.tsx
View File

@@ -1,252 +1,252 @@
'use client';
import React, { useState, useRef } from 'react';
import Link from 'next/link';
import { QRCodeSVG } from 'qrcode.react';
import {
Twitter,
Download,
Check,
Sparkles,
MessageCircle
} from 'lucide-react';
import { Button } from '@/components/ui/Button';
import { Input } from '@/components/ui/Input';
import { cn } from '@/lib/utils';
// Brand Colors
const BRAND = {
paleGrey: '#EBEBDF',
richBlue: '#1A1265',
richBlueLight: '#2A2275',
};
// QR Color Options - X Theme
const QR_COLORS = [
{ name: 'X Black', value: '#000000' },
{ name: 'X Blue', value: '#1DA1F2' },
{ name: 'Dark Blue', value: '#1A1265' },
{ name: 'Teal', value: '#0D9488' },
{ name: 'Coral', value: '#F43F5E' },
{ name: 'Grey', value: '#374151' },
{ name: 'Emerald', value: '#10B981' },
{ name: 'Rose', value: '#F43F5E' },
];
// Frame Options
const FRAME_OPTIONS = [
{ id: 'none', label: 'No Frame' },
{ id: 'scanme', label: 'Scan Me' },
{ id: 'follow', label: 'Follow' },
{ id: 'connect', label: 'Connect' },
];
export default function TwitterGenerator() {
const [username, setUsername] = useState('');
const [qrColor, setQrColor] = useState('#000000');
const [frameType, setFrameType] = useState('none');
const qrRef = useRef<HTMLDivElement>(null);
// Twitter URL construction
const getUrl = () => {
const cleanUser = username.replace(/^@/, '').replace(/https?:\/\/(www\.)?(twitter|x)\.com\//, '').replace(/\/$/, '');
return cleanUser ? `https://x.com/${cleanUser}` : 'https://x.com';
};
const handleDownload = async (format: 'png' | 'svg') => {
if (!qrRef.current) return;
try {
if (format === 'png') {
const { toPng } = await import('html-to-image');
const dataUrl = await toPng(qrRef.current, { cacheBust: true, pixelRatio: 3 });
const link = document.createElement('a');
link.download = `twitter-qr-code.png`;
link.href = dataUrl;
link.click();
} else {
const svgData = qrRef.current.querySelector('svg')?.outerHTML;
if (svgData) {
const blob = new Blob([svgData], { type: 'image/svg+xml;charset=utf-8' });
const url = URL.createObjectURL(blob);
const link = document.createElement('a');
link.href = url;
link.download = `twitter-qr-code.svg`;
link.click();
}
}
} catch (err) {
console.error('Download failed', err);
}
};
const getFrameLabel = () => {
const frame = FRAME_OPTIONS.find(f => f.id === frameType);
return frame?.id !== 'none' ? frame?.label : null;
};
return (
<div className="w-full max-w-5xl mx-auto px-4 md:px-6">
{/* Main Generator Card */}
<div className="bg-white rounded-3xl shadow-2xl shadow-slate-900/10 overflow-hidden border border-slate-100">
<div className="grid lg:grid-cols-2">
{/* LEFT: Input Section */}
<div className="p-6 md:p-8 lg:p-10 space-y-8 border-r border-slate-100">
{/* Twitter Details */}
<div className="space-y-6">
<h2 className="text-lg font-bold text-slate-900 flex items-center gap-2">
<Twitter className="w-5 h-5 text-black" />
X (Twitter) Username
</h2>
<div>
<label className="block text-sm font-medium text-slate-700 mb-2">Username or Link</label>
<Input
placeholder="@username"
value={username}
onChange={(e) => setUsername(e.target.value)}
className="h-12 text-base rounded-xl border-slate-200 focus:border-black focus:ring-black"
/>
<p className="text-xs text-slate-600 mt-2">Enter your X (Twitter) handle to create a profile link.</p>
</div>
</div>
<div className="border-t border-slate-100"></div>
{/* Design Options */}
<div className="space-y-6">
<h2 className="text-lg font-bold text-slate-900 flex items-center gap-2">
<Sparkles className="w-5 h-5 text-black" />
Design Options
</h2>
{/* Color Picker */}
<div>
<label className="block text-sm font-medium text-slate-700 mb-3">QR Code Color</label>
<div className="flex flex-wrap gap-2">
{QR_COLORS.map((c) => (
<button
key={c.name}
onClick={() => setQrColor(c.value)}
className={cn(
"w-9 h-9 rounded-full border-2 flex items-center justify-center transition-all hover:scale-110",
qrColor === c.value ? "border-slate-900 ring-2 ring-offset-2 ring-slate-200" : "border-white shadow-md"
)}
style={{ backgroundColor: c.value }}
aria-label={`Select ${c.name}`}
title={c.name}
>
{qrColor === c.value && <Check className="w-4 h-4 text-white" strokeWidth={3} />}
</button>
))}
</div>
</div>
{/* Frame Selector */}
<div>
<label className="block text-sm font-medium text-slate-700 mb-3">Frame Label</label>
<div className="grid grid-cols-2 sm:grid-cols-4 gap-2">
{FRAME_OPTIONS.map((frame) => (
<button
key={frame.id}
onClick={() => setFrameType(frame.id)}
className={cn(
"py-2.5 px-3 rounded-lg text-sm font-medium transition-all border",
frameType === frame.id
? "bg-slate-900 text-white border-slate-900"
: "bg-slate-50 text-slate-600 border-slate-200 hover:border-slate-300"
)}
>
{frame.label}
</button>
))}
</div>
</div>
</div>
</div>
{/* RIGHT: Preview Section */}
<div className="p-6 md:p-8 lg:p-10 flex flex-col items-center justify-center" style={{ backgroundColor: BRAND.paleGrey }}>
{/* QR Card with Frame */}
<div
ref={qrRef}
className="bg-white rounded-3xl shadow-xl p-6 sm:p-8 flex flex-col items-center w-full max-w-[320px]"
>
{/* Frame Label */}
{getFrameLabel() && (
<div
className="mb-5 px-8 py-2.5 rounded-full text-white font-bold text-sm tracking-widest uppercase shadow-md"
style={{ backgroundColor: qrColor }}
>
{getFrameLabel()}
</div>
)}
{/* QR Code */}
<div className="bg-white">
<QRCodeSVG
value={getUrl()}
size={240}
level="M"
includeMargin={false}
fgColor={qrColor}
/>
</div>
{/* Info Preview */}
<div className="mt-6 text-center max-w-[260px]">
<h3 className="font-bold text-slate-900 text-lg flex items-center justify-center gap-2 truncate">
<Twitter className="w-4 h-4 text-slate-400 shrink-0" />
<span className="truncate">{username || '@username'}</span>
</h3>
<div className="text-xs text-slate-600 mt-1">Opens in X (Twitter)</div>
</div>
</div>
{/* Download Buttons */}
<div className="flex items-center gap-3 mt-8">
<Button
onClick={() => handleDownload('png')}
className="bg-slate-900 hover:bg-black text-white shadow-lg"
>
<Download className="w-4 h-4 mr-2" />
Download PNG
</Button>
<Button
onClick={() => handleDownload('svg')}
variant="outline"
className="border-slate-300 hover:bg-white"
>
<Download className="w-4 h-4 mr-2" />
SVG
</Button>
</div>
<p className="text-xs text-slate-600 mt-4 text-center">
Scanning redirects directly to the X profile.
</p>
</div>
</div>
</div>
{/* Upsell Banner */}
<div className="mt-8 bg-gradient-to-r from-slate-900 to-slate-700 rounded-2xl p-6 flex flex-col sm:flex-row items-center justify-between gap-4">
<div className="text-white text-center sm:text-left">
<h3 className="font-bold text-lg">Cross-promote your channels</h3>
<p className="text-white/80 text-sm mt-1">
Use a single Dynamic QR Code to link to all your social media profiles at once.
</p>
</div>
<Link href="/signup">
<Button className="bg-white text-slate-900 hover:bg-slate-100 shrink-0 shadow-lg">
Create Smart Link
</Button>
</Link>
</div>
</div>
);
}
'use client';
import React, { useState, useRef } from 'react';
import Link from 'next/link';
import { QRCodeSVG } from 'qrcode.react';
import {
Twitter,
Download,
Check,
Sparkles,
MessageCircle
} from 'lucide-react';
import { Button } from '@/components/ui/Button';
import { Input } from '@/components/ui/Input';
import { cn } from '@/lib/utils';
// Brand Colors
const BRAND = {
paleGrey: '#EBEBDF',
richBlue: '#1A1265',
richBlueLight: '#2A2275',
};
// QR Color Options - X Theme
const QR_COLORS = [
{ name: 'X Black', value: '#000000' },
{ name: 'X Blue', value: '#1DA1F2' },
{ name: 'Dark Blue', value: '#1A1265' },
{ name: 'Teal', value: '#0D9488' },
{ name: 'Coral', value: '#F43F5E' },
{ name: 'Grey', value: '#374151' },
{ name: 'Emerald', value: '#10B981' },
{ name: 'Rose', value: '#F43F5E' },
];
// Frame Options
const FRAME_OPTIONS = [
{ id: 'none', label: 'No Frame' },
{ id: 'scanme', label: 'Scan Me' },
{ id: 'follow', label: 'Follow' },
{ id: 'connect', label: 'Connect' },
];
export default function TwitterGenerator() {
const [username, setUsername] = useState('');
const [qrColor, setQrColor] = useState('#000000');
const [frameType, setFrameType] = useState('none');
const qrRef = useRef<HTMLDivElement>(null);
// Twitter URL construction
const getUrl = () => {
const cleanUser = username.replace(/^@/, '').replace(/https?:\/\/(www\.)?(twitter|x)\.com\//, '').replace(/\/$/, '');
return cleanUser ? `https://x.com/${cleanUser}` : 'https://x.com';
};
const handleDownload = async (format: 'png' | 'svg') => {
if (!qrRef.current) return;
try {
if (format === 'png') {
const { toPng } = await import('html-to-image');
const dataUrl = await toPng(qrRef.current, { cacheBust: true, pixelRatio: 3 });
const link = document.createElement('a');
link.download = `twitter-qr-code.png`;
link.href = dataUrl;
link.click();
} else {
const svgData = qrRef.current.querySelector('svg')?.outerHTML;
if (svgData) {
const blob = new Blob([svgData], { type: 'image/svg+xml;charset=utf-8' });
const url = URL.createObjectURL(blob);
const link = document.createElement('a');
link.href = url;
link.download = `twitter-qr-code.svg`;
link.click();
}
}
} catch (err) {
console.error('Download failed', err);
}
};
const getFrameLabel = () => {
const frame = FRAME_OPTIONS.find(f => f.id === frameType);
return frame?.id !== 'none' ? frame?.label : null;
};
return (
<div className="w-full max-w-5xl mx-auto px-4 md:px-6">
{/* Main Generator Card */}
<div className="bg-white rounded-3xl shadow-2xl shadow-slate-900/10 overflow-hidden border border-slate-100">
<div className="grid lg:grid-cols-2">
{/* LEFT: Input Section */}
<div className="p-6 md:p-8 lg:p-10 space-y-8 border-r border-slate-100">
{/* Twitter Details */}
<div className="space-y-6">
<h2 className="text-lg font-bold text-slate-900 flex items-center gap-2">
<Twitter className="w-5 h-5 text-black" />
X (Twitter) Username
</h2>
<div>
<label className="block text-sm font-medium text-slate-700 mb-2">Username or Link</label>
<Input
placeholder="@username"
value={username}
onChange={(e) => setUsername(e.target.value)}
className="h-12 text-base rounded-xl border-slate-200 focus:border-black focus:ring-black"
/>
<p className="text-xs text-slate-600 mt-2">Enter your X (Twitter) handle to create a profile link.</p>
</div>
</div>
<div className="border-t border-slate-100"></div>
{/* Design Options */}
<div className="space-y-6">
<h2 className="text-lg font-bold text-slate-900 flex items-center gap-2">
<Sparkles className="w-5 h-5 text-black" />
Design Options
</h2>
{/* Color Picker */}
<div>
<label className="block text-sm font-medium text-slate-700 mb-3">QR Code Color</label>
<div className="flex flex-wrap gap-2">
{QR_COLORS.map((c) => (
<button
key={c.name}
onClick={() => setQrColor(c.value)}
className={cn(
"w-9 h-9 rounded-full border-2 flex items-center justify-center transition-all hover:scale-110",
qrColor === c.value ? "border-slate-900 ring-2 ring-offset-2 ring-slate-200" : "border-white shadow-md"
)}
style={{ backgroundColor: c.value }}
aria-label={`Select ${c.name}`}
title={c.name}
>
{qrColor === c.value && <Check className="w-4 h-4 text-white" strokeWidth={3} />}
</button>
))}
</div>
</div>
{/* Frame Selector */}
<div>
<label className="block text-sm font-medium text-slate-700 mb-3">Frame Label</label>
<div className="grid grid-cols-2 sm:grid-cols-4 gap-2">
{FRAME_OPTIONS.map((frame) => (
<button
key={frame.id}
onClick={() => setFrameType(frame.id)}
className={cn(
"py-2.5 px-3 rounded-lg text-sm font-medium transition-all border",
frameType === frame.id
? "bg-slate-900 text-white border-slate-900"
: "bg-slate-50 text-slate-600 border-slate-200 hover:border-slate-300"
)}
>
{frame.label}
</button>
))}
</div>
</div>
</div>
</div>
{/* RIGHT: Preview Section */}
<div className="p-6 md:p-8 lg:p-10 flex flex-col items-center justify-center" style={{ backgroundColor: BRAND.paleGrey }}>
{/* QR Card with Frame */}
<div
ref={qrRef}
className="bg-white rounded-3xl shadow-xl p-6 sm:p-8 flex flex-col items-center w-full max-w-[320px]"
>
{/* Frame Label */}
{getFrameLabel() && (
<div
className="mb-5 px-8 py-2.5 rounded-full text-white font-bold text-sm tracking-widest uppercase shadow-md"
style={{ backgroundColor: qrColor }}
>
{getFrameLabel()}
</div>
)}
{/* QR Code */}
<div className="bg-white">
<QRCodeSVG
value={getUrl()}
size={240}
level="M"
includeMargin={false}
fgColor={qrColor}
/>
</div>
{/* Info Preview */}
<div className="mt-6 text-center max-w-[260px]">
<h3 className="font-bold text-slate-900 text-lg flex items-center justify-center gap-2 truncate">
<Twitter className="w-4 h-4 text-slate-400 shrink-0" />
<span className="truncate">{username || '@username'}</span>
</h3>
<div className="text-xs text-slate-600 mt-1">Opens in X (Twitter)</div>
</div>
</div>
{/* Download Buttons */}
<div className="flex items-center gap-3 mt-8">
<Button
onClick={() => handleDownload('png')}
className="bg-slate-900 hover:bg-black text-white shadow-lg"
>
<Download className="w-4 h-4 mr-2" />
Download PNG
</Button>
<Button
onClick={() => handleDownload('svg')}
variant="outline"
className="border-slate-300 hover:bg-white"
>
<Download className="w-4 h-4 mr-2" />
SVG
</Button>
</div>
<p className="text-xs text-slate-600 mt-4 text-center">
Scanning redirects directly to the X profile.
</p>
</div>
</div>
</div>
{/* Upsell Banner */}
<div className="mt-8 bg-gradient-to-r from-slate-900 to-slate-700 rounded-2xl p-6 flex flex-col sm:flex-row items-center justify-between gap-4">
<div className="text-white text-center sm:text-left">
<h3 className="font-bold text-lg">Cross-promote your channels</h3>
<p className="text-white/80 text-sm mt-1">
Use a single Dynamic QR Code to link to all your social media profiles at once.
</p>
</div>
<Link href="/signup">
<Button className="bg-white text-slate-900 hover:bg-slate-100 shrink-0 shadow-lg">
Create Smart Link
</Button>
</Link>
</div>
</div>
);
}

670
src/app/(main)/(marketing)/tools/twitter-qr-code/page.tsx
View File

@@ -1,335 +1,335 @@
import React from 'react';
import type { Metadata } from 'next';
import TwitterGenerator from './TwitterGenerator';
import { Twitter, Shield, Zap, Smartphone, MessageCircle, UserPlus, Download, Share2 } from 'lucide-react';
import { QRCodeSVG } from 'qrcode.react';
import { ToolBreadcrumb } from '@/components/seo/BreadcrumbSchema';
import { RelatedTools } from '@/components/marketing/RelatedTools';
import { generateSoftwareAppSchema, generateFaqSchema } from '@/lib/schema-utils';
// SEO Optimized Metadata
export const metadata: Metadata = {
title: {
absolute: 'Free Twitter (X) QR Code Generator | Follow & Connect | QR Master',
},
description: 'Create a QR code for your X (Twitter) profile. Twitter QR Code erstellen. Scanners follow you instantly. Free & Customizable.',
keywords: ['twitter qr code', 'x qr generator', 'twitter follow qr', 'social media qr code', 'x profile qr', 'twitter qr code erstellen', 'x qr code erstellen', 'twitter profil qr code', 'x profil qr code'],
alternates: {
canonical: 'https://www.qrmaster.net/tools/twitter-qr-code',
},
openGraph: {
title: 'Free Twitter (X) QR Code Generator | QR Master',
description: 'Generate QR codes to grow your X (Twitter) following. Instant app redirect.',
type: 'website',
url: 'https://www.qrmaster.net/tools/twitter-qr-code',
images: [{ url: '/og-twitter-generator.png', width: 1200, height: 630 }],
},
twitter: {
card: 'summary_large_image',
title: 'Free Twitter (X) QR Code Generator',
description: 'Create QR codes for X. Boost your following.',
},
robots: {
index: true,
follow: true,
},
};
// JSON-LD Structured Data
const jsonLd = {
'@context': 'https://schema.org',
'@graph': [
generateSoftwareAppSchema(
'Twitter (X) QR Code Generator',
'Generate QR codes that direct users to an X (Twitter) profile or tweet.',
'/og-twitter-generator.png'
),
{
'@type': 'HowTo',
name: 'How to Create a Twitter QR Code',
description: 'Create a QR code that opens an X profile.',
step: [
{
'@type': 'HowToStep',
position: 1,
name: 'Enter Username',
text: 'Enter your X handle (e.g. @elonmusk).',
},
{
'@type': 'HowToStep',
position: 2,
name: 'Design',
text: 'Choose a black frame or custom color.',
},
{
'@type': 'HowToStep',
position: 3,
name: 'Download',
text: 'Save the QR code.',
},
{
'@type': 'HowToStep',
position: 4,
name: 'Test',
text: 'Scan to verify it goes to the correct profile.',
},
{
'@type': 'HowToStep',
position: 5,
name: 'Share',
text: 'Add to your business cards or conference badges.',
},
],
totalTime: 'PT30S',
},
generateFaqSchema({
'Does it work for both Twitter and X?': {
question: 'Does it work for both Twitter and X?',
answer: 'Yes, they are the same platform. The QR code links to x.com, which is the current standard, but works for twitter.com links too.',
},
'Can I link to a specific tweet?': {
question: 'Can I link to a specific tweet?',
answer: 'Yes! Just paste the full URL of the tweet into the input field instead of your username.',
},
'Is it free?': {
question: 'Is it free?',
answer: 'Yes, generating this QR code is completely free and requires no signup.',
},
'Can I track scans?': {
question: 'Can I track scans?',
answer: 'This is a static QR code, so tracking is not included. Use our Dynamic QR Code generator for analytics.',
},
'What if I change my handle?': {
question: 'What if I change my handle?',
answer: 'If you change your handle, the link in the QR code will break. You will need to generate a new QR code.',
},
}),
],
};
export default function TwitterQRCodePage() {
return (
<>
<script
type="application/ld+json"
dangerouslySetInnerHTML={{ __html: JSON.stringify(jsonLd) }}
/>
<ToolBreadcrumb toolName="Twitter QR Code Generator" toolSlug="twitter-qr-code" />
<div className="min-h-screen" style={{ backgroundColor: '#EBEBDF' }}>
{/* HERO SECTION */}
<section className="relative pt-20 pb-20 lg:pt-32 lg:pb-32 px-4 sm:px-6 lg:px-8 overflow-hidden bg-slate-950">
<div className="absolute inset-0 opacity-20">
{/* X Pattern */}
<svg className="w-full h-full" width="100%" height="100%" xmlns="http://www.w3.org/2000/svg">
<defs>
<pattern id="x_pattern" width="60" height="60" patternUnits="userSpaceOnUse">
<path d="M20 20L40 40M40 20L20 40" stroke="white" strokeWidth="1" />
</pattern>
</defs>
<rect width="100%" height="100%" fill="url(#x_pattern)" />
</svg>
</div>
<div className="max-w-7xl mx-auto grid lg:grid-cols-2 gap-12 items-center relative z-10">
<div className="text-center lg:text-left">
<div className="inline-flex items-center gap-2 px-3 py-1 rounded-full bg-white/10 text-white/90 text-sm font-medium mb-6 backdrop-blur-sm border border-white/10 hover:bg-white/20 transition-colors cursor-default">
<span className="flex h-2 w-2 relative">
<span className="animate-ping absolute inline-flex h-full w-full rounded-full bg-blue-500 opacity-75"></span>
<span className="relative inline-flex rounded-full h-2 w-2 bg-blue-500"></span>
</span>
Free Tool — No Signup Required
</div>
<h1 className="text-4xl md:text-5xl lg:text-6xl font-extrabold text-white tracking-tight leading-tight mb-6">
Connect on X with <br className="hidden lg:block" />
<span className="text-transparent bg-clip-text bg-gradient-to-r from-blue-400 to-white">Twitter QR Codes</span>
</h1>
<p className="text-lg md:text-xl text-slate-400 max-w-2xl mx-auto lg:mx-0 mb-8 leading-relaxed">
Share your X profile instantly. A quick scan takes users directly to your timeline to follow and interact.
<strong className="text-white block sm:inline mt-2 sm:mt-0"> Grow your community.</strong>
</p>
<div className="flex flex-wrap justify-center lg:justify-start gap-4 text-sm font-medium text-white/80">
<div className="flex items-center gap-2 bg-white/5 px-4 py-2.5 rounded-xl border border-white/10 backdrop-blur-sm">
<UserPlus className="w-4 h-4 text-white" />
Get Followers
</div>
<div className="flex items-center gap-2 bg-white/5 px-4 py-2.5 rounded-xl border border-white/10 backdrop-blur-sm">
<MessageCircle className="w-4 h-4 text-white" />
Start Conversions
</div>
<div className="flex items-center gap-2 bg-white/5 px-4 py-2.5 rounded-xl border border-white/10 backdrop-blur-sm">
<Zap className="w-4 h-4 text-white" />
Instant Connect
</div>
</div>
</div>
{/* Visual Abstract */}
<div className="hidden lg:flex relative items-center justify-center min-h-[400px]">
<div className="absolute w-[500px] h-[500px] bg-blue-500/10 rounded-full blur-[100px] -top-20 -right-20 animate-pulse" />
<div className="relative w-80 h-96 bg-white/5 backdrop-blur-xl border border-white/20 rounded-3xl shadow-2xl flex flex-col items-center justify-center p-8 transform rotate-2 hover:-rotate-1 transition-all duration-700 group">
<div className="absolute inset-0 bg-gradient-to-br from-white/5 to-transparent rounded-3xl" />
<div className="w-full bg-black rounded-xl shadow-lg p-5 mb-6 relative overflow-hidden flex items-center gap-4">
<div className="w-12 h-12 bg-white rounded-full flex items-center justify-center">
<Twitter className="w-6 h-6 text-black" fill="black" />
</div>
<div className="text-white">
<div className="font-bold text-sm">QR Master</div>
<div className="text-xs text-slate-400">@qrmaster</div>
</div>
<button className="ml-auto bg-white text-black px-4 py-1.5 rounded-full text-xs font-bold hover:bg-slate-200">
Follow
</button>
</div>
<div className="w-48 h-48 bg-white rounded-xl p-2 shadow-inner relative overflow-hidden flex items-center justify-center">
<QRCodeSVG value="https://www.qrmaster.net" size={170} fgColor="#000000" level="Q" />
</div>
{/* Floating Badge */}
<div className="absolute -bottom-6 -right-6 bg-black border border-white/10 py-3 px-5 rounded-xl shadow-xl flex items-center gap-3 transform transition-transform hover:scale-105 duration-300">
<div className="bg-white/10 p-2 rounded-full">
<Twitter className="w-5 h-5 text-white" fill="white" />
</div>
<div className="text-left">
<div className="text-[10px] text-slate-400 font-bold uppercase tracking-wider">Twitter / X</div>
<div className="text-sm font-bold text-white">Profile Link</div>
</div>
</div>
</div>
</div>
</div>
</section>
{/* GENERATOR SECTION */}
<section className="py-12 px-4 sm:px-6 lg:px-8 -mt-8">
<TwitterGenerator />
</section>
{/* HOW IT WORKS */}
<section className="py-16 px-4 sm:px-6 lg:px-8 bg-white">
<div className="max-w-4xl mx-auto">
<h2 className="text-3xl font-bold text-slate-900 text-center mb-12">
How X (Twitter) QR Codes Work
</h2>
<div className="grid md:grid-cols-3 lg:grid-cols-5 gap-8">
<article className="text-center">
<div className="w-14 h-14 rounded-2xl bg-black flex items-center justify-center mx-auto mb-4">
<Twitter className="w-7 h-7 text-white" />
</div>
<h3 className="font-bold text-slate-900 mb-2">1. Input Handle</h3>
<p className="text-slate-600 text-sm">
Simply type your @handle or paste your profile link.
</p>
</article>
<article className="text-center">
<div className="w-14 h-14 rounded-2xl bg-black flex items-center justify-center mx-auto mb-4">
<Smartphone className="w-7 h-7 text-white" />
</div>
<h3 className="font-bold text-slate-900 mb-2">2. Snap</h3>
<p className="text-slate-600 text-sm">
Put the code on your networking gear. People scan it in seconds.
</p>
</article>
<article className="text-center">
<div className="w-12 h-12 rounded-2xl bg-black flex items-center justify-center mx-auto mb-4">
<Download className="w-6 h-6 text-white" />
</div>
<h3 className="font-bold text-slate-900 mb-2">3. Download</h3>
<p className="text-slate-600 text-xs leading-relaxed">
Save your X QR code.
</p>
</article>
<article className="text-center">
<div className="w-12 h-12 rounded-2xl bg-black flex items-center justify-center mx-auto mb-4">
<UserPlus className="w-6 h-6 text-white" />
</div>
<h3 className="font-bold text-slate-900 mb-2">4. Scan</h3>
<p className="text-slate-600 text-xs leading-relaxed">
People scan to find you.
</p>
</article>
<article className="text-center">
<div className="w-12 h-12 rounded-2xl bg-black flex items-center justify-center mx-auto mb-4">
<Share2 className="w-6 h-6 text-white" />
</div>
<h3 className="font-bold text-slate-900 mb-2">5. Connect</h3>
<p className="text-slate-600 text-xs leading-relaxed">
They are instantly on your profile.
</p>
</article>
</div>
</div>
</section>
{/* RELATED TOOLS */}
<RelatedTools />
{/* FAQ SECTION */}
<section className="py-16 px-4 sm:px-6 lg:px-8" style={{ backgroundColor: '#EBEBDF' }}>
<div className="max-w-3xl mx-auto">
<h2 className="text-3xl font-bold text-slate-900 text-center mb-4">
Frequently Asked Questions
</h2>
<p className="text-slate-600 text-center mb-10">
Common questions about Twitter QR codes.
</p>
<div className="space-y-4">
<FaqItem
question="Why create a QR code for X?"
answer="It's much faster than telling someone your handle and hoping they spell it right. A scan is instant and error-proof."
/>
<FaqItem
question="Will links to twitter.com still work?"
answer="Yes, twitter.com links redirect to x.com, so both work perfectly fine."
/>
<FaqItem
question="Can I change the destination later?"
answer="No, this is a static QR code. If you change your handle, you will need a new QR code. Our Dynamic QR codes allow you to edit the link anytime."
/>
<FaqItem
question="Can I track scans?"
answer="This is a static QR code, so tracking is not included. Use our Dynamic QR Code generator for analytics."
/>
<FaqItem
question="What if I change my handle?"
answer="If you change your handle, the link in the QR code will break. You will need to generate a new QR code."
/>
</div>
</div>
</section>
</div>
</>
);
}
function FaqItem({ question, answer }: { question: string; answer: string }) {
return (
<details className="group bg-white rounded-xl shadow-sm border border-slate-200 overflow-hidden">
<summary className="flex items-center justify-between p-5 cursor-pointer list-none text-slate-900 font-semibold hover:bg-slate-50 transition-colors">
{question}
<span className="transition group-open:rotate-180 text-slate-400">
<svg fill="none" height="20" stroke="currentColor" strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" viewBox="0 0 24 24" width="20">
<path d="M6 9l6 6 6-6" />
</svg>
</span>
</summary>
<div className="text-slate-600 px-5 pb-5 pt-0 leading-relaxed text-sm">
{answer}
</div>
</details>
);
}
import React from 'react';
import type { Metadata } from 'next';
import TwitterGenerator from './TwitterGenerator';
import { Twitter, Shield, Zap, Smartphone, MessageCircle, UserPlus, Download, Share2 } from 'lucide-react';
import { QRCodeSVG } from 'qrcode.react';
import { ToolBreadcrumb } from '@/components/seo/BreadcrumbSchema';
import { RelatedTools } from '@/components/marketing/RelatedTools';
import { generateSoftwareAppSchema, generateFaqSchema } from '@/lib/schema-utils';
// SEO Optimized Metadata
export const metadata: Metadata = {
title: {
absolute: 'Free Twitter (X) QR Code Generator | Follow & Connect | QR Master',
},
description: 'Create a QR code for your X (Twitter) profile. Twitter QR Code erstellen. Scanners follow you instantly. Free & Customizable.',
keywords: ['twitter qr code', 'x qr generator', 'twitter follow qr', 'social media qr code', 'x profile qr', 'twitter qr code erstellen', 'x qr code erstellen', 'twitter profil qr code', 'x profil qr code'],
alternates: {
canonical: 'https://www.qrmaster.net/tools/twitter-qr-code',
},
openGraph: {
title: 'Free Twitter (X) QR Code Generator | QR Master',
description: 'Generate QR codes to grow your X (Twitter) following. Instant app redirect.',
type: 'website',
url: 'https://www.qrmaster.net/tools/twitter-qr-code',
images: [{ url: '/og-twitter-generator.png', width: 1200, height: 630 }],
},
twitter: {
card: 'summary_large_image',
title: 'Free Twitter (X) QR Code Generator',
description: 'Create QR codes for X. Boost your following.',
},
robots: {
index: true,
follow: true,
},
};
// JSON-LD Structured Data
const jsonLd = {
'@context': 'https://schema.org',
'@graph': [
generateSoftwareAppSchema(
'Twitter (X) QR Code Generator',
'Generate QR codes that direct users to an X (Twitter) profile or tweet.',
'/og-twitter-generator.png'
),
{
'@type': 'HowTo',
name: 'How to Create a Twitter QR Code',
description: 'Create a QR code that opens an X profile.',
step: [
{
'@type': 'HowToStep',
position: 1,
name: 'Enter Username',
text: 'Enter your X handle (e.g. @elonmusk).',
},
{
'@type': 'HowToStep',
position: 2,
name: 'Design',
text: 'Choose a black frame or custom color.',
},
{
'@type': 'HowToStep',
position: 3,
name: 'Download',
text: 'Save the QR code.',
},
{
'@type': 'HowToStep',
position: 4,
name: 'Test',
text: 'Scan to verify it goes to the correct profile.',
},
{
'@type': 'HowToStep',
position: 5,
name: 'Share',
text: 'Add to your business cards or conference badges.',
},
],
totalTime: 'PT30S',
},
generateFaqSchema({
'Does it work for both Twitter and X?': {
question: 'Does it work for both Twitter and X?',
answer: 'Yes, they are the same platform. The QR code links to x.com, which is the current standard, but works for twitter.com links too.',
},
'Can I link to a specific tweet?': {
question: 'Can I link to a specific tweet?',
answer: 'Yes! Just paste the full URL of the tweet into the input field instead of your username.',
},
'Is it free?': {
question: 'Is it free?',
answer: 'Yes, generating this QR code is completely free and requires no signup.',
},
'Can I track scans?': {
question: 'Can I track scans?',
answer: 'This is a static QR code, so tracking is not included. Use our Dynamic QR Code generator for analytics.',
},
'What if I change my handle?': {
question: 'What if I change my handle?',
answer: 'If you change your handle, the link in the QR code will break. You will need to generate a new QR code.',
},
}),
],
};
export default function TwitterQRCodePage() {
return (
<>
<script
type="application/ld+json"
dangerouslySetInnerHTML={{ __html: JSON.stringify(jsonLd) }}
/>
<ToolBreadcrumb toolName="Twitter QR Code Generator" toolSlug="twitter-qr-code" />
<div className="min-h-screen" style={{ backgroundColor: '#EBEBDF' }}>
{/* HERO SECTION */}
<section className="relative pt-20 pb-20 lg:pt-32 lg:pb-32 px-4 sm:px-6 lg:px-8 overflow-hidden bg-slate-950">
<div className="absolute inset-0 opacity-20">
{/* X Pattern */}
<svg className="w-full h-full" width="100%" height="100%" xmlns="http://www.w3.org/2000/svg">
<defs>
<pattern id="x_pattern" width="60" height="60" patternUnits="userSpaceOnUse">
<path d="M20 20L40 40M40 20L20 40" stroke="white" strokeWidth="1" />
</pattern>
</defs>
<rect width="100%" height="100%" fill="url(#x_pattern)" />
</svg>
</div>
<div className="max-w-7xl mx-auto grid lg:grid-cols-2 gap-12 items-center relative z-10">
<div className="text-center lg:text-left">
<div className="inline-flex items-center gap-2 px-3 py-1 rounded-full bg-white/10 text-white/90 text-sm font-medium mb-6 backdrop-blur-sm border border-white/10 hover:bg-white/20 transition-colors cursor-default">
<span className="flex h-2 w-2 relative">
<span className="animate-ping absolute inline-flex h-full w-full rounded-full bg-blue-500 opacity-75"></span>
<span className="relative inline-flex rounded-full h-2 w-2 bg-blue-500"></span>
</span>
Free Tool — No Signup Required
</div>
<h1 className="text-4xl md:text-5xl lg:text-6xl font-extrabold text-white tracking-tight leading-tight mb-6">
Connect on X with <br className="hidden lg:block" />
<span className="text-transparent bg-clip-text bg-gradient-to-r from-blue-400 to-white">Twitter QR Codes</span>
</h1>
<p className="text-lg md:text-xl text-slate-400 max-w-2xl mx-auto lg:mx-0 mb-8 leading-relaxed">
Share your X profile instantly. A quick scan takes users directly to your timeline to follow and interact.
<strong className="text-white block sm:inline mt-2 sm:mt-0"> Grow your community.</strong>
</p>
<div className="flex flex-wrap justify-center lg:justify-start gap-4 text-sm font-medium text-white/80">
<div className="flex items-center gap-2 bg-white/5 px-4 py-2.5 rounded-xl border border-white/10 backdrop-blur-sm">
<UserPlus className="w-4 h-4 text-white" />
Get Followers
</div>
<div className="flex items-center gap-2 bg-white/5 px-4 py-2.5 rounded-xl border border-white/10 backdrop-blur-sm">
<MessageCircle className="w-4 h-4 text-white" />
Start Conversions
</div>
<div className="flex items-center gap-2 bg-white/5 px-4 py-2.5 rounded-xl border border-white/10 backdrop-blur-sm">
<Zap className="w-4 h-4 text-white" />
Instant Connect
</div>
</div>
</div>
{/* Visual Abstract */}
<div className="hidden lg:flex relative items-center justify-center min-h-[400px]">
<div className="absolute w-[500px] h-[500px] bg-blue-500/10 rounded-full blur-[100px] -top-20 -right-20 animate-pulse" />
<div className="relative w-80 h-96 bg-white/5 backdrop-blur-xl border border-white/20 rounded-3xl shadow-2xl flex flex-col items-center justify-center p-8 transform rotate-2 hover:-rotate-1 transition-all duration-700 group">
<div className="absolute inset-0 bg-gradient-to-br from-white/5 to-transparent rounded-3xl" />
<div className="w-full bg-black rounded-xl shadow-lg p-5 mb-6 relative overflow-hidden flex items-center gap-4">
<div className="w-12 h-12 bg-white rounded-full flex items-center justify-center">
<Twitter className="w-6 h-6 text-black" fill="black" />
</div>
<div className="text-white">
<div className="font-bold text-sm">QR Master</div>
<div className="text-xs text-slate-400">@qrmaster</div>
</div>
<button className="ml-auto bg-white text-black px-4 py-1.5 rounded-full text-xs font-bold hover:bg-slate-200">
Follow
</button>
</div>
<div className="w-48 h-48 bg-white rounded-xl p-2 shadow-inner relative overflow-hidden flex items-center justify-center">
<QRCodeSVG value="https://www.qrmaster.net" size={170} fgColor="#000000" level="Q" />
</div>
{/* Floating Badge */}
<div className="absolute -bottom-6 -right-6 bg-black border border-white/10 py-3 px-5 rounded-xl shadow-xl flex items-center gap-3 transform transition-transform hover:scale-105 duration-300">
<div className="bg-white/10 p-2 rounded-full">
<Twitter className="w-5 h-5 text-white" fill="white" />
</div>
<div className="text-left">
<div className="text-[10px] text-slate-400 font-bold uppercase tracking-wider">Twitter / X</div>
<div className="text-sm font-bold text-white">Profile Link</div>
</div>
</div>
</div>
</div>
</div>
</section>
{/* GENERATOR SECTION */}
<section className="py-12 px-4 sm:px-6 lg:px-8 -mt-8">
<TwitterGenerator />
</section>
{/* HOW IT WORKS */}
<section className="py-16 px-4 sm:px-6 lg:px-8 bg-white">
<div className="max-w-4xl mx-auto">
<h2 className="text-3xl font-bold text-slate-900 text-center mb-12">
How X (Twitter) QR Codes Work
</h2>
<div className="grid md:grid-cols-3 lg:grid-cols-5 gap-8">
<article className="text-center">
<div className="w-14 h-14 rounded-2xl bg-black flex items-center justify-center mx-auto mb-4">
<Twitter className="w-7 h-7 text-white" />
</div>
<h3 className="font-bold text-slate-900 mb-2">1. Input Handle</h3>
<p className="text-slate-600 text-sm">
Simply type your @handle or paste your profile link.
</p>
</article>
<article className="text-center">
<div className="w-14 h-14 rounded-2xl bg-black flex items-center justify-center mx-auto mb-4">
<Smartphone className="w-7 h-7 text-white" />
</div>
<h3 className="font-bold text-slate-900 mb-2">2. Snap</h3>
<p className="text-slate-600 text-sm">
Put the code on your networking gear. People scan it in seconds.
</p>
</article>
<article className="text-center">
<div className="w-12 h-12 rounded-2xl bg-black flex items-center justify-center mx-auto mb-4">
<Download className="w-6 h-6 text-white" />
</div>
<h3 className="font-bold text-slate-900 mb-2">3. Download</h3>
<p className="text-slate-600 text-xs leading-relaxed">
Save your X QR code.
</p>
</article>
<article className="text-center">
<div className="w-12 h-12 rounded-2xl bg-black flex items-center justify-center mx-auto mb-4">
<UserPlus className="w-6 h-6 text-white" />
</div>
<h3 className="font-bold text-slate-900 mb-2">4. Scan</h3>
<p className="text-slate-600 text-xs leading-relaxed">
People scan to find you.
</p>
</article>
<article className="text-center">
<div className="w-12 h-12 rounded-2xl bg-black flex items-center justify-center mx-auto mb-4">
<Share2 className="w-6 h-6 text-white" />
</div>
<h3 className="font-bold text-slate-900 mb-2">5. Connect</h3>
<p className="text-slate-600 text-xs leading-relaxed">
They are instantly on your profile.
</p>
</article>
</div>
</div>
</section>
{/* RELATED TOOLS */}
<RelatedTools />
{/* FAQ SECTION */}
<section className="py-16 px-4 sm:px-6 lg:px-8" style={{ backgroundColor: '#EBEBDF' }}>
<div className="max-w-3xl mx-auto">
<h2 className="text-3xl font-bold text-slate-900 text-center mb-4">
Frequently Asked Questions
</h2>
<p className="text-slate-600 text-center mb-10">
Common questions about Twitter QR codes.
</p>
<div className="space-y-4">
<FaqItem
question="Why create a QR code for X?"
answer="It's much faster than telling someone your handle and hoping they spell it right. A scan is instant and error-proof."
/>
<FaqItem
question="Will links to twitter.com still work?"
answer="Yes, twitter.com links redirect to x.com, so both work perfectly fine."
/>
<FaqItem
question="Can I change the destination later?"
answer="No, this is a static QR code. If you change your handle, you will need a new QR code. Our Dynamic QR codes allow you to edit the link anytime."
/>
<FaqItem
question="Can I track scans?"
answer="This is a static QR code, so tracking is not included. Use our Dynamic QR Code generator for analytics."
/>
<FaqItem
question="What if I change my handle?"
answer="If you change your handle, the link in the QR code will break. You will need to generate a new QR code."
/>
</div>
</div>
</section>
</div>
</>
);
}
function FaqItem({ question, answer }: { question: string; answer: string }) {
return (
<details className="group bg-white rounded-xl shadow-sm border border-slate-200 overflow-hidden">
<summary className="flex items-center justify-between p-5 cursor-pointer list-none text-slate-900 font-semibold hover:bg-slate-50 transition-colors">
{question}
<span className="transition group-open:rotate-180 text-slate-400">
<svg fill="none" height="20" stroke="currentColor" strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" viewBox="0 0 24 24" width="20">
<path d="M6 9l6 6 6-6" />
</svg>
</span>
</summary>
<div className="text-slate-600 px-5 pb-5 pt-0 leading-relaxed text-sm">
{answer}
</div>
</details>
);
}

490
src/app/(main)/(marketing)/tools/url-qr-code/URLGenerator.tsx
View File

@@ -1,245 +1,245 @@
'use client';
import React, { useState, useRef } from 'react';
import Link from 'next/link';
import { QRCodeSVG } from 'qrcode.react';
import { toPng } from 'html-to-image';
import {
Link as LinkIcon,
Download,
Check,
Sparkles,
Globe
} from 'lucide-react';
import { Button } from '@/components/ui/Button';
import { Input } from '@/components/ui/Input';
import { cn } from '@/lib/utils';
// Brand Colors
const BRAND = {
paleGrey: '#EEF2FF', // Indigo-50
primary: '#4F46E5', // Indigo-600
primaryDark: '#4338CA', // Indigo-700
};
// QR Color Options
const QR_COLORS = [
{ name: 'Indigo', value: '#4F46E5' },
{ name: 'Blue', value: '#2563EB' },
{ name: 'Classic Black', value: '#000000' },
{ name: 'Violet', value: '#7C3AED' },
{ name: 'Pink', value: '#DB2777' },
{ name: 'Emerald', value: '#10B981' },
{ name: 'Rose', value: '#F43F5E' },
];
// Frame Options
const FRAME_OPTIONS = [
{ id: 'none', label: 'No Frame' },
{ id: 'scanme', label: 'Scan Me' },
{ id: 'website', label: 'Website' },
{ id: 'visit', label: 'Visit' },
];
export default function URLGenerator() {
const [url, setUrl] = useState('');
const [qrColor, setQrColor] = useState(BRAND.primary);
const [frameType, setFrameType] = useState('none');
const qrRef = useRef<HTMLDivElement>(null);
const handleDownload = async (format: 'png' | 'svg') => {
if (!qrRef.current) return;
try {
if (format === 'png') {
const dataUrl = await toPng(qrRef.current, { cacheBust: true, pixelRatio: 3 });
const link = document.createElement('a');
link.download = `url-qr-code.png`;
link.href = dataUrl;
link.click();
} else {
const svgData = qrRef.current.querySelector('svg')?.outerHTML;
if (svgData) {
const blob = new Blob([svgData], { type: 'image/svg+xml;charset=utf-8' });
const url = URL.createObjectURL(blob);
const link = document.createElement('a');
link.href = url;
link.download = `url-qr-code.svg`;
link.click();
}
}
} catch (err) {
console.error('Download failed', err);
}
};
const getFrameLabel = () => {
const frame = FRAME_OPTIONS.find(f => f.id === frameType);
return frame?.id !== 'none' ? frame?.label : null;
};
return (
<div className="w-full max-w-5xl mx-auto px-4 md:px-6">
{/* Main Generator Card */}
<div className="bg-white rounded-3xl shadow-2xl shadow-slate-900/10 overflow-hidden border border-slate-100">
<div className="grid lg:grid-cols-2">
{/* LEFT: Input Section */}
<div className="p-6 md:p-8 lg:p-10 space-y-8 border-r border-slate-100">
{/* URL Input */}
<div className="space-y-6">
<h2 className="text-lg font-bold text-slate-900 flex items-center gap-2">
<LinkIcon className="w-5 h-5 text-[#4F46E5]" />
Website URL
</h2>
<div>
<label className="block text-sm font-medium text-slate-700 mb-2">Enter URL</label>
<Input
placeholder="https://www.yourwebsite.com"
value={url}
onChange={(e) => setUrl(e.target.value)}
className="h-12 text-base rounded-xl border-slate-200 focus:border-[#4F46E5] focus:ring-[#4F46E5]"
/>
<p className="text-xs text-slate-600 mt-2">Include https:// for best results.</p>
</div>
</div>
<div className="border-t border-slate-100"></div>
{/* Design Options */}
<div className="space-y-6">
<h2 className="text-lg font-bold text-slate-900 flex items-center gap-2">
<Sparkles className="w-5 h-5 text-[#4F46E5]" />
Design Options
</h2>
{/* Color Picker */}
<div>
<label className="block text-sm font-medium text-slate-700 mb-3">QR Code Color</label>
<div className="flex flex-wrap gap-2">
{QR_COLORS.map((c) => (
<button
key={c.name}
onClick={() => setQrColor(c.value)}
className={cn(
"w-9 h-9 rounded-full border-2 flex items-center justify-center transition-all hover:scale-110",
qrColor === c.value ? "border-slate-900 ring-2 ring-offset-2 ring-slate-200" : "border-white shadow-md"
)}
style={{ backgroundColor: c.value }}
aria-label={`Select ${c.name}`}
title={c.name}
>
{qrColor === c.value && <Check className="w-4 h-4 text-white" strokeWidth={3} />}
</button>
))}
</div>
</div>
{/* Frame Selector */}
<div>
<label className="block text-sm font-medium text-slate-700 mb-3">Frame Label</label>
<div className="grid grid-cols-2 sm:grid-cols-4 gap-2">
{FRAME_OPTIONS.map((frame) => (
<button
key={frame.id}
onClick={() => setFrameType(frame.id)}
className={cn(
"py-2.5 px-3 rounded-lg text-sm font-medium transition-all border",
frameType === frame.id
? "bg-[#4F46E5] text-white border-[#4F46E5]"
: "bg-slate-50 text-slate-600 border-slate-200 hover:border-slate-300"
)}
>
{frame.label}
</button>
))}
</div>
</div>
</div>
</div>
{/* RIGHT: Preview Section */}
<div className="p-6 md:p-8 lg:p-10 flex flex-col items-center justify-center" style={{ backgroundColor: BRAND.paleGrey }}>
{/* QR Card with Frame */}
<div
ref={qrRef}
className="bg-white rounded-3xl shadow-xl p-6 sm:p-8 flex flex-col items-center w-full max-w-[320px]"
>
{/* Frame Label */}
{getFrameLabel() && (
<div
className="mb-5 px-8 py-2.5 rounded-full text-white font-bold text-sm tracking-widest uppercase shadow-md"
style={{ backgroundColor: qrColor }}
>
{getFrameLabel()}
</div>
)}
{/* QR Code */}
<div className="bg-white">
<QRCodeSVG
value={url || "https://qrmaster.io"}
size={240}
level="M"
includeMargin={false}
fgColor={qrColor}
/>
</div>
{/* URL Preview */}
<div className="mt-6 text-center max-w-[260px]">
<h3 className="font-bold text-slate-900 text-lg flex items-center justify-center gap-2 truncate">
<LinkIcon className="w-4 h-4 text-indigo-600 shrink-0" />
<span className="truncate">{url || 'Your Website'}</span>
</h3>
</div>
</div>
{/* Download Buttons */}
<div className="flex items-center gap-3 mt-8">
<Button
onClick={() => handleDownload('png')}
className="bg-[#4F46E5] hover:bg-[#4338CA] text-white shadow-lg"
>
<Download className="w-4 h-4 mr-2" />
Download PNG
</Button>
<Button
onClick={() => handleDownload('svg')}
variant="outline"
className="border-slate-300 hover:bg-white"
>
<Download className="w-4 h-4 mr-2" />
SVG
</Button>
</div>
<p className="text-xs text-slate-600 mt-4 text-center">
Your link is encoded directly. Static and forever free.
</p>
</div>
</div>
</div>
{/* Upsell Banner */}
<div className="mt-8 bg-gradient-to-r from-[#4F46E5] to-[#4338CA] rounded-2xl p-6 flex flex-col sm:flex-row items-center justify-between gap-4">
<div className="text-white text-center sm:text-left">
<h3 className="font-bold text-lg">Need to change this link later?</h3>
<p className="text-white/80 text-sm mt-1">
If your URL changes, this QR code will stop working. Use Dynamic QR Codes to edit links anytime.
</p>
</div>
<Link href="/signup">
<Button className="bg-white text-[#4F46E5] hover:bg-slate-100 shrink-0 shadow-lg">
Create Dynamic QR
</Button>
</Link>
</div>
</div>
);
}
'use client';
import React, { useState, useRef } from 'react';
import Link from 'next/link';
import { QRCodeSVG } from 'qrcode.react';
import { toPng } from 'html-to-image';
import {
Link as LinkIcon,
Download,
Check,
Sparkles,
Globe
} from 'lucide-react';
import { Button } from '@/components/ui/Button';
import { Input } from '@/components/ui/Input';
import { cn } from '@/lib/utils';
// Brand Colors
const BRAND = {
paleGrey: '#EEF2FF', // Indigo-50
primary: '#4F46E5', // Indigo-600
primaryDark: '#4338CA', // Indigo-700
};
// QR Color Options
const QR_COLORS = [
{ name: 'Indigo', value: '#4F46E5' },
{ name: 'Blue', value: '#2563EB' },
{ name: 'Classic Black', value: '#000000' },
{ name: 'Violet', value: '#7C3AED' },
{ name: 'Pink', value: '#DB2777' },
{ name: 'Emerald', value: '#10B981' },
{ name: 'Rose', value: '#F43F5E' },
];
// Frame Options
const FRAME_OPTIONS = [
{ id: 'none', label: 'No Frame' },
{ id: 'scanme', label: 'Scan Me' },
{ id: 'website', label: 'Website' },
{ id: 'visit', label: 'Visit' },
];
export default function URLGenerator() {
const [url, setUrl] = useState('');
const [qrColor, setQrColor] = useState(BRAND.primary);
const [frameType, setFrameType] = useState('none');
const qrRef = useRef<HTMLDivElement>(null);
const handleDownload = async (format: 'png' | 'svg') => {
if (!qrRef.current) return;
try {
if (format === 'png') {
const dataUrl = await toPng(qrRef.current, { cacheBust: true, pixelRatio: 3 });
const link = document.createElement('a');
link.download = `url-qr-code.png`;
link.href = dataUrl;
link.click();
} else {
const svgData = qrRef.current.querySelector('svg')?.outerHTML;
if (svgData) {
const blob = new Blob([svgData], { type: 'image/svg+xml;charset=utf-8' });
const url = URL.createObjectURL(blob);
const link = document.createElement('a');
link.href = url;
link.download = `url-qr-code.svg`;
link.click();
}
}
} catch (err) {
console.error('Download failed', err);
}
};
const getFrameLabel = () => {
const frame = FRAME_OPTIONS.find(f => f.id === frameType);
return frame?.id !== 'none' ? frame?.label : null;
};
return (
<div className="w-full max-w-5xl mx-auto px-4 md:px-6">
{/* Main Generator Card */}
<div className="bg-white rounded-3xl shadow-2xl shadow-slate-900/10 overflow-hidden border border-slate-100">
<div className="grid lg:grid-cols-2">
{/* LEFT: Input Section */}
<div className="p-6 md:p-8 lg:p-10 space-y-8 border-r border-slate-100">
{/* URL Input */}
<div className="space-y-6">
<h2 className="text-lg font-bold text-slate-900 flex items-center gap-2">
<LinkIcon className="w-5 h-5 text-[#4F46E5]" />
Website URL
</h2>
<div>
<label className="block text-sm font-medium text-slate-700 mb-2">Enter URL</label>
<Input
placeholder="https://www.yourwebsite.com"
value={url}
onChange={(e) => setUrl(e.target.value)}
className="h-12 text-base rounded-xl border-slate-200 focus:border-[#4F46E5] focus:ring-[#4F46E5]"
/>
<p className="text-xs text-slate-600 mt-2">Include https:// for best results.</p>
</div>
</div>
<div className="border-t border-slate-100"></div>
{/* Design Options */}
<div className="space-y-6">
<h2 className="text-lg font-bold text-slate-900 flex items-center gap-2">
<Sparkles className="w-5 h-5 text-[#4F46E5]" />
Design Options
</h2>
{/* Color Picker */}
<div>
<label className="block text-sm font-medium text-slate-700 mb-3">QR Code Color</label>
<div className="flex flex-wrap gap-2">
{QR_COLORS.map((c) => (
<button
key={c.name}
onClick={() => setQrColor(c.value)}
className={cn(
"w-9 h-9 rounded-full border-2 flex items-center justify-center transition-all hover:scale-110",
qrColor === c.value ? "border-slate-900 ring-2 ring-offset-2 ring-slate-200" : "border-white shadow-md"
)}
style={{ backgroundColor: c.value }}
aria-label={`Select ${c.name}`}
title={c.name}
>
{qrColor === c.value && <Check className="w-4 h-4 text-white" strokeWidth={3} />}
</button>
))}
</div>
</div>
{/* Frame Selector */}
<div>
<label className="block text-sm font-medium text-slate-700 mb-3">Frame Label</label>
<div className="grid grid-cols-2 sm:grid-cols-4 gap-2">
{FRAME_OPTIONS.map((frame) => (
<button
key={frame.id}
onClick={() => setFrameType(frame.id)}
className={cn(
"py-2.5 px-3 rounded-lg text-sm font-medium transition-all border",
frameType === frame.id
? "bg-[#4F46E5] text-white border-[#4F46E5]"
: "bg-slate-50 text-slate-600 border-slate-200 hover:border-slate-300"
)}
>
{frame.label}
</button>
))}
</div>
</div>
</div>
</div>
{/* RIGHT: Preview Section */}
<div className="p-6 md:p-8 lg:p-10 flex flex-col items-center justify-center" style={{ backgroundColor: BRAND.paleGrey }}>
{/* QR Card with Frame */}
<div
ref={qrRef}
className="bg-white rounded-3xl shadow-xl p-6 sm:p-8 flex flex-col items-center w-full max-w-[320px]"
>
{/* Frame Label */}
{getFrameLabel() && (
<div
className="mb-5 px-8 py-2.5 rounded-full text-white font-bold text-sm tracking-widest uppercase shadow-md"
style={{ backgroundColor: qrColor }}
>
{getFrameLabel()}
</div>
)}
{/* QR Code */}
<div className="bg-white">
<QRCodeSVG
value={url || "https://qrmaster.io"}
size={240}
level="M"
includeMargin={false}
fgColor={qrColor}
/>
</div>
{/* URL Preview */}
<div className="mt-6 text-center max-w-[260px]">
<h3 className="font-bold text-slate-900 text-lg flex items-center justify-center gap-2 truncate">
<LinkIcon className="w-4 h-4 text-indigo-600 shrink-0" />
<span className="truncate">{url || 'Your Website'}</span>
</h3>
</div>
</div>
{/* Download Buttons */}
<div className="flex items-center gap-3 mt-8">
<Button
onClick={() => handleDownload('png')}
className="bg-[#4F46E5] hover:bg-[#4338CA] text-white shadow-lg"
>
<Download className="w-4 h-4 mr-2" />
Download PNG
</Button>
<Button
onClick={() => handleDownload('svg')}
variant="outline"
className="border-slate-300 hover:bg-white"
>
<Download className="w-4 h-4 mr-2" />
SVG
</Button>
</div>
<p className="text-xs text-slate-600 mt-4 text-center">
Your link is encoded directly. Static and forever free.
</p>
</div>
</div>
</div>
{/* Upsell Banner */}
<div className="mt-8 bg-gradient-to-r from-[#4F46E5] to-[#4338CA] rounded-2xl p-6 flex flex-col sm:flex-row items-center justify-between gap-4">
<div className="text-white text-center sm:text-left">
<h3 className="font-bold text-lg">Need to change this link later?</h3>
<p className="text-white/80 text-sm mt-1">
If your URL changes, this QR code will stop working. Use Dynamic QR Codes to edit links anytime.
</p>
</div>
<Link href="/signup">
<Button className="bg-white text-[#4F46E5] hover:bg-slate-100 shrink-0 shadow-lg">
Create Dynamic QR
</Button>
</Link>
</div>
</div>
);
}

564
src/app/(main)/(marketing)/tools/url-qr-code/page.tsx
View File

@@ -1,282 +1,282 @@
import React from 'react';
import type { Metadata } from 'next';
import URLGenerator from './URLGenerator';
import { Link as LinkIcon, Shield, Zap, Smartphone, Globe } from 'lucide-react';
import { QRCodeSVG } from 'qrcode.react';
import { ToolBreadcrumb } from '@/components/seo/BreadcrumbSchema';
import { RelatedTools } from '@/components/marketing/RelatedTools';
import { generateSoftwareAppSchema, generateFaqSchema } from '@/lib/schema-utils';
// SEO Optimized Metadata
export const metadata: Metadata = {
title: {
absolute: 'Free URL QR Code Generator | Link to Any Website | QR Master',
},
description: 'Create a QR code for your website. Erstelle kostenlos einen QR Code für deine Webseite. Static and free forever. Link zu jeder URL.',
keywords: ['url qr code', 'website qr code', 'link qr generator', 'free qr code generator', 'url to qr', 'qr code erstellen', 'link qr code erstellen', 'website qr code generator', 'kostenlos qr code erstellen', 'url zu qr code', 'webseite verlinken qr'],
alternates: {
canonical: 'https://www.qrmaster.net/tools/url-qr-code',
},
openGraph: {
title: 'Free URL QR Code Generator | QR Master',
description: 'Turn any URL into a QR code. Share websites instantly.',
type: 'website',
url: 'https://www.qrmaster.net/tools/url-qr-code',
images: [{ url: '/og-url-generator.png', width: 1200, height: 630 }],
},
twitter: {
card: 'summary_large_image',
title: 'Free URL QR Code Generator',
description: 'Create QR codes for any link. Instant and free.',
},
robots: {
index: true,
follow: true,
},
};
// JSON-LD Structured Data
const jsonLd = {
'@context': 'https://schema.org',
'@graph': [
generateSoftwareAppSchema(
'URL QR Code Generator',
'Generate QR codes for URLs and websites. Direct linking, no redirects.',
'/og-url-generator.png'
),
{
'@type': 'HowTo',
name: 'How to Create a URL QR Code',
description: 'Turn a website link into a scannable QR code.',
step: [
{
'@type': 'HowToStep',
position: 1,
name: 'Enter URL',
text: 'Copy and paste your website address (e.g., https://example.com).',
},
{
'@type': 'HowToStep',
position: 2,
name: 'Customize',
text: 'Select a color and add a call-to-action frame like "Scan Me".',
},
{
'@type': 'HowToStep',
position: 3,
name: 'Download',
text: 'Save your QR code as a PNG or SVG image.',
},
],
totalTime: 'PT20S',
},
generateFaqSchema({
'Do these QR codes expire?': {
question: 'Do these QR codes expire?',
answer: 'No. These are static QR codes. They directly encode your URL and will work forever as long as your website is online.',
},
'Can I track how many people scan it?': {
question: 'Can I track how many people scan it?',
answer: 'No, static QR codes cannot be tracked. If you need scan usage analytics (location, device, time), you should use our Dynamic QR Code generator.',
},
'Can I change the destination URL later?': {
question: 'Can I change the destination URL later?',
answer: 'No. Once a static QR code is printed, it cannot be changed. If you change your website URL, you will need to print a new code. Use Dynamic QR Codes if you need flexibility.',
},
'Is there a scan limit?': {
question: 'Is there a scan limit?',
answer: 'No. There are zero limits on how many times your QR code can be scanned.',
},
}),
],
};
export default function URLQRCodePage() {
return (
<>
<script
type="application/ld+json"
dangerouslySetInnerHTML={{ __html: JSON.stringify(jsonLd) }}
/>
<ToolBreadcrumb toolName="URL QR Code Generator" toolSlug="url-qr-code" />
<div className="min-h-screen" style={{ backgroundColor: '#EBEBDF' }}>
{/* HERO SECTION */}
<section className="relative pt-20 pb-20 lg:pt-32 lg:pb-32 px-4 sm:px-6 lg:px-8 overflow-hidden" style={{ backgroundColor: '#1A1265' }}>
<div className="absolute inset-0 opacity-10">
<svg className="w-full h-full" viewBox="0 0 100 100" preserveAspectRatio="none">
<path d="M0 100 C 20 0 50 0 100 100 Z" fill="url(#grad1)" />
<defs>
<linearGradient id="grad1" x1="0%" y1="0%" x2="100%" y2="0%">
<stop offset="0%" style={{ stopColor: 'white', stopOpacity: 1 }} />
<stop offset="100%" style={{ stopColor: 'white', stopOpacity: 0 }} />
</linearGradient>
</defs>
</svg>
</div>
<div className="max-w-7xl mx-auto grid lg:grid-cols-2 gap-12 items-center relative z-10">
<div className="text-center lg:text-left">
<div className="inline-flex items-center gap-2 px-3 py-1 rounded-full bg-white/10 text-white/90 text-sm font-medium mb-6 backdrop-blur-sm border border-white/10 hover:bg-white/20 transition-colors cursor-default">
<span className="flex h-2 w-2 relative">
<span className="animate-ping absolute inline-flex h-full w-full rounded-full bg-emerald-400 opacity-75"></span>
<span className="relative inline-flex rounded-full h-2 w-2 bg-emerald-400"></span>
</span>
Free Tool — No Signup Required
</div>
<h1 className="text-4xl md:text-5xl lg:text-6xl font-extrabold text-white tracking-tight leading-tight mb-6">
Link to Any Website with <br className="hidden lg:block" />
<span className="text-transparent bg-clip-text bg-gradient-to-r from-emerald-400 to-cyan-400">Instant QR Codes</span>
</h1>
<p className="text-lg md:text-xl text-indigo-100 max-w-2xl mx-auto lg:mx-0 mb-8 leading-relaxed">
Create a QR code for your website, portfolio, or menu.
<strong className="text-white block sm:inline mt-2 sm:mt-0"> Free forever. No expirations.</strong>
</p>
<div className="flex flex-wrap justify-center lg:justify-start gap-4 text-sm font-medium text-white/80">
<div className="flex items-center gap-2 bg-white/5 px-4 py-2.5 rounded-xl border border-white/5 backdrop-blur-sm">
<Globe className="w-4 h-4 text-emerald-400" />
Universal Links
</div>
<div className="flex items-center gap-2 bg-white/5 px-4 py-2.5 rounded-xl border border-white/5 backdrop-blur-sm">
<Zap className="w-4 h-4 text-amber-400" />
Instant Redirect
</div>
<div className="flex items-center gap-2 bg-white/5 px-4 py-2.5 rounded-xl border border-white/5 backdrop-blur-sm">
<Shield className="w-4 h-4 text-purple-400" />
Direct Encoding
</div>
</div>
</div>
{/* Visual Abstract */}
<div className="hidden lg:flex relative items-center justify-center min-h-[400px]">
<div className="absolute w-[500px] h-[500px] bg-indigo-500/30 rounded-full blur-[100px] -top-20 -right-20 animate-pulse" />
<div className="relative w-80 h-96 bg-white/5 backdrop-blur-xl border border-white/20 rounded-3xl shadow-2xl flex flex-col items-center justify-center p-8 transform -rotate-3 hover:rotate-0 transition-all duration-700 group">
<div className="absolute inset-0 bg-gradient-to-br from-white/10 to-transparent rounded-3xl" />
<div className="w-48 h-48 bg-white rounded-xl p-2 shadow-inner mb-6 relative overflow-hidden flex items-center justify-center">
<QRCodeSVG value="https://www.qrmaster.net" size={170} fgColor="#0f172a" level="Q" />
</div>
<div className="w-full bg-white/10 rounded-xl p-4 backdrop-blur-sm border border-white/10">
<div className="flex items-center gap-3">
<div className="w-8 h-8 rounded-full bg-indigo-500/20 flex items-center justify-center">
<LinkIcon className="w-4 h-4 text-indigo-300" />
</div>
<div className="space-y-1 w-full">
<div className="h-1.5 w-3/4 bg-white/30 rounded-full" />
<div className="h-1.5 w-1/2 bg-white/20 rounded-full" />
</div>
</div>
</div>
</div>
</div>
</div>
</section>
{/* GENERATOR SECTION */}
<section className="py-12 px-4 sm:px-6 lg:px-8 -mt-8">
<URLGenerator />
</section>
{/* HOW IT WORKS */}
<section className="py-16 px-4 sm:px-6 lg:px-8 bg-white">
<div className="max-w-4xl mx-auto">
<h2 className="text-3xl font-bold text-slate-900 text-center mb-12">
How URL QR Codes Work
</h2>
<div className="grid md:grid-cols-3 gap-8">
<article className="text-center">
<div className="w-14 h-14 rounded-2xl bg-[#1A1265]/10 flex items-center justify-center mx-auto mb-4">
<LinkIcon className="w-7 h-7 text-[#1A1265]" />
</div>
<h3 className="font-bold text-slate-900 mb-2">1. Paste Link</h3>
<p className="text-slate-600 text-sm">
Copy the URL of the webpage you want to link to and paste it into the generator.
</p>
</article>
<article className="text-center">
<div className="w-14 h-14 rounded-2xl bg-[#1A1265]/10 flex items-center justify-center mx-auto mb-4">
<Smartphone className="w-7 h-7 text-[#1A1265]" />
</div>
<h3 className="font-bold text-slate-900 mb-2">2. Scan</h3>
<p className="text-slate-600 text-sm">
Users scan the code and a notification appears to open the link in their browser.
</p>
</article>
<article className="text-center">
<div className="w-14 h-14 rounded-2xl bg-[#1A1265]/10 flex items-center justify-center mx-auto mb-4">
<Globe className="w-7 h-7 text-[#1A1265]" />
</div>
<h3 className="font-bold text-slate-900 mb-2">3. Visit</h3>
<p className="text-slate-600 text-sm">
They are instantly directed to your website, restaurant menu, or social profile.
</p>
</article>
</div>
</div>
</section>
<RelatedTools />
{/* FAQ SECTION */}
<section className="py-16 px-4 sm:px-6 lg:px-8" style={{ backgroundColor: '#EBEBDF' }}>
<div className="max-w-3xl mx-auto">
<h2 className="text-3xl font-bold text-slate-900 text-center mb-4">
Frequently Asked Questions
</h2>
<p className="text-slate-600 text-center mb-10">
Common questions about URL QR codes.
</p>
<div className="space-y-4">
<FaqItem
question="Do these QR codes expire?"
answer="No. Static URL QR codes do not expire. They contain the direct link to your website. As long as your website is active, the QR code will work."
/>
<FaqItem
question="Can I track scans?"
answer="No, static QR codes cannot be tracked. If you need analytics to see who is scanning your code and from where, you need a Dynamic QR Code."
/>
<FaqItem
question="What happens if I change my website URL?"
answer="If you change your URL, this static QR code will no longer work (unless you set up a redirect on your own server). With a Dynamic QR Code, you can update the destination URL anytime without reprinting the code."
/>
<FaqItem
question="Are there ads on the QR code?"
answer="No. We do not insert ads before redirecting users. The scan goes directly to your URL."
/>
</div>
</div>
</section>
</div>
</>
);
}
function FaqItem({ question, answer }: { question: string; answer: string }) {
return (
<details className="group bg-white rounded-xl shadow-sm border border-slate-200 overflow-hidden">
<summary className="flex items-center justify-between p-5 cursor-pointer list-none text-slate-900 font-semibold hover:bg-slate-50 transition-colors">
{question}
<span className="transition group-open:rotate-180 text-slate-400">
<svg fill="none" height="20" stroke="currentColor" strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" viewBox="0 0 24 24" width="20">
<path d="M6 9l6 6 6-6" />
</svg>
</span>
</summary>
<div className="text-slate-600 px-5 pb-5 pt-0 leading-relaxed text-sm">
{answer}
</div>
</details>
);
}
import React from 'react';
import type { Metadata } from 'next';
import URLGenerator from './URLGenerator';
import { Link as LinkIcon, Shield, Zap, Smartphone, Globe } from 'lucide-react';
import { QRCodeSVG } from 'qrcode.react';
import { ToolBreadcrumb } from '@/components/seo/BreadcrumbSchema';
import { RelatedTools } from '@/components/marketing/RelatedTools';
import { generateSoftwareAppSchema, generateFaqSchema } from '@/lib/schema-utils';
// SEO Optimized Metadata
export const metadata: Metadata = {
title: {
absolute: 'Free URL QR Code Generator | Link to Any Website | QR Master',
},
description: 'Create a QR code for your website. Erstelle kostenlos einen QR Code für deine Webseite. Static and free forever. Link zu jeder URL.',
keywords: ['url qr code', 'website qr code', 'link qr generator', 'free qr code generator', 'url to qr', 'qr code erstellen', 'link qr code erstellen', 'website qr code generator', 'kostenlos qr code erstellen', 'url zu qr code', 'webseite verlinken qr'],
alternates: {
canonical: 'https://www.qrmaster.net/tools/url-qr-code',
},
openGraph: {
title: 'Free URL QR Code Generator | QR Master',
description: 'Turn any URL into a QR code. Share websites instantly.',
type: 'website',
url: 'https://www.qrmaster.net/tools/url-qr-code',
images: [{ url: '/og-url-generator.png', width: 1200, height: 630 }],
},
twitter: {
card: 'summary_large_image',
title: 'Free URL QR Code Generator',
description: 'Create QR codes for any link. Instant and free.',
},
robots: {
index: true,
follow: true,
},
};
// JSON-LD Structured Data
const jsonLd = {
'@context': 'https://schema.org',
'@graph': [
generateSoftwareAppSchema(
'URL QR Code Generator',
'Generate QR codes for URLs and websites. Direct linking, no redirects.',
'/og-url-generator.png'
),
{
'@type': 'HowTo',
name: 'How to Create a URL QR Code',
description: 'Turn a website link into a scannable QR code.',
step: [
{
'@type': 'HowToStep',
position: 1,
name: 'Enter URL',
text: 'Copy and paste your website address (e.g., https://example.com).',
},
{
'@type': 'HowToStep',
position: 2,
name: 'Customize',
text: 'Select a color and add a call-to-action frame like "Scan Me".',
},
{
'@type': 'HowToStep',
position: 3,
name: 'Download',
text: 'Save your QR code as a PNG or SVG image.',
},
],
totalTime: 'PT20S',
},
generateFaqSchema({
'Do these QR codes expire?': {
question: 'Do these QR codes expire?',
answer: 'No. These are static QR codes. They directly encode your URL and will work forever as long as your website is online.',
},
'Can I track how many people scan it?': {
question: 'Can I track how many people scan it?',
answer: 'No, static QR codes cannot be tracked. If you need scan usage analytics (location, device, time), you should use our Dynamic QR Code generator.',
},
'Can I change the destination URL later?': {
question: 'Can I change the destination URL later?',
answer: 'No. Once a static QR code is printed, it cannot be changed. If you change your website URL, you will need to print a new code. Use Dynamic QR Codes if you need flexibility.',
},
'Is there a scan limit?': {
question: 'Is there a scan limit?',
answer: 'No. There are zero limits on how many times your QR code can be scanned.',
},
}),
],
};
export default function URLQRCodePage() {
return (
<>
<script
type="application/ld+json"
dangerouslySetInnerHTML={{ __html: JSON.stringify(jsonLd) }}
/>
<ToolBreadcrumb toolName="URL QR Code Generator" toolSlug="url-qr-code" />
<div className="min-h-screen" style={{ backgroundColor: '#EBEBDF' }}>
{/* HERO SECTION */}
<section className="relative pt-20 pb-20 lg:pt-32 lg:pb-32 px-4 sm:px-6 lg:px-8 overflow-hidden" style={{ backgroundColor: '#1A1265' }}>
<div className="absolute inset-0 opacity-10">
<svg className="w-full h-full" viewBox="0 0 100 100" preserveAspectRatio="none">
<path d="M0 100 C 20 0 50 0 100 100 Z" fill="url(#grad1)" />
<defs>
<linearGradient id="grad1" x1="0%" y1="0%" x2="100%" y2="0%">
<stop offset="0%" style={{ stopColor: 'white', stopOpacity: 1 }} />
<stop offset="100%" style={{ stopColor: 'white', stopOpacity: 0 }} />
</linearGradient>
</defs>
</svg>
</div>
<div className="max-w-7xl mx-auto grid lg:grid-cols-2 gap-12 items-center relative z-10">
<div className="text-center lg:text-left">
<div className="inline-flex items-center gap-2 px-3 py-1 rounded-full bg-white/10 text-white/90 text-sm font-medium mb-6 backdrop-blur-sm border border-white/10 hover:bg-white/20 transition-colors cursor-default">
<span className="flex h-2 w-2 relative">
<span className="animate-ping absolute inline-flex h-full w-full rounded-full bg-emerald-400 opacity-75"></span>
<span className="relative inline-flex rounded-full h-2 w-2 bg-emerald-400"></span>
</span>
Free Tool — No Signup Required
</div>
<h1 className="text-4xl md:text-5xl lg:text-6xl font-extrabold text-white tracking-tight leading-tight mb-6">
Link to Any Website with <br className="hidden lg:block" />
<span className="text-transparent bg-clip-text bg-gradient-to-r from-emerald-400 to-cyan-400">Instant QR Codes</span>
</h1>
<p className="text-lg md:text-xl text-indigo-100 max-w-2xl mx-auto lg:mx-0 mb-8 leading-relaxed">
Create a QR code for your website, portfolio, or menu.
<strong className="text-white block sm:inline mt-2 sm:mt-0"> Free forever. No expirations.</strong>
</p>
<div className="flex flex-wrap justify-center lg:justify-start gap-4 text-sm font-medium text-white/80">
<div className="flex items-center gap-2 bg-white/5 px-4 py-2.5 rounded-xl border border-white/5 backdrop-blur-sm">
<Globe className="w-4 h-4 text-emerald-400" />
Universal Links
</div>
<div className="flex items-center gap-2 bg-white/5 px-4 py-2.5 rounded-xl border border-white/5 backdrop-blur-sm">
<Zap className="w-4 h-4 text-amber-400" />
Instant Redirect
</div>
<div className="flex items-center gap-2 bg-white/5 px-4 py-2.5 rounded-xl border border-white/5 backdrop-blur-sm">
<Shield className="w-4 h-4 text-purple-400" />
Direct Encoding
</div>
</div>
</div>
{/* Visual Abstract */}
<div className="hidden lg:flex relative items-center justify-center min-h-[400px]">
<div className="absolute w-[500px] h-[500px] bg-indigo-500/30 rounded-full blur-[100px] -top-20 -right-20 animate-pulse" />
<div className="relative w-80 h-96 bg-white/5 backdrop-blur-xl border border-white/20 rounded-3xl shadow-2xl flex flex-col items-center justify-center p-8 transform -rotate-3 hover:rotate-0 transition-all duration-700 group">
<div className="absolute inset-0 bg-gradient-to-br from-white/10 to-transparent rounded-3xl" />
<div className="w-48 h-48 bg-white rounded-xl p-2 shadow-inner mb-6 relative overflow-hidden flex items-center justify-center">
<QRCodeSVG value="https://www.qrmaster.net" size={170} fgColor="#0f172a" level="Q" />
</div>
<div className="w-full bg-white/10 rounded-xl p-4 backdrop-blur-sm border border-white/10">
<div className="flex items-center gap-3">
<div className="w-8 h-8 rounded-full bg-indigo-500/20 flex items-center justify-center">
<LinkIcon className="w-4 h-4 text-indigo-300" />
</div>
<div className="space-y-1 w-full">
<div className="h-1.5 w-3/4 bg-white/30 rounded-full" />
<div className="h-1.5 w-1/2 bg-white/20 rounded-full" />
</div>
</div>
</div>
</div>
</div>
</div>
</section>
{/* GENERATOR SECTION */}
<section className="py-12 px-4 sm:px-6 lg:px-8 -mt-8">
<URLGenerator />
</section>
{/* HOW IT WORKS */}
<section className="py-16 px-4 sm:px-6 lg:px-8 bg-white">
<div className="max-w-4xl mx-auto">
<h2 className="text-3xl font-bold text-slate-900 text-center mb-12">
How URL QR Codes Work
</h2>
<div className="grid md:grid-cols-3 gap-8">
<article className="text-center">
<div className="w-14 h-14 rounded-2xl bg-[#1A1265]/10 flex items-center justify-center mx-auto mb-4">
<LinkIcon className="w-7 h-7 text-[#1A1265]" />
</div>
<h3 className="font-bold text-slate-900 mb-2">1. Paste Link</h3>
<p className="text-slate-600 text-sm">
Copy the URL of the webpage you want to link to and paste it into the generator.
</p>
</article>
<article className="text-center">
<div className="w-14 h-14 rounded-2xl bg-[#1A1265]/10 flex items-center justify-center mx-auto mb-4">
<Smartphone className="w-7 h-7 text-[#1A1265]" />
</div>
<h3 className="font-bold text-slate-900 mb-2">2. Scan</h3>
<p className="text-slate-600 text-sm">
Users scan the code and a notification appears to open the link in their browser.
</p>
</article>
<article className="text-center">
<div className="w-14 h-14 rounded-2xl bg-[#1A1265]/10 flex items-center justify-center mx-auto mb-4">
<Globe className="w-7 h-7 text-[#1A1265]" />
</div>
<h3 className="font-bold text-slate-900 mb-2">3. Visit</h3>
<p className="text-slate-600 text-sm">
They are instantly directed to your website, restaurant menu, or social profile.
</p>
</article>
</div>
</div>
</section>
<RelatedTools />
{/* FAQ SECTION */}
<section className="py-16 px-4 sm:px-6 lg:px-8" style={{ backgroundColor: '#EBEBDF' }}>
<div className="max-w-3xl mx-auto">
<h2 className="text-3xl font-bold text-slate-900 text-center mb-4">
Frequently Asked Questions
</h2>
<p className="text-slate-600 text-center mb-10">
Common questions about URL QR codes.
</p>
<div className="space-y-4">
<FaqItem
question="Do these QR codes expire?"
answer="No. Static URL QR codes do not expire. They contain the direct link to your website. As long as your website is active, the QR code will work."
/>
<FaqItem
question="Can I track scans?"
answer="No, static QR codes cannot be tracked. If you need analytics to see who is scanning your code and from where, you need a Dynamic QR Code."
/>
<FaqItem
question="What happens if I change my website URL?"
answer="If you change your URL, this static QR code will no longer work (unless you set up a redirect on your own server). With a Dynamic QR Code, you can update the destination URL anytime without reprinting the code."
/>
<FaqItem
question="Are there ads on the QR code?"
answer="No. We do not insert ads before redirecting users. The scan goes directly to your URL."
/>
</div>
</div>
</section>
</div>
</>
);
}
function FaqItem({ question, answer }: { question: string; answer: string }) {
return (
<details className="group bg-white rounded-xl shadow-sm border border-slate-200 overflow-hidden">
<summary className="flex items-center justify-between p-5 cursor-pointer list-none text-slate-900 font-semibold hover:bg-slate-50 transition-colors">
{question}
<span className="transition group-open:rotate-180 text-slate-400">
<svg fill="none" height="20" stroke="currentColor" strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" viewBox="0 0 24 24" width="20">
<path d="M6 9l6 6 6-6" />
</svg>
</span>
</summary>
<div className="text-slate-600 px-5 pb-5 pt-0 leading-relaxed text-sm">
{answer}
</div>
</details>
);
}

696
src/app/(main)/(marketing)/tools/vcard-qr-code/VCardGenerator.tsx
View File

@@ -1,348 +1,348 @@
'use client';
import React, { useState, useRef } from 'react';
import Link from 'next/link';
import { QRCodeSVG } from 'qrcode.react';
import {
User,
Download,
Check,
Sparkles,
Briefcase,
Phone,
Mail,
Globe,
MapPin,
Contact
} from 'lucide-react';
import { Button } from '@/components/ui/Button';
import { Input } from '@/components/ui/Input';
import { cn } from '@/lib/utils';
// Brand Colors
const BRAND = {
paleGrey: '#FFF1F2', // Rose-50
primary: '#E11D48', // Rose-600
primaryDark: '#BE123C', // Rose-700
};
// QR Color Options
const QR_COLORS = [
{ name: 'Rose', value: '#E11D48' },
{ name: 'Pink', value: '#DB2777' },
{ name: 'Classic Black', value: '#000000' },
{ name: 'Navy', value: '#1E3A8A' },
{ name: 'Purple', value: '#7C3AED' },
{ name: 'Emerald', value: '#10B981' },
{ name: 'Rose', value: '#F43F5E' },
];
// Frame Options
const FRAME_OPTIONS = [
{ id: 'none', label: 'No Frame' },
{ id: 'scanme', label: 'Scan Me' },
{ id: 'contact', label: 'Save Contact' },
{ id: 'vcard', label: 'vCard' },
];
export default function VCardGenerator() {
// Personal Info
const [firstName, setFirstName] = useState('');
const [lastName, setLastName] = useState('');
const [email, setEmail] = useState('');
const [phone, setPhone] = useState('');
const [website, setWebsite] = useState('');
const [jobTitle, setJobTitle] = useState('');
const [company, setCompany] = useState('');
// Address
const [street, setStreet] = useState('');
const [city, setCity] = useState('');
const [zip, setZip] = useState('');
const [country, setCountry] = useState('');
const [qrColor, setQrColor] = useState(BRAND.primary);
const [frameType, setFrameType] = useState('none');
const qrRef = useRef<HTMLDivElement>(null);
// Generate VCard String
const generateVCard = () => {
const vcard = [
'BEGIN:VCARD',
'VERSION:3.0',
`N:${lastName};${firstName};;;`,
`FN:${firstName} ${lastName}`,
`ORG:${company}`,
`TITLE:${jobTitle}`,
`TEL;TYPE=CELL:${phone}`,
`EMAIL;TYPE=WORK:${email}`,
`URL:${website}`,
`ADR;TYPE=WORK:;;${street};${city};;${zip};${country}`,
'END:VCARD'
].join('\n');
return vcard;
};
const handleDownload = async (format: 'png' | 'svg') => {
if (!qrRef.current) return;
try {
if (format === 'png') {
const { toPng } = await import('html-to-image');
const dataUrl = await toPng(qrRef.current, { cacheBust: true, pixelRatio: 3 });
const link = document.createElement('a');
link.download = `vcard-${firstName || 'contact'}.png`;
link.href = dataUrl;
link.click();
} else {
const svgData = qrRef.current.querySelector('svg')?.outerHTML;
if (svgData) {
const blob = new Blob([svgData], { type: 'image/svg+xml;charset=utf-8' });
const url = URL.createObjectURL(blob);
const link = document.createElement('a');
link.href = url;
link.download = `vcard-${firstName || 'contact'}.svg`;
link.click();
}
}
} catch (err) {
console.error('Download failed', err);
}
};
const getFrameLabel = () => {
const frame = FRAME_OPTIONS.find(f => f.id === frameType);
return frame?.id !== 'none' ? frame?.label : null;
};
return (
<div className="w-full max-w-6xl mx-auto px-4 md:px-6">
{/* Main Generator Card */}
<div className="bg-white rounded-3xl shadow-2xl shadow-slate-900/10 overflow-hidden border border-slate-100">
<div className="grid lg:grid-cols-12">
{/* LEFT: Input Section (Wider for VCard) */}
<div className="lg:col-span-7 p-6 md:p-8 lg:p-10 space-y-8 border-r border-slate-100">
{/* Personal Details */}
<div className="space-y-6">
<h2 className="text-lg font-bold text-slate-900 flex items-center gap-2">
<User className="w-5 h-5 text-[#E11D48]" />
Contact Information
</h2>
<div className="grid sm:grid-cols-2 gap-4">
<div>
<label className="block text-sm font-medium text-slate-700 mb-2">First Name</label>
<Input placeholder="John" value={firstName} onChange={(e) => setFirstName(e.target.value)} className="h-11 rounded-xl border-slate-200 focus:border-[#E11D48] focus:ring-[#E11D48]" />
</div>
<div>
<label className="block text-sm font-medium text-slate-700 mb-2">Last Name</label>
<Input placeholder="Doe" value={lastName} onChange={(e) => setLastName(e.target.value)} className="h-11 rounded-xl border-slate-200 focus:border-[#E11D48] focus:ring-[#E11D48]" />
</div>
</div>
<div className="grid sm:grid-cols-2 gap-4">
<div>
<label className="block text-sm font-medium text-slate-700 mb-2">Phone</label>
<div className="relative">
<Phone className="absolute left-3 top-3 w-5 h-5 text-slate-400" />
<Input placeholder="+1 555 000 0000" value={phone} onChange={(e) => setPhone(e.target.value)} className="pl-10 h-11 rounded-xl border-slate-200 focus:border-[#E11D48] focus:ring-[#E11D48]" />
</div>
</div>
<div>
<label className="block text-sm font-medium text-slate-700 mb-2">Email</label>
<div className="relative">
<Mail className="absolute left-3 top-3 w-5 h-5 text-slate-400" />
<Input placeholder="john@company.com" value={email} onChange={(e) => setEmail(e.target.value)} className="pl-10 h-11 rounded-xl border-slate-200 focus:border-[#E11D48] focus:ring-[#E11D48]" />
</div>
</div>
</div>
<div className="grid sm:grid-cols-2 gap-4">
<div>
<label className="block text-sm font-medium text-slate-700 mb-2">Website</label>
<div className="relative">
<Globe className="absolute left-3 top-3 w-5 h-5 text-slate-400" />
<Input placeholder="https://..." value={website} onChange={(e) => setWebsite(e.target.value)} className="pl-10 h-11 rounded-xl border-slate-200 focus:border-[#E11D48] focus:ring-[#E11D48]" />
</div>
</div>
<div>
<label className="block text-sm font-medium text-slate-700 mb-2">Job Title</label>
<div className="relative">
<Briefcase className="absolute left-3 top-3 w-5 h-5 text-slate-400" />
<Input placeholder="Manager" value={jobTitle} onChange={(e) => setJobTitle(e.target.value)} className="pl-10 h-11 rounded-xl border-slate-200 focus:border-[#E11D48] focus:ring-[#E11D48]" />
</div>
</div>
</div>
<div>
<label className="block text-sm font-medium text-slate-700 mb-2">Company</label>
<Input placeholder="Acme Corp" value={company} onChange={(e) => setCompany(e.target.value)} className="h-11 rounded-xl border-slate-200 focus:border-[#E11D48] focus:ring-[#E11D48]" />
</div>
</div>
{/* Address Details */}
<div className="space-y-6">
<h2 className="text-lg font-bold text-slate-900 flex items-center gap-2">
<MapPin className="w-5 h-5 text-[#E11D48]" />
Address
</h2>
<div className="grid sm:grid-cols-2 gap-4">
<div className="sm:col-span-2">
<label className="block text-sm font-medium text-slate-700 mb-2">Street</label>
<Input placeholder="123 Business Rd" value={street} onChange={(e) => setStreet(e.target.value)} className="h-11 rounded-xl border-slate-200 focus:border-[#E11D48] focus:ring-[#E11D48]" />
</div>
<div>
<label className="block text-sm font-medium text-slate-700 mb-2">City</label>
<Input placeholder="New York" value={city} onChange={(e) => setCity(e.target.value)} className="h-11 rounded-xl border-slate-200 focus:border-[#E11D48] focus:ring-[#E11D48]" />
</div>
<div>
<label className="block text-sm font-medium text-slate-700 mb-2">Zip/Postcode</label>
<Input placeholder="10001" value={zip} onChange={(e) => setZip(e.target.value)} className="h-11 rounded-xl border-slate-200 focus:border-[#E11D48] focus:ring-[#E11D48]" />
</div>
<div className="sm:col-span-2">
<label className="block text-sm font-medium text-slate-700 mb-2">Country</label>
<Input placeholder="USA" value={country} onChange={(e) => setCountry(e.target.value)} className="h-11 rounded-xl border-slate-200 focus:border-[#E11D48] focus:ring-[#E11D48]" />
</div>
</div>
</div>
<div className="border-t border-slate-100"></div>
{/* Design Options */}
<div className="space-y-6">
<h2 className="text-lg font-bold text-slate-900 flex items-center gap-2">
<Sparkles className="w-5 h-5 text-[#E11D48]" />
Design Options
</h2>
<div className="grid sm:grid-cols-2 gap-8">
{/* Color Picker */}
<div>
<label className="block text-sm font-medium text-slate-700 mb-3">QR Color</label>
<div className="flex flex-wrap gap-2">
{QR_COLORS.map((c) => (
<button
key={c.name}
onClick={() => setQrColor(c.value)}
className={cn(
"w-9 h-9 rounded-full border-2 flex items-center justify-center transition-all hover:scale-110",
qrColor === c.value ? "border-slate-900 ring-2 ring-offset-2 ring-slate-200" : "border-white shadow-md"
)}
style={{ backgroundColor: c.value }}
title={c.name}
>
{qrColor === c.value && <Check className="w-4 h-4 text-white" strokeWidth={3} />}
</button>
))}
</div>
</div>
{/* Frame Selector */}
<div>
<label className="block text-sm font-medium text-slate-700 mb-3">Frame Label</label>
<div className="grid grid-cols-2 gap-2">
{FRAME_OPTIONS.map((frame) => (
<button
key={frame.id}
onClick={() => setFrameType(frame.id)}
className={cn(
"py-2 px-3 rounded-lg text-sm font-medium transition-all border text-center",
frameType === frame.id
? "bg-[#E11D48] text-white border-[#E11D48]"
: "bg-slate-50 text-slate-600 border-slate-200 hover:border-slate-300"
)}
>
{frame.label}
</button>
))}
</div>
</div>
</div>
</div>
</div>
{/* RIGHT: Preview Section */}
<div className="lg:col-span-5 p-6 md:p-8 lg:p-10 flex flex-col items-center justify-center" style={{ backgroundColor: BRAND.paleGrey }}>
{/* QR Card with Frame */}
<div
ref={qrRef}
className="bg-white rounded-3xl shadow-xl p-6 sm:p-8 flex flex-col items-center w-full max-w-[300px]"
>
{/* Frame Label */}
{getFrameLabel() && (
<div
className="mb-5 px-8 py-2.5 rounded-full text-white font-bold text-sm tracking-widest uppercase shadow-md"
style={{ backgroundColor: qrColor }}
>
{getFrameLabel()}
</div>
)}
{/* QR Code */}
<div className="bg-white">
<QRCodeSVG
value={generateVCard()}
size={220}
level="M"
includeMargin={false}
fgColor={qrColor}
/>
</div>
{/* Info Preview */}
<div className="mt-6 text-center max-w-[260px]">
<h3 className="font-bold text-slate-900 text-lg flex items-center justify-center gap-2 truncate">
<Contact className="w-4 h-4 text-slate-400 shrink-0" />
<span className="truncate">{firstName || 'First'} {lastName || 'Last'}</span>
</h3>
<div className="text-xs text-slate-600 mt-1 truncate">{company || 'Company Name'}</div>
</div>
</div>
{/* Download Buttons */}
<div className="flex flex-col sm:flex-row items-center gap-3 mt-8 w-full max-w-[320px]">
<Button
onClick={() => handleDownload('png')}
className="bg-[#E11D48] hover:bg-[#BE123C] text-white shadow-lg w-full"
>
<Download className="w-4 h-4 mr-2" />
Download PNG
</Button>
<Button
onClick={() => handleDownload('svg')}
variant="outline"
className="border-slate-300 hover:bg-white w-full"
>
<Download className="w-4 h-4 mr-2" />
SVG
</Button>
</div>
<p className="text-xs text-slate-600 mt-4 text-center">
Scanning adds this contact to the address book instantly.
</p>
</div>
</div>
</div>
{/* Upsell Banner */}
<div className="mt-8 bg-gradient-to-r from-[#E11D48] to-[#BE123C] rounded-2xl p-6 flex flex-col sm:flex-row items-center justify-between gap-4">
<div className="text-white text-center sm:text-left">
<h3 className="font-bold text-lg">Want a Digital Business Card?</h3>
<p className="text-white/80 text-sm mt-1">
Upgrade to Dynamic vCard to include a profile photo, social links, and update your info anytime.
</p>
</div>
<Link href="/signup">
<Button className="bg-white text-[#E11D48] hover:bg-slate-100 shrink-0 shadow-lg">
Create Digital Card
</Button>
</Link>
</div>
</div>
);
}
'use client';
import React, { useState, useRef } from 'react';
import Link from 'next/link';
import { QRCodeSVG } from 'qrcode.react';
import {
User,
Download,
Check,
Sparkles,
Briefcase,
Phone,
Mail,
Globe,
MapPin,
Contact
} from 'lucide-react';
import { Button } from '@/components/ui/Button';
import { Input } from '@/components/ui/Input';
import { cn } from '@/lib/utils';
// Brand Colors
const BRAND = {
paleGrey: '#FFF1F2', // Rose-50
primary: '#E11D48', // Rose-600
primaryDark: '#BE123C', // Rose-700
};
// QR Color Options
const QR_COLORS = [
{ name: 'Rose', value: '#E11D48' },
{ name: 'Pink', value: '#DB2777' },
{ name: 'Classic Black', value: '#000000' },
{ name: 'Navy', value: '#1E3A8A' },
{ name: 'Purple', value: '#7C3AED' },
{ name: 'Emerald', value: '#10B981' },
{ name: 'Rose', value: '#F43F5E' },
];
// Frame Options
const FRAME_OPTIONS = [
{ id: 'none', label: 'No Frame' },
{ id: 'scanme', label: 'Scan Me' },
{ id: 'contact', label: 'Save Contact' },
{ id: 'vcard', label: 'vCard' },
];
export default function VCardGenerator() {
// Personal Info
const [firstName, setFirstName] = useState('');
const [lastName, setLastName] = useState('');
const [email, setEmail] = useState('');
const [phone, setPhone] = useState('');
const [website, setWebsite] = useState('');
const [jobTitle, setJobTitle] = useState('');
const [company, setCompany] = useState('');
// Address
const [street, setStreet] = useState('');
const [city, setCity] = useState('');
const [zip, setZip] = useState('');
const [country, setCountry] = useState('');
const [qrColor, setQrColor] = useState(BRAND.primary);
const [frameType, setFrameType] = useState('none');
const qrRef = useRef<HTMLDivElement>(null);
// Generate VCard String
const generateVCard = () => {
const vcard = [
'BEGIN:VCARD',
'VERSION:3.0',
`N:${lastName};${firstName};;;`,
`FN:${firstName} ${lastName}`,
`ORG:${company}`,
`TITLE:${jobTitle}`,
`TEL;TYPE=CELL:${phone}`,
`EMAIL;TYPE=WORK:${email}`,
`URL:${website}`,
`ADR;TYPE=WORK:;;${street};${city};;${zip};${country}`,
'END:VCARD'
].join('\n');
return vcard;
};
const handleDownload = async (format: 'png' | 'svg') => {
if (!qrRef.current) return;
try {
if (format === 'png') {
const { toPng } = await import('html-to-image');
const dataUrl = await toPng(qrRef.current, { cacheBust: true, pixelRatio: 3 });
const link = document.createElement('a');
link.download = `vcard-${firstName || 'contact'}.png`;
link.href = dataUrl;
link.click();
} else {
const svgData = qrRef.current.querySelector('svg')?.outerHTML;
if (svgData) {
const blob = new Blob([svgData], { type: 'image/svg+xml;charset=utf-8' });
const url = URL.createObjectURL(blob);
const link = document.createElement('a');
link.href = url;
link.download = `vcard-${firstName || 'contact'}.svg`;
link.click();
}
}
} catch (err) {
console.error('Download failed', err);
}
};
const getFrameLabel = () => {
const frame = FRAME_OPTIONS.find(f => f.id === frameType);
return frame?.id !== 'none' ? frame?.label : null;
};
return (
<div className="w-full max-w-6xl mx-auto px-4 md:px-6">
{/* Main Generator Card */}
<div className="bg-white rounded-3xl shadow-2xl shadow-slate-900/10 overflow-hidden border border-slate-100">
<div className="grid lg:grid-cols-12">
{/* LEFT: Input Section (Wider for VCard) */}
<div className="lg:col-span-7 p-6 md:p-8 lg:p-10 space-y-8 border-r border-slate-100">
{/* Personal Details */}
<div className="space-y-6">
<h2 className="text-lg font-bold text-slate-900 flex items-center gap-2">
<User className="w-5 h-5 text-[#E11D48]" />
Contact Information
</h2>
<div className="grid sm:grid-cols-2 gap-4">
<div>
<label className="block text-sm font-medium text-slate-700 mb-2">First Name</label>
<Input placeholder="John" value={firstName} onChange={(e) => setFirstName(e.target.value)} className="h-11 rounded-xl border-slate-200 focus:border-[#E11D48] focus:ring-[#E11D48]" />
</div>
<div>
<label className="block text-sm font-medium text-slate-700 mb-2">Last Name</label>
<Input placeholder="Doe" value={lastName} onChange={(e) => setLastName(e.target.value)} className="h-11 rounded-xl border-slate-200 focus:border-[#E11D48] focus:ring-[#E11D48]" />
</div>
</div>
<div className="grid sm:grid-cols-2 gap-4">
<div>
<label className="block text-sm font-medium text-slate-700 mb-2">Phone</label>
<div className="relative">
<Phone className="absolute left-3 top-3 w-5 h-5 text-slate-400" />
<Input placeholder="+1 555 000 0000" value={phone} onChange={(e) => setPhone(e.target.value)} className="pl-10 h-11 rounded-xl border-slate-200 focus:border-[#E11D48] focus:ring-[#E11D48]" />
</div>
</div>
<div>
<label className="block text-sm font-medium text-slate-700 mb-2">Email</label>
<div className="relative">
<Mail className="absolute left-3 top-3 w-5 h-5 text-slate-400" />
<Input placeholder="john@company.com" value={email} onChange={(e) => setEmail(e.target.value)} className="pl-10 h-11 rounded-xl border-slate-200 focus:border-[#E11D48] focus:ring-[#E11D48]" />
</div>
</div>
</div>
<div className="grid sm:grid-cols-2 gap-4">
<div>
<label className="block text-sm font-medium text-slate-700 mb-2">Website</label>
<div className="relative">
<Globe className="absolute left-3 top-3 w-5 h-5 text-slate-400" />
<Input placeholder="https://..." value={website} onChange={(e) => setWebsite(e.target.value)} className="pl-10 h-11 rounded-xl border-slate-200 focus:border-[#E11D48] focus:ring-[#E11D48]" />
</div>
</div>
<div>
<label className="block text-sm font-medium text-slate-700 mb-2">Job Title</label>
<div className="relative">
<Briefcase className="absolute left-3 top-3 w-5 h-5 text-slate-400" />
<Input placeholder="Manager" value={jobTitle} onChange={(e) => setJobTitle(e.target.value)} className="pl-10 h-11 rounded-xl border-slate-200 focus:border-[#E11D48] focus:ring-[#E11D48]" />
</div>
</div>
</div>
<div>
<label className="block text-sm font-medium text-slate-700 mb-2">Company</label>
<Input placeholder="Acme Corp" value={company} onChange={(e) => setCompany(e.target.value)} className="h-11 rounded-xl border-slate-200 focus:border-[#E11D48] focus:ring-[#E11D48]" />
</div>
</div>
{/* Address Details */}
<div className="space-y-6">
<h2 className="text-lg font-bold text-slate-900 flex items-center gap-2">
<MapPin className="w-5 h-5 text-[#E11D48]" />
Address
</h2>
<div className="grid sm:grid-cols-2 gap-4">
<div className="sm:col-span-2">
<label className="block text-sm font-medium text-slate-700 mb-2">Street</label>
<Input placeholder="123 Business Rd" value={street} onChange={(e) => setStreet(e.target.value)} className="h-11 rounded-xl border-slate-200 focus:border-[#E11D48] focus:ring-[#E11D48]" />
</div>
<div>
<label className="block text-sm font-medium text-slate-700 mb-2">City</label>
<Input placeholder="New York" value={city} onChange={(e) => setCity(e.target.value)} className="h-11 rounded-xl border-slate-200 focus:border-[#E11D48] focus:ring-[#E11D48]" />
</div>
<div>
<label className="block text-sm font-medium text-slate-700 mb-2">Zip/Postcode</label>
<Input placeholder="10001" value={zip} onChange={(e) => setZip(e.target.value)} className="h-11 rounded-xl border-slate-200 focus:border-[#E11D48] focus:ring-[#E11D48]" />
</div>
<div className="sm:col-span-2">
<label className="block text-sm font-medium text-slate-700 mb-2">Country</label>
<Input placeholder="USA" value={country} onChange={(e) => setCountry(e.target.value)} className="h-11 rounded-xl border-slate-200 focus:border-[#E11D48] focus:ring-[#E11D48]" />
</div>
</div>
</div>
<div className="border-t border-slate-100"></div>
{/* Design Options */}
<div className="space-y-6">
<h2 className="text-lg font-bold text-slate-900 flex items-center gap-2">
<Sparkles className="w-5 h-5 text-[#E11D48]" />
Design Options
</h2>
<div className="grid sm:grid-cols-2 gap-8">
{/* Color Picker */}
<div>
<label className="block text-sm font-medium text-slate-700 mb-3">QR Color</label>
<div className="flex flex-wrap gap-2">
{QR_COLORS.map((c) => (
<button
key={c.name}
onClick={() => setQrColor(c.value)}
className={cn(
"w-9 h-9 rounded-full border-2 flex items-center justify-center transition-all hover:scale-110",
qrColor === c.value ? "border-slate-900 ring-2 ring-offset-2 ring-slate-200" : "border-white shadow-md"
)}
style={{ backgroundColor: c.value }}
title={c.name}
>
{qrColor === c.value && <Check className="w-4 h-4 text-white" strokeWidth={3} />}
</button>
))}
</div>
</div>
{/* Frame Selector */}
<div>
<label className="block text-sm font-medium text-slate-700 mb-3">Frame Label</label>
<div className="grid grid-cols-2 gap-2">
{FRAME_OPTIONS.map((frame) => (
<button
key={frame.id}
onClick={() => setFrameType(frame.id)}
className={cn(
"py-2 px-3 rounded-lg text-sm font-medium transition-all border text-center",
frameType === frame.id
? "bg-[#E11D48] text-white border-[#E11D48]"
: "bg-slate-50 text-slate-600 border-slate-200 hover:border-slate-300"
)}
>
{frame.label}
</button>
))}
</div>
</div>
</div>
</div>
</div>
{/* RIGHT: Preview Section */}
<div className="lg:col-span-5 p-6 md:p-8 lg:p-10 flex flex-col items-center justify-center" style={{ backgroundColor: BRAND.paleGrey }}>
{/* QR Card with Frame */}
<div
ref={qrRef}
className="bg-white rounded-3xl shadow-xl p-6 sm:p-8 flex flex-col items-center w-full max-w-[300px]"
>
{/* Frame Label */}
{getFrameLabel() && (
<div
className="mb-5 px-8 py-2.5 rounded-full text-white font-bold text-sm tracking-widest uppercase shadow-md"
style={{ backgroundColor: qrColor }}
>
{getFrameLabel()}
</div>
)}
{/* QR Code */}
<div className="bg-white">
<QRCodeSVG
value={generateVCard()}
size={220}
level="M"
includeMargin={false}
fgColor={qrColor}
/>
</div>
{/* Info Preview */}
<div className="mt-6 text-center max-w-[260px]">
<h3 className="font-bold text-slate-900 text-lg flex items-center justify-center gap-2 truncate">
<Contact className="w-4 h-4 text-slate-400 shrink-0" />
<span className="truncate">{firstName || 'First'} {lastName || 'Last'}</span>
</h3>
<div className="text-xs text-slate-600 mt-1 truncate">{company || 'Company Name'}</div>
</div>
</div>
{/* Download Buttons */}
<div className="flex flex-col sm:flex-row items-center gap-3 mt-8 w-full max-w-[320px]">
<Button
onClick={() => handleDownload('png')}
className="bg-[#E11D48] hover:bg-[#BE123C] text-white shadow-lg w-full"
>
<Download className="w-4 h-4 mr-2" />
Download PNG
</Button>
<Button
onClick={() => handleDownload('svg')}
variant="outline"
className="border-slate-300 hover:bg-white w-full"
>
<Download className="w-4 h-4 mr-2" />
SVG
</Button>
</div>
<p className="text-xs text-slate-600 mt-4 text-center">
Scanning adds this contact to the address book instantly.
</p>
</div>
</div>
</div>
{/* Upsell Banner */}
<div className="mt-8 bg-gradient-to-r from-[#E11D48] to-[#BE123C] rounded-2xl p-6 flex flex-col sm:flex-row items-center justify-between gap-4">
<div className="text-white text-center sm:text-left">
<h3 className="font-bold text-lg">Want a Digital Business Card?</h3>
<p className="text-white/80 text-sm mt-1">
Upgrade to Dynamic vCard to include a profile photo, social links, and update your info anytime.
</p>
</div>
<Link href="/signup">
<Button className="bg-white text-[#E11D48] hover:bg-slate-100 shrink-0 shadow-lg">
Create Digital Card
</Button>
</Link>
</div>
</div>
);
}

592
src/app/(main)/(marketing)/tools/vcard-qr-code/page.tsx
View File

@@ -1,296 +1,296 @@
import React from 'react';
import type { Metadata } from 'next';
import VCardGenerator from './VCardGenerator';
import { User, Shield, Zap, Smartphone, Contact, Share2, Check, UserPlus } from 'lucide-react';
import { QRCodeSVG } from 'qrcode.react';
import { ToolBreadcrumb } from '@/components/seo/BreadcrumbSchema';
import { RelatedTools } from '@/components/marketing/RelatedTools';
import { generateSoftwareAppSchema, generateFaqSchema } from '@/lib/schema-utils';
// SEO Optimized Metadata
export const metadata: Metadata = {
title: {
absolute: 'Free vCard QR Code Generator | QR Master',
},
description: 'Create a vCard QR code for your business card. Erstelle deine elektronische Visitenkarte kostenlos. Share contact details instantly. Free & No App Required.',
keywords: ['vcard qr code', 'business card qr code', 'contact qr generator', 'digital business card', 'add to contacts qr', 'visitenkarte qr code', 'digitale visitenkarte erstellen', 'kontakt qr code', 'elektronische visitenkarte', 'vcard erstellen kostenlos'],
alternates: {
canonical: 'https://www.qrmaster.net/tools/vcard-qr-code',
},
openGraph: {
title: 'Free vCard QR Code Generator | QR Master',
description: 'Turn your contact info into a QR code. The modern way to share your business card.',
type: 'website',
url: 'https://www.qrmaster.net/tools/vcard-qr-code',
images: [{ url: '/og-vcard-generator.png', width: 1200, height: 630 }],
},
twitter: {
card: 'summary_large_image',
title: 'Free vCard QR Code Generator',
description: 'Create QR codes for contact sharing. Instant and free.',
},
robots: {
index: true,
follow: true,
},
};
// JSON-LD Structured Data
const jsonLd = {
'@context': 'https://schema.org',
'@graph': [
generateSoftwareAppSchema(
'vCard QR Code Generator',
'Generate vCard (VCF) QR codes for business cards. Scanners can save contact info instantly.',
'/og-vcard-generator.png'
),
{
'@type': 'HowTo',
name: 'How to Create a vCard QR Code',
description: 'Create a QR code that saves your contact details.',
step: [
{
'@type': 'HowToStep',
position: 1,
name: 'Enter Details',
text: 'Fill in your Name, Phone, Email, Company, and Address.',
},
{
'@type': 'HowToStep',
position: 2,
name: 'Customize',
text: 'Select a color that matches your brand and add a frame.',
},
{
'@type': 'HowToStep',
position: 3,
name: 'Download',
text: 'Download the QR code image and place it on your physical business card.',
},
],
totalTime: 'PT1M',
},
generateFaqSchema({
'How does a vCard QR code work?': {
question: 'How does a vCard QR code work?',
answer: 'A vCard QR code contains your contact information in a standardized format (VCF). When scanned, the phone recognizes it as a contact card and prompts the user to "Save Contact" to their address book.',
},
'Is there a limit to how much info I can add?': {
question: 'Is there a limit to how much info I can add?',
answer: 'Static QR codes hold data directly in the pattern. The more data you add (long addresses, bio), the denser and harder to scan the QR code becomes. We recommend sticking to essential contact info for static codes.',
},
'Can I update my info later?': {
question: 'Can I update my info later?',
answer: 'No. This is a static vCard QR code. Once created, the info cannot be changed. If you move jobs or change numbers, you must print a new code. For editable cards, use our Dynamic vCard Plus.',
},
'Does it work on iPhone and Android?': {
question: 'Does it work on iPhone and Android?',
answer: 'Yes. Both iOS (Camera app) and Android (Camera or Google Lens) natively support vCard QR codes and correctly import the contact data.',
},
}),
],
};
export default function VCardQRCodePage() {
return (
<>
<script
type="application/ld+json"
dangerouslySetInnerHTML={{ __html: JSON.stringify(jsonLd) }}
/>
<ToolBreadcrumb toolName="vCard QR Code Generator" toolSlug="vcard-qr-code" />
<div className="min-h-screen" style={{ backgroundColor: '#EBEBDF' }}>
{/* HERO SECTION */}
<section className="relative pt-20 pb-20 lg:pt-32 lg:pb-32 px-4 sm:px-6 lg:px-8 overflow-hidden" style={{ backgroundColor: '#9F1239' }}>
<div className="absolute inset-0 opacity-10">
<svg className="w-full h-full" viewBox="0 0 100 100" preserveAspectRatio="none">
<path d="M0 100 C 20 0 50 0 100 100 Z" fill="url(#grad1)" />
<defs>
<linearGradient id="grad1" x1="0%" y1="0%" x2="100%" y2="0%">
<stop offset="0%" style={{ stopColor: 'white', stopOpacity: 1 }} />
<stop offset="100%" style={{ stopColor: 'white', stopOpacity: 0 }} />
</linearGradient>
</defs>
</svg>
</div>
<div className="max-w-7xl mx-auto grid lg:grid-cols-2 gap-12 items-center relative z-10">
<div className="text-center lg:text-left">
<div className="inline-flex items-center gap-2 px-3 py-1 rounded-full bg-white/10 text-white/90 text-sm font-medium mb-6 backdrop-blur-sm border border-white/10 hover:bg-white/20 transition-colors cursor-default">
<span className="flex h-2 w-2 relative">
<span className="animate-ping absolute inline-flex h-full w-full rounded-full bg-rose-400 opacity-75"></span>
<span className="relative inline-flex rounded-full h-2 w-2 bg-rose-400"></span>
</span>
Free Tool — No Signup Required
</div>
<h1 className="text-4xl md:text-5xl lg:text-6xl font-extrabold text-white tracking-tight leading-tight mb-6">
The Modern Way to <br className="hidden lg:block" />
<span className="text-transparent bg-clip-text bg-gradient-to-r from-rose-300 to-pink-300">Share Your Contact</span>
</h1>
<p className="text-lg md:text-xl text-indigo-100 max-w-2xl mx-auto lg:mx-0 mb-8 leading-relaxed">
Create a scannable Digital Business Card. One scan saves your name, phone, email, and address instantly.
<strong className="text-white block sm:inline mt-2 sm:mt-0"> Free & Professional.</strong>
</p>
<div className="flex flex-wrap justify-center lg:justify-start gap-4 text-sm font-medium text-white/80">
<div className="flex items-center gap-2 bg-white/5 px-4 py-2.5 rounded-xl border border-white/5 backdrop-blur-sm">
<UserPlus className="w-4 h-4 text-rose-300" />
Instant Save
</div>
<div className="flex items-center gap-2 bg-white/5 px-4 py-2.5 rounded-xl border border-white/5 backdrop-blur-sm">
<Share2 className="w-4 h-4 text-amber-400" />
Easy Share
</div>
<div className="flex items-center gap-2 bg-white/5 px-4 py-2.5 rounded-xl border border-white/5 backdrop-blur-sm">
<Shield className="w-4 h-4 text-purple-400" />
No Data Stored
</div>
</div>
</div>
{/* Visual Abstract */}
<div className="hidden lg:flex relative items-center justify-center min-h-[400px]">
<div className="absolute w-[500px] h-[500px] bg-indigo-500/30 rounded-full blur-[100px] -top-20 -right-20 animate-pulse" />
<div className="relative w-96 h-60 bg-white/10 backdrop-blur-2xl border border-white/30 rounded-2xl shadow-2xl p-6 transform rotate-6 hover:rotate-3 transition-all duration-700 group">
<div className="absolute inset-0 bg-gradient-to-br from-white/10 to-transparent" />
<div className="flex justify-between items-start relative z-10">
<div className="space-y-4">
<div className="w-16 h-16 rounded-full bg-white/20 border-2 border-white/30 flex items-center justify-center">
<Contact className="w-8 h-8 text-white" />
</div>
<div className="space-y-1">
<div className="h-4 w-32 bg-white/90 rounded-sm" />
<div className="h-3 w-20 bg-emerald-400/90 rounded-sm" />
</div>
</div>
<div className="w-24 h-24 bg-white rounded-lg p-1.5 shadow-lg">
<QRCodeSVG value="https://www.qrmaster.net" size={84} fgColor="#1A1265" />
</div>
</div>
<div className="absolute bottom-6 left-6 space-y-2 z-10">
<div className="h-2 w-48 bg-white/40 rounded-full" />
<div className="h-2 w-40 bg-white/30 rounded-full" />
</div>
{/* Floating Badge */}
<div className="absolute -bottom-4 -left-4 bg-white py-2 px-4 rounded-lg shadow-xl flex items-center gap-2 transform scale-90">
<div className="bg-emerald-100 p-1.5 rounded-full">
<Check className="w-3 h-3 text-emerald-600" />
</div>
<span className="text-xs font-bold text-slate-900">Saved to Contacts</span>
</div>
</div>
</div>
</div>
</section>
{/* GENERATOR SECTION */}
<section className="py-12 px-4 sm:px-6 lg:px-8 -mt-8">
<VCardGenerator />
</section>
{/* HOW IT WORKS */}
<section className="py-16 px-4 sm:px-6 lg:px-8 bg-white">
<div className="max-w-4xl mx-auto">
<h2 className="text-3xl font-bold text-slate-900 text-center mb-12">
How vCard QR Codes Work
</h2>
<div className="grid md:grid-cols-3 gap-8">
<article className="text-center">
<div className="w-14 h-14 rounded-2xl bg-[#1A1265]/10 flex items-center justify-center mx-auto mb-4">
<Contact className="w-7 h-7 text-[#1A1265]" />
</div>
<h3 className="font-bold text-slate-900 mb-2">1. Enter Details</h3>
<p className="text-slate-600 text-sm">
Fill in your professional contact information. Only add what you want to share.
</p>
</article>
<article className="text-center">
<div className="w-14 h-14 rounded-2xl bg-[#1A1265]/10 flex items-center justify-center mx-auto mb-4">
<Smartphone className="w-7 h-7 text-[#1A1265]" />
</div>
<h3 className="font-bold text-slate-900 mb-2">2. Scan</h3>
<p className="text-slate-600 text-sm">
A potential client or partner scans your card with their phone camera.
</p>
</article>
<article className="text-center">
<div className="w-14 h-14 rounded-2xl bg-[#1A1265]/10 flex items-center justify-center mx-auto mb-4">
<UserPlus className="w-7 h-7 text-[#1A1265]" />
</div>
<h3 className="font-bold text-slate-900 mb-2">3. Save</h3>
<p className="text-slate-600 text-sm">
They tap "Create New Contact" to save your details instantly. No typing errors.
</p>
</article>
</div>
</div>
</section>
{/* RELATED TOOLS */}
<RelatedTools />
{/* FAQ SECTION */}
<section className="py-16 px-4 sm:px-6 lg:px-8" style={{ backgroundColor: '#EBEBDF' }}>
<div className="max-w-3xl mx-auto">
<h2 className="text-3xl font-bold text-slate-900 text-center mb-4">
Frequently Asked Questions
</h2>
<p className="text-slate-600 text-center mb-10">
Common questions about vCard QR codes.
</p>
<div className="space-y-4">
<FaqItem
question="Can I add a profile picture?"
answer="Not on a static vCard QR code. Static codes store data in the pixels, so adding an image would make the code too complex to scan. For profile pictures, social links, and rich media, use our Dynamic vCard Plus solution."
/>
<FaqItem
question="How long does the QR code last?"
answer="Forever. Static vCard QR codes do not expire because the data is embedded directly in the image."
/>
<FaqItem
question="What information is required?"
answer="Nothing is strictly required, but we recommend at least a First Name and either a Phone Number or Email so the contact is useful."
/>
<FaqItem
question="Is my data safe?"
answer="Yes. This tool operates 100% in your browser. We do not store, see, or optimize your contact data. It goes directly from your input to the QR code."
/>
</div>
</div>
</section>
</div>
</>
);
}
function FaqItem({ question, answer }: { question: string; answer: string }) {
return (
<details className="group bg-white rounded-xl shadow-sm border border-slate-200 overflow-hidden">
<summary className="flex items-center justify-between p-5 cursor-pointer list-none text-slate-900 font-semibold hover:bg-slate-50 transition-colors">
{question}
<span className="transition group-open:rotate-180 text-slate-400">
<svg fill="none" height="20" stroke="currentColor" strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" viewBox="0 0 24 24" width="20">
<path d="M6 9l6 6 6-6" />
</svg>
</span>
</summary>
<div className="text-slate-600 px-5 pb-5 pt-0 leading-relaxed text-sm">
{answer}
</div>
</details>
);
}
import React from 'react';
import type { Metadata } from 'next';
import VCardGenerator from './VCardGenerator';
import { User, Shield, Zap, Smartphone, Contact, Share2, Check, UserPlus } from 'lucide-react';
import { QRCodeSVG } from 'qrcode.react';
import { ToolBreadcrumb } from '@/components/seo/BreadcrumbSchema';
import { RelatedTools } from '@/components/marketing/RelatedTools';
import { generateSoftwareAppSchema, generateFaqSchema } from '@/lib/schema-utils';
// SEO Optimized Metadata
export const metadata: Metadata = {
title: {
absolute: 'Free vCard QR Code Generator | QR Master',
},
description: 'Create a vCard QR code for your business card. Erstelle deine elektronische Visitenkarte kostenlos. Share contact details instantly. Free & No App Required.',
keywords: ['vcard qr code', 'business card qr code', 'contact qr generator', 'digital business card', 'add to contacts qr', 'visitenkarte qr code', 'digitale visitenkarte erstellen', 'kontakt qr code', 'elektronische visitenkarte', 'vcard erstellen kostenlos'],
alternates: {
canonical: 'https://www.qrmaster.net/tools/vcard-qr-code',
},
openGraph: {
title: 'Free vCard QR Code Generator | QR Master',
description: 'Turn your contact info into a QR code. The modern way to share your business card.',
type: 'website',
url: 'https://www.qrmaster.net/tools/vcard-qr-code',
images: [{ url: '/og-vcard-generator.png', width: 1200, height: 630 }],
},
twitter: {
card: 'summary_large_image',
title: 'Free vCard QR Code Generator',
description: 'Create QR codes for contact sharing. Instant and free.',
},
robots: {
index: true,
follow: true,
},
};
// JSON-LD Structured Data
const jsonLd = {
'@context': 'https://schema.org',
'@graph': [
generateSoftwareAppSchema(
'vCard QR Code Generator',
'Generate vCard (VCF) QR codes for business cards. Scanners can save contact info instantly.',
'/og-vcard-generator.png'
),
{
'@type': 'HowTo',
name: 'How to Create a vCard QR Code',
description: 'Create a QR code that saves your contact details.',
step: [
{
'@type': 'HowToStep',
position: 1,
name: 'Enter Details',
text: 'Fill in your Name, Phone, Email, Company, and Address.',
},
{
'@type': 'HowToStep',
position: 2,
name: 'Customize',
text: 'Select a color that matches your brand and add a frame.',
},
{
'@type': 'HowToStep',
position: 3,
name: 'Download',
text: 'Download the QR code image and place it on your physical business card.',
},
],
totalTime: 'PT1M',
},
generateFaqSchema({
'How does a vCard QR code work?': {
question: 'How does a vCard QR code work?',
answer: 'A vCard QR code contains your contact information in a standardized format (VCF). When scanned, the phone recognizes it as a contact card and prompts the user to "Save Contact" to their address book.',
},
'Is there a limit to how much info I can add?': {
question: 'Is there a limit to how much info I can add?',
answer: 'Static QR codes hold data directly in the pattern. The more data you add (long addresses, bio), the denser and harder to scan the QR code becomes. We recommend sticking to essential contact info for static codes.',
},
'Can I update my info later?': {
question: 'Can I update my info later?',
answer: 'No. This is a static vCard QR code. Once created, the info cannot be changed. If you move jobs or change numbers, you must print a new code. For editable cards, use our Dynamic vCard Plus.',
},
'Does it work on iPhone and Android?': {
question: 'Does it work on iPhone and Android?',
answer: 'Yes. Both iOS (Camera app) and Android (Camera or Google Lens) natively support vCard QR codes and correctly import the contact data.',
},
}),
],
};
export default function VCardQRCodePage() {
return (
<>
<script
type="application/ld+json"
dangerouslySetInnerHTML={{ __html: JSON.stringify(jsonLd) }}
/>
<ToolBreadcrumb toolName="vCard QR Code Generator" toolSlug="vcard-qr-code" />
<div className="min-h-screen" style={{ backgroundColor: '#EBEBDF' }}>
{/* HERO SECTION */}
<section className="relative pt-20 pb-20 lg:pt-32 lg:pb-32 px-4 sm:px-6 lg:px-8 overflow-hidden" style={{ backgroundColor: '#9F1239' }}>
<div className="absolute inset-0 opacity-10">
<svg className="w-full h-full" viewBox="0 0 100 100" preserveAspectRatio="none">
<path d="M0 100 C 20 0 50 0 100 100 Z" fill="url(#grad1)" />
<defs>
<linearGradient id="grad1" x1="0%" y1="0%" x2="100%" y2="0%">
<stop offset="0%" style={{ stopColor: 'white', stopOpacity: 1 }} />
<stop offset="100%" style={{ stopColor: 'white', stopOpacity: 0 }} />
</linearGradient>
</defs>
</svg>
</div>
<div className="max-w-7xl mx-auto grid lg:grid-cols-2 gap-12 items-center relative z-10">
<div className="text-center lg:text-left">
<div className="inline-flex items-center gap-2 px-3 py-1 rounded-full bg-white/10 text-white/90 text-sm font-medium mb-6 backdrop-blur-sm border border-white/10 hover:bg-white/20 transition-colors cursor-default">
<span className="flex h-2 w-2 relative">
<span className="animate-ping absolute inline-flex h-full w-full rounded-full bg-rose-400 opacity-75"></span>
<span className="relative inline-flex rounded-full h-2 w-2 bg-rose-400"></span>
</span>
Free Tool — No Signup Required
</div>
<h1 className="text-4xl md:text-5xl lg:text-6xl font-extrabold text-white tracking-tight leading-tight mb-6">
The Modern Way to <br className="hidden lg:block" />
<span className="text-transparent bg-clip-text bg-gradient-to-r from-rose-300 to-pink-300">Share Your Contact</span>
</h1>
<p className="text-lg md:text-xl text-indigo-100 max-w-2xl mx-auto lg:mx-0 mb-8 leading-relaxed">
Create a scannable Digital Business Card. One scan saves your name, phone, email, and address instantly.
<strong className="text-white block sm:inline mt-2 sm:mt-0"> Free & Professional.</strong>
</p>
<div className="flex flex-wrap justify-center lg:justify-start gap-4 text-sm font-medium text-white/80">
<div className="flex items-center gap-2 bg-white/5 px-4 py-2.5 rounded-xl border border-white/5 backdrop-blur-sm">
<UserPlus className="w-4 h-4 text-rose-300" />
Instant Save
</div>
<div className="flex items-center gap-2 bg-white/5 px-4 py-2.5 rounded-xl border border-white/5 backdrop-blur-sm">
<Share2 className="w-4 h-4 text-amber-400" />
Easy Share
</div>
<div className="flex items-center gap-2 bg-white/5 px-4 py-2.5 rounded-xl border border-white/5 backdrop-blur-sm">
<Shield className="w-4 h-4 text-purple-400" />
No Data Stored
</div>
</div>
</div>
{/* Visual Abstract */}
<div className="hidden lg:flex relative items-center justify-center min-h-[400px]">
<div className="absolute w-[500px] h-[500px] bg-indigo-500/30 rounded-full blur-[100px] -top-20 -right-20 animate-pulse" />
<div className="relative w-96 h-60 bg-white/10 backdrop-blur-2xl border border-white/30 rounded-2xl shadow-2xl p-6 transform rotate-6 hover:rotate-3 transition-all duration-700 group">
<div className="absolute inset-0 bg-gradient-to-br from-white/10 to-transparent" />
<div className="flex justify-between items-start relative z-10">
<div className="space-y-4">
<div className="w-16 h-16 rounded-full bg-white/20 border-2 border-white/30 flex items-center justify-center">
<Contact className="w-8 h-8 text-white" />
</div>
<div className="space-y-1">
<div className="h-4 w-32 bg-white/90 rounded-sm" />
<div className="h-3 w-20 bg-emerald-400/90 rounded-sm" />
</div>
</div>
<div className="w-24 h-24 bg-white rounded-lg p-1.5 shadow-lg">
<QRCodeSVG value="https://www.qrmaster.net" size={84} fgColor="#1A1265" />
</div>
</div>
<div className="absolute bottom-6 left-6 space-y-2 z-10">
<div className="h-2 w-48 bg-white/40 rounded-full" />
<div className="h-2 w-40 bg-white/30 rounded-full" />
</div>
{/* Floating Badge */}
<div className="absolute -bottom-4 -left-4 bg-white py-2 px-4 rounded-lg shadow-xl flex items-center gap-2 transform scale-90">
<div className="bg-emerald-100 p-1.5 rounded-full">
<Check className="w-3 h-3 text-emerald-600" />
</div>
<span className="text-xs font-bold text-slate-900">Saved to Contacts</span>
</div>
</div>
</div>
</div>
</section>
{/* GENERATOR SECTION */}
<section className="py-12 px-4 sm:px-6 lg:px-8 -mt-8">
<VCardGenerator />
</section>
{/* HOW IT WORKS */}
<section className="py-16 px-4 sm:px-6 lg:px-8 bg-white">
<div className="max-w-4xl mx-auto">
<h2 className="text-3xl font-bold text-slate-900 text-center mb-12">
How vCard QR Codes Work
</h2>
<div className="grid md:grid-cols-3 gap-8">
<article className="text-center">
<div className="w-14 h-14 rounded-2xl bg-[#1A1265]/10 flex items-center justify-center mx-auto mb-4">
<Contact className="w-7 h-7 text-[#1A1265]" />
</div>
<h3 className="font-bold text-slate-900 mb-2">1. Enter Details</h3>
<p className="text-slate-600 text-sm">
Fill in your professional contact information. Only add what you want to share.
</p>
</article>
<article className="text-center">
<div className="w-14 h-14 rounded-2xl bg-[#1A1265]/10 flex items-center justify-center mx-auto mb-4">
<Smartphone className="w-7 h-7 text-[#1A1265]" />
</div>
<h3 className="font-bold text-slate-900 mb-2">2. Scan</h3>
<p className="text-slate-600 text-sm">
A potential client or partner scans your card with their phone camera.
</p>
</article>
<article className="text-center">
<div className="w-14 h-14 rounded-2xl bg-[#1A1265]/10 flex items-center justify-center mx-auto mb-4">
<UserPlus className="w-7 h-7 text-[#1A1265]" />
</div>
<h3 className="font-bold text-slate-900 mb-2">3. Save</h3>
<p className="text-slate-600 text-sm">
They tap "Create New Contact" to save your details instantly. No typing errors.
</p>
</article>
</div>
</div>
</section>
{/* RELATED TOOLS */}
<RelatedTools />
{/* FAQ SECTION */}
<section className="py-16 px-4 sm:px-6 lg:px-8" style={{ backgroundColor: '#EBEBDF' }}>
<div className="max-w-3xl mx-auto">
<h2 className="text-3xl font-bold text-slate-900 text-center mb-4">
Frequently Asked Questions
</h2>
<p className="text-slate-600 text-center mb-10">
Common questions about vCard QR codes.
</p>
<div className="space-y-4">
<FaqItem
question="Can I add a profile picture?"
answer="Not on a static vCard QR code. Static codes store data in the pixels, so adding an image would make the code too complex to scan. For profile pictures, social links, and rich media, use our Dynamic vCard Plus solution."
/>
<FaqItem
question="How long does the QR code last?"
answer="Forever. Static vCard QR codes do not expire because the data is embedded directly in the image."
/>
<FaqItem
question="What information is required?"
answer="Nothing is strictly required, but we recommend at least a First Name and either a Phone Number or Email so the contact is useful."
/>
<FaqItem
question="Is my data safe?"
answer="Yes. This tool operates 100% in your browser. We do not store, see, or optimize your contact data. It goes directly from your input to the QR code."
/>
</div>
</div>
</section>
</div>
</>
);
}
function FaqItem({ question, answer }: { question: string; answer: string }) {
return (
<details className="group bg-white rounded-xl shadow-sm border border-slate-200 overflow-hidden">
<summary className="flex items-center justify-between p-5 cursor-pointer list-none text-slate-900 font-semibold hover:bg-slate-50 transition-colors">
{question}
<span className="transition group-open:rotate-180 text-slate-400">
<svg fill="none" height="20" stroke="currentColor" strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" viewBox="0 0 24 24" width="20">
<path d="M6 9l6 6 6-6" />
</svg>
</span>
</summary>
<div className="text-slate-600 px-5 pb-5 pt-0 leading-relaxed text-sm">
{answer}
</div>
</details>
);
}

534
src/app/(main)/(marketing)/tools/whatsapp-qr-code/WhatsAppGenerator.tsx
View File

@@ -1,267 +1,267 @@
'use client';
import React, { useState, useRef } from 'react';
import Link from 'next/link';
import { QRCodeSVG } from 'qrcode.react';
import {
Phone,
Download,
Check,
Sparkles,
MessageCircle,
Send
} from 'lucide-react';
import { Button } from '@/components/ui/Button';
import { Input } from '@/components/ui/Input';
import { cn } from '@/lib/utils';
import { Textarea } from '@/components/ui/Textarea';
// Brand Colors
const BRAND = {
paleGrey: '#EBEBDF',
richBlue: '#1A1265',
richBlueLight: '#2A2275',
};
// QR Color Options - WhatsApp Theme
const QR_COLORS = [
{ name: 'WhatsApp Green', value: '#25D366' },
{ name: 'Teal', value: '#128C7E' },
{ name: 'Classic Black', value: '#000000' },
{ name: 'Rich Blue', value: '#1A1265' },
{ name: 'Purple', value: '#7C3AED' },
{ name: 'Emerald', value: '#10B981' },
{ name: 'Rose', value: '#F43F5E' },
];
// Frame Options
const FRAME_OPTIONS = [
{ id: 'none', label: 'No Frame' },
{ id: 'scanme', label: 'Scan Me' },
{ id: 'chat', label: 'Chat With Us' },
{ id: 'support', label: 'Support' },
];
export default function WhatsappGenerator() {
const [phone, setPhone] = useState('');
const [message, setMessage] = useState('');
const [qrColor, setQrColor] = useState('#25D366');
const [frameType, setFrameType] = useState('none');
const qrRef = useRef<HTMLDivElement>(null);
// WhatsApp URL: https://wa.me/number?text=message
const getUrl = () => {
const cleanPhone = phone.replace(/\D/g, ''); // Remove non-digits
const encodedMessage = encodeURIComponent(message);
return `https://wa.me/${cleanPhone}?text=${encodedMessage}`;
};
const handleDownload = async (format: 'png' | 'svg') => {
if (!qrRef.current) return;
try {
if (format === 'png') {
const { toPng } = await import('html-to-image');
const dataUrl = await toPng(qrRef.current, { cacheBust: true, pixelRatio: 3 });
const link = document.createElement('a');
link.download = `whatsapp-qr-code.png`;
link.href = dataUrl;
link.click();
} else {
const svgData = qrRef.current.querySelector('svg')?.outerHTML;
if (svgData) {
const blob = new Blob([svgData], { type: 'image/svg+xml;charset=utf-8' });
const url = URL.createObjectURL(blob);
const link = document.createElement('a');
link.href = url;
link.download = `whatsapp-qr-code.svg`;
link.click();
}
}
} catch (err) {
console.error('Download failed', err);
}
};
const getFrameLabel = () => {
const frame = FRAME_OPTIONS.find(f => f.id === frameType);
return frame?.id !== 'none' ? frame?.label : null;
};
return (
<div className="w-full max-w-5xl mx-auto px-4 md:px-6">
{/* Main Generator Card */}
<div className="bg-white rounded-3xl shadow-2xl shadow-slate-900/10 overflow-hidden border border-slate-100">
<div className="grid lg:grid-cols-2">
{/* LEFT: Input Section */}
<div className="p-6 md:p-8 lg:p-10 space-y-8 border-r border-slate-100">
{/* WhatsApp Details */}
<div className="space-y-6">
<h2 className="text-lg font-bold text-slate-900 flex items-center gap-2">
<MessageCircle className="w-5 h-5 text-[#25D366]" />
WhatsApp Details
</h2>
<div>
<label className="block text-sm font-medium text-slate-700 mb-2">Phone Number</label>
<Input
placeholder="15551234567"
value={phone}
onChange={(e) => setPhone(e.target.value)}
className="h-12 text-base rounded-xl border-slate-200 focus:border-[#25D366] focus:ring-[#25D366]"
/>
<p className="text-xs text-slate-600 mt-2">Include country code (e.g. 1 for US, 44 for UK). No '+' symbol.</p>
</div>
<div>
<label className="block text-sm font-medium text-slate-700 mb-2">Pre-filled Message (Optional)</label>
<Textarea
placeholder="Hi, I'm interested in your services..."
value={message}
onChange={(e: React.ChangeEvent<HTMLTextAreaElement>) => setMessage(e.target.value)}
className="h-24 p-4 text-base rounded-xl border-slate-200 focus:border-[#25D366] focus:ring-[#25D366] resize-none"
/>
</div>
</div>
<div className="border-t border-slate-100"></div>
{/* Design Options */}
<div className="space-y-6">
<h2 className="text-lg font-bold text-slate-900 flex items-center gap-2">
<Sparkles className="w-5 h-5 text-[#25D366]" />
Design Options
</h2>
{/* Color Picker */}
<div>
<label className="block text-sm font-medium text-slate-700 mb-3">QR Code Color</label>
<div className="flex flex-wrap gap-2">
{QR_COLORS.map((c) => (
<button
key={c.name}
onClick={() => setQrColor(c.value)}
className={cn(
"w-9 h-9 rounded-full border-2 flex items-center justify-center transition-all hover:scale-110",
qrColor === c.value ? "border-slate-900 ring-2 ring-offset-2 ring-slate-200" : "border-white shadow-md"
)}
style={{ backgroundColor: c.value }}
aria-label={`Select ${c.name}`}
title={c.name}
>
{qrColor === c.value && <Check className="w-4 h-4 text-white" strokeWidth={3} />}
</button>
))}
</div>
</div>
{/* Frame Selector */}
<div>
<label className="block text-sm font-medium text-slate-700 mb-3">Frame Label</label>
<div className="grid grid-cols-2 sm:grid-cols-4 gap-2">
{FRAME_OPTIONS.map((frame) => (
<button
key={frame.id}
onClick={() => setFrameType(frame.id)}
className={cn(
"py-2.5 px-3 rounded-lg text-sm font-medium transition-all border",
frameType === frame.id
? "bg-[#25D366] text-white border-[#25D366]"
: "bg-slate-50 text-slate-600 border-slate-200 hover:border-slate-300"
)}
>
{frame.label}
</button>
))}
</div>
</div>
</div>
</div>
{/* RIGHT: Preview Section */}
<div className="p-6 md:p-8 lg:p-10 flex flex-col items-center justify-center" style={{ backgroundColor: BRAND.paleGrey }}>
{/* QR Card with Frame */}
<div
ref={qrRef}
className="bg-white rounded-3xl shadow-xl p-6 sm:p-8 flex flex-col items-center w-full max-w-[320px]"
>
{/* Frame Label */}
{getFrameLabel() && (
<div
className="mb-5 px-8 py-2.5 rounded-full text-white font-bold text-sm tracking-widest uppercase shadow-md"
style={{ backgroundColor: qrColor }}
>
{getFrameLabel()}
</div>
)}
{/* QR Code */}
<div className="bg-white">
<QRCodeSVG
value={getUrl()}
size={240}
level="M"
includeMargin={false}
fgColor={qrColor}
/>
</div>
{/* Info Preview */}
<div className="mt-6 text-center max-w-[260px]">
<h3 className="font-bold text-slate-900 text-lg flex items-center justify-center gap-2 truncate">
<Phone className="w-4 h-4 text-slate-400 shrink-0" />
<span className="truncate">{phone ? `+${phone}` : 'Number'}</span>
</h3>
<div className="text-xs text-slate-600 mt-1">Starts WhatsApp Chat</div>
</div>
</div>
{/* Download Buttons */}
<div className="flex items-center gap-3 mt-8">
<Button
onClick={() => handleDownload('png')}
className="bg-[#25D366] hover:bg-[#128C7E] text-white shadow-lg"
>
<Download className="w-4 h-4 mr-2" />
Download PNG
</Button>
<Button
onClick={() => handleDownload('svg')}
variant="outline"
className="border-slate-300 hover:bg-white"
>
<Download className="w-4 h-4 mr-2" />
SVG
</Button>
</div>
<p className="text-xs text-slate-600 mt-4 text-center">
Scanning starts a chat with this number instantly.
</p>
</div>
</div>
</div>
{/* Upsell Banner */}
<div className="mt-8 bg-gradient-to-r from-[#128C7E] to-[#25D366] rounded-2xl p-6 flex flex-col sm:flex-row items-center justify-between gap-4">
<div className="text-white text-center sm:text-left">
<h3 className="font-bold text-lg">Using WhatsApp for Business?</h3>
<p className="text-white/80 text-sm mt-1">
Track how many customers contact you via QR code analytics with our Pro plan.
</p>
</div>
<Link href="/signup">
<Button className="bg-white text-[#128C7E] hover:bg-slate-100 shrink-0 shadow-lg">
Get Business Analytics
</Button>
</Link>
</div>
</div>
);
}
'use client';
import React, { useState, useRef } from 'react';
import Link from 'next/link';
import { QRCodeSVG } from 'qrcode.react';
import {
Phone,
Download,
Check,
Sparkles,
MessageCircle,
Send
} from 'lucide-react';
import { Button } from '@/components/ui/Button';
import { Input } from '@/components/ui/Input';
import { cn } from '@/lib/utils';
import { Textarea } from '@/components/ui/Textarea';
// Brand Colors
const BRAND = {
paleGrey: '#EBEBDF',
richBlue: '#1A1265',
richBlueLight: '#2A2275',
};
// QR Color Options - WhatsApp Theme
const QR_COLORS = [
{ name: 'WhatsApp Green', value: '#25D366' },
{ name: 'Teal', value: '#128C7E' },
{ name: 'Classic Black', value: '#000000' },
{ name: 'Rich Blue', value: '#1A1265' },
{ name: 'Purple', value: '#7C3AED' },
{ name: 'Emerald', value: '#10B981' },
{ name: 'Rose', value: '#F43F5E' },
];
// Frame Options
const FRAME_OPTIONS = [
{ id: 'none', label: 'No Frame' },
{ id: 'scanme', label: 'Scan Me' },
{ id: 'chat', label: 'Chat With Us' },
{ id: 'support', label: 'Support' },
];
export default function WhatsappGenerator() {
const [phone, setPhone] = useState('');
const [message, setMessage] = useState('');
const [qrColor, setQrColor] = useState('#25D366');
const [frameType, setFrameType] = useState('none');
const qrRef = useRef<HTMLDivElement>(null);
// WhatsApp URL: https://wa.me/number?text=message
const getUrl = () => {
const cleanPhone = phone.replace(/\D/g, ''); // Remove non-digits
const encodedMessage = encodeURIComponent(message);
return `https://wa.me/${cleanPhone}?text=${encodedMessage}`;
};
const handleDownload = async (format: 'png' | 'svg') => {
if (!qrRef.current) return;
try {
if (format === 'png') {
const { toPng } = await import('html-to-image');
const dataUrl = await toPng(qrRef.current, { cacheBust: true, pixelRatio: 3 });
const link = document.createElement('a');
link.download = `whatsapp-qr-code.png`;
link.href = dataUrl;
link.click();
} else {
const svgData = qrRef.current.querySelector('svg')?.outerHTML;
if (svgData) {
const blob = new Blob([svgData], { type: 'image/svg+xml;charset=utf-8' });
const url = URL.createObjectURL(blob);
const link = document.createElement('a');
link.href = url;
link.download = `whatsapp-qr-code.svg`;
link.click();
}
}
} catch (err) {
console.error('Download failed', err);
}
};
const getFrameLabel = () => {
const frame = FRAME_OPTIONS.find(f => f.id === frameType);
return frame?.id !== 'none' ? frame?.label : null;
};
return (
<div className="w-full max-w-5xl mx-auto px-4 md:px-6">
{/* Main Generator Card */}
<div className="bg-white rounded-3xl shadow-2xl shadow-slate-900/10 overflow-hidden border border-slate-100">
<div className="grid lg:grid-cols-2">
{/* LEFT: Input Section */}
<div className="p-6 md:p-8 lg:p-10 space-y-8 border-r border-slate-100">
{/* WhatsApp Details */}
<div className="space-y-6">
<h2 className="text-lg font-bold text-slate-900 flex items-center gap-2">
<MessageCircle className="w-5 h-5 text-[#25D366]" />
WhatsApp Details
</h2>
<div>
<label className="block text-sm font-medium text-slate-700 mb-2">Phone Number</label>
<Input
placeholder="15551234567"
value={phone}
onChange={(e) => setPhone(e.target.value)}
className="h-12 text-base rounded-xl border-slate-200 focus:border-[#25D366] focus:ring-[#25D366]"
/>
<p className="text-xs text-slate-600 mt-2">Include country code (e.g. 1 for US, 44 for UK). No '+' symbol.</p>
</div>
<div>
<label className="block text-sm font-medium text-slate-700 mb-2">Pre-filled Message (Optional)</label>
<Textarea
placeholder="Hi, I'm interested in your services..."
value={message}
onChange={(e: React.ChangeEvent<HTMLTextAreaElement>) => setMessage(e.target.value)}
className="h-24 p-4 text-base rounded-xl border-slate-200 focus:border-[#25D366] focus:ring-[#25D366] resize-none"
/>
</div>
</div>
<div className="border-t border-slate-100"></div>
{/* Design Options */}
<div className="space-y-6">
<h2 className="text-lg font-bold text-slate-900 flex items-center gap-2">
<Sparkles className="w-5 h-5 text-[#25D366]" />
Design Options
</h2>
{/* Color Picker */}
<div>
<label className="block text-sm font-medium text-slate-700 mb-3">QR Code Color</label>
<div className="flex flex-wrap gap-2">
{QR_COLORS.map((c) => (
<button
key={c.name}
onClick={() => setQrColor(c.value)}
className={cn(
"w-9 h-9 rounded-full border-2 flex items-center justify-center transition-all hover:scale-110",
qrColor === c.value ? "border-slate-900 ring-2 ring-offset-2 ring-slate-200" : "border-white shadow-md"
)}
style={{ backgroundColor: c.value }}
aria-label={`Select ${c.name}`}
title={c.name}
>
{qrColor === c.value && <Check className="w-4 h-4 text-white" strokeWidth={3} />}
</button>
))}
</div>
</div>
{/* Frame Selector */}
<div>
<label className="block text-sm font-medium text-slate-700 mb-3">Frame Label</label>
<div className="grid grid-cols-2 sm:grid-cols-4 gap-2">
{FRAME_OPTIONS.map((frame) => (
<button
key={frame.id}
onClick={() => setFrameType(frame.id)}
className={cn(
"py-2.5 px-3 rounded-lg text-sm font-medium transition-all border",
frameType === frame.id
? "bg-[#25D366] text-white border-[#25D366]"
: "bg-slate-50 text-slate-600 border-slate-200 hover:border-slate-300"
)}
>
{frame.label}
</button>
))}
</div>
</div>
</div>
</div>
{/* RIGHT: Preview Section */}
<div className="p-6 md:p-8 lg:p-10 flex flex-col items-center justify-center" style={{ backgroundColor: BRAND.paleGrey }}>
{/* QR Card with Frame */}
<div
ref={qrRef}
className="bg-white rounded-3xl shadow-xl p-6 sm:p-8 flex flex-col items-center w-full max-w-[320px]"
>
{/* Frame Label */}
{getFrameLabel() && (
<div
className="mb-5 px-8 py-2.5 rounded-full text-white font-bold text-sm tracking-widest uppercase shadow-md"
style={{ backgroundColor: qrColor }}
>
{getFrameLabel()}
</div>
)}
{/* QR Code */}
<div className="bg-white">
<QRCodeSVG
value={getUrl()}
size={240}
level="M"
includeMargin={false}
fgColor={qrColor}
/>
</div>
{/* Info Preview */}
<div className="mt-6 text-center max-w-[260px]">
<h3 className="font-bold text-slate-900 text-lg flex items-center justify-center gap-2 truncate">
<Phone className="w-4 h-4 text-slate-400 shrink-0" />
<span className="truncate">{phone ? `+${phone}` : 'Number'}</span>
</h3>
<div className="text-xs text-slate-600 mt-1">Starts WhatsApp Chat</div>
</div>
</div>
{/* Download Buttons */}
<div className="flex items-center gap-3 mt-8">
<Button
onClick={() => handleDownload('png')}
className="bg-[#25D366] hover:bg-[#128C7E] text-white shadow-lg"
>
<Download className="w-4 h-4 mr-2" />
Download PNG
</Button>
<Button
onClick={() => handleDownload('svg')}
variant="outline"
className="border-slate-300 hover:bg-white"
>
<Download className="w-4 h-4 mr-2" />
SVG
</Button>
</div>
<p className="text-xs text-slate-600 mt-4 text-center">
Scanning starts a chat with this number instantly.
</p>
</div>
</div>
</div>
{/* Upsell Banner */}
<div className="mt-8 bg-gradient-to-r from-[#128C7E] to-[#25D366] rounded-2xl p-6 flex flex-col sm:flex-row items-center justify-between gap-4">
<div className="text-white text-center sm:text-left">
<h3 className="font-bold text-lg">Using WhatsApp for Business?</h3>
<p className="text-white/80 text-sm mt-1">
Track how many customers contact you via QR code analytics with our Pro plan.
</p>
</div>
<Link href="/signup">
<Button className="bg-white text-[#128C7E] hover:bg-slate-100 shrink-0 shadow-lg">
Get Business Analytics
</Button>
</Link>
</div>
</div>
);
}

670
src/app/(main)/(marketing)/tools/whatsapp-qr-code/page.tsx
View File

@@ -1,335 +1,335 @@
import React from 'react';
import type { Metadata } from 'next';
import WhatsappGenerator from './WhatsAppGenerator';
import { MessageCircle, Shield, Zap, Smartphone, Send, Phone, Download, Check } from 'lucide-react';
import { QRCodeSVG } from 'qrcode.react';
import { ToolBreadcrumb } from '@/components/seo/BreadcrumbSchema';
import { RelatedTools } from '@/components/marketing/RelatedTools';
import { generateSoftwareAppSchema, generateFaqSchema } from '@/lib/schema-utils';
// SEO Optimized Metadata
export const metadata: Metadata = {
title: {
absolute: 'Free WhatsApp QR Code Generator | Start Chats Instantly | QR Master',
},
description: 'Create a QR code that opens a WhatsApp chat. WhatsApp QR Code erstellen mit Nachricht. Perfect for support & sales.',
keywords: ['whatsapp qr code', 'wa.me generator', 'whatsapp chat qr', 'whatsapp link generator', 'contact qr code', 'whatsapp qr code erstellen', 'wa.me link erstellen', 'whatsapp chat starten', 'whatsapp kontakt qr code', 'whatsapp nachricht qr code'],
alternates: {
canonical: 'https://www.qrmaster.net/tools/whatsapp-qr-code',
},
openGraph: {
title: 'Free WhatsApp QR Code Generator | QR Master',
description: 'Generate QR codes to start WhatsApp chats. Add a pre-filled message.',
type: 'website',
url: 'https://www.qrmaster.net/tools/whatsapp-qr-code',
images: [{ url: '/og-whatsapp-generator.png', width: 1200, height: 630 }],
},
twitter: {
card: 'summary_large_image',
title: 'Free WhatsApp QR Code Generator',
description: 'Create QR codes for WhatsApp. Chat instantly.',
},
robots: {
index: true,
follow: true,
},
};
// JSON-LD Structured Data
const jsonLd = {
'@context': 'https://schema.org',
'@graph': [
generateSoftwareAppSchema(
'WhatsApp QR Code Generator',
'Generate QR codes that start a WhatsApp conversation with a specific number.',
'/og-whatsapp-generator.png'
),
{
'@type': 'HowTo',
name: 'How to Create a WhatsApp QR Code',
description: 'Create a QR code that opens a WhatsApp chat.',
step: [
{
'@type': 'HowToStep',
position: 1,
name: 'Enter Number',
text: 'Type your WhatsApp phone number with country code (e.g. 1555...).',
},
{
'@type': 'HowToStep',
position: 2,
name: 'Customize',
text: 'Add a pre-written message and choose your brand color.',
},
{
'@type': 'HowToStep',
position: 3,
name: 'Download',
text: 'Save the QR code.',
},
{
'@type': 'HowToStep',
position: 4,
name: 'Test',
text: 'Scan the code to ensure it opens the correct chat.',
},
{
'@type': 'HowToStep',
position: 5,
name: 'Share',
text: 'Add it to your website, business cards, or support materials.',
},
],
totalTime: 'PT45S',
},
generateFaqSchema({
'Do users need to save my number first?': {
question: 'Do users need to save my number first?',
answer: 'No! That is the best part. Scanning the code opens the chat immediately without them needing to save you as a contact first.',
},
'Can I use this for WhatsApp Business?': {
question: 'Can I use this for WhatsApp Business?',
answer: 'Yes, it works perfectly for both personal and business accounts.',
},
'What is the Pre-filled Message?': {
question: 'What is the Pre-filled Message?',
answer: 'It is text that automatically appears in the user\'s typing field when they scan the code (e.g., "Hello, I want to order pizza"). They just have to hit send.',
},
'Is it free?': {
question: 'Is it free?',
answer: 'Yes, this generator is completely free.',
},
'Can I track scans?': {
question: 'Can I track scans?',
answer: 'This is a static QR code, so tracking is not included. Use our Dynamic QR Code generator for analytics.',
},
}),
],
};
export default function WhatsappQRCodePage() {
return (
<>
<script
type="application/ld+json"
dangerouslySetInnerHTML={{ __html: JSON.stringify(jsonLd) }}
/>
<ToolBreadcrumb toolName="WhatsApp QR Code Generator" toolSlug="whatsapp-qr-code" />
<div className="min-h-screen" style={{ backgroundColor: '#EBEBDF' }}>
{/* HERO SECTION */}
<section className="relative pt-20 pb-20 lg:pt-32 lg:pb-32 px-4 sm:px-6 lg:px-8 overflow-hidden bg-[#128C7E]">
<div className="absolute inset-0 opacity-10">
{/* WhatsApp Pattern */}
<svg className="w-full h-full" width="100%" height="100%" xmlns="http://www.w3.org/2000/svg">
<defs>
<pattern id="wa_pattern" width="60" height="60" patternUnits="userSpaceOnUse">
<path d="M30 30L35 35M25 35L30 30" stroke="white" strokeWidth="2" strokeOpacity="0.2" />
</pattern>
</defs>
<rect width="100%" height="100%" fill="url(#wa_pattern)" />
</svg>
</div>
<div className="max-w-7xl mx-auto grid lg:grid-cols-2 gap-12 items-center relative z-10">
<div className="text-center lg:text-left">
<div className="inline-flex items-center gap-2 px-3 py-1 rounded-full bg-white/10 text-white/90 text-sm font-medium mb-6 backdrop-blur-sm border border-white/10 hover:bg-white/20 transition-colors cursor-default">
<span className="flex h-2 w-2 relative">
<span className="animate-ping absolute inline-flex h-full w-full rounded-full bg-green-300 opacity-75"></span>
<span className="relative inline-flex rounded-full h-2 w-2 bg-green-300"></span>
</span>
Free Tool — No Signup Required
</div>
<h1 className="text-4xl md:text-5xl lg:text-6xl font-extrabold text-white tracking-tight leading-tight mb-6">
Start Chats Instantly with <br className="hidden lg:block" />
<span className="text-white drop-shadow-md">WhatsApp QR Codes</span>
</h1>
<p className="text-lg md:text-xl text-green-50 max-w-2xl mx-auto lg:mx-0 mb-8 leading-relaxed">
Let customers message you without saving your number.
<strong className="text-white block sm:inline mt-2 sm:mt-0"> Perfect for support, sales, and bookings.</strong>
</p>
<div className="flex flex-wrap justify-center lg:justify-start gap-4 text-sm font-medium text-white/80">
<div className="flex items-center gap-2 bg-white/10 px-4 py-2.5 rounded-xl border border-white/10 backdrop-blur-sm">
<Send className="w-4 h-4 text-green-200" />
Instant Chat
</div>
<div className="flex items-center gap-2 bg-white/10 px-4 py-2.5 rounded-xl border border-white/10 backdrop-blur-sm">
<MessageCircle className="w-4 h-4 text-white" />
Pre-filled Msg
</div>
<div className="flex items-center gap-2 bg-white/10 px-4 py-2.5 rounded-xl border border-white/10 backdrop-blur-sm">
<Phone className="w-4 h-4 text-white" />
No Save Contact
</div>
</div>
</div>
{/* Visual Abstract */}
<div className="hidden lg:flex relative items-center justify-center min-h-[400px]">
<div className="absolute w-[500px] h-[500px] bg-green-500/30 rounded-full blur-[100px] -top-20 -right-20 animate-pulse" />
<div className="relative w-80 h-96 bg-white/5 backdrop-blur-xl border border-white/20 rounded-3xl shadow-2xl flex flex-col items-center justify-center p-8 transform -rotate-3 hover:rotate-0 transition-all duration-700 group">
<div className="absolute inset-0 bg-gradient-to-br from-white/10 to-transparent rounded-3xl" />
<div className="w-full bg-[#ECE5DD] rounded-xl shadow-lg h-40 mb-6 relative overflow-hidden flex flex-col justify-end p-4">
{/* Chat Bubble Right */}
<div className="bg-[#DCF8C6] p-2 rounded-lg self-end mb-2 max-w-[80%] text-[10px] text-slate-800 shadow-sm">
Hi! I'd like to book an appointment.
<div className="text-[8px] text-slate-600 text-right mt-0.5">10:42 AM <span className="text-blue-500">✓✓</span></div>
</div>
{/* Chat Bubble Left */}
<div className="bg-white p-2 rounded-lg self-start max-w-[80%] text-[10px] text-slate-800 shadow-sm">
Sure! What time works for you?
<div className="text-[8px] text-slate-600 text-right mt-0.5">10:43 AM</div>
</div>
</div>
<div className="w-44 h-44 bg-white rounded-xl p-2 shadow-inner relative overflow-hidden flex items-center justify-center">
<QRCodeSVG value="https://www.qrmaster.net" size={160} fgColor="#128C7E" level="Q" />
</div>
{/* Floating Badge */}
<div className="absolute -bottom-6 -left-6 bg-white py-3 px-5 rounded-xl shadow-xl flex items-center gap-3 transform transition-transform hover:scale-105 duration-300">
<div className="bg-green-100 p-2 rounded-full">
<MessageCircle className="w-5 h-5 text-[#25D366]" />
</div>
<div className="text-left">
<div className="text-[10px] text-slate-400 font-bold uppercase tracking-wider">WhatsApp</div>
<div className="text-sm font-bold text-slate-900">Start Chat</div>
</div>
</div>
</div>
</div>
</div>
</section>
{/* GENERATOR SECTION */}
<section className="py-12 px-4 sm:px-6 lg:px-8 -mt-8">
<WhatsappGenerator />
</section>
{/* HOW IT WORKS */}
<section className="py-16 px-4 sm:px-6 lg:px-8 bg-white">
<div className="max-w-4xl mx-auto">
<h2 className="text-3xl font-bold text-slate-900 text-center mb-12">
How WhatsApp QR Codes Work
</h2>
<div className="grid md:grid-cols-3 lg:grid-cols-5 gap-8">
<article className="text-center">
<div className="w-14 h-14 rounded-2xl bg-[#25D366]/10 flex items-center justify-center mx-auto mb-4">
<Phone className="w-7 h-7 text-[#25D366]" />
</div>
<h3 className="font-bold text-slate-900 mb-2">1. Your Number</h3>
<p className="text-slate-600 text-sm">
Enter your WhatsApp phone number. Ensure it includes the country code.
</p>
</article>
<article className="text-center">
<div className="w-12 h-12 rounded-2xl bg-[#25D366]/10 flex items-center justify-center mx-auto mb-4">
<MessageCircle className="w-6 h-6 text-[#25D366]" />
</div>
<h3 className="font-bold text-slate-900 mb-2">2. Customize</h3>
<p className="text-slate-600 text-xs leading-relaxed">
Add a message and choose your color.
</p>
</article>
<article className="text-center">
<div className="w-12 h-12 rounded-2xl bg-[#25D366]/10 flex items-center justify-center mx-auto mb-4">
<Download className="w-6 h-6 text-[#25D366]" />
</div>
<h3 className="font-bold text-slate-900 mb-2">3. Download</h3>
<p className="text-slate-600 text-xs leading-relaxed">
Save your QR code.
</p>
</article>
<article className="text-center">
<div className="w-12 h-12 rounded-2xl bg-[#25D366]/10 flex items-center justify-center mx-auto mb-4">
<Check className="w-6 h-6 text-[#25D366]" />
</div>
<h3 className="font-bold text-slate-900 mb-2">4. Test</h3>
<p className="text-slate-600 text-xs leading-relaxed">
Scan to ensure it works.
</p>
</article>
<article className="text-center">
<div className="w-12 h-12 rounded-2xl bg-[#25D366]/10 flex items-center justify-center mx-auto mb-4">
<Send className="w-6 h-6 text-[#25D366]" />
</div>
<h3 className="font-bold text-slate-900 mb-2">5. Chat</h3>
<p className="text-slate-600 text-xs leading-relaxed">
Start chatting instantly.
</p>
</article>
</div>
</div>
</section>
{/* RELATED TOOLS */}
<RelatedTools />
{/* FAQ SECTION */}
<section className="py-16 px-4 sm:px-6 lg:px-8" style={{ backgroundColor: '#EBEBDF' }}>
<div className="max-w-3xl mx-auto">
<h2 className="text-3xl font-bold text-slate-900 text-center mb-4">
Frequently Asked Questions
</h2>
<p className="text-slate-600 text-center mb-10">
Common questions about WhatsApp QR codes.
</p>
<div className="space-y-4">
<FaqItem
question="Does it work internationally?"
answer="Yes. Since you include the country code, it works for anyone, anywhere in the world."
/>
<FaqItem
question="Can I use this on my website?"
answer="Yes, you can display the QR code on your contact page so desktop users can easily scan it to chat on their phone."
/>
<FaqItem
question="Is my phone number visible?"
answer="Yes, the phone number is embedded in the link. It is the same visibility as putting your phone number on a business card."
/>
<FaqItem
question="Is it free?"
answer="Yes, this generator is completely free."
/>
<FaqItem
question="Can I track scans?"
answer="This is a static QR code, so tracking is not included. Use our Dynamic QR Code generator for analytics."
/>
</div>
</div>
</section>
</div>
</>
);
}
function FaqItem({ question, answer }: { question: string; answer: string }) {
return (
<details className="group bg-white rounded-xl shadow-sm border border-slate-200 overflow-hidden">
<summary className="flex items-center justify-between p-5 cursor-pointer list-none text-slate-900 font-semibold hover:bg-slate-50 transition-colors">
{question}
<span className="transition group-open:rotate-180 text-slate-400">
<svg fill="none" height="20" stroke="currentColor" strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" viewBox="0 0 24 24" width="20">
<path d="M6 9l6 6 6-6" />
</svg>
</span>
</summary>
<div className="text-slate-600 px-5 pb-5 pt-0 leading-relaxed text-sm">
{answer}
</div>
</details>
);
}
import React from 'react';
import type { Metadata } from 'next';
import WhatsappGenerator from './WhatsAppGenerator';
import { MessageCircle, Shield, Zap, Smartphone, Send, Phone, Download, Check } from 'lucide-react';
import { QRCodeSVG } from 'qrcode.react';
import { ToolBreadcrumb } from '@/components/seo/BreadcrumbSchema';
import { RelatedTools } from '@/components/marketing/RelatedTools';
import { generateSoftwareAppSchema, generateFaqSchema } from '@/lib/schema-utils';
// SEO Optimized Metadata
export const metadata: Metadata = {
title: {
absolute: 'Free WhatsApp QR Code Generator | Start Chats Instantly | QR Master',
},
description: 'Create a QR code that opens a WhatsApp chat. WhatsApp QR Code erstellen mit Nachricht. Perfect for support & sales.',
keywords: ['whatsapp qr code', 'wa.me generator', 'whatsapp chat qr', 'whatsapp link generator', 'contact qr code', 'whatsapp qr code erstellen', 'wa.me link erstellen', 'whatsapp chat starten', 'whatsapp kontakt qr code', 'whatsapp nachricht qr code'],
alternates: {
canonical: 'https://www.qrmaster.net/tools/whatsapp-qr-code',
},
openGraph: {
title: 'Free WhatsApp QR Code Generator | QR Master',
description: 'Generate QR codes to start WhatsApp chats. Add a pre-filled message.',
type: 'website',
url: 'https://www.qrmaster.net/tools/whatsapp-qr-code',
images: [{ url: '/og-whatsapp-generator.png', width: 1200, height: 630 }],
},
twitter: {
card: 'summary_large_image',
title: 'Free WhatsApp QR Code Generator',
description: 'Create QR codes for WhatsApp. Chat instantly.',
},
robots: {
index: true,
follow: true,
},
};
// JSON-LD Structured Data
const jsonLd = {
'@context': 'https://schema.org',
'@graph': [
generateSoftwareAppSchema(
'WhatsApp QR Code Generator',
'Generate QR codes that start a WhatsApp conversation with a specific number.',
'/og-whatsapp-generator.png'
),
{
'@type': 'HowTo',
name: 'How to Create a WhatsApp QR Code',
description: 'Create a QR code that opens a WhatsApp chat.',
step: [
{
'@type': 'HowToStep',
position: 1,
name: 'Enter Number',
text: 'Type your WhatsApp phone number with country code (e.g. 1555...).',
},
{
'@type': 'HowToStep',
position: 2,
name: 'Customize',
text: 'Add a pre-written message and choose your brand color.',
},
{
'@type': 'HowToStep',
position: 3,
name: 'Download',
text: 'Save the QR code.',
},
{
'@type': 'HowToStep',
position: 4,
name: 'Test',
text: 'Scan the code to ensure it opens the correct chat.',
},
{
'@type': 'HowToStep',
position: 5,
name: 'Share',
text: 'Add it to your website, business cards, or support materials.',
},
],
totalTime: 'PT45S',
},
generateFaqSchema({
'Do users need to save my number first?': {
question: 'Do users need to save my number first?',
answer: 'No! That is the best part. Scanning the code opens the chat immediately without them needing to save you as a contact first.',
},
'Can I use this for WhatsApp Business?': {
question: 'Can I use this for WhatsApp Business?',
answer: 'Yes, it works perfectly for both personal and business accounts.',
},
'What is the Pre-filled Message?': {
question: 'What is the Pre-filled Message?',
answer: 'It is text that automatically appears in the user\'s typing field when they scan the code (e.g., "Hello, I want to order pizza"). They just have to hit send.',
},
'Is it free?': {
question: 'Is it free?',
answer: 'Yes, this generator is completely free.',
},
'Can I track scans?': {
question: 'Can I track scans?',
answer: 'This is a static QR code, so tracking is not included. Use our Dynamic QR Code generator for analytics.',
},
}),
],
};
export default function WhatsappQRCodePage() {
return (
<>
<script
type="application/ld+json"
dangerouslySetInnerHTML={{ __html: JSON.stringify(jsonLd) }}
/>
<ToolBreadcrumb toolName="WhatsApp QR Code Generator" toolSlug="whatsapp-qr-code" />
<div className="min-h-screen" style={{ backgroundColor: '#EBEBDF' }}>
{/* HERO SECTION */}
<section className="relative pt-20 pb-20 lg:pt-32 lg:pb-32 px-4 sm:px-6 lg:px-8 overflow-hidden bg-[#128C7E]">
<div className="absolute inset-0 opacity-10">
{/* WhatsApp Pattern */}
<svg className="w-full h-full" width="100%" height="100%" xmlns="http://www.w3.org/2000/svg">
<defs>
<pattern id="wa_pattern" width="60" height="60" patternUnits="userSpaceOnUse">
<path d="M30 30L35 35M25 35L30 30" stroke="white" strokeWidth="2" strokeOpacity="0.2" />
</pattern>
</defs>
<rect width="100%" height="100%" fill="url(#wa_pattern)" />
</svg>
</div>
<div className="max-w-7xl mx-auto grid lg:grid-cols-2 gap-12 items-center relative z-10">
<div className="text-center lg:text-left">
<div className="inline-flex items-center gap-2 px-3 py-1 rounded-full bg-white/10 text-white/90 text-sm font-medium mb-6 backdrop-blur-sm border border-white/10 hover:bg-white/20 transition-colors cursor-default">
<span className="flex h-2 w-2 relative">
<span className="animate-ping absolute inline-flex h-full w-full rounded-full bg-green-300 opacity-75"></span>
<span className="relative inline-flex rounded-full h-2 w-2 bg-green-300"></span>
</span>
Free Tool — No Signup Required
</div>
<h1 className="text-4xl md:text-5xl lg:text-6xl font-extrabold text-white tracking-tight leading-tight mb-6">
Start Chats Instantly with <br className="hidden lg:block" />
<span className="text-white drop-shadow-md">WhatsApp QR Codes</span>
</h1>
<p className="text-lg md:text-xl text-green-50 max-w-2xl mx-auto lg:mx-0 mb-8 leading-relaxed">
Let customers message you without saving your number.
<strong className="text-white block sm:inline mt-2 sm:mt-0"> Perfect for support, sales, and bookings.</strong>
</p>
<div className="flex flex-wrap justify-center lg:justify-start gap-4 text-sm font-medium text-white/80">
<div className="flex items-center gap-2 bg-white/10 px-4 py-2.5 rounded-xl border border-white/10 backdrop-blur-sm">
<Send className="w-4 h-4 text-green-200" />
Instant Chat
</div>
<div className="flex items-center gap-2 bg-white/10 px-4 py-2.5 rounded-xl border border-white/10 backdrop-blur-sm">
<MessageCircle className="w-4 h-4 text-white" />
Pre-filled Msg
</div>
<div className="flex items-center gap-2 bg-white/10 px-4 py-2.5 rounded-xl border border-white/10 backdrop-blur-sm">
<Phone className="w-4 h-4 text-white" />
No Save Contact
</div>
</div>
</div>
{/* Visual Abstract */}
<div className="hidden lg:flex relative items-center justify-center min-h-[400px]">
<div className="absolute w-[500px] h-[500px] bg-green-500/30 rounded-full blur-[100px] -top-20 -right-20 animate-pulse" />
<div className="relative w-80 h-96 bg-white/5 backdrop-blur-xl border border-white/20 rounded-3xl shadow-2xl flex flex-col items-center justify-center p-8 transform -rotate-3 hover:rotate-0 transition-all duration-700 group">
<div className="absolute inset-0 bg-gradient-to-br from-white/10 to-transparent rounded-3xl" />
<div className="w-full bg-[#ECE5DD] rounded-xl shadow-lg h-40 mb-6 relative overflow-hidden flex flex-col justify-end p-4">
{/* Chat Bubble Right */}
<div className="bg-[#DCF8C6] p-2 rounded-lg self-end mb-2 max-w-[80%] text-[10px] text-slate-800 shadow-sm">
Hi! I'd like to book an appointment.
<div className="text-[8px] text-slate-600 text-right mt-0.5">10:42 AM <span className="text-blue-500">✓✓</span></div>
</div>
{/* Chat Bubble Left */}
<div className="bg-white p-2 rounded-lg self-start max-w-[80%] text-[10px] text-slate-800 shadow-sm">
Sure! What time works for you?
<div className="text-[8px] text-slate-600 text-right mt-0.5">10:43 AM</div>
</div>
</div>
<div className="w-44 h-44 bg-white rounded-xl p-2 shadow-inner relative overflow-hidden flex items-center justify-center">
<QRCodeSVG value="https://www.qrmaster.net" size={160} fgColor="#128C7E" level="Q" />
</div>
{/* Floating Badge */}
<div className="absolute -bottom-6 -left-6 bg-white py-3 px-5 rounded-xl shadow-xl flex items-center gap-3 transform transition-transform hover:scale-105 duration-300">
<div className="bg-green-100 p-2 rounded-full">
<MessageCircle className="w-5 h-5 text-[#25D366]" />
</div>
<div className="text-left">
<div className="text-[10px] text-slate-400 font-bold uppercase tracking-wider">WhatsApp</div>
<div className="text-sm font-bold text-slate-900">Start Chat</div>
</div>
</div>
</div>
</div>
</div>
</section>
{/* GENERATOR SECTION */}
<section className="py-12 px-4 sm:px-6 lg:px-8 -mt-8">
<WhatsappGenerator />
</section>
{/* HOW IT WORKS */}
<section className="py-16 px-4 sm:px-6 lg:px-8 bg-white">
<div className="max-w-4xl mx-auto">
<h2 className="text-3xl font-bold text-slate-900 text-center mb-12">
How WhatsApp QR Codes Work
</h2>
<div className="grid md:grid-cols-3 lg:grid-cols-5 gap-8">
<article className="text-center">
<div className="w-14 h-14 rounded-2xl bg-[#25D366]/10 flex items-center justify-center mx-auto mb-4">
<Phone className="w-7 h-7 text-[#25D366]" />
</div>
<h3 className="font-bold text-slate-900 mb-2">1. Your Number</h3>
<p className="text-slate-600 text-sm">
Enter your WhatsApp phone number. Ensure it includes the country code.
</p>
</article>
<article className="text-center">
<div className="w-12 h-12 rounded-2xl bg-[#25D366]/10 flex items-center justify-center mx-auto mb-4">
<MessageCircle className="w-6 h-6 text-[#25D366]" />
</div>
<h3 className="font-bold text-slate-900 mb-2">2. Customize</h3>
<p className="text-slate-600 text-xs leading-relaxed">
Add a message and choose your color.
</p>
</article>
<article className="text-center">
<div className="w-12 h-12 rounded-2xl bg-[#25D366]/10 flex items-center justify-center mx-auto mb-4">
<Download className="w-6 h-6 text-[#25D366]" />
</div>
<h3 className="font-bold text-slate-900 mb-2">3. Download</h3>
<p className="text-slate-600 text-xs leading-relaxed">
Save your QR code.
</p>
</article>
<article className="text-center">
<div className="w-12 h-12 rounded-2xl bg-[#25D366]/10 flex items-center justify-center mx-auto mb-4">
<Check className="w-6 h-6 text-[#25D366]" />
</div>
<h3 className="font-bold text-slate-900 mb-2">4. Test</h3>
<p className="text-slate-600 text-xs leading-relaxed">
Scan to ensure it works.
</p>
</article>
<article className="text-center">
<div className="w-12 h-12 rounded-2xl bg-[#25D366]/10 flex items-center justify-center mx-auto mb-4">
<Send className="w-6 h-6 text-[#25D366]" />
</div>
<h3 className="font-bold text-slate-900 mb-2">5. Chat</h3>
<p className="text-slate-600 text-xs leading-relaxed">
Start chatting instantly.
</p>
</article>
</div>
</div>
</section>
{/* RELATED TOOLS */}
<RelatedTools />
{/* FAQ SECTION */}
<section className="py-16 px-4 sm:px-6 lg:px-8" style={{ backgroundColor: '#EBEBDF' }}>
<div className="max-w-3xl mx-auto">
<h2 className="text-3xl font-bold text-slate-900 text-center mb-4">
Frequently Asked Questions
</h2>
<p className="text-slate-600 text-center mb-10">
Common questions about WhatsApp QR codes.
</p>
<div className="space-y-4">
<FaqItem
question="Does it work internationally?"
answer="Yes. Since you include the country code, it works for anyone, anywhere in the world."
/>
<FaqItem
question="Can I use this on my website?"
answer="Yes, you can display the QR code on your contact page so desktop users can easily scan it to chat on their phone."
/>
<FaqItem
question="Is my phone number visible?"
answer="Yes, the phone number is embedded in the link. It is the same visibility as putting your phone number on a business card."
/>
<FaqItem
question="Is it free?"
answer="Yes, this generator is completely free."
/>
<FaqItem
question="Can I track scans?"
answer="This is a static QR code, so tracking is not included. Use our Dynamic QR Code generator for analytics."
/>
</div>
</div>
</section>
</div>
</>
);
}
function FaqItem({ question, answer }: { question: string; answer: string }) {
return (
<details className="group bg-white rounded-xl shadow-sm border border-slate-200 overflow-hidden">
<summary className="flex items-center justify-between p-5 cursor-pointer list-none text-slate-900 font-semibold hover:bg-slate-50 transition-colors">
{question}
<span className="transition group-open:rotate-180 text-slate-400">
<svg fill="none" height="20" stroke="currentColor" strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" viewBox="0 0 24 24" width="20">
<path d="M6 9l6 6 6-6" />
</svg>
</span>
</summary>
<div className="text-slate-600 px-5 pb-5 pt-0 leading-relaxed text-sm">
{answer}
</div>
</details>
);
}

614
src/app/(main)/(marketing)/tools/wifi-qr-code/WiFiGenerator.tsx
View File

@@ -1,307 +1,307 @@
'use client';
import React, { useState, useRef } from 'react';
import Link from 'next/link';
import { QRCodeSVG } from 'qrcode.react';
import {
Wifi,
Download,
Printer,
Check,
Eye,
EyeOff,
Sparkles
} from 'lucide-react';
import { Button } from '@/components/ui/Button';
import { Input } from '@/components/ui/Input';
import { Select } from '@/components/ui/Select';
import { cn } from '@/lib/utils';
// Brand Colors
const BRAND = {
paleGrey: '#F0F9FF', // Sky-50
primary: '#0EA5E9', // Sky-500
primaryDark: '#0284C7', // Sky-600
};
// QR Color Options
const QR_COLORS = [
{ name: 'Sky Blue', value: '#0EA5E9' },
{ name: 'Classic Black', value: '#000000' },
{ name: 'Deep Blue', value: '#1E40AF' },
{ name: 'Cyan', value: '#06B6D4' },
{ name: 'Violet', value: '#7C3AED' },
{ name: 'Emerald', value: '#10B981' },
{ name: 'Rose', value: '#F43F5E' },
];
// Frame Options
const FRAME_OPTIONS = [
{ id: 'none', label: 'No Frame' },
{ id: 'scanme', label: 'Scan Me' },
{ id: 'wifi', label: 'WiFi' },
{ id: 'connect', label: 'Connect' },
{ id: 'free', label: 'Free WiFi' },
];
export default function WiFiGenerator() {
const [ssid, setSsid] = useState('');
const [password, setPassword] = useState('');
const [encryption, setEncryption] = useState('WPA');
const [hidden, setHidden] = useState(false);
const [showPassword, setShowPassword] = useState(false);
// Customization
const [qrColor, setQrColor] = useState(BRAND.primary);
const [frameType, setFrameType] = useState('none');
const qrRef = useRef<HTMLDivElement>(null);
const wifiString = `WIFI:T:${encryption};S:${ssid};P:${password};H:${hidden};;`;
const handleDownload = async (format: 'png' | 'svg') => {
if (!qrRef.current) return;
try {
if (format === 'png') {
const { toPng } = await import('html-to-image');
const dataUrl = await toPng(qrRef.current, { cacheBust: true, pixelRatio: 3 });
const link = document.createElement('a');
link.download = `wifi-qr-${ssid || 'code'}.png`;
link.href = dataUrl;
link.click();
} else {
const svgData = qrRef.current.querySelector('svg')?.outerHTML;
if (svgData) {
const blob = new Blob([svgData], { type: 'image/svg+xml;charset=utf-8' });
const url = URL.createObjectURL(blob);
const link = document.createElement('a');
link.href = url;
link.download = `wifi-qr-${ssid || 'code'}.svg`;
link.click();
}
}
} catch (err) {
console.error('Download failed', err);
}
};
const getFrameLabel = () => {
const frame = FRAME_OPTIONS.find(f => f.id === frameType);
return frame?.id !== 'none' ? frame?.label : null;
};
return (
<div className="w-full max-w-5xl mx-auto px-4 md:px-6">
{/* Main Generator Card */}
<div className="bg-white rounded-3xl shadow-2xl shadow-slate-900/10 overflow-hidden border border-slate-100">
<div className="grid lg:grid-cols-2">
{/* LEFT: Input Section */}
<div className="p-6 md:p-8 lg:p-10 space-y-8 border-r border-slate-100">
{/* Network Details */}
<div className="space-y-6">
<h2 className="text-lg font-bold text-slate-900 flex items-center gap-2">
<Wifi className="w-5 h-5 text-[#0EA5E9]" />
Network Details
</h2>
<div className="space-y-4">
<div>
<label className="block text-sm font-medium text-slate-700 mb-2">Network Name (SSID)</label>
<Input
placeholder="e.g. MyHomeWiFi"
value={ssid}
onChange={(e) => setSsid(e.target.value)}
className="h-12 text-base rounded-xl border-slate-200 focus:border-[#0EA5E9] focus:ring-[#0EA5E9]"
/>
</div>
<div>
<label className="block text-sm font-medium text-slate-700 mb-2">Password</label>
<div className="relative">
<Input
type={showPassword ? "text" : "password"}
placeholder="Your WiFi Password"
value={password}
onChange={(e) => setPassword(e.target.value)}
className="h-12 text-base rounded-xl border-slate-200 focus:border-[#0EA5E9] focus:ring-[#0EA5E9] pr-12"
/>
<button
type="button"
onClick={() => setShowPassword(!showPassword)}
className="absolute right-3 top-1/2 -translate-y-1/2 p-1.5 text-slate-400 hover:text-slate-600 transition-colors"
aria-label={showPassword ? "Hide password" : "Show password"}
>
{showPassword ? <EyeOff className="w-5 h-5" /> : <Eye className="w-5 h-5" />}
</button>
</div>
</div>
<div className="grid grid-cols-2 gap-4">
<div>
<label className="block text-sm font-medium text-slate-700 mb-2">Security</label>
<Select
value={encryption}
onChange={(e) => setEncryption(e.target.value)}
className="h-12 rounded-xl border-slate-200"
aria-label="Security"
options={[
{ value: 'WPA', label: 'WPA / WPA2' },
{ value: 'WEP', label: 'WEP' },
{ value: 'nopass', label: 'No Password' },
]}
/>
</div>
<div className="flex items-end pb-1">
<label className="flex items-center gap-3 cursor-pointer group">
<div className={cn(
"w-5 h-5 rounded border-2 flex items-center justify-center transition-all",
hidden ? "bg-[#1A1265] border-[#1A1265]" : "border-slate-300 group-hover:border-slate-400"
)}>
{hidden && <Check className="w-3.5 h-3.5 text-white" strokeWidth={3} />}
</div>
<input type="checkbox" checked={hidden} onChange={(e) => setHidden(e.target.checked)} className="sr-only" />
<span className="text-sm font-medium text-slate-700">Hidden Network</span>
</label>
</div>
</div>
</div>
</div>
{/* Divider */}
<div className="border-t border-slate-100"></div>
{/* Design Options */}
<div className="space-y-6">
<h2 className="text-lg font-bold text-slate-900 flex items-center gap-2">
<Sparkles className="w-5 h-5 text-[#0EA5E9]" />
Design Options
</h2>
{/* Color Picker */}
<div>
<label className="block text-sm font-medium text-slate-700 mb-3">QR Code Color</label>
<div className="flex flex-wrap gap-2">
{QR_COLORS.map((c) => (
<button
key={c.name}
onClick={() => setQrColor(c.value)}
className={cn(
"w-9 h-9 rounded-full border-2 flex items-center justify-center transition-all hover:scale-110",
qrColor === c.value ? "border-slate-900 ring-2 ring-offset-2 ring-slate-200" : "border-white shadow-md"
)}
style={{ backgroundColor: c.value }}
aria-label={`Select ${c.name}`}
title={c.name}
>
{qrColor === c.value && <Check className="w-4 h-4 text-white" strokeWidth={3} />}
</button>
))}
</div>
</div>
{/* Frame Selector */}
<div>
<label className="block text-sm font-medium text-slate-700 mb-3">Frame Label</label>
<div className="grid grid-cols-2 sm:grid-cols-4 gap-2">
{FRAME_OPTIONS.map((frame) => (
<button
key={frame.id}
onClick={() => setFrameType(frame.id)}
className={cn(
"py-2.5 px-3 rounded-lg text-sm font-medium transition-all border",
frameType === frame.id
? "bg-[#0EA5E9] text-white border-[#0EA5E9]"
: "bg-slate-50 text-slate-600 border-slate-200 hover:border-slate-300"
)}
>
{frame.label}
</button>
))}
</div>
</div>
</div>
</div>
{/* RIGHT: Preview Section */}
<div className="p-6 md:p-8 lg:p-10 flex flex-col items-center justify-center" style={{ backgroundColor: BRAND.paleGrey }}>
{/* QR Card with Frame */}
<div
ref={qrRef}
className="bg-white rounded-3xl shadow-xl p-6 sm:p-8 flex flex-col items-center w-full max-w-[320px]"
>
{/* Frame Label - CTA Button Style */}
{getFrameLabel() && (
<div
className="mb-5 px-8 py-2.5 rounded-full text-white font-bold text-sm tracking-widest uppercase shadow-md"
style={{ backgroundColor: qrColor }}
>
{getFrameLabel()}
</div>
)}
{/* QR Code */}
<div className="bg-white">
<QRCodeSVG
value={wifiString}
size={240}
level="M"
includeMargin={false}
fgColor={qrColor}
/>
</div>
{/* Network Info */}
<div className="mt-6 text-center">
<h3 className="font-bold text-slate-900 text-xl truncate max-w-[260px] mx-auto">
{ssid || 'Network Name'}
</h3>
</div>
</div>
{/* Download Buttons */}
<div className="flex items-center gap-3 mt-8">
<Button
onClick={() => handleDownload('png')}
className="bg-[#0EA5E9] hover:bg-[#0284C7] text-white shadow-lg"
>
<Download className="w-4 h-4 mr-2" />
Download PNG
</Button>
<Button
onClick={() => handleDownload('svg')}
variant="outline"
className="border-slate-300 hover:bg-white"
>
<Download className="w-4 h-4 mr-2" />
SVG
</Button>
</div>
<p className="text-xs text-slate-600 mt-4 text-center">
Your credentials stay on your device. Nothing is sent to servers.
</p>
</div>
</div>
</div>
{/* Upsell Banner */}
<div className="mt-8 bg-gradient-to-r from-[#0EA5E9] to-[#0284C7] rounded-2xl p-6 flex flex-col sm:flex-row items-center justify-between gap-4">
<div className="text-white text-center sm:text-left">
<h3 className="font-bold text-lg">Hospitality or Business WiFi?</h3>
<p className="text-white/80 text-sm mt-1">Get scan analytics and collect customer reviews with our Pro plan.</p>
</div>
<Link href="/signup">
<Button className="bg-white text-[#0EA5E9] hover:bg-slate-100 shrink-0 shadow-lg">
Get Business Tools
</Button>
</Link>
</div>
</div>
);
}
'use client';
import React, { useState, useRef } from 'react';
import Link from 'next/link';
import { QRCodeSVG } from 'qrcode.react';
import {
Wifi,
Download,
Printer,
Check,
Eye,
EyeOff,
Sparkles
} from 'lucide-react';
import { Button } from '@/components/ui/Button';
import { Input } from '@/components/ui/Input';
import { Select } from '@/components/ui/Select';
import { cn } from '@/lib/utils';
// Brand Colors
const BRAND = {
paleGrey: '#F0F9FF', // Sky-50
primary: '#0EA5E9', // Sky-500
primaryDark: '#0284C7', // Sky-600
};
// QR Color Options
const QR_COLORS = [
{ name: 'Sky Blue', value: '#0EA5E9' },
{ name: 'Classic Black', value: '#000000' },
{ name: 'Deep Blue', value: '#1E40AF' },
{ name: 'Cyan', value: '#06B6D4' },
{ name: 'Violet', value: '#7C3AED' },
{ name: 'Emerald', value: '#10B981' },
{ name: 'Rose', value: '#F43F5E' },
];
// Frame Options
const FRAME_OPTIONS = [
{ id: 'none', label: 'No Frame' },
{ id: 'scanme', label: 'Scan Me' },
{ id: 'wifi', label: 'WiFi' },
{ id: 'connect', label: 'Connect' },
{ id: 'free', label: 'Free WiFi' },
];
export default function WiFiGenerator() {
const [ssid, setSsid] = useState('');
const [password, setPassword] = useState('');
const [encryption, setEncryption] = useState('WPA');
const [hidden, setHidden] = useState(false);
const [showPassword, setShowPassword] = useState(false);
// Customization
const [qrColor, setQrColor] = useState(BRAND.primary);
const [frameType, setFrameType] = useState('none');
const qrRef = useRef<HTMLDivElement>(null);
const wifiString = `WIFI:T:${encryption};S:${ssid};P:${password};H:${hidden};;`;
const handleDownload = async (format: 'png' | 'svg') => {
if (!qrRef.current) return;
try {
if (format === 'png') {
const { toPng } = await import('html-to-image');
const dataUrl = await toPng(qrRef.current, { cacheBust: true, pixelRatio: 3 });
const link = document.createElement('a');
link.download = `wifi-qr-${ssid || 'code'}.png`;
link.href = dataUrl;
link.click();
} else {
const svgData = qrRef.current.querySelector('svg')?.outerHTML;
if (svgData) {
const blob = new Blob([svgData], { type: 'image/svg+xml;charset=utf-8' });
const url = URL.createObjectURL(blob);
const link = document.createElement('a');
link.href = url;
link.download = `wifi-qr-${ssid || 'code'}.svg`;
link.click();
}
}
} catch (err) {
console.error('Download failed', err);
}
};
const getFrameLabel = () => {
const frame = FRAME_OPTIONS.find(f => f.id === frameType);
return frame?.id !== 'none' ? frame?.label : null;
};
return (
<div className="w-full max-w-5xl mx-auto px-4 md:px-6">
{/* Main Generator Card */}
<div className="bg-white rounded-3xl shadow-2xl shadow-slate-900/10 overflow-hidden border border-slate-100">
<div className="grid lg:grid-cols-2">
{/* LEFT: Input Section */}
<div className="p-6 md:p-8 lg:p-10 space-y-8 border-r border-slate-100">
{/* Network Details */}
<div className="space-y-6">
<h2 className="text-lg font-bold text-slate-900 flex items-center gap-2">
<Wifi className="w-5 h-5 text-[#0EA5E9]" />
Network Details
</h2>
<div className="space-y-4">
<div>
<label className="block text-sm font-medium text-slate-700 mb-2">Network Name (SSID)</label>
<Input
placeholder="e.g. MyHomeWiFi"
value={ssid}
onChange={(e) => setSsid(e.target.value)}
className="h-12 text-base rounded-xl border-slate-200 focus:border-[#0EA5E9] focus:ring-[#0EA5E9]"
/>
</div>
<div>
<label className="block text-sm font-medium text-slate-700 mb-2">Password</label>
<div className="relative">
<Input
type={showPassword ? "text" : "password"}
placeholder="Your WiFi Password"
value={password}
onChange={(e) => setPassword(e.target.value)}
className="h-12 text-base rounded-xl border-slate-200 focus:border-[#0EA5E9] focus:ring-[#0EA5E9] pr-12"
/>
<button
type="button"
onClick={() => setShowPassword(!showPassword)}
className="absolute right-3 top-1/2 -translate-y-1/2 p-1.5 text-slate-400 hover:text-slate-600 transition-colors"
aria-label={showPassword ? "Hide password" : "Show password"}
>
{showPassword ? <EyeOff className="w-5 h-5" /> : <Eye className="w-5 h-5" />}
</button>
</div>
</div>
<div className="grid grid-cols-2 gap-4">
<div>
<label className="block text-sm font-medium text-slate-700 mb-2">Security</label>
<Select
value={encryption}
onChange={(e) => setEncryption(e.target.value)}
className="h-12 rounded-xl border-slate-200"
aria-label="Security"
options={[
{ value: 'WPA', label: 'WPA / WPA2' },
{ value: 'WEP', label: 'WEP' },
{ value: 'nopass', label: 'No Password' },
]}
/>
</div>
<div className="flex items-end pb-1">
<label className="flex items-center gap-3 cursor-pointer group">
<div className={cn(
"w-5 h-5 rounded border-2 flex items-center justify-center transition-all",
hidden ? "bg-[#1A1265] border-[#1A1265]" : "border-slate-300 group-hover:border-slate-400"
)}>
{hidden && <Check className="w-3.5 h-3.5 text-white" strokeWidth={3} />}
</div>
<input type="checkbox" checked={hidden} onChange={(e) => setHidden(e.target.checked)} className="sr-only" />
<span className="text-sm font-medium text-slate-700">Hidden Network</span>
</label>
</div>
</div>
</div>
</div>
{/* Divider */}
<div className="border-t border-slate-100"></div>
{/* Design Options */}
<div className="space-y-6">
<h2 className="text-lg font-bold text-slate-900 flex items-center gap-2">
<Sparkles className="w-5 h-5 text-[#0EA5E9]" />
Design Options
</h2>
{/* Color Picker */}
<div>
<label className="block text-sm font-medium text-slate-700 mb-3">QR Code Color</label>
<div className="flex flex-wrap gap-2">
{QR_COLORS.map((c) => (
<button
key={c.name}
onClick={() => setQrColor(c.value)}
className={cn(
"w-9 h-9 rounded-full border-2 flex items-center justify-center transition-all hover:scale-110",
qrColor === c.value ? "border-slate-900 ring-2 ring-offset-2 ring-slate-200" : "border-white shadow-md"
)}
style={{ backgroundColor: c.value }}
aria-label={`Select ${c.name}`}
title={c.name}
>
{qrColor === c.value && <Check className="w-4 h-4 text-white" strokeWidth={3} />}
</button>
))}
</div>
</div>
{/* Frame Selector */}
<div>
<label className="block text-sm font-medium text-slate-700 mb-3">Frame Label</label>
<div className="grid grid-cols-2 sm:grid-cols-4 gap-2">
{FRAME_OPTIONS.map((frame) => (
<button
key={frame.id}
onClick={() => setFrameType(frame.id)}
className={cn(
"py-2.5 px-3 rounded-lg text-sm font-medium transition-all border",
frameType === frame.id
? "bg-[#0EA5E9] text-white border-[#0EA5E9]"
: "bg-slate-50 text-slate-600 border-slate-200 hover:border-slate-300"
)}
>
{frame.label}
</button>
))}
</div>
</div>
</div>
</div>
{/* RIGHT: Preview Section */}
<div className="p-6 md:p-8 lg:p-10 flex flex-col items-center justify-center" style={{ backgroundColor: BRAND.paleGrey }}>
{/* QR Card with Frame */}
<div
ref={qrRef}
className="bg-white rounded-3xl shadow-xl p-6 sm:p-8 flex flex-col items-center w-full max-w-[320px]"
>
{/* Frame Label - CTA Button Style */}
{getFrameLabel() && (
<div
className="mb-5 px-8 py-2.5 rounded-full text-white font-bold text-sm tracking-widest uppercase shadow-md"
style={{ backgroundColor: qrColor }}
>
{getFrameLabel()}
</div>
)}
{/* QR Code */}
<div className="bg-white">
<QRCodeSVG
value={wifiString}
size={240}
level="M"
includeMargin={false}
fgColor={qrColor}
/>
</div>
{/* Network Info */}
<div className="mt-6 text-center">
<h3 className="font-bold text-slate-900 text-xl truncate max-w-[260px] mx-auto">
{ssid || 'Network Name'}
</h3>
</div>
</div>
{/* Download Buttons */}
<div className="flex items-center gap-3 mt-8">
<Button
onClick={() => handleDownload('png')}
className="bg-[#0EA5E9] hover:bg-[#0284C7] text-white shadow-lg"
>
<Download className="w-4 h-4 mr-2" />
Download PNG
</Button>
<Button
onClick={() => handleDownload('svg')}
variant="outline"
className="border-slate-300 hover:bg-white"
>
<Download className="w-4 h-4 mr-2" />
SVG
</Button>
</div>
<p className="text-xs text-slate-600 mt-4 text-center">
Your credentials stay on your device. Nothing is sent to servers.
</p>
</div>
</div>
</div>
{/* Upsell Banner */}
<div className="mt-8 bg-gradient-to-r from-[#0EA5E9] to-[#0284C7] rounded-2xl p-6 flex flex-col sm:flex-row items-center justify-between gap-4">
<div className="text-white text-center sm:text-left">
<h3 className="font-bold text-lg">Hospitality or Business WiFi?</h3>
<p className="text-white/80 text-sm mt-1">Get scan analytics and collect customer reviews with our Pro plan.</p>
</div>
<Link href="/signup">
<Button className="bg-white text-[#0EA5E9] hover:bg-slate-100 shrink-0 shadow-lg">
Get Business Tools
</Button>
</Link>
</div>
</div>
);
}

682
src/app/(main)/(marketing)/tools/wifi-qr-code/page.tsx
View File

@@ -1,341 +1,341 @@
import React from 'react';
import type { Metadata } from 'next';
import WiFiGenerator from './WiFiGenerator';
import { Wifi, Shield, Zap, Smartphone, Lock, QrCode, Download, Share2 } from 'lucide-react';
import { QRCodeSVG } from 'qrcode.react';
import { ToolBreadcrumb } from '@/components/seo/BreadcrumbSchema';
import { RelatedTools } from '@/components/marketing/RelatedTools';
import { generateSoftwareAppSchema, generateFaqSchema } from '@/lib/schema-utils';
// SEO Optimized Metadata
export const metadata: Metadata = {
title: {
absolute: 'Free WiFi QR Code Generator | WLAN QR Code | QR Master',
},
description: 'Create a WiFi QR code in seconds. Erstelle kostenlos deinen WLAN QR Code ohne Passwort-Eingabe. Guests scan to connect instantly. 100% Secure & Free.',
keywords: ['wifi qr code', 'qr code generator', 'wifi qr code generator', 'share wifi', 'wifi password qr', 'guest wifi', 'wlan qr code', 'wlan qr code erstellen', 'wifi passwort qr code', 'wlan zugang teilen', 'wifi qr code kostenlos'],
alternates: {
canonical: 'https://www.qrmaster.net/tools/wifi-qr-code',
},
openGraph: {
title: 'Free WiFi QR Code Generator | QR Master',
description: 'Share your WiFi without sharing your password. Guests scan the QR code to connect instantly.',
type: 'website',
url: 'https://www.qrmaster.net/tools/wifi-qr-code',
images: [{ url: '/og-wifi-generator.png', width: 1200, height: 630 }],
},
twitter: {
card: 'summary_large_image',
title: 'Free WiFi QR Code Generator',
description: 'Share WiFi instantly with a QR code. No typing passwords.',
},
robots: {
index: true,
follow: true,
},
};
// JSON-LD Structured Data
const jsonLd = {
'@context': 'https://schema.org',
'@graph': [
// SoftwareApplication Schema
generateSoftwareAppSchema(
'WiFi QR Code Generator',
'Generate QR codes for WiFi networks. Guests scan to connect without typing passwords.',
'/og-wifi-generator.png'
),
// HowTo Schema for Featured Snippets
{
'@type': 'HowTo',
name: 'How to Create a WiFi QR Code',
description: 'Create a QR code that connects devices to your WiFi network automatically.',
step: [
{
'@type': 'HowToStep',
position: 1,
name: 'Enter Network Name',
text: 'Type your WiFi network name (SSID) in the Network Name field.',
},
{
'@type': 'HowToStep',
position: 2,
name: 'Enter Password',
text: 'Enter your WiFi password. This is processed locally and never sent to any server.',
},
{
'@type': 'HowToStep',
position: 3,
name: 'Select Security Type',
text: 'Choose WPA/WPA2 (most common), WEP, or No Password for open networks.',
},
{
'@type': 'HowToStep',
position: 4,
name: 'Download QR Code',
text: 'Click Download PNG or SVG to save your QR code. Print it or share digitally.',
},
{
'@type': 'HowToStep',
position: 5,
name: 'Connect',
text: 'Print the code. Guests can scan it to join your network instantly.',
},
],
totalTime: 'PT1M',
},
// FAQPage Schema
generateFaqSchema({
'Is it safe to enter my WiFi password?': {
question: 'Is it safe to enter my WiFi password?',
answer: 'Yes, completely safe. This tool processes everything in your browser (client-side). Your password never leaves your device and is not sent to any server.',
},
'Do WiFi QR codes work on iPhone and Android?': {
question: 'Do WiFi QR codes work on iPhone and Android?',
answer: 'Yes. Both iOS (11+) and Android devices can scan WiFi QR codes using their built-in camera app. No additional apps required.',
},
'What happens if I change my WiFi password?': {
question: 'What happens if I change my WiFi password?',
answer: 'If you change your WiFi password, the old QR code will stop working. You\'ll need to generate a new QR code with the updated credentials.For frequently changing passwords, consider using dynamic QR codes.',
},
'Can I customize the QR code design?': {
question: 'Can I customize the QR code design?',
answer: 'Yes. You can change the QR code color and add frame labels like "Scan Me" or "WiFi" to make it more recognizable and user-friendly.',
},
'Does it work for hidden networks?': {
question: 'Does it work for hidden networks?',
answer: 'Yes, just check the "Hidden Network" box if your SSID is hidden. The QR code contains the standard WiFi string configuration.',
},
}),
],
};
export default function WiFiQRCodePage() {
return (
<>
{/* JSON-LD Script */}
<script
type="application/ld+json"
dangerouslySetInnerHTML={{ __html: JSON.stringify(jsonLd) }}
/>
<ToolBreadcrumb toolName="WiFi QR Code Generator" toolSlug="wifi-qr-code" />
<div className="min-h-screen" style={{ backgroundColor: '#EBEBDF' }}>
{/* HERO SECTION */}
<section className="relative pt-20 pb-20 lg:pt-32 lg:pb-32 px-4 sm:px-6 lg:px-8 overflow-hidden" style={{ backgroundColor: '#1A1265' }}>
{/* Background Pattern */}
<div className="absolute inset-0 opacity-10">
<svg className="w-full h-full" viewBox="0 0 100 100" preserveAspectRatio="none">
<path d="M0 100 C 20 0 50 0 100 100 Z" fill="url(#grad1)" />
<defs>
<linearGradient id="grad1" x1="0%" y1="0%" x2="100%" y2="0%">
<stop offset="0%" style={{ stopColor: 'white', stopOpacity: 1 }} />
<stop offset="100%" style={{ stopColor: 'white', stopOpacity: 0 }} />
</linearGradient>
</defs>
</svg>
</div>
<div className="max-w-7xl mx-auto grid lg:grid-cols-2 gap-12 items-center relative z-10">
{/* Left: Text Content */}
<div className="text-center lg:text-left">
{/* Badge */}
<div className="inline-flex items-center gap-2 px-3 py-1 rounded-full bg-white/10 text-white/90 text-sm font-medium mb-6 backdrop-blur-sm border border-white/10 hover:bg-white/20 transition-colors cursor-default">
<span className="flex h-2 w-2 relative">
<span className="animate-ping absolute inline-flex h-full w-full rounded-full bg-emerald-400 opacity-75"></span>
<span className="relative inline-flex rounded-full h-2 w-2 bg-emerald-400"></span>
</span>
Free Tool — No Signup Required
</div>
<h1 className="text-4xl md:text-5xl lg:text-6xl font-extrabold text-white tracking-tight leading-tight mb-6">
The Safest Way to <br className="hidden lg:block" />
<span className="text-transparent bg-clip-text bg-gradient-to-r from-emerald-400 to-cyan-400">Share Your WiFi</span>
</h1>
<p className="text-lg md:text-xl text-indigo-100 max-w-2xl mx-auto lg:mx-0 mb-8 leading-relaxed">
Generate a secure QR code in seconds. No more spelling out complicated passwords.
<strong className="text-white block sm:inline mt-2 sm:mt-0"> 100% Client-Side & Private.</strong>
</p>
<div className="flex flex-wrap justify-center lg:justify-start gap-4 text-sm font-medium text-white/80">
<div className="flex items-center gap-2 bg-white/5 px-4 py-2.5 rounded-xl border border-white/5 backdrop-blur-sm">
<Lock className="w-4 h-4 text-emerald-400" />
No Server Uploads
</div>
<div className="flex items-center gap-2 bg-white/5 px-4 py-2.5 rounded-xl border border-white/5 backdrop-blur-sm">
<Zap className="w-4 h-4 text-amber-400" />
Instant Connect
</div>
<div className="flex items-center gap-2 bg-white/5 px-4 py-2.5 rounded-xl border border-white/5 backdrop-blur-sm">
<Smartphone className="w-4 h-4 text-purple-400" />
iOS & Android
</div>
</div>
</div>
{/* Right: Visual Abstract Composition */}
<div className="hidden lg:flex relative items-center justify-center min-h-[400px]">
{/* Decorative Glow */}
<div className="absolute w-[500px] h-[500px] bg-indigo-500/30 rounded-full blur-[100px] -top-20 -right-20 animate-pulse" />
{/* Floating Glass Card */}
<div className="relative w-80 h-96 bg-white/5 backdrop-blur-xl border border-white/20 rounded-3xl shadow-2xl flex flex-col items-center justify-center p-8 transform rotate-6 hover:rotate-3 transition-all duration-700 group">
<div className="absolute inset-0 bg-gradient-to-br from-white/10 to-transparent rounded-3xl" />
{/* Mock QR */}
<div className="w-48 h-48 bg-white rounded-xl p-2 shadow-inner mb-6 relative overflow-hidden flex items-center justify-center">
<QRCodeSVG value="https://www.qrmaster.net" size={170} fgColor="#0f172a" level="Q" />
{/* Scan Line */}
<div className="absolute top-1/2 left-0 w-full h-1 bg-emerald-500 shadow-[0_0_20px_rgba(16,185,129,1)] animate-pulse" />
</div>
<div className="w-full space-y-3">
<div className="h-2 w-32 bg-white/20 rounded-full mx-auto" />
<div className="h-2 w-20 bg-white/10 rounded-full mx-auto" />
</div>
{/* Floating Badge */}
<div className="absolute -bottom-6 -left-6 bg-white py-3 px-5 rounded-xl shadow-xl flex items-center gap-3 transform transition-transform hover:scale-105 duration-300">
<div className="bg-emerald-100 p-2 rounded-full">
<Wifi className="w-5 h-5 text-emerald-600" />
</div>
<div className="text-left">
<div className="text-[10px] text-slate-400 font-bold uppercase tracking-wider">Status</div>
<div className="text-sm font-bold text-slate-900">Connected</div>
</div>
</div>
</div>
</div>
</div>
</section>
{/* GENERATOR SECTION */}
<section className="py-12 px-4 sm:px-6 lg:px-8 -mt-8">
<WiFiGenerator />
</section>
{/* HOW IT WORKS - AEO/GEO Content */}
<section className="py-16 px-4 sm:px-6 lg:px-8 bg-white">
<div className="max-w-4xl mx-auto">
<h2 className="text-3xl font-bold text-slate-900 text-center mb-12">
How WiFi QR Codes Work
</h2>
<div className="grid md:grid-cols-3 lg:grid-cols-5 gap-8">
<article className="text-center">
<div className="w-12 h-12 rounded-2xl bg-[#1A1265]/10 flex items-center justify-center mx-auto mb-4">
<Wifi className="w-6 h-6 text-[#1A1265]" />
</div>
<h3 className="font-bold text-slate-900 mb-2">1. Network</h3>
<p className="text-slate-600 text-xs leading-relaxed">
Enter your WiFi SSID and password.
</p>
</article>
<article className="text-center">
<div className="w-12 h-12 rounded-2xl bg-[#1A1265]/10 flex items-center justify-center mx-auto mb-4">
<Shield className="w-6 h-6 text-[#1A1265]" />
</div>
<h3 className="font-bold text-slate-900 mb-2">2. Security</h3>
<p className="text-slate-600 text-xs leading-relaxed">
Select WPA/WPA2 encryption.
</p>
</article>
<article className="text-center">
<div className="w-12 h-12 rounded-2xl bg-[#1A1265]/10 flex items-center justify-center mx-auto mb-4">
<Zap className="w-6 h-6 text-[#1A1265]" />
</div>
<h3 className="font-bold text-slate-900 mb-2">3. Style</h3>
<p className="text-slate-600 text-xs leading-relaxed">
Customize colors and add a frame.
</p>
</article>
<article className="text-center">
<div className="w-12 h-12 rounded-2xl bg-[#1A1265]/10 flex items-center justify-center mx-auto mb-4">
<Download className="w-6 h-6 text-[#1A1265]" />
</div>
<h3 className="font-bold text-slate-900 mb-2">4. Download</h3>
<p className="text-slate-600 text-xs leading-relaxed">
Get your high-quality QR image.
</p>
</article>
<article className="text-center">
<div className="w-12 h-12 rounded-2xl bg-[#1A1265]/10 flex items-center justify-center mx-auto mb-4">
<Smartphone className="w-6 h-6 text-[#1A1265]" />
</div>
<h3 className="font-bold text-slate-900 mb-2">5. Connect</h3>
<p className="text-slate-600 text-xs leading-relaxed">
Print it out. Guests scan to join!
</p>
</article>
</div>
</div>
</section>
{/* RELATED TOOLS */}
<RelatedTools />
{/* FAQ SECTION - Featured Snippet Optimized */}
<section className="py-16 px-4 sm:px-6 lg:px-8" style={{ backgroundColor: '#EBEBDF' }}>
<div className="max-w-3xl mx-auto">
<h2 className="text-3xl font-bold text-slate-900 text-center mb-4">
Frequently Asked Questions
</h2>
<p className="text-slate-600 text-center mb-10">
Everything you need to know about WiFi QR codes.
</p>
<div className="space-y-4">
<FaqItem
question="Is it safe to enter my WiFi password here?"
answer="Yes, completely safe. This tool uses client-side processing, meaning your WiFi password never leaves your device. It's processed locally in your browser to generate the QR code—no data is sent to any server."
/>
<FaqItem
question="Do WiFi QR codes work on iPhone and Android?"
answer="Yes. iOS 11 and later, as well as all modern Android devices, can scan WiFi QR codes using the built-in camera app. Simply point the camera at the QR code and tap the notification to connect."
/>
<FaqItem
question="What happens if I change my WiFi password?"
answer="If you change your WiFi password, the old QR code will stop working. You'll need to generate a new QR code with the updated credentials. For frequently changing passwords, consider using dynamic QR codes."
/>
<FaqItem
question="Can I customize the QR code design?"
answer="Yes. You can change the foreground color of the QR code and add frame labels such as 'Scan Me', 'WiFi', or 'Connect' to make your QR code more recognizable and user-friendly."
/>
<FaqItem
question="Does it work for hidden networks?"
answer="Yes, just check the 'Hidden Network' box if your SSID is hidden. The QR code contains the standard WiFi string configuration."
/>
</div>
</div>
</section>
</div>
</>
);
}
// FAQ Item Component
function FaqItem({ question, answer }: { question: string; answer: string }) {
return (
<details className="group bg-white rounded-xl shadow-sm border border-slate-200 overflow-hidden">
<summary className="flex items-center justify-between p-5 cursor-pointer list-none text-slate-900 font-semibold hover:bg-slate-50 transition-colors">
{question}
<span className="transition group-open:rotate-180 text-slate-400">
<svg fill="none" height="20" stroke="currentColor" strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" viewBox="0 0 24 24" width="20">
<path d="M6 9l6 6 6-6" />
</svg>
</span>
</summary>
<div className="text-slate-600 px-5 pb-5 pt-0 leading-relaxed text-sm">
{answer}
</div>
</details>
);
}
import React from 'react';
import type { Metadata } from 'next';
import WiFiGenerator from './WiFiGenerator';
import { Wifi, Shield, Zap, Smartphone, Lock, QrCode, Download, Share2 } from 'lucide-react';
import { QRCodeSVG } from 'qrcode.react';
import { ToolBreadcrumb } from '@/components/seo/BreadcrumbSchema';
import { RelatedTools } from '@/components/marketing/RelatedTools';
import { generateSoftwareAppSchema, generateFaqSchema } from '@/lib/schema-utils';
// SEO Optimized Metadata
export const metadata: Metadata = {
title: {
absolute: 'Free WiFi QR Code Generator | WLAN QR Code | QR Master',
},
description: 'Create a WiFi QR code in seconds. Erstelle kostenlos deinen WLAN QR Code ohne Passwort-Eingabe. Guests scan to connect instantly. 100% Secure & Free.',
keywords: ['wifi qr code', 'qr code generator', 'wifi qr code generator', 'share wifi', 'wifi password qr', 'guest wifi', 'wlan qr code', 'wlan qr code erstellen', 'wifi passwort qr code', 'wlan zugang teilen', 'wifi qr code kostenlos'],
alternates: {
canonical: 'https://www.qrmaster.net/tools/wifi-qr-code',
},
openGraph: {
title: 'Free WiFi QR Code Generator | QR Master',
description: 'Share your WiFi without sharing your password. Guests scan the QR code to connect instantly.',
type: 'website',
url: 'https://www.qrmaster.net/tools/wifi-qr-code',
images: [{ url: '/og-wifi-generator.png', width: 1200, height: 630 }],
},
twitter: {
card: 'summary_large_image',
title: 'Free WiFi QR Code Generator',
description: 'Share WiFi instantly with a QR code. No typing passwords.',
},
robots: {
index: true,
follow: true,
},
};
// JSON-LD Structured Data
const jsonLd = {
'@context': 'https://schema.org',
'@graph': [
// SoftwareApplication Schema
generateSoftwareAppSchema(
'WiFi QR Code Generator',
'Generate QR codes for WiFi networks. Guests scan to connect without typing passwords.',
'/og-wifi-generator.png'
),
// HowTo Schema for Featured Snippets
{
'@type': 'HowTo',
name: 'How to Create a WiFi QR Code',
description: 'Create a QR code that connects devices to your WiFi network automatically.',
step: [
{
'@type': 'HowToStep',
position: 1,
name: 'Enter Network Name',
text: 'Type your WiFi network name (SSID) in the Network Name field.',
},
{
'@type': 'HowToStep',
position: 2,
name: 'Enter Password',
text: 'Enter your WiFi password. This is processed locally and never sent to any server.',
},
{
'@type': 'HowToStep',
position: 3,
name: 'Select Security Type',
text: 'Choose WPA/WPA2 (most common), WEP, or No Password for open networks.',
},
{
'@type': 'HowToStep',
position: 4,
name: 'Download QR Code',
text: 'Click Download PNG or SVG to save your QR code. Print it or share digitally.',
},
{
'@type': 'HowToStep',
position: 5,
name: 'Connect',
text: 'Print the code. Guests can scan it to join your network instantly.',
},
],
totalTime: 'PT1M',
},
// FAQPage Schema
generateFaqSchema({
'Is it safe to enter my WiFi password?': {
question: 'Is it safe to enter my WiFi password?',
answer: 'Yes, completely safe. This tool processes everything in your browser (client-side). Your password never leaves your device and is not sent to any server.',
},
'Do WiFi QR codes work on iPhone and Android?': {
question: 'Do WiFi QR codes work on iPhone and Android?',
answer: 'Yes. Both iOS (11+) and Android devices can scan WiFi QR codes using their built-in camera app. No additional apps required.',
},
'What happens if I change my WiFi password?': {
question: 'What happens if I change my WiFi password?',
answer: 'If you change your WiFi password, the old QR code will stop working. You\'ll need to generate a new QR code with the updated credentials.For frequently changing passwords, consider using dynamic QR codes.',
},
'Can I customize the QR code design?': {
question: 'Can I customize the QR code design?',
answer: 'Yes. You can change the QR code color and add frame labels like "Scan Me" or "WiFi" to make it more recognizable and user-friendly.',
},
'Does it work for hidden networks?': {
question: 'Does it work for hidden networks?',
answer: 'Yes, just check the "Hidden Network" box if your SSID is hidden. The QR code contains the standard WiFi string configuration.',
},
}),
],
};
export default function WiFiQRCodePage() {
return (
<>
{/* JSON-LD Script */}
<script
type="application/ld+json"
dangerouslySetInnerHTML={{ __html: JSON.stringify(jsonLd) }}
/>
<ToolBreadcrumb toolName="WiFi QR Code Generator" toolSlug="wifi-qr-code" />
<div className="min-h-screen" style={{ backgroundColor: '#EBEBDF' }}>
{/* HERO SECTION */}
<section className="relative pt-20 pb-20 lg:pt-32 lg:pb-32 px-4 sm:px-6 lg:px-8 overflow-hidden" style={{ backgroundColor: '#1A1265' }}>
{/* Background Pattern */}
<div className="absolute inset-0 opacity-10">
<svg className="w-full h-full" viewBox="0 0 100 100" preserveAspectRatio="none">
<path d="M0 100 C 20 0 50 0 100 100 Z" fill="url(#grad1)" />
<defs>
<linearGradient id="grad1" x1="0%" y1="0%" x2="100%" y2="0%">
<stop offset="0%" style={{ stopColor: 'white', stopOpacity: 1 }} />
<stop offset="100%" style={{ stopColor: 'white', stopOpacity: 0 }} />
</linearGradient>
</defs>
</svg>
</div>
<div className="max-w-7xl mx-auto grid lg:grid-cols-2 gap-12 items-center relative z-10">
{/* Left: Text Content */}
<div className="text-center lg:text-left">
{/* Badge */}
<div className="inline-flex items-center gap-2 px-3 py-1 rounded-full bg-white/10 text-white/90 text-sm font-medium mb-6 backdrop-blur-sm border border-white/10 hover:bg-white/20 transition-colors cursor-default">
<span className="flex h-2 w-2 relative">
<span className="animate-ping absolute inline-flex h-full w-full rounded-full bg-emerald-400 opacity-75"></span>
<span className="relative inline-flex rounded-full h-2 w-2 bg-emerald-400"></span>
</span>
Free Tool — No Signup Required
</div>
<h1 className="text-4xl md:text-5xl lg:text-6xl font-extrabold text-white tracking-tight leading-tight mb-6">
The Safest Way to <br className="hidden lg:block" />
<span className="text-transparent bg-clip-text bg-gradient-to-r from-emerald-400 to-cyan-400">Share Your WiFi</span>
</h1>
<p className="text-lg md:text-xl text-indigo-100 max-w-2xl mx-auto lg:mx-0 mb-8 leading-relaxed">
Generate a secure QR code in seconds. No more spelling out complicated passwords.
<strong className="text-white block sm:inline mt-2 sm:mt-0"> 100% Client-Side & Private.</strong>
</p>
<div className="flex flex-wrap justify-center lg:justify-start gap-4 text-sm font-medium text-white/80">
<div className="flex items-center gap-2 bg-white/5 px-4 py-2.5 rounded-xl border border-white/5 backdrop-blur-sm">
<Lock className="w-4 h-4 text-emerald-400" />
No Server Uploads
</div>
<div className="flex items-center gap-2 bg-white/5 px-4 py-2.5 rounded-xl border border-white/5 backdrop-blur-sm">
<Zap className="w-4 h-4 text-amber-400" />
Instant Connect
</div>
<div className="flex items-center gap-2 bg-white/5 px-4 py-2.5 rounded-xl border border-white/5 backdrop-blur-sm">
<Smartphone className="w-4 h-4 text-purple-400" />
iOS & Android
</div>
</div>
</div>
{/* Right: Visual Abstract Composition */}
<div className="hidden lg:flex relative items-center justify-center min-h-[400px]">
{/* Decorative Glow */}
<div className="absolute w-[500px] h-[500px] bg-indigo-500/30 rounded-full blur-[100px] -top-20 -right-20 animate-pulse" />
{/* Floating Glass Card */}
<div className="relative w-80 h-96 bg-white/5 backdrop-blur-xl border border-white/20 rounded-3xl shadow-2xl flex flex-col items-center justify-center p-8 transform rotate-6 hover:rotate-3 transition-all duration-700 group">
<div className="absolute inset-0 bg-gradient-to-br from-white/10 to-transparent rounded-3xl" />
{/* Mock QR */}
<div className="w-48 h-48 bg-white rounded-xl p-2 shadow-inner mb-6 relative overflow-hidden flex items-center justify-center">
<QRCodeSVG value="https://www.qrmaster.net" size={170} fgColor="#0f172a" level="Q" />
{/* Scan Line */}
<div className="absolute top-1/2 left-0 w-full h-1 bg-emerald-500 shadow-[0_0_20px_rgba(16,185,129,1)] animate-pulse" />
</div>
<div className="w-full space-y-3">
<div className="h-2 w-32 bg-white/20 rounded-full mx-auto" />
<div className="h-2 w-20 bg-white/10 rounded-full mx-auto" />
</div>
{/* Floating Badge */}
<div className="absolute -bottom-6 -left-6 bg-white py-3 px-5 rounded-xl shadow-xl flex items-center gap-3 transform transition-transform hover:scale-105 duration-300">
<div className="bg-emerald-100 p-2 rounded-full">
<Wifi className="w-5 h-5 text-emerald-600" />
</div>
<div className="text-left">
<div className="text-[10px] text-slate-400 font-bold uppercase tracking-wider">Status</div>
<div className="text-sm font-bold text-slate-900">Connected</div>
</div>
</div>
</div>
</div>
</div>
</section>
{/* GENERATOR SECTION */}
<section className="py-12 px-4 sm:px-6 lg:px-8 -mt-8">
<WiFiGenerator />
</section>
{/* HOW IT WORKS - AEO/GEO Content */}
<section className="py-16 px-4 sm:px-6 lg:px-8 bg-white">
<div className="max-w-4xl mx-auto">
<h2 className="text-3xl font-bold text-slate-900 text-center mb-12">
How WiFi QR Codes Work
</h2>
<div className="grid md:grid-cols-3 lg:grid-cols-5 gap-8">
<article className="text-center">
<div className="w-12 h-12 rounded-2xl bg-[#1A1265]/10 flex items-center justify-center mx-auto mb-4">
<Wifi className="w-6 h-6 text-[#1A1265]" />
</div>
<h3 className="font-bold text-slate-900 mb-2">1. Network</h3>
<p className="text-slate-600 text-xs leading-relaxed">
Enter your WiFi SSID and password.
</p>
</article>
<article className="text-center">
<div className="w-12 h-12 rounded-2xl bg-[#1A1265]/10 flex items-center justify-center mx-auto mb-4">
<Shield className="w-6 h-6 text-[#1A1265]" />
</div>
<h3 className="font-bold text-slate-900 mb-2">2. Security</h3>
<p className="text-slate-600 text-xs leading-relaxed">
Select WPA/WPA2 encryption.
</p>
</article>
<article className="text-center">
<div className="w-12 h-12 rounded-2xl bg-[#1A1265]/10 flex items-center justify-center mx-auto mb-4">
<Zap className="w-6 h-6 text-[#1A1265]" />
</div>
<h3 className="font-bold text-slate-900 mb-2">3. Style</h3>
<p className="text-slate-600 text-xs leading-relaxed">
Customize colors and add a frame.
</p>
</article>
<article className="text-center">
<div className="w-12 h-12 rounded-2xl bg-[#1A1265]/10 flex items-center justify-center mx-auto mb-4">
<Download className="w-6 h-6 text-[#1A1265]" />
</div>
<h3 className="font-bold text-slate-900 mb-2">4. Download</h3>
<p className="text-slate-600 text-xs leading-relaxed">
Get your high-quality QR image.
</p>
</article>
<article className="text-center">
<div className="w-12 h-12 rounded-2xl bg-[#1A1265]/10 flex items-center justify-center mx-auto mb-4">
<Smartphone className="w-6 h-6 text-[#1A1265]" />
</div>
<h3 className="font-bold text-slate-900 mb-2">5. Connect</h3>
<p className="text-slate-600 text-xs leading-relaxed">
Print it out. Guests scan to join!
</p>
</article>
</div>
</div>
</section>
{/* RELATED TOOLS */}
<RelatedTools />
{/* FAQ SECTION - Featured Snippet Optimized */}
<section className="py-16 px-4 sm:px-6 lg:px-8" style={{ backgroundColor: '#EBEBDF' }}>
<div className="max-w-3xl mx-auto">
<h2 className="text-3xl font-bold text-slate-900 text-center mb-4">
Frequently Asked Questions
</h2>
<p className="text-slate-600 text-center mb-10">
Everything you need to know about WiFi QR codes.
</p>
<div className="space-y-4">
<FaqItem
question="Is it safe to enter my WiFi password here?"
answer="Yes, completely safe. This tool uses client-side processing, meaning your WiFi password never leaves your device. It's processed locally in your browser to generate the QR code—no data is sent to any server."
/>
<FaqItem
question="Do WiFi QR codes work on iPhone and Android?"
answer="Yes. iOS 11 and later, as well as all modern Android devices, can scan WiFi QR codes using the built-in camera app. Simply point the camera at the QR code and tap the notification to connect."
/>
<FaqItem
question="What happens if I change my WiFi password?"
answer="If you change your WiFi password, the old QR code will stop working. You'll need to generate a new QR code with the updated credentials. For frequently changing passwords, consider using dynamic QR codes."
/>
<FaqItem
question="Can I customize the QR code design?"
answer="Yes. You can change the foreground color of the QR code and add frame labels such as 'Scan Me', 'WiFi', or 'Connect' to make your QR code more recognizable and user-friendly."
/>
<FaqItem
question="Does it work for hidden networks?"
answer="Yes, just check the 'Hidden Network' box if your SSID is hidden. The QR code contains the standard WiFi string configuration."
/>
</div>
</div>
</section>
</div>
</>
);
}
// FAQ Item Component
function FaqItem({ question, answer }: { question: string; answer: string }) {
return (
<details className="group bg-white rounded-xl shadow-sm border border-slate-200 overflow-hidden">
<summary className="flex items-center justify-between p-5 cursor-pointer list-none text-slate-900 font-semibold hover:bg-slate-50 transition-colors">
{question}
<span className="transition group-open:rotate-180 text-slate-400">
<svg fill="none" height="20" stroke="currentColor" strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" viewBox="0 0 24 24" width="20">
<path d="M6 9l6 6 6-6" />
</svg>
</span>
</summary>
<div className="text-slate-600 px-5 pb-5 pt-0 leading-relaxed text-sm">
{answer}
</div>
</details>
);
}

490
src/app/(main)/(marketing)/tools/youtube-qr-code/YouTubeGenerator.tsx
View File

@@ -1,245 +1,245 @@
'use client';
import React, { useState, useRef } from 'react';
import Link from 'next/link';
import { QRCodeSVG } from 'qrcode.react';
import {
Youtube,
Download,
Check,
Sparkles,
Play
} from 'lucide-react';
import { Button } from '@/components/ui/Button';
import { Input } from '@/components/ui/Input';
import { cn } from '@/lib/utils';
// Brand Colors
const BRAND = {
paleGrey: '#EBEBDF',
richBlue: '#1A1265',
richBlueLight: '#2A2275',
};
// QR Color Options - YT Theme
const QR_COLORS = [
{ name: 'YouTube Red', value: '#FF0000' },
{ name: 'Classic Black', value: '#000000' },
{ name: 'Dark Blue', value: '#1A1265' },
{ name: 'Teal', value: '#0D9488' },
{ name: 'Grey', value: '#374151' },
{ name: 'Emerald', value: '#10B981' },
{ name: 'Rose', value: '#F43F5E' },
];
// Frame Options
const FRAME_OPTIONS = [
{ id: 'none', label: 'No Frame' },
{ id: 'scanme', label: 'Scan Me' },
{ id: 'watch', label: 'Watch' },
{ id: 'subscribe', label: 'Subscribe' },
];
export default function YoutubeGenerator() {
const [url, setUrl] = useState('');
const [qrColor, setQrColor] = useState('#FF0000');
const [frameType, setFrameType] = useState('none');
const qrRef = useRef<HTMLDivElement>(null);
const handleDownload = async (format: 'png' | 'svg') => {
if (!qrRef.current) return;
try {
if (format === 'png') {
const { toPng } = await import('html-to-image');
const dataUrl = await toPng(qrRef.current, { cacheBust: true, pixelRatio: 3 });
const link = document.createElement('a');
link.download = `youtube-qr-code.png`;
link.href = dataUrl;
link.click();
} else {
const svgData = qrRef.current.querySelector('svg')?.outerHTML;
if (svgData) {
const blob = new Blob([svgData], { type: 'image/svg+xml;charset=utf-8' });
const url = URL.createObjectURL(blob);
const link = document.createElement('a');
link.href = url;
link.download = `youtube-qr-code.svg`;
link.click();
}
}
} catch (err) {
console.error('Download failed', err);
}
};
const getFrameLabel = () => {
const frame = FRAME_OPTIONS.find(f => f.id === frameType);
return frame?.id !== 'none' ? frame?.label : null;
};
return (
<div className="w-full max-w-5xl mx-auto px-4 md:px-6">
{/* Main Generator Card */}
<div className="bg-white rounded-3xl shadow-2xl shadow-slate-900/10 overflow-hidden border border-slate-100">
<div className="grid lg:grid-cols-2">
{/* LEFT: Input Section */}
<div className="p-6 md:p-8 lg:p-10 space-y-8 border-r border-slate-100">
{/* YouTube Details */}
<div className="space-y-6">
<h2 className="text-lg font-bold text-slate-900 flex items-center gap-2">
<Youtube className="w-5 h-5 text-[#FF0000]" />
YouTube Video or Channel
</h2>
<div>
<label className="block text-sm font-medium text-slate-700 mb-2">Video/Channel URL</label>
<Input
placeholder="https://youtube.com/watch?v=..."
value={url}
onChange={(e) => setUrl(e.target.value)}
className="h-12 text-base rounded-xl border-slate-200 focus:border-[#FF0000] focus:ring-[#FF0000]"
/>
<p className="text-xs text-slate-600 mt-2">Paste a link to any video, channel, or playlist.</p>
</div>
</div>
<div className="border-t border-slate-100"></div>
{/* Design Options */}
<div className="space-y-6">
<h2 className="text-lg font-bold text-slate-900 flex items-center gap-2">
<Sparkles className="w-5 h-5 text-[#FF0000]" />
Design Options
</h2>
{/* Color Picker */}
<div>
<label className="block text-sm font-medium text-slate-700 mb-3">QR Code Color</label>
<div className="flex flex-wrap gap-2">
{QR_COLORS.map((c) => (
<button
key={c.name}
onClick={() => setQrColor(c.value)}
className={cn(
"w-9 h-9 rounded-full border-2 flex items-center justify-center transition-all hover:scale-110",
qrColor === c.value ? "border-slate-900 ring-2 ring-offset-2 ring-slate-200" : "border-white shadow-md"
)}
style={{ backgroundColor: c.value }}
aria-label={`Select ${c.name}`}
title={c.name}
>
{qrColor === c.value && <Check className="w-4 h-4 text-white" strokeWidth={3} />}
</button>
))}
</div>
</div>
{/* Frame Selector */}
<div>
<label className="block text-sm font-medium text-slate-700 mb-3">Frame Label</label>
<div className="grid grid-cols-2 sm:grid-cols-4 gap-2">
{FRAME_OPTIONS.map((frame) => (
<button
key={frame.id}
onClick={() => setFrameType(frame.id)}
className={cn(
"py-2.5 px-3 rounded-lg text-sm font-medium transition-all border",
frameType === frame.id
? "bg-[#FF0000] text-white border-[#FF0000]"
: "bg-slate-50 text-slate-600 border-slate-200 hover:border-slate-300"
)}
>
{frame.label}
</button>
))}
</div>
</div>
</div>
</div>
{/* RIGHT: Preview Section */}
<div className="p-6 md:p-8 lg:p-10 flex flex-col items-center justify-center" style={{ backgroundColor: BRAND.paleGrey }}>
{/* QR Card with Frame */}
<div
ref={qrRef}
className="bg-white rounded-3xl shadow-xl p-6 sm:p-8 flex flex-col items-center w-full max-w-[320px]"
>
{/* Frame Label */}
{getFrameLabel() && (
<div
className="mb-5 px-8 py-2.5 rounded-full text-white font-bold text-sm tracking-widest uppercase shadow-md"
style={{ backgroundColor: qrColor }}
>
{getFrameLabel()}
</div>
)}
{/* QR Code */}
<div className="bg-white">
<QRCodeSVG
value={url || "https://youtube.com"}
size={240}
level="M"
includeMargin={false}
fgColor={qrColor}
/>
</div>
{/* Info Preview */}
<div className="mt-6 text-center max-w-[260px]">
<h3 className="font-bold text-slate-900 text-lg flex items-center justify-center gap-2 truncate">
<Youtube className="w-4 h-4 text-slate-400 shrink-0" />
<span className="truncate">{url ? 'YouTube Content' : 'youtube.com'}</span>
</h3>
<div className="text-xs text-slate-600 mt-1">Opens in YouTube App</div>
</div>
</div>
{/* Download Buttons */}
<div className="flex items-center gap-3 mt-8">
<Button
onClick={() => handleDownload('png')}
className="bg-[#FF0000] hover:bg-[#cc0000] text-white shadow-lg"
>
<Download className="w-4 h-4 mr-2" />
Download PNG
</Button>
<Button
onClick={() => handleDownload('svg')}
variant="outline"
className="border-slate-300 hover:bg-white"
>
<Download className="w-4 h-4 mr-2" />
SVG
</Button>
</div>
<p className="text-xs text-slate-600 mt-4 text-center">
Scanning redirects directly to the video or channel.
</p>
</div>
</div>
</div>
{/* Upsell Banner */}
<div className="mt-8 bg-gradient-to-r from-[#FF0000] to-[#cc0000] rounded-2xl p-6 flex flex-col sm:flex-row items-center justify-between gap-4">
<div className="text-white text-center sm:text-left">
<h3 className="font-bold text-lg">Promoting a Video Channel?</h3>
<p className="text-white/80 text-sm mt-1">
Dynamic QR Codes give you stats on scans, locations, and time of day.
</p>
</div>
<Link href="/signup">
<Button className="bg-white text-[#FF0000] hover:bg-slate-100 shrink-0 shadow-lg">
Get Video Stats
</Button>
</Link>
</div>
</div>
);
}
'use client';
import React, { useState, useRef } from 'react';
import Link from 'next/link';
import { QRCodeSVG } from 'qrcode.react';
import {
Youtube,
Download,
Check,
Sparkles,
Play
} from 'lucide-react';
import { Button } from '@/components/ui/Button';
import { Input } from '@/components/ui/Input';
import { cn } from '@/lib/utils';
// Brand Colors
const BRAND = {
paleGrey: '#EBEBDF',
richBlue: '#1A1265',
richBlueLight: '#2A2275',
};
// QR Color Options - YT Theme
const QR_COLORS = [
{ name: 'YouTube Red', value: '#FF0000' },
{ name: 'Classic Black', value: '#000000' },
{ name: 'Dark Blue', value: '#1A1265' },
{ name: 'Teal', value: '#0D9488' },
{ name: 'Grey', value: '#374151' },
{ name: 'Emerald', value: '#10B981' },
{ name: 'Rose', value: '#F43F5E' },
];
// Frame Options
const FRAME_OPTIONS = [
{ id: 'none', label: 'No Frame' },
{ id: 'scanme', label: 'Scan Me' },
{ id: 'watch', label: 'Watch' },
{ id: 'subscribe', label: 'Subscribe' },
];
export default function YoutubeGenerator() {
const [url, setUrl] = useState('');
const [qrColor, setQrColor] = useState('#FF0000');
const [frameType, setFrameType] = useState('none');
const qrRef = useRef<HTMLDivElement>(null);
const handleDownload = async (format: 'png' | 'svg') => {
if (!qrRef.current) return;
try {
if (format === 'png') {
const { toPng } = await import('html-to-image');
const dataUrl = await toPng(qrRef.current, { cacheBust: true, pixelRatio: 3 });
const link = document.createElement('a');
link.download = `youtube-qr-code.png`;
link.href = dataUrl;
link.click();
} else {
const svgData = qrRef.current.querySelector('svg')?.outerHTML;
if (svgData) {
const blob = new Blob([svgData], { type: 'image/svg+xml;charset=utf-8' });
const url = URL.createObjectURL(blob);
const link = document.createElement('a');
link.href = url;
link.download = `youtube-qr-code.svg`;
link.click();
}
}
} catch (err) {
console.error('Download failed', err);
}
};
const getFrameLabel = () => {
const frame = FRAME_OPTIONS.find(f => f.id === frameType);
return frame?.id !== 'none' ? frame?.label : null;
};
return (
<div className="w-full max-w-5xl mx-auto px-4 md:px-6">
{/* Main Generator Card */}
<div className="bg-white rounded-3xl shadow-2xl shadow-slate-900/10 overflow-hidden border border-slate-100">
<div className="grid lg:grid-cols-2">
{/* LEFT: Input Section */}
<div className="p-6 md:p-8 lg:p-10 space-y-8 border-r border-slate-100">
{/* YouTube Details */}
<div className="space-y-6">
<h2 className="text-lg font-bold text-slate-900 flex items-center gap-2">
<Youtube className="w-5 h-5 text-[#FF0000]" />
YouTube Video or Channel
</h2>
<div>
<label className="block text-sm font-medium text-slate-700 mb-2">Video/Channel URL</label>
<Input
placeholder="https://youtube.com/watch?v=..."
value={url}
onChange={(e) => setUrl(e.target.value)}
className="h-12 text-base rounded-xl border-slate-200 focus:border-[#FF0000] focus:ring-[#FF0000]"
/>
<p className="text-xs text-slate-600 mt-2">Paste a link to any video, channel, or playlist.</p>
</div>
</div>
<div className="border-t border-slate-100"></div>
{/* Design Options */}
<div className="space-y-6">
<h2 className="text-lg font-bold text-slate-900 flex items-center gap-2">
<Sparkles className="w-5 h-5 text-[#FF0000]" />
Design Options
</h2>
{/* Color Picker */}
<div>
<label className="block text-sm font-medium text-slate-700 mb-3">QR Code Color</label>
<div className="flex flex-wrap gap-2">
{QR_COLORS.map((c) => (
<button
key={c.name}
onClick={() => setQrColor(c.value)}
className={cn(
"w-9 h-9 rounded-full border-2 flex items-center justify-center transition-all hover:scale-110",
qrColor === c.value ? "border-slate-900 ring-2 ring-offset-2 ring-slate-200" : "border-white shadow-md"
)}
style={{ backgroundColor: c.value }}
aria-label={`Select ${c.name}`}
title={c.name}
>
{qrColor === c.value && <Check className="w-4 h-4 text-white" strokeWidth={3} />}
</button>
))}
</div>
</div>
{/* Frame Selector */}
<div>
<label className="block text-sm font-medium text-slate-700 mb-3">Frame Label</label>
<div className="grid grid-cols-2 sm:grid-cols-4 gap-2">
{FRAME_OPTIONS.map((frame) => (
<button
key={frame.id}
onClick={() => setFrameType(frame.id)}
className={cn(
"py-2.5 px-3 rounded-lg text-sm font-medium transition-all border",
frameType === frame.id
? "bg-[#FF0000] text-white border-[#FF0000]"
: "bg-slate-50 text-slate-600 border-slate-200 hover:border-slate-300"
)}
>
{frame.label}
</button>
))}
</div>
</div>
</div>
</div>
{/* RIGHT: Preview Section */}
<div className="p-6 md:p-8 lg:p-10 flex flex-col items-center justify-center" style={{ backgroundColor: BRAND.paleGrey }}>
{/* QR Card with Frame */}
<div
ref={qrRef}
className="bg-white rounded-3xl shadow-xl p-6 sm:p-8 flex flex-col items-center w-full max-w-[320px]"
>
{/* Frame Label */}
{getFrameLabel() && (
<div
className="mb-5 px-8 py-2.5 rounded-full text-white font-bold text-sm tracking-widest uppercase shadow-md"
style={{ backgroundColor: qrColor }}
>
{getFrameLabel()}
</div>
)}
{/* QR Code */}
<div className="bg-white">
<QRCodeSVG
value={url || "https://youtube.com"}
size={240}
level="M"
includeMargin={false}
fgColor={qrColor}
/>
</div>
{/* Info Preview */}
<div className="mt-6 text-center max-w-[260px]">
<h3 className="font-bold text-slate-900 text-lg flex items-center justify-center gap-2 truncate">
<Youtube className="w-4 h-4 text-slate-400 shrink-0" />
<span className="truncate">{url ? 'YouTube Content' : 'youtube.com'}</span>
</h3>
<div className="text-xs text-slate-600 mt-1">Opens in YouTube App</div>
</div>
</div>
{/* Download Buttons */}
<div className="flex items-center gap-3 mt-8">
<Button
onClick={() => handleDownload('png')}
className="bg-[#FF0000] hover:bg-[#cc0000] text-white shadow-lg"
>
<Download className="w-4 h-4 mr-2" />
Download PNG
</Button>
<Button
onClick={() => handleDownload('svg')}
variant="outline"
className="border-slate-300 hover:bg-white"
>
<Download className="w-4 h-4 mr-2" />
SVG
</Button>
</div>
<p className="text-xs text-slate-600 mt-4 text-center">
Scanning redirects directly to the video or channel.
</p>
</div>
</div>
</div>
{/* Upsell Banner */}
<div className="mt-8 bg-gradient-to-r from-[#FF0000] to-[#cc0000] rounded-2xl p-6 flex flex-col sm:flex-row items-center justify-between gap-4">
<div className="text-white text-center sm:text-left">
<h3 className="font-bold text-lg">Promoting a Video Channel?</h3>
<p className="text-white/80 text-sm mt-1">
Dynamic QR Codes give you stats on scans, locations, and time of day.
</p>
</div>
<Link href="/signup">
<Button className="bg-white text-[#FF0000] hover:bg-slate-100 shrink-0 shadow-lg">
Get Video Stats
</Button>
</Link>
</div>
</div>
);
}

660
src/app/(main)/(marketing)/tools/youtube-qr-code/page.tsx
View File

@@ -1,330 +1,330 @@
import React from 'react';
import type { Metadata } from 'next';
import YoutubeGenerator from './YouTubeGenerator';
import { Youtube, Shield, Zap, Smartphone, Play, Radio, Download, Share2 } from 'lucide-react';
import { QRCodeSVG } from 'qrcode.react';
import { ToolBreadcrumb } from '@/components/seo/BreadcrumbSchema';
import { RelatedTools } from '@/components/marketing/RelatedTools';
import { generateSoftwareAppSchema, generateFaqSchema } from '@/lib/schema-utils';
// SEO Optimized Metadata
export const metadata: Metadata = {
title: {
absolute: 'Free YouTube QR Code Generator | Get Views & Subscribers | QR Master',
},
description: 'Create a QR code for your YouTube video or channel. YouTube QR Code erstellen. Scanners watch instantly. Free & Fast.',
keywords: ['youtube qr code', 'video qr code', 'youtube channel qr', 'youtube subscribe qr', 'social media qr code', 'youtube qr code erstellen', 'video qr code erstellen', 'kanal qr code', 'youtube abonnenten qr code', 'youtube video teilen qr'],
alternates: {
canonical: 'https://www.qrmaster.net/tools/youtube-qr-code',
},
openGraph: {
title: 'Free YouTube QR Code Generator | QR Master',
description: 'Generate QR codes to grow your YouTube channel. Instant video play.',
type: 'website',
url: 'https://www.qrmaster.net/tools/youtube-qr-code',
images: [{ url: '/og-youtube-generator.png', width: 1200, height: 630 }],
},
twitter: {
card: 'summary_large_image',
title: 'Free YouTube QR Code Generator',
description: 'Create QR codes for YouTube videos. Get more views.',
},
robots: {
index: true,
follow: true,
},
};
// JSON-LD Structured Data
const jsonLd = {
'@context': 'https://schema.org',
'@graph': [
generateSoftwareAppSchema(
'YouTube QR Code Generator',
'Generate QR codes that direct users to a YouTube video or channel.',
'/og-youtube-generator.png'
),
{
'@type': 'HowTo',
name: 'How to Create a YouTube QR Code',
description: 'Create a QR code that opens a YouTube video.',
step: [
{
'@type': 'HowToStep',
position: 1,
name: 'Copy URL',
text: 'Copy the link of your YouTube video or channel.',
},
{
'@type': 'HowToStep',
position: 2,
name: 'Paste',
text: 'Paste the link into the generator input.',
},
{
'@type': 'HowToStep',
position: 3,
name: 'Customize',
text: 'Add a "Watch Now" frame or change the color to YouTube Red.',
},
{
'@type': 'HowToStep',
position: 4,
name: 'Download',
text: 'Save your QR code image for printing.',
},
{
'@type': 'HowToStep',
position: 5,
name: 'Share',
text: 'Place it on posters, merch, or video end screens.',
},
],
totalTime: 'PT30S',
},
generateFaqSchema({
'Does it open the YouTube app?': {
question: 'Does it open the YouTube app?',
answer: 'Yes! If the user has the YouTube app installed, the QR code will automatically launch the app and play the video.',
},
'Can I link to a specific timestamp?': {
question: 'Can I link to a specific timestamp?',
answer: 'Yes. If you include the timestamp in your YouTube link (e.g., ?t=60s), the video will start playing from that exact moment.',
},
'Can I use this for a playlist?': {
question: 'Can I use this for a playlist?',
answer: 'Absolutely. Just paste the playlist URL, and users will be taken to the full list of videos.',
},
'Is it free?': {
question: 'Is it free?',
answer: 'Yes, this tool is 100% free forever.',
},
'Does it work for YouTube Shorts?': {
question: 'Does it work for YouTube Shorts?',
answer: 'Yes, just paste the "Share" link from any YouTube Short.',
},
}),
],
};
export default function YoutubeQRCodePage() {
return (
<>
<script
type="application/ld+json"
dangerouslySetInnerHTML={{ __html: JSON.stringify(jsonLd) }}
/>
<ToolBreadcrumb toolName="YouTube QR Code Generator" toolSlug="youtube-qr-code" />
<div className="min-h-screen" style={{ backgroundColor: '#EBEBDF' }}>
{/* HERO SECTION */}
<section className="relative pt-20 pb-20 lg:pt-32 lg:pb-32 px-4 sm:px-6 lg:px-8 overflow-hidden bg-[#FF0000]">
<div className="absolute inset-0 opacity-10">
{/* Play Button Pattern */}
<svg className="w-full h-full" width="100%" height="100%" xmlns="http://www.w3.org/2000/svg">
<defs>
<pattern id="yt_pattern" width="60" height="60" patternUnits="userSpaceOnUse">
<path d="M20 20 L40 30 L20 40 Z" fill="white" />
</pattern>
</defs>
<rect width="100%" height="100%" fill="url(#yt_pattern)" />
</svg>
</div>
<div className="max-w-7xl mx-auto grid lg:grid-cols-2 gap-12 items-center relative z-10">
<div className="text-center lg:text-left">
<div className="inline-flex items-center gap-2 px-3 py-1 rounded-full bg-white/10 text-white/90 text-sm font-medium mb-6 backdrop-blur-sm border border-white/10 hover:bg-white/20 transition-colors cursor-default">
<span className="flex h-2 w-2 relative">
<span className="animate-ping absolute inline-flex h-full w-full rounded-full bg-red-300 opacity-75"></span>
<span className="relative inline-flex rounded-full h-2 w-2 bg-red-300"></span>
</span>
Free Tool — No Signup Required
</div>
<h1 className="text-4xl md:text-5xl lg:text-6xl font-extrabold text-white tracking-tight leading-tight mb-6">
Get More Views with <br className="hidden lg:block" />
<span className="text-white drop-shadow-md">YouTube QR Codes</span>
</h1>
<p className="text-lg md:text-xl text-red-50 max-w-2xl mx-auto lg:mx-0 mb-8 leading-relaxed">
From print to play in one scan. Direct your audience to your latest video, channel, or playlist instantly.
<strong className="text-white block sm:inline mt-2 sm:mt-0"> Boost subscriber growth.</strong>
</p>
<div className="flex flex-wrap justify-center lg:justify-start gap-4 text-sm font-medium text-white/80">
<div className="flex items-center gap-2 bg-white/10 px-4 py-2.5 rounded-xl border border-white/10 backdrop-blur-sm">
<Play className="w-4 h-4 text-white" />
Instant Play
</div>
<div className="flex items-center gap-2 bg-white/10 px-4 py-2.5 rounded-xl border border-white/10 backdrop-blur-sm">
<Radio className="w-4 h-4 text-white" />
Grow Channel
</div>
<div className="flex items-center gap-2 bg-white/10 px-4 py-2.5 rounded-xl border border-white/10 backdrop-blur-sm">
<Smartphone className="w-4 h-4 text-white" />
App Friendly
</div>
</div>
</div>
{/* Visual Abstract */}
<div className="hidden lg:flex relative items-center justify-center min-h-[400px]">
<div className="absolute w-[500px] h-[500px] bg-red-600/30 rounded-full blur-[100px] -top-20 -right-20 animate-pulse" />
<div className="relative w-80 h-96 bg-white/5 backdrop-blur-xl border border-white/20 rounded-3xl shadow-2xl flex flex-col items-center justify-center p-8 transform rotate-3 hover:rotate-0 transition-all duration-700 group">
<div className="absolute inset-0 bg-gradient-to-br from-white/10 to-transparent rounded-3xl" />
<div className="w-full bg-black rounded-xl shadow-lg h-40 mb-6 relative overflow-hidden group-hover:scale-105 transition-transform flex items-center justify-center">
<div className="absolute inset-0 bg-[url('https://images.unsplash.com/photo-1611162617474-5b21e879e113?q=80&w=1000&auto=format&fit=crop')] bg-cover bg-center opacity-70"></div>
<div className="w-12 h-12 bg-red-600 rounded-full flex items-center justify-center relative z-10 shadow-xl">
<Play className="w-6 h-6 text-white ml-1" fill="white" />
</div>
<div className="absolute bottom-2 right-2 bg-black/80 px-2 rounded text-xs text-white font-bold">10:24</div>
</div>
<div className="w-44 h-44 bg-white rounded-xl p-2 shadow-inner relative overflow-hidden flex items-center justify-center">
<QRCodeSVG value="https://www.qrmaster.net" size={160} fgColor="#FF0000" level="Q" />
</div>
{/* Floating Badge */}
<div className="absolute -bottom-6 -left-6 bg-white py-3 px-5 rounded-xl shadow-xl flex items-center gap-3 transform transition-transform hover:scale-105 duration-300">
<div className="bg-red-100 p-2 rounded-full">
<Youtube className="w-5 h-5 text-red-600" />
</div>
<div className="text-left">
<div className="text-[10px] text-slate-400 font-bold uppercase tracking-wider">Subscribers</div>
<div className="text-sm font-bold text-slate-900">+10 New</div>
</div>
</div>
</div>
</div>
</div>
</section>
{/* GENERATOR SECTION */}
<section className="py-12 px-4 sm:px-6 lg:px-8 -mt-8">
<YoutubeGenerator />
</section>
{/* HOW IT WORKS */}
<section className="py-16 px-4 sm:px-6 lg:px-8 bg-white">
<div className="max-w-4xl mx-auto">
<h2 className="text-3xl font-bold text-slate-900 text-center mb-12">
How YouTube QR Codes Work
</h2>
<div className="grid md:grid-cols-3 lg:grid-cols-5 gap-8">
<article className="text-center">
<div className="w-14 h-14 rounded-2xl bg-[#FF0000]/10 flex items-center justify-center mx-auto mb-4">
<Youtube className="w-7 h-7 text-[#FF0000]" />
</div>
<h3 className="font-bold text-slate-900 mb-2">1. Paste Link</h3>
<p className="text-slate-600 text-sm">
Copy the URL of your video, channel, or playlist.
</p>
</article>
<article className="text-center">
<div className="w-14 h-14 rounded-2xl bg-[#FF0000]/10 flex items-center justify-center mx-auto mb-4">
<Smartphone className="w-7 h-7 text-[#FF0000]" />
</div>
<h3 className="font-bold text-slate-900 mb-2">2. Print Code</h3>
<p className="text-slate-600 text-sm">
Place the QR code on flyers, posters, or merchandise.
</p>
</article>
<article className="text-center">
<div className="w-12 h-12 rounded-2xl bg-[#FF0000]/10 flex items-center justify-center mx-auto mb-4">
<Download className="w-6 h-6 text-[#FF0000]" />
</div>
<h3 className="font-bold text-slate-900 mb-2">3. Download</h3>
<p className="text-slate-600 text-xs leading-relaxed">
Save your high-quality QR code.
</p>
</article>
<article className="text-center">
<div className="w-12 h-12 rounded-2xl bg-[#FF0000]/10 flex items-center justify-center mx-auto mb-4">
<Play className="w-6 h-6 text-[#FF0000]" />
</div>
<h3 className="font-bold text-slate-900 mb-2">4. Scan</h3>
<p className="text-slate-600 text-xs leading-relaxed">
Customers scan the code.
</p>
</article>
<article className="text-center">
<div className="w-12 h-12 rounded-2xl bg-[#FF0000]/10 flex items-center justify-center mx-auto mb-4">
<Share2 className="w-6 h-6 text-[#FF0000]" />
</div>
<h3 className="font-bold text-slate-900 mb-2">5. Watch</h3>
<p className="text-slate-600 text-xs leading-relaxed">
The video plays instantly.
</p>
</article>
</div>
</div>
</section>
{/* RELATED TOOLS */}
<RelatedTools />
{/* FAQ SECTION */}
<section className="py-16 px-4 sm:px-6 lg:px-8" style={{ backgroundColor: '#EBEBDF' }}>
<div className="max-w-3xl mx-auto">
<h2 className="text-3xl font-bold text-slate-900 text-center mb-4">
Frequently Asked Questions
</h2>
<p className="text-slate-600 text-center mb-10">
Common questions about YouTube QR codes.
</p>
<div className="space-y-4">
<FaqItem
question="Can I link to my Live Stream?"
answer="Yes! Paste your channel's live link (e.g., youtube.com/c/YourChannel/live) and it will always go to your current live stream."
/>
<FaqItem
question="Does the video auto-play?"
answer="Most smartphones will open the YouTube app and auto-play the video, but it depends on the user's specific settings."
/>
<FaqItem
question="Can I change the video later?"
answer="Only if you use our Dynamic QR Code service. This static code will always point to the original link you entered."
/>
<FaqItem
question="Is it safe?"
answer="Yes. The QR code simply contains your video link. No personal data is stored or tracked by this free tool."
/>
<FaqItem
question="Does it work for YouTube Shorts?"
answer="Yes, just paste the 'Share' link from any YouTube Short."
/>
</div>
</div>
</section>
</div>
</>
);
}
function FaqItem({ question, answer }: { question: string; answer: string }) {
return (
<details className="group bg-white rounded-xl shadow-sm border border-slate-200 overflow-hidden">
<summary className="flex items-center justify-between p-5 cursor-pointer list-none text-slate-900 font-semibold hover:bg-slate-50 transition-colors">
{question}
<span className="transition group-open:rotate-180 text-slate-400">
<svg fill="none" height="20" stroke="currentColor" strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" viewBox="0 0 24 24" width="20">
<path d="M6 9l6 6 6-6" />
</svg>
</span>
</summary>
<div className="text-slate-600 px-5 pb-5 pt-0 leading-relaxed text-sm">
{answer}
</div>
</details>
);
}
import React from 'react';
import type { Metadata } from 'next';
import YoutubeGenerator from './YouTubeGenerator';
import { Youtube, Shield, Zap, Smartphone, Play, Radio, Download, Share2 } from 'lucide-react';
import { QRCodeSVG } from 'qrcode.react';
import { ToolBreadcrumb } from '@/components/seo/BreadcrumbSchema';
import { RelatedTools } from '@/components/marketing/RelatedTools';
import { generateSoftwareAppSchema, generateFaqSchema } from '@/lib/schema-utils';
// SEO Optimized Metadata
export const metadata: Metadata = {
title: {
absolute: 'Free YouTube QR Code Generator | Get Views & Subscribers | QR Master',
},
description: 'Create a QR code for your YouTube video or channel. YouTube QR Code erstellen. Scanners watch instantly. Free & Fast.',
keywords: ['youtube qr code', 'video qr code', 'youtube channel qr', 'youtube subscribe qr', 'social media qr code', 'youtube qr code erstellen', 'video qr code erstellen', 'kanal qr code', 'youtube abonnenten qr code', 'youtube video teilen qr'],
alternates: {
canonical: 'https://www.qrmaster.net/tools/youtube-qr-code',
},
openGraph: {
title: 'Free YouTube QR Code Generator | QR Master',
description: 'Generate QR codes to grow your YouTube channel. Instant video play.',
type: 'website',
url: 'https://www.qrmaster.net/tools/youtube-qr-code',
images: [{ url: '/og-youtube-generator.png', width: 1200, height: 630 }],
},
twitter: {
card: 'summary_large_image',
title: 'Free YouTube QR Code Generator',
description: 'Create QR codes for YouTube videos. Get more views.',
},
robots: {
index: true,
follow: true,
},
};
// JSON-LD Structured Data
const jsonLd = {
'@context': 'https://schema.org',
'@graph': [
generateSoftwareAppSchema(
'YouTube QR Code Generator',
'Generate QR codes that direct users to a YouTube video or channel.',
'/og-youtube-generator.png'
),
{
'@type': 'HowTo',
name: 'How to Create a YouTube QR Code',
description: 'Create a QR code that opens a YouTube video.',
step: [
{
'@type': 'HowToStep',
position: 1,
name: 'Copy URL',
text: 'Copy the link of your YouTube video or channel.',
},
{
'@type': 'HowToStep',
position: 2,
name: 'Paste',
text: 'Paste the link into the generator input.',
},
{
'@type': 'HowToStep',
position: 3,
name: 'Customize',
text: 'Add a "Watch Now" frame or change the color to YouTube Red.',
},
{
'@type': 'HowToStep',
position: 4,
name: 'Download',
text: 'Save your QR code image for printing.',
},
{
'@type': 'HowToStep',
position: 5,
name: 'Share',
text: 'Place it on posters, merch, or video end screens.',
},
],
totalTime: 'PT30S',
},
generateFaqSchema({
'Does it open the YouTube app?': {
question: 'Does it open the YouTube app?',
answer: 'Yes! If the user has the YouTube app installed, the QR code will automatically launch the app and play the video.',
},
'Can I link to a specific timestamp?': {
question: 'Can I link to a specific timestamp?',
answer: 'Yes. If you include the timestamp in your YouTube link (e.g., ?t=60s), the video will start playing from that exact moment.',
},
'Can I use this for a playlist?': {
question: 'Can I use this for a playlist?',
answer: 'Absolutely. Just paste the playlist URL, and users will be taken to the full list of videos.',
},
'Is it free?': {
question: 'Is it free?',
answer: 'Yes, this tool is 100% free forever.',
},
'Does it work for YouTube Shorts?': {
question: 'Does it work for YouTube Shorts?',
answer: 'Yes, just paste the "Share" link from any YouTube Short.',
},
}),
],
};
export default function YoutubeQRCodePage() {
return (
<>
<script
type="application/ld+json"
dangerouslySetInnerHTML={{ __html: JSON.stringify(jsonLd) }}
/>
<ToolBreadcrumb toolName="YouTube QR Code Generator" toolSlug="youtube-qr-code" />
<div className="min-h-screen" style={{ backgroundColor: '#EBEBDF' }}>
{/* HERO SECTION */}
<section className="relative pt-20 pb-20 lg:pt-32 lg:pb-32 px-4 sm:px-6 lg:px-8 overflow-hidden bg-[#FF0000]">
<div className="absolute inset-0 opacity-10">
{/* Play Button Pattern */}
<svg className="w-full h-full" width="100%" height="100%" xmlns="http://www.w3.org/2000/svg">
<defs>
<pattern id="yt_pattern" width="60" height="60" patternUnits="userSpaceOnUse">
<path d="M20 20 L40 30 L20 40 Z" fill="white" />
</pattern>
</defs>
<rect width="100%" height="100%" fill="url(#yt_pattern)" />
</svg>
</div>
<div className="max-w-7xl mx-auto grid lg:grid-cols-2 gap-12 items-center relative z-10">
<div className="text-center lg:text-left">
<div className="inline-flex items-center gap-2 px-3 py-1 rounded-full bg-white/10 text-white/90 text-sm font-medium mb-6 backdrop-blur-sm border border-white/10 hover:bg-white/20 transition-colors cursor-default">
<span className="flex h-2 w-2 relative">
<span className="animate-ping absolute inline-flex h-full w-full rounded-full bg-red-300 opacity-75"></span>
<span className="relative inline-flex rounded-full h-2 w-2 bg-red-300"></span>
</span>
Free Tool — No Signup Required
</div>
<h1 className="text-4xl md:text-5xl lg:text-6xl font-extrabold text-white tracking-tight leading-tight mb-6">
Get More Views with <br className="hidden lg:block" />
<span className="text-white drop-shadow-md">YouTube QR Codes</span>
</h1>
<p className="text-lg md:text-xl text-red-50 max-w-2xl mx-auto lg:mx-0 mb-8 leading-relaxed">
From print to play in one scan. Direct your audience to your latest video, channel, or playlist instantly.
<strong className="text-white block sm:inline mt-2 sm:mt-0"> Boost subscriber growth.</strong>
</p>
<div className="flex flex-wrap justify-center lg:justify-start gap-4 text-sm font-medium text-white/80">
<div className="flex items-center gap-2 bg-white/10 px-4 py-2.5 rounded-xl border border-white/10 backdrop-blur-sm">
<Play className="w-4 h-4 text-white" />
Instant Play
</div>
<div className="flex items-center gap-2 bg-white/10 px-4 py-2.5 rounded-xl border border-white/10 backdrop-blur-sm">
<Radio className="w-4 h-4 text-white" />
Grow Channel
</div>
<div className="flex items-center gap-2 bg-white/10 px-4 py-2.5 rounded-xl border border-white/10 backdrop-blur-sm">
<Smartphone className="w-4 h-4 text-white" />
App Friendly
</div>
</div>
</div>
{/* Visual Abstract */}
<div className="hidden lg:flex relative items-center justify-center min-h-[400px]">
<div className="absolute w-[500px] h-[500px] bg-red-600/30 rounded-full blur-[100px] -top-20 -right-20 animate-pulse" />
<div className="relative w-80 h-96 bg-white/5 backdrop-blur-xl border border-white/20 rounded-3xl shadow-2xl flex flex-col items-center justify-center p-8 transform rotate-3 hover:rotate-0 transition-all duration-700 group">
<div className="absolute inset-0 bg-gradient-to-br from-white/10 to-transparent rounded-3xl" />
<div className="w-full bg-black rounded-xl shadow-lg h-40 mb-6 relative overflow-hidden group-hover:scale-105 transition-transform flex items-center justify-center">
<div className="absolute inset-0 bg-[url('https://images.unsplash.com/photo-1611162617474-5b21e879e113?q=80&w=1000&auto=format&fit=crop')] bg-cover bg-center opacity-70"></div>
<div className="w-12 h-12 bg-red-600 rounded-full flex items-center justify-center relative z-10 shadow-xl">
<Play className="w-6 h-6 text-white ml-1" fill="white" />
</div>
<div className="absolute bottom-2 right-2 bg-black/80 px-2 rounded text-xs text-white font-bold">10:24</div>
</div>
<div className="w-44 h-44 bg-white rounded-xl p-2 shadow-inner relative overflow-hidden flex items-center justify-center">
<QRCodeSVG value="https://www.qrmaster.net" size={160} fgColor="#FF0000" level="Q" />
</div>
{/* Floating Badge */}
<div className="absolute -bottom-6 -left-6 bg-white py-3 px-5 rounded-xl shadow-xl flex items-center gap-3 transform transition-transform hover:scale-105 duration-300">
<div className="bg-red-100 p-2 rounded-full">
<Youtube className="w-5 h-5 text-red-600" />
</div>
<div className="text-left">
<div className="text-[10px] text-slate-400 font-bold uppercase tracking-wider">Subscribers</div>
<div className="text-sm font-bold text-slate-900">+10 New</div>
</div>
</div>
</div>
</div>
</div>
</section>
{/* GENERATOR SECTION */}
<section className="py-12 px-4 sm:px-6 lg:px-8 -mt-8">
<YoutubeGenerator />
</section>
{/* HOW IT WORKS */}
<section className="py-16 px-4 sm:px-6 lg:px-8 bg-white">
<div className="max-w-4xl mx-auto">
<h2 className="text-3xl font-bold text-slate-900 text-center mb-12">
How YouTube QR Codes Work
</h2>
<div className="grid md:grid-cols-3 lg:grid-cols-5 gap-8">
<article className="text-center">
<div className="w-14 h-14 rounded-2xl bg-[#FF0000]/10 flex items-center justify-center mx-auto mb-4">
<Youtube className="w-7 h-7 text-[#FF0000]" />
</div>
<h3 className="font-bold text-slate-900 mb-2">1. Paste Link</h3>
<p className="text-slate-600 text-sm">
Copy the URL of your video, channel, or playlist.
</p>
</article>
<article className="text-center">
<div className="w-14 h-14 rounded-2xl bg-[#FF0000]/10 flex items-center justify-center mx-auto mb-4">
<Smartphone className="w-7 h-7 text-[#FF0000]" />
</div>
<h3 className="font-bold text-slate-900 mb-2">2. Print Code</h3>
<p className="text-slate-600 text-sm">
Place the QR code on flyers, posters, or merchandise.
</p>
</article>
<article className="text-center">
<div className="w-12 h-12 rounded-2xl bg-[#FF0000]/10 flex items-center justify-center mx-auto mb-4">
<Download className="w-6 h-6 text-[#FF0000]" />
</div>
<h3 className="font-bold text-slate-900 mb-2">3. Download</h3>
<p className="text-slate-600 text-xs leading-relaxed">
Save your high-quality QR code.
</p>
</article>
<article className="text-center">
<div className="w-12 h-12 rounded-2xl bg-[#FF0000]/10 flex items-center justify-center mx-auto mb-4">
<Play className="w-6 h-6 text-[#FF0000]" />
</div>
<h3 className="font-bold text-slate-900 mb-2">4. Scan</h3>
<p className="text-slate-600 text-xs leading-relaxed">
Customers scan the code.
</p>
</article>
<article className="text-center">
<div className="w-12 h-12 rounded-2xl bg-[#FF0000]/10 flex items-center justify-center mx-auto mb-4">
<Share2 className="w-6 h-6 text-[#FF0000]" />
</div>
<h3 className="font-bold text-slate-900 mb-2">5. Watch</h3>
<p className="text-slate-600 text-xs leading-relaxed">
The video plays instantly.
</p>
</article>
</div>
</div>
</section>
{/* RELATED TOOLS */}
<RelatedTools />
{/* FAQ SECTION */}
<section className="py-16 px-4 sm:px-6 lg:px-8" style={{ backgroundColor: '#EBEBDF' }}>
<div className="max-w-3xl mx-auto">
<h2 className="text-3xl font-bold text-slate-900 text-center mb-4">
Frequently Asked Questions
</h2>
<p className="text-slate-600 text-center mb-10">
Common questions about YouTube QR codes.
</p>
<div className="space-y-4">
<FaqItem
question="Can I link to my Live Stream?"
answer="Yes! Paste your channel's live link (e.g., youtube.com/c/YourChannel/live) and it will always go to your current live stream."
/>
<FaqItem
question="Does the video auto-play?"
answer="Most smartphones will open the YouTube app and auto-play the video, but it depends on the user's specific settings."
/>
<FaqItem
question="Can I change the video later?"
answer="Only if you use our Dynamic QR Code service. This static code will always point to the original link you entered."
/>
<FaqItem
question="Is it safe?"
answer="Yes. The QR code simply contains your video link. No personal data is stored or tracked by this free tool."
/>
<FaqItem
question="Does it work for YouTube Shorts?"
answer="Yes, just paste the 'Share' link from any YouTube Short."
/>
</div>
</div>
</section>
</div>
</>
);
}
function FaqItem({ question, answer }: { question: string; answer: string }) {
return (
<details className="group bg-white rounded-xl shadow-sm border border-slate-200 overflow-hidden">
<summary className="flex items-center justify-between p-5 cursor-pointer list-none text-slate-900 font-semibold hover:bg-slate-50 transition-colors">
{question}
<span className="transition group-open:rotate-180 text-slate-400">
<svg fill="none" height="20" stroke="currentColor" strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" viewBox="0 0 24 24" width="20">
<path d="M6 9l6 6 6-6" />
</svg>
</span>
</summary>
<div className="text-slate-600 px-5 pb-5 pt-0 leading-relaxed text-sm">
{answer}
</div>
</details>
);
}

604
src/app/(main)/(marketing)/tools/zoom-qr-code/ZoomGenerator.tsx
View File

@@ -1,302 +1,302 @@
'use client';
import React, { useState, useRef } from 'react';
import Link from 'next/link';
import { QRCodeSVG } from 'qrcode.react';
import {
Video,
Download,
Check,
Sparkles,
Users
} from 'lucide-react';
import { Button } from '@/components/ui/Button';
import { Input } from '@/components/ui/Input';
import { cn } from '@/lib/utils';
// Brand Colors - Zoom Blue
const BRAND = {
paleGrey: '#EFF6FF',
primary: '#2D8CFF',
primaryDark: '#0B5CDB',
};
// QR Color Options
const QR_COLORS = [
{ name: 'Zoom Blue', value: '#2D8CFF' },
{ name: 'Dark Blue', value: '#0B5CDB' },
{ name: 'Classic Black', value: '#000000' },
{ name: 'Indigo', value: '#4F46E5' },
{ name: 'Violet', value: '#7C3AED' },
{ name: 'Emerald', value: '#10B981' },
{ name: 'Rose', value: '#F43F5E' },
];
// Frame Options
const FRAME_OPTIONS = [
{ id: 'none', label: 'No Frame' },
{ id: 'scanme', label: 'Scan Me' },
{ id: 'join', label: 'Join Meeting' },
{ id: 'zoom', label: 'Zoom' },
];
export default function ZoomGenerator() {
const [meetingId, setMeetingId] = useState('');
const [passcode, setPasscode] = useState('');
const [useDirectLink, setUseDirectLink] = useState(false); // Default to web URL for compatibility
const [qrColor, setQrColor] = useState(BRAND.primary);
const [frameType, setFrameType] = useState('none');
const qrRef = useRef<HTMLDivElement>(null);
// Format meeting ID for display (xxx xxxx xxxx)
const formatMeetingId = (id: string) => {
const cleaned = id.replace(/\D/g, '');
if (cleaned.length <= 3) return cleaned;
if (cleaned.length <= 7) return `${cleaned.slice(0, 3)} ${cleaned.slice(3)}`;
return `${cleaned.slice(0, 3)} ${cleaned.slice(3, 7)} ${cleaned.slice(7, 11)}`;
};
// Generate Zoom link
const generateZoomLink = () => {
const cleanId = meetingId.replace(/\D/g, '');
if (!cleanId) return 'https://zoom.us/j/1234567890';
if (useDirectLink) {
// zoommtg protocol for direct app open
let link = `zoommtg://zoom.us/join?confno=${cleanId}`;
if (passcode) {
link += `&pwd=${passcode}`;
}
return link;
} else {
// Regular web link
let link = `https://zoom.us/j/${cleanId}`;
if (passcode) {
link += `?pwd=${passcode}`;
}
return link;
}
};
const handleDownload = async (format: 'png' | 'svg') => {
if (!qrRef.current) return;
try {
if (format === 'png') {
const { toPng } = await import('html-to-image');
const dataUrl = await toPng(qrRef.current, { cacheBust: true, pixelRatio: 3 });
const link = document.createElement('a');
link.download = `zoom-qr-${meetingId.replace(/\D/g, '') || 'meeting'}.png`;
link.href = dataUrl;
link.click();
} else {
const svgData = qrRef.current.querySelector('svg')?.outerHTML;
if (svgData) {
const blob = new Blob([svgData], { type: 'image/svg+xml;charset=utf-8' });
const url = URL.createObjectURL(blob);
const link = document.createElement('a');
link.href = url;
link.download = `zoom-qr-${meetingId.replace(/\D/g, '') || 'meeting'}.svg`;
link.click();
}
}
} catch (err) {
console.error('Download failed', err);
}
};
const getFrameLabel = () => {
const frame = FRAME_OPTIONS.find(f => f.id === frameType);
return frame?.id !== 'none' ? frame?.label : null;
};
return (
<div className="w-full max-w-5xl mx-auto px-4 md:px-6">
{/* Main Generator Card */}
<div className="bg-white rounded-3xl shadow-2xl shadow-slate-900/10 overflow-hidden border border-slate-100">
<div className="grid lg:grid-cols-2">
{/* LEFT: Input Section */}
<div className="p-6 md:p-8 lg:p-10 space-y-8 border-r border-slate-100">
{/* Meeting Details */}
<div className="space-y-6">
<h2 className="text-lg font-bold text-slate-900 flex items-center gap-2">
<Video className="w-5 h-5 text-[#2D8CFF]" />
Meeting Details
</h2>
<div className="space-y-4">
<div>
<label className="block text-sm font-medium text-slate-700 mb-2">Meeting ID</label>
<Input
placeholder="123 4567 8901"
value={formatMeetingId(meetingId)}
onChange={(e) => setMeetingId(e.target.value.replace(/\D/g, ''))}
className="h-12 text-base rounded-xl border-slate-200 focus:border-[#2D8CFF] focus:ring-[#2D8CFF]"
/>
<p className="text-xs text-slate-600 mt-2">The 10-11 digit meeting ID from your Zoom invite.</p>
</div>
<div>
<label className="block text-sm font-medium text-slate-700 mb-2">Passcode (Optional)</label>
<Input
placeholder="abc123"
value={passcode}
onChange={(e) => setPasscode(e.target.value)}
className="h-12 text-base rounded-xl border-slate-200 focus:border-[#2D8CFF] focus:ring-[#2D8CFF]"
/>
</div>
<div className="flex items-center gap-3">
<label className="flex items-center gap-3 cursor-pointer group">
<div className={cn(
"w-5 h-5 rounded border-2 flex items-center justify-center transition-all",
useDirectLink ? "bg-[#2D8CFF] border-[#2D8CFF]" : "border-slate-300 group-hover:border-slate-400"
)}>
{useDirectLink && <Check className="w-3.5 h-3.5 text-white" strokeWidth={3} />}
</div>
<input type="checkbox" checked={useDirectLink} onChange={(e) => setUseDirectLink(e.target.checked)} className="sr-only" />
<span className="text-sm font-medium text-slate-700">Open Zoom app directly</span>
</label>
</div>
</div>
</div>
<div className="border-t border-slate-100"></div>
{/* Design Options */}
<div className="space-y-6">
<h2 className="text-lg font-bold text-slate-900 flex items-center gap-2">
<Sparkles className="w-5 h-5 text-[#2D8CFF]" />
Design Options
</h2>
{/* Color Picker */}
<div>
<label className="block text-sm font-medium text-slate-700 mb-3">QR Code Color</label>
<div className="flex flex-wrap gap-2">
{QR_COLORS.map((c) => (
<button
key={c.name}
onClick={() => setQrColor(c.value)}
className={cn(
"w-9 h-9 rounded-full border-2 flex items-center justify-center transition-all hover:scale-110",
qrColor === c.value ? "border-slate-900 ring-2 ring-offset-2 ring-slate-200" : "border-white shadow-md"
)}
style={{ backgroundColor: c.value }}
aria-label={`Select ${c.name}`}
title={c.name}
>
{qrColor === c.value && <Check className="w-4 h-4 text-white" strokeWidth={3} />}
</button>
))}
</div>
</div>
{/* Frame Selector */}
<div>
<label className="block text-sm font-medium text-slate-700 mb-3">Frame Label</label>
<div className="grid grid-cols-2 sm:grid-cols-4 gap-2">
{FRAME_OPTIONS.map((frame) => (
<button
key={frame.id}
onClick={() => setFrameType(frame.id)}
className={cn(
"py-2.5 px-2 rounded-lg text-xs font-medium transition-all border",
frameType === frame.id
? "bg-[#2D8CFF] text-white border-[#2D8CFF]"
: "bg-slate-50 text-slate-600 border-slate-200 hover:border-slate-300"
)}
>
{frame.label}
</button>
))}
</div>
</div>
</div>
</div>
{/* RIGHT: Preview Section */}
<div className="p-6 md:p-8 lg:p-10 flex flex-col items-center justify-center" style={{ backgroundColor: BRAND.paleGrey }}>
{/* QR Card with Frame */}
<div
ref={qrRef}
className="bg-white rounded-3xl shadow-xl p-6 sm:p-8 flex flex-col items-center w-full max-w-[320px]"
>
{/* Frame Label */}
{getFrameLabel() && (
<div
className="mb-5 px-8 py-2.5 rounded-full text-white font-bold text-sm tracking-widest uppercase shadow-md"
style={{ backgroundColor: qrColor }}
>
{getFrameLabel()}
</div>
)}
{/* QR Code */}
<div className="bg-white">
<QRCodeSVG
value={generateZoomLink()}
size={240}
level="M"
includeMargin={false}
fgColor={qrColor}
/>
</div>
{/* Meeting Info */}
<div className="mt-6 text-center max-w-[260px]">
<h3 className="font-bold text-slate-900 text-lg flex items-center justify-center gap-2">
<Video className="w-4 h-4 text-[#2D8CFF] shrink-0" />
<span className="truncate">{formatMeetingId(meetingId) || 'Meeting ID'}</span>
</h3>
{passcode && (
<p className="text-sm text-slate-600 mt-1">Passcode: {passcode}</p>
)}
</div>
</div>
{/* Download Buttons */}
<div className="flex items-center gap-3 mt-8">
<Button
onClick={() => handleDownload('png')}
className="bg-[#2D8CFF] hover:bg-[#0B5CDB] text-white shadow-lg"
>
<Download className="w-4 h-4 mr-2" />
Download PNG
</Button>
<Button
onClick={() => handleDownload('svg')}
variant="outline"
className="border-slate-300 hover:bg-white"
>
<Download className="w-4 h-4 mr-2" />
SVG
</Button>
</div>
<p className="text-xs text-slate-600 mt-4 text-center">
Your meeting ID is encoded directly. Static and forever free.
</p>
</div>
</div>
</div>
{/* Upsell Banner */}
<div className="mt-8 bg-gradient-to-r from-[#2D8CFF] to-[#0B5CDB] rounded-2xl p-6 flex flex-col sm:flex-row items-center justify-between gap-4">
<div className="text-white text-center sm:text-left">
<h3 className="font-bold text-lg">Need to update meeting details?</h3>
<p className="text-white/80 text-sm mt-1">Dynamic QR Codes let you change the meeting link without reprinting.</p>
</div>
<Link href="/signup">
<Button className="bg-white text-[#2D8CFF] hover:bg-slate-100 shrink-0 shadow-lg">
Create Dynamic QR
</Button>
</Link>
</div>
</div>
);
}
'use client';
import React, { useState, useRef } from 'react';
import Link from 'next/link';
import { QRCodeSVG } from 'qrcode.react';
import {
Video,
Download,
Check,
Sparkles,
Users
} from 'lucide-react';
import { Button } from '@/components/ui/Button';
import { Input } from '@/components/ui/Input';
import { cn } from '@/lib/utils';
// Brand Colors - Zoom Blue
const BRAND = {
paleGrey: '#EFF6FF',
primary: '#2D8CFF',
primaryDark: '#0B5CDB',
};
// QR Color Options
const QR_COLORS = [
{ name: 'Zoom Blue', value: '#2D8CFF' },
{ name: 'Dark Blue', value: '#0B5CDB' },
{ name: 'Classic Black', value: '#000000' },
{ name: 'Indigo', value: '#4F46E5' },
{ name: 'Violet', value: '#7C3AED' },
{ name: 'Emerald', value: '#10B981' },
{ name: 'Rose', value: '#F43F5E' },
];
// Frame Options
const FRAME_OPTIONS = [
{ id: 'none', label: 'No Frame' },
{ id: 'scanme', label: 'Scan Me' },
{ id: 'join', label: 'Join Meeting' },
{ id: 'zoom', label: 'Zoom' },
];
export default function ZoomGenerator() {
const [meetingId, setMeetingId] = useState('');
const [passcode, setPasscode] = useState('');
const [useDirectLink, setUseDirectLink] = useState(false); // Default to web URL for compatibility
const [qrColor, setQrColor] = useState(BRAND.primary);
const [frameType, setFrameType] = useState('none');
const qrRef = useRef<HTMLDivElement>(null);
// Format meeting ID for display (xxx xxxx xxxx)
const formatMeetingId = (id: string) => {
const cleaned = id.replace(/\D/g, '');
if (cleaned.length <= 3) return cleaned;
if (cleaned.length <= 7) return `${cleaned.slice(0, 3)} ${cleaned.slice(3)}`;
return `${cleaned.slice(0, 3)} ${cleaned.slice(3, 7)} ${cleaned.slice(7, 11)}`;
};
// Generate Zoom link
const generateZoomLink = () => {
const cleanId = meetingId.replace(/\D/g, '');
if (!cleanId) return 'https://zoom.us/j/1234567890';
if (useDirectLink) {
// zoommtg protocol for direct app open
let link = `zoommtg://zoom.us/join?confno=${cleanId}`;
if (passcode) {
link += `&pwd=${passcode}`;
}
return link;
} else {
// Regular web link
let link = `https://zoom.us/j/${cleanId}`;
if (passcode) {
link += `?pwd=${passcode}`;
}
return link;
}
};
const handleDownload = async (format: 'png' | 'svg') => {
if (!qrRef.current) return;
try {
if (format === 'png') {
const { toPng } = await import('html-to-image');
const dataUrl = await toPng(qrRef.current, { cacheBust: true, pixelRatio: 3 });
const link = document.createElement('a');
link.download = `zoom-qr-${meetingId.replace(/\D/g, '') || 'meeting'}.png`;
link.href = dataUrl;
link.click();
} else {
const svgData = qrRef.current.querySelector('svg')?.outerHTML;
if (svgData) {
const blob = new Blob([svgData], { type: 'image/svg+xml;charset=utf-8' });
const url = URL.createObjectURL(blob);
const link = document.createElement('a');
link.href = url;
link.download = `zoom-qr-${meetingId.replace(/\D/g, '') || 'meeting'}.svg`;
link.click();
}
}
} catch (err) {
console.error('Download failed', err);
}
};
const getFrameLabel = () => {
const frame = FRAME_OPTIONS.find(f => f.id === frameType);
return frame?.id !== 'none' ? frame?.label : null;
};
return (
<div className="w-full max-w-5xl mx-auto px-4 md:px-6">
{/* Main Generator Card */}
<div className="bg-white rounded-3xl shadow-2xl shadow-slate-900/10 overflow-hidden border border-slate-100">
<div className="grid lg:grid-cols-2">
{/* LEFT: Input Section */}
<div className="p-6 md:p-8 lg:p-10 space-y-8 border-r border-slate-100">
{/* Meeting Details */}
<div className="space-y-6">
<h2 className="text-lg font-bold text-slate-900 flex items-center gap-2">
<Video className="w-5 h-5 text-[#2D8CFF]" />
Meeting Details
</h2>
<div className="space-y-4">
<div>
<label className="block text-sm font-medium text-slate-700 mb-2">Meeting ID</label>
<Input
placeholder="123 4567 8901"
value={formatMeetingId(meetingId)}
onChange={(e) => setMeetingId(e.target.value.replace(/\D/g, ''))}
className="h-12 text-base rounded-xl border-slate-200 focus:border-[#2D8CFF] focus:ring-[#2D8CFF]"
/>
<p className="text-xs text-slate-600 mt-2">The 10-11 digit meeting ID from your Zoom invite.</p>
</div>
<div>
<label className="block text-sm font-medium text-slate-700 mb-2">Passcode (Optional)</label>
<Input
placeholder="abc123"
value={passcode}
onChange={(e) => setPasscode(e.target.value)}
className="h-12 text-base rounded-xl border-slate-200 focus:border-[#2D8CFF] focus:ring-[#2D8CFF]"
/>
</div>
<div className="flex items-center gap-3">
<label className="flex items-center gap-3 cursor-pointer group">
<div className={cn(
"w-5 h-5 rounded border-2 flex items-center justify-center transition-all",
useDirectLink ? "bg-[#2D8CFF] border-[#2D8CFF]" : "border-slate-300 group-hover:border-slate-400"
)}>
{useDirectLink && <Check className="w-3.5 h-3.5 text-white" strokeWidth={3} />}
</div>
<input type="checkbox" checked={useDirectLink} onChange={(e) => setUseDirectLink(e.target.checked)} className="sr-only" />
<span className="text-sm font-medium text-slate-700">Open Zoom app directly</span>
</label>
</div>
</div>
</div>
<div className="border-t border-slate-100"></div>
{/* Design Options */}
<div className="space-y-6">
<h2 className="text-lg font-bold text-slate-900 flex items-center gap-2">
<Sparkles className="w-5 h-5 text-[#2D8CFF]" />
Design Options
</h2>
{/* Color Picker */}
<div>
<label className="block text-sm font-medium text-slate-700 mb-3">QR Code Color</label>
<div className="flex flex-wrap gap-2">
{QR_COLORS.map((c) => (
<button
key={c.name}
onClick={() => setQrColor(c.value)}
className={cn(
"w-9 h-9 rounded-full border-2 flex items-center justify-center transition-all hover:scale-110",
qrColor === c.value ? "border-slate-900 ring-2 ring-offset-2 ring-slate-200" : "border-white shadow-md"
)}
style={{ backgroundColor: c.value }}
aria-label={`Select ${c.name}`}
title={c.name}
>
{qrColor === c.value && <Check className="w-4 h-4 text-white" strokeWidth={3} />}
</button>
))}
</div>
</div>
{/* Frame Selector */}
<div>
<label className="block text-sm font-medium text-slate-700 mb-3">Frame Label</label>
<div className="grid grid-cols-2 sm:grid-cols-4 gap-2">
{FRAME_OPTIONS.map((frame) => (
<button
key={frame.id}
onClick={() => setFrameType(frame.id)}
className={cn(
"py-2.5 px-2 rounded-lg text-xs font-medium transition-all border",
frameType === frame.id
? "bg-[#2D8CFF] text-white border-[#2D8CFF]"
: "bg-slate-50 text-slate-600 border-slate-200 hover:border-slate-300"
)}
>
{frame.label}
</button>
))}
</div>
</div>
</div>
</div>
{/* RIGHT: Preview Section */}
<div className="p-6 md:p-8 lg:p-10 flex flex-col items-center justify-center" style={{ backgroundColor: BRAND.paleGrey }}>
{/* QR Card with Frame */}
<div
ref={qrRef}
className="bg-white rounded-3xl shadow-xl p-6 sm:p-8 flex flex-col items-center w-full max-w-[320px]"
>
{/* Frame Label */}
{getFrameLabel() && (
<div
className="mb-5 px-8 py-2.5 rounded-full text-white font-bold text-sm tracking-widest uppercase shadow-md"
style={{ backgroundColor: qrColor }}
>
{getFrameLabel()}
</div>
)}
{/* QR Code */}
<div className="bg-white">
<QRCodeSVG
value={generateZoomLink()}
size={240}
level="M"
includeMargin={false}
fgColor={qrColor}
/>
</div>
{/* Meeting Info */}
<div className="mt-6 text-center max-w-[260px]">
<h3 className="font-bold text-slate-900 text-lg flex items-center justify-center gap-2">
<Video className="w-4 h-4 text-[#2D8CFF] shrink-0" />
<span className="truncate">{formatMeetingId(meetingId) || 'Meeting ID'}</span>
</h3>
{passcode && (
<p className="text-sm text-slate-600 mt-1">Passcode: {passcode}</p>
)}
</div>
</div>
{/* Download Buttons */}
<div className="flex items-center gap-3 mt-8">
<Button
onClick={() => handleDownload('png')}
className="bg-[#2D8CFF] hover:bg-[#0B5CDB] text-white shadow-lg"
>
<Download className="w-4 h-4 mr-2" />
Download PNG
</Button>
<Button
onClick={() => handleDownload('svg')}
variant="outline"
className="border-slate-300 hover:bg-white"
>
<Download className="w-4 h-4 mr-2" />
SVG
</Button>
</div>
<p className="text-xs text-slate-600 mt-4 text-center">
Your meeting ID is encoded directly. Static and forever free.
</p>
</div>
</div>
</div>
{/* Upsell Banner */}
<div className="mt-8 bg-gradient-to-r from-[#2D8CFF] to-[#0B5CDB] rounded-2xl p-6 flex flex-col sm:flex-row items-center justify-between gap-4">
<div className="text-white text-center sm:text-left">
<h3 className="font-bold text-lg">Need to update meeting details?</h3>
<p className="text-white/80 text-sm mt-1">Dynamic QR Codes let you change the meeting link without reprinting.</p>
</div>
<Link href="/signup">
<Button className="bg-white text-[#2D8CFF] hover:bg-slate-100 shrink-0 shadow-lg">
Create Dynamic QR
</Button>
</Link>
</div>
</div>
);
}

616
src/app/(main)/(marketing)/tools/zoom-qr-code/page.tsx
View File

@@ -1,308 +1,308 @@
import React from 'react';
import type { Metadata } from 'next';
import ZoomGenerator from './ZoomGenerator';
import { Video, Shield, Zap, Smartphone, Users, Download, Share2 } from 'lucide-react';
import { QRCodeSVG } from 'qrcode.react';
import { ToolBreadcrumb } from '@/components/seo/BreadcrumbSchema';
import { RelatedTools } from '@/components/marketing/RelatedTools';
import { generateSoftwareAppSchema, generateFaqSchema } from '@/lib/schema-utils';
// SEO Optimized Metadata
export const metadata: Metadata = {
title: {
absolute: 'Free Zoom QR Code Generator | Join Meetings Instantly | QR Master',
},
description: 'Create a QR code for your Zoom meeting. Zoom QR Code erstellen. Attendees scan to join instantly. Perfect for conference rooms & invites.',
keywords: ['zoom qr code', 'zoom meeting qr', 'join zoom qr code', 'meeting room qr', 'zoom invitation qr', 'conference qr code', 'zoom qr code erstellen', 'zoom meeting qr code', 'video konferenz qr', 'zoom beitreten qr'],
alternates: {
canonical: 'https://www.qrmaster.net/tools/zoom-qr-code',
},
openGraph: {
title: 'Free Zoom QR Code Generator | QR Master',
description: 'Generate QR codes for Zoom meetings. One scan to join instantly.',
type: 'website',
url: 'https://www.qrmaster.net/tools/zoom-qr-code',
images: [{ url: '/og-zoom-generator.png', width: 1200, height: 630 }],
},
twitter: {
card: 'summary_large_image',
title: 'Free Zoom QR Code Generator',
description: 'Create Zoom meeting QR codes. Instant and free.',
},
robots: {
index: true,
follow: true,
},
};
// JSON-LD Structured Data
const jsonLd = {
'@context': 'https://schema.org',
'@graph': [
generateSoftwareAppSchema(
'Zoom QR Code Generator',
'Generate QR codes that let people join your Zoom meeting with one scan.',
'/og-zoom-generator.png',
'BusinessApplication'
),
{
'@type': 'HowTo',
name: 'How to Create a Zoom QR Code',
description: 'Create a QR code for joining Zoom meetings.',
step: [
{
'@type': 'HowToStep',
position: 1,
name: 'Enter Meeting ID',
text: 'Copy the 10-11 digit meeting ID from your Zoom invitation.',
},
{
'@type': 'HowToStep',
position: 2,
name: 'Add Passcode',
text: 'If your meeting has a passcode, enter it to include in the QR.',
},
{
'@type': 'HowToStep',
position: 3,
name: 'Choose Link Type',
text: 'Select whether to open Zoom app directly or use a web link.',
},
{
'@type': 'HowToStep',
position: 4,
name: 'Download',
text: 'Download your QR code and display it in your meeting room or invitation.',
},
],
totalTime: 'PT30S',
},
generateFaqSchema({
'What happens when someone scans the QR code?': {
question: 'What happens when someone scans the QR code?',
answer: 'The Zoom app opens directly with your meeting ID and passcode pre-filled. They just tap "Join" to enter the meeting.',
},
'Does it work for recurring meetings?': {
question: 'Does it work for recurring meetings?',
answer: 'Yes! If your recurring meeting uses a fixed Personal Meeting ID (PMI), the QR code will work for all sessions.',
},
'What if the meeting ID changes?': {
question: 'What if the meeting ID changes?',
answer: 'Static QR codes cannot be updated. You\'ll need to generate a new code. For changeable meetings, consider our Dynamic QR Codes.',
},
'Does it work on all devices?': {
question: 'Does it work on all devices?',
answer: 'Yes. The QR code works on iOS, Android, and can also open Zoom on desktop computers if the Zoom app is installed.',
},
}),
],
};
export default function ZoomQRCodePage() {
return (
<>
<script
type="application/ld+json"
dangerouslySetInnerHTML={{ __html: JSON.stringify(jsonLd) }}
/>
<ToolBreadcrumb toolName="Zoom QR Code Generator" toolSlug="zoom-qr-code" />
<div className="min-h-screen" style={{ backgroundColor: '#EBEBDF' }}>
{/* HERO SECTION */}
<section className="relative pt-20 pb-20 lg:pt-32 lg:pb-32 px-4 sm:px-6 lg:px-8 overflow-hidden" style={{ backgroundColor: '#2D8CFF' }}>
<div className="absolute inset-0 opacity-10">
<svg className="w-full h-full" viewBox="0 0 100 100" preserveAspectRatio="none">
<path d="M0 100 C 20 0 50 0 100 100 Z" fill="url(#grad1)" />
<defs>
<linearGradient id="grad1" x1="0%" y1="0%" x2="100%" y2="0%">
<stop offset="0%" style={{ stopColor: 'white', stopOpacity: 1 }} />
<stop offset="100%" style={{ stopColor: 'white', stopOpacity: 0 }} />
</linearGradient>
</defs>
</svg>
</div>
<div className="max-w-7xl mx-auto grid lg:grid-cols-2 gap-12 items-center relative z-10">
<div className="text-center lg:text-left">
<div className="inline-flex items-center gap-2 px-3 py-1 rounded-full bg-white/10 text-white/90 text-sm font-medium mb-6 backdrop-blur-sm border border-white/10 hover:bg-white/20 transition-colors cursor-default">
<span className="flex h-2 w-2 relative">
<span className="animate-ping absolute inline-flex h-full w-full rounded-full bg-white opacity-75"></span>
<span className="relative inline-flex rounded-full h-2 w-2 bg-white"></span>
</span>
Free Tool — No Signup Required
</div>
<h1 className="text-4xl md:text-5xl lg:text-6xl font-extrabold text-white tracking-tight leading-tight mb-6">
Join Meetings with <br className="hidden lg:block" />
<span className="text-transparent bg-clip-text bg-gradient-to-r from-blue-200 to-cyan-100">Zoom QR Codes</span>
</h1>
<p className="text-lg md:text-xl text-blue-100 max-w-2xl mx-auto lg:mx-0 mb-8 leading-relaxed">
Create QR codes for your Zoom meetings. Attendees scan to join instantly.
<strong className="text-white block sm:inline mt-2 sm:mt-0"> Perfect for conference rooms.</strong>
</p>
<div className="flex flex-wrap justify-center lg:justify-start gap-4 text-sm font-medium text-white/80">
<div className="flex items-center gap-2 bg-white/5 px-4 py-2.5 rounded-xl border border-white/5 backdrop-blur-sm">
<Video className="w-4 h-4 text-white" />
Direct Join
</div>
<div className="flex items-center gap-2 bg-white/5 px-4 py-2.5 rounded-xl border border-white/5 backdrop-blur-sm">
<Zap className="w-4 h-4 text-amber-300" />
Instant Open
</div>
<div className="flex items-center gap-2 bg-white/5 px-4 py-2.5 rounded-xl border border-white/5 backdrop-blur-sm">
<Users className="w-4 h-4 text-emerald-300" />
Any Device
</div>
</div>
</div>
{/* Visual Abstract */}
<div className="hidden lg:flex relative items-center justify-center min-h-[400px]">
<div className="absolute w-[500px] h-[500px] bg-blue-400/30 rounded-full blur-[100px] -top-20 -right-20 animate-pulse" />
<div className="relative w-80 h-96 bg-white/5 backdrop-blur-xl border border-white/20 rounded-3xl shadow-2xl flex flex-col items-center justify-center p-8 transform -rotate-3 hover:rotate-0 transition-all duration-700 group">
<div className="absolute inset-0 bg-gradient-to-br from-white/10 to-transparent rounded-3xl" />
{/* Meeting Card Mock */}
<div className="w-full bg-white rounded-xl shadow-lg p-4 mb-6 relative overflow-hidden">
<div className="flex items-center gap-3 mb-3">
<div className="w-10 h-10 bg-[#2D8CFF] rounded-full flex items-center justify-center">
<Video className="w-5 h-5 text-white" />
</div>
<div>
<div className="font-bold text-slate-900 text-sm">Team Standup</div>
<div className="text-xs text-slate-600">ID: 123 456 7890</div>
</div>
</div>
<div className="flex gap-2">
<div className="bg-green-100 text-green-700 text-xs px-2 py-1 rounded-full">Live</div>
<div className="bg-slate-100 text-slate-600 text-xs px-2 py-1 rounded-full">12 attending</div>
</div>
</div>
<div className="w-48 h-48 bg-white rounded-xl p-2 shadow-inner relative overflow-hidden flex items-center justify-center">
<QRCodeSVG value="https://www.qrmaster.net" size={170} fgColor="#2D8CFF" level="Q" />
</div>
{/* Floating Badge */}
<div className="absolute -bottom-6 -right-6 bg-white py-3 px-5 rounded-xl shadow-xl flex items-center gap-3 transform transition-transform hover:scale-105 duration-300">
<div className="bg-blue-100 p-2 rounded-full">
<Users className="w-5 h-5 text-[#2D8CFF]" />
</div>
<div className="text-left">
<div className="text-[10px] text-slate-400 font-bold uppercase tracking-wider">Status</div>
<div className="text-sm font-bold text-slate-900">Ready to Join</div>
</div>
</div>
</div>
</div>
</div>
</section>
{/* GENERATOR SECTION */}
<section className="py-12 px-4 sm:px-6 lg:px-8 -mt-8">
<ZoomGenerator />
</section>
{/* HOW IT WORKS */}
<section className="py-16 px-4 sm:px-6 lg:px-8 bg-white">
<div className="max-w-4xl mx-auto">
<h2 className="text-3xl font-bold text-slate-900 text-center mb-12">
How Zoom QR Codes Work
</h2>
<div className="grid md:grid-cols-4 gap-8">
<article className="text-center">
<div className="w-12 h-12 rounded-2xl bg-[#2D8CFF]/10 flex items-center justify-center mx-auto mb-4">
<Video className="w-6 h-6 text-[#2D8CFF]" />
</div>
<h3 className="font-bold text-slate-900 mb-2">1. Meeting ID</h3>
<p className="text-slate-600 text-xs leading-relaxed">Enter your Zoom meeting ID.</p>
</article>
<article className="text-center">
<div className="w-12 h-12 rounded-2xl bg-[#2D8CFF]/10 flex items-center justify-center mx-auto mb-4">
<Shield className="w-6 h-6 text-[#2D8CFF]" />
</div>
<h3 className="font-bold text-slate-900 mb-2">2. Passcode</h3>
<p className="text-slate-600 text-xs leading-relaxed">Add passcode if required.</p>
</article>
<article className="text-center">
<div className="w-12 h-12 rounded-2xl bg-[#2D8CFF]/10 flex items-center justify-center mx-auto mb-4">
<Download className="w-6 h-6 text-[#2D8CFF]" />
</div>
<h3 className="font-bold text-slate-900 mb-2">3. Download</h3>
<p className="text-slate-600 text-xs leading-relaxed">Save your QR code.</p>
</article>
<article className="text-center">
<div className="w-12 h-12 rounded-2xl bg-[#2D8CFF]/10 flex items-center justify-center mx-auto mb-4">
<Share2 className="w-6 h-6 text-[#2D8CFF]" />
</div>
<h3 className="font-bold text-slate-900 mb-2">4. Display</h3>
<p className="text-slate-600 text-xs leading-relaxed">Put in meeting rooms or invites.</p>
</article>
</div>
</div>
</section>
{/* RELATED TOOLS */}
<RelatedTools />
{/* FAQ SECTION */}
<section className="py-16 px-4 sm:px-6 lg:px-8" style={{ backgroundColor: '#EBEBDF' }}>
<div className="max-w-3xl mx-auto">
<h2 className="text-3xl font-bold text-slate-900 text-center mb-4">
Frequently Asked Questions
</h2>
<p className="text-slate-600 text-center mb-10">
Common questions about Zoom QR codes.
</p>
<div className="space-y-4">
<FaqItem
question="What happens when someone scans the QR code?"
answer="The Zoom app opens directly with your meeting ID and passcode pre-filled. They just tap 'Join' to enter the meeting."
/>
<FaqItem
question="Does it work for recurring meetings?"
answer="Yes! If your recurring meeting uses a fixed Personal Meeting ID (PMI), the QR code will work for all sessions."
/>
<FaqItem
question="What if the meeting ID changes?"
answer="Static QR codes cannot be updated. You'll need to generate a new code. For changeable meetings, consider our Dynamic QR Codes."
/>
<FaqItem
question="Does it work without the Zoom app installed?"
answer="If 'Open Zoom app directly' is unchecked, the QR links to join.zoom.us which works in any browser."
/>
</div>
</div>
</section>
</div>
</>
);
}
function FaqItem({ question, answer }: { question: string; answer: string }) {
return (
<details className="group bg-white rounded-xl shadow-sm border border-slate-200 overflow-hidden">
<summary className="flex items-center justify-between p-5 cursor-pointer list-none text-slate-900 font-semibold hover:bg-slate-50 transition-colors">
{question}
<span className="transition group-open:rotate-180 text-slate-400">
<svg fill="none" height="20" stroke="currentColor" strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" viewBox="0 0 24 24" width="20">
<path d="M6 9l6 6 6-6" />
</svg>
</span>
</summary>
<div className="text-slate-600 px-5 pb-5 pt-0 leading-relaxed text-sm">
{answer}
</div>
</details>
);
}
import React from 'react';
import type { Metadata } from 'next';
import ZoomGenerator from './ZoomGenerator';
import { Video, Shield, Zap, Smartphone, Users, Download, Share2 } from 'lucide-react';
import { QRCodeSVG } from 'qrcode.react';
import { ToolBreadcrumb } from '@/components/seo/BreadcrumbSchema';
import { RelatedTools } from '@/components/marketing/RelatedTools';
import { generateSoftwareAppSchema, generateFaqSchema } from '@/lib/schema-utils';
// SEO Optimized Metadata
export const metadata: Metadata = {
title: {
absolute: 'Free Zoom QR Code Generator | Join Meetings Instantly | QR Master',
},
description: 'Create a QR code for your Zoom meeting. Zoom QR Code erstellen. Attendees scan to join instantly. Perfect for conference rooms & invites.',
keywords: ['zoom qr code', 'zoom meeting qr', 'join zoom qr code', 'meeting room qr', 'zoom invitation qr', 'conference qr code', 'zoom qr code erstellen', 'zoom meeting qr code', 'video konferenz qr', 'zoom beitreten qr'],
alternates: {
canonical: 'https://www.qrmaster.net/tools/zoom-qr-code',
},
openGraph: {
title: 'Free Zoom QR Code Generator | QR Master',
description: 'Generate QR codes for Zoom meetings. One scan to join instantly.',
type: 'website',
url: 'https://www.qrmaster.net/tools/zoom-qr-code',
images: [{ url: '/og-zoom-generator.png', width: 1200, height: 630 }],
},
twitter: {
card: 'summary_large_image',
title: 'Free Zoom QR Code Generator',
description: 'Create Zoom meeting QR codes. Instant and free.',
},
robots: {
index: true,
follow: true,
},
};
// JSON-LD Structured Data
const jsonLd = {
'@context': 'https://schema.org',
'@graph': [
generateSoftwareAppSchema(
'Zoom QR Code Generator',
'Generate QR codes that let people join your Zoom meeting with one scan.',
'/og-zoom-generator.png',
'BusinessApplication'
),
{
'@type': 'HowTo',
name: 'How to Create a Zoom QR Code',
description: 'Create a QR code for joining Zoom meetings.',
step: [
{
'@type': 'HowToStep',
position: 1,
name: 'Enter Meeting ID',
text: 'Copy the 10-11 digit meeting ID from your Zoom invitation.',
},
{
'@type': 'HowToStep',
position: 2,
name: 'Add Passcode',
text: 'If your meeting has a passcode, enter it to include in the QR.',
},
{
'@type': 'HowToStep',
position: 3,
name: 'Choose Link Type',
text: 'Select whether to open Zoom app directly or use a web link.',
},
{
'@type': 'HowToStep',
position: 4,
name: 'Download',
text: 'Download your QR code and display it in your meeting room or invitation.',
},
],
totalTime: 'PT30S',
},
generateFaqSchema({
'What happens when someone scans the QR code?': {
question: 'What happens when someone scans the QR code?',
answer: 'The Zoom app opens directly with your meeting ID and passcode pre-filled. They just tap "Join" to enter the meeting.',
},
'Does it work for recurring meetings?': {
question: 'Does it work for recurring meetings?',
answer: 'Yes! If your recurring meeting uses a fixed Personal Meeting ID (PMI), the QR code will work for all sessions.',
},
'What if the meeting ID changes?': {
question: 'What if the meeting ID changes?',
answer: 'Static QR codes cannot be updated. You\'ll need to generate a new code. For changeable meetings, consider our Dynamic QR Codes.',
},
'Does it work on all devices?': {
question: 'Does it work on all devices?',
answer: 'Yes. The QR code works on iOS, Android, and can also open Zoom on desktop computers if the Zoom app is installed.',
},
}),
],
};
export default function ZoomQRCodePage() {
return (
<>
<script
type="application/ld+json"
dangerouslySetInnerHTML={{ __html: JSON.stringify(jsonLd) }}
/>
<ToolBreadcrumb toolName="Zoom QR Code Generator" toolSlug="zoom-qr-code" />
<div className="min-h-screen" style={{ backgroundColor: '#EBEBDF' }}>
{/* HERO SECTION */}
<section className="relative pt-20 pb-20 lg:pt-32 lg:pb-32 px-4 sm:px-6 lg:px-8 overflow-hidden" style={{ backgroundColor: '#2D8CFF' }}>
<div className="absolute inset-0 opacity-10">
<svg className="w-full h-full" viewBox="0 0 100 100" preserveAspectRatio="none">
<path d="M0 100 C 20 0 50 0 100 100 Z" fill="url(#grad1)" />
<defs>
<linearGradient id="grad1" x1="0%" y1="0%" x2="100%" y2="0%">
<stop offset="0%" style={{ stopColor: 'white', stopOpacity: 1 }} />
<stop offset="100%" style={{ stopColor: 'white', stopOpacity: 0 }} />
</linearGradient>
</defs>
</svg>
</div>
<div className="max-w-7xl mx-auto grid lg:grid-cols-2 gap-12 items-center relative z-10">
<div className="text-center lg:text-left">
<div className="inline-flex items-center gap-2 px-3 py-1 rounded-full bg-white/10 text-white/90 text-sm font-medium mb-6 backdrop-blur-sm border border-white/10 hover:bg-white/20 transition-colors cursor-default">
<span className="flex h-2 w-2 relative">
<span className="animate-ping absolute inline-flex h-full w-full rounded-full bg-white opacity-75"></span>
<span className="relative inline-flex rounded-full h-2 w-2 bg-white"></span>
</span>
Free Tool — No Signup Required
</div>
<h1 className="text-4xl md:text-5xl lg:text-6xl font-extrabold text-white tracking-tight leading-tight mb-6">
Join Meetings with <br className="hidden lg:block" />
<span className="text-transparent bg-clip-text bg-gradient-to-r from-blue-200 to-cyan-100">Zoom QR Codes</span>
</h1>
<p className="text-lg md:text-xl text-blue-100 max-w-2xl mx-auto lg:mx-0 mb-8 leading-relaxed">
Create QR codes for your Zoom meetings. Attendees scan to join instantly.
<strong className="text-white block sm:inline mt-2 sm:mt-0"> Perfect for conference rooms.</strong>
</p>
<div className="flex flex-wrap justify-center lg:justify-start gap-4 text-sm font-medium text-white/80">
<div className="flex items-center gap-2 bg-white/5 px-4 py-2.5 rounded-xl border border-white/5 backdrop-blur-sm">
<Video className="w-4 h-4 text-white" />
Direct Join
</div>
<div className="flex items-center gap-2 bg-white/5 px-4 py-2.5 rounded-xl border border-white/5 backdrop-blur-sm">
<Zap className="w-4 h-4 text-amber-300" />
Instant Open
</div>
<div className="flex items-center gap-2 bg-white/5 px-4 py-2.5 rounded-xl border border-white/5 backdrop-blur-sm">
<Users className="w-4 h-4 text-emerald-300" />
Any Device
</div>
</div>
</div>
{/* Visual Abstract */}
<div className="hidden lg:flex relative items-center justify-center min-h-[400px]">
<div className="absolute w-[500px] h-[500px] bg-blue-400/30 rounded-full blur-[100px] -top-20 -right-20 animate-pulse" />
<div className="relative w-80 h-96 bg-white/5 backdrop-blur-xl border border-white/20 rounded-3xl shadow-2xl flex flex-col items-center justify-center p-8 transform -rotate-3 hover:rotate-0 transition-all duration-700 group">
<div className="absolute inset-0 bg-gradient-to-br from-white/10 to-transparent rounded-3xl" />
{/* Meeting Card Mock */}
<div className="w-full bg-white rounded-xl shadow-lg p-4 mb-6 relative overflow-hidden">
<div className="flex items-center gap-3 mb-3">
<div className="w-10 h-10 bg-[#2D8CFF] rounded-full flex items-center justify-center">
<Video className="w-5 h-5 text-white" />
</div>
<div>
<div className="font-bold text-slate-900 text-sm">Team Standup</div>
<div className="text-xs text-slate-600">ID: 123 456 7890</div>
</div>
</div>
<div className="flex gap-2">
<div className="bg-green-100 text-green-700 text-xs px-2 py-1 rounded-full">Live</div>
<div className="bg-slate-100 text-slate-600 text-xs px-2 py-1 rounded-full">12 attending</div>
</div>
</div>
<div className="w-48 h-48 bg-white rounded-xl p-2 shadow-inner relative overflow-hidden flex items-center justify-center">
<QRCodeSVG value="https://www.qrmaster.net" size={170} fgColor="#2D8CFF" level="Q" />
</div>
{/* Floating Badge */}
<div className="absolute -bottom-6 -right-6 bg-white py-3 px-5 rounded-xl shadow-xl flex items-center gap-3 transform transition-transform hover:scale-105 duration-300">
<div className="bg-blue-100 p-2 rounded-full">
<Users className="w-5 h-5 text-[#2D8CFF]" />
</div>
<div className="text-left">
<div className="text-[10px] text-slate-400 font-bold uppercase tracking-wider">Status</div>
<div className="text-sm font-bold text-slate-900">Ready to Join</div>
</div>
</div>
</div>
</div>
</div>
</section>
{/* GENERATOR SECTION */}
<section className="py-12 px-4 sm:px-6 lg:px-8 -mt-8">
<ZoomGenerator />
</section>
{/* HOW IT WORKS */}
<section className="py-16 px-4 sm:px-6 lg:px-8 bg-white">
<div className="max-w-4xl mx-auto">
<h2 className="text-3xl font-bold text-slate-900 text-center mb-12">
How Zoom QR Codes Work
</h2>
<div className="grid md:grid-cols-4 gap-8">
<article className="text-center">
<div className="w-12 h-12 rounded-2xl bg-[#2D8CFF]/10 flex items-center justify-center mx-auto mb-4">
<Video className="w-6 h-6 text-[#2D8CFF]" />
</div>
<h3 className="font-bold text-slate-900 mb-2">1. Meeting ID</h3>
<p className="text-slate-600 text-xs leading-relaxed">Enter your Zoom meeting ID.</p>
</article>
<article className="text-center">
<div className="w-12 h-12 rounded-2xl bg-[#2D8CFF]/10 flex items-center justify-center mx-auto mb-4">
<Shield className="w-6 h-6 text-[#2D8CFF]" />
</div>
<h3 className="font-bold text-slate-900 mb-2">2. Passcode</h3>
<p className="text-slate-600 text-xs leading-relaxed">Add passcode if required.</p>
</article>
<article className="text-center">
<div className="w-12 h-12 rounded-2xl bg-[#2D8CFF]/10 flex items-center justify-center mx-auto mb-4">
<Download className="w-6 h-6 text-[#2D8CFF]" />
</div>
<h3 className="font-bold text-slate-900 mb-2">3. Download</h3>
<p className="text-slate-600 text-xs leading-relaxed">Save your QR code.</p>
</article>
<article className="text-center">
<div className="w-12 h-12 rounded-2xl bg-[#2D8CFF]/10 flex items-center justify-center mx-auto mb-4">
<Share2 className="w-6 h-6 text-[#2D8CFF]" />
</div>
<h3 className="font-bold text-slate-900 mb-2">4. Display</h3>
<p className="text-slate-600 text-xs leading-relaxed">Put in meeting rooms or invites.</p>
</article>
</div>
</div>
</section>
{/* RELATED TOOLS */}
<RelatedTools />
{/* FAQ SECTION */}
<section className="py-16 px-4 sm:px-6 lg:px-8" style={{ backgroundColor: '#EBEBDF' }}>
<div className="max-w-3xl mx-auto">
<h2 className="text-3xl font-bold text-slate-900 text-center mb-4">
Frequently Asked Questions
</h2>
<p className="text-slate-600 text-center mb-10">
Common questions about Zoom QR codes.
</p>
<div className="space-y-4">
<FaqItem
question="What happens when someone scans the QR code?"
answer="The Zoom app opens directly with your meeting ID and passcode pre-filled. They just tap 'Join' to enter the meeting."
/>
<FaqItem
question="Does it work for recurring meetings?"
answer="Yes! If your recurring meeting uses a fixed Personal Meeting ID (PMI), the QR code will work for all sessions."
/>
<FaqItem
question="What if the meeting ID changes?"
answer="Static QR codes cannot be updated. You'll need to generate a new code. For changeable meetings, consider our Dynamic QR Codes."
/>
<FaqItem
question="Does it work without the Zoom app installed?"
answer="If 'Open Zoom app directly' is unchecked, the QR links to join.zoom.us which works in any browser."
/>
</div>
</div>
</section>
</div>
</>
);
}
function FaqItem({ question, answer }: { question: string; answer: string }) {
return (
<details className="group bg-white rounded-xl shadow-sm border border-slate-200 overflow-hidden">
<summary className="flex items-center justify-between p-5 cursor-pointer list-none text-slate-900 font-semibold hover:bg-slate-50 transition-colors">
{question}
<span className="transition group-open:rotate-180 text-slate-400">
<svg fill="none" height="20" stroke="currentColor" strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" viewBox="0 0 24 24" width="20">
<path d="M6 9l6 6 6-6" />
</svg>
</span>
</summary>
<div className="text-slate-600 px-5 pb-5 pt-0 leading-relaxed text-sm">
{answer}
</div>
</details>
);
}

436
src/app/(main)/api/admin/stats/route.ts
View File

@@ -1,218 +1,218 @@
import { NextRequest, NextResponse } from 'next/server';
import { cookies } from 'next/headers';
import { db } from '@/lib/db';
export const dynamic = 'force-dynamic';
export async function GET(request: NextRequest) {
try {
// Check newsletter-admin cookie authentication
const cookieStore = cookies();
const adminCookie = cookieStore.get('newsletter-admin');
if (!adminCookie || adminCookie.value !== 'authenticated') {
return NextResponse.json(
{ error: 'Unauthorized - Admin login required' },
{ status: 401 }
);
}
// Get 30 days ago date
const thirtyDaysAgo = new Date();
thirtyDaysAgo.setDate(thirtyDaysAgo.getDate() - 30);
// Get 7 days ago date
const sevenDaysAgo = new Date();
sevenDaysAgo.setDate(sevenDaysAgo.getDate() - 7);
// Get start of current month
const startOfMonth = new Date();
startOfMonth.setDate(1);
startOfMonth.setHours(0, 0, 0, 0);
// Fetch all statistics in parallel
const [
totalUsers,
premiumUsers,
newUsersThisWeek,
newUsersThisMonth,
totalQRCodes,
dynamicQRCodes,
staticQRCodes,
totalScans,
dynamicQRCodesWithScans,
activeQRCodes,
newsletterSubscribers,
] = await Promise.all([
// Total users
db.user.count(),
// Premium users (PRO or BUSINESS)
db.user.count({
where: {
plan: {
in: ['PRO', 'BUSINESS'],
},
},
}),
// New users this week
db.user.count({
where: {
createdAt: {
gte: sevenDaysAgo,
},
},
}),
// New users this month
db.user.count({
where: {
createdAt: {
gte: startOfMonth,
},
},
}),
// Total QR codes
db.qRCode.count(),
// Dynamic QR codes
db.qRCode.count({
where: {
type: 'DYNAMIC',
},
}),
// Static QR codes
db.qRCode.count({
where: {
type: 'STATIC',
},
}),
// Total scans
db.qRScan.count(),
// Get all dynamic QR codes with their scan counts
db.qRCode.findMany({
where: {
type: 'DYNAMIC',
},
include: {
_count: {
select: {
scans: true,
},
},
},
}),
// Active QR codes (scanned in last 30 days)
db.qRCode.findMany({
where: {
scans: {
some: {
ts: {
gte: thirtyDaysAgo,
},
},
},
},
distinct: ['id'],
}),
// Newsletter subscribers
db.newsletterSubscription.count({
where: {
status: 'subscribed',
},
}),
]);
// Calculate dynamic QR scans
const dynamicQRScans = dynamicQRCodesWithScans.reduce(
(total, qr) => total + qr._count.scans,
0
);
// Calculate average scans per dynamic QR
const avgScansPerDynamicQR =
dynamicQRCodes > 0 ? (dynamicQRScans / dynamicQRCodes).toFixed(1) : '0';
// Get top 5 most scanned QR codes
const topQRCodes = await db.qRCode.findMany({
take: 5,
include: {
_count: {
select: {
scans: true,
},
},
user: {
select: {
email: true,
name: true,
},
},
},
orderBy: {
scans: {
_count: 'desc',
},
},
});
// Get recent users
const recentUsers = await db.user.findMany({
take: 5,
orderBy: {
createdAt: 'desc',
},
select: {
email: true,
name: true,
plan: true,
createdAt: true,
},
});
return NextResponse.json({
users: {
total: totalUsers,
premium: premiumUsers,
newThisWeek: newUsersThisWeek,
newThisMonth: newUsersThisMonth,
recent: recentUsers,
},
qrCodes: {
total: totalQRCodes,
dynamic: dynamicQRCodes,
static: staticQRCodes,
active: activeQRCodes.length,
},
scans: {
total: totalScans,
dynamicOnly: dynamicQRScans,
avgPerDynamicQR: avgScansPerDynamicQR,
},
newsletter: {
subscribers: newsletterSubscribers,
},
topQRCodes: topQRCodes.map((qr) => ({
id: qr.id,
title: qr.title,
type: qr.type,
scans: qr._count.scans,
owner: qr.user.name || qr.user.email,
createdAt: qr.createdAt,
})),
});
} catch (error) {
console.error('Error fetching admin stats:', error);
return NextResponse.json(
{ error: 'Failed to fetch statistics' },
{ status: 500 }
);
}
}
import { NextRequest, NextResponse } from 'next/server';
import { cookies } from 'next/headers';
import { db } from '@/lib/db';
export const dynamic = 'force-dynamic';
export async function GET(request: NextRequest) {
try {
// Check newsletter-admin cookie authentication
const cookieStore = cookies();
const adminCookie = cookieStore.get('newsletter-admin');
if (!adminCookie || adminCookie.value !== 'authenticated') {
return NextResponse.json(
{ error: 'Unauthorized - Admin login required' },
{ status: 401 }
);
}
// Get 30 days ago date
const thirtyDaysAgo = new Date();
thirtyDaysAgo.setDate(thirtyDaysAgo.getDate() - 30);
// Get 7 days ago date
const sevenDaysAgo = new Date();
sevenDaysAgo.setDate(sevenDaysAgo.getDate() - 7);
// Get start of current month
const startOfMonth = new Date();
startOfMonth.setDate(1);
startOfMonth.setHours(0, 0, 0, 0);
// Fetch all statistics in parallel
const [
totalUsers,
premiumUsers,
newUsersThisWeek,
newUsersThisMonth,
totalQRCodes,
dynamicQRCodes,
staticQRCodes,
totalScans,
dynamicQRCodesWithScans,
activeQRCodes,
newsletterSubscribers,
] = await Promise.all([
// Total users
db.user.count(),
// Premium users (PRO or BUSINESS)
db.user.count({
where: {
plan: {
in: ['PRO', 'BUSINESS'],
},
},
}),
// New users this week
db.user.count({
where: {
createdAt: {
gte: sevenDaysAgo,
},
},
}),
// New users this month
db.user.count({
where: {
createdAt: {
gte: startOfMonth,
},
},
}),
// Total QR codes
db.qRCode.count(),
// Dynamic QR codes
db.qRCode.count({
where: {
type: 'DYNAMIC',
},
}),
// Static QR codes
db.qRCode.count({
where: {
type: 'STATIC',
},
}),
// Total scans
db.qRScan.count(),
// Get all dynamic QR codes with their scan counts
db.qRCode.findMany({
where: {
type: 'DYNAMIC',
},
include: {
_count: {
select: {
scans: true,
},
},
},
}),
// Active QR codes (scanned in last 30 days)
db.qRCode.findMany({
where: {
scans: {
some: {
ts: {
gte: thirtyDaysAgo,
},
},
},
},
distinct: ['id'],
}),
// Newsletter subscribers
db.newsletterSubscription.count({
where: {
status: 'subscribed',
},
}),
]);
// Calculate dynamic QR scans
const dynamicQRScans = dynamicQRCodesWithScans.reduce(
(total, qr) => total + qr._count.scans,
0
);
// Calculate average scans per dynamic QR
const avgScansPerDynamicQR =
dynamicQRCodes > 0 ? (dynamicQRScans / dynamicQRCodes).toFixed(1) : '0';
// Get top 5 most scanned QR codes
const topQRCodes = await db.qRCode.findMany({
take: 5,
include: {
_count: {
select: {
scans: true,
},
},
user: {
select: {
email: true,
name: true,
},
},
},
orderBy: {
scans: {
_count: 'desc',
},
},
});
// Get recent users
const recentUsers = await db.user.findMany({
take: 5,
orderBy: {
createdAt: 'desc',
},
select: {
email: true,
name: true,
plan: true,
createdAt: true,
},
});
return NextResponse.json({
users: {
total: totalUsers,
premium: premiumUsers,
newThisWeek: newUsersThisWeek,
newThisMonth: newUsersThisMonth,
recent: recentUsers,
},
qrCodes: {
total: totalQRCodes,
dynamic: dynamicQRCodes,
static: staticQRCodes,
active: activeQRCodes.length,
},
scans: {
total: totalScans,
dynamicOnly: dynamicQRScans,
avgPerDynamicQR: avgScansPerDynamicQR,
},
newsletter: {
subscribers: newsletterSubscribers,
},
topQRCodes: topQRCodes.map((qr) => ({
id: qr.id,
title: qr.title,
type: qr.type,
scans: qr._count.scans,
owner: qr.user.name || qr.user.email,
createdAt: qr.createdAt,
})),
});
} catch (error) {
console.error('Error fetching admin stats:', error);
return NextResponse.json(
{ error: 'Failed to fetch statistics' },
{ status: 500 }
);
}
}

574
src/app/(main)/api/analytics/summary/route.ts
View File

@@ -1,288 +1,288 @@
import { NextRequest, NextResponse } from 'next/server';
import { cookies } from 'next/headers';
import { db } from '@/lib/db';
import { rateLimit, getClientIdentifier, RateLimits } from '@/lib/rateLimit';
import { TrendData } from '@/types/analytics';
export const dynamic = 'force-dynamic';
// Helper function to calculate trend with proper edge case handling
function calculateTrend(current: number, previous: number): TrendData {
// Handle edge case: no data in either period
if (previous === 0 && current === 0) {
return { trend: 'flat', percentage: 0 };
}
// Handle new growth from zero - mark as "new" to distinguish from actual 100% growth
if (previous === 0 && current > 0) {
return { trend: 'up', percentage: 100, isNew: true };
}
// Calculate actual percentage change
const change = ((current - previous) / previous) * 100;
const roundedChange = Math.round(change);
// Determine trend direction (use threshold of 5% to filter noise)
let trend: 'up' | 'down' | 'flat';
if (roundedChange > 5) {
trend = 'up';
} else if (roundedChange < -5) {
trend = 'down';
} else {
trend = 'flat';
}
return {
trend,
percentage: Math.abs(roundedChange),
isNegative: roundedChange < 0
};
}
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 });
}
// Get date range from query params (default: last 30 days)
const { searchParams } = request.nextUrl;
const range = searchParams.get('range') || '30';
const daysInRange = parseInt(range, 10);
// Standardize to week (7 days) or month (30 days) for clear comparison labels
const comparisonDays = daysInRange <= 7 ? 7 : 30;
const comparisonPeriod: 'week' | 'month' = comparisonDays === 7 ? 'week' : 'month';
// Calculate current and previous period dates
const now = new Date();
const currentPeriodStart = new Date();
currentPeriodStart.setDate(now.getDate() - comparisonDays);
const previousPeriodEnd = new Date(currentPeriodStart);
const previousPeriodStart = new Date(previousPeriodEnd);
previousPeriodStart.setDate(previousPeriodEnd.getDate() - comparisonDays);
// Get user's QR codes with scans filtered by period
const qrCodes = await db.qRCode.findMany({
where: { userId },
include: {
scans: {
where: {
ts: {
gte: currentPeriodStart,
},
},
},
},
});
// Get previous period scans for comparison
const qrCodesWithPreviousScans = await db.qRCode.findMany({
where: { userId },
include: {
scans: {
where: {
ts: {
gte: previousPeriodStart,
lt: previousPeriodEnd,
},
},
},
},
});
// Calculate current period stats
const totalScans = qrCodes.reduce((sum, qr) => sum + qr.scans.length, 0);
const uniqueScans = qrCodes.reduce((sum, qr) =>
sum + qr.scans.filter(s => s.isUnique).length, 0
);
// Calculate previous period stats for comparison
const previousTotalScans = qrCodesWithPreviousScans.reduce((sum, qr) => sum + qr.scans.length, 0);
const previousUniqueScans = qrCodesWithPreviousScans.reduce((sum, qr) =>
sum + qr.scans.filter(s => s.isUnique).length, 0
);
// Calculate average scans per QR code (only count QR codes with scans)
const qrCodesWithScans = qrCodes.filter(qr => qr.scans.length > 0).length;
const avgScansPerQR = qrCodesWithScans > 0
? Math.round(totalScans / qrCodesWithScans)
: 0;
// Calculate previous period average scans per QR
const previousQrCodesWithScans = qrCodesWithPreviousScans.filter(qr => qr.scans.length > 0).length;
const previousAvgScansPerQR = previousQrCodesWithScans > 0
? Math.round(previousTotalScans / previousQrCodesWithScans)
: 0;
// Calculate trends
const scansTrend = calculateTrend(totalScans, previousTotalScans);
// New Conversion Rate Logic: (Unique Scans / Total Scans) * 100
// This represents "Engagement Efficiency" - how many scans are from fresh users
const currentConversion = totalScans > 0 ? Math.round((uniqueScans / totalScans) * 100) : 0;
const previousConversion = previousTotalScans > 0
? Math.round((previousUniqueScans / previousTotalScans) * 100)
: 0;
const avgScansTrend = calculateTrend(avgScansPerQR, previousAvgScansPerQR);
// Device stats
const deviceStats = qrCodes.flatMap(qr => qr.scans)
.reduce((acc, scan) => {
const device = scan.device || 'unknown';
acc[device] = (acc[device] || 0) + 1;
return acc;
}, {} as Record<string, number>);
const mobileScans = (deviceStats.mobile || 0) + (deviceStats.tablet || 0);
const mobilePercentage = totalScans > 0
? Math.round((mobileScans / totalScans) * 100)
: 0;
// Country stats (current period)
const countryStats = qrCodes.flatMap(qr => qr.scans)
.reduce((acc, scan) => {
const country = scan.country ?? 'Unknown Location';
acc[country] = (acc[country] || 0) + 1;
return acc;
}, {} as Record<string, number>);
// Country stats (previous period)
const previousCountryStats = qrCodesWithPreviousScans.flatMap(qr => qr.scans)
.reduce((acc, scan) => {
const country = scan.country ?? 'Unknown Location';
acc[country] = (acc[country] || 0) + 1;
return acc;
}, {} as Record<string, number>);
const topCountry = Object.entries(countryStats)
.sort(([, a], [, b]) => b - a)[0];
// Daily scan counts for chart (current period)
const dailyScans = qrCodes.flatMap(qr => qr.scans).reduce((acc, scan) => {
const date = new Date(scan.ts).toISOString().split('T')[0];
acc[date] = (acc[date] || 0) + 1;
return acc;
}, {} as Record<string, number>);
// Generate last 7 days for sparkline
const last7Days = Array.from({ length: 7 }, (_, i) => {
const date = new Date();
date.setDate(date.getDate() - (6 - i));
return date.toISOString().split('T')[0];
});
// QR performance (only show DYNAMIC QR codes since STATIC don't track scans)
const qrPerformance = qrCodes
.filter(qr => qr.type === 'DYNAMIC')
.map(qr => {
const currentTotal = qr.scans.length;
const currentUnique = qr.scans.filter(s => s.isUnique).length;
// Find previous period data for this QR code
const previousQR = qrCodesWithPreviousScans.find(prev => prev.id === qr.id);
const previousTotal = previousQR ? previousQR.scans.length : 0;
// Calculate trend
const trendData = calculateTrend(currentTotal, previousTotal);
// Calculate sparkline data (scans per day for last 7 days)
const sparklineData = last7Days.map(date => {
return qr.scans.filter(s =>
new Date(s.ts).toISOString().split('T')[0] === date
).length;
});
// Find last scanned date
const lastScanned = qr.scans.length > 0
? new Date(Math.max(...qr.scans.map(s => new Date(s.ts).getTime())))
: null;
return {
id: qr.id,
title: qr.title,
type: qr.type,
totalScans: currentTotal,
uniqueScans: currentUnique,
conversion: currentTotal > 0
? Math.round((currentUnique / currentTotal) * 100)
: 0,
trend: trendData.trend,
trendPercentage: trendData.percentage,
sparkline: sparklineData,
lastScanned: lastScanned?.toISOString() || null,
...(trendData.isNew && { isNew: true }),
};
})
.sort((a, b) => b.totalScans - a.totalScans);
return NextResponse.json({
summary: {
totalScans,
uniqueScans,
avgScansPerQR,
mobilePercentage,
topCountry: topCountry ? topCountry[0] : 'N/A',
topCountryPercentage: topCountry && totalScans > 0
? Math.round((topCountry[1] / totalScans) * 100)
: 0,
scansTrend,
avgScansTrend,
comparisonPeriod,
comparisonDays,
},
deviceStats,
countryStats: Object.entries(countryStats)
.sort(([, a], [, b]) => b - a)
.slice(0, 10)
.map(([country, count]) => {
const previousCount = previousCountryStats[country] || 0;
const trendData = calculateTrend(count, previousCount);
return {
country,
count,
percentage: totalScans > 0
? Math.round((count / totalScans) * 100)
: 0,
trend: trendData.trend,
trendPercentage: trendData.percentage,
...(trendData.isNew && { isNew: true }),
};
}),
dailyScans,
qrPerformance: qrPerformance.slice(0, 10),
});
} catch (error) {
console.error('Error fetching analytics:', error);
return NextResponse.json(
{ error: 'Internal server error' },
{ status: 500 }
);
}
import { NextRequest, NextResponse } from 'next/server';
import { cookies } from 'next/headers';
import { db } from '@/lib/db';
import { rateLimit, getClientIdentifier, RateLimits } from '@/lib/rateLimit';
import { TrendData } from '@/types/analytics';
export const dynamic = 'force-dynamic';
// Helper function to calculate trend with proper edge case handling
function calculateTrend(current: number, previous: number): TrendData {
// Handle edge case: no data in either period
if (previous === 0 && current === 0) {
return { trend: 'flat', percentage: 0 };
}
// Handle new growth from zero - mark as "new" to distinguish from actual 100% growth
if (previous === 0 && current > 0) {
return { trend: 'up', percentage: 100, isNew: true };
}
// Calculate actual percentage change
const change = ((current - previous) / previous) * 100;
const roundedChange = Math.round(change);
// Determine trend direction (use threshold of 5% to filter noise)
let trend: 'up' | 'down' | 'flat';
if (roundedChange > 5) {
trend = 'up';
} else if (roundedChange < -5) {
trend = 'down';
} else {
trend = 'flat';
}
return {
trend,
percentage: Math.abs(roundedChange),
isNegative: roundedChange < 0
};
}
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 });
}
// Get date range from query params (default: last 30 days)
const { searchParams } = request.nextUrl;
const range = searchParams.get('range') || '30';
const daysInRange = parseInt(range, 10);
// Standardize to week (7 days) or month (30 days) for clear comparison labels
const comparisonDays = daysInRange <= 7 ? 7 : 30;
const comparisonPeriod: 'week' | 'month' = comparisonDays === 7 ? 'week' : 'month';
// Calculate current and previous period dates
const now = new Date();
const currentPeriodStart = new Date();
currentPeriodStart.setDate(now.getDate() - comparisonDays);
const previousPeriodEnd = new Date(currentPeriodStart);
const previousPeriodStart = new Date(previousPeriodEnd);
previousPeriodStart.setDate(previousPeriodEnd.getDate() - comparisonDays);
// Get user's QR codes with scans filtered by period
const qrCodes = await db.qRCode.findMany({
where: { userId },
include: {
scans: {
where: {
ts: {
gte: currentPeriodStart,
},
},
},
},
});
// Get previous period scans for comparison
const qrCodesWithPreviousScans = await db.qRCode.findMany({
where: { userId },
include: {
scans: {
where: {
ts: {
gte: previousPeriodStart,
lt: previousPeriodEnd,
},
},
},
},
});
// Calculate current period stats
const totalScans = qrCodes.reduce((sum, qr) => sum + qr.scans.length, 0);
const uniqueScans = qrCodes.reduce((sum, qr) =>
sum + qr.scans.filter(s => s.isUnique).length, 0
);
// Calculate previous period stats for comparison
const previousTotalScans = qrCodesWithPreviousScans.reduce((sum, qr) => sum + qr.scans.length, 0);
const previousUniqueScans = qrCodesWithPreviousScans.reduce((sum, qr) =>
sum + qr.scans.filter(s => s.isUnique).length, 0
);
// Calculate average scans per QR code (only count QR codes with scans)
const qrCodesWithScans = qrCodes.filter(qr => qr.scans.length > 0).length;
const avgScansPerQR = qrCodesWithScans > 0
? Math.round(totalScans / qrCodesWithScans)
: 0;
// Calculate previous period average scans per QR
const previousQrCodesWithScans = qrCodesWithPreviousScans.filter(qr => qr.scans.length > 0).length;
const previousAvgScansPerQR = previousQrCodesWithScans > 0
? Math.round(previousTotalScans / previousQrCodesWithScans)
: 0;
// Calculate trends
const scansTrend = calculateTrend(totalScans, previousTotalScans);
// New Conversion Rate Logic: (Unique Scans / Total Scans) * 100
// This represents "Engagement Efficiency" - how many scans are from fresh users
const currentConversion = totalScans > 0 ? Math.round((uniqueScans / totalScans) * 100) : 0;
const previousConversion = previousTotalScans > 0
? Math.round((previousUniqueScans / previousTotalScans) * 100)
: 0;
const avgScansTrend = calculateTrend(avgScansPerQR, previousAvgScansPerQR);
// Device stats
const deviceStats = qrCodes.flatMap(qr => qr.scans)
.reduce((acc, scan) => {
const device = scan.device || 'unknown';
acc[device] = (acc[device] || 0) + 1;
return acc;
}, {} as Record<string, number>);
const mobileScans = (deviceStats.mobile || 0) + (deviceStats.tablet || 0);
const mobilePercentage = totalScans > 0
? Math.round((mobileScans / totalScans) * 100)
: 0;
// Country stats (current period)
const countryStats = qrCodes.flatMap(qr => qr.scans)
.reduce((acc, scan) => {
const country = scan.country ?? 'Unknown Location';
acc[country] = (acc[country] || 0) + 1;
return acc;
}, {} as Record<string, number>);
// Country stats (previous period)
const previousCountryStats = qrCodesWithPreviousScans.flatMap(qr => qr.scans)
.reduce((acc, scan) => {
const country = scan.country ?? 'Unknown Location';
acc[country] = (acc[country] || 0) + 1;
return acc;
}, {} as Record<string, number>);
const topCountry = Object.entries(countryStats)
.sort(([, a], [, b]) => b - a)[0];
// Daily scan counts for chart (current period)
const dailyScans = qrCodes.flatMap(qr => qr.scans).reduce((acc, scan) => {
const date = new Date(scan.ts).toISOString().split('T')[0];
acc[date] = (acc[date] || 0) + 1;
return acc;
}, {} as Record<string, number>);
// Generate last 7 days for sparkline
const last7Days = Array.from({ length: 7 }, (_, i) => {
const date = new Date();
date.setDate(date.getDate() - (6 - i));
return date.toISOString().split('T')[0];
});
// QR performance (only show DYNAMIC QR codes since STATIC don't track scans)
const qrPerformance = qrCodes
.filter(qr => qr.type === 'DYNAMIC')
.map(qr => {
const currentTotal = qr.scans.length;
const currentUnique = qr.scans.filter(s => s.isUnique).length;
// Find previous period data for this QR code
const previousQR = qrCodesWithPreviousScans.find(prev => prev.id === qr.id);
const previousTotal = previousQR ? previousQR.scans.length : 0;
// Calculate trend
const trendData = calculateTrend(currentTotal, previousTotal);
// Calculate sparkline data (scans per day for last 7 days)
const sparklineData = last7Days.map(date => {
return qr.scans.filter(s =>
new Date(s.ts).toISOString().split('T')[0] === date
).length;
});
// Find last scanned date
const lastScanned = qr.scans.length > 0
? new Date(Math.max(...qr.scans.map(s => new Date(s.ts).getTime())))
: null;
return {
id: qr.id,
title: qr.title,
type: qr.type,
totalScans: currentTotal,
uniqueScans: currentUnique,
conversion: currentTotal > 0
? Math.round((currentUnique / currentTotal) * 100)
: 0,
trend: trendData.trend,
trendPercentage: trendData.percentage,
sparkline: sparklineData,
lastScanned: lastScanned?.toISOString() || null,
...(trendData.isNew && { isNew: true }),
};
})
.sort((a, b) => b.totalScans - a.totalScans);
return NextResponse.json({
summary: {
totalScans,
uniqueScans,
avgScansPerQR,
mobilePercentage,
topCountry: topCountry ? topCountry[0] : 'N/A',
topCountryPercentage: topCountry && totalScans > 0
? Math.round((topCountry[1] / totalScans) * 100)
: 0,
scansTrend,
avgScansTrend,
comparisonPeriod,
comparisonDays,
},
deviceStats,
countryStats: Object.entries(countryStats)
.sort(([, a], [, b]) => b - a)
.slice(0, 10)
.map(([country, count]) => {
const previousCount = previousCountryStats[country] || 0;
const trendData = calculateTrend(count, previousCount);
return {
country,
count,
percentage: totalScans > 0
? Math.round((count / totalScans) * 100)
: 0,
trend: trendData.trend,
trendPercentage: trendData.percentage,
...(trendData.isNew && { isNew: true }),
};
}),
dailyScans,
qrPerformance: qrPerformance.slice(0, 10),
});
} catch (error) {
console.error('Error fetching analytics:', error);
return NextResponse.json(
{ error: 'Internal server error' },
{ status: 500 }
);
}
}

210
src/app/(main)/api/auth/signup/route.ts
View File

@@ -1,106 +1,106 @@
import { NextRequest, NextResponse } from 'next/server';
import bcrypt from 'bcryptjs';
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';
import { getAuthCookieOptions } from '@/lib/cookieConfig';
import { signupSchema, validateRequest } from '@/lib/validationSchemas';
export async function POST(request: NextRequest) {
try {
// CSRF Protection
const csrfCheck = csrfProtection(request);
if (!csrfCheck.valid) {
return NextResponse.json(
{ error: csrfCheck.error },
{ status: 403 }
);
}
// Rate Limiting
const clientId = getClientIdentifier(request);
const rateLimitResult = rateLimit(clientId, RateLimits.SIGNUP);
if (!rateLimitResult.success) {
return NextResponse.json(
{
error: 'Too many signup attempts. 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();
// 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({
where: { email },
});
if (existingUser) {
return NextResponse.json(
{ error: 'User already exists' },
{ status: 400 }
);
}
// Hash password
const hashedPassword = await bcrypt.hash(password, 12);
// Create user
const user = await db.user.create({
data: {
name,
email,
password: hashedPassword,
},
});
// Create response
const response = NextResponse.json({
success: true,
user: {
id: user.id,
name: user.name,
email: user.email,
plan: 'FREE',
},
});
// Set cookie for auto-login after signup
response.cookies.set('userId', user.id, getAuthCookieOptions());
return response;
} catch (error) {
if (error instanceof z.ZodError) {
return NextResponse.json(
{ error: 'Invalid input', details: error.errors },
{ status: 400 }
);
}
console.error('Signup error:', error);
return NextResponse.json(
{ error: 'Internal server error' },
{ status: 500 }
);
}
import { NextRequest, NextResponse } from 'next/server';
import bcrypt from 'bcryptjs';
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';
import { getAuthCookieOptions } from '@/lib/cookieConfig';
import { signupSchema, validateRequest } from '@/lib/validationSchemas';
export async function POST(request: NextRequest) {
try {
// CSRF Protection
const csrfCheck = csrfProtection(request);
if (!csrfCheck.valid) {
return NextResponse.json(
{ error: csrfCheck.error },
{ status: 403 }
);
}
// Rate Limiting
const clientId = getClientIdentifier(request);
const rateLimitResult = rateLimit(clientId, RateLimits.SIGNUP);
if (!rateLimitResult.success) {
return NextResponse.json(
{
error: 'Too many signup attempts. 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();
// 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({
where: { email },
});
if (existingUser) {
return NextResponse.json(
{ error: 'User already exists' },
{ status: 400 }
);
}
// Hash password
const hashedPassword = await bcrypt.hash(password, 12);
// Create user
const user = await db.user.create({
data: {
name,
email,
password: hashedPassword,
},
});
// Create response
const response = NextResponse.json({
success: true,
user: {
id: user.id,
name: user.name,
email: user.email,
plan: 'FREE',
},
});
// Set cookie for auto-login after signup
response.cookies.set('userId', user.id, getAuthCookieOptions());
return response;
} catch (error) {
if (error instanceof z.ZodError) {
return NextResponse.json(
{ error: 'Invalid input', details: error.errors },
{ status: 400 }
);
}
console.error('Signup error:', error);
return NextResponse.json(
{ error: 'Internal server error' },
{ status: 500 }
);
}
}

82
src/app/(main)/api/feedback/route.ts
View File

@@ -1,41 +1,41 @@
import { NextRequest, NextResponse } from 'next/server';
import { db } from '@/lib/db';
export async function POST(request: NextRequest) {
try {
const body = await request.json();
const { slug, rating, comment } = body;
if (!slug || !rating) {
return NextResponse.json({ error: 'Missing required fields' }, { status: 400 });
}
// Find the QR code
const qrCode = await db.qRCode.findUnique({
where: { slug },
select: { id: true },
});
if (!qrCode) {
return NextResponse.json({ error: 'QR Code not found' }, { status: 404 });
}
// Log feedback as a scan with additional data
// In a full implementation, you'd have a Feedback model
// For now, we'll store it in QRScan with special markers
await db.qRScan.create({
data: {
qrId: qrCode.id,
ipHash: 'feedback',
userAgent: `rating:${rating}|comment:${comment?.substring(0, 200) || ''}`,
device: 'feedback',
isUnique: true,
},
});
return NextResponse.json({ success: true });
} catch (error) {
console.error('Error submitting feedback:', error);
return NextResponse.json({ error: 'Internal server error' }, { status: 500 });
}
}
import { NextRequest, NextResponse } from 'next/server';
import { db } from '@/lib/db';
export async function POST(request: NextRequest) {
try {
const body = await request.json();
const { slug, rating, comment } = body;
if (!slug || !rating) {
return NextResponse.json({ error: 'Missing required fields' }, { status: 400 });
}
// Find the QR code
const qrCode = await db.qRCode.findUnique({
where: { slug },
select: { id: true },
});
if (!qrCode) {
return NextResponse.json({ error: 'QR Code not found' }, { status: 404 });
}
// Log feedback as a scan with additional data
// In a full implementation, you'd have a Feedback model
// For now, we'll store it in QRScan with special markers
await db.qRScan.create({
data: {
qrId: qrCode.id,
ipHash: 'feedback',
userAgent: `rating:${rating}|comment:${comment?.substring(0, 200) || ''}`,
device: 'feedback',
isUnique: true,
},
});
return NextResponse.json({ success: true });
} catch (error) {
console.error('Error submitting feedback:', error);
return NextResponse.json({ error: 'Internal server error' }, { status: 500 });
}
}

206
src/app/(main)/api/leads/route.ts
View File

@@ -1,103 +1,103 @@
import { NextResponse } from 'next/server';
import { db } from '@/lib/db';
import { Prisma } from '@prisma/client';
interface LeadInput {
email: string;
source?: string;
reprintCost?: number;
updatesPerYear?: number;
annualSavings?: number;
}
export async function POST(request: Request) {
try {
const body: LeadInput = await request.json();
const { email, source, reprintCost, updatesPerYear, annualSavings } = body;
if (!email || !email.includes('@')) {
return NextResponse.json(
{ error: 'Valid email is required' },
{ status: 400 }
);
}
// Use typed db client - keeping (db as any) temporarily if types are missing locally,
// but cleaner code should use db.lead directly.
// We will trust the user to run `npm run build` which runs `prisma generate`.
const lead = await db.lead.create({
data: {
email: email.toLowerCase().trim(),
source: source || 'reprint-calculator',
reprintCost: reprintCost ? Number(reprintCost) : null,
updatesPerYear: updatesPerYear ? Number(updatesPerYear) : null,
annualSavings: annualSavings ? Number(annualSavings) : null,
},
});
return NextResponse.json({ success: true, id: lead.id });
} catch (error) {
console.error('Error saving lead:', error);
if (error instanceof Prisma.PrismaClientKnownRequestError) {
if (error.code === 'P2021') {
console.error('CRITICAL: Table "Lead" does not exist in the database. Run "npx prisma migrate deploy" to fix this.');
return NextResponse.json(
{
error: 'Database configuration error',
details: 'Missing database table. Please run migrations.'
},
{ status: 500 }
);
}
}
// Return the actual error message for debugging purposes
return NextResponse.json(
{
error: 'Failed to save lead',
details: error instanceof Error ? error.message : String(error)
},
{ status: 500 }
);
}
}
export async function GET() {
try {
const [leads, total] = await Promise.all([
db.lead.findMany({
orderBy: { createdAt: 'desc' },
take: 10,
}),
(db as any).lead.count(),
]);
return NextResponse.json({
total,
recent: leads.map((lead: {
id: string;
email: string;
source: string;
reprintCost: number | null;
updatesPerYear: number | null;
annualSavings: number | null;
createdAt: Date;
}) => ({
id: lead.id,
email: lead.email,
source: lead.source,
reprintCost: lead.reprintCost,
updatesPerYear: lead.updatesPerYear,
annualSavings: lead.annualSavings,
createdAt: lead.createdAt.toISOString(),
})),
});
} catch (error) {
console.error('Error fetching leads:', error);
return NextResponse.json(
{ error: 'Failed to fetch leads' },
{ status: 500 }
);
}
}
import { NextResponse } from 'next/server';
import { db } from '@/lib/db';
import { Prisma } from '@prisma/client';
interface LeadInput {
email: string;
source?: string;
reprintCost?: number;
updatesPerYear?: number;
annualSavings?: number;
}
export async function POST(request: Request) {
try {
const body: LeadInput = await request.json();
const { email, source, reprintCost, updatesPerYear, annualSavings } = body;
if (!email || !email.includes('@')) {
return NextResponse.json(
{ error: 'Valid email is required' },
{ status: 400 }
);
}
// Use typed db client - keeping (db as any) temporarily if types are missing locally,
// but cleaner code should use db.lead directly.
// We will trust the user to run `npm run build` which runs `prisma generate`.
const lead = await db.lead.create({
data: {
email: email.toLowerCase().trim(),
source: source || 'reprint-calculator',
reprintCost: reprintCost ? Number(reprintCost) : null,
updatesPerYear: updatesPerYear ? Number(updatesPerYear) : null,
annualSavings: annualSavings ? Number(annualSavings) : null,
},
});
return NextResponse.json({ success: true, id: lead.id });
} catch (error) {
console.error('Error saving lead:', error);
if (error instanceof Prisma.PrismaClientKnownRequestError) {
if (error.code === 'P2021') {
console.error('CRITICAL: Table "Lead" does not exist in the database. Run "npx prisma migrate deploy" to fix this.');
return NextResponse.json(
{
error: 'Database configuration error',
details: 'Missing database table. Please run migrations.'
},
{ status: 500 }
);
}
}
// Return the actual error message for debugging purposes
return NextResponse.json(
{
error: 'Failed to save lead',
details: error instanceof Error ? error.message : String(error)
},
{ status: 500 }
);
}
}
export async function GET() {
try {
const [leads, total] = await Promise.all([
db.lead.findMany({
orderBy: { createdAt: 'desc' },
take: 10,
}),
(db as any).lead.count(),
]);
return NextResponse.json({
total,
recent: leads.map((lead: {
id: string;
email: string;
source: string;
reprintCost: number | null;
updatesPerYear: number | null;
annualSavings: number | null;
createdAt: Date;
}) => ({
id: lead.id,
email: lead.email,
source: lead.source,
reprintCost: lead.reprintCost,
updatesPerYear: lead.updatesPerYear,
annualSavings: lead.annualSavings,
createdAt: lead.createdAt.toISOString(),
})),
});
} catch (error) {
console.error('Error fetching leads:', error);
return NextResponse.json(
{ error: 'Failed to fetch leads' },
{ status: 500 }
);
}
}

244
src/app/(main)/api/qrs/[id]/feedback/route.ts
View File

@@ -1,122 +1,122 @@
import { NextRequest, NextResponse } from 'next/server';
import { getServerSession } from 'next-auth';
import { authOptions } from '@/lib/auth';
import { db } from '@/lib/db';
import { cookies } from 'next/headers';
export async function GET(
request: NextRequest,
{ params }: { params: Promise<{ id: string }> }
) {
try {
let userId: string | undefined;
// Try NextAuth session first
const session = await getServerSession(authOptions);
if (session?.user?.id) {
userId = session.user.id;
} else {
// Fallback: Check raw userId cookie (like /api/user does)
const cookieStore = await cookies();
userId = cookieStore.get('userId')?.value;
}
if (!userId) {
return NextResponse.json({ error: 'Unauthorized' }, { status: 401 });
}
const { id } = await params;
const { searchParams } = new URL(request.url);
const page = parseInt(searchParams.get('page') || '1');
const limit = parseInt(searchParams.get('limit') || '20');
const skip = (page - 1) * limit;
// Verify QR ownership and type
const qrCode = await db.qRCode.findUnique({
where: { id, userId: userId },
select: { id: true, contentType: true },
});
if (!qrCode) {
return NextResponse.json({ error: 'QR code not found' }, { status: 404 });
}
// Check if consistent with schema (Prisma enum mismatch fix)
// @ts-ignore - Temporary ignore until client regeneration catches up fully in all envs
if (qrCode.contentType !== 'FEEDBACK') {
return NextResponse.json({ error: 'Not a feedback QR code' }, { status: 400 });
}
// Fetch feedback entries (stored as QRScans with ipHash='feedback')
const [feedbackEntries, totalCount] = await Promise.all([
db.qRScan.findMany({
where: { qrId: id, ipHash: 'feedback' },
orderBy: { ts: 'desc' },
skip,
take: limit,
select: { id: true, userAgent: true, ts: true },
}),
db.qRScan.count({
where: { qrId: id, ipHash: 'feedback' },
}),
]);
// Parse feedback data from userAgent field
const feedbacks = feedbackEntries.map((entry) => {
const parsed = parseFeedback(entry.userAgent || '');
return {
id: entry.id,
rating: parsed.rating,
comment: parsed.comment,
date: entry.ts,
};
});
// Calculate stats
const allRatings = await db.qRScan.findMany({
where: { qrId: id, ipHash: 'feedback' },
select: { userAgent: true },
});
const ratings = allRatings.map((e) => parseFeedback(e.userAgent || '').rating).filter((r) => r > 0);
const avgRating = ratings.length > 0 ? ratings.reduce((a, b) => a + b, 0) / ratings.length : 0;
// Rating distribution
const distribution = {
5: ratings.filter((r) => r === 5).length,
4: ratings.filter((r) => r === 4).length,
3: ratings.filter((r) => r === 3).length,
2: ratings.filter((r) => r === 2).length,
1: ratings.filter((r) => r === 1).length,
};
return NextResponse.json({
feedbacks,
stats: {
total: totalCount,
avgRating: Math.round(avgRating * 10) / 10,
distribution,
},
pagination: {
page,
limit,
totalPages: Math.ceil(totalCount / limit),
hasMore: skip + limit < totalCount,
},
});
} catch (error) {
console.error('Error fetching feedback:', error);
return NextResponse.json({ error: 'Internal server error' }, { status: 500 });
}
}
function parseFeedback(userAgent: string): { rating: number; comment: string } {
// Format: "rating:4|comment:Great service!"
const ratingMatch = userAgent.match(/rating:(\d)/);
const commentMatch = userAgent.match(/comment:(.+)/);
return {
rating: ratingMatch ? parseInt(ratingMatch[1]) : 0,
comment: commentMatch ? commentMatch[1] : '',
};
}
import { NextRequest, NextResponse } from 'next/server';
import { getServerSession } from 'next-auth';
import { authOptions } from '@/lib/auth';
import { db } from '@/lib/db';
import { cookies } from 'next/headers';
export async function GET(
request: NextRequest,
{ params }: { params: Promise<{ id: string }> }
) {
try {
let userId: string | undefined;
// Try NextAuth session first
const session = await getServerSession(authOptions);
if (session?.user?.id) {
userId = session.user.id;
} else {
// Fallback: Check raw userId cookie (like /api/user does)
const cookieStore = await cookies();
userId = cookieStore.get('userId')?.value;
}
if (!userId) {
return NextResponse.json({ error: 'Unauthorized' }, { status: 401 });
}
const { id } = await params;
const { searchParams } = new URL(request.url);
const page = parseInt(searchParams.get('page') || '1');
const limit = parseInt(searchParams.get('limit') || '20');
const skip = (page - 1) * limit;
// Verify QR ownership and type
const qrCode = await db.qRCode.findUnique({
where: { id, userId: userId },
select: { id: true, contentType: true },
});
if (!qrCode) {
return NextResponse.json({ error: 'QR code not found' }, { status: 404 });
}
// Check if consistent with schema (Prisma enum mismatch fix)
// @ts-ignore - Temporary ignore until client regeneration catches up fully in all envs
if (qrCode.contentType !== 'FEEDBACK') {
return NextResponse.json({ error: 'Not a feedback QR code' }, { status: 400 });
}
// Fetch feedback entries (stored as QRScans with ipHash='feedback')
const [feedbackEntries, totalCount] = await Promise.all([
db.qRScan.findMany({
where: { qrId: id, ipHash: 'feedback' },
orderBy: { ts: 'desc' },
skip,
take: limit,
select: { id: true, userAgent: true, ts: true },
}),
db.qRScan.count({
where: { qrId: id, ipHash: 'feedback' },
}),
]);
// Parse feedback data from userAgent field
const feedbacks = feedbackEntries.map((entry) => {
const parsed = parseFeedback(entry.userAgent || '');
return {
id: entry.id,
rating: parsed.rating,
comment: parsed.comment,
date: entry.ts,
};
});
// Calculate stats
const allRatings = await db.qRScan.findMany({
where: { qrId: id, ipHash: 'feedback' },
select: { userAgent: true },
});
const ratings = allRatings.map((e) => parseFeedback(e.userAgent || '').rating).filter((r) => r > 0);
const avgRating = ratings.length > 0 ? ratings.reduce((a, b) => a + b, 0) / ratings.length : 0;
// Rating distribution
const distribution = {
5: ratings.filter((r) => r === 5).length,
4: ratings.filter((r) => r === 4).length,
3: ratings.filter((r) => r === 3).length,
2: ratings.filter((r) => r === 2).length,
1: ratings.filter((r) => r === 1).length,
};
return NextResponse.json({
feedbacks,
stats: {
total: totalCount,
avgRating: Math.round(avgRating * 10) / 10,
distribution,
},
pagination: {
page,
limit,
totalPages: Math.ceil(totalCount / limit),
hasMore: skip + limit < totalCount,
},
});
} catch (error) {
console.error('Error fetching feedback:', error);
return NextResponse.json({ error: 'Internal server error' }, { status: 500 });
}
}
function parseFeedback(userAgent: string): { rating: number; comment: string } {
// Format: "rating:4|comment:Great service!"
const ratingMatch = userAgent.match(/rating:(\d)/);
const commentMatch = userAgent.match(/comment:(.+)/);
return {
rating: ratingMatch ? parseInt(ratingMatch[1]) : 0,
comment: commentMatch ? commentMatch[1] : '',
};
}

74
src/app/(main)/api/qrs/public/[slug]/route.ts
View File

@@ -1,37 +1,37 @@
import { NextRequest, NextResponse } from 'next/server';
import { db } from '@/lib/db';
export async function GET(
request: NextRequest,
{ params }: { params: Promise<{ slug: string }> }
) {
try {
const { slug } = await params;
const qrCode = await db.qRCode.findUnique({
where: { slug },
select: {
id: true,
content: true,
contentType: true,
status: true,
},
});
if (!qrCode) {
return NextResponse.json({ error: 'QR Code not found' }, { status: 404 });
}
if (qrCode.status === 'PAUSED') {
return NextResponse.json({ error: 'QR Code is paused' }, { status: 403 });
}
return NextResponse.json({
contentType: qrCode.contentType,
content: qrCode.content,
});
} catch (error) {
console.error('Error fetching public QR:', error);
return NextResponse.json({ error: 'Internal server error' }, { status: 500 });
}
}
import { NextRequest, NextResponse } from 'next/server';
import { db } from '@/lib/db';
export async function GET(
request: NextRequest,
{ params }: { params: Promise<{ slug: string }> }
) {
try {
const { slug } = await params;
const qrCode = await db.qRCode.findUnique({
where: { slug },
select: {
id: true,
content: true,
contentType: true,
status: true,
},
});
if (!qrCode) {
return NextResponse.json({ error: 'QR Code not found' }, { status: 404 });
}
if (qrCode.status === 'PAUSED') {
return NextResponse.json({ error: 'QR Code is paused' }, { status: 403 });
}
return NextResponse.json({
contentType: qrCode.contentType,
content: qrCode.content,
});
} catch (error) {
console.error('Error fetching public QR:', error);
return NextResponse.json({ error: 'Internal server error' }, { status: 500 });
}
}

466
src/app/(main)/api/qrs/route.ts
View File

@@ -1,234 +1,234 @@
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) {
try {
const userId = cookies().get('userId')?.value;
if (!userId) {
return NextResponse.json({ error: 'Unauthorized' }, { status: 401 });
}
const qrCodes = await db.qRCode.findMany({
where: { userId },
include: {
_count: {
select: { scans: true },
},
scans: {
where: { isUnique: true },
select: { id: true },
},
},
orderBy: { createdAt: 'desc' },
});
// Transform the data
const transformed = qrCodes.map(qr => ({
...qr,
scans: qr._count.scans,
uniqueScans: qr.scans.length, // Count of scans where isUnique=true
_count: undefined,
}));
return NextResponse.json(transformed);
} catch (error) {
console.error('Error fetching QR codes:', error);
return NextResponse.json(
{ error: 'Internal server error' },
{ status: 500 }
);
}
}
// Plan limits
const PLAN_LIMITS = {
FREE: 3,
PRO: 50,
BUSINESS: 500,
};
// 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;
// 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 });
}
const user = await db.user.findUnique({
where: { id: userId },
select: { plan: true },
});
if (!user) {
return NextResponse.json({ error: `User not found: ${userId}` }, { status: 404 });
}
const body = await request.json();
// 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;
// Only check limits for DYNAMIC QR codes (static QR codes are unlimited)
if (!isStatic) {
// Count existing dynamic QR codes
const dynamicQRCount = await db.qRCode.count({
where: {
userId,
type: 'DYNAMIC',
},
});
const userPlan = user.plan || 'FREE';
const limit = PLAN_LIMITS[userPlan as keyof typeof PLAN_LIMITS] || PLAN_LIMITS.FREE;
if (dynamicQRCount >= limit) {
return NextResponse.json(
{
error: 'Limit reached',
message: `You have reached the limit of ${limit} dynamic QR codes for your ${userPlan} plan. Please upgrade to create more.`,
currentCount: dynamicQRCount,
limit,
plan: userPlan,
},
{ status: 403 }
);
}
}
let enrichedContent = body.content;
// For STATIC QR codes, calculate what the QR should contain
if (isStatic) {
let qrContent = '';
switch (body.contentType) {
case 'URL':
qrContent = body.content.url;
break;
case 'PHONE':
qrContent = `tel:${body.content.phone}`;
break;
case 'SMS':
qrContent = `sms:${body.content.phone}${body.content.message ? `?body=${encodeURIComponent(body.content.message)}` : ''}`;
break;
case 'VCARD':
qrContent = `BEGIN:VCARD
VERSION:3.0
FN:${body.content.firstName || ''} ${body.content.lastName || ''}
N:${body.content.lastName || ''};${body.content.firstName || ''};;;
${body.content.organization ? `ORG:${body.content.organization}` : ''}
${body.content.title ? `TITLE:${body.content.title}` : ''}
${body.content.email ? `EMAIL:${body.content.email}` : ''}
${body.content.phone ? `TEL:${body.content.phone}` : ''}
END:VCARD`;
break;
case 'GEO':
const lat = body.content.latitude || 0;
const lon = body.content.longitude || 0;
const label = body.content.label ? `?q=${encodeURIComponent(body.content.label)}` : '';
qrContent = `geo:${lat},${lon}${label}`;
break;
case 'TEXT':
qrContent = body.content.text;
break;
case 'WHATSAPP':
qrContent = `https://wa.me/${body.content.phone}${body.content.message ? `?text=${encodeURIComponent(body.content.message)}` : ''}`;
break;
case 'PDF':
qrContent = body.content.fileUrl || 'https://example.com/file.pdf';
break;
case 'APP':
qrContent = body.content.fallbackUrl || body.content.iosUrl || body.content.androidUrl || 'https://example.com';
break;
case 'COUPON':
qrContent = `Coupon: ${body.content.code || 'CODE'} - ${body.content.discount || 'Discount'}`;
break;
case 'FEEDBACK':
qrContent = body.content.feedbackUrl || 'https://example.com/feedback';
break;
default:
qrContent = body.content.url || 'https://example.com';
}
// Add qrContent to the content object
enrichedContent = {
...body.content,
qrContent // This is what the QR code should actually contain
};
}
// Generate slug for the QR code
const slug = generateSlug(body.title);
// Create QR code
const qrCode = await db.qRCode.create({
data: {
userId,
title: body.title,
type: isStatic ? 'STATIC' : 'DYNAMIC',
contentType: body.contentType,
content: enrichedContent,
tags: body.tags || [],
style: body.style || {
foregroundColor: '#000000',
backgroundColor: '#FFFFFF',
cornerStyle: 'square',
size: 200,
},
slug,
status: 'ACTIVE',
},
});
return NextResponse.json(qrCode);
} catch (error) {
console.error('Error creating QR code:', error);
return NextResponse.json(
{ error: 'Internal server error', details: String(error) },
{ status: 500 }
);
}
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) {
try {
const userId = cookies().get('userId')?.value;
if (!userId) {
return NextResponse.json({ error: 'Unauthorized' }, { status: 401 });
}
const qrCodes = await db.qRCode.findMany({
where: { userId },
include: {
_count: {
select: { scans: true },
},
scans: {
where: { isUnique: true },
select: { id: true },
},
},
orderBy: { createdAt: 'desc' },
});
// Transform the data
const transformed = qrCodes.map(qr => ({
...qr,
scans: qr._count.scans,
uniqueScans: qr.scans.length, // Count of scans where isUnique=true
_count: undefined,
}));
return NextResponse.json(transformed);
} catch (error) {
console.error('Error fetching QR codes:', error);
return NextResponse.json(
{ error: 'Internal server error' },
{ status: 500 }
);
}
}
// Plan limits
const PLAN_LIMITS = {
FREE: 3,
PRO: 50,
BUSINESS: 500,
};
// 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;
// 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 });
}
const user = await db.user.findUnique({
where: { id: userId },
select: { plan: true },
});
if (!user) {
return NextResponse.json({ error: `User not found: ${userId}` }, { status: 404 });
}
const body = await request.json();
// 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;
// Only check limits for DYNAMIC QR codes (static QR codes are unlimited)
if (!isStatic) {
// Count existing dynamic QR codes
const dynamicQRCount = await db.qRCode.count({
where: {
userId,
type: 'DYNAMIC',
},
});
const userPlan = user.plan || 'FREE';
const limit = PLAN_LIMITS[userPlan as keyof typeof PLAN_LIMITS] || PLAN_LIMITS.FREE;
if (dynamicQRCount >= limit) {
return NextResponse.json(
{
error: 'Limit reached',
message: `You have reached the limit of ${limit} dynamic QR codes for your ${userPlan} plan. Please upgrade to create more.`,
currentCount: dynamicQRCount,
limit,
plan: userPlan,
},
{ status: 403 }
);
}
}
let enrichedContent = body.content;
// For STATIC QR codes, calculate what the QR should contain
if (isStatic) {
let qrContent = '';
switch (body.contentType) {
case 'URL':
qrContent = body.content.url;
break;
case 'PHONE':
qrContent = `tel:${body.content.phone}`;
break;
case 'SMS':
qrContent = `sms:${body.content.phone}${body.content.message ? `?body=${encodeURIComponent(body.content.message)}` : ''}`;
break;
case 'VCARD':
qrContent = `BEGIN:VCARD
VERSION:3.0
FN:${body.content.firstName || ''} ${body.content.lastName || ''}
N:${body.content.lastName || ''};${body.content.firstName || ''};;;
${body.content.organization ? `ORG:${body.content.organization}` : ''}
${body.content.title ? `TITLE:${body.content.title}` : ''}
${body.content.email ? `EMAIL:${body.content.email}` : ''}
${body.content.phone ? `TEL:${body.content.phone}` : ''}
END:VCARD`;
break;
case 'GEO':
const lat = body.content.latitude || 0;
const lon = body.content.longitude || 0;
const label = body.content.label ? `?q=${encodeURIComponent(body.content.label)}` : '';
qrContent = `geo:${lat},${lon}${label}`;
break;
case 'TEXT':
qrContent = body.content.text;
break;
case 'WHATSAPP':
qrContent = `https://wa.me/${body.content.phone}${body.content.message ? `?text=${encodeURIComponent(body.content.message)}` : ''}`;
break;
case 'PDF':
qrContent = body.content.fileUrl || 'https://example.com/file.pdf';
break;
case 'APP':
qrContent = body.content.fallbackUrl || body.content.iosUrl || body.content.androidUrl || 'https://example.com';
break;
case 'COUPON':
qrContent = `Coupon: ${body.content.code || 'CODE'} - ${body.content.discount || 'Discount'}`;
break;
case 'FEEDBACK':
qrContent = body.content.feedbackUrl || 'https://example.com/feedback';
break;
default:
qrContent = body.content.url || 'https://example.com';
}
// Add qrContent to the content object
enrichedContent = {
...body.content,
qrContent // This is what the QR code should actually contain
};
}
// Generate slug for the QR code
const slug = generateSlug(body.title);
// Create QR code
const qrCode = await db.qRCode.create({
data: {
userId,
title: body.title,
type: isStatic ? 'STATIC' : 'DYNAMIC',
contentType: body.contentType,
content: enrichedContent,
tags: body.tags || [],
style: body.style || {
foregroundColor: '#000000',
backgroundColor: '#FFFFFF',
cornerStyle: 'square',
size: 200,
},
slug,
status: 'ACTIVE',
},
});
return NextResponse.json(qrCode);
} catch (error) {
console.error('Error creating QR code:', error);
return NextResponse.json(
{ error: 'Internal server error', details: String(error) },
{ status: 500 }
);
}
}

164
src/app/(main)/api/upload/route.ts
View File

@@ -1,82 +1,82 @@
import { NextRequest, NextResponse } from 'next/server';
import { getServerSession } from 'next-auth';
import { authOptions } from '@/lib/auth';
import { uploadFileToR2 } from '@/lib/r2';
import { env } from '@/lib/env';
import { db } from '@/lib/db';
export async function POST(request: NextRequest) {
try {
// 1. Authentication Check
const session = await getServerSession(authOptions);
let userId = session?.user?.id;
// Fallback: Check for simple-login cookie if no NextAuth session
if (!userId) {
const cookieUserId = request.cookies.get('userId')?.value;
if (cookieUserId) {
// Verify user exists
const user = await db.user.findUnique({
where: { id: cookieUserId },
select: { id: true }
});
if (user) {
userId = user.id;
}
}
}
if (!userId) {
return new NextResponse('Unauthorized', { status: 401 });
}
// 2. Parse Form Data
const formData = await request.formData();
const file = formData.get('file') as File | null;
if (!file) {
return NextResponse.json(
{ error: 'No file provided' },
{ status: 400 }
);
}
// 3. Validation
// Check file size (default 10MB)
const MAX_SIZE = parseInt(env.MAX_UPLOAD_SIZE || '10485760');
if (file.size > MAX_SIZE) {
return NextResponse.json(
{ error: `File too large. Maximum size: ${MAX_SIZE / 1024 / 1024}MB` },
{ status: 400 }
);
}
// Check file type (allow images and PDFs)
const allowedTypes = ['application/pdf', 'image/jpeg', 'image/png', 'image/webp'];
if (!allowedTypes.includes(file.type)) {
return NextResponse.json(
{ error: 'Invalid file type. Only PDF and Images are allowed.' },
{ status: 400 }
);
}
// 4. Upload to R2
const buffer = Buffer.from(await file.arrayBuffer());
const publicUrl = await uploadFileToR2(buffer, file.name, file.type);
// 5. Success
return NextResponse.json({
success: true,
url: publicUrl,
filename: file.name,
type: file.type
});
} catch (error) {
console.error('Upload error:', error);
return NextResponse.json(
{ error: 'Internal server error during upload' },
{ status: 500 }
);
}
}
import { NextRequest, NextResponse } from 'next/server';
import { getServerSession } from 'next-auth';
import { authOptions } from '@/lib/auth';
import { uploadFileToR2 } from '@/lib/r2';
import { env } from '@/lib/env';
import { db } from '@/lib/db';
export async function POST(request: NextRequest) {
try {
// 1. Authentication Check
const session = await getServerSession(authOptions);
let userId = session?.user?.id;
// Fallback: Check for simple-login cookie if no NextAuth session
if (!userId) {
const cookieUserId = request.cookies.get('userId')?.value;
if (cookieUserId) {
// Verify user exists
const user = await db.user.findUnique({
where: { id: cookieUserId },
select: { id: true }
});
if (user) {
userId = user.id;
}
}
}
if (!userId) {
return new NextResponse('Unauthorized', { status: 401 });
}
// 2. Parse Form Data
const formData = await request.formData();
const file = formData.get('file') as File | null;
if (!file) {
return NextResponse.json(
{ error: 'No file provided' },
{ status: 400 }
);
}
// 3. Validation
// Check file size (default 10MB)
const MAX_SIZE = parseInt(env.MAX_UPLOAD_SIZE || '10485760');
if (file.size > MAX_SIZE) {
return NextResponse.json(
{ error: `File too large. Maximum size: ${MAX_SIZE / 1024 / 1024}MB` },
{ status: 400 }
);
}
// Check file type (allow images and PDFs)
const allowedTypes = ['application/pdf', 'image/jpeg', 'image/png', 'image/webp'];
if (!allowedTypes.includes(file.type)) {
return NextResponse.json(
{ error: 'Invalid file type. Only PDF and Images are allowed.' },
{ status: 400 }
);
}
// 4. Upload to R2
const buffer = Buffer.from(await file.arrayBuffer());
const publicUrl = await uploadFileToR2(buffer, file.name, file.type);
// 5. Success
return NextResponse.json({
success: true,
url: publicUrl,
filename: file.name,
type: file.type
});
} catch (error) {
console.error('Upload error:', error);
return NextResponse.json(
{ error: 'Internal server error during upload' },
{ status: 500 }
);
}
}

350
src/app/(main)/coupon/[slug]/page.tsx
View File

@@ -1,175 +1,175 @@
'use client';
import { useEffect, useState } from 'react';
import { useParams } from 'next/navigation';
import { Copy, Check, ExternalLink, Gift } from 'lucide-react';
interface CouponData {
code: string;
discount: string;
title?: string;
description?: string;
expiryDate?: string;
redeemUrl?: string;
}
export default function CouponPage() {
const params = useParams();
const slug = params.slug as string;
const [coupon, setCoupon] = useState<CouponData | null>(null);
const [loading, setLoading] = useState(true);
const [copied, setCopied] = useState(false);
useEffect(() => {
async function fetchCoupon() {
try {
const res = await fetch(`/api/qrs/public/${slug}`);
if (res.ok) {
const data = await res.json();
if (data.contentType === 'COUPON') {
setCoupon(data.content as CouponData);
}
}
} catch (error) {
console.error('Error fetching coupon:', error);
} finally {
setLoading(false);
}
}
fetchCoupon();
}, [slug]);
const copyCode = async () => {
if (coupon?.code) {
await navigator.clipboard.writeText(coupon.code);
setCopied(true);
setTimeout(() => setCopied(false), 2000);
}
};
// Loading
if (loading) {
return (
<div className="min-h-screen flex items-center justify-center bg-gradient-to-br from-rose-50 to-pink-100">
<div className="w-10 h-10 border-3 border-pink-200 border-t-pink-600 rounded-full animate-spin"></div>
</div>
);
}
// Not found
if (!coupon) {
return (
<div className="min-h-screen flex items-center justify-center bg-gradient-to-br from-rose-50 to-pink-100 px-6">
<div className="text-center bg-white rounded-2xl p-8 shadow-lg">
<p className="text-gray-500 text-lg">This coupon is not available.</p>
</div>
</div>
);
}
const isExpired = coupon.expiryDate && new Date(coupon.expiryDate) < new Date();
return (<div className="min-h-screen flex items-center justify-center bg-gradient-to-br from-[#FAF8F5] via-[#C6C0B3] to-[#4C5F4E] px-6 py-12">
<div className="max-w-sm w-full">
{/* Card */}
<div className="bg-white rounded-3xl shadow-xl overflow-hidden">
{/* Colorful Header */}
<div className="bg-gradient-to-br from-[#DB5375] to-[#B3FFB3] text-gray-900 p-8 text-center relative overflow-hidden">
{/* Decorative circles */}
<div className="absolute top-0 right-0 w-32 h-32 bg-white/10 rounded-full -translate-y-1/2 translate-x-1/2"></div>
<div className="absolute bottom-0 left-0 w-24 h-24 bg-white/10 rounded-full translate-y-1/2 -translate-x-1/2"></div>
<div className="relative">
<div className="w-14 h-14 bg-[#DB5375]/10 rounded-2xl flex items-center justify-center mx-auto mb-4">
<Gift className="w-7 h-7 text-[#DB5375]" />
</div>
<p className="text-gray-700 text-sm mb-1">{coupon.title || 'Special Offer'}</p>
<p className="text-4xl font-bold tracking-tight text-gray-900">{coupon.discount}</p>
</div>
</div>
{/* Dotted line with circles */}
<div className="relative py-4">
<div className="relative py-4">
<div className="absolute left-0 top-1/2 -translate-y-1/2 w-5 h-10 bg-gradient-to-br from-[#FAF8F5] via-[#C6C0B3] to-[#4C5F4E] rounded-r-full"></div>
<div className="absolute right-0 top-1/2 -translate-y-1/2 w-5 h-10 bg-gradient-to-br from-[#FAF8F5] via-[#C6C0B3] to-[#4C5F4E] rounded-l-full"></div>
<div className="border-t-2 border-dashed border-gray-200 mx-8"></div>
</div>
{/* Content */}
<div className="px-8 pb-8">
{coupon.description && (
<p className="text-gray-500 text-sm text-center mb-6">{coupon.description}</p>
)}
{/* Code Box */}
<div className="bg-gray-50 rounded-2xl p-5 mb-4 border border-emerald-100">
<p className="text-xs text-emerald-600 text-center mb-2 font-medium uppercase tracking-wider">Your Code</p>
<div className="flex items-center justify-center gap-3">
<code className="text-2xl font-mono font-bold text-gray-900 tracking-wider">
{coupon.code}
</code>
<button
onClick={copyCode}
className={`p-2.5 rounded-xl transition-all ${copied
? 'bg-emerald-100 text-emerald-600'
: 'bg-white text-gray-500 hover:text-rose-500 shadow-sm hover:shadow'
}`}
aria-label="Copy code"
>
{copied ? <Check className="w-5 h-5" /> : <Copy className="w-5 h-5" />}
</button>
</div>
{copied && (
<p className="text-emerald-600 text-xs text-center mt-2 font-medium">Copied!</p>
)}
</div>
{/* Expiry */}
{coupon.expiryDate && (
<p className={`text-sm text-center mb-6 font-medium ${isExpired ? 'text-red-500' : 'text-gray-400'}`}>
{isExpired
? '⚠️ This coupon has expired'
: `Valid until ${new Date(coupon.expiryDate).toLocaleDateString('en-US', {
month: 'long',
day: 'numeric',
year: 'numeric'
})}`
}
</p>
)}
{/* Redeem Button */}
{coupon.redeemUrl && !isExpired && (
<a
href={ensureAbsoluteUrl(coupon.redeemUrl)}
target="_blank"
rel="noopener noreferrer"
className="block w-full py-4 rounded-xl font-semibold text-center bg-gradient-to-r from-[#076653] to-[#0C342C] text-white hover:from-[#087861] hover:to-[#0E4036] transition-all shadow-lg shadow-emerald-200"
>
<span className="flex items-center justify-center gap-2">
Redeem Now
<ExternalLink className="w-4 h-4" />
</span>
</a>
)}
</div>
</div>
{/* Footer */}
<p className="text-center text-sm text-white/60 mt-6">
Powered by QR Master
</p>
</div>
</div>
</div>
);
}
function ensureAbsoluteUrl(url: string | undefined): string | undefined {
if (!url) return undefined;
if (/^[a-zA-Z][a-zA-Z0-9+.-]*:/.test(url)) {
return url;
}
return `https://${url}`;
}
'use client';
import { useEffect, useState } from 'react';
import { useParams } from 'next/navigation';
import { Copy, Check, ExternalLink, Gift } from 'lucide-react';
interface CouponData {
code: string;
discount: string;
title?: string;
description?: string;
expiryDate?: string;
redeemUrl?: string;
}
export default function CouponPage() {
const params = useParams();
const slug = params.slug as string;
const [coupon, setCoupon] = useState<CouponData | null>(null);
const [loading, setLoading] = useState(true);
const [copied, setCopied] = useState(false);
useEffect(() => {
async function fetchCoupon() {
try {
const res = await fetch(`/api/qrs/public/${slug}`);
if (res.ok) {
const data = await res.json();
if (data.contentType === 'COUPON') {
setCoupon(data.content as CouponData);
}
}
} catch (error) {
console.error('Error fetching coupon:', error);
} finally {
setLoading(false);
}
}
fetchCoupon();
}, [slug]);
const copyCode = async () => {
if (coupon?.code) {
await navigator.clipboard.writeText(coupon.code);
setCopied(true);
setTimeout(() => setCopied(false), 2000);
}
};
// Loading
if (loading) {
return (
<div className="min-h-screen flex items-center justify-center bg-gradient-to-br from-rose-50 to-pink-100">
<div className="w-10 h-10 border-3 border-pink-200 border-t-pink-600 rounded-full animate-spin"></div>
</div>
);
}
// Not found
if (!coupon) {
return (
<div className="min-h-screen flex items-center justify-center bg-gradient-to-br from-rose-50 to-pink-100 px-6">
<div className="text-center bg-white rounded-2xl p-8 shadow-lg">
<p className="text-gray-500 text-lg">This coupon is not available.</p>
</div>
</div>
);
}
const isExpired = coupon.expiryDate && new Date(coupon.expiryDate) < new Date();
return (<div className="min-h-screen flex items-center justify-center bg-gradient-to-br from-[#FAF8F5] via-[#C6C0B3] to-[#4C5F4E] px-6 py-12">
<div className="max-w-sm w-full">
{/* Card */}
<div className="bg-white rounded-3xl shadow-xl overflow-hidden">
{/* Colorful Header */}
<div className="bg-gradient-to-br from-[#DB5375] to-[#B3FFB3] text-gray-900 p-8 text-center relative overflow-hidden">
{/* Decorative circles */}
<div className="absolute top-0 right-0 w-32 h-32 bg-white/10 rounded-full -translate-y-1/2 translate-x-1/2"></div>
<div className="absolute bottom-0 left-0 w-24 h-24 bg-white/10 rounded-full translate-y-1/2 -translate-x-1/2"></div>
<div className="relative">
<div className="w-14 h-14 bg-[#DB5375]/10 rounded-2xl flex items-center justify-center mx-auto mb-4">
<Gift className="w-7 h-7 text-[#DB5375]" />
</div>
<p className="text-gray-700 text-sm mb-1">{coupon.title || 'Special Offer'}</p>
<p className="text-4xl font-bold tracking-tight text-gray-900">{coupon.discount}</p>
</div>
</div>
{/* Dotted line with circles */}
<div className="relative py-4">
<div className="relative py-4">
<div className="absolute left-0 top-1/2 -translate-y-1/2 w-5 h-10 bg-gradient-to-br from-[#FAF8F5] via-[#C6C0B3] to-[#4C5F4E] rounded-r-full"></div>
<div className="absolute right-0 top-1/2 -translate-y-1/2 w-5 h-10 bg-gradient-to-br from-[#FAF8F5] via-[#C6C0B3] to-[#4C5F4E] rounded-l-full"></div>
<div className="border-t-2 border-dashed border-gray-200 mx-8"></div>
</div>
{/* Content */}
<div className="px-8 pb-8">
{coupon.description && (
<p className="text-gray-500 text-sm text-center mb-6">{coupon.description}</p>
)}
{/* Code Box */}
<div className="bg-gray-50 rounded-2xl p-5 mb-4 border border-emerald-100">
<p className="text-xs text-emerald-600 text-center mb-2 font-medium uppercase tracking-wider">Your Code</p>
<div className="flex items-center justify-center gap-3">
<code className="text-2xl font-mono font-bold text-gray-900 tracking-wider">
{coupon.code}
</code>
<button
onClick={copyCode}
className={`p-2.5 rounded-xl transition-all ${copied
? 'bg-emerald-100 text-emerald-600'
: 'bg-white text-gray-500 hover:text-rose-500 shadow-sm hover:shadow'
}`}
aria-label="Copy code"
>
{copied ? <Check className="w-5 h-5" /> : <Copy className="w-5 h-5" />}
</button>
</div>
{copied && (
<p className="text-emerald-600 text-xs text-center mt-2 font-medium">Copied!</p>
)}
</div>
{/* Expiry */}
{coupon.expiryDate && (
<p className={`text-sm text-center mb-6 font-medium ${isExpired ? 'text-red-500' : 'text-gray-400'}`}>
{isExpired
? '⚠️ This coupon has expired'
: `Valid until ${new Date(coupon.expiryDate).toLocaleDateString('en-US', {
month: 'long',
day: 'numeric',
year: 'numeric'
})}`
}
</p>
)}
{/* Redeem Button */}
{coupon.redeemUrl && !isExpired && (
<a
href={ensureAbsoluteUrl(coupon.redeemUrl)}
target="_blank"
rel="noopener noreferrer"
className="block w-full py-4 rounded-xl font-semibold text-center bg-gradient-to-r from-[#076653] to-[#0C342C] text-white hover:from-[#087861] hover:to-[#0E4036] transition-all shadow-lg shadow-emerald-200"
>
<span className="flex items-center justify-center gap-2">
Redeem Now
<ExternalLink className="w-4 h-4" />
</span>
</a>
)}
</div>
</div>
{/* Footer */}
<p className="text-center text-sm text-white/60 mt-6">
Powered by QR Master
</p>
</div>
</div>
</div>
);
}
function ensureAbsoluteUrl(url: string | undefined): string | undefined {
if (!url) return undefined;
if (/^[a-zA-Z][a-zA-Z0-9+.-]*:/.test(url)) {
return url;
}
return `https://${url}`;
}

86
src/app/(main)/features/page.tsx
View File

@@ -1,43 +1,43 @@
import React from 'react';
import type { Metadata } from 'next';
import { Hero } from '@/components/marketing/Hero'; // Re-use simplified version or dedicated FeaturesHero
import { Features } from '@/components/marketing/Features';
import { StaticVsDynamic } from '@/components/marketing/StaticVsDynamic';
import { Pricing } from '@/components/marketing/Pricing';
import en from '@/i18n/en.json';
export const metadata: Metadata = {
title: 'QR Master Features | Tracking, Analytics & Bulk Generation',
description: 'Explore QR Master features: Dynamic QR codes, real-time analytics, bulk generation, custom branding, and API access.',
alternates: {
canonical: 'https://www.qrmaster.net/features',
},
};
export default function FeaturesPage() {
const t = en;
return (
<div className="pt-20">
<section className="bg-gradient-to-b from-slate-50 to-white py-20 px-4">
<div className="container mx-auto text-center max-w-4xl">
<h1 className="text-4xl md:text-5xl font-bold mb-6 text-slate-900">
Everything You Need <br /> to Run Successful QR Campaigns
</h1>
<p className="text-xl text-slate-600 mb-8">
From basic static codes to enterprise-grade dynamic tracking.
</p>
</div>
</section>
<StaticVsDynamic t={t} />
<Features t={t} />
{/* Additional Detail Sections could go here */}
<div className="py-20 bg-slate-50">
<Pricing t={t} />
</div>
</div>
);
}
import React from 'react';
import type { Metadata } from 'next';
import { Hero } from '@/components/marketing/Hero'; // Re-use simplified version or dedicated FeaturesHero
import { Features } from '@/components/marketing/Features';
import { StaticVsDynamic } from '@/components/marketing/StaticVsDynamic';
import { Pricing } from '@/components/marketing/Pricing';
import en from '@/i18n/en.json';
export const metadata: Metadata = {
title: 'QR Master Features | Tracking, Analytics & Bulk Generation',
description: 'Explore QR Master features: Dynamic QR codes, real-time analytics, bulk generation, custom branding, and API access.',
alternates: {
canonical: 'https://www.qrmaster.net/features',
},
};
export default function FeaturesPage() {
const t = en;
return (
<div className="pt-20">
<section className="bg-gradient-to-b from-slate-50 to-white py-20 px-4">
<div className="container mx-auto text-center max-w-4xl">
<h1 className="text-4xl md:text-5xl font-bold mb-6 text-slate-900">
Everything You Need <br /> to Run Successful QR Campaigns
</h1>
<p className="text-xl text-slate-600 mb-8">
From basic static codes to enterprise-grade dynamic tracking.
</p>
</div>
</section>
<StaticVsDynamic t={t} />
<Features t={t} />
{/* Additional Detail Sections could go here */}
<div className="py-20 bg-slate-50">
<Pricing t={t} />
</div>
</div>
);
}

408
src/app/(main)/feedback/[slug]/page.tsx
View File

@@ -1,204 +1,204 @@
'use client';
import { useEffect, useState } from 'react';
import { useParams } from 'next/navigation';
import { Star, Send, Check } from 'lucide-react';
interface FeedbackData {
businessName: string;
googleReviewUrl?: string;
thankYouMessage?: string;
}
export default function FeedbackPage() {
const params = useParams();
const slug = params.slug as string;
const [feedback, setFeedback] = useState<FeedbackData | null>(null);
const [loading, setLoading] = useState(true);
const [rating, setRating] = useState(0);
const [hoverRating, setHoverRating] = useState(0);
const [comment, setComment] = useState('');
const [submitted, setSubmitted] = useState(false);
const [submitting, setSubmitting] = useState(false);
useEffect(() => {
async function fetchFeedback() {
try {
const res = await fetch(`/api/qrs/public/${slug}`);
if (res.ok) {
const data = await res.json();
if (data.contentType === 'FEEDBACK') {
setFeedback(data.content as FeedbackData);
}
}
} catch (error) {
console.error('Error fetching feedback data:', error);
} finally {
setLoading(false);
}
}
fetchFeedback();
}, [slug]);
const handleSubmit = async () => {
if (rating === 0) return;
setSubmitting(true);
try {
await fetch('/api/feedback', {
method: 'POST',
headers: { 'Content-Type': 'application/json' },
body: JSON.stringify({ slug, rating, comment }),
});
setSubmitted(true);
if (rating >= 4 && feedback?.googleReviewUrl) {
setTimeout(() => {
const url = ensureAbsoluteUrl(feedback.googleReviewUrl);
if (url) window.location.href = url;
}, 2000);
}
} catch (error) {
console.error('Error submitting feedback:', error);
} finally {
setSubmitting(false);
}
};
// Loading
if (loading) {
return (
<div className="min-h-screen flex items-center justify-center bg-gradient-to-br from-[#FAF8F5] via-[#C6C0B3] to-[#4C5F4E]">
<div className="w-10 h-10 border-3 border-indigo-200 border-t-indigo-600 rounded-full animate-spin"></div>
</div>
);
}
// Not found
if (!feedback) {
return (
<div className="min-h-screen flex items-center justify-center bg-gradient-to-br from-[#FAF8F5] via-[#C6C0B3] to-[#4C5F4E] px-6">
<div className="text-center bg-white rounded-2xl p-8 shadow-lg">
<p className="text-gray-500 text-lg">This feedback form is not available.</p>
</div>
</div>
);
}
// Success
if (submitted) {
return (
<div className="min-h-screen flex items-center justify-center bg-gradient-to-br from-[#FAF8F5] via-[#C6C0B3] to-[#4C5F4E] px-6">
<div className="max-w-sm w-full bg-white rounded-3xl shadow-xl p-10 text-center">
<div className="w-20 h-20 bg-gradient-to-br from-[#4C5F4E] to-[#FAF8F5] rounded-full flex items-center justify-center mx-auto mb-6 shadow-lg">
<Check className="w-10 h-10 text-white" strokeWidth={2.5} />
</div>
<h1 className="text-2xl font-bold text-gray-900 mb-2">
Thank you!
</h1>
<p className="text-gray-500">
{feedback.thankYouMessage || 'Your feedback has been submitted.'}
</p>
{rating >= 4 && feedback.googleReviewUrl && (
<p className="text-sm text-teal-600 mt-6 font-medium">
Redirecting to Google Reviews...
</p>
)}
</div>
</div>
);
}
// Rating Form
return (
<div className="min-h-screen flex items-center justify-center bg-gradient-to-br from-[#FAF8F5] via-[#C6C0B3] to-[#4C5F4E] px-6 py-12">
<div className="max-w-md w-full">
{/* Card */}
<div className="bg-white rounded-3xl shadow-xl overflow-hidden">
{/* Colored Header */}
<div className="bg-gradient-to-r from-[#FAF8F5] via-[#C6C0B3] to-[#4C5F4E] p-8 text-center">
<div className="w-14 h-14 bg-[#4C5F4E]/10 rounded-2xl flex items-center justify-center mx-auto mb-4">
<Star className="w-7 h-7 text-[#4C5F4E]" />
</div>
<h1 className="text-2xl font-bold mb-1 text-gray-900">How was your experience?</h1>
<p className="text-gray-700">{feedback.businessName}</p>
</div>
{/* Content */}
<div className="p-8">
{/* Stars */}
<div className="flex justify-center gap-2 mb-2">
{[1, 2, 3, 4, 5].map((star) => (
<button
key={star}
onClick={() => setRating(star)}
onMouseEnter={() => setHoverRating(star)}
onMouseLeave={() => setHoverRating(0)}
className="p-1 transition-transform hover:scale-110 focus:outline-none"
aria-label={`Rate ${star} stars`}
>
<Star
className={`w-11 h-11 transition-all ${star <= (hoverRating || rating)
? 'text-amber-400 fill-amber-400 drop-shadow-sm'
: 'text-gray-200'
}`}
/>
</button>
))}
</div>
{/* Rating text */}
<p className="text-center text-sm font-medium h-6 mb-6" style={{ color: rating > 0 ? '#6366f1' : 'transparent' }}>
{rating === 1 && 'Poor'}
{rating === 2 && 'Fair'}
{rating === 3 && 'Good'}
{rating === 4 && 'Great!'}
{rating === 5 && 'Excellent!'}
</p>
{/* Comment */}
<div className="mb-6">
<textarea
value={comment}
onChange={(e) => setComment(e.target.value)}
placeholder="Share your thoughts (optional)"
rows={3}
className="w-full px-4 py-3 bg-gray-50 border border-gray-200 rounded-xl text-gray-900 placeholder-gray-400 focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:border-transparent resize-none"
/>
</div>
{/* Submit */}
<button
onClick={handleSubmit}
disabled={rating === 0 || submitting}
className={`w-full py-4 rounded-xl font-semibold flex items-center justify-center gap-2 transition-all ${rating === 0
? 'bg-gray-100 text-gray-400 cursor-not-allowed'
: 'bg-gradient-to-r from-[#4C5F4E] to-[#0C342C] text-white hover:from-[#5a705c] hover:to-[#0E4036] shadow-lg shadow-emerald-200'
}`}
>
<Send className="w-4 h-4" />
{submitting ? 'Sending...' : 'Submit Feedback'}
</button>
</div>
</div>
{/* Footer */}
<p className="text-center text-sm text-white/60 mt-6">
Powered by QR Master
</p>
</div>
</div>
);
}
function ensureAbsoluteUrl(url: string | undefined): string | undefined {
if (!url) return undefined;
if (/^[a-zA-Z][a-zA-Z0-9+.-]*:/.test(url)) {
return url;
}
return `https://${url}`;
}
'use client';
import { useEffect, useState } from 'react';
import { useParams } from 'next/navigation';
import { Star, Send, Check } from 'lucide-react';
interface FeedbackData {
businessName: string;
googleReviewUrl?: string;
thankYouMessage?: string;
}
export default function FeedbackPage() {
const params = useParams();
const slug = params.slug as string;
const [feedback, setFeedback] = useState<FeedbackData | null>(null);
const [loading, setLoading] = useState(true);
const [rating, setRating] = useState(0);
const [hoverRating, setHoverRating] = useState(0);
const [comment, setComment] = useState('');
const [submitted, setSubmitted] = useState(false);
const [submitting, setSubmitting] = useState(false);
useEffect(() => {
async function fetchFeedback() {
try {
const res = await fetch(`/api/qrs/public/${slug}`);
if (res.ok) {
const data = await res.json();
if (data.contentType === 'FEEDBACK') {
setFeedback(data.content as FeedbackData);
}
}
} catch (error) {
console.error('Error fetching feedback data:', error);
} finally {
setLoading(false);
}
}
fetchFeedback();
}, [slug]);
const handleSubmit = async () => {
if (rating === 0) return;
setSubmitting(true);
try {
await fetch('/api/feedback', {
method: 'POST',
headers: { 'Content-Type': 'application/json' },
body: JSON.stringify({ slug, rating, comment }),
});
setSubmitted(true);
if (rating >= 4 && feedback?.googleReviewUrl) {
setTimeout(() => {
const url = ensureAbsoluteUrl(feedback.googleReviewUrl);
if (url) window.location.href = url;
}, 2000);
}
} catch (error) {
console.error('Error submitting feedback:', error);
} finally {
setSubmitting(false);
}
};
// Loading
if (loading) {
return (
<div className="min-h-screen flex items-center justify-center bg-gradient-to-br from-[#FAF8F5] via-[#C6C0B3] to-[#4C5F4E]">
<div className="w-10 h-10 border-3 border-indigo-200 border-t-indigo-600 rounded-full animate-spin"></div>
</div>
);
}
// Not found
if (!feedback) {
return (
<div className="min-h-screen flex items-center justify-center bg-gradient-to-br from-[#FAF8F5] via-[#C6C0B3] to-[#4C5F4E] px-6">
<div className="text-center bg-white rounded-2xl p-8 shadow-lg">
<p className="text-gray-500 text-lg">This feedback form is not available.</p>
</div>
</div>
);
}
// Success
if (submitted) {
return (
<div className="min-h-screen flex items-center justify-center bg-gradient-to-br from-[#FAF8F5] via-[#C6C0B3] to-[#4C5F4E] px-6">
<div className="max-w-sm w-full bg-white rounded-3xl shadow-xl p-10 text-center">
<div className="w-20 h-20 bg-gradient-to-br from-[#4C5F4E] to-[#FAF8F5] rounded-full flex items-center justify-center mx-auto mb-6 shadow-lg">
<Check className="w-10 h-10 text-white" strokeWidth={2.5} />
</div>
<h1 className="text-2xl font-bold text-gray-900 mb-2">
Thank you!
</h1>
<p className="text-gray-500">
{feedback.thankYouMessage || 'Your feedback has been submitted.'}
</p>
{rating >= 4 && feedback.googleReviewUrl && (
<p className="text-sm text-teal-600 mt-6 font-medium">
Redirecting to Google Reviews...
</p>
)}
</div>
</div>
);
}
// Rating Form
return (
<div className="min-h-screen flex items-center justify-center bg-gradient-to-br from-[#FAF8F5] via-[#C6C0B3] to-[#4C5F4E] px-6 py-12">
<div className="max-w-md w-full">
{/* Card */}
<div className="bg-white rounded-3xl shadow-xl overflow-hidden">
{/* Colored Header */}
<div className="bg-gradient-to-r from-[#FAF8F5] via-[#C6C0B3] to-[#4C5F4E] p-8 text-center">
<div className="w-14 h-14 bg-[#4C5F4E]/10 rounded-2xl flex items-center justify-center mx-auto mb-4">
<Star className="w-7 h-7 text-[#4C5F4E]" />
</div>
<h1 className="text-2xl font-bold mb-1 text-gray-900">How was your experience?</h1>
<p className="text-gray-700">{feedback.businessName}</p>
</div>
{/* Content */}
<div className="p-8">
{/* Stars */}
<div className="flex justify-center gap-2 mb-2">
{[1, 2, 3, 4, 5].map((star) => (
<button
key={star}
onClick={() => setRating(star)}
onMouseEnter={() => setHoverRating(star)}
onMouseLeave={() => setHoverRating(0)}
className="p-1 transition-transform hover:scale-110 focus:outline-none"
aria-label={`Rate ${star} stars`}
>
<Star
className={`w-11 h-11 transition-all ${star <= (hoverRating || rating)
? 'text-amber-400 fill-amber-400 drop-shadow-sm'
: 'text-gray-200'
}`}
/>
</button>
))}
</div>
{/* Rating text */}
<p className="text-center text-sm font-medium h-6 mb-6" style={{ color: rating > 0 ? '#6366f1' : 'transparent' }}>
{rating === 1 && 'Poor'}
{rating === 2 && 'Fair'}
{rating === 3 && 'Good'}
{rating === 4 && 'Great!'}
{rating === 5 && 'Excellent!'}
</p>
{/* Comment */}
<div className="mb-6">
<textarea
value={comment}
onChange={(e) => setComment(e.target.value)}
placeholder="Share your thoughts (optional)"
rows={3}
className="w-full px-4 py-3 bg-gray-50 border border-gray-200 rounded-xl text-gray-900 placeholder-gray-400 focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:border-transparent resize-none"
/>
</div>
{/* Submit */}
<button
onClick={handleSubmit}
disabled={rating === 0 || submitting}
className={`w-full py-4 rounded-xl font-semibold flex items-center justify-center gap-2 transition-all ${rating === 0
? 'bg-gray-100 text-gray-400 cursor-not-allowed'
: 'bg-gradient-to-r from-[#4C5F4E] to-[#0C342C] text-white hover:from-[#5a705c] hover:to-[#0E4036] shadow-lg shadow-emerald-200'
}`}
>
<Send className="w-4 h-4" />
{submitting ? 'Sending...' : 'Submit Feedback'}
</button>
</div>
</div>
{/* Footer */}
<p className="text-center text-sm text-white/60 mt-6">
Powered by QR Master
</p>
</div>
</div>
);
}
function ensureAbsoluteUrl(url: string | undefined): string | undefined {
if (!url) return undefined;
if (/^[a-zA-Z][a-zA-Z0-9+.-]*:/.test(url)) {
return url;
}
return `https://${url}`;
}

196
src/app/(main)/guide/bulk-qr-code-generation/page.tsx
View File

@@ -1,98 +1,98 @@
import React from 'react';
import type { Metadata } from 'next';
import en from '@/i18n/en.json';
import Link from 'next/link';
import SeoJsonLd from '@/components/SeoJsonLd';
import { articleSchema } from '@/lib/schema';
export const metadata: Metadata = {
title: 'How to Bulk Generate QR Codes (CSV/Excel) | QR Master',
description: 'Learn how to create hundreds of QR codes at once using a CSV or Excel file. Free bulk QR code generator guide.',
alternates: {
canonical: 'https://www.qrmaster.net/guide/bulk-qr-code-generation',
},
};
export default function BulkGuidePage() {
return (
<div className="pt-20 bg-white">
<SeoJsonLd data={[
articleSchema({
headline: 'How to Bulk Generate QR Codes from CSV/Excel',
description: 'Step-by-step guide to generating hundreds of QR codes automatically using spreadsheet data.',
image: 'https://www.qrmaster.net/og-bulk-guide.png',
datePublished: '2025-10-15',
dateModified: '2025-10-15',
author: 'QR Master Team',
url: 'https://www.qrmaster.net/guide/bulk-qr-code-generation'
})
]} />
<article className="max-w-4xl mx-auto px-4 py-20">
<header className="mb-12 text-center">
<span className="text-sm font-semibold text-indigo-600 tracking-wide uppercase">Efficiency Guide</span>
<h1 className="text-4xl md:text-5xl font-bold text-slate-900 mt-2 mb-6">
How to Bulk Generate QR Codes
</h1>
<p className="text-xl text-slate-600">
Turn your spreadsheet into hundreds of QR codes in seconds.
</p>
</header>
<div className="prose prose-lg prose-slate mx-auto">
<p>
Need to create unique QR codes for 100 employees? Or 500 product labels? Manually creating them one by one is a waste of time. Instead, use our <strong>Bulk Creation</strong> tool.
</p>
<h2>Step 1: Prepare your data</h2>
<p>
Create a CSV or Excel file (XLSX) with two columns:
</p>
<ul>
<li><strong>Title:</strong> A name for the file (e.g., "Employee 001")</li>
<li><strong>Content:</strong> The URL or text for the QR code (e.g., "https://yoursite.com/emp/001")</li>
</ul>
<div className="bg-slate-100 p-4 rounded-lg text-sm font-mono mb-4">
Title,Content<br />
Item-1,https://example.com/1<br />
Item-2,https://example.com/2<br />
Item-3,https://example.com/3
</div>
<h2>Step 2: Upload to QR Master</h2>
<ol>
<li>Go to the <Link href="/bulk-qr-code-generator" className="text-indigo-600 hover:underline">Bulk Generator</Link> page.</li>
<li>Drag and drop your CSV/Excel file.</li>
<li>Review the preview to ensure columns are mapped correctly.</li>
</ol>
<h2>Step 3: Customize & Download</h2>
<p>
Set your brand colors, logo, and style. This style will be applied to <strong>all</strong> generated QR codes across the batch.
</p>
<p>
Finally, click <strong>Generate</strong>. You will receive a ZIP file containing:
</p>
<ul>
<li>All QR codes as individual PNG or SVG files.</li>
<li>Filenames matching your "Title" column for easy organization.</li>
</ul>
<h2>Limits & Pricing</h2>
<ul>
<li><strong>Free Plan:</strong> You can bulk generate limits for Static codes (no tracking).</li>
<li><strong>Business Plan:</strong> Unlocks Bulk Dynamic Codes (trackable) and higher limits (up to 1,000 at a time).</li>
</ul>
</div>
<div className="mt-16 text-center">
<Link href="/bulk-qr-code-generator">
<button className="bg-indigo-600 text-white px-8 py-3 rounded-full font-bold text-lg hover:bg-indigo-700 transition-colors">
Start Bulk Generation
</button>
</Link>
</div>
</article>
</div>
);
}
import React from 'react';
import type { Metadata } from 'next';
import en from '@/i18n/en.json';
import Link from 'next/link';
import SeoJsonLd from '@/components/SeoJsonLd';
import { articleSchema } from '@/lib/schema';
export const metadata: Metadata = {
title: 'How to Bulk Generate QR Codes (CSV/Excel) | QR Master',
description: 'Learn how to create hundreds of QR codes at once using a CSV or Excel file. Free bulk QR code generator guide.',
alternates: {
canonical: 'https://www.qrmaster.net/guide/bulk-qr-code-generation',
},
};
export default function BulkGuidePage() {
return (
<div className="pt-20 bg-white">
<SeoJsonLd data={[
articleSchema({
headline: 'How to Bulk Generate QR Codes from CSV/Excel',
description: 'Step-by-step guide to generating hundreds of QR codes automatically using spreadsheet data.',
image: 'https://www.qrmaster.net/og-bulk-guide.png',
datePublished: '2025-10-15',
dateModified: '2025-10-15',
author: 'QR Master Team',
url: 'https://www.qrmaster.net/guide/bulk-qr-code-generation'
})
]} />
<article className="max-w-4xl mx-auto px-4 py-20">
<header className="mb-12 text-center">
<span className="text-sm font-semibold text-indigo-600 tracking-wide uppercase">Efficiency Guide</span>
<h1 className="text-4xl md:text-5xl font-bold text-slate-900 mt-2 mb-6">
How to Bulk Generate QR Codes
</h1>
<p className="text-xl text-slate-600">
Turn your spreadsheet into hundreds of QR codes in seconds.
</p>
</header>
<div className="prose prose-lg prose-slate mx-auto">
<p>
Need to create unique QR codes for 100 employees? Or 500 product labels? Manually creating them one by one is a waste of time. Instead, use our <strong>Bulk Creation</strong> tool.
</p>
<h2>Step 1: Prepare your data</h2>
<p>
Create a CSV or Excel file (XLSX) with two columns:
</p>
<ul>
<li><strong>Title:</strong> A name for the file (e.g., "Employee 001")</li>
<li><strong>Content:</strong> The URL or text for the QR code (e.g., "https://yoursite.com/emp/001")</li>
</ul>
<div className="bg-slate-100 p-4 rounded-lg text-sm font-mono mb-4">
Title,Content<br />
Item-1,https://example.com/1<br />
Item-2,https://example.com/2<br />
Item-3,https://example.com/3
</div>
<h2>Step 2: Upload to QR Master</h2>
<ol>
<li>Go to the <Link href="/bulk-qr-code-generator" className="text-indigo-600 hover:underline">Bulk Generator</Link> page.</li>
<li>Drag and drop your CSV/Excel file.</li>
<li>Review the preview to ensure columns are mapped correctly.</li>
</ol>
<h2>Step 3: Customize & Download</h2>
<p>
Set your brand colors, logo, and style. This style will be applied to <strong>all</strong> generated QR codes across the batch.
</p>
<p>
Finally, click <strong>Generate</strong>. You will receive a ZIP file containing:
</p>
<ul>
<li>All QR codes as individual PNG or SVG files.</li>
<li>Filenames matching your "Title" column for easy organization.</li>
</ul>
<h2>Limits & Pricing</h2>
<ul>
<li><strong>Free Plan:</strong> You can bulk generate limits for Static codes (no tracking).</li>
<li><strong>Business Plan:</strong> Unlocks Bulk Dynamic Codes (trackable) and higher limits (up to 1,000 at a time).</li>
</ul>
</div>
<div className="mt-16 text-center">
<Link href="/bulk-qr-code-generator">
<button className="bg-indigo-600 text-white px-8 py-3 rounded-full font-bold text-lg hover:bg-indigo-700 transition-colors">
Start Bulk Generation
</button>
</Link>
</div>
</article>
</div>
);
}

208
src/app/(main)/guide/qr-code-best-practices/page.tsx
View File

@@ -1,104 +1,104 @@
import React from 'react';
import type { Metadata } from 'next';
import en from '@/i18n/en.json';
import Link from 'next/link';
import SeoJsonLd from '@/components/SeoJsonLd';
import { articleSchema } from '@/lib/schema';
export const metadata: Metadata = {
title: 'QR Code Best Practices (Size, Color, Testing) | QR Master Guide',
description: 'Ensure your QR codes scan every time. Guide on minimum size, color contrast, error correction, and placement best practices.',
alternates: {
canonical: 'https://www.qrmaster.net/guide/qr-code-best-practices',
},
};
export default function BestPracticesGuidePage() {
return (
<div className="pt-20 bg-white">
<SeoJsonLd data={[
articleSchema({
headline: 'QR Code Design Best Practices: The Ultimate Checklist',
description: 'Ensure your QR codes scan perfectly. Tips on size, contrast, and error correction levels.',
image: 'https://www.qrmaster.net/og-best-practices.png',
datePublished: '2025-10-15',
dateModified: '2025-10-15',
author: 'QR Master Team',
url: 'https://www.qrmaster.net/guide/qr-code-best-practices'
})
]} />
<article className="max-w-4xl mx-auto px-4 py-20">
<header className="mb-12 text-center">
<span className="text-sm font-semibold text-indigo-600 tracking-wide uppercase">Design Guide</span>
<h1 className="text-4xl md:text-5xl font-bold text-slate-900 mt-2 mb-6">
7 Rules for Perfect QR Codes
</h1>
<p className="text-xl text-slate-600">
Don't let a bad design kill your campaign. Follow these scanning rules.
</p>
</header>
<div className="prose prose-lg prose-slate mx-auto">
<h3>1. Size Matters</h3>
<p>
<strong>Minimum size:</strong> 2cm x 2cm (0.8" x 0.8") for dynamic codes.
If scanning from a distance (e.g., billboard), the QR code size should be 1/10th of the scanning distance (scan from 10m -&gt; 1m wide code).
</p>
<h3>2. High Contrast is Key</h3>
<p>
Always use a <strong>dark foreground</strong> on a <strong>light background</strong>. Most scanners expect this.
<br />
✅ Black on White
<br />
✅ Dark Blue on White
<br />
❌ White on Black (Inverted - some older scanners fail)
<br />
❌ Light Grey on White (Low contrast)
</p>
<h3>3. Leave a Quiet Zone</h3>
<p>
The "Quiet Zone" is the whitespace border around the QR code. It helps the scanner distinguish the code from the surroundings. Never print right to the edge of the pixels.
</p>
<h3>4. Error Correction Level</h3>
<p>
If you add a logo to the center, raise the Error Correction Level to <strong>High (H)</strong> or <strong>Quartile (Q)</strong>. This adds redundant data so the code is readable even if 30% is covered by your logo.
</p>
<h3>5. Don't Overstuff Static Codes</h3>
<p>
Static QR codes grow more complex (more dots) as you add data. A URL with 200 characters makes a dense, hard-to-scan code. Use a <strong>URL Shortener</strong> or <strong>Dynamic QR Code</strong> to keep the pattern simple.
</p>
<h3>6. Call to Action (CTA)</h3>
<p>
Don't just print a code. Tell users <strong>why</strong> they should scan.
<br />
<em>"Scan for Menu"</em>
<br />
<em>"Scan to Win"</em>
<br />
Frame your QR code with a clear CTA.
</p>
<h3>7. Test, Test, Test</h3>
<p>
Print a sample. Scan it with an iPhone. Scan it with an Android. Scan it in low light. Never assume it works until you verify it physically.
</p>
</div>
<div className="mt-16 text-center">
<Link href="/create-qr-code">
<button className="bg-indigo-600 text-white px-8 py-3 rounded-full font-bold text-lg hover:bg-indigo-700 transition-colors">
Create a Perfect QR Code
</button>
</Link>
</div>
</article>
</div>
);
}
import React from 'react';
import type { Metadata } from 'next';
import en from '@/i18n/en.json';
import Link from 'next/link';
import SeoJsonLd from '@/components/SeoJsonLd';
import { articleSchema } from '@/lib/schema';
export const metadata: Metadata = {
title: 'QR Code Best Practices (Size, Color, Testing) | QR Master Guide',
description: 'Ensure your QR codes scan every time. Guide on minimum size, color contrast, error correction, and placement best practices.',
alternates: {
canonical: 'https://www.qrmaster.net/guide/qr-code-best-practices',
},
};
export default function BestPracticesGuidePage() {
return (
<div className="pt-20 bg-white">
<SeoJsonLd data={[
articleSchema({
headline: 'QR Code Design Best Practices: The Ultimate Checklist',
description: 'Ensure your QR codes scan perfectly. Tips on size, contrast, and error correction levels.',
image: 'https://www.qrmaster.net/og-best-practices.png',
datePublished: '2025-10-15',
dateModified: '2025-10-15',
author: 'QR Master Team',
url: 'https://www.qrmaster.net/guide/qr-code-best-practices'
})
]} />
<article className="max-w-4xl mx-auto px-4 py-20">
<header className="mb-12 text-center">
<span className="text-sm font-semibold text-indigo-600 tracking-wide uppercase">Design Guide</span>
<h1 className="text-4xl md:text-5xl font-bold text-slate-900 mt-2 mb-6">
7 Rules for Perfect QR Codes
</h1>
<p className="text-xl text-slate-600">
Don't let a bad design kill your campaign. Follow these scanning rules.
</p>
</header>
<div className="prose prose-lg prose-slate mx-auto">
<h3>1. Size Matters</h3>
<p>
<strong>Minimum size:</strong> 2cm x 2cm (0.8" x 0.8") for dynamic codes.
If scanning from a distance (e.g., billboard), the QR code size should be 1/10th of the scanning distance (scan from 10m -&gt; 1m wide code).
</p>
<h3>2. High Contrast is Key</h3>
<p>
Always use a <strong>dark foreground</strong> on a <strong>light background</strong>. Most scanners expect this.
<br />
✅ Black on White
<br />
✅ Dark Blue on White
<br />
❌ White on Black (Inverted - some older scanners fail)
<br />
❌ Light Grey on White (Low contrast)
</p>
<h3>3. Leave a Quiet Zone</h3>
<p>
The "Quiet Zone" is the whitespace border around the QR code. It helps the scanner distinguish the code from the surroundings. Never print right to the edge of the pixels.
</p>
<h3>4. Error Correction Level</h3>
<p>
If you add a logo to the center, raise the Error Correction Level to <strong>High (H)</strong> or <strong>Quartile (Q)</strong>. This adds redundant data so the code is readable even if 30% is covered by your logo.
</p>
<h3>5. Don't Overstuff Static Codes</h3>
<p>
Static QR codes grow more complex (more dots) as you add data. A URL with 200 characters makes a dense, hard-to-scan code. Use a <strong>URL Shortener</strong> or <strong>Dynamic QR Code</strong> to keep the pattern simple.
</p>
<h3>6. Call to Action (CTA)</h3>
<p>
Don't just print a code. Tell users <strong>why</strong> they should scan.
<br />
<em>"Scan for Menu"</em>
<br />
<em>"Scan to Win"</em>
<br />
Frame your QR code with a clear CTA.
</p>
<h3>7. Test, Test, Test</h3>
<p>
Print a sample. Scan it with an iPhone. Scan it with an Android. Scan it in low light. Never assume it works until you verify it physically.
</p>
</div>
<div className="mt-16 text-center">
<Link href="/create-qr-code">
<button className="bg-indigo-600 text-white px-8 py-3 rounded-full font-bold text-lg hover:bg-indigo-700 transition-colors">
Create a Perfect QR Code
</button>
</Link>
</div>
</article>
</div>
);
}

206
src/app/(main)/guide/tracking-analytics/page.tsx
View File

@@ -1,103 +1,103 @@
import React from 'react';
import type { Metadata } from 'next';
import { Hero } from '@/components/marketing/Hero';
import { Features } from '@/components/marketing/Features';
import { FAQ } from '@/components/marketing/FAQ';
import en from '@/i18n/en.json';
import Link from 'next/link';
import SeoJsonLd from '@/components/SeoJsonLd';
import { articleSchema } from '@/lib/schema';
export const metadata: Metadata = {
title: 'How to Track QR Code Scans (GA4 + UTM) | QR Master Guide',
description: 'Learn how to track QR code scans using Google Analytics 4 (GA4), UTM parameters, and QR Master\'s built-in analytics. Step-by-step guide.',
alternates: {
canonical: 'https://www.qrmaster.net/guide/tracking-analytics',
},
};
export default function TrackingGuidePage() {
return (
<div className="pt-20 bg-white">
<SeoJsonLd data={[
articleSchema({
headline: 'How to Track QR Code Scans: The Definitive Guide (2025)',
description: 'From basic click counts to advanced Google Analytics 4 integration. Learn to track every scan.',
image: 'https://www.qrmaster.net/og-tracking-guide.png',
datePublished: '2025-10-15',
dateModified: '2025-10-15',
author: 'QR Master Team',
url: 'https://www.qrmaster.net/guide/tracking-analytics'
})
]} />
<article className="max-w-4xl mx-auto px-4 py-20">
<header className="mb-12 text-center">
<span className="text-sm font-semibold text-indigo-600 tracking-wide uppercase">Complete Guide</span>
<h1 className="text-4xl md:text-5xl font-bold text-slate-900 mt-2 mb-6">
How to Track QR Code Scans: The Definitive Guide (2025)
</h1>
<p className="text-xl text-slate-600">
From basic click counts to advanced Google Analytics 4 integration.
</p>
</header>
<div className="prose prose-lg prose-slate mx-auto">
<div className="bg-indigo-50 border-l-4 border-indigo-500 p-6 rounded-r-lg mb-12">
<h3 className="text-indigo-900 font-bold text-lg m-0 mb-2">🚀 Quick Answer</h3>
<p className="text-indigo-800 m-0">
To track QR code scans, you generally need a <strong>Dynamic QR Code</strong>. It redirects users through a short URL (like <code>qr.do/xyz</code>) which counts the scan before sending them to your destination. For advanced data, add <strong>UTM parameters</strong> to your URL to see traffic in Google Analytics 4.
</p>
</div>
<h2>Method 1: Built-in Tracking (Easiest)</h2>
<p>
QR Master provides built-in analytics for all Dynamic QR Codes. This is the simplest way to see:
</p>
<ul>
<li><strong>Total Scans:</strong> How many times your code was scanned.</li>
<li><strong>Unique Scans:</strong> How many individual people scanned it.</li>
<li><strong>Location:</strong> City and country of the scanner.</li>
<li><strong>Device:</strong> iPhone, Android, Desktop, etc.</li>
</ul>
<p>
<Link href="/dynamic-qr-code-generator" className="text-indigo-600 hover:underline">Create a Dynamic QR Code</Link> to start tracking instantly.
</p>
<h2>Method 2: Google Analytics 4 (Advanced)</h2>
<p>
If you want to track what users <em>do</em> after scanning (e.g., did they buy something?), you should use UTM parameters.
</p>
<h3>Step 1: Build your URL</h3>
<p>Instead of using `https://yoursite.com`, add parameters:</p>
<code className="block bg-slate-800 text-white p-4 rounded-lg text-sm overflow-x-auto mb-4">
https://yoursite.com?utm_source=qr_code&utm_medium=offline&utm_campaign=summer_menu
</code>
<h3>Step 2: Generate the QR Code</h3>
<p>Paste this long URL into the <Link href="/" className="text-indigo-600 hover:underline">QR generator</Link>. Now, when scanning:</p>
<ol>
<li>The user goes to your specific tagged URL.</li>
<li>GA4 records a session with `source: qr_code`.</li>
<li>You can see exactly how much revenue that specific QR code generated.</li>
</ol>
<h2>Common Pitfalls</h2>
<ul>
<li><strong>Forgot to test:</strong> Always scan your code <em>before</em> printing 1,000 copies.</li>
<li><strong>QR Code too small:</strong> Ensure it's at least 2cm x 2cm (0.8" x 0.8") for short distance scanning.</li>
<li><strong>Using Static Codes for Tracking:</strong> Static codes link directly. We cannot track them unless you use Method 2 (UTM) and check your own server logs.</li>
</ul>
</div>
<div className="mt-16 text-center">
<Link href="/dynamic-qr-code-generator">
<button className="bg-indigo-600 text-white px-8 py-3 rounded-full font-bold text-lg hover:bg-indigo-700 transition-colors">
Create Trackable QR Code Free
</button>
</Link>
</div>
</article>
</div>
);
}
import React from 'react';
import type { Metadata } from 'next';
import { Hero } from '@/components/marketing/Hero';
import { Features } from '@/components/marketing/Features';
import { FAQ } from '@/components/marketing/FAQ';
import en from '@/i18n/en.json';
import Link from 'next/link';
import SeoJsonLd from '@/components/SeoJsonLd';
import { articleSchema } from '@/lib/schema';
export const metadata: Metadata = {
title: 'How to Track QR Code Scans (GA4 + UTM) | QR Master Guide',
description: 'Learn how to track QR code scans using Google Analytics 4 (GA4), UTM parameters, and QR Master\'s built-in analytics. Step-by-step guide.',
alternates: {
canonical: 'https://www.qrmaster.net/guide/tracking-analytics',
},
};
export default function TrackingGuidePage() {
return (
<div className="pt-20 bg-white">
<SeoJsonLd data={[
articleSchema({
headline: 'How to Track QR Code Scans: The Definitive Guide (2025)',
description: 'From basic click counts to advanced Google Analytics 4 integration. Learn to track every scan.',
image: 'https://www.qrmaster.net/og-tracking-guide.png',
datePublished: '2025-10-15',
dateModified: '2025-10-15',
author: 'QR Master Team',
url: 'https://www.qrmaster.net/guide/tracking-analytics'
})
]} />
<article className="max-w-4xl mx-auto px-4 py-20">
<header className="mb-12 text-center">
<span className="text-sm font-semibold text-indigo-600 tracking-wide uppercase">Complete Guide</span>
<h1 className="text-4xl md:text-5xl font-bold text-slate-900 mt-2 mb-6">
How to Track QR Code Scans: The Definitive Guide (2025)
</h1>
<p className="text-xl text-slate-600">
From basic click counts to advanced Google Analytics 4 integration.
</p>
</header>
<div className="prose prose-lg prose-slate mx-auto">
<div className="bg-indigo-50 border-l-4 border-indigo-500 p-6 rounded-r-lg mb-12">
<h3 className="text-indigo-900 font-bold text-lg m-0 mb-2">🚀 Quick Answer</h3>
<p className="text-indigo-800 m-0">
To track QR code scans, you generally need a <strong>Dynamic QR Code</strong>. It redirects users through a short URL (like <code>qr.do/xyz</code>) which counts the scan before sending them to your destination. For advanced data, add <strong>UTM parameters</strong> to your URL to see traffic in Google Analytics 4.
</p>
</div>
<h2>Method 1: Built-in Tracking (Easiest)</h2>
<p>
QR Master provides built-in analytics for all Dynamic QR Codes. This is the simplest way to see:
</p>
<ul>
<li><strong>Total Scans:</strong> How many times your code was scanned.</li>
<li><strong>Unique Scans:</strong> How many individual people scanned it.</li>
<li><strong>Location:</strong> City and country of the scanner.</li>
<li><strong>Device:</strong> iPhone, Android, Desktop, etc.</li>
</ul>
<p>
<Link href="/dynamic-qr-code-generator" className="text-indigo-600 hover:underline">Create a Dynamic QR Code</Link> to start tracking instantly.
</p>
<h2>Method 2: Google Analytics 4 (Advanced)</h2>
<p>
If you want to track what users <em>do</em> after scanning (e.g., did they buy something?), you should use UTM parameters.
</p>
<h3>Step 1: Build your URL</h3>
<p>Instead of using `https://yoursite.com`, add parameters:</p>
<code className="block bg-slate-800 text-white p-4 rounded-lg text-sm overflow-x-auto mb-4">
https://yoursite.com?utm_source=qr_code&utm_medium=offline&utm_campaign=summer_menu
</code>
<h3>Step 2: Generate the QR Code</h3>
<p>Paste this long URL into the <Link href="/" className="text-indigo-600 hover:underline">QR generator</Link>. Now, when scanning:</p>
<ol>
<li>The user goes to your specific tagged URL.</li>
<li>GA4 records a session with `source: qr_code`.</li>
<li>You can see exactly how much revenue that specific QR code generated.</li>
</ol>
<h2>Common Pitfalls</h2>
<ul>
<li><strong>Forgot to test:</strong> Always scan your code <em>before</em> printing 1,000 copies.</li>
<li><strong>QR Code too small:</strong> Ensure it's at least 2cm x 2cm (0.8" x 0.8") for short distance scanning.</li>
<li><strong>Using Static Codes for Tracking:</strong> Static codes link directly. We cannot track them unless you use Method 2 (UTM) and check your own server logs.</li>
</ul>
</div>
<div className="mt-16 text-center">
<Link href="/dynamic-qr-code-generator">
<button className="bg-indigo-600 text-white px-8 py-3 rounded-full font-bold text-lg hover:bg-indigo-700 transition-colors">
Create Trackable QR Code Free
</button>
</Link>
</div>
</article>
</div>
);
}

132
src/app/(main)/layout.tsx
View File

@@ -1,67 +1,67 @@
import type { Metadata } from 'next';
import { Suspense } from 'react';
import '@/styles/globals.css';
import { Providers } from '@/components/Providers';
import AdSenseScript from '@/components/ads/AdSenseScript';
const isIndexable = process.env.NEXT_PUBLIC_INDEXABLE === 'true';
export const metadata: Metadata = {
metadataBase: new URL('https://www.qrmaster.net'),
title: {
default: 'QR Master – Smart QR Generator & Analytics',
template: '%s | QR Master',
},
description: 'Create dynamic QR codes, track scans, and scale campaigns with secure analytics. Free advanced features, bulk generation, and custom branding available.',
keywords: 'QR code, QR generator, dynamic QR, QR tracking, QR analytics, branded QR, bulk QR generator',
robots: isIndexable
? { index: true, follow: true }
: { index: false, follow: false },
icons: {
icon: [
{ url: '/favicon.svg', type: 'image/svg+xml' },
{ url: '/logo.svg', type: 'image/svg+xml' },
],
apple: '/logo.svg',
},
twitter: {
card: 'summary_large_image',
site: '@qrmaster',
images: ['https://www.qrmaster.net/og-image.png'],
},
openGraph: {
type: 'website',
siteName: 'QR Master',
title: 'QR Master – Smart QR Generator & Analytics',
description: 'Create dynamic QR codes, track scans, and scale campaigns with secure analytics. Free advanced features, bulk generation, and custom branding available.',
url: 'https://www.qrmaster.net',
images: [
{
url: 'https://www.qrmaster.net/og-image.png',
width: 1200,
height: 630,
alt: 'QR Master - Dynamic QR Code Generator and Analytics Platform',
},
],
locale: 'en_US',
},
};
export default function RootLayout({
children,
}: {
children: React.ReactNode;
}) {
return (
<html lang="en">
<body className="font-sans">
<Suspense fallback={null}>
<Providers>
<AdSenseScript />
{children}
</Providers>
</Suspense>
</body>
</html>
);
import type { Metadata } from 'next';
import { Suspense } from 'react';
import '@/styles/globals.css';
import { Providers } from '@/components/Providers';
import AdSenseScript from '@/components/ads/AdSenseScript';
const isIndexable = process.env.NEXT_PUBLIC_INDEXABLE === 'true';
export const metadata: Metadata = {
metadataBase: new URL('https://www.qrmaster.net'),
title: {
default: 'QR Master – Smart QR Generator & Analytics',
template: '%s | QR Master',
},
description: 'Create dynamic QR codes, track scans, and scale campaigns with secure analytics. Free advanced features, bulk generation, and custom branding available.',
keywords: 'QR code, QR generator, dynamic QR, QR tracking, QR analytics, branded QR, bulk QR generator',
robots: isIndexable
? { index: true, follow: true }
: { index: false, follow: false },
icons: {
icon: [
{ url: '/favicon.svg', type: 'image/svg+xml' },
{ url: '/logo.svg', type: 'image/svg+xml' },
],
apple: '/logo.svg',
},
twitter: {
card: 'summary_large_image',
site: '@qrmaster',
images: ['https://www.qrmaster.net/og-image.png'],
},
openGraph: {
type: 'website',
siteName: 'QR Master',
title: 'QR Master – Smart QR Generator & Analytics',
description: 'Create dynamic QR codes, track scans, and scale campaigns with secure analytics. Free advanced features, bulk generation, and custom branding available.',
url: 'https://www.qrmaster.net',
images: [
{
url: 'https://www.qrmaster.net/og-image.png',
width: 1200,
height: 630,
alt: 'QR Master - Dynamic QR Code Generator and Analytics Platform',
},
],
locale: 'en_US',
},
};
export default function RootLayout({
children,
}: {
children: React.ReactNode;
}) {
return (
<html lang="en">
<body className="font-sans">
<Suspense fallback={null}>
<Providers>
<AdSenseScript />
{children}
</Providers>
</Suspense>
</body>
</html>
);
}

496
src/app/(main)/r/[slug]/route.ts
View File

@@ -1,249 +1,249 @@
import { NextRequest, NextResponse } from 'next/server';
import { db } from '@/lib/db';
import { hashIP } from '@/lib/hash';
export async function GET(
request: NextRequest,
{ params }: { params: Promise<{ slug: string }> }
) {
try {
const { slug } = await params;
// Fetch QR code by slug
const qrCode = await db.qRCode.findUnique({
where: { slug },
select: {
id: true,
content: true,
contentType: true,
},
});
if (!qrCode) {
return new NextResponse('QR Code not found', { status: 404 });
}
// Track scan (fire and forget)
trackScan(qrCode.id, request).catch(console.error);
// Determine destination URL
let destination = '';
const content = qrCode.content as any;
switch (qrCode.contentType) {
case 'URL':
destination = ensureAbsoluteUrl(content.url);
break;
case 'PHONE':
destination = `tel:${content.phone}`;
break;
case 'SMS':
destination = `sms:${content.phone}${content.message ? `?body=${encodeURIComponent(content.message)}` : ''}`;
break;
case 'WHATSAPP':
destination = `https://wa.me/${content.phone}${content.message ? `?text=${encodeURIComponent(content.message)}` : ''}`;
break;
case 'VCARD':
// For vCard, redirect to display page
const baseUrlVcard = process.env.NEXT_PUBLIC_APP_URL || 'http://localhost:3050';
destination = `${baseUrlVcard}/vcard?firstName=${encodeURIComponent(content.firstName || '')}&lastName=${encodeURIComponent(content.lastName || '')}&email=${encodeURIComponent(content.email || '')}&phone=${encodeURIComponent(content.phone || '')}&organization=${encodeURIComponent(content.organization || '')}&title=${encodeURIComponent(content.title || '')}`;
break;
case 'GEO':
// For location, redirect to Google Maps (works on desktop and mobile)
const lat = content.latitude || 0;
const lon = content.longitude || 0;
destination = `https://maps.google.com/?q=${lat},${lon}`;
break;
case 'TEXT':
// For plain text, redirect to a display page
const baseUrlText = process.env.NEXT_PUBLIC_APP_URL || 'http://localhost:3050';
destination = `${baseUrlText}/display?text=${encodeURIComponent(content.text || '')}`;
break;
case 'PDF':
// Direct link to file
destination = ensureAbsoluteUrl(content.fileUrl);
break;
case 'APP':
// Smart device detection for app stores
const userAgent = request.headers.get('user-agent') || '';
const isIOS = /iphone|ipad|ipod/i.test(userAgent);
const isAndroid = /android/i.test(userAgent);
if (isIOS && content.iosUrl) {
destination = ensureAbsoluteUrl(content.iosUrl);
} else if (isAndroid && content.androidUrl) {
destination = ensureAbsoluteUrl(content.androidUrl);
} else {
destination = ensureAbsoluteUrl(content.fallbackUrl || content.iosUrl || content.androidUrl);
}
break;
case 'COUPON':
// Redirect to coupon display page
const baseUrlCoupon = process.env.NEXT_PUBLIC_APP_URL || 'http://localhost:3050';
destination = `${baseUrlCoupon}/coupon/${slug}`;
break;
case 'FEEDBACK':
// Redirect to feedback form page
const baseUrlFeedback = process.env.NEXT_PUBLIC_APP_URL || 'http://localhost:3050';
destination = `${baseUrlFeedback}/feedback/${slug}`;
break;
default:
destination = 'https://example.com';
}
// Preserve UTM parameters
const searchParams = request.nextUrl.searchParams;
const utmParams = ['utm_source', 'utm_medium', 'utm_campaign', 'utm_term', 'utm_content'];
const preservedParams = new URLSearchParams();
utmParams.forEach(param => {
const value = searchParams.get(param);
if (value) {
preservedParams.set(param, value);
}
});
// Add preserved params to destination
if (preservedParams.toString() && destination.startsWith('http')) {
const separator = destination.includes('?') ? '&' : '?';
destination = `${destination}${separator}${preservedParams.toString()}`;
}
// Return 307 redirect (temporary redirect that preserves method)
return NextResponse.redirect(destination, { status: 307 });
} catch (error) {
console.error('QR redirect error:', error);
return new NextResponse('Internal server error', { status: 500 });
}
}
async function trackScan(qrId: string, request: NextRequest) {
try {
const userAgent = request.headers.get('user-agent') || '';
const referer = request.headers.get('referer') || '';
const ip = request.headers.get('x-forwarded-for') ||
request.headers.get('x-real-ip') ||
'unknown';
// Check DNT header
const dnt = request.headers.get('dnt');
if (dnt === '1') {
// Respect Do Not Track - only increment counter
await db.qRScan.create({
data: {
qrId,
ipHash: 'dnt',
isUnique: false,
},
});
return;
}
// Hash IP for privacy
const ipHash = hashIP(ip);
// Device Detection Logic:
// 1. Windows or Linux -> Always Desktop
// 2. Explicit iPad/Tablet keywords -> Tablet
// 3. Mac + Chrome browser -> Desktop (real Mac users often use Chrome)
// 4. Mac + Safari + No Referrer -> Likely iPad scanning a QR code
// 5. Mobile keywords -> Mobile
// 6. Everything else -> Desktop
const isWindows = /windows/i.test(userAgent);
const isLinux = /linux/i.test(userAgent) && !/android/i.test(userAgent);
const isExplicitTablet = /tablet|ipad|playbook|silk/i.test(userAgent);
const isAndroidTablet = /android/i.test(userAgent) && !/mobile/i.test(userAgent);
const isMacintosh = /macintosh/i.test(userAgent);
const isChrome = /chrome/i.test(userAgent);
const isSafari = /safari/i.test(userAgent) && !isChrome;
const hasReferrer = !!referer;
// iPad in desktop mode: Mac + Safari (no Chrome) + No Referrer (physical scan)
const isLikelyiPadScan = isMacintosh && isSafari && !hasReferrer;
let device: string;
if (isWindows || isLinux) {
device = 'desktop';
} else if (isExplicitTablet || isAndroidTablet || isLikelyiPadScan) {
device = 'tablet';
} else if (/mobile|iphone/i.test(userAgent)) {
device = 'mobile';
} else if (isMacintosh && isChrome) {
device = 'desktop'; // Mac with Chrome = real desktop
} else if (isMacintosh && hasReferrer) {
device = 'desktop'; // Mac with referrer = probably clicked a link on desktop
} else {
device = 'desktop'; // Default fallback
}
// Detect OS
let os = 'unknown';
if (/windows/i.test(userAgent)) os = 'Windows';
else if (/mac/i.test(userAgent)) os = 'macOS';
else if (/linux/i.test(userAgent)) os = 'Linux';
else if (/android/i.test(userAgent)) os = 'Android';
else if (/ios|iphone|ipad/i.test(userAgent)) os = 'iOS';
// Get country from header (Vercel/Cloudflare provide this)
const country = request.headers.get('x-vercel-ip-country') ||
request.headers.get('cf-ipcountry') ||
'unknown';
// Extract UTM parameters
const searchParams = request.nextUrl.searchParams;
const utmSource = searchParams.get('utm_source');
const utmMedium = searchParams.get('utm_medium');
const utmCampaign = searchParams.get('utm_campaign');
// Check if this is a unique scan (first scan from this IP + Device today)
// We include a simplified device fingerprint so different devices on same IP count as unique
const deviceFingerprint = hashIP(userAgent.substring(0, 100)); // Hash the user agent for privacy
const today = new Date();
today.setHours(0, 0, 0, 0);
const existingScan = await db.qRScan.findFirst({
where: {
qrId,
ipHash,
userAgent: {
startsWith: userAgent.substring(0, 50), // Match same device type
},
ts: {
gte: today,
},
},
});
const isUnique = !existingScan;
// Create scan record
await db.qRScan.create({
data: {
qrId,
ipHash,
userAgent: userAgent.substring(0, 255),
device,
os,
country,
referrer: referer.substring(0, 255),
utmSource,
utmMedium,
utmCampaign,
isUnique,
},
});
} catch (error) {
// Don't throw - this is fire and forget
}
}
function ensureAbsoluteUrl(url: string): string {
if (!url) return 'https://example.com';
// Check if it already has a protocol (http://, https://, myapp://, mailto:, etc.)
if (/^[a-zA-Z][a-zA-Z0-9+.-]*:/.test(url)) {
return url;
}
// Default to https for web URLs
return `https://${url}`;
import { NextRequest, NextResponse } from 'next/server';
import { db } from '@/lib/db';
import { hashIP } from '@/lib/hash';
export async function GET(
request: NextRequest,
{ params }: { params: Promise<{ slug: string }> }
) {
try {
const { slug } = await params;
// Fetch QR code by slug
const qrCode = await db.qRCode.findUnique({
where: { slug },
select: {
id: true,
content: true,
contentType: true,
},
});
if (!qrCode) {
return new NextResponse('QR Code not found', { status: 404 });
}
// Track scan (fire and forget)
trackScan(qrCode.id, request).catch(console.error);
// Determine destination URL
let destination = '';
const content = qrCode.content as any;
switch (qrCode.contentType) {
case 'URL':
destination = ensureAbsoluteUrl(content.url);
break;
case 'PHONE':
destination = `tel:${content.phone}`;
break;
case 'SMS':
destination = `sms:${content.phone}${content.message ? `?body=${encodeURIComponent(content.message)}` : ''}`;
break;
case 'WHATSAPP':
destination = `https://wa.me/${content.phone}${content.message ? `?text=${encodeURIComponent(content.message)}` : ''}`;
break;
case 'VCARD':
// For vCard, redirect to display page
const baseUrlVcard = process.env.NEXT_PUBLIC_APP_URL || 'http://localhost:3050';
destination = `${baseUrlVcard}/vcard?firstName=${encodeURIComponent(content.firstName || '')}&lastName=${encodeURIComponent(content.lastName || '')}&email=${encodeURIComponent(content.email || '')}&phone=${encodeURIComponent(content.phone || '')}&organization=${encodeURIComponent(content.organization || '')}&title=${encodeURIComponent(content.title || '')}`;
break;
case 'GEO':
// For location, redirect to Google Maps (works on desktop and mobile)
const lat = content.latitude || 0;
const lon = content.longitude || 0;
destination = `https://maps.google.com/?q=${lat},${lon}`;
break;
case 'TEXT':
// For plain text, redirect to a display page
const baseUrlText = process.env.NEXT_PUBLIC_APP_URL || 'http://localhost:3050';
destination = `${baseUrlText}/display?text=${encodeURIComponent(content.text || '')}`;
break;
case 'PDF':
// Direct link to file
destination = ensureAbsoluteUrl(content.fileUrl);
break;
case 'APP':
// Smart device detection for app stores
const userAgent = request.headers.get('user-agent') || '';
const isIOS = /iphone|ipad|ipod/i.test(userAgent);
const isAndroid = /android/i.test(userAgent);
if (isIOS && content.iosUrl) {
destination = ensureAbsoluteUrl(content.iosUrl);
} else if (isAndroid && content.androidUrl) {
destination = ensureAbsoluteUrl(content.androidUrl);
} else {
destination = ensureAbsoluteUrl(content.fallbackUrl || content.iosUrl || content.androidUrl);
}
break;
case 'COUPON':
// Redirect to coupon display page
const baseUrlCoupon = process.env.NEXT_PUBLIC_APP_URL || 'http://localhost:3050';
destination = `${baseUrlCoupon}/coupon/${slug}`;
break;
case 'FEEDBACK':
// Redirect to feedback form page
const baseUrlFeedback = process.env.NEXT_PUBLIC_APP_URL || 'http://localhost:3050';
destination = `${baseUrlFeedback}/feedback/${slug}`;
break;
default:
destination = 'https://example.com';
}
// Preserve UTM parameters
const searchParams = request.nextUrl.searchParams;
const utmParams = ['utm_source', 'utm_medium', 'utm_campaign', 'utm_term', 'utm_content'];
const preservedParams = new URLSearchParams();
utmParams.forEach(param => {
const value = searchParams.get(param);
if (value) {
preservedParams.set(param, value);
}
});
// Add preserved params to destination
if (preservedParams.toString() && destination.startsWith('http')) {
const separator = destination.includes('?') ? '&' : '?';
destination = `${destination}${separator}${preservedParams.toString()}`;
}
// Return 307 redirect (temporary redirect that preserves method)
return NextResponse.redirect(destination, { status: 307 });
} catch (error) {
console.error('QR redirect error:', error);
return new NextResponse('Internal server error', { status: 500 });
}
}
async function trackScan(qrId: string, request: NextRequest) {
try {
const userAgent = request.headers.get('user-agent') || '';
const referer = request.headers.get('referer') || '';
const ip = request.headers.get('x-forwarded-for') ||
request.headers.get('x-real-ip') ||
'unknown';
// Check DNT header
const dnt = request.headers.get('dnt');
if (dnt === '1') {
// Respect Do Not Track - only increment counter
await db.qRScan.create({
data: {
qrId,
ipHash: 'dnt',
isUnique: false,
},
});
return;
}
// Hash IP for privacy
const ipHash = hashIP(ip);
// Device Detection Logic:
// 1. Windows or Linux -> Always Desktop
// 2. Explicit iPad/Tablet keywords -> Tablet
// 3. Mac + Chrome browser -> Desktop (real Mac users often use Chrome)
// 4. Mac + Safari + No Referrer -> Likely iPad scanning a QR code
// 5. Mobile keywords -> Mobile
// 6. Everything else -> Desktop
const isWindows = /windows/i.test(userAgent);
const isLinux = /linux/i.test(userAgent) && !/android/i.test(userAgent);
const isExplicitTablet = /tablet|ipad|playbook|silk/i.test(userAgent);
const isAndroidTablet = /android/i.test(userAgent) && !/mobile/i.test(userAgent);
const isMacintosh = /macintosh/i.test(userAgent);
const isChrome = /chrome/i.test(userAgent);
const isSafari = /safari/i.test(userAgent) && !isChrome;
const hasReferrer = !!referer;
// iPad in desktop mode: Mac + Safari (no Chrome) + No Referrer (physical scan)
const isLikelyiPadScan = isMacintosh && isSafari && !hasReferrer;
let device: string;
if (isWindows || isLinux) {
device = 'desktop';
} else if (isExplicitTablet || isAndroidTablet || isLikelyiPadScan) {
device = 'tablet';
} else if (/mobile|iphone/i.test(userAgent)) {
device = 'mobile';
} else if (isMacintosh && isChrome) {
device = 'desktop'; // Mac with Chrome = real desktop
} else if (isMacintosh && hasReferrer) {
device = 'desktop'; // Mac with referrer = probably clicked a link on desktop
} else {
device = 'desktop'; // Default fallback
}
// Detect OS
let os = 'unknown';
if (/windows/i.test(userAgent)) os = 'Windows';
else if (/mac/i.test(userAgent)) os = 'macOS';
else if (/linux/i.test(userAgent)) os = 'Linux';
else if (/android/i.test(userAgent)) os = 'Android';
else if (/ios|iphone|ipad/i.test(userAgent)) os = 'iOS';
// Get country from header (Vercel/Cloudflare provide this)
const country = request.headers.get('x-vercel-ip-country') ||
request.headers.get('cf-ipcountry') ||
'unknown';
// Extract UTM parameters
const searchParams = request.nextUrl.searchParams;
const utmSource = searchParams.get('utm_source');
const utmMedium = searchParams.get('utm_medium');
const utmCampaign = searchParams.get('utm_campaign');
// Check if this is a unique scan (first scan from this IP + Device today)
// We include a simplified device fingerprint so different devices on same IP count as unique
const deviceFingerprint = hashIP(userAgent.substring(0, 100)); // Hash the user agent for privacy
const today = new Date();
today.setHours(0, 0, 0, 0);
const existingScan = await db.qRScan.findFirst({
where: {
qrId,
ipHash,
userAgent: {
startsWith: userAgent.substring(0, 50), // Match same device type
},
ts: {
gte: today,
},
},
});
const isUnique = !existingScan;
// Create scan record
await db.qRScan.create({
data: {
qrId,
ipHash,
userAgent: userAgent.substring(0, 255),
device,
os,
country,
referrer: referer.substring(0, 255),
utmSource,
utmMedium,
utmCampaign,
isUnique,
},
});
} catch (error) {
// Don't throw - this is fire and forget
}
}
function ensureAbsoluteUrl(url: string): string {
if (!url) return 'https://example.com';
// Check if it already has a protocol (http://, https://, myapp://, mailto:, etc.)
if (/^[a-zA-Z][a-zA-Z0-9+.-]*:/.test(url)) {
return url;
}
// Default to https for web URLs
return `https://${url}`;
}

106
src/app/(main)/tools/page.tsx
View File

@@ -1,53 +1,53 @@
import React from 'react';
import type { Metadata } from 'next';
import { FreeToolsGrid } from '@/components/marketing/FreeToolsGrid';
export const metadata: Metadata = {
title: 'Free QR Code Tools | URL, vCard, WiFi & More | QR Master',
description: 'Access our complete collection of free QR code generators. Create codes for URLs, WiFi, plain text, vCards, and more. No signup required for static codes.',
alternates: {
canonical: 'https://www.qrmaster.net/tools',
},
openGraph: {
title: 'Free QR Code Tools Collection',
description: 'All your QR code needs in one place. Free forever static codes.',
url: 'https://www.qrmaster.net/tools',
siteName: 'QR Master',
type: 'website',
},
};
export default function ToolsHubPage() {
return (
<div className="min-h-screen bg-slate-50 pt-20">
<section className="bg-white py-20 px-4 border-b border-slate-200">
<div className="container mx-auto text-center max-w-4xl">
<span className="inline-block px-4 py-1.5 rounded-full bg-indigo-50 text-indigo-700 font-semibold text-sm mb-6">
100% Free Forever
</span>
<h1 className="text-4xl md:text-6xl font-extrabold text-slate-900 mb-6 tracking-tight">
Free QR Code Tools
</h1>
<p className="text-xl text-slate-600 mb-8 leading-relaxed max-w-2xl mx-auto">
Generate static QR codes for any purpose. No credit card, no expiration, no hidden fees.
</p>
</div>
</section>
<div className="py-12">
<FreeToolsGrid />
</div>
<section className="py-20 px-4">
<div className="container mx-auto max-w-3xl text-center">
<h2 className="text-2xl font-bold text-slate-900 mb-4">Why are these tools free?</h2>
<p className="text-slate-600 mb-8">
We believe basic QR codes should be accessible to everyone. Our static QR codes encode your data directly into the image,
meaning we don't need to host tracking servers for them. That's why they are free forever.
If you need tracking and editability, check out our Dynamic QR Codes.
</p>
</div>
</section>
</div>
);
}
import React from 'react';
import type { Metadata } from 'next';
import { FreeToolsGrid } from '@/components/marketing/FreeToolsGrid';
export const metadata: Metadata = {
title: 'Free QR Code Tools | URL, vCard, WiFi & More | QR Master',
description: 'Access our complete collection of free QR code generators. Create codes for URLs, WiFi, plain text, vCards, and more. No signup required for static codes.',
alternates: {
canonical: 'https://www.qrmaster.net/tools',
},
openGraph: {
title: 'Free QR Code Tools Collection',
description: 'All your QR code needs in one place. Free forever static codes.',
url: 'https://www.qrmaster.net/tools',
siteName: 'QR Master',
type: 'website',
},
};
export default function ToolsHubPage() {
return (
<div className="min-h-screen bg-slate-50 pt-20">
<section className="bg-white py-20 px-4 border-b border-slate-200">
<div className="container mx-auto text-center max-w-4xl">
<span className="inline-block px-4 py-1.5 rounded-full bg-indigo-50 text-indigo-700 font-semibold text-sm mb-6">
100% Free Forever
</span>
<h1 className="text-4xl md:text-6xl font-extrabold text-slate-900 mb-6 tracking-tight">
Free QR Code Tools
</h1>
<p className="text-xl text-slate-600 mb-8 leading-relaxed max-w-2xl mx-auto">
Generate static QR codes for any purpose. No credit card, no expiration, no hidden fees.
</p>
</div>
</section>
<div className="py-12">
<FreeToolsGrid />
</div>
<section className="py-20 px-4">
<div className="container mx-auto max-w-3xl text-center">
<h2 className="text-2xl font-bold text-slate-900 mb-4">Why are these tools free?</h2>
<p className="text-slate-600 mb-8">
We believe basic QR codes should be accessible to everyone. Our static QR codes encode your data directly into the image,
meaning we don't need to host tracking servers for them. That's why they are free forever.
If you need tracking and editability, check out our Dynamic QR Codes.
</p>
</div>
</section>
</div>
);
}

52
src/app/(main)/vcard/layout.tsx
View File

@@ -1,26 +1,26 @@
import '@/styles/globals.css';
export const metadata = {
title: 'vCard Download',
description: 'Download contact information',
icons: {
icon: [
{ url: '/favicon.svg', type: 'image/svg+xml' },
{ url: '/logo.svg', type: 'image/svg+xml' },
],
apple: '/logo.svg',
},
};
export default function VCardLayout({
children,
}: {
children: React.ReactNode;
}) {
return (
<html lang="en">
<body>{children}</body>
</html>
);
}
import '@/styles/globals.css';
export const metadata = {
title: 'vCard Download',
description: 'Download contact information',
icons: {
icon: [
{ url: '/favicon.svg', type: 'image/svg+xml' },
{ url: '/logo.svg', type: 'image/svg+xml' },
],
apple: '/logo.svg',
},
};
export default function VCardLayout({
children,
}: {
children: React.ReactNode;
}) {
return (
<html lang="en">
<body>{children}</body>
</html>
);
}

548
src/app/(main)/vcard/page.tsx
View File

@@ -1,274 +1,274 @@
'use client';
import React, { useEffect, useState } from 'react';
import { useSearchParams } from 'next/navigation';
export default function VCardPage() {
const searchParams = useSearchParams();
const [isLoading, setIsLoading] = useState(true);
const [firstName, setFirstName] = useState('');
const [lastName, setLastName] = useState('');
const [email, setEmail] = useState('');
const [phone, setPhone] = useState('');
const [organization, setOrganization] = useState('');
const [title, setTitle] = useState('');
const [hasAutoDownloaded, setHasAutoDownloaded] = useState(false);
useEffect(() => {
const firstNameParam = searchParams.get('firstName');
const lastNameParam = searchParams.get('lastName');
const emailParam = searchParams.get('email');
const phoneParam = searchParams.get('phone');
const organizationParam = searchParams.get('organization');
const titleParam = searchParams.get('title');
if (firstNameParam) setFirstName(firstNameParam);
if (lastNameParam) setLastName(lastNameParam);
if (emailParam) setEmail(emailParam);
if (phoneParam) setPhone(phoneParam);
if (organizationParam) setOrganization(organizationParam);
if (titleParam) setTitle(titleParam);
setIsLoading(false);
}, [searchParams]);
// Auto-download after 500ms (only once)
useEffect(() => {
if ((firstName || lastName) && !hasAutoDownloaded) {
const timer = setTimeout(() => {
handleSaveContact();
setHasAutoDownloaded(true);
}, 500);
return () => clearTimeout(timer);
}
}, [firstName, lastName, hasAutoDownloaded]); // eslint-disable-line react-hooks/exhaustive-deps
const handleSaveContact = () => {
// Generate vCard format
const vCard = `BEGIN:VCARD
VERSION:3.0
FN:${firstName} ${lastName}
N:${lastName};${firstName};;;
${organization ? `ORG:${organization}` : ''}
${title ? `TITLE:${title}` : ''}
${email ? `EMAIL:${email}` : ''}
${phone ? `TEL:${phone}` : ''}
END:VCARD`;
// Create a blob and download
const blob = new Blob([vCard], { type: 'text/vcard;charset=utf-8' });
const url = URL.createObjectURL(blob);
const link = document.createElement('a');
link.href = url;
link.download = `${firstName}_${lastName}.vcf`;
document.body.appendChild(link);
link.click();
document.body.removeChild(link);
URL.revokeObjectURL(url);
};
// Show loading or error state
if (isLoading) {
return (
<div style={{
minHeight: '100vh',
display: 'flex',
alignItems: 'center',
justifyContent: 'center',
fontFamily: '-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif',
backgroundColor: '#ffffff'
}}>
<div style={{ textAlign: 'center' }}>
<div style={{ fontSize: '48px', marginBottom: '16px' }}>👤</div>
<p style={{ color: '#666' }}>Loading contact...</p>
</div>
</div>
);
}
if (!firstName && !lastName) {
return (
<div style={{
minHeight: '100vh',
display: 'flex',
alignItems: 'center',
justifyContent: 'center',
fontFamily: '-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif',
padding: '20px',
backgroundColor: '#ffffff'
}}>
<div style={{
maxWidth: '420px',
width: '100%',
padding: '48px 32px',
textAlign: 'center'
}}>
<div style={{
fontSize: '64px',
marginBottom: '24px',
opacity: 0.3
}}>👤</div>
<h1 style={{
fontSize: '22px',
fontWeight: '600',
marginBottom: '12px',
color: '#1a1a1a'
}}>No Contact Found</h1>
<p style={{
color: '#666',
fontSize: '15px',
lineHeight: '1.6'
}}>This QR code doesn't contain any contact information.</p>
</div>
</div>
);
}
return (
<div style={{
minHeight: '100vh',
display: 'flex',
alignItems: 'center',
justifyContent: 'center',
fontFamily: '-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif',
padding: '20px',
backgroundColor: '#ffffff'
}}>
<div style={{
maxWidth: '420px',
width: '100%',
padding: '48px 32px'
}}>
{/* Header */}
<div style={{ textAlign: 'center', marginBottom: '32px' }}>
<div style={{
width: '80px',
height: '80px',
margin: '0 auto 20px',
borderRadius: '50%',
backgroundColor: '#f0f0f0',
display: 'flex',
alignItems: 'center',
justifyContent: 'center',
fontSize: '36px'
}}>👤</div>
<h1 style={{
fontSize: '28px',
fontWeight: '600',
marginBottom: '8px',
color: '#1a1a1a',
letterSpacing: '-0.02em'
}}>
{firstName} {lastName}
</h1>
{(title || organization) && (
<p style={{
color: '#666',
fontSize: '16px',
marginTop: '4px'
}}>
{title && organization && `${title} at ${organization}`}
{title && !organization && title}
{!title && organization && organization}
</p>
)}
</div>
{/* Contact Details */}
<div style={{ marginBottom: '32px' }}>
{email && (
<div style={{
padding: '16px 20px',
backgroundColor: '#f8f8f8',
borderRadius: '12px',
marginBottom: '12px',
border: '1px solid #f0f0f0'
}}>
<div style={{
fontSize: '11px',
color: '#888',
marginBottom: '6px',
textTransform: 'uppercase',
letterSpacing: '0.5px',
fontWeight: '500'
}}>Email</div>
<a href={`mailto:${email}`} style={{
fontSize: '15px',
fontWeight: '500',
color: '#2563eb',
textDecoration: 'none',
wordBreak: 'break-all'
}}>{email}</a>
</div>
)}
{phone && (
<div style={{
padding: '16px 20px',
backgroundColor: '#f8f8f8',
borderRadius: '12px',
border: '1px solid #f0f0f0'
}}>
<div style={{
fontSize: '11px',
color: '#888',
marginBottom: '6px',
textTransform: 'uppercase',
letterSpacing: '0.5px',
fontWeight: '500'
}}>Phone</div>
<a href={`tel:${phone}`} style={{
fontSize: '15px',
fontWeight: '500',
color: '#2563eb',
textDecoration: 'none'
}}>{phone}</a>
</div>
)}
</div>
{/* Save Button */}
<button
onClick={handleSaveContact}
style={{
width: '100%',
padding: '16px',
fontSize: '16px',
fontWeight: '600',
color: 'white',
backgroundColor: '#2563eb',
border: 'none',
borderRadius: '12px',
cursor: 'pointer',
transition: 'all 0.2s',
boxShadow: '0 2px 8px rgba(37, 99, 235, 0.2)'
}}
onMouseEnter={(e) => {
e.currentTarget.style.backgroundColor = '#1d4ed8';
e.currentTarget.style.transform = 'translateY(-1px)';
e.currentTarget.style.boxShadow = '0 4px 12px rgba(37, 99, 235, 0.3)';
}}
onMouseLeave={(e) => {
e.currentTarget.style.backgroundColor = '#2563eb';
e.currentTarget.style.transform = 'translateY(0)';
e.currentTarget.style.boxShadow = '0 2px 8px rgba(37, 99, 235, 0.2)';
}}
>
Save to Contacts
</button>
<p style={{
textAlign: 'center',
fontSize: '13px',
color: '#999',
marginTop: '16px',
lineHeight: '1.5'
}}>
Add this contact to your address book
</p>
</div>
</div>
);
}
'use client';
import React, { useEffect, useState } from 'react';
import { useSearchParams } from 'next/navigation';
export default function VCardPage() {
const searchParams = useSearchParams();
const [isLoading, setIsLoading] = useState(true);
const [firstName, setFirstName] = useState('');
const [lastName, setLastName] = useState('');
const [email, setEmail] = useState('');
const [phone, setPhone] = useState('');
const [organization, setOrganization] = useState('');
const [title, setTitle] = useState('');
const [hasAutoDownloaded, setHasAutoDownloaded] = useState(false);
useEffect(() => {
const firstNameParam = searchParams.get('firstName');
const lastNameParam = searchParams.get('lastName');
const emailParam = searchParams.get('email');
const phoneParam = searchParams.get('phone');
const organizationParam = searchParams.get('organization');
const titleParam = searchParams.get('title');
if (firstNameParam) setFirstName(firstNameParam);
if (lastNameParam) setLastName(lastNameParam);
if (emailParam) setEmail(emailParam);
if (phoneParam) setPhone(phoneParam);
if (organizationParam) setOrganization(organizationParam);
if (titleParam) setTitle(titleParam);
setIsLoading(false);
}, [searchParams]);
// Auto-download after 500ms (only once)
useEffect(() => {
if ((firstName || lastName) && !hasAutoDownloaded) {
const timer = setTimeout(() => {
handleSaveContact();
setHasAutoDownloaded(true);
}, 500);
return () => clearTimeout(timer);
}
}, [firstName, lastName, hasAutoDownloaded]); // eslint-disable-line react-hooks/exhaustive-deps
const handleSaveContact = () => {
// Generate vCard format
const vCard = `BEGIN:VCARD
VERSION:3.0
FN:${firstName} ${lastName}
N:${lastName};${firstName};;;
${organization ? `ORG:${organization}` : ''}
${title ? `TITLE:${title}` : ''}
${email ? `EMAIL:${email}` : ''}
${phone ? `TEL:${phone}` : ''}
END:VCARD`;
// Create a blob and download
const blob = new Blob([vCard], { type: 'text/vcard;charset=utf-8' });
const url = URL.createObjectURL(blob);
const link = document.createElement('a');
link.href = url;
link.download = `${firstName}_${lastName}.vcf`;
document.body.appendChild(link);
link.click();
document.body.removeChild(link);
URL.revokeObjectURL(url);
};
// Show loading or error state
if (isLoading) {
return (
<div style={{
minHeight: '100vh',
display: 'flex',
alignItems: 'center',
justifyContent: 'center',
fontFamily: '-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif',
backgroundColor: '#ffffff'
}}>
<div style={{ textAlign: 'center' }}>
<div style={{ fontSize: '48px', marginBottom: '16px' }}>👤</div>
<p style={{ color: '#666' }}>Loading contact...</p>
</div>
</div>
);
}
if (!firstName && !lastName) {
return (
<div style={{
minHeight: '100vh',
display: 'flex',
alignItems: 'center',
justifyContent: 'center',
fontFamily: '-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif',
padding: '20px',
backgroundColor: '#ffffff'
}}>
<div style={{
maxWidth: '420px',
width: '100%',
padding: '48px 32px',
textAlign: 'center'
}}>
<div style={{
fontSize: '64px',
marginBottom: '24px',
opacity: 0.3
}}>👤</div>
<h1 style={{
fontSize: '22px',
fontWeight: '600',
marginBottom: '12px',
color: '#1a1a1a'
}}>No Contact Found</h1>
<p style={{
color: '#666',
fontSize: '15px',
lineHeight: '1.6'
}}>This QR code doesn't contain any contact information.</p>
</div>
</div>
);
}
return (
<div style={{
minHeight: '100vh',
display: 'flex',
alignItems: 'center',
justifyContent: 'center',
fontFamily: '-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif',
padding: '20px',
backgroundColor: '#ffffff'
}}>
<div style={{
maxWidth: '420px',
width: '100%',
padding: '48px 32px'
}}>
{/* Header */}
<div style={{ textAlign: 'center', marginBottom: '32px' }}>
<div style={{
width: '80px',
height: '80px',
margin: '0 auto 20px',
borderRadius: '50%',
backgroundColor: '#f0f0f0',
display: 'flex',
alignItems: 'center',
justifyContent: 'center',
fontSize: '36px'
}}>👤</div>
<h1 style={{
fontSize: '28px',
fontWeight: '600',
marginBottom: '8px',
color: '#1a1a1a',
letterSpacing: '-0.02em'
}}>
{firstName} {lastName}
</h1>
{(title || organization) && (
<p style={{
color: '#666',
fontSize: '16px',
marginTop: '4px'
}}>
{title && organization && `${title} at ${organization}`}
{title && !organization && title}
{!title && organization && organization}
</p>
)}
</div>
{/* Contact Details */}
<div style={{ marginBottom: '32px' }}>
{email && (
<div style={{
padding: '16px 20px',
backgroundColor: '#f8f8f8',
borderRadius: '12px',
marginBottom: '12px',
border: '1px solid #f0f0f0'
}}>
<div style={{
fontSize: '11px',
color: '#888',
marginBottom: '6px',
textTransform: 'uppercase',
letterSpacing: '0.5px',
fontWeight: '500'
}}>Email</div>
<a href={`mailto:${email}`} style={{
fontSize: '15px',
fontWeight: '500',
color: '#2563eb',
textDecoration: 'none',
wordBreak: 'break-all'
}}>{email}</a>
</div>
)}
{phone && (
<div style={{
padding: '16px 20px',
backgroundColor: '#f8f8f8',
borderRadius: '12px',
border: '1px solid #f0f0f0'
}}>
<div style={{
fontSize: '11px',
color: '#888',
marginBottom: '6px',
textTransform: 'uppercase',
letterSpacing: '0.5px',
fontWeight: '500'
}}>Phone</div>
<a href={`tel:${phone}`} style={{
fontSize: '15px',
fontWeight: '500',
color: '#2563eb',
textDecoration: 'none'
}}>{phone}</a>
</div>
)}
</div>
{/* Save Button */}
<button
onClick={handleSaveContact}
style={{
width: '100%',
padding: '16px',
fontSize: '16px',
fontWeight: '600',
color: 'white',
backgroundColor: '#2563eb',
border: 'none',
borderRadius: '12px',
cursor: 'pointer',
transition: 'all 0.2s',
boxShadow: '0 2px 8px rgba(37, 99, 235, 0.2)'
}}
onMouseEnter={(e) => {
e.currentTarget.style.backgroundColor = '#1d4ed8';
e.currentTarget.style.transform = 'translateY(-1px)';
e.currentTarget.style.boxShadow = '0 4px 12px rgba(37, 99, 235, 0.3)';
}}
onMouseLeave={(e) => {
e.currentTarget.style.backgroundColor = '#2563eb';
e.currentTarget.style.transform = 'translateY(0)';
e.currentTarget.style.boxShadow = '0 2px 8px rgba(37, 99, 235, 0.2)';
}}
>
Save to Contacts
</button>
<p style={{
textAlign: 'center',
fontSize: '13px',
color: '#999',
marginTop: '16px',
lineHeight: '1.5'
}}>
Add this contact to your address book
</p>
</div>
</div>
);
}

7
src/app/sitemap.ts
View File

@@ -26,6 +26,7 @@ export default function sitemap(): MetadataRoute.Sitemap {
'zoom-qr-code',
'teams-qr-code',
'barcode-generator',
'website-qr-code-generator',
];
// All blog posts
@@ -50,6 +51,12 @@ export default function sitemap(): MetadataRoute.Sitemap {
changeFrequency: 'weekly',
priority: 1.0,
},
{
url: `${baseUrl}/newsletter`,
lastModified: new Date(),
changeFrequency: 'monthly',
priority: 0.7,
},
{
url: `${baseUrl}/qr-code-erstellen`,
lastModified: new Date(),

14
src/lib/schema.ts
View File

@@ -68,8 +68,6 @@ export function organizationSchema() {
slogan: 'Dynamic QR codes that work smarter',
foundingDate: '2025',
areaServed: 'Worldwide',
serviceType: 'Software as a Service',
priceRange: '$0 - $29',
knowsAbout: [
'QR Code Generation',
'Marketing Analytics',
@@ -89,6 +87,11 @@ export function organizationSchema() {
applicationCategory: 'BusinessApplication',
operatingSystem: 'Web Browser',
image: 'https://www.qrmaster.net/static/og-image.png',
offers: {
'@type': 'Offer',
price: '0',
priceCurrency: 'EUR',
},
},
},
{
@@ -99,12 +102,15 @@ export function organizationSchema() {
applicationCategory: 'BusinessApplication',
operatingSystem: 'Web Browser',
image: 'https://www.qrmaster.net/static/og-image.png',
offers: {
'@type': 'Offer',
price: '9',
priceCurrency: 'EUR',
},
},
},
],
},
inLanguage: 'en',
mainEntityOfPage: 'https://www.qrmaster.net',
};
}