completed hire talent banner and in homepage added new service section

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