global css

Reviewed-on: PriyanshuVishwakarma/Wdipl-react#3

.gitignore

@@ -11,6 +11,7 @@ node_modules
 dist
 dist-ssr
 *.local
+package-lock.json
 
 # Editor directories and files
 .vscode/*
@@ -44,6 +45,12 @@ out/
 .cache/
 public/
 
+# BUT allow the folder and sitemap.xml inside it
+!public/
+!public/sitemap.xml
+!public/wdi-logo.ico
+!public/robots.txt
+
 # Storybook
 storybook-static
 

App.tsx

@@ -1,590 +1,34 @@
-import { useState, useEffect } from "react";
+// App.tsx
 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 { CarouselTestimonials } from "./components/CarouselTestimonials";
-import { ResourceCards } from "./components/ResourceCards";
-import { SplitCallToAction } from "./components/SplitCallToAction";
 import { Footer } from "./components/Footer";
-import { Button } from "./components/ui/button";
-
-// 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 { MachineLearning } from "./pages/MachineLearning";
-
-// 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 { APIBackendDevelopment } from "./pages/APIBackendDevelopment";
-import { EnterpriseSoftwareSolutions } from "./pages/EnterpriseSoftwareSolutions";
-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";
-
-// 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";
-
-// Industry Pages - Financial Services
-import { FinTechBankingApps } from "./pages/FinTechBankingApps";
-import { WealthTechPlatforms } from "./pages/WealthTechPlatforms";
-import { RealEstateTech } from "./pages/RealEstateTech";
-
-// Industry Pages - Healthcare & Wellness
-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";
-
-// Industry Pages - Commerce & Consumer
-import { EcommerceMarketplaces } from "./pages/EcommerceMarketplaces";
-import { FoodOrderingDelivery } from "./pages/FoodOrderingDelivery";
-import { TravelBookingSystems } from "./pages/TravelBookingSystems";
-import { EventTicketingSolutions } from "./pages/EventTicketingSolutions";
-
-// Industry Pages - Media & Community
-import { OTTStreamingApps } from "./pages/OTTStreamingApps";
-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";
-
-// Industry Pages - Industrial & Emerging Tech
-import { ManufacturingAutomation } from "./pages/ManufacturingAutomation";
-import { AgriTechPlatforms } from "./pages/AgriTechPlatforms";
-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 { 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 { 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";
-
-// Contact Pages
-import { Contact } from "./pages/Contact";
-import { RequestProposal } from "./pages/RequestProposal";
-import { ScheduleDiscoveryCall } from "./pages/ScheduleDiscoveryCall";
-import { OfficeLocations } from "./pages/OfficeLocations";
-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 { GoodTimesProject } from "./pages/GoodTimesProject";
-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 { UXReviewPresentations } from "./pages/UXReviewPresentations";
-import { MigratingToLinear101 } from "./pages/MigratingToLinear101";
-import { BuildingYourAPIStack } from "./pages/BuildingYourAPIStack";
 import { CookieConsent } from "./components/CookieConsent";
-
-// Create a global navigation context
-let setCurrentPath: ((path: string) => void) | null = null;
+import { AppRouter } from "./src/Router";
+import { useLocation } from "react-router-dom";
+import { useEffect } from "react";
 
 // Smooth scroll to top function
 const scrollToTop = () => {
-  const scrollStep = -window.scrollY / (300 / 15); // Duration in ms / frame rate
-  const scrollInterval = () => {
-    if (window.scrollY !== 0) {
-      window.scrollBy(0, scrollStep);
-      window.requestAnimationFrame(scrollInterval);
-    }
-  };
-  window.requestAnimationFrame(scrollInterval);
+  window.scrollTo({ top: 0, behavior: 'smooth' });
 };
 
-export const navigateTo = (path: string) => {
-  if (setCurrentPath) {
-    // First update the URL and path
-    window.history.pushState({}, "", path);
-    setCurrentPath(path);
-  }
-};
-
-// Simple routing logic with better state management
-const useRouter = () => {
-  const [currentPath, setCurrentPathState] = useState(
-    window.location.pathname,
-  );
+function App() {
+  const location = useLocation();
 
+  // Scroll to top on route change
   useEffect(() => {
-    // Set the global navigation function
-    setCurrentPath = setCurrentPathState;
-
-    const handlePopState = () => {
-      setCurrentPathState(window.location.pathname);
-    };
-
-    window.addEventListener("popstate", handlePopState);
-
-    return () => {
-      window.removeEventListener("popstate", handlePopState);
-      setCurrentPath = null;
-    };
-  }, []);
-
-  // Scroll to top whenever the path changes - but only after a delay to ensure rendering
-  useEffect(() => {
-    // Use a timeout to ensure the new page has rendered before scrolling
-    const scrollTimeout = setTimeout(() => {
     scrollToTop();
-    }, 100);
+  }, [location.pathname]);
 
-    return () => clearTimeout(scrollTimeout);
-  }, [currentPath]);
-
-  return { currentPath };
-};
-
-// Placeholder component for pages that don't exist yet
-const PlaceholderPage = ({
-  title = "Coming Soon",
-}: {
-  title?: string;
-}) => (
-  <div className="dark min-h-screen bg-background">
+  return (
+    <div className="min-h-screen bg-background">
       <Navigation />
-    <div className="pt-24 pb-16 bg-background">
-      <div className="container mx-auto px-6 lg:px-8">
-        <div className="max-w-4xl mx-auto text-center">
-          <h1 className="text-4xl md:text-6xl font-bold mb-6 bg-gradient-to-r from-white via-white to-white/80 bg-clip-text text-transparent">
-            {title}
-          </h1>
-          <p className="text-lg text-muted-foreground mb-8">
-            This page is currently under development. Please
-            check back soon!
-          </p>
-          <Button onClick={() => navigateTo("/")} size="lg">
-            Return to Homepage
-          </Button>
-        </div>
-      </div>
-    </div>
+      <main>
+        <AppRouter />
+      </main>
       <Footer />
-  </div>
-);
-
-// Homepage component - ENSURED ALL SECTIONS USE DARK BACKGROUNDS
-const Homepage = () => (
-  <div className="dark min-h-screen bg-background">
-    <Navigation />
-
-    {/* Hero Section - Dark background */}
-    <section className="bg-background">
-      <HeroSection />
-    </section>
-
-    {/* Client Logos - Dark background */}
-    <section className="bg-background">
-      <ClientLogos />
-    </section>
-
-    {/* Services Grid - Dark background */}
-    <section className="bg-background">
-      <ServicesSection />
-    </section>
-
-    {/* Why Choose WDI - Dark background */}
-    <section className="bg-background">
-      <WhyChooseWDI />
-    </section>
-
-    {/* Industry Solutions - Dark background */}
-    <section className="bg-background">
-      <HorizontalTagScroller />
-    </section>
-
-    {/* Case Studies - Dark background */}
-    <section className="bg-background">
-      <CaseStudyHighlight />
-    </section>
-
-    {/* Inline CTA - Dark background */}
-    <section className="bg-background">
-      <InlineCTA />
-    </section>
-
-    {/* Process Steps - Dark background */}
-    <section className="bg-background">
-      <ProcessSection />
-    </section>
-
-    {/* Testimonials - Dark background */}
-    <section className="bg-background">
-      <CarouselTestimonials />
-    </section>
-
-    {/* Resources - Dark background */}
-    <section className="bg-background">
-      <ResourceCards />
-    </section>
-
-    {/* Final CTA - Dark background */}
-    <section className="bg-background">
-      <SplitCallToAction />
-    </section>
-
-    {/* Footer - Dark background */}
-    <section className="bg-background">
-      <Footer />
-    </section>
-  </div>
-);
-
-export default function App() {
-  const { currentPath } = useRouter();
-
-  // Route definitions for cleaner code
-  const routes = {
-    // Homepage
-    "/": Homepage,
-    "/home": Homepage,
-
-    // MAIN CATEGORY PAGES - ALL NOW FULLY IMPLEMENTED ✅
-    "/services": Services,
-    "/solutions": Solutions,
-    "/industries": Industries,
-    "/resources": Resources,
-    "/company": Company,
-    // "/contact": ContactMain,
-    "/web-cloud": WebCloudServices,
-    "/software-engineering": SoftwareEngineering,
-    "/design-experience": DesignExperience,
-    "/artificial-intelligence": ArtificialIntelligenceServices,
-    "/machine-learning": MachineLearning,
-
-    // SERVICES
-    "/services/mobile-app-development": MobileAppDevelopment,
-    "/services/ios-app-development": IOSAppDevelopment,
-    "/services/android-app-development": AndroidAppDevelopment,
-    "/services/cross-platform-app-development":
-      CrossPlatformAppDevelopment,
-    "/services/native-app-development": NativeAppDevelopment,
-    "/services/pwa-development": PWADevelopment,
-    "/services/wearable-device-development":
-      WearableDeviceDevelopment,
-    "/services/custom-web-app-development":
-      CustomWebAppDevelopment,
-    "/services/saas-product-engineering":
-      SaaSProductEngineering,
-    "/services/ecommerce-platforms": EcommercePlatforms,
-    "/services/admin-panels-dashboards": AdminPanelsDashboards,
-    "/services/api-backend-development": APIBackendDevelopment,
-    "/services/enterprise-software-solutions":
-      EnterpriseSoftwareSolutions,
-    "/services/system-architecture-devops":
-      SystemArchitectureDevOps,
-    "/services/third-party-integrations":
-      ThirdPartyIntegrations,
-    "/services/product-modernization": ProductModernization,
-    "/services/ui-ux-design": UIUXDesign,
-    "/services/clickable-prototypes": ClickablePrototypes,
-    "/services/design-thinking-workshops":
-      DesignThinkingWorkshops,
-    "/services/user-research-testing": UserResearchTesting,
-    "/services/ai-strategy-consulting": AIStrategyConsulting,
-    "/services/ai-automation-workflows": AIAutomationWorkflows,
-    "/services/ai-integration-digital-products":
-      AIIntegrationDigitalProducts,
-    "/services/gen-ai-integration-digital-products":
-      GenAIIntegrationDigitalProducts,
-    "/services/ai-chatbots-virtual-assistants":
-      AIChatbotsVirtualAssistants,
-    "/services/ai-model-deployment-mlops":
-      AIModelDeploymentMLOps,
-    "/services/custom-ml-model-development":
-      CustomMLModelDevelopment,
-    "/services/predictive-analytics-forecasting":
-      PredictiveAnalyticsForecasting,
-    "/services/computer-vision-applications":
-      ComputerVisionApplications,
-    "/services/nlp-text-analytics": NLPTextAnalytics,
-    "/services/recommendation-engines": RecommendationEngines,
-
-    // SOLUTIONS - Original routes
-    "/solutions/digital-product-development":
-      DigitalProductDevelopment,
-    "/solutions/mvp-startup-launch-packages":
-      MVPStartupLaunchPackages,
-    "/solutions/legacy-system-rebuilds": LegacySystemRebuilds,
-    "/solutions/dedicated-offshore-odc": DedicatedOffshoreODC,
-    "/solutions/business-process-automation":
-      BusinessProcessAutomation,
-    "/solutions/compliance-ready-systems":
-      ComplianceReadySystems,
-
-    // SOLUTIONS - New simplified routes
-    "/digital-product-development": DigitalProductDevelopment,
-    "/mvp-startup-launch": MVPStartupLaunchPackages,
-    "/legacy-system-rebuilds": LegacySystemRebuilds,
-    "/dedicated-development-centers": DedicatedOffshoreODC,
-    "/business-process-automation": BusinessProcessAutomation,
-    "/compliance-ready-systems": ComplianceReadySystems,
-
-    // INDUSTRIES - Financial Services
-    "/industries/fintech-banking-apps": FinTechBankingApps,
-    "/industries/financial-services/wealthtech-platforms":
-      WealthTechPlatforms,
-    "/industries/financial-services/real-estate-tech":
-      RealEstateTech,
-
-    // INDUSTRIES - Healthcare & Wellness
-    "/industries/healthcare/healthtech-applications":
-      HealthTechApplications,
-    "/industries/healthcare/medical-compliance-solutions":
-      MedicalComplianceSolutions,
-    "/industries/healthcare/fitness-wellness-platforms":
-      FitnessWellnessPlatforms,
-
-    // INDUSTRIES - Learning & Education
-    "/industries/education/edtech-platforms": EdTechPlatforms,
-    "/industries/education/virtual-classrooms-lms":
-      VirtualClassroomsLMS,
-    "/industries/education/microlearning-apps":
-      MicrolearningApps,
-
-    // INDUSTRIES - Commerce & Consumer
-    "/industries/commerce/ecommerce-marketplaces":
-      EcommerceMarketplaces,
-    "/industries/commerce/food-ordering-delivery":
-      FoodOrderingDelivery,
-    "/industries/commerce/travel-booking-systems":
-      TravelBookingSystems,
-    "/industries/commerce/event-ticketing-solutions":
-      EventTicketingSolutions,
-
-    // INDUSTRIES - Media & Community
-    "/industries/media/ott-streaming-apps": OTTStreamingApps,
-    "/industries/media/social-platforms-networks":
-      SocialPlatformsNetworks,
-    "/industries/media/sports-fan-engagement":
-      SportsFanEngagement,
-
-    // INDUSTRIES - Mobility & Logistics
-    "/industries/mobility/transportation-apps":
-      TransportationApps,
-    "/industries/mobility/on-demand-services": OnDemandServices,
-    "/industries/mobility/supply-chain-fleet-management":
-      SupplyChainFleetManagement,
-
-    // INDUSTRIES - Industrial & Emerging Tech
-    "/industries/industrial/manufacturing-automation":
-      ManufacturingAutomation,
-    "/industries/industrial/agritech-platforms":
-      AgriTechPlatforms,
-    "/industries/industrial/oil-gas-monitoring-systems":
-      OilGasMonitoringSystems,
-
-    // COMPANY PAGES - About WDI now accessible only through Company dropdown
-    "/company/about-wdi": AboutWDI,
-    "/company/our-history": OurHistory,
-    "/company/leadership-team": LeadershipTeam,
-    "/company/awards-certifications": AwardsCertifications,
-    "/company/careers": Careers,
-    "/company/culture-values": CultureValues,
-    "/company/press-media": PressMedia,
-
-    // CAREERS PAGES - Direct access routes
-    "/careers": Careers,
-    "/careers/open-positions": Careers,
-    "/careers/send-cv": Careers,
-
-    // HIRE TALENT PAGES
-    "/hire-talent": HireTalent,
-    "/hire-talent/mobile-app-developers":
-      HireMobileAppDevelopers,
-    "/hire-talent/full-stack-developers":
-      HireFullStackDevelopers,
-    "/hire-talent/frontend-developers": HireFrontendDevelopers,
-    "/hire-talent/backend-developers": HireBackendDevelopers,
-    "/hire-talent/ui-ux-designers": HireUIUXDesigners,
-    "/hire-talent/qa-engineers": HireQAEngineers,
-    "/dedicated-development-teams": DedicatedDevelopmentTeams,
-    "/engagement-models": EngagementModels,
-    "/team-augmentation-services": TeamAugmentationServices,
-
-    // RESOURCES PAGES
-    "/resources/blog": Blog,
-    "/case-studies": CaseStudies,
-    "/resources/client-testimonials": ClientTestimonials,
-    "/resources/whitepapers-insights": WhitepapersInsights,
-    "/resources/faqs": FAQs,
-
-    // CONTACT PAGES - Updated to use proper main contact route
-    "/contact-us": Contact, // Contact Us Now page
-    "/contact-us-now": Contact, // Alternative URL for Contact Us Now page
-    "/contact/request-a-proposal": RequestProposal,
-    "/contact/schedule-a-discovery-call": ScheduleDiscoveryCall,
-    "/contact/office-locations": OfficeLocations,
-    "/contact/client-support": ClientSupport,
-    "/contact/send-your-cv": SendYourCV,
-    "/start-a-project": StartAProject,
-    "/thank-you": ThankYou,
-
-    // LEGACY CONTACT ROUTE SUPPORT
-    "/contact/contact-form": ContactMain, // Support for contact form specific route
-
-    // PROJECT PAGES
-    "/projects/regroup": RegroupProject,
-    "/projects/seezun": SeezunProject,
-    "/projects/woka": WokaProject,
-    "/projects/tanami": TanamiProject,
-    "/projects/traderscircuit": TradersCircuitProject,
-    "/projects/goodtimes": GoodTimesProject,
-    "/projects/prosperty": ProspertyProject,
-    "/projects/ranoutof": RanOutOfProject,
-
-    // ARTICLE PAGES
-    "/articles/future-of-ai-healthcare": FutureOfAIHealthcare,
-    "/articles/compliance-ready-systems-fintech":
-      ComplianceReadyFintech,
-    "/articles/legacy-system-scaling": LegacySystemScaling,
-    "/articles/automation-reshaping-business":
-      AutomationReshapingBusiness,
-
-    // INSIGHT PAGES
-    "/insights/ux-review-presentations": UXReviewPresentations,
-    "/insights/migrating-to-linear-101": MigratingToLinear101,
-    "/insights/building-your-api-stack": BuildingYourAPIStack,
-  };
-
-  // Check if current path matches any route
-  const RouteComponent =
-    routes[currentPath as keyof typeof routes];
-  if (RouteComponent) {
-    return (
-      <div className="min-h-screen bg-background">
-        <RouteComponent />
       <CookieConsent />
     </div>
   );
 }
 
-  // Handle dynamic article routes
-  if (currentPath.startsWith("/articles/")) {
-    return (
-      <div className="min-h-screen bg-background">
-        <ArticleDetail />
-        <CookieConsent />
-      </div>
-    );
-  }
-
-  // Handle dynamic insight routes
-  if (currentPath.startsWith("/insights/")) {
-    const slug = currentPath.replace("/insights/", "");
-    let InsightComponent;
-
-    switch (slug) {
-      case "ux-review-presentations":
-        InsightComponent = UXReviewPresentations;
-        break;
-      case "migrating-to-linear-101":
-        InsightComponent = MigratingToLinear101;
-        break;
-      case "building-your-api-stack":
-        InsightComponent = BuildingYourAPIStack;
-        break;
-      default:
-        InsightComponent = null;
-    }
-
-    if (InsightComponent) {
-      return (
-        <div className="min-h-screen bg-background">
-          <InsightComponent />
-          <CookieConsent />
-        </div>
-      );
-    }
-  }
-
-  // Default to homepage for root path and unmatched paths
-  return (
-    <div className="min-h-screen bg-background">
-      <Homepage />
-      <CookieConsent />
-    </div>
-  );
-}
+export default App;

TODO.md

@@ -0,0 +1,11 @@
+# Add FAQ to iOS App Development India Page
+
+## Plan Breakdown
+- [x] 1. Create TODO.md with steps (Done)
+- [x] 2. Add IOSFAQs component to pages/IOSAppDevelopmentIndia.tsx
+- [x] 3. Insert `<IOSFAQs />` before final CTA section
+- [x] 4. Verify imports (Accordion components)
+- [x] 5. Test page rendering
+- [x] 6. Mark complete
+
+**Status:** ✅ FAQ section successfully added to IOSAppDevelopmentIndia.tsx with 8 iOS-specific questions adapted from Android page. Page structure preserved. Ready for testing.

components/AboutYourProject.tsx

@@ -0,0 +1,740 @@
+import React, { useState, useRef } from "react";
+import { motion } from "framer-motion";
+import { Button } from "../components/ui/button";
+import { ShimmerButton } from "../components/ui/shimmer-button";
+import { Card, CardContent } from "../components/ui/card";
+import { Input } from "../components/ui/input";
+import { Textarea } from "../components/ui/textarea";
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from "../components/ui/select";
+import { Checkbox } from "../components/ui/checkbox";
+import { RadioGroup, RadioGroupItem } from "../components/ui/radio-group";
+import { Label } from "../components/ui/label";
+import { MathVerificationPopup } from "../components/MathVerificationPopup";
+import { useStoreContactUsMutation } from "@/src/services/storeContactUs";
+import { useNavigate } from "react-router-dom";
+import * as Yup from "yup";
+import {
+  Rocket,
+  Upload,
+  FileText,
+  CheckCircle,
+  ArrowRight,
+  Shield,
+} from "lucide-react";
+
+interface AboutYourProjectProps {
+  // You can add any props you might need to pass from the parent component
+}
+
+// Country codes constant
+const COUNTRY_CODES: Record<string, string> = {
+  us: "+1",
+  uk: "+44",
+  ca: "+1",
+  au: "+61",
+  in: "+91",
+  de: "+49",
+  fr: "+33",
+  other: "+",
+};
+
+export const AboutYourProject: React.FC<AboutYourProjectProps> = () => {
+  const [isHumanVerified, setIsHumanVerified] = useState(false);
+  const [showVerificationPopup, setShowVerificationPopup] = useState(false);
+  const [formData, setFormData] = useState({
+    name: "",
+    email: "",
+    country: "",
+    phone: "",
+    services: "",
+    budget: "",
+    projectDescription: "",
+    developmentStage: "",
+    timeline: "",
+    ndaRequired: false,
+    agreeTerms: false,
+  });
+  const [errors, setErrors] = useState<Record<string, string>>({});
+  const [touched, setTouched] = useState<Record<string, boolean>>({});
+  const [attachedFiles, setAttachedFiles] = useState<File[]>([]);
+  const [submitContactForm, { isLoading }] = useStoreContactUsMutation();
+  const navigate = useNavigate();
+
+  // Updated Validation Schema (removed recaptcha)
+  const validationSchema = Yup.object().shape({
+    name: Yup.string()
+      .required("Name is required")
+      .min(2, "Name must be at least 2 characters")
+      .max(50, "Name must not exceed 50 characters"),
+    email: Yup.string()
+      .required("Email is required")
+      .email("Invalid email address"),
+    country: Yup.string().required("Country is required"),
+    phone: Yup.string()
+      .required("Phone number is required")
+      .matches(/^[\d\s+\-().]{10,}$/, "Please enter a valid phone number"),
+    services: Yup.string().required("Service selection is required"),
+    budget: Yup.string().required("Budget range is required"),
+    projectDescription: Yup.string()
+      .required("Project description is required")
+      .min(50, "Description should be at least 50 characters")
+      .max(2000, "Description must not exceed 2000 characters"),
+    developmentStage: Yup.string().required("Development stage is required"),
+    timeline: Yup.string().required("Timeline is required"),
+    ndaRequired: Yup.boolean(),
+    agreeTerms: Yup.boolean()
+      .oneOf([true], "You must agree to the terms and conditions")
+      .required("You must agree to the terms and conditions"),
+  }).test(
+    'human-verification',
+    'Human verification is required',
+    function (value) {
+      return isHumanVerified;
+    }
+  );
+
+  const handleBlur = (field: string) => {
+    setTouched({ ...touched, [field]: true });
+    validateField(field);
+  };
+
+  const validateField = async (field: string, dataToValidate = formData) => {
+    try {
+      await validationSchema.validateAt(field, dataToValidate);
+      setErrors((prev) => ({ ...prev, [field]: "" }));
+    } catch (err) {
+      if (err instanceof Yup.ValidationError) {
+        setErrors((prev) => ({ ...prev, [field]: err.message }));
+      }
+    }
+  };
+
+  const validateForm = async () => {
+    try {
+      await validationSchema.validate(formData, { abortEarly: false });
+      setErrors({});
+      return true;
+    } catch (err) {
+      if (err instanceof Yup.ValidationError) {
+        const newErrors: Record<string, string> = {};
+        err.inner.forEach((error) => {
+          if (error.path) {
+            newErrors[error.path] = error.message;
+          }
+        });
+        setErrors(newErrors);
+
+        // Scroll to first error
+        const firstError = err.inner[0];
+        if (firstError?.path) {
+          const element = document.getElementById(firstError.path);
+          if (element) {
+            element.scrollIntoView({ behavior: "smooth", block: "center" });
+          }
+        }
+      }
+      return false;
+    }
+  };
+
+  const handleFileUpload = (event: React.ChangeEvent<HTMLInputElement>) => {
+    const files = event.target.files;
+    if (files) {
+      const validFiles = Array.from(files).filter(
+        (file) => file.size <= 10 * 1024 * 1024
+      );
+      setAttachedFiles((prev) => [...prev, ...validFiles]);
+    }
+  };
+
+  const removeFile = (index: number) => {
+    setAttachedFiles((prev) => prev.filter((_, i) => i !== index));
+  };
+
+  const handleHumanVerification = () => {
+    setIsHumanVerified(true);
+    setShowVerificationPopup(false);
+  };
+
+  const handleVerificationCheckbox = (checked: boolean) => {
+    if (checked) {
+      setShowVerificationPopup(true);
+    } else {
+      setIsHumanVerified(false);
+    }
+  };
+
+  const handleSubmit = async (e: React.FormEvent) => {
+    e.preventDefault();
+
+    if (!isHumanVerified) {
+      setErrors(prev => ({
+        ...prev,
+        humanVerification: "Please complete the human verification"
+      }));
+      setShowVerificationPopup(true);
+      return;
+    }
+
+    const isValid = await validateForm();
+    if (!isValid) return;
+
+    try {
+      const formDataToSend = new FormData();
+      formDataToSend.append("t_id", "xyz123");
+      formDataToSend.append("name", formData.name);
+      formDataToSend.append("email", formData.email);
+      formDataToSend.append("country", formData.country);
+      formDataToSend.append("phone_number", formData.phone);
+      formDataToSend.append("service", formData.services);
+      formDataToSend.append("budget", formData.budget);
+      formDataToSend.append("message", formData.projectDescription);
+      formDataToSend.append("development_stage", formData.developmentStage);
+      formDataToSend.append("startTime", formData.timeline);
+      formDataToSend.append("nda_signing", formData.ndaRequired ? "1" : "0");
+      formDataToSend.append("from_page", "contact-us");
+
+      if (attachedFiles.length > 0) {
+        attachedFiles.forEach((file) => {
+          formDataToSend.append("contact_us_attachment", file);
+        });
+      }
+
+      formDataToSend.append("ip", "192.168.1.10");
+      formDataToSend.append("user_agent", navigator.userAgent);
+
+      await submitContactForm(formDataToSend).unwrap();
+
+      // Reset form
+      setFormData({
+        name: "",
+        email: "",
+        country: "",
+        phone: "",
+        services: "",
+        budget: "",
+        projectDescription: "",
+        developmentStage: "",
+        timeline: "",
+        ndaRequired: false,
+        agreeTerms: false,
+      });
+      setAttachedFiles([]);
+      setIsHumanVerified(false);
+
+      navigate("/thank-you");
+    } catch (error) {
+      console.error("Form submission error:", error);
+      alert("Failed to submit the form. Please try again.");
+    }
+  };
+
+  // Helper components for form fields (keep the same as before)
+  const renderInputField = (
+    field: keyof typeof formData,
+    label: string,
+    placeholder: string,
+    type = "text"
+  ) => (
+    <div className="space-y-3" id={field}>
+      <label className="block text-sm font-medium text-white">{label} *</label>
+      <Input
+        type={type}
+        placeholder={placeholder}
+        className={`bg-gray-800/30 border-gray-600/50 text-white h-12 text-base ${errors[field] ? "border-red-500" : ""
+          }`}
+        value={formData[field] as string}
+        onChange={(e) => setFormData({ ...formData, [field]: e.target.value })}
+        onBlur={() => handleBlur(field)}
+      />
+      {errors[field] && (
+        <p className="text-red-400 text-sm mt-1">{errors[field]}</p>
+      )}
+    </div>
+  );
+
+  const renderSelectField = (
+    field: keyof typeof formData,
+    label: string,
+    placeholder: string,
+    options: { value: string; label: string }[],
+    onValueChange?: (value: string) => void
+  ) => (
+    <div className="space-y-3" id={field}>
+      <label className="block text-sm font-medium text-white">{label} *</label>
+      <Select
+        value={formData[field] as string}
+        onValueChange={(value) => {
+          const updated = { ...formData, [field]: value };
+          setFormData(updated);
+          setTouched({ ...touched, [field]: true });
+          validateField(field, updated);
+          if (onValueChange) {
+            onValueChange(value);
+          }
+        }}
+      >
+        <SelectTrigger
+          className={`bg-gray-800/30 border-gray-600/50 text-white h-12 min-h-12 ${errors[field] ? "border-red-500" : ""
+            }`}
+        >
+          <SelectValue placeholder={placeholder} />
+        </SelectTrigger>
+        <SelectContent>
+          {options.map((option) => (
+            <SelectItem key={option.value} value={option.value}>
+              {option.label}
+            </SelectItem>
+          ))}
+        </SelectContent>
+      </Select>
+      {errors[field] && (
+        <p className="text-red-400 text-sm mt-1">{errors[field]}</p>
+      )}
+    </div>
+  );
+
+  const renderTextarea = (
+    field: keyof typeof formData,
+    label: string,
+    placeholder: string,
+    rows = 6
+  ) => (
+    <div className="space-y-3" id={field}>
+      <div className="flex justify-between">
+        <label className="block text-sm font-medium text-white">
+          {label} *
+        </label>
+        <span className="text-sm text-gray-400">
+          {formData[field]?.toString().length || 0}/2000
+        </span>
+      </div>
+      <Textarea
+        placeholder={placeholder}
+        rows={rows}
+        className={`bg-gray-800/30 border-gray-600/50 text-white text-base resize-none ${errors[field] ? "border-red-500" : ""
+          }`}
+        value={formData[field] as string}
+        onChange={(e) => setFormData({ ...formData, [field]: e.target.value })}
+        onBlur={() => handleBlur(field)}
+      />
+      {errors[field] && (
+        <p className="text-red-400 text-sm mt-1">{errors[field]}</p>
+      )}
+    </div>
+  );
+
+  const renderRadioGroup = (
+    field: keyof typeof formData,
+    label: string,
+    options: { value: string; label: string }[],
+    cols: string
+  ) => (
+    <div className="space-y-4" id={field}>
+      <label className="block text-sm font-medium text-white">{label} *</label>
+      {errors[field] && (
+        <p className="text-red-400 text-sm mb-2">{errors[field]}</p>
+      )}
+      <RadioGroup
+        value={formData[field] as string}
+        onValueChange={(value) => {
+          const updated = { ...formData, [field]: value };
+          setFormData(updated);
+          setTouched({ ...touched, [field]: true });
+          validateField(field, updated);
+        }}
+        className={`grid ${cols} gap-4`}
+      >
+        {options.map((option) => (
+          <div
+            key={option.value}
+            className="flex items-center space-x-3 p-4 bg-gray-800/20 rounded-lg border border-gray-700/30"
+          >
+            <RadioGroupItem
+              value={option.value}
+              id={`${field}-${option.value}`}
+              className="border-gray-600"
+            />
+            <Label
+              htmlFor={`${field}-${option.value}`}
+              className="text-white cursor-pointer"
+            >
+              {option.label}
+            </Label>
+          </div>
+        ))}
+      </RadioGroup>
+    </div>
+  );
+
+  const renderCheckbox = (
+    field: keyof typeof formData,
+    label: React.ReactNode,
+    required = false
+  ) => (
+    <div className="space-y-2">
+      <div className="flex items-start space-x-4 p-4 bg-gray-800/20 rounded-lg border border-gray-700/30">
+        <Checkbox
+          id={field}
+          checked={formData[field] as boolean}
+          onCheckedChange={(checked) => {
+            const updated = { ...formData, [field]: checked };
+            setFormData(updated);
+            setTouched({ ...touched, [field]: true });
+            validateField(field, updated);
+          }}
+          className="mt-1"
+        />
+        <label
+          htmlFor={field}
+          className="text-gray-300 leading-relaxed cursor-pointer"
+        >
+          {label}
+        </label>
+      </div>
+      {errors[field] && (
+        <p className="text-red-400 text-sm mt-1">{errors[field]}</p>
+      )}
+    </div>
+  );
+
+  return (
+    <section className="py-32 bg-wdi-grey">
+      <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-center mb-16"
+        >
+          <h2 className="text-3xl lg:text-4xl font-semibold leading-tight mb-6">
+            <span className="text-white">Tell Us About Your </span>
+            <span className="text-[#E5195E]">Project</span>
+          </h2>
+          <p className="text-lg text-gray-300 leading-relaxed max-w-2xl mx-auto">
+            Fill out the form below and our AI mobile app and AI development experts will get back to you within 24 hours.            </p>
+
+          <p className="text-lg text-gray-300 leading-relaxed max-w-2xl mx-auto">
+
+            We’ll review your idea, provide a tailored roadmap, and discuss the best approach. Whether it’s a custom AI‑powered mobile app, AI‑driven web application, or end‑to‑end AI integration.
+          </p>
+        </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="max-w-4xl mx-auto"
+        >
+          <Card className="bg-gray-900/30 backdrop-blur-md border-gray-700/30 rounded-3xl overflow-hidden shadow-2xl">
+            <CardContent className="p-12">
+              <form onSubmit={handleSubmit} className="space-y-10">
+                {/* Personal Information Section */}
+                <div className="space-y-8">
+                  <h3 className="text-xl font-semibold text-white border-b border-gray-700 pb-4">
+                    Personal Information
+                  </h3>
+
+                  <div className="grid grid-cols-1 md:grid-cols-2 gap-8">
+                    {renderInputField(
+                      "name",
+                      "Your Name",
+                      "Enter your full name"
+                    )}
+                    {renderInputField(
+                      "email",
+                      "Email Address",
+                      "your.email@company.com",
+                      "email"
+                    )}
+                  </div>
+
+                  <div className="grid grid-cols-1 md:grid-cols-2 gap-8">
+                    {renderSelectField(
+                      "country",
+                      "Country",
+                      "Select your country",
+                      [
+                        { value: "us", label: "United States" },
+                        { value: "uk", label: "United Kingdom" },
+                        { value: "ca", label: "Canada" },
+                        { value: "au", label: "Australia" },
+                        { value: "in", label: "India" },
+                        { value: "de", label: "Germany" },
+                        { value: "fr", label: "France" },
+                        { value: "other", label: "Other" },
+                      ],
+                      (value) => {
+                        const updated = { ...formData, country: value };
+                        if (!formData.phone || formData.phone.startsWith("+")) {
+                          updated.phone = COUNTRY_CODES[value] || "";
+                        }
+                        setFormData(updated);
+                        setTouched({ ...touched, country: true });
+                        validateField("country", updated);
+                      }
+                    )}
+                    {renderInputField(
+                      "phone",
+                      "Contact Number",
+                      formData.country ? `${COUNTRY_CODES[formData.country] || "+"} (XXX) XXX-XXXX` : "+XX (XXX) XXX-XXXX"
+                    )}
+                  </div>
+                </div>
+
+                {/* Project Information Section */}
+                <div className="space-y-8">
+                  <h3 className="text-xl font-semibold text-white border-b border-gray-700 pb-4">
+                    Project Information
+                  </h3>
+
+                  <div className="grid grid-cols-1 md:grid-cols-2 gap-8">
+                    {renderSelectField(
+                      "services",
+                      "Select Services",
+                      "Choose primary service",
+                      [
+                        {
+                          value: "mobile-app",
+                          label: "Mobile App Development",
+                        },
+                        { value: "web-development", label: "Web Development" },
+                        { value: "ai-ml", label: "AI & Machine Learning" },
+                        { value: "ui-ux", label: "UI/UX Design" },
+                        { value: "enterprise", label: "Enterprise Solutions" },
+                        { value: "consultation", label: "Consultation" },
+                      ]
+                    )}
+                    {renderSelectField(
+                      "budget",
+                      "Budget Range",
+                      "Select budget range",
+                      [
+                        { value: "under-25k", label: "Under $25,000" },
+                        { value: "25k-50k", label: "$25,000 - $50,000" },
+                        { value: "50k-100k", label: "$50,000 - $100,000" },
+                        { value: "100k-250k", label: "$100,000 - $250,000" },
+                        { value: "250k-500k", label: "$250,000 - $500,000" },
+                        { value: "500k-plus", label: "$500,000+" },
+                      ]
+                    )}
+                  </div>
+
+                  {renderTextarea(
+                    "projectDescription",
+                    "Project Description",
+                    "Tell us about your project vision, goals, and key requirements..."
+                  )}
+
+                  {renderRadioGroup(
+                    "developmentStage",
+                    "Current Development Stage",
+                    [
+                      { value: "idea", label: "Idea" },
+                      { value: "designed", label: "Designed Solution" },
+                      { value: "prototype", label: "Prototype/Spec" },
+                      { value: "mvp", label: "MVP" },
+                    ],
+                    "grid-cols-2 md:grid-cols-4"
+                  )}
+                </div>
+
+                {/* Additional Details Section */}
+                <div className="space-y-8">
+                  <h3 className="text-xl font-semibold text-white border-b border-gray-700 pb-4">
+                    Additional Details
+                  </h3>
+
+                  <div className="space-y-4">
+                    <label className="block text-sm font-medium text-white">
+                      Project Attachments
+                    </label>
+                    <div className="border-2 border-dashed border-gray-600/50 rounded-xl p-8 text-center bg-gray-800/10">
+                      <Upload className="w-12 h-12 text-gray-400 mx-auto mb-4" />
+                      <p className="text-gray-300 mb-2 font-medium">
+                        Upload Additional Files
+                      </p>
+                      <p className="text-sm text-gray-500 mb-6">
+                        Attach wireframes, designs, or requirements. Max file
+                        size: 10MB
+                      </p>
+                      <input
+                        type="file"
+                        multiple
+                        accept=".pdf,.doc,.docx,.jpg,.jpeg,.png,.fig"
+                        onChange={handleFileUpload}
+                        className="hidden"
+                        id="file-upload"
+                      />
+                      <Button
+                        type="button"
+                        variant="outline"
+                        onClick={() =>
+                          document.getElementById("file-upload")?.click()
+                        }
+                        className="border-gray-600 text-white hover:bg-gray-800 h-12"
+                      >
+                        <Upload className="w-4 h-4 mr-2" />
+                        Choose Files
+                      </Button>
+                    </div>
+
+                    {attachedFiles.length > 0 && (
+                      <div className="space-y-3">
+                        {attachedFiles.map((file, index) => (
+                          <div
+                            key={index}
+                            className="flex items-center justify-between bg-gray-800/30 p-4 rounded-lg border border-gray-700/30"
+                          >
+                            <div className="flex items-center space-x-3">
+                              <FileText className="w-5 h-5 text-[#E5195E]" />
+                              <span className="text-white font-medium">
+                                {file.name}
+                              </span>
+                              <span className="text-gray-400 text-sm">
+                                ({(file.size / 1024 / 1024).toFixed(1)} MB)
+                              </span>
+                            </div>
+                            <Button
+                              type="button"
+                              variant="ghost"
+                              size="sm"
+                              onClick={() => removeFile(index)}
+                              className="text-red-400 hover:text-red-300 hover:bg-red-900/20"
+                            >
+                              Remove
+                            </Button>
+                          </div>
+                        ))}
+                      </div>
+                    )}
+                  </div>
+
+                  {renderRadioGroup(
+                    "timeline",
+                    "Expected Start Timeline",
+                    [
+                      { value: "1-month", label: "1 Month" },
+                      { value: "6-month", label: "6 Months" },
+                      { value: "1-year", label: "1 Year" },
+                      { value: "1.5-year", label: "1.5 Years" },
+                      { value: "2-plus-year", label: "2+ Years" },
+                    ],
+                    "grid-cols-2 md:grid-cols-5"
+                  )}
+                </div>
+
+                {/* Legal & Agreements */}
+                <div className="space-y-6">
+                  {renderCheckbox(
+                    "ndaRequired",
+                    "I want to protect my data by signing an NDA (Non-Disclosure Agreement)"
+                  )}
+                  {renderCheckbox(
+                    "agreeTerms",
+                    <>
+                      I agree to the{" "}
+                      <span className="text-[#E5195E] underline">
+                        terms & conditions
+                      </span>{" "}
+                      and{" "}
+                      <span className="text-[#E5195E] underline">
+                        privacy policy
+                      </span>{" "}
+                      *
+                    </>,
+                    true
+                  )}
+                </div>
+
+                {/* Security Verification Section */}
+                <div className="space-y-6">
+                  <h3 className="text-xl font-semibold text-white border-b border-gray-700 pb-4 flex items-center gap-3">
+                    <Shield className="w-5 h-5 text-[#E5195E]" />
+                    Security Verification
+                  </h3>
+
+                  <div className="space-y-4">
+                    <div className="flex items-start space-x-4 p-4 bg-gray-800/20 rounded-lg border border-gray-700/30">
+                      <Checkbox
+                        id="human-verification"
+                        checked={isHumanVerified}
+                        onCheckedChange={handleVerificationCheckbox}
+                        className="mt-1"
+                      />
+                      <label
+                        htmlFor="human-verification"
+                        className="text-gray-300 leading-relaxed cursor-pointer"
+                      >
+                        I'm not a robot
+                      </label>
+                    </div>
+
+                    {isHumanVerified && (
+                      <div className="flex items-center justify-center gap-2 text-green-400 text-sm p-3 bg-green-900/20 rounded-lg">
+                        <CheckCircle className="w-4 h-4" />
+                        <span>Verification successful</span>
+                      </div>
+                    )}
+
+                    {errors.humanVerification && (
+                      <p className="text-red-400 text-sm mt-1">
+                        {errors.humanVerification}
+                      </p>
+                    )}
+                  </div>
+                </div>
+
+                {/* Submit Button */}
+                <div className="pt-8">
+                  <ShimmerButton
+                    type="submit"
+                    className="w-full py-6 text-xl rounded-2xl shadow-lg hover:shadow-xl"
+                    disabled={!formData.agreeTerms || !isHumanVerified || isLoading}
+                  >
+                    <div className="inline-flex items-center justify-center gap-3">
+                      {isLoading ? (
+                        <span>Submitting...</span>
+                      ) : (
+                        <>
+                          <Rocket className="w-6 h-6 flex-shrink-0" />
+                          <span>Submit Project Request</span>
+                          <ArrowRight className="w-5 h-5" />
+                        </>
+                      )}
+                    </div>
+                  </ShimmerButton>
+
+                  {(!formData.agreeTerms || !isHumanVerified) && (
+                    <p className="text-center text-sm text-gray-400 mt-3">
+                      {!formData.agreeTerms && !isHumanVerified
+                        ? "Please agree to terms and complete verification to submit"
+                        : !formData.agreeTerms
+                          ? "Please agree to terms and conditions to submit"
+                          : "Please complete the security verification to submit"}
+                    </p>
+                  )}
+                </div>
+              </form>
+            </CardContent>
+          </Card>
+        </motion.div>
+      </div>
+
+      {/* Math Verification Popup */}
+      <MathVerificationPopup
+        isOpen={showVerificationPopup}
+        onVerify={handleHumanVerification}
+        onClose={() => setShowVerificationPopup(false)}
+      />
+    </section>
+  );
+};

components/AppSuccessMetrics.tsx

@@ -1,13 +1,21 @@
 import React from "react";
 import { motion } from "framer-motion";
 import { ImageWithFallback } from "./figma/ImageWithFallback";
-// import successMetricsImage from 'figma:asset/619c58bb9b76889672d43420adc0dd6ef9ef21f6.png';
 
 const successMetricsImage =
   "https://images.unsplash.com/photo-1559757148-5c350d0d3c56?w=400&h=300&fit=crop&auto=format";
 
-const AppSuccessMetrics = () => {
-  const metrics = [
+type Metric = {
+  value: string;
+  label: string;
+  description: string;
+};
+
+interface AppSuccessMetricsProps {
+  metrics?: Metric[]; // optional so we can have a fallback
+}
+
+const defaultMetrics: Metric[] = [
   {
     value: "75+",
     label: "App Developed",
@@ -25,6 +33,9 @@ const AppSuccessMetrics = () => {
   },
 ];
 
+const AppSuccessMetrics: React.FC<AppSuccessMetricsProps> = ({ metrics }) => {
+  const finalMetrics = metrics ?? defaultMetrics;
+
   return (
     <section className="py-20 lg:py-32 bg-black relative overflow-hidden">
       <div className="container mx-auto px-6 lg:px-8">
@@ -50,7 +61,6 @@ const AppSuccessMetrics = () => {
 
           {/* Main Visual Section */}
           <div className="relative">
-            {/* iPhone Mockups Display */}
             <motion.div
               initial={{ opacity: 0, y: 50 }}
               whileInView={{ opacity: 1, y: 0 }}
@@ -75,7 +85,7 @@ const AppSuccessMetrics = () => {
               viewport={{ once: true }}
               className="grid grid-cols-1 md:grid-cols-3 gap-12 max-w-4xl mx-auto"
             >
-              {metrics.map((metric, index) => (
+              {finalMetrics.map((metric, index) => (
                 <motion.div
                   key={index}
                   initial={{ opacity: 0, y: 30 }}
@@ -87,19 +97,14 @@ const AppSuccessMetrics = () => {
                   viewport={{ once: true }}
                   className="text-center group"
                 >
-                  {/* Large Metric Number */}
                   <div className="mb-4">
                     <span className="text-6xl lg:text-7xl font-bold text-white group-hover:text-accent transition-colors duration-300">
                       {metric.value}
                     </span>
                   </div>
-
-                  {/* Metric Label */}
                   <h3 className="text-lg lg:text-xl font-semibold text-gray-300 mb-2">
                     {metric.label}
                   </h3>
-
-                  {/* Metric Description */}
                   <p className="text-sm text-gray-400 leading-relaxed">
                     {metric.description}
                   </p>
@@ -127,7 +132,6 @@ const AppSuccessMetrics = () => {
 
       {/* Background Decorative Elements */}
       <div className="absolute inset-0 pointer-events-none overflow-hidden">
-        {/* Subtle gradient orbs for depth */}
         <div className="absolute top-20 left-10 w-80 h-80 bg-accent/5 rounded-full blur-3xl"></div>
         <div className="absolute bottom-20 right-10 w-80 h-80 bg-blue-500/5 rounded-full blur-3xl"></div>
         <div className="absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2 w-96 h-96 bg-purple-500/3 rounded-full blur-3xl"></div>

components/CarouselTestimonials.tsx

@@ -4,6 +4,7 @@ import { ImageWithFallback } from "./figma/ImageWithFallback";
 import clutchLogo from '../src/images/clutch-logo.png';
 import { useState, useEffect, useRef } from "react";
 import React from "react";
+import googleLogo from '../src/images/google-logo.jpg';
 
 const testimonials = [
   {
@@ -199,8 +200,7 @@ const StarRating = ({ rating }: { rating: number }) => {
       {Array.from({ length: 5 }).map((_, i) => (
         <Star
           key={i}
-          className={`w-4 h-4 ${
-            i < rating
+          className={`w-4 h-4 ${i < rating
             ? 'text-yellow-400 fill-yellow-400'
             : 'text-gray-600 fill-gray-600'
             }`}
@@ -424,7 +424,7 @@ export const CarouselTestimonials = () => {
             viewport={{ once: true }}
             className="text-muted-foreground text-xl max-w-2xl mx-auto"
           >
-            Don't just take our word for it. Here's what founders and product leaders say about working with us.
+            Don’t just take our word for it. Read what founders and AI‑driven product leaders say about building web and mobile apps with us.
           </motion.p>
         </div>
 
@@ -440,9 +440,44 @@ export const CarouselTestimonials = () => {
           </motion.div>
         </div>
 
-        {/* Centered Clutch Rating */}
-        <div className="flex justify-center">
+        <div className="flex justify-center gap-6 flex-wrap">
           <ClutchRating />
+
+          {/* Google Reviews Rating */}
+          <motion.div
+            initial={{ opacity: 0, scale: 0.9 }}
+            whileInView={{ opacity: 1, scale: 1 }}
+            transition={{ duration: 0.6, delay: 0.1 }}
+            viewport={{ once: true }}
+            className="flex items-center gap-4 bg-card rounded-[10px] border border-border p-6 shadow-sm w-full max-w-sm mx-auto"
+          >
+            {/* Google Logo */}
+            <div className="flex-shrink-0">
+              <ImageWithFallback
+                src={googleLogo}
+                alt="Clutch"
+                className="w-16 h-16 object-contain rounded-lg"
+              />
+            </div>
+
+            {/* Rating Info */}
+            <div className="flex-1">
+              <div className="flex items-center gap-2 mb-2">
+                <span className="font-semibold text-foreground text-xl">4.8</span>
+                <div className="flex gap-0.5">
+                  {[...Array(5)].map((_, i) => (
+                    <Star key={i} className="w-4 h-4 fill-[#FBBC05] text-[#FBBC05]" />
+                  ))}
+                </div>
+              </div>
+              <div className="text-muted-foreground text-base mb-1">
+                (38 reviews)
+              </div>
+              <div className="text-muted-foreground text-sm">
+                Highly Rated on Google Reviews
+              </div>
+            </div>
+          </motion.div>
         </div>
       </div>
     </section>

components/CaseStudyHighlight.tsx

@@ -3,12 +3,12 @@ import { ArrowRight, ExternalLink } from "lucide-react";
 import { Button } from "./ui/button";
 import { GridPattern } from "./GridPattern";
 import { ImageWithFallback } from "./figma/ImageWithFallback";
-import { navigateTo } from "../App";
 import regroupImage from '../src/images/regroup.webp';
-import seezunImage from '../src/images/seezun.webp';
+// import seezunImage from '../src/images/seezun.webp';
 // import wokaImage from '../src/images/woka.webp';
 import wokaAwardImage from '../src/images/woka.webp';
 import tanamiImage from '../src/images/tanami.webp';
+import { useNavigate } from "react-router-dom";
 
 const featuredCaseStudy = {
   title: "Woka",
@@ -24,13 +24,13 @@ const featuredCaseStudy = {
 };
 
 const caseStudies = [
-  {
-    title: "Seezun",
-    description: "Created Seezun as a dynamic customer-driven platform connecting buyers, sellers, and renters for a seamless marketplace that renders fashion accessible, sustainable, and affordable.",
-    achievement: "+85% Brand Recognition",
-    industryTags: ["Branding", "Fashion"],
-    image: seezunImage
-  },
+  // {
+  //   title: "Seezun",
+  //   description: "Created Seezun as a dynamic customer-driven platform connecting buyers, sellers, and renters for a seamless marketplace that renders fashion accessible, sustainable, and affordable.",
+  //   achievement: "+85% Brand Recognition",
+  //   industryTags: ["Branding", "Fashion"],
+  //   image: seezunImage
+  // },
   {
     title: "Regroup",
     description: "Built Regroup as a social platform that brings together passion, global connections, teamwork, and love for sports through a vibrant online community.",
@@ -50,8 +50,8 @@ const caseStudies = [
 const SmallCaseStudyCard = ({ study, index }: { study: typeof caseStudies[0]; index: number }) => {
   const getNavigationPath = (title: string) => {
     switch (title) {
-      case 'Seezun':
-        return '/projects/seezun';
+      // case 'Seezun':
+      //   return '/projects/seezun';
       case 'Woka':
         return '/projects/woka';
       case 'Tanami':
@@ -63,20 +63,22 @@ const SmallCaseStudyCard = ({ study, index }: { study: typeof caseStudies[0]; in
     }
   };
 
+  const navigate = useNavigate();
+
   return (
     <motion.div
       initial={{ opacity: 0, y: 50 }}
       whileInView={{ opacity: 1, y: 0 }}
-      transition={{ duration: 0.6, delay: index * 0.1 }}
+      transition={{ duration: 0.6, delay: index * 0.01 }}
       viewport={{ once: true }}
       className="group bg-card rounded-[10px] overflow-hidden hover:bg-card/80 hover:shadow-lg hover:scale-[1.02] transition-all duration-300 cursor-pointer border border-transparent hover:border-border/50"
-      onClick={() => navigateTo(getNavigationPath(study.title))}
+      onClick={() => navigate(getNavigationPath(study.title))}
     >
       <div className="relative aspect-[4/3] overflow-hidden bg-muted/30 px-2 rounded-[10px]">
         <ImageWithFallback
           src={study.image}
           alt={
-            study.title === "Seezun" ? "Seezun fashion marketplace app banner showcasing mobile shopping experience" :
+            // study.title === "Seezun" ? "Seezun fashion marketplace app banner showcasing mobile shopping experience" :
             study.title === "Woka" ? "Woka learning platform banner showcasing educational mobile app features" :
             study.title === "Tanami" ? "Tanami Capital financial platform banner showcasing investment portfolio management" :
             study.title === "Regroup" ? "Regroup mobile app banner showcasing sports networking features" :
@@ -84,7 +86,7 @@ const SmallCaseStudyCard = ({ study, index }: { study: typeof caseStudies[0]; in
           }
           className={`w-full h-full ${["Seezun", "Woka", "Tanami", "Regroup"].includes(study.title) ? "object-contain" : "object-cover"} object-center ${["Seezun", "Woka", "Tanami", "Regroup"].includes(study.title) ? "group-hover:scale-[1.02]" : "group-hover:scale-105"} transition-transform duration-500 rounded-[10px]`}
         />
-        <div className="absolute top-4 left-4 z-10">
+        <div className="absolute z-10 top-4 left-4">
           <span className="px-3 py-1 bg-accent text-accent-foreground text-sm font-medium rounded-[10px]">
             {study.achievement}
           </span>
@@ -92,10 +94,10 @@ const SmallCaseStudyCard = ({ study, index }: { study: typeof caseStudies[0]; in
       </div>
       
       <div className="p-6">
-        <h3 className="text-xl font-semibold text-foreground mb-3 group-hover:text-accent transition-colors duration-300">
+        <h3 className="mb-3 text-xl font-semibold transition-colors duration-300 text-foreground group-hover:text-accent">
           {study.title}
         </h3>
-        <p className="text-muted-foreground text-sm mb-4 leading-relaxed">
+        <p className="mb-4 text-sm leading-relaxed text-muted-foreground">
           {study.description}
         </p>
         
@@ -111,10 +113,10 @@ const SmallCaseStudyCard = ({ study, index }: { study: typeof caseStudies[0]; in
         </div>
         
         <button 
-          className="text-accent text-sm font-medium hover:text-foreground transition-colors duration-300 flex items-center gap-2 group-hover:translate-x-1 transition-transform duration-300"
+          className="flex items-center gap-2 text-sm font-medium transition-colors transition-transform duration-300 text-accent hover:text-foreground group-hover:translate-x-1"
           onClick={(e) => {
             e.stopPropagation();
-            navigateTo(getNavigationPath(study.title));
+            navigate(getNavigationPath(study.title));
           }}
         >
           View Case Study <ArrowRight className="w-4 h-4" />
@@ -125,22 +127,23 @@ const SmallCaseStudyCard = ({ study, index }: { study: typeof caseStudies[0]; in
 };
 
 export const CaseStudyHighlight = () => {
+  const navigate = useNavigate();
   return (
-    <section className="relative py-20 bg-background overflow-hidden">
+    <section className="relative py-20 overflow-hidden bg-background">
       <GridPattern strokeDasharray="4 2" />
       
-      <div className="relative z-10 container mx-auto px-6 lg:px-8">
+      <div className="container relative z-10 px-6 mx-auto lg:px-8">
         <motion.div
           initial={{ opacity: 0, y: 30 }}
           whileInView={{ opacity: 1, y: 0 }}
           transition={{ duration: 0.8 }}
           viewport={{ once: true }}
-          className="text-center mb-16"
+          className="mb-16 text-center"
         >
-          <h2 className="text-3xl lg:text-4xl font-semibold text-foreground mb-4">
+          <h2 className="mb-4 text-3xl font-semibold lg:text-4xl text-foreground">
             See What We've Built
           </h2>
-          <p className="text-muted-foreground text-lg max-w-2xl mx-auto">
+          <p className="max-w-2xl mx-auto text-lg text-muted-foreground">
             Real results from real projects. Here's how we've helped companies scale their digital products.
           </p>
         </motion.div>
@@ -151,35 +154,35 @@ export const CaseStudyHighlight = () => {
           transition={{ duration: 0.8 }}
           viewport={{ once: true }}
           className="bg-card rounded-[10px] overflow-hidden mb-12 group cursor-pointer hover:bg-card/80 hover:shadow-xl hover:scale-[1.01] transition-all duration-300 border border-transparent hover:border-accent/20"
-          onClick={() => navigateTo('/projects/woka')}
+          onClick={() => navigate('/projects/woka')}
         >
-          <div className="grid lg:grid-cols-3 gap-0">
+          <div className="grid gap-0 lg:grid-cols-3">
             <div className="lg:col-span-2 relative aspect-[16/10] sm:aspect-[16/9] overflow-hidden bg-muted/30 px-2 rounded-[10px]">
               <ImageWithFallback
                 src={featuredCaseStudy.image}
                 alt="Woka educational platform mobile app interface with award recognition and interactive learning features for children"
                 className="w-full h-full object-contain object-center group-hover:scale-[1.02] transition-transform duration-700 rounded-[10px]"
               />
-              <div className="absolute top-6 left-6 z-10">
+              <div className="absolute z-10 top-6 left-6">
                 <span className="px-4 py-2 bg-accent text-accent-foreground font-semibold rounded-[10px]">
                   {featuredCaseStudy.achievement}
                 </span>
               </div>
             </div>
             
-            <div className="p-8 lg:p-12 flex flex-col justify-center">
-              <h3 className="text-3xl lg:text-4xl font-semibold text-foreground mb-6 group-hover:text-accent transition-colors duration-300">
+            <div className="flex flex-col justify-center p-8 lg:p-12">
+              <h3 className="mb-6 text-3xl font-semibold transition-colors duration-300 lg:text-4xl text-foreground group-hover:text-accent">
                 {featuredCaseStudy.title}
               </h3>
-              <p className="text-muted-foreground mb-8 leading-relaxed">
+              <p className="mb-8 leading-relaxed text-muted-foreground">
                 {featuredCaseStudy.description}
               </p>
               
-              <div className="space-y-4 mb-8">
+              <div className="mb-8 space-y-4">
                 {featuredCaseStudy.metrics.map((metric) => (
-                  <div key={metric.label} className="flex justify-between items-center">
-                    <span className="text-muted-foreground text-sm">{metric.label}</span>
-                    <span className="text-foreground font-semibold">{metric.value}</span>
+                  <div key={metric.label} className="flex items-center justify-between">
+                    <span className="text-sm text-muted-foreground">{metric.label}</span>
+                    <span className="font-semibold text-foreground">{metric.value}</span>
                   </div>
                 ))}
               </div>
@@ -196,10 +199,10 @@ export const CaseStudyHighlight = () => {
               </div>
               
               <button 
-                className="text-accent font-medium hover:text-foreground transition-colors duration-300 flex items-center gap-3 group-hover:translate-x-2 transition-transform duration-300"
+                className="flex items-center gap-3 font-medium transition-colors transition-transform duration-300 text-accent hover:text-foreground group-hover:translate-x-2"
                 onClick={(e) => {
                   e.stopPropagation();
-                  navigateTo('/projects/woka');
+                  navigate('/projects/woka');
                 }}
               >
                 View Full Case Study <ArrowRight className="w-5 h-5" />
@@ -208,7 +211,7 @@ export const CaseStudyHighlight = () => {
           </div>
         </motion.div>
         
-        <div className="grid md:grid-cols-2 lg:grid-cols-3 gap-8 mb-12">
+        <div className="grid gap-8 mb-12 md:grid-cols-2 lg:grid-cols-3">
           {caseStudies.map((study, index) => (
             <SmallCaseStudyCard key={study.title} study={study} index={index} />
           ))}
@@ -222,7 +225,7 @@ export const CaseStudyHighlight = () => {
           className="text-center"
         >
           <Button 
-            onClick={() => navigateTo('/case-studies')}
+            onClick={() => navigate('/case-studies')}
             className="bg-accent hover:bg-accent/90 text-accent-foreground px-8 py-3 rounded-[10px]"
           >
             View All Case Studies <ExternalLink className="w-4 h-4 ml-2" />

components/CaseStudySlider.tsx

@@ -0,0 +1,395 @@
+// components/CaseStudySlider.tsx
+import { motion } from "framer-motion";
+import {
+    Activity,
+    ArrowUpRight,
+    Building2,
+    ChevronLeft, ChevronRight,
+    FlaskConical,
+    Globe,
+    Heart,
+    Package,
+    PartyPopper,
+    ShoppingCart,
+    Star,
+    Tractor,
+    TrendingUp,
+    Trophy,
+    Tv,
+    Users,
+    Utensils
+} from "lucide-react";
+import { useEffect, useRef, useState } from "react";
+import { useNavigate } from "react-router-dom";
+import ambleCase from "../src/images/amble-case.webp";
+import amozCase from "../src/images/amozCase.webp";
+import dkCase from "../src/images/dkCase.webp";
+import farmCase from "../src/images/farmCase.webp";
+import gtCase from "../src/images/gt-case.webp";
+import leanCase from "../src/images/leanCase.webp";
+import niftyCase from "../src/images/niftyCase.webp";
+import prospertyCase from "../src/images/prospertyCase.webp";
+import ranoutofCase from "../src/images/ranoutof-case.webp";
+import RrCase from "../src/images/resturant-reward-case.webp";
+// import seezunCase from "../src/images/seezun-case.webp";
+import simplitendCase from "../src/images/simplitendCase.webp";
+import tcCase from "../src/images/tc-case.webp";
+import vib360Case from "../src/images/vib360Case.webp";
+import wokaCase from "../src/images/woka-case.webp";
+import { ImageWithFallback } from "./figma/ImageWithFallback";
+import { Badge } from "./ui/badge";
+import { Button } from "./ui/button";
+import { Card, CardContent } from "./ui/card";
+import { link } from "fs";
+
+// Internal data (no need to pass props)
+const defaultCaseStudies = [
+    {
+        id: 1,
+        title: "RanOutOf",
+        image: ranoutofCase,
+        category: "Lifestyle",
+        industry: "Consumer",
+        featured: true,
+        link: "/projects/ranoutof",
+        icon: Package
+    },
+    // {
+    //     id: 2,
+    //     title: "Seezun",
+    //     image: seezunCase,
+    //     category: "E-commerce",
+    //     industry: "Retail",
+    //     featured: true,
+    //     link: "/projects/seezun",
+    //     icon: ShoppingCart
+    // },
+    {
+        id: 3,
+        title: "Woka",
+        image: wokaCase,
+        category: "Health & Fitness",
+        industry: "Healthcare",
+        featured: true,
+        link: "/projects/woka",
+        icon: Tv
+    },
+    {
+        id: 6,
+        title: "Traders Circuit",
+        image: tcCase,
+        category: "FinTech",
+        industry: "Finance",
+        featured: true,
+        link: "/projects/traderscircuit",
+        icon: TrendingUp
+    },
+    {
+        id: 7,
+        title: "Good Times",
+        image: gtCase,
+        category: "Events",
+        industry: "Entertainment",
+        featured: true,
+        link: "/projects/goodtimes",
+        icon: PartyPopper
+    },
+    {
+        id: 8,
+        title: "Resturant Reward App",
+        image: RrCase,
+        category: "Loyalty & Rewards",
+        industry: "Hospitality",
+        featured: false,
+        // link: "/comming-soon",
+        link: "", icon: Utensils
+    },
+    {
+        id: 9,
+        title: "Amble",
+        image: ambleCase,
+        category: "Social",
+        industry: "Heritage",
+        featured: false,
+        link: "/projects/amble",
+        icon: Users
+    },
+    {
+        id: 10,
+        title: "Amoz",
+        image: amozCase,
+        category: "Lifestyle",
+        industry: "Consumer",
+        featured: false,
+        link: "/projects/amoz",
+        icon: Heart
+    },
+    {
+        id: 11,
+        title: "Dorf Ketal",
+        image: dkCase,
+        category: "Lifestyle",
+        industry: "Chemicals",
+        featured: false,
+        // link: "/comming-soon",
+        link: "",
+        icon: FlaskConical
+    },
+    {
+        id: 12,
+        title: "VIB360",
+        image: vib360Case,
+        category: "Lifestyle",
+        industry: "Consumer",
+        featured: false,
+        link: "/projects/vib360",
+        icon: Activity
+    },
+    {
+        id: 13,
+        title: "Nifty 11",
+        image: niftyCase,
+        category: "Lifestyle",
+        industry: "Consumer",
+        featured: false,
+        // link: "/comming-soon",
+        link: "", icon: Trophy
+    },
+    {
+        id: 14,
+        title: "Prosperty",
+        image: prospertyCase,
+        category: "Lifestyle",
+        industry: "Real Estate",
+        featured: false,
+        link: "/projects/prosperty",
+        icon: Building2
+    },
+    {
+        id: 15,
+        title: "Simpletend",
+        image: simplitendCase,
+        category: "Health & Fitness",
+        industry: "Healthcare",
+        featured: false,
+        link: "/projects/simpletend",
+        icon: Activity
+    },
+    {
+        id: 16,
+        title: "Farm Feeder",
+        image: farmCase,
+        category: "AgriTech",
+        industry: "Agriculture",
+        featured: false,
+        // link: "/comming-soon",
+        link: "", icon: Tractor
+    },
+    {
+        id: 17,
+        title: "Lean In World",
+        image: leanCase,
+        category: "AgriTech",
+        industry: "Agriculture",
+        featured: false,
+        // link: "/comming-soon",
+        link: "", icon: Globe
+    },
+];
+
+interface CaseStudySliderProps {
+    autoPlay?: boolean;
+    autoPlayInterval?: number;
+}
+
+export const CaseStudySlider = ({
+    autoPlay = false,
+    autoPlayInterval = 4000,
+}: CaseStudySliderProps) => {
+    const [currentIndex, setCurrentIndex] = useState(0);
+    const [isAutoPlaying, setIsAutoPlaying] = useState(autoPlay);
+    const [visibleSlides, setVisibleSlides] = useState(3);
+    const sliderRef = useRef<HTMLDivElement>(null);
+    const containerRef = useRef<HTMLDivElement>(null);
+    const navigate = useNavigate();
+
+    const caseStudies = defaultCaseStudies;
+
+    const nextSlide = () => {
+        setCurrentIndex((prev) => {
+            const nextIndex = prev + 1;
+            return nextIndex > caseStudies.length - visibleSlides ? 0 : nextIndex;
+        });
+    };
+
+    const prevSlide = () => {
+        setCurrentIndex((prev) => {
+            const prevIndex = prev - 1;
+            return prevIndex < 0 ? caseStudies.length - visibleSlides : prevIndex;
+        });
+    };
+
+    const goToSlide = (index: number) => {
+        setCurrentIndex(Math.min(index, caseStudies.length - visibleSlides));
+    };
+
+    useEffect(() => {
+        if (!isAutoPlaying || !autoPlay) return;
+        const interval = setInterval(nextSlide, autoPlayInterval);
+        return () => clearInterval(interval);
+    }, [isAutoPlaying, autoPlay, autoPlayInterval, visibleSlides]);
+
+    // Calculate visible slides on resize
+    useEffect(() => {
+        const updateVisibleSlides = () => {
+            if (!containerRef.current) return;
+            const width = containerRef.current.offsetWidth;
+            if (width < 640) setVisibleSlides(1);
+            else if (width < 1024) setVisibleSlides(2);
+            else setVisibleSlides(3);
+        };
+
+        updateVisibleSlides();
+        window.addEventListener('resize', updateVisibleSlides);
+        return () => window.removeEventListener('resize', updateVisibleSlides);
+    }, []);
+
+    const maxIndex = Math.max(0, caseStudies.length - visibleSlides);
+
+    // Calculate the actual translation percentage
+    const getTranslationPercentage = () => {
+        if (visibleSlides >= caseStudies.length) return 0;
+        return (currentIndex * (100 / visibleSlides));
+    };
+
+    return (
+        <section
+            className="py-20 pt-10"
+            onMouseEnter={() => setIsAutoPlaying(false)}
+            onMouseLeave={() => setIsAutoPlaying(autoPlay)}
+            ref={containerRef}
+        >
+            <div className="container px-6 mx-auto lg:px-8">
+                {/* Header */}
+                <div className="flex items-center justify-end mb-8">
+                    {caseStudies.length > visibleSlides && (
+                        <div className="flex items-center gap-2">
+                            <Button
+                                variant="outline"
+                                size="icon"
+                                onClick={prevSlide}
+                                disabled={currentIndex === 0}
+                                className="w-10 h-10 rounded-full border-white/20 hover:border-accent/50 disabled:opacity-50"
+                            >
+                                <ChevronLeft className="w-5 h-5" />
+                            </Button>
+                            <Button
+                                variant="outline"
+                                size="icon"
+                                onClick={nextSlide}
+                                disabled={currentIndex >= maxIndex}
+                                className="w-10 h-10 rounded-full border-white/20 hover:border-accent/50 disabled:opacity-50"
+                            >
+                                <ChevronRight className="w-5 h-5" />
+                            </Button>
+                        </div>
+                    )}
+                </div>
+
+                {/* Slider Container */}
+                <div className="relative overflow-hidden" ref={sliderRef}>
+                    <motion.div
+                        className="flex gap-6"
+                        animate={{
+                            x: `-${getTranslationPercentage()}%`
+                        }}
+                        transition={{
+                            type: "spring",
+                            stiffness: 400,
+                            damping: 40,
+                            duration: 0.6
+                        }}
+                        style={{ willChange: "transform" }}
+                    >
+                        {caseStudies.map((study, index) => {
+                            const IconComponent = study.icon;
+                            return (
+                                <motion.div
+                                    key={study.id}
+                                    className="flex-shrink-0"
+                                    style={{
+                                        width: `calc(${100 / visibleSlides}% - 1.5rem)`
+                                    }}
+                                    initial={{ opacity: 0, scale: 0.9 }}
+                                    animate={{ opacity: 1, scale: 1 }}
+                                    transition={{
+                                        duration: 0.5,
+                                        delay: index * 0.1,
+                                        ease: "easeOut"
+                                    }}
+                                >
+                                    <Card
+                                        className="bg-card/50 backdrop-blur-md border-white/10 hover:border-accent/30 transition-all duration-500 shadow-lg hover:shadow-2xl hover:shadow-accent/10 rounded-2xl overflow-hidden h-[full] cursor-pointer"
+                                        onClick={() => navigate(study.link)}
+                                    >
+                                        <CardContent className="h-full p-0 CardContentOverride">
+                                            {/* Image */}
+                                            <div className="relative overflow-hidden">
+                                                <ImageWithFallback
+                                                    src={study.image}
+                                                    alt={study.title}
+                                                    className="object-cover w-full h-full transition-transform duration-500 group-hover:scale-110"
+                                                />
+                                                <div className="absolute inset-0 bg-gradient-to-t from-black/60 via-transparent to-transparent" />
+
+                                                {/* Category Badge */}
+                                                <div className="absolute top-2 left-4">
+                                                    <Badge className="text-xs text-white border-0 bg-accent/90">
+                                                        {study.category}
+                                                    </Badge>
+                                                </div>
+
+                                                {/* Featured Badge */}
+                                                {study.featured && (
+                                                    <div className="absolute top-2 right-4">
+                                                        <div className="flex items-center gap-1 px-2 py-1 text-xs font-medium text-white rounded-full bg-amber-500/90">
+                                                            <Star className="w-3 h-3 fill-current" />
+                                                            Featured
+                                                        </div>
+                                                    </div>
+                                                )}
+
+                                                {/* Icon */}
+                                                <div className="absolute bottom-4 left-4">
+                                                    <div className="flex items-center justify-center w-10 h-10 rounded-full bg-white/20 backdrop-blur-md">
+                                                        <IconComponent className="w-5 h-5 text-white" />
+                                                    </div>
+                                                </div>
+                                            </div>
+                                        </CardContent>
+                                    </Card>
+                                </motion.div>
+                            );
+                        })}
+                    </motion.div>
+                </div>
+
+                {/* Dots Indicator */}
+                {caseStudies.length > visibleSlides && (
+                    <div className="flex items-center justify-center gap-2 mt-8">
+                        {Array.from({ length: maxIndex + 1 }).map((_, index) => (
+                            <button
+                                key={index}
+                                onClick={() => goToSlide(index)}
+                                className={`w-2 h-2 rounded-full transition-all duration-300 ${index === currentIndex
+                                        ? "bg-accent w-6"
+                                        : "bg-white/30 hover:bg-white/50"
+                                    }`}
+                            />
+                        ))}
+                    </div>
+                )}
+            </div>
+        </section>
+    );
+};

components/ClientLogos.tsx

@@ -1,5 +1,6 @@
 import { motion } from "framer-motion";
 import { GridPattern } from "./GridPattern";
+import Flag from 'react-world-flags';
 
 const companyLogos = [
   { name: "TechFlow Solutions", logo: null, width: "140" },
@@ -7,7 +8,7 @@ const companyLogos = [
   { name: "CloudNova Systems", logo: null, width: "140" },
   { name: "AMOZ", logo: null, width: "90" },
   { name: "SimpliTend", logo: null, width: "120" },
-  { name: "Seezun", logo: null, width: "100" },
+  // { name: "Seezun", logo: null, width: "100" },
   { name: "TradersCircuit", logo: null, width: "140" },
   { name: "FreeU", logo: null, width: "90" },
   { name: "Amble", logo: null, width: "100" },
@@ -38,97 +39,104 @@ const companyLogos = [
   { name: "InnovateLab", logo: null, width: "120" }
 ];
 
-const countryFlags = [
-  {
-    name: "United States",
-    alt: "United States flag icon",
-    flagSvg: (
-      <svg viewBox="0 0 24 18" className="w-8 h-6">
-        <rect width="24" height="18" fill="#B22234"/>
-        <rect width="24" height="1.38" y="1.38" fill="white"/>
-        <rect width="24" height="1.38" y="4.15" fill="white"/>
-        <rect width="24" height="1.38" y="6.92" fill="white"/>
-        <rect width="24" height="1.38" y="9.69" fill="white"/>
-        <rect width="24" height="1.38" y="12.46" fill="white"/>
-        <rect width="24" height="1.38" y="15.23" fill="white"/>
-        <rect width="9.6" height="9.69" fill="#3C3B6E"/>
-      </svg>
-    )
-  },
-  {
-    name: "United Kingdom",
-    alt: "United Kingdom flag icon",
-    flagSvg: (
-      <svg viewBox="0 0 24 18" className="w-8 h-6">
-        <rect width="24" height="18" fill="#012169"/>
-        <path d="M0 0L24 18M24 0L0 18" stroke="white" strokeWidth="2"/>
-        <path d="M0 0L24 18M24 0L0 18" stroke="#C8102E" strokeWidth="1"/>
-        <path d="M12 0V18M0 9H24" stroke="white" strokeWidth="3"/>
-        <path d="M12 0V18M0 9H24" stroke="#C8102E" strokeWidth="2"/>
-      </svg>
-    )
-  },
-  {
-    name: "India",
-    alt: "India flag icon",
-    flagSvg: (
-      <svg viewBox="0 0 24 18" className="w-8 h-6">
-        <rect width="24" height="6" fill="#FF9933"/>
-        <rect width="24" height="6" y="6" fill="white"/>
-        <rect width="24" height="6" y="12" fill="#138808"/>
-        <circle cx="12" cy="9" r="2" fill="none" stroke="#000080" strokeWidth="0.3"/>
-        <g transform="translate(12,9)">
-          {Array.from({length: 24}, (_, i) => (
-            <line key={i} x1="0" y1="-1.5" x2="0" y2="-1.8" stroke="#000080" strokeWidth="0.1" transform={`rotate(${i * 15})`}/>
-          ))}
-        </g>
-      </svg>
-    )
-  },
-  {
-    name: "Canada",
-    alt: "Canada flag icon",
-    flagSvg: (
-      <svg viewBox="0 0 24 18" className="w-8 h-6">
-        <rect width="6" height="18" fill="#FF0000"/>
-        <rect width="12" height="18" x="6" fill="white"/>
-        <rect width="6" height="18" x="18" fill="#FF0000"/>
-        <path d="M12 4L13 7H16L13.5 9L14.5 12L12 10L9.5 12L10.5 9L8 7H11L12 4Z" fill="#FF0000"/>
-      </svg>
-    )
-  },
-  {
-    name: "Australia",
-    alt: "Australia flag icon",
-    flagSvg: (
-      <svg viewBox="0 0 24 18" className="w-8 h-6">
-        <rect width="24" height="18" fill="#012169"/>
-        <g transform="scale(0.5)">
-          <rect width="24" height="9" fill="#012169"/>
-          <path d="M0 0L24 18M24 0L0 18" stroke="white" strokeWidth="2"/>
-          <path d="M0 0L24 18M24 0L0 18" stroke="#C8102E" strokeWidth="1"/>
-          <path d="M12 0V18M0 9H24" stroke="white" strokeWidth="3"/>
-          <path d="M12 0V18M0 9H24" stroke="#C8102E" strokeWidth="2"/>
-        </g>
-        <g fill="white">
-          <circle cx="18" cy="6" r="0.5"/>
-          <circle cx="20" cy="8" r="0.3"/>
-          <circle cx="19" cy="10" r="0.4"/>
-          <circle cx="21" cy="12" r="0.3"/>
-          <circle cx="18" cy="14" r="0.5"/>
-        </g>
-      </svg>
-    )
-  }
-];
+// const countryFlags = [
+//   {
+//     name: "United States",
+//     alt: "United States flag icon",
+//     flagSvg: (
+//       <svg viewBox="0 0 24 18" className="w-8 h-6">
+//         <rect width="24" height="18" fill="#B22234"/>
+//         <rect width="24" height="1.38" y="1.38" fill="white"/>
+//         <rect width="24" height="1.38" y="4.15" fill="white"/>
+//         <rect width="24" height="1.38" y="6.92" fill="white"/>
+//         <rect width="24" height="1.38" y="9.69" fill="white"/>
+//         <rect width="24" height="1.38" y="12.46" fill="white"/>
+//         <rect width="24" height="1.38" y="15.23" fill="white"/>
+//         <rect width="9.6" height="9.69" fill="#3C3B6E"/>
+//       </svg>
+//     )
+//   },
+//   {
+//     name: "United Kingdom",
+//     alt: "United Kingdom flag icon",
+//     flagSvg: (
+//       <svg viewBox="0 0 24 18" className="w-8 h-6">
+//         <rect width="24" height="18" fill="#012169"/>
+//         <path d="M0 0L24 18M24 0L0 18" stroke="white" strokeWidth="2"/>
+//         <path d="M0 0L24 18M24 0L0 18" stroke="#C8102E" strokeWidth="1"/>
+//         <path d="M12 0V18M0 9H24" stroke="white" strokeWidth="3"/>
+//         <path d="M12 0V18M0 9H24" stroke="#C8102E" strokeWidth="2"/>
+//       </svg>
+//     )
+//   },
+//   {
+//     name: "India",
+//     alt: "India flag icon",
+//     flagSvg: (
+//       <svg viewBox="0 0 24 18" className="w-8 h-6">
+//         <rect width="24" height="6" fill="#FF9933"/>
+//         <rect width="24" height="6" y="6" fill="white"/>
+//         <rect width="24" height="6" y="12" fill="#138808"/>
+//         <circle cx="12" cy="9" r="2" fill="none" stroke="#000080" strokeWidth="0.3"/>
+//         <g transform="translate(12,9)">
+//           {Array.from({length: 24}, (_, i) => (
+//             <line key={i} x1="0" y1="-1.5" x2="0" y2="-1.8" stroke="#000080" strokeWidth="0.1" transform={`rotate(${i * 15})`}/>
+//           ))}
+//         </g>
+//       </svg>
+//     )
+//   },
+//   {
+//     name: "Canada",
+//     alt: "Canada flag icon",
+//     flagSvg: (
+//       <svg viewBox="0 0 24 18" className="w-8 h-6">
+//         <rect width="6" height="18" fill="#FF0000"/>
+//         <rect width="12" height="18" x="6" fill="white"/>
+//         <rect width="6" height="18" x="18" fill="#FF0000"/>
+//         <path d="M12 4L13 7H16L13.5 9L14.5 12L12 10L9.5 12L10.5 9L8 7H11L12 4Z" fill="#FF0000"/>
+//       </svg>
+//     )
+//   },
+//   {
+//     name: "Australia",
+//     alt: "Australia flag icon",
+//     flagSvg: (
+//       <svg viewBox="0 0 24 18" className="w-8 h-6">
+//         <rect width="24" height="18" fill="#012169"/>
+//         <g transform="scale(0.5)">
+//           <rect width="24" height="9" fill="#012169"/>
+//           <path d="M0 0L24 18M24 0L0 18" stroke="white" strokeWidth="2"/>
+//           <path d="M0 0L24 18M24 0L0 18" stroke="#C8102E" strokeWidth="1"/>
+//           <path d="M12 0V18M0 9H24" stroke="white" strokeWidth="3"/>
+//           <path d="M12 0V18M0 9H24" stroke="#C8102E" strokeWidth="2"/>
+//         </g>
+//         <g fill="white">
+//           <circle cx="18" cy="6" r="0.5"/>
+//           <circle cx="20" cy="8" r="0.3"/>
+//           <circle cx="19" cy="10" r="0.4"/>
+//           <circle cx="21" cy="12" r="0.3"/>
+//           <circle cx="18" cy="14" r="0.5"/>
+//         </g>
+//       </svg>
+//     )
+//   }
+// ];
 
+const countryFlags = [
+  { name: "United States", code: "US", alt: "United States flag" },
+  { name: "United Kingdom", code: "GB", alt: "United Kingdom flag" },
+  { name: "India", code: "IN", alt: "India flag" },
+  { name: "Canada", code: "CA", alt: "Canada flag" },
+  { name: "Australia", code: "AU", alt: "Australia flag" }
+];
 const ProjectImageCircles = () => (
   <motion.div
     initial={{ opacity: 0, y: 20 }}
     whileInView={{ opacity: 1, y: 0 }}
     transition={{ duration: 0.8, delay: 0.3 }}
     viewport={{ once: true }}
-    className="flex justify-center items-center mb-12"
+    className="flex items-center justify-center mb-12"
   >
     <div className="flex items-center">
       {countryFlags.map((flag, index) => (
@@ -154,18 +162,19 @@ const ProjectImageCircles = () => (
             zIndex: countryFlags.length - index
           }}
         >
-          <div className="absolute inset-0 w-16 h-16 rounded-full bg-white/10 backdrop-blur-sm border-2 border-white/20 group-hover:border-accent/50 group-hover:bg-white/15 transition-all duration-300 shadow-lg group-hover:shadow-xl flex items-center justify-center overflow-hidden">
+          {/* Circular container */}
+          <div className="absolute inset-0 flex items-center justify-center w-16 h-16 overflow-hidden transition-all duration-300 border-2 rounded-full shadow-lg bg-white/10 backdrop-blur-sm border-white/20 group-hover:border-accent/50 group-hover:bg-white/15 group-hover:shadow-xl">
             <div
-              className="w-10 h-8 flex items-center justify-center transform group-hover:scale-110 transition-transform duration-300"
+              className="flex items-center justify-center w-10 h-8 transition-transform duration-300 transform group-hover:scale-110"
               role="img"
               aria-label={flag.alt}
             >
-              {flag.flagSvg}
+              <Flag code={flag.code} style={{ width: '40px', height: '30px' }} />
             </div>
           </div>
 
           {/* Subtle glow effect */}
-          <div className="absolute inset-0 w-16 h-16 rounded-full bg-gradient-to-br from-accent/10 to-transparent opacity-0 group-hover:opacity-100 transition-opacity duration-300"></div>
+          <div className="absolute inset-0 w-16 h-16 transition-opacity duration-300 rounded-full opacity-0 bg-gradient-to-br from-accent/10 to-transparent group-hover:opacity-100"></div>
 
           {/* Tooltip */}
           <div className="absolute -top-12 left-1/2 transform -translate-x-1/2 bg-[#0E0E0E] text-white text-xs px-3 py-1.5 rounded-lg opacity-0 group-hover:opacity-100 transition-opacity whitespace-nowrap pointer-events-none shadow-lg border border-white/10 z-50">
@@ -182,10 +191,10 @@ const ProjectImageCircles = () => (
 
 const LogoCard = ({ name, width }: { name: string; width: string }) => (
   <div
-    className="flex items-center justify-center h-16 bg-white/8 rounded-xl border border-white/10 hover:scale-105 hover:bg-white/12 hover:border-accent/20 transition-all duration-300 px-6 shadow-lg backdrop-blur-sm group"
+    className="flex items-center justify-center h-16 px-6 transition-all duration-300 border shadow-lg bg-white/8 rounded-xl border-white/10 hover:scale-105 hover:bg-white/12 hover:border-accent/20 backdrop-blur-sm group"
     style={{ minWidth: `${width}px` }}
   >
-    <span className="text-white/80 font-medium text-sm text-center leading-tight group-hover:text-white/95 transition-colors duration-300">
+    <span className="text-sm font-medium leading-tight text-center transition-colors duration-300 text-white/80 group-hover:text-white/95">
       {name}
     </span>
   </div>
@@ -204,7 +213,7 @@ const MarqueeRow = ({ logos }: { logos: typeof companyLogos }) => (
         ease: "linear",
       },
     }}
-    className="flex gap-6 items-center"
+    className="flex items-center gap-6"
     style={{
       width: "fit-content",
     }}
@@ -220,15 +229,15 @@ export const ClientLogos = () => {
     <section className="relative py-20 bg-[#121212] border-y border-white/5 overflow-hidden">
       <GridPattern strokeDasharray="4 2" />
 
-      <div className="relative z-10 container mx-auto px-6 lg:px-8">
+      <div className="container relative z-10 px-6 mx-auto lg:px-8">
         <motion.div
           initial={{ opacity: 0, y: 30 }}
           whileInView={{ opacity: 1, y: 0 }}
           transition={{ duration: 0.8 }}
           viewport={{ once: true }}
-          className="text-center mb-8"
+          className="mb-8 text-center"
         >
-          <h2 className="text-3xl lg:text-4xl font-semibold text-white mb-6">
+          <h2 className="mb-6 text-3xl font-semibold text-white lg:text-4xl">
             Trusted by Founders and CTOs Across 15+ Countries
           </h2>
         </motion.div>

components/CountryFlags.tsx

@@ -9,14 +9,14 @@ const foundersAndCTOs = [
     flagEmoji: "🇮🇳",
     projectType: "Care Management"
   },
-  { 
-    name: "Seezun", 
-    title: "Fashion Marketplace",
-    country: "United Kingdom",
-    code: "GB",
-    flagEmoji: "🇬🇧",
-    projectType: "P2P Platform"
-  },
+  // { 
+  //   name: "Seezun", 
+  //   title: "Fashion Marketplace",
+  //   country: "United Kingdom",
+  //   code: "GB",
+  //   flagEmoji: "🇬🇧",
+  //   projectType: "P2P Platform"
+  // },
   { 
     name: "AMOZ", 
     title: "E-commerce Platform",
@@ -132,7 +132,7 @@ export const CountryFlags = () => {
       viewport={{ once: true }}
       className="mb-12"
     >
-      <div className="grid grid-cols-2 sm:grid-cols-3 md:grid-cols-4 lg:grid-cols-5 xl:grid-cols-6 gap-6 max-w-7xl mx-auto">
+      <div className="grid grid-cols-2 gap-6 mx-auto sm:grid-cols-3 md:grid-cols-4 lg:grid-cols-5 xl:grid-cols-6 max-w-7xl">
         {foundersAndCTOs.map((project, index) => (
           <motion.div
             key={project.code + index}
@@ -149,12 +149,12 @@ export const CountryFlags = () => {
               scale: 1.05,
               transition: { duration: 0.2 }
             }}
-            className="group cursor-pointer relative"
+            className="relative cursor-pointer group"
           >
             <div className="text-center">
               {/* Flag Icon */}
               <div className="flex justify-center mb-3">
-                <div className="w-14 h-14 rounded-full bg-white/10 backdrop-blur-sm border border-white/20 flex items-center justify-center group-hover:bg-white/20 group-hover:border-accent/30 transition-all duration-300 shadow-lg group-hover:shadow-xl">
+                <div className="flex items-center justify-center transition-all duration-300 border rounded-full shadow-lg w-14 h-14 bg-white/10 backdrop-blur-sm border-white/20 group-hover:bg-white/20 group-hover:border-accent/30 group-hover:shadow-xl">
                   <span className="text-2xl" role="img" aria-label={`${project.country} flag`}>
                     {project.flagEmoji}
                   </span>
@@ -163,10 +163,10 @@ export const CountryFlags = () => {
               
               {/* Project Badge */}
               <div className="bg-white/8 rounded-lg border border-white/10 px-3 py-2.5 group-hover:bg-white/12 group-hover:border-accent/30 transition-all duration-300 shadow-sm backdrop-blur-sm min-h-[60px] flex flex-col justify-center">
-                <div className="text-white/90 font-medium text-sm leading-tight mb-1 group-hover:text-white transition-colors duration-300">
+                <div className="mb-1 text-sm font-medium leading-tight transition-colors duration-300 text-white/90 group-hover:text-white">
                   {project.name}
                 </div>
-                <div className="text-white/60 text-xs leading-tight">
+                <div className="text-xs leading-tight text-white/60">
                   {project.projectType}
                 </div>
               </div>
@@ -174,9 +174,9 @@ export const CountryFlags = () => {
               {/* Enhanced Tooltip */}
               <div className="absolute -top-24 left-1/2 transform -translate-x-1/2 bg-[#0E0E0E] text-white text-xs px-4 py-3 rounded-xl opacity-0 group-hover:opacity-100 transition-all duration-300 whitespace-nowrap pointer-events-none shadow-xl border border-white/20 z-50 backdrop-blur-md">
                 <div className="text-center">
-                  <div className="font-semibold text-accent mb-1">{project.name}</div>
-                  <div className="text-white/80 mb-1">{project.title}</div>
-                  <div className="text-white/60 flex items-center gap-1 justify-center">
+                  <div className="mb-1 font-semibold text-accent">{project.name}</div>
+                  <div className="mb-1 text-white/80">{project.title}</div>
+                  <div className="flex items-center justify-center gap-1 text-white/60">
                     <span>{project.flagEmoji}</span>
                     <span>{project.country}</span>
                   </div>

components/DedicatedTeamPricing.tsx

@@ -0,0 +1,297 @@
+import { motion } from "framer-motion";
+import { Check, Users, Clock, Sparkles } from "lucide-react";
+import { GridPattern } from "./GridPattern";
+import { Badge } from "./ui/badge";
+
+interface PricingTier {
+  name: string;
+  price: string;
+  pricePerMonth: string;
+  description: string;
+  isPopular?: boolean;
+  teamSize: string;
+  projectManager: string;
+  uiuxDesigners: string;
+  frontendDevs: string;
+  backendDevs: string;
+  qaTesters: string;
+  leadTime: string;
+  minEngagement: string;
+}
+
+const pricingTiers: PricingTier[] = [
+  {
+    name: "Small",
+    price: "$7,500",
+    pricePerMonth: "/mo",
+    description: "Maintenance & updates",
+    teamSize: "3-5 Members",
+    projectManager: "Part-time (≤ 32 hrs/month)",
+    uiuxDesigners: "Part-time",
+    frontendDevs: "Shared",
+    backendDevs: "Shared",
+    qaTesters: "Part-time",
+    leadTime: "< 3 Days",
+    minEngagement: "1 Month",
+  },
+  {
+    name: "Medium",
+    price: "$12,000",
+    pricePerMonth: "/mo",
+    description: "Ongoing MVP development",
+    isPopular: true,
+    teamSize: "4-8 Members",
+    projectManager: "Shared (≤ 80 hrs/month)",
+    uiuxDesigners: "Shared",
+    frontendDevs: "Shared",
+    backendDevs: "Shared",
+    qaTesters: "Shared",
+    leadTime: "< 2 Weeks",
+    minEngagement: "2 Months",
+  },
+  {
+    name: "Large",
+    price: "$22,680",
+    pricePerMonth: "/mo",
+    description: "Long-term growth & GTM",
+    teamSize: "6-10 Members",
+    projectManager: "Dedicated full-time",
+    uiuxDesigners: "Full-time",
+    frontendDevs: "Full-time",
+    backendDevs: "Full-time",
+    qaTesters: "Full-time",
+    leadTime: "< 4 Weeks",
+    minEngagement: "3 Months",
+  },
+];
+
+const includedFeatures = [
+  {
+    left: "Access to WDI Code Library",
+    right: "Direct Communication",
+  },
+  {
+    left: "Time Zone Overlap: 3 Hours",
+    right: "Resource Replacement (within 1 week)",
+  },
+  {
+    left: "No Obligation Trial (conditional)",
+    right: "IPR & Code Ownership",
+  },
+  {
+    left: "Termination Notice: 1 Month",
+    right: "Performance Guarantee",
+  },
+];
+
+const comparisonRows = [
+  { label: "Team Size", key: "teamSize" as keyof PricingTier },
+  { label: "Project Manager", key: "projectManager" as keyof PricingTier },
+  { label: "UI/UX Designers", key: "uiuxDesigners" as keyof PricingTier },
+  { label: "Frontend Developers", key: "frontendDevs" as keyof PricingTier },
+  { label: "Backend Developers", key: "backendDevs" as keyof PricingTier },
+  { label: "QA Testers", key: "qaTesters" as keyof PricingTier },
+  { label: "Lead Time to Start", key: "leadTime" as keyof PricingTier },
+  {
+    label: "Minimum Engagement Period",
+    key: "minEngagement" as keyof PricingTier,
+  },
+];
+
+export const DedicatedTeamPricing = () => {
+  return (
+    <section className="relative py-20 bg-background overflow-hidden">
+      <GridPattern strokeDasharray="4 2" />
+
+      <div className="relative z-10 container mx-auto px-6 lg:px-8">
+        {/* Header */}
+        <motion.div
+          initial={{ opacity: 0, y: 30 }}
+          whileInView={{ opacity: 1, y: 0 }}
+          transition={{ duration: 0.8 }}
+          viewport={{ once: true }}
+          className="text-center mb-16"
+        >
+          <div className="inline-flex items-center gap-2 mb-4">
+            <Users className="w-6 h-6 text-accent" />
+            <h2 className="text-4xl lg:text-5xl font-semibold text-foreground font-manrope">
+              Dedicated Team Pricing
+            </h2>
+          </div>
+          <p className="text-muted-foreground text-lg max-w-2xl mx-auto font-manrope">
+            Scale your AI mobile and web development with flexible team
+            structures tailored to your project needs.
+          </p>
+        </motion.div>
+
+        {/* Pricing Cards Row */}
+        <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-3 gap-6 mb-12 max-w-6xl mx-auto"
+        >
+          {pricingTiers.map((tier, index) => (
+            <motion.div
+              key={tier.name}
+              initial={{ opacity: 0, y: 20 }}
+              whileInView={{ opacity: 1, y: 0 }}
+              transition={{ duration: 0.5, delay: index * 0.1 }}
+              viewport={{ once: true }}
+              className={`relative bg-card/50 backdrop-blur-sm border rounded-[20px] p-6 transition-all duration-300 ${
+                tier.isPopular
+                  ? "border-blue-500/50 shadow-xl shadow-blue-500/10 scale-105"
+                  : "border-border/50 hover:border-accent/30"
+              }`}
+            >
+              {tier.isPopular && (
+                <div className="absolute -top-4 left-1/2 -translate-x-1/2">
+                  <Badge className="bg-blue-600 text-white px-4 py-1 rounded-full font-manrope">
+                    Most Popular
+                  </Badge>
+                </div>
+              )}
+
+              <div className="text-center mb-6">
+                <h3 className="text-2xl font-semibold text-foreground mb-2 font-manrope">
+                  {tier.name}
+                </h3>
+                <div className="flex items-baseline justify-center mb-2">
+                  <span className="text-4xl font-semibold text-foreground font-manrope">
+                    {tier.price}
+                  </span>
+                  <span className="text-xl text-muted-foreground font-manrope">
+                    {tier.pricePerMonth}
+                  </span>
+                </div>
+                <p className="text-sm text-muted-foreground font-manrope">
+                  {tier.description}
+                </p>
+              </div>
+            </motion.div>
+          ))}
+        </motion.div>
+
+        {/* Comparison Table */}
+        <motion.div
+          initial={{ opacity: 0, y: 40 }}
+          whileInView={{ opacity: 1, y: 0 }}
+          transition={{ duration: 0.8, delay: 0.4 }}
+          viewport={{ once: true }}
+          className="max-w-6xl mx-auto mb-16"
+        >
+          <div className="bg-card/30 backdrop-blur-md border border-border/50 rounded-[20px] overflow-hidden">
+            <div className="overflow-x-auto">
+              <table className="w-full border-collapse font-manrope">
+                {/* Table Header - Hidden on mobile, shown on desktop */}
+                <thead className="hidden md:table-header-group">
+                  <tr className="border-b border-border/50 bg-card/50">
+                    <th className="p-6 text-left font-semibold text-foreground font-manrope"></th>
+                    {pricingTiers.map((tier) => (
+                      <th
+                        key={tier.name}
+                        className="p-6 text-center font-semibold text-foreground font-manrope"
+                      >
+                        {tier.name}
+                      </th>
+                    ))}
+                  </tr>
+                </thead>
+
+                {/* Table Body */}
+                <tbody>
+                  {comparisonRows.map((row, rowIndex) => (
+                    <motion.tr
+                      key={row.label}
+                      initial={{ opacity: 0, x: -20 }}
+                      whileInView={{ opacity: 1, x: 0 }}
+                      transition={{ duration: 0.5, delay: rowIndex * 0.05 }}
+                      viewport={{ once: true }}
+                      className="border-b border-border/30 last:border-b-0 hover:bg-card/50 transition-colors duration-200"
+                    >
+                      <td className="p-6 font-medium text-muted-foreground font-manrope align-top">
+                        <div className="md:hidden mb-3">{row.label}</div>
+                        <div className="hidden md:block">{row.label}</div>
+
+                        {/* Mobile: Stack values vertically with tier name */}
+                        <div className="grid grid-cols-1 md:hidden gap-3 mt-3">
+                          {pricingTiers.map((tier) => (
+                            <div
+                              key={tier.name}
+                              className="flex justify-between items-center bg-card/30 rounded-lg p-3"
+                            >
+                              <span className="text-sm text-muted-foreground font-manrope">
+                                {tier.name}:
+                              </span>
+                              <span className="text-foreground font-manrope text-right">
+                                {tier[row.key]}
+                              </span>
+                            </div>
+                          ))}
+                        </div>
+                      </td>
+
+                      {/* Desktop: Show values in columns */}
+                      {pricingTiers.map((tier) => (
+                        <td
+                          key={tier.name}
+                          className="hidden md:table-cell p-6 text-center text-foreground font-manrope align-top"
+                        >
+                          {tier[row.key]}
+                        </td>
+                      ))}
+                    </motion.tr>
+                  ))}
+                </tbody>
+              </table>
+            </div>
+          </div>
+        </motion.div>
+
+        {/* Included in All Plans */}
+        <motion.div
+          initial={{ opacity: 0, y: 40 }}
+          whileInView={{ opacity: 1, y: 0 }}
+          transition={{ duration: 0.8, delay: 0.6 }}
+          viewport={{ once: true }}
+          className="max-w-4xl mx-auto"
+        >
+          <div className="bg-gradient-to-br from-accent/5 to-blue-500/5 backdrop-blur-sm border border-accent/20 rounded-[20px] p-8">
+            <div className="flex items-center gap-3 mb-6">
+              <div className="w-12 h-12 bg-accent/20 rounded-full flex items-center justify-center">
+                <Sparkles className="w-6 h-6 text-accent" />
+              </div>
+              <h3 className="text-2xl font-semibold text-foreground font-manrope">
+                Included in All Plans
+              </h3>
+            </div>
+
+            <div className="grid md:grid-cols-2 gap-6">
+              {includedFeatures.map((feature, index) => (
+                <div key={index} className="space-y-3">
+                  <div className="flex items-start gap-3">
+                    <div className="flex-shrink-0 w-5 h-5 bg-accent/20 rounded-full flex items-center justify-center mt-0.5">
+                      <Check className="w-3 h-3 text-accent" />
+                    </div>
+                    <span className="text-foreground font-manrope leading-relaxed">
+                      {feature.left}
+                    </span>
+                  </div>
+                  <div className="flex items-start gap-3">
+                    <div className="flex-shrink-0 w-5 h-5 bg-accent/20 rounded-full flex items-center justify-center mt-0.5">
+                      <Check className="w-3 h-3 text-accent" />
+                    </div>
+                    <span className="text-foreground font-manrope leading-relaxed">
+                      {feature.right}
+                    </span>
+                  </div>
+                </div>
+              ))}
+            </div>
+          </div>
+        </motion.div>
+      </div>
+    </section>
+  );
+};

components/DiwaliHeroSection.tsx

@@ -0,0 +1,571 @@
+import { Button } from "./ui/button";
+import { Calendar, Briefcase, Sparkles } from "lucide-react";
+import { motion } from "framer-motion";
+import { useNavigate } from "react-router-dom";
+
+// Firework component
+const Firework = ({ delay = 0, top, left, colors }: { delay?: number; top: string; left: string; colors: string[] }) => {
+  return (
+    <motion.div
+      className="absolute pointer-events-none"
+      style={{ top, left }}
+      initial={{ opacity: 0, scale: 0 }}
+      animate={{
+        opacity: [0, 1, 1, 0],
+        scale: [0, 1.5, 2, 2.5],
+      }}
+      transition={{
+        duration: 3,
+        repeat: Infinity,
+        delay,
+        ease: "easeOut",
+      }}
+    >
+      <svg width="200" height="200" viewBox="0 0 200 200" className="w-48 h-48">
+        {/* Firework burst rays */}
+        {Array.from({ length: 24 }).map((_, i) => {
+          const angle = (i * 360) / 24;
+          const colorIndex = i % colors.length;
+          return (
+            <motion.line
+              key={i}
+              x1="100"
+              y1="100"
+              x2="100"
+              y2="20"
+              stroke={colors[colorIndex]}
+              strokeWidth="2"
+              strokeLinecap="round"
+              transform={`rotate(${angle} 100 100)`}
+              initial={{ opacity: 0 }}
+              animate={{
+                opacity: [0, 1, 0.8, 0],
+              }}
+              transition={{
+                duration: 3,
+                repeat: Infinity,
+                delay: delay + i * 0.02,
+                ease: "easeOut",
+              }}
+            />
+          );
+        })}
+        {/* Center burst */}
+        <motion.circle
+          cx="100"
+          cy="100"
+          r="4"
+          fill={colors[0]}
+          initial={{ opacity: 0 }}
+          animate={{
+            opacity: [0, 1, 0.5, 0],
+          }}
+          transition={{
+            duration: 3,
+            repeat: Infinity,
+            delay,
+          }}
+        />
+      </svg>
+    </motion.div>
+  );
+};
+
+// Sparkle Star component
+const SparkleStar = ({ delay = 0, top, left, size = 16 }: { delay?: number; top: string; left: string; size?: number }) => {
+  return (
+    <motion.div
+      className="absolute pointer-events-none"
+      style={{ top, left }}
+      animate={{
+        scale: [0, 1, 0],
+        opacity: [0, 1, 0],
+        rotate: [0, 180, 360],
+      }}
+      transition={{
+        duration: 2.5,
+        repeat: Infinity,
+        delay,
+        ease: "easeInOut",
+      }}
+    >
+      <Sparkles className="text-[#ffaa40]" size={size} />
+    </motion.div>
+  );
+};
+
+// Marigold Flower component
+const MarigoldFlower = ({ size = "md", delay = 0 }: { size?: "sm" | "md" | "lg"; delay?: number }) => {
+  const sizes = {
+    sm: 16,
+    md: 20,
+    lg: 24,
+  };
+  
+  const flowerSize = sizes[size];
+  
+  return (
+    <motion.div
+      className="relative"
+      style={{ width: flowerSize, height: flowerSize }}
+      animate={{
+        rotate: [0, 360],
+        scale: [1, 1.05, 1],
+      }}
+      transition={{
+        rotate: { duration: 20, repeat: Infinity, ease: "linear" },
+        scale: { duration: 2, repeat: Infinity, ease: "easeInOut", delay },
+      }}
+    >
+      {/* Flower petals */}
+      <svg viewBox="0 0 100 100" className="w-full h-full">
+        {/* Outer petals */}
+        {Array.from({ length: 16 }).map((_, i) => {
+          const angle = (i * 360) / 16;
+          return (
+            <ellipse
+              key={i}
+              cx="50"
+              cy="25"
+              rx="8"
+              ry="15"
+              fill={`url(#gradient-${i % 3})`}
+              transform={`rotate(${angle} 50 50)`}
+              opacity={0.9}
+            />
+          );
+        })}
+        
+        {/* Inner petals */}
+        {Array.from({ length: 12 }).map((_, i) => {
+          const angle = (i * 360) / 12;
+          return (
+            <ellipse
+              key={`inner-${i}`}
+              cx="50"
+              cy="30"
+              rx="6"
+              ry="12"
+              fill={`url(#gradient-${(i + 1) % 3})`}
+              transform={`rotate(${angle} 50 50)`}
+              opacity={0.95}
+            />
+          );
+        })}
+        
+        {/* Center */}
+        <circle cx="50" cy="50" r="8" fill="#d97706" />
+        <circle cx="50" cy="50" r="5" fill="#b45309" opacity={0.8} />
+        
+        {/* Gradient definitions */}
+        <defs>
+          <radialGradient id="gradient-0">
+            <stop offset="0%" stopColor="#fbbf24" />
+            <stop offset="100%" stopColor="#f59e0b" />
+          </radialGradient>
+          <radialGradient id="gradient-1">
+            <stop offset="0%" stopColor="#fcd34d" />
+            <stop offset="100%" stopColor="#fbbf24" />
+          </radialGradient>
+          <radialGradient id="gradient-2">
+            <stop offset="0%" stopColor="#f59e0b" />
+            <stop offset="100%" stopColor="#d97706" />
+          </radialGradient>
+        </defs>
+      </svg>
+      
+      {/* Glow effect */}
+      <div className="absolute inset-0 bg-[#ffaa40] rounded-full blur-sm opacity-30"></div>
+    </motion.div>
+  );
+};
+
+// Flower Garland (Toran) component
+const FlowerGarland = ({ left, flowerCount = 8, delay = 0 }: { left: string; flowerCount?: number; delay?: number }) => {
+  return (
+    <motion.div
+      className="absolute top-0 z-20 pointer-events-none"
+      style={{ left }}
+      initial={{ y: -20, opacity: 0 }}
+      animate={{ y: 0, opacity: 1 }}
+      transition={{ duration: 1, delay }}
+    >
+      {/* String/thread */}
+      <div className="absolute left-1/2 -translate-x-1/2 w-0.5 bg-gradient-to-b from-[#78350f] to-transparent opacity-50" 
+           style={{ height: `${flowerCount * 35}px` }}></div>
+      
+      {/* Flowers on string */}
+      <div className="relative flex flex-col items-center gap-1">
+        {Array.from({ length: flowerCount }).map((_, i) => (
+          <motion.div
+            key={i}
+            className="relative"
+            animate={{
+              y: [0, 5, 0],
+              rotate: [0, 3, -3, 0],
+            }}
+            transition={{
+              duration: 2 + i * 0.2,
+              repeat: Infinity,
+              ease: "easeInOut",
+              delay: delay + i * 0.1,
+            }}
+          >
+            <MarigoldFlower 
+              size={i % 3 === 0 ? "lg" : i % 2 === 0 ? "md" : "sm"} 
+              delay={i * 0.2} 
+            />
+          </motion.div>
+        ))}
+      </div>
+    </motion.div>
+  );
+};
+
+// Decorative Hanging Lantern component
+const DecorativeLantern = () => {
+  return (
+    <motion.div
+      className="absolute top-0 left-1/2 -translate-x-1/2 z-30 pointer-events-none"
+      initial={{ y: -100, opacity: 0 }}
+      animate={{ y: 0, opacity: 1 }}
+      transition={{ duration: 1.2, delay: 0.3, ease: "easeOut" }}
+    >
+      <motion.div
+        animate={{
+          y: [0, 12, 0],
+          rotate: [0, 2, -2, 0],
+        }}
+        transition={{
+          duration: 4,
+          repeat: Infinity,
+          ease: "easeInOut",
+        }}
+      >
+        <svg width="120" height="200" viewBox="0 0 120 200" fill="none">
+          {/* Hanging String */}
+          <line x1="60" y1="0" x2="60" y2="35" stroke="#4a4a4a" strokeWidth="1.5" />
+          
+          {/* Top Cap - Cyan/Blue */}
+          <rect x="45" y="35" width="30" height="8" fill="#22d3ee" rx="2" />
+          <rect x="42" y="43" width="36" height="3" fill="#06b6d4" />
+          
+          {/* Top decoration line - Purple accent */}
+          <rect x="40" y="46" width="40" height="2" fill="#8b5cf6" rx="1" />
+          
+          {/* Main Lantern Body - Golden Orange with curves */}
+          <path
+            d="M 50 50 
+               Q 35 70, 40 95
+               Q 42 110, 50 120
+               L 70 120
+               Q 78 110, 80 95
+               Q 85 70, 70 50
+               Z"
+            fill="url(#lanternGradient)"
+            stroke="#f59e0b"
+            strokeWidth="2"
+          />
+          
+          {/* Inner decorative pattern - curved diamond */}
+          <path
+            d="M 60 65
+               Q 50 75, 60 85
+               Q 70 75, 60 65
+               Z"
+            fill="none"
+            stroke="#d97706"
+            strokeWidth="1.5"
+            opacity="0.7"
+          />
+          <path
+            d="M 60 85
+               Q 50 95, 60 105
+               Q 70 95, 60 85
+               Z"
+            fill="none"
+            stroke="#d97706"
+            strokeWidth="1.5"
+            opacity="0.7"
+          />
+          
+          {/* Vertical center line */}
+          <line x1="60" y1="70" x2="60" y2="100" stroke="#d97706" strokeWidth="1" opacity="0.5" />
+          
+          {/* Highlight shine */}
+          <ellipse cx="55" cy="75" rx="8" ry="15" fill="#fff9e6" opacity="0.15" />
+          
+          {/* Bottom Cap - Cyan/Blue */}
+          <rect x="40" y="120" width="40" height="2" fill="#8b5cf6" rx="1" />
+          <rect x="42" y="122" width="36" height="3" fill="#06b6d4" />
+          <rect x="45" y="125" width="30" height="8" fill="#22d3ee" rx="2" />
+          
+          {/* Hanging Tassels - Cyan strands */}
+          {Array.from({ length: 7 }).map((_, i) => {
+            const x = 45 + i * 5;
+            return (
+              <g key={i}>
+                <motion.line
+                  x1={x}
+                  y1="133"
+                  x2={x}
+                  y2={158 + Math.sin(i) * 8}
+                  stroke="#22d3ee"
+                  strokeWidth="1.5"
+                  strokeLinecap="round"
+                  initial={{ pathLength: 0 }}
+                  animate={{ 
+                    pathLength: 1,
+                    y: [0, 3, 0],
+                  }}
+                  transition={{
+                    pathLength: { duration: 0.8, delay: 0.5 + i * 0.05 },
+                    y: { duration: 2 + i * 0.1, repeat: Infinity, ease: "easeInOut" }
+                  }}
+                />
+              </g>
+            );
+          })}
+          
+          {/* Gradient Definitions */}
+          <defs>
+            <linearGradient id="lanternGradient" x1="0%" y1="0%" x2="100%" y2="100%">
+              <stop offset="0%" stopColor="#fb923c" />
+              <stop offset="30%" stopColor="#f59e0b" />
+              <stop offset="60%" stopColor="#fbbf24" />
+              <stop offset="100%" stopColor="#f59e0b" />
+            </linearGradient>
+          </defs>
+        </svg>
+        
+        {/* Glow effect */}
+        <div className="absolute top-[50px] left-1/2 -translate-x-1/2 w-20 h-24 bg-[#ffaa40] rounded-full blur-2xl opacity-20"></div>
+      </motion.div>
+    </motion.div>
+  );
+};
+
+export function DiwaliHeroSection() {
+    const navigate = useNavigate();
+  return (
+    <section id="hero" className="relative min-h-screen flex items-center justify-center pt-20 overflow-hidden bg-[#0E0E0E]">
+      {/* Dark Background with subtle glow */}
+      <div className="absolute inset-0 bg-gradient-radial from-[#1a1a1a] via-[#0E0E0E] to-[#000000]"></div>
+
+      {/* Decorative Hanging Lantern - Center Top */}
+      <DecorativeLantern />
+
+      {/* Marigold Flower Garlands (Torans) - Minimal placement */}
+      <FlowerGarland left="8%" flowerCount={7} delay={0.2} />
+      <FlowerGarland left="25%" flowerCount={6} delay={0.4} />
+      <FlowerGarland left="75%" flowerCount={7} delay={0.3} />
+      <FlowerGarland left="92%" flowerCount={6} delay={0.5} />
+
+      {/* Animated Fireworks */}
+      <Firework delay={0} top="10%" left="15%" colors={["#E5195E", "#ff6b9d", "#E5195E"]} />
+      <Firework delay={1.5} top="20%" left="70%" colors={["#9c40ff", "#c084fc", "#9c40ff"]} />
+      <Firework delay={0.8} top="60%" left="80%" colors={["#ffaa40", "#fcd34d", "#ffaa40"]} />
+      <Firework delay={2.2} top="15%" left="45%" colors={["#ff6b00", "#fb923c", "#ff6b00"]} />
+      <Firework delay={1.2} top="70%" left="20%" colors={["#E5195E", "#9c40ff", "#ffaa40"]} />
+      <Firework delay={2.8} top="40%" left="90%" colors={["#fcd34d", "#ffaa40", "#ff6b00"]} />
+
+      {/* Floating Sparkles */}
+      {[...Array(25)].map((_, i) => (
+        <SparkleStar
+          key={i}
+          delay={Math.random() * 3}
+          top={`${Math.random() * 100}%`}
+          left={`${Math.random() * 100}%`}
+          size={12 + Math.random() * 8}
+        />
+      ))}
+
+      {/* Small floating particles */}
+      {[...Array(40)].map((_, i) => (
+        <motion.div
+          key={`particle-${i}`}
+          className="absolute w-1 h-1 bg-[#ffaa40] rounded-full pointer-events-none"
+          style={{
+            top: `${Math.random() * 100}%`,
+            left: `${Math.random() * 100}%`,
+          }}
+          animate={{
+            y: [0, -50, 0],
+            opacity: [0, 0.8, 0],
+          }}
+          transition={{
+            duration: 3 + Math.random() * 2,
+            repeat: Infinity,
+            delay: Math.random() * 4,
+            ease: "easeInOut",
+          }}
+        />
+      ))}
+
+      {/* Main Content */}
+      <div className="container mx-auto px-6 lg:px-8 relative z-30">
+        <div className="max-w-5xl mx-auto text-center">
+          {/* Top Badge */}
+          <motion.div
+            className="inline-flex items-center gap-2 mb-8"
+            initial={{ opacity: 0, y: -20 }}
+            animate={{ opacity: 1, y: 0 }}
+            transition={{ duration: 0.8, delay: 0.2 }}
+          >
+            <motion.span
+              animate={{
+                rotate: [0, 10, -10, 0],
+              }}
+              transition={{
+                duration: 2,
+                repeat: Infinity,
+                ease: "easeInOut",
+              }}
+              className="text-3xl"
+            >
+              🪔
+            </motion.span>
+            <span className="text-2xl font-manrope font-semibold">
+              <span className="text-[#E5195E]">WDI</span>
+              <span className="bg-gradient-to-r from-[#ffaa40] via-[#fff9e6] to-[#ffaa40] bg-clip-text text-transparent"> Wishes you</span>
+            </span>
+            <motion.span
+              animate={{
+                rotate: [0, -10, 10, 0],
+              }}
+              transition={{
+                duration: 2,
+                repeat: Infinity,
+                ease: "easeInOut",
+                delay: 0.5,
+              }}
+              className="text-3xl"
+            >
+              🪔
+            </motion.span>
+          </motion.div>
+
+          {/* Main Heading */}
+          <motion.h1
+            className="text-5xl sm:text-6xl md:text-7xl lg:text-8xl mb-8"
+            initial={{ opacity: 0, y: 30 }}
+            animate={{ opacity: 1, y: 0 }}
+            transition={{ duration: 1, delay: 0.4 }}
+            style={{
+              fontFamily: "'Cinzel Decorative', cursive",
+              fontWeight: 900,
+              letterSpacing: "0.05em",
+              lineHeight: 1.4,
+            }}
+          >
+            <span className="inline-block bg-gradient-to-r from-[#fff9e6] via-[#ffaa40] to-[#fff9e6] bg-clip-text text-transparent animate-gradient bg-[length:200%_100%]">
+              Happy Diwali
+            </span>
+          </motion.h1>
+
+          {/* Subtitle */}
+          <motion.p
+            className="text-lg sm:text-xl md:text-2xl text-gray-300 mb-12 max-w-3xl mx-auto leading-relaxed font-manrope"
+            initial={{ opacity: 0, y: 20 }}
+            animate={{ opacity: 1, y: 0 }}
+            transition={{ duration: 0.8, delay: 0.6 }}
+          >
+            Wishing you a Diwali filled with{" "}
+            <span className="text-[#ffaa40] font-semibold">light</span>,{" "}
+            <span className="text-[#E5195E] font-semibold">success</span>, and{" "}
+            <span className="text-[#9c40ff] font-semibold">lightning-fast launches</span>.
+          </motion.p>
+
+          {/* CTA Buttons */}
+          <motion.div
+            className="flex flex-col sm:flex-row gap-4 justify-center items-center"
+            initial={{ opacity: 0, y: 20 }}
+            animate={{ opacity: 1, y: 0 }}
+            transition={{ duration: 0.8, delay: 0.8 }}
+          >
+            <Button
+              size="lg"
+              className="relative overflow-hidden group px-8 py-6 text-base font-manrope bg-gradient-to-r from-[#E5195E] to-[#ff6b9d] hover:from-[#ff6b9d] hover:to-[#E5195E] border-0 shadow-[0_0_30px_rgba(229,25,94,0.3)] hover:shadow-[0_0_40px_rgba(229,25,94,0.5)] transition-all duration-300"
+              onClick={() => navigate("/start-a-project")}
+            >
+              <Calendar className="w-5 h-5" />
+              <span className="relative z-10">Start Your Bright Journey</span>
+              <motion.div
+                className="absolute inset-0 bg-gradient-to-r from-[#ffaa40]/20 to-transparent"
+                animate={{
+                  x: ["-100%", "100%"],
+                }}
+                transition={{
+                  duration: 2,
+                  repeat: Infinity,
+                  ease: "linear",
+                }}
+              />
+            </Button>
+
+            <Button
+              variant="secondary"
+              size="lg"
+              className="relative overflow-hidden group px-8 py-6 text-base font-manrope bg-[rgba(255,255,255,0.05)] backdrop-blur-md border border-[#ffaa40]/50 hover:bg-[rgba(255,255,255,0.1)] hover:border-[#ffaa40] shadow-[0_0_20px_rgba(255,170,64,0.2)] hover:shadow-[0_0_30px_rgba(255,170,64,0.4)] transition-all duration-300"
+              onClick={() => navigate("/services")}
+            >
+              <Briefcase className="w-5 h-5" />
+              <span className="relative z-10 text-white">Discover Our Solutions</span>
+              <motion.div
+                className="absolute inset-0 bg-gradient-to-r from-[#E5195E]/10 to-transparent"
+                animate={{
+                  x: ["-100%", "100%"],
+                }}
+                transition={{
+                  duration: 2.5,
+                  repeat: Infinity,
+                  ease: "linear",
+                  delay: 0.5,
+                }}
+              />
+            </Button>
+          </motion.div>
+
+          {/* Bottom decorative text */}
+          <motion.div
+            className="mt-16 text-sm text-gray-400 font-manrope"
+            initial={{ opacity: 0 }}
+            animate={{ opacity: 1 }}
+            transition={{ duration: 1, delay: 1.2 }}
+          >
+            <span className="inline-flex items-center gap-2">
+              May this festival bring prosperity to your business
+              <motion.span
+                animate={{ scale: [1, 1.2, 1] }}
+                transition={{ duration: 1.5, repeat: Infinity }}
+              >
+                🌟
+              </motion.span>
+            </span>
+          </motion.div>
+        </div>
+      </div>
+
+      {/* Bottom scroll indicator */}
+      <motion.div
+        className="absolute bottom-8 left-1/2 transform -translate-x-1/2 z-30"
+        initial={{ opacity: 0, y: -10 }}
+        animate={{ opacity: 1, y: 0 }}
+        transition={{ duration: 0.8, delay: 1.4 }}
+      >
+        <motion.div
+          animate={{ y: [0, 8, 0] }}
+          transition={{
+            duration: 1.5,
+            repeat: Infinity,
+            ease: "easeInOut",
+          }}
+        >
+          <svg className="w-6 h-6 text-[#ffaa40]" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+            <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M19 14l-7 7m0 0l-7-7m7 7V3" />
+          </svg>
+        </motion.div>
+      </motion.div>
+    </section>
+  );
+}

components/FAQSection.tsx

@@ -52,7 +52,7 @@ export const FAQSection: React.FC<FAQSectionProps> = ({
                 key={index}
                 initial={{ opacity: 0, y: 20 }}
                 whileInView={{ opacity: 1, y: 0 }}
-                transition={{ duration: 0.5, delay: index * 0.1 }}
+                transition={{ duration: 0.5, delay: index * 0.01 }}
                 viewport={{ once: true }}
               >
                 <AccordionItem 

components/FeaturedCaseStudies.tsx

@@ -4,7 +4,6 @@ import { Button } from "./ui/button";
 import { Badge } from "./ui/badge";
 import { Card, CardContent } from "./ui/card";
 import { ImageWithFallback } from "./figma/ImageWithFallback";
-import { navigateTo } from "../App";
 import {
   ArrowRight,
   TrendingUp,
@@ -26,6 +25,14 @@ import {
   PartyPopper,
   PieChart
 } from "lucide-react";
+import ranoutofLocalImage from '../src/images/ranoutof.webp';
+// import seezunLocalImage from '../src/images/seezun.webp';
+import simpletendLocalImage from '../src/images/simplitend.webp';
+import wokasideawardLocalImage from '../src/images/woka-side-award.webp';
+import traderCircuitLocalImage from '../src/images/traders-circuit.webp';
+import goodTimesLocalImage from '../src/images/goodtimes.webp';
+import prospertyLocalImage from '../src/images/prosperty.webp';
+import { useNavigate } from "react-router-dom";
 
 const FeaturedCaseStudies = () => {
   const caseStudies = [
@@ -39,28 +46,28 @@ const FeaturedCaseStudies = () => {
         metric: "Care Coordination Efficiency",
         icon: Heart
       },
-      visual: "https://images.unsplash.com/photo-1559757148-5c350d0d3c56?w=600&h=400&fit=crop&auto=format",
+      visual: simpletendLocalImage,
       tags: ["Mobile App", "Care Management", "Real-Time Alerts", "Scheduling"],
       gradient: "from-blue-500/20 to-cyan-500/20",
       accentColor: "blue",
       featured: true
     },
-    {
-      id: 2,
-      title: "Seezun",
-      client: "Seezun",
-      description: "Seezun is a trend-driven P2P fashion marketplace enabling users to rent, buy, sell, or lend South Asian ethnicwear via mobile and web platforms.",
-      keyAchievement: {
-        number: "85%",
-        metric: "Brand Recognition",
-        icon: TrendingUp
-      },
-      visual: "https://images.unsplash.com/photo-1441986300917-64674bd600d8?w=600&h=400&fit=crop&auto=format",
-      tags: ["Marketplace", "P2P", "Fashion", "Mobile & Web"],
-      gradient: "from-purple-500/20 to-pink-500/20",
-      accentColor: "purple",
-      featured: false
-    },
+    // {
+    //   id: 2,
+    //   title: "Seezun",
+    //   client: "Seezun",
+    //   description: "Seezun is a trend-driven P2P fashion marketplace enabling users to rent, buy, sell, or lend South Asian ethnicwear via mobile and web platforms.",
+    //   keyAchievement: {
+    //     number: "85%",
+    //     metric: "Brand Recognition",
+    //     icon: TrendingUp
+    //   },
+    //   visual: seezunLocalImage,
+    //   tags: ["Marketplace", "P2P", "Fashion", "Mobile & Web"],
+    //   gradient: "from-purple-500/20 to-pink-500/20",
+    //   accentColor: "purple",
+    //   featured: false
+    // },
     {
       id: 3,
       title: "WOKA",
@@ -71,7 +78,7 @@ const FeaturedCaseStudies = () => {
         metric: "User Retention",
         icon: Users
       },
-      visual: "https://images.unsplash.com/photo-1503676260728-1c00da094a0b?w=600&h=400&fit=crop&auto=format",
+      visual: wokasideawardLocalImage,
       tags: ["Native App", "Streaming", "Analytics", "Support"],
       gradient: "from-green-500/20 to-emerald-500/20",
       accentColor: "green",
@@ -90,7 +97,7 @@ const FeaturedCaseStudies = () => {
         metric: "User Growth",
         icon: TrendingUp
       },
-      visual: "https://images.unsplash.com/photo-1611974789855-9c2a0a7236a3?w=600&h=400&fit=crop&auto=format",
+      visual: traderCircuitLocalImage,
       tags: ["FinTech", "Trading Platform", "Indian Market", "Mobile App"],
       gradient: "from-green-500/20 to-emerald-500/20",
       accentColor: "green",
@@ -106,7 +113,7 @@ const FeaturedCaseStudies = () => {
         metric: "Shopping Efficiency",
         icon: ShoppingCart
       },
-      visual: "https://images.unsplash.com/photo-1542838132-92c53300491e?w=600&h=400&fit=crop&auto=format",
+      visual: ranoutofLocalImage,
       tags: ["Mobile App", "Barcode Scanning", "Voice AI", "Grocery Tech"],
       gradient: "from-green-500/20 to-emerald-500/20",
       accentColor: "green",
@@ -122,7 +129,7 @@ const FeaturedCaseStudies = () => {
         metric: "Portfolio Options",
         icon: PieChart
       },
-      visual: "https://images.unsplash.com/photo-1560518883-ce09059eeffa?w=600&h=400&fit=crop&auto=format",
+      visual: prospertyLocalImage,
       tags: ["Real Estate", "Investment", "FinTech", "Portfolio"],
       gradient: "from-blue-500/20 to-cyan-500/20",
       accentColor: "blue",
@@ -138,7 +145,7 @@ const FeaturedCaseStudies = () => {
         metric: "Event Discovery",
         icon: PartyPopper
       },
-      visual: "https://images.unsplash.com/photo-1492684223066-81342ee5ff30?w=600&h=400&fit=crop&auto=format",
+      visual: goodTimesLocalImage,
       tags: ["Events", "Booking", "Lifestyle", "Mobile App"],
       gradient: "from-purple-500/20 to-pink-500/20",
       accentColor: "purple",
@@ -146,16 +153,18 @@ const FeaturedCaseStudies = () => {
     }
   ];
 
+  const navigate = useNavigate();
+
   return (
     <section className="py-20 bg-black">
-      <div className="container mx-auto px-6 lg:px-8">
+      <div className="container px-6 mx-auto lg:px-8">
         {/* Section Header */}
         <motion.div
           initial={{ opacity: 0, y: 30 }}
           whileInView={{ opacity: 1, y: 0 }}
           transition={{ duration: 0.8 }}
           viewport={{ once: true }}
-          className="text-center mb-16"
+          className="mb-16 text-center"
         >
           <motion.div
             initial={{ opacity: 0, scale: 0.8 }}
@@ -165,23 +174,23 @@ const FeaturedCaseStudies = () => {
             className="mb-6"
           >
             <div className="inline-block p-[2px] rounded-full bg-gradient-to-r from-accent via-blue-500 to-purple-500">
-              <div className="bg-black rounded-full px-6 py-3 flex items-center gap-2">
+              <div className="flex items-center gap-2 px-6 py-3 bg-black rounded-full">
                 <Star className="w-5 h-5 text-accent" />
-                <span className="text-white text-base font-medium">Featured Work</span>
+                <span className="text-base font-medium text-white">Featured Work</span>
               </div>
             </div>
           </motion.div>
 
-          <h2 className="text-4xl lg:text-5xl font-semibold text-white mb-6">
+          <h2 className="mb-6 text-4xl font-semibold text-white lg:text-5xl">
             Featured Success Stories
           </h2>
-          <p className="text-xl text-gray-300 max-w-3xl mx-auto leading-relaxed">
-            Discover how we've helped companies across industries achieve remarkable results with our innovative development solutions.
+          <p className="max-w-3xl mx-auto text-xl leading-relaxed text-gray-300">
+            Discover how AI mobile app development transformed companies across industries, delivering remarkable engagement and business results through innovative solutions.
           </p>
         </motion.div>
 
         {/* Case Studies Grid - Consistent Dimensions */}
-        <div className="grid lg:grid-cols-3 gap-8 items-stretch">
+        <div className="grid items-stretch gap-8 lg:grid-cols-3">
           {caseStudies.map((study, index) => {
             const AchievementIcon = study.keyAchievement.icon;
 
@@ -192,30 +201,32 @@ const FeaturedCaseStudies = () => {
                 whileInView={{ opacity: 1, y: 0 }}
                 transition={{ duration: 0.6, delay: index * 0.2 }}
                 viewport={{ once: true }}
-                className="group h-full"
+                className="h-full group"
               >
                 <Card
                   className="bg-gray-900/50 backdrop-blur-md border-gray-800 hover:border-accent/30 transition-all duration-500 shadow-lg hover:shadow-2xl rounded-2xl overflow-hidden h-full group-hover:scale-[1.02] transform flex flex-col cursor-pointer"
                   onClick={() => {
-                    if (study.title === 'Seezun') {
-                      navigateTo('/projects/seezun');
-                    } else if (study.title === 'WOKA') {
-                      navigateTo('/projects/woka');
-                    } else if (study.title === 'Tanami') {
-                      navigateTo('/projects/tanami');
+                    if (study.title === 'WOKA') {
+                      navigate('/projects/woka');
+                    }
+                    //  else if (study.title === 'Seezun') {
+                    //   navigate('/projects/seezun');
+                    // }
+                    else if (study.title === 'Tanami') {
+                      navigate('/projects/tanami');
                     } else {
-                      navigateTo('/case-studies');
+                      navigate('/case-studies');
                     }
                   }}
                 >
                   <CardContent className="p-0 flex flex-col h-full min-h-[600px]">
                     {/* Visual Section - Fixed Height */}
                     <div className="relative overflow-hidden">
-                      <div className="relative h-64 w-full">
+                      <div className="relative w-full h-64">
                         <ImageWithFallback
                           src={study.visual}
                           alt={study.title}
-                          className="w-full h-full object-cover group-hover:scale-110 transition-transform duration-700"
+                          className="object-cover w-full h-full transition-transform duration-700 group-hover:scale-110"
                         />
 
                         {/* Overlay with gradient */}
@@ -224,7 +235,7 @@ const FeaturedCaseStudies = () => {
                         {/* Featured Badge */}
                         {study.featured && (
                           <div className="absolute top-4 left-4">
-                            <Badge className="bg-accent text-white shadow-lg">
+                            <Badge className="text-white shadow-lg bg-accent">
                               <Star className="w-3 h-3 mr-1" />
                               Featured
                             </Badge>
@@ -235,11 +246,10 @@ const FeaturedCaseStudies = () => {
                         <div className="absolute bottom-4 left-4 right-4">
                           <motion.div
                             whileHover={{ scale: 1.05 }}
-                            className="bg-black/80 backdrop-blur-md rounded-xl p-4 border border-white/10"
+                            className="p-4 border bg-black/80 backdrop-blur-md rounded-xl border-white/10"
                           >
                             <div className="flex items-center gap-3">
-                              <div className={`w-10 h-10 rounded-lg bg-gradient-to-r ${
-                                study.accentColor === 'blue' ? 'from-blue-500 to-cyan-500' :
+                              <div className={`w-10 h-10 rounded-lg bg-gradient-to-r ${study.accentColor === 'blue' ? 'from-blue-500 to-cyan-500' :
                                 study.accentColor === 'green' ? 'from-green-500 to-emerald-500' :
                                   study.accentColor === 'purple' ? 'from-purple-500 to-pink-500' :
                                     study.accentColor === 'cyan' ? 'from-cyan-500 to-blue-500' :
@@ -248,9 +258,9 @@ const FeaturedCaseStudies = () => {
                                 } flex items-center justify-center flex-shrink-0`}>
                                 <AchievementIcon className="w-5 h-5 text-white" />
                               </div>
-                              <div className="min-w-0 flex-1">
+                              <div className="flex-1 min-w-0">
                                 <div className="text-2xl font-bold text-white">{study.keyAchievement.number}</div>
-                                <div className="text-sm text-gray-300 leading-tight">{study.keyAchievement.metric}</div>
+                                <div className="text-sm leading-tight text-gray-300">{study.keyAchievement.metric}</div>
                               </div>
                             </div>
                           </motion.div>
@@ -263,15 +273,15 @@ const FeaturedCaseStudies = () => {
                       <div className="flex-1">
                         {/* Project Title - Consistent Height */}
                         <div className="mb-4 min-h-[60px] flex items-start">
-                          <h3 className="text-xl font-semibold text-white leading-tight group-hover:text-accent transition-colors duration-300 line-clamp-2">
+                          <h3 className="text-xl font-semibold leading-tight text-white transition-colors duration-300 group-hover:text-accent line-clamp-2">
                             {study.title}
                           </h3>
                         </div>
 
                         {/* Client & Description - Consistent Height */}
                         <div className="mb-6 min-h-[100px]">
-                          <div className="text-accent font-medium text-sm mb-2">{study.client}</div>
-                          <p className="text-gray-300 text-sm leading-relaxed line-clamp-4">
+                          <div className="mb-2 text-sm font-medium text-accent">{study.client}</div>
+                          <p className="text-sm leading-relaxed text-gray-300 line-clamp-4">
                             {study.description}
                           </p>
                         </div>
@@ -283,7 +293,7 @@ const FeaturedCaseStudies = () => {
                               <Badge
                                 key={tag}
                                 variant="secondary"
-                                className="text-xs bg-gray-800/50 text-gray-300 border-gray-700 hover:bg-gray-700/50 transition-colors"
+                                className="text-xs text-gray-300 transition-colors border-gray-700 bg-gray-800/50 hover:bg-gray-700/50"
                               >
                                 {tag}
                               </Badge>
@@ -296,22 +306,24 @@ const FeaturedCaseStudies = () => {
                       <div className="mt-auto">
                         <motion.div whileHover={{ scale: 1.02 }} whileTap={{ scale: 0.98 }}>
                           <Button
-                            className="w-full bg-gradient-to-r from-accent to-accent/80 hover:from-accent/90 hover:to-accent/70 text-white font-semibold py-3 rounded-xl shadow-lg hover:shadow-xl transition-all duration-300 group h-12"
+                            className="w-full h-12 py-3 font-semibold text-white transition-all duration-300 shadow-lg bg-gradient-to-r from-accent to-accent/80 hover:from-accent/90 hover:to-accent/70 rounded-xl hover:shadow-xl group"
                             onClick={(e) => {
                               e.stopPropagation();
-                              if (study.title === 'Seezun') {
-                                navigateTo('/projects/seezun');
-                              } else if (study.title === 'WOKA') {
-                                navigateTo('/projects/woka');
-                              } else if (study.title === 'Tanami') {
-                                navigateTo('/projects/tanami');
+                              if (study.title === 'WOKA') {
+                                navigate('/projects/woka');
+                              }
+                              //  else if (study.title === 'Seezun') {
+                              //   navigate('/projects/seezun');
+                              // }
+                              else if (study.title === 'Tanami') {
+                                navigate('/projects/tanami');
                               } else {
-                                navigateTo('/case-studies');
+                                navigate('/case-studies');
                               }
                             }}
                           >
                             <span>View Full Case Study</span>
-                            <ArrowRight className="w-4 h-4 ml-2 group-hover:translate-x-1 transition-transform duration-300" />
+                            <ArrowRight className="w-4 h-4 ml-2 transition-transform duration-300 group-hover:translate-x-1" />
                           </Button>
                         </motion.div>
                       </div>
@@ -331,11 +343,16 @@ const FeaturedCaseStudies = () => {
           viewport={{ once: true }}
           className="mt-20 mb-16"
         >
-          <h3 className="text-3xl lg:text-4xl font-semibold text-white mb-12 text-center">
+          <h3 className="mb-12 text-3xl font-semibold text-center text-white lg:text-4xl">
             More Success Stories
           </h3>
+          <p className="mt-4 text-gray-400 max-w-2xl mx-auto">
 
-          <div className="grid lg:grid-cols-3 gap-8 items-stretch">
+            Explore additional triumphs where AI-powered features revolutionized user engagement and drove exponential growth for diverse enterprises.
+
+          </p>
+          <div className="grid items-stretch gap-8 lg:grid-cols-3" style={{ marginTop: "25px" }}
+          >
             {moreSuccessStories.map((story, index) => {
               const AchievementIcon = story.keyAchievement.icon;
 
@@ -344,34 +361,35 @@ const FeaturedCaseStudies = () => {
                   key={story.id}
                   initial={{ opacity: 0, y: 20 }}
                   whileInView={{ opacity: 1, y: 0 }}
-                  transition={{ duration: 0.6, delay: index * 0.1 }}
+                  transition={{ duration: 0.6, delay: index * 0.01 }}
                   viewport={{ once: true }}
-                  className="group h-full"
+                  className="h-full group"
                 >
                   <Card
+
                     className="bg-gray-900/50 backdrop-blur-md border-gray-800 hover:border-accent/30 transition-all duration-500 shadow-lg hover:shadow-2xl rounded-2xl overflow-hidden h-full group-hover:scale-[1.02] transform flex flex-col cursor-pointer"
                     onClick={() => {
                       if (story.title === 'TradersCircuit') {
-                        navigateTo('/projects/traderscircuit');
+                        navigate('/projects/traderscircuit');
                       } else if (story.title === 'GoodTimes') {
-                        navigateTo('/projects/goodtimes');
+                        navigate('/projects/goodtimes');
                       } else if (story.title === 'Prosperty') {
-                        navigateTo('/projects/prosperty');
+                        navigate('/projects/prosperty');
                       } else if (story.title === 'RanOutOf') {
-                        navigateTo('/projects/ranoutof');
+                        navigate('/projects/ranoutof');
                       } else {
-                        navigateTo('/case-studies');
+                        navigate('/case-studies');
                       }
                     }}
                   >
                     <CardContent className="p-0 flex flex-col h-full min-h-[600px]">
                       {/* Visual Section - Fixed Height */}
                       <div className="relative overflow-hidden">
-                        <div className="relative h-64 w-full">
+                        <div className="relative w-full h-64">
                           <ImageWithFallback
                             src={story.visual}
                             alt={`${story.title} - ${story.client}`}
-                            className="w-full h-full object-cover group-hover:scale-110 transition-transform duration-700"
+                            className="object-cover w-full h-full transition-transform duration-700 group-hover:scale-110"
                           />
 
                           {/* Overlay with gradient */}
@@ -381,11 +399,10 @@ const FeaturedCaseStudies = () => {
                           <div className="absolute bottom-4 left-4 right-4">
                             <motion.div
                               whileHover={{ scale: 1.05 }}
-                              className="bg-black/80 backdrop-blur-md rounded-xl p-4 border border-white/10"
+                              className="p-4 border bg-black/80 backdrop-blur-md rounded-xl border-white/10"
                             >
                               <div className="flex items-center gap-3">
-                                <div className={`w-10 h-10 rounded-lg bg-gradient-to-r ${
-                                  story.accentColor === 'blue' ? 'from-blue-500 to-cyan-500' :
+                                <div className={`w-10 h-10 rounded-lg bg-gradient-to-r ${story.accentColor === 'blue' ? 'from-blue-500 to-cyan-500' :
                                   story.accentColor === 'green' ? 'from-green-500 to-emerald-500' :
                                     story.accentColor === 'purple' ? 'from-purple-500 to-pink-500' :
                                       story.accentColor === 'cyan' ? 'from-cyan-500 to-blue-500' :
@@ -394,9 +411,9 @@ const FeaturedCaseStudies = () => {
                                   } flex items-center justify-center flex-shrink-0`}>
                                   <AchievementIcon className="w-5 h-5 text-white" />
                                 </div>
-                                <div className="min-w-0 flex-1">
+                                <div className="flex-1 min-w-0">
                                   <div className="text-2xl font-bold text-white">{story.keyAchievement.number}</div>
-                                  <div className="text-sm text-gray-300 leading-tight">{story.keyAchievement.metric}</div>
+                                  <div className="text-sm leading-tight text-gray-300">{story.keyAchievement.metric}</div>
                                 </div>
                               </div>
                             </motion.div>
@@ -409,15 +426,15 @@ const FeaturedCaseStudies = () => {
                         <div className="flex-1">
                           {/* Project Title - Consistent Height */}
                           <div className="mb-4 min-h-[60px] flex items-start">
-                            <h4 className="text-xl font-semibold text-white leading-tight group-hover:text-accent transition-colors duration-300 line-clamp-2">
+                            <h4 className="text-xl font-semibold leading-tight text-white transition-colors duration-300 group-hover:text-accent line-clamp-2">
                               {story.title}
                             </h4>
                           </div>
 
                           {/* Client & Description - Consistent Height */}
                           <div className="mb-6 min-h-[100px]">
-                            <div className="text-accent font-medium text-sm mb-2">{story.client}</div>
-                            <p className="text-gray-300 text-sm leading-relaxed line-clamp-4">
+                            <div className="mb-2 text-sm font-medium text-accent">{story.client}</div>
+                            <p className="text-sm leading-relaxed text-gray-300 line-clamp-4">
                               {story.description}
                             </p>
                           </div>
@@ -429,7 +446,7 @@ const FeaturedCaseStudies = () => {
                                 <Badge
                                   key={tag}
                                   variant="secondary"
-                                  className="text-xs bg-gray-800/50 text-gray-300 border-gray-700 hover:bg-gray-700/50 transition-colors"
+                                  className="text-xs text-gray-300 transition-colors border-gray-700 bg-gray-800/50 hover:bg-gray-700/50"
                                 >
                                   {tag}
                                 </Badge>
@@ -442,24 +459,24 @@ const FeaturedCaseStudies = () => {
                         <div className="mt-auto">
                           <motion.div whileHover={{ scale: 1.02 }} whileTap={{ scale: 0.98 }}>
                             <Button
-                              className="w-full bg-gradient-to-r from-accent to-accent/80 hover:from-accent/90 hover:to-accent/70 text-white font-semibold py-3 rounded-xl shadow-lg hover:shadow-xl transition-all duration-300 group h-12"
+                              className="w-full h-12 py-3 font-semibold text-white transition-all duration-300 shadow-lg bg-gradient-to-r from-accent to-accent/80 hover:from-accent/90 hover:to-accent/70 rounded-xl hover:shadow-xl group"
                               onClick={(e) => {
                                 e.stopPropagation();
                                 if (story.title === 'TradersCircuit') {
-                                  navigateTo('/projects/traderscircuit');
+                                  navigate('/projects/traderscircuit');
                                 } else if (story.title === 'GoodTimes') {
-                                  navigateTo('/projects/goodtimes');
+                                  navigate('/projects/goodtimes');
                                 } else if (story.title === 'Prosperty') {
-                                  navigateTo('/projects/prosperty');
+                                  navigate('/projects/prosperty');
                                 } else if (story.title === 'RanOutOf') {
-                                  navigateTo('/projects/ranoutof');
+                                  navigate('/projects/ranoutof');
                                 } else {
-                                  navigateTo('/case-studies');
+                                  navigate('/case-studies');
                                 }
                               }}
                             >
                               <span>View Full Case Study</span>
-                              <ArrowRight className="w-4 h-4 ml-2 group-hover:translate-x-1 transition-transform duration-300" />
+                              <ArrowRight className="w-4 h-4 ml-2 transition-transform duration-300 group-hover:translate-x-1" />
                             </Button>
                           </motion.div>
                         </div>
@@ -478,12 +495,12 @@ const FeaturedCaseStudies = () => {
           whileInView={{ opacity: 1, y: 0 }}
           transition={{ duration: 0.8, delay: 0.6 }}
           viewport={{ once: true }}
-          className="text-center mt-16"
+          className="mt-16 text-center"
         >
           <Button
             variant="outline"
             size="lg"
-            className="border-gray-600 text-gray-300 hover:bg-gray-800 hover:text-white hover:border-accent/50 transition-all duration-300"
+            className="text-gray-300 transition-all duration-300 border-gray-600 hover:bg-gray-800 hover:text-white hover:border-accent/50"
           >
             <Eye className="w-5 h-5 mr-2" />
             View All Case Studies

components/Footer.tsx

@@ -12,21 +12,28 @@ import { GridPattern } from "./GridPattern";
 import { Button } from "./ui/button";
 import { Input } from "./ui/input";
 import BlackLogo14 from "../assets/BlackLogo14";
-import { navigateTo } from "../App";
 import { useState } from "react";
+import GlobalOffices from "./GlobalOffices";
+import { useNavigate } from "react-router-dom";
 
 const footerNavigation = {
   Explore: [
     { label: "Home", url: "/home" },
     { label: "Services", url: "/services" },
+    { label: "AI & ML", url: "/artificial-intelligence" },
     { label: "Solutions", url: "/solutions" },
     { label: "Industries", url: "/industries" },
-    { label: "Company", url: "/company" },
-    { label: "Contact", url: "/contact" },
+    { label: "Hire-Talent", url: "/hire-talent" },
+    { label: "Company", url: "/company/about-wdi" },
+    { label: "Resources", url: "/resources" },
+    { label: "Contact", url: "/start-a-project" },
   ],
+  // weServe: [
+  //   { label: "Mobile App Development", url: "/industries/startups" },
+  // ]
   Resources: [
     { label: "Articles", url: "/resources/blog" },
-    { label: "Case Studies", url: "/case-studies" },
+    { label: "Portfolio", url: "/case-studies" },
     {
       label: "Client Testimonials",
       url: "/resources/client-testimonials",
@@ -91,13 +98,108 @@ const footerNavigation = {
       url: "/compliance-ready-systems",
     },
   ],
+  HireTalent: [
+    {
+      label: "Hire Mobile App Developers",
+      url: "/hire-talent/mobile-app-developers",
+    },
+    {
+      label: "Hire Full Stack Developers",
+      url: "/hire-talent/full-stack-developers",
+    },
+    {
+      label: "Hire Frontend Developers",
+      url: "/hire-talent/frontend-developers",
+    },
+    {
+      label: "Hire Backend Developers",
+      url: "/hire-talent/backend-developers",
+    },
+    {
+      label: "Hire UI/UX Designers",
+      url: "/hire-talent/ui-ux-designers",
+    },
+    {
+      label: "Hire QA Engineers",
+      url: "/hire-talent/qa-engineers",
+    },
+    {
+      label: "Hire Dedicated Development Teams",
+      url: "/dedicated-development-teams",
+    },
+  ],
+  NewColumn: [
+    {
+      label: "Android App Development India",
+      url: "/services/android-app-development-india",
+    },
+    {
+      label: "Android App Development UK",
+      url: "/services/android-app-development-uk",
+    },
+    {
+      label: "Android App Development USA",
+      url: "/services/android-app-development-usa",
+    },
+    {
+      label: "IOS App Development India",
+      url: "/services/ios-app-development-india",
+    },
+    {
+      label: "IOS App Development UK",
+      url: "/services/ios-app-development-uk",
+    },
+    {
+      label: "IOS App Development USA",
+      url: "/services/ios-app-development-usa",
+    },
+    {
+      label: "Hire Mobile App Developers India",
+      url: "/hire-talent/mobile-app-developers-india",
+    },
+     {
+      label: "Hire Mobile App Developers UK",
+      url: "/hire-talent/mobile-app-developers-uk",
+    },
+     {
+      label: "Hire Mobile App Developers USA",
+      url: "/hire-talent/mobile-app-developers-usa",
+    },
+    {
+      label: "Mobile App Development UK",
+      url: "/services/mobile-app-development-uk",
+    },
+       {
+      label: "Mobile App Development India",
+      url: "/services/mobile-app-development-india",
+    },
+    {
+      label: "Mobile App Development USA",
+      url: "/services/mobile-app-development-usa",
+    },
+
+  ],
+  Company: [
+    {
+      label: "About WDI",
+      url: "/company/about-wdi",
+    },
+    {
+      label: "Leadership Team",
+      url: "/company/leadership-team",
+    },
+    {
+      label: "Careers",
+      url: "/company/careers",
+    },
+  ],
 };
 
 const socialLinks = [
   {
     name: "LinkedIn",
     icon: Linkedin,
-    url: "https://linkedin.com/company/wdi",
+    url: "https://www.linkedin.com/in/website-developers-india/",
   },
   {
     name: "Twitter",
@@ -112,7 +214,7 @@ const socialLinks = [
   {
     name: "YouTube",
     icon: Youtube,
-    url: "https://youtube.com/wdi",
+    url: "https://www.youtube.com/@WebsitedevelopersindiaPvtLmtd",
   },
 ];
 
@@ -131,10 +233,12 @@ const contactInfo = [
     icon: MapPin,
     label:
       "614, Palm Spring Centre, Link Road, Malad (West), Mumbai - 400064. India.",
-    url: "#",
+    url: "https://www.google.com/search?q=614%2C+Palm+Spring+Centre...",
+    blank: true,
   },
 ];
 
+// FooterSection component with useNavigate inside
 const FooterSection = ({
   title,
   links,
@@ -143,7 +247,10 @@ const FooterSection = ({
   title: string;
   links: Array<{ label: string; url: string }>;
   delay?: number;
-}) => (
+}) => {
+  const navigate = useNavigate();
+
+  return (
     <motion.div
       initial={{ opacity: 0, y: 30 }}
       whileInView={{ opacity: 1, y: 0 }}
@@ -151,17 +258,15 @@ const FooterSection = ({
       viewport={{ once: true }}
       className="space-y-4"
     >
-    <h4 className="font-semibold text-white text-lg">
-      {title}
-    </h4>
+      <h4 className="font-semibold text-white text-lg">{title}</h4>
       <ul className="space-y-3">
         {links.map((link) => (
           <li key={link.label}>
             <a
-            href="#"
+              href={link.url || "#"}
               onClick={(e) => {
                 e.preventDefault();
-              navigateTo(link.url);
+                navigate(link.url);
               }}
               className="text-[#CCCCCC] hover:text-white transition-colors duration-200 text-sm block py-1 hover:translate-x-1 transform cursor-pointer"
             >
@@ -172,6 +277,7 @@ const FooterSection = ({
       </ul>
     </motion.div>
   );
+};
 
 // Newsletter subscription component
 const NewsletterSection = () => {
@@ -210,9 +316,8 @@ const NewsletterSection = () => {
             Never Miss an Update
           </h3>
           <p className="text-[#CCCCCC] text-lg mb-8 max-w-2xl mx-auto">
-            Get the latest insights on digital product
-            development, AI trends, and startup success stories
-            delivered to your inbox.
+            Get the latest insights on digital product development, AI trends,
+            and startup success stories delivered to your inbox.
           </p>
 
           {isSubscribed ? (
@@ -223,19 +328,14 @@ const NewsletterSection = () => {
             >
               <div className="flex items-center justify-center gap-2 text-green-400">
                 <Mail className="w-5 h-5" />
-                <span className="font-medium">
-                  Successfully subscribed!
-                </span>
+                <span className="font-medium">Successfully subscribed!</span>
               </div>
               <p className="text-green-300 text-sm mt-2">
                 Welcome to our community of innovators.
               </p>
             </motion.div>
           ) : (
-            <form
-              onSubmit={handleSubscribe}
-              className="max-w-md mx-auto"
-            >
+            <form onSubmit={handleSubscribe} className="max-w-md mx-auto">
               <div className="flex gap-3">
                 <Input
                   type="email"
@@ -250,14 +350,11 @@ const NewsletterSection = () => {
                   disabled={isSubmitting}
                   className="bg-[#E5195E] hover:bg-[#E5195E]/90 text-white px-6 shrink-0 disabled:opacity-50"
                 >
-                  {isSubmitting
-                    ? "Subscribing..."
-                    : "Subscribe"}
+                  {isSubmitting ? "Subscribing..." : "Subscribe"}
                 </Button>
               </div>
               <p className="text-[#CCCCCC] text-xs mt-3">
-                No spam, unsubscribe at any time. We respect
-                your privacy.
+                No spam, unsubscribe at any time. We respect your privacy.
               </p>
             </form>
           )}
@@ -269,13 +366,15 @@ const NewsletterSection = () => {
 
 export const Footer = () => {
   return (
+    <>
+      <GlobalOffices />
       <footer className="relative bg-[#0E0E0E] border-t border-white/10 overflow-hidden">
         <GridPattern strokeDasharray="4 2" />
 
         <div className="relative z-10">
           {/* Main Footer Content */}
           <div className="container mx-auto px-6 lg:px-8 py-16">
-          <div className="grid lg:grid-cols-7 gap-12">
+            <div className="grid lg:grid-cols-8 gap-12">
               {/* Company Info */}
               <motion.div
                 initial={{ opacity: 0, y: 30 }}
@@ -291,10 +390,9 @@ export const Footer = () => {
                 </div>
 
                 <p className="text-[#CCCCCC] leading-relaxed max-w-md">
-                Web Development Institute - Transforming ideas
-                into scalable digital products. 25+ years of
-                industry expertise, serving founders and CTOs
-                across 15+ countries.
+                  Website Developers India Pvt. Ltd. - Transforming ideas into
+                  scalable digital products. 25+ years of industry expertise,
+                  serving founders and CTOs across 15+ countries.
                 </p>
 
                 {/* India Office Contact Information */}
@@ -309,6 +407,10 @@ export const Footer = () => {
                         <a
                           key={contact.label}
                           href={contact.url}
+                          target={contact.blank ? "_blank" : "_self"}
+                          rel={
+                            contact.blank ? "noopener noreferrer" : undefined
+                          }
                           className="flex items-start gap-3 text-[#CCCCCC] hover:text-white transition-colors duration-200"
                         >
                           <Icon className="w-4 h-4 text-[#E5195E] mt-0.5 flex-shrink-0" />
@@ -329,6 +431,8 @@ export const Footer = () => {
                       <a
                         key={social.name}
                         href={social.url}
+                        target="_blank"
+                        rel="noopener noreferrer"
                         className="w-10 h-10 bg-white/5 rounded-lg flex items-center justify-center text-[#CCCCCC] hover:text-white hover:bg-[#E5195E]/20 transition-all duration-200"
                         aria-label={social.name}
                       >
@@ -345,19 +449,26 @@ export const Footer = () => {
                 links={footerNavigation.Explore}
                 delay={0.1}
               />
+
+              {/* Combined Services & Company */}
+              <div className="space-y-8">
                 <FooterSection
                   title="Services"
                   links={footerNavigation.Services}
                   delay={0.2}
                 />
                 <FooterSection
-              title="AI & ML"
-              links={footerNavigation["AI & ML"]}
+                  title="Company"
+                  links={footerNavigation.Company}
                   delay={0.3}
                 />
+              </div>
+
+              {/* Combined AI & ML with Resources */}
+              <div className="space-y-8">
                 <FooterSection
-              title="Solutions"
-              links={footerNavigation.Solutions}
+                  title="AI & ML"
+                  links={footerNavigation["AI & ML"]}
                   delay={0.4}
                 />
                 <FooterSection
@@ -366,61 +477,30 @@ export const Footer = () => {
                   delay={0.5}
                 />
               </div>
+
+              <FooterSection
+                title="Solutions"
+                links={footerNavigation.Solutions}
+                delay={0.6}
+              />
+
+              <FooterSection
+                title="Hire Talent"
+                links={footerNavigation.HireTalent}
+                delay={0.7}
+              />
+              <FooterSection
+                title="Countries we serve"
+                links={footerNavigation.NewColumn}
+                delay={0.8}
+              />
+            </div>
           </div>
 
           {/* Newsletter Subscription Section */}
           <NewsletterSection />
-
-        {/* Bottom Bar */}
-        <motion.div
-          initial={{ opacity: 0 }}
-          whileInView={{ opacity: 1 }}
-          transition={{ duration: 0.6, delay: 0.6 }}
-          viewport={{ once: true }}
-          className="border-t border-white/10"
-        >
-          <div className="container mx-auto px-6 lg:px-8 py-8">
-            <div className="flex flex-col lg:flex-row justify-between items-center gap-6">
-              <div className="text-[#CCCCCC] text-sm text-center lg:text-left">
-                © 2024 Web Development Institute. All rights
-                reserved.
-              </div>
-
-              <div className="flex flex-wrap gap-6 text-sm">
-                <a
-                  href="/privacy"
-                  className="text-[#CCCCCC] hover:text-white transition-colors"
-                >
-                  Privacy Policy
-                </a>
-                <a
-                  href="/terms"
-                  className="text-[#CCCCCC] hover:text-white transition-colors"
-                >
-                  Terms of Service
-                </a>
-                <a
-                  href="/cookies"
-                  className="text-[#CCCCCC] hover:text-white transition-colors"
-                >
-                  Cookie Policy
-                </a>
-                <a
-                  href="/sitemap"
-                  className="text-[#CCCCCC] hover:text-white transition-colors"
-                >
-                  Sitemap
-                </a>
-              </div>
-
-              <div className="text-[#CCCCCC] text-sm text-center lg:text-right">
-                Engineered by WDI — because someone had to do it
-                right. 💻
-              </div>
-            </div>
-          </div>
-        </motion.div>
         </div>
       </footer>
+    </>
   );
 };

components/GlobalOffices.tsx

@@ -0,0 +1,98 @@
+import React from "react";
+import { Phone, Mail } from "lucide-react";
+import { motion } from "framer-motion";
+import { number } from "yup";
+
+const offices = [
+  {
+    region: "India",
+    address: `614, 6th Floor, Palms Spring center,\nLink Road, Malad (West), Mumbai - 400064, India`,
+    image: "https://wordpress.betadelivery.com/headerr/assets/images/new-img/mapone.webp",
+    number: "+91 7700900039",
+    email: "ideas@wdipl.com",
+  },
+  {
+    region: "USA",
+    address: `215 Jefferson Street, Fort Collins,\nCO 80524, USA`,
+    image: "https://wordpress.betadelivery.com/headerr/assets/images/new-img/maptwo.webp",
+    number: "+1 970 292 6650",
+    email: "ideas@wdipl.com",
+  },
+  {
+    region: "UK",
+    address: `2, Frederick Street, Kings Cross, London, WC1X 0ND, England, UK. CRN-14194669, UK`,
+    image: "https://wordpress.betadelivery.com/headerr/assets/images/new-img/mapthree.webp",
+    number: "+44 7464741335",
+    email: "ideas@wdipl.com",
+  },
+  // {
+  //   region: "Middle East",
+  //   address: `Perth, WA 6000`,
+  //   image: "https://wordpress.betadelivery.com/headerr/assets/images/new-img/mapfour.webp",
+  //   number: "+44 7464741335",
+  //   email: "ideas@wdipl.com",
+  // },
+];
+
+export default function GlobalOffices() {
+  return (
+      <section className="text-white py-20 lg:px-8 container mx-auto">
+      {/* Section Heading */}
+      <motion.h2
+        initial={{ opacity: 0, y: 30 }}
+        whileInView={{ opacity: 1, y: 0 }}
+        transition={{ duration: 0.8 }}
+        viewport={{ once: true }}
+        className="text-3xl lg:text-4xl font-semibold leading-tight mb-16 text-center"
+      >
+        <span className="text-white">We serve customers </span>
+        <span className="text-[#E5195E]">globally</span>
+      </motion.h2>
+
+      {/* Office Cards */}
+      <div className="grid grid-cols-1 md:grid-cols-2 xl:grid-cols-3 gap-8 max-w-7xl mx-auto">
+        {offices.map((office, index) => (
+          <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 }}
+            className="group relative p-6 rounded-xl overflow-hidden min-h-[250px] flex flex-col justify-between backdrop-blur-sm border border-gray-700/30 hover:border-[#E5195E]/30 transition-all duration-300"
+          >
+            {/* Background Image with Scale on Hover */}
+            <div
+              className="absolute inset-0 bg-cover bg-center opacity-20 transform transition-transform duration-500 group-hover:scale-105"
+              style={{ backgroundImage: `url(${office.image})` }}
+            ></div>
+
+            {/* Foreground Content */}
+            <div className="relative z-10 flex flex-col justify-between h-full">
+              {/* Top Content */}
+              <div>
+                <h3 className="text-2xl font-semibold text-[#E5195E] mb-2">
+                  {office.region}
+                </h3>
+                <p className="text-sm whitespace-pre-line leading-relaxed">
+                  {office.address}
+                </p>
+              </div>
+
+              {/* Bottom Contact Info */}
+              <div className="mt-4 space-y-2 text-sm">
+                <div className="flex items-center gap-2">
+                  <Phone size={16} />
+                  <span>{office.number}</span>
+                </div>
+                <div className="flex items-center gap-2">
+                  <Mail size={16} />
+                  <span>{office.email}</span>
+                </div>
+              </div>
+            </div>
+          </motion.div>
+        ))}
+      </div>
+    </section>
+  );
+}

components/HeroBanner.tsx

@@ -1,7 +1,7 @@
 import { Button } from "./ui/button";
 import { GridPattern } from "./GridPattern";
 import { ChevronRight } from "lucide-react";
-import { navigateTo } from "../App";
+import { useNavigate } from "react-router-dom";
 
 interface HeroBannerProps {
   category?: string;
@@ -24,6 +24,7 @@ export function HeroBanner({
   primaryCTA,
   secondaryCTA
 }: HeroBannerProps) {
+  const navigate = useNavigate();
   return (
     <section className="relative py-20 lg:py-32 bg-[#0E0E0E] overflow-hidden">
       <GridPattern />
@@ -54,7 +55,7 @@ export function HeroBanner({
             <Button
               size="lg"
               className="bg-gradient-to-r from-[#E5195E] to-[#C41653] hover:from-[#C41653] hover:to-[#A31348] text-white font-semibold px-8 py-4 h-auto text-base"
-              onClick={() => navigateTo(primaryCTA.href)}
+              onClick={() => navigate(primaryCTA.href)}
             >
               {primaryCTA.text}
             </Button>
@@ -64,7 +65,7 @@ export function HeroBanner({
                 variant="secondary"
                 size="lg"
                 className="bg-white/5 hover:bg-white/10 text-white border-white/20 hover:border-white/30 font-medium px-8 py-4 h-auto text-base"
-                onClick={() => navigateTo(secondaryCTA.href)}
+                onClick={() => navigate(secondaryCTA.href)}
               >
                 {secondaryCTA.text}
                 <ChevronRight className="w-4 h-4 ml-2" />

components/HeroSection.tsx

@@ -1,11 +1,12 @@
 import { Button } from "./ui/button";
 import { GridPattern } from "./GridPattern";
 import { Calendar, Briefcase } from "lucide-react";
-import { navigateTo } from "../App";
 import { motion } from "framer-motion";
 import Spline from "@splinetool/react-spline";
+import { useNavigate } from "react-router-dom";
 
 export function HeroSection() {
+  const navigate = useNavigate();
   return (
     <section
       id="hero"
@@ -14,7 +15,7 @@ export function HeroSection() {
       <GridPattern />
 
       <div className="container mx-auto px-6 lg:px-8">
-        <div className="flex flex-col-reverse lg:flex-row items-center gap-12 w-full py-24 relative z-10">
+        <div className="flex flex-col-reverse lg:flex-row items-center gap-12 w-full relative z-10">
           {/* Left Content */}
           <motion.div
             className="w-full lg:w-1/2"
@@ -69,7 +70,8 @@ export function HeroSection() {
               animate={{ opacity: 1, y: 0 }}
               transition={{ duration: 0.8, delay: 0.3 }}
             >
-              Architecting Digital Success for Startups &amp; Enterprises
+              {/* Architecting Digital Success for Startups &amp; Enterprises */}
+              Mobile application developers for Startups &amp; Enterprises
             </motion.h1>
 
             <motion.p
@@ -91,7 +93,7 @@ export function HeroSection() {
               <Button
                 size="lg"
                 className="whitespace-nowrap"
-                onClick={() => navigateTo("/start-a-project")}
+                onClick={() => navigate("/start-a-project")}
               >
                 <Calendar className="w-4 h-4" />
                 Book a Free Consultation
@@ -101,7 +103,7 @@ export function HeroSection() {
                 variant="secondary"
                 size="lg"
                 className="whitespace-nowrap"
-                onClick={() => navigateTo("/services")}
+                onClick={() => navigate("/services")}
               >
                 <Briefcase className="w-4 h-4" />
                 Explore Services
@@ -116,7 +118,8 @@ export function HeroSection() {
             animate={{ opacity: 1, x: 0 }}
             transition={{ duration: 0.8, delay: 0.2 }}
           >
-            <div className="w-full h-full overflow-hidden rounded-2xl">
+            <div className="absolute w-[160px] h-[46px] bg-[#0e0e0e] bottom-[3%] right-[1%]"></div>
+            <div className="w-full h-full overflow-hidden rounded-2xl pointer-events-none">
               <Spline scene="https://prod.spline.design/nwCSrO6RnOG0v1GV/scene.splinecode" />
             </div>
           </motion.div>

components/HireDeveloperSection.tsx

@@ -0,0 +1,127 @@
+import { motion } from "framer-motion";
+import { Badge } from "@/components/ui/badge";
+import { Card, CardContent } from "@/components/ui/card";
+import { Button } from "@/components/ui/button";
+import { UserPlus, ArrowRight } from "lucide-react";
+import { useNavigate } from "react-router-dom";
+import { ShimmerButton } from "./ui/shimmer-button";
+
+const HireDeveloperSection = ({
+  title,
+  description,
+  developerTypes,
+  buttonText,
+  buttonLink,
+}) => {
+  const navigate = useNavigate();
+  return (
+    <section className="py-32 bg-black">
+      <div className="container mx-auto px-6 lg:px-8">
+        {/* Header */}
+        <motion.div
+          initial={{ opacity: 0, y: 30 }}
+          whileInView={{ opacity: 1, y: 0 }}
+          transition={{ duration: 0.8 }}
+          viewport={{ once: true }}
+          className="text-center mb-20"
+        >
+          <h2 className="text-4xl lg:text-5xl font-semibold text-foreground mb-8">
+            {title}
+          </h2>
+          <p className="text-xl text-muted-foreground max-w-3xl mx-auto leading-relaxed">
+            {description}
+          </p>
+        </motion.div>
+
+        {/* Developer Cards */}
+        <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 mb-12"
+        >
+          {developerTypes.map((dev, index) => (
+            <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: -8, scale: 1.02 }}
+              className="group cursor-pointer"
+            >
+              <Card className="bg-card/20 backdrop-blur-md border-white/10 hover:border-accent/30 transition-all duration-300 shadow-lg hover:shadow-xl rounded-2xl h-full">
+                <CardContent className="p-8">
+                  <div className="flex items-center gap-4 mb-6">
+                    <div className="w-12 h-12 bg-accent/20 rounded-xl flex items-center justify-center">
+                      {/* Sample SVG or icon can be customized */}
+                      <svg
+                        className="w-6 h-6 text-accent"
+                        viewBox="0 0 24 24"
+                        fill="currentColor"
+                      >
+                        <path d="M17.523 15.3414c-.5665-.0085-1.2274-.1111-2.0032-.2551.7758-.1511 1.4368-.2551 2.0032-.2551.5665 0 1.2274.1111 2.0032.2551-.7758.1511-1.4368.2551-2.0032.2551zM12 2C13.1046 2 14 2.8954 14 4s-.8954 2-2 2-2-.8954-2-2 .8954-2 2-2zm6 18c1.1046 0 2-.8954 2-2s-.8954-2-2-2-2 .8954-2 2 .8954 2 2 2zM6 20c1.1046 0 2-.8954 2-2s-.8954-2-2-2-2 .8954-2 2 .8954 2 2 2z" />
+                      </svg>
+                    </div>
+                    <Badge
+                      variant="secondary"
+                      className="text-xs bg-accent/20 text-accent border-accent/30"
+                    >
+                      {dev.experience}
+                    </Badge>
+                  </div>
+
+                  <h3 className="text-xl font-semibold text-foreground mb-4">
+                    {dev.title}
+                  </h3>
+
+                  <p className="text-muted-foreground text-sm mb-4">
+                    {dev.specialties}
+                  </p>
+
+                  <div className="flex flex-wrap gap-2">
+                    {dev.skills.map((skill) => (
+                      <Badge
+                        key={skill}
+                        variant="secondary"
+                        className="text-xs bg-white/10 text-foreground"
+                      >
+                        {skill}
+                      </Badge>
+                    ))}
+                  </div>
+                </CardContent>
+              </Card>
+            </motion.div>
+          ))}
+        </motion.div>
+
+        {/* Call-to-action */}
+        <motion.div
+          initial={{ opacity: 0, y: 30 }}
+          whileInView={{ opacity: 1, y: 0 }}
+          transition={{ duration: 0.8, delay: 0.4 }}
+          viewport={{ once: true }}
+          className="flex flex-col sm:flex-row gap-4 justify-center"
+        >
+          <ShimmerButton className="px-8 py-4" onClick={() => navigate(buttonLink)}>
+            <div className="inline-flex items-center gap-2">
+              <UserPlus className="w-5 h-5 flex-shrink-0" />
+              <span>{buttonText}</span>
+            </div>
+          </ShimmerButton>
+          <Button
+            variant="outline"
+            className="border-white/20 text-foreground hover:bg-white/10 px-8 py-4 h-auto rounded-lg transition-all duration-300"
+          >
+            <span>Request Profiles</span>
+            <ArrowRight className="ml-2 w-4 h-4" />
+          </Button>
+        </motion.div>
+      </div>
+    </section>
+  );
+};
+
+export default HireDeveloperSection;

components/HireTalentHeroBanner.tsx

@@ -0,0 +1,213 @@
+import { useNavigate } from "react-router-dom";
+import { Button } from "./ui/button";
+import { ShimmerButton } from "./ui/shimmer-button";
+import { DashboardVector } from "./vectors/DashboardVector";
+import { motion } from "framer-motion";
+
+interface HireTalentHeroBannerProps {
+  category?: string;
+  title: string;
+  description: string;
+  primaryCTA: {
+    text: string;
+    href: string;
+    icon?: React.ComponentType<{ className?: string }>;
+  };
+  secondaryCTA?: {
+    text: string;
+    href: string;
+    icon?: React.ComponentType<{ className?: string }>;
+  };
+  useVectors?: boolean; // Keep for backward compatibility
+  vectorComponent?: React.ComponentType; // New prop for custom vectors
+}
+
+export function HireTalentHeroBanner({
+  category,
+  title,
+  description,
+  primaryCTA,
+  secondaryCTA,
+  useVectors = false,
+  vectorComponent: VectorComponent
+}: HireTalentHeroBannerProps) {
+  const navigate = useNavigate();
+  return (
+    <section className="relative py-20 overflow-hidden bg-black">
+      <div className="container mx-auto px-6 lg:px-8">
+        <div className="grid lg:grid-cols-2 gap-16 items-center min-h-[90vh]">
+          <motion.div
+            initial={{ opacity: 0, x: -50 }}
+            animate={{ opacity: 1, x: 0 }}
+            transition={{ duration: 0.8 }}
+            className="space-y-8"
+          >
+            {/* Category Label */}
+            {category && (
+              <motion.div
+                initial={{ opacity: 0, y: 20 }}
+                animate={{ opacity: 1, y: 0 }}
+                transition={{ duration: 0.6 }}
+              >
+                <span className="text-white/70 text-sm font-medium font-manrope">
+                  {category}
+                </span>
+              </motion.div>
+            )}
+
+            {/* Main Heading */}
+            <div className="space-y-6">
+              <h1 className="text-4xl md:text-5xl lg:text-6xl font-semibold text-white leading-tight font-manrope">
+                {title}
+              </h1>
+              
+              <p className="text-lg text-gray-300 leading-relaxed max-w-lg font-manrope">
+                {description}
+              </p>
+            </div>
+            
+            {/* CTAs */}
+            <motion.div
+              initial={{ opacity: 0, y: 20 }}
+              animate={{ opacity: 1, y: 0 }}
+              transition={{ duration: 0.8, delay: 0.3 }}
+              className="flex flex-col sm:flex-row gap-4"
+            >
+              <ShimmerButton 
+                className="text-lg px-8 py-4 font-manrope"
+                onClick={() => navigate(primaryCTA.href)}
+              >
+                <div className="inline-flex items-center gap-2">
+                  {primaryCTA.icon && <primaryCTA.icon className="w-5 h-5 flex-shrink-0" />}
+                  <span>{primaryCTA.text}</span>
+                </div>
+              </ShimmerButton>
+              
+              {secondaryCTA && (
+                <Button
+                  variant="outline"
+                  size="lg"
+                  className="text-lg px-8 py-4 h-auto border-gray-600 text-gray-300 hover:bg-gray-800 hover:text-white font-manrope"
+                  onClick={() => navigate(secondaryCTA.href)}
+                >
+                  <div className="inline-flex items-center gap-2">
+                    {secondaryCTA.icon && <secondaryCTA.icon className="w-5 h-5 flex-shrink-0" />}
+                    <span>{secondaryCTA.text}</span>
+                  </div>
+                </Button>
+              )}
+            </motion.div>
+          </motion.div>
+          
+          {/* Right side with Custom Vector, Dashboard Vector, or Legacy Vector Graphics */}
+          <motion.div
+            initial={{ opacity: 0, x: 50 }}
+            animate={{ opacity: 1, x: 0 }}
+            transition={{ duration: 0.8, delay: 0.2 }}
+            className="relative flex flex-col items-center"
+          >
+            <div className="relative w-full max-w-2xl mx-auto">
+              <motion.div
+                initial={{ opacity: 0, y: 30 }}
+                animate={{ opacity: 1, y: 0 }}
+                transition={{ duration: 0.8, delay: 0.4 }}
+                className="relative"
+              >
+                {VectorComponent ? (
+                  /* Custom Vector Component */
+                  <VectorComponent />
+                ) : useVectors ? (
+                  /* Legacy Vector Graphics Version */
+                  <DevelopmentTeamVectors />
+                ) : (
+                  /* Default Dashboard Vector */
+                  <DashboardVector />
+                )}
+              </motion.div>
+            </div>
+          </motion.div>
+        </div>
+      </div>
+    </section>
+  );
+}
+
+// Legacy Vector Graphics Component for Development Team Visualization (kept for backward compatibility)
+const DevelopmentTeamVectors = () => {
+  return (
+    <div className="relative w-full h-[500px] flex items-center justify-center">
+      {/* Main Development Hub */}
+      <motion.div
+        initial={{ opacity: 0, scale: 0.8 }}
+        animate={{ opacity: 1, scale: 1 }}
+        transition={{ duration: 0.8, delay: 0.4 }}
+        className="relative"
+      >
+        {/* Central Hub Circle */}
+        <div className="w-48 h-48 bg-gradient-to-br from-accent to-purple-600 rounded-full flex items-center justify-center relative">
+          <div className="w-32 h-32 bg-white/20 rounded-full flex items-center justify-center backdrop-blur-sm">
+            <svg className="w-16 h-16 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+              <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M10 20l4-16m4 4l4 4-4 4M6 16l-4-4 4-4" />
+            </svg>
+          </div>
+          
+          {/* Pulse Animation Ring */}
+          <div className="absolute inset-0 rounded-full bg-accent/30 animate-ping"></div>
+        </div>
+
+        {/* Orbiting Developer Icons */}
+        <motion.div
+          animate={{ rotate: 360 }}
+          transition={{ duration: 20, repeat: Infinity, ease: "linear" }}
+          className="absolute inset-0 w-48 h-48"
+        >
+          {/* Frontend Developer */}
+          <div className="absolute -top-6 left-1/2 transform -translate-x-1/2 w-12 h-12 bg-gradient-to-br from-blue-500 to-blue-600 rounded-full flex items-center justify-center">
+            <svg className="w-6 h-6 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+              <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M9.75 17L9 20l-1 1h8l-1-1-.75-3M3 13h18M5 17h14a2 2 0 002-2V5a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z" />
+            </svg>
+          </div>
+
+          {/* Backend Developer */}
+          <div className="absolute top-1/2 -right-6 transform -translate-y-1/2 w-12 h-12 bg-gradient-to-br from-green-500 to-green-600 rounded-full flex items-center justify-center">
+            <svg className="w-6 h-6 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+              <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} 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" />
+            </svg>
+          </div>
+
+          {/* Mobile Developer */}
+          <div className="absolute -bottom-6 left-1/2 transform -translate-x-1/2 w-12 h-12 bg-gradient-to-br from-purple-500 to-purple-600 rounded-full flex items-center justify-center">
+            <svg className="w-6 h-6 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+              <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M12 18h.01M8 21h8a1 1 0 001-1V4a1 1 0 00-1-1H8a1 1 0 00-1 1v16a1 1 0 001 1z" />
+            </svg>
+          </div>
+
+          {/* UI/UX Designer */}
+          <div className="absolute top-1/2 -left-6 transform -translate-y-1/2 w-12 h-12 bg-gradient-to-br from-orange-500 to-orange-600 rounded-full flex items-center justify-center">
+            <svg className="w-6 h-6 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+              <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M15.232 5.232l3.536 3.536m-2.036-5.036a2.5 2.5 0 113.536 3.536L6.5 21.036H3v-3.536L16.732 3.732z" />
+            </svg>
+          </div>
+        </motion.div>
+
+        {/* Skill Badges */}
+        <motion.div
+          initial={{ opacity: 0, y: 20 }}
+          animate={{ opacity: 1, y: 0 }}
+          transition={{ duration: 0.8, delay: 0.8 }}
+          className="absolute -bottom-16 left-1/2 transform -translate-x-1/2 flex gap-2"
+        >
+          <div className="px-3 py-1 bg-blue-500/20 text-blue-300 border border-blue-500/30 rounded-full text-sm font-manrope">
+            React
+          </div>
+          <div className="px-3 py-1 bg-green-500/20 text-green-300 border border-green-500/30 rounded-full text-sm font-manrope">
+            Node.js
+          </div>
+          <div className="px-3 py-1 bg-purple-500/20 text-purple-300 border border-purple-500/30 rounded-full text-sm font-manrope">
+            Mobile
+          </div>
+        </motion.div>
+      </motion.div>
+    </div>
+  );
+};

components/HorizontalTagScroller.tsx

@@ -14,28 +14,30 @@ import {
   Cloud
 } from "lucide-react";
 import { GridPattern } from "./GridPattern";
+import { useNavigate } from "react-router-dom";
 
 const industries = [
   // First row
-  { name: "FinTech", icon: CreditCard },
-  { name: "HealthTech", icon: Heart },
-  { name: "eCommerce", icon: ShoppingCart },
-  { name: "EdTech", icon: GraduationCap },
+  { name: "FinTech", icon: CreditCard, link: "/industries/fintech-banking-apps" },
+  { name: "HealthTech", icon: Heart, link: "/industries/healthcare/healthtech-applications" },
+  { name: "eCommerce", icon: ShoppingCart, link: "/industries/commerce/ecommerce-marketplaces" },
+  { name: "EdTech", icon: GraduationCap, link: "/industries/education/edtech-platforms" },
   // Second row
-  { name: "Logistics", icon: Truck },
-  { name: "Media & OTT", icon: Video },
-  { name: "Real Estate", icon: Building },
-  { name: "Travel", icon: Plane },
-  // Third row (we'll make it 3x4 instead to fit all 12)
-  { name: "Manufacturing", icon: Factory },
-  { name: "AgriTech", icon: Wheat },
-  { name: "Gaming", icon: Gamepad2 },
-  { name: "SaaS", icon: Cloud }
+  { name: "Logistics", icon: Truck, link: "/industries/mobility/transportation-apps" },
+  { name: "Media & OTT", icon: Video, link: "/industries/media/ott-streaming-apps" },
+  { name: "Real Estate", icon: Building, link: "/industries/financial-services/real-estate-tech" },
+  { name: "Travel", icon: Plane, link: "/industries/commerce/travel-booking-systems" },
+  // Third row
+  { name: "Manufacturing", icon: Factory, link: "/industries/industrial/manufacturing-automation" },
+  { name: "AgriTech", icon: Wheat, link: "/industries/industrial/agritech-platforms" },
+  { name: "Gaming", icon: Gamepad2, link: "/industries/media/sports-fan-engagement" },
+  { name: "SaaS", icon: Cloud, link: "/industries/financial-services/wealthtech-platforms" }
 ];
 
-const IndustryCard = ({ industry, index }: { 
-  industry: { name: string; icon: any }; 
+const IndustryCard = ({ industry, index, onClick }: {
+  industry: { name: string; icon: any; link: string };
   index: number;
+  onClick: (link: string) => void;
 }) => {
   const Icon = industry.icon;
 
@@ -43,10 +45,11 @@ const IndustryCard = ({ industry, index }: {
     <motion.div
       initial={{ opacity: 0, y: 30 }}
       whileInView={{ opacity: 1, y: 0 }}
-      transition={{ duration: 0.6, delay: index * 0.1 }}
+      transition={{ duration: 0.6, delay: index * 0.01 }}
       viewport={{ once: true }}
       whileHover={{ y: -5, scale: 1.02 }}
       className="group p-6 rounded-xl bg-white/5 backdrop-blur-sm border border-white/10 hover:border-[#E5195E]/50 transition-all duration-300 cursor-pointer text-center"
+      onClick={() => onClick(industry.link)}
     >
       <div className="w-16 h-16 mx-auto mb-4 rounded-xl bg-[#E5195E]/10 flex items-center justify-center group-hover:scale-110 group-hover:bg-[#E5195E]/20 transition-all duration-300">
         <Icon className="w-8 h-8 text-[#E5195E]" />
@@ -59,6 +62,12 @@ const IndustryCard = ({ industry, index }: {
 };
 
 export const HorizontalTagScroller = () => {
+  const navigate = useNavigate();
+
+  const handleIndustryClick = (link: string) => {
+    navigate(link);
+  };
+
   return (
     <section className="relative py-20 bg-[#0E0E0E] overflow-hidden">
       <GridPattern strokeDasharray="4 2" />
@@ -75,17 +84,18 @@ export const HorizontalTagScroller = () => {
             Tailored Solutions for Your Industry
           </h2>
           <p className="text-[#CCCCCC] text-lg max-w-2xl mx-auto">
-            We serve diverse industries with specialized expertise and domain knowledge
+            {/* We serve diverse industries with specialized expertise and domain knowledge */}
+            We serve diverse industries with specialized expertise in AI mobile app development and domain knowledge.
           </p>
         </motion.div>
 
-        {/* 4x3 Grid for larger screens, 2x6 for tablets, 1x12 for mobile */}
         <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-6 max-w-7xl mx-auto">
           {industries.map((industry, index) => (
             <IndustryCard
               key={industry.name}
               industry={industry}
               index={index}
+              onClick={handleIndustryClick}
             />
           ))}
         </div>

components/InlineCTA.tsx

@@ -2,9 +2,10 @@ import { motion } from "framer-motion";
 import { Lightbulb, Clock } from "lucide-react";
 import { Button } from "./ui/button";
 import { GridPattern } from "./GridPattern";
-import { navigateTo } from "../App";
+import { useNavigate } from "react-router-dom";
 
 export const InlineCTA = () => {
+  const navigate = useNavigate();
   return (
     <section className="relative py-20 overflow-hidden">
       <GridPattern strokeDasharray="4 2" />
@@ -145,7 +146,7 @@ export const InlineCTA = () => {
               <Button 
                 size="lg" 
                 className="bg-accent hover:bg-accent/90 text-accent-foreground px-8 py-4 text-lg border-0 rounded-lg shadow-lg hover:shadow-xl transition-all duration-300"
-                onClick={() => navigateTo('/contact')}
+                onClick={() => navigate('/contact')}
               >
                 <motion.div
                   animate={{
@@ -183,7 +184,7 @@ export const InlineCTA = () => {
               transition={{ duration: 0.5, delay: 0.7 }}
               viewport={{ once: true }}
             >
-              <div className="text-2xl font-bold text-foreground">15min</div>
+              <div className="text-2xl font-bold text-foreground">45min</div>
               <div className="text-sm text-muted-foreground">Quick Discovery Call</div>
             </motion.div>
             
@@ -193,7 +194,7 @@ export const InlineCTA = () => {
               transition={{ duration: 0.5, delay: 0.8 }}
               viewport={{ once: true }}
             >
-              <div className="text-2xl font-bold text-foreground">24hrs</div>
+              <div className="text-2xl font-bold text-foreground">48hrs</div>
               <div className="text-sm text-muted-foreground">Detailed Proposal</div>
             </motion.div>
             
@@ -203,7 +204,7 @@ export const InlineCTA = () => {
               transition={{ duration: 0.5, delay: 0.9 }}
               viewport={{ once: true }}
             >
-              <div className="text-2xl font-bold text-foreground">48hrs</div>
+              <div className="text-2xl font-bold text-foreground">72hrs</div>
               <div className="text-sm text-muted-foreground">Project Kickoff</div>
             </motion.div>
           </motion.div>

components/MathVerificationPopup.tsx

@@ -0,0 +1,176 @@
+import React, { useState, useEffect } from "react";
+import { motion, AnimatePresence } from "framer-motion";
+import { Button } from "./ui/button";
+import { X } from "lucide-react";
+
+interface MathVerificationPopupProps {
+    isOpen: boolean;
+    onVerify: () => void;
+    onClose: () => void;
+}
+
+export const MathVerificationPopup: React.FC<MathVerificationPopupProps> = ({
+    isOpen,
+    onVerify,
+    onClose,
+}) => {
+    const [num1, setNum1] = useState(0);
+    const [num2, setNum2] = useState(0);
+    const [operator, setOperator] = useState<"+" | "-">("+");
+    const [userAnswer, setUserAnswer] = useState("");
+    const [error, setError] = useState("");
+    const [attempts, setAttempts] = useState(0);
+
+    const generateNewProblem = () => {
+        let newNum1 = Math.floor(Math.random() * 10) + 1;
+        let newNum2 = Math.floor(Math.random() * 10) + 1;
+        const newOperator = Math.random() > 0.5 ? "+" : "-";
+
+        // Ensure subtraction always has the larger number first
+        if (newOperator === "-" && newNum1 < newNum2) {
+            [newNum1, newNum2] = [newNum2, newNum1];
+        }
+
+        setNum1(newNum1);
+        setNum2(newNum2);
+        setOperator(newOperator);
+        setUserAnswer("");
+        setError("");
+    };
+
+
+    useEffect(() => {
+        if (isOpen) {
+            generateNewProblem();
+            setAttempts(0);
+        }
+    }, [isOpen]);
+
+    const correctAnswer = operator === "+" ? num1 + num2 : num1 - num2;
+
+    const handleSubmit = (e: React.FormEvent) => {
+        e.preventDefault();
+
+        if (!userAnswer.trim()) {
+            setError("Please enter your answer");
+            return;
+        }
+
+        const answer = parseInt(userAnswer);
+        if (isNaN(answer)) {
+            setError("Please enter a valid number");
+            return;
+        }
+
+        if (answer === correctAnswer) {
+            onVerify();
+        } else {
+            const newAttempts = attempts + 1;
+            setAttempts(newAttempts);
+            setError(`Incorrect answer. Attempt ${newAttempts} of 3.`);
+
+            if (newAttempts >= 3) {
+                generateNewProblem();
+                setAttempts(0);
+            }
+        }
+    };
+
+    const handleOverlayClick = (e: React.MouseEvent) => {
+        if (e.target === e.currentTarget) {
+            onClose();
+        }
+    };
+
+    return (
+        <AnimatePresence>
+            {isOpen && (
+                <motion.div
+                    initial={{ opacity: 0 }}
+                    animate={{ opacity: 1 }}
+                    exit={{ opacity: 0 }}
+                    className="fixed inset-0 bg-black/60 backdrop-blur-sm z-50 flex items-center justify-center p-4"
+                    onClick={handleOverlayClick}
+                >
+                    <motion.div
+                        initial={{ scale: 0.9, opacity: 0 }}
+                        animate={{ scale: 1, opacity: 1 }}
+                        exit={{ scale: 0.9, opacity: 0 }}
+                        className="bg-gray-900 border border-gray-700 rounded-2xl max-w-md w-full p-6 shadow-2xl"
+                    >
+                        <div className="flex items-center justify-between mb-6">
+                            <h3 className="text-xl font-semibold text-white">
+                                Verify You're Human
+                            </h3>
+                            <Button
+                                variant="ghost"
+                                size="icon"
+                                onClick={onClose}
+                                className="text-gray-400 hover:text-white"
+                            >
+                                <X className="w-5 h-5" />
+                            </Button>
+                        </div>
+
+                        <div className="space-y-6">
+                            <div className="text-center">
+                                <p className="text-gray-300 mb-4">
+                                    Solve this simple math problem to continue:
+                                </p>
+
+                                <div className="flex items-center justify-center space-x-4 text-3xl font-bold text-white mb-6">
+                                    <span className="bg-gray-800 px-4 py-3 rounded-lg min-w-[60px] text-center">
+                                        {num1}
+                                    </span>
+                                    <span className="text-[#E5195E]">{operator}</span>
+                                    <span className="bg-gray-800 px-4 py-3 rounded-lg min-w-[60px] text-center">
+                                        {num2}
+                                    </span>
+                                    <span>=</span>
+                                    <input
+                                        type="text"
+                                        inputMode="numeric"
+                                        pattern="[0-9]*"
+                                        value={userAnswer}
+                                        onChange={(e) => {
+                                            setUserAnswer(e.target.value.replace(/[^0-9-]/g, ""));
+                                            setError("");
+                                        }}
+                                        className="bg-gray-800 border border-gray-600 rounded-lg px-4 py-3 text-center w-20 text-white focus:outline-none focus:border-[#E5195E]"
+                                        autoFocus
+                                        maxLength={3}
+                                    />
+                                </div>
+
+                                {error && (
+                                    <p className="text-red-400 text-sm mt-2">{error}</p>
+                                )}
+                            </div>
+
+                            <div className="flex gap-3">
+                                <Button
+                                    type="button"
+                                    variant="outline"
+                                    onClick={generateNewProblem}
+                                    className="flex-1 border-gray-600 text-gray-300 hover:text-white"
+                                >
+                                    New Problem
+                                </Button>
+                                <Button
+                                    onClick={handleSubmit}
+                                    className="flex-1 bg-[#E5195E] hover:bg-[#c41450] text-white"
+                                >
+                                    Verify Answer
+                                </Button>
+                            </div>
+
+                            <p className="text-xs text-gray-500 text-center">
+                                This helps us prevent spam and automated submissions.
+                            </p>
+                        </div>
+                    </motion.div>
+                </motion.div>
+            )}
+        </AnimatePresence>
+    );
+};

components/Navigation.tsx

@@ -82,7 +82,7 @@ import {
 } from "lucide-react";
 import { Button } from "./ui/button";
 import BlackLogo14 from "../assets/BlackLogo14";
-import { navigateTo } from "../App";
+import { useLocation, useNavigate } from "react-router-dom";
 
 const navigationData = {
   main_navigation: [
@@ -101,10 +101,12 @@ const navigationData = {
       href: "/services/mobile-app-development",
       sub_services: [
         { name: "iOS App Development", href: "/services/ios-app-development" },
+
         {
           name: "Android App Development",
           href: "/services/android-app-development",
         },
+
         {
           name: "Cross-Platform App Development",
           href: "/services/cross-platform-app-development",
@@ -457,20 +459,18 @@ const navigationData = {
   ],
   company: [
     { text: "About WDI", icon: Info, href: "/company/about-wdi" },
-    { text: "Our History", icon: Clock, href: "/company/our-history" },
     { text: "Leadership Team", icon: Users2, href: "/company/leadership-team" },
-    {
-      text: "Awards & Certifications",
-      icon: Award,
-      href: "/company/awards-certifications",
-    },
     { text: "Careers", icon: Briefcase, href: "/company/careers" },
-    { text: "Culture & Values", icon: Heart, href: "/company/culture-values" },
-    { text: "Press & Media", icon: Newspaper, href: "/company/press-media" },
   ],
   resources: [
-    { text: "Articles", icon: BookOpen, href: "/resources/blog" },
-    { text: "Case Studies", icon: FileText, href: "/case-studies" },
+    {
+      text: "Blogs",
+      icon: BookOpen,
+      href: "https://www.wdipl.com/blog",
+      target: "_blank",
+      rel: "noopener noreferrer",
+    },
+    { text: "Portfolio", icon: FileText, href: "/case-studies" },
     {
       text: "Client Testimonials",
       icon: Star,
@@ -513,7 +513,7 @@ const navigationData = {
   ],
 };
 
-// CTA configurations for each mega menu type - UPDATED ALL TO LINK TO START A PROJECT PAGE
+// CTA configurations for each mega menu type
 const megaMenuCTAs = {
   Services: {
     title: "Development Quote",
@@ -575,6 +575,7 @@ const megaMenuCTAs = {
 
 // Horizontal CTA Component matching reference design
 const MegaMenuCTA = ({ type }: { type: string }) => {
+  const navigate = useNavigate();
   const cta = megaMenuCTAs[type as keyof typeof megaMenuCTAs];
   if (!cta) return null;
 
@@ -595,7 +596,7 @@ const MegaMenuCTA = ({ type }: { type: string }) => {
         <div className="ml-6">
           <Button
             className="bg-gradient-to-r from-[#E5195E] to-[#C41653] hover:from-[#C41653] hover:to-[#A31348] text-white font-medium text-sm px-6 py-3 h-auto rounded-xl shadow-lg hover:shadow-xl transition-all duration-200 group"
-            onClick={() => navigateTo(cta.href)}
+            onClick={() => navigate(cta.href)}
           >
             {cta.buttonText}
             <ArrowRight className="w-4 h-4 ml-2 group-hover:translate-x-1 transition-transform" />
@@ -621,10 +622,16 @@ const MegaMenu = ({
   type,
   timeoutRef,
 }: MegaMenuProps) => {
+  const navigate = useNavigate();
+
   if (!isOpen) return null;
 
-  const navigate = (path: string) => {
-    navigateTo(path);
+  const handleNavigate = (path: string, target?: string) => {
+    if (target === "_blank") {
+      window.open(path, "_blank", "noopener,noreferrer");
+    } else {
+      navigate(path);
+    }
     onClose();
   };
 
@@ -639,24 +646,26 @@ const MegaMenu = ({
                 <div className="w-10 h-10 rounded-xl bg-[#E5195E]/20 flex items-center justify-center">
                   <Icon className="w-5 h-5 text-[#E5195E]" />
                 </div>
-                <h4
+                <a
+                  href={service.href}
                   className="font-semibold text-white text-sm cursor-pointer hover:text-[#E5195E] transition-colors"
-                  onClick={() => service.href && navigate(service.href)}
+                  onClick={(e) => {
+                    e.preventDefault();
+                    handleNavigate(service.href);
+                  }}
                 >
                   {service.category}
-                </h4>
+                </a>
               </div>
               <ul className="space-y-3">
                 {service.sub_services.map((subService) => (
                   <li key={subService.name}>
                     <a
-                      href="#"
-                      className="text-[#CCCCCC] hover:text-white text-sm transition-colors duration-200 block py-1 hover:translate-x-1 transform"
+                      href={subService.href}
+                      className="text-[#CCCCCC] hover:text-white text-sm transition-colors duration-200 block py-1 hover:translate-x-1 transform text-left w-full"
                       onClick={(e) => {
                         e.preventDefault();
-                        if (subService.href) {
-                          navigate(subService.href);
-                        }
+                        handleNavigate(subService.href);
                       }}
                     >
                       {subService.name}
@@ -683,24 +692,26 @@ const MegaMenu = ({
                 <div className="w-10 h-10 rounded-xl bg-[#E5195E]/20 flex items-center justify-center">
                   <Icon className="w-5 h-5 text-[#E5195E]" />
                 </div>
-                <h4
+                <a
+                  href={category.href}
                   className="font-semibold text-white text-lg cursor-pointer hover:text-[#E5195E] transition-colors"
-                  onClick={() => category.href && navigate(category.href)}
+                  onClick={(e) => {
+                    e.preventDefault();
+                    handleNavigate(category.href);
+                  }}
                 >
                   {category.category}
-                </h4>
+                </a>
               </div>
               <ul className="space-y-3">
                 {category.sub_services.map((service) => (
                   <li key={service.name}>
                     <a
-                      href="#"
-                      className="text-[#CCCCCC] hover:text-white text-sm transition-colors duration-200 block py-1 hover:translate-x-1 transform"
+                      href={service.href}
+                      className="text-[#CCCCCC] hover:text-white text-sm transition-colors duration-200 block py-1 hover:translate-x-1 transform text-left w-full"
                       onClick={(e) => {
                         e.preventDefault();
-                        if (service.href) {
-                          navigate(service.href);
-                        }
+                        handleNavigate(service.href);
                       }}
                     >
                       {service.name}
@@ -724,13 +735,11 @@ const MegaMenu = ({
           return (
             <a
               key={solution.text}
-              href="#"
-              className="flex items-center gap-4 text-[#CCCCCC] hover:text-white transition-all duration-200 p-4 rounded-lg hover:bg-white/5 group"
+              href={solution.href}
+              className="flex items-center gap-4 text-[#CCCCCC] hover:text-white transition-all duration-200 p-4 rounded-lg hover:bg-white/5 group w-full text-left"
               onClick={(e) => {
                 e.preventDefault();
-                if (solution.href) {
-                  navigate(solution.href);
-                }
+                handleNavigate(solution.href);
               }}
             >
               <div className="w-8 h-8 rounded-lg bg-[#E5195E]/20 flex items-center justify-center group-hover:scale-110 transition-transform">
@@ -764,13 +773,11 @@ const MegaMenu = ({
                 {industry.items.map((item) => (
                   <li key={item.name}>
                     <a
-                      href="#"
-                      className="text-[#CCCCCC] hover:text-white text-sm transition-colors duration-200 block py-1 hover:translate-x-1 transform"
+                      href={item.href}
+                      className="text-[#CCCCCC] hover:text-white text-sm transition-colors duration-200 block py-1 hover:translate-x-1 transform text-left w-full"
                       onClick={(e) => {
                         e.preventDefault();
-                        if (item.href) {
-                          navigate(item.href);
-                        }
+                        handleNavigate(item.href);
                       }}
                     >
                       {item.name}
@@ -794,13 +801,13 @@ const MegaMenu = ({
           return (
             <a
               key={item.text}
-              href="#"
-              className="flex items-center gap-4 text-[#CCCCCC] hover:text-white transition-all duration-200 p-4 rounded-lg hover:bg-white/5 group"
+              href={item.href}
+              target={item.target || "_self"}
+              rel={item.rel || ""}
+              className="flex items-center gap-4 text-[#CCCCCC] hover:text-white transition-all duration-200 p-4 rounded-lg hover:bg-white/5 group w-full text-left"
               onClick={(e) => {
                 e.preventDefault();
-                if (item.href) {
-                  navigate(item.href);
-                }
+                handleNavigate(item.href, item.target);
               }}
             >
               <div className="w-8 h-8 rounded-lg bg-[#E5195E]/20 flex items-center justify-center group-hover:scale-110 transition-transform">
@@ -870,10 +877,7 @@ export const Navigation = () => {
   const [isMobileMenuOpen, setIsMobileMenuOpen] = useState(false);
   const timeoutRef = useRef<NodeJS.Timeout>();
   const navRef = useRef<HTMLElement>(null);
-
-  const navigate = (path: string) => {
-    navigateTo(path);
-  };
+  const navigate = useNavigate();
 
   const openMenu = useCallback((item: string) => {
     if (timeoutRef.current) {
@@ -911,19 +915,13 @@ export const Navigation = () => {
       cancelClose();
       openMenu(item);
     },
-    [cancelClose, openMenu]
+    [cancelClose, openMenu],
   );
 
   const handleNavItemMouseLeave = useCallback(() => {
     closeMenu();
   }, [closeMenu]);
 
-  // const handleNavMouseLeave = useCallback((e: React.MouseEvent) => {
-  //   const relatedTarget = e.relatedTarget as Element;
-  //   if (!navRef.current?.contains(relatedTarget)) {
-  //     closeMenu();
-  //   }
-  // }, [closeMenu]);
   const handleNavMouseLeave = useCallback(
     (e: React.MouseEvent) => {
       const relatedTarget = e.relatedTarget;
@@ -934,7 +932,7 @@ export const Navigation = () => {
         closeMenu();
       }
     },
-    [closeMenu]
+    [closeMenu],
   );
 
   const handleNavMouseEnter = useCallback(() => {
@@ -967,7 +965,7 @@ export const Navigation = () => {
       case "Services":
         return "/services";
       case "Company":
-        return "/company";
+        return "/company/about-wdi";
       case "Resources":
         return "/resources";
       case "Contact":
@@ -977,14 +975,24 @@ export const Navigation = () => {
       case "AI & ML":
         return "/artificial-intelligence";
       case "Solutions":
-        return "/solutions/digital-product-development"; // Default to first solution
+        return "/solutions/digital-product-development";
       case "Industries":
-        return "/industries/fintech-banking-apps"; // Default to first industry
+        return "/industries/fintech-banking-apps";
       default:
-        return null;
+        return "/";
     }
   };
 
+  const handleNavigation = (path: string, target?: string) => {
+    if (target === "_blank") {
+      window.open(path, "_blank", "noopener,noreferrer");
+    } else {
+      navigate(path);
+    }
+    setIsMobileMenuOpen(false);
+    setActiveMenu(null);
+  };
+
   return (
     <nav
       ref={navRef}
@@ -995,18 +1003,14 @@ export const Navigation = () => {
       <div className="container mx-auto px-6 lg:px-8">
         <div className="flex items-center justify-between h-20">
           <div className="flex items-center">
-            <a
-              href="#"
+            <button
               className="flex items-center"
-              onClick={(e) => {
-                e.preventDefault();
-                navigate("/");
-              }}
+              onClick={() => handleNavigation("/")}
             >
               <div className="w-10 h-10">
                 <BlackLogo14 />
               </div>
-            </a>
+            </button>
           </div>
 
           <div className="hidden lg:flex items-center space-x-6 xl:space-x-8">
@@ -1018,14 +1022,11 @@ export const Navigation = () => {
                 onMouseLeave={handleNavItemMouseLeave}
               >
                 <a
-                  href={`#${item.toLowerCase().replace(/\s+/g, "-")}`}
+                  href={getMainCategoryRoute(item)}
                   className="flex items-center gap-1 text-[#CCCCCC] hover:text-white transition-colors duration-200 py-2 font-medium text-sm xl:text-base whitespace-nowrap"
                   onClick={(e) => {
                     e.preventDefault();
-                    const route = getMainCategoryRoute(item);
-                    if (route) {
-                      navigate(route);
-                    }
+                    handleNavigation(getMainCategoryRoute(item));
                   }}
                 >
                   {item}
@@ -1043,10 +1044,11 @@ export const Navigation = () => {
 
           <div className="flex items-center space-x-4">
             <Button
-              onClick={() => navigate("/start-a-project")}
+              onClick={() => handleNavigation("/start-a-project")}
               className="hidden lg:flex"
             >
-              Get Started
+              {/* Get Started */}
+              Contact Us
             </Button>
 
             {/* Mobile Menu Button */}
@@ -1091,28 +1093,42 @@ export const Navigation = () => {
                 {navigationData.main_navigation.map((item) => (
                   <a
                     key={item}
-                    href="#"
-                    className="block text-[#CCCCCC] hover:text-white transition-colors py-2 font-medium"
+                    href={getMainCategoryRoute(item)}
+                    className="block text-[#CCCCCC] hover:text-white transition-colors py-2 font-medium text-left w-full"
                     onClick={(e) => {
                       e.preventDefault();
-                      const route = getMainCategoryRoute(item);
-                      if (route) {
-                        navigate(route);
-                        setIsMobileMenuOpen(false);
-                      }
+                      handleNavigation(getMainCategoryRoute(item));
                     }}
                   >
                     {item}
                   </a>
                 ))}
-                <Button
-                  onClick={() => {
-                    navigate("/start-a-project");
-                    setIsMobileMenuOpen(false);
+
+                {/* Mobile Resources Submenu */}
+                <div className="pl-4 space-y-2 border-l-2 border-[#E5195E]/30">
+                  {navigationData.resources.map((resource) => (
+                    <a
+                      key={resource.text}
+                      href={resource.href}
+                      target={resource.target || "_self"}
+                      rel={resource.rel || ""}
+                      className="block text-[#CCCCCC] hover:text-white transition-colors py-1 text-sm text-left w-full"
+                      onClick={(e) => {
+                        e.preventDefault();
+                        handleNavigation(resource.href, resource.target);
                       }}
+                    >
+                      {resource.text} {resource.target === "_blank" && "↗"}
+                    </a>
+                  ))}
+                </div>
+
+                <Button
+                  onClick={() => handleNavigation("/start-a-project")}
                   className="w-full mt-4"
                 >
-                  Get Started
+                  {/* Get Started */}
+                  Contact Us
                 </Button>
               </div>
             </div>

components/PackagesSection.tsx

@@ -0,0 +1,133 @@
+import { motion } from "framer-motion";
+import { Tablet, Rocket, Crown, Check } from "lucide-react";
+import { GridPattern } from "./GridPattern";
+
+interface Package {
+  icon: React.ReactNode;
+  title: string;
+  timeline: string;
+  priceRange: string;
+  features: string[];
+}
+
+const packages: Package[] = [
+  {
+    icon: <Tablet className="w-8 h-8" />,
+    title: "The Blueprint",
+    timeline: "Product Definition in 1 Week",
+    // priceRange: "$1,500 - $2,500",
+    priceRange: "",
+    features: [
+      // "Strategy & roadmap",
+      // "User flows & wireframes",
+      // "Technical architecture"
+      "Strategy & roadmap",
+      "User flows & wireframes",
+      "Technical architecture",
+      "The Prototype",
+      "Working Demo in 2 Weeks"
+
+    ]
+  },
+  {
+    icon: <Rocket className="w-8 h-8" />,
+    title: "The Prototype",
+    timeline: "Working Demo in 2 Weeks",
+    // priceRange: "$6,000 - $8,000",
+    priceRange: "",
+
+    features: [
+      // "Functional web or mobile prototype",
+      // "Core features implemented",
+      // "User testing ready"
+      "Functional web or mobile prototype",
+      "Core features implemented",
+      "User testing ready",
+      "The Launchpad",
+      "Market-Ready MVP in 6 Weeks"
+
+    ]
+  },
+  {
+    icon: <Crown className="w-8 h-8" />,
+    title: "The Launchpad",
+    timeline: "Market-Ready MVP in 6 Weeks",
+    // priceRange: "$20,000 - $30,000",
+    priceRange: "",
+
+    features: [
+      "Full website or app",
+      "SEO-optimized & scalable",
+      "Ready for launch"
+    ]
+  }
+];
+
+export const PackagesSection = () => {
+  return (
+    <section className="relative py-20 bg-background overflow-hidden">
+      <GridPattern strokeDasharray="4 2" />
+
+      <div className="relative z-10 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-center mb-16"
+        >
+          <h2 className="text-3xl lg:text-5xl font-semibold text-foreground mb-4">
+            Choose Your Speed. We'll Deliver Your Launch.
+          </h2>
+        </motion.div>
+
+        <div className="grid md:grid-cols-2 lg:grid-cols-3 gap-8 max-w-7xl mx-auto">
+          {packages.map((pkg, index) => (
+            <motion.div
+              key={pkg.title}
+              initial={{ opacity: 0, y: 50 }}
+              whileInView={{ opacity: 1, y: 0 }}
+              transition={{ duration: 0.6, delay: index * 0.15 }}
+              viewport={{ once: true }}
+              className="group relative bg-card/50 backdrop-blur-sm border border-border/50 rounded-[20px] p-8 hover:border-accent/50 hover:shadow-xl hover:shadow-accent/5 hover:scale-[1.02] transition-all duration-300"
+            >
+              {/* Icon */}
+              <div className="mb-6 inline-flex items-center justify-center w-16 h-16 rounded-full bg-accent/10 text-accent group-hover:bg-accent/20 group-hover:scale-110 transition-all duration-300">
+                {pkg.icon}
+              </div>
+
+              {/* Title */}
+              <h3 className="text-2xl font-semibold text-foreground mb-2 group-hover:text-accent transition-colors duration-300">
+                {pkg.title}
+              </h3>
+
+              {/* Timeline */}
+              <p className="text-muted-foreground mb-4">
+                {pkg.timeline}
+              </p>
+
+              {/* Price Range */}
+              <div className="text-3xl font-semibold text-foreground mb-8">
+                {pkg.priceRange}
+              </div>
+
+              {/* Features List */}
+              <ul className="space-y-4">
+                {pkg.features.map((feature, idx) => (
+                  <li key={idx} className="flex items-start gap-3">
+                    <div className="flex-shrink-0 mt-0.5">
+                      <Check className="w-5 h-5 text-accent" />
+                    </div>
+                    <span className="text-muted-foreground leading-relaxed">
+                      {feature}
+                    </span>
+                  </li>
+                ))}
+              </ul>
+            </motion.div>
+          ))}
+        </div>
+      </div>
+    </section>
+  );
+};

components/ProcessSection.tsx

@@ -13,14 +13,14 @@ import {
 } from "lucide-react";
 import { Button } from "./ui/button";
 import { Badge } from "./ui/badge";
-import { navigateTo } from "@/App";
+import { useNavigate } from "react-router-dom";
 
 const steps = [
   {
     id: "step-1",
     title: "1. Define Scope",
     description:
-      "We begin by gathering all project inputs, defining clear goals, creating technical documentation, and aligning on expectations.",
+      "We start by gathering project data and requirements, defining the project goals, creating technical documentation, and aligning these with the client’s expectations.",
     visual: {
       type: "icon_or_doc_mockup",
       style: "minimal_ui",
@@ -30,7 +30,7 @@ const steps = [
     id: "step-2",
     title: "2. Design UI/UX",
     description:
-      "Our designers craft user-centric interfaces in Figma with clickable flows, visual systems, and detailed wireframes for all screens.",
+      "Using Figma, our designers craft user-centric interfaces that feature clickable flows, visual systems, and detailed wireframes for work across all screens.",
     tags: [
       { label: "Wireframes", color: "#6366F1" },
       { label: "Prototyping", color: "#10B981" },
@@ -39,9 +39,9 @@ const steps = [
   },
   {
     id: "step-3",
-    title: "3. Develop with Agile Sprints",
+    title: "3. Development with Agile Sprints",
     description:
-      "We use Agile sprints to turn designs into production-ready code, with continuous integration and weekly builds.",
+      "Using Agile sprints, we turn designs into production-ready code that supports continuous integration and weekly builds.",
     tags: [
       { label: "Frontend", color: "#3B82F6" },
       { label: "Backend", color: "#0EA5E9" },
@@ -50,9 +50,9 @@ const steps = [
   },
   {
     id: "step-4",
-    title: "4. Test, Launch & Scale",
+    title: "4. Testing, Launch, and Scale",
     description:
-      "After QA and UAT, we help launch confidently. Then we monitor, iterate, and scale your product to grow with your users.",
+      "Once we are through with QA and UAT, we launch the app. Then we monitor, iterate, and scale the app to grow alongside your user base and demand.",
     chat_simulation: [
       { from: "You", text: "Are we ready to go live?" },
       { from: "Team", text: "Yes! Final tests passed 🚀" },
@@ -75,13 +75,11 @@ const ChatSimulation = ({
           whileInView={{ opacity: 1, x: 0 }}
           transition={{ duration: 0.5, delay: index * 0.3 }}
           viewport={{ once: true }}
-          className={`flex ${
-            message.from === "You" ? "justify-start" : "justify-end"
+          className={`flex ${message.from === "You" ? "justify-start" : "justify-end"
             }`}
         >
           <div
-            className={`max-w-[80%] px-3 py-1.5 rounded-lg ${
-              message.from === "You"
+            className={`max-w-[80%] px-3 py-1.5 rounded-lg ${message.from === "You"
               ? "bg-muted border border-border text-foreground"
               : "bg-accent text-accent-foreground"
               }`}
@@ -252,6 +250,7 @@ const ProcessCard = ({
 
 export const ProcessSection = () => {
   const titleRef = useRef(null);
+  const navigate = useNavigate();
 
   return (
     <section className="relative overflow-hidden py-20 bg-background">
@@ -265,8 +264,8 @@ export const ProcessSection = () => {
             viewport={{ once: true }}
             className="text-4xl lg:text-5xl font-semibold text-foreground mb-4"
           >
-            How We Turn an Idea into a{" "}
-            <span className="text-accent">Scalable Product</span>
+            From Ideation to Implementation:{" "}
+            <span className="text-accent">How We Convert Ideas Into Market-Ready Products</span>
           </motion.h2>
           <motion.p
             initial={{ opacity: 0, y: 20 }}
@@ -275,9 +274,9 @@ export const ProcessSection = () => {
             viewport={{ once: true }}
             className="text-muted-foreground text-xl max-w-2xl mx-auto"
           >
-            Our proven process transforms your vision into reality through
-            strategic planning, thoughtful design, and expert engineering—every
-            step of the way.
+            As a mobile app development company in the USA, we turn the vision you have for your app into reality through expert planning, innovative design, and intuitive engineering.
+
+
           </motion.p>
         </div>
 
@@ -299,7 +298,7 @@ export const ProcessSection = () => {
           <Button
             size="lg"
             className="bg-accent hover:bg-accent/90 text-accent-foreground border-0 rounded-lg px-8 py-4 group text-lg"
-            onClick={() => navigateTo("/start-a-project")}
+            onClick={() => navigate("/start-a-project")}
           >
             <span className="flex items-center gap-2">
               Start Your Project Today

components/ResourceCards.tsx

@@ -2,7 +2,7 @@ import { motion } from "framer-motion";
 import { ArrowRight, Calendar, Clock } from "lucide-react";
 import { Button } from "./ui/button";
 import { ImageWithFallback } from "./figma/ImageWithFallback";
-import { navigateTo } from "../App";
+import { useNavigate } from "react-router-dom";
 
 const resources = [
   {
@@ -62,6 +62,7 @@ const ResourceCard = ({
   resource: (typeof resources)[0];
   index: number;
 }) => {
+  const navigate = useNavigate();
   return (
     <motion.article
       initial={{ opacity: 0, y: 50 }}
@@ -69,7 +70,7 @@ const ResourceCard = ({
       transition={{ duration: 0.6, delay: index * 0.2 }}
       viewport={{ once: true }}
       className="group bg-card rounded-lg border border-border overflow-hidden hover:border-border/80 transition-all duration-300 hover:shadow-lg cursor-pointer"
-      onClick={() => navigateTo(`/insights/${resource.slug}`)}
+      onClick={() => navigate(`/insights/${resource.slug}`)}
     >
       {/* Image */}
       <div className="aspect-[16/9] overflow-hidden relative">
@@ -128,7 +129,7 @@ const ResourceCard = ({
             className="text-accent hover:text-accent-foreground hover:bg-accent/10 p-2 h-auto group-hover:translate-x-1 transition-transform"
             onClick={(e) => {
               e.stopPropagation();
-              navigateTo(`/insights/${resource.slug}`);
+              navigate(`/insights/${resource.slug}`);
             }}
           >
             <ArrowRight className="w-4 h-4" />
@@ -140,6 +141,7 @@ const ResourceCard = ({
 };
 
 export const ResourceCards = () => {
+  const navigate = useNavigate();
   return (
     <section className="relative py-20 overflow-hidden">
       <div className="container mx-auto px-6 lg:px-8">
@@ -155,8 +157,10 @@ export const ResourceCards = () => {
             Insights for Founders & Product Leaders
           </h2>
           <p className="text-muted-foreground text-lg max-w-2xl mx-auto">
-            Learn from our experience building 200+ digital products. Practical
-            insights, real case studies, and actionable strategies.
+            {/* Learn from our experience building 200+ digital products. Practical
+            insights, real case studies, and actionable strategies. */}
+            Learn from our experience building 200+ digital products, including AI mobile apps. Practical insights, real case studies, and actionable strategies.
+
           </p>
         </motion.div>
 
@@ -181,7 +185,7 @@ export const ResourceCards = () => {
         >
           <Button
             className="bg-accent hover:bg-accent/90 text-accent-foreground border-0 rounded-lg px-6 py-3"
-            onClick={() => navigateTo("/resources")}
+            onClick={() => navigate("/resources")}
           >
             View All Resources <ArrowRight className="w-4 h-4 ml-2" />
           </Button>

components/ServicesGrid.tsx

@@ -1,7 +1,7 @@
 import { motion } from "framer-motion";
 import { Smartphone, Globe, Palette, Brain, RefreshCw, Users } from "lucide-react";
 import { GridPattern } from "./GridPattern";
-import { navigateTo } from "../App";
+import { useNavigate } from "react-router-dom";
 
 const services = [
   {
@@ -42,15 +42,15 @@ const ServiceCard = ({ service, index }: { service: typeof services[0]; index: n
   
   const handleClick = () => {
     if (service.href) {
-      navigateTo(service.href);
+      navigate(service.href);
     }
   };
-  
+  const navigate = useNavigate();
   return (
     <motion.div
       initial={{ opacity: 0, y: 50 }}
       whileInView={{ opacity: 1, y: 0 }}
-      transition={{ duration: 0.6, delay: index * 0.1 }}
+      transition={{ duration: 0.6, delay: index * 0.01 }}
       viewport={{ once: true }}
       whileHover={{ 
         scale: 1.05,

components/SplitCallToAction.tsx

@@ -2,9 +2,10 @@ import { motion } from "framer-motion";
 import { Phone, Clock, Zap, Calendar, MessageSquare } from "lucide-react";
 import { Button } from "./ui/button";
 import { GridPattern } from "./GridPattern";
-import { navigateTo } from "../App";
+import { useNavigate } from "react-router-dom";
 
 export const SplitCallToAction = () => {
+  const navigate = useNavigate();
   return (
     <section className="relative py-20 overflow-hidden">
       <GridPattern strokeDasharray="4 2" />
@@ -24,7 +25,7 @@ export const SplitCallToAction = () => {
                 Ready to Build with WDI?
               </h2>
               <p className="text-xl text-muted-foreground leading-relaxed mb-8">
-                Schedule a no-commitment discovery call with our consulting team. Let's discuss your vision and create a roadmap to success.
+                Schedule a no-commitment discovery call with our consulting team. Let's discuss your AI mobile app vision and create a roadmap to success.
               </p>
             </div>
 
@@ -86,7 +87,7 @@ export const SplitCallToAction = () => {
                 <Button
                   size="lg"
                   className="w-full bg-accent hover:bg-accent/90 text-accent-foreground py-4 text-lg border-0 rounded-lg"
-                  onClick={() => navigateTo('/start-a-project')}
+                  onClick={() => navigate('/start-a-project')}
                 >
                   <Phone className="w-5 h-5 mr-2" />
                   Schedule Free Call

components/StepsIllustrated.tsx

@@ -1,8 +1,25 @@
+import React from "react";
 import { motion } from "framer-motion";
 import { FileText, Palette, Code, Rocket } from "lucide-react";
 import { GridPattern } from "./GridPattern";
 
-const steps = [
+// Define the step interface
+interface Step {
+  title: string;
+  description: string;
+  icon: React.ComponentType<any> | React.ReactElement;
+  color?: string; // Make color optional
+  number?: string;
+  details?: string[];
+}
+
+interface StepsIllustratedProps {
+  title?: string;
+  subtitle?: string;
+  steps?: Step[];
+}
+
+const defaultSteps: Step[] = [
   {
     title: "Define Scope",
     description: "We analyze your requirements and create a detailed project roadmap with clear timelines.",
@@ -29,8 +46,25 @@ const steps = [
   }
 ];
 
-const StepCard = ({ step, index }: { step: typeof steps[0]; index: number }) => {
-  const Icon = step.icon;
+interface Step {
+  title: string;
+  description: string;
+  icon: React.ComponentType<any> | React.ReactElement;
+  color?: string; // Make color optional
+  number?: string;
+  details?: string[];
+}
+
+const StepCard = ({ step, index, totalSteps }: { step: Step; index: number; totalSteps: number }) => {
+  // Define default colors if not provided
+  const defaultColors = [
+    "from-blue-500 to-cyan-500",
+    "from-purple-500 to-pink-500", 
+    "from-green-500 to-emerald-500",
+    "from-[#E5195E] to-orange-500"
+  ];
+  
+  const color = step.color || defaultColors[index] || "from-blue-500 to-cyan-500";
   
   return (
     <motion.div
@@ -41,14 +75,21 @@ const StepCard = ({ step, index }: { step: typeof steps[0]; index: number }) =>
       className="relative group"
     >
       {/* Connection Line */}
-      {index < steps.length - 1 && (
+      {index < totalSteps - 1 && (
         <div className="hidden lg:block absolute top-16 left-full w-full h-0.5 bg-gradient-to-r from-white/20 to-transparent z-0" />
       )}
       
       <div className="relative z-10 text-center">
         <div className="mb-6">
-          <div className={`w-20 h-20 mx-auto rounded-2xl bg-gradient-to-br ${step.color} flex items-center justify-center mb-4 group-hover:scale-110 transition-transform duration-300`}>
-            <Icon className="w-10 h-10 text-white" />
+          <div className={`w-20 h-20 mx-auto rounded-2xl bg-gradient-to-br ${color} flex items-center justify-center mb-4 group-hover:scale-110 transition-transform duration-300`}>
+            {/* Handle both React components and JSX elements */}
+            {typeof step.icon === 'function' ? (
+              <step.icon className="w-10 h-10 text-white" />
+            ) : (
+              React.cloneElement(step.icon as React.ReactElement, { 
+                className: "w-10 h-10 text-white" 
+              })
+            )}
           </div>
           <div className="w-8 h-8 mx-auto rounded-full bg-[#E5195E] flex items-center justify-center text-white font-bold text-sm">
             {index + 1}
@@ -62,7 +103,11 @@ const StepCard = ({ step, index }: { step: typeof steps[0]; index: number }) =>
   );
 };
 
-export const StepsIllustrated = () => {
+export const StepsIllustrated = ({ title, subtitle, steps }: StepsIllustratedProps) => {
+  const finalSteps = steps ?? defaultSteps;
+  const finalTitle = title ?? "How We Turn Your Idea Into a Scalable Product";
+  const finalSubtitle = subtitle ?? "Our proven 4-step process ensures your project is delivered on time, on budget, and exceeds expectations.";
+
   return (
     <section className="relative py-20 bg-[#121212] overflow-hidden">
       <GridPattern strokeDasharray="4 2" />
@@ -76,16 +121,21 @@ export const StepsIllustrated = () => {
           className="text-center mb-16"
         >
           <h2 className="text-3xl lg:text-4xl font-semibold text-white mb-4">
-            How We Turn Your Idea Into a Scalable Product
+            {finalTitle}
           </h2>
           <p className="text-[#CCCCCC] text-lg max-w-2xl mx-auto">
-            Our proven 4-step process ensures your project is delivered on time, on budget, and exceeds expectations.
+            {finalSubtitle}
           </p>
         </motion.div>
         
         <div className="grid lg:grid-cols-4 gap-12 max-w-6xl mx-auto">
-          {steps.map((step, index) => (
-            <StepCard key={step.title} step={step} index={index} />
+          {finalSteps.map((step, index) => (
+            <StepCard 
+              key={step.title} 
+              step={step} 
+              index={index} 
+              totalSteps={finalSteps.length} // Pass the total number of steps
+            />
           ))}
         </div>
       </div>

components/VibeProgrammingPackages.tsx

@@ -0,0 +1,155 @@
+import { motion } from "framer-motion";
+import { FileText, Rocket, Crown, Check, ArrowRight, Zap } from "lucide-react";
+import { Button } from "./ui/button";
+import { GridPattern } from "./GridPattern";
+
+interface Package {
+  icon: React.ReactNode;
+  title: string;
+  description: string;
+  timeline: string;
+  timelineValue: string;
+  outcome: string;
+  outcomeValue: string;
+  priceRange: string;
+  isPopular?: boolean;
+}
+
+const packages: Package[] = [
+  {
+    icon: <FileText className="w-10 h-10" />,
+    title: "The Blueprint",
+    description: "Your idea, structured. We shape product vision for your website, app, or solution—prioritize features, and map technical architecture into a tangible plan.",
+    timeline: "Timeline:",
+    timelineValue: "1 Week",
+    outcome: "Outcome:",
+    outcomeValue: "Clarity, without ambiguity.",
+    priceRange: "$1,500 – $2,500+",
+    isPopular: false
+  },
+  {
+    icon: <Rocket className="w-10 h-10" />,
+    title: "The Prototype",
+    description: "Your product, visualized. High-fidelity designs, user flows, and a clickable web or mobile prototype that communicates your vision to stakeholders and investors.",
+    timeline: "Timeline:",
+    timelineValue: "2 Weeks or Less",
+    outcome: "Outcome:",
+    outcomeValue: "A working model to validate and showcase.",
+    priceRange: "$6,000 – $8,000+",
+    isPopular: true
+  },
+  {
+    icon: <Crown className="w-10 h-10" />,
+    title: "The Launchpad (MVP)",
+    description: "Your product, live. A fully functional, market-ready website or mobile app MVP delivered with speed, precision, SEO optimization, and scalability.",
+    timeline: "Timeline:",
+    timelineValue: "Under 6 Weeks",
+    outcome: "Outcome:",
+    outcomeValue: "A product in users' hands.",
+    priceRange: "$20,000 – $30,000+",
+    isPopular: false
+  }
+];
+
+export const VibeProgrammingPackages = () => {
+  return (
+    <section className="relative py-20 bg-background overflow-hidden">
+      <GridPattern strokeDasharray="4 2" />
+      
+      <div className="relative z-10 container mx-auto px-6 lg:px-8">
+        {/* Header */}
+        <motion.div
+          initial={{ opacity: 0, y: 30 }}
+          whileInView={{ opacity: 1, y: 0 }}
+          transition={{ duration: 0.8 }}
+          viewport={{ once: true }}
+          className="text-center mb-16"
+        >
+          <div className="inline-flex items-center gap-2 mb-4">
+            <Zap className="w-6 h-6 text-accent" />
+            <h2 className="text-4xl lg:text-5xl font-semibold text-foreground font-manrope">
+              Vibe Programming Packages
+            </h2>
+          </div>
+          <p className="text-muted-foreground text-lg max-w-2xl mx-auto font-manrope">
+            Where your vision takes form. From clarity to click-through to launch.
+          </p>
+        </motion.div>
+        
+        {/* Package Cards */}
+        <div className="grid md:grid-cols-2 lg:grid-cols-3 gap-8 max-w-7xl mx-auto">
+          {packages.map((pkg, index) => (
+            <motion.div
+              key={pkg.title}
+              initial={{ opacity: 0, y: 50 }}
+              whileInView={{ opacity: 1, y: 0 }}
+              transition={{ duration: 0.6, delay: index * 0.15 }}
+              viewport={{ once: true }}
+              className="group relative bg-card/50 backdrop-blur-sm border border-border/50 rounded-[20px] p-8 hover:border-accent/50 hover:shadow-xl hover:shadow-accent/5 hover:scale-[1.02] transition-all duration-300"
+            >
+              {/* Most Popular Badge */}
+              {pkg.isPopular && (
+                <div className="absolute top-0 left-1/2 -translate-x-1/2">
+                  <span className="bg-blue-600 text-white px-4 py-1 rounded-full text-sm font-medium font-manrope">
+                    Most Popular
+                  </span>
+                </div>
+              )}
+              
+              {/* Icon */}
+              <div className={`mb-6 inline-flex items-center justify-center w-16 h-16 rounded-full ${pkg.isPopular ? 'bg-blue-600/20 text-blue-400' : 'bg-accent/10 text-accent'} group-hover:scale-110 transition-all duration-300 ${pkg.isPopular ? '' : ''}`}>
+                {pkg.icon}
+              </div>
+              
+              {/* Title */}
+              <h3 className="text-2xl font-semibold text-foreground mb-4 group-hover:text-accent transition-colors duration-300 font-manrope">
+                {pkg.title}
+              </h3>
+              
+              {/* Description */}
+              <p className="text-muted-foreground mb-6 leading-relaxed min-h-[120px] font-manrope">
+                {pkg.description}
+              </p>
+              
+              {/* Timeline */}
+              <div className="mb-4">
+                <div className="flex items-start justify-between mb-2">
+                  <span className="text-sm text-muted-foreground font-manrope">{pkg.timeline}</span>
+                  <span className="text-sm text-foreground font-medium font-manrope">{pkg.timelineValue}</span>
+                </div>
+              </div>
+              
+              {/* Outcome */}
+              <div className="mb-6 pb-6 border-b border-border/50 min-h-[58px]">
+                <div className="flex items-start justify-between">
+                  <span className="text-sm text-muted-foreground font-manrope">{pkg.outcome}</span>
+                  <span className="text-sm text-foreground font-medium text-right font-manrope">{pkg.outcomeValue}</span>
+                </div>
+              </div>
+              
+              {/* Price Range */}
+              <div className="text-3xl font-semibold text-foreground mb-6 font-manrope">
+                {pkg.priceRange}
+              </div>
+              
+              {/* Get Started Button */}
+              <Button
+                variant={pkg.isPopular ? "default" : "outline"}
+                className={`w-full py-6 text-base font-medium rounded-xl group/btn transition-all duration-300 font-manrope ${
+                  pkg.isPopular 
+                    ? 'bg-blue-600 hover:bg-blue-700 text-white border-0' 
+                    : 'border-border/50 hover:border-accent/50 hover:bg-accent/10'
+                }`}
+              >
+                <span className="flex items-center justify-center gap-2">
+                  Get Started
+                  <ArrowRight className="w-4 h-4 group-hover/btn:translate-x-1 transition-transform duration-300" />
+                </span>
+              </Button>
+            </motion.div>
+          ))}
+        </div>
+      </div>
+    </section>
+  );
+};

components/portfolio/PortfolioChallengeSolution.tsx

@@ -0,0 +1,127 @@
+import React from "react";
+import { motion } from "framer-motion";
+import { CheckCircle } from "lucide-react";
+
+interface Challenge {
+  icon: React.ReactNode;
+  title: string;
+  description: string;
+}
+
+interface Technology {
+  icon: React.ReactNode;
+  label: string;
+}
+
+interface Highlight {
+  text: string;
+}
+
+interface PortfolioChallengeSolutionProps {
+  challengesTitle?: string;
+  challenges: Challenge[];
+  solutionTitle?: string;
+  technologyStack: Technology[];
+  highlights: Highlight[];
+}
+
+const PortfolioChallengeSolution: React.FC<PortfolioChallengeSolutionProps> = ({
+  challengesTitle = "Challenges & Constraints",
+  challenges,
+  solutionTitle = "Solution Architecture",
+  technologyStack,
+  highlights,
+}) => {
+  return (
+    <section className="py-24 bg-background">
+      <div className="container mx-auto px-4 lg:px-6">
+        <div className="max-w-6xl mx-auto">
+          <div className="grid lg:grid-cols-2 gap-20">
+            {/* Challenges */}
+            <motion.div
+              initial={{ opacity: 0, x: -30 }}
+              whileInView={{ opacity: 1, x: 0 }}
+              transition={{ duration: 0.8 }}
+              viewport={{ once: true }}
+            >
+              <h2 className="text-3xl lg:text-4xl font-semibold text-foreground mb-12">
+                {challengesTitle}
+              </h2>
+              <div className="space-y-6">
+                {challenges.map((challenge, index) => (
+                  <motion.div
+                    key={challenge.title}
+                    initial={{ opacity: 0, y: 20 }}
+                    whileInView={{ opacity: 1, y: 0 }}
+                    transition={{ duration: 0.6, delay: index * 0.1 }}
+                    viewport={{ once: true }}
+                    className="bg-background/50 rounded-xl p-6 border border-border/50 hover:border-accent/20 transition-colors duration-300"
+                  >
+                    <div className="flex items-start gap-4">
+                      <div className="text-accent mt-1">{challenge.icon}</div>
+                      <div>
+                        <h3 className="text-lg font-semibold text-foreground mb-2">
+                          {challenge.title}
+                        </h3>
+                        <p className="text-muted-foreground leading-relaxed">
+                          {challenge.description}
+                        </p>
+                      </div>
+                    </div>
+                  </motion.div>
+                ))}
+              </div>
+            </motion.div>
+
+            {/* Solution Architecture */}
+            <motion.div
+              initial={{ opacity: 0, x: 30 }}
+              whileInView={{ opacity: 1, x: 0 }}
+              transition={{ duration: 0.8 }}
+              viewport={{ once: true }}
+            >
+              <h2 className="text-3xl lg:text-4xl font-semibold text-foreground mb-12">
+                {solutionTitle}
+              </h2>
+              <div className="bg-background/50 rounded-2xl p-8 border border-border/50">
+                <div className="space-y-8">
+                  <div>
+                    <h3 className="text-xl font-semibold text-foreground mb-6">
+                      Technology Stack
+                    </h3>
+                    <div className="space-y-4">
+                      {technologyStack.map((tech, idx) => (
+                        <div key={idx} className="flex items-center gap-3">
+                          {tech.icon}
+                          <span className="text-muted-foreground">{tech.label}</span>
+                        </div>
+                      ))}
+                    </div>
+                  </div>
+
+                  <div>
+                    <h3 className="text-xl font-semibold text-foreground mb-6">
+                      Key Highlights
+                    </h3>
+                    <div className="space-y-3">
+                      {highlights.map((item, idx) => (
+                        <div key={idx} className="flex items-start gap-3">
+                          <CheckCircle className="w-4 h-4 text-accent mt-0.5 flex-shrink-0" />
+                          <span className="text-muted-foreground text-base">
+                            {item.text}
+                          </span>
+                        </div>
+                      ))}
+                    </div>
+                  </div>
+                </div>
+              </div>
+            </motion.div>
+          </div>
+        </div>
+      </div>
+    </section>
+  );
+};
+
+export default PortfolioChallengeSolution;

components/portfolio/PortfolioCoreFeatures.tsx

@@ -0,0 +1,73 @@
+// components/PortfolioCoreFeatures.tsx
+import { motion } from "framer-motion";
+import { ReactNode } from "react";
+import { Card, CardContent } from "@/components/ui/card"; // adjust path as per your project
+
+interface Feature {
+  icon: ReactNode;
+  title: string;
+  description: string;
+}
+
+interface PortfolioCoreFeaturesProps {
+  title: string;
+  subtitle: string;
+  features: Feature[];
+}
+
+export function PortfolioCoreFeatures({
+  title,
+  subtitle,
+  features,
+}: PortfolioCoreFeaturesProps) {
+  return (
+    <section className="py-24 bg-card/30">
+      <div className="container mx-auto px-4 lg:px-6">
+        <motion.div
+          initial={{ opacity: 0, y: 30 }}
+          whileInView={{ opacity: 1, y: 0 }}
+          transition={{ duration: 0.8 }}
+          viewport={{ once: true }}
+          className="max-w-6xl mx-auto"
+        >
+          {/* Section Heading */}
+          <div className="text-center mb-16">
+            <h2 className="text-3xl lg:text-5xl font-semibold text-foreground mb-6">
+              {title}
+            </h2>
+            <p className="text-xl text-muted-foreground max-w-3xl mx-auto">
+              {subtitle}
+            </p>
+          </div>
+
+          {/* Features Grid */}
+          <div className="grid md:grid-cols-2 lg:grid-cols-3 gap-8">
+            {features.map((feature, index) => (
+              <motion.div
+                key={feature.title}
+                initial={{ opacity: 0, y: 20 }}
+                whileInView={{ opacity: 1, y: 0 }}
+                transition={{ duration: 0.6, delay: index * 0.1 }}
+                viewport={{ once: true }}
+              >
+                <Card className="h-full bg-card/50 border-border/50 hover:border-accent/30 transition-all duration-300 group">
+                  <CardContent className="p-8">
+                    <div className="text-accent mb-4 group-hover:scale-110 transition-transform duration-300">
+                      {feature.icon}
+                    </div>
+                    <h3 className="text-xl font-semibold text-foreground mb-4">
+                      {feature.title}
+                    </h3>
+                    <p className="text-muted-foreground leading-relaxed">
+                      {feature.description}
+                    </p>
+                  </CardContent>
+                </Card>
+              </motion.div>
+            ))}
+          </div>
+        </motion.div>
+      </div>
+    </section>
+  );
+}

components/portfolio/PortfolioDevelopmentProcess.tsx

@@ -0,0 +1,78 @@
+// components/PortfolioDevelopmentProcess.tsx
+import { motion } from "framer-motion";
+import { ReactNode } from "react";
+
+interface Phase {
+  icon: ReactNode;
+  phase: string;
+  duration: string;
+  description: string;
+}
+
+interface PortfolioDevelopmentProcessProps {
+  title: string;
+  subtitle: string;
+  phases: Phase[];
+}
+
+export function PortfolioDevelopmentProcess({
+  title,
+  subtitle,
+  phases,
+}: PortfolioDevelopmentProcessProps) {
+  return (
+    <section className="py-24 bg-card/30">
+      <div className="container mx-auto px-4 lg:px-6">
+        <motion.div
+          initial={{ opacity: 0, y: 30 }}
+          whileInView={{ opacity: 1, y: 0 }}
+          transition={{ duration: 0.8 }}
+          viewport={{ once: true }}
+          className="max-w-6xl mx-auto"
+        >
+          {/* Section Heading */}
+          <div className="text-center mb-16">
+            <h2 className="text-3xl lg:text-5xl font-semibold text-foreground mb-6">
+              {title}
+            </h2>
+            <p className="text-xl text-muted-foreground max-w-3xl mx-auto">
+              {subtitle}
+            </p>
+          </div>
+
+          {/* Phases Grid */}
+          <div className="grid lg:grid-cols-5 gap-8">
+            {phases.map((phase, index) => (
+              <motion.div
+                key={phase.phase}
+                initial={{ opacity: 0, y: 20 }}
+                whileInView={{ opacity: 1, y: 0 }}
+                transition={{ duration: 0.6, delay: index * 0.1 }}
+                viewport={{ once: true }}
+                className="relative"
+              >
+                <div className="bg-card/50 rounded-xl p-6 border border-border/50 hover:border-accent/30 transition-all duration-300 h-full">
+                  <div className="text-accent mb-4">{phase.icon}</div>
+                  <h3 className="text-lg font-semibold text-foreground mb-2">
+                    {phase.phase}
+                  </h3>
+                  <div className="text-accent font-medium mb-3">
+                    {phase.duration}
+                  </div>
+                  <p className="text-muted-foreground text-sm leading-relaxed">
+                    {phase.description}
+                  </p>
+                </div>
+
+                {/* Connector Line */}
+                {index < phases.length - 1 && (
+                  <div className="hidden lg:block absolute top-1/2 -right-4 w-8 h-0.5 bg-border transform -translate-y-1/2" />
+                )}
+              </motion.div>
+            ))}
+          </div>
+        </motion.div>
+      </div>
+    </section>
+  );
+}

components/portfolio/PortfolioExecutiveSummary.tsx

@@ -0,0 +1,35 @@
+// components/portfolio/PortfolioExecutiveSummary.tsx
+import { motion } from "framer-motion";
+
+interface PortfolioExecutiveSummaryProps {
+  title?: string;
+  content: string;
+  backgroundColor?: string;
+}
+
+export const PortfolioExecutiveSummary = ({
+  title = "Executive Summary",
+  content,
+  backgroundColor = "bg-card/30"
+}: PortfolioExecutiveSummaryProps) => {
+  return (
+    <section className={`py-24 ${backgroundColor}`}>
+      <div className="container mx-auto px-4 lg:px-6">
+        <motion.div
+          initial={{ opacity: 0, y: 20 }}
+          whileInView={{ opacity: 1, y: 0 }}
+          transition={{ duration: 0.8 }}
+          viewport={{ once: true }}
+          className="max-w-4xl mx-auto text-center"
+        >
+          <h2 className="text-3xl lg:text-5xl font-semibold text-foreground mb-8">
+            {title}
+          </h2>
+          <p className="text-xl text-muted-foreground leading-relaxed">
+            {content}
+          </p>
+        </motion.div>
+      </div>
+    </section>
+  );
+};

components/portfolio/PortfolioHero.tsx

@@ -0,0 +1,96 @@
+// components/portfolio/PortfolioHero.tsx
+import { motion } from "framer-motion";
+import { Badge } from "@/components/ui/badge";
+import { Button } from "@/components/ui/button";
+import { ArrowLeft } from "lucide-react";
+import { GridPattern } from "../GridPattern";
+import { ImageWithFallback } from "../figma/ImageWithFallback";
+import { useNavigate } from "react-router-dom";
+
+interface PortfolioHeroProps {
+  badgeText?: string;
+  title: string;
+  subtitle: string;
+  subtitleTwo?: string;
+  imageUrl: string;
+  imageAlt: string;
+}
+
+export const PortfolioHero = ({
+  badgeText = "Portfolio",
+  title,
+  subtitle,
+  subtitleTwo,
+  imageUrl,
+  imageAlt,
+}: PortfolioHeroProps) => {
+  const navigate = useNavigate();
+
+  return (
+    <section className="relative pt-32 pb-24 bg-background overflow-hidden">
+      <GridPattern strokeDasharray="4 2" />
+
+      <div className="relative z-10 container mx-auto px-4 lg:px-6">
+        {/* Back Button */}
+        <motion.div
+          initial={{ opacity: 0, x: -20 }}
+          animate={{ opacity: 1, x: 0 }}
+          transition={{ duration: 0.6 }}
+          className="mb-12"
+        >
+          <Button
+            variant="ghost"
+            onClick={() => navigate("/case-studies")}
+            className="text-muted-foreground hover:text-foreground flex items-center gap-2 px-0 hover:bg-transparent"
+          >
+            <ArrowLeft className="w-4 h-4" />
+            Back to Portfolio
+          </Button>
+        </motion.div>
+
+        <div className="grid lg:grid-cols-12 gap-16 items-center">
+          {/* Content - Left Aligned */}
+          <motion.div
+            initial={{ opacity: 0, y: 30 }}
+            animate={{ opacity: 1, y: 0 }}
+            transition={{ duration: 0.8 }}
+            className="lg:col-span-7"
+          >
+            <div className="mb-6">
+              <Badge variant="secondary" className="text-accent border-accent/20 bg-accent/10">
+                {badgeText}
+              </Badge>
+            </div>
+
+            <h1 className="text-4xl lg:text-6xl font-semibold text-foreground mb-8 leading-tight">
+              {title}
+            </h1>
+
+            <p className="text-xl text-muted-foreground mb-6 leading-relaxed max-w-2xl">
+              {subtitle}
+            </p>
+            <p className="text-xl text-muted-foreground mb-10 leading-relaxed max-w-2xl">
+              {subtitleTwo}
+            </p>
+          </motion.div>
+
+          {/* Project Image */}
+          <motion.div
+            initial={{ opacity: 0, y: 30 }}
+            animate={{ opacity: 1, y: 0 }}
+            transition={{ duration: 0.8, delay: 0.2 }}
+            className="lg:col-span-5"
+          >
+            <div className="relative aspect-[4/3] overflow-hidden bg-card/30 rounded-2xl border border-border/50 p-4">
+              <ImageWithFallback
+                src={imageUrl}
+                alt={imageAlt}
+                className="w-full h-full object-contain object-center rounded-xl"
+              />
+            </div>
+          </motion.div>
+        </div>
+      </div>
+    </section>
+  );
+};

components/portfolio/PortfolioLessonsSection.tsx

@@ -0,0 +1,119 @@
+import React from "react";
+import { motion } from "framer-motion";
+
+interface LessonSectionProps {
+  title: string;
+  description: string;
+  workedTitle: string;
+  workedIcon: React.ReactNode;
+  workedColor: string;
+  workedLessons: string[];
+  improveTitle: string;
+  improveIcon: React.ReactNode;
+  improveColor: string;
+  improveLessons: string[];
+}
+
+const PortfolioLessonsSection: React.FC<LessonSectionProps> = ({
+  title,
+  description,
+  workedTitle,
+  workedIcon,
+  workedColor,
+  workedLessons,
+  improveTitle,
+  improveIcon,
+  improveColor,
+  improveLessons,
+}) => {
+  return (
+    <section className="py-24 bg-card/30">
+      <div className="container mx-auto px-4 lg:px-6">
+        <div className="max-w-6xl mx-auto">
+          {/* Section Header */}
+          <motion.div
+            initial={{ opacity: 0, y: 30 }}
+            whileInView={{ opacity: 1, y: 0 }}
+            transition={{ duration: 0.8 }}
+            viewport={{ once: true }}
+            className="text-center mb-16"
+          >
+            <h2 className="text-3xl lg:text-5xl font-semibold text-foreground mb-6">
+              {title}
+            </h2>
+            <p className="text-xl text-muted-foreground max-w-3xl mx-auto">
+              {description}
+            </p>
+          </motion.div>
+
+          {/* Lessons Grid */}
+          <div className="grid lg:grid-cols-2 gap-12">
+            {/* Worked Well */}
+            <motion.div
+              initial={{ opacity: 0, x: -30 }}
+              whileInView={{ opacity: 1, x: 0 }}
+              transition={{ duration: 0.8 }}
+              viewport={{ once: true }}
+              className={`rounded-2xl p-8 border`}
+              style={{
+                backgroundColor: `${workedColor}0D`, // light transparent bg
+                borderColor: `${workedColor}33`, // faint border
+              }}
+            >
+              <h3 className="text-2xl font-semibold text-foreground mb-8 flex items-center gap-3">
+                <span className="text-xl" style={{ color: workedColor }}>
+                  {workedIcon}
+                </span>
+                {workedTitle}
+              </h3>
+              <div className="space-y-4">
+                {workedLessons.map((lesson, index) => (
+                  <div key={index} className="flex items-start gap-3">
+                    <div
+                      className="w-2 h-2 rounded-full mt-2 flex-shrink-0"
+                      style={{ backgroundColor: workedColor }}
+                    />
+                    <span className="text-muted-foreground">{lesson}</span>
+                  </div>
+                ))}
+              </div>
+            </motion.div>
+
+            {/* Areas for Improvement */}
+            <motion.div
+              initial={{ opacity: 0, x: 30 }}
+              whileInView={{ opacity: 1, x: 0 }}
+              transition={{ duration: 0.8 }}
+              viewport={{ once: true }}
+              className={`rounded-2xl p-8 border`}
+              style={{
+                backgroundColor: `${improveColor}0D`,
+                borderColor: `${improveColor}33`,
+              }}
+            >
+              <h3 className="text-2xl font-semibold text-foreground mb-8 flex items-center gap-3">
+                <span className="text-xl" style={{ color: improveColor }}>
+                  {improveIcon}
+                </span>
+                {improveTitle}
+              </h3>
+              <div className="space-y-4">
+                {improveLessons.map((lesson, index) => (
+                  <div key={index} className="flex items-start gap-3">
+                    <div
+                      className="w-2 h-2 rounded-full mt-2 flex-shrink-0"
+                      style={{ backgroundColor: improveColor }}
+                    />
+                    <span className="text-muted-foreground">{lesson}</span>
+                  </div>
+                ))}
+              </div>
+            </motion.div>
+          </div>
+        </div>
+      </div>
+    </section>
+  );
+};
+
+export default PortfolioLessonsSection;

components/portfolio/PortfolioProjectDetails.tsx

@@ -0,0 +1,233 @@
+// components/portfolio/PortfolioProjectDetails.tsx
+import { motion } from "framer-motion";
+import { Badge } from "@/components/ui/badge";
+import { 
+  Code, 
+  ShoppingCart, 
+  Calendar, 
+  Users, 
+  Smartphone 
+} from "lucide-react";
+
+interface Technology {
+  name: string;
+  icon: React.ReactNode;
+}
+
+interface ProjectDetails {
+  technologies: Technology[];
+  industries: string[];
+  duration: string;
+  teamSize: string;
+  platforms: string[];
+}
+
+interface PortfolioProjectDetailsProps {
+  title?: string;
+  description?: string;
+  details: ProjectDetails;
+  achievements?: Array<{
+    label: string;
+    value: string;
+    description: string;
+  }>;
+}
+
+export const PortfolioProjectDetails = ({
+  title = "Project Details",
+  description = "Detailed overview of the project including technologies, timeline, and team composition.",
+  details,
+  achievements = []
+}: PortfolioProjectDetailsProps) => {
+  return (
+    <section className="py-24 bg-card/30 relative overflow-hidden">
+      {/* Background Elements */}
+      <div className="absolute inset-0 bg-gradient-to-br from-accent/5 via-transparent to-green-500/5" />
+      <div className="absolute top-20 right-20 w-64 h-64 bg-accent/10 rounded-full blur-3xl opacity-20" />
+      <div className="absolute bottom-20 left-20 w-48 h-48 bg-green-500/10 rounded-full blur-3xl opacity-20" />
+
+      <div className="container mx-auto px-4 lg:px-6 relative z-10">
+        <div className="max-w-7xl mx-auto">
+          {/* Section Header */}
+          <motion.div
+            initial={{ opacity: 0, y: 30 }}
+            animate={{ opacity: 1, y: 0 }}
+            transition={{ duration: 0.8 }}
+            className="text-center mb-16"
+          >
+            <h2 className="text-3xl lg:text-5xl font-semibold text-foreground mb-6">
+              {title}
+            </h2>
+            <p className="text-xl text-muted-foreground max-w-3xl mx-auto">
+              {description}
+            </p>
+          </motion.div>
+
+          {/* Project Meta Information Grid */}
+          <motion.div
+            initial={{ opacity: 0, y: 30 }}
+            animate={{ opacity: 1, y: 0 }}
+            transition={{ duration: 0.8, delay: 0.2 }}
+            className="grid lg:grid-cols-2 gap-8 mb-20"
+          >
+            {/* Technologies & Industries Card */}
+            <div className="bg-background/40 backdrop-blur-xl rounded-2xl p-8 border border-border/30 hover:border-accent/20 transition-all duration-500 group">
+              <div className="space-y-8">
+                {/* Technologies */}
+                <div>
+                  <div className="flex items-center gap-3 mb-6">
+                    <div className="w-12 h-12 bg-accent/10 backdrop-blur-sm rounded-xl border border-accent/20 flex items-center justify-center group-hover:bg-accent/20 transition-all duration-300">
+                      <Code className="w-6 h-6 text-accent" />
+                    </div>
+                    <h3 className="text-xl font-semibold text-foreground">Technologies</h3>
+                  </div>
+                  <div className="flex flex-wrap gap-3">
+                    {details.technologies.map((tech) => (
+                      <Badge
+                        key={tech.name}
+                        variant="outline"
+                        className="text-base border-border/40 bg-background/30 hover:bg-accent/10 hover:border-accent/40 flex items-center gap-2 px-4 py-2 transition-all duration-300"
+                      >
+                        <span className="text-accent">{tech.icon}</span>
+                        {tech.name}
+                      </Badge>
+                    ))}
+                  </div>
+                </div>
+
+                {/* Industries */}
+                <div>
+                  <div className="flex items-center gap-3 mb-6">
+                    <div className="w-12 h-12 bg-green-500/10 backdrop-blur-sm rounded-xl border border-green-500/20 flex items-center justify-center group-hover:bg-green-500/20 transition-all duration-300">
+                      <ShoppingCart className="w-6 h-6 text-green-400" />
+                    </div>
+                    <h3 className="text-xl font-semibold text-foreground">Industries</h3>
+                  </div>
+                  <div className="flex flex-wrap gap-3">
+                    {details.industries.map((industry) => (
+                      <Badge
+                        key={industry}
+                        variant="secondary"
+                        className="text-base bg-green-500/10 border-green-500/20 text-green-100 hover:bg-green-500/20 px-4 py-2 transition-all duration-300"
+                      >
+                        {industry}
+                      </Badge>
+                    ))}
+                  </div>
+                </div>
+              </div>
+            </div>
+
+            {/* Timeline & Team Card */}
+            <div className="bg-background/40 backdrop-blur-xl rounded-2xl p-8 border border-border/30 hover:border-blue-400/20 transition-all duration-500 group">
+              <div className="space-y-8">
+                {/* Duration */}
+                <div>
+                  <div className="flex items-center gap-3 mb-6">
+                    <div className="w-12 h-12 bg-blue-500/10 backdrop-blur-sm rounded-xl border border-blue-500/20 flex items-center justify-center group-hover:bg-blue-500/20 transition-all duration-300">
+                      <Calendar className="w-6 h-6 text-blue-400" />
+                    </div>
+                    <h3 className="text-xl font-semibold text-foreground">Project Timeline</h3>
+                  </div>
+                  <p className="text-lg text-muted-foreground pl-15">{details.duration}</p>
+                </div>
+
+                {/* Team */}
+                <div>
+                  <div className="flex items-center gap-3 mb-6">
+                    <div className="w-12 h-12 bg-purple-500/10 backdrop-blur-sm rounded-xl border border-purple-500/20 flex items-center justify-center group-hover:bg-purple-500/20 transition-all duration-300">
+                      <Users className="w-6 h-6 text-purple-400" />
+                    </div>
+                    <h3 className="text-xl font-semibold text-foreground">Team Composition</h3>
+                  </div>
+                  <p className="text-lg text-muted-foreground pl-15">{details.teamSize}</p>
+                </div>
+
+                {/* Platforms */}
+                <div>
+                  <div className="flex items-center gap-3 mb-6">
+                    <div className="w-12 h-12 bg-orange-500/10 backdrop-blur-sm rounded-xl border border-orange-500/20 flex items-center justify-center group-hover:bg-orange-500/20 transition-all duration-300">
+                      <Smartphone className="w-6 h-6 text-orange-400" />
+                    </div>
+                    <h3 className="text-xl font-semibold text-foreground">Target Platforms</h3>
+                  </div>
+                  <div className="flex gap-3 pl-15">
+                    {details.platforms.map((platform) => (
+                      <Badge
+                        key={platform}
+                        variant="outline"
+                        className="text-base border-orange-400/40 bg-orange-500/10 text-orange-100 hover:bg-orange-500/20 px-3 py-1"
+                      >
+                        {platform}
+                      </Badge>
+                    ))}
+                  </div>
+                </div>
+              </div>
+            </div>
+          </motion.div>
+
+          {/* Key Achievements Section */}
+          {achievements.length > 0 && (
+            <motion.div
+              initial={{ opacity: 0, y: 30 }}
+              animate={{ opacity: 1, y: 0 }}
+              transition={{ duration: 0.8, delay: 0.4 }}
+              className="mb-16"
+            >
+              <div className="text-center mb-12">
+                <h2 className="text-3xl lg:text-4xl font-semibold text-foreground mb-6">
+                  Key Impact & Results
+                </h2>
+                <p className="text-xl text-muted-foreground max-w-3xl mx-auto">
+                  Measurable outcomes that demonstrate the project's success
+                </p>
+              </div>
+
+              <div className="grid grid-cols-1 md:grid-cols-3 gap-8">
+                {achievements.map((achievement, index) => (
+                  <motion.div
+                    key={achievement.label}
+                    initial={{ opacity: 0, y: 20 }}
+                    animate={{ opacity: 1, y: 0 }}
+                    transition={{ duration: 0.6, delay: 0.6 + index * 0.1 }}
+                    whileHover={{
+                      scale: 1.02,
+                      y: -4,
+                      transition: { duration: 0.3, ease: "easeOut" }
+                    }}
+                    className="bg-background/50 backdrop-blur-xl rounded-2xl p-8 border border-border/40 hover:border-accent/30 hover:bg-background/60 transition-all duration-500 group cursor-pointer relative overflow-hidden"
+                  >
+                    {/* Card Background Gradient */}
+                    <div className="absolute inset-0 bg-gradient-to-br from-accent/5 via-transparent to-transparent opacity-0 group-hover:opacity-100 transition-opacity duration-500" />
+
+                    {/* Content */}
+                    <div className="relative z-10 text-center">
+                      {/* Value */}
+                      <div className="text-3xl lg:text-4xl font-bold text-accent mb-4 group-hover:text-accent transition-colors duration-300">
+                        {achievement.value}
+                      </div>
+
+                      {/* Label */}
+                      <div className="text-xl font-semibold text-foreground mb-3 group-hover:text-foreground transition-colors duration-300">
+                        {achievement.label}
+                      </div>
+
+                      {/* Description */}
+                      <div className="text-base text-muted-foreground leading-relaxed group-hover:text-muted-foreground transition-colors duration-300">
+                        {achievement.description}
+                      </div>
+                    </div>
+
+                    {/* Hover Effect Line */}
+                    <div className="absolute bottom-0 left-0 w-full h-1 bg-gradient-to-r from-accent to-accent/50 transform scale-x-0 group-hover:scale-x-100 transition-transform duration-500 origin-left" />
+                  </motion.div>
+                ))}
+              </div>
+            </motion.div>
+          )}
+        </div>
+      </div>
+    </section>
+  );
+};

components/portfolio/PortfolioProjectOverview.tsx

@@ -0,0 +1,75 @@
+// components/PortfolioProjectOverview.tsx
+import { motion } from "framer-motion";
+import { ReactNode } from "react";
+
+interface PortfolioProjectOverviewProps {
+  icon: ReactNode;
+  title: string;
+  description?: string;
+  points?: string[];
+  borderColor?: string;
+  hoverColor?: string;
+}
+
+export function PortfolioProjectOverview({
+  icon,
+  title,
+  description,
+  points,
+  borderColor = "border-accent/20",
+  hoverColor = "accent",
+}: PortfolioProjectOverviewProps) {
+  return (
+    <motion.div
+      initial={{ opacity: 0, y: 20 }}
+      whileInView={{ opacity: 1, y: 0 }}
+      whileHover={{
+        scale: 1.05,
+        y: -4,
+        transition: { duration: 0.3, ease: "easeOut" },
+      }}
+      transition={{ duration: 0.6 }}
+      viewport={{ once: true }}
+      className={`bg-card/30 rounded-2xl p-8 border-2 ${borderColor} cursor-pointer group 
+        hover:border-${hoverColor}/40 hover:bg-card/40 
+        hover:shadow-lg hover:shadow-${hoverColor}/10 
+        transition-all duration-300 ease-out`}
+    >
+      {/* Icon */}
+      <motion.div
+        initial={{ opacity: 0, scale: 0.8 }}
+        whileInView={{ opacity: 1, scale: 1 }}
+        transition={{ duration: 0.6, delay: 0.2 }}
+        viewport={{ once: true }}
+        className="flex justify-start mb-6"
+      >
+        <div
+          className={`w-16 h-16 bg-background/20 backdrop-blur-sm rounded-full 
+            border border-border/30 flex items-center justify-center 
+            group-hover:border-${hoverColor}/50 group-hover:bg-${hoverColor}/10 
+            transition-all duration-300 ease-out`}
+        >
+          {icon}
+        </div>
+      </motion.div>
+
+      {/* Title */}
+      <h3 className="text-2xl font-semibold text-foreground mb-6">{title}</h3>
+
+      {/* Content */}
+      {description && (
+        <p className="text-muted-foreground leading-relaxed">{description}</p>
+      )}
+      {points && (
+        <div className="space-y-3">
+          {points.map((point, i) => (
+            <div key={i} className="flex items-start gap-3">
+              <span className="w-5 h-5 text-accent mt-0.5 flex-shrink-0">✔</span>
+              <span className="text-muted-foreground text-base">{point}</span>
+            </div>
+          ))}
+        </div>
+      )}
+    </motion.div>
+  );
+}

components/portfolio/PortfolioResultsImpact.tsx

@@ -0,0 +1,92 @@
+// components/PortfolioResultsImpact.tsx
+import { motion } from "framer-motion";
+import { CheckCircle } from "lucide-react";
+
+interface Metric {
+  value: string;
+  label: string;
+  description: string;
+}
+
+interface PortfolioResultsImpactProps {
+  title: string;
+  subtitle: string;
+  metrics: Metric[];
+  achievements: string[];
+}
+
+export function PortfolioResultsImpact({
+  title,
+  subtitle,
+  metrics,
+  achievements,
+}: PortfolioResultsImpactProps) {
+  return (
+    <section className="py-24 bg-background">
+      <div className="container mx-auto px-4 lg:px-6">
+        <motion.div
+          initial={{ opacity: 0, y: 30 }}
+          whileInView={{ opacity: 1, y: 0 }}
+          transition={{ duration: 0.8 }}
+          viewport={{ once: true }}
+          className="max-w-6xl mx-auto"
+        >
+          {/* Heading */}
+          <div className="text-center mb-16">
+            <h2 className="text-3xl lg:text-5xl font-semibold text-foreground mb-6">
+              {title}
+            </h2>
+            <p className="text-xl text-muted-foreground max-w-3xl mx-auto">
+              {subtitle}
+            </p>
+          </div>
+
+          {/* Metrics */}
+          <div className="grid md:grid-cols-2 lg:grid-cols-3 gap-8 mb-16">
+            {metrics.map((metric, index) => (
+              <motion.div
+                key={metric.label}
+                initial={{ opacity: 0, y: 20 }}
+                whileInView={{ opacity: 1, y: 0 }}
+                transition={{ duration: 0.6, delay: index * 0.1 }}
+                viewport={{ once: true }}
+                className="bg-background/50 rounded-xl p-6 border border-border/50 hover:border-accent/30 transition-all duration-300 text-center"
+              >
+                <div className="text-3xl font-bold text-accent mb-2">
+                  {metric.value}
+                </div>
+                <div className="text-lg font-semibold text-foreground mb-2">
+                  {metric.label}
+                </div>
+                <div className="text-muted-foreground text-sm">
+                  {metric.description}
+                </div>
+              </motion.div>
+            ))}
+          </div>
+
+          {/* Achievements */}
+          <motion.div
+            initial={{ opacity: 0, y: 20 }}
+            whileInView={{ opacity: 1, y: 0 }}
+            transition={{ duration: 0.8, delay: 0.3 }}
+            viewport={{ once: true }}
+            className="bg-background/50 rounded-2xl p-8 border border-border/50"
+          >
+            <h3 className="text-2xl font-semibold text-foreground mb-6">
+              Technical Achievements
+            </h3>
+            <div className="grid md:grid-cols-2 gap-4">
+              {achievements.map((achievement, index) => (
+                <div key={index} className="flex items-start gap-3">
+                  <CheckCircle className="w-5 h-5 text-accent mt-0.5 flex-shrink-0" />
+                  <span className="text-muted-foreground">{achievement}</span>
+                </div>
+              ))}
+            </div>
+          </motion.div>
+        </motion.div>
+      </div>
+    </section>
+  );
+}

components/portfolio/PortfolioRoadmapSection.tsx

@@ -0,0 +1,75 @@
+import React from "react";
+import { motion } from "framer-motion";
+
+interface RoadmapItem {
+  phase: string;
+  features: string[];
+}
+
+interface PortfolioRoadmapSectionProps {
+  title: string;
+  description: string;
+  roadmapItems: RoadmapItem[];
+  icon?: React.ReactNode; // optional (default ArrowRight)
+}
+
+const PortfolioRoadmapSection: React.FC<PortfolioRoadmapSectionProps> = ({
+  title,
+  description,
+  roadmapItems,
+  icon,
+}) => {
+  return (
+    <section className="py-24 bg-background">
+      <div className="container mx-auto px-4 lg:px-6">
+        <motion.div
+          initial={{ opacity: 0, y: 30 }}
+          whileInView={{ opacity: 1, y: 0 }}
+          transition={{ duration: 0.8 }}
+          viewport={{ once: true }}
+          className="max-w-6xl mx-auto"
+        >
+          {/* Header */}
+          <div className="text-center mb-16">
+            <h2 className="text-3xl lg:text-5xl font-semibold text-foreground mb-6">
+              {title}
+            </h2>
+            <p className="text-xl text-muted-foreground max-w-3xl mx-auto">
+              {description}
+            </p>
+          </div>
+
+          {/* Roadmap Grid */}
+          <div className="grid lg:grid-cols-2 gap-12">
+            {roadmapItems.map((roadmap, index) => (
+              <motion.div
+                key={roadmap.phase}
+                initial={{ opacity: 0, y: 20 }}
+                whileInView={{ opacity: 1, y: 0 }}
+                transition={{ duration: 0.6, delay: index * 0.2 }}
+                viewport={{ once: true }}
+                className="bg-background/50 rounded-2xl p-8 border border-border/50 hover:border-accent/30 transition-all duration-300"
+              >
+                <h3 className="text-2xl font-semibold text-foreground mb-6">
+                  {roadmap.phase}
+                </h3>
+                <div className="space-y-4">
+                  {roadmap.features.map((feature, featureIndex) => (
+                    <div key={featureIndex} className="flex items-start gap-3">
+                      <span className="w-5 h-5 text-accent mt-0.5 flex-shrink-0">
+                        {icon}
+                      </span>
+                      <span className="text-muted-foreground">{feature}</span>
+                    </div>
+                  ))}
+                </div>
+              </motion.div>
+            ))}
+          </div>
+        </motion.div>
+      </div>
+    </section>
+  );
+};
+
+export default PortfolioRoadmapSection;

components/portfolio/PortfolioTestimonial.tsx

@@ -0,0 +1,70 @@
+import React from "react";
+import { motion } from "framer-motion";
+import { Star } from "lucide-react";
+
+interface PortfolioTestimonialProps {
+  logo: string | React.ReactNode; // can be an image URL or React component
+  alt?: string;
+  rating?: number; // default 5
+  testimonial: string;
+  clientName: string;
+  clientRole: string;
+  maxWidth?: string; // optional, e.g., "max-w-4xl"
+}
+
+const PortfolioTestimonial: React.FC<PortfolioTestimonialProps> = ({
+  logo,
+  alt = "Client Logo",
+  rating = 5,
+  testimonial,
+  clientName,
+  clientRole,
+  maxWidth = "max-w-4xl",
+}) => {
+  return (
+    <section className="py-24 bg-card/30">
+      <div className="container mx-auto px-4 lg:px-6">
+        <motion.div
+          initial={{ opacity: 0, y: 30 }}
+          whileInView={{ opacity: 1, y: 0 }}
+          transition={{ duration: 0.8 }}
+          viewport={{ once: true }}
+          className={`mx-auto text-center ${maxWidth}`}
+        >
+          <div className="bg-card/50 rounded-2xl p-12 border border-border/50">
+            {/* Logo */}
+            {typeof logo === "string" ? (
+              <div className="flex justify-center mb-8">
+                <img src={logo} alt={alt} className="h-12 w-auto object-contain" />
+              </div>
+            ) : (
+              <div className="flex justify-center mb-8">{logo}</div>
+            )}
+
+            {/* Rating */}
+            <div className="flex justify-center mb-8">
+              <div className="flex text-yellow-400">
+                {[...Array(rating)].map((_, i) => (
+                  <Star key={i} className="w-6 h-6 fill-current" />
+                ))}
+              </div>
+            </div>
+
+            {/* Testimonial */}
+            <blockquote className="text-2xl lg:text-3xl text-foreground mb-8 leading-relaxed italic">
+              {testimonial}
+            </blockquote>
+
+            {/* Client Info */}
+            <div className="flex flex-col items-center">
+              <div className="text-lg font-semibold text-foreground">{clientName}</div>
+              <div className="text-muted-foreground">{clientRole}</div>
+            </div>
+          </div>
+        </motion.div>
+      </div>
+    </section>
+  );
+};
+
+export default PortfolioTestimonial;

components/ui/shimmer-button.tsx

@@ -7,13 +7,16 @@ interface ShimmerButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElemen
 }
 
 const ShimmerButton = React.forwardRef<HTMLButtonElement, ShimmerButtonProps>(
-  ({ className, children, ...props }, ref) => {
+  ({ className, children, disabled, ...props }, ref) => {
     return (
       <button
         ref={ref}
+        disabled={disabled}
         className={cn(
-          "relative inline-flex items-center justify-center gap-2 rounded-md bg-accent px-6 py-3 text-sm font-medium text-accent-foreground transition-all duration-300 hover:bg-accent/90 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-accent whitespace-nowrap overflow-hidden",
-          "before:absolute before:inset-0 before:-translate-x-full before:animate-[shimmer_2s_infinite] before:bg-gradient-to-r before:from-transparent before:via-white/10 before:to-transparent",
+          "relative inline-flex items-center justify-center gap-2 rounded-md bg-accent px-6 py-3 text-sm font-medium text-accent-foreground transition-all duration-300 whitespace-nowrap overflow-hidden",
+          !disabled
+            ? "hover:bg-accent/90 cursor-pointer before:absolute before:inset-0 before:-translate-x-full before:animate-[shimmer_2s_infinite] before:bg-gradient-to-r before:from-transparent before:via-white/10 before:to-transparent"
+            : "bg-gray-700 text-gray-400 cursor-not-allowed before:!hidden",
           className
         )}
         {...props}

components/vectors/BackendVector.tsx

@@ -0,0 +1,285 @@
+import { motion } from "framer-motion";
+
+export const BackendVector = () => {
+  return (
+    <div className="relative w-full h-96 flex items-center justify-center overflow-hidden font-manrope">
+      {/* Subtle Background Grid */}
+      <div className="absolute inset-0 opacity-5">
+        <svg className="w-full h-full" viewBox="0 0 400 400" fill="none">
+          <defs>
+            <pattern id="gridPattern" x="0" y="0" width="20" height="20" patternUnits="userSpaceOnUse">
+              <path d="M 20 0 L 0 0 0 20" fill="none" stroke="#E5195E" strokeWidth="0.5"/>
+            </pattern>
+          </defs>
+          <rect width="100%" height="100%" fill="url(#gridPattern)" />
+        </svg>
+      </div>
+
+      <div className="relative z-20 flex items-center justify-center">
+        {/* API Gateway - Central Component */}
+        <motion.div
+          initial={{ opacity: 0, scale: 0 }}
+          animate={{ opacity: 1, scale: 1 }}
+          transition={{ duration: 0.8, delay: 0.2 }}
+          className="relative flex flex-col items-center"
+        >
+          {/* Main API Gateway */}
+          <motion.div
+            animate={{ y: [0, -6, 0] }}
+            transition={{ duration: 4, repeat: Infinity, ease: "easeInOut" }}
+            className="w-20 h-16 bg-gradient-to-br from-blue-600 to-blue-800 rounded-xl flex items-center justify-center shadow-lg border border-blue-500/20 relative"
+          >
+            {/* API Icon */}
+            <svg className="w-8 h-8 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+              <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M8 9l3 3-3 3m5 0h3M5 20h14a2 2 0 002-2V6a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z" />
+            </svg>
+            
+            {/* Pulsing Status Light */}
+            <motion.div
+              animate={{ scale: [1, 1.3, 1], opacity: [0.8, 1, 0.8] }}
+              transition={{ duration: 2, repeat: Infinity }}
+              className="absolute -top-1 -right-1 w-3 h-3 bg-green-400 rounded-full"
+            ></motion.div>
+          </motion.div>
+          
+          {/* API Gateway Label */}
+          <motion.div
+            initial={{ opacity: 0 }}
+            animate={{ opacity: 1 }}
+            transition={{ duration: 0.5, delay: 1 }}
+            className="mt-3 text-xs text-white font-manrope whitespace-nowrap"
+          >
+            API Gateway
+          </motion.div>
+        </motion.div>
+
+        {/* Database Cluster - Left Side */}
+        <motion.div
+          initial={{ opacity: 0, x: -60 }}
+          animate={{ opacity: 1, x: -80 }}
+          transition={{ duration: 0.8, delay: 0.4 }}
+          className="absolute flex flex-col items-center space-y-2"
+        >
+          {Array.from({ length: 3 }).map((_, i) => (
+            <motion.div
+              key={`db-${i}`}
+              initial={{ opacity: 0, scale: 0 }}
+              animate={{ opacity: 1, scale: 1 }}
+              transition={{ duration: 0.5, delay: 0.6 + i * 0.1 }}
+              className="relative"
+            >
+              <motion.div
+                animate={{ 
+                  rotateY: [0, 360],
+                  scale: [1, 1.05, 1]
+                }}
+                transition={{ 
+                  duration: 8 + i * 2, 
+                  repeat: Infinity, 
+                  ease: "linear",
+                  delay: i * 1
+                }}
+                className="w-12 h-8 bg-gradient-to-r from-green-600 to-green-700 rounded-lg flex items-center justify-center border border-green-500/20"
+              >
+                {/* Database Icon */}
+                <svg className="w-4 h-4 text-white" fill="currentColor" viewBox="0 0 20 20">
+                  <path d="M3 12v3c0 1.657 3.134 3 7 3s7-1.343 7-3v-3c0 1.657-3.134 3-7 3s-7-1.343-7-3z"/>
+                  <path d="M3 7v3c0 1.657 3.134 3 7 3s7-1.343 7-3V7c0 1.657-3.134 3-7 3S3 8.657 3 7z"/>
+                  <path d="M17 5c0 1.657-3.134 3-7 3S3 6.657 3 5s3.134-3 7-3 7 1.343 7 3z"/>
+                </svg>
+              </motion.div>
+              
+              {/* Activity Indicator */}
+              <motion.div
+                animate={{ scale: [1, 1.5, 1] }}
+                transition={{ duration: 1.5, repeat: Infinity, delay: i * 0.5 }}
+                className="absolute -top-1 -right-1 w-2 h-2 bg-blue-400 rounded-full"
+              ></motion.div>
+            </motion.div>
+          ))}
+          
+          {/* Database Label */}
+          <motion.div
+            initial={{ opacity: 0 }}
+            animate={{ opacity: 1 }}
+            transition={{ duration: 0.5, delay: 1.2 }}
+            className="text-xs text-white font-manrope whitespace-nowrap"
+          >
+            Database
+          </motion.div>
+        </motion.div>
+
+        {/* Microservices - Right Side */}
+        <motion.div
+          initial={{ opacity: 0, x: 60 }}
+          animate={{ opacity: 1, x: 80 }}
+          transition={{ duration: 0.8, delay: 0.6 }}
+          className="absolute flex flex-col items-center space-y-2"
+        >
+          {Array.from({ length: 4 }).map((_, i) => (
+            <motion.div
+              key={`service-${i}`}
+              initial={{ opacity: 0, scale: 0 }}
+              animate={{ opacity: 1, scale: 1 }}
+              transition={{ duration: 0.4, delay: 0.8 + i * 0.1 }}
+              className="relative"
+            >
+              <motion.div
+                animate={{ 
+                  x: [0, 3, 0],
+                  scale: [1, 1.1, 1]
+                }}
+                transition={{ 
+                  duration: 3 + i * 0.5, 
+                  repeat: Infinity, 
+                  ease: "easeInOut",
+                  delay: i * 0.3
+                }}
+                className="w-10 h-6 bg-gradient-to-r from-purple-600 to-purple-700 rounded flex items-center justify-center border border-purple-500/20"
+              >
+                <span className="text-xs text-white font-manrope">#{i + 1}</span>
+              </motion.div>
+              
+              {/* Service Status */}
+              <motion.div
+                animate={{ opacity: [0.5, 1, 0.5] }}
+                transition={{ duration: 2, repeat: Infinity, delay: i * 0.4 }}
+                className="absolute -top-1 -left-1 w-2 h-2 bg-green-400 rounded-full"
+              ></motion.div>
+            </motion.div>
+          ))}
+          
+          {/* Microservices Label */}
+          <motion.div
+            initial={{ opacity: 0 }}
+            animate={{ opacity: 1 }}
+            transition={{ duration: 0.5, delay: 1.4 }}
+            className="text-xs text-white font-manrope whitespace-nowrap"
+          >
+            Services
+          </motion.div>
+        </motion.div>
+      </div>
+
+      {/* Data Flow Lines */}
+      <svg className="absolute inset-0 w-full h-full pointer-events-none opacity-30 z-15">
+        <defs>
+          <linearGradient id="flowGradient1" x1="0%" y1="0%" x2="100%" y2="0%">
+            <stop offset="0%" stopColor="#22c55e" stopOpacity="0.6" />
+            <stop offset="50%" stopColor="#3b82f6" stopOpacity="0.8" />
+            <stop offset="100%" stopColor="#8b5cf6" stopOpacity="0.6" />
+          </linearGradient>
+          <linearGradient id="flowGradient2" x1="0%" y1="0%" x2="100%" y2="0%">
+            <stop offset="0%" stopColor="#8b5cf6" stopOpacity="0.6" />
+            <stop offset="50%" stopColor="#3b82f6" stopOpacity="0.8" />
+            <stop offset="100%" stopColor="#22c55e" stopOpacity="0.6" />
+          </linearGradient>
+        </defs>
+        
+        {/* Database to API Flow */}
+        <motion.path
+          d="M 30% 50% Q 40% 45% 50% 50%"
+          fill="none"
+          stroke="url(#flowGradient1)"
+          strokeWidth="2"
+          strokeDasharray="4,4"
+          initial={{ pathLength: 0 }}
+          animate={{ pathLength: 1 }}
+          transition={{ duration: 2, repeat: Infinity, repeatType: "loop" }}
+        />
+        
+        {/* API to Services Flow */}
+        <motion.path
+          d="M 50% 50% Q 60% 45% 70% 50%"
+          fill="none"
+          stroke="url(#flowGradient2)"
+          strokeWidth="2"
+          strokeDasharray="4,4"
+          initial={{ pathLength: 0 }}
+          animate={{ pathLength: 1 }}
+          transition={{ duration: 2, repeat: Infinity, repeatType: "loop", delay: 0.5 }}
+        />
+      </svg>
+
+      {/* Performance Metrics - Top Right */}
+      <motion.div
+        initial={{ opacity: 0, y: -20 }}
+        animate={{ opacity: 1, y: 0 }}
+        transition={{ duration: 0.6, delay: 1.6 }}
+        className="absolute top-6 right-6 z-25"
+      >
+        <div className="bg-black/40 backdrop-blur-sm rounded-lg p-3 border border-white/10">
+          <div className="space-y-2">
+            <div className="flex items-center space-x-2">
+              <motion.div
+                animate={{ scale: [1, 1.2, 1] }}
+                transition={{ duration: 2, repeat: Infinity }}
+                className="w-2 h-2 bg-green-400 rounded-full"
+              ></motion.div>
+              <span className="text-green-400 text-xs font-manrope">2ms Latency</span>
+            </div>
+            <div className="flex items-center space-x-2">
+              <motion.div
+                animate={{ scale: [1, 1.2, 1] }}
+                transition={{ duration: 2, repeat: Infinity, delay: 0.5 }}
+                className="w-2 h-2 bg-blue-400 rounded-full"
+              ></motion.div>
+              <span className="text-blue-400 text-xs font-manrope">1M+ Requests/hr</span>
+            </div>
+            <div className="flex items-center space-x-2">
+              <motion.div
+                animate={{ scale: [1, 1.2, 1] }}
+                transition={{ duration: 2, repeat: Infinity, delay: 1 }}
+                className="w-2 h-2 bg-purple-400 rounded-full"
+              ></motion.div>
+              <span className="text-purple-400 text-xs font-manrope">Auto-Scaling</span>
+            </div>
+          </div>
+        </div>
+      </motion.div>
+
+      {/* Tech Stack - Bottom Left */}
+      <motion.div
+        initial={{ opacity: 0, y: 20 }}
+        animate={{ opacity: 1, y: 0 }}
+        transition={{ duration: 0.6, delay: 1.8 }}
+        className="absolute bottom-6 left-6 z-25"
+      >
+        <div className="bg-black/40 backdrop-blur-sm rounded-lg p-3 border border-white/10">
+          <div className="flex space-x-2">
+            {[
+              { name: "Node.js", color: "bg-green-600/20 text-green-400" },
+              { name: "SQL", color: "bg-blue-600/20 text-blue-400" },
+              { name: "Redis", color: "bg-red-600/20 text-red-400" },
+              { name: "Docker", color: "bg-cyan-600/20 text-cyan-400" }
+            ].map((tech, index) => (
+              <motion.div
+                key={tech.name}
+                initial={{ scale: 0 }}
+                animate={{ scale: 1 }}
+                transition={{ duration: 0.3, delay: 2 + index * 0.1 }}
+                className={`px-2 py-1 ${tech.color} border border-current/20 rounded text-xs font-manrope`}
+              >
+                {tech.name}
+              </motion.div>
+            ))}
+          </div>
+        </div>
+      </motion.div>
+
+      {/* Load Balancer Indicator */}
+      <motion.div
+        initial={{ opacity: 0, scale: 0 }}
+        animate={{ opacity: 1, scale: 1 }}
+        transition={{ duration: 0.5, delay: 2.2 }}
+        className="absolute bottom-6 right-6 z-25"
+      >
+        <motion.div
+          animate={{ rotate: [0, 360] }}
+          transition={{ duration: 12, repeat: Infinity, ease: "linear" }}
+          className="w-8 h-8 border-2 border-gray-600 border-t-accent rounded-full"
+        ></motion.div>
+      </motion.div>
+    </div>
+  );
+};

components/vectors/DashboardVector.tsx

@@ -0,0 +1,232 @@
+import { motion } from "framer-motion";
+
+export const DashboardVector = () => {
+  return (
+    <div className="relative w-full h-96 flex items-center justify-center">
+      {/* Main Mobile Device */}
+      <motion.div
+        initial={{ opacity: 0, y: 30 }}
+        animate={{ opacity: 1, y: 0 }}
+        transition={{ duration: 0.8, delay: 0.2 }}
+        className="relative z-10"
+      >
+        {/* Phone Frame */}
+        <div className="w-40 h-80 bg-gradient-to-br from-gray-800 to-gray-900 rounded-3xl p-2 shadow-2xl">
+          {/* Screen */}
+          <div className="w-full h-full bg-gradient-to-br from-gray-100 to-gray-200 rounded-2xl relative overflow-hidden">
+            {/* Top Status Bar */}
+            <div className="absolute top-0 left-0 right-0 h-8 bg-gradient-to-r from-gray-800 to-gray-700 flex items-center justify-between px-4">
+              <div className="flex items-center gap-1">
+                <div className="w-1 h-1 bg-green-400 rounded-full"></div>
+                <div className="w-1 h-1 bg-yellow-400 rounded-full"></div>
+                <div className="w-1 h-1 bg-red-400 rounded-full"></div>
+              </div>
+              <div className="text-white text-xs font-manrope">9:41</div>
+              <div className="flex items-center gap-1">
+                <div className="w-3 h-2 bg-white/60 rounded-sm"></div>
+                <div className="w-4 h-2 bg-white/80 rounded-sm"></div>
+              </div>
+            </div>
+
+            {/* Main Dashboard Content */}
+            <div className="absolute inset-4 top-12 space-y-3">
+              {/* Header */}
+              <div className="flex justify-between items-center">
+                <div>
+                  <div className="text-gray-800 text-sm font-bold font-manrope">Hey Balazs!</div>
+                  <div className="text-gray-600 text-xs font-manrope">Good morning</div>
+                </div>
+                <motion.div
+                  animate={{ rotate: 360 }}
+                  transition={{ duration: 8, repeat: Infinity, ease: "linear" }}
+                  className="w-6 h-6 bg-gradient-to-br from-[#E5195E] to-[#FF6B9D] rounded-full flex items-center justify-center"
+                >
+                  <div className="w-3 h-3 bg-white rounded-full"></div>
+                </motion.div>
+              </div>
+
+              {/* Weather Card */}
+              <div className="bg-gradient-to-r from-blue-400 to-blue-500 rounded-2xl p-3 text-white">
+                <div className="flex justify-between items-center">
+                  <div>
+                    <div className="text-lg font-bold font-manrope">17°</div>
+                    <div className="text-xs opacity-80 font-manrope">New York</div>
+                  </div>
+                  <div className="text-2xl">☀️</div>
+                </div>
+              </div>
+
+              {/* Stats Row */}
+              <div className="grid grid-cols-2 gap-2">
+                <div className="bg-white rounded-xl p-2 shadow-sm">
+                  <div className="text-gray-500 text-xs font-manrope">Revenue</div>
+                  <div className="text-gray-800 text-sm font-bold font-manrope">$67k</div>
+                  <motion.div
+                    initial={{ width: 0 }}
+                    animate={{ width: "70%" }}
+                    transition={{ duration: 2, delay: 1 }}
+                    className="h-1 bg-gradient-to-r from-[#E5195E] to-[#FF6B9D] rounded-full mt-1"
+                  ></motion.div>
+                </div>
+                <div className="bg-white rounded-xl p-2 shadow-sm">
+                  <div className="text-gray-500 text-xs font-manrope">Orders</div>
+                  <div className="text-gray-800 text-sm font-bold font-manrope">1,284</div>
+                  <motion.div
+                    initial={{ width: 0 }}
+                    animate={{ width: "85%" }}
+                    transition={{ duration: 2, delay: 1.2 }}
+                    className="h-1 bg-gradient-to-r from-green-400 to-green-500 rounded-full mt-1"
+                  ></motion.div>
+                </div>
+              </div>
+
+              {/* Chart Area */}
+              <div className="bg-white rounded-xl p-3 shadow-sm">
+                <div className="text-gray-500 text-xs mb-2 font-manrope">Analytics</div>
+                <div className="flex items-end justify-between h-16">
+                  {[40, 65, 45, 80, 55, 90, 70].map((height, index) => (
+                    <motion.div
+                      key={index}
+                      initial={{ height: 0 }}
+                      animate={{ height: `${height}%` }}
+                      transition={{ duration: 1, delay: 1.5 + index * 0.1 }}
+                      className="w-2 bg-gradient-to-t from-[#E5195E] to-[#FF6B9D] rounded-full"
+                    ></motion.div>
+                  ))}
+                </div>
+              </div>
+
+              {/* Activity Indicator */}
+              <div className="bg-white rounded-xl p-3 shadow-sm">
+                <div className="flex items-center justify-between">
+                  <div className="text-gray-500 text-xs font-manrope">Activity</div>
+                  <motion.div
+                    animate={{ scale: [1, 1.2, 1] }}
+                    transition={{ duration: 2, repeat: Infinity }}
+                    className="w-2 h-2 bg-green-400 rounded-full"
+                  ></motion.div>
+                </div>
+                <div className="mt-2">
+                  <svg className="w-full h-6" viewBox="0 0 100 20">
+                    <motion.path
+                      d="M0,15 Q25,5 50,10 T100,8"
+                      stroke="url(#activityGradient)"
+                      strokeWidth="2"
+                      fill="none"
+                      initial={{ pathLength: 0 }}
+                      animate={{ pathLength: 1 }}
+                      transition={{ duration: 2, delay: 2 }}
+                    />
+                    <defs>
+                      <linearGradient id="activityGradient" x1="0%" y1="0%" x2="100%" y2="0%">
+                        <stop offset="0%" stopColor="#E5195E" />
+                        <stop offset="100%" stopColor="#FF6B9D" />
+                      </linearGradient>
+                    </defs>
+                  </svg>
+                </div>
+              </div>
+            </div>
+
+            {/* Bottom Navigation */}
+            <div className="absolute bottom-0 left-0 right-0 h-12 bg-white border-t border-gray-200 flex items-center justify-around">
+              {['🏠', '📊', '💬', '⚙️'].map((icon, index) => (
+                <motion.div
+                  key={index}
+                  whileHover={{ scale: 1.2 }}
+                  className={`text-lg ${index === 1 ? 'text-[#E5195E]' : 'text-gray-400'}`}
+                >
+                  {icon}
+                </motion.div>
+              ))}
+            </div>
+          </div>
+        </div>
+      </motion.div>
+
+      {/* Floating Data Points */}
+      <motion.div
+        animate={{ y: [0, -10, 0] }}
+        transition={{ duration: 3, repeat: Infinity }}
+        className="absolute top-20 left-16 w-12 h-12 bg-gradient-to-br from-blue-500 to-blue-600 rounded-xl flex items-center justify-center shadow-lg"
+      >
+        <span className="text-white text-sm font-bold font-manrope">98%</span>
+      </motion.div>
+
+      <motion.div
+        animate={{ y: [0, -15, 0] }}
+        transition={{ duration: 4, repeat: Infinity, delay: 0.5 }}
+        className="absolute top-24 right-20 w-10 h-10 bg-gradient-to-br from-green-500 to-green-600 rounded-lg flex items-center justify-center shadow-lg"
+      >
+        <span className="text-white text-xs font-bold font-manrope">+24</span>
+      </motion.div>
+
+      <motion.div
+        animate={{ y: [0, -12, 0] }}
+        transition={{ duration: 3.5, repeat: Infinity, delay: 1 }}
+        className="absolute bottom-24 left-20 w-11 h-11 bg-gradient-to-br from-purple-500 to-purple-600 rounded-lg flex items-center justify-center shadow-lg"
+      >
+        <span className="text-white text-xs font-bold font-manrope">📈</span>
+      </motion.div>
+
+      <motion.div
+        animate={{ y: [0, -8, 0] }}
+        transition={{ duration: 2.5, repeat: Infinity, delay: 1.5 }}
+        className="absolute bottom-20 right-16 w-9 h-9 bg-gradient-to-br from-orange-500 to-orange-600 rounded-lg flex items-center justify-center shadow-lg"
+      >
+        <span className="text-white text-xs font-bold font-manrope">⚡</span>
+      </motion.div>
+
+      {/* Connection Lines */}
+      <svg className="absolute inset-0 w-full h-full pointer-events-none opacity-30">
+        <defs>
+          <linearGradient id="dashboardGradient" x1="0%" y1="0%" x2="100%" y2="100%">
+            <stop offset="0%" stopColor="#E5195E" stopOpacity="0.6" />
+            <stop offset="50%" stopColor="#3B82F6" stopOpacity="0.4" />
+            <stop offset="100%" stopColor="#8B5CF6" stopOpacity="0.6" />
+          </linearGradient>
+        </defs>
+        
+        <motion.path
+          d="M 25% 35% Q 50% 15% 75% 40%"
+          stroke="url(#dashboardGradient)"
+          strokeWidth="2"
+          fill="none"
+          strokeDasharray="4,4"
+          initial={{ pathLength: 0 }}
+          animate={{ pathLength: 1 }}
+          transition={{ duration: 2, repeat: Infinity, repeatType: "reverse" }}
+        />
+        
+        <motion.path
+          d="M 20% 65% Q 50% 85% 80% 60%"
+          stroke="url(#dashboardGradient)"
+          strokeWidth="2"
+          fill="none"
+          strokeDasharray="4,4"
+          initial={{ pathLength: 0 }}
+          animate={{ pathLength: 1 }}
+          transition={{ duration: 2.5, repeat: Infinity, repeatType: "reverse", delay: 0.5 }}
+        />
+      </svg>
+
+      {/* Technology Labels */}
+      <motion.div
+        initial={{ opacity: 0 }}
+        animate={{ opacity: 1 }}
+        transition={{ duration: 1, delay: 2.5 }}
+        className="absolute bottom-8 left-1/2 transform -translate-x-1/2 flex space-x-4"
+      >
+        <div className="px-3 py-1 bg-blue-500/20 text-blue-300 border border-blue-500/30 rounded-full text-sm font-manrope">
+          React Native
+        </div>
+        <div className="px-3 py-1 bg-green-500/20 text-green-300 border border-green-500/30 rounded-full text-sm font-manrope">
+          Dashboard
+        </div>
+        <div className="px-3 py-1 bg-purple-500/20 text-purple-300 border border-purple-500/30 rounded-full text-sm font-manrope">
+          Analytics
+        </div>
+      </motion.div>
+    </div>
+  );
+};

components/vectors/DeveloperSkillsVector.tsx

@@ -0,0 +1,160 @@
+import { motion } from "framer-motion";
+
+export const DeveloperSkillsVector = () => {
+  const skills = [
+    { name: "Frontend", color: "from-blue-500 to-blue-600", icon: "🎨", position: { x: -60, y: -30 } },
+    { name: "Backend", color: "from-green-500 to-green-600", icon: "⚙️", position: { x: 60, y: -30 } },
+    { name: "Database", color: "from-purple-500 to-purple-600", icon: "🗄️", position: { x: 0, y: 50 } }
+  ];
+
+  return (
+    <div className="relative w-full h-80 flex items-center justify-center font-manrope">
+      {/* Subtle Background Glow */}
+      <div className="absolute inset-0 opacity-10">
+        <svg className="w-full h-full" viewBox="0 0 400 400" fill="none">
+          <defs>
+            <radialGradient id="bgGlow" cx="50%" cy="50%" r="40%">
+              <stop offset="0%" stopColor="#E5195E" stopOpacity="0.08" />
+              <stop offset="100%" stopColor="#3B82F6" stopOpacity="0.02" />
+            </radialGradient>
+          </defs>
+          <circle cx="200" cy="200" r="120" fill="url(#bgGlow)" />
+        </svg>
+      </div>
+
+      {/* Central Developer Icon */}
+      <motion.div
+        initial={{ opacity: 0, scale: 0 }}
+        animate={{ opacity: 1, scale: 1 }}
+        transition={{ duration: 0.8 }}
+        className="relative z-20"
+      >
+        <motion.div
+          animate={{ y: [0, -8, 0] }}
+          transition={{ duration: 4, repeat: Infinity, ease: "easeInOut" }}
+          className="w-20 h-20 bg-gradient-to-br from-accent to-purple-600 rounded-2xl flex items-center justify-center shadow-xl border border-white/10"
+        >
+          <svg className="w-10 h-10 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+            <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M16 7a4 4 0 11-8 0 4 4 0 018 0zM12 14a7 7 0 00-7 7h14a7 7 0 00-7-7z" />
+          </svg>
+        </motion.div>
+      </motion.div>
+
+      {/* Skill Badges */}
+      {skills.map((skill, index) => (
+        <motion.div
+          key={skill.name}
+          initial={{ opacity: 0, scale: 0, x: 0, y: 0 }}
+          animate={{ 
+            opacity: 1, 
+            scale: 1, 
+            x: skill.position.x, 
+            y: skill.position.y 
+          }}
+          transition={{ 
+            duration: 0.6, 
+            delay: 0.4 + index * 0.2,
+            type: "spring",
+            stiffness: 100
+          }}
+          className="absolute z-10"
+        >
+          <motion.div
+            animate={{ 
+              y: [0, -6, 0],
+              scale: [1, 1.05, 1]
+            }}
+            transition={{ 
+              duration: 3 + index * 0.5, 
+              repeat: Infinity, 
+              ease: "easeInOut",
+              delay: index * 0.8
+            }}
+            className={`w-16 h-16 bg-gradient-to-br ${skill.color} rounded-xl flex items-center justify-center shadow-lg border border-white/20`}
+          >
+            <span className="text-2xl">{skill.icon}</span>
+          </motion.div>
+          
+          {/* Skill Label */}
+          <motion.div
+            initial={{ opacity: 0 }}
+            animate={{ opacity: 1 }}
+            transition={{ duration: 0.4, delay: 0.8 + index * 0.2 }}
+            className="absolute -bottom-8 left-1/2 transform -translate-x-1/2 text-white text-xs font-manrope whitespace-nowrap"
+          >
+            {skill.name}
+          </motion.div>
+        </motion.div>
+      ))}
+
+      {/* Subtle Connecting Elements */}
+      <svg className="absolute inset-0 w-full h-full pointer-events-none opacity-20 z-15">
+        <defs>
+          <linearGradient id="connectionGradient" x1="0%" y1="0%" x2="100%" y2="0%">
+            <stop offset="0%" stopColor="#E5195E" stopOpacity="0.3" />
+            <stop offset="50%" stopColor="#3B82F6" stopOpacity="0.2" />
+            <stop offset="100%" stopColor="#8B5CF6" stopOpacity="0.3" />
+          </linearGradient>
+        </defs>
+        
+        {skills.map((skill, index) => (
+          <motion.line
+            key={`connection-${index}`}
+            x1="50%" 
+            y1="50%"
+            x2={`${50 + (skill.position.x / 4)}%`}
+            y2={`${50 + (skill.position.y / 4)}%`}
+            stroke="url(#connectionGradient)"
+            strokeWidth="1"
+            strokeDasharray="2,4"
+            initial={{ pathLength: 0, opacity: 0 }}
+            animate={{ pathLength: 1, opacity: 1 }}
+            transition={{ duration: 1.5, delay: 1 + index * 0.3 }}
+          />
+        ))}
+      </svg>
+
+      {/* Status Indicator */}
+      <motion.div
+        initial={{ opacity: 0, scale: 0 }}
+        animate={{ opacity: 1, scale: 1 }}
+        transition={{ duration: 0.5, delay: 1.8 }}
+        className="absolute top-8 right-8 z-25"
+      >
+        <div className="bg-black/30 backdrop-blur-sm rounded-lg px-3 py-2 border border-white/10">
+          <div className="flex items-center space-x-2">
+            <motion.div
+              animate={{ scale: [1, 1.2, 1] }}
+              transition={{ duration: 2, repeat: Infinity }}
+              className="w-2 h-2 bg-green-400 rounded-full"
+            ></motion.div>
+            <span className="text-green-400 text-xs font-manrope">Available</span>
+          </div>
+        </div>
+      </motion.div>
+
+      {/* Experience Level */}
+      <motion.div
+        initial={{ opacity: 0, y: 20 }}
+        animate={{ opacity: 1, y: 0 }}
+        transition={{ duration: 0.6, delay: 2 }}
+        className="absolute bottom-8 left-1/2 transform -translate-x-1/2 z-25"
+      >
+        <div className="bg-black/30 backdrop-blur-sm rounded-lg px-4 py-2 border border-white/10">
+          <div className="flex items-center space-x-3">
+            {[1, 2, 3, 4, 5].map((star, index) => (
+              <motion.div
+                key={star}
+                initial={{ scale: 0 }}
+                animate={{ scale: 1 }}
+                transition={{ duration: 0.3, delay: 2.2 + index * 0.1 }}
+                className="w-3 h-3 bg-yellow-400 rounded-full"
+              ></motion.div>
+            ))}
+            <span className="text-white text-xs font-manrope ml-2">Expert Level</span>
+          </div>
+        </div>
+      </motion.div>
+    </div>
+  );
+};

components/vectors/EngagementModelsVector.tsx

@@ -0,0 +1,200 @@
+import { motion } from "framer-motion";
+
+export const EngagementModelsVector = () => {
+  const models = [
+    { name: "Fixed Price", icon: "💰", color: "from-blue-500 to-blue-600", position: { x: 20, y: 30 } },
+    { name: "Time & Material", icon: "⏱️", color: "from-green-500 to-green-600", position: { x: 80, y: 30 } },
+    { name: "Dedicated Team", icon: "👥", color: "from-accent to-pink-600", position: { x: 50, y: 70 } }
+  ];
+
+  return (
+    <div className="relative w-full h-96 flex items-center justify-center">
+      {/* Central Business Hub */}
+      <motion.div
+        initial={{ opacity: 0, scale: 0 }}
+        animate={{ opacity: 1, scale: 1 }}
+        transition={{ duration: 0.8 }}
+        className="relative z-10"
+      >
+        <div className="w-32 h-32 bg-gradient-to-br from-gray-800 to-gray-900 rounded-2xl flex items-center justify-center shadow-2xl">
+          <div className="w-20 h-20 bg-gradient-to-br from-accent to-purple-600 rounded-xl flex items-center justify-center">
+            <svg className="w-10 h-10 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+              <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M21 13.255A23.931 23.931 0 0112 15c-3.183 0-6.22-.62-9-1.745M16 6V4a2 2 0 00-2-2h-4a2 2 0 00-2-2v2m8 0V6a2 2 0 012 2v6a2 2 0 01-2 2H6a2 2 0 01-2-2V8a2 2 0 012-2V6" />
+            </svg>
+          </div>
+        </div>
+      </motion.div>
+
+      {/* Engagement Model Options */}
+      {models.map((model, index) => (
+        <motion.div
+          key={model.name}
+          initial={{ opacity: 0, scale: 0 }}
+          animate={{ opacity: 1, scale: 1 }}
+          transition={{ duration: 0.6, delay: index * 0.2 + 0.4 }}
+          className="absolute"
+          style={{
+            left: `${model.position.x}%`,
+            top: `${model.position.y}%`,
+            transform: 'translate(-50%, -50%)'
+          }}
+        >
+          <motion.div
+            whileHover={{ scale: 1.1, y: -5 }}
+            className={`w-20 h-20 bg-gradient-to-br ${model.color} rounded-xl flex flex-col items-center justify-center shadow-lg cursor-pointer`}
+          >
+            <span className="text-2xl mb-1">{model.icon}</span>
+            <span className="text-white text-xs font-manrope text-center leading-tight">
+              {model.name.split(' ').map((word, i) => (
+                <div key={i}>{word}</div>
+              ))}
+            </span>
+          </motion.div>
+          
+          {/* Model Benefits */}
+          <motion.div
+            initial={{ opacity: 0, y: 10 }}
+            animate={{ opacity: 1, y: 0 }}
+            transition={{ duration: 0.5, delay: index * 0.2 + 1 }}
+            className="absolute -bottom-12 left-1/2 transform -translate-x-1/2 text-center"
+          >
+            <div className="text-gray-400 text-xs font-manrope">
+              {model.name === "Fixed Price" && "Predictable Cost"}
+              {model.name === "Time & Material" && "High Flexibility"}
+              {model.name === "Dedicated Team" && "Full Control"}
+            </div>
+          </motion.div>
+        </motion.div>
+      ))}
+
+      {/* Connection Lines */}
+      <svg className="absolute inset-0 w-full h-full pointer-events-none">
+        <defs>
+          <linearGradient id="engagementGradient" x1="0%" y1="0%" x2="100%" y2="100%">
+            <stop offset="0%" stopColor="#3B82F6" stopOpacity="0.6" />
+            <stop offset="50%" stopColor="#E5195E" stopOpacity="0.8" />
+            <stop offset="100%" stopColor="#8B5CF6" stopOpacity="0.6" />
+          </linearGradient>
+        </defs>
+        
+        {models.map((model, index) => (
+          <motion.line
+            key={index}
+            x1="50%"
+            y1="50%"
+            x2={`${model.position.x}%`}
+            y2={`${model.position.y}%`}
+            stroke="url(#engagementGradient)"
+            strokeWidth="2"
+            strokeDasharray="4,4"
+            initial={{ pathLength: 0, opacity: 0 }}
+            animate={{ pathLength: 1, opacity: 0.7 }}
+            transition={{ duration: 1, delay: index * 0.3 + 1.5 }}
+          />
+        ))}
+      </svg>
+
+      {/* Business Metrics */}
+      <motion.div
+        initial={{ opacity: 0, y: 20 }}
+        animate={{ opacity: 1, y: 0 }}
+        transition={{ duration: 1, delay: 2 }}
+        className="absolute top-8 left-1/2 transform -translate-x-1/2 flex space-x-6"
+      >
+        <div className="text-center">
+          <div className="text-green-400 text-lg font-manrope">95%</div>
+          <div className="text-gray-400 text-xs font-manrope">Success Rate</div>
+        </div>
+        <div className="text-center">
+          <div className="text-blue-400 text-lg font-manrope">500+</div>
+          <div className="text-gray-400 text-xs font-manrope">Projects</div>
+        </div>
+        <div className="text-center">
+          <div className="text-purple-400 text-lg font-manrope">98%</div>
+          <div className="text-gray-400 text-xs font-manrope">Satisfaction</div>
+        </div>
+      </motion.div>
+
+      {/* Project Types */}
+      <motion.div
+        initial={{ opacity: 0 }}
+        animate={{ opacity: 1 }}
+        transition={{ duration: 1, delay: 2.5 }}
+        className="absolute bottom-8 left-1/2 transform -translate-x-1/2"
+      >
+        <div className="flex space-x-3">
+          <div className="px-3 py-1 bg-blue-500/20 text-blue-300 border border-blue-500/30 rounded-full text-sm font-manrope">
+            MVP
+          </div>
+          <div className="px-3 py-1 bg-green-500/20 text-green-300 border border-green-500/30 rounded-full text-sm font-manrope">
+            Enterprise
+          </div>
+          <div className="px-3 py-1 bg-purple-500/20 text-purple-300 border border-purple-500/30 rounded-full text-sm font-manrope">
+            Scale-up
+          </div>
+        </div>
+      </motion.div>
+
+      {/* Floating Decision Factors */}
+      <motion.div
+        animate={{ y: [0, -8, 0] }}
+        transition={{ duration: 3, repeat: Infinity }}
+        className="absolute top-24 left-8 w-16 h-12 bg-gradient-to-br from-yellow-500 to-yellow-600 rounded-lg flex items-center justify-center shadow-lg"
+      >
+        <div className="text-center">
+          <div className="text-white text-xs font-manrope">Budget</div>
+          <div className="text-white text-xs font-manrope">🎯</div>
+        </div>
+      </motion.div>
+
+      <motion.div
+        animate={{ y: [0, -12, 0] }}
+        transition={{ duration: 4, repeat: Infinity, delay: 0.5 }}
+        className="absolute top-32 right-8 w-16 h-12 bg-gradient-to-br from-indigo-500 to-indigo-600 rounded-lg flex items-center justify-center shadow-lg"
+      >
+        <div className="text-center">
+          <div className="text-white text-xs font-manrope">Timeline</div>
+          <div className="text-white text-xs font-manrope">⏰</div>
+        </div>
+      </motion.div>
+
+      <motion.div
+        animate={{ y: [0, -10, 0] }}
+        transition={{ duration: 3.5, repeat: Infinity, delay: 1 }}
+        className="absolute bottom-20 left-8 w-16 h-12 bg-gradient-to-br from-teal-500 to-teal-600 rounded-lg flex items-center justify-center shadow-lg"
+      >
+        <div className="text-center">
+          <div className="text-white text-xs font-manrope">Scope</div>
+          <div className="text-white text-xs font-manrope">📋</div>
+        </div>
+      </motion.div>
+
+      {/* ROI Indicator */}
+      <motion.div
+        initial={{ opacity: 0, rotate: -45 }}
+        animate={{ opacity: 1, rotate: 0 }}
+        transition={{ duration: 0.8, delay: 3 }}
+        className="absolute bottom-16 right-8"
+      >
+        <div className="w-20 h-8 bg-gradient-to-br from-green-500 to-green-600 rounded-full flex items-center justify-center shadow-lg">
+          <span className="text-white text-sm font-manrope">ROI ↗</span>
+        </div>
+      </motion.div>
+
+      {/* Selection Process Flow */}
+      <motion.div
+        initial={{ opacity: 0 }}
+        animate={{ opacity: 1 }}
+        transition={{ duration: 1, delay: 3.5 }}
+        className="absolute bottom-24 right-16"
+      >
+        <div className="text-right space-y-1">
+          <div className="text-gray-400 text-xs font-manrope">1. Analyze Requirements</div>
+          <div className="text-gray-400 text-xs font-manrope">2. Compare Models</div>
+          <div className="text-gray-400 text-xs font-manrope">3. Select Best Fit</div>
+          <div className="text-gray-400 text-xs font-manrope">4. Start Project</div>
+        </div>
+      </motion.div>
+    </div>
+  );
+};

components/vectors/FrontendVector.tsx

@@ -0,0 +1,195 @@
+import { motion } from "framer-motion";
+
+export const FrontendVector = () => {
+  return (
+    <div className="relative w-full h-96 flex items-center justify-center">
+      {/* Browser Window */}
+      <motion.div
+        initial={{ opacity: 0, y: 30 }}
+        animate={{ opacity: 1, y: 0 }}
+        transition={{ duration: 0.8 }}
+        className="relative z-10"
+      >
+        <div className="w-80 h-56 bg-gradient-to-br from-gray-800 to-gray-900 rounded-lg shadow-2xl">
+          {/* Browser Header */}
+          <div className="h-8 bg-gray-700 rounded-t-lg flex items-center px-4 space-x-2">
+            <div className="w-3 h-3 bg-red-500 rounded-full"></div>
+            <div className="w-3 h-3 bg-yellow-500 rounded-full"></div>
+            <div className="w-3 h-3 bg-green-500 rounded-full"></div>
+            <div className="flex-1 bg-gray-600 rounded ml-4 h-4 flex items-center px-2">
+              <span className="text-gray-300 text-xs font-manrope">localhost:3000</span>
+            </div>
+          </div>
+          
+          {/* Browser Content */}
+          <div className="p-4 space-y-3">
+            {/* Navigation */}
+            <div className="flex justify-between items-center">
+              <div className="h-3 bg-gradient-to-r from-blue-500 to-purple-500 rounded w-20"></div>
+              <div className="flex space-x-2">
+                <div className="w-12 h-3 bg-gray-600 rounded"></div>
+                <div className="w-12 h-3 bg-gray-600 rounded"></div>
+                <div className="w-12 h-3 bg-accent rounded"></div>
+              </div>
+            </div>
+            
+            {/* Hero Section */}
+            <div className="space-y-2">
+              <div className="h-4 bg-white/80 rounded w-3/4"></div>
+              <div className="h-3 bg-white/60 rounded w-1/2"></div>
+              <div className="h-6 bg-gradient-to-r from-accent to-purple-500 rounded w-24 mt-2"></div>
+            </div>
+            
+            {/* Cards Grid */}
+            <div className="grid grid-cols-3 gap-2 mt-4">
+              {Array.from({ length: 6 }).map((_, i) => (
+                <motion.div
+                  key={i}
+                  initial={{ scale: 0 }}
+                  animate={{ scale: 1 }}
+                  transition={{ duration: 0.3, delay: i * 0.1 + 1 }}
+                  className="h-8 bg-gradient-to-br from-gray-600 to-gray-700 rounded"
+                />
+              ))}
+            </div>
+          </div>
+        </div>
+      </motion.div>
+
+      {/* Floating UI Components */}
+      <motion.div
+        initial={{ opacity: 0, x: -30 }}
+        animate={{ opacity: 1, x: 0 }}
+        transition={{ duration: 0.8, delay: 0.5 }}
+        className="absolute left-8 top-16"
+      >
+        <div className="space-y-3">
+          {/* Button Component */}
+          <motion.div
+            whileHover={{ scale: 1.05 }}
+            className="w-20 h-8 bg-gradient-to-r from-blue-500 to-blue-600 rounded flex items-center justify-center shadow-lg cursor-pointer"
+          >
+            <span className="text-white text-xs font-manrope">Button</span>
+          </motion.div>
+          
+          {/* Input Component */}
+          <motion.div
+            whileHover={{ scale: 1.05 }}
+            className="w-24 h-6 bg-gray-700 border border-gray-500 rounded flex items-center px-2"
+          >
+            <div className="w-2 h-2 bg-blue-400 animate-pulse"></div>
+          </motion.div>
+          
+          {/* Card Component */}
+          <motion.div
+            whileHover={{ scale: 1.05 }}
+            className="w-20 h-12 bg-gradient-to-br from-gray-700 to-gray-800 rounded shadow-lg border border-gray-600"
+          >
+            <div className="p-2 space-y-1">
+              <div className="h-1 bg-gray-400 rounded w-3/4"></div>
+              <div className="h-1 bg-gray-500 rounded w-1/2"></div>
+            </div>
+          </motion.div>
+        </div>
+      </motion.div>
+
+      {/* Floating Code Snippets */}
+      <motion.div
+        initial={{ opacity: 0, x: 30 }}
+        animate={{ opacity: 1, x: 0 }}
+        transition={{ duration: 0.8, delay: 0.7 }}
+        className="absolute right-8 top-20"
+      >
+        <div className="space-y-3">
+          {/* JSX Code */}
+          <div className="w-28 h-10 bg-gray-800 rounded border border-gray-600 p-2">
+            <div className="space-y-1">
+              <div className="flex items-center space-x-1">
+                <div className="text-purple-400 text-xs font-manrope">&lt;</div>
+                <div className="text-blue-400 text-xs font-manrope">div</div>
+                <div className="text-purple-400 text-xs font-manrope">&gt;</div>
+              </div>
+              <div className="h-1 bg-green-400 rounded w-2/3 ml-2"></div>
+            </div>
+          </div>
+          
+          {/* CSS Code */}
+          <div className="w-24 h-8 bg-gray-800 rounded border border-gray-600 p-1.5">
+            <div className="space-y-0.5">
+              <div className="text-orange-400 text-xs font-manrope">.btn</div>
+              <div className="h-0.5 bg-blue-400 rounded w-1/2 ml-2"></div>
+            </div>
+          </div>
+        </div>
+      </motion.div>
+
+      {/* Technology Icons */}
+      <motion.div
+        animate={{ y: [0, -10, 0] }}
+        transition={{ duration: 3, repeat: Infinity }}
+        className="absolute bottom-16 left-16 w-12 h-12 bg-gradient-to-br from-cyan-500 to-cyan-600 rounded-xl flex items-center justify-center shadow-lg"
+      >
+        <span className="text-white text-lg font-manrope">⚛️</span>
+      </motion.div>
+
+      <motion.div
+        animate={{ y: [0, -15, 0] }}
+        transition={{ duration: 4, repeat: Infinity, delay: 0.5 }}
+        className="absolute bottom-20 right-20 w-10 h-10 bg-gradient-to-br from-green-500 to-green-600 rounded-lg flex items-center justify-center shadow-lg"
+      >
+        <span className="text-white text-sm font-manrope">V</span>
+      </motion.div>
+
+      <motion.div
+        animate={{ y: [0, -12, 0] }}
+        transition={{ duration: 3.5, repeat: Infinity, delay: 1 }}
+        className="absolute top-12 right-32 w-11 h-11 bg-gradient-to-br from-red-500 to-red-600 rounded-lg flex items-center justify-center shadow-lg"
+      >
+        <span className="text-white text-sm font-manrope">A</span>
+      </motion.div>
+
+      {/* Responsive Design Indicators */}
+      <motion.div
+        initial={{ opacity: 0 }}
+        animate={{ opacity: 1 }}
+        transition={{ duration: 1, delay: 1.5 }}
+        className="absolute bottom-8 left-1/2 transform -translate-x-1/2 flex space-x-3"
+      >
+        <div className="flex items-center space-x-1">
+          <div className="w-4 h-3 bg-blue-500 rounded-sm"></div>
+          <span className="text-gray-400 text-xs font-manrope">Desktop</span>
+        </div>
+        <div className="flex items-center space-x-1">
+          <div className="w-3 h-4 bg-green-500 rounded-sm"></div>
+          <span className="text-gray-400 text-xs font-manrope">Tablet</span>
+        </div>
+        <div className="flex items-center space-x-1">
+          <div className="w-2 h-4 bg-purple-500 rounded-sm"></div>
+          <span className="text-gray-400 text-xs font-manrope">Mobile</span>
+        </div>
+      </motion.div>
+
+      {/* Interactive Elements */}
+      <svg className="absolute inset-0 w-full h-full pointer-events-none opacity-30">
+        <defs>
+          <radialGradient id="frontendGradient" cx="50%" cy="50%" r="50%">
+            <stop offset="0%" stopColor="#3B82F6" stopOpacity="0.6" />
+            <stop offset="50%" stopColor="#E5195E" stopOpacity="0.4" />
+            <stop offset="100%" stopColor="#8B5CF6" stopOpacity="0.6" />
+          </radialGradient>
+        </defs>
+        
+        <motion.circle
+          cx="50%" cy="50%" r="100"
+          stroke="url(#frontendGradient)"
+          strokeWidth="2"
+          fill="none"
+          strokeDasharray="8,8"
+          initial={{ rotate: 0 }}
+          animate={{ rotate: 360 }}
+          transition={{ duration: 20, repeat: Infinity, ease: "linear" }}
+        />
+      </svg>
+    </div>
+  );
+};

components/vectors/FullStackVector.tsx

@@ -0,0 +1,237 @@
+import { motion } from "framer-motion";
+
+export const FullStackVector = () => {
+  return (
+    <div className="relative w-full h-96 flex items-center justify-center overflow-hidden font-manrope">
+      {/* Subtle Background */}
+      <div className="absolute inset-0 opacity-5">
+        <svg className="w-full h-full" viewBox="0 0 400 400" fill="none">
+          <defs>
+            <radialGradient id="bgGradient" cx="50%" cy="50%" r="30%">
+              <stop offset="0%" stopColor="#E5195E" stopOpacity="0.04" />
+              <stop offset="100%" stopColor="#3B82F6" stopOpacity="0.02" />
+            </radialGradient>
+          </defs>
+          <circle cx="200" cy="200" r="80" fill="url(#bgGradient)" />
+        </svg>
+      </div>
+
+      <div className="relative z-20 flex items-center justify-center space-x-12">
+        {/* Database Component */}
+        <motion.div
+          initial={{ opacity: 0, x: -40 }}
+          animate={{ opacity: 1, x: 0 }}
+          transition={{ duration: 0.8, delay: 0.2 }}
+          className="flex flex-col items-center"
+        >
+          {/* Database Icon */}
+          <div className="relative">
+            <motion.div
+              animate={{ y: [0, -4, 0] }}
+              transition={{ duration: 3, repeat: Infinity }}
+              className="w-16 h-20 bg-gradient-to-b from-blue-600 to-blue-800 rounded-lg flex flex-col justify-between p-2 shadow-lg border border-blue-500/20"
+            >
+              {/* Database layers */}
+              <div className="w-full h-2 bg-blue-400/30 rounded-full"></div>
+              <div className="w-full h-2 bg-blue-400/30 rounded-full"></div>
+              <div className="w-full h-2 bg-blue-400/30 rounded-full"></div>
+              <div className="w-full h-2 bg-blue-400/30 rounded-full"></div>
+            </motion.div>
+            
+            {/* Database Label */}
+            <motion.div
+              initial={{ opacity: 0 }}
+              animate={{ opacity: 1 }}
+              transition={{ duration: 0.5, delay: 0.8 }}
+              className="absolute -bottom-8 left-1/2 transform -translate-x-1/2 text-xs text-white font-manrope whitespace-nowrap"
+            >
+              Database
+            </motion.div>
+          </div>
+        </motion.div>
+
+        {/* Server Stack */}
+        <motion.div
+          initial={{ opacity: 0, y: 30 }}
+          animate={{ opacity: 1, y: 0 }}
+          transition={{ duration: 0.8, delay: 0.4 }}
+          className="flex flex-col items-center"
+        >
+          {/* Server Stack */}
+          <div className="relative">
+            <div className="flex flex-col space-y-1">
+              {Array.from({ length: 4 }).map((_, i) => (
+                <motion.div
+                  key={i}
+                  initial={{ opacity: 0, scale: 0.8 }}
+                  animate={{ opacity: 1, scale: 1 }}
+                  transition={{ duration: 0.4, delay: 0.6 + i * 0.1 }}
+                  className="relative"
+                >
+                  <div className="w-20 h-6 bg-gradient-to-r from-green-600 to-green-700 rounded flex items-center justify-between px-2 border border-green-500/20">
+                    {/* Server indicator */}
+                    <motion.div
+                      animate={{ scale: [1, 1.2, 1] }}
+                      transition={{ duration: 2, repeat: Infinity, delay: i * 0.5 }}
+                      className="w-2 h-2 bg-green-400 rounded-full"
+                    ></motion.div>
+                    
+                    {/* Server number */}
+                    <span className="text-xs text-white font-manrope">#{i + 1}</span>
+                  </div>
+                </motion.div>
+              ))}
+            </div>
+            
+            {/* API Label */}
+            <motion.div
+              initial={{ opacity: 0 }}
+              animate={{ opacity: 1 }}
+              transition={{ duration: 0.5, delay: 1.2 }}
+              className="absolute -bottom-8 left-1/2 transform -translate-x-1/2 text-xs text-white font-manrope whitespace-nowrap"
+            >
+              API Server
+            </motion.div>
+          </div>
+        </motion.div>
+
+        {/* Gateway Component */}
+        <motion.div
+          initial={{ opacity: 0, x: 40 }}
+          animate={{ opacity: 1, x: 0 }}
+          transition={{ duration: 0.8, delay: 0.6 }}
+          className="flex flex-col items-center"
+        >
+          {/* Gateway Icon */}
+          <div className="relative">
+            <motion.div
+              animate={{ rotate: [0, 360] }}
+              transition={{ duration: 20, repeat: Infinity, ease: "linear" }}
+              className="w-16 h-16 bg-gradient-to-br from-purple-600 to-purple-800 rounded-xl flex items-center justify-center shadow-lg border border-purple-500/20"
+            >
+              <motion.div
+                animate={{ scale: [1, 1.1, 1] }}
+                transition={{ duration: 2, repeat: Infinity }}
+                className="text-white text-lg font-manrope"
+              >
+                ⚡
+              </motion.div>
+            </motion.div>
+            
+            {/* Gateway Label */}
+            <motion.div
+              initial={{ opacity: 0 }}
+              animate={{ opacity: 1 }}
+              transition={{ duration: 0.5, delay: 1.0 }}
+              className="absolute -bottom-8 left-1/2 transform -translate-x-1/2 text-xs text-white font-manrope whitespace-nowrap"
+            >
+              Gateway
+            </motion.div>
+          </div>
+        </motion.div>
+      </div>
+
+      {/* Connection Lines */}
+      <svg className="absolute inset-0 w-full h-full pointer-events-none opacity-20 z-15">
+        <defs>
+          <linearGradient id="connectionGradient" x1="0%" y1="0%" x2="100%" y2="0%">
+            <stop offset="0%" stopColor="#3B82F6" stopOpacity="0.4" />
+            <stop offset="50%" stopColor="#E5195E" stopOpacity="0.3" />
+            <stop offset="100%" stopColor="#8B5CF6" stopOpacity="0.4" />
+          </linearGradient>
+        </defs>
+        
+        <motion.line
+          x1="35%" y1="50%" x2="60%" y2="50%"
+          stroke="url(#connectionGradient)"
+          strokeWidth="2"
+          strokeDasharray="3,3"
+          initial={{ pathLength: 0 }}
+          animate={{ pathLength: 1 }}
+          transition={{ duration: 2, repeat: Infinity, repeatType: "reverse" }}
+        />
+        
+        <motion.line
+          x1="60%" y1="50%" x2="85%" y2="50%"
+          stroke="url(#connectionGradient)"
+          strokeWidth="2"
+          strokeDasharray="3,3"
+          initial={{ pathLength: 0 }}
+          animate={{ pathLength: 1 }}
+          transition={{ duration: 2, repeat: Infinity, repeatType: "reverse", delay: 0.5 }}
+        />
+      </svg>
+
+      {/* Performance Metrics */}
+      <motion.div
+        initial={{ opacity: 0, y: 20 }}
+        animate={{ opacity: 1, y: 0 }}
+        transition={{ duration: 0.6, delay: 1.4 }}
+        className="absolute top-8 right-8 z-25"
+      >
+        <div className="bg-black/30 backdrop-blur-sm rounded-lg p-3 border border-white/10">
+          <div className="space-y-2">
+            <div className="flex items-center space-x-2">
+              <motion.div
+                animate={{ scale: [1, 1.2, 1] }}
+                transition={{ duration: 2, repeat: Infinity }}
+                className="w-2 h-2 bg-green-400 rounded-full"
+              ></motion.div>
+              <span className="text-green-400 text-xs font-manrope">99.9% Uptime</span>
+            </div>
+            <div className="flex items-center space-x-2">
+              <motion.div
+                animate={{ scale: [1, 1.2, 1] }}
+                transition={{ duration: 2, repeat: Infinity, delay: 0.5 }}
+                className="w-2 h-2 bg-blue-400 rounded-full"
+              ></motion.div>
+              <span className="text-blue-400 text-xs font-manrope">50ms Response</span>
+            </div>
+          </div>
+        </div>
+      </motion.div>
+
+      {/* Technology Stack */}
+      <motion.div
+        initial={{ opacity: 0, y: 20 }}
+        animate={{ opacity: 1, y: 0 }}
+        transition={{ duration: 0.6, delay: 1.6 }}
+        className="absolute bottom-8 left-8 z-25"
+      >
+        <div className="bg-black/30 backdrop-blur-sm rounded-lg p-2 border border-white/10">
+          <div className="flex space-x-2">
+            {[
+              { name: "Node.js", color: "bg-green-600" },
+              { name: "SQL", color: "bg-blue-600" },
+              { name: "Redis", color: "bg-red-600" }
+            ].map((tech, index) => (
+              <motion.div
+                key={tech.name}
+                initial={{ scale: 0 }}
+                animate={{ scale: 1 }}
+                transition={{ duration: 0.3, delay: 1.8 + index * 0.1 }}
+                className={`px-2 py-1 ${tech.color}/20 border border-white/10 rounded text-xs text-white font-manrope`}
+              >
+                {tech.name}
+              </motion.div>
+            ))}
+          </div>
+        </div>
+      </motion.div>
+
+      {/* Data Flow Indicator */}
+      <motion.div
+        initial={{ opacity: 0, scale: 0 }}
+        animate={{ opacity: 1, scale: 1 }}
+        transition={{ duration: 0.5, delay: 2 }}
+        className="absolute bottom-8 right-8 z-25"
+      >
+        <motion.div
+          animate={{ rotate: [0, 360] }}
+          transition={{ duration: 8, repeat: Infinity, ease: "linear" }}
+          className="w-8 h-8 border-2 border-gray-600 border-t-accent rounded-full"
+        ></motion.div>
+      </motion.div>
+    </div>
+  );
+};

components/vectors/MobileAppVector.tsx

@@ -0,0 +1,232 @@
+import { motion } from "framer-motion";
+
+export const MobileAppVector = () => {
+  return (
+    <div className="relative w-full h-96 flex items-center justify-center overflow-hidden">
+      {/* Subtle Background */}
+      <div className="absolute inset-0 opacity-10">
+        <svg className="w-full h-full" viewBox="0 0 400 400" fill="none">
+          <defs>
+            <radialGradient id="bgGradient" cx="50%" cy="50%" r="40%">
+              <stop offset="0%" stopColor="#E5195E" stopOpacity="0.08" />
+              <stop offset="100%" stopColor="#3B82F6" stopOpacity="0.04" />
+            </radialGradient>
+          </defs>
+          <circle cx="200" cy="200" r="120" fill="url(#bgGradient)" />
+        </svg>
+      </div>
+
+      {/* Main iPhone Device */}
+      <motion.div
+        initial={{ opacity: 0, y: 30 }}
+        animate={{ opacity: 1, y: 0 }}
+        transition={{ duration: 0.8, delay: 0.2 }}
+        className="relative z-20"
+      >
+        <div className="relative">
+          {/* iPhone Frame */}
+          <div className="w-40 h-72 bg-gradient-to-br from-gray-800 to-gray-900 rounded-[2rem] p-1.5 shadow-2xl">
+            {/* Screen */}
+            <div className="w-full h-full bg-black rounded-[1.5rem] relative overflow-hidden">
+              {/* Dynamic Island */}
+              <div className="absolute top-2 left-1/2 transform -translate-x-1/2 w-20 h-5 bg-black rounded-full z-30"></div>
+              
+              {/* App Interface */}
+              <div className="absolute inset-0 bg-gradient-to-br from-blue-600 to-purple-700 rounded-[1.5rem]">
+                {/* Status Bar */}
+                <div className="flex justify-between items-center px-4 pt-8 pb-3">
+                  <div className="text-white text-xs font-manrope">9:41</div>
+                  <div className="flex space-x-1">
+                    <div className="w-3 h-1.5 bg-white/80 rounded-sm"></div>
+                    <div className="w-3 h-1.5 bg-white/60 rounded-sm"></div>
+                  </div>
+                </div>
+                
+                {/* App Content */}
+                <div className="px-4 space-y-3">
+                  {/* Header */}
+                  <div className="text-center">
+                    <div className="h-3 bg-white/90 rounded w-24 mx-auto mb-2"></div>
+                    <div className="h-2 bg-white/70 rounded w-32 mx-auto"></div>
+                  </div>
+                  
+                  {/* Feature Cards */}
+                  <div className="space-y-2.5">
+                    {Array.from({ length: 3 }).map((_, i) => (
+                      <motion.div
+                        key={i}
+                        initial={{ x: -15, opacity: 0 }}
+                        animate={{ x: 0, opacity: 1 }}
+                        transition={{ duration: 0.4, delay: 0.6 + i * 0.1 }}
+                        className="bg-white/15 backdrop-blur-sm rounded-lg p-2.5 border border-white/20"
+                      >
+                        <div className="flex items-center space-x-2">
+                          <div className="w-6 h-6 bg-white/30 rounded-md"></div>
+                          <div className="flex-1">
+                            <div className={`h-1.5 bg-white/70 rounded mb-1 ${i === 0 ? 'w-20' : i === 1 ? 'w-16' : 'w-18'}`}></div>
+                            <div className={`h-1 bg-white/50 rounded ${i === 0 ? 'w-12' : i === 1 ? 'w-14' : 'w-10'}`}></div>
+                          </div>
+                          <motion.div
+                            animate={{ scale: [1, 1.1, 1] }}
+                            transition={{ duration: 2, repeat: Infinity, delay: i * 0.7 }}
+                            className="w-4 h-4 bg-white/40 rounded-full"
+                          ></motion.div>
+                        </div>
+                      </motion.div>
+                    ))}
+                  </div>
+                  
+                  {/* Bottom Navigation */}
+                  <div className="absolute bottom-6 left-4 right-4">
+                    <div className="bg-white/10 backdrop-blur-sm rounded-xl p-2 border border-white/20">
+                      <div className="flex justify-around">
+                        {Array.from({ length: 4 }).map((_, i) => (
+                          <motion.div
+                            key={i}
+                            animate={{ 
+                              backgroundColor: i === 1 ? "rgba(255,255,255,0.6)" : "rgba(255,255,255,0.2)",
+                            }}
+                            transition={{ duration: 0.3 }}
+                            className="w-6 h-6 rounded-lg flex items-center justify-center"
+                          >
+                            <div className="w-3 h-3 bg-white/70 rounded"></div>
+                          </motion.div>
+                        ))}
+                      </div>
+                    </div>
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </motion.div>
+
+      {/* React Native Icon */}
+      <motion.div
+        initial={{ opacity: 0, scale: 0 }}
+        animate={{ opacity: 1, scale: 1 }}
+        transition={{ duration: 0.5, delay: 1 }}
+        className="absolute top-16 left-24 z-25"
+      >
+        <motion.div
+          animate={{ y: [0, -6, 0] }}
+          transition={{ duration: 2.5, repeat: Infinity }}
+          className="w-12 h-12 bg-gradient-to-br from-blue-500 to-cyan-500 rounded-xl flex items-center justify-center shadow-lg border border-white/20"
+        >
+          <span className="text-white text-sm font-manrope">⚛️</span>
+        </motion.div>
+      </motion.div>
+
+      {/* Code Window */}
+      <motion.div
+        initial={{ opacity: 0, x: 20 }}
+        animate={{ opacity: 1, x: 0 }}
+        transition={{ duration: 0.6, delay: 1.2 }}
+        className="absolute top-20 right-16 z-25"
+      >
+        <div className="bg-gray-900/80 backdrop-blur-sm rounded-lg p-2 border border-gray-700 shadow-lg w-24">
+          <div className="flex items-center space-x-1 mb-1">
+            <div className="w-1.5 h-1.5 bg-red-500 rounded-full"></div>
+            <div className="w-1.5 h-1.5 bg-yellow-500 rounded-full"></div>
+            <div className="w-1.5 h-1.5 bg-green-500 rounded-full"></div>
+          </div>
+          <div className="space-y-1">
+            <motion.div
+              initial={{ width: 0 }}
+              animate={{ width: "70%" }}
+              transition={{ duration: 0.8, delay: 1.5 }}
+              className="h-0.5 bg-blue-400 rounded"
+            ></motion.div>
+            <motion.div
+              initial={{ width: 0 }}
+              animate={{ width: "50%" }}
+              transition={{ duration: 0.8, delay: 1.7 }}
+              className="h-0.5 bg-green-400 rounded"
+            ></motion.div>
+            <motion.div
+              initial={{ width: 0 }}
+              animate={{ width: "80%" }}
+              transition={{ duration: 0.8, delay: 1.9 }}
+              className="h-0.5 bg-purple-400 rounded"
+            ></motion.div>
+          </div>
+        </div>
+      </motion.div>
+
+      {/* App Store & Google Play */}
+      <motion.div
+        initial={{ opacity: 0, y: 15 }}
+        animate={{ opacity: 1, y: 0 }}
+        transition={{ duration: 0.6, delay: 1.4 }}
+        className="absolute bottom-12 left-20 z-25"
+      >
+        <div className="flex space-x-2">
+          <motion.div
+            whileHover={{ scale: 1.05 }}
+            animate={{ rotate: [0, 2, -2, 0] }}
+            transition={{ duration: 4, repeat: Infinity }}
+            className="w-10 h-10 bg-gradient-to-br from-blue-600 to-blue-700 rounded-lg flex items-center justify-center shadow-lg"
+          >
+            <span className="text-white text-sm font-manrope">📱</span>
+          </motion.div>
+          
+          <motion.div
+            whileHover={{ scale: 1.05 }}
+            animate={{ rotate: [0, -2, 2, 0] }}
+            transition={{ duration: 4, repeat: Infinity, delay: 2 }}
+            className="w-10 h-10 bg-gradient-to-br from-green-600 to-green-700 rounded-lg flex items-center justify-center shadow-lg"
+          >
+            <span className="text-white text-sm font-manrope">🤖</span>
+          </motion.div>
+        </div>
+      </motion.div>
+
+      {/* Technology Labels */}
+      <motion.div
+        initial={{ opacity: 0 }}
+        animate={{ opacity: 1 }}
+        transition={{ duration: 0.8, delay: 2 }}
+        className="absolute bottom-4 left-1/2 transform -translate-x-1/2 flex space-x-2 z-30"
+      >
+        {[
+          { name: "iOS", color: "from-blue-500 to-blue-600" },
+          { name: "Android", color: "from-green-500 to-green-600" },
+          { name: "React Native", color: "from-cyan-500 to-cyan-600" }
+        ].map((tech, index) => (
+          <motion.div
+            key={tech.name}
+            initial={{ scale: 0 }}
+            animate={{ scale: 1 }}
+            transition={{ duration: 0.3, delay: 2.2 + index * 0.1 }}
+            whileHover={{ scale: 1.05 }}
+            className={`px-2 py-1 bg-gradient-to-r ${tech.color} bg-opacity-20 text-white border border-white/20 rounded-full text-xs font-manrope backdrop-blur-sm`}
+          >
+            {tech.name}
+          </motion.div>
+        ))}
+      </motion.div>
+
+      {/* Subtle Connecting Line */}
+      <svg className="absolute inset-0 w-full h-full pointer-events-none opacity-20 z-5">
+        <defs>
+          <linearGradient id="connectionGradient" x1="0%" y1="0%" x2="100%" y2="100%">
+            <stop offset="0%" stopColor="#E5195E" stopOpacity="0.4" />
+            <stop offset="100%" stopColor="#3B82F6" stopOpacity="0.4" />
+          </linearGradient>
+        </defs>
+        
+        <motion.path
+          d="M 30% 40% Q 50% 30% 70% 50%"
+          stroke="url(#connectionGradient)"
+          strokeWidth="1"
+          fill="none"
+          strokeDasharray="3,3"
+          initial={{ pathLength: 0 }}
+          animate={{ pathLength: 1 }}
+          transition={{ duration: 2, repeat: Infinity, repeatType: "reverse", delay: 2.5 }}
+        />
+      </svg>
+    </div>
+  );
+};

components/vectors/ProjectTimelineVector.tsx

@@ -0,0 +1,103 @@
+import { motion } from "framer-motion";
+
+export const ProjectTimelineVector = () => {
+  const phases = [
+    { name: "Planning", icon: "📋", color: "from-blue-500 to-blue-600", duration: "Week 1-2" },
+    { name: "Design", icon: "🎨", color: "from-purple-500 to-purple-600", duration: "Week 3-4" },
+    { name: "Development", icon: "⚡", color: "from-green-500 to-green-600", duration: "Week 5-12" },
+    { name: "Testing", icon: "🔍", color: "from-orange-500 to-orange-600", duration: "Week 13-14" },
+    { name: "Launch", icon: "🚀", color: "from-red-500 to-red-600", duration: "Week 15-16" }
+  ];
+
+  return (
+    <div className="relative w-full h-80 bg-gradient-to-br from-gray-900/50 to-gray-800/50 rounded-2xl border border-white/10 p-8">
+      {/* Timeline Line */}
+      <div className="absolute left-8 top-16 bottom-16 w-1 bg-gradient-to-b from-accent to-purple-600"></div>
+
+      {/* Project Phases */}
+      <div className="space-y-8 ml-12">
+        {phases.map((phase, index) => (
+          <motion.div
+            key={phase.name}
+            initial={{ opacity: 0, x: -30 }}
+            animate={{ opacity: 1, x: 0 }}
+            transition={{ duration: 0.6, delay: index * 0.2 }}
+            className="relative flex items-center space-x-4"
+          >
+            {/* Timeline Dot */}
+            <motion.div
+              initial={{ scale: 0 }}
+              animate={{ scale: 1 }}
+              transition={{ duration: 0.4, delay: index * 0.2 + 0.3 }}
+              className={`absolute -left-16 w-4 h-4 bg-gradient-to-br ${phase.color} rounded-full border-2 border-white shadow-lg`}
+            />
+
+            {/* Phase Card */}
+            <motion.div
+              whileHover={{ scale: 1.02, y: -2 }}
+              className="flex-1 bg-white/5 border border-white/10 rounded-lg p-4 backdrop-blur-sm hover:bg-white/10 transition-all duration-300"
+            >
+              <div className="flex items-center justify-between">
+                <div className="flex items-center space-x-3">
+                  <span className="text-2xl">{phase.icon}</span>
+                  <div>
+                    <h3 className="text-white font-semibold font-manrope">{phase.name}</h3>
+                    <p className="text-white/60 text-sm font-manrope">{phase.duration}</p>
+                  </div>
+                </div>
+                
+                {/* Progress Indicator */}
+                <motion.div
+                  initial={{ width: 0 }}
+                  animate={{ width: "100%" }}
+                  transition={{ duration: 1, delay: index * 0.3 + 1 }}
+                  className="w-16 h-2 bg-gray-700 rounded-full overflow-hidden"
+                >
+                  <motion.div
+                    initial={{ width: 0 }}
+                    animate={{ width: `${(index + 1) * 20}%` }}
+                    transition={{ duration: 1, delay: index * 0.3 + 1.5 }}
+                    className={`h-full bg-gradient-to-r ${phase.color} rounded-full`}
+                  />
+                </motion.div>
+              </div>
+            </motion.div>
+
+            {/* Connecting Arrow */}
+            {index < phases.length - 1 && (
+              <motion.div
+                initial={{ opacity: 0, scale: 0 }}
+                animate={{ opacity: 1, scale: 1 }}
+                transition={{ duration: 0.4, delay: index * 0.2 + 0.8 }}
+                className="absolute -bottom-4 left-8 text-white/40"
+              >
+                <svg className="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                  <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M19 14l-7 7m0 0l-7-7m7 7V3" />
+                </svg>
+              </motion.div>
+            )}
+          </motion.div>
+        ))}
+      </div>
+
+      {/* Success Metrics */}
+      <motion.div
+        initial={{ opacity: 0, y: 20 }}
+        animate={{ opacity: 1, y: 0 }}
+        transition={{ duration: 0.8, delay: 2 }}
+        className="absolute bottom-4 right-4 flex space-x-4"
+      >
+        {[
+          { label: "On Time", value: "95%", color: "text-green-400" },
+          { label: "Quality", value: "5★", color: "text-yellow-400" },
+          { label: "Satisfaction", value: "98%", color: "text-blue-400" }
+        ].map((metric, index) => (
+          <div key={metric.label} className="text-center">
+            <div className={`text-lg font-bold ${metric.color} font-manrope`}>{metric.value}</div>
+            <div className="text-white/60 text-xs font-manrope">{metric.label}</div>
+          </div>
+        ))}
+      </motion.div>
+    </div>
+  );
+};

components/vectors/QATestingVector.tsx

@@ -0,0 +1,249 @@
+import { motion } from "framer-motion";
+
+export const QATestingVector = () => {
+  return (
+    <div className="relative w-full h-96 flex items-center justify-center">
+      {/* Testing Dashboard */}
+      <motion.div
+        initial={{ opacity: 0, y: 30 }}
+        animate={{ opacity: 1, y: 0 }}
+        transition={{ duration: 0.8 }}
+        className="relative z-10"
+      >
+        <div className="w-72 h-48 bg-gradient-to-br from-gray-800 to-gray-900 rounded-lg shadow-2xl p-4">
+          {/* Header */}
+          <div className="flex justify-between items-center mb-4">
+            <div className="text-white font-semibold font-manrope">Test Results</div>
+            <div className="flex space-x-1">
+              <div className="w-2 h-2 bg-green-500 rounded-full animate-pulse"></div>
+              <div className="text-green-400 text-xs font-manrope">Running</div>
+            </div>
+          </div>
+          
+          {/* Test Cases */}
+          <div className="space-y-2">
+            {[
+              { name: "Login Flow", status: "passed", color: "green" },
+              { name: "Payment Gateway", status: "passed", color: "green" },
+              { name: "User Registration", status: "running", color: "yellow" },
+              { name: "API Validation", status: "passed", color: "green" },
+              { name: "Mobile Responsive", status: "failed", color: "red" }
+            ].map((test, index) => (
+              <motion.div
+                key={test.name}
+                initial={{ opacity: 0, x: -20 }}
+                animate={{ opacity: 1, x: 0 }}
+                transition={{ duration: 0.5, delay: index * 0.1 + 0.3 }}
+                className="flex items-center justify-between p-2 bg-gray-700 rounded"
+              >
+                <div className="flex items-center space-x-2">
+                  <motion.div
+                    animate={test.status === "running" ? { rotate: 360 } : {}}
+                    transition={{ duration: 2, repeat: Infinity, ease: "linear" }}
+                    className={`w-3 h-3 rounded-full ${
+                      test.color === "green" ? "bg-green-500" :
+                      test.color === "yellow" ? "bg-yellow-500" : "bg-red-500"
+                    }`}
+                  />
+                  <span className="text-white text-sm font-manrope">{test.name}</span>
+                </div>
+                <span className={`text-xs font-manrope ${
+                  test.color === "green" ? "text-green-400" :
+                  test.color === "yellow" ? "text-yellow-400" : "text-red-400"
+                }`}>
+                  {test.status}
+                </span>
+              </motion.div>
+            ))}
+          </div>
+          
+          {/* Statistics */}
+          <div className="flex justify-between mt-4 pt-3 border-t border-gray-600">
+            <div className="text-center">
+              <div className="text-green-400 font-bold font-manrope">85%</div>
+              <div className="text-gray-400 text-xs font-manrope">Passed</div>
+            </div>
+            <div className="text-center">
+              <div className="text-yellow-400 font-bold font-manrope">10%</div>
+              <div className="text-gray-400 text-xs font-manrope">Running</div>
+            </div>
+            <div className="text-center">
+              <div className="text-red-400 font-bold font-manrope">5%</div>
+              <div className="text-gray-400 text-xs font-manrope">Failed</div>
+            </div>
+          </div>
+        </div>
+      </motion.div>
+
+      {/* Testing Tools */}
+      <motion.div
+        initial={{ opacity: 0, x: -50 }}
+        animate={{ opacity: 1, x: 0 }}
+        transition={{ duration: 0.8, delay: 0.4 }}
+        className="absolute left-8 top-1/2 transform -translate-y-1/2"
+      >
+        <div className="space-y-3">
+          {/* Selenium */}
+          <motion.div
+            whileHover={{ scale: 1.1 }}
+            className="w-14 h-14 bg-gradient-to-br from-green-500 to-green-600 rounded-xl flex items-center justify-center shadow-lg cursor-pointer"
+          >
+            <span className="text-white text-xs font-manrope">Selenium</span>
+          </motion.div>
+          
+          {/* Cypress */}
+          <motion.div
+            whileHover={{ scale: 1.1 }}
+            className="w-14 h-14 bg-gradient-to-br from-gray-600 to-gray-700 rounded-xl flex items-center justify-center shadow-lg cursor-pointer"
+          >
+            <span className="text-white text-xs font-manrope">Cypress</span>
+          </motion.div>
+          
+          {/* Jest */}
+          <motion.div
+            whileHover={{ scale: 1.1 }}
+            className="w-14 h-14 bg-gradient-to-br from-red-500 to-red-600 rounded-xl flex items-center justify-center shadow-lg cursor-pointer"
+          >
+            <span className="text-white text-xs font-manrope">Jest</span>
+          </motion.div>
+        </div>
+      </motion.div>
+
+      {/* Bug Tracking */}
+      <motion.div
+        initial={{ opacity: 0, x: 50 }}
+        animate={{ opacity: 1, x: 0 }}
+        transition={{ duration: 0.8, delay: 0.6 }}
+        className="absolute right-8 top-16"
+      >
+        <div className="w-24 h-32 bg-gradient-to-br from-red-600 to-red-800 rounded-lg p-3 shadow-lg">
+          <div className="text-white text-sm font-manrope mb-2">Bug Report</div>
+          <div className="space-y-2">
+            <div className="flex items-center space-x-1">
+              <div className="w-2 h-2 bg-red-400 rounded-full"></div>
+              <span className="text-red-200 text-xs font-manrope">#001</span>
+            </div>
+            <div className="flex items-center space-x-1">
+              <div className="w-2 h-2 bg-yellow-400 rounded-full"></div>
+              <span className="text-yellow-200 text-xs font-manrope">#002</span>
+            </div>
+            <div className="flex items-center space-x-1">
+              <div className="w-2 h-2 bg-green-400 rounded-full"></div>
+              <span className="text-green-200 text-xs font-manrope">#003</span>
+            </div>
+          </div>
+        </div>
+      </motion.div>
+
+      {/* Performance Metrics */}
+      <motion.div
+        initial={{ opacity: 0, y: 50 }}
+        animate={{ opacity: 1, y: 0 }}
+        transition={{ duration: 0.8, delay: 0.8 }}
+        className="absolute bottom-16 left-1/2 transform -translate-x-1/2"
+      >
+        <div className="flex space-x-6">
+          {/* Load Time */}
+          <div className="text-center">
+            <motion.div
+              initial={{ scale: 0 }}
+              animate={{ scale: 1 }}
+              transition={{ duration: 0.5, delay: 1.2 }}
+              className="w-16 h-16 bg-gradient-to-br from-blue-500 to-blue-600 rounded-full flex items-center justify-center mb-2"
+            >
+              <span className="text-white text-xs font-manrope">1.2s</span>
+            </motion.div>
+            <div className="text-gray-400 text-xs font-manrope">Load Time</div>
+          </div>
+          
+          {/* Coverage */}
+          <div className="text-center">
+            <motion.div
+              initial={{ scale: 0 }}
+              animate={{ scale: 1 }}
+              transition={{ duration: 0.5, delay: 1.4 }}
+              className="w-16 h-16 bg-gradient-to-br from-green-500 to-green-600 rounded-full flex items-center justify-center mb-2"
+            >
+              <span className="text-white text-xs font-manrope">95%</span>
+            </motion.div>
+            <div className="text-gray-400 text-xs font-manrope">Coverage</div>
+          </div>
+          
+          {/* Success Rate */}
+          <div className="text-center">
+            <motion.div
+              initial={{ scale: 0 }}
+              animate={{ scale: 1 }}
+              transition={{ duration: 0.5, delay: 1.6 }}
+              className="w-16 h-16 bg-gradient-to-br from-purple-500 to-purple-600 rounded-full flex items-center justify-center mb-2"
+            >
+              <span className="text-white text-xs font-manrope">99.2%</span>
+            </motion.div>
+            <div className="text-gray-400 text-xs font-manrope">Success</div>
+          </div>
+        </div>
+      </motion.div>
+
+      {/* Floating Test Icons */}
+      <motion.div
+        animate={{ y: [0, -10, 0] }}
+        transition={{ duration: 3, repeat: Infinity }}
+        className="absolute top-20 left-20 w-10 h-10 bg-gradient-to-br from-cyan-500 to-cyan-600 rounded-lg flex items-center justify-center shadow-lg"
+      >
+        <svg className="w-5 h-5 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+          <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z" />
+        </svg>
+      </motion.div>
+
+      <motion.div
+        animate={{ y: [0, -15, 0] }}
+        transition={{ duration: 4, repeat: Infinity, delay: 0.5 }}
+        className="absolute top-32 right-24 w-8 h-8 bg-gradient-to-br from-orange-500 to-orange-600 rounded-lg flex items-center justify-center shadow-lg"
+      >
+        <svg className="w-4 h-4 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+          <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z" />
+        </svg>
+      </motion.div>
+
+      {/* Test Automation Flow */}
+      <svg className="absolute inset-0 w-full h-full pointer-events-none opacity-30">
+        <defs>
+          <linearGradient id="testFlow" x1="0%" y1="0%" x2="100%" y2="100%">
+            <stop offset="0%" stopColor="#10B981" stopOpacity="0.6" />
+            <stop offset="50%" stopColor="#E5195E" stopOpacity="0.8" />
+            <stop offset="100%" stopColor="#3B82F6" stopOpacity="0.6" />
+          </linearGradient>
+        </defs>
+        
+        <motion.circle
+          cx="50%" cy="50%" r="120"
+          stroke="url(#testFlow)"
+          strokeWidth="2"
+          fill="none"
+          strokeDasharray="10,10"
+          initial={{ rotate: 0 }}
+          animate={{ rotate: 360 }}
+          transition={{ duration: 15, repeat: Infinity, ease: "linear" }}
+        />
+      </svg>
+
+      {/* Quality Labels */}
+      <motion.div
+        initial={{ opacity: 0 }}
+        animate={{ opacity: 1 }}
+        transition={{ duration: 1, delay: 1.8 }}
+        className="absolute bottom-8 right-8 flex flex-col space-y-1"
+      >
+        <div className="px-2 py-1 bg-green-500/20 text-green-300 border border-green-500/30 rounded text-xs font-manrope">
+          Automated Testing
+        </div>
+        <div className="px-2 py-1 bg-blue-500/20 text-blue-300 border border-blue-500/30 rounded text-xs font-manrope">
+          Performance Testing
+        </div>
+        <div className="px-2 py-1 bg-purple-500/20 text-purple-300 border border-purple-500/30 rounded text-xs font-manrope">
+          Security Testing
+        </div>
+      </motion.div>
+    </div>
+  );
+};

components/vectors/TeamCollaborationVector.tsx

@@ -0,0 +1,123 @@
+import { motion } from "framer-motion";
+
+export const TeamCollaborationVector = () => {
+  const teamMembers = [
+    { role: "Frontend", color: "from-blue-500 to-blue-600", position: { x: 20, y: 20 } },
+    { role: "Backend", color: "from-green-500 to-green-600", position: { x: 80, y: 20 } },
+    { role: "Designer", color: "from-purple-500 to-purple-600", position: { x: 50, y: 70 } },
+    { role: "DevOps", color: "from-orange-500 to-orange-600", position: { x: 20, y: 70 } },
+    { role: "QA", color: "from-red-500 to-red-600", position: { x: 80, y: 70 } }
+  ];
+
+  return (
+    <div className="relative w-full h-96 bg-gradient-to-br from-gray-900/50 to-gray-800/50 rounded-2xl border border-white/10 p-8">
+      {/* Team Members */}
+      {teamMembers.map((member, index) => (
+        <motion.div
+          key={member.role}
+          initial={{ opacity: 0, scale: 0 }}
+          animate={{ opacity: 1, scale: 1 }}
+          transition={{ duration: 0.6, delay: index * 0.2 }}
+          className="absolute"
+          style={{
+            left: `${member.position.x}%`,
+            top: `${member.position.y}%`,
+            transform: 'translate(-50%, -50%)'
+          }}
+        >
+          <div className={`w-16 h-16 bg-gradient-to-br ${member.color} rounded-full flex items-center justify-center shadow-lg relative`}>
+            <motion.div
+              animate={{ scale: [1, 1.1, 1] }}
+              transition={{ duration: 2, repeat: Infinity, delay: index * 0.4 }}
+              className="w-12 h-12 bg-white/20 rounded-full flex items-center justify-center"
+            >
+              <svg className="w-6 h-6 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M16 7a4 4 0 11-8 0 4 4 0 018 0zM12 14a7 7 0 00-7 7h14a7 7 0 00-7-7z" />
+              </svg>
+            </motion.div>
+            
+            {/* Online Status Indicator */}
+            <div className="absolute -bottom-1 -right-1 w-4 h-4 bg-green-400 rounded-full border-2 border-white animate-pulse"></div>
+          </div>
+          
+          {/* Role Label */}
+          <div className="absolute -bottom-8 left-1/2 transform -translate-x-1/2 text-white text-xs font-manrope whitespace-nowrap bg-gray-800/80 px-2 py-1 rounded">
+            {member.role}
+          </div>
+        </motion.div>
+      ))}
+
+      {/* Collaboration Lines */}
+      <svg className="absolute inset-0 w-full h-full pointer-events-none">
+        <defs>
+          <linearGradient id="collabGradient" x1="0%" y1="0%" x2="100%" y2="100%">
+            <stop offset="0%" stopColor="#E5195E" stopOpacity="0.6" />
+            <stop offset="50%" stopColor="#3B82F6" stopOpacity="0.4" />
+            <stop offset="100%" stopColor="#8B5CF6" stopOpacity="0.6" />
+          </linearGradient>
+        </defs>
+        
+        {/* Dynamic Connection Lines */}
+        {teamMembers.map((member, index) => (
+          teamMembers.slice(index + 1).map((otherMember, otherIndex) => (
+            <motion.line
+              key={`${index}-${otherIndex}`}
+              x1={`${member.position.x}%`}
+              y1={`${member.position.y}%`}
+              x2={`${otherMember.position.x}%`}
+              y2={`${otherMember.position.y}%`}
+              stroke="url(#collabGradient)"
+              strokeWidth="2"
+              strokeDasharray="4,4"
+              initial={{ pathLength: 0, opacity: 0 }}
+              animate={{ pathLength: 1, opacity: 0.6 }}
+              transition={{ 
+                duration: 1.5, 
+                delay: (index + otherIndex) * 0.3 + 1,
+                repeat: Infinity,
+                repeatType: "reverse",
+                repeatDelay: 2
+              }}
+            />
+          ))
+        ))}
+      </svg>
+
+      {/* Central Project Hub */}
+      <motion.div
+        initial={{ opacity: 0, scale: 0 }}
+        animate={{ opacity: 1, scale: 1 }}
+        transition={{ duration: 0.8, delay: 1 }}
+        className="absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2 w-20 h-20 bg-gradient-to-br from-accent to-purple-600 rounded-full flex items-center justify-center shadow-xl"
+      >
+        <motion.div
+          animate={{ rotate: 360 }}
+          transition={{ duration: 10, repeat: Infinity, ease: "linear" }}
+        >
+          <svg className="w-10 h-10 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+            <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z" />
+          </svg>
+        </motion.div>
+      </motion.div>
+
+      {/* Floating Code/Design Elements */}
+      <motion.div
+        initial={{ opacity: 0, y: 20 }}
+        animate={{ opacity: 1, y: 0 }}
+        transition={{ duration: 0.8, delay: 1.5 }}
+        className="absolute top-4 right-4 space-y-2"
+      >
+        {['React', 'Design', 'API'].map((tech, index) => (
+          <motion.div
+            key={tech}
+            animate={{ x: [0, 5, 0] }}
+            transition={{ duration: 2, repeat: Infinity, delay: index * 0.2 }}
+            className="px-3 py-1 bg-white/10 border border-white/20 rounded-full text-white text-xs font-manrope backdrop-blur-sm"
+          >
+            {tech}
+          </motion.div>
+        ))}
+      </motion.div>
+    </div>
+  );
+};

components/vectors/TechStackVisualization.tsx

@@ -0,0 +1,107 @@
+import { motion } from "framer-motion";
+
+interface TechStackVisualizationProps {
+  stacks: Array<{
+    name: string;
+    technologies: string[];
+    color: string;
+    icon: string;
+  }>;
+}
+
+export const TechStackVisualization = ({ stacks }: TechStackVisualizationProps) => {
+  return (
+    <div className="relative w-full h-96 flex items-center justify-center">
+      {/* Central Hub */}
+      <motion.div
+        initial={{ opacity: 0, scale: 0 }}
+        animate={{ opacity: 1, scale: 1 }}
+        transition={{ duration: 0.8 }}
+        className="relative w-32 h-32 bg-gradient-to-br from-accent to-purple-600 rounded-full flex items-center justify-center z-10"
+      >
+        <div className="w-20 h-20 bg-white/20 rounded-full flex items-center justify-center backdrop-blur-sm">
+          <svg className="w-10 h-10 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+            <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M19.428 15.428a2 2 0 00-1.022-.547l-2.387-.477a6 6 0 00-3.86.517l-.318.158a6 6 0 01-3.86.517L6.05 15.21a2 2 0 00-1.806.547M8 4h8l-1 1v5.172a2 2 0 00.586 1.414l5 5c1.26 1.26.367 3.414-1.415 3.414H4.828c-1.782 0-2.674-2.154-1.414-3.414l5-5A2 2 0 009 9.172V5L8 4z" />
+          </svg>
+        </div>
+      </motion.div>
+
+      {/* Tech Stack Orbits */}
+      {(stacks ?? []).map((stack, stackIndex) => (
+        <motion.div
+          key={stack.name}
+          initial={{ opacity: 0 }}
+          animate={{ opacity: 1 }}
+          transition={{ duration: 0.6, delay: stackIndex * 0.3 }}
+          className="absolute"
+        >
+          {/* Stack Hub */}
+          <motion.div
+            animate={{ 
+              rotate: stackIndex % 2 === 0 ? 360 : -360 
+            }}
+            transition={{ 
+              duration: 20 + stackIndex * 5, 
+              repeat: Infinity, 
+              ease: "linear" 
+            }}
+            className="relative"
+            style={{
+              transform: `rotate(${stackIndex * (360 / stacks.length)}deg) translateX(${120 + stackIndex * 20}px) rotate(-${stackIndex * (360 / stacks.length)}deg)`
+            }}
+          >
+            <div className={`w-16 h-16 bg-gradient-to-br ${stack.color} rounded-full flex items-center justify-center shadow-lg`}>
+              <span className="text-2xl">{stack.icon}</span>
+            </div>
+            
+            {/* Stack Label */}
+            <div className="absolute -bottom-8 left-1/2 transform -translate-x-1/2 text-white text-xs font-manrope whitespace-nowrap">
+              {stack.name}
+            </div>
+
+            {/* Technologies around the stack */}
+            {stack.technologies.map((tech, techIndex) => (
+              <motion.div
+                key={tech}
+                initial={{ opacity: 0, scale: 0 }}
+                animate={{ opacity: 1, scale: 1 }}
+                transition={{ duration: 0.4, delay: stackIndex * 0.3 + techIndex * 0.1 + 0.5 }}
+                className="absolute w-8 h-8 bg-white/10 border border-white/20 rounded-full flex items-center justify-center text-xs font-manrope text-white backdrop-blur-sm"
+                style={{
+                  transform: `rotate(${techIndex * (360 / stack.technologies.length)}deg) translateX(35px) rotate(-${techIndex * (360 / stack.technologies.length)}deg)`,
+                  fontSize: '8px'
+                }}
+              >
+                {tech.slice(0, 2)}
+              </motion.div>
+            ))}
+          </motion.div>
+        </motion.div>
+      ))}
+
+      {/* Animated Particles */}
+      {Array.from({ length: 8 }).map((_, index) => (
+        <motion.div
+          key={index}
+          className="absolute w-2 h-2 bg-accent/60 rounded-full"
+          animate={{
+            x: [0, Math.random() * 400 - 200],
+            y: [0, Math.random() * 400 - 200],
+            opacity: [0, 1, 0],
+            scale: [0, 1, 0]
+          }}
+          transition={{
+            duration: 3 + Math.random() * 2,
+            repeat: Infinity,
+            delay: index * 0.5,
+            ease: "easeInOut"
+          }}
+          style={{
+            left: '50%',
+            top: '50%'
+          }}
+        />
+      ))}
+    </div>
+  );
+};

components/vectors/UIUXVector.tsx

@@ -0,0 +1,276 @@
+import { motion } from "framer-motion";
+
+export const UIUXVector = () => {
+  return (
+    <div className="relative w-full h-96 flex items-center justify-center">
+      {/* Design Canvas */}
+      <motion.div
+        initial={{ opacity: 0, scale: 0.8 }}
+        animate={{ opacity: 1, scale: 1 }}
+        transition={{ duration: 0.8 }}
+        className="relative z-10"
+      >
+        <div className="w-64 h-48 bg-gradient-to-br from-gray-800 to-gray-900 rounded-lg shadow-2xl p-4">
+          {/* Figma Interface */}
+          <div className="h-full bg-white rounded overflow-hidden relative">
+            {/* Header */}
+            <div className="h-6 bg-gray-100 flex items-center px-2 space-x-1">
+              <div className="w-2 h-2 bg-red-500 rounded-full"></div>
+              <div className="w-2 h-2 bg-yellow-500 rounded-full"></div>
+              <div className="w-2 h-2 bg-green-500 rounded-full"></div>
+              <div className="flex-1 text-center">
+                <span className="text-gray-600 text-xs font-manrope">Design System</span>
+              </div>
+            </div>
+            
+            {/* Design Elements */}
+            <div className="p-3 space-y-2">
+              {/* Wireframe Elements */}
+              <div className="flex space-x-2">
+                <motion.div
+                  initial={{ width: 0 }}
+                  animate={{ width: "60%" }}
+                  transition={{ duration: 0.8, delay: 0.5 }}
+                  className="h-3 bg-gradient-to-r from-blue-400 to-blue-500 rounded"
+                />
+                <motion.div
+                  initial={{ width: 0 }}
+                  animate={{ width: "30%" }}
+                  transition={{ duration: 0.8, delay: 0.7 }}
+                  className="h-3 bg-accent rounded"
+                />
+              </div>
+              
+              <div className="flex space-x-1">
+                {Array.from({ length: 4 }).map((_, i) => (
+                  <motion.div
+                    key={i}
+                    initial={{ height: 0 }}
+                    animate={{ height: "12px" }}
+                    transition={{ duration: 0.5, delay: i * 0.1 + 0.9 }}
+                    className="flex-1 bg-gray-300 rounded"
+                  />
+                ))}
+              </div>
+              
+              {/* Component Grid */}
+              <div className="grid grid-cols-3 gap-1 mt-3">
+                {Array.from({ length: 6 }).map((_, i) => (
+                  <motion.div
+                    key={i}
+                    initial={{ scale: 0, rotate: 180 }}
+                    animate={{ scale: 1, rotate: 0 }}
+                    transition={{ duration: 0.3, delay: i * 0.1 + 1.2 }}
+                    className="aspect-square bg-gradient-to-br from-purple-300 to-purple-400 rounded"
+                  />
+                ))}
+              </div>
+            </div>
+          </div>
+        </div>
+      </motion.div>
+
+      {/* Design Tools Palette */}
+      <motion.div
+        initial={{ opacity: 0, x: -50 }}
+        animate={{ opacity: 1, x: 0 }}
+        transition={{ duration: 0.8, delay: 0.4 }}
+        className="absolute left-8 top-1/2 transform -translate-y-1/2"
+      >
+        <div className="space-y-3">
+          {/* Figma */}
+          <motion.div
+            whileHover={{ scale: 1.1 }}
+            className="w-12 h-12 bg-gradient-to-br from-purple-500 to-purple-600 rounded-xl flex items-center justify-center shadow-lg cursor-pointer"
+          >
+            <svg className="w-6 h-6 text-white" viewBox="0 0 24 24" fill="currentColor">
+              <path d="M12 12a4 4 0 108 0 4 4 0 00-8 0z"/>
+              <path d="M4 16a4 4 0 018 0v-4H8a4 4 0 00-4 4z"/>
+              <path d="M4 8a4 4 0 014-4h4v8H8a4 4 0 01-4-4z"/>
+              <path d="M12 4h4a4 4 0 010 8h-4V4z"/>
+            </svg>
+          </motion.div>
+          
+          {/* Sketch */}
+          <motion.div
+            whileHover={{ scale: 1.1 }}
+            className="w-12 h-12 bg-gradient-to-br from-orange-500 to-orange-600 rounded-xl flex items-center justify-center shadow-lg cursor-pointer"
+          >
+            <span className="text-white font-bold font-manrope">S</span>
+          </motion.div>
+          
+          {/* Adobe XD */}
+          <motion.div
+            whileHover={{ scale: 1.1 }}
+            className="w-12 h-12 bg-gradient-to-br from-pink-500 to-pink-600 rounded-xl flex items-center justify-center shadow-lg cursor-pointer"
+          >
+            <span className="text-white font-bold font-manrope">Xd</span>
+          </motion.div>
+        </div>
+      </motion.div>
+
+      {/* User Journey Flow */}
+      <motion.div
+        initial={{ opacity: 0, y: 50 }}
+        animate={{ opacity: 1, y: 0 }}
+        transition={{ duration: 0.8, delay: 0.6 }}
+        className="absolute bottom-12 left-1/2 transform -translate-x-1/2"
+      >
+        <div className="flex items-center space-x-4">
+          {/* User Persona */}
+          <motion.div
+            whileHover={{ scale: 1.1 }}
+            className="w-10 h-10 bg-gradient-to-br from-blue-500 to-blue-600 rounded-full flex items-center justify-center shadow-lg"
+          >
+            <svg className="w-5 h-5 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+              <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M16 7a4 4 0 11-8 0 4 4 0 018 0zM12 14a7 7 0 00-7 7h14a7 7 0 00-7-7z" />
+            </svg>
+          </motion.div>
+          
+          {/* Flow Arrow */}
+          <motion.div
+            initial={{ width: 0 }}
+            animate={{ width: "24px" }}
+            transition={{ duration: 0.5, delay: 1.5 }}
+            className="h-0.5 bg-gradient-to-r from-blue-500 to-purple-500"
+          />
+          
+          {/* Wireframe */}
+          <motion.div
+            whileHover={{ scale: 1.1 }}
+            className="w-10 h-10 bg-gradient-to-br from-gray-500 to-gray-600 rounded border-2 border-gray-400 flex items-center justify-center shadow-lg"
+          >
+            <div className="w-4 h-4 border border-gray-300 rounded-sm"></div>
+          </motion.div>
+          
+          {/* Flow Arrow */}
+          <motion.div
+            initial={{ width: 0 }}
+            animate={{ width: "24px" }}
+            transition={{ duration: 0.5, delay: 1.7 }}
+            className="h-0.5 bg-gradient-to-r from-gray-500 to-accent"
+          />
+          
+          {/* Prototype */}
+          <motion.div
+            whileHover={{ scale: 1.1 }}
+            className="w-10 h-10 bg-gradient-to-br from-accent to-pink-600 rounded flex items-center justify-center shadow-lg"
+          >
+            <svg className="w-5 h-5 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+              <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M12 18h.01M8 21h8a1 1 0 001-1V4a1 1 0 00-1-1H8a1 1 0 00-1 1v16a1 1 0 001 1z" />
+            </svg>
+          </motion.div>
+        </div>
+        
+        <div className="flex justify-between mt-2 text-xs text-gray-400 font-manrope">
+          <span>Research</span>
+          <span>Design</span>
+          <span>Prototype</span>
+        </div>
+      </motion.div>
+
+      {/* Color Palette */}
+      <motion.div
+        initial={{ opacity: 0, x: 50 }}
+        animate={{ opacity: 1, x: 0 }}
+        transition={{ duration: 0.8, delay: 0.8 }}
+        className="absolute right-8 top-16"
+      >
+        <div className="space-y-2">
+          <div className="text-white text-sm font-manrope mb-2">Colors</div>
+          <div className="flex space-x-1">
+            <motion.div
+              whileHover={{ scale: 1.2 }}
+              className="w-6 h-6 bg-blue-500 rounded cursor-pointer shadow-lg"
+            />
+            <motion.div
+              whileHover={{ scale: 1.2 }}
+              className="w-6 h-6 bg-accent rounded cursor-pointer shadow-lg"
+            />
+            <motion.div
+              whileHover={{ scale: 1.2 }}
+              className="w-6 h-6 bg-purple-500 rounded cursor-pointer shadow-lg"
+            />
+          </div>
+          
+          {/* Typography */}
+          <div className="mt-4">
+            <div className="text-white text-sm font-manrope mb-2">Typography</div>
+            <div className="space-y-1">
+              <div className="text-white text-lg font-manrope">Aa</div>
+              <div className="text-gray-400 text-sm font-manrope">Manrope</div>
+            </div>
+          </div>
+        </div>
+      </motion.div>
+
+      {/* User Testing Elements */}
+      <motion.div
+        initial={{ opacity: 0 }}
+        animate={{ opacity: 1 }}
+        transition={{ duration: 1, delay: 1.2 }}
+        className="absolute top-8 left-16"
+      >
+        <div className="flex items-center space-x-2">
+          <div className="w-8 h-8 bg-green-500 rounded-full flex items-center justify-center">
+            <svg className="w-4 h-4 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+              <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M5 13l4 4L19 7" />
+            </svg>
+          </div>
+          <div className="text-green-400 text-sm font-manrope">Usability: 95%</div>
+        </div>
+      </motion.div>
+
+      {/* Accessibility Icon */}
+      <motion.div
+        initial={{ opacity: 0, rotate: -180 }}
+        animate={{ opacity: 1, rotate: 0 }}
+        transition={{ duration: 0.8, delay: 1.4 }}
+        className="absolute top-12 right-32"
+      >
+        <div className="w-10 h-10 bg-gradient-to-br from-teal-500 to-teal-600 rounded-full flex items-center justify-center shadow-lg">
+          <svg className="w-5 h-5 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+            <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
+          </svg>
+        </div>
+      </motion.div>
+
+      {/* Design System Components */}
+      <motion.div
+        initial={{ opacity: 0, y: -20 }}
+        animate={{ opacity: 1, y: 0 }}
+        transition={{ duration: 1, delay: 1.6 }}
+        className="absolute bottom-8 right-8 flex space-x-2"
+      >
+        <div className="px-2 py-1 bg-blue-500/20 text-blue-300 border border-blue-500/30 rounded text-xs font-manrope">
+          Components
+        </div>
+        <div className="px-2 py-1 bg-purple-500/20 text-purple-300 border border-purple-500/30 rounded text-xs font-manrope">
+          Design System
+        </div>
+      </motion.div>
+
+      {/* Interactive Design Flow */}
+      <svg className="absolute inset-0 w-full h-full pointer-events-none opacity-20">
+        <defs>
+          <linearGradient id="designFlow" x1="0%" y1="0%" x2="100%" y2="100%">
+            <stop offset="0%" stopColor="#8B5CF6" stopOpacity="0.6" />
+            <stop offset="50%" stopColor="#E5195E" stopOpacity="0.8" />
+            <stop offset="100%" stopColor="#3B82F6" stopOpacity="0.6" />
+          </linearGradient>
+        </defs>
+        
+        <motion.path
+          d="M 10% 80% Q 50% 20% 90% 80%"
+          stroke="url(#designFlow)"
+          strokeWidth="2"
+          fill="none"
+          strokeDasharray="5,5"
+          initial={{ pathLength: 0 }}
+          animate={{ pathLength: 1 }}
+          transition={{ duration: 3, repeat: Infinity, repeatType: "reverse" }}
+        />
+      </svg>
+    </div>
+  );
+};

components/vectors/index.tsx

@@ -0,0 +1,40 @@
+
+// Vector Components for Hire Talent and Development Pages
+export { DeveloperSkillsVector } from './DeveloperSkillsVector';
+export { TeamCollaborationVector } from './TeamCollaborationVector';
+export { ProjectTimelineVector } from './ProjectTimelineVector';
+export { TechStackVisualization } from './TechStackVisualization';
+
+// New page-specific vectors
+export { MobileAppVector } from './MobileAppVector';
+export { FullStackVector } from './FullStackVector';
+export { FrontendVector } from './FrontendVector';
+export { BackendVector } from './BackendVector';
+export { UIUXVector } from './UIUXVector';
+export { QATestingVector } from './QATestingVector';
+export { EngagementModelsVector } from './EngagementModelsVector';
+export { DashboardVector } from './DashboardVector';
+
+// Vector Usage Guide:
+// 
+// Each hire talent page now has its own custom vector component:
+// - HireMobileAppDevelopers -> MobileAppVector (mobile devices, cross-platform)
+// - HireFullStackDevelopers -> FullStackVector (frontend + backend integration)
+// - HireFrontendDevelopers -> FrontendVector (UI components, browser interface)
+// - HireBackendDevelopers -> BackendVector (servers, databases, APIs)
+// - HireUIUXDesigners -> UIUXVector (design tools, user journey)
+// - HireQAEngineers -> QATestingVector (testing dashboard, automation tools)
+// - DedicatedDevelopmentTeams -> TeamCollaborationVector (team interaction)
+// - EngagementModels -> EngagementModelsVector (business models, decision factors)
+// - TeamAugmentationServices -> DeveloperSkillsVector (skills augmentation)
+// - Default fallback -> DashboardVector (modern dashboard interface)
+//
+// To use vectors in HireTalentHeroBanner:
+// <HireTalentHeroBanner vectorComponent={MobileAppVector} ... />
+//
+// Vectors are designed to be:
+// - Responsive and scalable
+// - Consistent with WDI brand colors (#E5195E, gradients)
+// - Animated with Motion (Framer Motion)
+// - Accessible and semantic
+// - Performance optimized

fix-figma-imports.md

@@ -40,7 +40,7 @@ const clutchLogo = "https://images.unsplash.com/photo-1560472354-b33ff0c44a43?w=
 - `pages/iOSAppDevelopment.tsx`
 - `pages/TanamiProject.tsx`
 - `components/CaseStudyHighlight.tsx`
-- `pages/SeezunProject.tsx`
+<!-- - `pages/SeezunProject.tsx` -->
 - `pages/WokaProject.tsx`
 - `pages/RanOutOfProject.tsx`
 - `imports/Group1597880681.tsx`

index.html

@@ -3,26 +3,25 @@
 
 <head>
   <meta charset="UTF-8" />
-  <link rel="icon" type="image/svg+xml" href="/vite.svg" />
   <meta name="viewport" content="width=device-width, initial-scale=1.0" />
   <title>WDI - Web Development & AI Solutions</title>
-  <meta name="description"
-    content="Leading web development and AI solutions provider. Custom software development, mobile apps, and digital transformation services." />
 
   <!-- Preload Google Fonts -->
   <link rel="preconnect" href="https://fonts.googleapis.com">
   <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+  <!-- <meta name="description"
+    content="Leading web development and AI solutions provider. Custom software development, mobile apps, and digital transformation services." /> -->
 
   <!-- SEO Meta Tags -->
   <meta property="og:title" content="WDI - Web Development & AI Solutions" />
   <meta property="og:description"
     content="Leading web development and AI solutions provider. Custom software development, mobile apps, and digital transformation services." />
   <meta property="og:type" content="website" />
-  <meta property="og:url" content="https://wdi.com" />
+  <meta property="og:url" content="https://www.wdipl.com/" />
   <meta name="twitter:card" content="summary_large_image" />
   <meta name="twitter:title" content="WDI - Web Development & AI Solutions" />
-  <meta name="twitter:description"
-    content="Leading web development and AI solutions provider. Custom software development, mobile apps, and digital transformation services." />
+  <!-- <meta name="twitter:description"
+    content="Leading web development and AI solutions provider. Custom software development, mobile apps, and digital transformation services." /> -->
 
   <!-- Google tag (gtag.js) -->
 
@@ -133,12 +132,23 @@
     })(document, window.mixpanel || []);
   </script>
 
+  <!-- site verification  -->
+  <meta name="google-site-verification" content="google062ff5cd9ad8f4bb.html" />
+
+  <!-- Favicon section should be updated to: -->
+
+  <link rel="icon" type="image/png" href="/favicon-96x96.png" sizes="96x96" />
+  <link rel="icon" type="image/svg+xml" href="/favicon.svg" />
+  <link rel="shortcut icon" href="/favicon.ico" />
+  <link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png" />
+  <link rel="manifest" href="/site.webmanifest" />
+
+  <link rel="icon" href="https://www.wdipl.com/favicon.ico" type="image/x-icon">
+  <link rel="icon" href="https://www.wdipl.com/favicon-96x96.png" type="image/png" sizes="96x96">
+  <link rel="apple-touch-icon" href="https://www.wdipl.com/apple-touch-icon.png">
 
 
 
-
-  <!-- Favicon -->
-  <link rel="shortcut icon" href="https://www.wdipl.com/public/img/favIcon.webp" type="image/x-icon" />
 </head>
 
 <body>

install-and-run.md

@@ -29,12 +29,12 @@ Replace the imports in `components/CaseStudyHighlight.tsx`:
 ```tsx
 // OLD:
 import regroupImage from "figma:asset/92c9546d073e10bfa567559041d8b7e5b0d84ce7.png";
-import seezunImage from "figma:asset/06e3cfb0c62c4da1116eaa2ecf65c8d2c54cf50a.png";
+// import seezunImage from "figma:asset/06e3cfb0c62c4da1116eaa2ecf65c8d2c54cf50a.png";
 import wokaAwardImage from "figma:asset/91ae572d9f4dbf6bf5424e541b65db8087a129ff.png";
 
 // NEW:
 const regroupImage = "https://images.unsplash.com/photo-1551650975-87deedd944c3?w=600&h=400&fit=crop&auto=format";
-const seezunImage = "https://images.unsplash.com/photo-1512941937669-90a1b58e7e9c?w=600&h=400&fit=crop&auto=format";
+// const seezunImage = "https://images.unsplash.com/photo-1512941937669-90a1b58e7e9c?w=600&h=400&fit=crop&auto=format";
 const wokaAwardImage = "https://images.unsplash.com/photo-1517077304055-6e89abbf09b0?w=600&h=400&fit=crop&auto=format";
 ```
 
@@ -48,7 +48,7 @@ If you're on Windows, you can run this PowerShell script to fix all files at onc
 # Fix CaseStudyHighlight.tsx
 $content = Get-Content "components/CaseStudyHighlight.tsx"
 $content = $content -replace 'import regroupImage from "figma:asset/[^"]+";', 'const regroupImage = "https://images.unsplash.com/photo-1551650975-87deedd944c3?w=600&h=400&fit=crop&auto=format";'
-$content = $content -replace 'import seezunImage from "figma:asset/[^"]+";', 'const seezunImage = "https://images.unsplash.com/photo-1512941937669-90a1b58e7e9c?w=600&h=400&fit=crop&auto=format";'
+# $content = $content -replace 'import seezunImage from "figma:asset/[^"]+";', 'const seezunImage = "https://images.unsplash.com/photo-1512941937669-90a1b58e7e9c?w=600&h=400&fit=crop&auto=format";'
 $content = $content -replace 'import wokaAwardImage from "figma:asset/[^"]+";', 'const wokaAwardImage = "https://images.unsplash.com/photo-1517077304055-6e89abbf09b0?w=600&h=400&fit=crop&auto=format";'
 $content | Set-Content "components/CaseStudyHighlight.tsx"
 ```
@@ -60,7 +60,7 @@ sed -i 's/import clutchLogo from "figma:asset\/[^"]*";/const clutchLogo = "https
 
 # Fix CaseStudyHighlight.tsx
 sed -i 's/import regroupImage from "figma:asset\/[^"]*";/const regroupImage = "https:\/\/images.unsplash.com\/photo-1551650975-87deedd944c3?w=600\&h=400\&fit=crop\&auto=format";/' components/CaseStudyHighlight.tsx
-sed -i 's/import seezunImage from "figma:asset\/[^"]*";/const seezunImage = "https:\/\/images.unsplash.com\/photo-1512941937669-90a1b58e7e9c?w=600\&h=400\&fit=crop\&auto=format";/' components/CaseStudyHighlight.tsx
+# sed -i 's/import seezunImage from "figma:asset\/[^"]*";/const seezunImage = "https:\/\/images.unsplash.com\/photo-1512941937669-90a1b58e7e9c?w=600\&h=400\&fit=crop\&auto=format";/' components/CaseStudyHighlight.tsx
 sed -i 's/import wokaAwardImage from "figma:asset\/[^"]*";/const wokaAwardImage = "https:\/\/images.unsplash.com\/photo-1517077304055-6e89abbf09b0?w=600\&h=400\&fit=crop\&auto=format";/' components/CaseStudyHighlight.tsx
 ```
 

main.tsx

@@ -5,11 +5,14 @@ import './styles/globals.css'
 import { Provider } from 'react-redux'
 import store from './src/store/Store.tsx'
 import { BrowserRouter } from 'react-router-dom'
+import { HelmetProvider } from 'react-helmet-async'
 
 createRoot(document.getElementById('root')!).render(
  <Provider store={store}>
      <BrowserRouter>
+       <HelmetProvider> 
           <App />
+        </HelmetProvider>
     </BrowserRouter>
   </Provider>,
 )

package.json

@@ -51,12 +51,14 @@
     "react-dnd": "^16.0.1",
     "react-dnd-html5-backend": "^16.0.1",
     "react-dom": "^18.3.1",
+    "react-helmet-async": "^2.0.5",
     "react-hook-form": "^7.55.0",
     "react-redux": "^9.2.0",
     "react-resizable-panels": "^2.1.9",
     "react-responsive-masonry": "^2.7.1",
     "react-router-dom": "^7.6.3",
     "react-slick": "^0.30.3",
+    "react-world-flags": "^1.6.0",
     "recharts": "^2.15.4",
     "slick-carousel": "^1.8.1",
     "sonner": "^2.0.3",

pages/AIAutomationWorkflows.tsx

@@ -13,7 +13,8 @@ import {
   Cpu,
   Database,
   DollarSign,
-  Eye, FileText,
+  Eye,
+  FileText,
   Globe,
   GraduationCap,
   MessageSquare,
@@ -29,21 +30,92 @@ import {
   UserPlus,
   Users,
   Workflow,
-  Zap
+  Zap,
 } from "lucide-react";
 import { ImageWithFallback } from "../components/figma/ImageWithFallback";
 import { Footer } from "../components/Footer";
 import { Navigation } from "../components/Navigation";
-import { Accordion, AccordionContent, AccordionItem, AccordionTrigger } from "../components/ui/accordion";
+import {
+  Accordion,
+  AccordionContent,
+  AccordionItem,
+  AccordionTrigger,
+} from "../components/ui/accordion";
 import { Badge } from "../components/ui/badge";
 import { Button } from "../components/ui/button";
 import { Card, CardContent } from "../components/ui/card";
 import { ShimmerButton } from "../components/ui/shimmer-button";
+import { Helmet } from "react-helmet-async";
+import { AIStrategyTargetAudience } from "./AIStrategyConsulting";
+import { useNavigate } from "react-router-dom";
 
 // AI Automation & Workflows Hero Section
 const AutomationHeroWithCTA = () => {
+  const navigate = useNavigate();
   return (
     <section className="relative py-20 overflow-hidden bg-black">
+      <Helmet>
+        {/* Page Title and Meta Description */}
+        <title>AI Automation | Smart AI-Powered Workflows by WDI</title>
+        <meta
+          name="description"
+          content="Streamline your operations with WDI’s AI automation workflows. Enhance efficiency, reduce cost, and drive results using smart, scalable AI solutions."
+        />
+
+        {/* Canonical Link */}
+        <link
+          rel="canonical"
+          href="https://www.wdipl.com/services/ai-automation-workflows"
+        />
+
+        {/* Open Graph Tags (for Facebook, LinkedIn) */}
+        <meta
+          property="og:title"
+          content="AI Automation | Smart AI-Powered Workflows by WDI"
+        />
+        <meta
+          property="og:description"
+          content="Streamline your operations with WDI’s AI automation workflows. Enhance efficiency, reduce cost, and drive results using smart, scalable AI solutions."
+        />
+        <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="AI Automation | Smart AI-Powered Workflows by WDI"
+        />
+        <meta
+          name="twitter:description"
+          content="Streamline your operations with WDI’s AI automation workflows. Enhance efficiency, reduce cost, and drive results using smart, scalable AI solutions."
+        />
+        <meta
+          name="twitter:image"
+          content="https://www.wdipl.com/your-preview-image.jpg"
+        />
+
+        {/* Social Profiles (using JSON-LD Schema) */}
+        <script type="application/ld+json">
+          {`
+                              {
+                                "@context": "https://schema.org",
+                                "@type": "Organization",
+                                "name": "WDI",
+                                "url": "https://www.wdipl.com",
+                                "sameAs": [
+                                  "https://www.facebook.com/wdideas",
+                                  "https://www.linkedin.com/in/website-developers-india/",
+                                  "https://www.instagram.com/wdipl/"
+                                ]
+                              }
+                            `}
+        </script>
+      </Helmet>
       <div className="container mx-auto px-6 lg:px-8">
         <div className="grid lg:grid-cols-2 gap-16 items-center min-h-[90vh]">
           <motion.div
@@ -68,7 +140,9 @@ const AutomationHeroWithCTA = () => {
               </h1>
 
               <p className="text-lg text-gray-300 leading-relaxed max-w-lg">
-                Revolutionize your operations by embedding Artificial Intelligence into workflows, automating repetitive tasks, and enhancing efficiency across your organization.
+                Embed AI into your workflows, automate repetitive tasks, and
+                boost efficiency with AI‑powered automation designed for modern
+                businesses.
               </p>
             </div>
 
@@ -79,7 +153,10 @@ const AutomationHeroWithCTA = () => {
               transition={{ duration: 0.8, delay: 0.3 }}
               className="flex flex-col sm:flex-row gap-4"
             >
-              <ShimmerButton className="text-lg px-8 py-4">
+              <ShimmerButton
+                className="text-lg px-8 py-4"
+                onClick={() => navigate("/start-a-project")}
+              >
                 <div className="inline-flex items-center gap-2">
                   <Zap className="w-5 h-5 flex-shrink-0" />
                   <span>Automate Your Business</span>
@@ -133,7 +210,9 @@ const AutomationHeroWithCTA = () => {
                         <div className="w-8 h-8 bg-accent/20 rounded-lg flex items-center justify-center">
                           <Workflow className="w-5 h-5 text-accent" />
                         </div>
-                        <h3 className="text-lg font-semibold text-white">Automation Workflow</h3>
+                        <h3 className="text-lg font-semibold text-white">
+                          Automation Workflow
+                        </h3>
                       </div>
                       <div className="w-full h-1 bg-gradient-to-r from-accent via-blue-500 to-green-500 rounded-full"></div>
                     </motion.div>
@@ -152,11 +231,17 @@ const AutomationHeroWithCTA = () => {
                             <Database className="w-2 h-2 text-white" />
                           </div>
                           <div className="flex-1">
-                            <div className="text-white text-xs font-medium">Data Input</div>
+                            <div className="text-white text-xs font-medium">
+                              Data Input
+                            </div>
                           </div>
                           <motion.div
                             animate={{ rotate: [0, 360] }}
-                            transition={{ duration: 2, repeat: Infinity, ease: "linear" }}
+                            transition={{
+                              duration: 2,
+                              repeat: Infinity,
+                              ease: "linear",
+                            }}
                             className="w-3 h-3 border border-blue-400 border-t-transparent rounded-full"
                           ></motion.div>
                         </div>
@@ -177,7 +262,9 @@ const AutomationHeroWithCTA = () => {
                             <Brain className="w-2 h-2 text-white" />
                           </div>
                           <div className="flex-1">
-                            <div className="text-white text-xs font-medium">AI Processing</div>
+                            <div className="text-white text-xs font-medium">
+                              AI Processing
+                            </div>
                           </div>
                           <motion.div
                             animate={{ scale: [1, 1.2, 1] }}
@@ -202,11 +289,17 @@ const AutomationHeroWithCTA = () => {
                             <Cog className="w-2 h-2 text-white" />
                           </div>
                           <div className="flex-1">
-                            <div className="text-white text-xs font-medium">Automation</div>
+                            <div className="text-white text-xs font-medium">
+                              Automation
+                            </div>
                           </div>
                           <motion.div
                             animate={{ rotate: [0, 360] }}
-                            transition={{ duration: 1, repeat: Infinity, ease: "linear" }}
+                            transition={{
+                              duration: 1,
+                              repeat: Infinity,
+                              ease: "linear",
+                            }}
                             className="w-3 h-3 text-green-400"
                           >
                             <Cog className="w-3 h-3" />
@@ -229,7 +322,9 @@ const AutomationHeroWithCTA = () => {
                             <CheckCircle className="w-2 h-2 text-white" />
                           </div>
                           <div className="flex-1">
-                            <div className="text-white text-xs font-medium">Output</div>
+                            <div className="text-white text-xs font-medium">
+                              Output
+                            </div>
                           </div>
                           <motion.div
                             animate={{ opacity: [0.5, 1, 0.5] }}
@@ -249,12 +344,20 @@ const AutomationHeroWithCTA = () => {
                     >
                       <div className="flex items-center justify-between">
                         <div>
-                          <div className="text-white text-sm font-medium">Efficiency Gain</div>
-                          <div className="text-accent text-xs">vs Manual Process</div>
+                          <div className="text-white text-sm font-medium">
+                            Efficiency Gain
+                          </div>
+                          <div className="text-accent text-xs">
+                            vs Manual Process
+                          </div>
                         </div>
                         <div className="text-right">
-                          <div className="text-2xl font-bold text-accent">85%</div>
-                          <div className="text-xs text-white/70">Time Saved</div>
+                          <div className="text-2xl font-bold text-accent">
+                            85%
+                          </div>
+                          <div className="text-xs text-white/70">
+                            Time Saved
+                          </div>
                         </div>
                       </div>
                     </motion.div>
@@ -330,15 +433,24 @@ const AutomationHeroWithCTA = () => {
                 transition={{ duration: 0.8, delay: 2.8 }}
                 className="flex justify-center gap-4 flex-wrap mt-8"
               >
-                <Badge variant="secondary" className="bg-blue-500/20 text-blue-300 border-blue-500/30">
+                <Badge
+                  variant="secondary"
+                  className="bg-blue-500/20 text-blue-300 border-blue-500/30"
+                >
                   <Zap className="w-3 h-3 mr-1" />
                   Intelligent
                 </Badge>
-                <Badge variant="secondary" className="bg-green-500/20 text-green-300 border-green-500/30">
+                <Badge
+                  variant="secondary"
+                  className="bg-green-500/20 text-green-300 border-green-500/30"
+                >
                   <Cog className="w-3 h-3 mr-1" />
                   Automated
                 </Badge>
-                <Badge variant="secondary" className="bg-purple-500/20 text-purple-300 border-purple-500/30">
+                <Badge
+                  variant="secondary"
+                  className="bg-purple-500/20 text-purple-300 border-purple-500/30"
+                >
                   <TrendingUp className="w-3 h-3 mr-1" />
                   Scalable
                 </Badge>
@@ -357,28 +469,28 @@ const AutomationBenefits = () => {
     {
       icon: DollarSign,
       title: "Significant Cost Savings",
-      description: "Reduce manual labor and operational overhead."
+      description: "Reduce manual labor and operational overhead.",
     },
     {
       icon: Target,
       title: "Increased Accuracy",
-      description: "Minimize human error in repetitive tasks."
+      description: "Minimize human error in repetitive tasks.",
     },
     {
       icon: Zap,
       title: "Accelerated Processes",
-      description: "Speed up workflows and improve turnaround times."
+      description: "Speed up workflows and improve turnaround times.",
     },
     {
       icon: TrendingUp,
       title: "Enhanced Productivity",
-      description: "Free up human capital for strategic work."
+      description: "Free up human capital for strategic work.",
     },
     {
       icon: Scale,
       title: "Scalability",
-      description: "Automate processes to handle growing demands effortlessly."
-    }
+      description: "Automate processes to handle growing demands effortlessly.",
+    },
   ];
 
   return (
@@ -394,6 +506,11 @@ const AutomationBenefits = () => {
           <h2 className="text-4xl lg:text-5xl font-semibold text-foreground mb-6">
             Drive Efficiency and Innovation with AI Automation
           </h2>
+          <p className="mt-4 text-gray-400 max-w-2xl mx-auto">
+            A clean, self‑standing heading that pairs well with your earlier
+            “AI‑powered automation & workflow” section. If you want, you can add
+            a short line under it like
+          </p>
         </motion.div>
 
         <motion.div
@@ -410,7 +527,7 @@ const AutomationBenefits = () => {
                 key={index}
                 initial={{ opacity: 0, y: 20 }}
                 whileInView={{ opacity: 1, y: 0 }}
-                transition={{ duration: 0.5, delay: index * 0.1 }}
+                transition={{ duration: 0.5, delay: index * 0.01 }}
                 viewport={{ once: true }}
                 whileHover={{ y: -5 }}
                 className="group"
@@ -480,34 +597,40 @@ const AutomationProcess = () => {
   const steps = [
     {
       title: "Process Audit & Identification of Opportunities",
-      description: "Analyzing existing workflows to identify repetitive tasks and automation opportunities for maximum impact.",
-      icon: Search
+      description:
+        "Analyzing existing workflows to identify repetitive tasks and automation opportunities for maximum impact.",
+      icon: Search,
     },
     {
       title: "AI Solution Design",
-      description: "Designing intelligent automation solutions tailored to your specific business processes and requirements.",
-      icon: PenTool
+      description:
+        "Designing intelligent automation solutions tailored to your specific business processes and requirements.",
+      icon: PenTool,
     },
     {
       title: "Custom Model Development (if needed)",
-      description: "Developing custom AI models when off-the-shelf solutions don't meet your unique automation needs.",
-      icon: Brain
+      description:
+        "Developing custom AI models when off-the-shelf solutions don't meet your unique automation needs.",
+      icon: Brain,
     },
     {
       title: "Integration & Deployment",
-      description: "Seamlessly integrating automation solutions into your existing systems and deploying them across your organization.",
-      icon: PlugIcon
+      description:
+        "Seamlessly integrating automation solutions into your existing systems and deploying them across your organization.",
+      icon: PlugIcon,
     },
     {
       title: "Performance Monitoring & Optimization",
-      description: "Continuously monitoring automation performance and optimizing workflows for maximum efficiency and accuracy.",
-      icon: BarChart3
+      description:
+        "Continuously monitoring automation performance and optimizing workflows for maximum efficiency and accuracy.",
+      icon: BarChart3,
     },
     {
       title: "Training & Change Management",
-      description: "Providing comprehensive training and change management support to ensure successful adoption across your team.",
-      icon: GraduationCap
-    }
+      description:
+        "Providing comprehensive training and change management support to ensure successful adoption across your team.",
+      icon: GraduationCap,
+    },
   ];
 
   return (
@@ -523,6 +646,11 @@ const AutomationProcess = () => {
           <h2 className="text-4xl lg:text-5xl font-semibold text-white mb-6">
             Our Strategic Approach to Workflow Automation
           </h2>
+          <p className="mt-4 text-gray-400 max-w-2xl mx-auto">
+            A structured, AI‑led approach to workflow automation that aligns
+            with your business goals, streamlines operations, and powers
+            AI‑powered mobile and web solutions.
+          </p>
         </motion.div>
 
         <div className="relative">
@@ -541,15 +669,23 @@ const AutomationProcess = () => {
                   whileInView={{ opacity: 1, x: 0 }}
                   transition={{ duration: 0.8, delay: index * 0.2 }}
                   viewport={{ once: true }}
-                  className={`flex items-center ${isEven ? 'lg:flex-row' : 'lg:flex-row-reverse'} flex-col lg:gap-16 gap-8`}
+                  className={`flex items-center ${
+                    isEven ? "lg:flex-row" : "lg:flex-row-reverse"
+                  } flex-col lg:gap-16 gap-8`}
+                >
+                  <div
+                    className={`flex-1 ${
+                      isEven ? "lg:text-right" : "lg:text-left"
+                    } text-center lg:text-left`}
                   >
-                  <div className={`flex-1 ${isEven ? 'lg:text-right' : 'lg:text-left'} text-center lg:text-left`}>
                     <div className="bg-gray-900/50 backdrop-blur-md rounded-2xl border border-gray-800 p-8 hover:border-accent/30 transition-all duration-300 shadow-lg hover:shadow-xl">
                       <div className="flex items-center gap-4 mb-4 justify-center lg:justify-start">
                         <div className="w-12 h-12 bg-accent/20 rounded-xl flex items-center justify-center">
                           <IconComponent className="w-6 h-6 text-accent" />
                         </div>
-                        <div className="text-2xl font-bold text-accent">0{index + 1}</div>
+                        <div className="text-2xl font-bold text-accent">
+                          0{index + 1}
+                        </div>
                       </div>
                       <h3 className="text-2xl font-semibold text-white mb-4">
                         {step.title}
@@ -581,44 +717,82 @@ const AutomationServices = () => {
       title: "Intelligent Process Automation (IPA)",
       description: "Automating complex, decision-based workflows.",
       icon: Brain,
-      features: ["Decision Trees", "Cognitive Automation", "Process Mining", "Workflow Intelligence"]
+      features: [
+        "Decision Trees",
+        "Cognitive Automation",
+        "Process Mining",
+        "Workflow Intelligence",
+      ],
     },
     {
       title: "Robotic Process Automation (RPA) with AI",
       description: "Enhancing RPA bots with AI for cognitive tasks.",
       icon: Bot,
-      features: ["Smart Bots", "Cognitive RPA", "Exception Handling", "Adaptive Automation"]
+      features: [
+        "Smart Bots",
+        "Cognitive RPA",
+        "Exception Handling",
+        "Adaptive Automation",
+      ],
     },
     {
       title: "Document Processing Automation",
-      description: "Extracting and processing data from unstructured documents.",
+      description:
+        "Extracting and processing data from unstructured documents.",
       icon: FileText,
-      features: ["OCR Processing", "Data Extraction", "Document Classification", "Content Analysis"]
+      features: [
+        "OCR Processing",
+        "Data Extraction",
+        "Document Classification",
+        "Content Analysis",
+      ],
     },
     {
       title: "AI-Driven Customer Service Automation",
-      description: "Intelligent routing, self-service portals, chatbot integration.",
+      description:
+        "Intelligent routing, self-service portals, chatbot integration.",
       icon: MessageSquare,
-      features: ["Smart Routing", "Chatbot Integration", "Self-Service", "Customer Analytics"]
+      features: [
+        "Smart Routing",
+        "Chatbot Integration",
+        "Self-Service",
+        "Customer Analytics",
+      ],
     },
     {
       title: "Supply Chain Optimization",
-      description: "AI for demand forecasting, inventory management, logistics.",
+      description:
+        "AI for demand forecasting, inventory management, logistics.",
       icon: Truck,
-      features: ["Demand Forecasting", "Inventory Management", "Logistics Optimization", "Supply Planning"]
+      features: [
+        "Demand Forecasting",
+        "Inventory Management",
+        "Logistics Optimization",
+        "Supply Planning",
+      ],
     },
     {
       title: "Automated Data Entry & Validation",
       description: "Minimizing manual data handling.",
       icon: Database,
-      features: ["Data Validation", "Quality Checks", "Automated Entry", "Error Detection"]
+      features: [
+        "Data Validation",
+        "Quality Checks",
+        "Automated Entry",
+        "Error Detection",
+      ],
     },
     {
       title: "AI for Quality Control",
       description: "Automated inspection and anomaly detection.",
       icon: CheckCircle,
-      features: ["Automated Inspection", "Anomaly Detection", "Quality Metrics", "Defect Analysis"]
-    }
+      features: [
+        "Automated Inspection",
+        "Anomaly Detection",
+        "Quality Metrics",
+        "Defect Analysis",
+      ],
+    },
   ];
 
   return (
@@ -634,6 +808,11 @@ const AutomationServices = () => {
           <h2 className="text-4xl lg:text-5xl font-semibold text-foreground mb-6">
             Our Specialized AI-Powered Automation Solutions
           </h2>
+          <p className="mt-4 text-gray-400 max-w-2xl mx-auto">
+            Custom AI‑driven automation solutions that streamline workflows,
+            reduce manual effort, and power AI‑powered mobile and web
+            operations.
+          </p>
         </motion.div>
 
         <motion.div
@@ -650,7 +829,7 @@ const AutomationServices = () => {
                 key={index}
                 initial={{ opacity: 0, y: 20 }}
                 whileInView={{ opacity: 1, y: 0 }}
-                transition={{ duration: 0.5, delay: index * 0.1 }}
+                transition={{ duration: 0.5, delay: index * 0.01 }}
                 viewport={{ once: true }}
                 whileHover={{ y: -5 }}
                 className="group"
@@ -667,10 +846,16 @@ const AutomationServices = () => {
                       {service.description}
                     </p>
                     <div className="space-y-2">
-                      <h4 className="text-sm font-medium text-foreground">Key Features:</h4>
+                      <h4 className="text-sm font-medium text-foreground">
+                        Key Features:
+                      </h4>
                       <div className="flex flex-wrap gap-2">
                         {service.features.map((feature) => (
-                          <Badge key={feature} variant="secondary" className="text-xs bg-muted/50 text-muted-foreground border-muted">
+                          <Badge
+                            key={feature}
+                            variant="secondary"
+                            className="text-xs bg-muted/50 text-muted-foreground border-muted"
+                          >
                             {feature}
                           </Badge>
                         ))}
@@ -715,10 +900,16 @@ const AutomationServices = () => {
                       {service.description}
                     </p>
                     <div className="space-y-2">
-                      <h4 className="text-sm font-medium text-foreground">Key Features:</h4>
+                      <h4 className="text-sm font-medium text-foreground">
+                        Key Features:
+                      </h4>
                       <div className="flex flex-wrap gap-2">
                         {service.features.map((feature) => (
-                          <Badge key={feature} variant="secondary" className="text-xs bg-muted/50 text-muted-foreground border-muted">
+                          <Badge
+                            key={feature}
+                            variant="secondary"
+                            className="text-xs bg-muted/50 text-muted-foreground border-muted"
+                          >
                             {feature}
                           </Badge>
                         ))}
@@ -739,17 +930,57 @@ const AutomationServices = () => {
 const AutomationTechStack = () => {
   const technologies = [
     { name: "Python", icon: Code, category: "Programming", color: "blue" },
-    { name: "TensorFlow", icon: Brain, category: "ML Framework", color: "orange" },
+    {
+      name: "TensorFlow",
+      icon: Brain,
+      category: "ML Framework",
+      color: "orange",
+    },
     { name: "PyTorch", icon: Cpu, category: "ML Framework", color: "red" },
     { name: "Azure AI", icon: CloudCog, category: "Cloud AI", color: "blue" },
-    { name: "AWS AI Services", icon: Server, category: "Cloud AI", color: "yellow" },
-    { name: "Google AI Platform", icon: Globe, category: "Cloud AI", color: "green" },
+    {
+      name: "AWS AI Services",
+      icon: Server,
+      category: "Cloud AI",
+      color: "yellow",
+    },
+    {
+      name: "Google AI Platform",
+      icon: Globe,
+      category: "Cloud AI",
+      color: "green",
+    },
     { name: "UiPath", icon: Bot, category: "RPA Platform", color: "purple" },
-    { name: "Automation Anywhere", icon: Cog, category: "RPA Platform", color: "indigo" },
-    { name: "OCR Technologies", icon: Eye, category: "Document Processing", color: "teal" },
-    { name: "NLP Libraries", icon: MessageSquare, category: "Text Processing", color: "pink" },
-    { name: "Computer Vision", icon: Camera, category: "Image Processing", color: "cyan" },
-    { name: "Workflow Engines", icon: Workflow, category: "Process Management", color: "lime" }
+    {
+      name: "Automation Anywhere",
+      icon: Cog,
+      category: "RPA Platform",
+      color: "indigo",
+    },
+    {
+      name: "OCR Technologies",
+      icon: Eye,
+      category: "Document Processing",
+      color: "teal",
+    },
+    {
+      name: "NLP Libraries",
+      icon: MessageSquare,
+      category: "Text Processing",
+      color: "pink",
+    },
+    {
+      name: "Computer Vision",
+      icon: Camera,
+      category: "Image Processing",
+      color: "cyan",
+    },
+    {
+      name: "Workflow Engines",
+      icon: Workflow,
+      category: "Process Management",
+      color: "lime",
+    },
   ];
 
   return (
@@ -790,7 +1021,7 @@ const AutomationTechStack = () => {
               teal: "bg-teal-500/20 text-teal-400 border-teal-500/30",
               pink: "bg-pink-500/20 text-pink-400 border-pink-500/30",
               cyan: "bg-cyan-500/20 text-cyan-400 border-cyan-500/30",
-              lime: "bg-lime-500/20 text-lime-400 border-lime-500/30"
+              lime: "bg-lime-500/20 text-lime-400 border-lime-500/30",
             };
 
             return (
@@ -798,16 +1029,23 @@ const AutomationTechStack = () => {
                 key={index}
                 initial={{ opacity: 0, y: 20 }}
                 whileInView={{ opacity: 1, y: 0 }}
-                transition={{ duration: 0.5, delay: index * 0.1 }}
+                transition={{ duration: 0.5, delay: index * 0.01 }}
                 viewport={{ once: true }}
                 whileHover={{ y: -5, scale: 1.05 }}
                 className="group"
               >
                 <Card className="bg-gray-900/50 backdrop-blur-md border-gray-800 hover:border-accent/30 transition-all duration-300 shadow-lg hover:shadow-xl rounded-2xl p-4 text-center">
-                  <div className={`w-12 h-12 rounded-lg flex items-center justify-center mx-auto mb-3 ${colorClasses[tech.color as keyof typeof colorClasses] || 'bg-accent/20 text-accent border-accent/30'}`}>
+                  <div
+                    className={`w-12 h-12 rounded-lg flex items-center justify-center mx-auto mb-3 ${
+                      colorClasses[tech.color as keyof typeof colorClasses] ||
+                      "bg-accent/20 text-accent border-accent/30"
+                    }`}
+                  >
                     <IconComponent className="w-6 h-6" />
                   </div>
-                  <h4 className="font-semibold text-white text-sm mb-1">{tech.name}</h4>
+                  <h4 className="font-semibold text-white text-sm mb-1">
+                    {tech.name}
+                  </h4>
                   <p className="text-xs text-gray-400">{tech.category}</p>
                 </Card>
               </motion.div>
@@ -825,30 +1063,36 @@ const AutomationCaseStudies = () => {
     {
       title: "Healthcare Document Automation",
       client: "Regional Healthcare Network",
-      description: "Implemented AI-powered document processing for patient records and insurance claims, reducing processing time by 80% and improving accuracy to 99.5%, saving $1.2M annually.",
-      image: "https://images.unsplash.com/photo-1576091160550-2173dba999ef?w=400&h=300&fit=crop&auto=format",
+      description:
+        "Implemented AI-powered document processing for patient records and insurance claims, reducing processing time by 80% and improving accuracy to 99.5%, saving $1.2M annually.",
+      image:
+        "https://images.unsplash.com/photo-1576091160550-2173dba999ef?w=400&h=300&fit=crop&auto=format",
       results: "80% faster processing, $1.2M annual savings",
       engagement: "4-month automation implementation",
-      gradient: "from-blue-500/20 to-cyan-500/20"
+      gradient: "from-blue-500/20 to-cyan-500/20",
     },
     {
       title: "Manufacturing Quality Control Automation",
       client: "Automotive Parts Manufacturer",
-      description: "Deployed AI-powered visual inspection system with robotic automation, achieving 99.8% defect detection accuracy and reducing quality control costs by 65%.",
-      image: "https://images.unsplash.com/photo-1485827404703-89b55fcc595e?w=400&h=300&fit=crop&auto=format",
+      description:
+        "Deployed AI-powered visual inspection system with robotic automation, achieving 99.8% defect detection accuracy and reducing quality control costs by 65%.",
+      image:
+        "https://images.unsplash.com/photo-1485827404703-89b55fcc595e?w=400&h=300&fit=crop&auto=format",
       results: "99.8% accuracy, 65% cost reduction",
       engagement: "6-month automation project",
-      gradient: "from-green-500/20 to-emerald-500/20"
+      gradient: "from-green-500/20 to-emerald-500/20",
     },
     {
       title: "Financial Services RPA Implementation",
       client: "Investment Management Firm",
-      description: "Automated complex financial reporting and compliance workflows using intelligent RPA, reducing manual effort by 90% and eliminating human errors in regulatory reporting.",
-      image: "https://images.unsplash.com/photo-1551288049-bebda4e38f71?w=400&h=300&fit=crop&auto=format",
+      description:
+        "Automated complex financial reporting and compliance workflows using intelligent RPA, reducing manual effort by 90% and eliminating human errors in regulatory reporting.",
+      image:
+        "https://images.unsplash.com/photo-1551288049-bebda4e38f71?w=400&h=300&fit=crop&auto=format",
       results: "90% manual effort reduction, zero errors",
       engagement: "5-month RPA deployment",
-      gradient: "from-purple-500/20 to-pink-500/20"
-    }
+      gradient: "from-purple-500/20 to-pink-500/20",
+    },
   ];
 
   return (
@@ -864,6 +1108,10 @@ const AutomationCaseStudies = () => {
           <h2 className="text-4xl lg:text-5xl font-semibold text-foreground mb-8">
             Real-World Impact of AI-Powered Automation
           </h2>
+          <p className="mt-4 text-gray-400 max-w-2xl mx-auto">
+            Clear, outcome‑focused heading that sets up the section well. If
+            you’d like, you can pair it with a short lead‑in line like:
+          </p>
         </motion.div>
 
         <motion.div
@@ -878,7 +1126,7 @@ const AutomationCaseStudies = () => {
               key={index}
               initial={{ opacity: 0, y: 20 }}
               whileInView={{ opacity: 1, y: 0 }}
-              transition={{ duration: 0.5, delay: index * 0.1 }}
+              transition={{ duration: 0.5, delay: index * 0.01 }}
               viewport={{ once: true }}
               whileHover={{ y: -8, scale: 1.02 }}
               className="group cursor-pointer"
@@ -894,7 +1142,10 @@ const AutomationCaseStudies = () => {
                         <div className="text-xs text-muted-foreground mb-2 uppercase tracking-wider">
                           {study.client}
                         </div>
-                        <Badge variant="secondary" className="text-xs bg-accent/20 text-accent border-accent/30">
+                        <Badge
+                          variant="secondary"
+                          className="text-xs bg-accent/20 text-accent border-accent/30"
+                        >
                           {study.results}
                         </Badge>
                       </div>
@@ -906,7 +1157,9 @@ const AutomationCaseStudies = () => {
                   </div>
 
                   <div className="px-8 pb-6 flex-1">
-                    <div className={`relative rounded-xl overflow-hidden bg-gradient-to-br ${study.gradient} p-4 border border-white/10`}>
+                    <div
+                      className={`relative rounded-xl overflow-hidden bg-gradient-to-br ${study.gradient} p-4 border border-white/10`}
+                    >
                       <ImageWithFallback
                         src={study.image}
                         alt={study.title}
@@ -933,7 +1186,9 @@ const AutomationCaseStudies = () => {
                       size="sm"
                       className="w-full justify-between text-accent hover:text-accent hover:bg-accent/10 group-hover:translate-x-1 transition-all duration-300 h-auto py-3"
                     >
-                      <span className="text-sm font-medium">VIEW FULL CASE STUDY</span>
+                      <span className="text-sm font-medium">
+                        VIEW FULL CASE STUDY
+                      </span>
                       <ArrowRight className="w-4 h-4" />
                     </Button>
                   </div>
@@ -949,6 +1204,7 @@ const AutomationCaseStudies = () => {
 
 // Mid-Page CTA
 const AutomationInlineCTA = () => {
+  const navigate = useNavigate();
   return (
     <section className="py-20 bg-black">
       <div className="container mx-auto px-6 lg:px-8">
@@ -969,7 +1225,9 @@ const AutomationInlineCTA = () => {
             <div className="inline-block p-[2px] rounded-full bg-gradient-to-r from-accent via-blue-500 to-green-500">
               <div className="bg-black rounded-full px-6 py-3 flex items-center gap-2">
                 <Zap className="w-5 h-5 text-white" />
-                <span className="text-white text-base font-medium">AI Automation</span>
+                <span className="text-white text-base font-medium">
+                  AI Automation
+                </span>
               </div>
             </div>
 
@@ -979,10 +1237,15 @@ const AutomationInlineCTA = () => {
             </h2>
 
             <p className="text-xl text-gray-300 leading-relaxed max-w-2xl mx-auto">
-              Discover how AI can transform your most repetitive and time-consuming tasks.
+              Discover how AI‑powered automation can transform your most
+              repetitive and time‑consuming tasks into streamlined, AI‑driven
+              workflows.
             </p>
 
-            <ShimmerButton className="text-xl px-10 py-5 rounded-2xl shadow-lg hover:shadow-xl">
+            <ShimmerButton
+              className="text-xl px-10 py-5 rounded-2xl shadow-lg hover:shadow-xl"
+              onClick={() => navigate("/start-a-project")}
+            >
               <div className="inline-flex items-center gap-3">
                 <Search className="w-6 h-6 flex-shrink-0" />
                 <span>Get a Free Automation Assessment</span>
@@ -1000,40 +1263,75 @@ const HireAutomationEngineers = () => {
   const engineerTypes = [
     {
       title: "AI Automation Engineers",
-      description: "Specialists in designing and implementing AI-powered automation solutions",
+      description:
+        "Specialists in designing and implementing AI-powered automation solutions",
       icon: Brain,
-      skills: ["AI Integration", "Process Automation", "Machine Learning", "Workflow Design"]
+      skills: [
+        "AI Integration",
+        "Process Automation",
+        "Machine Learning",
+        "Workflow Design",
+      ],
     },
     {
       title: "RPA Developers",
       description: "Experts in robotic process automation and bot development",
       icon: Bot,
-      skills: ["RPA Development", "Bot Creation", "Process Mining", "Exception Handling"]
+      skills: [
+        "RPA Development",
+        "Bot Creation",
+        "Process Mining",
+        "Exception Handling",
+      ],
     },
     {
       title: "Intelligent Process Automation Specialists",
-      description: "Professionals who combine RPA with AI for cognitive automation",
+      description:
+        "Professionals who combine RPA with AI for cognitive automation",
       icon: Workflow,
-      skills: ["IPA Design", "Cognitive Automation", "Decision Trees", "Process Intelligence"]
+      skills: [
+        "IPA Design",
+        "Cognitive Automation",
+        "Decision Trees",
+        "Process Intelligence",
+      ],
     },
     {
       title: "Document Processing Engineers",
-      description: "Specialists in automated document processing and data extraction",
+      description:
+        "Specialists in automated document processing and data extraction",
       icon: FileText,
-      skills: ["OCR Implementation", "Data Extraction", "Document Classification", "Content Analysis"]
+      skills: [
+        "OCR Implementation",
+        "Data Extraction",
+        "Document Classification",
+        "Content Analysis",
+      ],
     },
     {
       title: "Quality Control Automation Engineers",
-      description: "Experts in automated inspection and quality assurance systems",
+      description:
+        "Experts in automated inspection and quality assurance systems",
       icon: CheckCircle,
-      skills: ["Computer Vision", "Defect Detection", "Quality Metrics", "Inspection Automation"]
+      skills: [
+        "Computer Vision",
+        "Defect Detection",
+        "Quality Metrics",
+        "Inspection Automation",
+      ],
     },
     {
       title: "Supply Chain Automation Specialists",
-      description: "Professionals who optimize supply chain operations through AI automation",
+      description:
+        "Professionals who optimize supply chain operations through AI automation",
       icon: Truck,
-      skills: ["Supply Chain Optimization", "Demand Forecasting", "Inventory Management", "Logistics Automation"]
-    }
+      skills: [
+        "Supply Chain Optimization",
+        "Demand Forecasting",
+        "Inventory Management",
+        "Logistics Automation",
+      ],
+    },
   ];
 
   return (
@@ -1050,7 +1348,9 @@ const HireAutomationEngineers = () => {
             Access Expert AI Automation Engineers
           </h2>
           <p className="text-xl text-muted-foreground max-w-3xl mx-auto leading-relaxed">
-            Hire our specialists in RPA, intelligent process automation, and workflow optimization with AI.
+            Hire our specialists in RPA, intelligent process automation, and
+            AI‑driven workflow optimization to build scalable, AI‑powered
+            automation solutions.
           </p>
         </motion.div>
 
@@ -1068,7 +1368,7 @@ const HireAutomationEngineers = () => {
                 key={index}
                 initial={{ opacity: 0, y: 20 }}
                 whileInView={{ opacity: 1, y: 0 }}
-                transition={{ duration: 0.5, delay: index * 0.1 }}
+                transition={{ duration: 0.5, delay: index * 0.01 }}
                 viewport={{ once: true }}
                 whileHover={{ y: -5 }}
                 className="group"
@@ -1085,10 +1385,16 @@ const HireAutomationEngineers = () => {
                       {type.description}
                     </p>
                     <div className="space-y-2">
-                      <h4 className="text-sm font-medium text-foreground">Core Skills:</h4>
+                      <h4 className="text-sm font-medium text-foreground">
+                        Core Skills:
+                      </h4>
                       <div className="flex flex-wrap gap-2">
                         {type.skills.map((skill) => (
-                          <Badge key={skill} variant="secondary" className="text-xs bg-muted/50 text-muted-foreground border-muted">
+                          <Badge
+                            key={skill}
+                            variant="secondary"
+                            className="text-xs bg-muted/50 text-muted-foreground border-muted"
+                          >
                             {skill}
                           </Badge>
                         ))}
@@ -1137,20 +1443,25 @@ const AutomationFAQs = () => {
   const faqs = [
     {
       question: "What types of processes are best suited for AI automation?",
-      answer: "AI automation works best for repetitive, rule-based processes with high volume and predictable patterns. Ideal candidates include data entry, document processing, customer service routing, quality control inspection, invoice processing, and compliance reporting. Processes with clear inputs/outputs, minimal exceptions, and measurable outcomes typically yield the highest ROI. We conduct process assessments to identify automation opportunities that deliver maximum value."
+      answer:
+        "AI automation works best for repetitive, rule‑based processes with high volume and predictable patterns, especially when they feed into AI‑powered mobile and web workflows. Ideal candidates include data entry, document processing, customer service routing, quality control inspection, invoice processing, and compliance reporting. Processes with clear inputs/outputs, minimal exceptions, and measurable outcomes typically yield the highest ROI. We conduct process assessments to identify automation opportunities that deliver maximum value.",
     },
     {
       question: "How do you measure the ROI of AI automation?",
-      answer: "We measure ROI through multiple metrics including time savings (hours reduced), cost savings (labor and operational costs), accuracy improvements (error reduction), productivity gains (throughput increase), and compliance benefits. Our ROI calculation considers implementation costs, ongoing maintenance, and quantifiable benefits over 12-36 months. Most clients see 200-400% ROI within the first year, with payback periods typically ranging from 6-18 months depending on process complexity and volume."
+      answer:
+        "We measure ROI through multiple metrics including time savings (hours reduced), cost savings (labor and operational costs), accuracy improvements (error reduction), productivity gains (throughput increase), and compliance benefits. Our ROI calculation considers implementation costs, ongoing maintenance, and quantifiable benefits over 12–36 months. Most clients see 200–400% ROI within the first year, with payback periods typically ranging from 6–18 months depending on process complexity and volume.",
     },
     {
       question: "What's the difference between RPA and IPA?",
-      answer: "RPA (Robotic Process Automation) handles rule-based, structured tasks by mimicking human actions on screens and systems. IPA (Intelligent Process Automation) combines RPA with AI technologies like machine learning, natural language processing, and computer vision to handle unstructured data and make decisions. While RPA follows predefined rules, IPA can learn, adapt, and handle exceptions. IPA is ideal for complex workflows requiring cognitive capabilities, document understanding, or decision-making based on variable inputs."
+      answer:
+        "RPA (Robotic Process Automation) handles rule‑based, structured tasks by mimicking human actions on screens and systems. IPA (Intelligent Process Automation) combines RPA with AI technologies like machine learning, natural language processing, and computer vision to handle unstructured data and make decisions. While RPA follows predefined rules, IPA can learn, adapt, and handle exceptions. IPA is ideal for complex workflows requiring cognitive capabilities, document understanding, or decision‑making based on variable inputs.",
     },
     {
-      question: "Do you provide training for staff after automation implementation?",
-      answer: "Yes, comprehensive training and change management are integral parts of our automation implementation. We provide role-specific training for system administrators, process owners, and end-users. This includes hands-on workshops, documentation, troubleshooting guides, and ongoing support. Our change management approach ensures smooth adoption, addresses concerns, and helps teams adapt to new workflows. We also offer train-the-trainer programs to build internal capabilities for scaling automation across your organization."
-    }
+      question:
+        "Do you provide training for staff after automation implementation?",
+      answer:
+        "Yes, comprehensive training and change management are integral parts of our automation implementation, including AI‑powered automation projects. We provide role‑specific training for system administrators, process owners, and end‑users. This includes hands-on workshops, documentation, troubleshooting guides, and ongoing support. Our change management approach ensures smooth adoption, addresses concerns, and helps teams adapt to new workflows. We also offer train‑the‑trainer programs to build internal capabilities for scaling automation across your organization.",
+    },
   ];
 
   return (
@@ -1183,7 +1494,9 @@ const AutomationFAQs = () => {
                 className="bg-gray-900/50 backdrop-blur-md rounded-2xl border border-gray-800 px-10 shadow-lg"
               >
                 <AccordionTrigger className="text-left hover:no-underline py-10 text-xl">
-                  <span className="font-semibold text-white">{faq.question}</span>
+                  <span className="font-semibold text-white">
+                    {faq.question}
+                  </span>
                 </AccordionTrigger>
                 <AccordionContent className="text-gray-300 pb-10 text-lg leading-relaxed">
                   {faq.answer}
@@ -1199,6 +1512,7 @@ const AutomationFAQs = () => {
 
 // Final CTA Section
 const AutomationFinalCTA = () => {
+  const navigate = useNavigate();
   return (
     <section className="py-20 relative overflow-hidden">
       <div className="container mx-auto px-6 lg:px-8 relative z-10">
@@ -1219,7 +1533,9 @@ const AutomationFinalCTA = () => {
             <div className="inline-block p-[2px] rounded-full bg-gradient-to-r from-accent via-blue-500 to-green-500">
               <div className="bg-background rounded-full px-6 py-3 flex items-center gap-2">
                 <Zap className="w-5 h-5 text-foreground" />
-                <span className="text-foreground text-base font-medium">AI Automation</span>
+                <span className="text-foreground text-base font-medium">
+                  AI Automation
+                </span>
               </div>
             </div>
           </motion.div>
@@ -1236,7 +1552,9 @@ const AutomationFinalCTA = () => {
             viewport={{ once: true }}
             className="text-xl text-muted-foreground mb-12 max-w-2xl mx-auto leading-relaxed"
           >
-            Drive unprecedented efficiency, accuracy, and scalability by integrating AI into your core business processes.
+            Drive unprecedented efficiency, accuracy, and scalability by
+            integrating AI‑powered automation into your core business processes
+            and workflows.
           </motion.p>
 
           <motion.div
@@ -1246,7 +1564,10 @@ const AutomationFinalCTA = () => {
             viewport={{ once: true }}
             className="space-y-8"
           >
-            <ShimmerButton className="px-12 py-6 text-xl rounded-2xl shadow-2xl hover:shadow-accent/25">
+            <ShimmerButton
+              className="px-12 py-6 text-xl rounded-2xl shadow-2xl hover:shadow-accent/25"
+              onClick={() => navigate("/start-a-project")}
+            >
               <div className="inline-flex items-center gap-3">
                 <Workflow className="w-6 h-6 flex-shrink-0" />
                 <span>Transform Your Workflows</span>
@@ -1274,7 +1595,7 @@ const AutomationFinalCTA = () => {
 export const AIAutomationWorkflows = () => {
   return (
     <div className="dark min-h-screen">
-      <Navigation />
+      {/* <Navigation /> */}
 
       {/* Hero Section */}
       <section className="bg-black">
@@ -1298,7 +1619,7 @@ export const AIAutomationWorkflows = () => {
 
       {/* Tech Stack */}
       <section className="bg-card">
-        <AutomationTechStack />
+        <AIStrategyTargetAudience />
       </section>
 
       {/* Case Studies */}
@@ -1327,9 +1648,7 @@ export const AIAutomationWorkflows = () => {
       </section>
 
       {/* Footer */}
-      <section className="bg-card">
-        <Footer />
-      </section>
+      <section className="bg-background">{/* <Footer /> */}</section>
     </div>
   );
 };

pages/AIChatbotsVirtualAssistants.tsx

@@ -28,21 +28,77 @@ import {
   UserPlus,
   Volume2,
   Workflow,
-  Zap
+  Zap,
 } from "lucide-react";
 import { ImageWithFallback } from "../components/figma/ImageWithFallback";
 import { Footer } from "../components/Footer";
 import { Navigation } from "../components/Navigation";
-import { Accordion, AccordionContent, AccordionItem, AccordionTrigger } from "../components/ui/accordion";
+import {
+  Accordion,
+  AccordionContent,
+  AccordionItem,
+  AccordionTrigger,
+} from "../components/ui/accordion";
 import { Badge } from "../components/ui/badge";
 import { Button } from "../components/ui/button";
 import { Card, CardContent } from "../components/ui/card";
 import { ShimmerButton } from "../components/ui/shimmer-button";
+import { Helmet } from "react-helmet-async";
+import { AIStrategyTargetAudience } from "./AIStrategyConsulting";
+import { useNavigate } from "react-router-dom";
 
 // AI Chatbots & Virtual Assistants Hero Section
 const ChatbotsHeroWithCTA = () => {
+  const navigate = useNavigate();
   return (
     <section className="relative py-20 overflow-hidden bg-black">
+      <Helmet>
+        {/* Page Title and Meta Description */}
+        <title>AI Chatbots & Virtual Assistants | Conversational AI | WDI</title>
+        <meta
+          name="description"
+          content="WDI builds conversational AI solutions, from intelligent chatbots to virtual assistants, enabling automated customer support and natural interactions."
+        />
+
+        {/* Canonical Link */}
+       <link rel="canonical" href="https://www.wdipl.com/services/ai-chatbots-virtual-assistants" />
+
+        {/* Open Graph Tags (for Facebook, LinkedIn) */}
+        <meta property="og:title" content="AI Chatbots & Virtual Assistants | Conversational AI | WDI" />
+        <meta
+          property="og:description"
+          content="WDI builds conversational AI solutions, from intelligent chatbots to virtual assistants, enabling automated customer support and natural interactions."
+        />
+        <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="AI Chatbots & Virtual Assistants | Conversational AI | WDI" />
+        <meta
+          name="twitter:description"
+          content="WDI builds conversational AI solutions, from intelligent chatbots to virtual assistants, enabling automated customer support and natural interactions."
+        />
+        <meta name="twitter:image" content="https://www.wdipl.com/your-preview-image.jpg" />
+
+        {/* Social Profiles (using JSON-LD Schema) */}
+        <script type="application/ld+json">
+          {`
+                              {
+                                "@context": "https://schema.org",
+                                "@type": "Organization",
+                                "name": "WDI",
+                                "url": "https://www.wdipl.com",
+                                "sameAs": [
+                                  "https://www.facebook.com/wdideas",
+                                  "https://www.linkedin.com/in/website-developers-india/",
+                                  "https://www.instagram.com/wdipl/"
+                                ]
+                              }
+                            `}
+        </script>
+      </Helmet>
       <div className="container mx-auto px-6 lg:px-8">
         <div className="grid lg:grid-cols-2 gap-16 items-center min-h-[90vh]">
           <motion.div
@@ -67,7 +123,7 @@ const ChatbotsHeroWithCTA = () => {
               </h1>
 
               <p className="text-lg text-gray-300 leading-relaxed max-w-lg">
-                Building intelligent conversational AI solutions that enhance customer service, streamline internal processes, and provide instant, accurate information.
+                Building intelligent conversational AI solutions that enhance service, automate workflows, and deliver AI‑driven chatbot experiences for your users.
               </p>
             </div>
 
@@ -78,7 +134,10 @@ const ChatbotsHeroWithCTA = () => {
               transition={{ duration: 0.8, delay: 0.3 }}
               className="flex flex-col sm:flex-row gap-4"
             >
-              <ShimmerButton className="text-lg px-8 py-4">
+              <ShimmerButton
+                className="text-lg px-8 py-4"
+                onClick={() => navigate("/start-a-project")}
+              >
                 <div className="inline-flex items-center gap-2">
                   <Bot className="w-5 h-5 flex-shrink-0" />
                   <span>Deploy Your Smart Assistant</span>
@@ -133,10 +192,14 @@ const ChatbotsHeroWithCTA = () => {
                           <Bot className="w-6 h-6 text-white" />
                         </div>
                         <div>
-                          <h3 className="text-white text-sm font-semibold">AI Assistant</h3>
+                          <h3 className="text-white text-sm font-semibold">
+                            AI Assistant
+                          </h3>
                           <div className="flex items-center gap-1">
                             <div className="w-2 h-2 bg-green-400 rounded-full"></div>
-                            <span className="text-xs text-gray-400">Online</span>
+                            <span className="text-xs text-gray-400">
+                              Online
+                            </span>
                           </div>
                         </div>
                       </div>
@@ -156,7 +219,9 @@ const ChatbotsHeroWithCTA = () => {
                         className="flex justify-end"
                       >
                         <div className="bg-accent rounded-2xl rounded-br-sm px-4 py-3 max-w-xs">
-                          <p className="text-white text-sm">I need help with my order status</p>
+                          <p className="text-white text-sm">
+                            I need help with my order status
+                          </p>
                         </div>
                       </motion.div>
 
@@ -171,7 +236,10 @@ const ChatbotsHeroWithCTA = () => {
                           <Bot className="w-4 h-4 text-white" />
                         </div>
                         <div className="bg-gray-800 rounded-2xl rounded-bl-sm px-4 py-3 max-w-xs">
-                          <p className="text-white text-sm">I'd be happy to help you check your order status! Could you please provide your order number?</p>
+                          <p className="text-white text-sm">
+                            I'd be happy to help you check your order status!
+                            Could you please provide your order number?
+                          </p>
                         </div>
                       </motion.div>
 
@@ -198,7 +266,10 @@ const ChatbotsHeroWithCTA = () => {
                           <Bot className="w-4 h-4 text-white" />
                         </div>
                         <div className="bg-gray-800 rounded-2xl rounded-bl-sm px-4 py-3 max-w-sm">
-                          <p className="text-white text-sm mb-3">Great! Your order #ORD-12345 is currently being processed and will ship within 24 hours.</p>
+                          <p className="text-white text-sm mb-3">
+                            Great! Your order #ORD-12345 is currently being
+                            processed and will ship within 24 hours.
+                          </p>
                           <div className="flex gap-2">
                             <button className="bg-blue-500 text-white text-xs px-3 py-1 rounded-lg hover:bg-blue-600 transition-colors">
                               Track Package
@@ -230,12 +301,20 @@ const ChatbotsHeroWithCTA = () => {
                           ></motion.div>
                           <motion.div
                             animate={{ scale: [1, 1.2, 1] }}
-                            transition={{ duration: 1, repeat: Infinity, delay: 0.2 }}
+                            transition={{
+                              duration: 1,
+                              repeat: Infinity,
+                              delay: 0.2,
+                            }}
                             className="w-2 h-2 bg-gray-400 rounded-full"
                           ></motion.div>
                           <motion.div
                             animate={{ scale: [1, 1.2, 1] }}
-                            transition={{ duration: 1, repeat: Infinity, delay: 0.4 }}
+                            transition={{
+                              duration: 1,
+                              repeat: Infinity,
+                              delay: 0.4,
+                            }}
                             className="w-2 h-2 bg-gray-400 rounded-full"
                           ></motion.div>
                         </div>
@@ -331,15 +410,24 @@ const ChatbotsHeroWithCTA = () => {
                 transition={{ duration: 0.8, delay: 3.0 }}
                 className="flex justify-center gap-4 flex-wrap mt-8"
               >
-                <Badge variant="secondary" className="bg-blue-500/20 text-blue-300 border-blue-500/30">
+                <Badge
+                  variant="secondary"
+                  className="bg-blue-500/20 text-blue-300 border-blue-500/30"
+                >
                   <MessageSquare className="w-3 h-3 mr-1" />
                   Conversational
                 </Badge>
-                <Badge variant="secondary" className="bg-green-500/20 text-green-300 border-green-500/30">
+                <Badge
+                  variant="secondary"
+                  className="bg-green-500/20 text-green-300 border-green-500/30"
+                >
                   <Clock className="w-3 h-3 mr-1" />
                   24/7 Available
                 </Badge>
-                <Badge variant="secondary" className="bg-purple-500/20 text-purple-300 border-purple-500/30">
+                <Badge
+                  variant="secondary"
+                  className="bg-purple-500/20 text-purple-300 border-purple-500/30"
+                >
                   <Brain className="w-3 h-3 mr-1" />
                   Intelligent
                 </Badge>
@@ -358,28 +446,29 @@ const ChatbotsBenefits = () => {
     {
       icon: Clock,
       title: "24/7 Availability",
-      description: "Instant support and information around the clock."
+      description: "Instant support and information around the clock.",
     },
     {
       icon: DollarSign,
       title: "Reduced Operational Costs",
-      description: "Automate routine queries, free up human agents."
+      description: "Automate routine queries, free up human agents.",
     },
     {
       icon: ThumbsUp,
       title: "Enhanced Customer Satisfaction",
-      description: "Quick, consistent, and personalized responses."
+      description: "Quick, consistent, and personalized responses.",
     },
     {
       icon: TrendingUp,
       title: "Scalability",
-      description: "Handle high volumes of interactions without increasing headcount."
+      description:
+        "Handle high volumes of interactions without increasing headcount.",
     },
     {
       icon: Zap,
       title: "Improved Efficiency",
-      description: "Streamline internal processes and data collection."
-    }
+      description: "Streamline internal processes and data collection.",
+    },
   ];
 
   return (
@@ -411,7 +500,7 @@ const ChatbotsBenefits = () => {
                 key={index}
                 initial={{ opacity: 0, y: 20 }}
                 whileInView={{ opacity: 1, y: 0 }}
-                transition={{ duration: 0.5, delay: index * 0.1 }}
+                transition={{ duration: 0.5, delay: index * 0.01 }}
                 viewport={{ once: true }}
                 whileHover={{ y: -5 }}
                 className="group"
@@ -481,34 +570,40 @@ const ChatbotDevelopmentProcess = () => {
   const steps = [
     {
       title: "Strategy & Use Case Identification",
-      description: "Analyzing your business needs to identify the most impactful chatbot use cases and defining success metrics.",
-      icon: Target
+      description:
+        "Analyzing your business needs to identify the most impactful chatbot use cases and defining success metrics.",
+      icon: Target,
     },
     {
       title: "Conversation Design & Flow Mapping",
-      description: "Designing intuitive conversation flows and mapping user journeys to ensure natural, engaging interactions.",
-      icon: Workflow
+      description:
+        "Designing intuitive conversation flows and mapping user journeys to ensure natural, engaging interactions.",
+      icon: Workflow,
     },
     {
       title: "NLP Model Training & Development",
-      description: "Training natural language processing models to understand user intents and extract relevant entities accurately.",
-      icon: Brain
+      description:
+        "Training natural language processing models to understand user intents and extract relevant entities accurately.",
+      icon: Brain,
     },
     {
       title: "Integration & Testing",
-      description: "Integrating chatbots with existing systems and conducting comprehensive testing across all conversation scenarios.",
-      icon: PlugIcon
+      description:
+        "Integrating chatbots with existing systems and conducting comprehensive testing across all conversation scenarios.",
+      icon: PlugIcon,
     },
     {
       title: "Deployment & User Training",
-      description: "Deploying chatbots across chosen channels and training your team on management and optimization best practices.",
-      icon: Rocket
+      description:
+        "Deploying chatbots across chosen channels and training your team on management and optimization best practices.",
+      icon: Rocket,
     },
     {
       title: "Performance Monitoring & Iteration",
-      description: "Continuously monitoring chatbot performance and iterating based on user feedback and conversation analytics.",
-      icon: BarChart3
-    }
+      description:
+        "Continuously monitoring chatbot performance and iterating based on user feedback and conversation analytics.",
+      icon: BarChart3,
+    },
   ];
 
   return (
@@ -524,6 +619,9 @@ const ChatbotDevelopmentProcess = () => {
           <h2 className="text-4xl lg:text-5xl font-semibold text-white mb-6">
             Our Comprehensive Approach to Conversational AI
           </h2>
+          <p className="mt-4 text-gray-400 max-w-2xl mx-auto">
+            A focused strategy to design and deploy conversational AI solutions that drive AI‑driven engagement and smarter support across your apps and platforms.
+          </p>
         </motion.div>
 
         <div className="relative">
@@ -542,15 +640,23 @@ const ChatbotDevelopmentProcess = () => {
                   whileInView={{ opacity: 1, x: 0 }}
                   transition={{ duration: 0.8, delay: index * 0.2 }}
                   viewport={{ once: true }}
-                  className={`flex items-center ${isEven ? 'lg:flex-row' : 'lg:flex-row-reverse'} flex-col lg:gap-16 gap-8`}
+                  className={`flex items-center ${
+                    isEven ? "lg:flex-row" : "lg:flex-row-reverse"
+                  } flex-col lg:gap-16 gap-8`}
+                >
+                  <div
+                    className={`flex-1 ${
+                      isEven ? "lg:text-right" : "lg:text-left"
+                    } text-center lg:text-left`}
                   >
-                  <div className={`flex-1 ${isEven ? 'lg:text-right' : 'lg:text-left'} text-center lg:text-left`}>
                     <div className="bg-gray-900/50 backdrop-blur-md rounded-2xl border border-gray-800 p-8 hover:border-accent/30 transition-all duration-300 shadow-lg hover:shadow-xl">
                       <div className="flex items-center gap-4 mb-4 justify-center lg:justify-start">
                         <div className="w-12 h-12 bg-accent/20 rounded-xl flex items-center justify-center">
                           <IconComponent className="w-6 h-6 text-accent" />
                         </div>
-                        <div className="text-2xl font-bold text-accent">0{index + 1}</div>
+                        <div className="text-2xl font-bold text-accent">
+                          0{index + 1}
+                        </div>
                       </div>
                       <h3 className="text-2xl font-semibold text-white mb-4">
                         {step.title}
@@ -582,50 +688,87 @@ const ChatbotServices = () => {
       title: "Customer Service Chatbots",
       description: "Automating support, FAQs, and common inquiries.",
       icon: Headphones,
-      features: ["24/7 Support", "FAQ Automation", "Ticket Routing", "Multi-channel Support"]
+      features: [
+        "24/7 Support",
+        "FAQ Automation",
+        "Ticket Routing",
+        "Multi-channel Support",
+      ],
     },
     {
       title: "Internal Employee Assistants",
       description: "HR, IT, and internal knowledge base bots.",
       icon: UserCheck,
-      features: ["HR Assistance", "IT Support", "Knowledge Base", "Employee Onboarding"]
+      features: [
+        "HR Assistance",
+        "IT Support",
+        "Knowledge Base",
+        "Employee Onboarding",
+      ],
     },
     {
       title: "Sales & Marketing Bots",
-      description: "Lead qualification, product recommendations, personalized offers.",
+      description:
+        "Lead qualification, product recommendations, personalized offers.",
       icon: Target,
-      features: ["Lead Qualification", "Product Recommendations", "Personalized Offers", "Sales Support"]
+      features: [
+        "Lead Qualification",
+        "Product Recommendations",
+        "Personalized Offers",
+        "Sales Support",
+      ],
     },
     {
       title: "Transactional Chatbots",
       description: "Facilitating bookings, orders, and payments.",
       icon: CreditCard,
-      features: ["Order Processing", "Booking Systems", "Payment Integration", "Transaction History"]
+      features: [
+        "Order Processing",
+        "Booking Systems",
+        "Payment Integration",
+        "Transaction History",
+      ],
     },
     {
       title: "Voice AI Assistants",
-      description: "Developing voice-enabled interfaces (e.g., for smart speakers).",
+      description:
+        "Developing voice-enabled interfaces (e.g., for smart speakers).",
       icon: Volume2,
-      features: ["Voice Recognition", "Speech Synthesis", "Smart Speaker Integration", "Voice Commands"]
+      features: [
+        "Voice Recognition",
+        "Speech Synthesis",
+        "Smart Speaker Integration",
+        "Voice Commands",
+      ],
     },
     {
       title: "Omnichannel Deployment",
       description: "Integrating bots across web, mobile, messaging apps.",
       icon: Globe,
-      features: ["Web Integration", "Mobile Apps", "WhatsApp", "Social Media"]
+      features: ["Web Integration", "Mobile Apps", "WhatsApp", "Social Media"],
     },
     {
       title: "Intent Recognition & Entity Extraction",
       description: "Building precise understanding of user queries.",
       icon: Brain,
-      features: ["Intent Classification", "Entity Extraction", "Context Understanding", "Query Processing"]
+      features: [
+        "Intent Classification",
+        "Entity Extraction",
+        "Context Understanding",
+        "Query Processing",
+      ],
     },
     {
       title: "Generative AI Chatbots",
       description: "Leveraging LLMs for more natural, flexible conversations.",
       icon: Sparkles,
-      features: ["Natural Conversations", "Context Awareness", "Dynamic Responses", "LLM Integration"]
-    }
+      features: [
+        "Natural Conversations",
+        "Context Awareness",
+        "Dynamic Responses",
+        "LLM Integration",
+      ],
+    },
   ];
 
   return (
@@ -641,6 +784,9 @@ const ChatbotServices = () => {
           <h2 className="text-4xl lg:text-5xl font-semibold text-foreground mb-6">
             Our Specialized Conversational AI Solutions
           </h2>
+          <p className="mt-4 text-gray-400 max-w-2xl mx-auto">
+            Focused conversational AI products that deliver AI‑driven engagement, automate support, and streamline workflows for your apps and teams.
+          </p>
         </motion.div>
 
         <motion.div
@@ -657,7 +803,7 @@ const ChatbotServices = () => {
                 key={index}
                 initial={{ opacity: 0, y: 20 }}
                 whileInView={{ opacity: 1, y: 0 }}
-                transition={{ duration: 0.5, delay: index * 0.1 }}
+                transition={{ duration: 0.5, delay: index * 0.01 }}
                 viewport={{ once: true }}
                 whileHover={{ y: -5 }}
                 className="group"
@@ -674,10 +820,16 @@ const ChatbotServices = () => {
                       {service.description}
                     </p>
                     <div className="space-y-2">
-                      <h4 className="text-xs font-medium text-foreground">Key Features:</h4>
+                      <h4 className="text-xs font-medium text-foreground">
+                        Key Features:
+                      </h4>
                       <div className="flex flex-wrap gap-1">
                         {service.features.map((feature) => (
-                          <Badge key={feature} variant="secondary" className="text-xs bg-muted/50 text-muted-foreground border-muted">
+                          <Badge
+                            key={feature}
+                            variant="secondary"
+                            className="text-xs bg-muted/50 text-muted-foreground border-muted"
+                          >
                             {feature}
                           </Badge>
                         ))}
@@ -697,19 +849,59 @@ const ChatbotServices = () => {
 // Chatbot Tech Stack
 const ChatbotTechStack = () => {
   const technologies = [
-    { name: "Google Dialogflow", icon: MessageSquare, category: "Chatbot Platform", color: "blue" },
-    { name: "IBM Watson Assistant", icon: Brain, category: "AI Platform", color: "blue" },
-    { name: "Microsoft Bot Framework", icon: Bot, category: "Bot Platform", color: "blue" },
-    { name: "Amazon Lex", icon: CloudCog, category: "AWS Service", color: "orange" },
+    {
+      name: "Google Dialogflow",
+      icon: MessageSquare,
+      category: "Chatbot Platform",
+      color: "blue",
+    },
+    {
+      name: "IBM Watson Assistant",
+      icon: Brain,
+      category: "AI Platform",
+      color: "blue",
+    },
+    {
+      name: "Microsoft Bot Framework",
+      icon: Bot,
+      category: "Bot Platform",
+      color: "blue",
+    },
+    {
+      name: "Amazon Lex",
+      icon: CloudCog,
+      category: "AWS Service",
+      color: "orange",
+    },
     { name: "Rasa", icon: Code, category: "Open Source", color: "purple" },
-    { name: "OpenAI (GPT)", icon: Sparkles, category: "Language Model", color: "green" },
+    {
+      name: "OpenAI (GPT)",
+      icon: Sparkles,
+      category: "Language Model",
+      color: "green",
+    },
     { name: "Python", icon: Code, category: "Programming", color: "blue" },
     { name: "Node.js", icon: Server, category: "Runtime", color: "green" },
     { name: "NLTK", icon: FileText, category: "NLP Library", color: "green" },
     { name: "spaCy", icon: Brain, category: "NLP Library", color: "blue" },
-    { name: "WhatsApp", icon: MessageSquare, category: "Messaging", color: "green" },
-    { name: "Slack", icon: MessageSquare, category: "Messaging", color: "purple" },
-    { name: "FB Messenger", icon: MessageSquare, category: "Messaging", color: "blue" }
+    {
+      name: "WhatsApp",
+      icon: MessageSquare,
+      category: "Messaging",
+      color: "green",
+    },
+    {
+      name: "Slack",
+      icon: MessageSquare,
+      category: "Messaging",
+      color: "purple",
+    },
+    {
+      name: "FB Messenger",
+      icon: MessageSquare,
+      category: "Messaging",
+      color: "blue",
+    },
   ];
 
   return (
@@ -743,7 +935,7 @@ const ChatbotTechStack = () => {
               blue: "bg-blue-500/20 text-blue-400 border-blue-500/30",
               orange: "bg-orange-500/20 text-orange-400 border-orange-500/30",
               green: "bg-green-500/20 text-green-400 border-green-500/30",
-              purple: "bg-purple-500/20 text-purple-400 border-purple-500/30"
+              purple: "bg-purple-500/20 text-purple-400 border-purple-500/30",
             };
 
             return (
@@ -751,16 +943,23 @@ const ChatbotTechStack = () => {
                 key={index}
                 initial={{ opacity: 0, y: 20 }}
                 whileInView={{ opacity: 1, y: 0 }}
-                transition={{ duration: 0.5, delay: index * 0.1 }}
+                transition={{ duration: 0.5, delay: index * 0.01 }}
                 viewport={{ once: true }}
                 whileHover={{ y: -5, scale: 1.05 }}
                 className="group"
               >
                 <Card className="bg-gray-900/50 backdrop-blur-md border-gray-800 hover:border-accent/30 transition-all duration-300 shadow-lg hover:shadow-xl rounded-2xl p-4 text-center">
-                  <div className={`w-12 h-12 rounded-lg flex items-center justify-center mx-auto mb-3 ${colorClasses[tech.color as keyof typeof colorClasses] || 'bg-accent/20 text-accent border-accent/30'}`}>
+                  <div
+                    className={`w-12 h-12 rounded-lg flex items-center justify-center mx-auto mb-3 ${
+                      colorClasses[tech.color as keyof typeof colorClasses] ||
+                      "bg-accent/20 text-accent border-accent/30"
+                    }`}
+                  >
                     <IconComponent className="w-6 h-6" />
                   </div>
-                  <h4 className="font-semibold text-white text-sm mb-1">{tech.name}</h4>
+                  <h4 className="font-semibold text-white text-sm mb-1">
+                    {tech.name}
+                  </h4>
                   <p className="text-xs text-gray-400">{tech.category}</p>
                 </Card>
               </motion.div>
@@ -778,30 +977,36 @@ const ChatbotCaseStudies = () => {
     {
       title: "Customer Service Automation",
       client: "E-commerce Retail Company",
-      description: "Deployed AI chatbot handling 80% of customer inquiries automatically, reducing response time by 90% and support costs by 60% while maintaining 95% customer satisfaction.",
-      image: "https://images.unsplash.com/photo-1516321318423-f06f85e504b3?w=400&h=300&fit=crop&auto=format",
+      description:
+        "Deployed AI chatbot handling 80% of customer inquiries automatically, reducing response time by 90% and support costs by 60% while maintaining 95% customer satisfaction.",
+      image:
+        "https://images.unsplash.com/photo-1516321318423-f06f85e504b3?w=400&h=300&fit=crop&auto=format",
       results: "90% faster response, 60% cost reduction",
       engagement: "3-month chatbot deployment",
-      gradient: "from-blue-500/20 to-cyan-500/20"
+      gradient: "from-blue-500/20 to-cyan-500/20",
     },
     {
       title: "Internal HR Assistant",
       client: "Fortune 500 Technology Company",
-      description: "Built intelligent HR chatbot for employee queries, policy information, and leave management, handling 70% of HR requests and reducing HR workload by 50%.",
-      image: "https://images.unsplash.com/photo-1521791136064-7986c2920216?w=400&h=300&fit=crop&auto=format",
+      description:
+        "Built intelligent HR chatbot for employee queries, policy information, and leave management, handling 70% of HR requests and reducing HR workload by 50%.",
+      image:
+        "https://images.unsplash.com/photo-1521791136064-7986c2920216?w=400&h=300&fit=crop&auto=format",
       results: "70% automation rate, 50% workload reduction",
       engagement: "4-month HR bot project",
-      gradient: "from-green-500/20 to-emerald-500/20"
+      gradient: "from-green-500/20 to-emerald-500/20",
     },
     {
       title: "Sales Lead Qualification Bot",
       client: "B2B Software Solutions Provider",
-      description: "Implemented AI-powered sales chatbot for lead qualification and product recommendations, increasing qualified leads by 120% and sales team efficiency by 45%.",
-      image: "https://images.unsplash.com/photo-1556761175-b413da4baf72?w=400&h=300&fit=crop&auto=format",
+      description:
+        "Implemented AI-powered sales chatbot for lead qualification and product recommendations, increasing qualified leads by 120% and sales team efficiency by 45%.",
+      image:
+        "https://images.unsplash.com/photo-1556761175-b413da4baf72?w=400&h=300&fit=crop&auto=format",
       results: "120% more qualified leads, 45% efficiency gain",
       engagement: "5-month sales bot implementation",
-      gradient: "from-purple-500/20 to-pink-500/20"
-    }
+      gradient: "from-purple-500/20 to-pink-500/20",
+    },
   ];
 
   return (
@@ -817,6 +1022,9 @@ const ChatbotCaseStudies = () => {
           <h2 className="text-4xl lg:text-5xl font-semibold text-foreground mb-8">
             Intelligent Chatbots Driving Customer Engagement
           </h2>
+          <p className="mt-4 text-gray-400 max-w-2xl mx-auto">
+            Smarter conversational AI bots that guide users, automate support, and drive higher engagement throughout the customer journey.
+          </p>
         </motion.div>
 
         <motion.div
@@ -831,7 +1039,7 @@ const ChatbotCaseStudies = () => {
               key={index}
               initial={{ opacity: 0, y: 20 }}
               whileInView={{ opacity: 1, y: 0 }}
-              transition={{ duration: 0.5, delay: index * 0.1 }}
+              transition={{ duration: 0.5, delay: index * 0.01 }}
               viewport={{ once: true }}
               whileHover={{ y: -8, scale: 1.02 }}
               className="group cursor-pointer"
@@ -847,7 +1055,10 @@ const ChatbotCaseStudies = () => {
                         <div className="text-xs text-muted-foreground mb-2 uppercase tracking-wider">
                           {study.client}
                         </div>
-                        <Badge variant="secondary" className="text-xs bg-accent/20 text-accent border-accent/30">
+                        <Badge
+                          variant="secondary"
+                          className="text-xs bg-accent/20 text-accent border-accent/30"
+                        >
                           {study.results}
                         </Badge>
                       </div>
@@ -859,7 +1070,9 @@ const ChatbotCaseStudies = () => {
                   </div>
 
                   <div className="px-8 pb-6 flex-1">
-                    <div className={`relative rounded-xl overflow-hidden bg-gradient-to-br ${study.gradient} p-4 border border-white/10`}>
+                    <div
+                      className={`relative rounded-xl overflow-hidden bg-gradient-to-br ${study.gradient} p-4 border border-white/10`}
+                    >
                       <ImageWithFallback
                         src={study.image}
                         alt={study.title}
@@ -886,7 +1099,9 @@ const ChatbotCaseStudies = () => {
                       size="sm"
                       className="w-full justify-between text-accent hover:text-accent hover:bg-accent/10 group-hover:translate-x-1 transition-all duration-300 h-auto py-3"
                     >
-                      <span className="text-sm font-medium">VIEW FULL CASE STUDY</span>
+                      <span className="text-sm font-medium">
+                        VIEW FULL CASE STUDY
+                      </span>
                       <ArrowRight className="w-4 h-4" />
                     </Button>
                   </div>
@@ -902,6 +1117,7 @@ const ChatbotCaseStudies = () => {
 
 // Mid-Page CTA
 const ChatbotInlineCTA = () => {
+  const navigate = useNavigate();
   return (
     <section className="py-20 bg-black">
       <div className="container mx-auto px-6 lg:px-8">
@@ -922,7 +1138,9 @@ const ChatbotInlineCTA = () => {
             <div className="inline-block p-[2px] rounded-full bg-gradient-to-r from-accent via-blue-500 to-green-500">
               <div className="bg-black rounded-full px-6 py-3 flex items-center gap-2">
                 <Bot className="w-5 h-5 text-white" />
-                <span className="text-white text-base font-medium">Conversational AI</span>
+                <span className="text-white text-base font-medium">
+                  Conversational AI
+                </span>
               </div>
             </div>
 
@@ -932,10 +1150,13 @@ const ChatbotInlineCTA = () => {
             </h2>
 
             <p className="text-xl text-gray-300 leading-relaxed max-w-2xl mx-auto">
-              Let's discuss how conversational AI can transform your interactions.
+              Let’s discuss how conversational AI can transform your interactions through AI‑powered chatbots that automate support, personalize journeys, and deliver instant, accurate answers.
             </p>
 
-            <ShimmerButton className="text-xl px-10 py-5 rounded-2xl shadow-lg hover:shadow-xl">
+            <ShimmerButton
+              className="text-xl px-10 py-5 rounded-2xl shadow-lg hover:shadow-xl"
+              onClick={() => navigate("/start-a-project")}
+            >
               <div className="inline-flex items-center gap-3">
                 <MessageSquare className="w-6 h-6 flex-shrink-0" />
                 <span>Get a Free Chatbot Consultation</span>
@@ -953,40 +1174,75 @@ const HireChatbotDevelopers = () => {
   const specialistTypes = [
     {
       title: "Conversational AI Engineers",
-      description: "Specialists in building intelligent chatbots and virtual assistants",
+      description:
+        "Specialists in building intelligent chatbots and virtual assistants",
       icon: Bot,
-      skills: ["Chatbot Development", "NLP Integration", "Conversation Design", "API Integration"]
+      skills: [
+        "Chatbot Development",
+        "NLP Integration",
+        "Conversation Design",
+        "API Integration",
+      ],
     },
     {
       title: "NLP Engineers",
       description: "Experts in natural language processing and understanding",
       icon: Brain,
-      skills: ["Intent Recognition", "Entity Extraction", "Language Models", "Text Processing"]
+      skills: [
+        "Intent Recognition",
+        "Entity Extraction",
+        "Language Models",
+        "Text Processing",
+      ],
     },
     {
       title: "Conversation Designers",
-      description: "UX specialists focused on designing natural conversation flows",
+      description:
+        "UX specialists focused on designing natural conversation flows",
       icon: MessageSquare,
-      skills: ["Conversation Flow", "User Journey Mapping", "Voice & Tone", "UX Writing"]
+      skills: [
+        "Conversation Flow",
+        "User Journey Mapping",
+        "Voice & Tone",
+        "UX Writing",
+      ],
     },
     {
       title: "Voice AI Engineers",
-      description: "Specialists in developing voice-enabled assistants and interfaces",
+      description:
+        "Specialists in developing voice-enabled assistants and interfaces",
       icon: Volume2,
-      skills: ["Speech Recognition", "Text-to-Speech", "Voice UI", "Audio Processing"]
+      skills: [
+        "Speech Recognition",
+        "Text-to-Speech",
+        "Voice UI",
+        "Audio Processing",
+      ],
     },
     {
       title: "AI Model Trainers",
-      description: "Data scientists specializing in training and fine-tuning chatbot models",
+      description:
+        "Data scientists specializing in training and fine-tuning chatbot models",
       icon: Target,
-      skills: ["Model Training", "Data Curation", "Performance Optimization", "A/B Testing"]
+      skills: [
+        "Model Training",
+        "Data Curation",
+        "Performance Optimization",
+        "A/B Testing",
+      ],
     },
     {
       title: "Integration Specialists",
-      description: "Engineers focused on chatbot integration with existing systems",
+      description:
+        "Engineers focused on chatbot integration with existing systems",
       icon: PlugIcon,
-      skills: ["System Integration", "API Development", "Database Connectivity", "Platform Deployment"]
-    }
+      skills: [
+        "System Integration",
+        "API Development",
+        "Database Connectivity",
+        "Platform Deployment",
+      ],
+    },
   ];
 
   return (
@@ -1003,7 +1259,7 @@ const HireChatbotDevelopers = () => {
             Access Expert Chatbot & Virtual Assistant Developers
           </h2>
           <p className="text-xl text-muted-foreground max-w-3xl mx-auto leading-relaxed">
-            Hire our specialists in NLP, conversation design, and AI model training for cutting-edge chatbots.
+            Leverage deep‑domain specialists in NLP and conversation design to create AI‑powered chatbots that fit your voice, workflows, and user‑experience goals.
           </p>
         </motion.div>
 
@@ -1021,7 +1277,7 @@ const HireChatbotDevelopers = () => {
                 key={index}
                 initial={{ opacity: 0, y: 20 }}
                 whileInView={{ opacity: 1, y: 0 }}
-                transition={{ duration: 0.5, delay: index * 0.1 }}
+                transition={{ duration: 0.5, delay: index * 0.01 }}
                 viewport={{ once: true }}
                 whileHover={{ y: -5 }}
                 className="group"
@@ -1038,10 +1294,16 @@ const HireChatbotDevelopers = () => {
                       {type.description}
                     </p>
                     <div className="space-y-2">
-                      <h4 className="text-sm font-medium text-foreground">Core Skills:</h4>
+                      <h4 className="text-sm font-medium text-foreground">
+                        Core Skills:
+                      </h4>
                       <div className="flex flex-wrap gap-2">
                         {type.skills.map((skill) => (
-                          <Badge key={skill} variant="secondary" className="text-xs bg-muted/50 text-muted-foreground border-muted">
+                          <Badge
+                            key={skill}
+                            variant="secondary"
+                            className="text-xs bg-muted/50 text-muted-foreground border-muted"
+                          >
                             {skill}
                           </Badge>
                         ))}
@@ -1089,21 +1351,26 @@ const HireChatbotDevelopers = () => {
 const ChatbotFAQs = () => {
   const faqs = [
     {
-      question: "What is the difference between a rule-based chatbot and an AI chatbot?",
-      answer: "Rule-based chatbots follow predefined decision trees and can only respond to specific keywords or phrases they're programmed to recognize. They're limited to scripted responses and can't handle variations in user queries. AI chatbots, on the other hand, use natural language processing and machine learning to understand user intent, context, and variations in language. They can learn from conversations, handle complex queries, understand synonyms and context, and provide more natural, human-like responses. AI chatbots are more flexible, scalable, and capable of handling unexpected user inputs."
+      question:
+        "What is the difference between a rule‑based chatbot and an AI chatbot?",
+      answer:
+        "Rule‑based chatbots follow predefined decision trees and can only respond to specific keywords or phrases they are programmed to recognize. They are limited to scripted responses and cannot handle variations in user queries. AI chatbots, in contrast, use natural language processing (NLP) and machine learning to understand user intent, context, and variations in language. They learn from conversations, handle complex queries, recognize synonyms and context shifts, and provide more natural, human‑like responses. AI chatbots are more flexible, scalable, and able to cope with unexpected inputs.",
     },
     {
       question: "How long does it take to develop a custom chatbot?",
-      answer: "The development timeline varies based on complexity and requirements. A simple rule-based chatbot can be developed in 2-4 weeks, while a basic AI chatbot typically takes 6-8 weeks. More sophisticated conversational AI with advanced NLP, multiple integrations, and custom training can take 3-6 months. Factors affecting timeline include: conversation complexity, number of integrations, training data availability, multi-language support, voice capabilities, and testing requirements. We provide detailed project timelines during the planning phase based on your specific needs."
+      answer:
+        "The development timeline depends on scope and complexity. A simple rule‑based chatbot can be built in 2–4 weeks, while a basic AI chatbot typically takes 6–8 weeks. More sophisticated conversational AI with advanced NLP, multiple integrations, and custom training usually requires 3–6 months. Key factors affecting the timeline include conversation complexity, the number of integrations, availability of training data, multi‑language support, voice capabilities, and testing depth. We provide a detailed, project‑specific timeline during the planning phase.",
     },
     {
       question: "Can a chatbot integrate with my existing CRM/ERP system?",
-      answer: "Yes, chatbots can integrate with virtually any CRM, ERP, or business system through APIs, webhooks, or direct database connections. Common integrations include Salesforce, HubSpot, Microsoft Dynamics, SAP, Oracle, Zendesk, and custom systems. Integration capabilities include: retrieving customer information, updating records, creating tickets, processing orders, scheduling appointments, and accessing knowledge bases. We ensure secure, real-time data synchronization while maintaining data privacy and system performance. The integration complexity depends on your system's API capabilities and security requirements."
+      answer:
+        "Yes. Chatbots can integrate with virtually any CRM, ERP, or business system using APIs, webhooks, or direct database connections. Common integrations include Salesforce, HubSpot, Microsoft Dynamics, SAP, Oracle, Zendesk, and custom‑built platforms. Typical integration capabilities include retrieving customer profiles, updating records, creating support tickets, processing orders, scheduling appointments, and accessing knowledge bases. We ensure secure, real‑time data sync, maintain data‑privacy standards, and optimize for system performance. Complexity depends on your system’s API maturity and security requirements.",
     },
     {
       question: "How do you measure the success of a chatbot?",
-      answer: "Chatbot success is measured through multiple key performance indicators (KPIs): User Engagement (conversation completion rate, session duration, return users), Resolution Metrics (first contact resolution, escalation rate, successful task completion), Customer Satisfaction (CSAT scores, user feedback ratings, Net Promoter Score), Operational Efficiency (response time, cost per interaction, agent workload reduction), and Business Impact (lead generation, conversion rates, cost savings). We implement comprehensive analytics dashboards to track these metrics in real-time and provide regular performance reports with actionable insights for continuous improvement."
-    }
+      answer:
+        "We implement analytics dashboards that monitor these KPIs in real time and deliver regular performance reports with actionable recommendations for continuous improvement.",
+    },
   ];
 
   return (
@@ -1136,7 +1403,9 @@ const ChatbotFAQs = () => {
                 className="bg-gray-900/50 backdrop-blur-md rounded-2xl border border-gray-800 px-10 shadow-lg"
               >
                 <AccordionTrigger className="text-left hover:no-underline py-10 text-xl">
-                  <span className="font-semibold text-white">{faq.question}</span>
+                  <span className="font-semibold text-white">
+                    {faq.question}
+                  </span>
                 </AccordionTrigger>
                 <AccordionContent className="text-gray-300 pb-10 text-lg leading-relaxed">
                   {faq.answer}
@@ -1152,6 +1421,7 @@ const ChatbotFAQs = () => {
 
 // Final CTA Section
 const ChatbotFinalCTA = () => {
+  const navigate = useNavigate();
   return (
     <section className="py-20 relative overflow-hidden">
       <div className="container mx-auto px-6 lg:px-8 relative z-10">
@@ -1172,7 +1442,9 @@ const ChatbotFinalCTA = () => {
             <div className="inline-block p-[2px] rounded-full bg-gradient-to-r from-accent via-blue-500 to-green-500">
               <div className="bg-background rounded-full px-6 py-3 flex items-center gap-2">
                 <Bot className="w-5 h-5 text-foreground" />
-                <span className="text-foreground text-base font-medium">Conversational AI</span>
+                <span className="text-foreground text-base font-medium">
+                  Conversational AI
+                </span>
               </div>
             </div>
           </motion.div>
@@ -1189,7 +1461,8 @@ const ChatbotFinalCTA = () => {
             viewport={{ once: true }}
             className="text-xl text-muted-foreground mb-12 max-w-2xl mx-auto leading-relaxed"
           >
-            Empower your business with AI-driven chatbots and virtual assistants that engage, inform, and convert.
+            Empower your business with AI-driven chatbots and virtual assistants
+            that engage, inform, and convert.
           </motion.p>
 
           <motion.div
@@ -1199,7 +1472,10 @@ const ChatbotFinalCTA = () => {
             viewport={{ once: true }}
             className="space-y-8"
           >
-            <ShimmerButton className="px-12 py-6 text-xl rounded-2xl shadow-2xl hover:shadow-accent/25">
+            <ShimmerButton
+              className="px-12 py-6 text-xl rounded-2xl shadow-2xl hover:shadow-accent/25"
+              onClick={() => navigate("/start-a-project")}
+            >
               <div className="inline-flex items-center gap-3">
                 <MessageSquare className="w-6 h-6 flex-shrink-0" />
                 <span>Deploy Your Chatbot Today</span>
@@ -1227,7 +1503,7 @@ const ChatbotFinalCTA = () => {
 export const AIChatbotsVirtualAssistants = () => {
   return (
     <div className="dark min-h-screen">
-      <Navigation />
+      {/* <Navigation /> */}
 
       {/* Hero Section */}
       <section className="bg-black">
@@ -1251,7 +1527,7 @@ export const AIChatbotsVirtualAssistants = () => {
 
       {/* Tech Stack */}
       <section className="bg-card">
-        <ChatbotTechStack />
+        <AIStrategyTargetAudience />
       </section>
 
       {/* Case Studies */}
@@ -1281,7 +1557,7 @@ export const AIChatbotsVirtualAssistants = () => {
 
       {/* Footer */}
       <section className="bg-card">
-        <Footer />
+        {/* <Footer /> */}
       </section>
     </div>
   );

pages/AIModelDeploymentMLOps.tsx

@@ -28,21 +28,77 @@ import {
   TrendingUp,
   UserPlus,
   Workflow,
-  Zap
+  Zap,
 } from "lucide-react";
 import { ImageWithFallback } from "../components/figma/ImageWithFallback";
 import { Footer } from "../components/Footer";
 import { Navigation } from "../components/Navigation";
-import { Accordion, AccordionContent, AccordionItem, AccordionTrigger } from "../components/ui/accordion";
+import {
+  Accordion,
+  AccordionContent,
+  AccordionItem,
+  AccordionTrigger,
+} from "../components/ui/accordion";
 import { Badge } from "../components/ui/badge";
 import { Button } from "../components/ui/button";
 import { Card, CardContent } from "../components/ui/card";
 import { ShimmerButton } from "../components/ui/shimmer-button";
+import { useNavigate } from "react-router-dom";
+import { Helmet } from "react-helmet-async";
+import { AIStrategyTargetAudience } from "./AIStrategyConsulting";
 
 // AI Model Deployment & MLOps Hero Section
 const MLOpsHeroWithCTA = () => {
+  const navigate = useNavigate();
   return (
     <section className="relative py-20 overflow-hidden bg-black">
+      <Helmet>
+        {/* Page Title and Meta Description */}
+        <title>AI Model Deployment | Strategic MLOps Services | WDI</title>
+        <meta
+          name="description"
+          content="WDI delivers robust MLOps for scalable AI model deployment. Ensure performance, security, and lifecycle management with enterprise-grade processes."
+        />
+
+        {/* Canonical Link */}
+        <link rel="canonical" href="https://www.wdipl.com/services/ai-model-deployment-mlops" />
+
+        {/* Open Graph Tags (for Facebook, LinkedIn) */}
+        <meta property="og:title" content="AI Model Deployment | Strategic MLOps Services | WDI" />
+        <meta
+          property="og:description"
+          content="WDI delivers robust MLOps for scalable AI model deployment. Ensure performance, security, and lifecycle management with enterprise-grade processes."
+        />
+        <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="AI Model Deployment | Strategic MLOps Services | WDI" />
+        <meta
+          name="twitter:description"
+          content="WDI delivers robust MLOps for scalable AI model deployment. Ensure performance, security, and lifecycle management with enterprise-grade processes."
+        />
+        <meta name="twitter:image" content="https://www.wdipl.com/your-preview-image.jpg" />
+
+        {/* Social Profiles (using JSON-LD Schema) */}
+        <script type="application/ld+json">
+          {`
+                              {
+                                "@context": "https://schema.org",
+                                "@type": "Organization",
+                                "name": "WDI",
+                                "url": "https://www.wdipl.com",
+                                "sameAs": [
+                                  "https://www.facebook.com/wdideas",
+                                  "https://www.linkedin.com/in/website-developers-india/",
+                                  "https://www.instagram.com/wdipl/"
+                                ]
+                              }
+                            `}
+        </script>
+      </Helmet>
       <div className="container mx-auto px-6 lg:px-8">
         <div className="grid lg:grid-cols-2 gap-16 items-center min-h-[90vh]">
           <motion.div
@@ -67,7 +123,7 @@ const MLOpsHeroWithCTA = () => {
               </h1>
 
               <p className="text-lg text-gray-300 leading-relaxed max-w-lg">
-                Ensuring your Machine Learning models are seamlessly deployed, efficiently managed, and continuously optimized for peak performance in production environments.
+                Streamline AI model deployment and MLOps workflows to deploy, monitor, and optimize machine learning models in production, ensuring reliable, scalable, and high‑performance AI systems.
               </p>
             </div>
 
@@ -78,7 +134,10 @@ const MLOpsHeroWithCTA = () => {
               transition={{ duration: 0.8, delay: 0.3 }}
               className="flex flex-col sm:flex-row gap-4"
             >
-              <ShimmerButton className="text-lg px-8 py-4">
+              <ShimmerButton
+                className="text-lg px-8 py-4"
+                onClick={() => navigate("/start-a-project")}
+              >
                 <div className="inline-flex items-center gap-2">
                   <Rocket className="w-5 h-5 flex-shrink-0" />
                   <span>Optimize Your ML Operations</span>
@@ -91,7 +150,7 @@ const MLOpsHeroWithCTA = () => {
               >
                 <div className="inline-flex items-center gap-2">
                   <MessageSquare className="w-5 h-5 flex-shrink-0" />
-                  <span>Request MLOps Consultation</span>
+                  <span>Request Consultation</span>
                 </div>
               </Button>
             </motion.div>
@@ -133,8 +192,12 @@ const MLOpsHeroWithCTA = () => {
                           <BarChart3 className="w-6 h-6 text-white" />
                         </div>
                         <div>
-                          <h3 className="text-white text-sm font-semibold">MLOps Dashboard</h3>
-                          <p className="text-gray-400 text-xs">Model Performance Monitoring</p>
+                          <h3 className="text-white text-sm font-semibold">
+                            MLOps Dashboard
+                          </h3>
+                          <p className="text-gray-400 text-xs">
+                            Model Performance Monitoring
+                          </p>
                         </div>
                       </div>
                       <div className="flex items-center gap-1">
@@ -157,8 +220,12 @@ const MLOpsHeroWithCTA = () => {
                             <Database className="w-4 h-4 text-white" />
                           </div>
                           <div className="flex-1">
-                            <div className="text-white text-xs font-medium">Data Pipeline</div>
-                            <div className="text-blue-300 text-xs">Processing new data</div>
+                            <div className="text-white text-xs font-medium">
+                              Data Pipeline
+                            </div>
+                            <div className="text-blue-300 text-xs">
+                              Processing new data
+                            </div>
                           </div>
                           <div className="flex items-center gap-1">
                             <div className="w-2 h-2 bg-green-400 rounded-full"></div>
@@ -179,12 +246,20 @@ const MLOpsHeroWithCTA = () => {
                             <Brain className="w-4 h-4 text-white" />
                           </div>
                           <div className="flex-1">
-                            <div className="text-white text-xs font-medium">Model Training</div>
-                            <div className="text-purple-300 text-xs">Epoch 85/100</div>
+                            <div className="text-white text-xs font-medium">
+                              Model Training
+                            </div>
+                            <div className="text-purple-300 text-xs">
+                              Epoch 85/100
+                            </div>
                           </div>
                           <motion.div
                             animate={{ rotate: [0, 360] }}
-                            transition={{ duration: 2, repeat: Infinity, ease: "linear" }}
+                            transition={{
+                              duration: 2,
+                              repeat: Infinity,
+                              ease: "linear",
+                            }}
                             className="w-4 h-4 text-purple-400"
                           >
                             <Loader className="w-4 h-4" />
@@ -204,8 +279,12 @@ const MLOpsHeroWithCTA = () => {
                             <CheckCircle className="w-4 h-4 text-white" />
                           </div>
                           <div className="flex-1">
-                            <div className="text-white text-xs font-medium">Validation</div>
-                            <div className="text-green-300 text-xs">Accuracy: 94.2%</div>
+                            <div className="text-white text-xs font-medium">
+                              Validation
+                            </div>
+                            <div className="text-green-300 text-xs">
+                              Accuracy: 94.2%
+                            </div>
                           </div>
                           <div className="flex items-center gap-1">
                             <div className="w-2 h-2 bg-green-400 rounded-full"></div>
@@ -226,8 +305,12 @@ const MLOpsHeroWithCTA = () => {
                             <Rocket className="w-4 h-4 text-white" />
                           </div>
                           <div className="flex-1">
-                            <div className="text-white text-xs font-medium">Deployment</div>
-                            <div className="text-orange-300 text-xs">Rolling out v2.1.3</div>
+                            <div className="text-white text-xs font-medium">
+                              Deployment
+                            </div>
+                            <div className="text-orange-300 text-xs">
+                              Rolling out v2.1.3
+                            </div>
                           </div>
                           <motion.div
                             animate={{ scale: [1, 1.2, 1] }}
@@ -246,11 +329,15 @@ const MLOpsHeroWithCTA = () => {
                       className="grid grid-cols-2 gap-3"
                     >
                       <div className="p-3 bg-gradient-to-br from-accent/20 to-blue-500/20 rounded-lg border border-accent/30">
-                        <div className="text-accent text-lg font-bold">99.9%</div>
+                        <div className="text-accent text-lg font-bold">
+                          99.9%
+                        </div>
                         <div className="text-white text-xs">Uptime</div>
                       </div>
                       <div className="p-3 bg-gradient-to-br from-green-500/20 to-emerald-500/20 rounded-lg border border-green-500/30">
-                        <div className="text-green-400 text-lg font-bold">12ms</div>
+                        <div className="text-green-400 text-lg font-bold">
+                          12ms
+                        </div>
                         <div className="text-white text-xs">Latency</div>
                       </div>
                     </motion.div>
@@ -326,15 +413,24 @@ const MLOpsHeroWithCTA = () => {
                 transition={{ duration: 0.8, delay: 2.8 }}
                 className="flex justify-center gap-4 flex-wrap mt-8"
               >
-                <Badge variant="secondary" className="bg-blue-500/20 text-blue-300 border-blue-500/30">
+                <Badge
+                  variant="secondary"
+                  className="bg-blue-500/20 text-blue-300 border-blue-500/30"
+                >
                   <GitBranch className="w-3 h-3 mr-1" />
                   CI/CD
                 </Badge>
-                <Badge variant="secondary" className="bg-green-500/20 text-green-300 border-green-500/30">
+                <Badge
+                  variant="secondary"
+                  className="bg-green-500/20 text-green-300 border-green-500/30"
+                >
                   <Activity className="w-3 h-3 mr-1" />
                   Monitoring
                 </Badge>
-                <Badge variant="secondary" className="bg-purple-500/20 text-purple-300 border-purple-500/30">
+                <Badge
+                  variant="secondary"
+                  className="bg-purple-500/20 text-purple-300 border-purple-500/30"
+                >
                   <RefreshCw className="w-3 h-3 mr-1" />
                   Auto-scaling
                 </Badge>
@@ -353,28 +449,28 @@ const MLOpsBenefits = () => {
     {
       icon: Rocket,
       title: "Reliable Deployment",
-      description: "Get models to production faster and more consistently."
+      description: "Get models to production faster and more consistently.",
     },
     {
       icon: Activity,
       title: "Continuous Performance",
-      description: "Monitor, retrain, and update models to prevent drift."
+      description: "Monitor, retrain, and update models to prevent drift.",
     },
     {
       icon: TrendingUp,
       title: "Scalability & Efficiency",
-      description: "Manage complex ML pipelines at scale."
+      description: "Manage complex ML pipelines at scale.",
     },
     {
       icon: Shield,
       title: "Reduced Risk",
-      description: "Ensure model integrity, security, and compliance."
+      description: "Ensure model integrity, security, and compliance.",
     },
     {
       icon: Zap,
       title: "Faster Iteration",
-      description: "Accelerate experimentation and model improvement cycles."
-    }
+      description: "Accelerate experimentation and model improvement cycles.",
+    },
   ];
 
   return (
@@ -390,6 +486,9 @@ const MLOpsBenefits = () => {
           <h2 className="text-4xl lg:text-5xl font-semibold text-foreground mb-6">
             Why Robust MLOps is Crucial for Your AI Success
           </h2>
+          <p className="mt-4 text-gray-400 max-w-2xl mx-auto">
+            Robust MLOps is essential for turning machine learning models into scalable, production‑ready AI systems that deliver reliable, secure, and continuously optimized performance across your organization.
+          </p>
         </motion.div>
 
         <motion.div
@@ -406,7 +505,7 @@ const MLOpsBenefits = () => {
                 key={index}
                 initial={{ opacity: 0, y: 20 }}
                 whileInView={{ opacity: 1, y: 0 }}
-                transition={{ duration: 0.5, delay: index * 0.1 }}
+                transition={{ duration: 0.5, delay: index * 0.01 }}
                 viewport={{ once: true }}
                 whileHover={{ y: -5 }}
                 className="group"
@@ -476,39 +575,46 @@ const MLOpsProcess = () => {
   const steps = [
     {
       title: "Model Assessment & Readiness",
-      description: "Evaluating model architecture, performance metrics, and production readiness to ensure seamless deployment.",
-      icon: Search
+      description:
+        "Evaluating model architecture, performance metrics, and production readiness to ensure seamless deployment.",
+      icon: Search,
     },
     {
       title: "Infrastructure Setup & Containerization",
-      description: "Setting up scalable cloud infrastructure and containerizing models for consistent deployment across environments.",
-      icon: Server
+      description:
+        "Setting up scalable cloud infrastructure and containerizing models for consistent deployment across environments.",
+      icon: Server,
     },
     {
       title: "CI/CD for ML Models",
-      description: "Implementing continuous integration and deployment pipelines specifically designed for machine learning workflows.",
-      icon: GitBranch
+      description:
+        "Implementing continuous integration and deployment pipelines specifically designed for machine learning workflows.",
+      icon: GitBranch,
     },
     {
       title: "Deployment & API Integration",
-      description: "Deploying models to production environments and creating robust APIs for seamless integration with applications.",
-      icon: Rocket
+      description:
+        "Deploying models to production environments and creating robust APIs for seamless integration with applications.",
+      icon: Rocket,
     },
     {
       title: "Monitoring & Alerting",
-      description: "Setting up comprehensive monitoring systems to track model performance, data drift, and system health in real-time.",
-      icon: Activity
+      description:
+        "Setting up comprehensive monitoring systems to track model performance, data drift, and system health in real-time.",
+      icon: Activity,
     },
     {
       title: "Retraining & Versioning",
-      description: "Implementing automated retraining pipelines and version control systems to maintain model accuracy over time.",
-      icon: RefreshCw
+      description:
+        "Implementing automated retraining pipelines and version control systems to maintain model accuracy over time.",
+      icon: RefreshCw,
     },
     {
       title: "Governance & Documentation",
-      description: "Establishing governance frameworks and comprehensive documentation for model lifecycle management and compliance.",
-      icon: FileText
-    }
+      description:
+        "Establishing governance frameworks and comprehensive documentation for model lifecycle management and compliance.",
+      icon: FileText,
+    },
   ];
 
   return (
@@ -524,6 +630,9 @@ const MLOpsProcess = () => {
           <h2 className="text-4xl lg:text-5xl font-semibold text-white mb-6">
             Our Strategic Approach to MLOps Excellence
           </h2>
+          <p className="mt-4 text-gray-400 max-w-2xl mx-auto">
+            A structured, end‑to‑end MLOps strategy that streamlines machine learning model deployment, monitors performance, and continuously optimizes AI systems for scalable, production‑grade results.
+          </p>
         </motion.div>
 
         <div className="relative">
@@ -542,15 +651,23 @@ const MLOpsProcess = () => {
                   whileInView={{ opacity: 1, x: 0 }}
                   transition={{ duration: 0.8, delay: index * 0.2 }}
                   viewport={{ once: true }}
-                  className={`flex items-center ${isEven ? 'lg:flex-row' : 'lg:flex-row-reverse'} flex-col lg:gap-16 gap-8`}
+                  className={`flex items-center ${
+                    isEven ? "lg:flex-row" : "lg:flex-row-reverse"
+                  } flex-col lg:gap-16 gap-8`}
+                >
+                  <div
+                    className={`flex-1 ${
+                      isEven ? "lg:text-right" : "lg:text-left"
+                    } text-center lg:text-left`}
                   >
-                  <div className={`flex-1 ${isEven ? 'lg:text-right' : 'lg:text-left'} text-center lg:text-left`}>
                     <div className="bg-gray-900/50 backdrop-blur-md rounded-2xl border border-gray-800 p-8 hover:border-accent/30 transition-all duration-300 shadow-lg hover:shadow-xl">
                       <div className="flex items-center gap-4 mb-4 justify-center lg:justify-start">
                         <div className="w-12 h-12 bg-accent/20 rounded-xl flex items-center justify-center">
                           <IconComponent className="w-6 h-6 text-accent" />
                         </div>
-                        <div className="text-2xl font-bold text-accent">0{index + 1}</div>
+                        <div className="text-2xl font-bold text-accent">
+                          0{index + 1}
+                        </div>
                       </div>
                       <h3 className="text-2xl font-semibold text-white mb-4">
                         {step.title}
@@ -582,50 +699,91 @@ const MLOpsServices = () => {
       title: "MLOps Strategy & Implementation",
       description: "Building end-to-end operational pipelines.",
       icon: Target,
-      features: ["Strategy Planning", "Pipeline Design", "Process Automation", "Best Practices"]
+      features: [
+        "Strategy Planning",
+        "Pipeline Design",
+        "Process Automation",
+        "Best Practices",
+      ],
     },
     {
       title: "Model Deployment",
-      description: "Deploying models to cloud (AWS SageMaker, Azure ML, GCP AI Platform) or on-premise.",
+      description:
+        "Deploying models to cloud (AWS SageMaker, Azure ML, GCP AI Platform) or on-premise.",
       icon: Rocket,
-      features: ["Cloud Deployment", "On-premise Setup", "Container Orchestration", "API Development"]
+      features: [
+        "Cloud Deployment",
+        "On-premise Setup",
+        "Container Orchestration",
+        "API Development",
+      ],
     },
     {
       title: "Model Monitoring & Alerting",
       description: "Tracking performance, drift, and data integrity.",
       icon: Activity,
-      features: ["Performance Tracking", "Drift Detection", "Real-time Alerts", "Health Monitoring"]
+      features: [
+        "Performance Tracking",
+        "Drift Detection",
+        "Real-time Alerts",
+        "Health Monitoring",
+      ],
     },
     {
       title: "Automated Retraining Pipelines",
       description: "Ensuring models adapt to new data.",
       icon: RefreshCw,
-      features: ["Data Pipeline", "Auto-retraining", "Performance Triggers", "Version Control"]
+      features: [
+        "Data Pipeline",
+        "Auto-retraining",
+        "Performance Triggers",
+        "Version Control",
+      ],
     },
     {
       title: "Model Versioning & Experiment Tracking",
       description: "Managing multiple model iterations.",
       icon: GitBranch,
-      features: ["Version Management", "Experiment Logging", "Model Registry", "Rollback Capabilities"]
+      features: [
+        "Version Management",
+        "Experiment Logging",
+        "Model Registry",
+        "Rollback Capabilities",
+      ],
     },
     {
       title: "Bias Detection & Explainability (XAI)",
       description: "Ensuring fair and transparent models.",
       icon: Shield,
-      features: ["Bias Detection", "Model Explanations", "Fairness Metrics", "Transparency Reports"]
+      features: [
+        "Bias Detection",
+        "Model Explanations",
+        "Fairness Metrics",
+        "Transparency Reports",
+      ],
     },
     {
       title: "Cloud Infrastructure for ML",
       description: "Setting up scalable, cost-effective environments.",
       icon: Cloud,
-      features: ["Infrastructure Setup", "Auto-scaling", "Cost Optimization", "Resource Management"]
+      features: [
+        "Infrastructure Setup",
+        "Auto-scaling",
+        "Cost Optimization",
+        "Resource Management",
+      ],
     },
     {
       title: "Security & Compliance for ML Models",
       description: "Protecting data and model integrity.",
       icon: Lock,
-      features: ["Data Security", "Model Protection", "Compliance Audits", "Access Control"]
-    }
+      features: [
+        "Data Security",
+        "Model Protection",
+        "Compliance Audits",
+        "Access Control",
+      ],
+    },
   ];
 
   return (
@@ -641,6 +799,9 @@ const MLOpsServices = () => {
           <h2 className="text-4xl lg:text-5xl font-semibold text-foreground mb-6">
             Our Specialized MLOps Capabilities
           </h2>
+          <p className="mt-4 text-gray-400 max-w-2xl mx-auto">
+            A structured, end‑to‑end MLOps strategy that streamlines machine learning model deployment, monitors performance, and continuously optimizes AI systems for scalable, production‑grade results.
+          </p>
         </motion.div>
 
         <motion.div
@@ -657,7 +818,7 @@ const MLOpsServices = () => {
                 key={index}
                 initial={{ opacity: 0, y: 20 }}
                 whileInView={{ opacity: 1, y: 0 }}
-                transition={{ duration: 0.5, delay: index * 0.1 }}
+                transition={{ duration: 0.5, delay: index * 0.01 }}
                 viewport={{ once: true }}
                 whileHover={{ y: -5 }}
                 className="group"
@@ -674,10 +835,16 @@ const MLOpsServices = () => {
                       {service.description}
                     </p>
                     <div className="space-y-2">
-                      <h4 className="text-xs font-medium text-foreground">Key Features:</h4>
+                      <h4 className="text-xs font-medium text-foreground">
+                        Key Features:
+                      </h4>
                       <div className="flex flex-wrap gap-1">
                         {service.features.map((feature) => (
-                          <Badge key={feature} variant="secondary" className="text-xs bg-muted/50 text-muted-foreground border-muted">
+                          <Badge
+                            key={feature}
+                            variant="secondary"
+                            className="text-xs bg-muted/50 text-muted-foreground border-muted"
+                          >
                             {feature}
                           </Badge>
                         ))}
@@ -697,20 +864,70 @@ const MLOpsServices = () => {
 // MLOps Tech Stack
 const MLOpsTechStack = () => {
   const technologies = [
-    { name: "AWS SageMaker", icon: CloudCog, category: "ML Platform", color: "orange" },
+    {
+      name: "AWS SageMaker",
+      icon: CloudCog,
+      category: "ML Platform",
+      color: "orange",
+    },
     { name: "Azure ML", icon: Cloud, category: "ML Platform", color: "blue" },
-    { name: "Google AI Platform", icon: Brain, category: "ML Platform", color: "green" },
-    { name: "Kubeflow", icon: Container, category: "ML Orchestration", color: "blue" },
-    { name: "MLflow", icon: GitBranch, category: "ML Lifecycle", color: "green" },
-    { name: "Docker", icon: Package, category: "Containerization", color: "blue" },
-    { name: "Kubernetes", icon: Boxes, category: "Orchestration", color: "blue" },
-    { name: "TensorFlow Extended (TFX)", icon: Brain, category: "ML Pipeline", color: "orange" },
-    { name: "Airflow", icon: Workflow, category: "Workflow Management", color: "green" },
-    { name: "Prometheus", icon: Activity, category: "Monitoring", color: "orange" },
-    { name: "Grafana", icon: BarChart3, category: "Visualization", color: "orange" },
+    {
+      name: "Google AI Platform",
+      icon: Brain,
+      category: "ML Platform",
+      color: "green",
+    },
+    {
+      name: "Kubeflow",
+      icon: Container,
+      category: "ML Orchestration",
+      color: "blue",
+    },
+    {
+      name: "MLflow",
+      icon: GitBranch,
+      category: "ML Lifecycle",
+      color: "green",
+    },
+    {
+      name: "Docker",
+      icon: Package,
+      category: "Containerization",
+      color: "blue",
+    },
+    {
+      name: "Kubernetes",
+      icon: Boxes,
+      category: "Orchestration",
+      color: "blue",
+    },
+    {
+      name: "TensorFlow Extended (TFX)",
+      icon: Brain,
+      category: "ML Pipeline",
+      color: "orange",
+    },
+    {
+      name: "Airflow",
+      icon: Workflow,
+      category: "Workflow Management",
+      color: "green",
+    },
+    {
+      name: "Prometheus",
+      icon: Activity,
+      category: "Monitoring",
+      color: "orange",
+    },
+    {
+      name: "Grafana",
+      icon: BarChart3,
+      category: "Visualization",
+      color: "orange",
+    },
     { name: "Python", icon: Code, category: "Programming", color: "blue" },
     { name: "Jenkins", icon: GitBranch, category: "CI/CD", color: "blue" },
-    { name: "GitLab CI", icon: GitCommit, category: "CI/CD", color: "orange" }
+    { name: "GitLab CI", icon: GitCommit, category: "CI/CD", color: "orange" },
   ];
 
   return (
@@ -743,7 +960,7 @@ const MLOpsTechStack = () => {
             const colorClasses = {
               blue: "bg-blue-500/20 text-blue-400 border-blue-500/30",
               orange: "bg-orange-500/20 text-orange-400 border-orange-500/30",
-              green: "bg-green-500/20 text-green-400 border-green-500/30"
+              green: "bg-green-500/20 text-green-400 border-green-500/30",
             };
 
             return (
@@ -751,16 +968,23 @@ const MLOpsTechStack = () => {
                 key={index}
                 initial={{ opacity: 0, y: 20 }}
                 whileInView={{ opacity: 1, y: 0 }}
-                transition={{ duration: 0.5, delay: index * 0.1 }}
+                transition={{ duration: 0.5, delay: index * 0.01 }}
                 viewport={{ once: true }}
                 whileHover={{ y: -5, scale: 1.05 }}
                 className="group"
               >
                 <Card className="bg-gray-900/50 backdrop-blur-md border-gray-800 hover:border-accent/30 transition-all duration-300 shadow-lg hover:shadow-xl rounded-2xl p-4 text-center">
-                  <div className={`w-12 h-12 rounded-lg flex items-center justify-center mx-auto mb-3 ${colorClasses[tech.color as keyof typeof colorClasses] || 'bg-accent/20 text-accent border-accent/30'}`}>
+                  <div
+                    className={`w-12 h-12 rounded-lg flex items-center justify-center mx-auto mb-3 ${
+                      colorClasses[tech.color as keyof typeof colorClasses] ||
+                      "bg-accent/20 text-accent border-accent/30"
+                    }`}
+                  >
                     <IconComponent className="w-6 h-6" />
                   </div>
-                  <h4 className="font-semibold text-white text-sm mb-1">{tech.name}</h4>
+                  <h4 className="font-semibold text-white text-sm mb-1">
+                    {tech.name}
+                  </h4>
                   <p className="text-xs text-gray-400">{tech.category}</p>
                 </Card>
               </motion.div>
@@ -778,30 +1002,36 @@ const MLOpsCaseStudies = () => {
     {
       title: "Enterprise ML Pipeline Optimization",
       client: "Financial Services Company",
-      description: "Implemented comprehensive MLOps infrastructure reducing model deployment time by 80% and improving model performance monitoring, resulting in 99.9% uptime and 40% cost reduction.",
-      image: "https://images.unsplash.com/photo-1551288049-bebda4e38f71?w=400&h=300&fit=crop&auto=format",
+      description:
+        "Implemented comprehensive MLOps infrastructure reducing model deployment time by 80% and improving model performance monitoring, resulting in 99.9% uptime and 40% cost reduction.",
+      image:
+        "https://images.unsplash.com/photo-1551288049-bebda4e38f71?w=400&h=300&fit=crop&auto=format",
       results: "80% faster deployment, 40% cost reduction",
       engagement: "4-month MLOps implementation",
-      gradient: "from-blue-500/20 to-cyan-500/20"
+      gradient: "from-blue-500/20 to-cyan-500/20",
     },
     {
       title: "Automated Model Retraining System",
       client: "Healthcare Technology Platform",
-      description: "Built automated retraining pipelines with drift detection, ensuring model accuracy above 95% and reducing manual intervention by 90% while maintaining regulatory compliance.",
-      image: "https://images.unsplash.com/photo-1576091160550-2173dba999ef?w=400&h=300&fit=crop&auto=format",
+      description:
+        "Built automated retraining pipelines with drift detection, ensuring model accuracy above 95% and reducing manual intervention by 90% while maintaining regulatory compliance.",
+      image:
+        "https://images.unsplash.com/photo-1576091160550-2173dba999ef?w=400&h=300&fit=crop&auto=format",
       results: "95% accuracy maintained, 90% less manual work",
       engagement: "6-month MLOps project",
-      gradient: "from-green-500/20 to-emerald-500/20"
+      gradient: "from-green-500/20 to-emerald-500/20",
     },
     {
       title: "Multi-Cloud ML Infrastructure",
       client: "E-commerce Technology Giant",
-      description: "Designed scalable multi-cloud MLOps architecture supporting 100+ models in production, achieving 99.99% availability and 60% improvement in resource utilization.",
-      image: "https://images.unsplash.com/photo-1518186285589-2f7649de83e0?w=400&h=300&fit=crop&auto=format",
+      description:
+        "Designed scalable multi-cloud MLOps architecture supporting 100+ models in production, achieving 99.99% availability and 60% improvement in resource utilization.",
+      image:
+        "https://images.unsplash.com/photo-1518186285589-2f7649de83e0?w=400&h=300&fit=crop&auto=format",
       results: "99.99% availability, 60% resource optimization",
       engagement: "8-month infrastructure project",
-      gradient: "from-purple-500/20 to-pink-500/20"
-    }
+      gradient: "from-purple-500/20 to-pink-500/20",
+    },
   ];
 
   return (
@@ -817,6 +1047,9 @@ const MLOpsCaseStudies = () => {
           <h2 className="text-4xl lg:text-5xl font-semibold text-foreground mb-8">
             Ensuring AI Performance in Production
           </h2>
+          <p className="mt-4 text-gray-400 max-w-2xl mx-auto">
+            Proactively monitoring, measuring, and optimizing AI model performance in production to maintain accuracy, stability, scalability, and low‑latency inference across real‑world workloads.
+          </p>
         </motion.div>
 
         <motion.div
@@ -831,7 +1064,7 @@ const MLOpsCaseStudies = () => {
               key={index}
               initial={{ opacity: 0, y: 20 }}
               whileInView={{ opacity: 1, y: 0 }}
-              transition={{ duration: 0.5, delay: index * 0.1 }}
+              transition={{ duration: 0.5, delay: index * 0.01 }}
               viewport={{ once: true }}
               whileHover={{ y: -8, scale: 1.02 }}
               className="group cursor-pointer"
@@ -847,7 +1080,10 @@ const MLOpsCaseStudies = () => {
                         <div className="text-xs text-muted-foreground mb-2 uppercase tracking-wider">
                           {study.client}
                         </div>
-                        <Badge variant="secondary" className="text-xs bg-accent/20 text-accent border-accent/30">
+                        <Badge
+                          variant="secondary"
+                          className="text-xs bg-accent/20 text-accent border-accent/30"
+                        >
                           {study.results}
                         </Badge>
                       </div>
@@ -859,7 +1095,9 @@ const MLOpsCaseStudies = () => {
                   </div>
 
                   <div className="px-8 pb-6 flex-1">
-                    <div className={`relative rounded-xl overflow-hidden bg-gradient-to-br ${study.gradient} p-4 border border-white/10`}>
+                    <div
+                      className={`relative rounded-xl overflow-hidden bg-gradient-to-br ${study.gradient} p-4 border border-white/10`}
+                    >
                       <ImageWithFallback
                         src={study.image}
                         alt={study.title}
@@ -886,7 +1124,9 @@ const MLOpsCaseStudies = () => {
                       size="sm"
                       className="w-full justify-between text-accent hover:text-accent hover:bg-accent/10 group-hover:translate-x-1 transition-all duration-300 h-auto py-3"
                     >
-                      <span className="text-sm font-medium">VIEW FULL CASE STUDY</span>
+                      <span className="text-sm font-medium">
+                        VIEW FULL CASE STUDY
+                      </span>
                       <ArrowRight className="w-4 h-4" />
                     </Button>
                   </div>
@@ -902,6 +1142,7 @@ const MLOpsCaseStudies = () => {
 
 // Mid-Page CTA
 const MLOpsInlineCTA = () => {
+  const navigate = useNavigate();
   return (
     <section className="py-20 bg-black">
       <div className="container mx-auto px-6 lg:px-8">
@@ -922,7 +1163,9 @@ const MLOpsInlineCTA = () => {
             <div className="inline-block p-[2px] rounded-full bg-gradient-to-r from-accent via-blue-500 to-green-500">
               <div className="bg-black rounded-full px-6 py-3 flex items-center gap-2">
                 <Activity className="w-5 h-5 text-white" />
-                <span className="text-white text-base font-medium">MLOps Excellence</span>
+                <span className="text-white text-base font-medium">
+                  MLOps Excellence
+                </span>
               </div>
             </div>
 
@@ -932,10 +1175,13 @@ const MLOpsInlineCTA = () => {
             </h2>
 
             <p className="text-xl text-gray-300 leading-relaxed max-w-2xl mx-auto">
-              Ensure your AI investments deliver continuous value with expert deployment and maintenance.
+              Ensure your AI and machine learning models deliver continuous business value through expert deployment, monitoring, and ongoing MLOps‑driven optimization.
             </p>
 
-            <ShimmerButton className="text-xl px-10 py-5 rounded-2xl shadow-lg hover:shadow-xl">
+            <ShimmerButton
+              className="text-xl px-10 py-5 rounded-2xl shadow-lg hover:shadow-xl"
+              onClick={() => navigate("/start-a-project")}
+            >
               <div className="inline-flex items-center gap-3">
                 <MessageSquare className="w-6 h-6 flex-shrink-0" />
                 <span>Get a Free MLOps Consultation</span>
@@ -953,40 +1199,76 @@ const HireMLOpsEngineers = () => {
   const specialistTypes = [
     {
       title: "MLOps Engineers",
-      description: "Specialists in deploying, monitoring, and maintaining production-grade ML models",
+      description:
+        "Specialists in deploying, monitoring, and maintaining production-grade ML models",
       icon: Rocket,
-      skills: ["Model Deployment", "CI/CD Pipelines", "Infrastructure Management", "Performance Monitoring"]
+      skills: [
+        "Model Deployment",
+        "CI/CD Pipelines",
+        "Infrastructure Management",
+        "Performance Monitoring",
+      ],
     },
     {
       title: "ML Infrastructure Engineers",
-      description: "Experts in building scalable infrastructure for machine learning workloads",
+      description:
+        "Experts in building scalable infrastructure for machine learning workloads",
       icon: Server,
-      skills: ["Cloud Architecture", "Container Orchestration", "Auto-scaling", "Resource Optimization"]
+      skills: [
+        "Cloud Architecture",
+        "Container Orchestration",
+        "Auto-scaling",
+        "Resource Optimization",
+      ],
     },
     {
       title: "DevOps Engineers (ML Focus)",
-      description: "DevOps specialists with expertise in machine learning deployment workflows",
+      description:
+        "DevOps specialists with expertise in machine learning deployment workflows",
       icon: GitBranch,
-      skills: ["CI/CD Design", "Automation", "Version Control", "Deployment Strategies"]
+      skills: [
+        "CI/CD Design",
+        "Automation",
+        "Version Control",
+        "Deployment Strategies",
+      ],
     },
     {
       title: "ML Monitoring Specialists",
-      description: "Experts in model performance monitoring and drift detection",
+      description:
+        "Experts in model performance monitoring and drift detection",
       icon: Activity,
-      skills: ["Performance Monitoring", "Drift Detection", "Alerting Systems", "Model Analytics"]
+      skills: [
+        "Performance Monitoring",
+        "Drift Detection",
+        "Alerting Systems",
+        "Model Analytics",
+      ],
     },
     {
       title: "Data Pipeline Engineers",
-      description: "Specialists in building robust data pipelines for ML model training and inference",
+      description:
+        "Specialists in building robust data pipelines for ML model training and inference",
       icon: Database,
-      skills: ["Data Pipeline Design", "ETL Processes", "Data Quality", "Stream Processing"]
+      skills: [
+        "Data Pipeline Design",
+        "ETL Processes",
+        "Data Quality",
+        "Stream Processing",
+      ],
     },
     {
       title: "ML Security Engineers",
-      description: "Experts in securing ML models and ensuring compliance in production environments",
+      description:
+        "Experts in securing ML models and ensuring compliance in production environments",
       icon: Shield,
-      skills: ["Model Security", "Data Protection", "Compliance Auditing", "Access Control"]
-    }
+      skills: [
+        "Model Security",
+        "Data Protection",
+        "Compliance Auditing",
+        "Access Control",
+      ],
+    },
   ];
 
   return (
@@ -1003,7 +1285,7 @@ const HireMLOpsEngineers = () => {
             Access Expert MLOps & ML Infrastructure Talent
           </h2>
           <p className="text-xl text-muted-foreground max-w-3xl mx-auto leading-relaxed">
-            Hire our specialized engineers proficient in deploying, monitoring, and maintaining production-grade ML models.
+            Hire our specialized engineers proficient in deploying, monitoring, and maintaining production‑grade machine learning models, with deep expertise in MLOps, model observability, and scalable ML infrastructure.
           </p>
         </motion.div>
 
@@ -1021,7 +1303,7 @@ const HireMLOpsEngineers = () => {
                 key={index}
                 initial={{ opacity: 0, y: 20 }}
                 whileInView={{ opacity: 1, y: 0 }}
-                transition={{ duration: 0.5, delay: index * 0.1 }}
+                transition={{ duration: 0.5, delay: index * 0.01 }}
                 viewport={{ once: true }}
                 whileHover={{ y: -5 }}
                 className="group"
@@ -1038,10 +1320,16 @@ const HireMLOpsEngineers = () => {
                       {type.description}
                     </p>
                     <div className="space-y-2">
-                      <h4 className="text-sm font-medium text-foreground">Core Skills:</h4>
+                      <h4 className="text-sm font-medium text-foreground">
+                        Core Skills:
+                      </h4>
                       <div className="flex flex-wrap gap-2">
                         {type.skills.map((skill) => (
-                          <Badge key={skill} variant="secondary" className="text-xs bg-muted/50 text-muted-foreground border-muted">
+                          <Badge
+                            key={skill}
+                            variant="secondary"
+                            className="text-xs bg-muted/50 text-muted-foreground border-muted"
+                          >
                             {skill}
                           </Badge>
                         ))}
@@ -1089,21 +1377,25 @@ const HireMLOpsEngineers = () => {
 const MLOpsFAQs = () => {
   const faqs = [
     {
-      question: "What is \"model drift\" and how do you handle it?",
-      answer: "Model drift occurs when a machine learning model's performance degrades over time due to changes in the underlying data distribution or relationships between variables. There are two main types: data drift (changes in input features) and concept drift (changes in the relationship between inputs and outputs). We handle drift through continuous monitoring systems that track statistical properties of incoming data, model performance metrics, and prediction distributions. Our automated systems detect drift using statistical tests, distance metrics, and performance thresholds, then trigger alerts and potentially automatic retraining workflows to maintain model accuracy."
+      question: 'What is "model drift" and how do you handle it?',
+      answer:
+        "Model drift occurs when a machine learning model’s performance degrades over time due to changes in the underlying data distribution or relationships between variables. The two main types are data drift (changes in input features) and concept drift (changes in the relationship between inputs and outputs). We handle drift through continuous monitoring systems that track statistical properties of incoming data, model performance metrics, and prediction distributions. Our automated systems detect drift using statistical tests, distance metrics, and performance thresholds, then trigger alerts and potentially automatic retraining workflows to maintain model accuracy and keep your AI systems performing at peak levels in production.",
     },
     {
       question: "How do you ensure data security for models in production?",
-      answer: "We implement comprehensive security measures at multiple levels: data encryption in transit and at rest, secure API endpoints with authentication and authorization, network isolation using VPCs and firewalls, access control with role-based permissions, audit logging for all model interactions, and compliance with industry standards like GDPR, HIPAA, and SOC 2. We also employ techniques like differential privacy, federated learning where appropriate, and secure multi-party computation for sensitive data. Regular security audits, vulnerability assessments, and penetration testing ensure ongoing protection of your ML infrastructure and data."
+      answer:
+        "We implement comprehensive security measures at multiple levels for production‑grade AI and machine learning models: data encryption in transit and at rest, secure API endpoints with authentication and authorization, network isolation using VPCs and firewalls, access control with role‑based permissions, audit logging for all model interactions, and compliance with industry standards such as GDPR, HIPAA, and SOC 2.  We also employ techniques like differential privacy, federated learning where appropriate, and secure multi‑party computation for sensitive data. Regular security audits, vulnerability assessments, and penetration testing ensure ongoing protection of your ML infrastructure, models, and training data throughout the MLOps lifecycle.",
     },
     {
       question: "What is the difference between DevOps and MLOps?",
-      answer: "While DevOps focuses on software development and deployment, MLOps extends these practices to machine learning workflows with unique considerations: MLOps manages data pipelines alongside code, handles model versioning and experiment tracking, monitors model performance and data drift (not just system metrics), deals with non-deterministic outcomes and model retraining, requires specialized infrastructure for GPU/TPU workloads, and addresses ML-specific compliance and explainability requirements. MLOps also involves continuous training alongside continuous integration/deployment, and requires different tooling for model registries, feature stores, and ML-specific monitoring systems."
+      answer:
+        "While DevOps focuses on software development, testing, and deployment, MLOps extends these practices to machine learning workflows with unique requirements. MLOps manages data pipelines alongside code, handles model versioning and experiment tracking, monitors model performance and data drift (not just system metrics), and deals with non‑deterministic outcomes and periodic model retraining. MLOps also requires specialized infrastructure for GPU/TPU workloads, addresses ML‑specific compliance, explainability, and governance needs, and includes continuous training in addition to continuous integration and deployment. It relies on different tooling for model registries, feature stores, and ML‑specific monitoring systems, making it the backbone of scalable, production‑ready AI.",
     },
     {
       question: "Can you help migrate existing models to a new MLOps platform?",
-      answer: "Yes, we specialize in MLOps platform migrations and model modernization. Our migration process includes: comprehensive assessment of existing models, infrastructure, and workflows; compatibility analysis and gap identification; migration strategy development with minimal downtime; model containerization and standardization; data pipeline recreation and optimization; CI/CD pipeline setup for the new platform; performance testing and validation; team training on new tools and processes; and gradual rollout with fallback capabilities. We support migrations between major platforms (AWS SageMaker, Azure ML, Google AI Platform, on-premise to cloud, etc.) and ensure all model governance, monitoring, and compliance requirements are maintained throughout the transition."
-    }
+      answer:
+        "Yes. We specialize in MLOps platform migrations and ML model modernization. Our migration process includes a comprehensive assessment of existing models, infrastructure, and workflows; compatibility analysis and gap identification; migration strategy development with minimal downtime; model containerization and standardization; data pipeline recreation and optimization; CI/CD pipeline setup for the new platform; performance testing and validation; team training on new tools and processes; and gradual rollout with fallback capabilities. We support migrations between major platforms such as AWS SageMaker, Azure ML, Google AI Platform, and on‑premise to cloud environments, ensuring all model governance, monitoring, and compliance requirements are maintained throughout the transition and that your AI investments continue to deliver value in the new MLOps ecosystem.",
+    },
   ];
 
   return (
@@ -1136,7 +1428,9 @@ const MLOpsFAQs = () => {
                 className="bg-gray-900/50 backdrop-blur-md rounded-2xl border border-gray-800 px-10 shadow-lg"
               >
                 <AccordionTrigger className="text-left hover:no-underline py-10 text-xl">
-                  <span className="font-semibold text-white">{faq.question}</span>
+                  <span className="font-semibold text-white">
+                    {faq.question}
+                  </span>
                 </AccordionTrigger>
                 <AccordionContent className="text-gray-300 pb-10 text-lg leading-relaxed">
                   {faq.answer}
@@ -1152,6 +1446,7 @@ const MLOpsFAQs = () => {
 
 // Final CTA Section
 const MLOpsFinalCTA = () => {
+  const navigate = useNavigate();
   return (
     <section className="py-20 relative overflow-hidden">
       <div className="container mx-auto px-6 lg:px-8 relative z-10">
@@ -1172,7 +1467,9 @@ const MLOpsFinalCTA = () => {
             <div className="inline-block p-[2px] rounded-full bg-gradient-to-r from-accent via-blue-500 to-green-500">
               <div className="bg-background rounded-full px-6 py-3 flex items-center gap-2">
                 <Activity className="w-5 h-5 text-foreground" />
-                <span className="text-foreground text-base font-medium">MLOps Excellence</span>
+                <span className="text-foreground text-base font-medium">
+                  MLOps Excellence
+                </span>
               </div>
             </div>
           </motion.div>
@@ -1189,7 +1486,9 @@ const MLOpsFinalCTA = () => {
             viewport={{ once: true }}
             className="text-xl text-muted-foreground mb-12 max-w-2xl mx-auto leading-relaxed"
           >
-            Ensure your Machine Learning models are not just built, but also flawlessly integrated, monitored, and maintained in live environments.
+            Ensure your Machine Learning models are not just built, but also
+            flawlessly integrated, monitored, and maintained in live
+            environments.
           </motion.p>
 
           <motion.div
@@ -1199,7 +1498,10 @@ const MLOpsFinalCTA = () => {
             viewport={{ once: true }}
             className="space-y-8"
           >
-            <ShimmerButton className="px-12 py-6 text-xl rounded-2xl shadow-2xl hover:shadow-accent/25">
+            <ShimmerButton
+              className="px-12 py-6 text-xl rounded-2xl shadow-2xl hover:shadow-accent/25"
+              onClick={() => navigate("/start-a-project")}
+            >
               <div className="inline-flex items-center gap-3">
                 <Rocket className="w-6 h-6 flex-shrink-0" />
                 <span>Optimize Your AI Lifecycle</span>
@@ -1207,7 +1509,8 @@ const MLOpsFinalCTA = () => {
             </ShimmerButton>
 
             <p className="text-muted-foreground text-sm">
-              Model Deployment • Performance Monitoring • Continuous Optimization
+              Model Deployment • Performance Monitoring • Continuous
+              Optimization
             </p>
           </motion.div>
         </motion.div>
@@ -1227,7 +1530,7 @@ const MLOpsFinalCTA = () => {
 export const AIModelDeploymentMLOps = () => {
   return (
     <div className="dark min-h-screen">
-      <Navigation />
+      {/* <Navigation /> */}
 
       {/* Hero Section */}
       <section className="bg-black">
@@ -1251,7 +1554,7 @@ export const AIModelDeploymentMLOps = () => {
 
       {/* Tech Stack */}
       <section className="bg-card">
-        <MLOpsTechStack />
+        <AIStrategyTargetAudience />
       </section>
 
       {/* Case Studies */}
@@ -1281,7 +1584,7 @@ export const AIModelDeploymentMLOps = () => {
 
       {/* Footer */}
       <section className="bg-card">
-        <Footer />
+        {/* <Footer /> */}
       </section>
     </div>
   );

pages/AIStrategyConsulting.tsx

@@ -22,21 +22,91 @@ import {
   Target,
   TrendingUp,
   UserPlus,
-  Users
+  Users,
 } from "lucide-react";
 import { ImageWithFallback } from "../components/figma/ImageWithFallback";
 import { Footer } from "../components/Footer";
 import { Navigation } from "../components/Navigation";
-import { Accordion, AccordionContent, AccordionItem, AccordionTrigger } from "../components/ui/accordion";
+import {
+  Accordion,
+  AccordionContent,
+  AccordionItem,
+  AccordionTrigger,
+} from "../components/ui/accordion";
 import { Badge } from "../components/ui/badge";
 import { Button } from "../components/ui/button";
 import { Card, CardContent } from "../components/ui/card";
 import { ShimmerButton } from "../components/ui/shimmer-button";
+import { useNavigate } from "react-router-dom";
+import { Helmet } from "react-helmet-async";
 
 // AI Strategy & Consulting Hero Section
 const AIStrategyHeroWithCTA = () => {
+  const navigate = useNavigate();
   return (
     <section className="relative py-20 overflow-hidden bg-black">
+      <Helmet>
+        {/* Page Title and Meta Description */}
+        <title>AI Strategy Consulting | Enterprise AI Roadmap | WDI</title>
+        <meta
+          name="description"
+          content="WDI’s phased AI strategy consulting helps you adopt intelligent technologies with clarity, scalability, and long-term business transformation goals."
+        />
+
+        {/* Canonical Link */}
+        <link
+          rel="canonical"
+          href="https://www.wdipl.com/services/ai-strategy-consulting"
+        />
+
+        {/* Open Graph Tags (for Facebook, LinkedIn) */}
+        <meta
+          property="og:title"
+          content="AI Strategy Consulting | Enterprise AI Roadmap | WDI"
+        />
+        <meta
+          property="og:description"
+          content="WDI’s phased AI strategy consulting helps you adopt intelligent technologies with clarity, scalability, and long-term business transformation goals."
+        />
+        <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="AI Strategy Consulting | Enterprise AI Roadmap | WDI"
+        />
+        <meta
+          name="twitter:description"
+          content="WDI’s phased AI strategy consulting helps you adopt intelligent technologies with clarity, scalability, and long-term business transformation goals."
+        />
+        <meta
+          name="twitter:image"
+          content="https://www.wdipl.com/your-preview-image.jpg"
+        />
+
+        {/* Social Profiles (using JSON-LD Schema) */}
+        <script type="application/ld+json">
+          {`
+                              {
+                                "@context": "https://schema.org",
+                                "@type": "Organization",
+                                "name": "WDI",
+                                "url": "https://www.wdipl.com",
+                                "sameAs": [
+                                  "https://www.facebook.com/wdideas",
+                                  "https://www.linkedin.com/in/website-developers-india/",
+                                  "https://www.instagram.com/wdipl/"
+                                ]
+                              }
+                            `}
+        </script>
+      </Helmet>
       <div className="container mx-auto px-6 lg:px-8">
         <div className="grid lg:grid-cols-2 gap-16 items-center min-h-[90vh]">
           <motion.div
@@ -61,7 +131,10 @@ const AIStrategyHeroWithCTA = () => {
               </h1>
 
               <p className="text-lg text-gray-300 leading-relaxed max-w-lg">
-                Guiding your business through the complexities of Artificial Intelligence, from identifying opportunities to defining a clear, actionable AI roadmap.
+                Guiding your business through the complexities of Artificial
+                Intelligence, from identifying opportunities to defining a
+                clear, actionable AI roadmap for AI‑powered mobile and web
+                development.
               </p>
             </div>
 
@@ -72,7 +145,10 @@ const AIStrategyHeroWithCTA = () => {
               transition={{ duration: 0.8, delay: 0.3 }}
               className="flex flex-col sm:flex-row gap-4"
             >
-              <ShimmerButton className="text-lg px-8 py-4">
+              <ShimmerButton
+                className="text-lg px-8 py-4"
+                onClick={() => navigate("/start-a-project")}
+              >
                 <div className="inline-flex items-center gap-2">
                   <Brain className="w-5 h-5 flex-shrink-0" />
                   <span>Develop Your AI Strategy</span>
@@ -126,7 +202,9 @@ const AIStrategyHeroWithCTA = () => {
                         <div className="w-8 h-8 bg-accent/20 rounded-lg flex items-center justify-center">
                           <Brain className="w-5 h-5 text-accent" />
                         </div>
-                        <h3 className="text-lg font-semibold text-white">AI Strategy Roadmap</h3>
+                        <h3 className="text-lg font-semibold text-white">
+                          AI Strategy Roadmap
+                        </h3>
                       </div>
                       <div className="w-full h-1 bg-gradient-to-r from-accent via-blue-500 to-purple-500 rounded-full"></div>
                     </motion.div>
@@ -145,7 +223,9 @@ const AIStrategyHeroWithCTA = () => {
                             <Search className="w-3 h-3 text-white" />
                           </div>
                           <div className="flex-1">
-                            <div className="text-white text-xs font-medium">Discovery & Analysis</div>
+                            <div className="text-white text-xs font-medium">
+                              Discovery & Analysis
+                            </div>
                           </div>
                           <div className="text-xs text-blue-300">Phase 1</div>
                         </div>
@@ -169,7 +249,9 @@ const AIStrategyHeroWithCTA = () => {
                             <Target className="w-3 h-3 text-white" />
                           </div>
                           <div className="flex-1">
-                            <div className="text-white text-xs font-medium">Opportunity Assessment</div>
+                            <div className="text-white text-xs font-medium">
+                              Opportunity Assessment
+                            </div>
                           </div>
                           <div className="text-xs text-green-300">Phase 2</div>
                         </div>
@@ -193,7 +275,9 @@ const AIStrategyHeroWithCTA = () => {
                             <Route className="w-3 h-3 text-white" />
                           </div>
                           <div className="flex-1">
-                            <div className="text-white text-xs font-medium">Roadmap Development</div>
+                            <div className="text-white text-xs font-medium">
+                              Roadmap Development
+                            </div>
                           </div>
                           <div className="text-xs text-purple-300">Phase 3</div>
                         </div>
@@ -217,7 +301,9 @@ const AIStrategyHeroWithCTA = () => {
                             <Rocket className="w-3 h-3 text-white" />
                           </div>
                           <div className="flex-1">
-                            <div className="text-white text-xs font-medium">Implementation Planning</div>
+                            <div className="text-white text-xs font-medium">
+                              Implementation Planning
+                            </div>
                           </div>
                           <div className="text-xs text-orange-300">Phase 4</div>
                         </div>
@@ -239,12 +325,20 @@ const AIStrategyHeroWithCTA = () => {
                     >
                       <div className="flex items-center justify-between">
                         <div>
-                          <div className="text-white text-sm font-medium">Projected ROI</div>
-                          <div className="text-accent text-xs">12-month forecast</div>
+                          <div className="text-white text-sm font-medium">
+                            Projected ROI
+                          </div>
+                          <div className="text-accent text-xs">
+                            12-month forecast
+                          </div>
                         </div>
                         <div className="text-right">
-                          <div className="text-2xl font-bold text-accent">+245%</div>
-                          <div className="text-xs text-white/70">Expected Return</div>
+                          <div className="text-2xl font-bold text-accent">
+                            +245%
+                          </div>
+                          <div className="text-xs text-white/70">
+                            Expected Return
+                          </div>
                         </div>
                       </div>
                     </motion.div>
@@ -305,7 +399,11 @@ const AIStrategyHeroWithCTA = () => {
                       <Brain className="w-10 h-10 text-accent" />
                       <motion.div
                         animate={{ rotate: [0, 360] }}
-                        transition={{ duration: 8, repeat: Infinity, ease: "linear" }}
+                        transition={{
+                          duration: 8,
+                          repeat: Infinity,
+                          ease: "linear",
+                        }}
                         className="absolute inset-0 w-10 h-10"
                       >
                         <div className="absolute top-0 left-1/2 w-1 h-1 bg-blue-400 rounded-full transform -translate-x-1/2"></div>
@@ -325,15 +423,24 @@ const AIStrategyHeroWithCTA = () => {
                 transition={{ duration: 0.8, delay: 2.8 }}
                 className="flex justify-center gap-4 flex-wrap mt-8"
               >
-                <Badge variant="secondary" className="bg-blue-500/20 text-blue-300 border-blue-500/30">
+                <Badge
+                  variant="secondary"
+                  className="bg-blue-500/20 text-blue-300 border-blue-500/30"
+                >
                   <Target className="w-3 h-3 mr-1" />
                   Strategic
                 </Badge>
-                <Badge variant="secondary" className="bg-green-500/20 text-green-300 border-green-500/30">
+                <Badge
+                  variant="secondary"
+                  className="bg-green-500/20 text-green-300 border-green-500/30"
+                >
                   <BarChart3 className="w-3 h-3 mr-1" />
                   Data-Driven
                 </Badge>
-                <Badge variant="secondary" className="bg-purple-500/20 text-purple-300 border-purple-500/30">
+                <Badge
+                  variant="secondary"
+                  className="bg-purple-500/20 text-purple-300 border-purple-500/30"
+                >
                   <Rocket className="w-3 h-3 mr-1" />
                   Actionable
                 </Badge>
@@ -352,28 +459,32 @@ const AIStrategyBenefits = () => {
     {
       icon: Route,
       title: "Clear Roadmap",
-      description: "Translate AI potential into a practical, implementable plan."
+      description:
+        "Translate AI potential into a practical, implementable plan.",
     },
     {
       icon: DollarSign,
       title: "Identified ROI",
-      description: "Focus on AI initiatives that deliver measurable business value."
+      description:
+        "Focus on AI initiatives that deliver measurable business value.",
     },
     {
       icon: Shield,
       title: "Risk Mitigation",
-      description: "Address ethical, data privacy, and implementation challenges upfront."
+      description:
+        "Address ethical, data privacy, and implementation challenges upfront.",
     },
     {
       icon: TrendingUp,
       title: "Competitive Edge",
-      description: "Leverage AI to innovate and differentiate your offerings."
+      description: "Leverage AI to innovate and differentiate your offerings.",
     },
     {
       icon: Brain,
       title: "Informed Decisions",
-      description: "Gain insights into AI technologies relevant to your business."
-    }
+      description:
+        "Gain insights into AI technologies relevant to your business.",
+    },
   ];
 
   return (
@@ -387,8 +498,12 @@ const AIStrategyBenefits = () => {
           className="text-center mb-20"
         >
           <h2 className="text-4xl lg:text-5xl font-semibold text-foreground mb-6">
-            Why Partner with WDI for AI Strategy?
+            Why Choose WDI for AI Strategy?
           </h2>
+          <p className="mt-4 text-gray-400 max-w-2xl mx-auto">
+            WDI combines AI expertise with business‑aligned strategy to design
+            scalable AI‑powered solutions tailored to your needs.
+          </p>
         </motion.div>
 
         <motion.div
@@ -405,7 +520,7 @@ const AIStrategyBenefits = () => {
                 key={index}
                 initial={{ opacity: 0, y: 20 }}
                 whileInView={{ opacity: 1, y: 0 }}
-                transition={{ duration: 0.5, delay: index * 0.1 }}
+                transition={{ duration: 0.5, delay: index * 0.01 }}
                 viewport={{ once: true }}
                 whileHover={{ y: -5 }}
                 className="group"
@@ -475,34 +590,40 @@ const AIStrategyProcess = () => {
   const steps = [
     {
       title: "Discovery & Business Needs Analysis",
-      description: "Understanding your business objectives, current capabilities, and specific challenges to identify where AI can create the most value.",
-      icon: Search
+      description:
+        "Understanding your business objectives, current capabilities, and specific challenges to identify where AI can create the most value.",
+      icon: Search,
     },
     {
       title: "AI Opportunity Assessment",
-      description: "Evaluating potential AI use cases, market opportunities, and alignment with your business strategy and goals.",
-      icon: Target
+      description:
+        "Evaluating potential AI use cases, market opportunities, and alignment with your business strategy and goals.",
+      icon: Target,
     },
     {
       title: "Data Readiness Evaluation",
-      description: "Assessing your data quality, infrastructure, and governance to determine AI readiness and requirements.",
-      icon: Database
+      description:
+        "Assessing your data quality, infrastructure, and governance to determine AI readiness and requirements.",
+      icon: Database,
     },
     {
       title: "Technology & Feasibility Study",
-      description: "Analyzing technical requirements, platform options, and implementation feasibility for identified AI initiatives.",
-      icon: Cpu
+      description:
+        "Analyzing technical requirements, platform options, and implementation feasibility for identified AI initiatives.",
+      icon: Cpu,
     },
     {
       title: "Roadmap Definition & ROI Projection",
-      description: "Creating a prioritized implementation plan with timelines, resource requirements, and expected return on investment.",
-      icon: Route
+      description:
+        "Creating a prioritized implementation plan with timelines, resource requirements, and expected return on investment.",
+      icon: Route,
     },
     {
       title: "Implementation Planning & Pilot Program",
-      description: "Developing detailed implementation strategies and launching pilot programs to validate concepts and approaches.",
-      icon: Rocket
-    }
+      description:
+        "Developing detailed implementation strategies and launching pilot programs to validate concepts and approaches.",
+      icon: Rocket,
+    },
   ];
 
   return (
@@ -518,6 +639,10 @@ const AIStrategyProcess = () => {
           <h2 className="text-4xl lg:text-5xl font-semibold text-white mb-6">
             Our Phased Approach to Your AI Transformation
           </h2>
+          <p className="mt-4 text-gray-400 max-w-2xl mx-auto">
+            A structured AI strategy that moves your business from vision to
+            AI‑powered mobile and web solutions in clear, measurable steps.
+          </p>
         </motion.div>
 
         <div className="relative">
@@ -536,15 +661,19 @@ const AIStrategyProcess = () => {
                   whileInView={{ opacity: 1, x: 0 }}
                   transition={{ duration: 0.8, delay: index * 0.2 }}
                   viewport={{ once: true }}
-                  className={`flex items-center ${isEven ? 'lg:flex-row' : 'lg:flex-row-reverse'} flex-col lg:gap-16 gap-8`}
+                  className={`flex items-center ${isEven ? "lg:flex-row" : "lg:flex-row-reverse"} flex-col lg:gap-16 gap-8`}
+                >
+                  <div
+                    className={`flex-1 ${isEven ? "lg:text-right" : "lg:text-left"} text-center lg:text-left`}
                   >
-                  <div className={`flex-1 ${isEven ? 'lg:text-right' : 'lg:text-left'} text-center lg:text-left`}>
                     <div className="bg-gray-900/50 backdrop-blur-md rounded-2xl border border-gray-800 p-8 hover:border-accent/30 transition-all duration-300 shadow-lg hover:shadow-xl">
                       <div className="flex items-center gap-4 mb-4 justify-center lg:justify-start">
                         <div className="w-12 h-12 bg-accent/20 rounded-xl flex items-center justify-center">
                           <IconComponent className="w-6 h-6 text-accent" />
                         </div>
-                        <div className="text-2xl font-bold text-accent">0{index + 1}</div>
+                        <div className="text-2xl font-bold text-accent">
+                          0{index + 1}
+                        </div>
                       </div>
                       <h3 className="text-2xl font-semibold text-white mb-4">
                         {step.title}
@@ -576,44 +705,80 @@ const AIStrategyOfferings = () => {
       title: "AI Opportunity Identification",
       description: "Pinpointing areas where AI can create value.",
       icon: Lightbulb,
-      features: ["Use Case Analysis", "Value Assessment", "Opportunity Mapping", "Business Impact"]
+      features: [
+        "Use Case Analysis",
+        "Value Assessment",
+        "Opportunity Mapping",
+        "Business Impact",
+      ],
     },
     {
       title: "AI Readiness Assessment",
-      description: "Evaluating your data, infrastructure, and team for AI adoption.",
+      description:
+        "Evaluating your data, infrastructure, and team for AI adoption.",
       icon: CheckCircle,
-      features: ["Data Maturity", "Infrastructure Audit", "Team Capability", "Organizational Readiness"]
+      features: [
+        "Data Maturity",
+        "Infrastructure Audit",
+        "Team Capability",
+        "Organizational Readiness",
+      ],
     },
     {
       title: "AI Roadmap Development",
       description: "Creating a phased plan for AI implementation.",
       icon: Route,
-      features: ["Strategic Planning", "Phase Prioritization", "Resource Planning", "Timeline Development"]
+      features: [
+        "Strategic Planning",
+        "Phase Prioritization",
+        "Resource Planning",
+        "Timeline Development",
+      ],
     },
     {
       title: "AI Ethics & Governance",
       description: "Advising on responsible and unbiased AI practices.",
       icon: Shield,
-      features: ["Ethical Framework", "Bias Mitigation", "Compliance Strategy", "Risk Management"]
+      features: [
+        "Ethical Framework",
+        "Bias Mitigation",
+        "Compliance Strategy",
+        "Risk Management",
+      ],
     },
     {
       title: "Vendor & Technology Selection",
       description: "Guiding choices for AI platforms and tools.",
       icon: Settings,
-      features: ["Platform Evaluation", "Vendor Analysis", "Technology Fit", "Cost-Benefit Analysis"]
+      features: [
+        "Platform Evaluation",
+        "Vendor Analysis",
+        "Technology Fit",
+        "Cost-Benefit Analysis",
+      ],
     },
     {
       title: "Change Management for AI Adoption",
       description: "Preparing your organization for AI integration.",
       icon: Users,
-      features: ["Change Strategy", "Training Programs", "Culture Transformation", "Adoption Support"]
+      features: [
+        "Change Strategy",
+        "Training Programs",
+        "Culture Transformation",
+        "Adoption Support",
+      ],
     },
     {
       title: "GenAI Strategy & Use Case Identification",
       description: "Consulting on the strategic application of Generative AI.",
       icon: Brain,
-      features: ["GenAI Opportunities", "Use Case Development", "Implementation Strategy", "ROI Assessment"]
-    }
+      features: [
+        "GenAI Opportunities",
+        "Use Case Development",
+        "Implementation Strategy",
+        "ROI Assessment",
+      ],
+    },
   ];
 
   return (
@@ -629,6 +794,10 @@ const AIStrategyOfferings = () => {
           <h2 className="text-4xl lg:text-5xl font-semibold text-foreground mb-6">
             Our Specialized AI Consulting Capabilities
           </h2>
+          <p className="mt-4 text-gray-400 max-w-2xl mx-auto">
+            Expert AI consulting to align your business goals with AI‑powered
+            mobile and web solutions that drive measurable impact.
+          </p>
         </motion.div>
 
         <motion.div
@@ -645,7 +814,7 @@ const AIStrategyOfferings = () => {
                 key={index}
                 initial={{ opacity: 0, y: 20 }}
                 whileInView={{ opacity: 1, y: 0 }}
-                transition={{ duration: 0.5, delay: index * 0.1 }}
+                transition={{ duration: 0.5, delay: index * 0.01 }}
                 viewport={{ once: true }}
                 whileHover={{ y: -5 }}
                 className="group"
@@ -662,10 +831,16 @@ const AIStrategyOfferings = () => {
                       {offering.description}
                     </p>
                     <div className="space-y-2">
-                      <h4 className="text-sm font-medium text-foreground">Key Areas:</h4>
+                      <h4 className="text-sm font-medium text-foreground">
+                        Key Areas:
+                      </h4>
                       <div className="flex flex-wrap gap-2">
                         {offering.features.map((feature) => (
-                          <Badge key={feature} variant="secondary" className="text-xs bg-muted/50 text-muted-foreground border-muted">
+                          <Badge
+                            key={feature}
+                            variant="secondary"
+                            className="text-xs bg-muted/50 text-muted-foreground border-muted"
+                          >
                             {feature}
                           </Badge>
                         ))}
@@ -710,10 +885,16 @@ const AIStrategyOfferings = () => {
                       {offering.description}
                     </p>
                     <div className="space-y-2">
-                      <h4 className="text-sm font-medium text-foreground">Key Areas:</h4>
+                      <h4 className="text-sm font-medium text-foreground">
+                        Key Areas:
+                      </h4>
                       <div className="flex flex-wrap gap-2">
                         {offering.features.map((feature) => (
-                          <Badge key={feature} variant="secondary" className="text-xs bg-muted/50 text-muted-foreground border-muted">
+                          <Badge
+                            key={feature}
+                            variant="secondary"
+                            className="text-xs bg-muted/50 text-muted-foreground border-muted"
+                          >
                             {feature}
                           </Badge>
                         ))}
@@ -731,13 +912,33 @@ const AIStrategyOfferings = () => {
 };
 
 // Target Audience
-const AIStrategyTargetAudience = () => {
+export const AIStrategyTargetAudience = () => {
   const audiences = [
-    { title: "CTOs", icon: Code, description: "Technical leaders driving AI transformation initiatives" },
-    { title: "Product Leaders", icon: Rocket, description: "Product managers integrating AI into product strategy" },
-    { title: "Business Owners", icon: Briefcase, description: "Executives seeking competitive advantage through AI" },
-    { title: "Innovation Teams", icon: Lightbulb, description: "Teams exploring AI opportunities and applications" },
-    { title: "Enterprise Leaders", icon: Building, description: "Decision makers considering AI adoption" }
+    {
+      title: "CTOs",
+      icon: Code,
+      description: "Technical leaders driving AI transformation initiatives",
+    },
+    {
+      title: "Product Leaders",
+      icon: Rocket,
+      description: "Product managers integrating AI into product strategy",
+    },
+    {
+      title: "Business Owners",
+      icon: Briefcase,
+      description: "Executives seeking competitive advantage through AI",
+    },
+    {
+      title: "Innovation Teams",
+      icon: Lightbulb,
+      description: "Teams exploring AI opportunities and applications",
+    },
+    {
+      title: "Enterprise Leaders",
+      icon: Building,
+      description: "Decision makers considering AI adoption",
+    },
   ];
 
   return (
@@ -753,6 +954,10 @@ const AIStrategyTargetAudience = () => {
           <h2 className="text-4xl lg:text-5xl font-semibold text-white mb-6">
             Ideal For...
           </h2>
+          <p className="mt-4 text-gray-400 max-w-2xl mx-auto">
+            Businesses ready to adopt AI‑powered mobile and web solutions for
+            smarter automation, data‑driven decisions, and scalable growth.
+          </p>
         </motion.div>
 
         <motion.div
@@ -769,7 +974,7 @@ const AIStrategyTargetAudience = () => {
                 key={index}
                 initial={{ opacity: 0, y: 20 }}
                 whileInView={{ opacity: 1, y: 0 }}
-                transition={{ duration: 0.5, delay: index * 0.1 }}
+                transition={{ duration: 0.5, delay: index * 0.01 }}
                 viewport={{ once: true }}
                 whileHover={{ y: -5, scale: 1.02 }}
                 className="group"
@@ -802,21 +1007,25 @@ const AIStrategyCaseStudies = () => {
     {
       title: "Manufacturing AI Transformation",
       client: "Industrial Manufacturing Corp",
-      description: "Developed comprehensive AI strategy that identified 8 key use cases, resulting in 30% operational efficiency improvement and $2.5M annual savings through predictive maintenance and quality optimization.",
-      image: "https://images.unsplash.com/photo-1518709268805-4e9042af2176?w=400&h=300&fit=crop&auto=format", // AI/ML circuit board
+      description:
+        "Developed comprehensive AI strategy that identified 8 key use cases, resulting in 30% operational efficiency improvement and $2.5M annual savings through predictive maintenance and quality optimization.",
+      image:
+        "https://images.unsplash.com/photo-1697577418970-95d99b5a55cf?w=500&auto=format&fit=crop&q=60&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxzZWFyY2h8Mnx8QUl8ZW58MHx8MHx8fDA%3D", // AI/ML circuit board
       results: "$2.5M annual savings, 30% efficiency gain",
       engagement: "6-month strategy engagement",
-      gradient: "from-blue-500/20 to-cyan-500/20"
+      gradient: "from-blue-500/20 to-cyan-500/20",
     },
     {
       title: "Financial Services AI Roadmap",
       client: "Regional Banking Institution",
-      description: "Created strategic AI roadmap focusing on customer experience and risk management, leading to 40% reduction in loan processing time and improved fraud detection capabilities.",
-      image: "https://images.unsplash.com/photo-1677442136019-21780ecad995?w=400&h=300&fit=crop&auto=format", // AI visualization
+      description:
+        "Created strategic AI roadmap focusing on customer experience and risk management, leading to 40% reduction in loan processing time and improved fraud detection capabilities.",
+      image:
+        "https://images.unsplash.com/photo-1677442136019-21780ecad995?w=400&h=300&fit=crop&auto=format", // AI visualization
       results: "40% faster processing, enhanced fraud detection",
       engagement: "4-month strategic assessment",
-      gradient: "from-green-500/20 to-emerald-500/20"
-    }
+      gradient: "from-green-500/20 to-emerald-500/20",
+    },
   ];
 
   return (
@@ -832,6 +1041,10 @@ const AIStrategyCaseStudies = () => {
           <h2 className="text-4xl lg:text-5xl font-semibold text-foreground mb-8">
             Guiding Businesses to AI Success
           </h2>
+          <p className="mt-4 text-gray-400 max-w-2xl mx-auto">
+            Helping companies turn AI potential into real‑world AI‑powered
+            mobile and web solutions that drive growth and efficiency.
+          </p>
         </motion.div>
 
         <motion.div
@@ -846,7 +1059,7 @@ const AIStrategyCaseStudies = () => {
               key={index}
               initial={{ opacity: 0, y: 20 }}
               whileInView={{ opacity: 1, y: 0 }}
-              transition={{ duration: 0.5, delay: index * 0.1 }}
+              transition={{ duration: 0.5, delay: index * 0.01 }}
               viewport={{ once: true }}
               whileHover={{ y: -8, scale: 1.02 }}
               className="group cursor-pointer"
@@ -862,7 +1075,10 @@ const AIStrategyCaseStudies = () => {
                         <div className="text-xs text-muted-foreground mb-2 uppercase tracking-wider">
                           {study.client}
                         </div>
-                        <Badge variant="secondary" className="text-xs bg-accent/20 text-accent border-accent/30">
+                        <Badge
+                          variant="secondary"
+                          className="text-xs bg-accent/20 text-accent border-accent/30"
+                        >
                           {study.results}
                         </Badge>
                       </div>
@@ -874,7 +1090,9 @@ const AIStrategyCaseStudies = () => {
                   </div>
 
                   <div className="px-8 pb-6 flex-1">
-                    <div className={`relative rounded-xl overflow-hidden bg-gradient-to-br ${study.gradient} p-4 border border-white/10`}>
+                    <div
+                      className={`relative rounded-xl overflow-hidden bg-gradient-to-br ${study.gradient} p-4 border border-white/10`}
+                    >
                       <ImageWithFallback
                         src={study.image}
                         alt={study.title}
@@ -901,7 +1119,9 @@ const AIStrategyCaseStudies = () => {
                       size="sm"
                       className="w-full justify-between text-accent hover:text-accent hover:bg-accent/10 group-hover:translate-x-1 transition-all duration-300 h-auto py-3"
                     >
-                      <span className="text-sm font-medium">VIEW FULL CASE STUDY</span>
+                      <span className="text-sm font-medium">
+                        VIEW FULL CASE STUDY
+                      </span>
                       <ArrowRight className="w-4 h-4" />
                     </Button>
                   </div>
@@ -917,6 +1137,7 @@ const AIStrategyCaseStudies = () => {
 
 // Mid-Page CTA
 const AIStrategyInlineCTA = () => {
+  const navigate = useNavigate();
   return (
     <section className="py-20 bg-black">
       <div className="container mx-auto px-6 lg:px-8">
@@ -937,7 +1158,9 @@ const AIStrategyInlineCTA = () => {
             <div className="inline-block p-[2px] rounded-full bg-gradient-to-r from-accent via-blue-500 to-purple-500">
               <div className="bg-black rounded-full px-6 py-3 flex items-center gap-2">
                 <Brain className="w-5 h-5 text-white" />
-                <span className="text-white text-base font-medium">AI Strategy</span>
+                <span className="text-white text-base font-medium">
+                  AI Strategy
+                </span>
               </div>
             </div>
 
@@ -947,10 +1170,14 @@ const AIStrategyInlineCTA = () => {
             </h2>
 
             <p className="text-xl text-gray-300 leading-relaxed max-w-2xl mx-auto">
-              Our AI consultants provide clarity and a strategic direction for your business.
+              Our AI consultants help you clarify your goals and define a
+              focused AI‑powered roadmap for your business.
             </p>
 
-            <ShimmerButton className="text-xl px-10 py-5 rounded-2xl shadow-lg hover:shadow-xl">
+            <ShimmerButton
+              className="text-xl px-10 py-5 rounded-2xl shadow-lg hover:shadow-xl"
+              onClick={() => navigate("/start-a-project")}
+            >
               <div className="inline-flex items-center gap-3">
                 <MessageSquare className="w-6 h-6 flex-shrink-0" />
                 <span>Book a Free AI Strategy Call</span>
@@ -968,40 +1195,71 @@ const HireAIConsultants = () => {
   const consultantTypes = [
     {
       title: "AI Strategy Consultants",
-      description: "Senior strategists who design comprehensive AI transformation plans",
+      description:
+        "Senior strategists who design comprehensive AI transformation plans",
       icon: Brain,
-      skills: ["AI Strategy", "Business Analysis", "Roadmap Development", "ROI Planning"]
+      skills: [
+        "AI Strategy",
+        "Business Analysis",
+        "Roadmap Development",
+        "ROI Planning",
+      ],
     },
     {
       title: "AI Solution Architects",
       description: "Technical architects who design scalable AI infrastructure",
       icon: Cpu,
-      skills: ["Solution Architecture", "Platform Design", "Technology Selection", "Integration Planning"]
+      skills: [
+        "Solution Architecture",
+        "Platform Design",
+        "Technology Selection",
+        "Integration Planning",
+      ],
     },
     {
       title: "Data Strategy Leaders",
       description: "Experts in data governance and AI-ready data architecture",
       icon: Database,
-      skills: ["Data Strategy", "Governance Framework", "Data Architecture", "Quality Management"]
+      skills: [
+        "Data Strategy",
+        "Governance Framework",
+        "Data Architecture",
+        "Quality Management",
+      ],
     },
     {
       title: "AI Ethics Consultants",
       description: "Specialists in responsible AI and ethical implementation",
       icon: Shield,
-      skills: ["AI Ethics", "Bias Mitigation", "Compliance Strategy", "Risk Assessment"]
+      skills: [
+        "AI Ethics",
+        "Bias Mitigation",
+        "Compliance Strategy",
+        "Risk Assessment",
+      ],
     },
     {
       title: "AI Product Strategists",
       description: "Product leaders who integrate AI into product development",
       icon: Rocket,
-      skills: ["Product Strategy", "AI Integration", "User Experience", "Market Analysis"]
+      skills: [
+        "Product Strategy",
+        "AI Integration",
+        "User Experience",
+        "Market Analysis",
+      ],
     },
     {
       title: "Change Management Consultants",
       description: "Experts in organizational transformation for AI adoption",
       icon: Users,
-      skills: ["Change Management", "Training Strategy", "Culture Transformation", "Adoption Planning"]
-    }
+      skills: [
+        "Change Management",
+        "Training Strategy",
+        "Culture Transformation",
+        "Adoption Planning",
+      ],
+    },
   ];
 
   return (
@@ -1018,7 +1276,9 @@ const HireAIConsultants = () => {
             Access Expert AI Strategy & Leadership Talent
           </h2>
           <p className="text-xl text-muted-foreground max-w-3xl mx-auto leading-relaxed">
-            Hire experienced AI strategists, solution architects, and data leaders to drive your AI initiatives.
+            Hire experienced AI strategists, solution architects, and data
+            leaders to drive your AI initiatives and AI‑powered mobile and web
+            development roadmap.
           </p>
         </motion.div>
 
@@ -1036,7 +1296,7 @@ const HireAIConsultants = () => {
                 key={index}
                 initial={{ opacity: 0, y: 20 }}
                 whileInView={{ opacity: 1, y: 0 }}
-                transition={{ duration: 0.5, delay: index * 0.1 }}
+                transition={{ duration: 0.5, delay: index * 0.01 }}
                 viewport={{ once: true }}
                 whileHover={{ y: -5 }}
                 className="group"
@@ -1053,10 +1313,16 @@ const HireAIConsultants = () => {
                       {type.description}
                     </p>
                     <div className="space-y-2">
-                      <h4 className="text-sm font-medium text-foreground">Core Skills:</h4>
+                      <h4 className="text-sm font-medium text-foreground">
+                        Core Skills:
+                      </h4>
                       <div className="flex flex-wrap gap-2">
                         {type.skills.map((skill) => (
-                          <Badge key={skill} variant="secondary" className="text-xs bg-muted/50 text-muted-foreground border-muted">
+                          <Badge
+                            key={skill}
+                            variant="secondary"
+                            className="text-xs bg-muted/50 text-muted-foreground border-muted"
+                          >
                             {skill}
                           </Badge>
                         ))}
@@ -1104,21 +1370,25 @@ const HireAIConsultants = () => {
 const AIStrategyFAQs = () => {
   const faqs = [
     {
-      question: "What is an \"AI Roadmap\"?",
-      answer: "An AI roadmap is a strategic plan that outlines how your organization will adopt and implement AI technologies over time. It includes identified use cases, prioritized initiatives, resource requirements, timeline milestones, and expected outcomes. The roadmap typically spans 12-36 months and provides a clear path from current state to AI-enabled future state, including technical infrastructure, data preparation, team development, and change management considerations."
+      question: 'What is an "AI Roadmap"?',
+      answer:
+        "An AI roadmap is a strategic plan that outlines how your organization will adopt and implement AI technologies over time. It includes identified use cases, prioritized initiatives, resource requirements, timeline milestones, and expected outcomes for AI‑powered mobile and web solutions. The roadmap typically spans 12–36 months and provides a clear path from current state to AI‑enabled future state, including technical infrastructure, data preparation, team development, and change management considerations.",
     },
     {
       question: "How long does an AI strategy engagement typically last?",
-      answer: "AI strategy engagements typically range from 8-16 weeks, depending on organization size and complexity. A typical engagement includes 2-3 weeks for discovery and assessment, 3-4 weeks for opportunity identification and feasibility analysis, 2-3 weeks for roadmap development and ROI modeling, and 1-2 weeks for implementation planning and stakeholder alignment. Larger enterprises or complex multi-business unit organizations may require longer engagements."
+      answer:
+        "AI strategy engagements typically range from 8–16 weeks, depending on organization size and complexity. A typical engagement includes 2–3 weeks for discovery and assessment, 3–4 weeks for opportunity identification and feasibility analysis, 2–3 weeks for roadmap development and ROI modeling, and 1–2 weeks for implementation planning and stakeholder alignment. Larger enterprises or complex multi‑business unit organizations may require longer engagements and AI‑powered design input.",
     },
     {
       question: "Do you help with AI ethics and responsible AI?",
-      answer: "Yes, AI ethics and responsible AI practices are integral parts of our strategy consulting. We help establish ethical AI frameworks, identify and mitigate bias risks, ensure compliance with regulations like GDPR and emerging AI laws, develop transparent AI governance policies, and create accountability mechanisms. This includes bias testing methodologies, explainable AI requirements, data privacy protection, and ongoing monitoring systems to ensure ethical AI deployment."
+      answer:
+        "Yes, AI ethics and responsible AI practices are integral parts of our strategy consulting. We help establish ethical AI frameworks, identify and mitigate bias risks, ensure compliance with regulations like GDPR and emerging AI laws, develop transparent AI governance policies, and create accountability mechanisms. This includes bias testing methodologies, explainable AI requirements, data privacy protection, and ongoing monitoring systems to ensure ethical AI deployment and AI‑powered features done right.",
     },
     {
       question: "What data do I need to prepare for an AI assessment?",
-      answer: "For an AI assessment, we typically need access to business process documentation, existing data inventories and quality reports, current technology architecture diagrams, team skill assessments, and business performance metrics. We'll also review data governance policies, compliance requirements, and any existing analytics or automation initiatives. Most information gathering happens through interviews and workshops, so detailed preparation isn't required upfront - we guide you through the discovery process."
-    }
+      answer:
+        "For an AI assessment, we typically need access to business process documentation, existing data inventories and quality reports, current technology architecture diagrams, team skill assessments, and business performance metrics. We’ll also review data governance policies, compliance requirements, and any existing analytics or automation initiatives. Most information gathering happens through interviews and workshops, so detailed preparation isn’t required upfront we guide you through the discovery process for AI mobile app development and related use cases.",
+    },
   ];
 
   return (
@@ -1151,7 +1421,9 @@ const AIStrategyFAQs = () => {
                 className="bg-gray-900/50 backdrop-blur-md rounded-2xl border border-gray-800 px-10 shadow-lg"
               >
                 <AccordionTrigger className="text-left hover:no-underline py-10 text-xl">
-                  <span className="font-semibold text-white">{faq.question}</span>
+                  <span className="font-semibold text-white">
+                    {faq.question}
+                  </span>
                 </AccordionTrigger>
                 <AccordionContent className="text-gray-300 pb-10 text-lg leading-relaxed">
                   {faq.answer}
@@ -1167,6 +1439,7 @@ const AIStrategyFAQs = () => {
 
 // Final CTA Section
 const AIStrategyFinalCTA = () => {
+  const navigate = useNavigate();
   return (
     <section className="py-20 relative overflow-hidden">
       <div className="container mx-auto px-6 lg:px-8 relative z-10">
@@ -1187,7 +1460,9 @@ const AIStrategyFinalCTA = () => {
             <div className="inline-block p-[2px] rounded-full bg-gradient-to-r from-accent via-blue-500 to-purple-500">
               <div className="bg-background rounded-full px-6 py-3 flex items-center gap-2">
                 <Brain className="w-5 h-5 text-foreground" />
-                <span className="text-foreground text-base font-medium">AI Strategy</span>
+                <span className="text-foreground text-base font-medium">
+                  AI Strategy
+                </span>
               </div>
             </div>
           </motion.div>
@@ -1204,7 +1479,7 @@ const AIStrategyFinalCTA = () => {
             viewport={{ once: true }}
             className="text-xl text-muted-foreground mb-12 max-w-2xl mx-auto leading-relaxed"
           >
-            Partner with our expert AI consultants to transform complex ideas into actionable strategies and achieve measurable results.
+            Work with our expert AI consultants to turn complex ideas into an actionable AI‑powered roadmap and measurable business outcomes.
           </motion.p>
 
           <motion.div
@@ -1214,7 +1489,10 @@ const AIStrategyFinalCTA = () => {
             viewport={{ once: true }}
             className="space-y-8"
           >
-            <ShimmerButton className="px-12 py-6 text-xl rounded-2xl shadow-2xl hover:shadow-accent/25">
+            <ShimmerButton
+              className="px-12 py-6 text-xl rounded-2xl shadow-2xl hover:shadow-accent/25"
+              onClick={() => navigate("/start-a-project")}
+            >
               <div className="inline-flex items-center gap-3">
                 <Rocket className="w-6 h-6 flex-shrink-0" />
                 <span>Start Your AI Strategy</span>
@@ -1242,7 +1520,7 @@ const AIStrategyFinalCTA = () => {
 export const AIStrategyConsulting = () => {
   return (
     <div className="dark min-h-screen">
-      <Navigation />
+      {/* <Navigation /> */}
 
       {/* Hero Section */}
       <section className="bg-black">
@@ -1295,9 +1573,7 @@ export const AIStrategyConsulting = () => {
       </section>
 
       {/* Footer */}
-      <section className="bg-card">
-        <Footer />
-      </section>
+      <section className="bg-background">{/* <Footer /> */}</section>
     </div>
   );
 };

pages/APIBackendDevelopment.tsx

@@ -1,4 +1,4 @@
-import { motion } from "framer-motion";
+import { color, motion } from "framer-motion";
 import {
   Activity,
   ArrowRight,
@@ -45,12 +45,61 @@ import { Button } from "../components/ui/button";
 import { Card, CardContent } from "../components/ui/card";
 import { ShimmerButton } from "../components/ui/shimmer-button";
 import iotDeviceImage from "../src/images/iot-device.webp";
-import { navigateTo } from "@/App";
+import { useNavigate } from "react-router-dom";
+import { Helmet } from "react-helmet-async";
 
 // API & Backend Development Hero Section
 const APIHeroWithCTA = () => {
+  const navigate = useNavigate();
   return (
     <section className="relative py-20 overflow-hidden bg-black">
+      <Helmet>
+        {/* Page Title and Meta Description */}
+        <title>API & Backend Development Services | Reliable Solutions by WDI</title>
+        <meta
+          name="description"
+          content="WDI provides robust API & backend development services, delivering secure, scalable, and high-performance solutions tailored to power your business applications."
+        />
+
+        {/* Canonical Link */}
+        <link rel="canonical" href="https://www.wdipl.com/services/api-backend-development" />
+
+        {/* Open Graph Tags (for Facebook, LinkedIn) */}
+        <meta property="og:title" content="API & Backend Development Services | Reliable Solutions by WDI" />
+        <meta
+          property="og:description"
+          content="WDI provides robust API & backend development services, delivering secure, scalable, and high-performance solutions tailored to power your business applications."
+        />
+        <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="API & Backend Development Services | Reliable Solutions by WDI" />
+        <meta
+          name="twitter:description"
+          content="WDI provides robust API & backend development services, delivering secure, scalable, and high-performance solutions tailored to power your business applications."
+        />
+        <meta name="twitter:image" content="https://www.wdipl.com/your-preview-image.jpg" />
+
+        {/* Social Profiles (using JSON-LD Schema) */}
+        <script type="application/ld+json">
+          {`
+                              {
+                                "@context": "https://schema.org",
+                                "@type": "Organization",
+                                "name": "WDI",
+                                "url": "https://www.wdipl.com",
+                                "sameAs": [
+                                  "https://www.facebook.com/wdideas",
+                                  "https://www.linkedin.com/in/website-developers-india/",
+                                  "https://www.instagram.com/wdipl/"
+                                ]
+                              }
+                            `}
+        </script>
+      </Helmet>
       <div className="container mx-auto px-6 lg:px-8">
         <div className="grid lg:grid-cols-2 gap-16 items-center min-h-[90vh]">
           <motion.div
@@ -77,8 +126,7 @@ const APIHeroWithCTA = () => {
               </h1>
 
               <p className="text-lg text-gray-300 leading-relaxed max-w-lg">
-                Building powerful, scalable, and secure backend infrastructure
-                and APIs to fuel your web, mobile, and IoT applications.
+                Building powerful, scalable, and secure backend infrastructure enhanced by AI mobile app technology to fuel your web, mobile, and IoT applications.
               </p>
             </div>
 
@@ -91,7 +139,7 @@ const APIHeroWithCTA = () => {
             >
               <ShimmerButton
                 className="text-lg px-8 py-4"
-                onClick={() => navigateTo("/start-a-project")}
+                onClick={() => navigate("/start-a-project")}
               >
                 <div className="inline-flex items-center gap-2">
                   <Server className="w-5 h-5 flex-shrink-0" />
@@ -436,6 +484,12 @@ const APIBenefits = () => {
           <h2 className="text-4xl lg:text-5xl font-semibold text-foreground mb-6">
             The Foundation of Your Digital Success
           </h2>
+          <p className="mt-4 text-gray-400 max-w-2xl mx-auto">
+
+            {/* End-to-end solutions for every stage of your product lifecycle. */}
+            WDI's robust AI mobile app backend powers seamless scalability and security, forming the unbreakable core for your web, mobile, and IoT applications.
+
+          </p>
         </motion.div>
 
         <motion.div
@@ -452,7 +506,7 @@ const APIBenefits = () => {
                 key={index}
                 initial={{ opacity: 0, y: 20 }}
                 whileInView={{ opacity: 1, y: 0 }}
-                transition={{ duration: 0.5, delay: index * 0.1 }}
+                transition={{ duration: 0.5, delay: index * 0.01 }}
                 viewport={{ once: true }}
                 whileHover={{ y: -5 }}
                 className="group"
@@ -571,6 +625,13 @@ const APIProcess = () => {
           <h2 className="text-4xl lg:text-5xl font-semibold text-foreground mb-6">
             Our Methodical Approach to Backend Excellence
           </h2>
+          <p className="mt-4 text-gray-400 max-w-2xl mx-auto">
+
+            {/* End-to-end solutions for every stage of your product lifecycle. */}
+
+            WDI employs a proven methodology, from architecture design and API development to AI app development company security protocols, ensuring scalable, high-performance backends for your digital ecosystem.
+
+          </p>
         </motion.div>
 
         <div className="relative">
@@ -589,13 +650,11 @@ const APIProcess = () => {
                   whileInView={{ opacity: 1, x: 0 }}
                   transition={{ duration: 0.8, delay: index * 0.2 }}
                   viewport={{ once: true }}
-                  className={`flex items-center ${
-                    isEven ? "lg:flex-row" : "lg:flex-row-reverse"
+                  className={`flex items-center ${isEven ? "lg:flex-row" : "lg:flex-row-reverse"
                     } flex-col lg:gap-16 gap-8`}
                 >
                   <div
-                    className={`flex-1 ${
-                      isEven ? "lg:text-right" : "lg:text-left"
+                    className={`flex-1 ${isEven ? "lg:text-right" : "lg:text-left"
                       } text-center lg:text-left`}
                   >
                     <div className="bg-card/20 backdrop-blur-md rounded-2xl border border-white/10 p-8 hover:border-accent/30 transition-all duration-300 shadow-lg hover:shadow-xl">
@@ -727,6 +786,14 @@ const APIServices = () => {
           <h2 className="text-4xl lg:text-5xl font-semibold text-white mb-6">
             Our Specialized Backend Development Services
           </h2>
+          <p className="mt-4 text-gray-400 max-w-2xl mx-auto">
+
+            {/* End-to-end solutions for every stage of your product lifecycle. */}
+
+            WDI delivers comprehensive AI-powered features including RESTful APIs, microservices architecture, cloud deployment, and database optimization for enterprise-grade performance.
+
+
+          </p>
         </motion.div>
 
         <motion.div
@@ -743,7 +810,7 @@ const APIServices = () => {
                 key={index}
                 initial={{ opacity: 0, y: 20 }}
                 whileInView={{ opacity: 1, y: 0 }}
-                transition={{ duration: 0.5, delay: index * 0.1 }}
+                transition={{ duration: 0.5, delay: index * 0.01 }}
                 viewport={{ once: true }}
                 whileHover={{ y: -5 }}
                 className="group"
@@ -849,34 +916,41 @@ const APITechStack = () => {
       name: "Node.js",
       logo: "https://cdn.jsdelivr.net/gh/devicons/devicon/icons/nodejs/nodejs-original.svg",
       category: "Runtime",
+      color: "green",
     },
     {
       name: "Python",
       logo: "https://cdn.jsdelivr.net/gh/devicons/devicon/icons/python/python-original.svg",
       category: "Language",
+      color: "blue",
     },
     {
       name: "Java",
       logo: "https://cdn.jsdelivr.net/gh/devicons/devicon/icons/java/java-original.svg",
       category: "Language",
+      color: "blue",
     },
     {
       name: "Ruby",
       logo: "https://cdn.jsdelivr.net/gh/devicons/devicon/icons/ruby/ruby-original.svg",
       category: "Language",
+      color: "blue",
     },
     {
       name: "Go",
       logo: "https://cdn.jsdelivr.net/gh/devicons/devicon/icons/go/go-original.svg",
       category: "Language",
+      color: "blue",
     },
     {
       name: "PHP",
       logo: "https://cdn.jsdelivr.net/gh/devicons/devicon/icons/php/php-original.svg",
       category: "Language",
+      color: "blue",
     },
   ];
 
+
   const frameworks = [
     {
       name: "Express.js",
@@ -905,24 +979,29 @@ const APITechStack = () => {
       name: "PostgreSQL",
       logo: "https://cdn.jsdelivr.net/gh/devicons/devicon/icons/postgresql/postgresql-original.svg",
       category: "SQL",
+      color: "blue",
     },
     {
       name: "MySQL",
       logo: "https://cdn.jsdelivr.net/gh/devicons/devicon/icons/mysql/mysql-original.svg",
       category: "SQL",
+      color: "blue",
     },
     {
       name: "MongoDB",
       logo: "https://cdn.jsdelivr.net/gh/devicons/devicon/icons/mongodb/mongodb-original.svg",
       category: "NoSQL",
+      color: "green",
     },
     {
       name: "Redis",
       logo: "https://cdn.jsdelivr.net/gh/devicons/devicon/icons/redis/redis-original.svg",
       category: "Cache",
+      color: "orange",
     },
   ];
 
+
   const cloudPlatforms = [
     { name: "AWS", icon: Cloud, description: "Amazon Web Services" },
     { name: "Azure", icon: CloudCog, description: "Microsoft Azure" },
@@ -958,8 +1037,7 @@ const APITechStack = () => {
             Building Secure and High-Performance Backends
           </h2>
           <p className="text-xl text-muted-foreground max-w-3xl mx-auto leading-relaxed">
-            With industry-leading technologies that ensure scalability,
-            security, and reliability.
+            With industry-leading technologies enhanced by AI iOS development that ensure scalability, security, and reliability for mission-critical applications.
           </p>
         </motion.div>
 
@@ -974,34 +1052,47 @@ const APITechStack = () => {
           <h3 className="text-2xl font-semibold text-foreground mb-8 text-center">
             Backend Languages & Runtimes
           </h3>
-          <div className="grid grid-cols-2 md:grid-cols-3 lg:grid-cols-6 gap-6">
-            {backends.map((tech, index) => (
+          <div className="grid grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-6">
+            {backends.map((tech, index) => {
+              // const IconComponent = tech.icon;
+              const colorClasses = {
+                blue: "bg-blue-500/20 text-blue-400 border-blue-500/30",
+                orange: "bg-orange-500/20 text-orange-400 border-orange-500/30",
+                green: "bg-green-500/20 text-green-400 border-green-500/30",
+                red: "bg-red-500/20 text-red-400 border-red-500/30",
+              };
+
+              return (
                 <motion.div
                   key={index}
                   initial={{ opacity: 0, y: 20 }}
                   whileInView={{ opacity: 1, y: 0 }}
-                transition={{ duration: 0.5, delay: index * 0.1 }}
+                  transition={{ duration: 0.5, delay: index * 0.01 }}
                   viewport={{ once: true }}
                   whileHover={{ y: -5, scale: 1.05 }}
                   className="group"
                 >
-                <Card className="bg-card/20 backdrop-blur-md border-white/10 hover:border-accent/30 transition-all duration-300 shadow-lg hover:shadow-xl rounded-2xl p-6 text-center">
-                  <div className="w-12 h-12 mx-auto mb-4 flex items-center justify-center">
+                  <Card className="bg-gray-900/50 backdrop-blur-md border-gray-800 hover:border-accent/30 transition-all duration-300 shadow-lg hover:shadow-xl rounded-2xl p-4 text-center">
+                    <div
+                      className={`w-12 h-12 rounded-lg flex items-center justify-center mx-auto mb-3 ${colorClasses[tech.color as keyof typeof colorClasses] ||
+                        "bg-accent/20"
+                        }`}
+                    >
                       <ImageWithFallback
                         src={tech.logo}
                         alt={tech.name}
-                      className="w-10 h-10 object-contain filter brightness-0 invert dark:brightness-100 dark:invert-0 group-hover:brightness-100 group-hover:invert-0 transition-all duration-300"
+                        className="w-8 h-8 object-contain"
                       />
                     </div>
-                  <h4 className="font-semibold text-foreground text-sm mb-1">
+
+                    <h4 className="font-semibold text-white text-sm mb-1">
                       {tech.name}
                     </h4>
-                  <p className="text-xs text-muted-foreground">
-                    {tech.category}
-                  </p>
+                    <p className="text-xs text-gray-400">{tech.category}</p>
                   </Card>
                 </motion.div>
-            ))}
+              );
+            })}
           </div>
         </motion.div>
 
@@ -1024,7 +1115,7 @@ const APITechStack = () => {
                   key={index}
                   initial={{ opacity: 0, y: 20 }}
                   whileInView={{ opacity: 1, y: 0 }}
-                  transition={{ duration: 0.5, delay: index * 0.1 }}
+                  transition={{ duration: 0.5, delay: index * 0.01 }}
                   viewport={{ once: true }}
                   whileHover={{ y: -5 }}
                   className="group"
@@ -1057,32 +1148,47 @@ const APITechStack = () => {
           <h3 className="text-2xl font-semibold text-foreground mb-8 text-center">
             Database Technologies
           </h3>
-          <div className="grid grid-cols-2 md:grid-cols-4 gap-6">
-            {databases.map((db, index) => (
+          <div className="grid grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-6">
+            {databases.map((tech, index) => {
+              // const IconComponent = tech.icon;
+              const colorClasses = {
+                blue: "bg-blue-500/20 text-blue-400 border-blue-500/30",
+                orange: "bg-orange-500/20 text-orange-400 border-orange-500/30",
+                green: "bg-green-500/20 text-green-400 border-green-500/30",
+                red: "bg-red-500/20 text-red-400 border-red-500/30",
+              };
+
+              return (
                 <motion.div
                   key={index}
                   initial={{ opacity: 0, y: 20 }}
                   whileInView={{ opacity: 1, y: 0 }}
-                transition={{ duration: 0.5, delay: index * 0.1 }}
+                  transition={{ duration: 0.5, delay: index * 0.01 }}
                   viewport={{ once: true }}
                   whileHover={{ y: -5, scale: 1.05 }}
                   className="group"
                 >
-                <Card className="bg-card/20 backdrop-blur-md border-white/10 hover:border-accent/30 transition-all duration-300 shadow-lg hover:shadow-xl rounded-2xl p-4 text-center">
-                  <div className="w-10 h-10 mx-auto mb-3 flex items-center justify-center">
+                  <Card className="bg-gray-900/50 backdrop-blur-md border-gray-800 hover:border-accent/30 transition-all duration-300 shadow-lg hover:shadow-xl rounded-2xl p-4 text-center">
+                    <div
+                      className={`w-12 h-12 rounded-lg flex items-center justify-center mx-auto mb-3 ${colorClasses[tech.color as keyof typeof colorClasses] ||
+                        "bg-accent/20"
+                        }`}
+                    >
                       <ImageWithFallback
-                      src={db.logo}
-                      alt={db.name}
-                      className="w-8 h-8 object-contain filter brightness-0 invert dark:brightness-100 dark:invert-0 group-hover:brightness-100 group-hover:invert-0 transition-all duration-300"
+                        src={tech.logo}
+                        alt={tech.name}
+                        className="w-8 h-8 object-contain"
                       />
                     </div>
-                  <h4 className="font-semibold text-foreground text-sm mb-1">
-                    {db.name}
+
+                    <h4 className="font-semibold text-white text-sm mb-1">
+                      {tech.name}
                     </h4>
-                  <p className="text-xs text-muted-foreground">{db.category}</p>
+                    <p className="text-xs text-gray-400">{tech.category}</p>
                   </Card>
                 </motion.div>
-            ))}
+              );
+            })}
           </div>
         </motion.div>
 
@@ -1107,7 +1213,7 @@ const APITechStack = () => {
                     key={index}
                     initial={{ opacity: 0, y: 20 }}
                     whileInView={{ opacity: 1, y: 0 }}
-                    transition={{ duration: 0.5, delay: index * 0.1 }}
+                    transition={{ duration: 0.5, delay: index * 0.01 }}
                     viewport={{ once: true }}
                     whileHover={{ y: -5 }}
                     className="group"
@@ -1142,7 +1248,7 @@ const APITechStack = () => {
                     key={index}
                     initial={{ opacity: 0, y: 20 }}
                     whileInView={{ opacity: 1, y: 0 }}
-                    transition={{ duration: 0.5, delay: index * 0.1 }}
+                    transition={{ duration: 0.5, delay: index * 0.01 }}
                     viewport={{ once: true }}
                     whileHover={{ y: -5 }}
                     className="group"
@@ -1219,6 +1325,13 @@ const APICaseStudies = () => {
           <h2 className="text-4xl lg:text-5xl font-semibold text-white mb-8">
             Robust Backends Powering Digital Innovation
           </h2>
+          <p className="mt-4 text-gray-400 max-w-2xl mx-auto">
+
+            {/* End-to-end solutions for every stage of your product lifecycle. */}
+
+            WDI engineers scalable AI-powered features that deliver predictive scaling, automated monitoring, and intelligent optimization for unmatched digital performance.
+
+          </p>
         </motion.div>
 
         <motion.div
@@ -1233,7 +1346,7 @@ const APICaseStudies = () => {
               key={index}
               initial={{ opacity: 0, y: 20 }}
               whileInView={{ opacity: 1, y: 0 }}
-              transition={{ duration: 0.5, delay: index * 0.1 }}
+              transition={{ duration: 0.5, delay: index * 0.01 }}
               viewport={{ once: true }}
               whileHover={{ y: -8, scale: 1.02 }}
               className="group cursor-pointer"
@@ -1311,6 +1424,7 @@ const APICaseStudies = () => {
 
 // Mid-Page CTA
 const APIInlineCTA = () => {
+  const navigate = useNavigate();
   return (
     <section className="py-20">
       <div className="container mx-auto px-6 lg:px-8">
@@ -1349,7 +1463,7 @@ const APIInlineCTA = () => {
 
             <ShimmerButton
               className="text-xl px-10 py-5 rounded-2xl shadow-lg hover:shadow-xl"
-              onClick={() => navigateTo("/start-a-project")}
+              onClick={() => navigate("/start-a-project")}
             >
               <div className="inline-flex items-center gap-3">
                 <MessageSquare className="w-6 h-6 flex-shrink-0" />
@@ -1365,6 +1479,7 @@ const APIInlineCTA = () => {
 
 // Hire Backend Developers
 const HireBackendDevelopers = () => {
+  const navigate = useNavigate();
   const developerTypes = [
     {
       title: "Node.js Developers",
@@ -1428,8 +1543,7 @@ const HireBackendDevelopers = () => {
             Hire Specialized Backend & API Developers
           </h2>
           <p className="text-xl text-gray-300 max-w-3xl mx-auto leading-relaxed">
-            Access our pool of expert backend engineers proficient in various
-            languages, databases, and cloud platforms.
+            Access WDI's pool of expert iOS mobile app development engineers proficient in Node.js, Python, MongoDB, AWS, and seamless cloud integrations.
           </p>
         </motion.div>
 
@@ -1447,7 +1561,7 @@ const HireBackendDevelopers = () => {
                 key={index}
                 initial={{ opacity: 0, y: 20 }}
                 whileInView={{ opacity: 1, y: 0 }}
-                transition={{ duration: 0.5, delay: index * 0.1 }}
+                transition={{ duration: 0.5, delay: index * 0.01 }}
                 viewport={{ once: true }}
                 whileHover={{ y: -5 }}
                 className="group"
@@ -1494,16 +1608,18 @@ const HireBackendDevelopers = () => {
           className="text-center space-y-6"
         >
           <div className="flex flex-col sm:flex-row gap-4 justify-center">
-            <ShimmerButton className="text-lg px-8 py-4">
+            <ShimmerButton className="text-lg px-8 py-4"
+              onClick={() => navigate("/hire-talent/api-backend-developers")}
+            >
               <div className="inline-flex items-center gap-2">
                 <Users className="w-5 h-5 flex-shrink-0" />
-                <span>Hire Backend Developers</span>
+                <span>Hire api Backend Developers</span>
               </div>
             </ShimmerButton>
             <Button
               variant="outline"
               size="lg"
-              className="text-lg px-8 py-4 border-gray-600 text-gray-300 hover:bg-gray-800 hover:text-white"
+              className="text-lg px-8 py-4 h-auto border-gray-600 text-gray-300 hover:bg-gray-800 hover:text-white"
             >
               <div className="inline-flex items-center gap-2">
                 <FileText className="w-5 h-5 flex-shrink-0" />
@@ -1590,6 +1706,7 @@ const APIFAQs = () => {
 
 // Final CTA Section
 const APIFinalCTA = () => {
+  const navigate = useNavigate();
   return (
     <section className="py-20 relative overflow-hidden">
       <div className="container mx-auto px-6 lg:px-8 relative z-10">
@@ -1629,8 +1746,7 @@ const APIFinalCTA = () => {
             viewport={{ once: true }}
             className="text-xl text-muted-foreground mb-12 max-w-2xl mx-auto leading-relaxed"
           >
-            Ensure your applications are fast, secure, and scalable with our
-            expert API and backend development services.
+            Ensure your applications are fast, secure, and scalable with our expert AI-powered design API and backend development services.
           </motion.p>
 
           <motion.div
@@ -1642,7 +1758,7 @@ const APIFinalCTA = () => {
           >
             <ShimmerButton
               className="px-12 py-6 text-xl rounded-2xl shadow-2xl hover:shadow-accent/25"
-              onClick={() => navigateTo("/start-a-project")}
+              onClick={() => navigate("/start-a-project")}
             >
               <div className="inline-flex items-center gap-3">
                 <Rocket className="w-6 h-6 flex-shrink-0" />
@@ -1672,7 +1788,7 @@ const APIFinalCTA = () => {
 export const APIBackendDevelopment = () => {
   return (
     <div className="dark min-h-screen">
-      <Navigation />
+      {/* <Navigation /> */}
 
       {/* Hero Section */}
       <section className="bg-black">
@@ -1684,6 +1800,11 @@ export const APIBackendDevelopment = () => {
         <APIBenefits />
       </section>
 
+      {/* Case Studies */}
+      <section className="bg-background">
+        <APICaseStudies />
+      </section>
+
       {/* Development Process */}
       <section className="bg-card">
         <APIProcess />
@@ -1699,15 +1820,10 @@ export const APIBackendDevelopment = () => {
         <APITechStack />
       </section>
 
-      {/* Case Studies */}
-      <section className="bg-background">
-        <APICaseStudies />
-      </section>
-
       {/* Mid-Page CTA */}
-      <section className="bg-card">
+      {/* <section className="bg-card">
         <APIInlineCTA />
-      </section>
+      </section> */}
 
       {/* Hire Developers */}
       <section className="bg-background">
@@ -1715,9 +1831,9 @@ export const APIBackendDevelopment = () => {
       </section>
 
       {/* FAQs */}
-      <section className="bg-card">
+      {/* <section className="bg-card">
         <APIFAQs />
-      </section>
+      </section> */}
 
       {/* Final CTA */}
       <section className="bg-background">
@@ -1725,8 +1841,8 @@ export const APIBackendDevelopment = () => {
       </section>
 
       {/* Footer */}
-      <section className="bg-card">
-        <Footer />
+      <section className="bg-background">
+        {/* <Footer /> */}
       </section>
     </div>
   );

pages/AboutWDI.tsx

@@ -9,18 +9,68 @@ import { ShimmerButton } from "../components/ui/shimmer-button";
 import { Badge } from "../components/ui/badge";
 import { Card, CardContent } from "../components/ui/card";
 import { GridPattern } from "../components/GridPattern";
-import { navigateTo } from "../App";
 import {
   ArrowRight, Users, Globe, Award, Target, Heart, Lightbulb,
   Rocket, TrendingUp, CheckCircle, Star, Coffee, Monitor,
   Calendar, Eye, Building, FileText, Settings, Trophy,
   BookOpen, MessageSquare, Briefcase, Mail
 } from "lucide-react";
+import { Helmet } from "react-helmet-async";
+import { CarouselTestimonials } from "@/components/CarouselTestimonials";
+import { useNavigate } from "react-router-dom";
 
 // Enhanced Hero Section
 const HeroWithCTA = () => {
+  const navigate = useNavigate();
   return (
     <section className="relative py-20 overflow-hidden bg-black">
+      <Helmet>
+        {/* Page Title and Meta Description */}
+        <title>About WDI | Why Choose Us for Digital Innovation Success</title>
+        <meta
+          name="description"
+          content="Discover what makes WDI a trusted name in digital innovation. Learn about our strengths, capabilities, and value-driven approach to tech excellence."
+        />
+
+        {/* Canonical Link */}
+        <link rel="canonical" href="https://www.wdipl.com/company/about-wdi" />
+
+        {/* Open Graph Tags (for Facebook, LinkedIn) */}
+        <meta property="og:title" content="About WDI | Why Choose Us for Digital Innovation Success" />
+        <meta
+          property="og:description"
+          content="Discover what makes WDI a trusted name in digital innovation. Learn about our strengths, capabilities, and value-driven approach to tech excellence."
+        />
+        <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="About WDI | Why Choose Us for Digital Innovation Success" />
+        <meta
+          name="twitter:description"
+          content="Discover what makes WDI a trusted name in digital innovation. Learn about our strengths, capabilities, and value-driven approach to tech excellence."
+        />
+        <meta name="twitter:image" content="https://www.wdipl.com/your-preview-image.jpg" />
+
+        {/* Social Profiles (using JSON-LD Schema) */}
+        <script type="application/ld+json">
+          {`
+                              {
+                                "@context": "https://schema.org",
+                                "@type": "Organization",
+                                "name": "WDI",
+                                "url": "https://www.wdipl.com",
+                                "sameAs": [
+                                  "https://www.facebook.com/wdideas",
+                                  "https://www.linkedin.com/in/website-developers-india/",
+                                  "https://www.instagram.com/wdipl/"
+                                ]
+                              }
+                            `}
+        </script>
+      </Helmet>
       <div className="container mx-auto px-6 lg:px-8">
         <div className="grid lg:grid-cols-2 gap-16 items-center min-h-[90vh]">
           <motion.div
@@ -46,7 +96,7 @@ const HeroWithCTA = () => {
               </h1>
 
               <p className="text-lg text-gray-300 leading-relaxed max-w-lg">
-                WDI is a dynamic and forward-thinking company dedicated to transforming businesses through cutting-edge technology and exceptional service.
+                WDI is a dynamic, AI‑driven company dedicated to transforming businesses through cutting‑edge technology and exceptional digital solutions.
               </p>
             </div>
 
@@ -57,7 +107,7 @@ const HeroWithCTA = () => {
               transition={{ duration: 0.8, delay: 0.3 }}
               className="flex flex-col sm:flex-row gap-4"
             >
-              <ShimmerButton className="text-lg px-8 py-4" onClick={() => navigateTo('/services')}>
+              <ShimmerButton className="text-lg px-8 py-4" onClick={() => navigate('/services')}>
                 <div className="inline-flex items-center gap-2">
                   <Briefcase className="w-4 h-4 flex-shrink-0" />
                   <span>Explore Our Services</span>
@@ -66,8 +116,8 @@ const HeroWithCTA = () => {
               <Button
                 variant="secondary"
                 size="lg"
-                className="text-lg px-8 py-4 h-[56px]"
-                onClick={() => navigateTo('/case-studies')}
+                className="text-lg px-8 py-4 h-auto"
+                onClick={() => navigate('/case-studies')}
               >
                 <Eye className="w-4 h-4 flex-shrink-0" />
                 <span>View Our Portfolio</span>
@@ -142,8 +192,7 @@ const WhyChooseWDISection = () => {
           </h2>
 
           <p className="text-xl text-gray-300 leading-relaxed">
-            Our core strengths that set us apart in the industry
-          </p>
+            Our AI‑driven core strengths that set us apart in the digital solutions and app development industry.          </p>
         </motion.div>
 
         <motion.div
@@ -161,7 +210,7 @@ const WhyChooseWDISection = () => {
                 key={strength.id}
                 initial={{ opacity: 0, y: 20 }}
                 whileInView={{ opacity: 1, y: 0 }}
-                transition={{ duration: 0.5, delay: index * 0.1 }}
+                transition={{ duration: 0.5, delay: index * 0.01 }}
                 viewport={{ once: true }}
                 whileHover={{ y: -8, scale: 1.02 }}
                 className="group cursor-pointer"
@@ -193,10 +242,10 @@ const WhyChooseWDISection = () => {
 // Our Impact in Numbers Section
 const ImpactNumbersSection = () => {
   const stats = [
-    { number: "500+", label: "Projects Delivered" },
-    { number: "150+", label: "Expert Professionals" },
-    { number: "50+", label: "Global Clients" },
-    { number: "6+", label: "Years of Excellence" }
+    { number: "2000+", label: "Projects Delivered" },
+    { number: "100+", label: "Expert Professionals" },
+    { number: "1000+", label: "Global Clients" },
+    { number: "24+", label: "Years of Excellence" }
   ];
 
   return (
@@ -215,7 +264,7 @@ const ImpactNumbersSection = () => {
           </h2>
 
           <p className="text-xl text-gray-300 leading-relaxed">
-            Measurable results that speak to our commitment and expertise
+            Measurable AI‑driven results that speak to our commitment and expertise in digital solutions and app development.
           </p>
         </motion.div>
 
@@ -231,7 +280,7 @@ const ImpactNumbersSection = () => {
               key={index}
               initial={{ opacity: 0, y: 20 }}
               whileInView={{ opacity: 1, y: 0 }}
-              transition={{ duration: 0.5, delay: index * 0.1 }}
+              transition={{ duration: 0.5, delay: index * 0.01 }}
               viewport={{ once: true }}
               className="text-center"
             >
@@ -249,6 +298,7 @@ const ImpactNumbersSection = () => {
 
 // Learn More About WDI Section
 const LearnMoreSection = () => {
+  const navigate = useNavigate();
   const sections = [
     {
       title: "Our History",
@@ -320,11 +370,11 @@ const LearnMoreSection = () => {
                 key={index}
                 initial={{ opacity: 0, y: 20 }}
                 whileInView={{ opacity: 1, y: 0 }}
-                transition={{ duration: 0.5, delay: index * 0.1 }}
+                transition={{ duration: 0.5, delay: index * 0.01 }}
                 viewport={{ once: true }}
                 whileHover={{ y: -5 }}
                 className="group cursor-pointer"
-                onClick={() => navigateTo(section.link)}
+                onClick={() => navigate(section.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">
@@ -366,15 +416,17 @@ const TestimonialSection = () => {
           whileInView={{ opacity: 1, y: 0 }}
           transition={{ duration: 0.8 }}
           viewport={{ once: true }}
-          className="text-left mb-16"
+        // className="text-left mb-16"
         >
-          <h2 className="text-3xl lg:text-4xl font-semibold leading-tight mb-6">
+          {/* <h2 className="text-3xl lg:text-4xl font-semibold leading-tight mb-6">
             <span className="text-white">What Our </span>
             <span className="text-[#E5195E]">Clients Say</span>
-          </h2>
+          </h2> */}
+          <CarouselTestimonials />
         </motion.div>
 
-        <motion.div
+
+        {/* <motion.div
           initial={{ opacity: 0, y: 40 }}
           whileInView={{ opacity: 1, y: 0 }}
           transition={{ duration: 0.8, delay: 0.2 }}
@@ -406,7 +458,7 @@ const TestimonialSection = () => {
               </div>
             </CardContent>
           </Card>
-        </motion.div>
+        </motion.div> */}
       </div>
     </section>
   );
@@ -448,7 +500,7 @@ const MissionSection = () => {
           </h2>
 
           <p className="text-xl text-gray-300 leading-relaxed max-w-4xl mb-12">
-            To empower businesses worldwide with innovative digital solutions that drive growth, enhance efficiency, and create lasting value. We believe in the transformative power of technology and are committed to making it accessible, reliable, and impactful for every client we serve.
+            To empower businesses worldwide with AI‑driven digital solutions that drive growth, enhance efficiency, and create lasting value. We believe in the transformative power of technology and are committed to making it accessible, reliable, and impactful for every client we serve.
           </p>
         </motion.div>
 
@@ -466,7 +518,7 @@ const MissionSection = () => {
                 key={index}
                 initial={{ opacity: 0, y: 20 }}
                 whileInView={{ opacity: 1, y: 0 }}
-                transition={{ duration: 0.5, delay: index * 0.1 }}
+                transition={{ duration: 0.5, delay: index * 0.01 }}
                 viewport={{ once: true }}
                 className="text-center"
               >
@@ -490,6 +542,7 @@ const MissionSection = () => {
 
 // Updated CTA Section
 const InlineCTA = () => {
+  const navigate = useNavigate();
   return (
     <section className="py-20 bg-black">
       <div className="container mx-auto px-6 lg:px-8">
@@ -533,7 +586,8 @@ const InlineCTA = () => {
             <div className="flex flex-col sm:flex-row items-start gap-4">
               <ShimmerButton
                 className="text-xl px-10 py-5 rounded-2xl shadow-lg hover:shadow-xl bg-[#E5195E] hover:bg-[#E5195E]/90"
-                onClick={() => navigateTo('/contact')}
+                // onClick={() => navigate('/contact')}
+                onClick={() => navigate("/start-a-project")}
               >
                 <div className="inline-flex items-center gap-3">
                   <Mail className="w-6 h-6 flex-shrink-0" />
@@ -545,7 +599,7 @@ const InlineCTA = () => {
                 variant="secondary"
                 size="lg"
                 className="text-xl px-10 py-5 rounded-2xl h-[56px]"
-                onClick={() => navigateTo('/services')}
+                onClick={() => navigate('/services')}
               >
                 <Briefcase className="w-6 h-6 flex-shrink-0" />
                 <span>Explore Our Services</span>
@@ -562,30 +616,30 @@ const InlineCTA = () => {
 const aboutWDIFAQs = [
   {
     question: "When was WDI founded?",
-    answer: "WDI was founded in 1999 with a mission to transform businesses through cutting-edge technology and exceptional service. Since then, we've grown to become industry leaders in digital solutions."
+    answer: "WDI was founded in 1999 with a mission to transform businesses through cutting‑edge technology and exceptional digital solutions. Today, we are recognized industry leaders in AI‑powered app and web development."
   },
   {
     question: "What makes WDI different from other development companies?",
-    answer: "Our unique combination of technical expertise, innovative approach, and client-focused service sets us apart. We don't just deliver projects; we build lasting partnerships and drive real business value."
+    answer: "Our unique combination of AI‑driven technical expertise, innovative product thinking, and client‑first service sets us apart. We don’t just deliver projects we build lasting partnerships and drive measurable business growth."
   },
   {
     question: "How many clients has WDI served?",
-    answer: "We've had the privilege of serving over 50 global clients across various industries, delivering more than 500 successful projects with a 98% client satisfaction rate."
+    answer: "We’ve had the privilege of serving over 50 global clients across multiple industries, delivering more than 500 successful AI‑driven web and mobile projects with a 98% client satisfaction rate."
   },
   {
     question: "What industries does WDI specialize in?",
-    answer: "We serve clients across multiple industries including fintech, healthcare, e-commerce, education, and enterprise solutions. Our diverse expertise allows us to adapt our solutions to any industry's specific needs."
+    answer: "We specialize in fintech, healthcare, e‑commerce, education, and enterprise digital solutions. Our AI‑driven development experience allows us to customize scalable products for any industry’s unique needs."
   },
   {
     question: "Does WDI offer ongoing support after project completion?",
-    answer: "Absolutely! We believe in long-term partnerships with our clients. We provide comprehensive post-launch support, maintenance, updates, and continuous optimization to ensure your solutions evolve with your business needs."
+    answer: "Absolutely. We believe in long‑term partnerships and provide comprehensive post‑launch support, maintenance, updates, and continuous optimization so your AI‑driven solutions evolve with your business."
   }
 ];
 
 export const AboutWDI = () => {
   return (
     <div className="dark min-h-screen bg-background">
-      <Navigation />
+      {/* {/* <Navigation /> */}
       <HeroWithCTA />
       <WhyChooseWDISection />
       <ImpactNumbersSection />
@@ -596,10 +650,10 @@ export const AboutWDI = () => {
       <InlineCTA />
       <FAQSection
         title="About WDI Questions"
-        subtitle="Get answers to common questions about our company and mission."
+        subtitle="Get answers to common questions about our company, AI‑driven services, and mission."
         faqs={aboutWDIFAQs}
       />
-      <Footer />
+      {/* <Footer /> */}
     </div>
   );
 };

pages/AboutWDIMain.tsx

@@ -5,9 +5,10 @@ import { Button } from "../components/ui/button";
 import { Badge } from "../components/ui/badge";
 import { Card, CardContent } from "../components/ui/card";
 import { ArrowRight, Lightbulb, Users2, Target, TrendingUp, Clock, Award, Briefcase, Heart, Newspaper, Star } from "lucide-react";
-import { navigateTo } from "../App";
+import { useNavigate } from "react-router-dom";
 
 export const AboutWDIMain = () => {
+  const navigate = useNavigate();
   const keyHighlights = [
     {
       icon: Lightbulb,
@@ -86,7 +87,7 @@ export const AboutWDIMain = () => {
 
   return (
     <div className="dark min-h-screen bg-background">
-      <Navigation />
+      {/* <Navigation /> */}
       
       {/* Hero Section */}
       <section className="relative pt-24 pb-16 overflow-hidden">
@@ -204,7 +205,7 @@ export const AboutWDIMain = () => {
           
           <div className="grid md:grid-cols-2 lg:grid-cols-3 gap-8">
             {subPages.map((page, index) => (
-              <Card key={index} className="bg-card/50 border-white/10 hover:border-[#E5195E]/30 transition-all duration-300 group cursor-pointer" onClick={() => navigateTo(page.href)}>
+              <Card key={index} className="bg-card/50 border-white/10 hover:border-[#E5195E]/30 transition-all duration-300 group cursor-pointer" onClick={() => navigate(page.href)}>
                 <CardContent className="p-6">
                   <page.icon className="w-8 h-8 text-[#E5195E] mb-4 group-hover:scale-110 transition-transform duration-300" />
                   <h3 className="text-xl font-semibold text-white mb-3 group-hover:text-[#E5195E] transition-colors duration-300">
@@ -323,7 +324,7 @@ export const AboutWDIMain = () => {
         </div>
       </section>
 
-      <Footer />
+      {/* <Footer /> */}
     </div>
   );
 };

pages/AdminPanelsDashboards.tsx

@@ -1,4 +1,4 @@
-import { motion } from "framer-motion";
+import { color, motion } from "framer-motion";
 import {
   ArrowRight,
   BarChart,
@@ -11,7 +11,9 @@ import {
   FileText,
   GraduationCap,
   Handshake,
+  Layers,
   LineChart,
+  Link,
   MessageSquare,
   Monitor,
   MousePointer,
@@ -19,6 +21,7 @@ import {
   Paintbrush2,
   Palette,
   Receipt,
+  Server,
   Settings,
   Shield,
   ShieldCheck,
@@ -45,12 +48,61 @@ import { Button } from "../components/ui/button";
 import { Card, CardContent } from "../components/ui/card";
 import { ShimmerButton } from "../components/ui/shimmer-button";
 import healthcareImage from "../src/images/healthcare.webp";
-import { navigateTo } from "@/App";
+import { Helmet } from "react-helmet-async";
+import { useNavigate } from "react-router-dom";
 
 // Admin Panels & Dashboards Hero Section
 const AdminHeroWithCTA = () => {
+  const navigate = useNavigate();
   return (
     <section className="relative py-20 overflow-hidden bg-black">
+      <Helmet>
+        {/* Page Title and Meta Description */}
+        <title>Admin Panels & Dashboards Development | Custom Solutions by WDI</title>
+        <meta
+          name="description"
+          content="WDI builds custom Admin Panels & Dashboards that offer real-time insights, smooth control, and secure access for managing your digital platforms."
+        />
+
+        {/* Canonical Link */}
+        <link rel="canonical" href="https://www.wdipl.com/services/admin-panels-dashboards" />
+
+        {/* Open Graph Tags (for Facebook, LinkedIn) */}
+        <meta property="og:title" content="Admin Panels & Dashboards Development | Custom Solutions by WDI" />
+        <meta
+          property="og:description"
+          content="WDI builds custom Admin Panels & Dashboards that offer real-time insights, smooth control, and secure access for managing your digital platforms."
+        />
+        <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="Admin Panels & Dashboards Development | Custom Solutions by WDI" />
+        <meta
+          name="twitter:description"
+          content="WDI builds custom Admin Panels & Dashboards that offer real-time insights, smooth control, and secure access for managing your digital platforms."
+        />
+        <meta name="twitter:image" content="https://www.wdipl.com/your-preview-image.jpg" />
+
+        {/* Social Profiles (using JSON-LD Schema) */}
+        <script type="application/ld+json">
+          {`
+                              {
+                                "@context": "https://schema.org",
+                                "@type": "Organization",
+                                "name": "WDI",
+                                "url": "https://www.wdipl.com",
+                                "sameAs": [
+                                  "https://www.facebook.com/wdideas",
+                                  "https://www.linkedin.com/in/website-developers-india/",
+                                  "https://www.instagram.com/wdipl/"
+                                ]
+                              }
+                            `}
+        </script>
+      </Helmet>
       <div className="container mx-auto px-6 lg:px-8">
         <div className="grid lg:grid-cols-2 gap-16 items-center min-h-[90vh]">
           <motion.div
@@ -77,9 +129,7 @@ const AdminHeroWithCTA = () => {
               </h1>
 
               <p className="text-lg text-gray-300 leading-relaxed max-w-lg">
-                Empower your team with custom, data-rich admin interfaces and
-                dashboards for streamlined operations, reporting, and
-                management.
+                Empower your team with custom, data-rich admin interfaces enhanced by AI mobile app features for streamlined operations, reporting, and management.
               </p>
             </div>
 
@@ -92,7 +142,7 @@ const AdminHeroWithCTA = () => {
             >
               <ShimmerButton
                 className="text-lg px-8 py-4"
-                onClick={() => navigateTo("/start-a-project")}
+                onClick={() => navigate("/start-a-project")}
               >
                 <div className="inline-flex items-center gap-2">
                   <Monitor className="w-5 h-5 flex-shrink-0" />
@@ -423,6 +473,13 @@ const AdminBenefits = () => {
           <h2 className="text-4xl lg:text-5xl font-semibold text-foreground mb-6">
             Why Choose a Bespoke Admin Panel from WDI?
           </h2>
+          <p className="mt-4 text-gray-400 max-w-2xl mx-auto">
+
+            {/* End-to-end solutions for every stage of your product lifecycle. */}
+
+            WDI delivers fully customized AI mobile app admin panels offering superior scalability, real-time insights, and role-based security for seamless eCommerce management.
+
+          </p>
         </motion.div>
 
         <motion.div
@@ -439,7 +496,7 @@ const AdminBenefits = () => {
                 key={index}
                 initial={{ opacity: 0, y: 20 }}
                 whileInView={{ opacity: 1, y: 0 }}
-                transition={{ duration: 0.5, delay: index * 0.1 }}
+                transition={{ duration: 0.5, delay: index * 0.01 }}
                 viewport={{ once: true }}
                 whileHover={{ y: -5 }}
                 className="group"
@@ -552,6 +609,12 @@ const AdminProcess = () => {
           <h2 className="text-4xl lg:text-5xl font-semibold text-foreground mb-6">
             Our Approach to Building Your Operational Command Center
           </h2>
+          <p className="mt-4 text-gray-400 max-w-2xl mx-auto">
+
+            {/* End-to-end solutions for every stage of your product lifecycle. */}
+            WDI follows a discovery-design-develop-deploy methodology enhanced by AI mobile app insights to create intuitive, scalable admin panels that optimize your eCommerce operations.
+
+          </p>
         </motion.div>
 
         <div className="relative">
@@ -570,13 +633,11 @@ const AdminProcess = () => {
                   whileInView={{ opacity: 1, x: 0 }}
                   transition={{ duration: 0.8, delay: index * 0.2 }}
                   viewport={{ once: true }}
-                  className={`flex items-center ${
-                    isEven ? "lg:flex-row" : "lg:flex-row-reverse"
+                  className={`flex items-center ${isEven ? "lg:flex-row" : "lg:flex-row-reverse"
                     } flex-col lg:gap-16 gap-8`}
                 >
                   <div
-                    className={`flex-1 ${
-                      isEven ? "lg:text-right" : "lg:text-left"
+                    className={`flex-1 ${isEven ? "lg:text-right" : "lg:text-left"
                       } text-center lg:text-left`}
                   >
                     <div className="bg-card/20 backdrop-blur-md rounded-2xl border border-white/10 p-8 hover:border-accent/30 transition-all duration-300 shadow-lg hover:shadow-xl">
@@ -695,6 +756,13 @@ const AdminServices = () => {
           <h2 className="text-4xl lg:text-5xl font-semibold text-white mb-6">
             Our Specialized Admin & Dashboard Solutions
           </h2>
+          <p className="mt-4 text-gray-400 max-w-2xl mx-auto">
+
+            {/* End-to-end solutions for every stage of your product lifecycle. */}
+
+            WDI delivers tailored AI mobile app-powered admin panels with real-time analytics, role-based access, and seamless integrations for optimized eCommerce control.
+
+          </p>
         </motion.div>
 
         <motion.div
@@ -711,7 +779,7 @@ const AdminServices = () => {
                 key={index}
                 initial={{ opacity: 0, y: 20 }}
                 whileInView={{ opacity: 1, y: 0 }}
-                transition={{ duration: 0.5, delay: index * 0.1 }}
+                transition={{ duration: 0.5, delay: index * 0.01 }}
                 viewport={{ once: true }}
                 whileHover={{ y: -5 }}
                 className="group"
@@ -761,16 +829,19 @@ const AdminTechStack = () => {
       name: "React",
       logo: "https://cdn.jsdelivr.net/gh/devicons/devicon/icons/react/react-original.svg",
       category: "Frontend",
+      color: "blue",
     },
     {
       name: "Angular",
       logo: "https://cdn.jsdelivr.net/gh/devicons/devicon/icons/angularjs/angularjs-original.svg",
       category: "Frontend",
+      color: "red",
     },
     {
       name: "Vue.js",
       logo: "https://cdn.jsdelivr.net/gh/devicons/devicon/icons/vuejs/vuejs-original.svg",
       category: "Frontend",
+      color: "green",
     },
   ];
 
@@ -859,33 +930,46 @@ const AdminTechStack = () => {
             Frontend Technologies
           </h3>
           <div className="grid grid-cols-3 gap-6 max-w-2xl mx-auto">
-            {frontends.map((tech, index) => (
+            {frontends.map((tech, index) => {
+              // const IconComponent = tech.icon;
+              const colorClasses = {
+                blue: "bg-blue-500/20 text-blue-400 border-blue-500/30",
+                orange: "bg-orange-500/20 text-orange-400 border-orange-500/30",
+                green: "bg-green-500/20 text-green-400 border-green-500/30",
+                red: "bg-red-500/20 text-red-400 border-red-500/30",
+              };
+
+              return (
                 <motion.div
                   key={index}
                   initial={{ opacity: 0, y: 20 }}
                   whileInView={{ opacity: 1, y: 0 }}
-                transition={{ duration: 0.5, delay: index * 0.1 }}
+                  transition={{ duration: 0.5, delay: index * 0.01 }}
                   viewport={{ once: true }}
                   whileHover={{ y: -5, scale: 1.05 }}
                   className="group"
                 >
-                <Card className="bg-card/20 backdrop-blur-md border-white/10 hover:border-accent/30 transition-all duration-300 shadow-lg hover:shadow-xl rounded-2xl p-6 text-center">
-                  <div className="w-12 h-12 mx-auto mb-4 flex items-center justify-center">
+                  <Card className="bg-gray-900/50 backdrop-blur-md border-gray-800 hover:border-accent/30 transition-all duration-300 shadow-lg hover:shadow-xl rounded-2xl p-4 text-center">
+                    <div
+                      className={`w-12 h-12 rounded-lg flex items-center justify-center mx-auto mb-3 ${colorClasses[tech.color as keyof typeof colorClasses] ||
+                        "bg-accent/20"
+                        }`}
+                    >
                       <ImageWithFallback
                         src={tech.logo}
                         alt={tech.name}
-                      className="w-10 h-10 object-contain filter brightness-0 invert dark:brightness-100 dark:invert-0 group-hover:brightness-100 group-hover:invert-0 transition-all duration-300"
+                        className="w-8 h-8 object-contain"
                       />
                     </div>
-                  <h4 className="font-semibold text-foreground text-sm mb-1">
+
+                    <h4 className="font-semibold text-white text-sm mb-1">
                       {tech.name}
                     </h4>
-                  <p className="text-xs text-muted-foreground">
-                    {tech.category}
-                  </p>
+                    <p className="text-xs text-gray-400">{tech.category}</p>
                   </Card>
                 </motion.div>
-            ))}
+              );
+            })}
           </div>
         </motion.div>
 
@@ -909,7 +993,7 @@ const AdminTechStack = () => {
                     key={index}
                     initial={{ opacity: 0, y: 20 }}
                     whileInView={{ opacity: 1, y: 0 }}
-                    transition={{ duration: 0.5, delay: index * 0.1 }}
+                    transition={{ duration: 0.5, delay: index * 0.01 }}
                     viewport={{ once: true }}
                     whileHover={{ y: -5, scale: 1.05 }}
                     className="group"
@@ -942,7 +1026,7 @@ const AdminTechStack = () => {
                     key={index}
                     initial={{ opacity: 0, y: 20 }}
                     whileInView={{ opacity: 1, y: 0 }}
-                    transition={{ duration: 0.5, delay: index * 0.1 }}
+                    transition={{ duration: 0.5, delay: index * 0.01 }}
                     viewport={{ once: true }}
                     whileHover={{ y: -5, scale: 1.05 }}
                     className="group"
@@ -984,7 +1068,7 @@ const AdminTechStack = () => {
                   key={index}
                   initial={{ opacity: 0, y: 20 }}
                   whileInView={{ opacity: 1, y: 0 }}
-                  transition={{ duration: 0.5, delay: index * 0.1 }}
+                  transition={{ duration: 0.5, delay: index * 0.01 }}
                   viewport={{ once: true }}
                   whileHover={{ y: -5 }}
                   className="group"
@@ -1062,6 +1146,13 @@ const AdminCaseStudies = () => {
           <h2 className="text-4xl lg:text-5xl font-semibold text-white mb-8">
             Streamlined Operations with WDI-Built Admin Panels
           </h2>
+          <p className="mt-4 text-gray-400 max-w-2xl mx-auto">
+
+            {/* End-to-end solutions for every stage of your product lifecycle. */}
+
+            WDI's custom admin panels with AI mobile app integration deliver real-time insights, automated workflows, and intuitive controls for peak eCommerce efficiency.
+
+          </p>
         </motion.div>
 
         <motion.div
@@ -1076,7 +1167,7 @@ const AdminCaseStudies = () => {
               key={index}
               initial={{ opacity: 0, y: 20 }}
               whileInView={{ opacity: 1, y: 0 }}
-              transition={{ duration: 0.5, delay: index * 0.1 }}
+              transition={{ duration: 0.5, delay: index * 0.01 }}
               viewport={{ once: true }}
               whileHover={{ y: -8, scale: 1.02 }}
               className="group cursor-pointer"
@@ -1154,6 +1245,7 @@ const AdminCaseStudies = () => {
 
 // Mid-Page CTA
 const AdminInlineCTA = () => {
+  const navigate = useNavigate();
   return (
     <section className="py-20">
       <div className="container mx-auto px-6 lg:px-8">
@@ -1192,7 +1284,7 @@ const AdminInlineCTA = () => {
 
             <ShimmerButton
               className="text-xl px-10 py-5 rounded-2xl shadow-lg hover:shadow-xl"
-              onClick={() => navigateTo("/start-a-project")}
+              onClick={() => navigate("/start-a-project")}
             >
               <div className="inline-flex items-center gap-3">
                 <MessageSquare className="w-6 h-6 flex-shrink-0" />
@@ -1207,56 +1299,36 @@ const AdminInlineCTA = () => {
 };
 
 // Hire UI/UX Designers
-const HireDesigners = () => {
-  const designerTypes = [
+const HireDevelopers = () => {
+  const navigate = useNavigate();
+  const developerTypes = [
     {
-      title: "UI/UX Designers",
-      description: "Specialists in intuitive admin interface design",
-      icon: Palette,
-      skills: [
-        "User Experience Design",
-        "Interface Design",
-        "Wireframing",
-        "Prototyping",
-      ],
+      title: "Frontend Developers (React, Angular, Vue)",
+      description: "Specialized in building responsive, interactive admin interfaces with modern frameworks and seamless user experiences.",
+      icon: Code,
+      skills: ["React", "Angular", "Vue.js", "TypeScript", "Tailwind CSS", "Component Libraries", "State Management", "Responsive Design"]
     },
     {
-      title: "Dashboard Designers",
-      description: "Experts in data visualization and dashboard layouts",
-      icon: BarChart,
-      skills: [
-        "Data Visualization",
-        "Dashboard Design",
-        "Information Architecture",
-        "User Research",
-      ],
+      title: "Backend Developers (Node.js, Python, Databases)",
+      description: "Expert in creating robust server-side architecture, APIs, and database design for scalable admin panel systems.",
+      icon: Server,
+      skills: ["Node.js", "Python", "Express.js", "RESTful APIs", "PostgreSQL", "MongoDB", "Redis", "Authentication"]
     },
     {
-      title: "Interaction Designers",
-      description: "Focused on user interactions and workflow optimization",
-      icon: MousePointer,
-      skills: [
-        "Interaction Design",
-        "User Flow Design",
-        "Usability Testing",
-        "Accessibility Design",
-      ],
+      title: "API & Integration Developers",
+      description: "Focused on seamless third-party integrations, microservices architecture, and efficient data synchronization.",
+      icon: Link,
+      skills: ["REST APIs", "GraphQL", "Microservices", "Webhook Integration", "OAuth", "JWT", "API Security", "Data Migration"]
     },
     {
-      title: "Product Designers",
-      description: "End-to-end design for complex admin systems",
-      icon: Briefcase,
-      skills: [
-        "Product Strategy",
-        "Design Systems",
-        "User Testing",
-        "Cross-platform Design",
-      ],
-    },
+      title: "Full-Stack Developers",
+      description: "End-to-end development expertise covering both frontend interfaces and backend systems for complete admin solutions.",
+      icon: Layers,
+      skills: ["Full-Stack Development", "System Architecture", "DevOps", "Testing", "Performance Optimization", "Security", "Documentation", "Deployment"]
+    }
   ];
-
   return (
-    <section className="py-32 bg-black">
+    <section className="py-20 bg-black">
       <div className="container mx-auto px-6 lg:px-8">
         <motion.div
           initial={{ opacity: 0, y: 30 }}
@@ -1266,11 +1338,10 @@ const HireDesigners = () => {
           className="text-center mb-20"
         >
           <h2 className="text-4xl lg:text-5xl font-semibold text-white mb-6">
-            Need UI/UX Expertise for Your Admin Panel?
+            Need Expert Developers for Your Admin Panel?
           </h2>
           <p className="text-xl text-gray-300 max-w-3xl mx-auto leading-relaxed">
-            Our designers specialize in creating intuitive and functional
-            interfaces for complex dashboards and internal tools.
+            Our AI mobile app developers specialize in creating powerful, scalable admin interfaces with robust backend systems and seamless integrations.
           </p>
         </motion.div>
 
@@ -1281,7 +1352,7 @@ const HireDesigners = () => {
           viewport={{ once: true }}
           className="grid md:grid-cols-2 lg:grid-cols-2 gap-8 mb-12"
         >
-          {designerTypes.map((type, index) => {
+          {developerTypes.map((type, index) => {
             const IconComponent = type.icon;
             return (
               <motion.div
@@ -1305,16 +1376,10 @@ const HireDesigners = () => {
                       {type.description}
                     </p>
                     <div className="space-y-2">
-                      <h4 className="text-sm font-medium text-white">
-                        Core Skills:
-                      </h4>
+                      <h4 className="text-sm font-medium text-white">Core Skills:</h4>
                       <div className="flex flex-wrap gap-2">
                         {type.skills.map((skill) => (
-                          <Badge
-                            key={skill}
-                            variant="secondary"
-                            className="text-xs bg-gray-800/50 text-gray-300 border-gray-700"
-                          >
+                          <Badge key={skill} variant="secondary" className="text-xs bg-gray-800/50 text-gray-300 border-gray-700">
                             {skill}
                           </Badge>
                         ))}
@@ -1335,20 +1400,22 @@ const HireDesigners = () => {
           className="text-center space-y-6"
         >
           <div className="flex flex-col sm:flex-row gap-4 justify-center">
-            <ShimmerButton className="text-lg px-8 py-4">
+            <ShimmerButton className="text-lg px-8 py-4"
+              onClick={() => navigate("/hire-talent/admin-panel-developers")}
+            >
               <div className="inline-flex items-center gap-2">
-                <Palette className="w-5 h-5 flex-shrink-0" />
-                <span>Hire UI/UX Designers</span>
+                <Code className="w-5 h-5 flex-shrink-0" />
+                <span>Hire Admin Panel Dashboard Developers</span>
               </div>
             </ShimmerButton>
             <Button
               variant="outline"
               size="lg"
-              className="text-lg px-8 py-4 border-gray-600 text-gray-300 hover:bg-gray-800 hover:text-white"
+              className="text-lg px-8 py-4 h-auto border-gray-600 text-gray-300 hover:bg-gray-800 hover:text-white"
             >
               <div className="inline-flex items-center gap-2">
                 <FileText className="w-5 h-5 flex-shrink-0" />
-                <span>View Profiles</span>
+                <span>Request a Custom Dashboard Development Consultation</span>
               </div>
             </Button>
           </div>
@@ -1432,6 +1499,7 @@ const AdminFAQs = () => {
 
 // Final CTA Section
 const AdminFinalCTA = () => {
+  const navigate = useNavigate();
   return (
     <section className="py-20 relative overflow-hidden">
       <div className="container mx-auto px-6 lg:px-8 relative z-10">
@@ -1471,8 +1539,7 @@ const AdminFinalCTA = () => {
             viewport={{ once: true }}
             className="text-xl text-muted-foreground mb-12 max-w-2xl mx-auto leading-relaxed"
           >
-            Transform your internal operations with efficient, data-driven
-            dashboards and management systems.
+            Transform your internal operations with efficient, data-driven dashboards enhanced by AI mobile app technology and advanced management systems.
           </motion.p>
 
           <motion.div
@@ -1484,7 +1551,7 @@ const AdminFinalCTA = () => {
           >
             <ShimmerButton
               className="px-12 py-6 text-xl rounded-2xl shadow-2xl hover:shadow-accent/25"
-              onClick={() => navigateTo("/start-a-project")}
+              onClick={() => navigate("/start-a-project")}
             >
               <div className="inline-flex items-center gap-3">
                 <TrendingUp className="w-6 h-6 flex-shrink-0" />
@@ -1513,7 +1580,7 @@ const AdminFinalCTA = () => {
 export const AdminPanelsDashboards = () => {
   return (
     <div className="dark min-h-screen">
-      <Navigation />
+      {/* <Navigation /> */}
 
       {/* Hero Section */}
       <section className="bg-black">
@@ -1525,6 +1592,11 @@ export const AdminPanelsDashboards = () => {
         <AdminBenefits />
       </section>
 
+      {/* Case Studies */}
+      <section className="bg-background">
+        <AdminCaseStudies />
+      </section>
+
       {/* Development Process */}
       <section className="bg-card">
         <AdminProcess />
@@ -1540,25 +1612,20 @@ export const AdminPanelsDashboards = () => {
         <AdminTechStack />
       </section>
 
-      {/* Case Studies */}
-      <section className="bg-background">
-        <AdminCaseStudies />
-      </section>
-
       {/* Mid-Page CTA */}
-      <section className="bg-card">
+      {/* <section className="bg-card">
         <AdminInlineCTA />
-      </section>
+      </section> */}
 
       {/* Hire Designers */}
       <section className="bg-background">
-        <HireDesigners />
+        <HireDevelopers />
       </section>
 
       {/* FAQs */}
-      <section className="bg-card">
+      {/* <section className="bg-card">
         <AdminFAQs />
-      </section>
+      </section> */}
 
       {/* Final CTA */}
       <section className="bg-background">
@@ -1566,8 +1633,8 @@ export const AdminPanelsDashboards = () => {
       </section>
 
       {/* Footer */}
-      <section className="bg-card">
-        <Footer />
+      <section className="bg-background">
+        {/* <Footer /> */}
       </section>
     </div>
   );

pages/AgriTechPlatforms.tsx

@@ -15,11 +15,59 @@ import {
   Database, Bot, Target, CheckCircle, Star,
   Zap, Shield, Globe, Award, Satellite
 } from "lucide-react";
+import { Helmet } from "react-helmet-async";
 
 // Problem Solution Block Component
 const ProblemSolutionBlock = () => {
   return (
     <section className="py-20 bg-[#0E0E0E]">
+      <Helmet>
+        {/* Page Title and Meta Description */}
+        <title>AgriTech Platform Development Services | WDI</title>
+        <meta
+          name="description"
+          content="WDI builds custom AgriTech Platforms that empower farmers and agribusinesses with smart, data-driven tools to enhance productivity, sustainability, and growth."
+        />
+
+        {/* Canonical Link */}
+        <link rel="canonical" href="https://www.wdipl.com/industries/industrial/agritech-platforms" />
+
+        {/* Open Graph Tags (for Facebook, LinkedIn) */}
+        <meta property="og:title" content="AgriTech Platform Development Services | WDI" />
+        <meta
+          property="og:description"
+          content="WDI builds custom AgriTech Platforms that empower farmers and agribusinesses with smart, data-driven tools to enhance productivity, sustainability, and growth."
+        />
+        <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="AgriTech Platform Development Services | WDI" />
+        <meta
+          name="twitter:description"
+          content="WDI builds custom AgriTech Platforms that empower farmers and agribusinesses with smart, data-driven tools to enhance productivity, sustainability, and growth."
+        />
+        <meta name="twitter:image" content="https://www.wdipl.com/your-preview-image.jpg" />
+
+        {/* Social Profiles (using JSON-LD Schema) */}
+        <script type="application/ld+json">
+          {`
+                              {
+                                "@context": "https://schema.org",
+                                "@type": "Organization",
+                                "name": "WDI",
+                                "url": "https://www.wdipl.com",
+                                "sameAs": [
+                                  "https://www.facebook.com/wdideas",
+                                  "https://www.linkedin.com/in/website-developers-india/",
+                                  "https://www.instagram.com/wdipl/"
+                                ]
+                              }
+                            `}
+        </script>
+      </Helmet>
       <div className="container mx-auto px-6 lg:px-8">
         <motion.div
           initial={{ opacity: 0, y: 30 }}
@@ -146,7 +194,7 @@ const IconWithDescriptionGrid = () => {
                 key={index}
                 initial={{ opacity: 0, y: 20 }}
                 whileInView={{ opacity: 1, y: 0 }}
-                transition={{ duration: 0.5, delay: index * 0.1 }}
+                transition={{ duration: 0.5, delay: index * 0.01 }}
                 viewport={{ once: true }}
                 className="group"
               >
@@ -223,7 +271,7 @@ const ThreeColumnFeatureBlock = () => {
                 key={index}
                 initial={{ opacity: 0, y: 20 }}
                 whileInView={{ opacity: 1, y: 0 }}
-                transition={{ duration: 0.5, delay: index * 0.1 }}
+                transition={{ duration: 0.5, delay: index * 0.01 }}
                 viewport={{ once: true }}
                 className="text-center"
               >
@@ -354,7 +402,7 @@ const agriTechFAQs = [
 export const AgriTechPlatforms = () => {
   return (
     <div className="min-h-screen bg-[#0E0E0E]">
-      <Navigation />
+      {/* <Navigation /> */}
 
       <HeroBanner
         category="Industrial & Emerging Tech"
@@ -362,7 +410,8 @@ export const AgriTechPlatforms = () => {
         description="Empower farmers with data-driven insights and smart agriculture solutions that maximize yields, optimize resources, and promote sustainable farming practices."
         primaryCTA={{
           text: "Get a Free Consultation",
-          href: "/contact/schedule-a-discovery-call"
+          // href: "/contact/schedule-a-discovery-call"
+          href: "/start-a-project"
         }}
         secondaryCTA={{
           text: "View AgriTech Case Studies",
@@ -394,7 +443,7 @@ export const AgriTechPlatforms = () => {
         <SplitCallToAction />
       </div>
 
-      <Footer />
+      {/* <Footer /> */}
     </div>
   );
 };

pages/AmbleProject.tsx

@@ -0,0 +1,630 @@
+import React from "react";
+import { Navigation } from "../components/Navigation";
+import { Footer } from "../components/Footer";
+import { Button } from "../components/ui/button";
+import { Badge } from "../components/ui/badge";
+import { Card, CardContent } from "../components/ui/card";
+import ambleImg from "../assets/amble.png"
+import { ArrowRight, Calendar, Users, Smartphone, Globe, Check, Star, TrendingUp, MapPin, Shield, Navigation as NavigationIcon, Zap, Heart, Target, AlertCircle, Clock, UserCheck } from "lucide-react";
+import { ImageWithFallback } from "../components/figma/ImageWithFallback";
+import { useNavigate } from "react-router-dom";
+
+export const AmbleProject = () => {
+  const navigate = useNavigate();
+  return (
+    <div className="dark min-h-screen bg-background">
+      {/* <Navigation /> */}
+
+      {/* Hero Section */}
+      <section className="pt-24 pb-16 bg-background relative overflow-hidden">
+        <div className="absolute inset-0 bg-gradient-to-br from-[#E5195E]/5 via-transparent to-transparent" />
+        <div className="container mx-auto px-6 lg:px-8 relative">
+          <div className="grid lg:grid-cols-2 gap-12 items-center">
+            <div>
+              <div className="flex items-center gap-2 mb-6">
+                <Badge className="bg-[#E5195E]/10 text-[#E5195E] border border-[#E5195E]/20 font-manrope">
+                  <MapPin className="w-4 h-4 mr-2" />
+                  Navigation App Case Study
+                </Badge>
+              </div>
+
+              <h1 className="text-4xl md:text-5xl lg:text-6xl font-bold mb-6 text-white font-manrope">
+                Amble App
+              </h1>
+
+              <p className="text-xl text-muted-foreground mb-8 font-manrope">
+                Accessible Navigation & Community Engagement App - Making urban exploration easier and more inclusive for everyone
+              </p>
+
+              {/* Tech Stack */}
+              <div className="flex flex-wrap gap-2 mb-8">
+                {["React Native", "Node.js", "MongoDB", "Google Maps API", "Firebase Auth"].map((tech) => (
+                  <Badge key={tech} variant="outline" className="border-white/20 text-white font-manrope">
+                    {tech}
+                  </Badge>
+                ))}
+              </div>
+
+              {/* Key Metrics */}
+              <div className="grid grid-cols-2 md:grid-cols-4 gap-4 mb-8">
+                <div className="text-center p-3 bg-card/30 rounded-lg border border-white/10">
+                  <Calendar className="w-5 h-5 text-[#E5195E] mx-auto mb-2" />
+                  <div className="text-lg font-bold text-white font-manrope">4 months</div>
+                  <div className="text-xs text-muted-foreground font-manrope">Duration</div>
+                </div>
+                <div className="text-center p-3 bg-card/30 rounded-lg border border-white/10">
+                  <Users className="w-5 h-5 text-[#E5195E] mx-auto mb-2" />
+                  <div className="text-lg font-bold text-white font-manrope">6 experts</div>
+                  <div className="text-xs text-muted-foreground font-manrope">Team Size</div>
+                </div>
+                <div className="text-center p-3 bg-card/30 rounded-lg border border-white/10">
+                  <Smartphone className="w-5 h-5 text-[#E5195E] mx-auto mb-2" />
+                  <div className="text-lg font-bold text-white font-manrope">iOS/Android</div>
+                  <div className="text-xs text-muted-foreground font-manrope">Platforms</div>
+                </div>
+                <div className="text-center p-3 bg-card/30 rounded-lg border border-white/10">
+                  <Star className="w-5 h-5 text-[#E5195E] mx-auto mb-2" />
+                  <div className="text-lg font-bold text-white font-manrope">4.6★</div>
+                  <div className="text-xs text-muted-foreground font-manrope">App Rating</div>
+                </div>
+              </div>
+
+              {/* Key Achievements */}
+              <div className="space-y-3 mb-8">
+                <h3 className="text-lg font-semibold text-white mb-4 font-manrope">Key Achievements:</h3>
+                {[
+                  "Successfully launched the MVP on both iOS & Android within planned timeline",
+                  "Integrated location-based recommendations and event listings",
+                  "Achieved 4.6★ rating on initial release in app stores",
+                  "Built comprehensive accessibility features for inclusive navigation"
+                ].map((achievement, index) => (
+                  <div key={index} className="flex items-center gap-3">
+                    <Check className="w-5 h-5 text-[#E5195E] flex-shrink-0" />
+                    <span className="text-muted-foreground font-manrope">{achievement}</span>
+                  </div>
+                ))}
+              </div>
+
+              {/* CTA Buttons */}
+              <div className="flex flex-col sm:flex-row gap-4">
+                <Button
+                  size="lg"
+                  className="bg-[#E5195E] hover:bg-[#E5195E]/90 text-white font-manrope"
+                  onClick={() => navigate('/start-a-project')}
+                >
+                  Build Your Navigation App
+                  <ArrowRight className="w-5 h-5 ml-2" />
+                </Button>
+                <Button
+                  size="lg"
+                  variant="outline"
+                  className="border-white/20 text-white hover:bg-white/10 font-manrope"
+                  onClick={() => navigate('/case-studies')}
+                >
+                  View More Cases
+                </Button>
+              </div>
+            </div>
+
+            <div className="relative">
+              <div className="aspect-square bg-gradient-to-br from-[#E5195E]/20 to-transparent rounded-2xl p-8 border border-white/10">
+                <ImageWithFallback
+                  src={ambleImg}
+                  alt="Amble Navigation App"
+                  className="w-full h-full object-cover rounded-lg"
+                />
+              </div>
+            </div>
+          </div>
+        </div>
+      </section>
+
+      {/* Executive Summary */}
+      <section className="py-16 bg-card/30">
+        <div className="container mx-auto px-6 lg:px-8">
+          <div className="max-w-4xl mx-auto">
+            <h2 className="text-3xl font-bold text-white mb-6 font-manrope">Executive Summary</h2>
+            <p className="text-lg text-muted-foreground leading-relaxed font-manrope mb-6">
+              Amble is designed to make urban exploration easier and more inclusive. The platform offers curated walking routes, community event listings, and accessibility information for public places, enabling residents and tourists to discover and navigate cities effortlessly.
+            </p>
+            <p className="text-lg text-muted-foreground leading-relaxed font-manrope">
+              The comprehensive mobile application bridges the gap between navigation tools that lack accessibility information and provides a community-driven platform for discovering local experiences within a single, user-friendly interface.
+            </p>
+          </div>
+        </div>
+      </section>
+
+      {/* Project Overview */}
+      <section className="py-16 bg-background">
+        <div className="container mx-auto px-6 lg:px-8">
+          <div className="max-w-6xl mx-auto">
+            <h2 className="text-3xl font-bold text-white mb-12 text-center font-manrope">Project Overview</h2>
+
+            <div className="grid md:grid-cols-3 gap-8">
+              <Card className="bg-card/50 border-white/10">
+                <CardContent className="p-6">
+                  <Target className="w-8 h-8 text-[#E5195E] mb-4" />
+                  <h3 className="text-xl font-semibold text-white mb-3 font-manrope">Background & Context</h3>
+                  <p className="text-muted-foreground font-manrope">
+                    Many city navigation tools lack accessibility information or curated local experiences. Amble fills this gap by offering inclusive route planning, community-driven recommendations, and event discovery features within a single mobile app.
+                  </p>
+                </CardContent>
+              </Card>
+
+              <Card className="bg-card/50 border-white/10">
+                <CardContent className="p-6">
+                  <Users className="w-8 h-8 text-[#E5195E] mb-4" />
+                  <h3 className="text-xl font-semibold text-white mb-3 font-manrope">Target Audience</h3>
+                  <p className="text-muted-foreground font-manrope">
+                    City residents looking for events and walks, tourists exploring new cities, and people with mobility needs requiring accessibility data for inclusive urban navigation and community engagement.
+                  </p>
+                </CardContent>
+              </Card>
+
+              <Card className="bg-card/50 border-white/10">
+                <CardContent className="p-6">
+                  <TrendingUp className="w-8 h-8 text-[#E5195E] mb-4" />
+                  <h3 className="text-xl font-semibold text-white mb-3 font-manrope">Business Objectives</h3>
+                  <p className="text-muted-foreground font-manrope">
+                    Build an MVP with core walking route and event discovery features, include accessibility tags for public places and routes, enable social sharing of routes and events, and launch in select pilot cities with potential for rapid scaling.
+                  </p>
+                </CardContent>
+              </Card>
+            </div>
+          </div>
+        </div>
+      </section>
+
+      {/* Project Scope */}
+      <section className="py-16 bg-card/30">
+        <div className="container mx-auto px-6 lg:px-8">
+          <div className="max-w-6xl mx-auto">
+            <h2 className="text-3xl font-bold text-white mb-12 text-center font-manrope">Project Scope</h2>
+
+            <div className="grid md:grid-cols-2 gap-12">
+              <div>
+                <h3 className="text-xl font-semibold text-white mb-6 font-manrope">Core Features</h3>
+                <div className="space-y-4">
+                  {[
+                    "Curated Walking Routes with distance, duration, and difficulty filters",
+                    "Accessibility Information for public spaces and landmarks",
+                    "Local Event Listings with date, location, and category filters",
+                    "User Profiles for saving favorites and personalizing recommendations",
+                    "Push Notifications for upcoming events or nearby attractions",
+                    "Offline Mode for preloaded routes and maps"
+                  ].map((feature, index) => (
+                    <div key={index} className="flex items-start gap-3 p-3 bg-background/50 rounded-lg border border-white/10">
+                      <Check className="w-5 h-5 text-[#E5195E] flex-shrink-0 mt-0.5" />
+                      <span className="text-muted-foreground font-manrope text-sm">{feature}</span>
+                    </div>
+                  ))}
+                </div>
+              </div>
+
+              <div>
+                <h3 className="text-xl font-semibold text-white mb-6 font-manrope">Technical Requirements</h3>
+                <div className="space-y-4">
+                  {[
+                    "GPS-based real-time location tracking",
+                    "Map rendering using Google Maps API",
+                    "Cross-platform mobile support via React Native",
+                    "Secure user authentication via Firebase",
+                    "Cloud-based database with offline sync capabilities"
+                  ].map((requirement, index) => (
+                    <div key={index} className="flex items-start gap-3 p-3 bg-background/50 rounded-lg border border-white/10">
+                      <Shield className="w-5 h-5 text-[#E5195E] flex-shrink-0 mt-0.5" />
+                      <span className="text-muted-foreground font-manrope text-sm">{requirement}</span>
+                    </div>
+                  ))}
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </section>
+
+      {/* Challenges & Solution Architecture */}
+      <section className="py-16 bg-background">
+        <div className="container mx-auto px-6 lg:px-8">
+          <div className="max-w-6xl mx-auto">
+            <h2 className="text-3xl font-bold text-white mb-12 text-center font-manrope">Challenges & Solution Architecture</h2>
+
+            <div className="grid md:grid-cols-2 gap-12 mb-16">
+              <div>
+                <h3 className="text-xl font-semibold text-white mb-6 font-manrope">Technical Challenges</h3>
+                <div className="space-y-4">
+                  {[
+                    "Ensuring accurate GPS tracking in dense urban areas",
+                    "Managing offline data sync for routes and events",
+                    "Designing for accessibility compliance (WCAG standards)"
+                  ].map((challenge, index) => (
+                    <div key={index} className="flex items-start gap-3">
+                      <AlertCircle className="w-5 h-5 text-[#E5195E] flex-shrink-0 mt-0.5" />
+                      <span className="text-muted-foreground font-manrope">{challenge}</span>
+                    </div>
+                  ))}
+                </div>
+              </div>
+
+              <div>
+                <h3 className="text-xl font-semibold text-white mb-6 font-manrope">Project Management Challenges</h3>
+                <div className="space-y-4">
+                  {[
+                    "Coordinating with local authorities for accessibility data",
+                    "Gathering high-quality route content for launch cities",
+                    "Delivering MVP within 4-month development window"
+                  ].map((challenge, index) => (
+                    <div key={index} className="flex items-start gap-3">
+                      <AlertCircle className="w-5 h-5 text-[#E5195E] flex-shrink-0 mt-0.5" />
+                      <span className="text-muted-foreground font-manrope">{challenge}</span>
+                    </div>
+                  ))}
+                </div>
+              </div>
+            </div>
+
+            <div className="bg-card/50 p-8 rounded-xl border border-white/10">
+              <h3 className="text-xl font-semibold text-white mb-6 font-manrope">Technical Architecture</h3>
+              <div className="grid md:grid-cols-2 gap-8">
+                <div>
+                  <h4 className="text-lg font-semibold text-white mb-4 font-manrope">Technology Stack</h4>
+                  <div className="space-y-3">
+                    {[
+                      { label: "Frontend", value: "React Native" },
+                      { label: "Backend", value: "Node.js, Express.js" },
+                      { label: "Database", value: "MongoDB" },
+                      { label: "Maps & Location", value: "Google Maps API" },
+                      { label: "Authentication", value: "Firebase Authentication" },
+                      { label: "Notifications", value: "Push Notifications" }
+                    ].map((item, index) => (
+                      <div key={index} className="flex justify-between items-center p-3 bg-background/50 rounded-lg border border-white/10">
+                        <span className="text-muted-foreground font-manrope">{item.label}:</span>
+                        <span className="text-white font-medium font-manrope text-sm">{item.value}</span>
+                      </div>
+                    ))}
+                  </div>
+                </div>
+
+                <div>
+                  <h4 className="text-lg font-semibold text-white mb-4 font-manrope">Architecture Highlights</h4>
+                  <div className="space-y-3">
+                    {[
+                      "React Native mobile app with modular feature components",
+                      "Node.js backend with REST API for events, routes, and accessibility data",
+                      "MongoDB database with geospatial indexing for location queries",
+                      "Firebase Auth for secure, scalable authentication",
+                      "Push notification service for engagement campaigns"
+                    ].map((highlight, index) => (
+                      <div key={index} className="flex items-center gap-3">
+                        <Check className="w-5 h-5 text-[#E5195E] flex-shrink-0" />
+                        <span className="text-muted-foreground text-sm font-manrope">{highlight}</span>
+                      </div>
+                    ))}
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </section>
+
+      {/* Development Process */}
+      <section className="py-16 bg-card/30">
+        <div className="container mx-auto px-6 lg:px-8">
+          <div className="max-w-6xl mx-auto">
+            <h2 className="text-3xl font-bold text-white mb-12 text-center font-manrope">Development Process & Methodology</h2>
+
+            <div className="mb-12">
+              <div className="text-center mb-8">
+                <p className="text-lg text-muted-foreground font-manrope">
+                  <strong>Agile</strong> (weekly sprints) with weekly sprint planning, mid-sprint QA cycles for early bug detection, and client demos at the end of each sprint
+                </p>
+              </div>
+
+              <div className="grid md:grid-cols-2 lg:grid-cols-3 gap-6">
+                {[
+                  {
+                    phase: "Discovery & Planning",
+                    duration: "2 weeks",
+                    description: "Feature prioritization, UI/UX wireframing, technical feasibility review"
+                  },
+                  {
+                    phase: "Design & Prototyping",
+                    duration: "3 weeks",
+                    description: "Mobile UI design for both platforms, map interface prototypes"
+                  },
+                  {
+                    phase: "Core Development",
+                    duration: "6 weeks",
+                    description: "Walking route module, event listing module, user authentication and profiles"
+                  },
+                  {
+                    phase: "Integration & Testing",
+                    duration: "4 weeks",
+                    description: "Google Maps API integration, push notifications setup, offline mode implementation"
+                  },
+                  {
+                    phase: "Launch & Handover",
+                    duration: "1 week",
+                    description: "App store submission, documentation and client training"
+                  }
+                ].map((item, index) => (
+                  <Card key={index} className="bg-background/50 border-white/10">
+                    <CardContent className="p-6">
+                      <div className="flex items-center justify-between mb-3">
+                        <div className="w-8 h-8 bg-[#E5195E] rounded-full flex items-center justify-center text-white font-bold text-sm font-manrope">
+                          {index + 1}
+                        </div>
+                        <Badge variant="outline" className="border-[#E5195E]/30 text-[#E5195E] font-manrope">
+                          {item.duration}
+                        </Badge>
+                      </div>
+                      <h3 className="text-lg font-semibold text-white mb-2 font-manrope">{item.phase}</h3>
+                      <p className="text-sm text-muted-foreground font-manrope">{item.description}</p>
+                    </CardContent>
+                  </Card>
+                ))}
+              </div>
+            </div>
+          </div>
+        </div>
+      </section>
+
+      {/* Key Features */}
+      <section className="py-16 bg-background">
+        <div className="container mx-auto px-6 lg:px-8">
+          <div className="max-w-6xl mx-auto">
+            <h2 className="text-3xl font-bold text-white mb-12 text-center font-manrope">Key Features & Functionality</h2>
+
+            <div className="grid md:grid-cols-2 lg:grid-cols-3 gap-6 mb-12">
+              {[
+                {
+                  icon: NavigationIcon,
+                  title: "Curated Routes",
+                  description: "Localized walking routes with difficulty levels"
+                },
+                {
+                  icon: Calendar,
+                  title: "Events Module",
+                  description: "Browse, filter, and save local events"
+                },
+                {
+                  icon: Heart,
+                  title: "Accessibility Data",
+                  description: "Information on ramps, elevators, and accessible restrooms"
+                },
+                {
+                  icon: Globe,
+                  title: "Offline Maps",
+                  description: "Preload maps and routes for low-connectivity situations"
+                },
+                {
+                  icon: UserCheck,
+                  title: "Personalization",
+                  description: "Save favorites and receive tailored recommendations"
+                },
+                {
+                  icon: Zap,
+                  title: "Push Notifications",
+                  description: "Stay updated on nearby events and attractions"
+                }
+              ].map((feature, index) => (
+                <Card key={index} className="bg-card/50 border-white/10 hover:border-[#E5195E]/30 transition-all duration-300">
+                  <CardContent className="p-6 text-center">
+                    <feature.icon className="w-8 h-8 text-[#E5195E] mx-auto mb-4" />
+                    <h3 className="text-lg font-semibold text-white mb-3 font-manrope">{feature.title}</h3>
+                    <p className="text-muted-foreground text-sm font-manrope">{feature.description}</p>
+                  </CardContent>
+                </Card>
+              ))}
+            </div>
+          </div>
+        </div>
+      </section>
+
+      {/* Results & Impact */}
+      <section className="py-16 bg-card/30">
+        <div className="container mx-auto px-6 lg:px-8">
+          <div className="max-w-6xl mx-auto">
+            <h2 className="text-3xl font-bold text-white mb-12 text-center font-manrope">Results & Impact</h2>
+
+            <div className="grid md:grid-cols-2 lg:grid-cols-3 gap-6 mb-12">
+              {[
+                { label: "GPS Accuracy", value: "±6m", icon: MapPin, desc: "average accuracy" },
+                { label: "API Response", value: "150ms", icon: Zap, desc: "average response time" },
+                { label: "Platform Uptime", value: "99.9%", icon: Shield, desc: "first 3 months" }
+              ].map((metric, index) => (
+                <Card key={index} className="bg-background/50 border-white/10 text-center">
+                  <CardContent className="p-6">
+                    <metric.icon className="w-8 h-8 text-[#E5195E] mx-auto mb-3" />
+                    <div className="text-2xl font-bold text-white mb-1 font-manrope">{metric.value}</div>
+                    <div className="text-muted-foreground text-sm font-manrope">{metric.label}</div>
+                    <div className="text-xs text-muted-foreground font-manrope">{metric.desc}</div>
+                  </CardContent>
+                </Card>
+              ))}
+            </div>
+
+            <div className="grid md:grid-cols-2 gap-8">
+              <div>
+                <h3 className="text-xl font-semibold text-white mb-4 font-manrope">Business Impact</h3>
+                <ul className="space-y-3">
+                  {[
+                    "Positive reception in pilot cities",
+                    "Enhanced visibility for local events and businesses",
+                    "Increased engagement via push notifications"
+                  ].map((impact, index) => (
+                    <li key={index} className="flex items-center gap-3">
+                      <Check className="w-5 h-5 text-[#E5195E] flex-shrink-0" />
+                      <span className="text-muted-foreground font-manrope">{impact}</span>
+                    </li>
+                  ))}
+                </ul>
+              </div>
+
+              <div>
+                <h3 className="text-xl font-semibold text-white mb-4 font-manrope">Technical Performance</h3>
+                <ul className="space-y-3">
+                  {[
+                    "Average GPS accuracy: ±6 meters",
+                    "API response time: 150ms average",
+                    "99.9% uptime in first 3 months post-launch"
+                  ].map((performance, index) => (
+                    <li key={index} className="flex items-center gap-3">
+                      <Check className="w-5 h-5 text-[#E5195E] flex-shrink-0" />
+                      <span className="text-muted-foreground font-manrope">{performance}</span>
+                    </li>
+                  ))}
+                </ul>
+              </div>
+            </div>
+          </div>
+        </div>
+      </section>
+
+      {/* Lessons Learned */}
+      <section className="py-16 bg-background">
+        <div className="container mx-auto px-6 lg:px-8">
+          <div className="max-w-4xl mx-auto">
+            <h2 className="text-3xl font-bold text-white mb-12 text-center font-manrope">Lessons Learned & Best Practices</h2>
+
+            <div className="grid md:grid-cols-2 gap-8">
+              <Card className="bg-card/50 border-white/10">
+                <CardContent className="p-6">
+                  <h3 className="text-lg font-semibold text-white mb-4 font-manrope">What Worked Well</h3>
+                  <ul className="space-y-2">
+                    {[
+                      "Early UI/UX prototyping improved development speed",
+                      "Using Firebase for authentication reduced backend complexity"
+                    ].map((item, index) => (
+                      <li key={index} className="flex items-center gap-3">
+                        <Check className="w-4 h-4 text-[#E5195E] flex-shrink-0" />
+                        <span className="text-muted-foreground font-manrope">{item}</span>
+                      </li>
+                    ))}
+                  </ul>
+                </CardContent>
+              </Card>
+
+              <Card className="bg-card/50 border-white/10">
+                <CardContent className="p-6">
+                  <h3 className="text-lg font-semibold text-white mb-4 font-manrope">Key Learnings</h3>
+                  <ul className="space-y-2">
+                    {[
+                      "Offline mode was more critical for adoption than anticipated",
+                      "Partnering with local organizations improved accessibility data accuracy"
+                    ].map((item, index) => (
+                      <li key={index} className="flex items-center gap-3">
+                        <TrendingUp className="w-4 h-4 text-[#E5195E] flex-shrink-0" />
+                        <span className="text-muted-foreground font-manrope">{item}</span>
+                      </li>
+                    ))}
+                  </ul>
+                </CardContent>
+              </Card>
+            </div>
+          </div>
+        </div>
+      </section>
+
+      {/* Client Testimonial */}
+      <section className="py-16 bg-card/30">
+        <div className="container mx-auto px-6 lg:px-8">
+          <div className="max-w-4xl mx-auto text-center">
+            <div className="flex justify-center mb-6">
+              {[...Array(5)].map((_, i) => (
+                <Star key={i} className="w-6 h-6 text-[#E5195E] fill-current" />
+              ))}
+            </div>
+            <blockquote className="text-xl md:text-2xl text-white mb-6 font-manrope italic">
+              "WDI delivered exactly what we envisioned for Amble — an intuitive, inclusive navigation app. Their team understood our mission and translated it into a smooth, polished product that our users love."
+            </blockquote>
+            <div className="text-muted-foreground font-manrope">
+              <div className="font-semibold text-white">Founder, Amble</div>
+              <div>Navigation App Client</div>
+            </div>
+          </div>
+        </div>
+      </section>
+
+      {/* Future Roadmap */}
+      <section className="py-16 bg-background">
+        <div className="container mx-auto px-6 lg:px-8">
+          <div className="max-w-4xl mx-auto">
+            <h2 className="text-3xl font-bold text-white mb-8 text-center font-manrope">Future Roadmap</h2>
+
+            <div className="grid md:grid-cols-2 gap-8">
+              <Card className="bg-card/50 border-white/10">
+                <CardContent className="p-6">
+                  <h3 className="text-lg font-semibold text-white mb-4 font-manrope">Next 6 Months</h3>
+                  <ul className="space-y-2">
+                    {[
+                      "Expand to 10 more cities",
+                      "Add voice navigation for visually impaired users"
+                    ].map((feature, index) => (
+                      <li key={index} className="flex items-center gap-3">
+                        <Clock className="w-4 h-4 text-[#E5195E] flex-shrink-0" />
+                        <span className="text-muted-foreground font-manrope">{feature}</span>
+                      </li>
+                    ))}
+                  </ul>
+                </CardContent>
+              </Card>
+
+              <Card className="bg-card/50 border-white/10">
+                <CardContent className="p-6">
+                  <h3 className="text-lg font-semibold text-white mb-4 font-manrope">Next 12 Months</h3>
+                  <ul className="space-y-2">
+                    {[
+                      "Gamification features for walking challenges",
+                      "Integration with public transit APIs"
+                    ].map((vision, index) => (
+                      <li key={index} className="flex items-center gap-3">
+                        <Target className="w-4 h-4 text-[#E5195E] flex-shrink-0" />
+                        <span className="text-muted-foreground font-manrope">{vision}</span>
+                      </li>
+                    ))}
+                  </ul>
+                </CardContent>
+              </Card>
+            </div>
+          </div>
+        </div>
+      </section>
+
+      {/* CTA Section */}
+      <section className="py-16 bg-gradient-to-r from-[#E5195E]/10 via-background to-[#E5195E]/10">
+        <div className="container mx-auto px-6 lg:px-8">
+          <div className="max-w-4xl mx-auto text-center">
+            <h2 className="text-3xl md:text-4xl font-bold text-white mb-6 font-manrope">
+              Ready to Build Your Navigation App?
+            </h2>
+            <p className="text-lg text-muted-foreground mb-8 font-manrope">
+              Create accessible, inclusive mobile applications that empower users to explore and navigate their world with confidence.
+            </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 px-8 py-3 font-manrope"
+                onClick={() => navigate('/start-a-project')}
+              >
+                Start Your Project
+                <ArrowRight className="w-5 h-5 ml-2" />
+              </Button>
+              <Button
+                size="lg"
+                variant="outline"
+                className="border-white/20 text-white hover:bg-white/10 px-8 py-3 font-manrope"
+                onClick={() => navigate('/case-studies')}
+              >
+                View More Cases
+              </Button>
+            </div>
+          </div>
+        </div>
+      </section>
+
+      {/* <Footer /> */}
+    </div>
+  );
+};

pages/AmozProject.tsx

@@ -0,0 +1,647 @@
+import React from "react";
+import { Navigation } from "../components/Navigation";
+import { Footer } from "../components/Footer";
+import { Button } from "../components/ui/button";
+import { Badge } from "../components/ui/badge";
+import amozImg from "../assets/amoz.jpg"
+import { Card, CardContent } from "../components/ui/card";
+import { ArrowRight, Calendar, Users, Smartphone, Globe, Check, Star, TrendingUp, ShoppingBag, Brain, Zap, MessageCircle, Target, AlertCircle, Clock, DollarSign, Play, Shield, CreditCard } from "lucide-react";
+import { ImageWithFallback } from "../components/figma/ImageWithFallback";
+import { useNavigate } from "react-router-dom";
+
+export const AmozProject = () => {
+  const navigate = useNavigate();
+  return (
+    <div className="dark min-h-screen bg-background">
+      {/* <Navigation /> */}
+
+      {/* Hero Section */}
+      <section className="pt-24 pb-16 bg-background relative overflow-hidden">
+        <div className="absolute inset-0 bg-gradient-to-br from-[#E5195E]/5 via-transparent to-transparent" />
+        <div className="container mx-auto px-6 lg:px-8 relative">
+          <div className="grid lg:grid-cols-2 gap-12 items-center">
+            <div>
+              <div className="flex items-center gap-2 mb-6">
+                <Badge className="bg-[#E5195E]/10 text-[#E5195E] border border-[#E5195E]/20 font-manrope">
+                  <Brain className="w-4 h-4 mr-2" />
+                  AI Social Commerce Case Study
+                </Badge>
+              </div>
+
+              <h1 className="text-4xl md:text-5xl lg:text-6xl font-bold mb-6 text-white font-manrope">
+                Amoz Platform
+              </h1>
+
+              <p className="text-xl text-muted-foreground mb-8 font-manrope">
+                AI-Powered Social Commerce Platform - Merging social networking and e-commerce with AI-driven recommendations and influencer monetization capabilities
+              </p>
+
+              {/* Tech Stack */}
+              <div className="flex flex-wrap gap-2 mb-8">
+                {["React Native", "Next.js", "Node.js", "PostgreSQL", "TensorFlow", "AWS"].map((tech) => (
+                  <Badge key={tech} variant="outline" className="border-white/20 text-white font-manrope">
+                    {tech}
+                  </Badge>
+                ))}
+              </div>
+
+              {/* Key Metrics */}
+              <div className="grid grid-cols-2 md:grid-cols-4 gap-4 mb-8">
+                <div className="text-center p-3 bg-card/30 rounded-lg border border-white/10">
+                  <Calendar className="w-5 h-5 text-[#E5195E] mx-auto mb-2" />
+                  <div className="text-lg font-bold text-white font-manrope">6 months</div>
+                  <div className="text-xs text-muted-foreground font-manrope">Duration</div>
+                </div>
+                <div className="text-center p-3 bg-card/30 rounded-lg border border-white/10">
+                  <Users className="w-5 h-5 text-[#E5195E] mx-auto mb-2" />
+                  <div className="text-lg font-bold text-white font-manrope">8 experts</div>
+                  <div className="text-xs text-muted-foreground font-manrope">Team Size</div>
+                </div>
+                {/* <div className="text-center p-3 bg-card/30 rounded-lg border border-white/10">
+                  <Globe className="w-5 h-5 text-[#E5195E] mx-auto mb-2" />
+                  <div className="text-lg font-bold text-white font-manrope">iOS/Android/Web</div>
+                  <div className="text-xs text-muted-foreground font-manrope">Platforms</div>
+                </div> */}
+                <div className="text-center p-3 bg-card/30 rounded-lg border border-white/10">
+                  <Globe className="w-5 h-5 text-[#E5195E] mx-auto mb-2" />
+
+                  <div className="text-lg font-bold text-white font-manrope break-words">
+                    iOS/Android/Web
+                  </div>
+
+                  <div className="text-xs text-muted-foreground font-manrope">
+                    Platforms
+                  </div>
+                </div>
+                <div className="text-center p-3 bg-card/30 rounded-lg border border-white/10">
+                  <DollarSign className="w-5 h-5 text-[#E5195E] mx-auto mb-2" />
+                  <div className="text-lg font-bold text-white font-manrope">$1.2M</div>
+                  <div className="text-xs text-muted-foreground font-manrope">Q1 Transactions</div>
+                </div>
+              </div>
+
+              {/* Key Achievements */}
+              <div className="space-y-3 mb-8">
+                <h3 className="text-lg font-semibold text-white mb-4 font-manrope">Key Achievements:</h3>
+                {[
+                  "Onboarded 5,000+ merchants in first 2 months post-launch",
+                  "AI recommendation engine achieved 28% increase in user engagement",
+                  "Processed $1.2M in transactions within first quarter",
+                  "Built unified social + shopping platform with AI-driven personalization"
+                ].map((achievement, index) => (
+                  <div key={index} className="flex items-center gap-3">
+                    <Check className="w-5 h-5 text-[#E5195E] flex-shrink-0" />
+                    <span className="text-muted-foreground font-manrope">{achievement}</span>
+                  </div>
+                ))}
+              </div>
+
+              {/* CTA Buttons */}
+              <div className="flex flex-col sm:flex-row gap-4">
+                <Button
+                  size="lg"
+                  className="bg-[#E5195E] hover:bg-[#E5195E]/90 text-white font-manrope"
+                  onClick={() => navigate('/start-a-project')}
+                >
+                  Build Your AI Commerce Platform
+                  <ArrowRight className="w-5 h-5 ml-2" />
+                </Button>
+                <Button
+                  size="lg"
+                  variant="outline"
+                  className="border-white/20 text-white hover:bg-white/10 font-manrope"
+                  onClick={() => navigate('/case-studies')}
+                >
+                  View More Cases
+                </Button>
+              </div>
+            </div>
+
+            <div className="relative">
+              <div className="aspect-square bg-gradient-to-br from-[#E5195E]/20 to-transparent rounded-2xl p-8 border border-white/10">
+                <ImageWithFallback
+                  src={amozImg}
+                  alt="Amoz AI-Powered Social Commerce Platform"
+                  className="w-full h-full object-cover rounded-lg"
+                />
+              </div>
+            </div>
+          </div>
+        </div>
+      </section>
+
+      {/* Executive Summary */}
+      <section className="py-16 bg-card/30">
+        <div className="container mx-auto px-6 lg:px-8">
+          <div className="max-w-4xl mx-auto">
+            <h2 className="text-3xl font-bold text-white mb-6 font-manrope">Executive Summary</h2>
+            <p className="text-lg text-muted-foreground leading-relaxed font-manrope mb-6">
+              Amoz merges social networking and e-commerce into a single platform, enabling influencers, small businesses, and users to connect, showcase products, and transact seamlessly. AI-driven recommendations enhance product discovery, while built-in messaging and content creation tools drive community engagement.
+            </p>
+            <p className="text-lg text-muted-foreground leading-relaxed font-manrope">
+              The comprehensive platform bridges the gap between content and transactions, integrating influencer marketing, live product showcases, and frictionless purchasing to create the preferred shopping experience for younger demographics seeking social commerce solutions.
+            </p>
+          </div>
+        </div>
+      </section>
+
+      {/* Project Overview */}
+      <section className="py-16 bg-background">
+        <div className="container mx-auto px-6 lg:px-8">
+          <div className="max-w-6xl mx-auto">
+            <h2 className="text-3xl font-bold text-white mb-12 text-center font-manrope">Project Overview</h2>
+
+            <div className="grid md:grid-cols-3 gap-8">
+              <Card className="bg-card/50 border-white/10">
+                <CardContent className="p-6">
+                  <Target className="w-8 h-8 text-[#E5195E] mb-4" />
+                  <h3 className="text-xl font-semibold text-white mb-3 font-manrope">Background & Context</h3>
+                  <p className="text-muted-foreground font-manrope">
+                    Social commerce is rapidly becoming the preferred shopping experience for younger demographics, but existing solutions often split content and transactions across multiple apps. Amoz bridges this gap with a unified social + shopping platform, integrating influencer marketing, live product showcases, and frictionless purchasing.
+                  </p>
+                </CardContent>
+              </Card>
+
+              <Card className="bg-card/50 border-white/10">
+                <CardContent className="p-6">
+                  <Users className="w-8 h-8 text-[#E5195E] mb-4" />
+                  <h3 className="text-xl font-semibold text-white mb-3 font-manrope">Target Audience</h3>
+                  <p className="text-muted-foreground font-manrope">
+                    Influencers & content creators looking to monetize their audience, small-to-medium online merchants seeking social selling platforms, and young consumers seeking social shopping experiences with integrated content discovery and purchasing capabilities.
+                  </p>
+                </CardContent>
+              </Card>
+
+              <Card className="bg-card/50 border-white/10">
+                <CardContent className="p-6">
+                  <TrendingUp className="w-8 h-8 text-[#E5195E] mb-4" />
+                  <h3 className="text-xl font-semibold text-white mb-3 font-manrope">Business Objectives</h3>
+                  <p className="text-muted-foreground font-manrope">
+                    Create a mobile-first platform combining content and commerce, provide AI-driven personalized product recommendations, enable secure, fast, and user-friendly checkout experience, and offer built-in tools for influencers to monetize their audience effectively.
+                  </p>
+                </CardContent>
+              </Card>
+            </div>
+          </div>
+        </div>
+      </section>
+
+      {/* Project Scope */}
+      <section className="py-16 bg-card/30">
+        <div className="container mx-auto px-6 lg:px-8">
+          <div className="max-w-6xl mx-auto">
+            <h2 className="text-3xl font-bold text-white mb-12 text-center font-manrope">Project Scope</h2>
+
+            <div className="grid md:grid-cols-2 gap-12">
+              <div>
+                <h3 className="text-xl font-semibold text-white mb-6 font-manrope">Core Features</h3>
+                <div className="space-y-4">
+                  {[
+                    "AI-Powered Product Recommendations based on browsing, social interactions, and purchase history",
+                    "Influencer Storefronts allowing creators to sell directly via profiles",
+                    "Live Product Showcases with integrated purchase options",
+                    "In-App Messaging for buyer-seller and community engagement",
+                    "Secure Payments with Stripe and multiple local payment gateways",
+                    "Order Tracking with push notifications and delivery updates"
+                  ].map((feature, index) => (
+                    <div key={index} className="flex items-start gap-3 p-3 bg-background/50 rounded-lg border border-white/10">
+                      <Check className="w-5 h-5 text-[#E5195E] flex-shrink-0 mt-0.5" />
+                      <span className="text-muted-foreground font-manrope text-sm">{feature}</span>
+                    </div>
+                  ))}
+                </div>
+              </div>
+
+              <div>
+                <h3 className="text-xl font-semibold text-white mb-6 font-manrope">Technical Requirements</h3>
+                <div className="space-y-4">
+                  {[
+                    "Scalable microservices backend",
+                    "Real-time chat and live streaming capability",
+                    "AI/ML integration for recommendation algorithms",
+                    "Payment gateway compliance with PCI DSS standards",
+                    "AWS-based cloud infrastructure for hosting and media storage"
+                  ].map((requirement, index) => (
+                    <div key={index} className="flex items-start gap-3 p-3 bg-background/50 rounded-lg border border-white/10">
+                      <Shield className="w-5 h-5 text-[#E5195E] flex-shrink-0 mt-0.5" />
+                      <span className="text-muted-foreground font-manrope text-sm">{requirement}</span>
+                    </div>
+                  ))}
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </section>
+
+      {/* Challenges & Solution Architecture */}
+      <section className="py-16 bg-background">
+        <div className="container mx-auto px-6 lg:px-8">
+          <div className="max-w-6xl mx-auto">
+            <h2 className="text-3xl font-bold text-white mb-12 text-center font-manrope">Challenges & Solution Architecture</h2>
+
+            <div className="grid md:grid-cols-2 gap-12 mb-16">
+              <div>
+                <h3 className="text-xl font-semibold text-white mb-6 font-manrope">Technical Challenges</h3>
+                <div className="space-y-4">
+                  {[
+                    "Balancing performance with heavy image/video content",
+                    "Building a real-time recommendation system with low latency",
+                    "Implementing seamless live shopping experiences without lag"
+                  ].map((challenge, index) => (
+                    <div key={index} className="flex items-start gap-3">
+                      <AlertCircle className="w-5 h-5 text-[#E5195E] flex-shrink-0 mt-0.5" />
+                      <span className="text-muted-foreground font-manrope">{challenge}</span>
+                    </div>
+                  ))}
+                </div>
+              </div>
+
+              <div>
+                <h3 className="text-xl font-semibold text-white mb-6 font-manrope">Project Management Challenges</h3>
+                <div className="space-y-4">
+                  {[
+                    "Coordinating between AI, frontend, and payment teams",
+                    "Managing content moderation for a social platform",
+                    "Handling rapid feature iterations while maintaining stability"
+                  ].map((challenge, index) => (
+                    <div key={index} className="flex items-start gap-3">
+                      <AlertCircle className="w-5 h-5 text-[#E5195E] flex-shrink-0 mt-0.5" />
+                      <span className="text-muted-foreground font-manrope">{challenge}</span>
+                    </div>
+                  ))}
+                </div>
+              </div>
+            </div>
+
+            <div className="bg-card/50 p-8 rounded-xl border border-white/10">
+              <h3 className="text-xl font-semibold text-white mb-6 font-manrope">Technical Architecture</h3>
+              <div className="grid md:grid-cols-2 gap-8">
+                <div>
+                  <h4 className="text-lg font-semibold text-white mb-4 font-manrope">Technology Stack</h4>
+                  <div className="space-y-3">
+                    {[
+                      { label: "Frontend", value: "React Native, Next.js" },
+                      { label: "Backend", value: "Node.js, Express.js" },
+                      { label: "Database", value: "PostgreSQL, Redis" },
+                      { label: "AI/ML", value: "TensorFlow for recommendation engine" },
+                      { label: "Payments", value: "Stripe Payments" },
+                      { label: "Infrastructure", value: "AWS S3, Firebase Cloud Messaging" }
+                    ].map((item, index) => (
+                      <div key={index} className="flex justify-between items-center p-3 bg-background/50 rounded-lg border border-white/10">
+                        <span className="text-muted-foreground font-manrope">{item.label}:</span>
+                        <span className="text-white font-medium font-manrope text-sm">{item.value}</span>
+                      </div>
+                    ))}
+                  </div>
+                </div>
+
+                <div>
+                  <h4 className="text-lg font-semibold text-white mb-4 font-manrope">Architecture Highlights</h4>
+                  <div className="space-y-3">
+                    {[
+                      "Hybrid cloud deployment leveraging AWS EC2, S3, and CloudFront for media delivery",
+                      "AI microservice for recommendations and personalization",
+                      "Event-driven architecture using Redis Pub/Sub for real-time updates",
+                      "Multi-tier security with encryption at rest and in transit",
+                      "Optimized media compression pipeline for faster load times"
+                    ].map((highlight, index) => (
+                      <div key={index} className="flex items-center gap-3">
+                        <Check className="w-5 h-5 text-[#E5195E] flex-shrink-0" />
+                        <span className="text-muted-foreground text-sm font-manrope">{highlight}</span>
+                      </div>
+                    ))}
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </section>
+
+      {/* Development Process */}
+      <section className="py-16 bg-card/30">
+        <div className="container mx-auto px-6 lg:px-8">
+          <div className="max-w-6xl mx-auto">
+            <h2 className="text-3xl font-bold text-white mb-12 text-center font-manrope">Development Process & Methodology</h2>
+
+            <div className="mb-12">
+              <div className="text-center mb-8">
+                <p className="text-lg text-muted-foreground font-manrope">
+                  <strong>Agile</strong> (2-week sprints) with feature prioritization with merchant and influencer input, weekly demos for stakeholders, continuous integration with automated deployments to staging
+                </p>
+              </div>
+
+              <div className="grid md:grid-cols-2 lg:grid-cols-3 gap-6">
+                {[
+                  {
+                    phase: "Discovery & Planning",
+                    duration: "3 weeks",
+                    description: "Market analysis of social commerce trends, AI recommendation system design, payment integration planning"
+                  },
+                  {
+                    phase: "Design & Prototyping",
+                    duration: "5 weeks",
+                    description: "Wireframes for influencer storefronts & live shopping pages, AI model training on sample product datasets"
+                  },
+                  {
+                    phase: "Core Development",
+                    duration: "10 weeks",
+                    description: "Social feed & product catalog integration, influencer tools & storefronts, recommendation engine integration"
+                  },
+                  {
+                    phase: "Live Shopping & Messaging",
+                    duration: "5 weeks",
+                    description: "Real-time video streaming module, in-app chat and engagement features"
+                  },
+                  {
+                    phase: "Testing & Optimization",
+                    duration: "3 weeks",
+                    description: "Load & stress testing for peak events, AI accuracy tuning"
+                  },
+                  {
+                    phase: "Launch & Scaling",
+                    duration: "2 weeks",
+                    description: "Beta rollout to select merchants & influencers, marketing support and onboarding sessions"
+                  }
+                ].map((item, index) => (
+                  <Card key={index} className="bg-background/50 border-white/10">
+                    <CardContent className="p-6">
+                      <div className="flex items-center justify-between mb-3">
+                        <div className="w-8 h-8 bg-[#E5195E] rounded-full flex items-center justify-center text-white font-bold text-sm font-manrope">
+                          {index + 1}
+                        </div>
+                        <Badge variant="outline" className="border-[#E5195E]/30 text-[#E5195E] font-manrope">
+                          {item.duration}
+                        </Badge>
+                      </div>
+                      <h3 className="text-lg font-semibold text-white mb-2 font-manrope">{item.phase}</h3>
+                      <p className="text-sm text-muted-foreground font-manrope">{item.description}</p>
+                    </CardContent>
+                  </Card>
+                ))}
+              </div>
+            </div>
+          </div>
+        </div>
+      </section>
+
+      {/* Key Features */}
+      <section className="py-16 bg-background">
+        <div className="container mx-auto px-6 lg:px-8">
+          <div className="max-w-6xl mx-auto">
+            <h2 className="text-3xl font-bold text-white mb-12 text-center font-manrope">Key Features & Functionality</h2>
+
+            <div className="grid md:grid-cols-2 lg:grid-cols-3 gap-6 mb-12">
+              {[
+                {
+                  icon: TrendingUp,
+                  title: "Social Feed",
+                  description: "Curated content from influencers & merchants"
+                },
+                {
+                  icon: Brain,
+                  title: "Personalized Recommendations",
+                  description: "AI-driven product suggestions"
+                },
+                {
+                  icon: Play,
+                  title: "Live Shopping",
+                  description: "Real-time events with integrated checkout"
+                },
+                {
+                  icon: MessageCircle,
+                  title: "Direct Messaging",
+                  description: "Buyer-seller communication within the app"
+                },
+                {
+                  icon: CreditCard,
+                  title: "Multi-Channel Payments",
+                  description: "Stripe, local wallets, and COD options"
+                },
+                {
+                  icon: ShoppingBag,
+                  title: "Influencer Storefronts",
+                  description: "Creator-driven product showcases and sales"
+                }
+              ].map((feature, index) => (
+                <Card key={index} className="bg-card/50 border-white/10 hover:border-[#E5195E]/30 transition-all duration-300">
+                  <CardContent className="p-6 text-center">
+                    <feature.icon className="w-8 h-8 text-[#E5195E] mx-auto mb-4" />
+                    <h3 className="text-lg font-semibold text-white mb-3 font-manrope">{feature.title}</h3>
+                    <p className="text-muted-foreground text-sm font-manrope">{feature.description}</p>
+                  </CardContent>
+                </Card>
+              ))}
+            </div>
+          </div>
+        </div>
+      </section>
+
+      {/* Results & Impact */}
+      <section className="py-16 bg-card/30">
+        <div className="container mx-auto px-6 lg:px-8">
+          <div className="max-w-6xl mx-auto">
+            <h2 className="text-3xl font-bold text-white mb-12 text-center font-manrope">Results & Impact</h2>
+
+            <div className="grid md:grid-cols-2 lg:grid-cols-4 gap-6 mb-12">
+              {[
+                { label: "Merchant Onboarding", value: "5,000+", icon: Users, desc: "first 2 months" },
+                { label: "Engagement Increase", value: "28%", icon: TrendingUp, desc: "AI recommendations" },
+                { label: "Q1 Transactions", value: "$1.2M", icon: DollarSign, desc: "processed" },
+                { label: "AI Response Time", value: "180ms", icon: Zap, desc: "average" }
+              ].map((metric, index) => (
+                <Card key={index} className="bg-background/50 border-white/10 text-center">
+                  <CardContent className="p-6">
+                    <metric.icon className="w-8 h-8 text-[#E5195E] mx-auto mb-3" />
+                    <div className="text-2xl font-bold text-white mb-1 font-manrope">{metric.value}</div>
+                    <div className="text-muted-foreground text-sm font-manrope">{metric.label}</div>
+                    <div className="text-xs text-muted-foreground font-manrope">{metric.desc}</div>
+                  </CardContent>
+                </Card>
+              ))}
+            </div>
+
+            <div className="grid md:grid-cols-2 gap-8">
+              <div>
+                <h3 className="text-xl font-semibold text-white mb-4 font-manrope">Business Impact</h3>
+                <ul className="space-y-3">
+                  {[
+                    "28% higher engagement from personalized recommendations",
+                    "Increased merchant sales through influencer storefronts",
+                    "Faster product discovery and higher repeat purchase rates"
+                  ].map((impact, index) => (
+                    <li key={index} className="flex items-center gap-3">
+                      <Check className="w-5 h-5 text-[#E5195E] flex-shrink-0" />
+                      <span className="text-muted-foreground font-manrope">{impact}</span>
+                    </li>
+                  ))}
+                </ul>
+              </div>
+
+              <div>
+                <h3 className="text-xl font-semibold text-white mb-4 font-manrope">Technical Performance</h3>
+                <ul className="space-y-3">
+                  {[
+                    "Average AI recommendation response time: 180ms",
+                    "Live stream latency: < 2 seconds",
+                    "99.9% uptime in first 90 days"
+                  ].map((performance, index) => (
+                    <li key={index} className="flex items-center gap-3">
+                      <Check className="w-5 h-5 text-[#E5195E] flex-shrink-0" />
+                      <span className="text-muted-foreground font-manrope">{performance}</span>
+                    </li>
+                  ))}
+                </ul>
+              </div>
+            </div>
+          </div>
+        </div>
+      </section>
+
+      {/* Lessons Learned */}
+      <section className="py-16 bg-background">
+        <div className="container mx-auto px-6 lg:px-8">
+          <div className="max-w-4xl mx-auto">
+            <h2 className="text-3xl font-bold text-white mb-12 text-center font-manrope">Lessons Learned & Best Practices</h2>
+
+            <div className="grid md:grid-cols-2 gap-8">
+              <Card className="bg-card/50 border-white/10">
+                <CardContent className="p-6">
+                  <h3 className="text-lg font-semibold text-white mb-4 font-manrope">What Worked Well</h3>
+                  <ul className="space-y-2">
+                    {[
+                      "AI-first design approach improved engagement from day one",
+                      "Early influencer partnerships boosted platform credibility"
+                    ].map((item, index) => (
+                      <li key={index} className="flex items-center gap-3">
+                        <Check className="w-4 h-4 text-[#E5195E] flex-shrink-0" />
+                        <span className="text-muted-foreground font-manrope">{item}</span>
+                      </li>
+                    ))}
+                  </ul>
+                </CardContent>
+              </Card>
+
+              <Card className="bg-card/50 border-white/10">
+                <CardContent className="p-6">
+                  <h3 className="text-lg font-semibold text-white mb-4 font-manrope">Key Learnings</h3>
+                  <ul className="space-y-2">
+                    {[
+                      "Live shopping events require extensive pre-launch testing",
+                      "Merchant onboarding must include content quality training"
+                    ].map((item, index) => (
+                      <li key={index} className="flex items-center gap-3">
+                        <TrendingUp className="w-4 h-4 text-[#E5195E] flex-shrink-0" />
+                        <span className="text-muted-foreground font-manrope">{item}</span>
+                      </li>
+                    ))}
+                  </ul>
+                </CardContent>
+              </Card>
+            </div>
+          </div>
+        </div>
+      </section>
+
+      {/* Client Testimonial */}
+      <section className="py-16 bg-card/30">
+        <div className="container mx-auto px-6 lg:px-8">
+          <div className="max-w-4xl mx-auto text-center">
+            <div className="flex justify-center mb-6">
+              {[...Array(5)].map((_, i) => (
+                <Star key={i} className="w-6 h-6 text-[#E5195E] fill-current" />
+              ))}
+            </div>
+            <blockquote className="text-xl md:text-2xl text-white mb-6 font-manrope italic">
+              "WDI understood the vision for Amoz perfectly — merging social and commerce in a seamless experience. The AI recommendations have been a game changer for engagement and sales."
+            </blockquote>
+            <div className="text-muted-foreground font-manrope">
+              <div className="font-semibold text-white">Founders, Amoz</div>
+              <div>Social Commerce Platform Client</div>
+            </div>
+          </div>
+        </div>
+      </section>
+
+      {/* Future Roadmap */}
+      <section className="py-16 bg-background">
+        <div className="container mx-auto px-6 lg:px-8">
+          <div className="max-w-4xl mx-auto">
+            <h2 className="text-3xl font-bold text-white mb-8 text-center font-manrope">Future Roadmap</h2>
+
+            <div className="grid md:grid-cols-2 gap-8">
+              <Card className="bg-card/50 border-white/10">
+                <CardContent className="p-6">
+                  <h3 className="text-lg font-semibold text-white mb-4 font-manrope">Next 6 Months</h3>
+                  <ul className="space-y-2">
+                    {[
+                      "AI-driven influencer matching for merchants",
+                      "Multi-language support for broader market reach"
+                    ].map((feature, index) => (
+                      <li key={index} className="flex items-center gap-3">
+                        <Clock className="w-4 h-4 text-[#E5195E] flex-shrink-0" />
+                        <span className="text-muted-foreground font-manrope">{feature}</span>
+                      </li>
+                    ))}
+                  </ul>
+                </CardContent>
+              </Card>
+
+              <Card className="bg-card/50 border-white/10">
+                <CardContent className="p-6">
+                  <h3 className="text-lg font-semibold text-white mb-4 font-manrope">Next 12 Months</h3>
+                  <ul className="space-y-2">
+                    {[
+                      "Augmented reality (AR) product previews",
+                      "Cross-border merchant onboarding and international payment integration"
+                    ].map((vision, index) => (
+                      <li key={index} className="flex items-center gap-3">
+                        <Target className="w-4 h-4 text-[#E5195E] flex-shrink-0" />
+                        <span className="text-muted-foreground font-manrope">{vision}</span>
+                      </li>
+                    ))}
+                  </ul>
+                </CardContent>
+              </Card>
+            </div>
+          </div>
+        </div>
+      </section>
+
+      {/* CTA Section */}
+      <section className="py-16 bg-gradient-to-r from-[#E5195E]/10 via-background to-[#E5195E]/10">
+        <div className="container mx-auto px-6 lg:px-8">
+          <div className="max-w-4xl mx-auto text-center">
+            <h2 className="text-3xl md:text-4xl font-bold text-white mb-6 font-manrope">
+              Ready to Build Your AI Commerce Platform?
+            </h2>
+            <p className="text-lg text-muted-foreground mb-8 font-manrope">
+              Create innovative social commerce solutions that merge AI-powered recommendations with seamless shopping experiences for the next generation of consumers.
+            </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 px-8 py-3 font-manrope"
+                onClick={() => navigate('/start-a-project')}
+              >
+                Start Your Project
+                <ArrowRight className="w-5 h-5 ml-2" />
+              </Button>
+              <Button
+                size="lg"
+                variant="outline"
+                className="border-white/20 text-white hover:bg-white/10 px-8 py-3 font-manrope"
+                onClick={() => navigate('/case-studies')}
+              >
+                View More Cases
+              </Button>
+            </div>
+          </div>
+        </div>
+      </section>
+
+      {/* <Footer /> */}
+    </div>
+  );
+};

pages/AndroidAppDevelopment.tsx

@@ -39,12 +39,66 @@ import { Button } from "../components/ui/button";
 import { Card, CardContent } from "../components/ui/card";
 import { ShimmerButton } from "../components/ui/shimmer-button";
 import androidVectorImage from "../src/images/android-vector.png";
-import { navigateTo } from "@/App";
+import { useNavigate } from "react-router-dom";
+import { Helmet } from "react-helmet-async";
+import ranoutofImage from "../src/images/ranoutof.webp"
+import tradersCircuitImage from "../src/images/traders-circuit.webp";
+import prospertyImage from "../src/images/prosperty.webp";
+import awsLogoImage from "../src/images/aws-logo.png";
+
 
 // Android Hero Section with Android device mockups and Android vector
 const AndroidHeroWithCTA = () => {
+  const navigate = useNavigate();
   return (
     <section className="relative py-20 overflow-hidden bg-black">
+      <Helmet>
+        {/* Page Title and Meta Description */}
+        <title>Android App Development by WDI | Boost Your Mobile Presence Today</title>
+        <meta
+          name="description"
+          content="WDI delivers custom Android app development with innovative, high-performance solutions designed to accelerate your business growth and engagement."
+        />
+
+        {/* Canonical Link */}
+        <link rel="canonical" href="https://www.wdipl.com/services/android-app-development" />
+
+        {/* Open Graph Tags (for Facebook, LinkedIn) */}
+        <meta property="og:title" content="Android App Development by WDI | Boost Your Mobile Presence Today" />
+        <meta
+          property="og:description"
+          content="WDI delivers custom Android app development with innovative, high-performance solutions designed to accelerate your business growth and engagement."
+        />
+        <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="Android App Development by WDI | Boost Your Mobile Presence Today" />
+        <meta
+          name="twitter:description"
+          content="WDI delivers custom Android app development with innovative, high-performance solutions designed to accelerate your business growth and engagement."
+        />
+        <meta name="twitter:image" content="https://www.wdipl.com/your-preview-image.jpg" />
+
+        {/* Social Profiles (using JSON-LD Schema) */}
+        <script type="application/ld+json">
+          {`
+                                    {
+                                      "@context": "https://schema.org",
+                                      "@type": "Organization",
+                                      "name": "WDI",
+                                      "url": "https://www.wdipl.com",
+                                      "sameAs": [
+                                        "https://www.facebook.com/wdideas",
+                                        "https://www.linkedin.com/in/website-developers-india/",
+                                        "https://www.instagram.com/wdipl/"
+                                      ]
+                                    }
+                                  `}
+        </script>
+      </Helmet>
       <div className="container mx-auto px-6 lg:px-8">
         <div className="grid lg:grid-cols-2 gap-16 items-center min-h-[90vh]">
           <motion.div
@@ -116,7 +170,7 @@ const AndroidHeroWithCTA = () => {
             >
               <ShimmerButton
                 className="text-lg px-8 py-4"
-                onClick={() => navigateTo("/start-a-project")}
+                onClick={() => navigate("/start-a-project")}
               >
                 <div className="inline-flex items-center gap-2">
                   <svg
@@ -348,8 +402,7 @@ const AndroidKeyBenefits = () => {
             Why Develop a Native Android App?
           </h2>
           <p className="text-xl text-muted-foreground max-w-3xl mx-auto leading-relaxed">
-            Android development offers unparalleled reach and flexibility for
-            businesses looking to tap into the world's largest mobile ecosystem.
+            AI mobile app development offers unparalleled reach and flexibility for businesses looking to tap into the world's largest mobile ecosystem.
           </p>
         </motion.div>
 
@@ -367,7 +420,7 @@ const AndroidKeyBenefits = () => {
                 key={index}
                 initial={{ opacity: 0, y: 20 }}
                 whileInView={{ opacity: 1, y: 0 }}
-                transition={{ duration: 0.5, delay: index * 0.1 }}
+                transition={{ duration: 0.5, delay: index * 0.01 }}
                 viewport={{ once: true }}
                 whileHover={{ y: -5 }}
                 className="group"
@@ -502,13 +555,11 @@ const AndroidProcessTimeline = () => {
                   whileInView={{ opacity: 1, x: 0 }}
                   transition={{ duration: 0.8, delay: index * 0.2 }}
                   viewport={{ once: true }}
-                  className={`flex items-center ${
-                    isEven ? "lg:flex-row" : "lg:flex-row-reverse"
+                  className={`flex items-center ${isEven ? "lg:flex-row" : "lg:flex-row-reverse"
                     } flex-col lg:gap-16 gap-8`}
                 >
                   <div
-                    className={`flex-1 ${
-                      isEven ? "lg:text-right" : "lg:text-left"
+                    className={`flex-1 ${isEven ? "lg:text-right" : "lg:text-left"
                       } text-center lg:text-left`}
                   >
                     <div className="bg-gray-900/50 backdrop-blur-md rounded-2xl border border-gray-800 p-8 hover:border-accent/30 transition-all duration-300 shadow-lg hover:shadow-xl">
@@ -617,7 +668,7 @@ const AndroidServicesGrid = () => {
                 key={index}
                 initial={{ opacity: 0, y: 20 }}
                 whileInView={{ opacity: 1, y: 0 }}
-                transition={{ duration: 0.5, delay: index * 0.1 }}
+                transition={{ duration: 0.5, delay: index * 0.01 }}
                 viewport={{ once: true }}
                 whileHover={{ y: -5 }}
                 className="group"
@@ -649,35 +700,35 @@ const AndroidTechStack = () => {
   const technologies = [
     {
       name: "Kotlin",
-      logo: "https://images.unsplash.com/photo-1607706189992-eae578626c86?w=80&h=80&fit=crop&auto=format",
+      logo: "https://cdn.jsdelivr.net/gh/devicons/devicon/icons/kotlin/kotlin-original.svg",
     },
     {
       name: "Java",
-      logo: "https://images.unsplash.com/photo-1580121441575-41bcb5c6b47c?w=80&h=80&fit=crop&auto=format",
+      logo: "https://cdn.jsdelivr.net/gh/devicons/devicon/icons/java/java-plain.svg",
     },
     {
       name: "Android Studio",
-      logo: "https://images.unsplash.com/photo-1611224923853-80b023f02d71?w=80&h=80&fit=crop&auto=format",
+      logo: "https://cdn.jsdelivr.net/gh/devicons/devicon/icons/androidstudio/androidstudio-plain.svg",
     },
     {
       name: "Material Design",
-      logo: "https://images.unsplash.com/photo-1558655146-9f40138edfeb?w=80&h=80&fit=crop&auto=format",
+      logo: "https://cdn.jsdelivr.net/gh/devicons/devicon/icons/materialui/materialui-original.svg",
     },
     {
       name: "Firebase",
-      logo: "https://images.unsplash.com/photo-1618477388954-7852f32655ec?w=80&h=80&fit=crop&auto=format",
+      logo: "https://cdn.jsdelivr.net/gh/devicons/devicon/icons/firebase/firebase-plain.svg",
     },
     {
       name: "AWS",
-      logo: "https://images.unsplash.com/photo-1606868306217-dbf5046868d2?w=80&h=80&fit=crop&auto=format",
+      logo: awsLogoImage,
     },
     {
       name: "Google APIs",
-      logo: "https://images.unsplash.com/photo-1573804633927-bfcbcd909acd?w=80&h=80&fit=crop&auto=format",
+      logo: "https://cdn.jsdelivr.net/gh/devicons/devicon/icons/google/google-plain.svg",
     },
     {
       name: "Jetpack Compose",
-      logo: "https://images.unsplash.com/photo-1621839673705-6617adf9e890?w=80&h=80&fit=crop&auto=format",
+      logo: "https://cdn.jsdelivr.net/gh/devicons/devicon/icons/jetpackcompose/jetpackcompose-plain.svg",
     },
   ];
 
@@ -706,7 +757,7 @@ const AndroidTechStack = () => {
               key={index}
               initial={{ opacity: 0, scale: 0.8 }}
               whileInView={{ opacity: 1, scale: 1 }}
-              transition={{ duration: 0.5, delay: index * 0.1 }}
+              transition={{ duration: 0.5, delay: index * 0.01 }}
               viewport={{ once: true }}
               whileHover={{ scale: 1.1, y: -5 }}
               className="flex flex-col items-center group"
@@ -731,36 +782,37 @@ const AndroidTechStack = () => {
 
 // Android Case Studies
 const AndroidCaseStudies = () => {
+  const navigate = useNavigate();
   const caseStudies = [
     {
-      title: "E-Commerce Android App with Google Pay",
-      client: "ShopNow",
+      title: "Household Management Revolution",
+      client: "RanOutOf",
       description:
-        "Comprehensive shopping platform with Google services integration",
-      image:
-        "https://images.unsplash.com/photo-1556742049-0cfed4f6a45d?w=400&h=300&fit=crop&auto=format",
+        "Smart inventory management app that helps households track supplies, create shopping lists, and reduce waste through intelligent notifications.",
+      image: ranoutofImage,
       results: "3M+ downloads",
-      gradient: "from-accent/20 to-accent/10",
+      gradient: "from-[#007F33]/20 to-[#007F33]/10",
+      buttonLink: "/projects/ranoutof",
     },
     {
-      title: "Fitness Tracking Android App",
-      client: "FitAndroid Pro",
+      title: "Financial Trading Platform",
+      client: "Traders Circuit",
       description:
-        "Advanced fitness tracking with Google Fit integration and wearable support",
-      image:
-        "https://images.unsplash.com/photo-1576091160399-112ba8d25d1f?w=400&h=300&fit=crop&auto=format",
+        "Advanced trading platform with real-time market data, algorithmic trading capabilities, and comprehensive portfolio management tools.",
+      image: tradersCircuitImage,
       results: "800K+ users",
       gradient: "from-blue-500/20 to-cyan-500/20",
+      buttonLink: "/projects/traderscircuit",
     },
     {
-      title: "Business Productivity Android Suite",
-      client: "WorkFlow",
+      title: "Real Estate Investment Platform",
+      client: "Prosperty",
       description:
-        "Enterprise-grade productivity app with Google Workspace integration",
-      image:
-        "https://images.unsplash.com/photo-1611224923853-80b023f02d71?w=400&h=300&fit=crop&auto=format",
+        "Digital platform for real estate investment with property analysis, portfolio management, and automated investment recommendations.",
+      image: prospertyImage,
       results: "1.5M+ downloads",
-      gradient: "from-purple-500/20 to-pink-500/20",
+      gradient: "from-[#a98453]/20 to-[#a98453]/10",
+      buttonLink: "/projects/prosperty",
     },
   ];
 
@@ -778,8 +830,7 @@ const AndroidCaseStudies = () => {
             Android Apps That Define Industries
           </h2>
           <p className="text-xl text-muted-foreground max-w-3xl mx-auto leading-relaxed">
-            Discover how we've helped businesses succeed with powerful Android
-            applications that leverage the platform's capabilities.
+            Discover how our AI mobile application developers have helped businesses succeed with powerful Android applications that leverage AI-powered features.
           </p>
         </motion.div>
 
@@ -795,7 +846,7 @@ const AndroidCaseStudies = () => {
               key={index}
               initial={{ opacity: 0, y: 20 }}
               whileInView={{ opacity: 1, y: 0 }}
-              transition={{ duration: 0.5, delay: index * 0.1 }}
+              transition={{ duration: 0.5, delay: index * 0.01 }}
               viewport={{ once: true }}
               whileHover={{ y: -8, scale: 1.02 }}
               className="group cursor-pointer"
@@ -826,7 +877,7 @@ const AndroidCaseStudies = () => {
                       </div>
                     </div>
 
-                    <h3 className="text-xl font-semibold text-foreground mb-4 leading-tight">
+                    <h3 className="text-xl font-semibold text-foreground mb-4 leading-tight min-h-[45px]">
                       {study.title}
                     </h3>
                   </div>
@@ -854,6 +905,7 @@ const AndroidCaseStudies = () => {
                       variant="ghost"
                       size="sm"
                       className="w-full justify-between text-accent hover:text-accent hover:bg-accent/10 group-hover:translate-x-1 transition-all duration-300"
+                      onClick={() => navigate(study.buttonLink)}
                     >
                       <span className="text-sm font-medium">
                         VIEW CASE STUDY
@@ -873,6 +925,7 @@ const AndroidCaseStudies = () => {
 
 // Mid-Page CTA
 const AndroidInlineCTA = () => {
+  const navigate = useNavigate();
   return (
     <section className="py-20 bg-black">
       <div className="container mx-auto px-6 lg:px-8">
@@ -917,7 +970,7 @@ const AndroidInlineCTA = () => {
 
             <ShimmerButton
               className="text-xl px-10 py-5 rounded-2xl shadow-lg hover:shadow-xl"
-              onClick={() => navigateTo("/start-a-project")}
+              onClick={() => navigate("/start-a-project")}
             >
               <div className="inline-flex items-center gap-3">
                 <svg
@@ -945,6 +998,7 @@ const AndroidInlineCTA = () => {
 
 // Hire Android Developers Section
 const HireAndroidDevelopers = () => {
+  const navigate = useNavigate();
   const developerTypes = [
     {
       title: "Senior Android Developer",
@@ -1002,7 +1056,7 @@ const HireAndroidDevelopers = () => {
               key={index}
               initial={{ opacity: 0, y: 20 }}
               whileInView={{ opacity: 1, y: 0 }}
-              transition={{ duration: 0.5, delay: index * 0.1 }}
+              transition={{ duration: 0.5, delay: index * 0.01 }}
               viewport={{ once: true }}
               whileHover={{ y: -8, scale: 1.02 }}
               className="group cursor-pointer"
@@ -1063,7 +1117,7 @@ const HireAndroidDevelopers = () => {
         >
           <ShimmerButton
             className="px-8 py-4"
-            onClick={() => navigateTo("/start-a-project")}
+            onClick={() => navigate("/hire-talent/android-app-developers")}
           >
             <div className="inline-flex items-center gap-2">
               <UserPlus className="w-5 h-5 flex-shrink-0" />
@@ -1072,7 +1126,7 @@ const HireAndroidDevelopers = () => {
           </ShimmerButton>
           <Button
             variant="outline"
-            className="border-white/20 text-foreground hover:bg-white/10 px-8 py-4 h-[56px] rounded-lg transition-all duration-300"
+            className="border-white/20 text-foreground hover:bg-white/10 px-8 py-4 h-auto rounded-lg transition-all duration-300"
           >
             <span>Request Profiles</span>
             <ArrowRight className="ml-2 w-4 h-4" />
@@ -1161,6 +1215,7 @@ const AndroidFAQs = () => {
 
 // Final CTA Section
 const AndroidFinalCTA = () => {
+  const navigate = useNavigate();
   return (
     <section className="py-20 relative overflow-hidden">
       <div className="container mx-auto px-6 lg:px-8 relative z-10">
@@ -1225,7 +1280,7 @@ const AndroidFinalCTA = () => {
           >
             <ShimmerButton
               className="px-12 py-6 text-xl rounded-2xl shadow-2xl hover:shadow-accent/25"
-              onClick={() => navigateTo("/start-a-project")}
+              onClick={() => navigate("/start-a-project")}
             >
               <div className="inline-flex items-center gap-3">
                 <svg
@@ -1266,7 +1321,7 @@ const AndroidFinalCTA = () => {
 export const AndroidAppDevelopment = () => {
   return (
     <div className="dark min-h-screen">
-      <Navigation />
+      {/* <Navigation /> */}
 
       {/* Hero Section */}
       <section className="bg-black">
@@ -1278,6 +1333,11 @@ export const AndroidAppDevelopment = () => {
         <AndroidKeyBenefits />
       </section>
 
+      {/* Case Studies */}
+      <section className="bg-background">
+        <AndroidCaseStudies />
+      </section>
+
       {/* Development Process */}
       <section className="bg-card">
         <AndroidProcessTimeline />
@@ -1293,15 +1353,10 @@ export const AndroidAppDevelopment = () => {
         <AndroidTechStack />
       </section>
 
-      {/* Case Studies */}
-      <section className="bg-background">
-        <AndroidCaseStudies />
-      </section>
-
       {/* Mid-Page CTA */}
-      <section className="bg-card">
+      {/* <section className="bg-card">
         <AndroidInlineCTA />
-      </section>
+      </section> */}
 
       {/* Hire Android Developers */}
       <section className="bg-background">
@@ -1309,9 +1364,9 @@ export const AndroidAppDevelopment = () => {
       </section>
 
       {/* FAQs */}
-      <section className="bg-card">
+      {/* <section className="bg-card">
         <AndroidFAQs />
-      </section>
+      </section> */}
 
       {/* Final CTA */}
       <section className="bg-background">
@@ -1319,8 +1374,8 @@ export const AndroidAppDevelopment = () => {
       </section>
 
       {/* Footer */}
-      <section className="bg-card">
-        <Footer />
+      <section className="bg-background">
+        {/* <Footer /> */}
       </section>
     </div>
   );

pages/ArticleDetail.tsx

@@ -7,8 +7,8 @@ import { Card, CardContent } from "../components/ui/card";
 import { Avatar, AvatarFallback, AvatarImage } from "../components/ui/avatar";
 import { Separator } from "../components/ui/separator";
 import { Calendar, Clock, User, ArrowRight, Share2, Linkedin, Twitter, ExternalLink, Tag } from "lucide-react";
-import { navigateTo } from "../App";
 import { ImageWithFallback } from "../components/figma/ImageWithFallback";
+import { useNavigate } from "react-router-dom";
 
 // Mock article data - in real implementation, this would come from props or API
 const articleData = {
@@ -116,9 +116,11 @@ export const ArticleDetail = () => {
     }
   };
 
+  const navigate = useNavigate();
+
   return (
     <div className="dark min-h-screen bg-background">
-      <Navigation />
+      {/* <Navigation /> */}
       
       {/* Hero Section */}
       <section className="pt-24 pb-16 bg-background">
@@ -126,11 +128,11 @@ export const ArticleDetail = () => {
           <div className="max-w-4xl mx-auto">
             {/* Breadcrumb */}
             <div className="flex items-center gap-2 text-sm text-muted-foreground mb-8">
-              <button onClick={() => navigateTo('/')} className="hover:text-white transition-colors">
+              <button onClick={() => navigate('/')} className="hover:text-white transition-colors">
                 Home
               </button>
               <span>/</span>
-              <button onClick={() => navigateTo('/resources/blog')} className="hover:text-white transition-colors">
+              <button onClick={() => navigate('/resources/blog')} className="hover:text-white transition-colors">
                 Blog
               </button>
               <span>/</span>
@@ -265,7 +267,7 @@ export const ArticleDetail = () => {
                     </div>
 
                     {/* Author Bio */}
-                    <Card className="bg-card/50 border-white/10">
+                    {/* <Card className="bg-card/50 border-white/10">
                       <CardContent className="p-6">
                         <div className="flex items-start gap-4">
                           <Avatar className="w-16 h-16">
@@ -279,7 +281,7 @@ export const ArticleDetail = () => {
                           </div>
                         </div>
                       </CardContent>
-                    </Card>
+                    </Card> */}
                   </div>
                 </CardContent>
               </Card>
@@ -297,7 +299,7 @@ export const ArticleDetail = () => {
                       <div 
                         key={article.id} 
                         className="group cursor-pointer"
-                        onClick={() => navigateTo(`/articles/${article.id}`)}
+                        onClick={() => navigate(`/articles/${article.id}`)}
                       >
                         <div className="aspect-[16/10] overflow-hidden rounded-lg mb-3">
                           <ImageWithFallback
@@ -323,7 +325,7 @@ export const ArticleDetail = () => {
                   <Button 
                     variant="outline" 
                     className="w-full border-white/20 text-white hover:bg-white/10"
-                    onClick={() => navigateTo('/resources/blog')}
+                    onClick={() => navigate('/resources/blog')}
                   >
                     View All Articles
                     <ArrowRight className="w-4 h-4 ml-2" />
@@ -341,7 +343,7 @@ export const ArticleDetail = () => {
                   </p>
                   <Button 
                     className="w-full bg-[#E5195E] hover:bg-[#E5195E]/90 text-white"
-                    onClick={() => navigateTo('/contact')}
+                    onClick={() => navigate('/contact')}
                   >
                     Get In Touch
                   </Button>
@@ -368,7 +370,7 @@ export const ArticleDetail = () => {
                 <Button 
                   size="lg" 
                   className="bg-[#E5195E] hover:bg-[#E5195E]/90 text-white"
-                  onClick={() => navigateTo('/contact')}
+                  onClick={() => navigate('/contact')}
                 >
                   Start Your Project
                   <ArrowRight className="ml-2 w-4 h-4" />
@@ -377,7 +379,7 @@ export const ArticleDetail = () => {
                   size="lg" 
                   variant="outline" 
                   className="border-white/20 text-white hover:bg-white/10"
-                  onClick={() => navigateTo('/resources/blog')}
+                  onClick={() => navigate('/resources/blog')}
                 >
                   Read More Articles
                 </Button>
@@ -387,7 +389,7 @@ export const ArticleDetail = () => {
         </div>
       </section>
 
-      <Footer />
+      {/* <Footer /> */}
     </div>
   );
 };

pages/ArtificialIntelligenceServices.tsx

@@ -1,31 +1,98 @@
-import React from "react";
 import { motion } from "framer-motion";
-import { Navigation } from "../components/Navigation";
-import { Footer } from "../components/Footer";
-import { ProcessSection } from "../components/ProcessSection";
-import { FAQSection } from "../components/FAQSection";
-import { AnimatedGradientText } from "../components/AnimatedGradientText";
-import { Button } from "../components/ui/button";
-import { ShimmerButton } from "../components/ui/shimmer-button";
-import { Badge } from "../components/ui/badge";
-import { Card, CardContent } from "../components/ui/card";
-import { GridPattern } from "../components/GridPattern";
-import { navigateTo } from "../App";
 import {
-  Bot, Brain, Zap, Target, Settings, Users, Star, 
-  ArrowRight, ChevronRight, Clock, TrendingUp, Code, Layers, 
-  Layout, Rocket, Monitor, Lock, RefreshCcw, ShieldCheck,
-  MessageSquare, Heart, CheckCircle, Lightbulb, Coffee, 
-  Download, Calendar, Camera, Music, Gamepad2,
-  CreditCard, Bell, Mail, Search, Home, MapPin, 
-  Github, Slack, Figma, Chrome, Zap as ZapIcon, Video, MessageCircle,
-  Cog, Sparkles, Handshake, Eye, Award, UserPlus, Cpu, Database, Server
+  Bot,
+  Brain,
+  Calendar,
+  Cpu,
+  Eye,
+  Layers,
+  Lightbulb,
+  MessageCircle,
+  Rocket,
+  Settings,
+  Sparkles,
+  TrendingUp,
+  UserPlus,
+  Zap,
 } from "lucide-react";
+import { FAQSection } from "../components/FAQSection";
+import { Footer } from "../components/Footer";
+import { Navigation } from "../components/Navigation";
+import { ProcessSection } from "../components/ProcessSection";
+import { Badge } from "../components/ui/badge";
+import { Button } from "../components/ui/button";
+import { Card, CardContent } from "../components/ui/card";
+import { ShimmerButton } from "../components/ui/shimmer-button";
+import { Helmet } from "react-helmet-async";
+import { useNavigate } from "react-router-dom";
 
 // Enhanced Hero Section
 const HeroWithCTA = () => {
+  const navigate = useNavigate();
   return (
     <section className="relative py-20 overflow-hidden bg-black">
+      <Helmet>
+        {/* Page Title and Meta Description */}
+        <title>Artificial Intelligence | Custom AI Solutions by WDI</title>
+        <meta
+          name="description"
+          content="Discover how WDI builds tailored AI solutions that drive automation, insights, and competitive edge for businesses through smart digital systems."
+        />
+
+        {/* Canonical Link */}
+        <link
+          rel="canonical"
+          href="https://www.wdipl.com/artificial-intelligence"
+        />
+
+        {/* Open Graph Tags (for Facebook, LinkedIn) */}
+        <meta
+          property="og:title"
+          content="Artificial Intelligence | Custom AI Solutions by WDI"
+        />
+        <meta
+          property="og:description"
+          content="Discover how WDI builds tailored AI solutions that drive automation, insights, and competitive edge for businesses through smart digital systems."
+        />
+        <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="Artificial Intelligence | Custom AI Solutions by WDI"
+        />
+        <meta
+          name="twitter:description"
+          content="Discover how WDI builds tailored AI solutions that drive automation, insights, and competitive edge for businesses through smart digital systems."
+        />
+        <meta
+          name="twitter:image"
+          content="https://www.wdipl.com/your-preview-image.jpg"
+        />
+
+        {/* Social Profiles (using JSON-LD Schema) */}
+        <script type="application/ld+json">
+          {`
+                              {
+                                "@context": "https://schema.org",
+                                "@type": "Organization",
+                                "name": "WDI",
+                                "url": "https://www.wdipl.com",
+                                "sameAs": [
+                                  "https://www.facebook.com/wdideas",
+                                  "https://www.linkedin.com/in/website-developers-india/",
+                                  "https://www.instagram.com/wdipl/"
+                                ]
+                              }
+                            `}
+        </script>
+      </Helmet>
       <div className="container mx-auto px-6 lg:px-8">
         <div className="grid lg:grid-cols-2 gap-16 items-center min-h-[90vh]">
           <motion.div
@@ -40,7 +107,9 @@ const HeroWithCTA = () => {
               animate={{ opacity: 1, y: 0 }}
               transition={{ duration: 0.6 }}
             >
-              <span className="text-white/70 text-sm font-medium">Artificial Intelligence</span>
+              <span className="text-white/70 text-sm font-medium">
+                Artificial Intelligence
+              </span>
             </motion.div>
 
             {/* Main Heading - Left aligned, reduced font size */}
@@ -52,7 +121,9 @@ const HeroWithCTA = () => {
               </h1>
 
               <p className="text-lg text-gray-300 leading-relaxed max-w-lg">
-                Transform your business with cutting-edge artificial intelligence solutions that drive automation, insights, and competitive advantage.
+                Transform your business with cutting‑edge AI mobile app
+                development and artificial intelligence solutions that drive
+                automation, insights, and competitive advantage.
               </p>
             </div>
 
@@ -63,7 +134,11 @@ const HeroWithCTA = () => {
               transition={{ duration: 0.8, delay: 0.3 }}
               className="flex flex-col sm:flex-row gap-4"
             >
-              <ShimmerButton className="text-lg px-8 py-4" onClick={() => navigateTo('/contact/schedule-a-discovery-call')}>
+              <ShimmerButton
+                className="text-lg px-8 py-4"
+                // onClick={() => navigate('/contact/schedule-a-discovery-call')}
+                onClick={() => navigate("/start-a-project")}
+              >
                 <div className="inline-flex items-center gap-2">
                   <Calendar className="w-4 h-4 flex-shrink-0" />
                   <span>AI Strategy Consultation</span>
@@ -72,8 +147,8 @@ const HeroWithCTA = () => {
               <Button
                 variant="secondary"
                 size="lg"
-                className="text-lg px-8 py-4"
-                onClick={() => navigateTo('/case-studies')}
+                className="text-lg px-8 py-4 h-auto"
+                onClick={() => navigate("/case-studies")}
               >
                 <Eye className="w-4 h-4 flex-shrink-0" />
                 <span>View AI Case Studies</span>
@@ -95,23 +170,39 @@ const HeroWithCTA = () => {
               className="grid grid-cols-2 gap-8 text-center"
             >
               <div className="space-y-2 flex flex-col items-center">
-                <div className="text-3xl lg:text-4xl font-bold text-white">100+</div>
-                <div className="text-sm text-gray-400 leading-tight">AI Models Deployed</div>
+                <div className="text-3xl lg:text-4xl font-bold text-white">
+                  100+
+                </div>
+                <div className="text-sm text-gray-400 leading-tight">
+                  AI Models Deployed
+                </div>
               </div>
 
               <div className="space-y-2 flex flex-col items-center">
-                <div className="text-3xl lg:text-4xl font-bold text-white">85%</div>
-                <div className="text-sm text-gray-400 leading-tight">Process Automation</div>
+                <div className="text-3xl lg:text-4xl font-bold text-white">
+                  85%
+                </div>
+                <div className="text-sm text-gray-400 leading-tight">
+                  Process Automation
+                </div>
               </div>
 
               <div className="space-y-2 flex flex-col items-center">
-                <div className="text-3xl lg:text-4xl font-bold text-white">40%</div>
-                <div className="text-sm text-gray-400 leading-tight">Cost Reduction</div>
+                <div className="text-3xl lg:text-4xl font-bold text-white">
+                  40%
+                </div>
+                <div className="text-sm text-gray-400 leading-tight">
+                  Cost Reduction
+                </div>
               </div>
 
               <div className="space-y-2 flex flex-col items-center">
-                <div className="text-3xl lg:text-4xl font-bold text-white">24/7</div>
-                <div className="text-sm text-gray-400 leading-tight">AI Operations</div>
+                <div className="text-3xl lg:text-4xl font-bold text-white">
+                  24/7
+                </div>
+                <div className="text-sm text-gray-400 leading-tight">
+                  AI Operations
+                </div>
               </div>
             </motion.div>
           </motion.div>
@@ -125,11 +216,19 @@ const HeroWithCTA = () => {
 const HorizontalTagScroller = () => {
   const technologies = [
     { name: "Machine Learning", icon: Brain, color: "text-blue-400" },
-    { name: "Natural Language Processing", icon: MessageCircle, color: "text-green-400" },
+    {
+      name: "Natural Language Processing",
+      icon: MessageCircle,
+      color: "text-green-400",
+    },
     { name: "Computer Vision", icon: Eye, color: "text-purple-400" },
     { name: "Deep Learning", icon: Layers, color: "text-cyan-400" },
-    { name: "Predictive Analytics", icon: TrendingUp, color: "text-orange-400" },
-    { name: "AI Automation", icon: Bot, color: "text-yellow-400" }
+    {
+      name: "Predictive Analytics",
+      icon: TrendingUp,
+      color: "text-orange-400",
+    },
+    { name: "AI Automation", icon: Bot, color: "text-yellow-400" },
   ];
 
   return (
@@ -148,7 +247,9 @@ const HorizontalTagScroller = () => {
             <span className="text-white"> We Master</span>
           </h2>
           <p className="text-xl text-gray-300 max-w-4xl leading-relaxed">
-            Cutting-edge artificial intelligence technologies that power next-generation business solutions.
+            Cutting‑edge artificial intelligence technologies that power
+            next‑generation business solutions and AI‑powered features for
+            modern mobile and web applications.
           </p>
         </motion.div>
 
@@ -171,13 +272,15 @@ const HorizontalTagScroller = () => {
                   key={`first-${tech.name}-${index}`}
                   initial={{ opacity: 0, scale: 0.8 }}
                   whileInView={{ opacity: 1, scale: 1 }}
-                  transition={{ duration: 0.5, delay: index * 0.1 }}
+                  transition={{ duration: 0.5, delay: index * 0.01 }}
                   viewport={{ once: true }}
                   className="group flex-shrink-0 mx-3"
                 >
                   <div className="bg-card/20 backdrop-blur-md rounded-2xl border border-white/10 px-8 py-6 hover:border-accent/30 transition-all duration-300 cursor-pointer shadow-lg hover:shadow-xl min-w-fit group-hover:scale-105 group-hover:-translate-y-1">
                     <div className="flex items-center gap-4">
-                      <div className={`w-8 h-8 flex items-center justify-center ${tech.color}`}>
+                      <div
+                        className={`w-8 h-8 flex items-center justify-center ${tech.color}`}
+                      >
                         <IconComponent className="w-6 h-6" />
                       </div>
                       <span className="text-xl font-medium text-foreground whitespace-nowrap">
@@ -197,13 +300,18 @@ const HorizontalTagScroller = () => {
                   key={`loop-${tech.name}-${index}`}
                   initial={{ opacity: 0, scale: 0.8 }}
                   whileInView={{ opacity: 1, scale: 1 }}
-                  transition={{ duration: 0.5, delay: (index + technologies.length) * 0.1 }}
+                  transition={{
+                    duration: 0.5,
+                    delay: (index + technologies.length) * 0.1,
+                  }}
                   viewport={{ once: true }}
                   className="group flex-shrink-0 mx-3"
                 >
                   <div className="bg-card/20 backdrop-blur-md rounded-2xl border border-white/10 px-8 py-6 hover:border-accent/30 transition-all duration-300 cursor-pointer shadow-lg hover:shadow-xl min-w-fit group-hover:scale-105 group-hover:-translate-y-1">
                     <div className="flex items-center gap-4">
-                      <div className={`w-8 h-8 flex items-center justify-center ${tech.color}`}>
+                      <div
+                        className={`w-8 h-8 flex items-center justify-center ${tech.color}`}
+                      >
                         <IconComponent className="w-6 h-6" />
                       </div>
                       <span className="text-xl font-medium text-foreground whitespace-nowrap">
@@ -227,28 +335,28 @@ const SideBySideContentWithIcons = () => {
     {
       id: "expertise",
       title: "AI Expertise",
-      icon: Brain
+      icon: Brain,
     },
     {
       id: "automation",
       title: "Process Automation",
-      icon: Bot
+      icon: Bot,
     },
     {
       id: "insights",
       title: "Data-Driven Insights",
-      icon: TrendingUp
+      icon: TrendingUp,
     },
     {
       id: "scalable",
       title: "Scalable Solutions",
-      icon: Zap
+      icon: Zap,
     },
     {
       id: "innovation",
       title: "Continuous Innovation",
-      icon: Lightbulb
-    }
+      icon: Lightbulb,
+    },
   ];
 
   return (
@@ -268,7 +376,8 @@ const SideBySideContentWithIcons = () => {
           </h2>
 
           <p className="text-xl text-gray-300 leading-relaxed">
-            Leading AI innovation with proven results and expertise.
+            Leading AI innovation with proven results and expertise in
+            AI‑powered mobile and web development for modern businesses.
           </p>
         </motion.div>
 
@@ -287,7 +396,7 @@ const SideBySideContentWithIcons = () => {
                 key={advantage.id}
                 initial={{ opacity: 0, y: 20 }}
                 whileInView={{ opacity: 1, y: 0 }}
-                transition={{ duration: 0.5, delay: index * 0.1 }}
+                transition={{ duration: 0.5, delay: index * 0.01 }}
                 viewport={{ once: true }}
                 whileHover={{ y: -8, scale: 1.02 }}
                 className="group cursor-pointer"
@@ -314,43 +423,49 @@ const SideBySideContentWithIcons = () => {
 
 // Service Categories Grid
 const TabbedServiceDisplay = () => {
+  const navigate = useNavigate();
   const services = [
     {
       title: "AI Strategy & Consulting",
       icon: Lightbulb,
-      description: "Strategic AI roadmaps and implementation guidance for business transformation.",
-      link: "/services/ai-strategy-consulting"
+      description:
+        "Strategic AI roadmaps and implementation guidance for business transformation.",
+      link: "/services/ai-strategy-consulting",
     },
     {
       title: "AI-Powered Automation & Workflows",
       icon: Bot,
-      description: "Intelligent automation solutions that streamline business processes.",
-      link: "/services/ai-automation-workflows"
+      description:
+        "Intelligent automation solutions that streamline business processes.",
+      link: "/services/ai-automation-workflows",
     },
     {
       title: "AI Integration into Digital Products",
       icon: Zap,
-      description: "Seamlessly integrate AI capabilities into existing digital products.",
-      link: "/services/ai-integration-digital-products"
+      description:
+        "Seamlessly integrate AI capabilities into existing digital products.",
+      link: "/services/ai-integration-digital-products",
     },
     {
       title: "Gen AI Integration",
       icon: Sparkles,
-      description: "Leverage generative AI for content creation and enhanced user experiences.",
-      link: "/services/gen-ai-integration-digital-products"
+      description:
+        "Leverage generative AI for content creation and enhanced user experiences.",
+      link: "/services/gen-ai-integration-digital-products",
     },
     {
       title: "AI Chatbots & Virtual Assistants",
       icon: MessageCircle,
-      description: "Intelligent conversational AI solutions for customer engagement.",
-      link: "/services/ai-chatbots-virtual-assistants"
+      description:
+        "Intelligent conversational AI solutions for customer engagement.",
+      link: "/services/ai-chatbots-virtual-assistants",
     },
     {
       title: "AI Model Deployment & MLOps",
       icon: Settings,
       description: "End-to-end ML operations for scalable AI model deployment.",
-      link: "/services/ai-model-deployment-mlops"
-    }
+      link: "/services/ai-model-deployment-mlops",
+    },
   ];
 
   return (
@@ -367,7 +482,9 @@ const TabbedServiceDisplay = () => {
             AI Services & Solutions
           </h2>
           <p className="text-lg text-gray-300 max-w-4xl leading-relaxed">
-            Comprehensive artificial intelligence services designed to transform your business operations and drive innovation.
+            Comprehensive artificial intelligence services, including AI mobile
+            app development and AI‑powered features, designed to transform your
+            business operations and drive innovation.
           </p>
         </motion.div>
 
@@ -385,11 +502,11 @@ const TabbedServiceDisplay = () => {
                 key={index}
                 initial={{ opacity: 0, y: 20 }}
                 whileInView={{ opacity: 1, y: 0 }}
-                transition={{ duration: 0.5, delay: index * 0.1 }}
+                transition={{ duration: 0.5, delay: index * 0.01 }}
                 viewport={{ once: true }}
                 whileHover={{ y: -5 }}
                 className="group cursor-pointer"
-                onClick={() => navigateTo(service.link)}
+                onClick={() => navigate(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">
@@ -418,6 +535,7 @@ const TabbedServiceDisplay = () => {
 
 // Updated CTA Section with new design
 const InlineCTA = () => {
+  const navigate = useNavigate();
   return (
     <section className="py-20 bg-black">
       <div className="container mx-auto px-6 lg:px-8">
@@ -440,7 +558,9 @@ const InlineCTA = () => {
               <div className="bg-gradient-to-r from-[#E5195E]/20 to-purple-500/20 border border-[#E5195E]/30 rounded-full px-6 py-3">
                 <div className="flex items-center gap-2">
                   <Rocket className="w-4 h-4 text-[#E5195E]" />
-                  <span className="text-[#E5195E] text-sm font-medium">Ready to Launch?</span>
+                  <span className="text-[#E5195E] text-sm font-medium">
+                    Ready to Launch?
+                  </span>
                 </div>
               </div>
             </div>
@@ -453,14 +573,17 @@ const InlineCTA = () => {
 
             {/* Subtitle */}
             <p className="text-xl text-gray-300 leading-relaxed max-w-2xl">
-              Unlock the power of artificial intelligence to automate processes, gain insights, and drive competitive advantage.
+              Unlock the power of artificial intelligence to automate processes,
+              gain insights, and drive competitive advantage with AI‑powered
+              mobile and web solutions.
             </p>
 
             {/* CTA Button */}
             <div className="flex flex-col items-start gap-4">
               <ShimmerButton
                 className="text-xl px-10 py-5 rounded-2xl shadow-lg hover:shadow-xl bg-[#E5195E] hover:bg-[#E5195E]/90"
-                onClick={() => navigateTo('/contact/schedule-a-discovery-call')}
+                // onClick={() => navigate("/contact/schedule-a-discovery-call")}
+                onClick={() => navigate("/start-a-project")}
               >
                 <div className="inline-flex items-center gap-3">
                   <Bot className="w-6 h-6 flex-shrink-0" />
@@ -470,7 +593,8 @@ const InlineCTA = () => {
 
               {/* Small benefit text */}
               <p className="text-sm text-gray-400">
-                Strategy consultation • AI readiness assessment • Custom solution design
+                Strategy consultation • AI readiness assessment • Custom
+                solution design
               </p>
             </div>
           </motion.div>
@@ -489,7 +613,7 @@ const HireDevelopersSection = () => {
       skills: ["TensorFlow", "PyTorch", "Scikit-learn", "Keras"],
       iconBg: "bg-blue-500",
       iconColor: "text-white",
-      link: "/hire-talent/full-stack-developers"
+      link: "/hire-talent/full-stack-developers",
     },
     {
       title: "ML Engineers",
@@ -497,7 +621,7 @@ const HireDevelopersSection = () => {
       skills: ["Python", "R", "MLOps", "Data Pipeline"],
       iconBg: "bg-green-500",
       iconColor: "text-white",
-      link: "/hire-talent/full-stack-developers"
+      link: "/hire-talent/full-stack-developers",
     },
     {
       title: "Data Scientists",
@@ -505,7 +629,7 @@ const HireDevelopersSection = () => {
       skills: ["Statistics", "Analytics", "Visualization", "Research"],
       iconBg: "bg-purple-500",
       iconColor: "text-white",
-      link: "/hire-talent/full-stack-developers"
+      link: "/hire-talent/full-stack-developers",
     },
     {
       title: "AI Consultants",
@@ -513,8 +637,8 @@ const HireDevelopersSection = () => {
       skills: ["Strategy", "Implementation", "Training", "Support"],
       iconBg: "bg-orange-500",
       iconColor: "text-white",
-      link: "/hire-talent/full-stack-developers"
-    }
+      link: "/hire-talent/full-stack-developers",
+    },
   ];
 
   return (
@@ -532,7 +656,7 @@ const HireDevelopersSection = () => {
             <span className="text-[#E5195E]">AI Specialists</span>
           </h2>
           <p className="text-xl text-gray-300 max-w-4xl leading-relaxed">
-            Get access to expert AI professionals who build intelligent solutions that drive business transformation.
+            Get access to expert AI professionals and AI mobile application developers who build intelligent solutions that drive business transformation.
           </p>
         </motion.div>
 
@@ -550,7 +674,7 @@ const HireDevelopersSection = () => {
                 key={index}
                 initial={{ opacity: 0, y: 20 }}
                 whileInView={{ opacity: 1, y: 0 }}
-                transition={{ duration: 0.5, delay: index * 0.1 }}
+                transition={{ duration: 0.5, delay: index * 0.01 }}
                 viewport={{ once: true }}
                 whileHover={{ y: -8, scale: 1.02 }}
                 className="group cursor-pointer"
@@ -560,8 +684,12 @@ const HireDevelopersSection = () => {
                     {/* Header */}
                     <div className="p-8 pb-6">
                       <div className="flex items-start gap-4 mb-6">
-                        <div className={`w-12 h-12 ${specialist.iconBg} rounded-xl flex items-center justify-center backdrop-blur-sm`}>
-                          <IconComponent className={`w-6 h-6 ${specialist.iconColor}`} />
+                        <div
+                          className={`w-12 h-12 ${specialist.iconBg} rounded-xl flex items-center justify-center backdrop-blur-sm`}
+                        >
+                          <IconComponent
+                            className={`w-6 h-6 ${specialist.iconColor}`}
+                          />
                         </div>
                         <div className="flex-1">
                           <div className="text-xs text-muted-foreground mb-2 uppercase tracking-wider">
@@ -579,7 +707,11 @@ const HireDevelopersSection = () => {
                     <div className="px-8 pb-6 flex-1">
                       <div className="flex flex-wrap gap-2">
                         {specialist.skills.map((skill) => (
-                          <Badge key={skill} variant="secondary" className="text-xs bg-white/10 text-foreground">
+                          <Badge
+                            key={skill}
+                            variant="secondary"
+                            className="text-xs bg-white/10 text-foreground"
+                          >
                             {skill}
                           </Badge>
                         ))}
@@ -590,7 +722,7 @@ const HireDevelopersSection = () => {
                     <div className="p-8 pt-0 mt-auto space-y-3">
                       <ShimmerButton
                         className="w-full py-3 text-sm rounded-xl shadow-lg hover:shadow-xl"
-                        onClick={() => navigateTo(specialist.link)}
+                        // onClick={() => navigate(specialist.link)}
                       >
                         <div className="inline-flex items-center justify-center gap-2">
                           <UserPlus className="w-4 h-4 flex-shrink-0" />
@@ -613,30 +745,35 @@ const HireDevelopersSection = () => {
 const aiServicesFAQs = [
   {
     question: "What types of AI solutions can WDI develop?",
-    answer: "We develop a wide range of AI solutions including machine learning models, natural language processing systems, computer vision applications, predictive analytics, chatbots, and recommendation engines tailored to your business needs."
+    answer:
+      "We develop a wide range of AI solutions, including machine learning models, natural language processing systems, computer vision applications, predictive analytics, chatbots, and recommendation engines tailored to your business needs and AI mobile app development requirements.",
   },
   {
     question: "How do you ensure AI models are accurate and reliable?",
-    answer: "We follow rigorous testing methodologies, use cross-validation techniques, implement continuous monitoring, and employ best practices in data quality management to ensure our AI models deliver accurate and reliable results."
+    answer:
+      "We follow rigorous testing methodologies, use cross‑validation techniques, implement continuous monitoring, and employ best practices in data quality management to ensure our AI models deliver accurate and reliable results for your AI‑powered applications.",
   },
   {
     question: "Can you integrate AI into our existing software systems?",
-    answer: "Yes, we specialize in seamlessly integrating AI capabilities into existing systems through APIs, microservices architecture, and custom integration solutions that work with your current technology stack."
+    answer:
+      "Yes, we specialize in seamlessly integrating AI capabilities into existing systems through APIs, microservices architecture, and custom integration solutions that work with your current technology stack and support AI‑powered design.",
   },
   {
     question: "What is your approach to data privacy and AI ethics?",
-    answer: "We prioritize data privacy and ethical AI practices by implementing secure data handling, ensuring model transparency, addressing bias issues, and following industry standards and regulations like GDPR and AI governance frameworks."
+    answer:
+      "We prioritize data privacy and ethical AI practices by implementing secure data handling, ensuring model transparency, addressing bias issues, and following industry standards and regulations like GDPR and AI governance frameworks for responsible AI solutions.",
   },
   {
     question: "How long does it take to develop and deploy an AI solution?",
-    answer: "Development timelines vary based on complexity, but typically range from 3-6 months for custom AI solutions. We provide detailed project timelines during the planning phase and follow agile methodologies for faster delivery."
-  }
+    answer:
+      "Development timelines vary based on complexity, but typically range from 3–6 months for custom AI solutions. We provide detailed project timelines during the planning phase and follow agile methodologies for faster delivery of AI‑powered features.",
+  },
 ];
 
 export function ArtificialIntelligenceServices() {
   return (
     <div className="dark min-h-screen bg-background">
-      <Navigation />
+      {/* <Navigation /> */}
       <HeroWithCTA />
       <HorizontalTagScroller />
       <SideBySideContentWithIcons />
@@ -646,10 +783,10 @@ export function ArtificialIntelligenceServices() {
       <HireDevelopersSection />
       <FAQSection
         title="AI Services Questions"
-        subtitle="Get answers to common questions about our artificial intelligence services."
+        subtitle="Get answers to common questions about our artificial intelligence services and AI‑powered features."
         faqs={aiServicesFAQs}
       />
-      <Footer />
+      {/* <Footer /> */}
     </div>
   );
 }

pages/AutomationReshapingBusiness.tsx

@@ -7,8 +7,9 @@ import { Card, CardContent } from "../components/ui/card";
 import { Avatar, AvatarFallback, AvatarImage } from "../components/ui/avatar";
 import { Separator } from "../components/ui/separator";
 import { Calendar, Clock, User, ArrowRight, Share2, Linkedin, Twitter, ExternalLink, Tag } from "lucide-react";
-import { navigateTo } from "../App";
 import { ImageWithFallback } from "../components/figma/ImageWithFallback";
+import { useNavigate } from "react-router-dom";
+import hospitalAi from "../assets/aihospital.jpg"
 
 const articleData = {
   id: "automation-reshaping-business",
@@ -276,7 +277,8 @@ const articleData = {
       title: "The Future of AI in Healthcare: Transforming Patient Care Through Technology",
       excerpt: "Discover how artificial intelligence is revolutionizing healthcare delivery and patient outcomes.",
       readTime: "12 min read",
-      image: "https://images.unsplash.com/photo-1576091160399-112ba8d25d1f?w=400&h=250&fit=crop&auto=format",
+      // image: "https://images.unsplash.com/photo-1576091160399-112ba8d25d1f?w=400&h=250&fit=crop&auto=format",
+      image: hospitalAi,
       category: "Healthcare AI"
     }
   ]
@@ -305,9 +307,11 @@ export const AutomationReshapingBusiness = () => {
     }
   };
 
+  const navigate = useNavigate();
+
   return (
     <div className="dark min-h-screen bg-background">
-      <Navigation />
+      {/* <Navigation /> */}
 
       {/* Hero Section */}
       <section className="pt-24 pb-16 bg-background">
@@ -315,11 +319,11 @@ export const AutomationReshapingBusiness = () => {
           <div className="max-w-4xl mx-auto">
             {/* Breadcrumb */}
             <div className="flex items-center gap-2 text-sm text-muted-foreground mb-8">
-              <button onClick={() => navigateTo('/')} className="hover:text-white transition-colors">
+              <button onClick={() => navigate('/')} className="hover:text-white transition-colors">
                 Home
               </button>
               <span>/</span>
-              <button onClick={() => navigateTo('/resources/blog')} className="hover:text-white transition-colors">
+              <button onClick={() => navigate('/resources/blog')} className="hover:text-white transition-colors">
                 Blog
               </button>
               <span>/</span>
@@ -454,7 +458,7 @@ export const AutomationReshapingBusiness = () => {
                     </div>
 
                     {/* Author Bio */}
-                    <Card className="bg-card/50 border-white/10">
+                    {/* <Card className="bg-card/50 border-white/10">
                       <CardContent className="p-6">
                         <div className="flex items-start gap-4">
                           <Avatar className="w-16 h-16">
@@ -468,7 +472,7 @@ export const AutomationReshapingBusiness = () => {
                           </div>
                         </div>
                       </CardContent>
-                    </Card>
+                    </Card> */}
                   </div>
                 </CardContent>
               </Card>
@@ -486,7 +490,7 @@ export const AutomationReshapingBusiness = () => {
                       <div
                         key={article.id}
                         className="group cursor-pointer"
-                        onClick={() => navigateTo(`/articles/${article.id}`)}
+                        onClick={() => navigate(`/articles/${article.id}`)}
                       >
                         <div className="aspect-[16/10] overflow-hidden rounded-lg mb-3">
                           <ImageWithFallback
@@ -512,7 +516,7 @@ export const AutomationReshapingBusiness = () => {
                   <Button
                     variant="outline"
                     className="w-full border-white/20 text-white hover:bg-white/10"
-                    onClick={() => navigateTo('/resources/blog')}
+                    onClick={() => navigate('/resources/blog')}
                   >
                     View All Articles
                     <ArrowRight className="w-4 h-4 ml-2" />
@@ -530,7 +534,7 @@ export const AutomationReshapingBusiness = () => {
                   </p>
                   <Button
                     className="w-full bg-[#E5195E] hover:bg-[#E5195E]/90 text-white"
-                    onClick={() => navigateTo('/contact')}
+                    onClick={() => navigate('/contact')}
                   >
                     Get In Touch
                   </Button>
@@ -557,7 +561,7 @@ export const AutomationReshapingBusiness = () => {
                 <Button
                   size="lg"
                   className="bg-[#E5195E] hover:bg-[#E5195E]/90 text-white"
-                  onClick={() => navigateTo('/contact')}
+                  onClick={() => navigate('/contact')}
                 >
                   Start Your Automation Journey
                   <ArrowRight className="ml-2 w-4 h-4" />
@@ -566,7 +570,7 @@ export const AutomationReshapingBusiness = () => {
                   size="lg"
                   variant="outline"
                   className="border-white/20 text-white hover:bg-white/10"
-                  onClick={() => navigateTo('/resources/blog')}
+                  onClick={() => navigate('/resources/blog')}
                 >
                   Read More Articles
                 </Button>
@@ -576,7 +580,7 @@ export const AutomationReshapingBusiness = () => {
         </div>
       </section>
 
-      <Footer />
+      {/* <Footer /> */}
     </div>
   );
 };

pages/AwardsCertifications.tsx

@@ -110,7 +110,7 @@ export const AwardsCertifications = () => {
 
   return (
     <div className="dark min-h-screen bg-background">
-      <Navigation />
+      {/* <Navigation /> */}
       
       {/* Hero Section */}
       <section className="relative pt-24 pb-16 overflow-hidden">
@@ -285,7 +285,7 @@ export const AwardsCertifications = () => {
         </div>
       </section>
 
-      <Footer />
+      {/* <Footer /> */}
     </div>
   );
 };

pages/Blog.tsx

@@ -5,9 +5,24 @@ import { Button } from "../components/ui/button";
 import { Badge } from "../components/ui/badge";
 import { Card, CardContent } from "../components/ui/card";
 import { Input } from "../components/ui/input";
-import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "../components/ui/select";
-import { Search, Calendar, User, Tag, ArrowRight, BookOpen } from "lucide-react";
-import { navigateTo } from "../App";
+import hospitalAi from "../assets/aihospital.jpg"
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from "../components/ui/select";
+import {
+  Search,
+  Calendar,
+  User,
+  Tag,
+  ArrowRight,
+  BookOpen,
+} from "lucide-react";
+import { Helmet } from "react-helmet-async";
+import { useNavigate } from "react-router-dom";
 
 export const Blog = () => {
   const [searchTerm, setSearchTerm] = useState("");
@@ -21,7 +36,7 @@ export const Blog = () => {
     "Case Study",
     "Automation",
     "Tech Trends",
-    "How-to Guides"
+    "How-to Guides",
   ];
 
   const tags = [
@@ -33,133 +48,208 @@ export const Blog = () => {
     "System Architecture",
     "Business Automation",
     "Digital Transformation",
-    "Performance Optimization"
+    "Performance Optimization",
   ];
 
   const featuredPosts = [
     {
       id: "future-of-ai-healthcare",
-      title: "The Future of AI in Healthcare: Transforming Patient Care Through Technology",
-      excerpt: "Discover how artificial intelligence is revolutionizing healthcare delivery, from diagnostic accuracy to personalized treatment plans and administrative efficiency.",
-      image: "https://images.unsplash.com/photo-1576091160399-112ba8d25d1f?w=800&h=600&fit=crop&auto=format",
+      title:
+        "The Future of AI in Healthcare: Transforming Patient Care Through Technology",
+      excerpt:
+        "Discover how artificial intelligence is revolutionizing healthcare delivery, from diagnostic accuracy to personalized treatment plans and administrative efficiency.",
+      // image:
+      //   "https://images.unsplash.com/photo-1576091160399-112ba8d25d1f?w=800&h=600&fit=crop&auto=format",
+      image: hospitalAi,
       author: "Dr. Sarah Chen",
       date: "January 8, 2025",
       category: "Healthcare AI",
       tags: ["Artificial Intelligence", "Healthcare", "Digital Transformation"],
-      readTime: "12 min read"
+      readTime: "12 min read",
     },
     {
       id: "compliance-ready-systems-fintech",
       title: "Why Compliance-Ready Systems Are Crucial in Fintech Development",
-      excerpt: "Exploring the critical importance of building compliance into fintech systems from day one, ensuring regulatory adherence while maintaining innovation and user experience.",
-      image: "https://images.unsplash.com/photo-1551434678-e076c223a692?w=800&h=600&fit=crop&auto=format",
+      excerpt:
+        "Exploring the critical importance of building compliance into fintech systems from day one, ensuring regulatory adherence while maintaining innovation and user experience.",
+      image:
+        "https://images.unsplash.com/photo-1551434678-e076c223a692?w=800&h=600&fit=crop&auto=format",
       author: "Michael Rodriguez",
       date: "January 5, 2025",
       category: "Fintech",
       tags: ["Fintech", "Compliance", "Financial Services"],
-      readTime: "8 min read"
+      readTime: "8 min read",
     },
     {
       id: "legacy-system-scaling",
       title: "How WDI Scaled a Legacy System for 1 Million+ Users",
-      excerpt: "A detailed case study on modernizing and scaling legacy systems for massive user growth, overcoming technical debt while maintaining business continuity.",
-      image: "https://images.unsplash.com/photo-1558655146-9f40138edfeb?w=800&h=600&fit=crop&auto=format",
+      excerpt:
+        "A detailed case study on modernizing and scaling legacy systems for massive user growth, overcoming technical debt while maintaining business continuity.",
+      image:
+        "https://images.unsplash.com/photo-1558655146-9f40138edfeb?w=800&h=600&fit=crop&auto=format",
       author: "Alex Thompson",
       date: "December 28, 2024",
       category: "Case Study",
       tags: ["System Architecture", "Performance Optimization", "DevOps"],
-      readTime: "15 min read"
-    }
+      readTime: "15 min read",
+    },
   ];
 
   const blogPosts = [
     {
       id: "automation-reshaping-business",
       title: "5 Ways Automation is Reshaping Business Operations",
-      excerpt: "Discover how intelligent automation is transforming modern business processes and operations, driving efficiency and creating new opportunities for growth.",
-      image: "https://images.unsplash.com/photo-1485827404703-89b55fcc595e?w=600&h=400&fit=crop&auto=format",
+      excerpt:
+        "Discover how intelligent automation is transforming modern business processes and operations, driving efficiency and creating new opportunities for growth.",
+      image:
+        "https://images.unsplash.com/photo-1485827404703-89b55fcc595e?w=600&h=400&fit=crop&auto=format",
       author: "Rachel Kim",
       date: "January 3, 2025",
       category: "Automation",
       tags: ["Business Automation", "Digital Transformation"],
-      readTime: "10 min read"
+      readTime: "10 min read",
     },
     {
       id: 5,
       title: "Mobile-First Design: Creating Exceptional User Experiences",
-      excerpt: "Why mobile-first design is crucial for modern applications and how to implement it effectively.",
-      image: "https://images.unsplash.com/photo-1512941937669-90a1b58e7e9c?auto=format&fit=crop&w=600&q=80",
+      excerpt:
+        "Why mobile-first design is crucial for modern applications and how to implement it effectively.",
+      image:
+        "https://images.unsplash.com/photo-1512941937669-90a1b58e7e9c?auto=format&fit=crop&w=600&q=80",
       author: "Emma Johnson",
       date: "December 8, 2024",
       category: "Tech Trends",
       tags: ["Mobile", "UI/UX", "Design"],
-      readTime: "5 min read"
+      readTime: "5 min read",
     },
     {
       id: 6,
-      title: "Cybersecurity in the Age of Remote Work: Protecting Your Digital Assets",
-      excerpt: "Essential cybersecurity practices for protecting your business in an increasingly remote world.",
-      image: "https://images.unsplash.com/photo-1550751827-4bd374c3f58b?auto=format&fit=crop&w=600&q=80",
+      title:
+        "Cybersecurity in the Age of Remote Work: Protecting Your Digital Assets",
+      excerpt:
+        "Essential cybersecurity practices for protecting your business in an increasingly remote world.",
+      image:
+        "https://images.unsplash.com/photo-1550751827-4bd374c3f58b?auto=format&fit=crop&w=600&q=80",
       author: "James Wilson",
       date: "December 5, 2024",
       category: "Tech Trends",
       tags: ["Cybersecurity", "Remote Work"],
-      readTime: "7 min read"
+      readTime: "7 min read",
     },
     {
       id: 7,
-      title: "Complete Guide to Cloud Migration: Strategies, Challenges, and Solutions",
-      excerpt: "A comprehensive guide to successfully migrating your infrastructure to the cloud with minimal disruption.",
-      image: "https://images.unsplash.com/photo-1451187580459-43490279c0fa?auto=format&fit=crop&w=600&q=80",
+      title:
+        "Complete Guide to Cloud Migration: Strategies, Challenges, and Solutions",
+      excerpt:
+        "A comprehensive guide to successfully migrating your infrastructure to the cloud with minimal disruption.",
+      image:
+        "https://images.unsplash.com/photo-1451187580459-43490279c0fa?auto=format&fit=crop&w=600&q=80",
       author: "David Kumar",
       date: "November 30, 2024",
       category: "How-to Guides",
       tags: ["Cloud", "Digital Transformation"],
-      readTime: "10 min read"
+      readTime: "10 min read",
     },
     {
       id: 8,
-      title: "The Rise of Low-Code Development: Accelerating Digital Innovation",
-      excerpt: "How low-code platforms are democratizing software development and accelerating digital transformation.",
-      image: "https://images.unsplash.com/photo-1517077304055-6e89abbf09b0?auto=format&fit=crop&w=600&q=80",
+      title:
+        "The Rise of Low-Code Development: Accelerating Digital Innovation",
+      excerpt:
+        "How low-code platforms are democratizing software development and accelerating digital transformation.",
+      image:
+        "https://images.unsplash.com/photo-1517077304055-6e89abbf09b0?auto=format&fit=crop&w=600&q=80",
       author: "Lisa Thompson",
       date: "November 28, 2024",
       category: "Tech Trends",
       tags: ["Software Development", "Innovation"],
-      readTime: "6 min read"
-    }
+      readTime: "6 min read",
+    },
   ];
 
-  const filteredPosts = blogPosts.filter(post => {
-    const matchesSearch = post.title.toLowerCase().includes(searchTerm.toLowerCase()) ||
+  const filteredPosts = blogPosts.filter((post) => {
+    const matchesSearch =
+      post.title.toLowerCase().includes(searchTerm.toLowerCase()) ||
       post.excerpt.toLowerCase().includes(searchTerm.toLowerCase());
-    const matchesCategory = selectedCategory === "all" || post.category === selectedCategory;
-    const matchesTag = selectedTag === "all" || post.tags.some(tag => tag === selectedTag);
+    const matchesCategory =
+      selectedCategory === "all" || post.category === selectedCategory;
+    const matchesTag =
+      selectedTag === "all" || post.tags.some((tag) => tag === selectedTag);
 
     return matchesSearch && matchesCategory && matchesTag;
   });
+  const navigate = useNavigate();
 
   const handlePostClick = (post: any) => {
-    if (typeof post.id === 'string') {
+    if (typeof post.id === "string") {
       // Navigate to dedicated article page
-      navigateTo(`/articles/${post.id}`);
+      navigate(`/articles/${post.id}`);
     } else {
       // For placeholder posts, navigate to generic article detail
-      navigateTo('/articles/generic-article');
+      navigate("/articles/generic-article");
     }
   };
 
   return (
     <div className="dark min-h-screen bg-background">
-      <Navigation />
+      {/* <Navigation /> */}
 
       {/* Hero Section */}
       <section className="pt-24 pb-16 bg-background">
+        <Helmet>
+          {/* Page Title and Meta Description */}
+          <title>Blogs | Thought Leadership in Software Development</title>
+          <meta
+            name="description"
+            content="Read expert blogs from WDI on software development and digital transformation. Stay informed with insights, trends, and thought leadership content."
+          />
+
+          {/* Canonical Link */}
+          <link rel="canonical" href="https://www.wdipl.com/resources/blog" />
+
+          {/* Open Graph Tags (for Facebook, LinkedIn) */}
+          <meta property="og:title" content="Blogs | Thought Leadership in Software Development" />
+          <meta
+            property="og:description"
+            content="Read expert blogs from WDI on software development and digital transformation. Stay informed with insights, trends, and thought leadership content."
+          />
+          <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="Blogs | Thought Leadership in Software Development" />
+          <meta
+            name="twitter:description"
+            content="Read expert blogs from WDI on software development and digital transformation. Stay informed with insights, trends, and thought leadership content."
+          />
+          <meta name="twitter:image" content="https://www.wdipl.com/your-preview-image.jpg" />
+
+          {/* Social Profiles (using JSON-LD Schema) */}
+          <script type="application/ld+json">
+            {`
+                              {
+                                "@context": "https://schema.org",
+                                "@type": "Organization",
+                                "name": "WDI",
+                                "url": "https://www.wdipl.com",
+                                "sameAs": [
+                                  "https://www.facebook.com/wdideas",
+                                  "https://www.linkedin.com/in/website-developers-india/",
+                                  "https://www.instagram.com/wdipl/"
+                                ]
+                              }
+                            `}
+          </script>
+        </Helmet>
         <div className="container mx-auto px-6 lg:px-8">
           <div className="max-w-4xl mx-auto text-center">
             <div className="flex items-center justify-center gap-2 mb-6">
               <BookOpen className="w-6 h-6 text-[#E5195E]" />
-              <Badge variant="outline" className="border-[#E5195E]/20 text-[#E5195E]">
+              <Badge
+                variant="outline"
+                className="border-[#E5195E]/20 text-[#E5195E]"
+              >
                 WDI Blog
               </Badge>
             </div>
@@ -167,7 +257,7 @@ export const Blog = () => {
               WDI Blog: Insights, Innovation & Industry Trends
             </h1>
             <p className="text-lg text-muted-foreground mb-8 max-w-3xl mx-auto">
-              Welcome to the WDI Blog, your go-to source for the latest insights, expert opinions, and thought leadership in software development and digital transformation. We cover a range of topics from cutting-edge technologies to industry best practices, designed to inform, inspire, and empower your digital journey.
+              Welcome to the WDI Blog, your go-to source for the latest AI‑driven insights, expert opinions, and thought leadership in software development and digital transformation. We cover topics ranging from cutting‑edge AI technologies and cloud‑native development to industry best practices, designed to inform, inspire, and empower your digital journey.
             </p>
           </div>
         </div>
@@ -190,13 +280,22 @@ export const Blog = () => {
             </div>
 
             <div className="flex gap-4">
-              <Select value={selectedCategory} onValueChange={setSelectedCategory}>
+              <Select
+                value={selectedCategory}
+                onValueChange={setSelectedCategory}
+              >
                 <SelectTrigger className="w-48 bg-background/50 border-white/10 text-white">
-                  <SelectValue placeholder="Select Category" className="text-white" />
+                  <SelectValue
+                    placeholder="Select Category"
+                    className="text-white"
+                  />
                 </SelectTrigger>
                 <SelectContent>
                   {categories.map((category) => (
-                    <SelectItem key={category} value={category === "All Categories" ? "all" : category}>
+                    <SelectItem
+                      key={category}
+                      value={category === "All Categories" ? "all" : category}
+                    >
                       {category}
                     </SelectItem>
                   ))}
@@ -205,11 +304,17 @@ export const Blog = () => {
 
               <Select value={selectedTag} onValueChange={setSelectedTag}>
                 <SelectTrigger className="w-48 bg-background/50 border-white/10 text-white">
-                  <SelectValue placeholder="Select Tag" className="text-white" />
+                  <SelectValue
+                    placeholder="Select Tag"
+                    className="text-white"
+                  />
                 </SelectTrigger>
                 <SelectContent>
                   {tags.map((tag) => (
-                    <SelectItem key={tag} value={tag === "All Tags" ? "all" : tag}>
+                    <SelectItem
+                      key={tag}
+                      value={tag === "All Tags" ? "all" : tag}
+                    >
                       {tag}
                     </SelectItem>
                   ))}
@@ -223,7 +328,9 @@ export const Blog = () => {
       {/* Featured Posts */}
       <section className="py-16 bg-background">
         <div className="container mx-auto px-6 lg:px-8">
-          <h2 className="text-3xl font-bold text-white mb-12 text-center">Featured Articles</h2>
+          <h2 className="text-3xl font-bold text-white mb-12 text-center">
+            Featured Blogs
+          </h2>
 
           <div className="grid lg:grid-cols-3 gap-8">
             {featuredPosts.map((post) => (
@@ -241,10 +348,15 @@ export const Blog = () => {
                 </div>
                 <CardContent className="p-6">
                   <div className="flex items-center gap-2 mb-3">
-                    <Badge variant="secondary" className="bg-[#E5195E]/20 text-[#E5195E] border-none">
+                    <Badge
+                      variant="secondary"
+                      className="bg-[#E5195E]/20 text-[#E5195E] border-none"
+                    >
                       {post.category}
                     </Badge>
-                    <span className="text-sm text-muted-foreground">{post.readTime}</span>
+                    <span className="text-sm text-muted-foreground">
+                      {post.readTime}
+                    </span>
                   </div>
 
                   <h3 className="text-xl font-semibold text-white mb-3 group-hover:text-[#E5195E] transition-colors duration-300 line-clamp-2">
@@ -257,7 +369,11 @@ export const Blog = () => {
 
                   <div className="flex flex-wrap gap-2 mb-4">
                     {post.tags.map((tag) => (
-                      <Badge key={tag} variant="outline" className="border-white/20 text-white/70 text-xs">
+                      <Badge
+                        key={tag}
+                        variant="outline"
+                        className="border-white/20 text-white/70 text-xs"
+                      >
                         {tag}
                       </Badge>
                     ))}
@@ -266,11 +382,15 @@ export const Blog = () => {
                   <div className="flex items-center justify-between pt-4 border-t border-white/10">
                     <div className="flex items-center gap-2">
                       <User className="w-4 h-4 text-muted-foreground" />
-                      <span className="text-sm text-muted-foreground">{post.author}</span>
+                      <span className="text-sm text-muted-foreground">
+                        {post.author}
+                      </span>
                     </div>
                     <div className="flex items-center gap-2">
                       <Calendar className="w-4 h-4 text-muted-foreground" />
-                      <span className="text-sm text-muted-foreground">{post.date}</span>
+                      <span className="text-sm text-muted-foreground">
+                        {post.date}
+                      </span>
                     </div>
                   </div>
                 </CardContent>
@@ -284,9 +404,10 @@ export const Blog = () => {
       <section className="py-16 bg-card/50">
         <div className="container mx-auto px-6 lg:px-8">
           <div className="flex items-center justify-between mb-12">
-            <h2 className="text-3xl font-bold text-white">Latest Articles</h2>
+            <h2 className="text-3xl font-bold text-white">Latest Blogs</h2>
             <div className="text-sm text-muted-foreground">
-              {filteredPosts.length} article{filteredPosts.length !== 1 ? 's' : ''} found
+              {filteredPosts.length} article
+              {filteredPosts.length !== 1 ? "s" : ""} found
             </div>
           </div>
 
@@ -306,10 +427,15 @@ export const Blog = () => {
                 </div>
                 <CardContent className="p-6">
                   <div className="flex items-center gap-2 mb-3">
-                    <Badge variant="secondary" className="bg-[#E5195E]/20 text-[#E5195E] border-none">
+                    <Badge
+                      variant="secondary"
+                      className="bg-[#E5195E]/20 text-[#E5195E] border-none"
+                    >
                       {post.category}
                     </Badge>
-                    <span className="text-sm text-muted-foreground">{post.readTime}</span>
+                    <span className="text-sm text-muted-foreground">
+                      {post.readTime}
+                    </span>
                   </div>
 
                   <h3 className="text-lg font-semibold text-white mb-3 group-hover:text-[#E5195E] transition-colors duration-300 line-clamp-2">
@@ -322,7 +448,11 @@ export const Blog = () => {
 
                   <div className="flex flex-wrap gap-2 mb-4">
                     {post.tags.map((tag) => (
-                      <Badge key={tag} variant="outline" className="border-white/20 text-white/70 text-xs">
+                      <Badge
+                        key={tag}
+                        variant="outline"
+                        className="border-white/20 text-white/70 text-xs"
+                      >
                         {tag}
                       </Badge>
                     ))}
@@ -331,11 +461,15 @@ export const Blog = () => {
                   <div className="flex items-center justify-between pt-4 border-t border-white/10">
                     <div className="flex items-center gap-2">
                       <User className="w-4 h-4 text-muted-foreground" />
-                      <span className="text-sm text-muted-foreground">{post.author}</span>
+                      <span className="text-sm text-muted-foreground">
+                        {post.author}
+                      </span>
                     </div>
                     <div className="flex items-center gap-2">
                       <Calendar className="w-4 h-4 text-muted-foreground" />
-                      <span className="text-sm text-muted-foreground">{post.date}</span>
+                      <span className="text-sm text-muted-foreground">
+                        {post.date}
+                      </span>
                     </div>
                   </div>
                 </CardContent>
@@ -345,7 +479,9 @@ export const Blog = () => {
 
           {filteredPosts.length === 0 && (
             <div className="text-center py-12">
-              <p className="text-muted-foreground">No articles found matching your criteria.</p>
+              <p className="text-muted-foreground">
+                No articles found matching your criteria.
+              </p>
             </div>
           )}
         </div>
@@ -355,9 +491,12 @@ export const Blog = () => {
       <section className="py-16 bg-background">
         <div className="container mx-auto px-6 lg:px-8">
           <div className="max-w-2xl mx-auto text-center">
-            <h2 className="text-3xl font-bold text-white mb-4">Never Miss an Update</h2>
+            <h2 className="text-3xl font-bold text-white mb-4">
+              Never Miss an Update
+            </h2>
             <p className="text-muted-foreground mb-8">
-              Subscribe to our newsletter for the latest blog posts and insights directly to your inbox.
+              Subscribe to our newsletter for the latest blog posts and insights
+              directly to your inbox.
             </p>
 
             <div className="flex flex-col sm:flex-row gap-4 max-w-md mx-auto">
@@ -382,13 +521,13 @@ export const Blog = () => {
               Ready to Transform Your Business?
             </h2>
             <p className="text-lg text-muted-foreground mb-8">
-              Get insights from our experts and discover how we can help accelerate your digital transformation.
+              Get AI‑driven insights from our experts and discover how we can help accelerate your digital transformation.
             </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('/resources/blog')}
+                onClick={() => navigate("/resources/blog")}
               >
                 Explore All Articles
                 <ArrowRight className="ml-2 w-4 h-4" />
@@ -397,7 +536,8 @@ export const Blog = () => {
                 size="lg"
                 variant="outline"
                 className="border-white/20 text-white hover:bg-white/10"
-                onClick={() => navigateTo('/contact')}
+                // onClick={() => navigate('/contact')}
+                onClick={() => navigate("/start-a-project")}
               >
                 Contact Our Experts
               </Button>
@@ -406,7 +546,7 @@ export const Blog = () => {
         </div>
       </section>
 
-      <Footer />
+      {/* <Footer /> */}
     </div>
   );
 };

pages/BuildingYourAPIStack.tsx

@@ -7,8 +7,8 @@ import { Card, CardContent } from "../components/ui/card";
 import { Avatar, AvatarFallback, AvatarImage } from "../components/ui/avatar";
 import { Separator } from "../components/ui/separator";
 import { Calendar, Clock, User, ArrowRight, Share2, Linkedin, Twitter, ExternalLink, Tag } from "lucide-react";
-import { navigateTo } from "../App";
 import { ImageWithFallback } from "../components/figma/ImageWithFallback";
+import { useNavigate } from "react-router-dom";
 
 const articleData = {
   id: "building-your-api-stack",
@@ -208,9 +208,11 @@ export const BuildingYourAPIStack = () => {
     }
   };
 
+  const navigate = useNavigate();
+
   return (
     <div className="dark min-h-screen bg-background">
-      <Navigation />
+      {/* <Navigation /> */}
       
       {/* Hero Section */}
       <section className="pt-24 pb-16 bg-background">
@@ -218,11 +220,11 @@ export const BuildingYourAPIStack = () => {
           <div className="max-w-4xl mx-auto">
             {/* Breadcrumb */}
             <div className="flex items-center gap-2 text-sm text-muted-foreground mb-8">
-              <button onClick={() => navigateTo('/')} className="hover:text-white transition-colors">
+              <button onClick={() => navigate('/')} className="hover:text-white transition-colors">
                 Home
               </button>
               <span>/</span>
-              <button onClick={() => navigateTo('/resources/blog')} className="hover:text-white transition-colors">
+              <button onClick={() => navigate('/resources/blog')} className="hover:text-white transition-colors">
                 Insights
               </button>
               <span>/</span>
@@ -357,7 +359,7 @@ export const BuildingYourAPIStack = () => {
                     </div>
 
                     {/* Author Bio */}
-                    <Card className="bg-card/50 border-white/10">
+                    {/* <Card className="bg-card/50 border-white/10">
                       <CardContent className="p-6">
                         <div className="flex items-start gap-4">
                           <Avatar className="w-16 h-16">
@@ -371,7 +373,7 @@ export const BuildingYourAPIStack = () => {
                           </div>
                         </div>
                       </CardContent>
-                    </Card>
+                    </Card> */}
                   </div>
                 </CardContent>
               </Card>
@@ -389,7 +391,7 @@ export const BuildingYourAPIStack = () => {
                       <div 
                         key={article.id} 
                         className="group cursor-pointer"
-                        onClick={() => navigateTo(`/insights/${article.id}`)}
+                        onClick={() => navigate(`/insights/${article.id}`)}
                       >
                         <div className="aspect-[16/10] overflow-hidden rounded-lg mb-3">
                           <ImageWithFallback
@@ -415,7 +417,7 @@ export const BuildingYourAPIStack = () => {
                   <Button 
                     variant="outline" 
                     className="w-full border-white/20 text-white hover:bg-white/10"
-                    onClick={() => navigateTo('/resources/blog')}
+                    onClick={() => navigate('/resources/blog')}
                   >
                     View All Insights
                     <ArrowRight className="w-4 h-4 ml-2" />
@@ -433,7 +435,7 @@ export const BuildingYourAPIStack = () => {
                   </p>
                   <Button 
                     className="w-full bg-[#E5195E] hover:bg-[#E5195E]/90 text-white"
-                    onClick={() => navigateTo('/contact')}
+                    onClick={() => navigate('/contact')}
                   >
                     Get In Touch
                   </Button>
@@ -460,7 +462,7 @@ export const BuildingYourAPIStack = () => {
                 <Button 
                   size="lg" 
                   className="bg-[#E5195E] hover:bg-[#E5195E]/90 text-white"
-                  onClick={() => navigateTo('/contact')}
+                  onClick={() => navigate('/contact')}
                 >
                   Start Your Project
                   <ArrowRight className="ml-2 w-4 h-4" />
@@ -469,7 +471,7 @@ export const BuildingYourAPIStack = () => {
                   size="lg" 
                   variant="outline" 
                   className="border-white/20 text-white hover:bg-white/10"
-                  onClick={() => navigateTo('/resources/blog')}
+                  onClick={() => navigate('/resources/blog')}
                 >
                   Read More Insights
                 </Button>
@@ -479,7 +481,7 @@ export const BuildingYourAPIStack = () => {
         </div>
       </section>
 
-      <Footer />
+      {/* <Footer /> */}
     </div>
   );
 };

pages/BusinessProcessAutomation.tsx

@@ -26,21 +26,91 @@ import {
   Upload,
   Users,
   X,
-  Zap
+  Zap,
 } from "lucide-react";
 import { ImageWithFallback } from "../components/figma/ImageWithFallback";
 import { Footer } from "../components/Footer";
 import { Navigation } from "../components/Navigation";
-import { Accordion, AccordionContent, AccordionItem, AccordionTrigger } from "../components/ui/accordion";
+import {
+  Accordion,
+  AccordionContent,
+  AccordionItem,
+  AccordionTrigger,
+} from "../components/ui/accordion";
 import { Badge } from "../components/ui/badge";
 import { Button } from "../components/ui/button";
 import { Card, CardContent } from "../components/ui/card";
 import { ShimmerButton } from "../components/ui/shimmer-button";
+import { useNavigate } from "react-router-dom";
+import { Helmet } from "react-helmet-async";
 
 // Business Process Automation Hero Section
 const BusinessProcessAutomationHero = () => {
+  const navigate = useNavigate();
   return (
     <section className="relative py-20 overflow-hidden bg-black">
+      <Helmet>
+        {/* Page Title and Meta Description */}
+        <title>Business Process Automation Services by WDI</title>
+        <meta
+          name="description"
+          content="WDI's business process automation streamlines workflows, reduces manual tasks, and drives operational excellence with AI-powered solutions for growth."
+        />
+
+        {/* Canonical Link */}
+        <link
+          rel="canonical"
+          href="https://www.wdipl.com/solutions/business-process-automation"
+        />
+
+        {/* Open Graph Tags (for Facebook, LinkedIn) */}
+        <meta
+          property="og:title"
+          content="Business Process Automation Services by WDI"
+        />
+        <meta
+          property="og:description"
+          content="WDI's business process automation streamlines workflows, reduces manual tasks, and drives operational excellence with AI-powered solutions for growth."
+        />
+        <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="Business Process Automation Services by WDI"
+        />
+        <meta
+          name="twitter:description"
+          content="WDI's business process automation streamlines workflows, reduces manual tasks, and drives operational excellence with AI-powered solutions for growth."
+        />
+        <meta
+          name="twitter:image"
+          content="https://www.wdipl.com/your-preview-image.jpg"
+        />
+
+        {/* Social Profiles (using JSON-LD Schema) */}
+        <script type="application/ld+json">
+          {`
+                              {
+                                "@context": "https://schema.org",
+                                "@type": "Organization",
+                                "name": "WDI",
+                                "url": "https://www.wdipl.com",
+                                "sameAs": [
+                                  "https://www.facebook.com/wdideas",
+                                  "https://www.linkedin.com/in/website-developers-india/",
+                                  "https://www.instagram.com/wdipl/"
+                                ]
+                              }
+                            `}
+        </script>
+      </Helmet>
       <div className="container mx-auto px-6 lg:px-8">
         <div className="grid lg:grid-cols-2 gap-16 items-center min-h-[90vh]">
           <motion.div
@@ -55,7 +125,9 @@ const BusinessProcessAutomationHero = () => {
               animate={{ opacity: 1, y: 0 }}
               transition={{ duration: 0.6 }}
             >
-              <span className="text-white/70 text-sm font-medium">Solutions</span>
+              <span className="text-white/70 text-sm font-medium">
+                Solutions
+              </span>
             </motion.div>
 
             {/* Main Heading */}
@@ -65,7 +137,10 @@ const BusinessProcessAutomationHero = () => {
               </h1>
 
               <p className="text-lg text-gray-300 leading-relaxed max-w-lg">
-                Streamline your operations, reduce manual errors, and boost productivity by automating key business processes with intelligent solutions.
+                Streamline your operations, reduce manual errors, and boost
+                productivity by automating key business processes with
+                intelligent, scalable solutions that integrate seamlessly into
+                your digital product development ecosystem.
               </p>
             </div>
 
@@ -76,7 +151,10 @@ const BusinessProcessAutomationHero = () => {
               transition={{ duration: 0.8, delay: 0.3 }}
               className="flex flex-col sm:flex-row gap-4"
             >
-              <ShimmerButton className="text-lg px-8 py-4">
+              <ShimmerButton
+                className="text-lg px-8 py-4"
+                onClick={() => navigate("/start-a-project")}
+              >
                 <div className="inline-flex items-center gap-2">
                   <MessageSquare className="w-5 h-5 flex-shrink-0" />
                   <span>Get a Free Consultation</span>
@@ -89,7 +167,7 @@ const BusinessProcessAutomationHero = () => {
               >
                 <div className="inline-flex items-center gap-2">
                   <Lightbulb className="w-5 h-5 flex-shrink-0" />
-                  <span>Discover Our Automation Solutions</span>
+                  <span>Discover Automation Solutions</span>
                 </div>
               </Button>
             </motion.div>
@@ -126,13 +204,21 @@ const BusinessProcessAutomationHero = () => {
                       transition={{ duration: 0.8, delay: 1.0 }}
                       className="text-center mb-6"
                     >
-                      <h3 className="text-xl font-semibold text-white mb-2">Automated Workflow</h3>
+                      <h3 className="text-xl font-semibold text-white mb-2">
+                        Automated Workflow
+                      </h3>
                       <div className="flex items-center justify-center gap-4">
-                        <Badge variant="secondary" className="bg-blue-500/20 text-blue-300 border-blue-500/30 text-xs">
+                        <Badge
+                          variant="secondary"
+                          className="bg-blue-500/20 text-blue-300 border-blue-500/30 text-xs"
+                        >
                           <Cog className="w-3 h-3 mr-1" />
                           RPA Active
                         </Badge>
-                        <Badge variant="secondary" className="bg-green-500/20 text-green-300 border-green-500/30 text-xs">
+                        <Badge
+                          variant="secondary"
+                          className="bg-green-500/20 text-green-300 border-green-500/30 text-xs"
+                        >
                           <Bot className="w-3 h-3 mr-1" />
                           AI Enabled
                         </Badge>
@@ -149,10 +235,30 @@ const BusinessProcessAutomationHero = () => {
                       {/* Workflow Steps */}
                       <div className="space-y-4">
                         {[
-                          { step: "Input", icon: Download, status: "complete", delay: 1.4 },
-                          { step: "Process", icon: Cog, status: "active", delay: 1.6 },
-                          { step: "Validate", icon: Shield, status: "pending", delay: 1.8 },
-                          { step: "Output", icon: Upload, status: "pending", delay: 2.0 }
+                          {
+                            step: "Input",
+                            icon: Download,
+                            status: "complete",
+                            delay: 1.4,
+                          },
+                          {
+                            step: "Process",
+                            icon: Cog,
+                            status: "active",
+                            delay: 1.6,
+                          },
+                          {
+                            step: "Validate",
+                            icon: Shield,
+                            status: "pending",
+                            delay: 1.8,
+                          },
+                          {
+                            step: "Output",
+                            icon: Upload,
+                            status: "pending",
+                            delay: 2.0,
+                          },
                         ].map((item, i) => (
                           <motion.div
                             key={i}
@@ -161,23 +267,30 @@ const BusinessProcessAutomationHero = () => {
                             transition={{ duration: 0.5, delay: item.delay }}
                             className="flex items-center gap-4"
                           >
-                            <div className={`w-10 h-10 rounded-full flex items-center justify-center border-2 ${
-                              item.status === 'complete' 
-                                ? 'bg-green-500/20 border-green-500/30' 
-                                : item.status === 'active'
-                                ? 'bg-blue-500/20 border-blue-500/30'
-                                : 'bg-gray-500/20 border-gray-500/30'
-                            }`}>
-                              <item.icon className={`w-5 h-5 ${
-                                item.status === 'complete' 
-                                  ? 'text-green-400' 
-                                  : item.status === 'active'
-                                  ? 'text-blue-400'
-                                  : 'text-gray-400'
-                              }`} />
-                              {item.status === 'active' && (
+                            <div
+                              className={`w-10 h-10 rounded-full flex items-center justify-center border-2 ${
+                                item.status === "complete"
+                                  ? "bg-green-500/20 border-green-500/30"
+                                  : item.status === "active"
+                                    ? "bg-blue-500/20 border-blue-500/30"
+                                    : "bg-gray-500/20 border-gray-500/30"
+                              }`}
+                            >
+                              <item.icon
+                                className={`w-5 h-5 ${
+                                  item.status === "complete"
+                                    ? "text-green-400"
+                                    : item.status === "active"
+                                      ? "text-blue-400"
+                                      : "text-gray-400"
+                                }`}
+                              />
+                              {item.status === "active" && (
                                 <motion.div
-                                  animate={{ scale: [1, 1.2, 1], opacity: [0.5, 1, 0.5] }}
+                                  animate={{
+                                    scale: [1, 1.2, 1],
+                                    opacity: [0.5, 1, 0.5],
+                                  }}
                                   transition={{ duration: 2, repeat: Infinity }}
                                   className="absolute -inset-1 bg-blue-400/20 rounded-full"
                                 ></motion.div>
@@ -186,44 +299,55 @@ const BusinessProcessAutomationHero = () => {
 
                             <div className="flex-1">
                               <div className="flex items-center justify-between">
-                                <span className={`text-sm font-medium ${
-                                  item.status === 'complete' 
-                                    ? 'text-green-300' 
-                                    : item.status === 'active'
-                                    ? 'text-blue-300'
-                                    : 'text-gray-400'
-                                }`}>
+                                <span
+                                  className={`text-sm font-medium ${
+                                    item.status === "complete"
+                                      ? "text-green-300"
+                                      : item.status === "active"
+                                        ? "text-blue-300"
+                                        : "text-gray-400"
+                                  }`}
+                                >
                                   {item.step}
                                 </span>
-                                {item.status === 'complete' && (
+                                {item.status === "complete" && (
                                   <CheckCircle className="w-4 h-4 text-green-400" />
                                 )}
-                                {item.status === 'active' && (
+                                {item.status === "active" && (
                                   <motion.div
                                     animate={{ rotate: 360 }}
-                                    transition={{ duration: 2, repeat: Infinity, ease: "linear" }}
+                                    transition={{
+                                      duration: 2,
+                                      repeat: Infinity,
+                                      ease: "linear",
+                                    }}
                                   >
                                     <Loader className="w-4 h-4 text-blue-400" />
                                   </motion.div>
                                 )}
                               </div>
 
-                              <div className={`w-full h-1 rounded-full mt-2 ${
-                                item.status === 'complete' 
-                                  ? 'bg-green-500/30' 
-                                  : item.status === 'active'
-                                  ? 'bg-blue-500/30'
-                                  : 'bg-gray-500/30'
-                              }`}>
-                                {item.status === 'active' && (
+                              <div
+                                className={`w-full h-1 rounded-full mt-2 ${
+                                  item.status === "complete"
+                                    ? "bg-green-500/30"
+                                    : item.status === "active"
+                                      ? "bg-blue-500/30"
+                                      : "bg-gray-500/30"
+                                }`}
+                              >
+                                {item.status === "active" && (
                                   <motion.div
                                     initial={{ width: 0 }}
-                                    animate={{ width: '75%' }}
-                                    transition={{ duration: 3, repeat: Infinity }}
+                                    animate={{ width: "75%" }}
+                                    transition={{
+                                      duration: 3,
+                                      repeat: Infinity,
+                                    }}
                                     className="h-full bg-blue-400 rounded-full"
                                   ></motion.div>
                                 )}
-                                {item.status === 'complete' && (
+                                {item.status === "complete" && (
                                   <div className="h-full w-full bg-green-400 rounded-full"></div>
                                 )}
                               </div>
@@ -248,9 +372,14 @@ const BusinessProcessAutomationHero = () => {
                     <div className="flex items-center justify-between mb-3">
                       <div className="flex items-center gap-2">
                         <BarChart3 className="w-4 h-4 text-purple-400" />
-                        <span className="text-purple-400 text-xs font-mono">Automation Metrics</span>
+                        <span className="text-purple-400 text-xs font-mono">
+                          Automation Metrics
+                        </span>
                       </div>
-                      <Badge variant="secondary" className="bg-green-500/20 text-green-300 border-green-500/30 text-xs">
+                      <Badge
+                        variant="secondary"
+                        className="bg-green-500/20 text-green-300 border-green-500/30 text-xs"
+                      >
                         Optimized
                       </Badge>
                     </div>
@@ -259,41 +388,53 @@ const BusinessProcessAutomationHero = () => {
                     <div className="space-y-2">
                       <motion.div
                         initial={{ opacity: 0, width: 0 }}
-                        animate={{ opacity: 1, width: '92%' }}
+                        animate={{ opacity: 1, width: "92%" }}
                         transition={{ duration: 1, delay: 2.4 }}
                         className="flex items-center justify-between"
                       >
                         <div className="flex items-center gap-2">
                           <div className="w-2 h-2 bg-green-400 rounded-full"></div>
-                          <span className="text-green-300 text-xs">Efficiency</span>
+                          <span className="text-green-300 text-xs">
+                            Efficiency
+                          </span>
                         </div>
-                        <span className="text-green-300 text-xs font-mono">92%</span>
+                        <span className="text-green-300 text-xs font-mono">
+                          92%
+                        </span>
                       </motion.div>
 
                       <motion.div
                         initial={{ opacity: 0, width: 0 }}
-                        animate={{ opacity: 1, width: '98%' }}
+                        animate={{ opacity: 1, width: "98%" }}
                         transition={{ duration: 1, delay: 2.6 }}
                         className="flex items-center justify-between"
                       >
                         <div className="flex items-center gap-2">
                           <div className="w-2 h-2 bg-blue-400 rounded-full"></div>
-                          <span className="text-blue-300 text-xs">Accuracy</span>
+                          <span className="text-blue-300 text-xs">
+                            Accuracy
+                          </span>
                         </div>
-                        <span className="text-blue-300 text-xs font-mono">98%</span>
+                        <span className="text-blue-300 text-xs font-mono">
+                          98%
+                        </span>
                       </motion.div>
 
                       <motion.div
                         initial={{ opacity: 0, width: 0 }}
-                        animate={{ opacity: 1, width: '87%' }}
+                        animate={{ opacity: 1, width: "87%" }}
                         transition={{ duration: 1, delay: 2.8 }}
                         className="flex items-center justify-between"
                       >
                         <div className="flex items-center gap-2">
                           <div className="w-2 h-2 bg-purple-400 rounded-full"></div>
-                          <span className="text-purple-300 text-xs">Cost Reduction</span>
+                          <span className="text-purple-300 text-xs">
+                            Cost Reduction
+                          </span>
                         </div>
-                        <span className="text-purple-300 text-xs font-mono">87%</span>
+                        <span className="text-purple-300 text-xs font-mono">
+                          87%
+                        </span>
                       </motion.div>
                     </div>
                   </motion.div>
@@ -306,7 +447,9 @@ const BusinessProcessAutomationHero = () => {
                     className="grid grid-cols-2 gap-3"
                   >
                     <div className="p-3 bg-gradient-to-br from-green-500/20 to-emerald-500/20 rounded-lg border border-green-500/30">
-                      <div className="text-green-400 text-lg font-bold">70%</div>
+                      <div className="text-green-400 text-lg font-bold">
+                        70%
+                      </div>
                       <div className="text-white text-xs">Time Saved</div>
                     </div>
                     <div className="p-3 bg-gradient-to-br from-blue-500/20 to-cyan-500/20 rounded-lg border border-blue-500/30">
@@ -381,15 +524,24 @@ const BusinessProcessAutomationHero = () => {
                 transition={{ duration: 0.8, delay: 3.8 }}
                 className="flex justify-center gap-4 flex-wrap mt-8"
               >
-                <Badge variant="secondary" className="bg-blue-500/20 text-blue-300 border-blue-500/30">
+                <Badge
+                  variant="secondary"
+                  className="bg-blue-500/20 text-blue-300 border-blue-500/30"
+                >
                   <Cog className="w-3 h-3 mr-1" />
                   Automated
                 </Badge>
-                <Badge variant="secondary" className="bg-green-500/20 text-green-300 border-green-500/30">
+                <Badge
+                  variant="secondary"
+                  className="bg-green-500/20 text-green-300 border-green-500/30"
+                >
                   <Bot className="w-3 h-3 mr-1" />
                   Intelligent
                 </Badge>
-                <Badge variant="secondary" className="bg-purple-500/20 text-purple-300 border-purple-500/30">
+                <Badge
+                  variant="secondary"
+                  className="bg-purple-500/20 text-purple-300 border-purple-500/30"
+                >
                   <TrendingUp className="w-3 h-3 mr-1" />
                   Efficient
                 </Badge>
@@ -434,10 +586,16 @@ const BusinessProcessAutomationChallenge = () => {
                     <div className="w-12 h-12 bg-red-500/20 rounded-xl flex items-center justify-center">
                       <AlertTriangle className="w-6 h-6 text-red-400" />
                     </div>
-                    <h3 className="text-2xl font-semibold text-foreground">The Problem</h3>
+                    <h3 className="text-2xl font-semibold text-foreground">
+                      The Problem
+                    </h3>
                   </div>
                   <div className="space-y-4 text-muted-foreground">
-                    <p>Manual, repetitive tasks often lead to human errors, slow down operations, increase costs, and prevent employees from focusing on higher-value activities.</p>
+                    <p>
+                      Manual, repetitive tasks often lead to human errors, slow
+                      down operations, increase costs, and prevent employees
+                      from focusing on higher-value activities.
+                    </p>
                     <ul className="space-y-2">
                       <li className="flex items-start gap-2">
                         <X className="w-4 h-4 text-red-400 mt-1 flex-shrink-0" />
@@ -474,10 +632,18 @@ const BusinessProcessAutomationChallenge = () => {
                     <div className="w-12 h-12 bg-green-500/20 rounded-xl flex items-center justify-center">
                       <CheckCircle className="w-6 h-6 text-green-400" />
                     </div>
-                    <h3 className="text-2xl font-semibold text-foreground">Our Solution</h3>
+                    <h3 className="text-2xl font-semibold text-foreground">
+                      Our Solution
+                    </h3>
                   </div>
                   <div className="space-y-4 text-muted-foreground">
-                    <p>WDI helps businesses identify, analyze, and automate their critical processes. We leverage advanced technologies like RPA, AI, and custom software to create intelligent automation solutions that drive efficiency, accuracy, and significant cost savings.</p>
+                    <p>
+                      WDI helps businesses identify, analyze, and automate their
+                      critical processes. We leverage advanced technologies like
+                      RPA, AI, and custom software to create intelligent
+                      automation solutions that drive efficiency, accuracy, and
+                      significant cost savings.
+                    </p>
                     <ul className="space-y-2">
                       <li className="flex items-start gap-2">
                         <CheckCircle className="w-4 h-4 text-green-400 mt-1 flex-shrink-0" />
@@ -513,38 +679,41 @@ const BusinessProcessAutomationIncludes = () => {
     {
       icon: Search,
       title: "Process Discovery & Analysis",
-      description: "Identifying bottlenecks and opportunities for automation."
+      description: "Identifying bottlenecks and opportunities for automation.",
     },
     {
       icon: Target,
       title: "Automation Strategy & Roadmapping",
-      description: "Defining the scope, technology, and implementation plan."
+      description: "Defining the scope, technology, and implementation plan.",
     },
     {
       icon: Bot,
       title: "RPA Implementation",
-      description: "Deploying Robotic Process Automation for repetitive tasks."
+      description: "Deploying Robotic Process Automation for repetitive tasks.",
     },
     {
       icon: Code,
       title: "Custom Workflow Development",
-      description: "Building bespoke software to automate complex, unique processes."
+      description:
+        "Building bespoke software to automate complex, unique processes.",
     },
     {
       icon: Brain,
       title: "AI/ML Integration",
-      description: "Incorporating intelligence for decision-making and data processing."
+      description:
+        "Incorporating intelligence for decision-making and data processing.",
     },
     {
       icon: Network,
       title: "System Integration",
-      description: "Connecting disparate systems for seamless data flow."
+      description: "Connecting disparate systems for seamless data flow.",
     },
     {
       icon: BarChart3,
       title: "Monitoring & Optimization",
-      description: "Ensuring automated processes run smoothly and continuously improving them."
-    }
+      description:
+        "Ensuring automated processes run smoothly and continuously improving them.",
+    },
   ];
 
   return (
@@ -560,6 +729,11 @@ const BusinessProcessAutomationIncludes = () => {
           <h2 className="text-4xl lg:text-5xl font-semibold text-white mb-6">
             Our Business Process Automation Services
           </h2>
+          <p className="mt-4 text-gray-400 max-w-2xl mx-auto">
+            End‑to‑end automation that streamlines workflows, cuts manual
+            errors, and accelerates digital product development and daily
+            operations.
+          </p>
         </motion.div>
 
         <motion.div
@@ -576,7 +750,7 @@ const BusinessProcessAutomationIncludes = () => {
                 key={index}
                 initial={{ opacity: 0, y: 20 }}
                 whileInView={{ opacity: 1, y: 0 }}
-                transition={{ duration: 0.5, delay: index * 0.1 }}
+                transition={{ duration: 0.5, delay: index * 0.01 }}
                 viewport={{ once: true }}
                 whileHover={{ y: -5 }}
                 className="group"
@@ -641,28 +815,28 @@ const BusinessProcessAutomationBenefits = () => {
     {
       icon: Gauge,
       title: "Increased Efficiency",
-      description: "Accelerate workflows and reduce task completion times."
+      description: "Accelerate workflows and reduce task completion times.",
     },
     {
       icon: DollarSign,
       title: "Significant Cost Savings",
-      description: "Lower operational expenses by minimizing manual labor."
+      description: "Lower operational expenses by minimizing manual labor.",
     },
     {
       icon: Target,
       title: "Improved Accuracy",
-      description: "Eliminate human errors, leading to higher data quality."
+      description: "Eliminate human errors, leading to higher data quality.",
     },
     {
       icon: Shield,
       title: "Enhanced Compliance",
-      description: "Ensure consistent adherence to regulations and policies."
+      description: "Ensure consistent adherence to regulations and policies.",
     },
     {
       icon: TrendingUp,
       title: "Boosted Productivity",
-      description: "Free up employees for strategic and creative work."
-    }
+      description: "Free up employees for strategic and creative work.",
+    },
   ];
 
   return (
@@ -678,6 +852,11 @@ const BusinessProcessAutomationBenefits = () => {
           <h2 className="text-4xl lg:text-5xl font-semibold text-foreground mb-6">
             The Tangible Impact of Intelligent Automation
           </h2>
+          <p className="mt-4 text-gray-400 max-w-2xl mx-auto">
+            Intelligent automation drives faster, error‑free workflows and lower
+            costs, freeing teams to focus on innovation and accelerating digital
+            product development.
+          </p>
         </motion.div>
 
         <motion.div
@@ -694,7 +873,7 @@ const BusinessProcessAutomationBenefits = () => {
                 key={index}
                 initial={{ opacity: 0, y: 20 }}
                 whileInView={{ opacity: 1, y: 0 }}
-                transition={{ duration: 0.5, delay: index * 0.1 }}
+                transition={{ duration: 0.5, delay: index * 0.01 }}
                 viewport={{ once: true }}
                 whileHover={{ y: -5 }}
                 className="group"
@@ -764,34 +943,40 @@ const BusinessProcessAutomationProcess = () => {
   const steps = [
     {
       title: "Assess & Identify",
-      description: "Analyze existing processes to pinpoint automation opportunities.",
-      icon: Search
+      description:
+        "Analyze existing processes to pinpoint automation opportunities.",
+      icon: Search,
     },
     {
       title: "Design & Plan",
-      description: "Develop the automation strategy, define scope, and select technologies.",
-      icon: Target
+      description:
+        "Develop the automation strategy, define scope, and select technologies.",
+      icon: Target,
     },
     {
       title: "Develop & Configure",
-      description: "Build and configure automation solutions (RPA bots, custom software).",
-      icon: Code
+      description:
+        "Build and configure automation solutions (RPA bots, custom software).",
+      icon: Code,
     },
     {
       title: "Test & Refine",
-      description: "Rigorously test automated workflows to ensure accuracy and robustness.",
-      icon: Shield
+      description:
+        "Rigorously test automated workflows to ensure accuracy and robustness.",
+      icon: Shield,
     },
     {
       title: "Deploy & Implement",
-      description: "Integrate and launch automated processes within your systems.",
-      icon: Rocket
+      description:
+        "Integrate and launch automated processes within your systems.",
+      icon: Rocket,
     },
     {
       title: "Monitor & Optimize",
-      description: "Continuously track performance and refine processes for maximum efficiency.",
-      icon: BarChart3
-    }
+      description:
+        "Continuously track performance and refine processes for maximum efficiency.",
+      icon: BarChart3,
+    },
   ];
 
   return (
@@ -807,6 +992,11 @@ const BusinessProcessAutomationProcess = () => {
           <h2 className="text-4xl lg:text-5xl font-semibold text-white mb-6">
             Our Automation Journey: From Concept to Efficiency
           </h2>
+          <p className="mt-4 text-gray-400 max-w-2xl mx-auto">
+            From assessment to deployment, the automation journey turns manual
+            tasks into efficient workflows that support faster digital product
+            development.
+          </p>
         </motion.div>
 
         <div className="relative">
@@ -825,15 +1015,23 @@ const BusinessProcessAutomationProcess = () => {
                   whileInView={{ opacity: 1, x: 0 }}
                   transition={{ duration: 0.8, delay: index * 0.2 }}
                   viewport={{ once: true }}
-                  className={`flex items-center ${isEven ? 'lg:flex-row' : 'lg:flex-row-reverse'} flex-col lg:gap-16 gap-8`}
+                  className={`flex items-center ${
+                    isEven ? "lg:flex-row" : "lg:flex-row-reverse"
+                  } flex-col lg:gap-16 gap-8`}
+                >
+                  <div
+                    className={`flex-1 ${
+                      isEven ? "lg:text-right" : "lg:text-left"
+                    } text-center lg:text-left`}
                   >
-                  <div className={`flex-1 ${isEven ? 'lg:text-right' : 'lg:text-left'} text-center lg:text-left`}>
                     <div className="bg-gray-900/50 backdrop-blur-md rounded-2xl border border-gray-800 p-8 hover:border-accent/30 transition-all duration-300 shadow-lg hover:shadow-xl">
                       <div className="flex items-center gap-4 mb-4 justify-center lg:justify-start">
                         <div className="w-12 h-12 bg-accent/20 rounded-xl flex items-center justify-center">
                           <IconComponent className="w-6 h-6 text-accent" />
                         </div>
-                        <div className="text-2xl font-bold text-accent">0{index + 1}</div>
+                        <div className="text-2xl font-bold text-accent">
+                          0{index + 1}
+                        </div>
                       </div>
                       <h3 className="text-2xl font-semibold text-white mb-4">
                         {step.title}
@@ -864,28 +1062,31 @@ const BusinessProcessAutomationAudience = () => {
     {
       icon: Factory,
       title: "High-Volume Task Businesses",
-      description: "With high volumes of repetitive, rule-based tasks."
+      description: "With high volumes of repetitive, rule-based tasks.",
     },
     {
       icon: Target,
       title: "Error-Prone Operations",
-      description: "Struggling with data entry errors or slow processing times."
+      description:
+        "Struggling with data entry errors or slow processing times.",
     },
     {
       icon: DollarSign,
       title: "Cost-Conscious Organizations",
-      description: "Seeking to reduce operational costs and reallocate resources."
+      description:
+        "Seeking to reduce operational costs and reallocate resources.",
     },
     {
       icon: Users,
       title: "Key Departments",
-      description: "HR, Finance, Operations, or Customer Service departments."
+      description: "HR, Finance, Operations, or Customer Service departments.",
     },
     {
       icon: Building,
       title: "Digital Transformation Enterprises",
-      description: "Aiming for digital transformation and greater operational agility."
-    }
+      description:
+        "Aiming for digital transformation and greater operational agility.",
+    },
   ];
 
   return (
@@ -917,7 +1118,7 @@ const BusinessProcessAutomationAudience = () => {
                 key={index}
                 initial={{ opacity: 0, y: 20 }}
                 whileInView={{ opacity: 1, y: 0 }}
-                transition={{ duration: 0.5, delay: index * 0.1 }}
+                transition={{ duration: 0.5, delay: index * 0.01 }}
                 viewport={{ once: true }}
                 whileHover={{ y: -5 }}
                 className="group"
@@ -988,30 +1189,36 @@ const BusinessProcessAutomationCaseStudies = () => {
     {
       title: "Automated Invoice Processing",
       client: "Logistics Company",
-      description: "Reduced invoice processing time by 70% for a logistics company, eliminating manual errors and improving cash flow management through intelligent document processing and automated approval workflows.",
-      image: "https://images.unsplash.com/photo-1586953208448-b95a79798f07?w=400&h=300&fit=crop&auto=format",
+      description:
+        "Reduced invoice processing time by 70% for a logistics company, eliminating manual errors and improving cash flow management through intelligent document processing and automated approval workflows.",
+      image:
+        "https://images.unsplash.com/photo-1586953208448-b95a79798f07?w=400&h=300&fit=crop&auto=format",
       results: "70% time reduction, zero errors",
       engagement: "Invoice automation success",
-      gradient: "from-blue-500/20 to-cyan-500/20"
+      gradient: "from-blue-500/20 to-cyan-500/20",
     },
     {
       title: "Customer Onboarding Workflow Automation",
       client: "Financial Services Firm",
-      description: "Streamlined onboarding for a financial firm, cutting the process duration by 50% while improving compliance and customer satisfaction through automated document verification and KYC processes.",
-      image: "https://images.unsplash.com/photo-1563013544-824ae1b704d3?w=400&h=300&fit=crop&auto=format",
+      description:
+        "Streamlined onboarding for a financial firm, cutting the process duration by 50% while improving compliance and customer satisfaction through automated document verification and KYC processes.",
+      image:
+        "https://images.unsplash.com/photo-1563013544-824ae1b704d3?w=400&h=300&fit=crop&auto=format",
       results: "50% process duration reduction",
       engagement: "Customer onboarding optimization",
-      gradient: "from-green-500/20 to-emerald-500/20"
+      gradient: "from-green-500/20 to-emerald-500/20",
     },
     {
       title: "HR Process Automation Suite",
       client: "Manufacturing Enterprise",
-      description: "Automated employee onboarding, payroll processing, and compliance reporting for a manufacturing company, reducing HR administrative overhead by 60% and improving employee experience significantly.",
-      image: "https://images.unsplash.com/photo-1565514158740-3011dbf5b2ed?w=400&h=300&fit=crop&auto=format",
+      description:
+        "Automated employee onboarding, payroll processing, and compliance reporting for a manufacturing company, reducing HR administrative overhead by 60% and improving employee experience significantly.",
+      image:
+        "https://images.unsplash.com/photo-1565514158740-3011dbf5b2ed?w=400&h=300&fit=crop&auto=format",
       results: "60% admin overhead reduction",
       engagement: "HR transformation success",
-      gradient: "from-purple-500/20 to-pink-500/20"
-    }
+      gradient: "from-purple-500/20 to-pink-500/20",
+    },
   ];
 
   return (
@@ -1027,6 +1234,11 @@ const BusinessProcessAutomationCaseStudies = () => {
           <h2 className="text-4xl lg:text-5xl font-semibold text-white mb-8">
             Operations Transformed Through Automation
           </h2>
+          <p className="mt-4 text-gray-400 max-w-2xl mx-auto">
+            Automation transforms operations by replacing repetitive tasks with
+            fast, reliable workflows that reduce errors and accelerate digital
+            product development.
+          </p>
         </motion.div>
 
         <motion.div
@@ -1041,7 +1253,7 @@ const BusinessProcessAutomationCaseStudies = () => {
               key={index}
               initial={{ opacity: 0, y: 20 }}
               whileInView={{ opacity: 1, y: 0 }}
-              transition={{ duration: 0.5, delay: index * 0.1 }}
+              transition={{ duration: 0.5, delay: index * 0.01 }}
               viewport={{ once: true }}
               whileHover={{ y: -8, scale: 1.02 }}
               className="group cursor-pointer"
@@ -1057,7 +1269,10 @@ const BusinessProcessAutomationCaseStudies = () => {
                         <div className="text-xs text-gray-400 mb-2 uppercase tracking-wider">
                           {study.client}
                         </div>
-                        <Badge variant="secondary" className="text-xs bg-accent/20 text-accent border-accent/30">
+                        <Badge
+                          variant="secondary"
+                          className="text-xs bg-accent/20 text-accent border-accent/30"
+                        >
                           {study.results}
                         </Badge>
                       </div>
@@ -1069,7 +1284,9 @@ const BusinessProcessAutomationCaseStudies = () => {
                   </div>
 
                   <div className="px-8 pb-6 flex-1">
-                    <div className={`relative rounded-xl overflow-hidden bg-gradient-to-br ${study.gradient} p-4 border border-white/10`}>
+                    <div
+                      className={`relative rounded-xl overflow-hidden bg-gradient-to-br ${study.gradient} p-4 border border-white/10`}
+                    >
                       <ImageWithFallback
                         src={study.image}
                         alt={study.title}
@@ -1096,7 +1313,9 @@ const BusinessProcessAutomationCaseStudies = () => {
                       size="sm"
                       className="w-full justify-between text-accent hover:text-accent hover:bg-accent/10 group-hover:translate-x-1 transition-all duration-300 h-auto py-3"
                     >
-                      <span className="text-sm font-medium">VIEW FULL CASE STUDY</span>
+                      <span className="text-sm font-medium">
+                        VIEW FULL CASE STUDY
+                      </span>
                       <ArrowRight className="w-4 h-4" />
                     </Button>
                   </div>
@@ -1112,6 +1331,7 @@ const BusinessProcessAutomationCaseStudies = () => {
 
 // Mid-Page Lead Capture CTA
 const BusinessProcessAutomationInlineCTA = () => {
+  const navigate = useNavigate();
   return (
     <section className="py-20">
       <div className="container mx-auto px-6 lg:px-8">
@@ -1132,7 +1352,9 @@ const BusinessProcessAutomationInlineCTA = () => {
             <div className="inline-block p-[2px] rounded-full bg-gradient-to-r from-accent via-blue-500 to-green-500">
               <div className="bg-background rounded-full px-6 py-3 flex items-center gap-2">
                 <Cog className="w-5 h-5 text-foreground" />
-                <span className="text-foreground text-base font-medium">Process Automation</span>
+                <span className="text-foreground text-base font-medium">
+                  Process Automation
+                </span>
               </div>
             </div>
 
@@ -1142,10 +1364,14 @@ const BusinessProcessAutomationInlineCTA = () => {
             </h2>
 
             <p className="text-xl text-muted-foreground leading-relaxed max-w-2xl mx-auto">
-              Discover how intelligent automation can revolutionize your operations.
+              Discover how intelligent automation can revolutionize your
+              operations.
             </p>
 
-            <ShimmerButton className="text-xl px-10 py-5 rounded-2xl shadow-lg hover:shadow-xl">
+            <ShimmerButton
+              className="text-xl px-10 py-5 rounded-2xl shadow-lg hover:shadow-xl"
+              onClick={() => navigate("/start-a-project")}
+            >
               <div className="inline-flex items-center gap-3">
                 <Search className="w-6 h-6 flex-shrink-0" />
                 <span>Get Your Automation Assessment</span>
@@ -1162,21 +1388,26 @@ const BusinessProcessAutomationInlineCTA = () => {
 const BusinessProcessAutomationFAQs = () => {
   const faqs = [
     {
-      question: "What types of processes are best suited for automation?",
-      answer: "The best candidates for automation are repetitive, rule-based processes with high volume and predictable patterns: Data entry and validation tasks, invoice processing and accounts payable/receivable, customer onboarding and KYC processes, report generation and distribution, inventory management and order processing, and HR processes like payroll and employee onboarding. Processes with clear business rules, frequent execution, high error rates, or significant manual effort provide the greatest ROI. We evaluate factors like process complexity, data quality, exception handling requirements, and integration needs to determine automation feasibility and potential impact."
+      question: "What is Business Process Automation (BPA)?",
+      answer:
+        "Business process automation uses software and intelligent workflows to handle repetitive tasks such as approvals, data entry, and notifications without manual intervention. It speeds up operations, reduces errors, and frees teams to focus on higher-value work.",
     },
     {
-      question: "What's the difference between RPA and custom automation?",
-      answer: "RPA (Robotic Process Automation) and custom automation serve different purposes: RPA uses software robots to mimic human interactions with existing applications, ideal for processes that work with multiple systems without APIs, require no system changes, and need quick deployment. Custom automation involves building tailored software solutions with direct system integration, API development, and purpose-built workflows. RPA is faster to implement but may be less robust, while custom automation provides more flexibility and scalability. We often recommend hybrid approaches: RPA for quick wins and immediate ROI, custom automation for long-term strategic processes, and integration between both for comprehensive automation coverage."
+      question:
+        "How does intelligent automation improve day-to-day operations?",
+      answer:
+        "Intelligent automation combines rules-based automation with AI and data-driven logic to make workflows smarter and more adaptive. It can auto-route requests, prioritize alerts, and trigger AI-powered features based on real-time patterns, improving response times and decision-making.",
     },
     {
-      question: "How long does it take to implement a BPA solution?",
-      answer: "Implementation timelines vary based on complexity and scope: Simple RPA implementations: 4-8 weeks for basic process automation, Medium complexity projects: 8-16 weeks for multi-system integrations, Complex enterprise automation: 16-24 weeks for comprehensive workflow overhauls. Our phased approach includes: Discovery and analysis (2-4 weeks), solution design and planning (2-3 weeks), development and configuration (4-12 weeks), testing and refinement (2-4 weeks), deployment and training (1-2 weeks), and post-implementation optimization (ongoing). We prioritize quick wins and incremental value delivery, often implementing automation in phases to demonstrate ROI early while building toward comprehensive automation coverage."
+      question: "Can automation integrate with our existing apps and systems?",
+      answer:
+        "Yes. Automation solutions plug into your current tools via APIs, including CRM, ERP, email, and custom software. We also design workflows that connect smoothly with AI-powered mobile and web applications, so your teams can trigger and monitor automated tasks from any device.",
     },
     {
-      question: "How do you measure the ROI of automation?",
-      answer: "We measure automation ROI through comprehensive metrics: Quantitative benefits include time savings (hours reduced per process), cost reduction (labor and operational savings), error reduction (quality improvements), throughput increase (volume processing capability), and compliance improvements (audit and regulatory benefits). Qualitative benefits include employee satisfaction, customer experience enhancement, and strategic capability development. Our ROI calculation considers: implementation costs, ongoing maintenance expenses, training and change management costs, and both direct and indirect benefits. Typical automation projects achieve 200-400% ROI within 12-18 months. We provide detailed ROI projections during planning and track actual performance post-implementation to ensure projected benefits are realized."
-    }
+      question: "What if my team lacks in-house AI or iOS expertise?",
+      answer:
+        "If you don’t have internal AI or iOS skills, you can work with an AI app development company that handles the full stack—from concept and AI-powered design to deployment and maintenance. We act as your end-to-end partner, so your business can adopt automation and AI without needing a deep-tech team.",
+    },
   ];
 
   return (
@@ -1209,7 +1440,9 @@ const BusinessProcessAutomationFAQs = () => {
                 className="bg-gray-900/50 backdrop-blur-md rounded-2xl border border-gray-800 px-10 shadow-lg"
               >
                 <AccordionTrigger className="text-left hover:no-underline py-10 text-xl">
-                  <span className="font-semibold text-white">{faq.question}</span>
+                  <span className="font-semibold text-white">
+                    {faq.question}
+                  </span>
                 </AccordionTrigger>
                 <AccordionContent className="text-gray-300 pb-10 text-lg leading-relaxed">
                   {faq.answer}
@@ -1225,6 +1458,7 @@ const BusinessProcessAutomationFAQs = () => {
 
 // Final CTA Section
 const BusinessProcessAutomationFinalCTA = () => {
+  const navigate = useNavigate();
   return (
     <section className="py-20 relative overflow-hidden">
       <div className="container mx-auto px-6 lg:px-8 relative z-10">
@@ -1245,7 +1479,9 @@ const BusinessProcessAutomationFinalCTA = () => {
             <div className="inline-block p-[2px] rounded-full bg-gradient-to-r from-accent via-blue-500 to-green-500">
               <div className="bg-background rounded-full px-6 py-3 flex items-center gap-2">
                 <Cog className="w-5 h-5 text-foreground" />
-                <span className="text-foreground text-base font-medium">Smart Automation</span>
+                <span className="text-foreground text-base font-medium">
+                  Smart Automation
+                </span>
               </div>
             </div>
           </motion.div>
@@ -1262,7 +1498,9 @@ const BusinessProcessAutomationFinalCTA = () => {
             viewport={{ once: true }}
             className="text-xl text-muted-foreground mb-12 max-w-2xl mx-auto leading-relaxed"
           >
-            Let WDI empower your business with intelligent automation solutions that drive efficiency, reduce costs, and free up your team for what truly matters.
+            Let WDI empower your business with intelligent automation solutions
+            that drive efficiency, reduce costs, and free up your team for what
+            truly matters.
           </motion.p>
 
           <motion.div
@@ -1272,7 +1510,10 @@ const BusinessProcessAutomationFinalCTA = () => {
             viewport={{ once: true }}
             className="space-y-8"
           >
-            <ShimmerButton className="px-12 py-6 text-xl rounded-2xl shadow-2xl hover:shadow-accent/25">
+            <ShimmerButton
+              className="px-12 py-6 text-xl rounded-2xl shadow-2xl hover:shadow-accent/25"
+              onClick={() => navigate("/start-a-project")}
+            >
               <div className="inline-flex items-center gap-3">
                 <Calendar className="w-6 h-6 flex-shrink-0" />
                 <span>Schedule a Free Consultation</span>
@@ -1280,7 +1521,8 @@ const BusinessProcessAutomationFinalCTA = () => {
             </ShimmerButton>
 
             <p className="text-muted-foreground text-sm">
-              Discovery • Strategy • Implementation • Testing • Deployment • Optimization
+              Discovery • Strategy • Implementation • Testing • Deployment •
+              Optimization
             </p>
           </motion.div>
         </motion.div>
@@ -1300,7 +1542,7 @@ const BusinessProcessAutomationFinalCTA = () => {
 export const BusinessProcessAutomation = () => {
   return (
     <div className="dark min-h-screen">
-      <Navigation />
+      {/* <Navigation /> */}
 
       {/* Hero Section */}
       <section className="bg-black">
@@ -1353,9 +1595,7 @@ export const BusinessProcessAutomation = () => {
       </section>
 
       {/* Footer */}
-      <section className="bg-card">
-        <Footer />
-      </section>
+      <section className="bg-card">{/* <Footer /> */}</section>
     </div>
   );
 };

pages/Careers.tsx

@@ -21,76 +21,125 @@ import {
   Bug,
   LineChart
 } from "lucide-react";
+import { Helmet } from "react-helmet-async";
 
 export const Careers = () => {
   // Job positions data
+  // const openPositions = [
+  //   {
+  //     title: "Jr. Flutter Developer",
+  //     department: "Mobile Development",
+  //     location: "In-office",
+  //     type: "Full-time",
+  //     description: "Build cross-platform mobile applications using Flutter and Dart for seamless performance across Android and iOS.",
+  //     icon: Code
+  //   },
+  //   {
+  //     title: "Jr. React.js Developer",
+  //     department: "Frontend Development",
+  //     location: "In-office",
+  //     type: "Full-time",
+  //     description: "Develop responsive and interactive web user interfaces using React.js, TypeScript, and modern JavaScript tools.",
+  //     icon: Code
+  //   },
+  //   {
+  //     title: "Jr. Laravel Developer",
+  //     department: "Backend Development",
+  //     location: "In-office",
+  //     type: "Full-time",
+  //     description: "Build and maintain scalable web applications using Laravel, PHP, and MySQL, with a focus on clean architecture and APIs.",
+  //     icon: Database
+  //   },
+  //   {
+  //     title: "Jr. Node.js Developer",
+  //     department: "Backend Development",
+  //     location: "In-office",
+  //     type: "Full-time",
+  //     description: "Design and implement backend services and RESTful APIs using Node.js, Express, and modern JavaScript/TypeScript.",
+  //     icon: Database
+  //   },
+  //   {
+  //     title: "Jr. Python Developer",
+  //     department: "Backend Development",
+  //     location: "In-office",
+  //     type: "Full-time",
+  //     description: "Develop server-side applications, automation scripts, and data-driven systems using Python and relevant frameworks like Django or Flask.",
+  //     icon: Database
+  //   },
+  //   // {
+  //   //   title: "UI/UX Designer",
+  //   //   department: "Design & User Experience",
+  //   //   location: "In-office",
+  //   //   type: "Full-time",
+  //   //   description: "Design intuitive user interfaces and create engaging user experiences for digital products.",
+  //   //   icon: Palette
+  //   // },
+  //   {
+  //     title: "Jr. Software Tester / QA Engineer",
+  //     department: "Quality Assurance",
+  //     location: "In-office",
+  //     type: "Full-time",
+  //     description: "Create and execute manual and automated test plans to ensure quality, performance, and reliability of software applications.",
+  //     icon: Bug
+  //   },
+  //   {
+  //     title: "Business Development Executive (IT)",
+  //     department: "Sales & Business Development",
+  //     location: "In-office",
+  //     type: "Full-time",
+  //     description: "Generate leads, build client relationships, and drive sales growth for IT products and software services.",
+  //     icon: LineChart
+  //   }
+  // ];
+
   const openPositions = [
     {
-      title: "Jr. Flutter Developer",
-      department: "Mobile Development",
+      title: "Python Developer",
+      department: "Backend Development",
       location: "In-office",
       type: "Full-time",
-      description: "Build cross-platform mobile applications using Flutter and Dart for seamless performance across Android and iOS.",
-      icon: Code
-    },
-    {
-      title: "Jr. React.js Developer",
-      department: "Frontend Development",
-      location: "In-office",
-      type: "Full-time",
-      description: "Develop responsive and interactive web user interfaces using React.js, TypeScript, and modern JavaScript tools.",
-      icon: Code
+      description:
+        "Build and maintain backend services with Python, Django, Flask, or FastAPI. Implement RESTful APIs and optimize backend performance for scalability.",
+      icon: Database,
     },
     {
       title: "Jr. Laravel Developer",
       department: "Backend Development",
       location: "In-office",
       type: "Full-time",
-      description: "Build and maintain scalable web applications using Laravel, PHP, and MySQL, with a focus on clean architecture and APIs.",
+      description: "Build and maintain dynamic web apps with Laravel. Write clean PHP, debug issues, ensure performance and scalability. Integrate APIs, manage databases, and follow best practices.",
       icon: Database
     },
     {
-      title: "Jr. Node.js Developer",
-      department: "Backend Development", 
+      title: "Flutter Developer",
+      department: "Mobile Development",
       location: "In-office",
       type: "Full-time",
-      description: "Design and implement backend services and RESTful APIs using Node.js, Express, and modern JavaScript/TypeScript.",
-      icon: Database
+      description:
+        "Design and implement new app modules using Flutter for Android and iOS. Integrate APIs, debug UI components, and optimize overall app performance.",
+      icon: Code,
     },
     {
-      title: "Jr. Python Developer",
-      department: "Backend Development", 
+      title: "React.js Developer",
+      department: "Frontend Development",
       location: "In-office",
       type: "Full-time",
-      description: "Develop server-side applications, automation scripts, and data-driven systems using Python and relevant frameworks like Django or Flask.",
-      icon: Database
+      description:
+        "Develop scalable UI components using React.js with JavaScript/TypeScript. Integrate RESTful/GraphQL APIs to build responsive and dynamic web applications.",
+      icon: Code,
     },
-    // {
-    //   title: "UI/UX Designer",
-    //   department: "Design & User Experience",
-    //   location: "In-office",
-    //   type: "Full-time",
-    //   description: "Design intuitive user interfaces and create engaging user experiences for digital products.",
-    //   icon: Palette
-    // },
     {
-      title: "Jr. Software Tester / QA Engineer",
+      title: "Software Manual Tester",
       department: "Quality Assurance",
       location: "In-office",
       type: "Full-time",
-      description: "Create and execute manual and automated test plans to ensure quality, performance, and reliability of software applications.",
-      icon: Bug
+      description:
+        "Review requirement specs, execute manual test cases, and identify bugs using tools like JIRA. Ensure software quality with regression and UAT testing.",
+      icon: Bug,
     },
-    {
-      title: "Business Development Executive (IT)",
-      department: "Sales & Business Development",
-      location: "In-office",
-      type: "Full-time",
-      description: "Generate leads, build client relationships, and drive sales growth for IT products and software services.",
-      icon: LineChart
-    }
   ];
 
+
   // Smooth scroll to Send CV section
   const scrollToSendCV = () => {
     const element = document.getElementById('send-cv-section');
@@ -118,7 +167,54 @@ Best regards,
 
   return (
     <div className="dark min-h-screen bg-background">
-      <Navigation />
+      <Helmet>
+        {/* Page Title and Meta Description */}
+        <title>Careers at WDI | Explore Tech Career Opportunities Today</title>
+        <meta
+          name="description"
+          content="Join WDI’s growing team. Explore tech career opportunities in software, AI, and digital innovation with a company that values learning and leadership."
+        />
+
+        {/* Canonical Link */}
+        <link rel="canonical" href="https://www.wdipl.com/company/careers" />
+
+        {/* Open Graph Tags (for Facebook, LinkedIn) */}
+        <meta property="og:title" content="Careers at WDI | Explore Tech Career Opportunities Today" />
+        <meta
+          property="og:description"
+          content="Join WDI’s growing team. Explore tech career opportunities in software, AI, and digital innovation with a company that values learning and leadership."
+        />
+        <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="Careers at WDI | Explore Tech Career Opportunities Today" />
+        <meta
+          name="twitter:description"
+          content="Join WDI’s growing team. Explore tech career opportunities in software, AI, and digital innovation with a company that values learning and leadership."
+        />
+        <meta name="twitter:image" content="https://www.wdipl.com/your-preview-image.jpg" />
+
+        {/* Social Profiles (using JSON-LD Schema) */}
+        <script type="application/ld+json">
+          {`
+                              {
+                                "@context": "https://schema.org",
+                                "@type": "Organization",
+                                "name": "WDI",
+                                "url": "https://www.wdipl.com",
+                                "sameAs": [
+                                  "https://www.facebook.com/wdideas",
+                                  "https://www.linkedin.com/in/website-developers-india/",
+                                  "https://www.instagram.com/wdipl/"
+                                ]
+                              }
+                            `}
+        </script>
+      </Helmet>
+      {/* <Navigation /> */}
 
       {/* Hero Section */}
       <section className="relative pt-24 pb-20 overflow-hidden bg-black">
@@ -175,7 +271,7 @@ Best regards,
                   key={index}
                   initial={{ opacity: 0, y: 20 }}
                   whileInView={{ opacity: 1, y: 0 }}
-                  transition={{ duration: 0.5, delay: index * 0.1 }}
+                  transition={{ duration: 0.5, delay: index * 0.01 }}
                   viewport={{ once: true }}
                 >
                   <Card className="bg-gray-900/30 backdrop-blur-md border-gray-700/30 hover:border-[#E5195E]/30 transition-all duration-300 group">
@@ -311,7 +407,7 @@ Best regards,
                 key={index}
                 initial={{ opacity: 0, y: 20 }}
                 whileInView={{ opacity: 1, y: 0 }}
-                transition={{ duration: 0.5, delay: index * 0.1 }}
+                transition={{ duration: 0.5, delay: index * 0.01 }}
                 viewport={{ once: true }}
                 className="text-center"
               >
@@ -325,7 +421,7 @@ Best regards,
         </div>
       </section>
 
-      <Footer />
+      {/* <Footer /> */}
     </div>
   );
 };

pages/CaseStudies.tsx

@@ -1,211 +1,208 @@
-import React, { useState } from "react";
 import { motion } from "framer-motion";
-import { Navigation } from "../components/Navigation";
+import {
+  Activity,
+  ArrowRight,
+  ArrowUpRight,
+  Award,
+  Building2,
+  FlaskConical,
+  Globe,
+  Heart,
+  Package,
+  PartyPopper,
+  Search,
+  ShoppingCart,
+  Star,
+  Tractor,
+  TrendingUp,
+  Trophy,
+  Tv,
+  Users,
+  Utensils
+} from "lucide-react";
+import { useState } from "react";
+import { Helmet } from "react-helmet-async";
+import { ImageWithFallback } from "../components/figma/ImageWithFallback";
 import { Footer } from "../components/Footer";
-import { Card, CardContent } from "../components/ui/card";
-import { Button } from "../components/ui/button";
+import { Navigation } from "../components/Navigation";
 import { Badge } from "../components/ui/badge";
+import { Button } from "../components/ui/button";
+import { Card, CardContent } from "../components/ui/card";
 import { Input } from "../components/ui/input";
 import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "../components/ui/select";
-import { 
-  Search, Filter, ArrowRight, ExternalLink, Clock, Users, TrendingUp, 
-  Star, Award, Building2, Smartphone, Heart, ShoppingCart, GraduationCap,
-  FileText, ArrowUpRight
-} from "lucide-react";
-import { ImageWithFallback } from "../components/figma/ImageWithFallback";
-import { navigateTo } from "../App";
+import ambleCase from "../src/images/amble-case.webp";
+import ranoutofCase from "../src/images/ranoutof-case.webp";
+// import seezunCase from "../src/images/seezun-case.webp";
+import tcCase from "../src/images/tc-case.webp";
+import wokaCase from "../src/images/woka-case.webp";
+import gtCase from "../src/images/gt-case.webp";
+import RrCase from "../src/images/resturant-reward-case.webp";
+import dkCase from "../src/images/dkCase.webp";
+import vib360Case from "../src/images/vib360Case.webp";
+import niftyCase from "../src/images/niftyCase.webp";
+import prospertyCase from "../src/images/prospertyCase.webp";
+import simplitendCase from "../src/images/simplitendCase.webp";
+import amozCase from "../src/images/amozCase.webp";
+import farmCase from "../src/images/farmCase.webp";
+import leanCase from "../src/images/leanCase.webp";
+import { useNavigate } from "react-router-dom";
 
-// High-quality project images
-const ranOutOfImage = "https://images.unsplash.com/photo-1551650975-87deedd944c3?w=600&h=400&fit=crop&auto=format";
-const seezunImage = "https://images.unsplash.com/photo-1512941937669-90a1b58e7e9c?w=600&h=400&fit=crop&auto=format";
-const wokaImage = "https://images.unsplash.com/photo-1571019613454-1cb2f99b2d8b?w=600&h=400&fit=crop&auto=format";
-const regroupImage = "https://images.unsplash.com/photo-1517077304055-6e89abbf09b0?w=600&h=400&fit=crop&auto=format";
-const tanamiImage = "https://images.unsplash.com/photo-1460925895917-afdab827c52f?w=600&h=400&fit=crop&auto=format";
-const tradersCircuitImage = "https://images.unsplash.com/photo-1559757148-5c350d0d3c56?w=600&h=400&fit=crop&auto=format";
-const goodTimesImage = "https://images.unsplash.com/photo-1557804506-669a67965ba0?w=600&h=400&fit=crop&auto=format";
-const prospertyImage = "https://images.unsplash.com/photo-1554224155-8d04cb21cd6c?w=600&h=400&fit=crop&auto=format";
 
 const caseStudies = [
   {
     id: 1,
     title: "RanOutOf",
-    subtitle: "Household Management Revolution",
-    description: "Smart inventory management app that helps households track supplies, create shopping lists, and reduce waste through intelligent notifications.",
-    image: ranOutOfImage,
+    image: ranoutofCase,
     category: "Lifestyle",
     industry: "Consumer",
-    client: "RanOutOf Technologies",
-    duration: "6 months",
-    teamSize: "8 developers",
-    technologies: ["React Native", "Node.js", "MongoDB", "AI/ML", "Push Notifications"],
-    results: [
-      { metric: "Food Waste Reduction", value: "-45%" },
-      { metric: "Shopping Efficiency", value: "+60%" },
-      { metric: "User Satisfaction", value: "4.7/5" }
-    ],
-    awards: ["Best Lifestyle App 2023"],
     featured: true,
     link: "/projects/ranoutof",
-    icon: Heart
-  },
-  {
-    id: 2,
-    title: "Seezun",
-    subtitle: "E-commerce Platform Innovation",
-    description: "Next-generation e-commerce solution with AI-powered recommendations, seamless checkout, and advanced analytics for modern retailers.",
-    image: seezunImage,
-    category: "E-commerce",
-    industry: "Retail",
-    client: "Seezun Retail Corp",
-    duration: "8 months",
-    teamSize: "12 developers",
-    technologies: ["React", "Python", "PostgreSQL", "Redis", "Stripe", "AWS"],
-    results: [
-      { metric: "Conversion Rate", value: "+185%" },
-      { metric: "Page Load Speed", value: "1.8s" },
-      { metric: "Revenue Growth", value: "+240%" }
-    ],
-    awards: ["E-commerce Excellence Award", "Innovation in Retail"],
-    featured: true,
-    link: "/projects/seezun",
-    icon: ShoppingCart
+    icon: Package
   },
+  // {
+  //   id: 2,
+  //   title: "Seezun",
+  //   image: seezunCase,
+  //   category: "E-commerce",
+  //   industry: "Retail",
+  //   featured: true,
+  //   link: "/projects/seezun",
+  //   icon: ShoppingCart
+  // },
   {
     id: 3,
     title: "Woka",
-    subtitle: "Fitness & Wellness Platform",
-    description: "Comprehensive fitness app with personalized workout plans, nutrition tracking, and community features that won multiple industry awards.",
-    image: wokaImage,
+    image: wokaCase,
     category: "Health & Fitness",
     industry: "Healthcare",
-    client: "Woka Wellness Inc",
-    duration: "10 months",
-    teamSize: "15 developers",
-    technologies: ["Flutter", "Firebase", "TensorFlow", "HealthKit", "Google Fit"],
-    results: [
-      { metric: "User Retention", value: "+320%" },
-      { metric: "Workout Completions", value: "2M+" },
-      { metric: "App Store Rating", value: "4.9/5" }
-    ],
-    awards: ["App of the Year 2023", "Health Innovation Award"],
     featured: true,
     link: "/projects/woka",
-    icon: Heart
-  },
-  {
-    id: 4,
-    title: "Regroup",
-    subtitle: "Social Networking Platform",
-    description: "Revolutionary social platform connecting communities worldwide with advanced messaging, group management, and content sharing capabilities.",
-    image: regroupImage,
-    category: "Social",
-    industry: "Technology",
-    client: "Regroup Technologies",
-    duration: "12 months",
-    teamSize: "18 developers",
-    technologies: ["React Native", "Node.js", "MongoDB", "WebRTC", "Socket.io"],
-    results: [
-      { metric: "User Engagement", value: "+280%" },
-      { metric: "Active Communities", value: "75K+" },
-      { metric: "Daily Messages", value: "5M+" }
-    ],
-    awards: ["Best Social App 2023"],
-    featured: true,
-    link: "/projects/regroup",
-    icon: Users
-  },
-  {
-    id: 5,
-    title: "Tanami",
-    subtitle: "Agricultural Technology Solution",
-    description: "Smart farming platform that combines IoT sensors, weather data, and machine learning to optimize crop yields and reduce resource usage.",
-    image: tanamiImage,
-    category: "AgriTech",
-    industry: "Agriculture",
-    client: "Tanami Farms Ltd",
-    duration: "9 months",
-    teamSize: "10 developers",
-    technologies: ["React", "Python", "IoT", "TensorFlow", "AWS IoT"],
-    results: [
-      { metric: "Crop Yield Increase", value: "+35%" },
-      { metric: "Water Usage Reduction", value: "-40%" },
-      { metric: "Cost Savings", value: "$2.5M" }
-    ],
-    awards: ["AgriTech Innovation Award"],
-    featured: false,
-    link: "/projects/tanami",
-    icon: Building2
+    icon: Tv
   },
   {
     id: 6,
     title: "Traders Circuit",
-    subtitle: "Financial Trading Platform",
-    description: "Advanced trading platform with real-time market data, algorithmic trading capabilities, and comprehensive portfolio management tools.",
-    image: tradersCircuitImage,
+    image: tcCase,
     category: "FinTech",
     industry: "Finance",
-    client: "Traders Circuit LLC",
-    duration: "14 months",
-    teamSize: "20 developers",
-    technologies: ["React", "Node.js", "WebSocket", "Redis", "PostgreSQL"],
-    results: [
-      { metric: "Trading Volume", value: "$500M+" },
-      { metric: "Platform Uptime", value: "99.9%" },
-      { metric: "User Growth", value: "+150%" }
-    ],
-    awards: ["FinTech Excellence Award"],
-    featured: false,
+    featured: true,
     link: "/projects/traderscircuit",
     icon: TrendingUp
   },
   {
     id: 7,
     title: "Good Times",
-    subtitle: "Event Management Platform",
-    description: "Comprehensive event management solution for organizing, promoting, and managing events of all sizes with integrated ticketing and analytics.",
-    image: goodTimesImage,
+    image: gtCase,
     category: "Events",
     industry: "Entertainment",
-    client: "Good Times Events",
-    duration: "7 months",
-    teamSize: "9 developers",
-    technologies: ["Vue.js", "Laravel", "MySQL", "Stripe", "SendGrid"],
-    results: [
-      { metric: "Events Managed", value: "10K+" },
-      { metric: "Ticket Sales", value: "+200%" },
-      { metric: "Customer Satisfaction", value: "4.8/5" }
-    ],
-    awards: ["Event Tech Innovation"],
-    featured: false,
+    featured: true,
     link: "/projects/goodtimes",
-    icon: Star
+    icon: PartyPopper
   },
   {
     id: 8,
+    title: "Resturant Reward App",
+    image: RrCase,
+    category: "Loyalty & Rewards",
+    industry: "Hospitality",
+    featured: false,
+    link: "",
+    icon: Utensils
+  },
+  {
+    id: 9,
+    title: "Amble",
+    image: ambleCase,
+    category: "Social",
+    industry: "Heritage",
+    featured: false,
+    link: "/projects/amble",
+    icon: Users
+  },
+  {
+    id: 10,
+    title: "Amoz",
+    image: amozCase,
+    category: "Lifestyle",
+    industry: "Consumer",
+    featured: false,
+    link: "/projects/amoz",
+    icon: Heart
+  },
+  {
+    id: 11,
+    title: "Dorf Ketal",
+    image: dkCase,
+    category: "Lifestyle",
+    industry: "Chemicals",
+    featured: false,
+    link: "",
+    icon: FlaskConical
+  },
+  {
+    id: 12,
+    title: "VIB360",
+    image: vib360Case,
+    category: "Lifestyle",
+    industry: "Consumer",
+    featured: false,
+    link: "/projects/vib360",
+    icon: Activity
+  },
+  {
+    id: 13,
+    title: "Nifty 11",
+    image: niftyCase,
+    category: "Lifestyle",
+    industry: "Consumer",
+    featured: false,
+    link: "",
+    icon: Trophy
+  },
+  {
+    id: 13,
     title: "Prosperty",
-    subtitle: "Real Estate Investment Platform",
-    description: "Digital platform for real estate investment with property analysis, portfolio management, and automated investment recommendations.",
-    image: prospertyImage,
-    category: "PropTech",
+    image: prospertyCase,
+    category: "Lifestyle",
     industry: "Real Estate",
-    client: "Prosperty Investments",
-    duration: "11 months",
-    teamSize: "13 developers",
-    technologies: ["React", "Python", "PostgreSQL", "ML", "Blockchain"],
-    results: [
-      { metric: "Investment Volume", value: "$100M+" },
-      { metric: "Portfolio Performance", value: "+25%" },
-      { metric: "User Base Growth", value: "+300%" }
-    ],
-    awards: ["PropTech Innovation Award"],
     featured: false,
     link: "/projects/prosperty",
     icon: Building2
-  }
+  },
+  {
+    id: 14,
+    title: "Simpletend",
+    image: simplitendCase,
+    category: "Health & Fitness",
+    industry: "Healthcare",
+    featured: false,
+    link: "/projects/simpletend",
+    icon: Activity
+  },
+  {
+    id: 15,
+    title: "Farm Feeder",
+    image: farmCase,
+    category: "AgriTech",
+    industry: "Agriculture",
+    featured: false,
+    link: "",
+    icon: Tractor
+  },
+  {
+    id: 16,
+    title: "Lean In  World",
+    image: leanCase,
+    category: "AgriTech",
+    industry: "Agriculture",
+    featured: false,
+    link: "",
+    icon: Globe
+  },
 ];
 
-const industries = ["All Industries", "Consumer", "Retail", "Healthcare", "Technology", "Agriculture", "Finance", "Entertainment", "Real Estate"];
-const categories = ["All Categories", "Lifestyle", "E-commerce", "Health & Fitness", "Social", "AgriTech", "FinTech", "Events", "PropTech"];
+const industries = ["All Industries", "Consumer", "Retail", "Healthcare", "Technology", "Agriculture", "Finance", "Entertainment", "Real Estate", "Heritage", "Chemicals", "Hospitality"];
+const categories = ["All Categories", "Lifestyle", "E-commerce", "Health & Fitness", "Social", "AgriTech", "FinTech", "Events", "PropTech", "Loyalty & Rewards"];
 
 export const CaseStudies = () => {
   const [searchTerm, setSearchTerm] = useState("");
@@ -214,62 +211,119 @@ export const CaseStudies = () => {
   const [showFeaturedOnly, setShowFeaturedOnly] = useState(false);
 
   // Filter case studies based on search and filters
-  const filteredCaseStudies = caseStudies.filter(study => {
-    const matchesSearch = study.title.toLowerCase().includes(searchTerm.toLowerCase()) ||
-                         study.description.toLowerCase().includes(searchTerm.toLowerCase()) ||
-                         study.technologies.some(tech => tech.toLowerCase().includes(searchTerm.toLowerCase()));
+  const filteredCaseStudies = caseStudies.filter((study) => {
+    const search = searchTerm.toLowerCase();
+
+    // Now we only check against `title`, `category`, and `industry`
+    const matchesSearch =
+      study.title.toLowerCase().includes(search) ||
+      study.category.toLowerCase().includes(search) ||
+      study.industry.toLowerCase().includes(search);
+
+    const matchesIndustry =
+      selectedIndustry === "All Industries" || study.industry === selectedIndustry;
+
+    const matchesCategory =
+      selectedCategory === "All Categories" || study.category === selectedCategory;
 
-    const matchesIndustry = selectedIndustry === "All Industries" || study.industry === selectedIndustry;
-    const matchesCategory = selectedCategory === "All Categories" || study.category === selectedCategory;
     const matchesFeatured = !showFeaturedOnly || study.featured;
 
     return matchesSearch && matchesIndustry && matchesCategory && matchesFeatured;
   });
 
+  const navigate = useNavigate();
+
   return (
-    <div className="dark min-h-screen bg-background">
-      <Navigation />
+    <div className="min-h-screen dark bg-background">
+      {/* <Navigation /> */}
 
       {/* Hero Section */}
       <section className="relative pt-24 pb-20 overflow-hidden bg-black">
+        <Helmet>
+          {/* Page Title and Meta Description */}
+          <title>Case Studies | AI Web Development Projects by WDI</title>
+          <meta
+            name="description"
+            content="Explore real-world AI web development case studies from WDI. See how we help enterprises and startups create scalable, smart digital solutions."
+          />
+
+          {/* Canonical Link */}
+          <link rel="canonical" href="https://www.wdipl.com/case-studies" />
+
+          {/* Open Graph Tags (for Facebook, LinkedIn) */}
+          <meta property="og:title" content="Case Studies | AI Web Development Projects by WDI" />
+          <meta
+            property="og:description"
+            content="Explore real-world AI web development case studies from WDI. See how we help enterprises and startups create scalable, smart digital solutions."
+          />
+          <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="Case Studies | AI Web Development Projects by WDI" />
+          <meta
+            name="twitter:description"
+            content="Explore real-world AI web development case studies from WDI. See how we help enterprises and startups create scalable, smart digital solutions."
+          />
+          <meta name="twitter:image" content="https://www.wdipl.com/your-preview-image.jpg" />
+
+          {/* Social Profiles (using JSON-LD Schema) */}
+          <script type="application/ld+json">
+            {`
+                              {
+                                "@context": "https://schema.org",
+                                "@type": "Organization",
+                                "name": "WDI",
+                                "url": "https://www.wdipl.com",
+                                "sameAs": [
+                                  "https://www.facebook.com/wdideas",
+                                  "https://www.linkedin.com/in/website-developers-india/",
+                                  "https://www.instagram.com/wdipl/"
+                                ]
+                              }
+                            `}
+          </script>
+        </Helmet>
         <div className="absolute inset-0 bg-gradient-to-br from-accent/5 via-background to-background" />
 
         <motion.div
           initial={{ opacity: 0, y: 30 }}
           animate={{ opacity: 1, y: 0 }}
           transition={{ duration: 0.8 }}
-          className="relative container mx-auto px-6 lg:px-8"
+          className="container relative px-6 mx-auto lg:px-8"
         >
           <div className="max-w-4xl mx-auto text-center">
             <Badge variant="outline" className="mb-6 border-accent/20 text-accent">
               Our Success Stories
             </Badge>
-            <h1 className="text-4xl md:text-6xl lg:text-7xl font-semibold leading-tight mb-6">
-              <span className="text-white">Case Studies That </span>
+            <h1 className="mb-6 text-4xl font-semibold leading-tight md:text-6xl lg:text-7xl">
+              <span className="text-white">Portfolios That </span>
               <span className="text-accent">Define Excellence</span>
             </h1>
-            <p className="text-xl text-gray-300 leading-relaxed max-w-3xl mx-auto">
-              Explore our portfolio of award-winning projects that have transformed businesses and delighted millions of users across diverse industries.
+            <p className="max-w-3xl mx-auto text-xl leading-relaxed text-gray-300">
+              Explore our portfolio of AI‑driven, award‑winning projects that have transformed businesses and delighted millions of users across diverse industries.
             </p>
           </div>
         </motion.div>
       </section>
 
       {/* Filters Section */}
-      <section className="py-12 bg-background border-b border-white/10">
-        <div className="container mx-auto px-6 lg:px-8">
+      <section className="py-12 border-b bg-background border-white/10">
+        <div className="container px-6 mx-auto lg:px-8">
           <motion.div
             initial={{ opacity: 0, y: 20 }}
             animate={{ opacity: 1, y: 0 }}
             transition={{ duration: 0.6, delay: 0.2 }}
             className="max-w-6xl mx-auto"
           >
-            <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-4 items-end">
+            <div className="grid items-end grid-cols-1 gap-4 md:grid-cols-2 lg:grid-cols-4">
               {/* Search */}
               <div className="relative">
-                <Search className="absolute left-3 top-1/2 transform -translate-y-1/2 text-muted-foreground w-4 h-4" />
+                <Search className="absolute w-4 h-4 transform -translate-y-1/2 left-3 top-1/2 text-muted-foreground" />
                 <Input
-                  placeholder="Search case studies..."
+                  placeholder="Search portfolios..."
                   value={searchTerm}
                   onChange={(e) => setSearchTerm(e.target.value)}
                   className="pl-10 bg-card/50 border-white/10"
@@ -308,7 +362,7 @@ export const CaseStudies = () => {
               <Button
                 variant={showFeaturedOnly ? "default" : "outline"}
                 onClick={() => setShowFeaturedOnly(!showFeaturedOnly)}
-                className="justify-center"
+                className="justify-center h-9"
               >
                 <Award className="w-4 h-4 mr-2" />
                 Featured Only
@@ -318,7 +372,7 @@ export const CaseStudies = () => {
             {/* Results Count */}
             <div className="mt-6 text-center">
               <p className="text-muted-foreground">
-                Showing {filteredCaseStudies.length} of {caseStudies.length} case studies
+                Showing {filteredCaseStudies.length} of {caseStudies.length} portfolios
               </p>
             </div>
           </motion.div>
@@ -327,9 +381,9 @@ export const CaseStudies = () => {
 
       {/* Case Studies Grid */}
       <section className="py-20 bg-background">
-        <div className="container mx-auto px-6 lg:px-8">
-          <div className="max-w-7xl mx-auto">
-            <div className="grid md:grid-cols-2 lg:grid-cols-3 gap-8">
+        <div className="container px-6 mx-auto lg:px-8">
+          <div className="mx-auto max-w-7xl">
+            <div className="grid gap-8 md:grid-cols-2 lg:grid-cols-3">
               {filteredCaseStudies.map((study, index) => {
                 const IconComponent = study.icon;
                 return (
@@ -337,34 +391,39 @@ export const CaseStudies = () => {
                     key={study.id}
                     initial={{ opacity: 0, y: 40 }}
                     whileInView={{ opacity: 1, y: 0 }}
-                    transition={{ duration: 0.6, delay: index * 0.1 }}
+                    transition={{ duration: 0.6, delay: index * 0.01 }}
                     viewport={{ once: true }}
                     whileHover={{ y: -8, scale: 1.02 }}
-                    className="group cursor-pointer"
-                    onClick={() => navigateTo(study.link)}
+                    className="cursor-pointer group"
+                    onClick={() => navigate(study.link)}
                   >
-                    <Card className="bg-card/50 backdrop-blur-md border-white/10 hover:border-accent/30 transition-all duration-500 shadow-lg hover:shadow-2xl hover:shadow-accent/10 rounded-2xl overflow-hidden h-full">
-                      <CardContent className="p-0 flex flex-col h-full">
+                    <Card className="h-full overflow-hidden transition-all duration-500 shadow-lg bg-card/50 backdrop-blur-md border-white/10 hover:border-accent/30 hover:shadow-2xl hover:shadow-accent/10 rounded-2xl"
+                      onClick={(e) => {
+                        e.stopPropagation();
+                        navigate(study.link);
+                      }}
+                    >
+                      <CardContent className="h-full p-0 pb-0 CardContentOverride">
                         {/* Image Header */}
                         <div className="relative overflow-hidden">
                           <ImageWithFallback
                             src={study.image}
                             alt={study.title}
-                            className="w-full h-48 object-cover transition-transform duration-500 group-hover:scale-110"
+                            className="object-cover w-full h-full transition-transform duration-500 group-hover:scale-110"
                           />
                           <div className="absolute inset-0 bg-gradient-to-t from-black/60 via-transparent to-transparent" />
 
                           {/* Category Badge */}
-                          <div className="absolute top-4 left-4">
-                            <Badge className="bg-accent/90 text-white border-0">
+                          <div className="absolute top-2 left-4">
+                            <Badge className="text-white border-0 bg-accent/90">
                               {study.category}
                             </Badge>
                           </div>
 
                           {/* Featured Badge */}
                           {study.featured && (
-                            <div className="absolute top-4 right-4">
-                              <div className="bg-amber-500/90 text-white px-3 py-1 rounded-full text-xs font-medium flex items-center gap-1">
+                            <div className="absolute top-2 right-4">
+                              <div className="flex items-center gap-1 px-3 py-1 text-xs font-medium text-white rounded-full bg-amber-500/90">
                                 <Star className="w-3 h-3 fill-current" />
                                 Featured
                               </div>
@@ -373,91 +432,11 @@ export const CaseStudies = () => {
 
                           {/* Icon Overlay */}
                           <div className="absolute bottom-4 left-4">
-                            <div className="w-12 h-12 bg-white/20 backdrop-blur-md rounded-full flex items-center justify-center">
+                            <div className="flex items-center justify-center w-12 h-12 rounded-full bg-white/20 backdrop-blur-md">
                               <IconComponent className="w-6 h-6 text-white" />
                             </div>
                           </div>
                         </div>
-
-                        {/* Content */}
-                        <div className="p-6 flex-1 flex flex-col">
-                          <div className="mb-4">
-                            <h3 className="text-xl font-bold text-foreground mb-2 group-hover:text-accent transition-colors">
-                              {study.title}
-                            </h3>
-                            <p className="text-accent font-medium text-sm mb-2">
-                              {study.subtitle}
-                            </p>
-                            <p className="text-muted-foreground text-sm leading-relaxed">
-                              {study.description}
-                            </p>
-                          </div>
-
-                          {/* Key Results */}
-                          <div className="grid grid-cols-2 gap-3 mb-4 p-3 bg-accent/5 rounded-lg border border-accent/10">
-                            {study.results.slice(0, 2).map((result, idx) => (
-                              <div key={idx} className="text-center">
-                                <div className="text-sm font-bold text-accent">
-                                  {result.value}
-                                </div>
-                                <div className="text-xs text-muted-foreground">
-                                  {result.metric}
-                                </div>
-                              </div>
-                            ))}
-                          </div>
-
-                          {/* Technologies */}
-                          <div className="mb-4">
-                            <div className="flex flex-wrap gap-1">
-                              {study.technologies.slice(0, 3).map((tech) => (
-                                <Badge key={tech} variant="secondary" className="text-xs bg-muted/30">
-                                  {tech}
-                                </Badge>
-                              ))}
-                              {study.technologies.length > 3 && (
-                                <Badge variant="secondary" className="text-xs bg-muted/30">
-                                  +{study.technologies.length - 3}
-                                </Badge>
-                              )}
-                            </div>
-                          </div>
-
-                          {/* Project Info */}
-                          <div className="grid grid-cols-2 gap-2 mb-4 text-xs text-muted-foreground">
-                            <div className="flex items-center gap-1">
-                              <Clock className="w-3 h-3" />
-                              {study.duration}
-                            </div>
-                            <div className="flex items-center gap-1">
-                              <Users className="w-3 h-3" />
-                              {study.teamSize}
-                            </div>
-                          </div>
-
-                          {/* Awards */}
-                          {study.awards.length > 0 && (
-                            <div className="mb-4">
-                              <div className="flex items-center gap-1 text-xs text-amber-600">
-                                <Award className="w-3 h-3" />
-                                <span className="truncate">{study.awards[0]}</span>
-                              </div>
-                            </div>
-                          )}
-
-                          {/* CTA Button */}
-                          <Button 
-                            variant="ghost" 
-                            className="w-full justify-between text-accent hover:text-accent hover:bg-accent/10 group-hover:translate-x-1 transition-all duration-300 mt-auto"
-                            onClick={(e) => {
-                              e.stopPropagation();
-                              navigateTo(study.link);
-                            }}
-                          >
-                            <span className="text-sm">View Case Study</span>
-                            <ArrowRight className="w-4 h-4" />
-                          </Button>
-                        </div>
                       </CardContent>
                     </Card>
                   </motion.div>
@@ -470,25 +449,25 @@ export const CaseStudies = () => {
 
       {/* CTA Section */}
       <section className="py-20 bg-black">
-        <div className="container mx-auto px-6 lg:px-8">
+        <div className="container px-6 mx-auto lg:px-8">
           <motion.div
             initial={{ opacity: 0, y: 30 }}
             whileInView={{ opacity: 1, y: 0 }}
             transition={{ duration: 0.8 }}
             viewport={{ once: true }}
-            className="text-center max-w-4xl mx-auto"
+            className="max-w-4xl mx-auto text-center"
           >
-            <h2 className="text-3xl lg:text-4xl font-semibold text-white mb-6">
+            <h2 className="mb-6 text-3xl font-semibold text-white lg:text-4xl">
               Ready to Create Your Own Success Story?
             </h2>
-            <p className="text-xl text-gray-300 leading-relaxed mb-8">
-              Join the ranks of industry leaders who have transformed their businesses with our innovative solutions.
+            <p className="mb-8 text-xl leading-relaxed text-gray-300">
+              Join the ranks of industry leaders who have transformed their businesses with our AI‑driven innovative solutions.
             </p>
-            <div className="flex flex-col sm:flex-row gap-4 justify-center">
+            <div className="flex flex-col justify-center gap-4 sm:flex-row">
               <Button
                 size="lg"
-                className="bg-accent hover:bg-accent/90 text-white"
-                onClick={() => navigateTo("/start-a-project")}
+                className="text-white bg-accent hover:bg-accent/90"
+                onClick={() => navigate("/start-a-project")}
               >
                 Start Your Project
                 <ArrowUpRight className="w-4 h-4 ml-2" />
@@ -496,7 +475,7 @@ export const CaseStudies = () => {
               <Button
                 size="lg"
                 variant="outline"
-                onClick={() => navigateTo("/contact-us")}
+                onClick={() => navigate("/contact-us")}
               >
                 Schedule Consultation
                 <ArrowRight className="w-4 h-4 ml-2" />
@@ -506,7 +485,7 @@ export const CaseStudies = () => {
         </div>
       </section>
 
-      <Footer />
+      {/* <Footer /> */}
     </div>
   );
 };

pages/CaseStudyComingSoon.tsx

@@ -0,0 +1,355 @@
+import React from 'react';
+import { 
+  ArrowRight, 
+  Clock, 
+  FileText, 
+  Lightbulb, 
+  Users, 
+  Code2, 
+  Smartphone,
+  Building2,
+  Heart,
+  ShoppingCart,
+  GraduationCap,
+  Briefcase,
+  Cpu,
+  Utensils,
+  MapPin,
+  Scale,
+  Leaf,
+  Music,
+  MessageCircle,
+  Truck,
+  Star as StarIcon,
+  Church,
+  Shield,
+  Database,
+  Zap
+} from 'lucide-react';
+import { Navigation } from '@/components/Navigation';
+import { Badge } from '@/components/ui/badge';
+import { Card, CardContent } from '@/components/ui/card';
+import { Button } from '@/components/ui/button';
+import { Footer } from '@/components/Footer';
+import { useNavigate } from 'react-router-dom';
+
+interface CaseStudyComingSoonProps {
+  projectTitle?: string;
+  industry?: string;
+  subtitle?: string;
+  expectedLaunch?: string;
+  description?: string;
+  services?: string[];
+  technologies?: string[];
+}
+
+export const CaseStudyComingSoon: React.FC<CaseStudyComingSoonProps> = ({
+  projectTitle,
+  industry = "Technology",
+  subtitle,
+  expectedLaunch = "Q2 2024",
+  description,
+  services = [],
+  technologies = []
+}) => {
+  const getIndustryIcon = (industry: string) => {
+    const icons = {
+      "Technology": Smartphone,
+      "E-commerce": ShoppingCart,
+      "Education": GraduationCap,
+      "FinTech": Building2,
+      "Entertainment": Music,
+      "Real Estate": Building2,
+      "IoT": Cpu,
+      "Healthcare": Heart,
+      "Social Media": MessageCircle,
+      "Government": Shield,
+      "Automotive": Building2,
+      "Food & Beverage": Utensils,
+      "Agriculture": Leaf,
+      "Enterprise Software": Database,
+      "Travel": MapPin,
+      "Legal": Scale,
+      "Logistics": Truck,
+      "Wellness": StarIcon,
+      "Religious": Church,
+      "HR Tech": Briefcase
+    };
+    return icons[industry as keyof typeof icons] || Building2;
+  };
+
+  const navigate = useNavigate();
+
+  const IconComponent = getIndustryIcon(industry);
+
+  return (
+    <div className="dark min-h-screen bg-background">
+      {/* <Navigation /> */}
+      
+      {/* Hero Section */}
+      <section className="pt-24 pb-16 bg-background relative overflow-hidden">
+        {/* Background Pattern */}
+        <div className="absolute inset-0 opacity-5">
+          <div className="absolute inset-0 bg-[linear-gradient(45deg,transparent_25%,rgba(229,25,94,0.1)_50%,transparent_75%)] bg-[length:60px_60px]" />
+        </div>
+        
+        <div className="container mx-auto px-6 lg:px-8 relative">
+          <div className="max-w-4xl mx-auto text-center">
+            {/* Coming Soon Badge */}
+            <div className="flex items-center justify-center gap-2 mb-6">
+              <Clock className="w-5 h-5 text-[#E5195E]" />
+              <Badge variant="outline" className="border-[#E5195E]/20 text-[#E5195E] font-manrope">
+                Case Study Coming Soon
+              </Badge>
+            </div>
+
+            {/* Project Title */}
+            <h1 className="text-4xl md:text-6xl font-bold mb-6 bg-gradient-to-r from-white via-white to-white/80 bg-clip-text text-transparent font-manrope">
+              {projectTitle}
+            </h1>
+
+            {/* Subtitle */}
+            {subtitle && (
+              <p className="text-xl md:text-2xl text-white/80 mb-8 font-manrope">
+                {subtitle}
+              </p>
+            )}
+
+            {/* Industry Badge */}
+            <div className="flex items-center justify-center gap-2 mb-8">
+              <Badge 
+                variant="outline" 
+                className="bg-white/5 border-white/20 text-white font-manrope px-4 py-2"
+              >
+                <IconComponent className="w-4 h-4 mr-2" />
+                {industry}
+              </Badge>
+            </div>
+
+            {/* Description */}
+            {description ? (
+              <p className="text-lg text-muted-foreground mb-8 max-w-3xl mx-auto font-manrope">
+                {description}
+              </p>
+            ) : (
+              <p className="text-lg text-muted-foreground mb-8 max-w-3xl mx-auto font-manrope">
+                We're currently working on documenting this exciting project case study. 
+                Our team is gathering comprehensive insights, results, and learnings to share with you soon.
+              </p>
+            )}
+
+            {/* Expected Launch */}
+            <div className="flex items-center justify-center gap-6 text-sm text-muted-foreground font-manrope mb-8">
+              <div className="flex items-center gap-2">
+                <Clock className="w-4 h-4 text-[#E5195E]" />
+                <span>Expected: {expectedLaunch}</span>
+              </div>
+            </div>
+          </div>
+        </div>
+      </section>
+
+      {/* What to Expect Section */}
+      <section className="py-16 bg-card/30 border-y border-white/10">
+        <div className="container mx-auto px-6 lg:px-8">
+          <div className="max-w-4xl mx-auto text-center mb-12">
+            <h2 className="text-3xl md:text-4xl font-bold mb-4 text-white font-manrope">
+              What to Expect
+            </h2>
+            <p className="text-lg text-muted-foreground font-manrope">
+              This case study will provide detailed insights into our development process, challenges overcome, and results achieved.
+            </p>
+          </div>
+
+          <div className="grid grid-cols-1 md:grid-cols-3 gap-8 max-w-5xl mx-auto">
+            {/* Development Process */}
+            <Card className="bg-card/50 backdrop-blur-sm border-white/10 hover:border-white/20 transition-colors duration-300">
+              <CardContent className="p-6 text-center">
+                <div className="w-16 h-16 mx-auto mb-4 rounded-full bg-[#E5195E]/10 flex items-center justify-center">
+                  <Code2 className="w-8 h-8 text-[#E5195E]" />
+                </div>
+                <h3 className="text-xl font-bold text-white mb-3 font-manrope">
+                  Development Journey
+                </h3>
+                <p className="text-muted-foreground font-manrope">
+                  Detailed breakdown of our technical approach, architecture decisions, and development methodology.
+                </p>
+              </CardContent>
+            </Card>
+
+            {/* Challenges & Solutions */}
+            <Card className="bg-card/50 backdrop-blur-sm border-white/10 hover:border-white/20 transition-colors duration-300">
+              <CardContent className="p-6 text-center">
+                <div className="w-16 h-16 mx-auto mb-4 rounded-full bg-[#E5195E]/10 flex items-center justify-center">
+                  <Lightbulb className="w-8 h-8 text-[#E5195E]" />
+                </div>
+                <h3 className="text-xl font-bold text-white mb-3 font-manrope">
+                  Challenges & Solutions
+                </h3>
+                <p className="text-muted-foreground font-manrope">
+                  Key obstacles encountered during development and innovative solutions implemented by our team.
+                </p>
+              </CardContent>
+            </Card>
+
+            {/* Results & Impact */}
+            <Card className="bg-card/50 backdrop-blur-sm border-white/10 hover:border-white/20 transition-colors duration-300">
+              <CardContent className="p-6 text-center">
+                <div className="w-16 h-16 mx-auto mb-4 rounded-full bg-[#E5195E]/10 flex items-center justify-center">
+                  <Users className="w-8 h-8 text-[#E5195E]" />
+                </div>
+                <h3 className="text-xl font-bold text-white mb-3 font-manrope">
+                  Results & Impact
+                </h3>
+                <p className="text-muted-foreground font-manrope">
+                  Measurable outcomes, user feedback, and business impact achieved through our solution.
+                </p>
+              </CardContent>
+            </Card>
+          </div>
+        </div>
+      </section>
+
+      {/* Project Preview Section */}
+      {(services.length > 0 || technologies.length > 0) && (
+        <section className="py-16 bg-background">
+          <div className="container mx-auto px-6 lg:px-8">
+            <div className="max-w-4xl mx-auto">
+              <h2 className="text-3xl md:text-4xl font-bold mb-12 text-center text-white font-manrope">
+                Project Overview
+              </h2>
+              
+              <div className="grid grid-cols-1 md:grid-cols-2 gap-8">
+                {/* Services */}
+                {services.length > 0 && (
+                  <Card className="bg-card/50 backdrop-blur-sm border-white/10">
+                    <CardContent className="p-6">
+                      <h3 className="text-xl font-bold text-white mb-4 font-manrope">
+                        Services Provided
+                      </h3>
+                      <div className="flex flex-wrap gap-2">
+                        {services.map((service, index) => (
+                          <Badge 
+                            key={index}
+                            variant="outline" 
+                            className="bg-white/5 border-white/20 text-white font-manrope"
+                          >
+                            {service}
+                          </Badge>
+                        ))}
+                      </div>
+                    </CardContent>
+                  </Card>
+                )}
+
+                {/* Technologies */}
+                {technologies.length > 0 && (
+                  <Card className="bg-card/50 backdrop-blur-sm border-white/10">
+                    <CardContent className="p-6">
+                      <h3 className="text-xl font-bold text-white mb-4 font-manrope">
+                        Technologies Used
+                      </h3>
+                      <div className="flex flex-wrap gap-2">
+                        {technologies.map((tech, index) => (
+                          <Badge 
+                            key={index}
+                            variant="outline" 
+                            className="bg-[#E5195E]/10 border-[#E5195E]/30 text-[#E5195E] font-manrope"
+                          >
+                            {tech}
+                          </Badge>
+                        ))}
+                      </div>
+                    </CardContent>
+                  </Card>
+                )}
+              </div>
+            </div>
+          </div>
+        </section>
+      )}
+
+      {/* Progress Indicator */}
+      <section className="py-16 bg-card/30 border-y border-white/10">
+        <div className="container mx-auto px-6 lg:px-8">
+          <div className="max-w-2xl mx-auto text-center">
+            <h2 className="text-2xl font-bold mb-8 text-white font-manrope">
+              Documentation Progress
+            </h2>
+            
+            {/* Progress Bar */}
+            <div className="mb-8">
+              <div className="flex justify-between text-sm text-muted-foreground mb-2 font-manrope">
+                <span>Research & Analysis</span>
+                <span>75%</span>
+              </div>
+              <div className="w-full bg-white/10 rounded-full h-2">
+                <div className="bg-[#E5195E] h-2 rounded-full w-3/4 transition-all duration-300"></div>
+              </div>
+            </div>
+
+            <p className="text-muted-foreground mb-8 font-manrope">
+              Our team is currently gathering detailed project insights, conducting stakeholder interviews, 
+              and preparing comprehensive documentation to showcase this project's journey and impact.
+            </p>
+
+            {/* Subscribe for Updates */}
+            <Card className="bg-card/50 backdrop-blur-sm border-white/10 p-6">
+              <h3 className="text-lg font-bold text-white mb-4 font-manrope">
+                Get Notified When Published
+              </h3>
+              <p className="text-sm text-muted-foreground mb-4 font-manrope">
+                Join our mailing list to be the first to know when this case study goes live.
+              </p>
+              <Button 
+                onClick={() => navigate('/contact-us')}
+                className="bg-[#E5195E] hover:bg-[#E5195E]/90 text-white border-none font-manrope"
+              >
+                Notify Me
+                <ArrowRight className="w-4 h-4 ml-2" />
+              </Button>
+            </Card>
+          </div>
+        </div>
+      </section>
+
+      {/* Explore Other Case Studies */}
+      <section className="py-16 bg-background">
+        <div className="container mx-auto px-6 lg:px-8">
+          <div className="text-center max-w-4xl mx-auto">
+            <h2 className="text-3xl md:text-4xl font-bold mb-6 text-white font-manrope">
+              Explore Our Published Case Studies
+            </h2>
+            <p className="text-lg text-muted-foreground mb-8 font-manrope">
+              While you wait for this case study, discover other successful projects we've completed for our clients.
+            </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 border-none font-manrope"
+                onClick={() => navigate('/case-studies')}
+              >
+                View All Case Studies
+                <ArrowRight className="w-5 h-5 ml-2" />
+              </Button>
+              <Button 
+                size="lg"
+                variant="outline"
+                className="border-white/20 text-white hover:bg-white/10 font-manrope"
+                onClick={() => navigate('/start-a-project')}
+              >
+                Start Your Project
+              </Button>
+            </div>
+          </div>
+        </div>
+      </section>
+
+      {/* <Footer /> */}
+    </div>
+  );
+};
+
+
+
+export default CaseStudyComingSoon;

pages/ClientSupport.tsx

@@ -240,7 +240,7 @@ export const ClientSupport = () => {
 
   return (
     <div className="dark min-h-screen bg-background">
-      <Navigation />
+      {/* <Navigation /> */}
 
       {/* Hero Section */}
       <section className="pt-24 pb-16 bg-background">
@@ -776,7 +776,7 @@ export const ClientSupport = () => {
         </div>
       </section>
 
-      <Footer />
+      {/* <Footer /> */}
     </div>
   );
 };

pages/ClientTestimonials.tsx

@@ -4,9 +4,27 @@ import { Footer } from "../components/Footer";
 import { Button } from "../components/ui/button";
 import { Badge } from "../components/ui/badge";
 import { Card, CardContent } from "../components/ui/card";
-import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "../components/ui/select";
-import { Star, Quote, Play, ArrowRight, Building2, Heart, ShoppingCart, GraduationCap, Users, Award } from "lucide-react";
-import { navigateTo } from "../App";
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from "../components/ui/select";
+import {
+  Star,
+  Quote,
+  Play,
+  ArrowRight,
+  Building2,
+  Heart,
+  ShoppingCart,
+  GraduationCap,
+  Users,
+  Award,
+} from "lucide-react";
+import { Helmet } from "react-helmet-async";
+import { useNavigate } from "react-router-dom";
 
 export const ClientTestimonials = () => {
   const [selectedIndustry, setSelectedIndustry] = useState("all");
@@ -20,7 +38,7 @@ export const ClientTestimonials = () => {
     "Education",
     "Manufacturing",
     "Real Estate",
-    "Logistics"
+    "Logistics",
   ];
 
   const services = [
@@ -31,13 +49,14 @@ export const ClientTestimonials = () => {
     "Cloud Solutions",
     "UI/UX Design",
     "DevOps",
-    "Consulting"
+    "Consulting",
   ];
 
   const featuredTestimonials = [
     {
       id: 1,
-      quote: "WDI brought SimpliTend to life with precision. A complex MVP, flawlessly executed and beautifully designed.",
+      quote:
+        "WDI brought SimpliTend to life with precision. A complex MVP, flawlessly executed and beautifully designed.",
       client: "Sayeed Saachi",
       title: "Founder",
       company: "Simply Tend",
@@ -45,11 +64,12 @@ export const ClientTestimonials = () => {
       service: "Web Development",
       rating: 5,
       projectType: "SimpliTend",
-      hasVideo: false
+      hasVideo: false,
     },
     {
       id: 2,
-      quote: "WDI turned a complex, multi-layered vision into a streamlined digital product. A highly capable and responsive team.",
+      quote:
+        "WDI turned a complex, multi-layered vision into a streamlined digital product. A highly capable and responsive team.",
       client: "Aimee Zoho",
       title: "Founder",
       company: "Aimee Zhao",
@@ -57,11 +77,12 @@ export const ClientTestimonials = () => {
       service: "Web Development",
       rating: 5,
       projectType: "Lean In World",
-      hasVideo: false
+      hasVideo: false,
     },
     {
       id: 3,
-      quote: "WDI guided us from hybrid frustration to native transformation. Rock-solid delivery, scalable systems, and impressive uptime.",
+      quote:
+        "WDI guided us from hybrid frustration to native transformation. Rock-solid delivery, scalable systems, and impressive uptime.",
       client: "Akarsh K Hebbar",
       title: "Founder",
       company: "WOKA Creations Pvt. Ltd",
@@ -69,11 +90,12 @@ export const ClientTestimonials = () => {
       service: "Mobile Development",
       rating: 5,
       projectType: "WOKA",
-      hasVideo: false
+      hasVideo: false,
     },
     {
       id: 4,
-      quote: "WDI executed our vision perfectly. The design, user flow, and admin controls are just what we needed.",
+      quote:
+        "WDI executed our vision perfectly. The design, user flow, and admin controls are just what we needed.",
       client: "Al Yusuf-Humaira",
       title: "Founder",
       company: "Safwan Yusuf Shaikh",
@@ -81,11 +103,12 @@ export const ClientTestimonials = () => {
       service: "Web Development",
       rating: 5,
       projectType: "SSA",
-      hasVideo: false
+      hasVideo: false,
     },
     {
       id: 5,
-      quote: "WDI delivered exactly what we needed—a scalable, secure, and smart RFQ engine.",
+      quote:
+        "WDI delivered exactly what we needed—a scalable, secure, and smart RFQ engine.",
       client: "Amol Kasar",
       title: "Manager",
       company: "Dorf Ketal",
@@ -93,11 +116,12 @@ export const ClientTestimonials = () => {
       service: "Web Development",
       rating: 5,
       projectType: "Dorf Ketal",
-      hasVideo: false
+      hasVideo: false,
     },
     {
       id: 6,
-      quote: "WDI helped us modernize our digital presence quickly—professional, responsive, and pixel-perfect.",
+      quote:
+        "WDI helped us modernize our digital presence quickly—professional, responsive, and pixel-perfect.",
       client: "Anesh Kavle",
       title: "Founder",
       company: "Dayal Tours & Travel",
@@ -105,11 +129,12 @@ export const ClientTestimonials = () => {
       service: "Web Development",
       rating: 5,
       projectType: "Dayal Tours & Travel",
-      hasVideo: false
+      hasVideo: false,
     },
     {
       id: 7,
-      quote: "WDI delivered beyond expectations. Their speed, structure, and collaborative energy made this complex platform a reality.",
+      quote:
+        "WDI delivered beyond expectations. Their speed, structure, and collaborative energy made this complex platform a reality.",
       client: "Edward",
       title: "Founder",
       company: "ReGroup Application Development",
@@ -117,11 +142,12 @@ export const ClientTestimonials = () => {
       service: "Web Development",
       rating: 5,
       projectType: "ReGroup",
-      hasVideo: false
+      hasVideo: false,
     },
     {
       id: 8,
-      quote: "WDI translated a complex financial vision into a user-friendly app. Their execution was on point.",
+      quote:
+        "WDI translated a complex financial vision into a user-friendly app. Their execution was on point.",
       client: "Faisal",
       title: "Founder",
       company: "Tanami Capital",
@@ -129,14 +155,15 @@ export const ClientTestimonials = () => {
       service: "Mobile Development",
       rating: 5,
       projectType: "Tanami Capital",
-      hasVideo: false
-    }
+      hasVideo: false,
+    },
   ];
 
   const testimonials = [
     {
       id: 9,
-      quote: "WDI's CRM gave us an exhibition edge—OCR scanning changed the game.",
+      quote:
+        "WDI's CRM gave us an exhibition edge—OCR scanning changed the game.",
       client: "Hiten Dedhia",
       title: "Director",
       company: "Trixie Impex Pvt Ltd",
@@ -144,11 +171,12 @@ export const ClientTestimonials = () => {
       service: "Web Development",
       rating: 5,
       projectType: "Exhibition CRM System",
-      hasVideo: false
+      hasVideo: false,
     },
     {
       id: 10,
-      quote: "WDI made fintech frictionless. From onboarding to investment, it flows like a smart conversation.",
+      quote:
+        "WDI made fintech frictionless. From onboarding to investment, it flows like a smart conversation.",
       client: "Rakesh Bunathar",
       title: "Founder",
       company: "SuperMoney Advisor Pvt Ltd",
@@ -156,11 +184,12 @@ export const ClientTestimonials = () => {
       service: "Mobile Development",
       rating: 5,
       projectType: "SuperMoney Advisor App",
-      hasVideo: false
+      hasVideo: false,
     },
     {
       id: 11,
-      quote: "WDI helped us turn complex property cycles into an intuitive digital experience.",
+      quote:
+        "WDI helped us turn complex property cycles into an intuitive digital experience.",
       client: "Team Prosperty",
       title: "Team",
       company: "Prosperty Infra & Reality Pvt. Ltd",
@@ -168,11 +197,12 @@ export const ClientTestimonials = () => {
       service: "Web Development",
       rating: 5,
       projectType: "Prosperty Platform",
-      hasVideo: false
+      hasVideo: false,
     },
     {
       id: 12,
-      quote: "WDI executed my multi-phase platform with confidence and clarity. They turned ideas into an integrated system faster than expected.",
+      quote:
+        "WDI executed my multi-phase platform with confidence and clarity. They turned ideas into an integrated system faster than expected.",
       client: "Mr. Oja Paul",
       title: "Founder",
       company: "Ojo Paul Enterprises",
@@ -180,11 +210,12 @@ export const ClientTestimonials = () => {
       service: "Web Development",
       rating: 5,
       projectType: "Angel-Driven Marketplace Platform",
-      hasVideo: false
+      hasVideo: false,
     },
     {
       id: 13,
-      quote: "WDI helped bring Moving Cargo to life—from vision to delivery, the process was smooth and professional.",
+      quote:
+        "WDI helped bring Moving Cargo to life—from vision to delivery, the process was smooth and professional.",
       client: "Mr Nicholas Shaak",
       title: "Founder",
       company: "Moving Cargo",
@@ -192,11 +223,12 @@ export const ClientTestimonials = () => {
       service: "Web Development",
       rating: 5,
       projectType: "Moving Cargo",
-      hasVideo: false
+      hasVideo: false,
     },
     {
       id: 14,
-      quote: "WDI transformed our leadership vision into a smart, scalable platform our teams love.",
+      quote:
+        "WDI transformed our leadership vision into a smart, scalable platform our teams love.",
       client: "KLC",
       title: "Team",
       company: "KLC",
@@ -204,11 +236,12 @@ export const ClientTestimonials = () => {
       service: "Web Development",
       rating: 5,
       projectType: "KLC Learning and Content Management Platform",
-      hasVideo: false
+      hasVideo: false,
     },
     {
       id: 15,
-      quote: "WDI delivered a full-stack health-tech solution with precision and transparency.",
+      quote:
+        "WDI delivered a full-stack health-tech solution with precision and transparency.",
       client: "Priyank Mehta",
       title: "Founder",
       company: "Get Set Fit",
@@ -216,11 +249,12 @@ export const ClientTestimonials = () => {
       service: "Mobile Development",
       rating: 5,
       projectType: "GSF Mobie App",
-      hasVideo: false
+      hasVideo: false,
     },
     {
       id: 16,
-      quote: "WDI built more than an app—they engineered a habit-forming digital solution with beautiful UX and great scalability.",
+      quote:
+        "WDI built more than an app—they engineered a habit-forming digital solution with beautiful UX and great scalability.",
       client: "Rishabh Jain",
       title: "Founder",
       company: "RanOutOf",
@@ -228,11 +262,12 @@ export const ClientTestimonials = () => {
       service: "Mobile Development",
       rating: 5,
       projectType: "Grocery List Mobile Application",
-      hasVideo: false
+      hasVideo: false,
     },
     {
       id: 17,
-      quote: "WDI built more than an app—they digitized our entire feed ecosystem.",
+      quote:
+        "WDI built more than an app—they digitized our entire feed ecosystem.",
       client: "Kevin",
       title: "Founder",
       company: "Farm Feeder",
@@ -240,11 +275,12 @@ export const ClientTestimonials = () => {
       service: "Mobile Development",
       rating: 5,
       projectType: "Farm Feeder App",
-      hasVideo: false
+      hasVideo: false,
     },
     {
       id: 18,
-      quote: "WDI didn't just deliver code—they delivered a digital transformation. Scalable, stable, and beautifully engineered.",
+      quote:
+        "WDI didn't just deliver code—they delivered a digital transformation. Scalable, stable, and beautifully engineered.",
       client: "Jay Ruparel",
       title: "Founder",
       company: "CityCards Global Pvt. Ltd",
@@ -253,11 +289,12 @@ export const ClientTestimonials = () => {
       rating: 5,
       projectType: "Melbourne City Card",
       hasVideo: false,
-      featured: false
+      featured: false,
     },
     {
       id: 19,
-      quote: "WDI turned our idea into a highly usable mobile platform—sleek, stable, and scalable.",
+      quote:
+        "WDI turned our idea into a highly usable mobile platform—sleek, stable, and scalable.",
       client: "Shannon",
       title: "Founder",
       company: "Cheers to the Season LLC",
@@ -266,11 +303,12 @@ export const ClientTestimonials = () => {
       rating: 5,
       projectType: "Cheers to the Season Mobile App Redesign",
       hasVideo: false,
-      featured: false
+      featured: false,
     },
     {
       id: 20,
-      quote: "WDI gave us a high-performance platform to blend financial learning with fun. Seamless and smart.",
+      quote:
+        "WDI gave us a high-performance platform to blend financial learning with fun. Seamless and smart.",
       client: "Ravi Sharma",
       title: "Founder",
       company: "Bulls Bears Edusys Pvt. Ltd",
@@ -279,11 +317,12 @@ export const ClientTestimonials = () => {
       rating: 5,
       projectType: "Nifty Eleven Fantasy Trading App",
       hasVideo: false,
-      featured: false
+      featured: false,
     },
     {
       id: 21,
-      quote: "The new Amble App makes heritage immersive, intuitive, and scalable—exactly what we envisioned.",
+      quote:
+        "The new Amble App makes heritage immersive, intuitive, and scalable—exactly what we envisioned.",
       client: "RPG Foundation",
       title: "Team",
       company: "RPG Foundation",
@@ -292,11 +331,12 @@ export const ClientTestimonials = () => {
       rating: 5,
       projectType: "Amble App - New Version",
       hasVideo: false,
-      featured: false
+      featured: false,
     },
     {
       id: 22,
-      quote: "WDI delivered a deeply integrated, future-ready system that cut our admin overheads drastically.",
+      quote:
+        "WDI delivered a deeply integrated, future-ready system that cut our admin overheads drastically.",
       client: "Ravi Bajaj",
       title: "Manager",
       company: "Cnergyis Infotech India Pvt. Ltd. (ZingHR) - Ravi Bajaj",
@@ -305,11 +345,12 @@ export const ClientTestimonials = () => {
       rating: 5,
       projectType: "Travel Portal",
       hasVideo: false,
-      featured: false
+      featured: false,
     },
     {
       id: 23,
-      quote: "WDI executed my multi-phase platform with confidence and clarity. They turned ideas into an integrated system faster than expected.",
+      quote:
+        "WDI executed my multi-phase platform with confidence and clarity. They turned ideas into an integrated system faster than expected.",
       client: "Matt Weightman",
       title: "Founder",
       company: "MOT & Vehicle Management Portal",
@@ -318,51 +359,105 @@ export const ClientTestimonials = () => {
       rating: 5,
       projectType: "MOT & Vehicle Management Portal",
       hasVideo: false,
-      featured: false
-    }
+      featured: false,
+    },
   ];
 
   const allTestimonials = [...featuredTestimonials, ...testimonials];
 
-  const filteredTestimonials = allTestimonials.filter(testimonial => {
-    const matchesIndustry = selectedIndustry === "all" || testimonial.industry === selectedIndustry;
-    const matchesService = selectedService === "all" || testimonial.service === selectedService;
+  const filteredTestimonials = allTestimonials.filter((testimonial) => {
+    const matchesIndustry =
+      selectedIndustry === "all" || testimonial.industry === selectedIndustry;
+    const matchesService =
+      selectedService === "all" || testimonial.service === selectedService;
 
     return matchesIndustry && matchesService;
   });
 
   const getIndustryIcon = (industry: string) => {
     const icons = {
-      "Healthcare": Heart,
-      "FinTech": Building2,
+      Healthcare: Heart,
+      FinTech: Building2,
       "E-commerce": ShoppingCart,
-      "Education": GraduationCap,
-      "Manufacturing": Building2,
+      Education: GraduationCap,
+      Manufacturing: Building2,
       "Real Estate": Building2,
-      "Logistics": Building2
+      Logistics: Building2,
     };
     return icons[industry as keyof typeof icons] || Building2;
   };
 
+  const navigate = useNavigate();
+
   return (
     <div className="dark min-h-screen bg-background">
-      <Navigation />
+      {/* <Navigation /> */}
 
       {/* Hero Section */}
       <section className="pt-24 pb-16 bg-background">
+        <Helmet>
+          {/* Page Title and Meta Description */}
+          <title>Client Reviews | AI App Development Success Stories</title>
+          <meta
+            name="description"
+            content="See what clients say about WDI’s AI app development. Discover how startups and enterprises achieved success with our innovative digital products."
+          />
+
+          {/* Canonical Link */}
+          <link rel="canonical" href="https://www.wdipl.com/resources/client-testimonials" />
+
+          {/* Open Graph Tags (for Facebook, LinkedIn) */}
+          <meta property="og:title" content="Client Reviews | AI App Development Success Stories" />
+          <meta
+            property="og:description"
+            content="See what clients say about WDI’s AI app development. Discover how startups and enterprises achieved success with our innovative digital products."
+          />
+          <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="Client Reviews | AI App Development Success Stories" />
+          <meta
+            name="twitter:description"
+            content="See what clients say about WDI’s AI app development. Discover how startups and enterprises achieved success with our innovative digital products."
+          />
+          <meta name="twitter:image" content="https://www.wdipl.com/your-preview-image.jpg" />
+
+          {/* Social Profiles (using JSON-LD Schema) */}
+          <script type="application/ld+json">
+            {`
+                              {
+                                "@context": "https://schema.org",
+                                "@type": "Organization",
+                                "name": "WDI",
+                                "url": "https://www.wdipl.com",
+                                "sameAs": [
+                                  "https://www.facebook.com/wdideas",
+                                  "https://www.linkedin.com/in/website-developers-india/",
+                                  "https://www.instagram.com/wdipl/"
+                                ]
+                              }
+                            `}
+          </script>
+        </Helmet>
         <div className="container mx-auto px-6 lg:px-8">
           <div className="max-w-4xl mx-auto text-center">
             <div className="flex items-center justify-center gap-2 mb-6">
               <Star className="w-6 h-6 text-[#E5195E]" />
-              <Badge variant="outline" className="border-[#E5195E]/20 text-[#E5195E]">
+              <Badge
+                variant="outline"
+                className="border-[#E5195E]/20 text-[#E5195E]"
+              >
                 Client Testimonials
               </Badge>
             </div>
             <h1 className="text-4xl md:text-6xl font-bold mb-6 bg-gradient-to-r from-white via-white to-white/80 bg-clip-text text-transparent">
-              Client Testimonials: Our Clients' Success, Our Greatest Reward
+              Client Testimonials: Real Results, Real Impact
             </h1>
             <p className="text-lg text-muted-foreground mb-8 max-w-3xl mx-auto">
-              Nothing speaks louder than the words of our satisfied clients. At WDI, we're dedicated to building strong partnerships and delivering exceptional results. Read what our clients have to say about their experiences working with our dedicated teams and innovative solutions.
+              There’s no better proof of success than feedback from our clients. At WDI, we focus on building long‑term, AI‑driven collaborations and delivering measurable business outcomes. Explore what our clients have to say about their experience with our expert teams and innovative app and web solutions.
             </p>
           </div>
         </div>
@@ -404,13 +499,19 @@ export const ClientTestimonials = () => {
       <section className="py-8 bg-background border-y border-white/10">
         <div className="container mx-auto px-6 lg:px-8">
           <div className="flex flex-col lg:flex-row gap-4 items-center justify-center">
-            <Select value={selectedIndustry} onValueChange={setSelectedIndustry}>
+            <Select
+              value={selectedIndustry}
+              onValueChange={setSelectedIndustry}
+            >
               <SelectTrigger className="w-48 bg-card/50 border-white/10 text-white">
                 <SelectValue placeholder="Industry" className="text-white" />
               </SelectTrigger>
               <SelectContent>
                 {industries.map((industry) => (
-                  <SelectItem key={industry} value={industry === "All Industries" ? "all" : industry}>
+                  <SelectItem
+                    key={industry}
+                    value={industry === "All Industries" ? "all" : industry}
+                  >
                     {industry}
                   </SelectItem>
                 ))}
@@ -423,7 +524,10 @@ export const ClientTestimonials = () => {
               </SelectTrigger>
               <SelectContent>
                 {services.map((service) => (
-                  <SelectItem key={service} value={service === "All Services" ? "all" : service}>
+                  <SelectItem
+                    key={service}
+                    value={service === "All Services" ? "all" : service}
+                  >
                     {service}
                   </SelectItem>
                 ))}
@@ -433,27 +537,38 @@ export const ClientTestimonials = () => {
 
           <div className="text-center mt-4">
             <span className="text-sm text-muted-foreground">
-              {filteredTestimonials.length} testimonial{filteredTestimonials.length !== 1 ? 's' : ''} found
+              {filteredTestimonials.length} testimonial
+              {filteredTestimonials.length !== 1 ? "s" : ""} found
             </span>
           </div>
         </div>
       </section>
 
       {/* Featured Testimonials */}
-      {featuredTestimonials.some(t => filteredTestimonials.includes(t)) && (
+      {featuredTestimonials.some((t) => filteredTestimonials.includes(t)) && (
         <section className="py-16 bg-background">
           <div className="container mx-auto px-6 lg:px-8">
-            <h2 className="text-3xl font-bold text-white mb-12 text-center">Client Stories</h2>
+            <h2 className="text-3xl font-bold text-white mb-12 text-center">
+              Client Stories
+            </h2>
 
             <div className="grid lg:grid-cols-3 gap-8">
-              {featuredTestimonials.filter(t => filteredTestimonials.includes(t)).map((testimonial) => {
+              {featuredTestimonials
+                .filter((t) => filteredTestimonials.includes(t))
+                .map((testimonial) => {
                   const IndustryIcon = getIndustryIcon(testimonial.industry);
                   return (
-                  <Card key={testimonial.id} className="bg-card/50 border-white/10 hover:border-[#E5195E]/30 transition-all duration-300 group relative overflow-hidden">
+                    <Card
+                      key={testimonial.id}
+                      className="bg-card/50 border-white/10 hover:border-[#E5195E]/30 transition-all duration-300 group relative overflow-hidden"
+                    >
                       <CardContent className="p-6">
                         <div className="flex justify-center gap-1 mb-6">
                           {[...Array(testimonial.rating)].map((_, i) => (
-                          <Star key={i} className="w-5 h-5 text-yellow-400 fill-current" />
+                            <Star
+                              key={i}
+                              className="w-5 h-5 text-yellow-400 fill-current"
+                            />
                           ))}
                         </div>
 
@@ -466,19 +581,31 @@ export const ClientTestimonials = () => {
 
                         <div className="mb-4 pt-4 border-t border-white/10">
                           <div className="space-y-2">
-                          <h4 className="text-white font-semibold">{testimonial.client}</h4>
-                          <p className="text-sm text-muted-foreground">{testimonial.title}</p>
-                          <p className="text-sm text-[#E5195E] font-medium">{testimonial.company}</p>
+                            <h4 className="text-white font-semibold">
+                              {testimonial.client}
+                            </h4>
+                            <p className="text-sm text-muted-foreground">
+                              {testimonial.title}
+                            </p>
+                            <p className="text-sm text-[#E5195E] font-medium">
+                              {testimonial.company}
+                            </p>
                           </div>
                         </div>
 
                         <div className="flex items-center justify-between pt-4">
                           <div className="flex items-center gap-2">
                             <IndustryIcon className="w-4 h-4 text-[#E5195E]" />
-                          <span className="text-sm text-muted-foreground font-medium">{testimonial.projectType}</span>
+                            <span className="text-sm text-muted-foreground font-medium">
+                              {testimonial.projectType}
+                            </span>
                           </div>
                           {testimonial.hasVideo && (
-                          <Button variant="ghost" size="sm" className="text-[#E5195E] hover:bg-[#E5195E]/10">
+                            <Button
+                              variant="ghost"
+                              size="sm"
+                              className="text-[#E5195E] hover:bg-[#E5195E]/10"
+                            >
                               <Play className="w-4 h-4 mr-1" />
                               Watch Video
                             </Button>
@@ -494,20 +621,30 @@ export const ClientTestimonials = () => {
       )}
 
       {/* Regular Testimonials */}
-      {testimonials.some(t => filteredTestimonials.includes(t)) && (
+      {testimonials.some((t) => filteredTestimonials.includes(t)) && (
         <section className="py-16 bg-card/50">
           <div className="container mx-auto px-6 lg:px-8">
-            <h2 className="text-3xl font-bold text-white mb-12 text-center">More Client Feedback</h2>
+            <h2 className="text-3xl font-bold text-white mb-12 text-center">
+              More Client Feedback
+            </h2>
 
             <div className="grid md:grid-cols-2 lg:grid-cols-3 gap-8">
-              {testimonials.filter(t => filteredTestimonials.includes(t)).map((testimonial) => {
+              {testimonials
+                .filter((t) => filteredTestimonials.includes(t))
+                .map((testimonial) => {
                   const IndustryIcon = getIndustryIcon(testimonial.industry);
                   return (
-                  <Card key={testimonial.id} className="bg-background/50 border-white/10 hover:border-[#E5195E]/30 transition-all duration-300 group">
+                    <Card
+                      key={testimonial.id}
+                      className="bg-background/50 border-white/10 hover:border-[#E5195E]/30 transition-all duration-300 group"
+                    >
                       <CardContent className="p-6">
                         <div className="flex justify-center gap-1 mb-4">
                           {[...Array(testimonial.rating)].map((_, i) => (
-                          <Star key={i} className="w-4 h-4 text-yellow-400 fill-current" />
+                            <Star
+                              key={i}
+                              className="w-4 h-4 text-yellow-400 fill-current"
+                            />
                           ))}
                         </div>
 
@@ -520,19 +657,31 @@ export const ClientTestimonials = () => {
 
                         <div className="mb-3 pt-3 border-t border-white/10">
                           <div className="space-y-1">
-                          <h4 className="text-white font-semibold text-sm">{testimonial.client}</h4>
-                          <p className="text-xs text-muted-foreground">{testimonial.title}</p>
-                          <p className="text-xs text-[#E5195E] font-medium">{testimonial.company}</p>
+                            <h4 className="text-white font-semibold text-sm">
+                              {testimonial.client}
+                            </h4>
+                            <p className="text-xs text-muted-foreground">
+                              {testimonial.title}
+                            </p>
+                            <p className="text-xs text-[#E5195E] font-medium">
+                              {testimonial.company}
+                            </p>
                           </div>
                         </div>
 
                         <div className="flex items-center justify-between pt-3">
                           <div className="flex items-center gap-2">
                             <IndustryIcon className="w-3 h-3 text-[#E5195E]" />
-                          <span className="text-xs text-muted-foreground font-medium">{testimonial.projectType}</span>
+                            <span className="text-xs text-muted-foreground font-medium">
+                              {testimonial.projectType}
+                            </span>
                           </div>
                           {testimonial.hasVideo && (
-                          <Button variant="ghost" size="sm" className="text-[#E5195E] hover:bg-[#E5195E]/10 p-1">
+                            <Button
+                              variant="ghost"
+                              size="sm"
+                              className="text-[#E5195E] hover:bg-[#E5195E]/10 p-1"
+                            >
                               <Play className="w-3 h-3" />
                             </Button>
                           )}
@@ -551,7 +700,9 @@ export const ClientTestimonials = () => {
         <section className="py-16 bg-background">
           <div className="container mx-auto px-6 lg:px-8">
             <div className="text-center">
-              <p className="text-muted-foreground mb-4">No testimonials found matching your criteria.</p>
+              <p className="text-muted-foreground mb-4">
+                No testimonials found matching your criteria.
+              </p>
               <Button
                 variant="outline"
                 onClick={() => {
@@ -575,14 +726,22 @@ export const ClientTestimonials = () => {
               Ready to Join Our Success Stories?
             </h2>
             <p className="text-lg text-muted-foreground mb-8">
-              Become our next success story. Let's discuss how we can help you achieve exceptional results for your business.
+              Become our next AI‑driven success story. Let’s discuss how we can help you achieve exceptional results for your web, mobile, and digital products.
             </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">
+              <Button
+                size="lg"
+                className="bg-[#E5195E] hover:bg-[#E5195E]/90 text-white"
+                onClick={() => navigate("/start-a-project")}
+              >
                 Become Our Next Success Story
                 <ArrowRight className="ml-2 w-4 h-4" />
               </Button>
-              <Button size="lg" variant="outline" className="border-white/20 text-white hover:bg-white/10">
+              <Button
+                size="lg"
+                variant="outline"
+                className="border-white/20 text-white hover:bg-white/10"
+              >
                 Request a Reference
               </Button>
             </div>
@@ -590,7 +749,7 @@ export const ClientTestimonials = () => {
         </div>
       </section>
 
-      <Footer />
+      {/* <Footer /> */}
     </div>
   );
 };

pages/Company.tsx

@@ -10,18 +10,67 @@ import { Badge } from "../components/ui/badge";
 import { Card, CardContent } from "../components/ui/card";
 import { Accordion, AccordionContent, AccordionItem, AccordionTrigger } from "../components/ui/accordion";
 import { GridPattern } from "../components/GridPattern";
-import { navigateTo } from "../App";
 import { 
   Users, Heart, Shield, Target, Lightbulb, Award, TrendingUp, Clock, 
   Newspaper, ArrowRight, Building, Globe, CheckCircle, Coffee, 
   Eye, Star, Calendar, MessageSquare, Briefcase, Rocket,
   ChevronRight
 } from "lucide-react";
+import { Helmet } from "react-helmet-async";
+import { useNavigate } from "react-router-dom";
 
 // Enhanced Hero Section
 const HeroWithCTA = () => {
+  const navigate = useNavigate();
   return (
     <section className="relative py-20 overflow-hidden bg-black">
+      <Helmet>
+        {/* Page Title and Meta Description */}
+        <title>Company Overview | Technology Company with a Mission | WDI</title>
+        <meta
+          name="description"
+          content="Learn about WDI’s mission, values, and people. We’re a purpose-driven technology company helping enterprises achieve excellence through innovation."
+        />
+
+        {/* Canonical Link */}
+        <link rel="canonical" href="https://www.wdipl.com/company" />
+
+        {/* Open Graph Tags (for Facebook, LinkedIn) */}
+        <meta property="og:title" content="Company Overview | Technology Company with a Mission | WDI" />
+        <meta
+          property="og:description"
+          content="Learn about WDI’s mission, values, and people. We’re a purpose-driven technology company helping enterprises achieve excellence through innovation."
+        />
+        <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="Company Overview | Technology Company with a Mission | WDI" />
+        <meta
+          name="twitter:description"
+          content="Learn about WDI’s mission, values, and people. We’re a purpose-driven technology company helping enterprises achieve excellence through innovation."
+        />
+        <meta name="twitter:image" content="https://www.wdipl.com/your-preview-image.jpg" />
+
+        {/* Social Profiles (using JSON-LD Schema) */}
+        <script type="application/ld+json">
+          {`
+                              {
+                                "@context": "https://schema.org",
+                                "@type": "Organization",
+                                "name": "WDI",
+                                "url": "https://www.wdipl.com",
+                                "sameAs": [
+                                  "https://www.facebook.com/wdideas",
+                                  "https://www.linkedin.com/in/website-developers-india/",
+                                  "https://www.instagram.com/wdipl/"
+                                ]
+                              }
+                            `}
+        </script>
+      </Helmet>
       <div className="container mx-auto px-6 lg:px-8">
         <div className="grid lg:grid-cols-2 gap-16 items-center min-h-[90vh]">
           <motion.div
@@ -59,7 +108,7 @@ const HeroWithCTA = () => {
               transition={{ duration: 0.8, delay: 0.3 }}
               className="flex flex-col sm:flex-row gap-4"
             >
-              <ShimmerButton className="text-lg px-8 py-4" onClick={() => navigateTo('/company/our-history')}>
+              <ShimmerButton className="text-lg px-8 py-4" onClick={() => navigate('/company/our-history')}>
                 <div className="inline-flex items-center gap-2">
                   <Clock className="w-4 h-4 flex-shrink-0" />
                   <span>Our Story</span>
@@ -69,7 +118,7 @@ const HeroWithCTA = () => {
                 variant="secondary"
                 size="lg"
                 className="text-lg px-8 py-4"
-                onClick={() => navigateTo('/company/leadership-team')}
+                onClick={() => navigate('/company/leadership-team')}
               >
                 <Users className="w-4 h-4 flex-shrink-0" />
                 <span>Meet Our Leaders</span>
@@ -289,7 +338,7 @@ const HorizontalTagScroller = () => {
                   key={`first-${value.name}-${index}`}
                   initial={{ opacity: 0, scale: 0.8 }}
                   whileInView={{ opacity: 1, scale: 1 }}
-                  transition={{ duration: 0.5, delay: index * 0.1 }}
+                  transition={{ duration: 0.5, delay: index * 0.01 }}
                   viewport={{ once: true }}
                   className="group flex-shrink-0 mx-3"
                 >
@@ -406,7 +455,7 @@ const SideBySideContentWithIcons = () => {
                 key={advantage.id}
                 initial={{ opacity: 0, y: 20 }}
                 whileInView={{ opacity: 1, y: 0 }}
-                transition={{ duration: 0.5, delay: index * 0.1 }}
+                transition={{ duration: 0.5, delay: index * 0.01 }}
                 viewport={{ once: true }}
                 whileHover={{ y: -8, scale: 1.02 }}
                 className="group cursor-pointer"
@@ -433,6 +482,7 @@ const SideBySideContentWithIcons = () => {
 
 // Company Sections Grid - Updated to remove About WDI card
 const TabbedServiceDisplay = () => {
+  const navigate = useNavigate();
   const sections = [
     {
       title: "Our History", 
@@ -504,11 +554,11 @@ const TabbedServiceDisplay = () => {
                 key={index}
                 initial={{ opacity: 0, y: 20 }}
                 whileInView={{ opacity: 1, y: 0 }}
-                transition={{ duration: 0.5, delay: index * 0.1 }}
+                transition={{ duration: 0.5, delay: index * 0.01 }}
                 viewport={{ once: true }}
                 whileHover={{ y: -5 }}
                 className="group cursor-pointer"
-                onClick={() => navigateTo(section.link)}
+                onClick={() => navigate(section.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">
@@ -542,6 +592,7 @@ const TabbedServiceDisplay = () => {
 
 // Updated CTA Section with new design
 const InlineCTA = () => {
+  const navigate = useNavigate();
   return (
     <section className="py-20 bg-background">
       <div className="container mx-auto px-6 lg:px-8">
@@ -585,7 +636,7 @@ const InlineCTA = () => {
             <div className="flex flex-col items-start gap-4">
               <ShimmerButton 
                 className="text-xl px-10 py-5 rounded-2xl shadow-lg hover:shadow-xl bg-[#E5195E] hover:bg-[#E5195E]/90"
-                onClick={() => navigateTo('/company/careers')}
+                onClick={() => navigate('/company/careers')}
               >
                 <div className="inline-flex items-center gap-3">
                   <Briefcase className="w-6 h-6 flex-shrink-0" />
@@ -607,6 +658,7 @@ const InlineCTA = () => {
 
 // Press and Recognition Section
 const PressRecognitionSection = () => {
+  const navigate = useNavigate();
   const press = [
     {
       title: "Innovation Leader 2024",
@@ -679,7 +731,7 @@ const PressRecognitionSection = () => {
                 key={index}
                 initial={{ opacity: 0, y: 20 }}
                 whileInView={{ opacity: 1, y: 0 }}
-                transition={{ duration: 0.5, delay: index * 0.1 }}
+                transition={{ duration: 0.5, delay: index * 0.01 }}
                 viewport={{ once: true }}
                 whileHover={{ y: -8, scale: 1.02 }}
                 className="group cursor-pointer"
@@ -711,7 +763,7 @@ const PressRecognitionSection = () => {
                     <div className="p-8 pt-0 mt-auto space-y-3">
                       <ShimmerButton 
                         className="w-full py-3 text-sm rounded-xl shadow-lg hover:shadow-xl"
-                        onClick={() => navigateTo(item.link)}
+                        onClick={() => navigate(item.link)}
                       >
                         <div className="inline-flex items-center justify-center gap-2">
                           <Eye className="w-4 h-4 flex-shrink-0" />
@@ -798,7 +850,7 @@ const FAQSection = () => {
 export function Company() {
   return (
     <div className="dark min-h-screen bg-background">
-      <Navigation />
+      {/* <Navigation /> */}
       <HeroWithCTA />
       <AboutWDISection />
       <HorizontalTagScroller />
@@ -807,7 +859,7 @@ export function Company() {
       <InlineCTA />
       <PressRecognitionSection />
       <FAQSection />
-      <Footer />
+      {/* <Footer /> */}
     </div>
   );
 }

pages/ComplianceReadyFintech.tsx

@@ -6,9 +6,10 @@ import { Badge } from "../components/ui/badge";
 import { Card, CardContent } from "../components/ui/card";
 import { Avatar, AvatarFallback, AvatarImage } from "../components/ui/avatar";
 import { Separator } from "../components/ui/separator";
+import hosptialAi from "../assets/aihospital.jpg"
 import { Calendar, Clock, User, ArrowRight, Share2, Linkedin, Twitter, ExternalLink, Tag } from "lucide-react";
-import { navigateTo } from "../App";
 import { ImageWithFallback } from "../components/figma/ImageWithFallback";
+import { useNavigate } from "react-router-dom";
 
 const articleData = {
   id: "compliance-ready-systems-fintech",
@@ -196,7 +197,8 @@ const articleData = {
       title: "The Future of AI in Healthcare: Transforming Patient Care Through Technology",
       excerpt: "Discover how artificial intelligence is revolutionizing healthcare delivery and patient outcomes.",
       readTime: "12 min read",
-      image: "https://images.unsplash.com/photo-1576091160399-112ba8d25d1f?w=400&h=250&fit=crop&auto=format",
+      // image: "https://images.unsplash.com/photo-1576091160399-112ba8d25d1f?w=400&h=250&fit=crop&auto=format",
+      image: hosptialAi,
       category: "Healthcare AI"
     },
     {
@@ -240,10 +242,10 @@ export const ComplianceReadyFintech = () => {
       window.open(shareUrl, '_blank', 'width=600,height=400');
     }
   };
-
+  const navigate = useNavigate();
   return (
     <div className="dark min-h-screen bg-background">
-      <Navigation />
+      {/* <Navigation /> */}
 
       {/* Hero Section */}
       <section className="pt-24 pb-16 bg-background">
@@ -251,11 +253,11 @@ export const ComplianceReadyFintech = () => {
           <div className="max-w-4xl mx-auto">
             {/* Breadcrumb */}
             <div className="flex items-center gap-2 text-sm text-muted-foreground mb-8">
-              <button onClick={() => navigateTo('/')} className="hover:text-white transition-colors">
+              <button onClick={() => navigate('/')} className="hover:text-white transition-colors">
                 Home
               </button>
               <span>/</span>
-              <button onClick={() => navigateTo('/resources/blog')} className="hover:text-white transition-colors">
+              <button onClick={() => navigate('/resources/blog')} className="hover:text-white transition-colors">
                 Blog
               </button>
               <span>/</span>
@@ -390,7 +392,7 @@ export const ComplianceReadyFintech = () => {
                     </div>
 
                     {/* Author Bio */}
-                    <Card className="bg-card/50 border-white/10">
+                    {/* <Card className="bg-card/50 border-white/10">
                       <CardContent className="p-6">
                         <div className="flex items-start gap-4">
                           <Avatar className="w-16 h-16">
@@ -404,7 +406,7 @@ export const ComplianceReadyFintech = () => {
                           </div>
                         </div>
                       </CardContent>
-                    </Card>
+                    </Card> */}
                   </div>
                 </CardContent>
               </Card>
@@ -422,7 +424,7 @@ export const ComplianceReadyFintech = () => {
                       <div
                         key={article.id}
                         className="group cursor-pointer"
-                        onClick={() => navigateTo(`/articles/${article.id}`)}
+                        onClick={() => navigate(`/articles/${article.id}`)}
                       >
                         <div className="aspect-[16/10] overflow-hidden rounded-lg mb-3">
                           <ImageWithFallback
@@ -448,7 +450,7 @@ export const ComplianceReadyFintech = () => {
                   <Button
                     variant="outline"
                     className="w-full border-white/20 text-white hover:bg-white/10"
-                    onClick={() => navigateTo('/resources/blog')}
+                    onClick={() => navigate('/resources/blog')}
                   >
                     View All Articles
                     <ArrowRight className="w-4 h-4 ml-2" />
@@ -466,7 +468,7 @@ export const ComplianceReadyFintech = () => {
                   </p>
                   <Button
                     className="w-full bg-[#E5195E] hover:bg-[#E5195E]/90 text-white"
-                    onClick={() => navigateTo('/contact')}
+                    onClick={() => navigate('/contact')}
                   >
                     Get In Touch
                   </Button>
@@ -493,7 +495,7 @@ export const ComplianceReadyFintech = () => {
                 <Button
                   size="lg"
                   className="bg-[#E5195E] hover:bg-[#E5195E]/90 text-white"
-                  onClick={() => navigateTo('/contact')}
+                  onClick={() => navigate('/contact')}
                 >
                   Start Your Fintech Project
                   <ArrowRight className="ml-2 w-4 h-4" />
@@ -502,7 +504,7 @@ export const ComplianceReadyFintech = () => {
                   size="lg"
                   variant="outline"
                   className="border-white/20 text-white hover:bg-white/10"
-                  onClick={() => navigateTo('/resources/blog')}
+                  onClick={() => navigate('/resources/blog')}
                 >
                   Read More Articles
                 </Button>
@@ -512,7 +514,7 @@ export const ComplianceReadyFintech = () => {
         </div>
       </section>
 
-      <Footer />
+      {/* <Footer /> */}
     </div>
   );
 };

pages/ComplianceReadySystems.tsx

@@ -24,21 +24,94 @@ import {
   TrendingUp,
   UserCheck,
   Users,
-  X
+  X,
 } from "lucide-react";
 import { ImageWithFallback } from "../components/figma/ImageWithFallback";
+import hospitalize from "../assets/hospitalise.jpg";
 import { Footer } from "../components/Footer";
 import { Navigation } from "../components/Navigation";
-import { Accordion, AccordionContent, AccordionItem, AccordionTrigger } from "../components/ui/accordion";
+import {
+  Accordion,
+  AccordionContent,
+  AccordionItem,
+  AccordionTrigger,
+} from "../components/ui/accordion";
 import { Badge } from "../components/ui/badge";
 import { Button } from "../components/ui/button";
 import { Card, CardContent } from "../components/ui/card";
 import { ShimmerButton } from "../components/ui/shimmer-button";
+import { useNavigate } from "react-router-dom";
+import { Helmet } from "react-helmet-async";
 
 // Compliance-Ready Systems Hero Section
 const ComplianceReadySystemsHero = () => {
+  const navigate = useNavigate();
   return (
     <section className="relative py-20 overflow-hidden bg-black">
+      <Helmet>
+        {/* Page Title and Meta Description */}
+        <title>
+          Compliance-Ready Systems Solutions | WDI – Stay Ahead Safely
+        </title>
+        <meta
+          name="description"
+          content="Ensure data security and regulatory compliance with WDI’s Compliance-Ready Systems. Build secure, scalable solutions aligned with industry standards."
+        />
+
+        {/* Canonical Link */}
+        <link
+          rel="canonical"
+          href="https://www.wdipl.com/solutions/compliance-ready-systems"
+        />
+
+        {/* Open Graph Tags (for Facebook, LinkedIn) */}
+        <meta
+          property="og:title"
+          content="Compliance-Ready Systems Solutions | WDI – Stay Ahead Safely"
+        />
+        <meta
+          property="og:description"
+          content="Ensure data security and regulatory compliance with WDI’s Compliance-Ready Systems. Build secure, scalable solutions aligned with industry standards."
+        />
+        <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="Compliance-Ready Systems Solutions | WDI – Stay Ahead Safely"
+        />
+        <meta
+          name="twitter:description"
+          content="Ensure data security and regulatory compliance with WDI’s Compliance-Ready Systems. Build secure, scalable solutions aligned with industry standards."
+        />
+        <meta
+          name="twitter:image"
+          content="https://www.wdipl.com/your-preview-image.jpg"
+        />
+
+        {/* Social Profiles (using JSON-LD Schema) */}
+        <script type="application/ld+json">
+          {`
+                              {
+                                "@context": "https://schema.org",
+                                "@type": "Organization",
+                                "name": "WDI",
+                                "url": "https://www.wdipl.com",
+                                "sameAs": [
+                                  "https://www.facebook.com/wdideas",
+                                  "https://www.linkedin.com/in/website-developers-india/",
+                                  "https://www.instagram.com/wdipl/"
+                                ]
+                              }
+                            `}
+        </script>
+      </Helmet>
       <div className="container mx-auto px-6 lg:px-8">
         <div className="grid lg:grid-cols-2 gap-16 items-center min-h-[90vh]">
           <motion.div
@@ -53,17 +126,22 @@ const ComplianceReadySystemsHero = () => {
               animate={{ opacity: 1, y: 0 }}
               transition={{ duration: 0.6 }}
             >
-              <span className="text-white/70 text-sm font-medium">Solutions</span>
+              <span className="text-white/70 text-sm font-medium">
+                Solutions
+              </span>
             </motion.div>
 
             {/* Main Heading */}
             <div className="space-y-6">
               <h1 className="text-4xl md:text-5xl lg:text-6xl font-semibold text-white leading-tight">
-                Compliance-Ready Systems <span className="text-gray-400">(HIPAA, GDPR, etc.)</span>
+                Compliance-Ready Systems{" "}
+                <span className="text-gray-400">(HIPAA, GDPR, etc.)</span>
               </h1>
 
               <p className="text-lg text-gray-300 leading-relaxed max-w-lg">
-                Build or adapt your digital systems to meet stringent regulatory requirements, ensuring data privacy, security, and legal adherence.
+                Build or adapt your AI‑powered mobile and web applications to
+                meet stringent regulatory requirements, ensuring data privacy,
+                security, and legal adherence.
               </p>
             </div>
 
@@ -74,7 +152,10 @@ const ComplianceReadySystemsHero = () => {
               transition={{ duration: 0.8, delay: 0.3 }}
               className="flex flex-col sm:flex-row gap-4"
             >
-              <ShimmerButton className="text-lg px-8 py-4">
+              <ShimmerButton
+                className="text-lg px-8 py-4"
+                onClick={() => navigate("/start-a-project")}
+              >
                 <div className="inline-flex items-center gap-2">
                   <MessageSquare className="w-5 h-5 flex-shrink-0" />
                   <span>Get a Free Consultation</span>
@@ -124,13 +205,21 @@ const ComplianceReadySystemsHero = () => {
                       transition={{ duration: 0.8, delay: 1.0 }}
                       className="text-center mb-6"
                     >
-                      <h3 className="text-xl font-semibold text-white mb-2">Compliance Dashboard</h3>
+                      <h3 className="text-xl font-semibold text-white mb-2">
+                        Compliance Dashboard
+                      </h3>
                       <div className="flex items-center justify-center gap-4">
-                        <Badge variant="secondary" className="bg-green-500/20 text-green-300 border-green-500/30 text-xs">
+                        <Badge
+                          variant="secondary"
+                          className="bg-green-500/20 text-green-300 border-green-500/30 text-xs"
+                        >
                           <ShieldCheck className="w-3 h-3 mr-1" />
                           Secure
                         </Badge>
-                        <Badge variant="secondary" className="bg-blue-500/20 text-blue-300 border-blue-500/30 text-xs">
+                        <Badge
+                          variant="secondary"
+                          className="bg-blue-500/20 text-blue-300 border-blue-500/30 text-xs"
+                        >
                           <FileCheck className="w-3 h-3 mr-1" />
                           Compliant
                         </Badge>
@@ -148,7 +237,7 @@ const ComplianceReadySystemsHero = () => {
                         { standard: "HIPAA", status: "compliant", delay: 1.4 },
                         { standard: "GDPR", status: "compliant", delay: 1.6 },
                         { standard: "SOC 2", status: "compliant", delay: 1.8 },
-                        { standard: "ISO 27001", status: "review", delay: 2.0 }
+                        { standard: "ISO 27001", status: "review", delay: 2.0 },
                       ].map((item, i) => (
                         <motion.div
                           key={i}
@@ -156,27 +245,37 @@ const ComplianceReadySystemsHero = () => {
                           animate={{ opacity: 1, scale: 1 }}
                           transition={{ duration: 0.5, delay: item.delay }}
                           className={`p-3 rounded-lg border text-center ${
-                            item.status === 'compliant' 
-                              ? 'bg-green-500/10 border-green-500/30' 
-                              : 'bg-orange-500/10 border-orange-500/30'
+                            item.status === "compliant"
+                              ? "bg-green-500/10 border-green-500/30"
+                              : "bg-orange-500/10 border-orange-500/30"
                           }`}
                         >
                           <div className="flex items-center justify-center mb-2">
-                            {item.status === 'compliant' ? (
+                            {item.status === "compliant" ? (
                               <CheckCircle className="w-5 h-5 text-green-400" />
                             ) : (
                               <Clock className="w-5 h-5 text-orange-400" />
                             )}
                           </div>
-                          <div className={`text-sm font-medium ${
-                            item.status === 'compliant' ? 'text-green-300' : 'text-orange-300'
-                          }`}>
+                          <div
+                            className={`text-sm font-medium ${
+                              item.status === "compliant"
+                                ? "text-green-300"
+                                : "text-orange-300"
+                            }`}
+                          >
                             {item.standard}
                           </div>
-                          <div className={`text-xs ${
-                            item.status === 'compliant' ? 'text-green-400' : 'text-orange-400'
-                          }`}>
-                            {item.status === 'compliant' ? 'Compliant' : 'In Review'}
+                          <div
+                            className={`text-xs ${
+                              item.status === "compliant"
+                                ? "text-green-400"
+                                : "text-orange-400"
+                            }`}
+                          >
+                            {item.status === "compliant"
+                              ? "Compliant"
+                              : "In Review"}
                           </div>
                         </motion.div>
                       ))}
@@ -190,18 +289,37 @@ const ComplianceReadySystemsHero = () => {
                       className="space-y-3"
                     >
                       {[
-                        { measure: "Data Encryption", icon: Lock, status: "active" },
-                        { measure: "Access Control", icon: UserCheck, status: "active" },
-                        { measure: "Audit Trails", icon: FileText, status: "active" }
+                        {
+                          measure: "Data Encryption",
+                          icon: Lock,
+                          status: "active",
+                        },
+                        {
+                          measure: "Access Control",
+                          icon: UserCheck,
+                          status: "active",
+                        },
+                        {
+                          measure: "Audit Trails",
+                          icon: FileText,
+                          status: "active",
+                        },
                       ].map((security, i) => (
-                        <div key={i} className="flex items-center justify-between p-2 bg-black/30 rounded-lg">
+                        <div
+                          key={i}
+                          className="flex items-center justify-between p-2 bg-black/30 rounded-lg"
+                        >
                           <div className="flex items-center gap-2">
                             <security.icon className="w-4 h-4 text-blue-400" />
-                            <span className="text-white text-sm">{security.measure}</span>
+                            <span className="text-white text-sm">
+                              {security.measure}
+                            </span>
                           </div>
                           <div className="flex items-center gap-2">
                             <div className="w-2 h-2 bg-green-400 rounded-full"></div>
-                            <span className="text-green-300 text-xs">Active</span>
+                            <span className="text-green-300 text-xs">
+                              Active
+                            </span>
                           </div>
                         </div>
                       ))}
@@ -218,9 +336,14 @@ const ComplianceReadySystemsHero = () => {
                     <div className="flex items-center justify-between mb-3">
                       <div className="flex items-center gap-2">
                         <BarChart3 className="w-4 h-4 text-purple-400" />
-                        <span className="text-purple-400 text-xs font-mono">Security Score</span>
+                        <span className="text-purple-400 text-xs font-mono">
+                          Security Score
+                        </span>
                       </div>
-                      <Badge variant="secondary" className="bg-green-500/20 text-green-300 border-green-500/30 text-xs">
+                      <Badge
+                        variant="secondary"
+                        className="bg-green-500/20 text-green-300 border-green-500/30 text-xs"
+                      >
                         Excellent
                       </Badge>
                     </div>
@@ -229,41 +352,53 @@ const ComplianceReadySystemsHero = () => {
                     <div className="space-y-2">
                       <motion.div
                         initial={{ opacity: 0, width: 0 }}
-                        animate={{ opacity: 1, width: '96%' }}
+                        animate={{ opacity: 1, width: "96%" }}
                         transition={{ duration: 1, delay: 2.6 }}
                         className="flex items-center justify-between"
                       >
                         <div className="flex items-center gap-2">
                           <div className="w-2 h-2 bg-green-400 rounded-full"></div>
-                          <span className="text-green-300 text-xs">Data Protection</span>
+                          <span className="text-green-300 text-xs">
+                            Data Protection
+                          </span>
                         </div>
-                        <span className="text-green-300 text-xs font-mono">96%</span>
+                        <span className="text-green-300 text-xs font-mono">
+                          96%
+                        </span>
                       </motion.div>
 
                       <motion.div
                         initial={{ opacity: 0, width: 0 }}
-                        animate={{ opacity: 1, width: '94%' }}
+                        animate={{ opacity: 1, width: "94%" }}
                         transition={{ duration: 1, delay: 2.8 }}
                         className="flex items-center justify-between"
                       >
                         <div className="flex items-center gap-2">
                           <div className="w-2 h-2 bg-blue-400 rounded-full"></div>
-                          <span className="text-blue-300 text-xs">Access Security</span>
+                          <span className="text-blue-300 text-xs">
+                            Access Security
+                          </span>
                         </div>
-                        <span className="text-blue-300 text-xs font-mono">94%</span>
+                        <span className="text-blue-300 text-xs font-mono">
+                          94%
+                        </span>
                       </motion.div>
 
                       <motion.div
                         initial={{ opacity: 0, width: 0 }}
-                        animate={{ opacity: 1, width: '98%' }}
+                        animate={{ opacity: 1, width: "98%" }}
                         transition={{ duration: 1, delay: 3.0 }}
                         className="flex items-center justify-between"
                       >
                         <div className="flex items-center gap-2">
                           <div className="w-2 h-2 bg-purple-400 rounded-full"></div>
-                          <span className="text-purple-300 text-xs">Audit Readiness</span>
+                          <span className="text-purple-300 text-xs">
+                            Audit Readiness
+                          </span>
                         </div>
-                        <span className="text-purple-300 text-xs font-mono">98%</span>
+                        <span className="text-purple-300 text-xs font-mono">
+                          98%
+                        </span>
                       </motion.div>
                     </div>
                   </motion.div>
@@ -276,11 +411,15 @@ const ComplianceReadySystemsHero = () => {
                     className="grid grid-cols-2 gap-3"
                   >
                     <div className="p-3 bg-gradient-to-br from-green-500/20 to-emerald-500/20 rounded-lg border border-green-500/30">
-                      <div className="text-green-400 text-lg font-bold">99%</div>
+                      <div className="text-green-400 text-lg font-bold">
+                        99%
+                      </div>
                       <div className="text-white text-xs">Risk Reduction</div>
                     </div>
                     <div className="p-3 bg-gradient-to-br from-blue-500/20 to-cyan-500/20 rounded-lg border border-blue-500/30">
-                      <div className="text-blue-400 text-lg font-bold">24/7</div>
+                      <div className="text-blue-400 text-lg font-bold">
+                        24/7
+                      </div>
                       <div className="text-white text-xs">Monitoring</div>
                     </div>
                   </motion.div>
@@ -351,15 +490,24 @@ const ComplianceReadySystemsHero = () => {
                 transition={{ duration: 0.8, delay: 4.0 }}
                 className="flex justify-center gap-4 flex-wrap mt-8"
               >
-                <Badge variant="secondary" className="bg-blue-500/20 text-blue-300 border-blue-500/30">
+                <Badge
+                  variant="secondary"
+                  className="bg-blue-500/20 text-blue-300 border-blue-500/30"
+                >
                   <Shield className="w-3 h-3 mr-1" />
                   Secure
                 </Badge>
-                <Badge variant="secondary" className="bg-green-500/20 text-green-300 border-green-500/30">
+                <Badge
+                  variant="secondary"
+                  className="bg-green-500/20 text-green-300 border-green-500/30"
+                >
                   <FileCheck className="w-3 h-3 mr-1" />
                   Compliant
                 </Badge>
-                <Badge variant="secondary" className="bg-purple-500/20 text-purple-300 border-purple-500/30">
+                <Badge
+                  variant="secondary"
+                  className="bg-purple-500/20 text-purple-300 border-purple-500/30"
+                >
                   <Eye className="w-3 h-3 mr-1" />
                   Auditable
                 </Badge>
@@ -388,6 +536,11 @@ const ComplianceReadySystemsChallenge = () => {
             <h2 className="text-4xl lg:text-5xl font-semibold text-foreground mb-8">
               Navigating the Complexities of Regulatory Compliance
             </h2>
+            <p className="mt-4 text-gray-400 max-w-2xl mx-auto">
+              Design AI‑powered mobile and web applications that confidently
+              meet HIPAA, GDPR, and other compliance frameworks while protecting
+              data privacy and security.
+            </p>
           </motion.div>
 
           <div className="grid md:grid-cols-2 gap-12 items-center">
@@ -404,26 +557,41 @@ const ComplianceReadySystemsChallenge = () => {
                     <div className="w-12 h-12 bg-red-500/20 rounded-xl flex items-center justify-center">
                       <AlertTriangle className="w-6 h-6 text-red-400" />
                     </div>
-                    <h3 className="text-2xl font-semibold text-foreground">The Problem</h3>
+                    <h3 className="text-2xl font-semibold text-foreground">
+                      The Problem
+                    </h3>
                   </div>
                   <div className="space-y-4 text-muted-foreground">
-                    <p>Building or managing systems that comply with industry-specific regulations (like HIPAA, GDPR, SOC 2, ISO 27001) is complex, time-consuming, and critical for avoiding hefty fines and reputational damage.</p>
+                    <p>
+                      Building or managing systems that comply with
+                      industry-specific regulations (like HIPAA, GDPR, SOC 2,
+                      ISO 27001) is complex, time-consuming, and critical for
+                      avoiding hefty fines and reputational damage.
+                    </p>
                     <ul className="space-y-2">
                       <li className="flex items-start gap-2">
                         <X className="w-4 h-4 text-red-400 mt-1 flex-shrink-0" />
-                        <span>Complex regulatory requirements and frequent changes</span>
+                        <span>
+                          Complex regulatory requirements and frequent changes
+                        </span>
                       </li>
                       <li className="flex items-start gap-2">
                         <X className="w-4 h-4 text-red-400 mt-1 flex-shrink-0" />
-                        <span>Hefty fines and legal penalties for non-compliance</span>
+                        <span>
+                          Hefty fines and legal penalties for non-compliance
+                        </span>
                       </li>
                       <li className="flex items-start gap-2">
                         <X className="w-4 h-4 text-red-400 mt-1 flex-shrink-0" />
-                        <span>Risk of data breaches and security vulnerabilities</span>
+                        <span>
+                          Risk of data breaches and security vulnerabilities
+                        </span>
                       </li>
                       <li className="flex items-start gap-2">
                         <X className="w-4 h-4 text-red-400 mt-1 flex-shrink-0" />
-                        <span>Reputation damage and loss of customer trust</span>
+                        <span>
+                          Reputation damage and loss of customer trust
+                        </span>
                       </li>
                     </ul>
                   </div>
@@ -444,26 +612,42 @@ const ComplianceReadySystemsChallenge = () => {
                     <div className="w-12 h-12 bg-green-500/20 rounded-xl flex items-center justify-center">
                       <CheckCircle className="w-6 h-6 text-green-400" />
                     </div>
-                    <h3 className="text-2xl font-semibold text-foreground">Our Solution</h3>
+                    <h3 className="text-2xl font-semibold text-foreground">
+                      Our Solution
+                    </h3>
                   </div>
                   <div className="space-y-4 text-muted-foreground">
-                    <p>WDI specializes in developing and optimizing compliance-ready digital systems. We integrate security, privacy, and regulatory requirements directly into your software architecture, ensuring your operations are robustly compliant from the ground up.</p>
+                    <p>
+                      WDI specializes in developing and optimizing
+                      compliance-ready digital systems. We integrate security,
+                      privacy, and regulatory requirements directly into your
+                      software architecture, ensuring your operations are
+                      robustly compliant from the ground up.
+                    </p>
                     <ul className="space-y-2">
                       <li className="flex items-start gap-2">
                         <CheckCircle className="w-4 h-4 text-green-400 mt-1 flex-shrink-0" />
-                        <span>Privacy-by-design and security-by-design architecture</span>
+                        <span>
+                          Privacy-by-design and security-by-design architecture
+                        </span>
                       </li>
                       <li className="flex items-start gap-2">
                         <CheckCircle className="w-4 h-4 text-green-400 mt-1 flex-shrink-0" />
-                        <span>Built-in compliance for HIPAA, GDPR, SOC 2, and more</span>
+                        <span>
+                          Built-in compliance for HIPAA, GDPR, SOC 2, and more
+                        </span>
                       </li>
                       <li className="flex items-start gap-2">
                         <CheckCircle className="w-4 h-4 text-green-400 mt-1 flex-shrink-0" />
-                        <span>Comprehensive audit trails and documentation</span>
+                        <span>
+                          Comprehensive audit trails and documentation
+                        </span>
                       </li>
                       <li className="flex items-start gap-2">
                         <CheckCircle className="w-4 h-4 text-green-400 mt-1 flex-shrink-0" />
-                        <span>Ongoing monitoring and compliance management</span>
+                        <span>
+                          Ongoing monitoring and compliance management
+                        </span>
                       </li>
                     </ul>
                   </div>
@@ -483,38 +667,44 @@ const ComplianceReadySystemsIncludes = () => {
     {
       icon: Search,
       title: "Compliance Gap Analysis",
-      description: "Assessing your current systems against target regulations (HIPAA, GDPR, etc.)."
+      description:
+        "Assessing your current systems against target regulations (HIPAA, GDPR, etc.).",
     },
     {
       icon: Shield,
       title: "Secure Architecture Design",
-      description: "Designing systems with privacy-by-design and security-by-design principles."
+      description:
+        "Designing systems with privacy-by-design and security-by-design principles.",
     },
     {
       icon: Lock,
       title: "Data Encryption & Masking",
-      description: "Implementing robust solutions for sensitive data protection."
+      description:
+        "Implementing robust solutions for sensitive data protection.",
     },
     {
       icon: UserCheck,
       title: "Access Control & Auditing",
-      description: "Developing systems for strict user permissions and comprehensive logging."
+      description:
+        "Developing systems for strict user permissions and comprehensive logging.",
     },
     {
       icon: FileCheck,
       title: "Regulatory Compliance Features",
-      description: "Building specific features required by regulations (e.g., data subject access requests, consent management)."
+      description:
+        "Building specific features required by regulations (e.g., data subject access requests, consent management).",
     },
     {
       icon: Code,
       title: "Secure Development Practices",
-      description: "Implementing DevSecOps and secure coding standards."
+      description: "Implementing DevSecOps and secure coding standards.",
     },
     {
       icon: FileText,
       title: "Documentation & Audit Trails",
-      description: "Ensuring proper logging and documentation for compliance audits."
-    }
+      description:
+        "Ensuring proper logging and documentation for compliance audits.",
+    },
   ];
 
   return (
@@ -530,6 +720,11 @@ const ComplianceReadySystemsIncludes = () => {
           <h2 className="text-4xl lg:text-5xl font-semibold text-white mb-6">
             Our Compliance-Driven System Development Services
           </h2>
+          <p className="mt-4 text-gray-400 max-w-2xl mx-auto">
+            Build AI‑powered mobile and web applications with HIPAA‑ and
+            GDPR‑ready architecture, ensuring secure, compliant, and audit‑ready
+            systems from the ground up
+          </p>
         </motion.div>
 
         <motion.div
@@ -546,7 +741,7 @@ const ComplianceReadySystemsIncludes = () => {
                 key={index}
                 initial={{ opacity: 0, y: 20 }}
                 whileInView={{ opacity: 1, y: 0 }}
-                transition={{ duration: 0.5, delay: index * 0.1 }}
+                transition={{ duration: 0.5, delay: index * 0.01 }}
                 viewport={{ once: true }}
                 whileHover={{ y: -5 }}
                 className="group"
@@ -611,28 +806,33 @@ const ComplianceReadySystemsBenefits = () => {
     {
       icon: Shield,
       title: "Risk Mitigation",
-      description: "Drastically reduce the risk of non-compliance fines and legal issues."
+      description:
+        "Drastically reduce the risk of non-compliance fines and legal issues.",
     },
     {
       icon: Lock,
       title: "Enhanced Data Security",
-      description: "Protect sensitive information with industry-leading security measures."
+      description:
+        "Protect sensitive information with industry-leading security measures.",
     },
     {
       icon: ThumbsUp,
       title: "Increased Trust",
-      description: "Build confidence with clients, partners, and regulatory bodies."
+      description:
+        "Build confidence with clients, partners, and regulatory bodies.",
     },
     {
       icon: FileCheck,
       title: "Streamlined Audits",
-      description: "Be prepared for compliance audits with robust documentation and processes."
+      description:
+        "Be prepared for compliance audits with robust documentation and processes.",
     },
     {
       icon: TrendingUp,
       title: "Business Continuity",
-      description: "Ensure operational resilience against security breaches and regulatory changes."
-    }
+      description:
+        "Ensure operational resilience against security breaches and regulatory changes.",
+    },
   ];
 
   return (
@@ -648,6 +848,10 @@ const ComplianceReadySystemsBenefits = () => {
           <h2 className="text-4xl lg:text-5xl font-semibold text-foreground mb-6">
             Secure Your Operations with Compliant Systems
           </h2>
+          <p className="mt-4 text-gray-400 max-w-2xl mx-auto">
+            Protect your business with AI‑powered mobile and web applications
+            built on HIPAA‑ and GDPR‑ready compliance frameworks.
+          </p>
         </motion.div>
 
         <motion.div
@@ -664,7 +868,7 @@ const ComplianceReadySystemsBenefits = () => {
                 key={index}
                 initial={{ opacity: 0, y: 20 }}
                 whileInView={{ opacity: 1, y: 0 }}
-                transition={{ duration: 0.5, delay: index * 0.1 }}
+                transition={{ duration: 0.5, delay: index * 0.01 }}
                 viewport={{ once: true }}
                 whileHover={{ y: -5 }}
                 className="group"
@@ -734,34 +938,40 @@ const ComplianceReadySystemsProcess = () => {
   const steps = [
     {
       title: "Compliance Assessment",
-      description: "Deep dive into your specific regulatory needs and current system status.",
-      icon: Search
+      description:
+        "Deep dive into your specific regulatory needs and current system status.",
+      icon: Search,
     },
     {
       title: "Secure Design & Planning",
-      description: "Architect solutions with compliance requirements embedded from the start.",
-      icon: Shield
+      description:
+        "Architect solutions with compliance requirements embedded from the start.",
+      icon: Shield,
     },
     {
       title: "Secure Development",
-      description: "Implement secure coding practices and features specific to regulations.",
-      icon: Code
+      description:
+        "Implement secure coding practices and features specific to regulations.",
+      icon: Code,
     },
     {
       title: "Security Testing & Auditing",
-      description: "Conduct penetration testing, vulnerability assessments, and compliance checks.",
-      icon: TestTube
+      description:
+        "Conduct penetration testing, vulnerability assessments, and compliance checks.",
+      icon: TestTube,
     },
     {
       title: "Documentation & Reporting",
-      description: "Prepare all necessary documentation for compliance and audits.",
-      icon: FileText
+      description:
+        "Prepare all necessary documentation for compliance and audits.",
+      icon: FileText,
     },
     {
       title: "Deployment & Monitoring",
-      description: "Launch the system with continuous security and compliance monitoring.",
-      icon: Monitor
-    }
+      description:
+        "Launch the system with continuous security and compliance monitoring.",
+      icon: Monitor,
+    },
   ];
 
   return (
@@ -777,6 +987,11 @@ const ComplianceReadySystemsProcess = () => {
           <h2 className="text-4xl lg:text-5xl font-semibold text-white mb-6">
             Our Secure & Compliant Development Process
           </h2>
+          <p className="mt-4 text-gray-400 max-w-2xl mx-auto">
+            Build AI‑powered mobile and web applications with a secure,
+            compliance‑first lifecycle that embeds HIPAA‑, GDPR‑ready controls
+            from design to deployment.
+          </p>
         </motion.div>
 
         <div className="relative">
@@ -795,15 +1010,23 @@ const ComplianceReadySystemsProcess = () => {
                   whileInView={{ opacity: 1, x: 0 }}
                   transition={{ duration: 0.8, delay: index * 0.2 }}
                   viewport={{ once: true }}
-                  className={`flex items-center ${isEven ? 'lg:flex-row' : 'lg:flex-row-reverse'} flex-col lg:gap-16 gap-8`}
+                  className={`flex items-center ${
+                    isEven ? "lg:flex-row" : "lg:flex-row-reverse"
+                  } flex-col lg:gap-16 gap-8`}
+                >
+                  <div
+                    className={`flex-1 ${
+                      isEven ? "lg:text-right" : "lg:text-left"
+                    } text-center lg:text-left`}
                   >
-                  <div className={`flex-1 ${isEven ? 'lg:text-right' : 'lg:text-left'} text-center lg:text-left`}>
                     <div className="bg-gray-900/50 backdrop-blur-md rounded-2xl border border-gray-800 p-8 hover:border-accent/30 transition-all duration-300 shadow-lg hover:shadow-xl">
                       <div className="flex items-center gap-4 mb-4 justify-center lg:justify-start">
                         <div className="w-12 h-12 bg-accent/20 rounded-xl flex items-center justify-center">
                           <IconComponent className="w-6 h-6 text-accent" />
                         </div>
-                        <div className="text-2xl font-bold text-accent">0{index + 1}</div>
+                        <div className="text-2xl font-bold text-accent">
+                          0{index + 1}
+                        </div>
                       </div>
                       <h3 className="text-2xl font-semibold text-white mb-4">
                         {step.title}
@@ -834,28 +1057,28 @@ const ComplianceReadySystemsAudience = () => {
     {
       icon: Heart,
       title: "Healthcare Providers",
-      description: "HIPAA, HITECH compliance for patient data protection."
+      description: "HIPAA, HITECH compliance for patient data protection.",
     },
     {
       icon: Building,
       title: "Financial Institutions",
-      description: "PCI DSS, SOC 2 compliance for secure financial operations."
+      description: "PCI DSS, SOC 2 compliance for secure financial operations.",
     },
     {
       icon: Globe,
       title: "EU/International Businesses",
-      description: "GDPR compliance for businesses handling EU citizen data."
+      description: "GDPR compliance for businesses handling EU citizen data.",
     },
     {
       icon: Shield,
       title: "Data-Sensitive Companies",
-      description: "Handling sensitive customer or proprietary data securely."
+      description: "Handling sensitive customer or proprietary data securely.",
     },
     {
       icon: Users,
       title: "Security-Focused Organizations",
-      description: "Requiring robust data security and privacy measures."
-    }
+      description: "Requiring robust data security and privacy measures.",
+    },
   ];
 
   return (
@@ -887,7 +1110,7 @@ const ComplianceReadySystemsAudience = () => {
                 key={index}
                 initial={{ opacity: 0, y: 20 }}
                 whileInView={{ opacity: 1, y: 0 }}
-                transition={{ duration: 0.5, delay: index * 0.1 }}
+                transition={{ duration: 0.5, delay: index * 0.01 }}
                 viewport={{ once: true }}
                 whileHover={{ y: -5 }}
                 className="group"
@@ -958,30 +1181,37 @@ const ComplianceReadySystemsCaseStudies = () => {
     {
       title: "HIPAA-Compliant Telehealth Platform",
       client: "Healthcare Provider",
-      description: "Developed a secure platform for patient data, achieving full HIPAA compliance within 8 months while ensuring seamless patient-provider communication and maintaining the highest security standards for protected health information.",
-      image: "https://images.unsplash.com/photo-1576091160399-112ba8d25d1f?w=400&h=300&fit=crop&auto=format",
+      description:
+        "Developed a secure platform for patient data, achieving full HIPAA compliance within 8 months while ensuring seamless patient-provider communication and maintaining the highest security standards for protected health information.",
+      // image:
+      //   "https://images.unsplash.com/photo-1576091160399-112ba8d25d1f?w=400&h=300&fit=crop&auto=format",
+      image: hospitalize,
       results: "Full HIPAA compliance in 8 months",
       engagement: "Healthcare compliance success",
-      gradient: "from-blue-500/20 to-cyan-500/20"
+      gradient: "from-blue-500/20 to-cyan-500/20",
     },
     {
       title: "GDPR-Ready E-commerce Portal",
       client: "E-commerce Company",
-      description: "Transformed an existing e-commerce site to meet all GDPR requirements, ensuring user data privacy with comprehensive consent management, data portability features, and right-to-be-forgotten implementation for EU customers.",
-      image: "https://images.unsplash.com/photo-1556742049-0cfed4f6a45d?w=400&h=300&fit=crop&auto=format",
+      description:
+        "Transformed an existing e-commerce site to meet all GDPR requirements, ensuring user data privacy with comprehensive consent management, data portability features, and right-to-be-forgotten implementation for EU customers.",
+      image:
+        "https://images.unsplash.com/photo-1556742049-0cfed4f6a45d?w=400&h=300&fit=crop&auto=format",
       results: "Full GDPR compliance achieved",
       engagement: "E-commerce privacy transformation",
-      gradient: "from-green-500/20 to-emerald-500/20"
+      gradient: "from-green-500/20 to-emerald-500/20",
     },
     {
       title: "SOC 2 Financial Services Platform",
       client: "FinTech Startup",
-      description: "Built a SOC 2 Type II compliant financial services platform from the ground up, implementing comprehensive security controls, audit trails, and monitoring systems to meet strict financial industry standards and customer trust requirements.",
-      image: "https://images.unsplash.com/photo-1563013544-824ae1b704d3?w=400&h=300&fit=crop&auto=format",
+      description:
+        "Built a SOC 2 Type II compliant financial services platform from the ground up, implementing comprehensive security controls, audit trails, and monitoring systems to meet strict financial industry standards and customer trust requirements.",
+      image:
+        "https://images.unsplash.com/photo-1563013544-824ae1b704d3?w=400&h=300&fit=crop&auto=format",
       results: "SOC 2 Type II certification",
       engagement: "Financial compliance implementation",
-      gradient: "from-purple-500/20 to-pink-500/20"
-    }
+      gradient: "from-purple-500/20 to-pink-500/20",
+    },
   ];
 
   return (
@@ -997,6 +1227,11 @@ const ComplianceReadySystemsCaseStudies = () => {
           <h2 className="text-4xl lg:text-5xl font-semibold text-white mb-8">
             Secure & Compliant Systems We've Delivered
           </h2>
+          <p className="mt-4 text-gray-400 max-w-2xl mx-auto">
+            AI‑powered mobile and web applications built with HIPAA‑ and
+            GDPR‑ready architecture, securing data‑driven operations across
+            regulated industries.
+          </p>
         </motion.div>
 
         <motion.div
@@ -1011,7 +1246,7 @@ const ComplianceReadySystemsCaseStudies = () => {
               key={index}
               initial={{ opacity: 0, y: 20 }}
               whileInView={{ opacity: 1, y: 0 }}
-              transition={{ duration: 0.5, delay: index * 0.1 }}
+              transition={{ duration: 0.5, delay: index * 0.01 }}
               viewport={{ once: true }}
               whileHover={{ y: -8, scale: 1.02 }}
               className="group cursor-pointer"
@@ -1027,7 +1262,10 @@ const ComplianceReadySystemsCaseStudies = () => {
                         <div className="text-xs text-gray-400 mb-2 uppercase tracking-wider">
                           {study.client}
                         </div>
-                        <Badge variant="secondary" className="text-xs bg-accent/20 text-accent border-accent/30">
+                        <Badge
+                          variant="secondary"
+                          className="text-xs bg-accent/20 text-accent border-accent/30"
+                        >
                           {study.results}
                         </Badge>
                       </div>
@@ -1039,7 +1277,9 @@ const ComplianceReadySystemsCaseStudies = () => {
                   </div>
 
                   <div className="px-8 pb-6 flex-1">
-                    <div className={`relative rounded-xl overflow-hidden bg-gradient-to-br ${study.gradient} p-4 border border-white/10`}>
+                    <div
+                      className={`relative rounded-xl overflow-hidden bg-gradient-to-br ${study.gradient} p-4 border border-white/10`}
+                    >
                       <ImageWithFallback
                         src={study.image}
                         alt={study.title}
@@ -1066,7 +1306,9 @@ const ComplianceReadySystemsCaseStudies = () => {
                       size="sm"
                       className="w-full justify-between text-accent hover:text-accent hover:bg-accent/10 group-hover:translate-x-1 transition-all duration-300 h-auto py-3"
                     >
-                      <span className="text-sm font-medium">VIEW FULL CASE STUDY</span>
+                      <span className="text-sm font-medium">
+                        VIEW FULL CASE STUDY
+                      </span>
                       <ArrowRight className="w-4 h-4" />
                     </Button>
                   </div>
@@ -1082,6 +1324,7 @@ const ComplianceReadySystemsCaseStudies = () => {
 
 // Mid-Page Lead Capture CTA
 const ComplianceReadySystemsInlineCTA = () => {
+  const navigate = useNavigate();
   return (
     <section className="py-20">
       <div className="container mx-auto px-6 lg:px-8">
@@ -1102,7 +1345,9 @@ const ComplianceReadySystemsInlineCTA = () => {
             <div className="inline-block p-[2px] rounded-full bg-gradient-to-r from-accent via-blue-500 to-green-500">
               <div className="bg-background rounded-full px-6 py-3 flex items-center gap-2">
                 <Shield className="w-5 h-5 text-foreground" />
-                <span className="text-foreground text-base font-medium">Compliance & Security</span>
+                <span className="text-foreground text-base font-medium">
+                  Compliance & Security
+                </span>
               </div>
             </div>
 
@@ -1112,10 +1357,14 @@ const ComplianceReadySystemsInlineCTA = () => {
             </h2>
 
             <p className="text-xl text-muted-foreground leading-relaxed max-w-2xl mx-auto">
-              Protect your business and your data with our expert-led solutions.
+              Protect your business and your data with AI‑powered mobile and web
+              applications built on HIPAA‑ and GDPR‑ready compliance frameworks.
             </p>
 
-            <ShimmerButton className="text-xl px-10 py-5 rounded-2xl shadow-lg hover:shadow-xl">
+            <ShimmerButton
+              className="text-xl px-10 py-5 rounded-2xl shadow-lg hover:shadow-xl"
+              onClick={() => navigate("/start-a-project")}
+            >
               <div className="inline-flex items-center gap-3">
                 <Search className="w-6 h-6 flex-shrink-0" />
                 <span>Get a Compliance Assessment</span>
@@ -1132,25 +1381,31 @@ const ComplianceReadySystemsInlineCTA = () => {
 const ComplianceReadySystemsFAQs = () => {
   const faqs = [
     {
-      question: "What specific regulations do you have expertise in (e.g., HIPAA, GDPR, SOC 2)?",
-      answer: "We have extensive expertise across major regulatory frameworks: HIPAA and HITECH for healthcare data protection, GDPR for EU data privacy compliance, SOC 2 Type I and II for service organization controls, ISO 27001 for information security management, PCI DSS for payment card industry compliance, CCPA for California consumer privacy, and FERPA for educational records. Our team stays current with regulatory changes and requirements, ensuring your systems meet the latest standards. We also work with industry-specific regulations like 21 CFR Part 11 for pharmaceuticals, FISMA for federal systems, and various financial services regulations including SOX and GLBA."
+      question:
+        "What specific regulations do you have expertise in (e.g., HIPAA, GDPR, SOC 2)?",
+      answer:
+        "We have extensive expertise across major regulatory frameworks: HIPAA and HITECH for healthcare data protection, GDPR for EU data privacy compliance, SOC 2 Type I and II for service organization controls, ISO 27001 for information security management, PCI DSS for payment card industry compliance, CCPA for California consumer privacy, and FERPA for educational records. Our AI-powered mobile and web applications are architected to meet these standards, with experts who stay current with regulatory changes. We also work with industry-specific regulations like 21 CFR Part 11 for pharmaceuticals, FISMA for federal systems, and financial services regulations including SOX and GLBA.",
     },
     {
       question: "How do you handle ongoing compliance changes?",
-      answer: "We provide comprehensive ongoing compliance management: Regulatory monitoring services that track changes in applicable laws and standards, quarterly compliance reviews and gap analyses, automated compliance reporting and documentation updates, proactive system updates to address new requirements, and dedicated compliance consulting for interpreting new regulations. Our compliance management includes: subscription to regulatory update services, legal review partnerships for complex changes, automated testing for compliance drift detection, and documented change management processes. We also provide compliance calendars, training updates for your team, and emergency response procedures for urgent regulatory changes."
+      answer:
+        "We provide comprehensive ongoing compliance management for AI-driven app development services and AI mobile and web development solutions: regulatory monitoring services that track changes in applicable laws and standards, quarterly compliance reviews and gap analyses, automated compliance reporting and documentation updates, proactive system updates to address new requirements, and dedicated compliance consulting for interpreting new regulations. Our compliance management includes subscription to regulatory update services, legal review partnerships for complex changes, automated testing for compliance drift detection, and documented change-management processes, along with compliance calendars, training updates, and emergency response procedures for urgent regulatory changes.",
     },
     {
       question: "Can you help us with compliance audits?",
-      answer: "Yes, we provide comprehensive audit support services: Pre-audit preparation including documentation review, gap analysis, and remediation planning, audit facilitation with technical expertise and evidence preparation, post-audit remediation support for any identified deficiencies, and ongoing audit readiness maintenance. Our audit support includes: creation of audit trails and evidence repositories, preparation of technical documentation and system diagrams, coordination with external auditors and assessors, remediation project management, and compliance testing and validation. We work with major audit firms and have experience with SOC 2, ISO 27001, HIPAA, and other compliance audits, ensuring you're fully prepared and supported throughout the process."
+      answer:
+        "Yes. We provide comprehensive audit support for AI-powered mobile and web applications: pre-audit preparation including documentation review, gap analysis, and remediation planning; audit facilitation with technical expertise and evidence preparation; post-audit remediation support for any identified deficiencies; and ongoing audit readiness maintenance. Our audit support includes creation of audit trails and evidence repositories, preparation of technical documentation and system diagrams, coordination with external auditors and assessors, remediation project management, and compliance testing and validation. We work with major audit firms and have experience with SOC 2, ISO 27001, HIPAA, and other compliance audits, ensuring you’re fully prepared and supported throughout the process.",
     },
     {
       question: "What security measures do you integrate into your systems?",
-      answer: "We implement comprehensive security controls aligned with industry best practices: Data encryption at rest and in transit using AES-256 and TLS 1.3, multi-factor authentication and role-based access controls, comprehensive logging and audit trails for all system activities, network security including firewalls, VPNs, and intrusion detection, vulnerability management with regular scanning and penetration testing, and backup and disaster recovery systems. Additional security measures include: secure software development lifecycle practices, security monitoring and incident response capabilities, data loss prevention systems, privileged access management, and security awareness training programs. All security implementations follow zero-trust principles and defense-in-depth strategies."
+      answer:
+        "We implement comprehensive security controls aligned with industry best practices for AI-driven app development services and AI mobile and web development solutions: data encryption at rest and in transit using AES-256 and TLS 1.3, multi-factor authentication and role-based access controls, comprehensive logging and audit trails for all system activities, network security including firewalls, VPNs, and intrusion detection, vulnerability management with regular scanning and penetration testing, and backup and disaster recovery systems. Additional security measures include secure software development lifecycle practices, security monitoring and incident response capabilities, data loss prevention systems, privileged access management, and security awareness training programs, all built on zero-trust principles and defense-in-depth strategies.",
     },
     {
       question: "Is existing system remediation something you offer?",
-      answer: "Absolutely! We specialize in remediating existing systems for compliance: Comprehensive compliance gap analysis of current systems, risk assessment and prioritization of remediation efforts, phased remediation planning to minimize business disruption, implementation of security controls and compliance features, data migration and system integration services, and post-remediation testing and validation. Our remediation approach includes: minimal downtime deployment strategies, parallel system operation during transitions, comprehensive testing protocols, user training and change management, and ongoing support during the transition period. We work with legacy systems, cloud platforms, and hybrid environments, ensuring your existing investments are preserved while achieving full compliance."
-    }
+      answer:
+        "Absolutely. We specialize in remediating existing systems for compliance, including legacy AI mobile and web development solutions: comprehensive compliance gap analysis of current systems, risk assessment and prioritization of remediation efforts, phased remediation planning to minimize business disruption, implementation of security controls and compliance features, data migration and system integration services, and post-remediation testing and validation. Our remediation approach includes minimal-downtime deployment strategies, parallel system operation during transitions, comprehensive testing protocols, user training and change management, and ongoing support during the transition period. We work with legacy systems, cloud platforms, and hybrid environments, ensuring your existing investments are preserved while achieving full compliance across AI mobile application developers’ workflows.",
+    },
   ];
 
   return (
@@ -1183,7 +1438,9 @@ const ComplianceReadySystemsFAQs = () => {
                 className="bg-gray-900/50 backdrop-blur-md rounded-2xl border border-gray-800 px-10 shadow-lg"
               >
                 <AccordionTrigger className="text-left hover:no-underline py-10 text-xl">
-                  <span className="font-semibold text-white">{faq.question}</span>
+                  <span className="font-semibold text-white">
+                    {faq.question}
+                  </span>
                 </AccordionTrigger>
                 <AccordionContent className="text-gray-300 pb-10 text-lg leading-relaxed">
                   {faq.answer}
@@ -1199,6 +1456,7 @@ const ComplianceReadySystemsFAQs = () => {
 
 // Final CTA Section
 const ComplianceReadySystemsFinalCTA = () => {
+  const navigate = useNavigate();
   return (
     <section className="py-20 relative overflow-hidden">
       <div className="container mx-auto px-6 lg:px-8 relative z-10">
@@ -1219,7 +1477,9 @@ const ComplianceReadySystemsFinalCTA = () => {
             <div className="inline-block p-[2px] rounded-full bg-gradient-to-r from-accent via-blue-500 to-green-500">
               <div className="bg-background rounded-full px-6 py-3 flex items-center gap-2">
                 <Shield className="w-5 h-5 text-foreground" />
-                <span className="text-foreground text-base font-medium">Trust & Security</span>
+                <span className="text-foreground text-base font-medium">
+                  Trust & Security
+                </span>
               </div>
             </div>
           </motion.div>
@@ -1236,7 +1496,9 @@ const ComplianceReadySystemsFinalCTA = () => {
             viewport={{ once: true }}
             className="text-xl text-muted-foreground mb-12 max-w-2xl mx-auto leading-relaxed"
           >
-            Navigate the complex world of regulatory compliance with confidence. WDI builds and fortifies systems that stand up to the strictest standards.
+            Navigate the complex world of regulatory compliance with confidence.
+            WDI builds and fortifies AI‑powered mobile and web applications that
+            meet the strictest security and compliance standards.
           </motion.p>
 
           <motion.div
@@ -1246,7 +1508,10 @@ const ComplianceReadySystemsFinalCTA = () => {
             viewport={{ once: true }}
             className="space-y-8"
           >
-            <ShimmerButton className="px-12 py-6 text-xl rounded-2xl shadow-2xl hover:shadow-accent/25">
+            <ShimmerButton
+              className="px-12 py-6 text-xl rounded-2xl shadow-2xl hover:shadow-accent/25"
+              onClick={() => navigate("/start-a-project")}
+            >
               <div className="inline-flex items-center gap-3">
                 <Calendar className="w-6 h-6 flex-shrink-0" />
                 <span>Schedule a Security & Compliance Consultation</span>
@@ -1254,7 +1519,8 @@ const ComplianceReadySystemsFinalCTA = () => {
             </ShimmerButton>
 
             <p className="text-muted-foreground text-sm">
-              Assessment • Design • Development • Testing • Documentation • Monitoring
+              Assessment • Design • Development • Testing • Documentation •
+              Monitoring
             </p>
           </motion.div>
         </motion.div>
@@ -1274,7 +1540,7 @@ const ComplianceReadySystemsFinalCTA = () => {
 export const ComplianceReadySystems = () => {
   return (
     <div className="dark min-h-screen">
-      <Navigation />
+      {/* <Navigation /> */}
 
       {/* Hero Section */}
       <section className="bg-black">
@@ -1327,9 +1593,7 @@ export const ComplianceReadySystems = () => {
       </section>
 
       {/* Footer */}
-      <section className="bg-card">
-        <Footer />
-      </section>
+      <section className="bg-card">{/* <Footer /> */}</section>
     </div>
   );
 };