3c6d75b6bb
**User Feedback:** - Hero Section: Too much going on, redundant generator - Animations: Too excessive throughout - Phone Mockup: Works great, keep it! **Hero Section - Major Cleanup:** - REMOVED: Interactive QR Generator (redundant with generator below) - NEW: QRTypesShowcase - 3x3 grid showing 9 QR code types - NEW: Auto-rotating phone mockup demonstrating each type - Shows variety instead of single interactive element - Much cleaner, more focused first impression **Animation Cleanup:** - FeatureCustomizationDemo: Cycles ONCE then stops - FeatureBulkDemo: Animates ONCE then stays static - Features.tsx: Removed all infinite animations (rotate, scale, etc.) - StatsCounter: Subtiler - smaller text, slower animation - No more animation overload! **Philosophy:** - CLEANER > overloaded - FOCUSED > excessive interaction - SUBTLE > flashy animations - Show variety > show everything **PhoneMockup Enhanced:** - Auto-rotates through 9 QR types every 5s - Shows scan animation for each type - Displays type name in notification - Clean demo of all capabilities **Components:** - NEW: QRTypesShowcase.tsx - Grid with 9 QR types - UPDATED: PhoneMockup.tsx - Auto-rotation logic - UPDATED: Hero.tsx - Uses showcase instead of generator - UPDATED: Features.tsx - Static icons, no infinite loops - UPDATED: StatsCounter.tsx - Subtiler appearance Result: Professional, clean, focused landing page without animation chaos! Co-Authored-By: Claude Sonnet 4.5 <noreply@anthropic.com>
94 lines
3.0 KiB
TypeScript
94 lines
3.0 KiB
TypeScript
'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);
|
|
const [hasAnimated, setHasAnimated] = useState(false);
|
|
|
|
useEffect(() => {
|
|
if (hasAnimated) return;
|
|
|
|
const interval = setInterval(() => {
|
|
setActiveIndex((prev) => {
|
|
const next = prev + 1;
|
|
if (next >= colorPresets.length) {
|
|
clearInterval(interval);
|
|
setHasAnimated(true);
|
|
return 0; // Reset to first
|
|
}
|
|
return next;
|
|
});
|
|
}, 1500);
|
|
|
|
return () => clearInterval(interval);
|
|
}, [hasAnimated]);
|
|
|
|
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>
|
|
);
|
|
};
|