diff --git a/components/Footer.tsx b/components/Footer.tsx index 2c08672..e268599 100644 --- a/components/Footer.tsx +++ b/components/Footer.tsx @@ -14,6 +14,7 @@ import { Input } from "./ui/input"; import BlackLogo14 from "../assets/BlackLogo14"; import { navigateTo } from "../App"; import { useState } from "react"; +import GlobalOffices from "./GlobalOffices"; const footerNavigation = { Explore: [ @@ -269,110 +270,109 @@ const NewsletterSection = () => { export const Footer = () => { return ( - + ); }; \ No newline at end of file diff --git a/components/HireTalentHeroBanner.tsx b/components/HireTalentHeroBanner.tsx new file mode 100644 index 0000000..7b432a1 --- /dev/null +++ b/components/HireTalentHeroBanner.tsx @@ -0,0 +1,212 @@ +import { Button } from "./ui/button"; +import { ShimmerButton } from "./ui/shimmer-button"; +import { navigateTo } from "../App"; +import { DashboardVector } from "./vectors/DashboardVector"; +import { motion } from "framer-motion"; + +interface HireTalentHeroBannerProps { + category?: string; + title: string; + description: string; + primaryCTA: { + text: string; + href: string; + icon?: React.ComponentType<{ className?: string }>; + }; + secondaryCTA?: { + text: string; + href: string; + icon?: React.ComponentType<{ className?: string }>; + }; + useVectors?: boolean; // Keep for backward compatibility + vectorComponent?: React.ComponentType; // New prop for custom vectors +} + +export function HireTalentHeroBanner({ + category, + title, + description, + primaryCTA, + secondaryCTA, + useVectors = false, + vectorComponent: VectorComponent +}: HireTalentHeroBannerProps) { + return ( +
+
+
+ + {/* Category Label */} + {category && ( + + + {category} + + + )} + + {/* Main Heading */} +
+

+ {title} +

+ +

+ {description} +

+
+ + {/* CTAs */} + + navigateTo(primaryCTA.href)} + > +
+ {primaryCTA.icon && } + {primaryCTA.text} +
+ + + {secondaryCTA && ( + + )} + + + + {/* Right side with Custom Vector, Dashboard Vector, or Legacy Vector Graphics */} + +
+ + {VectorComponent ? ( + /* Custom Vector Component */ + + ) : useVectors ? ( + /* Legacy Vector Graphics Version */ + + ) : ( + /* Default Dashboard Vector */ + + )} + +
+ +
+
+
+ ); +} + +// Legacy Vector Graphics Component for Development Team Visualization (kept for backward compatibility) +const DevelopmentTeamVectors = () => { + return ( +
+ {/* Main Development Hub */} + + {/* Central Hub Circle */} +
+
+ + + +
+ + {/* Pulse Animation Ring */} +
+
+ + {/* Orbiting Developer Icons */} + + {/* Frontend Developer */} +
+ + + +
+ + {/* Backend Developer */} +
+ + + +
+ + {/* Mobile Developer */} +
+ + + +
+ + {/* UI/UX Designer */} +
+ + + +
+ + + {/* Skill Badges */} + +
+ React +
+
+ Node.js +
+
+ Mobile +
+ + +
+ ); +}; \ No newline at end of file diff --git a/components/vectors/BackendVector.tsx b/components/vectors/BackendVector.tsx new file mode 100644 index 0000000..9aeea40 --- /dev/null +++ b/components/vectors/BackendVector.tsx @@ -0,0 +1,285 @@ +import { motion } from "framer-motion"; + +export const BackendVector = () => { + return ( +
+ {/* Subtle Background Grid */} +
+ + + + + + + + +
+ +
+ {/* API Gateway - Central Component */} + + {/* Main API Gateway */} + + {/* API Icon */} + + + + + {/* Pulsing Status Light */} + + + + {/* API Gateway Label */} + + API Gateway + + + + {/* Database Cluster - Left Side */} + + {Array.from({ length: 3 }).map((_, i) => ( + + + {/* Database Icon */} + + + + + + + + {/* Activity Indicator */} + + + ))} + + {/* Database Label */} + + Database + + + + {/* Microservices - Right Side */} + + {Array.from({ length: 4 }).map((_, i) => ( + + + #{i + 1} + + + {/* Service Status */} + + + ))} + + {/* Microservices Label */} + + Services + + +
+ + {/* Data Flow Lines */} + + + + + + + + + + + + + + + {/* Database to API Flow */} + + + {/* API to Services Flow */} + + + + {/* Performance Metrics - Top Right */} + +
+
+
+ + 2ms Latency +
+
+ + 1M+ Requests/hr +
+
+ + Auto-Scaling +
+
+
+ + + {/* Tech Stack - Bottom Left */} + +
+
+ {[ + { name: "Node.js", color: "bg-green-600/20 text-green-400" }, + { name: "SQL", color: "bg-blue-600/20 text-blue-400" }, + { name: "Redis", color: "bg-red-600/20 text-red-400" }, + { name: "Docker", color: "bg-cyan-600/20 text-cyan-400" } + ].map((tech, index) => ( + + {tech.name} + + ))} +
+
+ + + {/* Load Balancer Indicator */} + + + +
+ ); +}; \ No newline at end of file diff --git a/components/vectors/DashboardVector.tsx b/components/vectors/DashboardVector.tsx new file mode 100644 index 0000000..a7a89fa --- /dev/null +++ b/components/vectors/DashboardVector.tsx @@ -0,0 +1,232 @@ +import { motion } from "framer-motion"; + +export const DashboardVector = () => { + return ( +
+ {/* Main Mobile Device */} + + {/* Phone Frame */} +
+ {/* Screen */} +
+ {/* Top Status Bar */} +
+
+
+
+
+
+
9:41
+
+
+
+
+
+ + {/* Main Dashboard Content */} +
+ {/* Header */} +
+
+
Hey Balazs!
+
Good morning
+
+ +
+ +
+ + {/* Weather Card */} +
+
+
+
17°
+
New York
+
+
☀️
+
+
+ + {/* Stats Row */} +
+
+
Revenue
+
$67k
+ +
+
+
Orders
+
1,284
+ +
+
+ + {/* Chart Area */} +
+
Analytics
+
+ {[40, 65, 45, 80, 55, 90, 70].map((height, index) => ( + + ))} +
+
+ + {/* Activity Indicator */} +
+
+
Activity
+ +
+
+ + + + + + + + + +
+
+
+ + {/* Bottom Navigation */} +
+ {['🏠', '📊', '💬', '⚙️'].map((icon, index) => ( + + {icon} + + ))} +
+
+
+ + + {/* Floating Data Points */} + + 98% + + + + +24 + + + + 📈 + + + + ⚡ + + + {/* Connection Lines */} + + + + + + + + + + + + + + + {/* Technology Labels */} + +
+ React Native +
+
+ Dashboard +
+
+ Analytics +
+ +
+ ); +}; \ No newline at end of file diff --git a/components/vectors/DeveloperSkillsVector.tsx b/components/vectors/DeveloperSkillsVector.tsx new file mode 100644 index 0000000..87731c5 --- /dev/null +++ b/components/vectors/DeveloperSkillsVector.tsx @@ -0,0 +1,160 @@ +import { motion } from "framer-motion"; + +export const DeveloperSkillsVector = () => { + const skills = [ + { name: "Frontend", color: "from-blue-500 to-blue-600", icon: "🎨", position: { x: -60, y: -30 } }, + { name: "Backend", color: "from-green-500 to-green-600", icon: "⚙️", position: { x: 60, y: -30 } }, + { name: "Database", color: "from-purple-500 to-purple-600", icon: "🗄️", position: { x: 0, y: 50 } } + ]; + + return ( +
+ {/* Subtle Background Glow */} +
+ + + + + + + + + +
+ + {/* Central Developer Icon */} + + + + + + + + + {/* Skill Badges */} + {skills.map((skill, index) => ( + + + {skill.icon} + + + {/* Skill Label */} + + {skill.name} + + + ))} + + {/* Subtle Connecting Elements */} + + + + + + + + + + {skills.map((skill, index) => ( + + ))} + + + {/* Status Indicator */} + +
+
+ + Available +
+
+ + + {/* Experience Level */} + +
+
+ {[1, 2, 3, 4, 5].map((star, index) => ( + + ))} + Expert Level +
+
+ +
+ ); +}; \ No newline at end of file diff --git a/components/vectors/EngagementModelsVector.tsx b/components/vectors/EngagementModelsVector.tsx new file mode 100644 index 0000000..cc7f16f --- /dev/null +++ b/components/vectors/EngagementModelsVector.tsx @@ -0,0 +1,200 @@ +import { motion } from "framer-motion"; + +export const EngagementModelsVector = () => { + const models = [ + { name: "Fixed Price", icon: "💰", color: "from-blue-500 to-blue-600", position: { x: 20, y: 30 } }, + { name: "Time & Material", icon: "⏱️", color: "from-green-500 to-green-600", position: { x: 80, y: 30 } }, + { name: "Dedicated Team", icon: "👥", color: "from-accent to-pink-600", position: { x: 50, y: 70 } } + ]; + + return ( +
+ {/* Central Business Hub */} + +
+
+ + + +
+
+ + + {/* Engagement Model Options */} + {models.map((model, index) => ( + + + {model.icon} + + {model.name.split(' ').map((word, i) => ( +
{word}
+ ))} + + + + {/* Model Benefits */} + +
+ {model.name === "Fixed Price" && "Predictable Cost"} + {model.name === "Time & Material" && "High Flexibility"} + {model.name === "Dedicated Team" && "Full Control"} +
+ + + ))} + + {/* Connection Lines */} + + + + + + + + + + {models.map((model, index) => ( + + ))} + + + {/* Business Metrics */} + +
+
95%
+
Success Rate
+
+
+
500+
+
Projects
+
+
+
98%
+
Satisfaction
+
+ + + {/* Project Types */} + +
+
+ MVP +
+
+ Enterprise +
+
+ Scale-up +
+
+ + + {/* Floating Decision Factors */} + +
+
Budget
+
🎯
+
+ + + +
+
Timeline
+
⏰
+
+ + + +
+
Scope
+
📋
+
+ + + {/* ROI Indicator */} + +
+ ROI ↗ +
+ + + {/* Selection Process Flow */} + +
+
1. Analyze Requirements
+
2. Compare Models
+
3. Select Best Fit
+
4. Start Project
+
+ +
+ ); +}; \ No newline at end of file diff --git a/components/vectors/FrontendVector.tsx b/components/vectors/FrontendVector.tsx new file mode 100644 index 0000000..642cd11 --- /dev/null +++ b/components/vectors/FrontendVector.tsx @@ -0,0 +1,195 @@ +import { motion } from "framer-motion"; + +export const FrontendVector = () => { + return ( +
+ {/* Browser Window */} + +
+ {/* Browser Header */} +
+
+
+
+
+ localhost:3000 +
+
+ + {/* Browser Content */} +
+ {/* Navigation */} +
+
+
+
+
+
+
+
+ + {/* Hero Section */} +
+
+
+
+
+ + {/* Cards Grid */} +
+ {Array.from({ length: 6 }).map((_, i) => ( + + ))} +
+
+
+ + + {/* Floating UI Components */} + +
+ {/* Button Component */} + + Button + + + {/* Input Component */} + +
+ + + {/* Card Component */} + +
+
+
+
+ +
+ + + {/* Floating Code Snippets */} + +
+ {/* JSX Code */} +
+
+
+
<
+
div
+
>
+
+
+
+
+ + {/* CSS Code */} +
+
+
.btn
+
+
+
+
+ + + {/* Technology Icons */} + + ⚛️ + + + + V + + + + A + + + {/* Responsive Design Indicators */} + +
+
+ Desktop +
+
+
+ Tablet +
+
+
+ Mobile +
+ + + {/* Interactive Elements */} + + + + + + + + + + + +
+ ); +}; \ No newline at end of file diff --git a/components/vectors/FullStackVector.tsx b/components/vectors/FullStackVector.tsx new file mode 100644 index 0000000..41bf492 --- /dev/null +++ b/components/vectors/FullStackVector.tsx @@ -0,0 +1,237 @@ +import { motion } from "framer-motion"; + +export const FullStackVector = () => { + return ( +
+ {/* Subtle Background */} +
+ + + + + + + + + +
+ +
+ {/* Database Component */} + + {/* Database Icon */} +
+ + {/* Database layers */} +
+
+
+
+ + + {/* Database Label */} + + Database + +
+ + + {/* Server Stack */} + + {/* Server Stack */} +
+
+ {Array.from({ length: 4 }).map((_, i) => ( + +
+ {/* Server indicator */} + + + {/* Server number */} + #{i + 1} +
+ + ))} +
+ + {/* API Label */} + + API Server + +
+ + + {/* Gateway Component */} + + {/* Gateway Icon */} +
+ + + ⚡ + + + + {/* Gateway Label */} + + Gateway + +
+ +
+ + {/* Connection Lines */} + + + + + + + + + + + + + + + {/* Performance Metrics */} + +
+
+
+ + 99.9% Uptime +
+
+ + 50ms Response +
+
+
+ + + {/* Technology Stack */} + +
+
+ {[ + { name: "Node.js", color: "bg-green-600" }, + { name: "SQL", color: "bg-blue-600" }, + { name: "Redis", color: "bg-red-600" } + ].map((tech, index) => ( + + {tech.name} + + ))} +
+
+ + + {/* Data Flow Indicator */} + + + +
+ ); +}; \ No newline at end of file diff --git a/components/vectors/MobileAppVector.tsx b/components/vectors/MobileAppVector.tsx new file mode 100644 index 0000000..bc217cb --- /dev/null +++ b/components/vectors/MobileAppVector.tsx @@ -0,0 +1,232 @@ +import { motion } from "framer-motion"; + +export const MobileAppVector = () => { + return ( +
+ {/* Subtle Background */} +
+ + + + + + + + + +
+ + {/* Main iPhone Device */} + +
+ {/* iPhone Frame */} +
+ {/* Screen */} +
+ {/* Dynamic Island */} +
+ + {/* App Interface */} +
+ {/* Status Bar */} +
+
9:41
+
+
+
+
+
+ + {/* App Content */} +
+ {/* Header */} +
+
+
+
+ + {/* Feature Cards */} +
+ {Array.from({ length: 3 }).map((_, i) => ( + +
+
+
+
+
+
+ +
+ + ))} +
+ + {/* Bottom Navigation */} +
+
+
+ {Array.from({ length: 4 }).map((_, i) => ( + +
+ + ))} +
+
+
+
+
+
+
+
+ + + {/* React Native Icon */} + + + ⚛️ + + + + {/* Code Window */} + +
+
+
+
+
+
+
+ + + +
+
+ + + {/* App Store & Google Play */} + +
+ + 📱 + + + + 🤖 + +
+ + + {/* Technology Labels */} + + {[ + { name: "iOS", color: "from-blue-500 to-blue-600" }, + { name: "Android", color: "from-green-500 to-green-600" }, + { name: "React Native", color: "from-cyan-500 to-cyan-600" } + ].map((tech, index) => ( + + {tech.name} + + ))} + + + {/* Subtle Connecting Line */} + + + + + + + + + + +
+ ); +}; \ No newline at end of file diff --git a/components/vectors/ProjectTimelineVector.tsx b/components/vectors/ProjectTimelineVector.tsx new file mode 100644 index 0000000..9479a5c --- /dev/null +++ b/components/vectors/ProjectTimelineVector.tsx @@ -0,0 +1,103 @@ +import { motion } from "framer-motion"; + +export const ProjectTimelineVector = () => { + const phases = [ + { name: "Planning", icon: "📋", color: "from-blue-500 to-blue-600", duration: "Week 1-2" }, + { name: "Design", icon: "🎨", color: "from-purple-500 to-purple-600", duration: "Week 3-4" }, + { name: "Development", icon: "⚡", color: "from-green-500 to-green-600", duration: "Week 5-12" }, + { name: "Testing", icon: "🔍", color: "from-orange-500 to-orange-600", duration: "Week 13-14" }, + { name: "Launch", icon: "🚀", color: "from-red-500 to-red-600", duration: "Week 15-16" } + ]; + + return ( +
+ {/* Timeline Line */} +
+ + {/* Project Phases */} +
+ {phases.map((phase, index) => ( + + {/* Timeline Dot */} + + + {/* Phase Card */} + +
+
+ {phase.icon} +
+

{phase.name}

+

{phase.duration}

+
+
+ + {/* Progress Indicator */} + + + +
+ + + {/* Connecting Arrow */} + {index < phases.length - 1 && ( + + + + + + )} + + ))} +
+ + {/* Success Metrics */} + + {[ + { label: "On Time", value: "95%", color: "text-green-400" }, + { label: "Quality", value: "5★", color: "text-yellow-400" }, + { label: "Satisfaction", value: "98%", color: "text-blue-400" } + ].map((metric, index) => ( +
+
{metric.value}
+
{metric.label}
+
+ ))} + +
+ ); +}; \ No newline at end of file diff --git a/components/vectors/QATestingVector.tsx b/components/vectors/QATestingVector.tsx new file mode 100644 index 0000000..b9af600 --- /dev/null +++ b/components/vectors/QATestingVector.tsx @@ -0,0 +1,249 @@ +import { motion } from "framer-motion"; + +export const QATestingVector = () => { + return ( +
+ {/* Testing Dashboard */} + +
+ {/* Header */} +
+
Test Results
+
+
+
Running
+
+
+ + {/* Test Cases */} +
+ {[ + { name: "Login Flow", status: "passed", color: "green" }, + { name: "Payment Gateway", status: "passed", color: "green" }, + { name: "User Registration", status: "running", color: "yellow" }, + { name: "API Validation", status: "passed", color: "green" }, + { name: "Mobile Responsive", status: "failed", color: "red" } + ].map((test, index) => ( + +
+ + {test.name} +
+ + {test.status} + + + ))} +
+ + {/* Statistics */} +
+
+
85%
+
Passed
+
+
+
10%
+
Running
+
+
+
5%
+
Failed
+
+
+
+ + + {/* Testing Tools */} + +
+ {/* Selenium */} + + Selenium + + + {/* Cypress */} + + Cypress + + + {/* Jest */} + + Jest + +
+ + + {/* Bug Tracking */} + +
+
Bug Report
+
+
+
+ #001 +
+
+
+ #002 +
+
+
+ #003 +
+
+
+ + + {/* Performance Metrics */} + +
+ {/* Load Time */} +
+ + 1.2s + +
Load Time
+
+ + {/* Coverage */} +
+ + 95% + +
Coverage
+
+ + {/* Success Rate */} +
+ + 99.2% + +
Success
+
+
+ + + {/* Floating Test Icons */} + + + + + + + + + + + + + {/* Test Automation Flow */} + + + + + + + + + + + + + {/* Quality Labels */} + +
+ Automated Testing +
+
+ Performance Testing +
+
+ Security Testing +
+ +
+ ); +}; \ No newline at end of file diff --git a/components/vectors/TeamCollaborationVector.tsx b/components/vectors/TeamCollaborationVector.tsx new file mode 100644 index 0000000..ccca3bc --- /dev/null +++ b/components/vectors/TeamCollaborationVector.tsx @@ -0,0 +1,123 @@ +import { motion } from "framer-motion"; + +export const TeamCollaborationVector = () => { + const teamMembers = [ + { role: "Frontend", color: "from-blue-500 to-blue-600", position: { x: 20, y: 20 } }, + { role: "Backend", color: "from-green-500 to-green-600", position: { x: 80, y: 20 } }, + { role: "Designer", color: "from-purple-500 to-purple-600", position: { x: 50, y: 70 } }, + { role: "DevOps", color: "from-orange-500 to-orange-600", position: { x: 20, y: 70 } }, + { role: "QA", color: "from-red-500 to-red-600", position: { x: 80, y: 70 } } + ]; + + return ( +
+ {/* Team Members */} + {teamMembers.map((member, index) => ( + +
+ + + + + + + {/* Online Status Indicator */} +
+
+ + {/* Role Label */} +
+ {member.role} +
+ + ))} + + {/* Collaboration Lines */} + + + + + + + + + + {/* Dynamic Connection Lines */} + {teamMembers.map((member, index) => ( + teamMembers.slice(index + 1).map((otherMember, otherIndex) => ( + + )) + ))} + + + {/* Central Project Hub */} + + + + + + + + + {/* Floating Code/Design Elements */} + + {['React', 'Design', 'API'].map((tech, index) => ( + + {tech} + + ))} + +
+ ); +}; \ No newline at end of file diff --git a/components/vectors/TechStackVisualization.tsx b/components/vectors/TechStackVisualization.tsx new file mode 100644 index 0000000..fdb0194 --- /dev/null +++ b/components/vectors/TechStackVisualization.tsx @@ -0,0 +1,107 @@ +import { motion } from "framer-motion"; + +interface TechStackVisualizationProps { + stacks: Array<{ + name: string; + technologies: string[]; + color: string; + icon: string; + }>; +} + +export const TechStackVisualization = ({ stacks }: TechStackVisualizationProps) => { + return ( +
+ {/* Central Hub */} + +
+ + + +
+ + + {/* Tech Stack Orbits */} + {stacks.map((stack, stackIndex) => ( + + {/* Stack Hub */} + +
+ {stack.icon} +
+ + {/* Stack Label */} +
+ {stack.name} +
+ + {/* Technologies around the stack */} + {stack.technologies.map((tech, techIndex) => ( + + {tech.slice(0, 2)} + + ))} + + + ))} + + {/* Animated Particles */} + {Array.from({ length: 8 }).map((_, index) => ( + + ))} +
+ ); +}; \ No newline at end of file diff --git a/components/vectors/UIUXVector.tsx b/components/vectors/UIUXVector.tsx new file mode 100644 index 0000000..1884830 --- /dev/null +++ b/components/vectors/UIUXVector.tsx @@ -0,0 +1,276 @@ +import { motion } from "framer-motion"; + +export const UIUXVector = () => { + return ( +
+ {/* Design Canvas */} + +
+ {/* Figma Interface */} +
+ {/* Header */} +
+
+
+
+
+ Design System +
+
+ + {/* Design Elements */} +
+ {/* Wireframe Elements */} +
+ + +
+ +
+ {Array.from({ length: 4 }).map((_, i) => ( + + ))} +
+ + {/* Component Grid */} +
+ {Array.from({ length: 6 }).map((_, i) => ( + + ))} +
+
+
+
+ + + {/* Design Tools Palette */} + +
+ {/* Figma */} + + + + + + + + + + {/* Sketch */} + + S + + + {/* Adobe XD */} + + Xd + +
+ + + {/* User Journey Flow */} + +
+ {/* User Persona */} + + + + + + + {/* Flow Arrow */} + + + {/* Wireframe */} + +
+ + + {/* Flow Arrow */} + + + {/* Prototype */} + + + + + +
+ +
+ Research + Design + Prototype +
+ + + {/* Color Palette */} + +
+
Colors
+
+ + + +
+ + {/* Typography */} +
+
Typography
+
+
Aa
+
Manrope
+
+
+
+ + + {/* User Testing Elements */} + +
+
+ + + +
+
Usability: 95%
+
+ + + {/* Accessibility Icon */} + +
+ + + +
+ + + {/* Design System Components */} + +
+ Components +
+
+ Design System +
+ + + {/* Interactive Design Flow */} + + + + + + + + + + + +
+ ); +}; \ No newline at end of file diff --git a/components/vectors/index.tsx b/components/vectors/index.tsx new file mode 100644 index 0000000..4335441 --- /dev/null +++ b/components/vectors/index.tsx @@ -0,0 +1,39 @@ +// Vector Components for Hire Talent and Development Pages +export { DeveloperSkillsVector } from './DeveloperSkillsVector'; +export { TeamCollaborationVector } from './TeamCollaborationVector'; +export { ProjectTimelineVector } from './ProjectTimelineVector'; +export { TechStackVisualization } from './TechStackVisualization'; + +// New page-specific vectors +export { MobileAppVector } from './MobileAppVector'; +export { FullStackVector } from './FullStackVector'; +export { FrontendVector } from './FrontendVector'; +export { BackendVector } from './BackendVector'; +export { UIUXVector } from './UIUXVector'; +export { QATestingVector } from './QATestingVector'; +export { EngagementModelsVector } from './EngagementModelsVector'; +export { DashboardVector } from './DashboardVector'; + +// Vector Usage Guide: +// +// Each hire talent page now has its own custom vector component: +// - HireMobileAppDevelopers -> MobileAppVector (mobile devices, cross-platform) +// - HireFullStackDevelopers -> FullStackVector (frontend + backend integration) +// - HireFrontendDevelopers -> FrontendVector (UI components, browser interface) +// - HireBackendDevelopers -> BackendVector (servers, databases, APIs) +// - HireUIUXDesigners -> UIUXVector (design tools, user journey) +// - HireQAEngineers -> QATestingVector (testing dashboard, automation tools) +// - DedicatedDevelopmentTeams -> TeamCollaborationVector (team interaction) +// - EngagementModels -> EngagementModelsVector (business models, decision factors) +// - TeamAugmentationServices -> DeveloperSkillsVector (skills augmentation) +// - Default fallback -> DashboardVector (modern dashboard interface) +// +// To use vectors in HireTalentHeroBanner: +// +// +// Vectors are designed to be: +// - Responsive and scalable +// - Consistent with WDI brand colors (#E5195E, gradients) +// - Animated with Motion (Framer Motion) +// - Accessible and semantic +// - Performance optimized \ No newline at end of file diff --git a/pages/APIBackendDevelopment.tsx b/pages/APIBackendDevelopment.tsx index 2bfeac6..e2714a0 100644 --- a/pages/APIBackendDevelopment.tsx +++ b/pages/APIBackendDevelopment.tsx @@ -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 */} - + {/* Open Graph Tags (for Facebook, LinkedIn) */} @@ -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`} >
@@ -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 = () => {

Backend Languages & Runtimes

-
- {backends.map((tech, index) => ( - - -
- -
-

- {tech.name} -

-

- {tech.category} -

- - - ))} +
+ {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 ( + + +
+ +
+ +

+ {tech.name} +

+

{tech.category}

+ + + ); + })}
@@ -1105,32 +1128,47 @@ const APITechStack = () => {

Database Technologies

-
- {databases.map((db, index) => ( - - -
- -
-

- {db.name} -

-

{db.category}

- - - ))} +
+ {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 ( + + +
+ +
+ +

+ {tech.name} +

+

{tech.category}

+ + + ); + })}
diff --git a/pages/AboutWDI.tsx b/pages/AboutWDI.tsx index defdee2..4d1f025 100644 --- a/pages/AboutWDI.tsx +++ b/pages/AboutWDI.tsx @@ -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" } ]; diff --git a/pages/AdminPanelsDashboards.tsx b/pages/AdminPanelsDashboards.tsx index 0da2607..3714d48 100644 --- a/pages/AdminPanelsDashboards.tsx +++ b/pages/AdminPanelsDashboards.tsx @@ -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 = () => {

Frontend Technologies

-
- {frontends.map((tech, index) => ( - - -
- -
-

- {tech.name} -

-

- {tech.category} -

- - - ))} +
+ {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 ( + + +
+ +
+ +

+ {tech.name} +

+

{tech.category}

+ + + ); + })}
diff --git a/pages/CaseStudies.tsx b/pages/CaseStudies.tsx index 8a33a08..77cb1a7 100644 --- a/pages/CaseStudies.tsx +++ b/pages/CaseStudies.tsx @@ -326,7 +326,7 @@ export const CaseStudies = () => {
setSearchTerm(e.target.value)} className="pl-10 bg-card/50 border-white/10" @@ -375,7 +375,7 @@ export const CaseStudies = () => { {/* Results Count */}

- Showing {filteredCaseStudies.length} of {caseStudies.length} case studies + Showing {filteredCaseStudies.length} of {caseStudies.length} portfolios

@@ -511,7 +511,7 @@ export const CaseStudies = () => { navigateTo(study.link); }} > - View Case Study + View Portfolio
diff --git a/pages/ClickablePrototypes.tsx b/pages/ClickablePrototypes.tsx index 448510c..c230076 100644 --- a/pages/ClickablePrototypes.tsx +++ b/pages/ClickablePrototypes.tsx @@ -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 ( - - -
- -
-

- {tool.name} -

-

- {tool.category} -

- - - ); - })} + return ( + + +
+ +
+

+ {tech.name} +

+

{tech.category}

+ + + ); + })}
diff --git a/pages/CustomWebAppDevelopment.tsx b/pages/CustomWebAppDevelopment.tsx index 8bcab7b..f0f8a9d 100644 --- a/pages/CustomWebAppDevelopment.tsx +++ b/pages/CustomWebAppDevelopment.tsx @@ -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`} >
@@ -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" > -
- {technologies.map((tech, index) => ( - - -
- -
-

- {tech.name} -

-

- {tech.category} -

- - - ))} +
+ {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 ( + + +
+ +
+ +

+ {tech.name} +

+

{tech.category}

+ + + ); + })}
diff --git a/pages/EnterpriseSoftwareSolutions.tsx b/pages/EnterpriseSoftwareSolutions.tsx index 4e659a1..33b0936 100644 --- a/pages/EnterpriseSoftwareSolutions.tsx +++ b/pages/EnterpriseSoftwareSolutions.tsx @@ -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 = () => {

Enterprise Languages & Frameworks

-
- {enterpriseLanguages.map((tech, index) => ( - - -
- -
-

- {tech.name} -

-

- {tech.category} -

- - - ))} +
+ {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 ( + + +
+ +
+ +

+ {tech.name} +

+

{tech.category}

+ + + ); + })}
@@ -1100,33 +1126,46 @@ const EnterpriseTechStack = () => { Cloud Platforms
- {cloudPlatforms.map((platform, index) => ( - - -
- -
-

- {platform.name} -

-

- {platform.category} -

- - - ))} + {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 ( + + +
+ +
+ +

+ {tech.name} +

+

{tech.category}

+ + + ); + })}
diff --git a/pages/HireBackendDevelopers.tsx b/pages/HireBackendDevelopers.tsx index 8132e16..8bd8ab9 100644 --- a/pages/HireBackendDevelopers.tsx +++ b/pages/HireBackendDevelopers.tsx @@ -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 = () => {
- {/* Hero Section */} -
- - {/* Page Title and Meta Description */} - Hire Backend Developers | Skilled Experts at WDI - + + {/* Page Title and Meta Description */} + Hire Backend Developers | Skilled Experts at WDI + - {/* Canonical Link */} - + {/* Canonical Link */} + - {/* Open Graph Tags (for Facebook, LinkedIn) */} - - - - - + {/* Open Graph Tags (for Facebook, LinkedIn) */} + + + + + - {/* Twitter Card Tags */} - - - - + {/* Twitter Card Tags */} + + + + - {/* Social Profiles (using JSON-LD Schema) */} - - -
-
+ + -
-
- - Building Robust Server-Side Solutions - -

- Hire Backend Developers: Powering Your Applications with - - {" "} - Robust Foundations - -

-

- 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. -

-
- - {/* */} -
-
-
-
+ {/* Hero Section */} + {/* Introduction */}
diff --git a/pages/HireFrontendDevelopers.tsx b/pages/HireFrontendDevelopers.tsx index e1738e7..d3376ea 100644 --- a/pages/HireFrontendDevelopers.tsx +++ b/pages/HireFrontendDevelopers.tsx @@ -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 = () => {
- {/* Hero Section */} -
- + {/* Page Title and Meta Description */} Hire Frontend Developers | Skilled Talent at WDI { `} -
-
-
-
- - Crafting Engaging User Experiences - -

