From 1d552eb2fca1f93283c0481ae60462ca19a39132 Mon Sep 17 00:00:00 2001
From: priyanshuvish <vishpriyanshu172@gmail.com>
Date: Fri, 8 Aug 2025 19:23:45 +0530
Subject: [PATCH] completed hire talent banner and in homepage added new
 service section

---
 App.tsx                             | 327 ++++++++++++++++++++--------
 pages/DedicatedDevelopmentTeams.tsx |  75 +++----
 pages/EngagementModels.tsx          |  76 +++----
 pages/HireQAEngineers.tsx           | 138 +++++-------
 pages/HireUIUXDesigners.tsx         |  78 +++----
 pages/TeamAugmentationServices.tsx  |  76 +++----
 6 files changed, 422 insertions(+), 348 deletions(-)

diff --git a/App.tsx b/App.tsx
index db6a934..1bbb508 100644
--- a/App.tsx
+++ b/App.tsx
@@ -1,93 +1,91 @@
-import { useState, useEffect } from "react";
-import { Navigation } from "./components/Navigation";
-import { HeroSection } from "./components/HeroSection";
-import { ClientLogos } from "./components/ClientLogos";
-import { ServicesSection } from "./components/ServicesSection";
-import { WhyChooseWDI } from "./components/WhyChooseWDI";
-import { HorizontalTagScroller } from "./components/HorizontalTagScroller";
-import { CaseStudyHighlight } from "./components/CaseStudyHighlight";
-import { InlineCTA } from "./components/InlineCTA";
-import { ProcessSection } from "./components/ProcessSection";
+import { useEffect, useState } from "react";
 import { CarouselTestimonials } from "./components/CarouselTestimonials";
+import { CaseStudyHighlight } from "./components/CaseStudyHighlight";
+import { ClientLogos } from "./components/ClientLogos";
+import { Footer } from "./components/Footer";
+import { HeroSection } from "./components/HeroSection";
+import { HorizontalTagScroller } from "./components/HorizontalTagScroller";
+import { InlineCTA } from "./components/InlineCTA";
+import { Navigation } from "./components/Navigation";
+import { ProcessSection } from "./components/ProcessSection";
 import { ResourceCards } from "./components/ResourceCards";
 import { SplitCallToAction } from "./components/SplitCallToAction";
-import { Footer } from "./components/Footer";
 import { Button } from "./components/ui/button";
+import { WhyChooseWDI } from "./components/WhyChooseWDI";
 
 // Main Category Pages
-import { Services } from "./pages/Services";
-import { Solutions } from "./pages/Solutions";
-import { Industries } from "./pages/Industries";
-import { Resources } from "./pages/Resources";
-import { Company } from "./pages/Company";
-import { ContactMain } from "./pages/ContactMain";
-import { WebCloudServices } from "./pages/WebCloudServices";
-import { SoftwareEngineering } from "./pages/SoftwareEngineering";
-import { DesignExperience } from "./pages/DesignExperience";
 import { ArtificialIntelligenceServices } from "./pages/ArtificialIntelligenceServices";
+import { ContactMain } from "./pages/ContactMain";
+import { DesignExperience } from "./pages/DesignExperience";
+import { Industries } from "./pages/Industries";
 import { MachineLearning } from "./pages/MachineLearning";
+import { Resources } from "./pages/Resources";
+import { Services } from "./pages/Services";
+import { SoftwareEngineering } from "./pages/SoftwareEngineering";
+import { Solutions } from "./pages/Solutions";
+import { WebCloudServices } from "./pages/WebCloudServices";
 
 // Service Pages
-import { MobileAppDevelopment } from "./pages/MobileAppDevelopment";
-import { IOSAppDevelopment } from "./pages/iOSAppDevelopment";
-import { AndroidAppDevelopment } from "./pages/AndroidAppDevelopment";
-import { CrossPlatformAppDevelopment } from "./pages/CrossPlatformAppDevelopment";
-import { NativeAppDevelopment } from "./pages/NativeAppDevelopment";
-import { PWADevelopment } from "./pages/PWADevelopment";
-import { WearableDeviceDevelopment } from "./pages/WearableDeviceDevelopment";
-import { CustomWebAppDevelopment } from "./pages/CustomWebAppDevelopment";
-import { SaaSProductEngineering } from "./pages/SaaSProductEngineering";
-import { EcommercePlatforms } from "./pages/EcommercePlatforms";
 import { AdminPanelsDashboards } from "./pages/AdminPanelsDashboards";
+import { AIAutomationWorkflows } from "./pages/AIAutomationWorkflows";
+import { AIChatbotsVirtualAssistants } from "./pages/AIChatbotsVirtualAssistants";
+import { AIIntegrationDigitalProducts } from "./pages/AIIntegrationDigitalProducts";
+import { AIModelDeploymentMLOps } from "./pages/AIModelDeploymentMLOps";
+import { AIStrategyConsulting } from "./pages/AIStrategyConsulting";
+import { AndroidAppDevelopment } from "./pages/AndroidAppDevelopment";
 import { APIBackendDevelopment } from "./pages/APIBackendDevelopment";
