MVP ready to test

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

@@ -0,0 +1,306 @@
+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: 'QR Code Tracking & Analytics - Track Every Scan | QR Master',
+  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',
+  openGraph: {
+    title: 'QR Code Tracking & Analytics - Track Every Scan | QR Master',
+    description: 'Track QR code scans with real-time analytics. Monitor location, device, time, and user behavior.',
+    type: 'website',
+  },
+};
+
+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 },
+  ];
+
+  return (
+    <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">
+          <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="/create">
+                  <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>
+  );
+}