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,
|
||||
@@ -61,7 +61,7 @@ const APIHeroWithCTA = () => {
|
||||
/>
|
||||
|
||||
{/* Canonical Link */}
|
||||
<link rel="canonical" href="https://www.wdipl.com/services/api-backend-development" />
|
||||
<link rel="canonical" href="https://www.wdipl.com/services/api-backend-development" />
|
||||
|
||||
{/* Open Graph Tags (for Facebook, LinkedIn) */}
|
||||
<meta property="og:title" content="API & Backend Development Services | Reliable Solutions by WDI" />
|
||||
@@ -637,14 +637,12 @@ const APIProcess = () => {
|
||||
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">
|
||||
@@ -897,34 +895,41 @@ const APITechStack = () => {
|
||||
name: "Node.js",
|
||||
logo: "https://cdn.jsdelivr.net/gh/devicons/devicon/icons/nodejs/nodejs-original.svg",
|
||||
category: "Runtime",
|
||||
color: "green",
|
||||
},
|
||||
{
|
||||
name: "Python",
|
||||
logo: "https://cdn.jsdelivr.net/gh/devicons/devicon/icons/python/python-original.svg",
|
||||
category: "Language",
|
||||
color: "blue",
|
||||
},
|
||||
{
|
||||
name: "Java",
|
||||
logo: "https://cdn.jsdelivr.net/gh/devicons/devicon/icons/java/java-original.svg",
|
||||
category: "Language",
|
||||
color: "blue",
|
||||
},
|
||||
{
|
||||
name: "Ruby",
|
||||
logo: "https://cdn.jsdelivr.net/gh/devicons/devicon/icons/ruby/ruby-original.svg",
|
||||
category: "Language",
|
||||
color: "blue",
|
||||
},
|
||||
{
|
||||
name: "Go",
|
||||
logo: "https://cdn.jsdelivr.net/gh/devicons/devicon/icons/go/go-original.svg",
|
||||
category: "Language",
|
||||
color: "blue",
|
||||
},
|
||||
{
|
||||
name: "PHP",
|
||||
logo: "https://cdn.jsdelivr.net/gh/devicons/devicon/icons/php/php-original.svg",
|
||||
category: "Language",
|
||||
color: "blue",
|
||||
},
|
||||
];
|
||||
|
||||
|
||||
const frameworks = [
|
||||
{
|
||||
name: "Express.js",
|
||||
@@ -953,24 +958,29 @@ const APITechStack = () => {
|
||||
name: "PostgreSQL",
|
||||
logo: "https://cdn.jsdelivr.net/gh/devicons/devicon/icons/postgresql/postgresql-original.svg",
|
||||
category: "SQL",
|
||||
color: "blue",
|
||||
},
|
||||
{
|
||||
name: "MySQL",
|
||||
logo: "https://cdn.jsdelivr.net/gh/devicons/devicon/icons/mysql/mysql-original.svg",
|
||||
category: "SQL",
|
||||
color: "blue",
|
||||
},
|
||||
{
|
||||
name: "MongoDB",
|
||||
logo: "https://cdn.jsdelivr.net/gh/devicons/devicon/icons/mongodb/mongodb-original.svg",
|
||||
category: "NoSQL",
|
||||
color: "green",
|
||||
},
|
||||
{
|
||||
name: "Redis",
|
||||
logo: "https://cdn.jsdelivr.net/gh/devicons/devicon/icons/redis/redis-original.svg",
|
||||
category: "Cache",
|
||||
color: "orange",
|
||||
},
|
||||
];
|
||||
|
||||
|
||||
const cloudPlatforms = [
|
||||
{ name: "AWS", icon: Cloud, description: "Amazon Web Services" },
|
||||
{ name: "Azure", icon: CloudCog, description: "Microsoft Azure" },
|
||||
@@ -1022,34 +1032,47 @@ const APITechStack = () => {
|
||||
<h3 className="text-2xl font-semibold text-foreground mb-8 text-center">
|
||||
Backend Languages & Runtimes
|
||||
</h3>
|
||||
<div className="grid grid-cols-2 md:grid-cols-3 lg:grid-cols-6 gap-6">
|
||||
{backends.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 }}
|
||||
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={tech.logo}
|
||||
alt={tech.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">
|
||||
{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">
|
||||
{backends.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>
|
||||
|
||||
@@ -1105,32 +1128,47 @@ const APITechStack = () => {
|
||||
<h3 className="text-2xl font-semibold text-foreground mb-8 text-center">
|
||||
Database Technologies
|
||||
</h3>
|
||||
<div className="grid grid-cols-2 md:grid-cols-4 gap-6">
|
||||
{databases.map((db, 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-4 text-center">
|
||||
<div className="w-10 h-10 mx-auto mb-3 flex items-center justify-center">
|
||||
<ImageWithFallback
|
||||
src={db.logo}
|
||||
alt={db.name}
|
||||
className="w-8 h-8 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">
|
||||
{db.name}
|
||||
</h4>
|
||||
<p className="text-xs text-muted-foreground">{db.category}</p>
|
||||
</Card>
|
||||
</motion.div>
|
||||
))}
|
||||
<div className="grid grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-6">
|
||||
{databases.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>
|
||||
|
||||
|
||||
@@ -242,9 +242,9 @@ const WhyChooseWDISection = () => {
|
||||
// Our Impact in Numbers Section
|
||||
const ImpactNumbersSection = () => {
|
||||
const stats = [
|
||||
{ number: "200+", label: "Projects Delivered" },
|
||||
{ number: "2000+", label: "Projects Delivered" },
|
||||
{ number: "100+", label: "Expert Professionals" },
|
||||
{ number: "500+", label: "Global Clients" },
|
||||
{ number: "1000+", label: "Global Clients" },
|
||||
{ number: "24+", label: "Years of Excellence" }
|
||||
];
|
||||
|
||||
|
||||
@@ -1,4 +1,4 @@
|
||||
import { motion } from "framer-motion";
|
||||
import { color, motion } from "framer-motion";
|
||||
import {
|
||||
ArrowRight,
|
||||
BarChart,
|
||||
@@ -809,16 +809,19 @@ const AdminTechStack = () => {
|
||||
name: "React",
|
||||
logo: "https://cdn.jsdelivr.net/gh/devicons/devicon/icons/react/react-original.svg",
|
||||
category: "Frontend",
|
||||
color: "blue",
|
||||
},
|
||||
{
|
||||
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",
|
||||
},
|
||||
];
|
||||
|
||||
@@ -906,34 +909,47 @@ const AdminTechStack = () => {
|
||||
<h3 className="text-2xl font-semibold text-foreground mb-8 text-center">
|
||||
Frontend Technologies
|
||||
</h3>
|
||||
<div className="grid grid-cols-3 gap-6 max-w-2xl mx-auto">
|
||||
{frontends.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 }}
|
||||
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={tech.logo}
|
||||
alt={tech.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">
|
||||
{tech.name}
|
||||
</h4>
|
||||
<p className="text-xs text-muted-foreground">
|
||||
{tech.category}
|
||||
</p>
|
||||
</Card>
|
||||
</motion.div>
|
||||
))}
|
||||
<div className="grid grid-cols-3 gap-6 max-w-2xl mx-auto">
|
||||
{frontends.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>
|
||||
|
||||
|
||||
@@ -326,7 +326,7 @@ export const CaseStudies = () => {
|
||||
<div className="relative">
|
||||
<Search className="absolute left-3 top-1/2 transform -translate-y-1/2 text-muted-foreground w-4 h-4" />
|
||||
<Input
|
||||
placeholder="Search case studies..."
|
||||
placeholder="Search portfolios..."
|
||||
value={searchTerm}
|
||||
onChange={(e) => setSearchTerm(e.target.value)}
|
||||
className="pl-10 bg-card/50 border-white/10"
|
||||
@@ -375,7 +375,7 @@ export const CaseStudies = () => {
|
||||
{/* Results Count */}
|
||||
<div className="mt-6 text-center">
|
||||
<p className="text-muted-foreground">
|
||||
Showing {filteredCaseStudies.length} of {caseStudies.length} case studies
|
||||
Showing {filteredCaseStudies.length} of {caseStudies.length} portfolios
|
||||
</p>
|
||||
</div>
|
||||
</motion.div>
|
||||
@@ -511,7 +511,7 @@ export const CaseStudies = () => {
|
||||
navigateTo(study.link);
|
||||
}}
|
||||
>
|
||||
<span className="text-sm">View Case Study</span>
|
||||
<span className="text-sm">View Portfolio</span>
|
||||
<ArrowRight className="w-4 h-4" />
|
||||
</Button>
|
||||
</div>
|
||||
|
||||
@@ -847,46 +847,41 @@ const PrototypingTools = () => {
|
||||
viewport={{ once: true }}
|
||||
className="grid grid-cols-2 md:grid-cols-3 lg:grid-cols-6 gap-6"
|
||||
>
|
||||
{tools.map((tool, index) => {
|
||||
const IconComponent = tool.icon;
|
||||
const colorClasses = {
|
||||
orange: "bg-orange-500/20 text-orange-400 border-orange-500/30",
|
||||
purple: "bg-purple-500/20 text-purple-400 border-purple-500/30",
|
||||
blue: "bg-blue-500/20 text-blue-400 border-blue-500/30",
|
||||
pink: "bg-pink-500/20 text-pink-400 border-pink-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",
|
||||
};
|
||||
{tools.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-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 rounded-lg flex items-center justify-center mx-auto mb-4 ${
|
||||
colorClasses[tool.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>
|
||||
<p className="text-xs text-muted-foreground">
|
||||
{tool.category}
|
||||
</p>
|
||||
</Card>
|
||||
</motion.div>
|
||||
);
|
||||
})}
|
||||
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 text-accent border-accent/30"
|
||||
}`}
|
||||
>
|
||||
<IconComponent className="w-6 h-6" />
|
||||
</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>
|
||||
);
|
||||
})}
|
||||
</motion.div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
@@ -497,14 +497,12 @@ const CustomWebAppProcess = () => {
|
||||
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">
|
||||
@@ -687,54 +685,69 @@ const CustomWebAppServices = () => {
|
||||
|
||||
// Web App Tech Stack
|
||||
const WebAppTechStack = () => {
|
||||
const technologies = [
|
||||
{
|
||||
name: "React",
|
||||
logo: "https://cdn.jsdelivr.net/gh/devicons/devicon/icons/react/react-original.svg",
|
||||
category: "Frontend",
|
||||
},
|
||||
{
|
||||
name: "Angular",
|
||||
logo: "https://cdn.jsdelivr.net/gh/devicons/devicon/icons/angularjs/angularjs-original.svg",
|
||||
category: "Frontend",
|
||||
},
|
||||
{
|
||||
name: "Vue.js",
|
||||
logo: "https://cdn.jsdelivr.net/gh/devicons/devicon/icons/vuejs/vuejs-original.svg",
|
||||
category: "Frontend",
|
||||
},
|
||||
{
|
||||
name: "Node.js",
|
||||
logo: "https://cdn.jsdelivr.net/gh/devicons/devicon/icons/nodejs/nodejs-original.svg",
|
||||
category: "Backend",
|
||||
},
|
||||
{
|
||||
name: "Python",
|
||||
logo: "https://cdn.jsdelivr.net/gh/devicons/devicon/icons/python/python-original.svg",
|
||||
category: "Backend",
|
||||
},
|
||||
{
|
||||
name: "Java",
|
||||
logo: "https://cdn.jsdelivr.net/gh/devicons/devicon/icons/java/java-original.svg",
|
||||
category: "Backend",
|
||||
},
|
||||
{ name: "AWS", logo: awsLogo, category: "Cloud" },
|
||||
{
|
||||
name: "Azure",
|
||||
logo: "https://cdn.jsdelivr.net/gh/devicons/devicon/icons/azure/azure-original.svg",
|
||||
category: "Cloud",
|
||||
},
|
||||
{
|
||||
name: "PostgreSQL",
|
||||
logo: "https://cdn.jsdelivr.net/gh/devicons/devicon/icons/postgresql/postgresql-original.svg",
|
||||
category: "Database",
|
||||
},
|
||||
{
|
||||
name: "MongoDB",
|
||||
logo: "https://cdn.jsdelivr.net/gh/devicons/devicon/icons/mongodb/mongodb-original.svg",
|
||||
category: "Database",
|
||||
},
|
||||
];
|
||||
const technologies = [
|
||||
{
|
||||
name: "React",
|
||||
logo: "https://cdn.jsdelivr.net/gh/devicons/devicon/icons/react/react-original.svg",
|
||||
category: "Frontend",
|
||||
color: "blue",
|
||||
},
|
||||
{
|
||||
name: "Angular",
|
||||
logo: "https://cdn.jsdelivr.net/gh/devicons/devicon/icons/angularjs/angularjs-original.svg",
|
||||
category: "Frontend",
|
||||
color: "blue",
|
||||
},
|
||||
{
|
||||
name: "Vue.js",
|
||||
logo: "https://cdn.jsdelivr.net/gh/devicons/devicon/icons/vuejs/vuejs-original.svg",
|
||||
category: "Frontend",
|
||||
color: "blue",
|
||||
},
|
||||
{
|
||||
name: "Node.js",
|
||||
logo: "https://cdn.jsdelivr.net/gh/devicons/devicon/icons/nodejs/nodejs-original.svg",
|
||||
category: "Backend",
|
||||
color: "green",
|
||||
},
|
||||
{
|
||||
name: "Python",
|
||||
logo: "https://cdn.jsdelivr.net/gh/devicons/devicon/icons/python/python-original.svg",
|
||||
category: "Backend",
|
||||
color: "green",
|
||||
},
|
||||
{
|
||||
name: "Java",
|
||||
logo: "https://cdn.jsdelivr.net/gh/devicons/devicon/icons/java/java-original.svg",
|
||||
category: "Backend",
|
||||
color: "green",
|
||||
},
|
||||
{
|
||||
name: "AWS",
|
||||
logo: awsLogo,
|
||||
category: "Cloud",
|
||||
color: "red",
|
||||
},
|
||||
{
|
||||
name: "Azure",
|
||||
logo: "https://cdn.jsdelivr.net/gh/devicons/devicon/icons/azure/azure-original.svg",
|
||||
category: "Cloud",
|
||||
color: "orange",
|
||||
},
|
||||
{
|
||||
name: "PostgreSQL",
|
||||
logo: "https://cdn.jsdelivr.net/gh/devicons/devicon/icons/postgresql/postgresql-original.svg",
|
||||
category: "Database",
|
||||
color: "red",
|
||||
},
|
||||
{
|
||||
name: "MongoDB",
|
||||
logo: "https://cdn.jsdelivr.net/gh/devicons/devicon/icons/mongodb/mongodb-original.svg",
|
||||
category: "Database",
|
||||
color: "red",
|
||||
},
|
||||
];
|
||||
|
||||
|
||||
const frameworks = [
|
||||
{
|
||||
@@ -782,34 +795,47 @@ const WebAppTechStack = () => {
|
||||
viewport={{ once: true }}
|
||||
className="mb-16"
|
||||
>
|
||||
<div className="grid grid-cols-2 md:grid-cols-5 lg:grid-cols-5 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 }}
|
||||
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={tech.logo}
|
||||
alt={tech.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">
|
||||
{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>
|
||||
|
||||
|
||||
@@ -1,4 +1,4 @@
|
||||
import { motion } from "framer-motion";
|
||||
import { color, motion } from "framer-motion";
|
||||
import {
|
||||
Activity,
|
||||
ArrowRight,
|
||||
@@ -918,24 +918,29 @@ const EnterpriseTechStack = () => {
|
||||
name: "Java",
|
||||
logo: "https://cdn.jsdelivr.net/gh/devicons/devicon/icons/java/java-original.svg",
|
||||
category: "Language",
|
||||
color: "red", // Java: mature, robust — red often fits enterprise legacy systems
|
||||
},
|
||||
{
|
||||
name: ".NET",
|
||||
logo: "https://cdn.jsdelivr.net/gh/devicons/devicon/icons/dot-net/dot-net-original.svg",
|
||||
category: "Framework",
|
||||
color: "blue", // .NET ecosystem uses blue (Microsoft branding)
|
||||
},
|
||||
{
|
||||
name: "Python",
|
||||
logo: "https://cdn.jsdelivr.net/gh/devicons/devicon/icons/python/python-original.svg",
|
||||
category: "Language",
|
||||
color: "green", // Python often associated with versatility and learning
|
||||
},
|
||||
{
|
||||
name: "Node.js",
|
||||
logo: "https://cdn.jsdelivr.net/gh/devicons/devicon/icons/nodejs/nodejs-original.svg",
|
||||
category: "Runtime",
|
||||
color: "green", // Node.js = green (official branding & modern web dev)
|
||||
},
|
||||
];
|
||||
|
||||
|
||||
const enterprisePlatforms = [
|
||||
{ name: "SAP", icon: Factory, description: "Enterprise Resource Planning" },
|
||||
{
|
||||
@@ -956,19 +961,27 @@ const EnterpriseTechStack = () => {
|
||||
];
|
||||
|
||||
const cloudPlatforms = [
|
||||
{ name: "AWS", logo: awsLogo, category: "Cloud" },
|
||||
{
|
||||
name: "AWS",
|
||||
logo: awsLogo, // Assuming you have the AWS logo imported
|
||||
category: "Cloud",
|
||||
color: "orange", // AWS official color
|
||||
},
|
||||
{
|
||||
name: "Azure",
|
||||
logo: "https://cdn.jsdelivr.net/gh/devicons/devicon/icons/azure/azure-original.svg",
|
||||
category: "Cloud",
|
||||
color: "blue", // Azure is Microsoft — uses blue branding
|
||||
},
|
||||
{
|
||||
name: "Google Cloud",
|
||||
logo: "https://cdn.jsdelivr.net/gh/devicons/devicon/icons/googlecloud/googlecloud-original.svg",
|
||||
category: "Cloud",
|
||||
color: "red", // Red is part of Google's multi-color brand
|
||||
},
|
||||
];
|
||||
|
||||
|
||||
const enterpriseTools = [
|
||||
{ name: "Docker", icon: Container, description: "Containerization" },
|
||||
{ name: "Kubernetes", icon: Boxes, description: "Container Orchestration" },
|
||||
@@ -1014,34 +1027,47 @@ const EnterpriseTechStack = () => {
|
||||
<h3 className="text-2xl font-semibold text-foreground mb-8 text-center">
|
||||
Enterprise Languages & Frameworks
|
||||
</h3>
|
||||
<div className="grid grid-cols-2 md:grid-cols-4 gap-6">
|
||||
{enterpriseLanguages.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 }}
|
||||
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={tech.logo}
|
||||
alt={tech.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">
|
||||
{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">
|
||||
{enterpriseLanguages.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>
|
||||
|
||||
@@ -1100,33 +1126,46 @@ const EnterpriseTechStack = () => {
|
||||
Cloud Platforms
|
||||
</h3>
|
||||
<div className="grid grid-cols-3 gap-4">
|
||||
{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-4 text-center">
|
||||
<div className="w-10 h-10 mx-auto mb-3 flex items-center justify-center">
|
||||
<ImageWithFallback
|
||||
src={platform.logo}
|
||||
alt={platform.name}
|
||||
className="w-8 h-8 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>
|
||||
</div>
|
||||
|
||||
|
||||
@@ -15,9 +15,12 @@ import {
|
||||
CheckCircle,
|
||||
Star,
|
||||
Code,
|
||||
Users,
|
||||
} from "lucide-react";
|
||||
import { navigateTo } from "@/App";
|
||||
import { Helmet } from "react-helmet-async";
|
||||
import { BackendVector } from "@/components/vectors";
|
||||
import { HireTalentHeroBanner } from "@/components/HireTalentHeroBanner";
|
||||
|
||||
export const HireBackendDevelopers = () => {
|
||||
const expertise = [
|
||||
@@ -101,6 +104,24 @@ export const HireBackendDevelopers = () => {
|
||||
},
|
||||
];
|
||||
|
||||
const heroBanner = [
|
||||
{
|
||||
category: "Hire Expert Developers",
|
||||
title: "Hire Backend Developers",
|
||||
description: "Access skilled backend developers proficient in Node.js, Python, Java, .NET, and cloud technologies. Build scalable, secure server-side applications and APIs that power your business.",
|
||||
primaryCTA: {
|
||||
text: "Hire Backend Developers",
|
||||
href: "/start-a-project",
|
||||
icon: Server
|
||||
},
|
||||
secondaryCTA: {
|
||||
text: "View Developer Profiles",
|
||||
href: "/hire-talent",
|
||||
icon: Users
|
||||
}
|
||||
},
|
||||
]
|
||||
|
||||
const deliverables = [
|
||||
{
|
||||
icon: Server,
|
||||
@@ -196,41 +217,39 @@ export const HireBackendDevelopers = () => {
|
||||
<div className="dark min-h-screen bg-background">
|
||||
<Navigation />
|
||||
|
||||
{/* Hero Section */}
|
||||
<section className="relative pt-24 pb-16 overflow-hidden">
|
||||
<Helmet>
|
||||
{/* Page Title and Meta Description */}
|
||||
<title>Hire Backend Developers | Skilled Experts at WDI</title>
|
||||
<meta
|
||||
name="description"
|
||||
content="Hire Backend Developers from WDI to build secure, high-performance apps. Get expert backend talent to power your business with scalable tech solutions."
|
||||
/>
|
||||
<Helmet>
|
||||
{/* Page Title and Meta Description */}
|
||||
<title>Hire Backend Developers | Skilled Experts at WDI</title>
|
||||
<meta
|
||||
name="description"
|
||||
content="Hire Backend Developers from WDI to build secure, high-performance apps. Get expert backend talent to power your business with scalable tech solutions."
|
||||
/>
|
||||
|
||||
{/* Canonical Link */}
|
||||
<link rel="canonical" href="https://www.wdipl.com/hire-talent/backend-developers" />
|
||||
{/* Canonical Link */}
|
||||
<link rel="canonical" href="https://www.wdipl.com/hire-talent/backend-developers" />
|
||||
|
||||
{/* Open Graph Tags (for Facebook, LinkedIn) */}
|
||||
<meta property="og:title" content="Hire Backend Developers | Skilled Experts at WDI" />
|
||||
<meta
|
||||
property="og:description"
|
||||
content="Hire Backend Developers from WDI to build secure, high-performance apps. Get expert backend talent to power your business with scalable tech solutions."
|
||||
/>
|
||||
<meta property="og:url" content="https://www.wdipl.com/services" />
|
||||
<meta property="og:type" content="website" />
|
||||
<meta property="og:image" content="https://www.wdipl.com/your-preview-image.jpg" />
|
||||
{/* Open Graph Tags (for Facebook, LinkedIn) */}
|
||||
<meta property="og:title" content="Hire Backend Developers | Skilled Experts at WDI" />
|
||||
<meta
|
||||
property="og:description"
|
||||
content="Hire Backend Developers from WDI to build secure, high-performance apps. Get expert backend talent to power your business with scalable tech solutions."
|
||||
/>
|
||||
<meta property="og:url" content="https://www.wdipl.com/services" />
|
||||
<meta property="og:type" content="website" />
|
||||
<meta property="og:image" content="https://www.wdipl.com/your-preview-image.jpg" />
|
||||
|
||||
{/* Twitter Card Tags */}
|
||||
<meta name="twitter:card" content="summary_large_image" />
|
||||
<meta name="twitter:title" content="Hire Backend Developers | Skilled Experts at WDI" />
|
||||
<meta
|
||||
name="twitter:description"
|
||||
content="Hire Backend Developers from WDI to build secure, high-performance apps. Get expert backend talent to power your business with scalable tech solutions."
|
||||
/>
|
||||
<meta name="twitter:image" content="https://www.wdipl.com/your-preview-image.jpg" />
|
||||
{/* Twitter Card Tags */}
|
||||
<meta name="twitter:card" content="summary_large_image" />
|
||||
<meta name="twitter:title" content="Hire Backend Developers | Skilled Experts at WDI" />
|
||||
<meta
|
||||
name="twitter:description"
|
||||
content="Hire Backend Developers from WDI to build secure, high-performance apps. Get expert backend talent to power your business with scalable tech solutions."
|
||||
/>
|
||||
<meta name="twitter:image" content="https://www.wdipl.com/your-preview-image.jpg" />
|
||||
|
||||
{/* Social Profiles (using JSON-LD Schema) */}
|
||||
<script type="application/ld+json">
|
||||
{`
|
||||
{/* Social Profiles (using JSON-LD Schema) */}
|
||||
<script type="application/ld+json">
|
||||
{`
|
||||
{
|
||||
"@context": "https://schema.org",
|
||||
"@type": "Organization",
|
||||
@@ -243,54 +262,18 @@ export const HireBackendDevelopers = () => {
|
||||
]
|
||||
}
|
||||
`}
|
||||
</script>
|
||||
</Helmet>
|
||||
<div className="absolute inset-0 bg-gradient-to-br from-[#E5195E]/10 via-background to-background" />
|
||||
<div
|
||||
className="absolute inset-0 opacity-30"
|
||||
style={{
|
||||
backgroundImage: `radial-gradient(circle at 1px 1px, rgba(255,255,255,0.15) 1px, transparent 0)`,
|
||||
backgroundSize: "40px 40px",
|
||||
}}
|
||||
/>
|
||||
</script>
|
||||
</Helmet>
|
||||
|
||||
<div className="relative container mx-auto px-6 lg:px-8">
|
||||
<div className="max-w-4xl mx-auto text-center">
|
||||
<Badge
|
||||
variant="outline"
|
||||
className="mb-6 border-[#E5195E]/20 text-[#E5195E]"
|
||||
>
|
||||
Building Robust Server-Side Solutions
|
||||
</Badge>
|
||||
<h1 className="text-4xl md:text-6xl lg:text-7xl font-bold mb-6 bg-gradient-to-r from-white via-white to-white/80 bg-clip-text text-transparent">
|
||||
Hire Backend Developers: Powering Your Applications with
|
||||
<span className="bg-gradient-to-r from-[#E5195E] to-[#FF6B9D] bg-clip-text text-transparent">
|
||||
{" "}
|
||||
Robust Foundations
|
||||
</span>
|
||||
</h1>
|
||||
<p className="text-lg md:text-xl text-muted-foreground mb-8 max-w-3xl mx-auto leading-relaxed">
|
||||
The true power of any digital product lies in its robust and
|
||||
scalable backend. WDI provides expert backend developers who
|
||||
specialize in building the secure, efficient, and reliable
|
||||
server-side infrastructure that underpins your applications.
|
||||
</p>
|
||||
<div className="flex flex-col sm:flex-row gap-4 justify-center">
|
||||
<Button
|
||||
size="lg"
|
||||
className="bg-[#E5195E] hover:bg-[#E5195E]/90 text-white"
|
||||
onClick={() => navigateTo("/start-a-project")}
|
||||
>
|
||||
Connect with Backend Experts
|
||||
<ArrowRight className="ml-2 w-4 h-4" />
|
||||
</Button>
|
||||
{/* <Button size="lg" variant="outline" className="border-white/20 text-white hover:bg-white/10">
|
||||
Request a Technical Assessment
|
||||
</Button> */}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
{/* Hero Section */}
|
||||
<HireTalentHeroBanner
|
||||
vectorComponent={BackendVector}
|
||||
category={heroBanner[0].category}
|
||||
title={heroBanner[0].title}
|
||||
description={heroBanner[0].description}
|
||||
primaryCTA={heroBanner[0].primaryCTA}
|
||||
secondaryCTA={heroBanner[0].secondaryCTA}
|
||||
/>
|
||||
|
||||
{/* Introduction */}
|
||||
<section className="py-16 bg-card/50">
|
||||
|
||||
@@ -18,6 +18,8 @@ import {
|
||||
} from "lucide-react";
|
||||
import { navigateTo } from "@/App";
|
||||
import { Helmet } from "react-helmet-async";
|
||||
import { FrontendVector } from "@/components/vectors";
|
||||
import { HireTalentHeroBanner } from "@/components/HireTalentHeroBanner";
|
||||
|
||||
export const HireFrontendDevelopers = () => {
|
||||
const expertise = [
|
||||
@@ -73,6 +75,23 @@ export const HireFrontendDevelopers = () => {
|
||||
},
|
||||
];
|
||||
|
||||
const heroBanner = [
|
||||
{
|
||||
category: "Hire Expert Developers",
|
||||
title: "Hire Frontend Developers",
|
||||
description: "Get access to expert frontend developers skilled in React, Vue, Angular, and modern web technologies. Create stunning, responsive user interfaces that deliver exceptional user experiences.",
|
||||
primaryCTA: {
|
||||
text: "Hire Frontend Developers",
|
||||
href: "/start-a-project",
|
||||
icon: Monitor
|
||||
},
|
||||
secondaryCTA: {
|
||||
text: "View Developer Profiles",
|
||||
href: "/hire-talent",
|
||||
icon: Users
|
||||
}
|
||||
},
|
||||
]
|
||||
const deliverables = [
|
||||
{
|
||||
icon: Target,
|
||||
@@ -131,9 +150,7 @@ export const HireFrontendDevelopers = () => {
|
||||
<div className="dark min-h-screen bg-background">
|
||||
<Navigation />
|
||||
|
||||
{/* Hero Section */}
|
||||
<section className="relative pt-24 pb-16 overflow-hidden">
|
||||
<Helmet>
|
||||
<Helmet>
|
||||
{/* Page Title and Meta Description */}
|
||||
<title>Hire Frontend Developers | Skilled Talent at WDI</title>
|
||||
<meta
|
||||
@@ -180,52 +197,17 @@ export const HireFrontendDevelopers = () => {
|
||||
`}
|
||||
</script>
|
||||
</Helmet>
|
||||
<div className="absolute inset-0 bg-gradient-to-br from-[#E5195E]/10 via-background to-background" />
|
||||
<div
|
||||
className="absolute inset-0 opacity-30"
|
||||
style={{
|
||||
backgroundImage: `radial-gradient(circle at 1px 1px, rgba(255,255,255,0.15) 1px, transparent 0)`,
|
||||
backgroundSize: "40px 40px",
|
||||
}}
|
||||
/>
|
||||
|
||||
<div className="relative container mx-auto px-6 lg:px-8">
|
||||
<div className="max-w-4xl mx-auto text-center">
|
||||
<Badge
|
||||
variant="outline"
|
||||
className="mb-6 border-[#E5195E]/20 text-[#E5195E]"
|
||||
>
|
||||
Crafting Engaging User Experiences
|
||||
</Badge>
|
||||
<h1 className="text-4xl md:text-6xl lg:text-7xl font-bold mb-6 bg-gradient-to-r from-white via-white to-white/80 bg-clip-text text-transparent">
|
||||
Hire Frontend Developers: Crafting Intuitive and
|
||||
<span className="bg-gradient-to-r from-[#E5195E] to-[#FF6B9D] bg-clip-text text-transparent">
|
||||
{" "}
|
||||
Engaging User Experiences
|
||||
</span>
|
||||
</h1>
|
||||
<p className="text-lg md:text-xl text-muted-foreground mb-8 max-w-3xl mx-auto leading-relaxed">
|
||||
The user interface is the face of your digital product. WDI offers
|
||||
highly skilled frontend developers who excel at transforming
|
||||
designs into interactive, responsive, and aesthetically pleasing
|
||||
web experiences.
|
||||
</p>
|
||||
<div className="flex flex-col sm:flex-row gap-4 justify-center">
|
||||
<Button
|
||||
size="lg"
|
||||
className="bg-[#E5195E] hover:bg-[#E5195E]/90 text-white"
|
||||
onClick={() => navigateTo("/start-a-project")}
|
||||
>
|
||||
Find Your Frontend Specialist
|
||||
<ArrowRight className="ml-2 w-4 h-4" />
|
||||
</Button>
|
||||
{/* <Button size="lg" variant="outline" className="border-white/20 text-white hover:bg-white/10">
|
||||
Discuss Your UI Needs
|
||||
</Button> */}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
{/* Hero Section */}
|
||||
|
||||
<HireTalentHeroBanner
|
||||
vectorComponent={FrontendVector}
|
||||
category={heroBanner[0].category}
|
||||
title={heroBanner[0].title}
|
||||
description={heroBanner[0].description}
|
||||
primaryCTA={heroBanner[0].primaryCTA}
|
||||
secondaryCTA={heroBanner[0].secondaryCTA}
|
||||
/>
|
||||
|
||||
{/* Introduction */}
|
||||
<section className="py-16 bg-card/50">
|
||||
|
||||
@@ -16,9 +16,12 @@ import {
|
||||
Target,
|
||||
CheckCircle,
|
||||
Star,
|
||||
Layers,
|
||||
} from "lucide-react";
|
||||
import { navigateTo } from "@/App";
|
||||
import { Helmet } from "react-helmet-async";
|
||||
import { HireTalentHeroBanner } from "@/components/HireTalentHeroBanner";
|
||||
import { DeveloperSkillsVector } from "@/components/vectors";
|
||||
|
||||
export const HireFullStackDevelopers = () => {
|
||||
const expertise = [
|
||||
@@ -54,6 +57,24 @@ export const HireFullStackDevelopers = () => {
|
||||
},
|
||||
];
|
||||
|
||||
const heroBanner = [
|
||||
{
|
||||
category: "Hire Expert Developers",
|
||||
title: "Hire Full Stack Developers",
|
||||
description: "Access skilled full stack developers proficient in modern frontend and backend technologies. Build complete web applications from database to user interface with seamless integration.",
|
||||
primaryCTA: {
|
||||
text: "Hire Full Stack Developers",
|
||||
href: "/start-a-project",
|
||||
icon: Layers
|
||||
},
|
||||
secondaryCTA: {
|
||||
text: "View Developer Profiles",
|
||||
href: "/hire-talent",
|
||||
icon: Users
|
||||
}
|
||||
},
|
||||
]
|
||||
|
||||
const benefits = [
|
||||
{
|
||||
icon: Users,
|
||||
@@ -138,41 +159,39 @@ export const HireFullStackDevelopers = () => {
|
||||
<div className="dark min-h-screen bg-background">
|
||||
<Navigation />
|
||||
|
||||
{/* Hero Section */}
|
||||
<section className="relative pt-24 pb-16 overflow-hidden">
|
||||
<Helmet>
|
||||
{/* Page Title and Meta Description */}
|
||||
<title>Hire Full Stack Developers from WDI | Expert Web Solutions</title>
|
||||
<meta
|
||||
name="description"
|
||||
content="Hire skilled full stack developers from WDI for seamless front-end and back-end solutions. Get dedicated experts to build scalable, efficient web and mobile apps."
|
||||
/>
|
||||
<Helmet>
|
||||
{/* Page Title and Meta Description */}
|
||||
<title>Hire Full Stack Developers from WDI | Expert Web Solutions</title>
|
||||
<meta
|
||||
name="description"
|
||||
content="Hire skilled full stack developers from WDI for seamless front-end and back-end solutions. Get dedicated experts to build scalable, efficient web and mobile apps."
|
||||
/>
|
||||
|
||||
{/* Canonical Link */}
|
||||
<link rel="canonical" href="https://www.wdipl.com/hire-talent/full-stack-developers" />
|
||||
{/* Canonical Link */}
|
||||
<link rel="canonical" href="https://www.wdipl.com/hire-talent/full-stack-developers" />
|
||||
|
||||
{/* Open Graph Tags (for Facebook, LinkedIn) */}
|
||||
<meta property="og:title" content="Hire Full Stack Developers from WDI | Expert Web Solutions" />
|
||||
<meta
|
||||
property="og:description"
|
||||
content="Hire skilled full stack developers from WDI for seamless front-end and back-end solutions. Get dedicated experts to build scalable, efficient web and mobile apps."
|
||||
/>
|
||||
<meta property="og:url" content="https://www.wdipl.com/services" />
|
||||
<meta property="og:type" content="website" />
|
||||
<meta property="og:image" content="https://www.wdipl.com/your-preview-image.jpg" />
|
||||
{/* Open Graph Tags (for Facebook, LinkedIn) */}
|
||||
<meta property="og:title" content="Hire Full Stack Developers from WDI | Expert Web Solutions" />
|
||||
<meta
|
||||
property="og:description"
|
||||
content="Hire skilled full stack developers from WDI for seamless front-end and back-end solutions. Get dedicated experts to build scalable, efficient web and mobile apps."
|
||||
/>
|
||||
<meta property="og:url" content="https://www.wdipl.com/services" />
|
||||
<meta property="og:type" content="website" />
|
||||
<meta property="og:image" content="https://www.wdipl.com/your-preview-image.jpg" />
|
||||
|
||||
{/* Twitter Card Tags */}
|
||||
<meta name="twitter:card" content="summary_large_image" />
|
||||
<meta name="twitter:title" content="Hire Full Stack Developers from WDI | Expert Web Solutions" />
|
||||
<meta
|
||||
name="twitter:description"
|
||||
content="Hire skilled full stack developers from WDI for seamless front-end and back-end solutions. Get dedicated experts to build scalable, efficient web and mobile apps."
|
||||
/>
|
||||
<meta name="twitter:image" content="https://www.wdipl.com/your-preview-image.jpg" />
|
||||
{/* Twitter Card Tags */}
|
||||
<meta name="twitter:card" content="summary_large_image" />
|
||||
<meta name="twitter:title" content="Hire Full Stack Developers from WDI | Expert Web Solutions" />
|
||||
<meta
|
||||
name="twitter:description"
|
||||
content="Hire skilled full stack developers from WDI for seamless front-end and back-end solutions. Get dedicated experts to build scalable, efficient web and mobile apps."
|
||||
/>
|
||||
<meta name="twitter:image" content="https://www.wdipl.com/your-preview-image.jpg" />
|
||||
|
||||
{/* Social Profiles (using JSON-LD Schema) */}
|
||||
<script type="application/ld+json">
|
||||
{`
|
||||
{/* Social Profiles (using JSON-LD Schema) */}
|
||||
<script type="application/ld+json">
|
||||
{`
|
||||
{
|
||||
"@context": "https://schema.org",
|
||||
"@type": "Organization",
|
||||
@@ -185,54 +204,19 @@ export const HireFullStackDevelopers = () => {
|
||||
]
|
||||
}
|
||||
`}
|
||||
</script>
|
||||
</Helmet>
|
||||
<div className="absolute inset-0 bg-gradient-to-br from-[#E5195E]/10 via-background to-background" />
|
||||
<div
|
||||
className="absolute inset-0 opacity-30"
|
||||
style={{
|
||||
backgroundImage: `radial-gradient(circle at 1px 1px, rgba(255,255,255,0.15) 1px, transparent 0)`,
|
||||
backgroundSize: "40px 40px",
|
||||
}}
|
||||
/>
|
||||
</script>
|
||||
</Helmet>
|
||||
|
||||
<div className="relative container mx-auto px-6 lg:px-8">
|
||||
<div className="max-w-4xl mx-auto text-center">
|
||||
<Badge
|
||||
variant="outline"
|
||||
className="mb-6 border-[#E5195E]/20 text-[#E5195E]"
|
||||
>
|
||||
End-to-End Development Experts
|
||||
</Badge>
|
||||
<h1 className="text-4xl md:text-6xl lg:text-7xl font-bold mb-6 bg-gradient-to-r from-white via-white to-white/80 bg-clip-text text-transparent">
|
||||
Hire Full Stack Developers: Comprehensive Solutions from
|
||||
<span className="bg-gradient-to-r from-[#E5195E] to-[#FF6B9D] bg-clip-text text-transparent">
|
||||
{" "}
|
||||
Front to Back
|
||||
</span>
|
||||
</h1>
|
||||
<p className="text-lg md:text-xl text-muted-foreground mb-8 max-w-3xl mx-auto leading-relaxed">
|
||||
For end-to-end project execution and a streamlined development
|
||||
process, full stack developers are invaluable. WDI provides highly
|
||||
skilled full stack professionals capable of handling every aspect
|
||||
of your web application.
|
||||
</p>
|
||||
<div className="flex flex-col sm:flex-row gap-4 justify-center">
|
||||
<Button
|
||||
size="lg"
|
||||
className="bg-[#E5195E] hover:bg-[#E5195E]/90 text-white"
|
||||
onClick={() => navigateTo("/start-a-project")}
|
||||
>
|
||||
Find Your Full Stack Expert
|
||||
<ArrowRight className="ml-2 w-4 h-4" />
|
||||
</Button>
|
||||
{/* <Button size="lg" variant="outline" className="border-white/20 text-white hover:bg-white/10">
|
||||
Get a Quote for Full Stack Development
|
||||
</Button> */}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
{/* Hero Section */}
|
||||
|
||||
<HireTalentHeroBanner
|
||||
vectorComponent={DeveloperSkillsVector}
|
||||
category={heroBanner[0].category}
|
||||
title={heroBanner[0].title}
|
||||
description={heroBanner[0].description}
|
||||
primaryCTA={heroBanner[0].primaryCTA}
|
||||
secondaryCTA={heroBanner[0].secondaryCTA}
|
||||
/>
|
||||
|
||||
{/* Introduction */}
|
||||
<section className="py-16 bg-card/50">
|
||||
|
||||
@@ -7,6 +7,8 @@ import { Card, CardContent } from "../components/ui/card";
|
||||
import { ArrowRight, Smartphone, Apple, Code, Zap, Shield, Target, Users, CheckCircle, Star } from "lucide-react";
|
||||
import { navigateTo } from "@/App";
|
||||
import { Helmet } from "react-helmet-async";
|
||||
import { HireTalentHeroBanner } from "@/components/HireTalentHeroBanner";
|
||||
import { MobileAppVector } from "@/components/vectors";
|
||||
|
||||
export const HireMobileAppDevelopers = () => {
|
||||
const expertise = [
|
||||
@@ -69,6 +71,24 @@ export const HireMobileAppDevelopers = () => {
|
||||
}
|
||||
];
|
||||
|
||||
const heroBanner = [
|
||||
{
|
||||
category: "Hire Expert Developers",
|
||||
title: "Hire Mobile App Developers",
|
||||
description: "Get access to top-tier mobile app developers specialized in iOS, Android, React Native, and Flutter. Build engaging, high-performance mobile applications that users love.",
|
||||
primaryCTA: {
|
||||
text: "Hire Mobile Developers",
|
||||
href: "/start-a-project",
|
||||
icon: Smartphone
|
||||
},
|
||||
secondaryCTA: {
|
||||
text: "View Developer Profiles",
|
||||
href: "/hire-talent",
|
||||
icon: Users
|
||||
}
|
||||
},
|
||||
]
|
||||
|
||||
const projectTypes = [
|
||||
"E-commerce & Retail Apps",
|
||||
"On-Demand Services & Delivery Apps",
|
||||
@@ -96,42 +116,39 @@ export const HireMobileAppDevelopers = () => {
|
||||
return (
|
||||
<div className="dark min-h-screen bg-background">
|
||||
<Navigation />
|
||||
|
||||
{/* Hero Section */}
|
||||
<section className="relative pt-24 pb-16 overflow-hidden">
|
||||
<Helmet>
|
||||
{/* Page Title and Meta Description */}
|
||||
<title>Hire Mobile App Developers | Expert Talent at WDI</title>
|
||||
<meta
|
||||
name="description"
|
||||
content="Hire skilled mobile app developers from WDI to build powerful, scalable apps. Get expert developers for iOS, Android, and cross-platform solutions tailored to your needs."
|
||||
/>
|
||||
<Helmet>
|
||||
{/* Page Title and Meta Description */}
|
||||
<title>Hire Mobile App Developers | Expert Talent at WDI</title>
|
||||
<meta
|
||||
name="description"
|
||||
content="Hire skilled mobile app developers from WDI to build powerful, scalable apps. Get expert developers for iOS, Android, and cross-platform solutions tailored to your needs."
|
||||
/>
|
||||
|
||||
{/* Canonical Link */}
|
||||
<link rel="canonical" href="https://www.wdipl.com/services" />
|
||||
{/* Canonical Link */}
|
||||
<link rel="canonical" href="https://www.wdipl.com/services" />
|
||||
|
||||
{/* Open Graph Tags (for Facebook, LinkedIn) */}
|
||||
<meta property="og:title" content="Hire Mobile App Developers | Expert Talent at WDI" />
|
||||
<meta
|
||||
property="og:description"
|
||||
content="Hire skilled mobile app developers from WDI to build powerful, scalable apps. Get expert developers for iOS, Android, and cross-platform solutions tailored to your needs."
|
||||
/>
|
||||
<meta property="og:url" content="https://www.wdipl.com/services" />
|
||||
<meta property="og:type" content="website" />
|
||||
<meta property="og:image" content="https://www.wdipl.com/your-preview-image.jpg" />
|
||||
{/* Open Graph Tags (for Facebook, LinkedIn) */}
|
||||
<meta property="og:title" content="Hire Mobile App Developers | Expert Talent at WDI" />
|
||||
<meta
|
||||
property="og:description"
|
||||
content="Hire skilled mobile app developers from WDI to build powerful, scalable apps. Get expert developers for iOS, Android, and cross-platform solutions tailored to your needs."
|
||||
/>
|
||||
<meta property="og:url" content="https://www.wdipl.com/services" />
|
||||
<meta property="og:type" content="website" />
|
||||
<meta property="og:image" content="https://www.wdipl.com/your-preview-image.jpg" />
|
||||
|
||||
{/* Twitter Card Tags */}
|
||||
<meta name="twitter:card" content="summary_large_image" />
|
||||
<meta name="twitter:title" content="Hire Mobile App Developers | Expert Talent at WDI" />
|
||||
<meta
|
||||
name="twitter:description"
|
||||
content="Hire skilled mobile app developers from WDI to build powerful, scalable apps. Get expert developers for iOS, Android, and cross-platform solutions tailored to your needs."
|
||||
/>
|
||||
<meta name="twitter:image" content="https://www.wdipl.com/your-preview-image.jpg" />
|
||||
{/* Twitter Card Tags */}
|
||||
<meta name="twitter:card" content="summary_large_image" />
|
||||
<meta name="twitter:title" content="Hire Mobile App Developers | Expert Talent at WDI" />
|
||||
<meta
|
||||
name="twitter:description"
|
||||
content="Hire skilled mobile app developers from WDI to build powerful, scalable apps. Get expert developers for iOS, Android, and cross-platform solutions tailored to your needs."
|
||||
/>
|
||||
<meta name="twitter:image" content="https://www.wdipl.com/your-preview-image.jpg" />
|
||||
|
||||
{/* Social Profiles (using JSON-LD Schema) */}
|
||||
<script type="application/ld+json">
|
||||
{`
|
||||
{/* Social Profiles (using JSON-LD Schema) */}
|
||||
<script type="application/ld+json">
|
||||
{`
|
||||
{
|
||||
"@context": "https://schema.org",
|
||||
"@type": "Organization",
|
||||
@@ -144,43 +161,17 @@ export const HireMobileAppDevelopers = () => {
|
||||
]
|
||||
}
|
||||
`}
|
||||
</script>
|
||||
</Helmet>
|
||||
<div className="absolute inset-0 bg-gradient-to-br from-[#E5195E]/10 via-background to-background" />
|
||||
<div
|
||||
className="absolute inset-0 opacity-30"
|
||||
style={{
|
||||
backgroundImage: `radial-gradient(circle at 1px 1px, rgba(255,255,255,0.15) 1px, transparent 0)`,
|
||||
backgroundSize: '40px 40px'
|
||||
}}
|
||||
/>
|
||||
|
||||
<div className="relative container mx-auto px-6 lg:px-8">
|
||||
<div className="max-w-4xl mx-auto text-center">
|
||||
<Badge variant="outline" className="mb-6 border-[#E5195E]/20 text-[#E5195E]">
|
||||
iOS & Android Experts
|
||||
</Badge>
|
||||
<h1 className="text-4xl md:text-6xl lg:text-7xl font-bold mb-6 bg-gradient-to-r from-white via-white to-white/80 bg-clip-text text-transparent">
|
||||
Hire Mobile App Developers: Bring Your Ideas to Life on
|
||||
<span className="bg-gradient-to-r from-[#E5195E] to-[#FF6B9D] bg-clip-text text-transparent"> Any Device</span>
|
||||
</h1>
|
||||
<p className="text-lg md:text-xl text-muted-foreground mb-8 max-w-3xl mx-auto leading-relaxed">
|
||||
Need a captivating and high-performing mobile application? WDI connects you with expert mobile app developers proficient in creating native iOS and Android experiences, as well as efficient cross-platform solutions.
|
||||
</p>
|
||||
<div className="flex flex-col sm:flex-row gap-4 justify-center">
|
||||
<Button size="lg" className="bg-[#E5195E] hover:bg-[#E5195E]/90 text-white"
|
||||
onClick={() => navigateTo("/start-a-project")}
|
||||
>
|
||||
Get a Free Consultation for Mobile Developers
|
||||
<ArrowRight className="ml-2 w-4 h-4" />
|
||||
</Button>
|
||||
{/* <Button size="lg" variant="outline" className="border-white/20 text-white hover:bg-white/10">
|
||||
View Developer Profiles
|
||||
</Button> */}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</script>
|
||||
</Helmet>
|
||||
{/* Hero Section with MobileAppVector */}
|
||||
<HireTalentHeroBanner
|
||||
vectorComponent={MobileAppVector}
|
||||
category={heroBanner[0].category}
|
||||
title={heroBanner[0].title}
|
||||
description={heroBanner[0].description}
|
||||
primaryCTA={heroBanner[0].primaryCTA}
|
||||
secondaryCTA={heroBanner[0].secondaryCTA}
|
||||
/>
|
||||
|
||||
{/* Introduction */}
|
||||
<section className="py-16 bg-card/50">
|
||||
@@ -204,21 +195,21 @@ export const HireMobileAppDevelopers = () => {
|
||||
Comprehensive mobile development skills across all major platforms and frameworks
|
||||
</p>
|
||||
</div>
|
||||
|
||||
|
||||
<div className="grid md:grid-cols-2 gap-8">
|
||||
{expertise.map((area, index) => (
|
||||
<Card key={index} className="bg-card/50 border-white/10 hover:border-[#E5195E]/30 transition-all duration-300 group">
|
||||
<CardContent className="p-8">
|
||||
<area.icon className="w-12 h-12 text-[#E5195E] mb-6 group-hover:scale-110 transition-transform duration-300" />
|
||||
|
||||
|
||||
<h3 className="text-xl font-bold text-white mb-4 group-hover:text-[#E5195E] transition-colors duration-300">
|
||||
{area.title}
|
||||
</h3>
|
||||
|
||||
|
||||
<p className="text-muted-foreground mb-6 leading-relaxed">
|
||||
{area.description}
|
||||
</p>
|
||||
|
||||
|
||||
<div className="flex flex-wrap gap-2">
|
||||
{area.skills.map((skill, skillIndex) => (
|
||||
<Badge key={skillIndex} variant="outline" className="border-white/20 text-white text-xs">
|
||||
@@ -244,7 +235,7 @@ export const HireMobileAppDevelopers = () => {
|
||||
Comprehensive mobile solutions that exceed expectations
|
||||
</p>
|
||||
</div>
|
||||
|
||||
|
||||
<div className="grid md:grid-cols-2 lg:grid-cols-3 gap-8">
|
||||
{deliverables.map((item, index) => (
|
||||
<Card key={index} className="bg-background/50 border-white/10 hover:border-[#E5195E]/30 transition-all duration-300 group">
|
||||
@@ -274,7 +265,7 @@ export const HireMobileAppDevelopers = () => {
|
||||
Our mobile developers excel across various industry verticals
|
||||
</p>
|
||||
</div>
|
||||
|
||||
|
||||
<div className="grid md:grid-cols-2 lg:grid-cols-3 gap-6 max-w-4xl mx-auto">
|
||||
{projectTypes.map((project, index) => (
|
||||
<div key={index} className="flex items-center gap-3 p-4 rounded-lg bg-card/50 border border-white/10 hover:border-[#E5195E]/30 transition-all duration-300">
|
||||
@@ -335,7 +326,7 @@ export const HireMobileAppDevelopers = () => {
|
||||
</p>
|
||||
<div className="flex flex-col sm:flex-row gap-4 justify-center">
|
||||
<Button size="lg" className="bg-[#E5195E] hover:bg-[#E5195E]/90 text-white"
|
||||
onClick={() => navigateTo("/start-a-project")}
|
||||
onClick={() => navigateTo("/start-a-project")}
|
||||
>
|
||||
Get Started Today
|
||||
<ArrowRight className="ml-2 w-4 h-4" />
|
||||
|
||||
@@ -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>
|
||||
|
||||
|
||||
@@ -60,7 +60,7 @@ const ModernizationHeroWithCTA = () => {
|
||||
/>
|
||||
|
||||
{/* Canonical Link */}
|
||||
<link rel="canonical" href="https://www.wdipl.com/services/product-modernization" />
|
||||
<link rel="canonical" href="https://www.wdipl.com/services/product-modernization" />
|
||||
|
||||
{/* Open Graph Tags (for Facebook, LinkedIn) */}
|
||||
<meta property="og:title" content="Product Modernization That Revives Legacy Systems | WDI" />
|
||||
@@ -871,16 +871,23 @@ const ModernizationTechStack = () => {
|
||||
];
|
||||
|
||||
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)
|
||||
},
|
||||
];
|
||||
|
||||
@@ -1011,33 +1018,46 @@ const ModernizationTechStack = () => {
|
||||
Cloud Migration Targets
|
||||
</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>
|
||||
</div>
|
||||
|
||||
@@ -532,14 +532,12 @@ const SaaSProcess = () => {
|
||||
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">
|
||||
@@ -786,16 +784,23 @@ const SaaSServices = () => {
|
||||
// SaaS Tech Stack
|
||||
const SaaSTechStack = () => {
|
||||
const cloudPlatforms = [
|
||||
{ name: "AWS", logo: awsLogo, category: "Cloud Platform" },
|
||||
{
|
||||
name: "AWS",
|
||||
logo: awsLogo,
|
||||
category: "Cloud Platform",
|
||||
color: "red",
|
||||
},
|
||||
{
|
||||
name: "Azure",
|
||||
logo: "https://cdn.jsdelivr.net/gh/devicons/devicon/icons/azure/azure-original.svg",
|
||||
category: "Cloud Platform",
|
||||
color: "green",
|
||||
},
|
||||
{
|
||||
name: "Google Cloud",
|
||||
logo: "https://cdn.jsdelivr.net/gh/devicons/devicon/icons/googlecloud/googlecloud-original.svg",
|
||||
category: "Cloud Platform",
|
||||
color: "blue",
|
||||
},
|
||||
];
|
||||
|
||||
@@ -925,33 +930,46 @@ const SaaSTechStack = () => {
|
||||
Cloud Platforms
|
||||
</h3>
|
||||
<div className="grid grid-cols-3 gap-6 max-w-2xl mx-auto">
|
||||
{cloudPlatforms.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 }}
|
||||
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={tech.logo}
|
||||
alt={tech.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">
|
||||
{tech.name}
|
||||
</h4>
|
||||
<p className="text-xs text-muted-foreground">
|
||||
{tech.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>
|
||||
|
||||
|
||||
@@ -1299,7 +1299,6 @@ export const StartAProject = () => {
|
||||
<WhyPartnerSection />
|
||||
<JoinWDISection />
|
||||
<ContactInfoSection />
|
||||
<GlobalOffices />
|
||||
<Footer />
|
||||
</div>
|
||||
);
|
||||
|
||||
@@ -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>
|
||||
|
||||
|
||||
@@ -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>
|
||||
);
|
||||
|
||||
@@ -945,31 +945,37 @@ const WearableTechStack = () => {
|
||||
name: "Wear OS",
|
||||
logo: "https://cdn.jsdelivr.net/gh/devicons/devicon/icons/android/android-original.svg",
|
||||
category: "Wearable Platform",
|
||||
color: "green",
|
||||
},
|
||||
{
|
||||
name: "watchOS",
|
||||
logo: "https://cdn.jsdelivr.net/gh/devicons/devicon/icons/apple/apple-original.svg",
|
||||
category: "Wearable Platform",
|
||||
color: "red",
|
||||
},
|
||||
{
|
||||
name: "Swift",
|
||||
logo: "https://cdn.jsdelivr.net/gh/devicons/devicon/icons/swift/swift-original.svg",
|
||||
category: "iOS Development",
|
||||
color: "blue",
|
||||
},
|
||||
{
|
||||
name: "Kotlin",
|
||||
logo: "https://cdn.jsdelivr.net/gh/devicons/devicon/icons/kotlin/kotlin-original.svg",
|
||||
category: "Android Development",
|
||||
color: "green",
|
||||
},
|
||||
{
|
||||
name: "Unity",
|
||||
logo: "https://cdn.jsdelivr.net/gh/devicons/devicon/icons/unity/unity-original.svg",
|
||||
category: "AR/VR Development",
|
||||
color: "orange",
|
||||
},
|
||||
{
|
||||
name: "AWS IoT",
|
||||
logo: iotImage,
|
||||
category: "IoT Platform",
|
||||
color: "blue",
|
||||
},
|
||||
];
|
||||
|
||||
@@ -1019,43 +1025,47 @@ const WearableTechStack = () => {
|
||||
viewport={{ once: true }}
|
||||
className="mb-16"
|
||||
>
|
||||
<div className="grid grid-cols-2 md:grid-cols-3 lg:grid-cols-6 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>
|
||||
|
||||
|
||||
@@ -1073,9 +1073,9 @@ export const IOSAppDevelopment = () => {
|
||||
/>
|
||||
|
||||
|
||||
<section className="bg-card">
|
||||
{/* <section className="bg-card">
|
||||
<IOSTechnologies />
|
||||
</section>
|
||||
</section> */}
|
||||
|
||||
{/* CTA Section */}
|
||||
<section className="py-32">
|
||||
|
||||
Reference in New Issue
Block a user