+import { ClickablePrototypes } from "./pages/ClickablePrototypes";
+import { ComputerVisionApplications } from "./pages/ComputerVisionApplications";
+import { CrossPlatformAppDevelopment } from "./pages/CrossPlatformAppDevelopment";
+import { CustomMLModelDevelopment } from "./pages/CustomMLModelDevelopment";
+import { CustomWebAppDevelopment } from "./pages/CustomWebAppDevelopment";
+import { DesignThinkingWorkshops } from "./pages/DesignThinkingWorkshops";
+import { EcommercePlatforms } from "./pages/EcommercePlatforms";
 import { EnterpriseSoftwareSolutions } from "./pages/EnterpriseSoftwareSolutions";
+import { GenAIIntegrationDigitalProducts } from "./pages/GenAIIntegrationDigitalProducts";
+import { IOSAppDevelopment } from "./pages/iOSAppDevelopment";
+import { MobileAppDevelopment } from "./pages/MobileAppDevelopment";
+import { NativeAppDevelopment } from "./pages/NativeAppDevelopment";
+import { NLPTextAnalytics } from "./pages/NLPTextAnalytics";
+import { PredictiveAnalyticsForecasting } from "./pages/PredictiveAnalyticsForecasting";
+import { ProductModernization } from "./pages/ProductModernization";
+import { PWADevelopment } from "./pages/PWADevelopment";
+import { RecommendationEngines } from "./pages/RecommendationEngines";
+import { SaaSProductEngineering } from "./pages/SaaSProductEngineering";
 import { SystemArchitectureDevOps } from "./pages/SystemArchitectureDevOps";
 import { ThirdPartyIntegrations } from "./pages/ThirdPartyIntegrations";
-import { ProductModernization } from "./pages/ProductModernization";
 import { UIUXDesign } from "./pages/UIUXDesign";
-import { ClickablePrototypes } from "./pages/ClickablePrototypes";
-import { DesignThinkingWorkshops } from "./pages/DesignThinkingWorkshops";
 import { UserResearchTesting } from "./pages/UserResearchTesting";
-import { AIStrategyConsulting } from "./pages/AIStrategyConsulting";
-import { AIAutomationWorkflows } from "./pages/AIAutomationWorkflows";
-import { AIIntegrationDigitalProducts } from "./pages/AIIntegrationDigitalProducts";
-import { GenAIIntegrationDigitalProducts } from "./pages/GenAIIntegrationDigitalProducts";
-import { AIChatbotsVirtualAssistants } from "./pages/AIChatbotsVirtualAssistants";
-import { AIModelDeploymentMLOps } from "./pages/AIModelDeploymentMLOps";
-import { CustomMLModelDevelopment } from "./pages/CustomMLModelDevelopment";
-import { PredictiveAnalyticsForecasting } from "./pages/PredictiveAnalyticsForecasting";
-import { ComputerVisionApplications } from "./pages/ComputerVisionApplications";
-import { NLPTextAnalytics } from "./pages/NLPTextAnalytics";
-import { RecommendationEngines } from "./pages/RecommendationEngines";
+import { WearableDeviceDevelopment } from "./pages/WearableDeviceDevelopment";
 
 // Solution Pages
-import { DigitalProductDevelopment } from "./pages/DigitalProductDevelopment";
-import { MVPStartupLaunchPackages } from "./pages/MVPStartupLaunchPackages";
-import { LegacySystemRebuilds } from "./pages/LegacySystemRebuilds";
-import { DedicatedOffshoreODC } from "./pages/DedicatedOffshoreODC";
 import { BusinessProcessAutomation } from "./pages/BusinessProcessAutomation";
 import { ComplianceReadySystems } from "./pages/ComplianceReadySystems";
+import { DedicatedOffshoreODC } from "./pages/DedicatedOffshoreODC";
+import { DigitalProductDevelopment } from "./pages/DigitalProductDevelopment";
+import { LegacySystemRebuilds } from "./pages/LegacySystemRebuilds";
+import { MVPStartupLaunchPackages } from "./pages/MVPStartupLaunchPackages";
 
 // Industry Pages - Financial Services
 import { FinTechBankingApps } from "./pages/FinTechBankingApps";
-import { WealthTechPlatforms } from "./pages/WealthTechPlatforms";
 import { RealEstateTech } from "./pages/RealEstateTech";
+import { WealthTechPlatforms } from "./pages/WealthTechPlatforms";
 
 // Industry Pages - Healthcare & Wellness
+import { FitnessWellnessPlatforms } from "./pages/FitnessWellnessPlatforms";
 import { HealthTechApplications } from "./pages/HealthTechApplications";
 import { MedicalComplianceSolutions } from "./pages/MedicalComplianceSolutions";
