fix all execpt iosapp
This commit is contained in:
priyanshuvish
223
components/UIUXDesignAnimation.tsx
Normal file
223
components/UIUXDesignAnimation.tsx
Normal file
@@ -0,0 +1,223 @@
|
||||
import React from 'react';
|
||||
import {
|
||||
PenTool,
|
||||
Users,
|
||||
Figma,
|
||||
MousePointer,
|
||||
Palette,
|
||||
Layers,
|
||||
Eye,
|
||||
Heart,
|
||||
Lightbulb,
|
||||
Target,
|
||||
Monitor,
|
||||
Smartphone,
|
||||
Tablet,
|
||||
RefreshCcw,
|
||||
CheckCircle2,
|
||||
Star,
|
||||
TrendingUp,
|
||||
Zap
|
||||
} from 'lucide-react';
|
||||
|
||||
// UI/UX Design Animation Component
|
||||
export const UIUXDesignAnimation = () => {
|
||||
return (
|
||||
<div className="w-full h-full relative rounded-xl overflow-hidden border border-gray-800/50 bg-gradient-to-br from-gray-900/50 to-gray-800/30 backdrop-blur-sm">
|
||||
<div className="absolute inset-0 bg-gradient-to-br from-[#E5195E]/5 to-purple-500/5 rounded-xl"></div>
|
||||
|
||||
{/* Main Design Hub Visualization */}
|
||||
<div className="relative z-10 w-full h-full flex items-center justify-center p-8">
|
||||
|
||||
{/* Central Design Hub - Similar to Cloud Hub */}
|
||||
<div className="relative">
|
||||
{/* Main Design Container */}
|
||||
<div className="w-32 h-32 relative">
|
||||
{/* Primary Design Shape */}
|
||||
<div className="absolute inset-0 bg-gradient-to-br from-[#E5195E]/30 to-purple-500/30 rounded-2xl animate-pulse">
|
||||
<div className="absolute inset-4 bg-gradient-to-br from-pink-500/40 to-violet-500/40 rounded-2xl animate-[float_3s_ease-in-out_infinite]">
|
||||
<div className="absolute inset-4 bg-gradient-to-br from-white/20 to-white/10 rounded-xl flex items-center justify-center">
|
||||
<PenTool className="w-8 h-8 text-white animate-pulse" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Orbiting Design Elements */}
|
||||
<div className="absolute inset-0">
|
||||
{/* User Research Node */}
|
||||
<div className="absolute -top-6 -right-6 w-12 h-12 bg-gradient-to-r from-blue-500 to-cyan-400 rounded-xl flex items-center justify-center animate-[orbit_8s_linear_infinite] shadow-lg">
|
||||
<Users className="w-6 h-6 text-white" />
|
||||
</div>
|
||||
|
||||
{/* Prototyping Node */}
|
||||
<div className="absolute -bottom-4 -left-6 w-10 h-10 bg-gradient-to-r from-green-500 to-emerald-400 rounded-lg flex items-center justify-center animate-[orbit_6s_linear_infinite_reverse] shadow-lg">
|
||||
<MousePointer className="w-5 h-5 text-white" />
|
||||
</div>
|
||||
|
||||
{/* Design Systems Node */}
|
||||
<div className="absolute top-1/2 -left-12 w-9 h-9 bg-gradient-to-r from-purple-500 to-violet-400 rounded-full flex items-center justify-center animate-[orbit_10s_linear_infinite] shadow-lg">
|
||||
<Layers className="w-4 h-4 text-white" />
|
||||
</div>
|
||||
|
||||
{/* User Testing Node */}
|
||||
<div className="absolute top-1/4 -right-10 w-11 h-11 bg-gradient-to-r from-orange-500 to-yellow-500 rounded-2xl flex items-center justify-center animate-[orbit_7s_linear_infinite_reverse] shadow-lg">
|
||||
<Eye className="w-5 h-5 text-white" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Design Process Flow Lines */}
|
||||
<div className="absolute inset-0 pointer-events-none">
|
||||
{/* Animated Connection Lines for Design Flow */}
|
||||
<svg className="w-full h-full" xmlns="http://www.w3.org/2000/svg">
|
||||
<defs>
|
||||
<linearGradient id="designFlowGradient" x1="0%" y1="0%" x2="100%" y2="100%">
|
||||
<stop offset="0%" stopColor="#E5195E" stopOpacity="0.6" />
|
||||
<stop offset="50%" stopColor="#EC4899" stopOpacity="0.4" />
|
||||
<stop offset="100%" stopColor="#8B5CF6" stopOpacity="0.6" />
|
||||
</linearGradient>
|
||||
<filter id="designGlow">
|
||||
<feGaussianBlur stdDeviation="3" result="coloredBlur"/>
|
||||
<feMerge>
|
||||
<feMergeNode in="coloredBlur"/>
|
||||
<feMergeNode in="SourceGraphic"/>
|
||||
</feMerge>
|
||||
</filter>
|
||||
</defs>
|
||||
|
||||
{/* Dynamic user journey flow lines */}
|
||||
<path
|
||||
d="M 100 200 Q 200 100 300 200 T 500 200"
|
||||
stroke="url(#designFlowGradient)"
|
||||
strokeWidth="2"
|
||||
fill="none"
|
||||
filter="url(#designGlow)"
|
||||
className="animate-pulse"
|
||||
/>
|
||||
<path
|
||||
d="M 150 300 Q 250 200 350 300 T 550 300"
|
||||
stroke="url(#designFlowGradient)"
|
||||
strokeWidth="1.5"
|
||||
fill="none"
|
||||
filter="url(#designGlow)"
|
||||
className="animate-pulse"
|
||||
style={{ animationDelay: '1s' }}
|
||||
/>
|
||||
|
||||
{/* Additional design process flow lines */}
|
||||
<path
|
||||
d="M 50 150 Q 150 50 250 150 T 450 150"
|
||||
stroke="url(#designFlowGradient)"
|
||||
strokeWidth="1"
|
||||
fill="none"
|
||||
filter="url(#designGlow)"
|
||||
className="animate-pulse"
|
||||
style={{ animationDelay: '2s' }}
|
||||
/>
|
||||
</svg>
|
||||
</div>
|
||||
|
||||
{/* Floating Design Elements & Wireframe Components */}
|
||||
<div className="absolute inset-0 pointer-events-none">
|
||||
{/* Design element particles */}
|
||||
{Array.from({ length: 6 }).map((_, i) => (
|
||||
<div
|
||||
key={i}
|
||||
className={`absolute w-2 h-2 bg-gradient-to-r from-[#E5195E]/80 to-pink-400/80 rounded-full animate-[float_${3 + (i % 3)}s_ease-in-out_infinite] shadow-sm`}
|
||||
style={{
|
||||
top: `${20 + (i * 12)}%`,
|
||||
left: `${15 + (i * 9)}%`,
|
||||
animationDelay: `${i * 0.4}s`
|
||||
}}
|
||||
/>
|
||||
))}
|
||||
|
||||
{/* Additional floating UI elements */}
|
||||
<div className="absolute top-1/6 right-1/4 w-1 h-1 bg-violet-400/60 rounded-full animate-[float_2s_ease-in-out_infinite] shadow-sm" style={{ animationDelay: '0.5s' }} />
|
||||
<div className="absolute bottom-1/4 left-1/5 w-1.5 h-1.5 bg-pink-400/70 rounded-full animate-[float_4s_ease-in-out_infinite] shadow-sm" style={{ animationDelay: '1.5s' }} />
|
||||
<div className="absolute top-2/3 right-1/6 w-1 h-1 bg-blue-400/60 rounded-full animate-[float_3s_ease-in-out_infinite] shadow-sm" style={{ animationDelay: '2.5s' }} />
|
||||
</div>
|
||||
|
||||
{/* Design Performance Metrics */}
|
||||
<div className="absolute bottom-8 left-8 flex items-center gap-4">
|
||||
<div className="flex items-center gap-2 px-3 py-1 bg-pink-500/20 backdrop-blur-sm rounded-full border border-pink-500/30">
|
||||
<TrendingUp className="w-3 h-3 text-pink-400" />
|
||||
<span className="text-xs text-pink-400 font-medium">85% Conversion</span>
|
||||
</div>
|
||||
<div className="flex items-center gap-2 px-3 py-1 bg-green-500/20 backdrop-blur-sm rounded-full border border-green-500/30">
|
||||
<Star className="w-3 h-3 text-green-400" />
|
||||
<span className="text-xs text-green-400 font-medium">4.9/5 Rating</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Accessibility & User Experience Badge */}
|
||||
<div className="absolute top-8 right-8 flex items-center gap-2 px-3 py-1 bg-purple-500/20 backdrop-blur-sm rounded-full border border-purple-500/30">
|
||||
<Heart className="w-3 h-3 text-purple-400" />
|
||||
<span className="text-xs text-purple-400 font-medium">Accessible Design</span>
|
||||
</div>
|
||||
|
||||
{/* UI/UX Design Badge */}
|
||||
<div className="absolute top-8 left-8 flex items-center gap-2 px-3 py-1 bg-[#E5195E]/20 backdrop-blur-sm rounded-full border border-[#E5195E]/30">
|
||||
<Figma className="w-3 h-3 text-[#E5195E]" />
|
||||
<span className="text-xs text-[#E5195E] font-medium">UI/UX Design</span>
|
||||
</div>
|
||||
|
||||
{/* User Satisfaction Indicator */}
|
||||
<div className="absolute bottom-8 right-8 flex items-center gap-2">
|
||||
<div className="w-2 h-2 bg-green-400 rounded-full animate-pulse"></div>
|
||||
<span className="text-xs text-white/70 font-medium">Users Engaged</span>
|
||||
</div>
|
||||
|
||||
{/* Additional Design Elements */}
|
||||
<div className="absolute top-1/3 left-1/6">
|
||||
<div className="flex items-center gap-1 px-2 py-1 bg-blue-500/20 backdrop-blur-sm rounded-lg border border-blue-500/30">
|
||||
<Monitor className="w-2 h-2 text-blue-400" />
|
||||
<span className="text-xs text-blue-400 font-medium">Web</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="absolute bottom-1/3 right-1/6">
|
||||
<div className="flex items-center gap-1 px-2 py-1 bg-green-500/20 backdrop-blur-sm rounded-lg border border-green-500/30">
|
||||
<Smartphone className="w-2 h-2 text-green-400" />
|
||||
<span className="text-xs text-green-400 font-medium">Mobile</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Design System Component */}
|
||||
<div className="absolute top-2/3 left-1/4">
|
||||
<div className="flex items-center gap-1 px-2 py-1 bg-purple-500/20 backdrop-blur-sm rounded-lg border border-purple-500/30">
|
||||
<Palette className="w-2 h-2 text-purple-400" />
|
||||
<span className="text-xs text-purple-400 font-medium">Branding</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* User Research Insight */}
|
||||
<div className="absolute top-1/4 right-1/3">
|
||||
<div className="flex items-center gap-1 px-2 py-1 bg-cyan-500/20 backdrop-blur-sm rounded-lg border border-cyan-500/30">
|
||||
<Lightbulb className="w-2 h-2 text-cyan-400" />
|
||||
<span className="text-xs text-cyan-400 font-medium">Insights</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* A/B Testing Component */}
|
||||
<div className="absolute bottom-1/2 left-1/8">
|
||||
<div className="flex items-center gap-1 px-2 py-1 bg-orange-500/20 backdrop-blur-sm rounded-lg border border-orange-500/30">
|
||||
<RefreshCcw className="w-2 h-2 text-orange-400" />
|
||||
<span className="text-xs text-orange-400 font-medium">A/B Test</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Device Responsive Indicators */}
|
||||
<div className="absolute top-1/2 right-1/8">
|
||||
<div className="flex items-center gap-1 px-2 py-1 bg-indigo-500/20 backdrop-blur-sm rounded-lg border border-indigo-500/30">
|
||||
<Tablet className="w-2 h-2 text-indigo-400" />
|
||||
<span className="text-xs text-indigo-400 font-medium">Tablet</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default UIUXDesignAnimation;
|
||||
Reference in New Issue
Block a user