388 lines
15 KiB
TypeScript
388 lines
15 KiB
TypeScript
import React from "react";
|
||
import { Navigation } from "../components/Navigation";
|
||
import { Footer } from "../components/Footer";
|
||
import { Button } from "../components/ui/button";
|
||
import { Badge } from "../components/ui/badge";
|
||
import { ArrowRight, Linkedin, Twitter, Mail } from "lucide-react";
|
||
import { navigateTo } from "@/App";
|
||
import riteshImage from "../src/images/ritesh-pandey.png";
|
||
import manavImage from "../src/images/manav-sain.png";
|
||
import sudhirImage from "../src/images/sudhir-malya.jpg";
|
||
import kartikeyImage from "../src/images/kartikeya-gautam.png";
|
||
import poojaImage from "../src/images/pooja-patade.jpg";
|
||
import tanveerImage from "../src/images/tanveer.jpg";
|
||
import { Helmet } from "react-helmet-async";
|
||
|
||
export const LeadershipTeam = () => {
|
||
const leaders = [
|
||
{
|
||
name: "Ritesh Pandey",
|
||
position: "Founder & CEO",
|
||
image: riteshImage,
|
||
accent: "pink", // default
|
||
bio: "Founder & CEO leading innovation and AI-driven growth across industries.",
|
||
social: {
|
||
linkedin: "https://linkedin.com/in/riteshwdipl",
|
||
email: "#",
|
||
twitter: "#",
|
||
},
|
||
},
|
||
{
|
||
name: "Manav Sain",
|
||
position: "VP- Business Solutions",
|
||
image: manavImage,
|
||
accent: "green",
|
||
bio: "VP crafting business solutions and scaling digital strategy for enterprise clients.",
|
||
social: {
|
||
linkedin: "https://linkedin.com/in/manavsain",
|
||
email: "#",
|
||
twitter: "#",
|
||
},
|
||
},
|
||
{
|
||
name: "Sudhir Mallya",
|
||
position: "CTO",
|
||
image: sudhirImage,
|
||
accent: "blue",
|
||
bio: "CTO leading technology innovation and scalable digital architecture.",
|
||
experience: "Former VP at Microsoft, Stanford MBA",
|
||
social: {
|
||
linkedin: "#",
|
||
email: "#",
|
||
twitter: "#",
|
||
},
|
||
},
|
||
{
|
||
name: "Kartikey Gautam",
|
||
position: "Product Manager",
|
||
image: kartikeyImage,
|
||
accent: "green",
|
||
bio: "Product Manager building scalable AI products with a user-centric approach.",
|
||
experience: "Former VP at Microsoft, Stanford MBA",
|
||
social: {
|
||
linkedin: "https://linkedin.com/in/kartikey-gautam-product-manager",
|
||
email: "#",
|
||
twitter: "#",
|
||
},
|
||
},
|
||
{
|
||
name: "Pooja Patade",
|
||
position: "Head - Accounts & HR",
|
||
image: poojaImage,
|
||
accent: "blue",
|
||
bio: "Head of HR & Accounts ensuring smooth operations and organizational alignment.",
|
||
experience: "Former VP at Microsoft, Stanford MBA",
|
||
social: {
|
||
linkedin: "https://linkedin.com/in/pooja-patade-85453a13b",
|
||
email: "#",
|
||
twitter: "#",
|
||
},
|
||
},
|
||
{
|
||
name: "Tanveer Ajani",
|
||
position: "Compliance Head",
|
||
image: tanveerImage,
|
||
accent: "pink",
|
||
bio: "Ensures regulatory excellence and drives compliance across operations.",
|
||
experience: "Former VP at Microsoft, Stanford MBA",
|
||
social: {
|
||
linkedin: "#",
|
||
email: "#",
|
||
twitter: "#",
|
||
},
|
||
},
|
||
];
|
||
|
||
|
||
// Helper function to get accent colors
|
||
const getAccentColors = (accent: string) => {
|
||
switch (accent) {
|
||
case 'green':
|
||
return {
|
||
primary: '#10B981',
|
||
bg: 'from-green-600/20 to-emerald-500/20',
|
||
border: 'border-green-500/30',
|
||
hover: 'hover:bg-green-500/20',
|
||
shadow: 'hover:shadow-green-500/25',
|
||
text: 'text-green-400'
|
||
};
|
||
case 'blue':
|
||
return {
|
||
primary: '#3B82F6',
|
||
bg: 'from-blue-600/20 to-blue-500/20',
|
||
border: 'border-blue-500/30',
|
||
hover: 'hover:bg-blue-500/20',
|
||
shadow: 'hover:shadow-blue-500/25',
|
||
text: 'text-blue-400'
|
||
};
|
||
default: // pink
|
||
return {
|
||
primary: '#E5195E',
|
||
bg: 'from-[#E5195E]/20 to-[#FF6B9D]/20',
|
||
border: 'border-[#E5195E]/30',
|
||
hover: 'hover:bg-[#E5195E]/20',
|
||
shadow: 'hover:shadow-[#E5195E]/25',
|
||
text: 'text-[#E5195E]'
|
||
};
|
||
}
|
||
};
|
||
|
||
return (
|
||
<div className="dark min-h-screen bg-background">
|
||
<Helmet>
|
||
{/* Page Title and Meta Description */}
|
||
<title>Leadership Team | Experts in Tech Leadership & Innovation</title>
|
||
<meta
|
||
name="description"
|
||
content="Meet WDI’s leadership team, visionaries with a proven track record in tech innovation, digital transformation, and delivering client success globally."
|
||
/>
|
||
|
||
{/* Canonical Link */}
|
||
<link rel="canonical" href="https://www.wdipl.com/company/leadership-team" />
|
||
|
||
{/* Open Graph Tags (for Facebook, LinkedIn) */}
|
||
<meta property="og:title" content="Leadership Team | Experts in Tech Leadership & Innovation" />
|
||
<meta
|
||
property="og:description"
|
||
content="Meet WDI’s leadership team, visionaries with a proven track record in tech innovation, digital transformation, and delivering client success globally."
|
||
/>
|
||
<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="Leadership Team | Experts in Tech Leadership & Innovation" />
|
||
<meta
|
||
name="twitter:description"
|
||
content="Meet WDI’s leadership team, visionaries with a proven track record in tech innovation, digital transformation, and delivering client success globally."
|
||
/>
|
||
<meta name="twitter:image" content="https://www.wdipl.com/your-preview-image.jpg" />
|
||
|
||
{/* Social Profiles (using JSON-LD Schema) */}
|
||
<script type="application/ld+json">
|
||
{`
|
||
{
|
||
"@context": "https://schema.org",
|
||
"@type": "Organization",
|
||
"name": "WDI",
|
||
"url": "https://www.wdipl.com",
|
||
"sameAs": [
|
||
"https://www.facebook.com/wdideas",
|
||
"https://www.linkedin.com/in/website-developers-india/",
|
||
"https://www.instagram.com/wdipl/"
|
||
]
|
||
}
|
||
`}
|
||
</script>
|
||
</Helmet>
|
||
<Navigation />
|
||
|
||
{/* Hero Section */}
|
||
<section className="relative pt-24 pb-16 overflow-hidden">
|
||
<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]"
|
||
>
|
||
Leadership Team
|
||
</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">
|
||
Meet the Visionaries Behind
|
||
<span className="bg-gradient-to-r from-[#E5195E] to-[#FF6B9D] bg-clip-text text-transparent">
|
||
{" "}
|
||
WDI
|
||
</span>
|
||
</h1>
|
||
<p className="text-lg md:text-xl text-muted-foreground mb-8 max-w-3xl mx-auto leading-relaxed">
|
||
Our leadership team combines decades of experience from top tech
|
||
companies with a shared passion for digital innovation and client
|
||
success.
|
||
</p>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
{/* Leadership Grid */}
|
||
<section className="py-16 bg-background">
|
||
<div className="container mx-auto px-6 lg:px-8">
|
||
<div className="grid md:grid-cols-2 lg:grid-cols-3 gap-8">
|
||
{leaders.map((leader, index) => {
|
||
const colors = getAccentColors(leader.accent);
|
||
|
||
return (
|
||
<div
|
||
key={index}
|
||
className="group transition-all duration-500 ease-in-out"
|
||
>
|
||
<div className={`bg-card/50 rounded-2xl p-6 border border-white/10 hover:border-white/20 backdrop-blur-md transition-all duration-500 ease-in-out hover:bg-card/70`}>
|
||
{/* Profile Image - Reduced Size */}
|
||
<div className="relative mb-6 flex justify-center transition-all duration-500 ease-in-out">
|
||
<div
|
||
className={`relative w-24 h-24 rounded-2xl overflow-hidden bg-gradient-to-br ${colors.bg} transition-all duration-500 ease-in-out`}
|
||
>
|
||
<img
|
||
src={leader.image}
|
||
alt={leader.name}
|
||
className="w-full h-full object-cover group-hover:opacity-90 transition-opacity duration-500 ease-in-out"
|
||
/>
|
||
|
||
{/* Colored Glow Effect on Hover */}
|
||
<div
|
||
className={`absolute inset-0 rounded-2xl bg-gradient-to-t from-[${colors.primary}]20 to-transparent opacity-0 group-hover:opacity-100 transition-opacity duration-500 ease-in-out`}
|
||
/>
|
||
</div>
|
||
|
||
{/* Colored Status Ring */}
|
||
<div
|
||
className={`absolute -bottom-1 -right-1 w-6 h-6 rounded-full border-2 border-card flex items-center justify-center`}
|
||
style={{ backgroundColor: colors.primary }}
|
||
>
|
||
<div className="w-2 h-2 bg-white rounded-full" />
|
||
</div>
|
||
</div>
|
||
|
||
{/* Content */}
|
||
<div className="space-y-4 text-center transition-all duration-500 ease-in-out">
|
||
<div>
|
||
<h3 className="text-xl font-bold text-white mb-1 font-manrope">
|
||
{leader.name}
|
||
</h3>
|
||
<p className={`${colors.text} font-medium mb-3 font-manrope`}>
|
||
{leader.position}
|
||
</p>
|
||
</div>
|
||
|
||
<p className="text-muted-foreground text-sm leading-relaxed font-manrope">
|
||
{leader.bio}
|
||
</p>
|
||
|
||
<div className="pt-3 border-t border-white/10">
|
||
{/* Social Links */}
|
||
<div className="flex justify-center">
|
||
<a
|
||
href={leader.social.linkedin}
|
||
target="_blank"
|
||
rel="noopener noreferrer"
|
||
className={`w-9 h-9 rounded-lg bg-white/10 ${colors.hover} flex items-center justify-center transition-all duration-500 ease-in-out hover:shadow-lg ${colors.shadow} group/social`}
|
||
style={{
|
||
background: `linear-gradient(135deg, ${colors.primary}20, ${colors.primary}10)`,
|
||
}}
|
||
>
|
||
<Linkedin className="w-4 h-4 text-white transition-all duration-300 ease-in-out" />
|
||
</a>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
);
|
||
})}
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
{/* Advisory Board */}
|
||
{/* <section className="py-16 bg-card/50">
|
||
<div className="container mx-auto px-6 lg:px-8">
|
||
<div className="text-center mb-12">
|
||
<h2 className="text-3xl md:text-4xl font-bold mb-4 text-white">
|
||
Advisory Board
|
||
</h2>
|
||
<p className="text-muted-foreground max-w-2xl mx-auto">
|
||
Industry experts who guide our strategic direction and innovation
|
||
initiatives
|
||
</p>
|
||
</div>
|
||
|
||
<div className="grid md:grid-cols-3 gap-8">
|
||
{[
|
||
{
|
||
name: "Dr. Alan Foster",
|
||
title: "Former CTO, Meta",
|
||
expertise: "AI & Emerging Technologies",
|
||
},
|
||
{
|
||
name: "Maria Santos",
|
||
title: "Former VP, Netflix",
|
||
expertise: "Product Strategy & Growth",
|
||
},
|
||
{
|
||
name: "Robert Kim",
|
||
title: "Former Director, Amazon",
|
||
expertise: "Cloud Infrastructure & Scalability",
|
||
},
|
||
].map((advisor, index) => (
|
||
<div
|
||
key={index}
|
||
className="text-center p-6 rounded-2xl bg-background/50 border border-white/10"
|
||
>
|
||
<div className="w-16 h-16 rounded-full bg-gradient-to-br from-[#E5195E]/20 to-[#FF6B9D]/20 mx-auto mb-4 flex items-center justify-center">
|
||
<span className="text-2xl font-bold text-[#E5195E]">
|
||
{advisor.name
|
||
.split(" ")
|
||
.map((n) => n[0])
|
||
.join("")}
|
||
</span>
|
||
</div>
|
||
<h3 className="text-lg font-semibold text-white mb-1">
|
||
{advisor.name}
|
||
</h3>
|
||
<p className="text-sm text-[#E5195E] mb-2">{advisor.title}</p>
|
||
<p className="text-xs text-muted-foreground">
|
||
{advisor.expertise}
|
||
</p>
|
||
</div>
|
||
))}
|
||
</div>
|
||
</div>
|
||
</section> */}
|
||
|
||
{/* CTA Section */}
|
||
<section className="py-16 bg-background">
|
||
<div className="container mx-auto px-6 lg:px-8">
|
||
<div className="max-w-4xl mx-auto text-center">
|
||
<h2 className="text-3xl md:text-4xl font-bold mb-6 text-white">
|
||
Want to Work with Our Team?
|
||
</h2>
|
||
<p className="text-lg text-muted-foreground mb-8 max-w-2xl mx-auto">
|
||
Join our growing team of innovators or partner with us to
|
||
transform your business
|
||
</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"
|
||
>
|
||
Explore Careers
|
||
<ArrowRight className="ml-2 w-4 h-4" />
|
||
</Button>
|
||
<Button
|
||
size="lg"
|
||
variant="outline"
|
||
className="border-white/20 text-white hover:bg-white/10"
|
||
onClick={() => navigateTo("/start-a-project")}
|
||
>
|
||
Start a Project
|
||
</Button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<Footer />
|
||
</div>
|
||
);
|
||
};
|