-import { FitnessWellnessPlatforms } from "./pages/FitnessWellnessPlatforms";
 
 // Industry Pages - Learning & Education
 import { EdTechPlatforms } from "./pages/EdTechPlatforms";
-import { VirtualClassroomsLMS } from "./pages/VirtualClassroomsLMS";
 import { MicrolearningApps } from "./pages/MicrolearningApps";
+import { VirtualClassroomsLMS } from "./pages/VirtualClassroomsLMS";
 
 // Industry Pages - Commerce & Consumer
 import { EcommerceMarketplaces } from "./pages/EcommerceMarketplaces";
+import { EventTicketingSolutions } from "./pages/EventTicketingSolutions";
 import { FoodOrderingDelivery } from "./pages/FoodOrderingDelivery";
 import { TravelBookingSystems } from "./pages/TravelBookingSystems";
-import { EventTicketingSolutions } from "./pages/EventTicketingSolutions";
 
 // Industry Pages - Media & Community
 import { OTTStreamingApps } from "./pages/OTTStreamingApps";
@@ -95,70 +93,73 @@ import { SocialPlatformsNetworks } from "./pages/SocialPlatformsNetworks";
 import { SportsFanEngagement } from "./pages/SportsFanEngagement";
 
 // Industry Pages - Mobility & Logistics
-import { TransportationApps } from "./pages/TransportationApps";
 import { OnDemandServices } from "./pages/OnDemandServices";
 import { SupplyChainFleetManagement } from "./pages/SupplyChainFleetManagement";
+import { TransportationApps } from "./pages/TransportationApps";
 
 // Industry Pages - Industrial & Emerging Tech
-import { ManufacturingAutomation } from "./pages/ManufacturingAutomation";
 import { AgriTechPlatforms } from "./pages/AgriTechPlatforms";
+import { ManufacturingAutomation } from "./pages/ManufacturingAutomation";
 import { OilGasMonitoringSystems } from "./pages/OilGasMonitoringSystems";
 
 // Company Pages
 import { AboutWDI } from "./pages/AboutWDI";
-import { OurHistory } from "./pages/OurHistory";
-import { LeadershipTeam } from "./pages/LeadershipTeam";
 import { AwardsCertifications } from "./pages/AwardsCertifications";
 import { Careers } from "./pages/Careers";
 import { CultureValues } from "./pages/CultureValues";
+import { LeadershipTeam } from "./pages/LeadershipTeam";
+import { OurHistory } from "./pages/OurHistory";
 import { PressMedia } from "./pages/PressMedia";
 
 // Hire Talent Pages
-import { HireTalent } from "./pages/HireTalent";
-import { HireMobileAppDevelopers } from "./pages/HireMobileAppDevelopers";
-import { HireFullStackDevelopers } from "./pages/HireFullStackDevelopers";
-import { HireFrontendDevelopers } from "./pages/HireFrontendDevelopers";
-import { HireBackendDevelopers } from "./pages/HireBackendDevelopers";
-import { HireUIUXDesigners } from "./pages/HireUIUXDesigners";
-import { HireQAEngineers } from "./pages/HireQAEngineers";
 import { DedicatedDevelopmentTeams } from "./pages/DedicatedDevelopmentTeams";
 import { EngagementModels } from "./pages/EngagementModels";
+import { HireBackendDevelopers } from "./pages/HireBackendDevelopers";
+import { HireFrontendDevelopers } from "./pages/HireFrontendDevelopers";
+import { HireFullStackDevelopers } from "./pages/HireFullStackDevelopers";
+import { HireMobileAppDevelopers } from "./pages/HireMobileAppDevelopers";
+import { HireQAEngineers } from "./pages/HireQAEngineers";
+import { HireTalent } from "./pages/HireTalent";
+import { HireUIUXDesigners } from "./pages/HireUIUXDesigners";
 import { TeamAugmentationServices } from "./pages/TeamAugmentationServices";
 
 // Resource Pages
 import { Blog } from "./pages/Blog";
 import { CaseStudies } from "./pages/CaseStudies";
 import { ClientTestimonials } from "./pages/ClientTestimonials";
-import { WhitepapersInsights } from "./pages/WhitepapersInsights";
 import { FAQs } from "./pages/FAQs";
+import { WhitepapersInsights } from "./pages/WhitepapersInsights";
 
 // Contact Pages
-import { Contact } from "./pages/Contact";
-import { RequestProposal } from "./pages/RequestProposal";
-import { ScheduleDiscoveryCall } from "./pages/ScheduleDiscoveryCall";
-import { OfficeLocations } from "./pages/OfficeLocations";
+import { motion } from "framer-motion";
+import { ChevronRight } from "lucide-react";
+import { Helmet } from "react-helmet-async";
+import { CookieConsent } from "./components/CookieConsent";
+import { ArticleDetail } from "./pages/ArticleDetail";
+import { AutomationReshapingBusiness } from "./pages/AutomationReshapingBusiness";
+import { BuildingYourAPIStack } from "./pages/BuildingYourAPIStack";
 import { ClientSupport } from "./pages/ClientSupport";
