working on hire talent banner
This commit is contained in:
priyanshuvish
285
components/vectors/BackendVector.tsx
Normal file
285
components/vectors/BackendVector.tsx
Normal file
@@ -0,0 +1,285 @@
|
||||
import { motion } from "framer-motion";
|
||||
|
||||
export const BackendVector = () => {
|
||||
return (
|
||||
<div className="relative w-full h-96 flex items-center justify-center overflow-hidden font-manrope">
|
||||
{/* Subtle Background Grid */}
|
||||
<div className="absolute inset-0 opacity-5">
|
||||
<svg className="w-full h-full" viewBox="0 0 400 400" fill="none">
|
||||
<defs>
|
||||
<pattern id="gridPattern" x="0" y="0" width="20" height="20" patternUnits="userSpaceOnUse">
|
||||
<path d="M 20 0 L 0 0 0 20" fill="none" stroke="#E5195E" strokeWidth="0.5"/>
|
||||
</pattern>
|
||||
</defs>
|
||||
<rect width="100%" height="100%" fill="url(#gridPattern)" />
|
||||
</svg>
|
||||
</div>
|
||||
|
||||
<div className="relative z-20 flex items-center justify-center">
|
||||
{/* API Gateway - Central Component */}
|
||||
<motion.div
|
||||
initial={{ opacity: 0, scale: 0 }}
|
||||
animate={{ opacity: 1, scale: 1 }}
|
||||
transition={{ duration: 0.8, delay: 0.2 }}
|
||||
className="relative flex flex-col items-center"
|
||||
>
|
||||
{/* Main API Gateway */}
|
||||
<motion.div
|
||||
animate={{ y: [0, -6, 0] }}
|
||||
transition={{ duration: 4, repeat: Infinity, ease: "easeInOut" }}
|
||||
className="w-20 h-16 bg-gradient-to-br from-blue-600 to-blue-800 rounded-xl flex items-center justify-center shadow-lg border border-blue-500/20 relative"
|
||||
>
|
||||
{/* API Icon */}
|
||||
<svg className="w-8 h-8 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M8 9l3 3-3 3m5 0h3M5 20h14a2 2 0 002-2V6a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z" />
|
||||
</svg>
|
||||
|
||||
{/* Pulsing Status Light */}
|
||||
<motion.div
|
||||
animate={{ scale: [1, 1.3, 1], opacity: [0.8, 1, 0.8] }}
|
||||
transition={{ duration: 2, repeat: Infinity }}
|
||||
className="absolute -top-1 -right-1 w-3 h-3 bg-green-400 rounded-full"
|
||||
></motion.div>
|
||||
</motion.div>
|
||||
|
||||
{/* API Gateway Label */}
|
||||
<motion.div
|
||||
initial={{ opacity: 0 }}
|
||||
animate={{ opacity: 1 }}
|
||||
transition={{ duration: 0.5, delay: 1 }}
|
||||
className="mt-3 text-xs text-white font-manrope whitespace-nowrap"
|
||||
>
|
||||
API Gateway
|
||||
</motion.div>
|
||||
</motion.div>
|
||||
|
||||
{/* Database Cluster - Left Side */}
|
||||
<motion.div
|
||||
initial={{ opacity: 0, x: -60 }}
|
||||
animate={{ opacity: 1, x: -80 }}
|
||||
transition={{ duration: 0.8, delay: 0.4 }}
|
||||
className="absolute flex flex-col items-center space-y-2"
|
||||
>
|
||||
{Array.from({ length: 3 }).map((_, i) => (
|
||||
<motion.div
|
||||
key={`db-${i}`}
|
||||
initial={{ opacity: 0, scale: 0 }}
|
||||
animate={{ opacity: 1, scale: 1 }}
|
||||
transition={{ duration: 0.5, delay: 0.6 + i * 0.1 }}
|
||||
className="relative"
|
||||
>
|
||||
<motion.div
|
||||
animate={{
|
||||
rotateY: [0, 360],
|
||||
scale: [1, 1.05, 1]
|
||||
}}
|
||||
transition={{
|
||||
duration: 8 + i * 2,
|
||||
repeat: Infinity,
|
||||
ease: "linear",
|
||||
delay: i * 1
|
||||
}}
|
||||
className="w-12 h-8 bg-gradient-to-r from-green-600 to-green-700 rounded-lg flex items-center justify-center border border-green-500/20"
|
||||
>
|
||||
{/* Database Icon */}
|
||||
<svg className="w-4 h-4 text-white" fill="currentColor" viewBox="0 0 20 20">
|
||||
<path d="M3 12v3c0 1.657 3.134 3 7 3s7-1.343 7-3v-3c0 1.657-3.134 3-7 3s-7-1.343-7-3z"/>
|
||||
<path d="M3 7v3c0 1.657 3.134 3 7 3s7-1.343 7-3V7c0 1.657-3.134 3-7 3S3 8.657 3 7z"/>
|
||||
<path d="M17 5c0 1.657-3.134 3-7 3S3 6.657 3 5s3.134-3 7-3 7 1.343 7 3z"/>
|
||||
</svg>
|
||||
</motion.div>
|
||||
|
||||
{/* Activity Indicator */}
|
||||
<motion.div
|
||||
animate={{ scale: [1, 1.5, 1] }}
|
||||
transition={{ duration: 1.5, repeat: Infinity, delay: i * 0.5 }}
|
||||
className="absolute -top-1 -right-1 w-2 h-2 bg-blue-400 rounded-full"
|
||||
></motion.div>
|
||||
</motion.div>
|
||||
))}
|
||||
|
||||
{/* Database Label */}
|
||||
<motion.div
|
||||
initial={{ opacity: 0 }}
|
||||
animate={{ opacity: 1 }}
|
||||
transition={{ duration: 0.5, delay: 1.2 }}
|
||||
className="text-xs text-white font-manrope whitespace-nowrap"
|
||||
>
|
||||
Database
|
||||
</motion.div>
|
||||
</motion.div>
|
||||
|
||||
{/* Microservices - Right Side */}
|
||||
<motion.div
|
||||
initial={{ opacity: 0, x: 60 }}
|
||||
animate={{ opacity: 1, x: 80 }}
|
||||
transition={{ duration: 0.8, delay: 0.6 }}
|
||||
className="absolute flex flex-col items-center space-y-2"
|
||||
>
|
||||
{Array.from({ length: 4 }).map((_, i) => (
|
||||
<motion.div
|
||||
key={`service-${i}`}
|
||||
initial={{ opacity: 0, scale: 0 }}
|
||||
animate={{ opacity: 1, scale: 1 }}
|
||||
transition={{ duration: 0.4, delay: 0.8 + i * 0.1 }}
|
||||
className="relative"
|
||||
>
|
||||
<motion.div
|
||||
animate={{
|
||||
x: [0, 3, 0],
|
||||
scale: [1, 1.1, 1]
|
||||
}}
|
||||
transition={{
|
||||
duration: 3 + i * 0.5,
|
||||
repeat: Infinity,
|
||||
ease: "easeInOut",
|
||||
delay: i * 0.3
|
||||
}}
|
||||
className="w-10 h-6 bg-gradient-to-r from-purple-600 to-purple-700 rounded flex items-center justify-center border border-purple-500/20"
|
||||
>
|
||||
<span className="text-xs text-white font-manrope">#{i + 1}</span>
|
||||
</motion.div>
|
||||
|
||||
{/* Service Status */}
|
||||
<motion.div
|
||||
animate={{ opacity: [0.5, 1, 0.5] }}
|
||||
transition={{ duration: 2, repeat: Infinity, delay: i * 0.4 }}
|
||||
className="absolute -top-1 -left-1 w-2 h-2 bg-green-400 rounded-full"
|
||||
></motion.div>
|
||||
</motion.div>
|
||||
))}
|
||||
|
||||
{/* Microservices Label */}
|
||||
<motion.div
|
||||
initial={{ opacity: 0 }}
|
||||
animate={{ opacity: 1 }}
|
||||
transition={{ duration: 0.5, delay: 1.4 }}
|
||||
className="text-xs text-white font-manrope whitespace-nowrap"
|
||||
>
|
||||
Services
|
||||
</motion.div>
|
||||
</motion.div>
|
||||
</div>
|
||||
|
||||
{/* Data Flow Lines */}
|
||||
<svg className="absolute inset-0 w-full h-full pointer-events-none opacity-30 z-15">
|
||||
<defs>
|
||||
<linearGradient id="flowGradient1" x1="0%" y1="0%" x2="100%" y2="0%">
|
||||
<stop offset="0%" stopColor="#22c55e" stopOpacity="0.6" />
|
||||
<stop offset="50%" stopColor="#3b82f6" stopOpacity="0.8" />
|
||||
<stop offset="100%" stopColor="#8b5cf6" stopOpacity="0.6" />
|
||||
</linearGradient>
|
||||
<linearGradient id="flowGradient2" x1="0%" y1="0%" x2="100%" y2="0%">
|
||||
<stop offset="0%" stopColor="#8b5cf6" stopOpacity="0.6" />
|
||||
<stop offset="50%" stopColor="#3b82f6" stopOpacity="0.8" />
|
||||
<stop offset="100%" stopColor="#22c55e" stopOpacity="0.6" />
|
||||
</linearGradient>
|
||||
</defs>
|
||||
|
||||
{/* Database to API Flow */}
|
||||
<motion.path
|
||||
d="M 30% 50% Q 40% 45% 50% 50%"
|
||||
fill="none"
|
||||
stroke="url(#flowGradient1)"
|
||||
strokeWidth="2"
|
||||
strokeDasharray="4,4"
|
||||
initial={{ pathLength: 0 }}
|
||||
animate={{ pathLength: 1 }}
|
||||
transition={{ duration: 2, repeat: Infinity, repeatType: "loop" }}
|
||||
/>
|
||||
|
||||
{/* API to Services Flow */}
|
||||
<motion.path
|
||||
d="M 50% 50% Q 60% 45% 70% 50%"
|
||||
fill="none"
|
||||
stroke="url(#flowGradient2)"
|
||||
strokeWidth="2"
|
||||
strokeDasharray="4,4"
|
||||
initial={{ pathLength: 0 }}
|
||||
animate={{ pathLength: 1 }}
|
||||
transition={{ duration: 2, repeat: Infinity, repeatType: "loop", delay: 0.5 }}
|
||||
/>
|
||||
</svg>
|
||||
|
||||
{/* Performance Metrics - Top Right */}
|
||||
<motion.div
|
||||
initial={{ opacity: 0, y: -20 }}
|
||||
animate={{ opacity: 1, y: 0 }}
|
||||
transition={{ duration: 0.6, delay: 1.6 }}
|
||||
className="absolute top-6 right-6 z-25"
|
||||
>
|
||||
<div className="bg-black/40 backdrop-blur-sm rounded-lg p-3 border border-white/10">
|
||||
<div className="space-y-2">
|
||||
<div className="flex items-center space-x-2">
|
||||
<motion.div
|
||||
animate={{ scale: [1, 1.2, 1] }}
|
||||
transition={{ duration: 2, repeat: Infinity }}
|
||||
className="w-2 h-2 bg-green-400 rounded-full"
|
||||
></motion.div>
|
||||
<span className="text-green-400 text-xs font-manrope">2ms Latency</span>
|
||||
</div>
|
||||
<div className="flex items-center space-x-2">
|
||||
<motion.div
|
||||
animate={{ scale: [1, 1.2, 1] }}
|
||||
transition={{ duration: 2, repeat: Infinity, delay: 0.5 }}
|
||||
className="w-2 h-2 bg-blue-400 rounded-full"
|
||||
></motion.div>
|
||||
<span className="text-blue-400 text-xs font-manrope">1M+ Requests/hr</span>
|
||||
</div>
|
||||
<div className="flex items-center space-x-2">
|
||||
<motion.div
|
||||
animate={{ scale: [1, 1.2, 1] }}
|
||||
transition={{ duration: 2, repeat: Infinity, delay: 1 }}
|
||||
className="w-2 h-2 bg-purple-400 rounded-full"
|
||||
></motion.div>
|
||||
<span className="text-purple-400 text-xs font-manrope">Auto-Scaling</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</motion.div>
|
||||
|
||||
{/* Tech Stack - Bottom Left */}
|
||||
<motion.div
|
||||
initial={{ opacity: 0, y: 20 }}
|
||||
animate={{ opacity: 1, y: 0 }}
|
||||
transition={{ duration: 0.6, delay: 1.8 }}
|
||||
className="absolute bottom-6 left-6 z-25"
|
||||
>
|
||||
<div className="bg-black/40 backdrop-blur-sm rounded-lg p-3 border border-white/10">
|
||||
<div className="flex space-x-2">
|
||||
{[
|
||||
{ name: "Node.js", color: "bg-green-600/20 text-green-400" },
|
||||
{ name: "SQL", color: "bg-blue-600/20 text-blue-400" },
|
||||
{ name: "Redis", color: "bg-red-600/20 text-red-400" },
|
||||
{ name: "Docker", color: "bg-cyan-600/20 text-cyan-400" }
|
||||
].map((tech, index) => (
|
||||
<motion.div
|
||||
key={tech.name}
|
||||
initial={{ scale: 0 }}
|
||||
animate={{ scale: 1 }}
|
||||
transition={{ duration: 0.3, delay: 2 + index * 0.1 }}
|
||||
className={`px-2 py-1 ${tech.color} border border-current/20 rounded text-xs font-manrope`}
|
||||
>
|
||||
{tech.name}
|
||||
</motion.div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</motion.div>
|
||||
|
||||
{/* Load Balancer Indicator */}
|
||||
<motion.div
|
||||
initial={{ opacity: 0, scale: 0 }}
|
||||
animate={{ opacity: 1, scale: 1 }}
|
||||
transition={{ duration: 0.5, delay: 2.2 }}
|
||||
className="absolute bottom-6 right-6 z-25"
|
||||
>
|
||||
<motion.div
|
||||
animate={{ rotate: [0, 360] }}
|
||||
transition={{ duration: 12, repeat: Infinity, ease: "linear" }}
|
||||
className="w-8 h-8 border-2 border-gray-600 border-t-accent rounded-full"
|
||||
></motion.div>
|
||||
</motion.div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
Reference in New Issue
Block a user