276 lines
11 KiB
TypeScript
276 lines
11 KiB
TypeScript
|
import { motion } from "framer-motion";
|
||
|
|
|
||
|
|
export const UIUXVector = () => {
|
||
|
|
return (
|
||
|
|
<div className="relative w-full h-96 flex items-center justify-center">
|
||
|
|
{/* Design Canvas */}
|
||
|
|
<motion.div
|
||
|
|
initial={{ opacity: 0, scale: 0.8 }}
|
||
|
|
animate={{ opacity: 1, scale: 1 }}
|
||
|
|
transition={{ duration: 0.8 }}
|
||
|
|
className="relative z-10"
|
||
|
|
>
|
||
|
|
<div className="w-64 h-48 bg-gradient-to-br from-gray-800 to-gray-900 rounded-lg shadow-2xl p-4">
|
||
|
|
{/* Figma Interface */}
|
||
|
|
<div className="h-full bg-white rounded overflow-hidden relative">
|
||
|
|
{/* Header */}
|
||
|
|
<div className="h-6 bg-gray-100 flex items-center px-2 space-x-1">
|
||
|
|
<div className="w-2 h-2 bg-red-500 rounded-full"></div>
|
||
|
|
<div className="w-2 h-2 bg-yellow-500 rounded-full"></div>
|
||
|
|
<div className="w-2 h-2 bg-green-500 rounded-full"></div>
|
||
|
|
<div className="flex-1 text-center">
|
||
|
|
<span className="text-gray-600 text-xs font-manrope">Design System</span>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
{/* Design Elements */}
|
||
|
|
<div className="p-3 space-y-2">
|
||
|
|
{/* Wireframe Elements */}
|
||
|
|
<div className="flex space-x-2">
|
||
|
|
<motion.div
|
||
|
|
initial={{ width: 0 }}
|
||
|
|
animate={{ width: "60%" }}
|
||
|
|
transition={{ duration: 0.8, delay: 0.5 }}
|
||
|
|
className="h-3 bg-gradient-to-r from-blue-400 to-blue-500 rounded"
|
||
|
|
/>
|
||
|
|
<motion.div
|
||
|
|
initial={{ width: 0 }}
|
||
|
|
animate={{ width: "30%" }}
|
||
|
|
transition={{ duration: 0.8, delay: 0.7 }}
|
||
|
|
className="h-3 bg-accent rounded"
|
||
|
|
/>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div className="flex space-x-1">
|
||
|
|
{Array.from({ length: 4 }).map((_, i) => (
|
||
|
|
<motion.div
|
||
|
|
key={i}
|
||
|
|
initial={{ height: 0 }}
|
||
|
|
animate={{ height: "12px" }}
|
||
|
|
transition={{ duration: 0.5, delay: i * 0.1 + 0.9 }}
|
||
|
|
className="flex-1 bg-gray-300 rounded"
|
||
|
|
/>
|
||
|
|
))}
|
||
|
|
</div>
|
||
|
|
|
||
|
|
{/* Component Grid */}
|
||
|
|
<div className="grid grid-cols-3 gap-1 mt-3">
|
||
|
|
{Array.from({ length: 6 }).map((_, i) => (
|
||
|
|
<motion.div
|
||
|
|
key={i}
|
||
|
|
initial={{ scale: 0, rotate: 180 }}
|
||
|
|
animate={{ scale: 1, rotate: 0 }}
|
||
|
|
transition={{ duration: 0.3, delay: i * 0.1 + 1.2 }}
|
||
|
|
className="aspect-square bg-gradient-to-br from-purple-300 to-purple-400 rounded"
|
||
|
|
/>
|
||
|
|
))}
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</motion.div>
|
||
|
|
|
||
|
|
{/* Design Tools Palette */}
|
||
|
|
<motion.div
|
||
|
|
initial={{ opacity: 0, x: -50 }}
|
||
|
|
animate={{ opacity: 1, x: 0 }}
|
||
|
|
transition={{ duration: 0.8, delay: 0.4 }}
|
||
|
|
className="absolute left-8 top-1/2 transform -translate-y-1/2"
|
||
|
|
>
|
||
|
|
<div className="space-y-3">
|
||
|
|
{/* Figma */}
|
||
|
|
<motion.div
|
||
|
|
whileHover={{ scale: 1.1 }}
|
||
|
|
className="w-12 h-12 bg-gradient-to-br from-purple-500 to-purple-600 rounded-xl flex items-center justify-center shadow-lg cursor-pointer"
|
||
|
|
>
|
||
|
|
<svg className="w-6 h-6 text-white" viewBox="0 0 24 24" fill="currentColor">
|
||
|
|
<path d="M12 12a4 4 0 108 0 4 4 0 00-8 0z"/>
|
||
|
|
<path d="M4 16a4 4 0 018 0v-4H8a4 4 0 00-4 4z"/>
|
||
|
|
<path d="M4 8a4 4 0 014-4h4v8H8a4 4 0 01-4-4z"/>
|
||
|
|
<path d="M12 4h4a4 4 0 010 8h-4V4z"/>
|
||
|
|
</svg>
|
||
|
|
</motion.div>
|
||
|
|
|
||
|
|
{/* Sketch */}
|
||
|
|
<motion.div
|
||
|
|
whileHover={{ scale: 1.1 }}
|
||
|
|
className="w-12 h-12 bg-gradient-to-br from-orange-500 to-orange-600 rounded-xl flex items-center justify-center shadow-lg cursor-pointer"
|
||
|
|
>
|
||
|
|
<span className="text-white font-bold font-manrope">S</span>
|
||
|
|
</motion.div>
|
||
|
|
|
||
|
|
{/* Adobe XD */}
|
||
|
|
<motion.div
|
||
|
|
whileHover={{ scale: 1.1 }}
|
||
|
|
className="w-12 h-12 bg-gradient-to-br from-pink-500 to-pink-600 rounded-xl flex items-center justify-center shadow-lg cursor-pointer"
|
||
|
|
>
|
||
|
|
<span className="text-white font-bold font-manrope">Xd</span>
|
||
|
|
</motion.div>
|
||
|
|
</div>
|
||
|
|
</motion.div>
|
||
|
|
|
||
|
|
{/* User Journey Flow */}
|
||
|
|
<motion.div
|
||
|
|
initial={{ opacity: 0, y: 50 }}
|
||
|
|
animate={{ opacity: 1, y: 0 }}
|
||
|
|
transition={{ duration: 0.8, delay: 0.6 }}
|
||
|
|
className="absolute bottom-12 left-1/2 transform -translate-x-1/2"
|
||
|
|
>
|
||
|
|
<div className="flex items-center space-x-4">
|
||
|
|
{/* User Persona */}
|
||
|
|
<motion.div
|
||
|
|
whileHover={{ scale: 1.1 }}
|
||
|
|
className="w-10 h-10 bg-gradient-to-br from-blue-500 to-blue-600 rounded-full flex items-center justify-center shadow-lg"
|
||
|
|
>
|
||
|
|
<svg className="w-5 h-5 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||
|
|
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M16 7a4 4 0 11-8 0 4 4 0 018 0zM12 14a7 7 0 00-7 7h14a7 7 0 00-7-7z" />
|
||
|
|
</svg>
|
||
|
|
</motion.div>
|
||
|
|
|
||
|
|
{/* Flow Arrow */}
|
||
|
|
<motion.div
|
||
|
|
initial={{ width: 0 }}
|
||
|
|
animate={{ width: "24px" }}
|
||
|
|
transition={{ duration: 0.5, delay: 1.5 }}
|
||
|
|
className="h-0.5 bg-gradient-to-r from-blue-500 to-purple-500"
|
||
|
|
/>
|
||
|
|
|
||
|
|
{/* Wireframe */}
|
||
|
|
<motion.div
|
||
|
|
whileHover={{ scale: 1.1 }}
|
||
|
|
className="w-10 h-10 bg-gradient-to-br from-gray-500 to-gray-600 rounded border-2 border-gray-400 flex items-center justify-center shadow-lg"
|
||
|
|
>
|
||
|
|
<div className="w-4 h-4 border border-gray-300 rounded-sm"></div>
|
||
|
|
</motion.div>
|
||
|
|
|
||
|
|
{/* Flow Arrow */}
|
||
|
|
<motion.div
|
||
|
|
initial={{ width: 0 }}
|
||
|
|
animate={{ width: "24px" }}
|
||
|
|
transition={{ duration: 0.5, delay: 1.7 }}
|
||
|
|
className="h-0.5 bg-gradient-to-r from-gray-500 to-accent"
|
||
|
|
/>
|
||
|
|
|
||
|
|
{/* Prototype */}
|
||
|
|
<motion.div
|
||
|
|
whileHover={{ scale: 1.1 }}
|
||
|
|
className="w-10 h-10 bg-gradient-to-br from-accent to-pink-600 rounded flex items-center justify-center shadow-lg"
|
||
|
|
>
|
||
|
|
<svg className="w-5 h-5 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||
|
|
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M12 18h.01M8 21h8a1 1 0 001-1V4a1 1 0 00-1-1H8a1 1 0 00-1 1v16a1 1 0 001 1z" />
|
||
|
|
</svg>
|
||
|
|
</motion.div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div className="flex justify-between mt-2 text-xs text-gray-400 font-manrope">
|
||
|
|
<span>Research</span>
|
||
|
|
<span>Design</span>
|
||
|
|
<span>Prototype</span>
|
||
|
|
</div>
|
||
|
|
</motion.div>
|
||
|
|
|
||
|
|
{/* Color Palette */}
|
||
|
|
<motion.div
|
||
|
|
initial={{ opacity: 0, x: 50 }}
|
||
|
|
animate={{ opacity: 1, x: 0 }}
|
||
|
|
transition={{ duration: 0.8, delay: 0.8 }}
|
||
|
|
className="absolute right-8 top-16"
|
||
|
|
>
|
||
|
|
<div className="space-y-2">
|
||
|
|
<div className="text-white text-sm font-manrope mb-2">Colors</div>
|
||
|
|
<div className="flex space-x-1">
|
||
|
|
<motion.div
|
||
|
|
whileHover={{ scale: 1.2 }}
|
||
|
|
className="w-6 h-6 bg-blue-500 rounded cursor-pointer shadow-lg"
|
||
|
|
/>
|
||
|
|
<motion.div
|
||
|
|
whileHover={{ scale: 1.2 }}
|
||
|
|
className="w-6 h-6 bg-accent rounded cursor-pointer shadow-lg"
|
||
|
|
/>
|
||
|
|
<motion.div
|
||
|
|
whileHover={{ scale: 1.2 }}
|
||
|
|
className="w-6 h-6 bg-purple-500 rounded cursor-pointer shadow-lg"
|
||
|
|
/>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
{/* Typography */}
|
||
|
|
<div className="mt-4">
|
||
|
|
<div className="text-white text-sm font-manrope mb-2">Typography</div>
|
||
|
|
<div className="space-y-1">
|
||
|
|
<div className="text-white text-lg font-manrope">Aa</div>
|
||
|
|
<div className="text-gray-400 text-sm font-manrope">Manrope</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</motion.div>
|
||
|
|
|
||
|
|
{/* User Testing Elements */}
|
||
|
|
<motion.div
|
||
|
|
initial={{ opacity: 0 }}
|
||
|
|
animate={{ opacity: 1 }}
|
||
|
|
transition={{ duration: 1, delay: 1.2 }}
|
||
|
|
className="absolute top-8 left-16"
|
||
|
|
>
|
||
|
|
<div className="flex items-center space-x-2">
|
||
|
|
<div className="w-8 h-8 bg-green-500 rounded-full flex items-center justify-center">
|
||
|
|
<svg className="w-4 h-4 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||
|
|
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M5 13l4 4L19 7" />
|
||
|
|
</svg>
|
||
|
|
</div>
|
||
|
|
<div className="text-green-400 text-sm font-manrope">Usability: 95%</div>
|
||
|
|
</div>
|
||
|
|
</motion.div>
|
||
|
|
|
||
|
|
{/* Accessibility Icon */}
|
||
|
|
<motion.div
|
||
|
|
initial={{ opacity: 0, rotate: -180 }}
|
||
|
|
animate={{ opacity: 1, rotate: 0 }}
|
||
|
|
transition={{ duration: 0.8, delay: 1.4 }}
|
||
|
|
className="absolute top-12 right-32"
|
||
|
|
>
|
||
|
|
<div className="w-10 h-10 bg-gradient-to-br from-teal-500 to-teal-600 rounded-full flex items-center justify-center shadow-lg">
|
||
|
|
<svg className="w-5 h-5 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||
|
|
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
|
||
|
|
</svg>
|
||
|
|
</div>
|
||
|
|
</motion.div>
|
||
|
|
|
||
|
|
{/* Design System Components */}
|
||
|
|
<motion.div
|
||
|
|
initial={{ opacity: 0, y: -20 }}
|
||
|
|
animate={{ opacity: 1, y: 0 }}
|
||
|
|
transition={{ duration: 1, delay: 1.6 }}
|
||
|
|
className="absolute bottom-8 right-8 flex space-x-2"
|
||
|
|
>
|
||
|
|
<div className="px-2 py-1 bg-blue-500/20 text-blue-300 border border-blue-500/30 rounded text-xs font-manrope">
|
||
|
|
Components
|
||
|
|
</div>
|
||
|
|
<div className="px-2 py-1 bg-purple-500/20 text-purple-300 border border-purple-500/30 rounded text-xs font-manrope">
|
||
|
|
Design System
|
||
|
|
</div>
|
||
|
|
</motion.div>
|
||
|
|
|
||
|
|
{/* Interactive Design Flow */}
|
||
|
|
<svg className="absolute inset-0 w-full h-full pointer-events-none opacity-20">
|
||
|
|
<defs>
|
||
|
|
<linearGradient id="designFlow" x1="0%" y1="0%" x2="100%" y2="100%">
|
||
|
|
<stop offset="0%" stopColor="#8B5CF6" stopOpacity="0.6" />
|
||
|
|
<stop offset="50%" stopColor="#E5195E" stopOpacity="0.8" />
|
||
|
|
<stop offset="100%" stopColor="#3B82F6" stopOpacity="0.6" />
|
||
|
|
</linearGradient>
|
||
|
|
</defs>
|
||
|
|
|
||
|
|
<motion.path
|
||
|
|
d="M 10% 80% Q 50% 20% 90% 80%"
|
||
|
|
stroke="url(#designFlow)"
|
||
|
|
strokeWidth="2"
|
||
|
|
fill="none"
|
||
|
|
strokeDasharray="5,5"
|
||
|
|
initial={{ pathLength: 0 }}
|
||
|
|
animate={{ pathLength: 1 }}
|
||
|
|
transition={{ duration: 3, repeat: Infinity, repeatType: "reverse" }}
|
||
|
|
/>
|
||
|
|
</svg>
|
||
|
|
</div>
|
||
|
|
);
|
||
|
|
};
|