MVP ready to test

src/app/(marketing)/bulk-qr-code-generator/page.tsx

@@ -0,0 +1,387 @@
+import React from 'react';
+import type { Metadata } from 'next';
+import Link from 'next/link';
+import { Button } from '@/components/ui/Button';
+import { Card } from '@/components/ui/Card';
+
+export const metadata: Metadata = {
+  title: 'Bulk QR Code Generator - Create 1000s of QR Codes from Excel | QR Master',
+  description: 'Generate hundreds of QR codes at once from CSV or Excel files. Perfect for products, events, inventory management. Free bulk QR code generator with custom branding.',
+  keywords: 'bulk qr code generator, batch qr code, qr code from excel, csv qr code generator, mass qr code generation, bulk qr codes free',
+  openGraph: {
+    title: 'Bulk QR Code Generator - Create 1000s of QR Codes from Excel',
+    description: 'Generate hundreds of QR codes at once from CSV or Excel files. Perfect for products, events, and inventory.',
+    type: 'website',
+  },
+};
+
+export default function BulkQRCodeGeneratorPage() {
+  const bulkFeatures = [
+    {
+      icon: '📊',
+      title: 'Excel & CSV Import',
+      description: 'Upload Excel or CSV files to generate hundreds of QR codes in seconds. Simple column mapping.',
+    },
+    {
+      icon: '⚡',
+      title: 'Fast Processing',
+      description: 'Generate up to 1000 QR codes in under a minute. Optimized for speed and reliability.',
+    },
+    {
+      icon: '🎨',
+      title: 'Unified Branding',
+      description: 'Apply your logo, colors, and design to all QR codes at once. Consistent brand identity.',
+    },
+    {
+      icon: '📦',
+      title: 'Batch Download',
+      description: 'Download all QR codes as a ZIP file with custom filenames. Organized and ready to use.',
+    },
+    {
+      icon: '📈',
+      title: 'Individual Tracking',
+      description: 'Track each QR code separately. See which products or locations perform best.',
+    },
+    {
+      icon: '🔄',
+      title: 'Update in Bulk',
+      description: 'Edit multiple QR codes at once. Save time when updating campaigns or product info.',
+    },
+  ];
+
+  const useCases = [
+    {
+      title: 'Product Labels',
+      icon: '🏷️',
+      description: 'Generate unique QR codes for each product SKU. Link to manuals, warranty info, or product pages.',
+      stats: ['1000+ products', 'Individual tracking', 'Custom naming'],
+    },
+    {
+      title: 'Event Tickets',
+      icon: '🎟️',
+      description: 'Create unique QR codes for every attendee. Enable fast check-ins and track attendance.',
+      stats: ['Unique per ticket', 'Real-time validation', 'Analytics dashboard'],
+    },
+    {
+      title: 'Asset Management',
+      icon: '💼',
+      description: 'Tag equipment, furniture, and assets with unique QR codes. Track location and maintenance.',
+      stats: ['Equipment tracking', 'Maintenance logs', 'Location history'],
+    },
+    {
+      title: 'Marketing Campaigns',
+      icon: '📢',
+      description: 'Generate codes for different locations or channels. Track which campaigns perform best.',
+      stats: ['Location-specific', 'Campaign tracking', 'ROI measurement'],
+    },
+  ];
+
+  const howItWorks = [
+    {
+      step: 1,
+      title: 'Prepare Your File',
+      description: 'Create an Excel or CSV file with your URLs, names, and any custom data.',
+      example: 'Product Name | URL | SKU',
+    },
+    {
+      step: 2,
+      title: 'Upload & Map',
+      description: 'Upload your file and map columns to QR code fields. Preview before generating.',
+      example: 'Map columns: Name → Title, URL → Destination',
+    },
+    {
+      step: 3,
+      title: 'Customize Design',
+      description: 'Apply logo, colors, and branding to all QR codes at once. Consistent look.',
+      example: 'Add logo, set colors, choose frame',
+    },
+    {
+      step: 4,
+      title: 'Generate & Download',
+      description: 'Click generate and download all QR codes as PNG files in a ZIP archive.',
+      example: 'product-001.png, product-002.png, ...',
+    },
+  ];
+
+  const fileFormat = [
+    { column: 'name', description: 'QR code title/label', required: true },
+    { column: 'url', description: 'Destination URL', required: true },
+    { column: 'description', description: 'Optional description', required: false },
+    { column: 'tags', description: 'Comma-separated tags', required: false },
+  ];
+
+  return (
+    <div className="min-h-screen bg-white">
+      {/* Hero Section */}
+      <section className="relative overflow-hidden bg-gradient-to-br from-green-50 via-white to-blue-50 py-20">
+        <div className="container mx-auto px-4 sm:px-6 lg:px-8 max-w-7xl">
+          <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-green-100 text-green-800 px-4 py-2 rounded-full text-sm font-semibold">
+                <span>⚡</span>
+                <span>Generate 1000s in Minutes</span>
+              </div>
+
+              <h1 className="text-5xl lg:text-6xl font-bold text-gray-900 leading-tight">
+                Bulk QR Code Generator
+              </h1>
+
+              <p className="text-xl text-gray-600 leading-relaxed">
+                Create hundreds or thousands of QR codes from Excel or CSV files. Perfect for products, events, inventory, and marketing campaigns. Fast, efficient, and with your branding.
+              </p>
+
+              <div className="space-y-3">
+                {[
+                  'Upload Excel or CSV files',
+                  'Generate up to 1000 QR codes',
+                  'Custom branding on all codes',
+                  'Download as organized ZIP',
+                ].map((feature, index) => (
+                  <div key={index} className="flex items-center space-x-3">
+                    <div className="flex-shrink-0 w-5 h-5 bg-green-500 rounded-full flex items-center justify-center">
+                      <svg className="w-3 h-3 text-white" fill="currentColor" viewBox="0 0 20 20">
+                        <path fillRule="evenodd" d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z" clipRule="evenodd" />
+                      </svg>
+                    </div>
+                    <span className="text-gray-700">{feature}</span>
+                  </div>
+                ))}
+              </div>
+
+              <div className="flex flex-col sm:flex-row gap-4">
+                <Link href="/signup">
+                  <Button size="lg" className="text-lg px-8 py-4 w-full sm:w-auto">
+                    Start Bulk Generation
+                  </Button>
+                </Link>
+                <Link href="/create">
+                  <Button variant="outline" size="lg" className="text-lg px-8 py-4 w-full sm:w-auto">
+                    Try Single QR First
+                  </Button>
+                </Link>
+              </div>
+            </div>
+
+            {/* Visual Example */}
+            <div className="relative">
+              <Card className="p-6 shadow-2xl">
+                <h3 className="font-semibold text-lg mb-4">Upload Your File</h3>
+                <div className="bg-gray-50 border-2 border-dashed border-gray-300 rounded-lg p-8 text-center mb-4">
+                  <div className="text-4xl mb-2">📊</div>
+                  <p className="text-gray-600 font-medium mb-1">products.xlsx</p>
+                  <p className="text-sm text-gray-500">1,247 rows ready</p>
+                </div>
+                <div className="flex items-center justify-center mb-4">
+                  <svg className="w-6 h-6 text-green-500" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                    <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M19 14l-7 7m0 0l-7-7m7 7V3" />
+                  </svg>
+                </div>
+                <div className="grid grid-cols-4 gap-2">
+                  {[1, 2, 3, 4, 5, 6, 7, 8].map((i) => (
+                    <div key={i} className="aspect-square bg-gray-200 rounded flex items-center justify-center text-xs text-gray-500">
+                      QR {i}
+                    </div>
+                  ))}
+                </div>
+                <p className="text-center text-sm text-gray-600 mt-4">
+                  + 1,239 more codes
+                </p>
+              </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">
+                1000s at Once!
+              </div>
+            </div>
+          </div>
+        </div>
+      </section>
+
+      {/* 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 Bulk Generation Features
+            </h2>
+            <p className="text-xl text-gray-600 max-w-3xl mx-auto">
+              Everything you need to create and manage QR codes at scale
+            </p>
+          </div>
+
+          <div className="grid md:grid-cols-2 lg:grid-cols-3 gap-8">
+            {bulkFeatures.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>
+
+      {/* How It Works */}
+      <section className="py-20">
+        <div className="container mx-auto px-4 sm:px-6 lg:px-8 max-w-6xl">
+          <div className="text-center mb-16">
+            <h2 className="text-4xl font-bold text-gray-900 mb-4">
+              How Bulk QR Generation Works
+            </h2>
+            <p className="text-xl text-gray-600">
+              Simple 4-step process to create hundreds of QR codes
+            </p>
+          </div>
+
+          <div className="space-y-8">
+            {howItWorks.map((item, index) => (
+              <Card key={index} className="p-8">
+                <div className="flex items-start space-x-6">
+                  <div className="flex-shrink-0 w-16 h-16 bg-primary-100 rounded-full flex items-center justify-center">
+                    <span className="text-2xl font-bold text-primary-600">{item.step}</span>
+                  </div>
+                  <div className="flex-1">
+                    <h3 className="text-2xl font-bold text-gray-900 mb-2">
+                      {item.title}
+                    </h3>
+                    <p className="text-gray-600 mb-3">
+                      {item.description}
+                    </p>
+                    <div className="bg-blue-50 border-l-4 border-blue-500 p-3">
+                      <p className="text-sm text-gray-700 font-mono">
+                        {item.example}
+                      </p>
+                    </div>
+                  </div>
+                </div>
+              </Card>
+            ))}
+          </div>
+        </div>
+      </section>
+
+      {/* File Format Guide */}
+      <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">
+              CSV/Excel File Format
+            </h2>
+            <p className="text-xl text-gray-600">
+              Simple file structure for bulk QR code generation
+            </p>
+          </div>
+
+          <Card className="overflow-hidden shadow-xl mb-8">
+            <table className="w-full">
+              <thead className="bg-gray-100">
+                <tr>
+                  <th className="px-6 py-4 text-left text-gray-900 font-semibold">Column</th>
+                  <th className="px-6 py-4 text-left text-gray-900 font-semibold">Description</th>
+                  <th className="px-6 py-4 text-center text-gray-900 font-semibold">Required</th>
+                </tr>
+              </thead>
+              <tbody className="divide-y divide-gray-200">
+                {fileFormat.map((field, index) => (
+                  <tr key={index}>
+                    <td className="px-6 py-4">
+                      <code className="bg-gray-100 px-2 py-1 rounded text-sm font-mono text-gray-900">
+                        {field.column}
+                      </code>
+                    </td>
+                    <td className="px-6 py-4 text-gray-600">{field.description}</td>
+                    <td className="px-6 py-4 text-center">
+                      {field.required ? (
+                        <span className="text-red-500 font-semibold">Yes</span>
+                      ) : (
+                        <span className="text-gray-400">No</span>
+                      )}
+                    </td>
+                  </tr>
+                ))}
+              </tbody>
+            </table>
+          </Card>
+
+          <Card className="p-6 bg-blue-50 border border-blue-200">
+            <h4 className="font-semibold text-gray-900 mb-2">Example CSV:</h4>
+            <pre className="bg-white p-4 rounded border border-blue-200 overflow-x-auto text-sm font-mono">
+{`name,url,description,tags
+Product A,https://example.com/product-a,Premium Widget,electronics,featured
+Product B,https://example.com/product-b,Standard Widget,electronics
+Product C,https://example.com/product-c,Budget Widget,electronics,sale`}
+            </pre>
+          </Card>
+        </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">
+              Bulk QR Code Use Cases
+            </h2>
+            <p className="text-xl text-gray-600 max-w-3xl mx-auto">
+              Industries and scenarios where bulk generation shines
+            </p>
+          </div>
+
+          <div className="grid md:grid-cols-2 gap-8">
+            {useCases.map((useCase, index) => (
+              <Card key={index} className="p-8">
+                <div className="flex items-start space-x-4">
+                  <div className="text-4xl">{useCase.icon}</div>
+                  <div className="flex-1">
+                    <h3 className="text-2xl font-bold text-gray-900 mb-3">
+                      {useCase.title}
+                    </h3>
+                    <p className="text-gray-600 mb-4">
+                      {useCase.description}
+                    </p>
+                    <ul className="space-y-2">
+                      {useCase.stats.map((stat, 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">{stat}</span>
+                        </li>
+                      ))}
+                    </ul>
+                  </div>
+                </div>
+              </Card>
+            ))}
+          </div>
+        </div>
+      </section>
+
+      {/* CTA Section */}
+      <section className="py-20 bg-gradient-to-r from-green-600 to-blue-600 text-white">
+        <div className="container mx-auto px-4 sm:px-6 lg:px-8 max-w-4xl text-center">
+          <h2 className="text-4xl font-bold mb-6">
+            Generate 1000s of QR Codes in Minutes
+          </h2>
+          <p className="text-xl mb-8 text-green-100">
+            Save hours of manual work. Upload your file and get all QR codes ready instantly.
+          </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-green-600 hover:bg-gray-100">
+                Start Bulk Generation
+              </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>
+  );
+}