working on hire talent banner
This commit is contained in:
priyanshuvish
@@ -1,4 +1,4 @@
|
||||
import { motion } from "framer-motion";
|
||||
import { color, motion } from "framer-motion";
|
||||
import {
|
||||
Activity,
|
||||
ArrowRight,
|
||||
@@ -662,14 +662,12 @@ const DevOpsProcess = () => {
|
||||
whileInView={{ opacity: 1, x: 0 }}
|
||||
transition={{ duration: 0.8, delay: index * 0.2 }}
|
||||
viewport={{ once: true }}
|
||||
className={`flex items-center ${
|
||||
isEven ? "lg:flex-row" : "lg:flex-row-reverse"
|
||||
} flex-col lg:gap-16 gap-8`}
|
||||
className={`flex items-center ${isEven ? "lg:flex-row" : "lg:flex-row-reverse"
|
||||
} flex-col lg:gap-16 gap-8`}
|
||||
>
|
||||
<div
|
||||
className={`flex-1 ${
|
||||
isEven ? "lg:text-right" : "lg:text-left"
|
||||
} text-center lg:text-left`}
|
||||
className={`flex-1 ${isEven ? "lg:text-right" : "lg:text-left"
|
||||
} text-center lg:text-left`}
|
||||
>
|
||||
<div className="bg-card/20 backdrop-blur-md rounded-2xl border border-white/10 p-8 hover:border-accent/30 transition-all duration-300 shadow-lg hover:shadow-xl">
|
||||
<div className="flex items-center gap-4 mb-4 justify-center lg:justify-start">
|
||||
@@ -927,32 +925,43 @@ const DevOpsServices = () => {
|
||||
// DevOps Tech Stack
|
||||
const DevOpsTechStack = () => {
|
||||
const cloudPlatforms = [
|
||||
{ name: "AWS", logo: awsLogo, category: "Cloud Platform" },
|
||||
{
|
||||
name: "AWS",
|
||||
logo: awsLogo, // assuming awsLogo is imported or defined above
|
||||
category: "Cloud Platform",
|
||||
color: "orange", // AWS brand color
|
||||
},
|
||||
{
|
||||
name: "Azure",
|
||||
logo: "https://cdn.jsdelivr.net/gh/devicons/devicon/icons/azure/azure-original.svg",
|
||||
category: "Cloud Platform",
|
||||
color: "blue", // Azure brand color
|
||||
},
|
||||
{
|
||||
name: "Google Cloud",
|
||||
logo: "https://cdn.jsdelivr.net/gh/devicons/devicon/icons/googlecloud/googlecloud-original.svg",
|
||||
category: "Cloud Platform",
|
||||
color: "red", // Google uses red in GCP branding (along with blue/yellow/green)
|
||||
},
|
||||
];
|
||||
|
||||
|
||||
const containerTools = [
|
||||
{
|
||||
name: "Docker",
|
||||
logo: "https://cdn.jsdelivr.net/gh/devicons/devicon/icons/docker/docker-original.svg",
|
||||
category: "Containerization",
|
||||
color: "blue", // Docker branding color
|
||||
},
|
||||
{
|
||||
name: "Kubernetes",
|
||||
logo: "https://cdn.jsdelivr.net/gh/devicons/devicon/icons/kubernetes/kubernetes-plain.svg",
|
||||
category: "Orchestration",
|
||||
color: "blue", // Kubernetes uses indigo/blue
|
||||
},
|
||||
];
|
||||
|
||||
|
||||
const cicdTools = [
|
||||
{ name: "Jenkins", icon: GitBranch, description: "Continuous Integration" },
|
||||
{ name: "GitLab CI", icon: GitCommit, description: "DevOps Platform" },
|
||||
@@ -1022,33 +1031,46 @@ const DevOpsTechStack = () => {
|
||||
Cloud Platforms
|
||||
</h3>
|
||||
<div className="grid grid-cols-3 gap-6 max-w-2xl mx-auto">
|
||||
{cloudPlatforms.map((platform, index) => (
|
||||
<motion.div
|
||||
key={index}
|
||||
initial={{ opacity: 0, y: 20 }}
|
||||
whileInView={{ opacity: 1, y: 0 }}
|
||||
transition={{ duration: 0.5, delay: index * 0.01 }}
|
||||
viewport={{ once: true }}
|
||||
whileHover={{ y: -5, scale: 1.05 }}
|
||||
className="group"
|
||||
>
|
||||
<Card className="bg-card/20 backdrop-blur-md border-white/10 hover:border-accent/30 transition-all duration-300 shadow-lg hover:shadow-xl rounded-2xl p-6 text-center">
|
||||
<div className="w-12 h-12 mx-auto mb-4 flex items-center justify-center">
|
||||
<ImageWithFallback
|
||||
src={platform.logo}
|
||||
alt={platform.name}
|
||||
className="w-10 h-10 object-contain filter brightness-0 invert dark:brightness-100 dark:invert-0 group-hover:brightness-100 group-hover:invert-0 transition-all duration-300"
|
||||
/>
|
||||
</div>
|
||||
<h4 className="font-semibold text-foreground text-sm mb-1">
|
||||
{platform.name}
|
||||
</h4>
|
||||
<p className="text-xs text-muted-foreground">
|
||||
{platform.category}
|
||||
</p>
|
||||
</Card>
|
||||
</motion.div>
|
||||
))}
|
||||
{cloudPlatforms.map((tech, index) => {
|
||||
// const IconComponent = tech.icon;
|
||||
const colorClasses = {
|
||||
blue: "bg-blue-500/20 text-blue-400 border-blue-500/30",
|
||||
orange: "bg-orange-500/20 text-orange-400 border-orange-500/30",
|
||||
green: "bg-green-500/20 text-green-400 border-green-500/30",
|
||||
red: "bg-red-500/20 text-red-400 border-red-500/30",
|
||||
};
|
||||
|
||||
return (
|
||||
<motion.div
|
||||
key={index}
|
||||
initial={{ opacity: 0, y: 20 }}
|
||||
whileInView={{ opacity: 1, y: 0 }}
|
||||
transition={{ duration: 0.5, delay: index * 0.01 }}
|
||||
viewport={{ once: true }}
|
||||
whileHover={{ y: -5, scale: 1.05 }}
|
||||
className="group"
|
||||
>
|
||||
<Card className="bg-gray-900/50 backdrop-blur-md border-gray-800 hover:border-accent/30 transition-all duration-300 shadow-lg hover:shadow-xl rounded-2xl p-4 text-center">
|
||||
<div
|
||||
className={`w-12 h-12 rounded-lg flex items-center justify-center mx-auto mb-3 ${colorClasses[tech.color as keyof typeof colorClasses] ||
|
||||
"bg-accent/20"
|
||||
}`}
|
||||
>
|
||||
<ImageWithFallback
|
||||
src={tech.logo}
|
||||
alt={tech.name}
|
||||
className="w-8 h-8 object-contain"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<h4 className="font-semibold text-white text-sm mb-1">
|
||||
{tech.name}
|
||||
</h4>
|
||||
<p className="text-xs text-gray-400">{tech.category}</p>
|
||||
</Card>
|
||||
</motion.div>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
</motion.div>
|
||||
|
||||
@@ -1064,33 +1086,46 @@ const DevOpsTechStack = () => {
|
||||
Container & Orchestration
|
||||
</h3>
|
||||
<div className="grid grid-cols-2 gap-6 max-w-xl mx-auto">
|
||||
{containerTools.map((tool, index) => (
|
||||
<motion.div
|
||||
key={index}
|
||||
initial={{ opacity: 0, y: 20 }}
|
||||
whileInView={{ opacity: 1, y: 0 }}
|
||||
transition={{ duration: 0.5, delay: index * 0.01 }}
|
||||
viewport={{ once: true }}
|
||||
whileHover={{ y: -5, scale: 1.05 }}
|
||||
className="group"
|
||||
>
|
||||
<Card className="bg-card/20 backdrop-blur-md border-white/10 hover:border-accent/30 transition-all duration-300 shadow-lg hover:shadow-xl rounded-2xl p-6 text-center">
|
||||
<div className="w-12 h-12 mx-auto mb-4 flex items-center justify-center">
|
||||
<ImageWithFallback
|
||||
src={tool.logo}
|
||||
alt={tool.name}
|
||||
className="w-10 h-10 object-contain filter brightness-0 invert dark:brightness-100 dark:invert-0 group-hover:brightness-100 group-hover:invert-0 transition-all duration-300"
|
||||
/>
|
||||
</div>
|
||||
<h4 className="font-semibold text-foreground text-sm mb-1">
|
||||
{tool.name}
|
||||
</h4>
|
||||
<p className="text-xs text-muted-foreground">
|
||||
{tool.category}
|
||||
</p>
|
||||
</Card>
|
||||
</motion.div>
|
||||
))}
|
||||
{containerTools.map((tech, index) => {
|
||||
// const IconComponent = tech.icon;
|
||||
const colorClasses = {
|
||||
blue: "bg-blue-500/20 text-blue-400 border-blue-500/30",
|
||||
orange: "bg-orange-500/20 text-orange-400 border-orange-500/30",
|
||||
green: "bg-green-500/20 text-green-400 border-green-500/30",
|
||||
red: "bg-red-500/20 text-red-400 border-red-500/30",
|
||||
};
|
||||
|
||||
return (
|
||||
<motion.div
|
||||
key={index}
|
||||
initial={{ opacity: 0, y: 20 }}
|
||||
whileInView={{ opacity: 1, y: 0 }}
|
||||
transition={{ duration: 0.5, delay: index * 0.01 }}
|
||||
viewport={{ once: true }}
|
||||
whileHover={{ y: -5, scale: 1.05 }}
|
||||
className="group"
|
||||
>
|
||||
<Card className="bg-gray-900/50 backdrop-blur-md border-gray-800 hover:border-accent/30 transition-all duration-300 shadow-lg hover:shadow-xl rounded-2xl p-4 text-center">
|
||||
<div
|
||||
className={`w-12 h-12 rounded-lg flex items-center justify-center mx-auto mb-3 ${colorClasses[tech.color as keyof typeof colorClasses] ||
|
||||
"bg-accent/20"
|
||||
}`}
|
||||
>
|
||||
<ImageWithFallback
|
||||
src={tech.logo}
|
||||
alt={tech.name}
|
||||
className="w-8 h-8 object-contain"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<h4 className="font-semibold text-white text-sm mb-1">
|
||||
{tech.name}
|
||||
</h4>
|
||||
<p className="text-xs text-gray-400">{tech.category}</p>
|
||||
</Card>
|
||||
</motion.div>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
</motion.div>
|
||||
|
||||
|
||||
Reference in New Issue
Block a user