-import { SendYourCV } from "./pages/SendYourCV";
-import { StartAProject } from "./pages/StartAProject";
-import { ThankYou } from "./pages/ThankYou";
-import { RegroupProject } from "./pages/RegroupProject";
-import { SeezunProject } from "./pages/SeezunProject";
-import { WokaProject } from "./pages/WokaProject";
-import { TanamiProject } from "./pages/TanamiProject";
-import { TradersCircuitProject } from "./pages/TradersCircuitProject";
+import { ComplianceReadyFintech } from "./pages/ComplianceReadyFintech";
+import { Contact } from "./pages/Contact";
+import { FutureOfAIHealthcare } from "./pages/FutureOfAIHealthcare";
 import { GoodTimesProject } from "./pages/GoodTimesProject";
+import { LegacySystemScaling } from "./pages/LegacySystemScaling";
+import { MigratingToLinear101 } from "./pages/MigratingToLinear101";
+import { OfficeLocations } from "./pages/OfficeLocations";
 import { ProspertyProject } from "./pages/ProspertyProject";
 import { RanOutOfProject } from "./pages/RanOutOfProject";
-import { ArticleDetail } from "./pages/ArticleDetail";
-import { FutureOfAIHealthcare } from "./pages/FutureOfAIHealthcare";
-import { ComplianceReadyFintech } from "./pages/ComplianceReadyFintech";
-import { LegacySystemScaling } from "./pages/LegacySystemScaling";
-import { AutomationReshapingBusiness } from "./pages/AutomationReshapingBusiness";
+import { RegroupProject } from "./pages/RegroupProject";
+import { RequestProposal } from "./pages/RequestProposal";
+import { ScheduleDiscoveryCall } from "./pages/ScheduleDiscoveryCall";
+import { SeezunProject } from "./pages/SeezunProject";
+import { SendYourCV } from "./pages/SendYourCV";
+import { StartAProject } from "./pages/StartAProject";
+import { TanamiProject } from "./pages/TanamiProject";
+import { ThankYou } from "./pages/ThankYou";
+import { TradersCircuitProject } from "./pages/TradersCircuitProject";
 import { UXReviewPresentations } from "./pages/UXReviewPresentations";
-import { MigratingToLinear101 } from "./pages/MigratingToLinear101";
-import { BuildingYourAPIStack } from "./pages/BuildingYourAPIStack";
-import { CookieConsent } from "./components/CookieConsent";
-import { Helmet } from "react-helmet-async";
+import { WokaProject } from "./pages/WokaProject";
+
 
 // Create a global navigation context
 let setCurrentPath: ((path: string) => void) | null = null;
@@ -218,6 +219,88 @@ const useRouter = () => {
   return { currentPath };
 };
 
