WDIPL/Wdipl-react
2
0
Fork 0
Code Issues Pull Requests 2 Actions Packages Projects Releases Wiki Activity

working on hire talent banner

Browse Source
This commit is contained in:
priyanshuvish
2025-08-07 19:49:37 +05:30
parent 95d456ca4c
commit 85bd347feb
34 changed files with 3671 additions and 868 deletions
Download Patch File Download Diff File Expand all files Collapse all files

35
pages/UIUXDesign.tsx
View File

@@ -55,7 +55,7 @@ const UIUXHeroWithCTA = () => {
/>
{/* Canonical Link */}
<link rel="canonical" href="https://www.wdipl.com/services/ui-ux-design" />
<link rel="canonical" href="https://www.wdipl.com/services/ui-ux-design" />
{/* Open Graph Tags (for Facebook, LinkedIn) */}
<meta property="og:title" content="UI/UX Design Services | Engaging Interfaces by WDI" />
@@ -596,14 +596,12 @@ const UIUXDesignProcess = () => {
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">
@@ -910,13 +908,11 @@ const DesignToolsMethodologies = () => {
Design Tools
</h3>
<div className="grid grid-cols-2 md:grid-cols-3 lg:grid-cols-6 gap-6">
{designTools.map((tool, index) => {
const IconComponent = tool.icon;
{designTools.map((tech, index) => {
const IconComponent = tech.icon;
const colorClasses = {
orange: "bg-orange-500/20 text-orange-400 border-orange-500/30",
blue: "bg-blue-500/20 text-blue-400 border-blue-500/30",
purple: "bg-purple-500/20 text-purple-400 border-purple-500/30",
yellow: "bg-yellow-500/20 text-yellow-400 border-yellow-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",
};
@@ -931,21 +927,18 @@ const DesignToolsMethodologies = () => {
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">
<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-4 ${
colorClasses[tool.color as keyof typeof colorClasses] ||
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 text-accent border-accent/30"
}`}
}`}
>
<IconComponent className="w-6 h-6" />
</div>
<h4 className="font-semibold text-foreground text-sm mb-1">
{tool.name}
<h4 className="font-semibold text-white text-sm mb-1">
{tech.name}
</h4>
<p className="text-xs text-muted-foreground">
{tool.category}
</p>
<p className="text-xs text-gray-400">{tech.category}</p>
</Card>
</motion.div>
);