feat: Complete landing page modernization with premium design

Major overhaul of the landing page with modern, premium design while maintaining 100% SEO compatibility.

**Design System:**
- New animation library with premium easing curves
- Advanced shadow system with colored shadows
- Glassmorphism utilities
- Premium gradient palette
- Grid-based animated backgrounds

**Hero Section:**
- Interactive QR generator with real-time updates
- Color preset system with smooth morphing
- Animated background with modern grid pattern
- Stats counter with animated numbers
- Enhanced CTAs with hover effects

**Instant Generator:**
- Tab-based UI (Basic, Presets, Advanced)
- Visual preset gallery with 12 professional styles
- Phone mockup with scan animation
- Progressive disclosure UX
- Enhanced download experience

**Features Section:**
- Modern Bento Grid layout
- Animated analytics chart demo
- QR customization morphing demo
- Bulk creation animation
- Interactive feature cards

**Pricing:**
- Enhanced visual design
- Better shadows and gradients
- Improved hover states

**Technical:**
- All new components use Framer Motion
- Optimized animations with GPU acceleration
- Responsive design maintained
- SEO unchanged (server components intact)

Co-Authored-By: Claude Sonnet 4.5 <noreply@anthropic.com>

src/components/marketing/FeatureBulkDemo.tsx

@@ -0,0 +1,107 @@
+'use client';
+
+import React, { useState, useEffect } from 'react';
+import { motion } from 'framer-motion';
+import { QRCodeSVG } from 'qrcode.react';
+import { FileSpreadsheet, ArrowRight } from 'lucide-react';
+
+export const FeatureBulkDemo: React.FC = () => {
+  const [showQRs, setShowQRs] = useState(false);
+
+  useEffect(() => {
+    const interval = setInterval(() => {
+      setShowQRs((prev) => !prev);
+    }, 4000);
+
+    return () => clearInterval(interval);
+  }, []);
+
+  const qrCodes = [
+    { id: 1, url: 'product-1', delay: 0 },
+    { id: 2, url: 'product-2', delay: 0.1 },
+    { id: 3, url: 'product-3', delay: 0.2 },
+    { id: 4, url: 'product-4', delay: 0.3 },
+    { id: 5, url: 'product-5', delay: 0.4 },
+    { id: 6, url: 'product-6', delay: 0.5 },
+  ];
+
+  return (
+    <div className="relative h-full min-h-[300px] bg-gradient-to-br from-emerald-50 to-teal-100 rounded-2xl p-8 overflow-hidden">
+      <div className="relative z-10 h-full flex flex-col">
+        {/* Header */}
+        <div className="mb-6">
+          <div className="flex items-center gap-2 mb-2">
+            <FileSpreadsheet className="w-6 h-6 text-emerald-600" />
+            <h3 className="text-2xl font-bold text-gray-900">Bulk Creation</h3>
+          </div>
+          <p className="text-gray-600">Generate hundreds at once</p>
+        </div>
+
+        {/* Animation */}
+        <div className="flex-1 flex items-center justify-center gap-8">
+          {/* CSV Icon */}
+          <motion.div
+            animate={{
+              scale: showQRs ? 0.8 : 1,
+              opacity: showQRs ? 0.5 : 1,
+            }}
+            transition={{ duration: 0.5 }}
+            className="flex flex-col items-center"
+          >
+            <div className="w-20 h-24 bg-white rounded-lg shadow-md flex items-center justify-center border-2 border-emerald-200">
+              <FileSpreadsheet className="w-10 h-10 text-emerald-600" />
+            </div>
+            <p className="text-xs text-gray-600 mt-2 font-medium">products.csv</p>
+          </motion.div>
+
+          {/* Arrow */}
+          <motion.div
+            animate={{
+              x: showQRs ? [0, 10, 0] : 0,
+              opacity: showQRs ? 1 : 0.3,
+            }}
+            transition={{ duration: 0.5, repeat: showQRs ? Infinity : 0, repeatDelay: 1 }}
+          >
+            <ArrowRight className="w-8 h-8 text-emerald-600" />
+          </motion.div>
+
+          {/* QR Codes Grid */}
+          <div className="grid grid-cols-3 gap-2">
+            {qrCodes.map((qr) => (
+              <motion.div
+                key={qr.id}
+                initial={{ scale: 0, opacity: 0 }}
+                animate={{
+                  scale: showQRs ? 1 : 0,
+                  opacity: showQRs ? 1 : 0,
+                }}
+                transition={{
+                  duration: 0.4,
+                  delay: showQRs ? qr.delay : 0,
+                  ease: [0.34, 1.56, 0.64, 1]
+                }}
+                className="p-1.5 bg-white rounded shadow-sm"
+              >
+                <QRCodeSVG
+                  value={`https://qrmaster.net/${qr.url}`}
+                  size={32}
+                  level="L"
+                />
+              </motion.div>
+            ))}
+          </div>
+        </div>
+
+        {/* Counter */}
+        <motion.div
+          animate={{ opacity: showQRs ? 1 : 0 }}
+          className="text-center"
+        >
+          <p className="text-sm font-semibold text-emerald-700">
+            ✓ 6 QR codes generated
+          </p>
+        </motion.div>
+      </div>
+    </div>
+  );
+};