+
+const services = [
+  {
+    title: "Mobile App Development",
+    icon: (
+      <path
+        strokeLinecap="round"
+        strokeLinejoin="round"
+        strokeWidth={1.5}
+        d="M12 18h.01M8 21h8a2 2 0 002-2V5a2 2 0 00-2-2H8a2 2 0 00-2 2v14a2 2 0 002 2z"
+      />
+    ),
+    description: "Native & cross-platform apps with pixel-perfect UIs and seamless user experiences.",
+    link: "/services/mobile-app-development"
+  },
+  {
+    title: "Web Platforms",
+    icon: (
+      <path
+        strokeLinecap="round"
+        strokeLinejoin="round"
+        strokeWidth={1.5}
+        d="M10 20l4-16m4 4l4 4-4 4M6 16l-4-4 4-4"
+      />
+    ),
+    description: "Scalable, secure, and SEO-optimized web applications built for performance.",
+    link: "/web-cloud"
+  },
+  {
+    title: "AI & ML Solutions",
+    icon: (
+      <path
+        strokeLinecap="round"
+        strokeLinejoin="round"
+        strokeWidth={1.5}
+        d="M9.663 17h4.673M12 3v1m6.364 1.636l-.707.707M21 12h-1M4 12H3m3.343-5.657l-.707-.707m2.828 9.9a5 5 0 117.072 0l-.548.547A3.374 3.374 0 0014 18.469V19a2 2 0 11-4 0v-.531c0-.895-.356-1.754-.988-2.386l-.548-.547z"
+      />
+    ),
+    description: "Intelligent features powered by cutting-edge algorithms and machine learning.",
+    link: "/artificial-intelligence"
+  },
+  {
+    title: "DevOps & Cloud",
+    icon: (
+      <path
+        strokeLinecap="round"
+        strokeLinejoin="round"
+        strokeWidth={1.5}
+        d="M5 12h14M5 12a2 2 0 01-2-2V6a2 2 0 012-2h14a2 2 0 012 2v4a2 2 0 01-2 2M5 12a2 2 0 00-2 2v4a2 2 0 002 2h14a2 2 0 002-2v-4a2 2 0 00-2-2m-2-4h.01M17 16h.01"
+      />
+    ),
+    description: "CI/CD pipelines and managed cloud infrastructure for seamless deployment.",
+    link: "/services/system-architecture-devops"
+  },
+  {
+    title: "Product Design",
+    icon: (
+      <path
+        strokeLinecap="round"
+        strokeLinejoin="round"
+        strokeWidth={1.5}
+        d="M7 21a4 4 0 01-4-4V5a2 2 0 012-2h4a2 2 0 012 2v12a4 4 0 01-4 4zM21 5a2 2 0 00-2-2h-4a2 2 0 00-2 2v12a4 4 0 004 4h4a2 2 0 002-2V5z"
+      />
+    ),
+    description: "Human-centered UX with delightful micro-interactions and intuitive interfaces.",
+    link: "/design-experience"
+  },
+  {
+    title: "Security & Compliance",
+    icon: (
+      <path
+        strokeLinecap="round"
+        strokeLinejoin="round"
+        strokeWidth={1.5}
+        d="M9 12l2 2 4-4m5.618-4.016A11.955 11.955 0 0112 2.944a11.955 11.955 0 01-8.618 3.04A12.02 12.02 0 003 9c0 5.591 3.824 10.29 9 11.622 5.176-1.332 9-6.03 9-11.622 0-1.042-.133-2.052-.382-3.016z"
+      />
+    ),
+    description: "Pen-testing, auditing, and regulatory alignment for enterprise-grade security.",
+    link: "/solutions/compliance-ready-systems"
+  }
+];
+
 // Placeholder component for pages that don't exist yet
 const PlaceholderPage = ({
   title = "Coming Soon",
@@ -309,8 +392,80 @@ const Homepage = () => (
     </section>
 
     {/* Services Grid - Dark background */}
-    <section className="bg-background">
+    {/* <section className="bg-background">
       <ServicesSection />
+    </section> */}
+    <section className="py-20 bg-background">
+      <div className="container mx-auto px-6 lg:px-8">
+        <motion.div
+          initial={{ opacity: 0, y: 30 }}
+          whileInView={{ opacity: 1, y: 0 }}
+          transition={{ duration: 0.8 }}
+          viewport={{ once: true }}
+          className="text-left mb-20"
+        >
+          <div className="text-center">
+            <h2 className="text-3xl sm:text-4xl font-semibold tracking-tight text-white">What We Do</h2>
+            <p className="mt-4 text-gray-400 max-w-2xl mx-auto">
+              End-to-end solutions for every stage of your product lifecycle.
+            </p>
+          </div>
+        </motion.div>
+
+        <motion.div
+          initial={{ opacity: 0, y: 40 }}
+          whileInView={{ opacity: 1, y: 0 }}
+          transition={{ duration: 0.8, delay: 0.2 }}
+          viewport={{ once: true }}
+          className="grid md:grid-cols-2 lg:grid-cols-3 gap-8"
+        >
+          {services.map((service, index) => {
+            const IconComponent = service.icon;
+            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 }}
+                className="group cursor-pointer"
+                onClick={() => navigateTo(service.link)}
+              >
+                <div className="bg-gray-900/50 backdrop-blur-sm rounded-2xl border border-gray-800 p-8 hover:border-accent/30 transition-all duration-300 shadow-lg hover:shadow-xl h-full">
+                  <div className="flex flex-col items-start space-y-6">
+                    <div className="w-12 h-12 bg-accent/20 rounded-lg flex items-center justify-center">
+                      {/* <IconComponent className="w-6 h-6 text-accent" /> */}
+                      <svg
+                        className="w-6 h-6 text-accent"
+                        fill="none"
+                        stroke="currentColor"
+                        viewBox="0 0 24 24"
+                      >
+                        {service.icon}
+                      </svg>
+                    </div>
+
+                    <div>
+                      <h3 className="text-xl font-semibold text-white mb-4">
+                        {service.title}
+                      </h3>
+                      <p className="text-gray-400 leading-relaxed">
+                        {service.description}
+                      </p>
+                    </div>
+
+                    <div className="flex items-center gap-2 text-accent font-medium">
+                      <span>Explore Services</span>
+                      <ChevronRight className="w-4 h-4" />
+                    </div>
+                  </div>
+                </div>
+              </motion.div>
+            );
+          })}
+        </motion.div>
+      </div>
     </section>
 
     {/* Why Choose WDI - Dark background */}
diff --git a/pages/DedicatedDevelopmentTeams.tsx b/pages/DedicatedDevelopmentTeams.tsx
index 983294b..87b92fa 100644
--- a/pages/DedicatedDevelopmentTeams.tsx
+++ b/pages/DedicatedDevelopmentTeams.tsx
@@ -16,9 +16,12 @@ import {
   Shield,
   CheckCircle,
   Star,
+  UsersRound,
 } from "lucide-react";
 import { navigateTo } from "@/App";
 import { Helmet } from "react-helmet-async";
