working on hire talent banner
This commit is contained in:
priyanshuvish
@@ -2,18 +2,26 @@ import { navigateTo } from "@/App";
|
||||
import { motion } from "framer-motion";
|
||||
import {
|
||||
ArrowRight,
|
||||
BarChart3,
|
||||
Bell,
|
||||
Brain,
|
||||
Briefcase,
|
||||
Bug,
|
||||
Building,
|
||||
Calculator,
|
||||
Calendar,
|
||||
Clock,
|
||||
Cloud,
|
||||
CloudCog,
|
||||
Code,
|
||||
Cog,
|
||||
Database,
|
||||
DollarSign,
|
||||
DownloadCloud,
|
||||
Eye,
|
||||
FileText,
|
||||
Globe,
|
||||
Layers,
|
||||
Layout,
|
||||
Monitor,
|
||||
Newspaper,
|
||||
@@ -26,6 +34,7 @@ import {
|
||||
Shield,
|
||||
ShoppingBag,
|
||||
Smartphone,
|
||||
Table,
|
||||
Target,
|
||||
TrendingUp,
|
||||
Users,
|
||||
@@ -748,44 +757,54 @@ const PWATechStack = () => {
|
||||
name: "React",
|
||||
logo: "https://cdn.jsdelivr.net/gh/devicons/devicon/icons/react/react-original.svg",
|
||||
category: "Frontend",
|
||||
color: "green",
|
||||
},
|
||||
{
|
||||
name: "Angular",
|
||||
logo: "https://cdn.jsdelivr.net/gh/devicons/devicon/icons/angularjs/angularjs-original.svg",
|
||||
category: "Frontend",
|
||||
color: "red",
|
||||
},
|
||||
{
|
||||
name: "Vue.js",
|
||||
logo: "https://cdn.jsdelivr.net/gh/devicons/devicon/icons/vuejs/vuejs-original.svg",
|
||||
category: "Frontend",
|
||||
color: "green",
|
||||
},
|
||||
{
|
||||
name: "JavaScript",
|
||||
logo: "https://cdn.jsdelivr.net/gh/devicons/devicon/icons/javascript/javascript-original.svg",
|
||||
category: "Language",
|
||||
color: "blue",
|
||||
},
|
||||
{
|
||||
name: "TypeScript",
|
||||
logo: "https://cdn.jsdelivr.net/gh/devicons/devicon/icons/typescript/typescript-original.svg",
|
||||
category: "Language",
|
||||
color: "blue",
|
||||
},
|
||||
{
|
||||
name: "HTML5",
|
||||
logo: "https://cdn.jsdelivr.net/gh/devicons/devicon/icons/html5/html5-original.svg",
|
||||
category: "Markup",
|
||||
color: "blue",
|
||||
},
|
||||
{
|
||||
name: "CSS3",
|
||||
logo: "https://cdn.jsdelivr.net/gh/devicons/devicon/icons/css3/css3-original.svg",
|
||||
category: "Styling",
|
||||
color: "blue",
|
||||
},
|
||||
{
|
||||
name: "Node.js",
|
||||
logo: "https://cdn.jsdelivr.net/gh/devicons/devicon/icons/nodejs/nodejs-original.svg",
|
||||
category: "Backend",
|
||||
color: "green",
|
||||
},
|
||||
];
|
||||
|
||||
|
||||
|
||||
const pwaFeatures = [
|
||||
{
|
||||
name: "Service Workers",
|
||||
@@ -839,43 +858,47 @@ const PWATechStack = () => {
|
||||
<h3 className="text-2xl font-semibold text-foreground mb-8 text-center">
|
||||
Core Technologies
|
||||
</h3>
|
||||
<div className="grid grid-cols-2 md:grid-cols-4 lg:grid-cols-8 gap-6">
|
||||
{technologies.map((tech, 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,
|
||||
transition: {
|
||||
type: "spring",
|
||||
damping: 10,
|
||||
stiffness: 300,
|
||||
mass: 0.5,
|
||||
},
|
||||
}}
|
||||
className="group"
|
||||
>
|
||||
<Card className="bg-card/20 backdrop-blur-md border-accent/30 transition-all duration-300 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={tech.logo}
|
||||
alt={tech.name}
|
||||
className="w-10 h-10 object-contain filter brightness-100 invert-0 transition-all duration-300"
|
||||
/>
|
||||
</div>
|
||||
<h4 className="font-semibold text-foreground text-sm mb-1">
|
||||
{tech.name}
|
||||
</h4>
|
||||
<p className="text-xs text-muted-foreground">
|
||||
{tech.category}
|
||||
</p>
|
||||
</Card>
|
||||
</motion.div>
|
||||
))}
|
||||
<div className="grid grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-6">
|
||||
{technologies.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