working on hire talent banner

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 = () => {
     <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 Frontend Developers | Skilled Talent at WDI</title>
         <meta
@@ -180,52 +197,17 @@ export const HireFrontendDevelopers = () => {
                             `}
         </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]"
-            >
-              Crafting Engaging User 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 Frontend Developers: Crafting Intuitive and
-              <span className="bg-gradient-to-r from-[#E5195E] to-[#FF6B9D] bg-clip-text text-transparent">
-                {" "}
-                Engaging User Experiences
-              </span>
-            </h1>
-            <p className="text-lg md:text-xl text-muted-foreground mb-8 max-w-3xl mx-auto leading-relaxed">
-              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.
-            </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")}
-              >
-                Find Your Frontend Specialist
-                <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 UI Needs
-              </Button> */}
-            </div>
-          </div>
-        </div>
-      </section>
+      {/* Hero Section */}
+
+      <HireTalentHeroBanner
+        vectorComponent={FrontendVector}
+        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">