200 lines
8.4 KiB
TypeScript
200 lines
8.4 KiB
TypeScript
import { motion } from "framer-motion";
|
|
|
|
export const EngagementModelsVector = () => {
|
|
const models = [
|
|
{ name: "Fixed Price", icon: "💰", color: "from-blue-500 to-blue-600", position: { x: 20, y: 30 } },
|
|
{ name: "Time & Material", icon: "⏱️", color: "from-green-500 to-green-600", position: { x: 80, y: 30 } },
|
|
{ name: "Dedicated Team", icon: "👥", color: "from-accent to-pink-600", position: { x: 50, y: 70 } }
|
|
];
|
|
|
|
return (
|
|
<div className="relative w-full h-96 flex items-center justify-center">
|
|
{/* Central Business Hub */}
|
|
<motion.div
|
|
initial={{ opacity: 0, scale: 0 }}
|
|
animate={{ opacity: 1, scale: 1 }}
|
|
transition={{ duration: 0.8 }}
|
|
className="relative z-10"
|
|
>
|
|
<div className="w-32 h-32 bg-gradient-to-br from-gray-800 to-gray-900 rounded-2xl flex items-center justify-center shadow-2xl">
|
|
<div className="w-20 h-20 bg-gradient-to-br from-accent to-purple-600 rounded-xl flex items-center justify-center">
|
|
<svg className="w-10 h-10 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M21 13.255A23.931 23.931 0 0112 15c-3.183 0-6.22-.62-9-1.745M16 6V4a2 2 0 00-2-2h-4a2 2 0 00-2-2v2m8 0V6a2 2 0 012 2v6a2 2 0 01-2 2H6a2 2 0 01-2-2V8a2 2 0 012-2V6" />
|
|
</svg>
|
|
</div>
|
|
</div>
|
|
</motion.div>
|
|
|
|
{/* Engagement Model Options */}
|
|
{models.map((model, index) => (
|
|
<motion.div
|
|
key={model.name}
|
|
initial={{ opacity: 0, scale: 0 }}
|
|
animate={{ opacity: 1, scale: 1 }}
|
|
transition={{ duration: 0.6, delay: index * 0.2 + 0.4 }}
|
|
className="absolute"
|
|
style={{
|
|
left: `${model.position.x}%`,
|
|
top: `${model.position.y}%`,
|
|
transform: 'translate(-50%, -50%)'
|
|
}}
|
|
>
|
|
<motion.div
|
|
whileHover={{ scale: 1.1, y: -5 }}
|
|
className={`w-20 h-20 bg-gradient-to-br ${model.color} rounded-xl flex flex-col items-center justify-center shadow-lg cursor-pointer`}
|
|
>
|
|
<span className="text-2xl mb-1">{model.icon}</span>
|
|
<span className="text-white text-xs font-manrope text-center leading-tight">
|
|
{model.name.split(' ').map((word, i) => (
|
|
<div key={i}>{word}</div>
|
|
))}
|
|
</span>
|
|
</motion.div>
|
|
|
|
{/* Model Benefits */}
|
|
<motion.div
|
|
initial={{ opacity: 0, y: 10 }}
|
|
animate={{ opacity: 1, y: 0 }}
|
|
transition={{ duration: 0.5, delay: index * 0.2 + 1 }}
|
|
className="absolute -bottom-12 left-1/2 transform -translate-x-1/2 text-center"
|
|
>
|
|
<div className="text-gray-400 text-xs font-manrope">
|
|
{model.name === "Fixed Price" && "Predictable Cost"}
|
|
{model.name === "Time & Material" && "High Flexibility"}
|
|
{model.name === "Dedicated Team" && "Full Control"}
|
|
</div>
|
|
</motion.div>
|
|
</motion.div>
|
|
))}
|
|
|
|
{/* Connection Lines */}
|
|
<svg className="absolute inset-0 w-full h-full pointer-events-none">
|
|
<defs>
|
|
<linearGradient id="engagementGradient" x1="0%" y1="0%" x2="100%" y2="100%">
|
|
<stop offset="0%" stopColor="#3B82F6" stopOpacity="0.6" />
|
|
<stop offset="50%" stopColor="#E5195E" stopOpacity="0.8" />
|
|
<stop offset="100%" stopColor="#8B5CF6" stopOpacity="0.6" />
|
|
</linearGradient>
|
|
</defs>
|
|
|
|
{models.map((model, index) => (
|
|
<motion.line
|
|
key={index}
|
|
x1="50%"
|
|
y1="50%"
|
|
x2={`${model.position.x}%`}
|
|
y2={`${model.position.y}%`}
|
|
stroke="url(#engagementGradient)"
|
|
strokeWidth="2"
|
|
strokeDasharray="4,4"
|
|
initial={{ pathLength: 0, opacity: 0 }}
|
|
animate={{ pathLength: 1, opacity: 0.7 }}
|
|
transition={{ duration: 1, delay: index * 0.3 + 1.5 }}
|
|
/>
|
|
))}
|
|
</svg>
|
|
|
|
{/* Business Metrics */}
|
|
<motion.div
|
|
initial={{ opacity: 0, y: 20 }}
|
|
animate={{ opacity: 1, y: 0 }}
|
|
transition={{ duration: 1, delay: 2 }}
|
|
className="absolute top-8 left-1/2 transform -translate-x-1/2 flex space-x-6"
|
|
>
|
|
<div className="text-center">
|
|
<div className="text-green-400 text-lg font-manrope">95%</div>
|
|
<div className="text-gray-400 text-xs font-manrope">Success Rate</div>
|
|
</div>
|
|
<div className="text-center">
|
|
<div className="text-blue-400 text-lg font-manrope">500+</div>
|
|
<div className="text-gray-400 text-xs font-manrope">Projects</div>
|
|
</div>
|
|
<div className="text-center">
|
|
<div className="text-purple-400 text-lg font-manrope">98%</div>
|
|
<div className="text-gray-400 text-xs font-manrope">Satisfaction</div>
|
|
</div>
|
|
</motion.div>
|
|
|
|
{/* Project Types */}
|
|
<motion.div
|
|
initial={{ opacity: 0 }}
|
|
animate={{ opacity: 1 }}
|
|
transition={{ duration: 1, delay: 2.5 }}
|
|
className="absolute bottom-8 left-1/2 transform -translate-x-1/2"
|
|
>
|
|
<div className="flex space-x-3">
|
|
<div className="px-3 py-1 bg-blue-500/20 text-blue-300 border border-blue-500/30 rounded-full text-sm font-manrope">
|
|
MVP
|
|
</div>
|
|
<div className="px-3 py-1 bg-green-500/20 text-green-300 border border-green-500/30 rounded-full text-sm font-manrope">
|
|
Enterprise
|
|
</div>
|
|
<div className="px-3 py-1 bg-purple-500/20 text-purple-300 border border-purple-500/30 rounded-full text-sm font-manrope">
|
|
Scale-up
|
|
</div>
|
|
</div>
|
|
</motion.div>
|
|
|
|
{/* Floating Decision Factors */}
|
|
<motion.div
|
|
animate={{ y: [0, -8, 0] }}
|
|
transition={{ duration: 3, repeat: Infinity }}
|
|
className="absolute top-24 left-8 w-16 h-12 bg-gradient-to-br from-yellow-500 to-yellow-600 rounded-lg flex items-center justify-center shadow-lg"
|
|
>
|
|
<div className="text-center">
|
|
<div className="text-white text-xs font-manrope">Budget</div>
|
|
<div className="text-white text-xs font-manrope">🎯</div>
|
|
</div>
|
|
</motion.div>
|
|
|
|
<motion.div
|
|
animate={{ y: [0, -12, 0] }}
|
|
transition={{ duration: 4, repeat: Infinity, delay: 0.5 }}
|
|
className="absolute top-32 right-8 w-16 h-12 bg-gradient-to-br from-indigo-500 to-indigo-600 rounded-lg flex items-center justify-center shadow-lg"
|
|
>
|
|
<div className="text-center">
|
|
<div className="text-white text-xs font-manrope">Timeline</div>
|
|
<div className="text-white text-xs font-manrope">⏰</div>
|
|
</div>
|
|
</motion.div>
|
|
|
|
<motion.div
|
|
animate={{ y: [0, -10, 0] }}
|
|
transition={{ duration: 3.5, repeat: Infinity, delay: 1 }}
|
|
className="absolute bottom-20 left-8 w-16 h-12 bg-gradient-to-br from-teal-500 to-teal-600 rounded-lg flex items-center justify-center shadow-lg"
|
|
>
|
|
<div className="text-center">
|
|
<div className="text-white text-xs font-manrope">Scope</div>
|
|
<div className="text-white text-xs font-manrope">📋</div>
|
|
</div>
|
|
</motion.div>
|
|
|
|
{/* ROI Indicator */}
|
|
<motion.div
|
|
initial={{ opacity: 0, rotate: -45 }}
|
|
animate={{ opacity: 1, rotate: 0 }}
|
|
transition={{ duration: 0.8, delay: 3 }}
|
|
className="absolute bottom-16 right-8"
|
|
>
|
|
<div className="w-20 h-8 bg-gradient-to-br from-green-500 to-green-600 rounded-full flex items-center justify-center shadow-lg">
|
|
<span className="text-white text-sm font-manrope">ROI ↗</span>
|
|
</div>
|
|
</motion.div>
|
|
|
|
{/* Selection Process Flow */}
|
|
<motion.div
|
|
initial={{ opacity: 0 }}
|
|
animate={{ opacity: 1 }}
|
|
transition={{ duration: 1, delay: 3.5 }}
|
|
className="absolute bottom-24 right-16"
|
|
>
|
|
<div className="text-right space-y-1">
|
|
<div className="text-gray-400 text-xs font-manrope">1. Analyze Requirements</div>
|
|
<div className="text-gray-400 text-xs font-manrope">2. Compare Models</div>
|
|
<div className="text-gray-400 text-xs font-manrope">3. Select Best Fit</div>
|
|
<div className="text-gray-400 text-xs font-manrope">4. Start Project</div>
|
|
</div>
|
|
</motion.div>
|
|
</div>
|
|
);
|
|
}; |