212 lines
8.9 KiB
TypeScript
212 lines
8.9 KiB
TypeScript
|
import { Button } from "./ui/button";
|
||
|
|
import { ShimmerButton } from "./ui/shimmer-button";
|
||
|
|
import { navigateTo } from "../App";
|
||
|
|
import { DashboardVector } from "./vectors/DashboardVector";
|
||
|
|
import { motion } from "framer-motion";
|
||
|
|
|
||
|
|
interface HireTalentHeroBannerProps {
|
||
|
|
category?: string;
|
||
|
|
title: string;
|
||
|
|
description: string;
|
||
|
|
primaryCTA: {
|
||
|
|
text: string;
|
||
|
|
href: string;
|
||
|
|
icon?: React.ComponentType<{ className?: string }>;
|
||
|
|
};
|
||
|
|
secondaryCTA?: {
|
||
|
|
text: string;
|
||
|
|
href: string;
|
||
|
|
icon?: React.ComponentType<{ className?: string }>;
|
||
|
|
};
|
||
|
|
useVectors?: boolean; // Keep for backward compatibility
|
||
|
|
vectorComponent?: React.ComponentType; // New prop for custom vectors
|
||
|
|
}
|
||
|
|
|
||
|
|
export function HireTalentHeroBanner({
|
||
|
|
category,
|
||
|
|
title,
|
||
|
|
description,
|
||
|
|
primaryCTA,
|
||
|
|
secondaryCTA,
|
||
|
|
useVectors = false,
|
||
|
|
vectorComponent: VectorComponent
|
||
|
|
}: HireTalentHeroBannerProps) {
|
||
|
|
return (
|
||
|
|
<section className="relative py-20 overflow-hidden bg-black">
|
||
|
|
<div className="container mx-auto px-6 lg:px-8">
|
||
|
|
<div className="grid lg:grid-cols-2 gap-16 items-center min-h-[90vh]">
|
||
|
|
<motion.div
|
||
|
|
initial={{ opacity: 0, x: -50 }}
|
||
|
|
animate={{ opacity: 1, x: 0 }}
|
||
|
|
transition={{ duration: 0.8 }}
|
||
|
|
className="space-y-8"
|
||
|
|
>
|
||
|
|
{/* Category Label */}
|
||
|
|
{category && (
|
||
|
|
<motion.div
|
||
|
|
initial={{ opacity: 0, y: 20 }}
|
||
|
|
animate={{ opacity: 1, y: 0 }}
|
||
|
|
transition={{ duration: 0.6 }}
|
||
|
|
>
|
||
|
|
<span className="text-white/70 text-sm font-medium font-manrope">
|
||
|
|
{category}
|
||
|
|
</span>
|
||
|
|
</motion.div>
|
||
|
|
)}
|
||
|
|
|
||
|
|
{/* Main Heading */}
|
||
|
|
<div className="space-y-6">
|
||
|
|
<h1 className="text-4xl md:text-5xl lg:text-6xl font-semibold text-white leading-tight font-manrope">
|
||
|
|
{title}
|
||
|
|
</h1>
|
||
|
|
|
||
|
|
<p className="text-lg text-gray-300 leading-relaxed max-w-lg font-manrope">
|
||
|
|
{description}
|
||
|
|
</p>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
{/* CTAs */}
|
||
|
|
<motion.div
|
||
|
|
initial={{ opacity: 0, y: 20 }}
|
||
|
|
animate={{ opacity: 1, y: 0 }}
|
||
|
|
transition={{ duration: 0.8, delay: 0.3 }}
|
||
|
|
className="flex flex-col sm:flex-row gap-4"
|
||
|
|
>
|
||
|
|
<ShimmerButton
|
||
|
|
className="text-lg px-8 py-4 font-manrope"
|
||
|
|
onClick={() => navigateTo(primaryCTA.href)}
|
||
|
|
>
|
||
|
|
<div className="inline-flex items-center gap-2">
|
||
|
|
{primaryCTA.icon && <primaryCTA.icon className="w-5 h-5 flex-shrink-0" />}
|
||
|
|
<span>{primaryCTA.text}</span>
|
||
|
|
</div>
|
||
|
|
</ShimmerButton>
|
||
|
|
|
||
|
|
{secondaryCTA && (
|
||
|
|
<Button
|
||
|
|
variant="outline"
|
||
|
|
size="lg"
|
||
|
|
className="text-lg px-8 py-4 h-auto border-gray-600 text-gray-300 hover:bg-gray-800 hover:text-white font-manrope"
|
||
|
|
onClick={() => navigateTo(secondaryCTA.href)}
|
||
|
|
>
|
||
|
|
<div className="inline-flex items-center gap-2">
|
||
|
|
{secondaryCTA.icon && <secondaryCTA.icon className="w-5 h-5 flex-shrink-0" />}
|
||
|
|
<span>{secondaryCTA.text}</span>
|
||
|
|
</div>
|
||
|
|
</Button>
|
||
|
|
)}
|
||
|
|
</motion.div>
|
||
|
|
</motion.div>
|
||
|
|
|
||
|
|
{/* Right side with Custom Vector, Dashboard Vector, or Legacy Vector Graphics */}
|
||
|
|
<motion.div
|
||
|
|
initial={{ opacity: 0, x: 50 }}
|
||
|
|
animate={{ opacity: 1, x: 0 }}
|
||
|
|
transition={{ duration: 0.8, delay: 0.2 }}
|
||
|
|
className="relative flex flex-col items-center"
|
||
|
|
>
|
||
|
|
<div className="relative w-full max-w-2xl mx-auto">
|
||
|
|
<motion.div
|
||
|
|
initial={{ opacity: 0, y: 30 }}
|
||
|
|
animate={{ opacity: 1, y: 0 }}
|
||
|
|
transition={{ duration: 0.8, delay: 0.4 }}
|
||
|
|
className="relative"
|
||
|
|
>
|
||
|
|
{VectorComponent ? (
|
||
|
|
/* Custom Vector Component */
|
||
|
|
<VectorComponent />
|
||
|
|
) : useVectors ? (
|
||
|
|
/* Legacy Vector Graphics Version */
|
||
|
|
<DevelopmentTeamVectors />
|
||
|
|
) : (
|
||
|
|
/* Default Dashboard Vector */
|
||
|
|
<DashboardVector />
|
||
|
|
)}
|
||
|
|
</motion.div>
|
||
|
|
</div>
|
||
|
|
</motion.div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</section>
|
||
|
|
);
|
||
|
|
}
|
||
|
|
|
||
|
|
// Legacy Vector Graphics Component for Development Team Visualization (kept for backward compatibility)
|
||
|
|
const DevelopmentTeamVectors = () => {
|
||
|
|
return (
|
||
|
|
<div className="relative w-full h-[500px] flex items-center justify-center">
|
||
|
|
{/* Main Development Hub */}
|
||
|
|
<motion.div
|
||
|
|
initial={{ opacity: 0, scale: 0.8 }}
|
||
|
|
animate={{ opacity: 1, scale: 1 }}
|
||
|
|
transition={{ duration: 0.8, delay: 0.4 }}
|
||
|
|
className="relative"
|
||
|
|
>
|
||
|
|
{/* Central Hub Circle */}
|
||
|
|
<div className="w-48 h-48 bg-gradient-to-br from-accent to-purple-600 rounded-full flex items-center justify-center relative">
|
||
|
|
<div className="w-32 h-32 bg-white/20 rounded-full flex items-center justify-center backdrop-blur-sm">
|
||
|
|
<svg className="w-16 h-16 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||
|
|
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M10 20l4-16m4 4l4 4-4 4M6 16l-4-4 4-4" />
|
||
|
|
</svg>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
{/* Pulse Animation Ring */}
|
||
|
|
<div className="absolute inset-0 rounded-full bg-accent/30 animate-ping"></div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
{/* Orbiting Developer Icons */}
|
||
|
|
<motion.div
|
||
|
|
animate={{ rotate: 360 }}
|
||
|
|
transition={{ duration: 20, repeat: Infinity, ease: "linear" }}
|
||
|
|
className="absolute inset-0 w-48 h-48"
|
||
|
|
>
|
||
|
|
{/* Frontend Developer */}
|
||
|
|
<div className="absolute -top-6 left-1/2 transform -translate-x-1/2 w-12 h-12 bg-gradient-to-br from-blue-500 to-blue-600 rounded-full flex items-center justify-center">
|
||
|
|
<svg className="w-6 h-6 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||
|
|
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M9.75 17L9 20l-1 1h8l-1-1-.75-3M3 13h18M5 17h14a2 2 0 002-2V5a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z" />
|
||
|
|
</svg>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
{/* Backend Developer */}
|
||
|
|
<div className="absolute top-1/2 -right-6 transform -translate-y-1/2 w-12 h-12 bg-gradient-to-br from-green-500 to-green-600 rounded-full flex items-center justify-center">
|
||
|
|
<svg className="w-6 h-6 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||
|
|
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M5 12h14M5 12a2 2 0 01-2-2V6a2 2 0 012-2h14a2 2 0 012 2v4a2 2 0 01-2 2M5 12a2 2 0 00-2 2v4a2 2 0 002 2h14a2 2 0 002-2v-4a2 2 0 00-2-2m-2-4h.01M17 16h.01" />
|
||
|
|
</svg>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
{/* Mobile Developer */}
|
||
|
|
<div className="absolute -bottom-6 left-1/2 transform -translate-x-1/2 w-12 h-12 bg-gradient-to-br from-purple-500 to-purple-600 rounded-full flex items-center justify-center">
|
||
|
|
<svg className="w-6 h-6 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||
|
|
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M12 18h.01M8 21h8a1 1 0 001-1V4a1 1 0 00-1-1H8a1 1 0 00-1 1v16a1 1 0 001 1z" />
|
||
|
|
</svg>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
{/* UI/UX Designer */}
|
||
|
|
<div className="absolute top-1/2 -left-6 transform -translate-y-1/2 w-12 h-12 bg-gradient-to-br from-orange-500 to-orange-600 rounded-full flex items-center justify-center">
|
||
|
|
<svg className="w-6 h-6 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||
|
|
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M15.232 5.232l3.536 3.536m-2.036-5.036a2.5 2.5 0 113.536 3.536L6.5 21.036H3v-3.536L16.732 3.732z" />
|
||
|
|
</svg>
|
||
|
|
</div>
|
||
|
|
</motion.div>
|
||
|
|
|
||
|
|
{/* Skill Badges */}
|
||
|
|
<motion.div
|
||
|
|
initial={{ opacity: 0, y: 20 }}
|
||
|
|
animate={{ opacity: 1, y: 0 }}
|
||
|
|
transition={{ duration: 0.8, delay: 0.8 }}
|
||
|
|
className="absolute -bottom-16 left-1/2 transform -translate-x-1/2 flex gap-2"
|
||
|
|
>
|
||
|
|
<div className="px-3 py-1 bg-blue-500/20 text-blue-300 border border-blue-500/30 rounded-full text-sm font-manrope">
|
||
|
|
React
|
||
|
|
</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">
|
||
|
|
Node.js
|
||
|
|
</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">
|
||
|
|
Mobile
|
||
|
|
</div>
|
||
|
|
</motion.div>
|
||
|
|
</motion.div>
|
||
|
|
</div>
|
||
|
|
);
|
||
|
|
};
|