working on hire talent banner
This commit is contained in:
priyanshuvish
195
components/vectors/FrontendVector.tsx
Normal file
195
components/vectors/FrontendVector.tsx
Normal file
@@ -0,0 +1,195 @@
|
||||
import { motion } from "framer-motion";
|
||||
|
||||
export const FrontendVector = () => {
|
||||
return (
|
||||
<div className="relative w-full h-96 flex items-center justify-center">
|
||||
{/* Browser Window */}
|
||||
<motion.div
|
||||
initial={{ opacity: 0, y: 30 }}
|
||||
animate={{ opacity: 1, y: 0 }}
|
||||
transition={{ duration: 0.8 }}
|
||||
className="relative z-10"
|
||||
>
|
||||
<div className="w-80 h-56 bg-gradient-to-br from-gray-800 to-gray-900 rounded-lg shadow-2xl">
|
||||
{/* Browser Header */}
|
||||
<div className="h-8 bg-gray-700 rounded-t-lg flex items-center px-4 space-x-2">
|
||||
<div className="w-3 h-3 bg-red-500 rounded-full"></div>
|
||||
<div className="w-3 h-3 bg-yellow-500 rounded-full"></div>
|
||||
<div className="w-3 h-3 bg-green-500 rounded-full"></div>
|
||||
<div className="flex-1 bg-gray-600 rounded ml-4 h-4 flex items-center px-2">
|
||||
<span className="text-gray-300 text-xs font-manrope">localhost:3000</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Browser Content */}
|
||||
<div className="p-4 space-y-3">
|
||||
{/* Navigation */}
|
||||
<div className="flex justify-between items-center">
|
||||
<div className="h-3 bg-gradient-to-r from-blue-500 to-purple-500 rounded w-20"></div>
|
||||
<div className="flex space-x-2">
|
||||
<div className="w-12 h-3 bg-gray-600 rounded"></div>
|
||||
<div className="w-12 h-3 bg-gray-600 rounded"></div>
|
||||
<div className="w-12 h-3 bg-accent rounded"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Hero Section */}
|
||||
<div className="space-y-2">
|
||||
<div className="h-4 bg-white/80 rounded w-3/4"></div>
|
||||
<div className="h-3 bg-white/60 rounded w-1/2"></div>
|
||||
<div className="h-6 bg-gradient-to-r from-accent to-purple-500 rounded w-24 mt-2"></div>
|
||||
</div>
|
||||
|
||||
{/* Cards Grid */}
|
||||
<div className="grid grid-cols-3 gap-2 mt-4">
|
||||
{Array.from({ length: 6 }).map((_, i) => (
|
||||
<motion.div
|
||||
key={i}
|
||||
initial={{ scale: 0 }}
|
||||
animate={{ scale: 1 }}
|
||||
transition={{ duration: 0.3, delay: i * 0.1 + 1 }}
|
||||
className="h-8 bg-gradient-to-br from-gray-600 to-gray-700 rounded"
|
||||
/>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</motion.div>
|
||||
|
||||
{/* Floating UI Components */}
|
||||
<motion.div
|
||||
initial={{ opacity: 0, x: -30 }}
|
||||
animate={{ opacity: 1, x: 0 }}
|
||||
transition={{ duration: 0.8, delay: 0.5 }}
|
||||
className="absolute left-8 top-16"
|
||||
>
|
||||
<div className="space-y-3">
|
||||
{/* Button Component */}
|
||||
<motion.div
|
||||
whileHover={{ scale: 1.05 }}
|
||||
className="w-20 h-8 bg-gradient-to-r from-blue-500 to-blue-600 rounded flex items-center justify-center shadow-lg cursor-pointer"
|
||||
>
|
||||
<span className="text-white text-xs font-manrope">Button</span>
|
||||
</motion.div>
|
||||
|
||||
{/* Input Component */}
|
||||
<motion.div
|
||||
whileHover={{ scale: 1.05 }}
|
||||
className="w-24 h-6 bg-gray-700 border border-gray-500 rounded flex items-center px-2"
|
||||
>
|
||||
<div className="w-2 h-2 bg-blue-400 animate-pulse"></div>
|
||||
</motion.div>
|
||||
|
||||
{/* Card Component */}
|
||||
<motion.div
|
||||
whileHover={{ scale: 1.05 }}
|
||||
className="w-20 h-12 bg-gradient-to-br from-gray-700 to-gray-800 rounded shadow-lg border border-gray-600"
|
||||
>
|
||||
<div className="p-2 space-y-1">
|
||||
<div className="h-1 bg-gray-400 rounded w-3/4"></div>
|
||||
<div className="h-1 bg-gray-500 rounded w-1/2"></div>
|
||||
</div>
|
||||
</motion.div>
|
||||
</div>
|
||||
</motion.div>
|
||||
|
||||
{/* Floating Code Snippets */}
|
||||
<motion.div
|
||||
initial={{ opacity: 0, x: 30 }}
|
||||
animate={{ opacity: 1, x: 0 }}
|
||||
transition={{ duration: 0.8, delay: 0.7 }}
|
||||
className="absolute right-8 top-20"
|
||||
>
|
||||
<div className="space-y-3">
|
||||
{/* JSX Code */}
|
||||
<div className="w-28 h-10 bg-gray-800 rounded border border-gray-600 p-2">
|
||||
<div className="space-y-1">
|
||||
<div className="flex items-center space-x-1">
|
||||
<div className="text-purple-400 text-xs font-manrope"><</div>
|
||||
<div className="text-blue-400 text-xs font-manrope">div</div>
|
||||
<div className="text-purple-400 text-xs font-manrope">></div>
|
||||
</div>
|
||||
<div className="h-1 bg-green-400 rounded w-2/3 ml-2"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* CSS Code */}
|
||||
<div className="w-24 h-8 bg-gray-800 rounded border border-gray-600 p-1.5">
|
||||
<div className="space-y-0.5">
|
||||
<div className="text-orange-400 text-xs font-manrope">.btn</div>
|
||||
<div className="h-0.5 bg-blue-400 rounded w-1/2 ml-2"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</motion.div>
|
||||
|
||||
{/* Technology Icons */}
|
||||
<motion.div
|
||||
animate={{ y: [0, -10, 0] }}
|
||||
transition={{ duration: 3, repeat: Infinity }}
|
||||
className="absolute bottom-16 left-16 w-12 h-12 bg-gradient-to-br from-cyan-500 to-cyan-600 rounded-xl flex items-center justify-center shadow-lg"
|
||||
>
|
||||
<span className="text-white text-lg font-manrope">⚛️</span>
|
||||
</motion.div>
|
||||
|
||||
<motion.div
|
||||
animate={{ y: [0, -15, 0] }}
|
||||
transition={{ duration: 4, repeat: Infinity, delay: 0.5 }}
|
||||
className="absolute bottom-20 right-20 w-10 h-10 bg-gradient-to-br from-green-500 to-green-600 rounded-lg flex items-center justify-center shadow-lg"
|
||||
>
|
||||
<span className="text-white text-sm font-manrope">V</span>
|
||||
</motion.div>
|
||||
|
||||
<motion.div
|
||||
animate={{ y: [0, -12, 0] }}
|
||||
transition={{ duration: 3.5, repeat: Infinity, delay: 1 }}
|
||||
className="absolute top-12 right-32 w-11 h-11 bg-gradient-to-br from-red-500 to-red-600 rounded-lg flex items-center justify-center shadow-lg"
|
||||
>
|
||||
<span className="text-white text-sm font-manrope">A</span>
|
||||
</motion.div>
|
||||
|
||||
{/* Responsive Design Indicators */}
|
||||
<motion.div
|
||||
initial={{ opacity: 0 }}
|
||||
animate={{ opacity: 1 }}
|
||||
transition={{ duration: 1, delay: 1.5 }}
|
||||
className="absolute bottom-8 left-1/2 transform -translate-x-1/2 flex space-x-3"
|
||||
>
|
||||
<div className="flex items-center space-x-1">
|
||||
<div className="w-4 h-3 bg-blue-500 rounded-sm"></div>
|
||||
<span className="text-gray-400 text-xs font-manrope">Desktop</span>
|
||||
</div>
|
||||
<div className="flex items-center space-x-1">
|
||||
<div className="w-3 h-4 bg-green-500 rounded-sm"></div>
|
||||
<span className="text-gray-400 text-xs font-manrope">Tablet</span>
|
||||
</div>
|
||||
<div className="flex items-center space-x-1">
|
||||
<div className="w-2 h-4 bg-purple-500 rounded-sm"></div>
|
||||
<span className="text-gray-400 text-xs font-manrope">Mobile</span>
|
||||
</div>
|
||||
</motion.div>
|
||||
|
||||
{/* Interactive Elements */}
|
||||
<svg className="absolute inset-0 w-full h-full pointer-events-none opacity-30">
|
||||
<defs>
|
||||
<radialGradient id="frontendGradient" cx="50%" cy="50%" r="50%">
|
||||
<stop offset="0%" stopColor="#3B82F6" stopOpacity="0.6" />
|
||||
<stop offset="50%" stopColor="#E5195E" stopOpacity="0.4" />
|
||||
<stop offset="100%" stopColor="#8B5CF6" stopOpacity="0.6" />
|
||||
</radialGradient>
|
||||
</defs>
|
||||
|
||||
<motion.circle
|
||||
cx="50%" cy="50%" r="100"
|
||||
stroke="url(#frontendGradient)"
|
||||
strokeWidth="2"
|
||||
fill="none"
|
||||
strokeDasharray="8,8"
|
||||
initial={{ rotate: 0 }}
|
||||
animate={{ rotate: 360 }}
|
||||
transition={{ duration: 20, repeat: Infinity, ease: "linear" }}
|
||||
/>
|
||||
</svg>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
Reference in New Issue
Block a user