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/FeatureCustomizationDemo.tsx

@@ -0,0 +1,82 @@
+'use client';
+
+import React, { useState, useEffect } from 'react';
+import { motion, AnimatePresence } from 'framer-motion';
+import { QRCodeSVG } from 'qrcode.react';
+import { Palette } from 'lucide-react';
+
+const colorPresets = [
+  { fg: '#000000', bg: '#FFFFFF' },
+  { fg: '#0ea5e9', bg: '#e0f2fe' },
+  { fg: '#8b5cf6', bg: '#f3e8ff' },
+  { fg: '#f59e0b', bg: '#fef3c7' },
+];
+
+export const FeatureCustomizationDemo: React.FC = () => {
+  const [activeIndex, setActiveIndex] = useState(0);
+
+  useEffect(() => {
+    const interval = setInterval(() => {
+      setActiveIndex((prev) => (prev + 1) % colorPresets.length);
+    }, 2500);
+
+    return () => clearInterval(interval);
+  }, []);
+
+  const currentPreset = colorPresets[activeIndex];
+
+  return (
+    <div className="relative h-full min-h-[300px] bg-gradient-to-br from-purple-50 to-pink-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">
+            <Palette className="w-6 h-6 text-purple-600" />
+            <h3 className="text-2xl font-bold text-gray-900">Customization</h3>
+          </div>
+          <p className="text-gray-600">Brand your QR codes</p>
+        </div>
+
+        {/* QR Code with Morphing */}
+        <div className="flex-1 flex items-center justify-center">
+          <AnimatePresence mode="wait">
+            <motion.div
+              key={activeIndex}
+              initial={{ scale: 0.8, rotate: -10, opacity: 0 }}
+              animate={{ scale: 1, rotate: 0, opacity: 1 }}
+              exit={{ scale: 0.8, rotate: 10, opacity: 0 }}
+              transition={{ duration: 0.5, ease: [0.34, 1.56, 0.64, 1] }}
+              className="p-6 bg-white rounded-2xl shadow-lg"
+            >
+              <QRCodeSVG
+                value="https://qrmaster.net"
+                size={140}
+                fgColor={currentPreset.fg}
+                bgColor={currentPreset.bg}
+                level="M"
+              />
+            </motion.div>
+          </AnimatePresence>
+        </div>
+
+        {/* Color Dots Indicator */}
+        <div className="flex justify-center gap-2 mt-6">
+          {colorPresets.map((preset, index) => (
+            <motion.button
+              key={index}
+              onClick={() => setActiveIndex(index)}
+              className={`w-3 h-3 rounded-full transition-all ${
+                index === activeIndex ? 'scale-125' : 'scale-100 opacity-50'
+              }`}
+              style={{
+                background: `linear-gradient(135deg, ${preset.fg}, ${preset.bg})`
+              }}
+              whileHover={{ scale: 1.3 }}
+              whileTap={{ scale: 0.9 }}
+            />
+          ))}
+        </div>
+      </div>
+    </div>
+  );
+};