working on hire talent banner
This commit is contained in:
priyanshuvish
212
components/HireTalentHeroBanner.tsx
Normal file
212
components/HireTalentHeroBanner.tsx
Normal file
@@ -0,0 +1,212 @@
|
||||
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>
|
||||
);
|
||||
};
|
||||
Reference in New Issue
Block a user