61 lines
2.5 KiB
TypeScript
61 lines
2.5 KiB
TypeScript
import Link from 'next/link';
|
|
import {
|
|
Link as LinkIcon,
|
|
Type,
|
|
Wifi,
|
|
Contact,
|
|
MessageCircle,
|
|
Mail,
|
|
MessageSquare,
|
|
Phone,
|
|
Calendar,
|
|
MapPin,
|
|
Facebook,
|
|
Instagram,
|
|
Twitter,
|
|
Youtube,
|
|
Music,
|
|
Bitcoin,
|
|
CreditCard,
|
|
Video,
|
|
Users,
|
|
Barcode
|
|
} from 'lucide-react';
|
|
|
|
const tools = [
|
|
{ name: 'URL / Link', href: '/tools/url-qr-code', icon: LinkIcon, color: 'text-blue-500', bgColor: 'bg-blue-50' },
|
|
{ name: 'vCard', href: '/tools/vcard-qr-code', icon: Contact, color: 'text-pink-500', bgColor: 'bg-pink-50' },
|
|
{ name: 'WiFi', href: '/tools/wifi-qr-code', icon: Wifi, color: 'text-indigo-500', bgColor: 'bg-indigo-50' },
|
|
{ name: 'Text', href: '/tools/text-qr-code', icon: Type, color: 'text-slate-500', bgColor: 'bg-slate-50' },
|
|
{ name: 'Email', href: '/tools/email-qr-code', icon: Mail, color: 'text-amber-500', bgColor: 'bg-amber-50' },
|
|
{ name: 'SMS', href: '/tools/sms-qr-code', icon: MessageSquare, color: 'text-cyan-500', bgColor: 'bg-cyan-50' },
|
|
{ name: 'Instagram', href: '/tools/instagram-qr-code', icon: Instagram, color: 'text-pink-600', bgColor: 'bg-pink-50' },
|
|
{ name: 'Barcode', href: '/tools/barcode-generator', icon: Barcode, color: 'text-slate-900', bgColor: 'bg-slate-100' },
|
|
];
|
|
|
|
export function RelatedTools() {
|
|
return (
|
|
<section className="py-12 bg-slate-50 border-t border-slate-200">
|
|
<div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
|
|
<h2 className="text-2xl font-bold text-slate-900 mb-8 text-center">
|
|
More Free QR Code Generators
|
|
</h2>
|
|
<div className="grid grid-cols-2 md:grid-cols-4 gap-4">
|
|
{tools.map((tool) => (
|
|
<Link
|
|
key={tool.name}
|
|
href={tool.href}
|
|
className="flex items-center space-x-3 p-4 bg-white rounded-xl shadow-sm border border-slate-100 transition-all hover:shadow-md hover:border-slate-200 hover:-translate-y-1"
|
|
>
|
|
<div className={`p-2 rounded-lg shrink-0 ${tool.bgColor} ${tool.color}`}>
|
|
<tool.icon className="w-5 h-5" />
|
|
</div>
|
|
<span className="font-semibold text-slate-700 text-sm">{tool.name}</span>
|
|
</Link>
|
|
))}
|
|
</div>
|
|
</div>
|
|
</section>
|
|
);
|
|
}
|