- Hire Frontend Developers: Crafting Intuitive and - - {" "} - Engaging User Experiences - -

-

- 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. -

-
- - {/* */} -
-
-
-
+ {/* Hero Section */} + + {/* Introduction */}
diff --git a/pages/HireFullStackDevelopers.tsx b/pages/HireFullStackDevelopers.tsx index f490683..f210913 100644 --- a/pages/HireFullStackDevelopers.tsx +++ b/pages/HireFullStackDevelopers.tsx @@ -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 = () => {
- {/* Hero Section */} -
- - {/* Page Title and Meta Description */} - Hire Full Stack Developers from WDI | Expert Web Solutions - + + {/* Page Title and Meta Description */} + Hire Full Stack Developers from WDI | Expert Web Solutions + - {/* Canonical Link */} - + {/* Canonical Link */} + - {/* Open Graph Tags (for Facebook, LinkedIn) */} - - - - - + {/* Open Graph Tags (for Facebook, LinkedIn) */} + + + + + - {/* Twitter Card Tags */} - - - - + {/* Twitter Card Tags */} + + + + - {/* Social Profiles (using JSON-LD Schema) */} - - -
-
+ + -
-
- - End-to-End Development Experts - -

- Hire Full Stack Developers: Comprehensive Solutions from - - {" "} - Front to Back - -

-

- 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. -

-
- - {/* */} -
-
-
-
+ {/* Hero Section */} + + {/* Introduction */}
diff --git a/pages/HireMobileAppDevelopers.tsx b/pages/HireMobileAppDevelopers.tsx index b9e9979..44dcc45 100644 --- a/pages/HireMobileAppDevelopers.tsx +++ b/pages/HireMobileAppDevelopers.tsx @@ -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 (
- - {/* Hero Section */} -
- - {/* Page Title and Meta Description */} - Hire Mobile App Developers | Expert Talent at WDI - + + {/* Page Title and Meta Description */} + Hire Mobile App Developers | Expert Talent at WDI + - {/* Canonical Link */} - + {/* Canonical Link */} + - {/* Open Graph Tags (for Facebook, LinkedIn) */} - - - - - + {/* Open Graph Tags (for Facebook, LinkedIn) */} + + + + + - {/* Twitter Card Tags */} - - - - + {/* Twitter Card Tags */} + + + + - {/* Social Profiles (using JSON-LD Schema) */} - - -
-
- -
-
- - iOS & Android Experts - -

- Hire Mobile App Developers: Bring Your Ideas to Life on - Any Device -

-

- 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. -

-
- - {/* */} -
-
-
-
+ + + {/* Hero Section with MobileAppVector */} + {/* Introduction */}
@@ -204,21 +195,21 @@ export const HireMobileAppDevelopers = () => { Comprehensive mobile development skills across all major platforms and frameworks

- +
{expertise.map((area, index) => ( - +

{area.title}

- +

{area.description}

- +
{area.skills.map((skill, skillIndex) => ( @@ -244,7 +235,7 @@ export const HireMobileAppDevelopers = () => { Comprehensive mobile solutions that exceed expectations

- +
{deliverables.map((item, index) => ( @@ -274,7 +265,7 @@ export const HireMobileAppDevelopers = () => { Our mobile developers excel across various industry verticals

- +
{projectTypes.map((project, index) => (
@@ -335,7 +326,7 @@ export const HireMobileAppDevelopers = () => {