completed hire talent banner and in homepage added new service section

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