WDIPL/Wdipl-react
2
0
Fork 0
Code Issues Pull Requests 2 Actions Packages Projects Releases Wiki Activity

working on hire talent banner

Browse Source
This commit is contained in:
priyanshuvish
2025-08-07 19:49:37 +05:30
parent 95d456ca4c
commit 85bd347feb
34 changed files with 3671 additions and 868 deletions
Download Patch File Download Diff File Expand all files Collapse all files

200
components/vectors/EngagementModelsVector.tsx Normal file
View File

@@ -0,0 +1,200 @@
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>
);
};