completed hire talent banner and in homepage added new service section
This commit is contained in:
priyanshuvish
327
App.tsx
327
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 */}
|
||||
|
||||
@@ -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">
|
||||
|
||||
@@ -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">
|
||||
|
||||
@@ -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">
|
||||
|
||||
@@ -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">
|
||||
|
||||
@@ -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">
|
||||
|
||||
Reference in New Issue
Block a user