249 lines
11 KiB
TypeScript
249 lines
11 KiB
TypeScript
import { motion } from "framer-motion";
|
|
|
|
export const QATestingVector = () => {
|
|
return (
|
|
<div className="relative w-full h-96 flex items-center justify-center">
|
|
{/* Testing Dashboard */}
|
|
<motion.div
|
|
initial={{ opacity: 0, y: 30 }}
|
|
animate={{ opacity: 1, y: 0 }}
|
|
transition={{ duration: 0.8 }}
|
|
className="relative z-10"
|
|
>
|
|
<div className="w-72 h-48 bg-gradient-to-br from-gray-800 to-gray-900 rounded-lg shadow-2xl p-4">
|
|
{/* Header */}
|
|
<div className="flex justify-between items-center mb-4">
|
|
<div className="text-white font-semibold font-manrope">Test Results</div>
|
|
<div className="flex space-x-1">
|
|
<div className="w-2 h-2 bg-green-500 rounded-full animate-pulse"></div>
|
|
<div className="text-green-400 text-xs font-manrope">Running</div>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Test Cases */}
|
|
<div className="space-y-2">
|
|
{[
|
|
{ name: "Login Flow", status: "passed", color: "green" },
|
|
{ name: "Payment Gateway", status: "passed", color: "green" },
|
|
{ name: "User Registration", status: "running", color: "yellow" },
|
|
{ name: "API Validation", status: "passed", color: "green" },
|
|
{ name: "Mobile Responsive", status: "failed", color: "red" }
|
|
].map((test, index) => (
|
|
<motion.div
|
|
key={test.name}
|
|
initial={{ opacity: 0, x: -20 }}
|
|
animate={{ opacity: 1, x: 0 }}
|
|
transition={{ duration: 0.5, delay: index * 0.1 + 0.3 }}
|
|
className="flex items-center justify-between p-2 bg-gray-700 rounded"
|
|
>
|
|
<div className="flex items-center space-x-2">
|
|
<motion.div
|
|
animate={test.status === "running" ? { rotate: 360 } : {}}
|
|
transition={{ duration: 2, repeat: Infinity, ease: "linear" }}
|
|
className={`w-3 h-3 rounded-full ${
|
|
test.color === "green" ? "bg-green-500" :
|
|
test.color === "yellow" ? "bg-yellow-500" : "bg-red-500"
|
|
}`}
|
|
/>
|
|
<span className="text-white text-sm font-manrope">{test.name}</span>
|
|
</div>
|
|
<span className={`text-xs font-manrope ${
|
|
test.color === "green" ? "text-green-400" :
|
|
test.color === "yellow" ? "text-yellow-400" : "text-red-400"
|
|
}`}>
|
|
{test.status}
|
|
</span>
|
|
</motion.div>
|
|
))}
|
|
</div>
|
|
|
|
{/* Statistics */}
|
|
<div className="flex justify-between mt-4 pt-3 border-t border-gray-600">
|
|
<div className="text-center">
|
|
<div className="text-green-400 font-bold font-manrope">85%</div>
|
|
<div className="text-gray-400 text-xs font-manrope">Passed</div>
|
|
</div>
|
|
<div className="text-center">
|
|
<div className="text-yellow-400 font-bold font-manrope">10%</div>
|
|
<div className="text-gray-400 text-xs font-manrope">Running</div>
|
|
</div>
|
|
<div className="text-center">
|
|
<div className="text-red-400 font-bold font-manrope">5%</div>
|
|
<div className="text-gray-400 text-xs font-manrope">Failed</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</motion.div>
|
|
|
|
{/* Testing Tools */}
|
|
<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">
|
|
{/* Selenium */}
|
|
<motion.div
|
|
whileHover={{ scale: 1.1 }}
|
|
className="w-14 h-14 bg-gradient-to-br from-green-500 to-green-600 rounded-xl flex items-center justify-center shadow-lg cursor-pointer"
|
|
>
|
|
<span className="text-white text-xs font-manrope">Selenium</span>
|
|
</motion.div>
|
|
|
|
{/* Cypress */}
|
|
<motion.div
|
|
whileHover={{ scale: 1.1 }}
|
|
className="w-14 h-14 bg-gradient-to-br from-gray-600 to-gray-700 rounded-xl flex items-center justify-center shadow-lg cursor-pointer"
|
|
>
|
|
<span className="text-white text-xs font-manrope">Cypress</span>
|
|
</motion.div>
|
|
|
|
{/* Jest */}
|
|
<motion.div
|
|
whileHover={{ scale: 1.1 }}
|
|
className="w-14 h-14 bg-gradient-to-br from-red-500 to-red-600 rounded-xl flex items-center justify-center shadow-lg cursor-pointer"
|
|
>
|
|
<span className="text-white text-xs font-manrope">Jest</span>
|
|
</motion.div>
|
|
</div>
|
|
</motion.div>
|
|
|
|
{/* Bug Tracking */}
|
|
<motion.div
|
|
initial={{ opacity: 0, x: 50 }}
|
|
animate={{ opacity: 1, x: 0 }}
|
|
transition={{ duration: 0.8, delay: 0.6 }}
|
|
className="absolute right-8 top-16"
|
|
>
|
|
<div className="w-24 h-32 bg-gradient-to-br from-red-600 to-red-800 rounded-lg p-3 shadow-lg">
|
|
<div className="text-white text-sm font-manrope mb-2">Bug Report</div>
|
|
<div className="space-y-2">
|
|
<div className="flex items-center space-x-1">
|
|
<div className="w-2 h-2 bg-red-400 rounded-full"></div>
|
|
<span className="text-red-200 text-xs font-manrope">#001</span>
|
|
</div>
|
|
<div className="flex items-center space-x-1">
|
|
<div className="w-2 h-2 bg-yellow-400 rounded-full"></div>
|
|
<span className="text-yellow-200 text-xs font-manrope">#002</span>
|
|
</div>
|
|
<div className="flex items-center space-x-1">
|
|
<div className="w-2 h-2 bg-green-400 rounded-full"></div>
|
|
<span className="text-green-200 text-xs font-manrope">#003</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</motion.div>
|
|
|
|
{/* Performance Metrics */}
|
|
<motion.div
|
|
initial={{ opacity: 0, y: 50 }}
|
|
animate={{ opacity: 1, y: 0 }}
|
|
transition={{ duration: 0.8, delay: 0.8 }}
|
|
className="absolute bottom-16 left-1/2 transform -translate-x-1/2"
|
|
>
|
|
<div className="flex space-x-6">
|
|
{/* Load Time */}
|
|
<div className="text-center">
|
|
<motion.div
|
|
initial={{ scale: 0 }}
|
|
animate={{ scale: 1 }}
|
|
transition={{ duration: 0.5, delay: 1.2 }}
|
|
className="w-16 h-16 bg-gradient-to-br from-blue-500 to-blue-600 rounded-full flex items-center justify-center mb-2"
|
|
>
|
|
<span className="text-white text-xs font-manrope">1.2s</span>
|
|
</motion.div>
|
|
<div className="text-gray-400 text-xs font-manrope">Load Time</div>
|
|
</div>
|
|
|
|
{/* Coverage */}
|
|
<div className="text-center">
|
|
<motion.div
|
|
initial={{ scale: 0 }}
|
|
animate={{ scale: 1 }}
|
|
transition={{ duration: 0.5, delay: 1.4 }}
|
|
className="w-16 h-16 bg-gradient-to-br from-green-500 to-green-600 rounded-full flex items-center justify-center mb-2"
|
|
>
|
|
<span className="text-white text-xs font-manrope">95%</span>
|
|
</motion.div>
|
|
<div className="text-gray-400 text-xs font-manrope">Coverage</div>
|
|
</div>
|
|
|
|
{/* Success Rate */}
|
|
<div className="text-center">
|
|
<motion.div
|
|
initial={{ scale: 0 }}
|
|
animate={{ scale: 1 }}
|
|
transition={{ duration: 0.5, delay: 1.6 }}
|
|
className="w-16 h-16 bg-gradient-to-br from-purple-500 to-purple-600 rounded-full flex items-center justify-center mb-2"
|
|
>
|
|
<span className="text-white text-xs font-manrope">99.2%</span>
|
|
</motion.div>
|
|
<div className="text-gray-400 text-xs font-manrope">Success</div>
|
|
</div>
|
|
</div>
|
|
</motion.div>
|
|
|
|
{/* Floating Test Icons */}
|
|
<motion.div
|
|
animate={{ y: [0, -10, 0] }}
|
|
transition={{ duration: 3, repeat: Infinity }}
|
|
className="absolute top-20 left-20 w-10 h-10 bg-gradient-to-br from-cyan-500 to-cyan-600 rounded-lg 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="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z" />
|
|
</svg>
|
|
</motion.div>
|
|
|
|
<motion.div
|
|
animate={{ y: [0, -15, 0] }}
|
|
transition={{ duration: 4, repeat: Infinity, delay: 0.5 }}
|
|
className="absolute top-32 right-24 w-8 h-8 bg-gradient-to-br from-orange-500 to-orange-600 rounded-lg flex items-center justify-center shadow-lg"
|
|
>
|
|
<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="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z" />
|
|
</svg>
|
|
</motion.div>
|
|
|
|
{/* Test Automation Flow */}
|
|
<svg className="absolute inset-0 w-full h-full pointer-events-none opacity-30">
|
|
<defs>
|
|
<linearGradient id="testFlow" x1="0%" y1="0%" x2="100%" y2="100%">
|
|
<stop offset="0%" stopColor="#10B981" stopOpacity="0.6" />
|
|
<stop offset="50%" stopColor="#E5195E" stopOpacity="0.8" />
|
|
<stop offset="100%" stopColor="#3B82F6" stopOpacity="0.6" />
|
|
</linearGradient>
|
|
</defs>
|
|
|
|
<motion.circle
|
|
cx="50%" cy="50%" r="120"
|
|
stroke="url(#testFlow)"
|
|
strokeWidth="2"
|
|
fill="none"
|
|
strokeDasharray="10,10"
|
|
initial={{ rotate: 0 }}
|
|
animate={{ rotate: 360 }}
|
|
transition={{ duration: 15, repeat: Infinity, ease: "linear" }}
|
|
/>
|
|
</svg>
|
|
|
|
{/* Quality Labels */}
|
|
<motion.div
|
|
initial={{ opacity: 0 }}
|
|
animate={{ opacity: 1 }}
|
|
transition={{ duration: 1, delay: 1.8 }}
|
|
className="absolute bottom-8 right-8 flex flex-col space-y-1"
|
|
>
|
|
<div className="px-2 py-1 bg-green-500/20 text-green-300 border border-green-500/30 rounded text-xs font-manrope">
|
|
Automated Testing
|
|
</div>
|
|
<div className="px-2 py-1 bg-blue-500/20 text-blue-300 border border-blue-500/30 rounded text-xs font-manrope">
|
|
Performance Testing
|
|
</div>
|
|
<div className="px-2 py-1 bg-purple-500/20 text-purple-300 border border-purple-500/30 rounded text-xs font-manrope">
|
|
Security Testing
|
|
</div>
|
|
</motion.div>
|
|
</div>
|
|
);
|
|
}; |