feat: Add 19 free QR code tools with SEO optimization

- Added PayPal, Zoom, Teams QR generators
- Added lazy loading for html-to-image (performance)
- Created 19 OG images for social sharing
- Added robots.txt and updated sitemap
- Fixed mobile navigation with accordion menu
- Added 7 color options per generator
- Fixed crypto QR with universal/wallet mode toggle
- Hero QR codes all point to qrmaster.net

src/components/seo/BreadcrumbSchema.tsx

@@ -0,0 +1,81 @@
+import React from 'react';
+import Link from 'next/link';
+import { ChevronRight, Home } from 'lucide-react';
+
+interface BreadcrumbItem {
+    name: string;
+    url: string;
+}
+
+interface BreadcrumbSchemaProps {
+    items: BreadcrumbItem[];
+    showUI?: boolean;
+}
+
+/**
+ * Generates JSON-LD BreadcrumbList schema for SEO
+ * Optionally renders visible breadcrumb navigation
+ */
+export function BreadcrumbSchema({ items, showUI = false }: BreadcrumbSchemaProps) {
+    const breadcrumbSchema = {
+        '@context': 'https://schema.org',
+        '@type': 'BreadcrumbList',
+        itemListElement: items.map((item, index) => ({
+            '@type': 'ListItem',
+            position: index + 1,
+            name: item.name,
+            item: item.url,
+        })),
+    };
+
+    return (
+        <>
+            <script
+                type="application/ld+json"
+                dangerouslySetInnerHTML={{ __html: JSON.stringify(breadcrumbSchema) }}
+            />
+            {showUI && (
+                <nav aria-label="Breadcrumb" className="bg-white/95 backdrop-blur-sm border-b border-slate-200">
+                    <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
+                        <ol className="flex items-center gap-1 py-3 text-sm">
+                            {items.map((item, index) => (
+                                <li key={item.url} className="flex items-center">
+                                    {index > 0 && (
+                                        <ChevronRight className="w-4 h-4 text-slate-400 mx-1" />
+                                    )}
+                                    {index === items.length - 1 ? (
+                                        <span className="text-slate-600 font-medium truncate max-w-[200px]">
+                                            {item.name}
+                                        </span>
+                                    ) : (
+                                        <Link
+                                            href={item.url.replace('https://qrmaster.io', '')}
+                                            className="text-slate-500 hover:text-indigo-600 transition-colors flex items-center gap-1"
+                                        >
+                                            {index === 0 && <Home className="w-4 h-4" />}
+                                            <span className="hidden sm:inline">{item.name}</span>
+                                        </Link>
+                                    )}
+                                </li>
+                            ))}
+                        </ol>
+                    </div>
+                </nav>
+            )}
+        </>
+    );
+}
+
+/**
+ * Pre-configured breadcrumb for tool pages
+ * Renders: Home > Free QR Code Tools > [Tool Name]
+ */
+export function ToolBreadcrumb({ toolName, toolSlug }: { toolName: string; toolSlug: string }) {
+    const items: BreadcrumbItem[] = [
+        { name: 'Home', url: 'https://qrmaster.io/' },
+        { name: 'Free QR Code Tools', url: 'https://qrmaster.io/#tools' },
+        { name: toolName, url: `https://qrmaster.io/tools/${toolSlug}` },
+    ];
+
+    return <BreadcrumbSchema items={items} showUI={true} />;
+}