+import { TeamCollaborationVector } from "@/components/vectors";
+import { HireTalentHeroBanner } from "@/components/HireTalentHeroBanner";
 
 export const DedicatedDevelopmentTeams = () => {
   const benefits = [
@@ -60,6 +63,24 @@ export const DedicatedDevelopmentTeams = () => {
     },
   ];
 
+  const heroBanner = [
+    {
+      category: "Team Solutions",
+      title: "Dedicated Development Teams",
+      description: "Build your extended development team with our dedicated developers who work exclusively on your projects. Scale fast with pre-vetted talent that integrates seamlessly with your processes.",
+      primaryCTA: {
+        text: "Build Your Team",
+        href: "/start-a-project",
+        icon: UsersRound
+      },
+      secondaryCTA: {
+        text: "View Team Models",
+        href: "/engagement-models",
+        icon: Users
+      }
+    },
+  ]
+
   const process = [
     {
       step: "01",
@@ -121,9 +142,7 @@ export const DedicatedDevelopmentTeams = () => {
     <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>Dedicated Development Teams for Hire | WDI</title>
         <meta
@@ -170,48 +189,16 @@ export const DedicatedDevelopmentTeams = () => {
                             `}
         </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]"
-            >
-              Build Your Remote Tech Hub
-            </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">
-              Dedicated Development Teams: Your Extended
-              <span className="bg-gradient-to-r from-[#E5195E] to-[#FF6B9D] bg-clip-text text-transparent">
-                {" "}
-                Tech Arm
-              </span>
-            </h1>
-            <p className="text-lg md:text-xl text-muted-foreground mb-8 max-w-3xl mx-auto leading-relaxed">
-              Build Your Innovation Hub with a Seamlessly Integrated Dedicated
-              Team. In today's competitive landscape, scaling your tech
-              capabilities rapidly and efficiently is paramount.
-            </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")}
-              >
-                Build Your Dedicated Team
-                <ArrowRight className="ml-2 w-4 h-4" />
-              </Button>
-            </div>
-          </div>
-        </div>
-      </section>
+      {/* Hero Section */}
+      <HireTalentHeroBanner
+        vectorComponent={TeamCollaborationVector}
+        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">
diff --git a/pages/EngagementModels.tsx b/pages/EngagementModels.tsx
index 129e19b..f1feab7 100644
--- a/pages/EngagementModels.tsx
+++ b/pages/EngagementModels.tsx
@@ -17,6 +17,8 @@ import {
 } from "lucide-react";
 import { navigateTo } from "@/App";
 import { Helmet } from "react-helmet-async";
+import { EngagementModelsVector } from "@/components/vectors";
+import { HireTalentHeroBanner } from "@/components/HireTalentHeroBanner";
 
 export const EngagementModels = () => {
   const models = [
@@ -112,6 +114,24 @@ export const EngagementModels = () => {
     },
   ];
 
+  const heroBanner =[
+    {
+    category: "Engagement Options",
+    title: "Flexible Engagement Models",
+    description: "Choose from our flexible engagement models designed to fit your project needs, budget, and timeline. From fixed-price projects to dedicated teams, find the perfect collaboration approach.",
+    primaryCTA: {
+      text: "Explore Models",
+      href: "/start-a-project",
+      icon: Target
+    },
+    secondaryCTA: {
+      text: "Get Consultation",
+      href: "/hire-talent",
+      icon: Users
+    }
+  },
+  ]
+
   const testimonials = [
     {
       quote:
@@ -133,8 +153,6 @@ export const EngagementModels = () => {
     <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>Engagement Models | Flexible Software Development Options</title>
@@ -182,51 +200,15 @@ export const EngagementModels = () => {
                             `}
         </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]"
-            >
-              Tailored Solutions for Your Business
-            </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">
-              Engagement Models: Tailored Solutions for Your
-              <span className="bg-gradient-to-r from-[#E5195E] to-[#FF6B9D] bg-clip-text text-transparent">
-                {" "}
-                Project Success
-              </span>
-            </h1>
-            <p className="text-lg md:text-xl text-muted-foreground mb-8 max-w-3xl mx-auto leading-relaxed">
-              Choose the Model That Fits Your Project, Budget, and Goals
-              Perfectly. At WDI, we understand that every project is unique,
-              with distinct requirements and budgetary considerations.
-            </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")}
-              >
-                Let's Discuss Your Project
-                <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 Personalized Proposal
-              </Button> */}
-            </div>
-          </div>
-        </div>
-      </section>
+      {/* Hero Section */}
+      <HireTalentHeroBanner
+        vectorComponent={EngagementModelsVector}
+        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">
diff --git a/pages/HireQAEngineers.tsx b/pages/HireQAEngineers.tsx
index 3d376b9..852589f 100644
--- a/pages/HireQAEngineers.tsx
+++ b/pages/HireQAEngineers.tsx
@@ -19,6 +19,8 @@ import {
 } from "lucide-react";
 import { navigateTo } from "@/App";
 import { Helmet } from "react-helmet-async";
+import { QATestingVector } from "@/components/vectors";
+import { HireTalentHeroBanner } from "@/components/HireTalentHeroBanner";
 
 export const HireQAEngineers = () => {
   const expertise = [
@@ -99,6 +101,24 @@ export const HireQAEngineers = () => {
     },
   ];
 
+  const heroBanner = [
+    {
+      category: "Hire Expert Engineers",
+      title: "Hire QA Engineers",
+      description: "Access skilled QA engineers who ensure your software meets the highest quality standards. From manual testing to test automation, deliver bug-free, reliable applications that users trust.",
+      primaryCTA: {
+        text: "Hire QA Engineers",
+        href: "/start-a-project",
+        icon: Shield
+      },
+      secondaryCTA: {
+        text: "View QA Profiles",
+        href: "/hire-talent",
+        icon: Users
+      }
+    },
+  ]
+
   const deliverables = [
     {
       icon: Bug,
@@ -204,41 +224,39 @@ export const HireQAEngineers = () => {
     <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 QA Engineers from WDI | Ensure Software Quality</title>
-          <meta
-            name="description"
-            content="Hire QA Engineers from WDI to deliver bug-free, high-quality software. Ensure seamless performance with our expert testing and quality assurance team."
-          />
+      <Helmet>
+        {/* Page Title and Meta Description */}
+        <title>Hire QA Engineers from WDI | Ensure Software Quality</title>
+        <meta
+          name="description"
+          content="Hire QA Engineers from WDI to deliver bug-free, high-quality software. Ensure seamless performance with our expert testing and quality assurance team."
+        />
 
-          {/* Canonical Link */}
-          <link rel="canonical" href="https://www.wdipl.com/hire-talent/qa-engineers" />
+        {/* Canonical Link */}
+        <link rel="canonical" href="https://www.wdipl.com/hire-talent/qa-engineers" />
 
-          {/* Open Graph Tags (for Facebook, LinkedIn) */}
-          <meta property="og:title" content="Hire QA Engineers from WDI | Ensure Software Quality" />
-          <meta
-            property="og:description"
-            content="Hire QA Engineers from WDI to deliver bug-free, high-quality software. Ensure seamless performance with our expert testing and quality assurance team."
-          />
-          <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 QA Engineers from WDI | Ensure Software Quality" />
+        <meta
+          property="og:description"
+          content="Hire QA Engineers from WDI to deliver bug-free, high-quality software. Ensure seamless performance with our expert testing and quality assurance team."
+        />
+        <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 QA Engineers from WDI | Ensure Software Quality" />
-          <meta
-            name="twitter:description"
-            content="Hire QA Engineers from WDI to deliver bug-free, high-quality software. Ensure seamless performance with our expert testing and quality assurance team."
-          />
-          <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 QA Engineers from WDI | Ensure Software Quality" />
+        <meta
+          name="twitter:description"
+          content="Hire QA Engineers from WDI to deliver bug-free, high-quality software. Ensure seamless performance with our expert testing and quality assurance team."
+        />
+        <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",
@@ -251,54 +269,18 @@ export const HireQAEngineers = () => {
                                 ]
                               }
                             `}
-          </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]"
-            >
-              Ensuring Software Quality & Reliability
-            </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 QA Engineers: Ensuring Flawless
-              <span className="bg-gradient-to-r from-[#E5195E] to-[#FF6B9D] bg-clip-text text-transparent">
-                {" "}
-                Performance and Reliability
-              </span>
-            </h1>
-            <p className="text-lg md:text-xl text-muted-foreground mb-8 max-w-3xl mx-auto leading-relaxed">
-              Quality Assurance (QA) is critical for delivering reliable,
-              high-performing software. WDI provides highly skilled QA engineers
-              who are meticulous in identifying and resolving defects, ensuring
-              your product meets the highest standards.
-            </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")}
-              >
-                Strengthen Your Software Quality
-                <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 Testing Needs
-              </Button> */}
-            </div>
-          </div>
-        </div>
-      </section>
+      {/* Hero Section */}
+      <HireTalentHeroBanner
+        vectorComponent={QATestingVector}
+        category={heroBanner[0].category}
+        title={heroBanner[0].title}
+        description={heroBanner[0].description}
+        primaryCTA={heroBanner[0].primaryCTA}
+        secondaryCTA={heroBanner[0].secondaryCTA}
+      />
 
       {/* Testing Tools & Technologies */}
       <section className="py-16 bg-card/50">
diff --git a/pages/HireUIUXDesigners.tsx b/pages/HireUIUXDesigners.tsx
index 404ffba..1c5ea8e 100644
--- a/pages/HireUIUXDesigners.tsx
+++ b/pages/HireUIUXDesigners.tsx
@@ -18,6 +18,8 @@ import {
 } from "lucide-react";
 import { navigateTo } from "@/App";
 import { Helmet } from "react-helmet-async";
+import { UIUXVector } from "@/components/vectors";
+import { HireTalentHeroBanner } from "@/components/HireTalentHeroBanner";
 
 export const HireUIUXDesigners = () => {
   const expertise = [
@@ -96,6 +98,24 @@ export const HireUIUXDesigners = () => {
     },
   ];
 
+  const heroBanner = [
+    {
+      category: "Hire Expert Designers",
+      title: "Hire UI/UX Designers",
+      description: "Get access to expert UI/UX designers who create intuitive, beautiful, and user-centered digital experiences. Transform your ideas into engaging designs that users love and convert.",
+      primaryCTA: {
+        text: "Hire UI/UX Designers",
+        href: "/start-a-project",
+        icon: Palette
+      },
+      secondaryCTA: {
+        text: "View Designer Portfolios",
+        href: "/hire-talent",
+        icon: Users
+      }
+    },
+  ]
+
   const deliverables = [
     {
       icon: Users,
@@ -181,9 +201,7 @@ export const HireUIUXDesigners = () => {
     <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 UI/UX Designers for Your Project | WDI</title>
         <meta
@@ -230,52 +248,16 @@ export const HireUIUXDesigners = () => {
                             `}
         </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]"
-            >
-              Creating Intuitive & Beautiful Digital 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 UI/UX Designers: Crafting Intuitive & Beautiful
-              <span className="bg-gradient-to-r from-[#E5195E] to-[#FF6B9D] bg-clip-text text-transparent">
-                {" "}
-                Digital Experiences
-              </span>
-            </h1>
-            <p className="text-lg md:text-xl text-muted-foreground mb-8 max-w-3xl mx-auto leading-relaxed">
-              Exceptional user experience (UX) and captivating user interface
-              (UI) are the cornerstones of successful digital products. WDI
-              connects you with talented UI/UX designers who blend creativity
-              with user psychology.
-            </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")}
-              >
-                Transform Your User Experience
-                <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 Design Portfolios
-              </Button> */}
-            </div>
-          </div>
-        </div>
-      </section>
+      {/* Hero Section */}
+      <HireTalentHeroBanner
+        vectorComponent={UIUXVector}
+        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">
diff --git a/pages/TeamAugmentationServices.tsx b/pages/TeamAugmentationServices.tsx
index 2e9245a..5b103f8 100644
--- a/pages/TeamAugmentationServices.tsx
+++ b/pages/TeamAugmentationServices.tsx
@@ -21,9 +21,12 @@ import {
   Palette,
   TestTube,
   Settings,
+  UserPlus,
 } from "lucide-react";
 import { navigateTo } from "@/App";
 import { Helmet } from "react-helmet-async";
+import { DeveloperSkillsVector } from "@/components/vectors";
+import { HireTalentHeroBanner } from "@/components/HireTalentHeroBanner";
 
 export const TeamAugmentationServices = () => {
   const benefits = [
@@ -65,6 +68,24 @@ export const TeamAugmentationServices = () => {
     },
   ];
 
+  const heroBanner = [
+    {
+      category: "Team Enhancement",
+      title: "Team Augmentation Services",
+      description: "Enhance your existing development team with our skilled professionals. Fill skill gaps, accelerate delivery, and scale your capabilities without the overhead of full-time hiring.",
+      primaryCTA: {
+        text: "Augment Your Team",
+        href: "/start-a-project",
+        icon: UserPlus
+      },
+      secondaryCTA: {
+        text: "View Available Skills",
+        href: "/hire-talent",
+        icon: Users
+      }
+    },
+  ]
+
   const process = [
     {
       step: "01",
@@ -184,9 +205,7 @@ export const TeamAugmentationServices = () => {
     <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>Team Augmentation Services by WDI | Scalable IT Talent</title>
         <meta
@@ -233,49 +252,16 @@ export const TeamAugmentationServices = () => {
                             `}
         </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]"
-            >
-              Scale Your Development Capacity
-            </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">
-              Team Augmentation Services: Seamlessly Scale Your
-              <span className="bg-gradient-to-r from-[#E5195E] to-[#FF6B9D] bg-clip-text text-transparent">
-                {" "}
-                Development Capacity
-              </span>
-            </h1>
-            <p className="text-lg md:text-xl text-muted-foreground mb-8 max-w-3xl mx-auto leading-relaxed">
-              Instantly Boost Your Team's Expertise and Accelerate Project
-              Delivery. Facing skill gaps, fluctuating project demands, or tight
-              deadlines? WDI's Team Augmentation Services provide the perfect
-              solution.
-            </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")}
-              >
-                Augment Your Team Today
-                <ArrowRight className="ml-2 w-4 h-4" />
-              </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">