Merge branch 'main' of http://git.wdipl.com/PriyanshuVishwakarma/Wdipl-react into parth-dev

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;
+    scrollToTop();
+  }, [location.pathname]);
 
-    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);
-
-    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">
-    <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>
-    <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 />
+      <Navigation />
+      <main>
+        <AppRouter />
+      </main>
+      <Footer />
       <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,29 +1,40 @@
 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 = [
-    {
-      value: "75+",
-      label: "App Developed",
-      description: "Successful mobile applications delivered",
-    },
-    {
-      value: "25+",
-      label: "App Deployed",
-      description: "Live applications in production",
-    },
-    {
-      value: "3M+",
-      label: "App downloads",
-      description: "Total downloads across all platforms",
-    },
-  ];
+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",
+    description: "Successful mobile applications delivered",
+  },
+  {
+    value: "25+",
+    label: "App Deployed",
+    description: "Live applications in production",
+  },
+  {
+    value: "3M+",
+    label: "App downloads",
+    description: "Total downloads across all platforms",
+  },
+];
+
+const AppSuccessMetrics: React.FC<AppSuccessMetricsProps> = ({ metrics }) => {
+  const finalMetrics = metrics ?? defaultMetrics;
 
   return (
     <section className="py-20 lg:py-32 bg-black relative overflow-hidden">
@@ -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,11 +200,10 @@ const StarRating = ({ rating }: { rating: number }) => {
       {Array.from({ length: 5 }).map((_, i) => (
         <Star
           key={i}
-          className={`w-4 h-4 ${
-            i < rating
-              ? 'text-yellow-400 fill-yellow-400'
-              : 'text-gray-600 fill-gray-600'
-          }`}
+          className={`w-4 h-4 ${i < rating
+            ? 'text-yellow-400 fill-yellow-400'
+            : 'text-gray-600 fill-gray-600'
+            }`}
         />
       ))}
     </div>
@@ -211,17 +211,17 @@ const StarRating = ({ rating }: { rating: number }) => {
 };
 
 // Individual testimonial card
-const TestimonialCard = ({ 
-  testimonial, 
-  onHover, 
-  onLeave 
-}: { 
+const TestimonialCard = ({
+  testimonial,
+  onHover,
+  onLeave
+}: {
   testimonial: typeof testimonials[0];
   onHover?: () => void;
   onLeave?: () => void;
 }) => {
   return (
-    <div 
+    <div
       className="bg-card rounded-[10px] border border-border p-6 w-[400px] flex-shrink-0 hover:border-border/80 hover:shadow-lg transition-all duration-300 select-none"
       onMouseEnter={onHover}
       onMouseLeave={onLeave}
@@ -238,12 +238,12 @@ const TestimonialCard = ({
         </div>
         <StarRating rating={testimonial.rating} />
       </div>
-      
+
       {/* Quote */}
       <p className="text-muted-foreground leading-relaxed text-base mb-6">
         "{testimonial.quote}"
       </p>
-      
+
       {/* Author Info - Without Avatar */}
       <div className="pt-2 border-t border-border/50">
         <div className="font-medium text-foreground text-base">
@@ -272,9 +272,9 @@ const MarqueeRow = ({ testimonials: rowTestimonials }: { testimonials: typeof te
   const startAnimation = async (fromPosition: number = 0) => {
     const remainingDistance = TOTAL_DISTANCE - fromPosition;
     const remainingDuration = (Math.abs(remainingDistance) / Math.abs(TOTAL_DISTANCE)) * ANIMATION_DURATION;
-    
+
     startTimeRef.current = Date.now();
-    
+
     try {
       await controls.start({
         x: [fromPosition, TOTAL_DISTANCE],
@@ -294,7 +294,7 @@ const MarqueeRow = ({ testimonials: rowTestimonials }: { testimonials: typeof te
   const pauseAnimation = () => {
     controls.stop();
     pauseTimeRef.current = Date.now();
-    
+
     // Calculate current position based on elapsed time
     const elapsedTime = (pauseTimeRef.current - startTimeRef.current) / 1000;
     const progress = (elapsedTime % ANIMATION_DURATION) / ANIMATION_DURATION;
@@ -331,7 +331,7 @@ const MarqueeRow = ({ testimonials: rowTestimonials }: { testimonials: typeof te
   };
 
   return (
-    <div 
+    <div
       className="flex overflow-hidden"
       role="region"
       aria-label="Client testimonials carousel"
@@ -345,8 +345,8 @@ const MarqueeRow = ({ testimonials: rowTestimonials }: { testimonials: typeof te
       >
         {/* First set */}
         {rowTestimonials.map((testimonial, index) => (
-          <TestimonialCard 
-            key={`first-${index}`} 
+          <TestimonialCard
+            key={`first-${index}`}
             testimonial={testimonial}
             onHover={handleCardHover}
             onLeave={handleCardLeave}
@@ -354,8 +354,8 @@ const MarqueeRow = ({ testimonials: rowTestimonials }: { testimonials: typeof te
         ))}
         {/* Duplicate set for seamless loop */}
         {rowTestimonials.map((testimonial, index) => (
-          <TestimonialCard 
-            key={`second-${index}`} 
+          <TestimonialCard
+            key={`second-${index}`}
             testimonial={testimonial}
             onHover={handleCardHover}
             onLeave={handleCardLeave}
@@ -384,7 +384,7 @@ const ClutchRating = () => {
           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">
@@ -424,10 +424,10 @@ 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>
-        
+
         {/* Single Row Marquee Testimonials */}
         <div className="mb-16">
           <motion.div
@@ -439,10 +439,45 @@ export const CarouselTestimonials = () => {
             <MarqueeRow testimonials={testimonials} />
           </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) => (
@@ -136,15 +144,15 @@ const ProjectImageCircles = () => (
           key={index}
           initial={{ opacity: 0, scale: 0 }}
           whileInView={{ opacity: 1, scale: 1 }}
-          transition={{ 
-            duration: 0.5, 
+          transition={{
+            duration: 0.5,
             delay: 0.5 + (index * 0.1),
             type: "spring",
-            stiffness: 200 
+            stiffness: 200
           }}
           viewport={{ once: true }}
-          whileHover={{ 
-            scale: 1.1, 
+          whileHover={{
+            scale: 1.1,
             zIndex: 10,
             transition: { duration: 0.2 }
           }}
@@ -154,19 +162,20 @@ 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">
-            <div 
-              className="w-10 h-8 flex items-center justify-center transform group-hover:scale-110 transition-transform duration-300"
-              role="img" 
+          {/* 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="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">
             <div className="text-center">
@@ -181,11 +190,11 @@ 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"
+  <div
+    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",
     }}
@@ -219,23 +228,23 @@ export const ClientLogos = () => {
   return (
     <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>
-        
+
         {/* Project Image Circles */}
         <ProjectImageCircles />
-        
+
         {/* Company Logos Ticker */}
         <div className="overflow-hidden">
           <MarqueeRow logos={companyLogos} />

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,13 +4,12 @@ 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, 
-  Users, 
-  Zap, 
-  Eye, 
+import {
+  ArrowRight,
+  TrendingUp,
+  Users,
+  Zap,
+  Eye,
   ShoppingCart,
   Heart,
   Star,
@@ -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,26 +174,26 @@ 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;
-            
+
             return (
               <motion.div
                 key={study.id}
@@ -192,39 +201,41 @@ 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 
+                <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 */}
                         <div className={`absolute inset-0 bg-gradient-to-t ${study.gradient} opacity-20 group-hover:opacity-40 transition-opacity duration-500`} />
-                        
+
                         {/* 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,22 +246,21 @@ 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' :
-                                study.accentColor === 'orange' ? 'from-orange-500 to-red-500' :
-                                'from-emerald-500 to-teal-500'
-                              } flex items-center justify-center flex-shrink-0`}>
+                                  study.accentColor === 'purple' ? 'from-purple-500 to-pink-500' :
+                                    study.accentColor === 'cyan' ? 'from-cyan-500 to-blue-500' :
+                                      study.accentColor === 'orange' ? 'from-orange-500 to-red-500' :
+                                        'from-emerald-500 to-teal-500'
+                                } 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>
@@ -280,10 +290,10 @@ const FeaturedCaseStudies = () => {
                         <div className="mb-6 min-h-[32px]">
                           <div className="flex flex-wrap gap-2">
                             {study.tags.map((tag) => (
-                              <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"
+                              <Badge
+                                key={tag}
+                                variant="secondary"
+                                className="text-xs text-gray-300 transition-colors border-gray-700 bg-gray-800/50 hover:bg-gray-700/50"
                               >
                                 {tag}
                               </Badge>
@@ -295,23 +305,25 @@ const FeaturedCaseStudies = () => {
                       {/* CTA Button - Fixed at Bottom */}
                       <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"
+                          <Button
+                            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,72 +343,77 @@ 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>
-          
-          <div className="grid lg:grid-cols-3 gap-8 items-stretch">
+          <p className="mt-4 text-gray-400 max-w-2xl mx-auto">
+
+            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;
-              
+
               return (
                 <motion.div
                   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 
+                  <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 */}
                           <div className={`absolute inset-0 bg-gradient-to-t ${story.gradient} opacity-20 group-hover:opacity-40 transition-opacity duration-500`} />
-                          
+
                           {/* Key Achievement - Overlaid on Visual */}
                           <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' :
-                                  story.accentColor === 'orange' ? 'from-orange-500 to-red-500' :
-                                  'from-emerald-500 to-teal-500'
-                                } flex items-center justify-center flex-shrink-0`}>
+                                    story.accentColor === 'purple' ? 'from-purple-500 to-pink-500' :
+                                      story.accentColor === 'cyan' ? 'from-cyan-500 to-blue-500' :
+                                        story.accentColor === 'orange' ? 'from-orange-500 to-red-500' :
+                                          'from-emerald-500 to-teal-500'
+                                  } 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>
@@ -426,10 +443,10 @@ const FeaturedCaseStudies = () => {
                           <div className="mb-6 min-h-[32px]">
                             <div className="flex flex-wrap gap-2">
                               {story.tags.map((tag) => (
-                                <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"
+                                <Badge
+                                  key={tag}
+                                  variant="secondary"
+                                  className="text-xs text-gray-300 transition-colors border-gray-700 bg-gray-800/50 hover:bg-gray-700/50"
                                 >
                                   {tag}
                                 </Badge>
@@ -441,25 +458,25 @@ const FeaturedCaseStudies = () => {
                         {/* CTA Button - Fixed at Bottom */}
                         <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"
+                            <Button
+                              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" 
+          <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,100 @@ 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",
+    },
+
+  ],
+  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 +206,7 @@ const socialLinks = [
   {
     name: "YouTube",
     icon: Youtube,
-    url: "https://youtube.com/wdi",
+    url: "https://www.youtube.com/@WebsitedevelopersindiaPvtLmtd",
   },
 ];
 
@@ -131,10 +225,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,35 +239,37 @@ const FooterSection = ({
   title: string;
   links: Array<{ label: string; url: string }>;
   delay?: number;
-}) => (
-  <motion.div
-    initial={{ opacity: 0, y: 30 }}
-    whileInView={{ opacity: 1, y: 0 }}
-    transition={{ duration: 0.6, delay }}
-    viewport={{ once: true }}
-    className="space-y-4"
-  >
-    <h4 className="font-semibold text-white text-lg">
-      {title}
-    </h4>
-    <ul className="space-y-3">
-      {links.map((link) => (
-        <li key={link.label}>
-          <a
-            href="#"
-            onClick={(e) => {
-              e.preventDefault();
-              navigateTo(link.url);
-            }}
-            className="text-[#CCCCCC] hover:text-white transition-colors duration-200 text-sm block py-1 hover:translate-x-1 transform cursor-pointer"
-          >
-            {link.label}
-          </a>
-        </li>
-      ))}
-    </ul>
-  </motion.div>
-);
+}) => {
+  const navigate = useNavigate();
+
+  return (
+    <motion.div
+      initial={{ opacity: 0, y: 30 }}
+      whileInView={{ opacity: 1, y: 0 }}
+      transition={{ duration: 0.6, delay }}
+      viewport={{ once: true }}
+      className="space-y-4"
+    >
+      <h4 className="font-semibold text-white text-lg">{title}</h4>
+      <ul className="space-y-3">
+        {links.map((link) => (
+          <li key={link.label}>
+            <a
+              href={link.url || "#"}
+              onClick={(e) => {
+                e.preventDefault();
+                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"
+            >
+              {link.label}
+            </a>
+          </li>
+        ))}
+      </ul>
+    </motion.div>
+  );
+};
 
 // Newsletter subscription component
 const NewsletterSection = () => {
@@ -210,9 +308,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 +320,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 +342,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,158 +358,141 @@ const NewsletterSection = () => {
 
 export const Footer = () => {
   return (
-    <footer className="relative bg-[#0E0E0E] border-t border-white/10 overflow-hidden">
-      <GridPattern strokeDasharray="4 2" />
+    <>
+      <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">
-            {/* Company Info */}
-            <motion.div
-              initial={{ opacity: 0, y: 30 }}
-              whileInView={{ opacity: 1, y: 0 }}
-              transition={{ duration: 0.6 }}
-              viewport={{ once: true }}
-              className="lg:col-span-2 space-y-6"
-            >
-              <div className="flex items-center">
-                <div className="w-12 h-12">
-                  <BlackLogo14 />
+        <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-8 gap-12">
+              {/* Company Info */}
+              <motion.div
+                initial={{ opacity: 0, y: 30 }}
+                whileInView={{ opacity: 1, y: 0 }}
+                transition={{ duration: 0.6 }}
+                viewport={{ once: true }}
+                className="lg:col-span-2 space-y-6"
+              >
+                <div className="flex items-center">
+                  <div className="w-12 h-12">
+                    <BlackLogo14 />
+                  </div>
                 </div>
-              </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.
-              </p>
+                <p className="text-[#CCCCCC] leading-relaxed max-w-md">
+                  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 */}
-              <div className="space-y-4">
-                <h5 className="font-semibold text-white text-sm tracking-wide uppercase">
-                  India Office
-                </h5>
-                <div className="space-y-3">
-                  {contactInfo.map((contact) => {
-                    const Icon = contact.icon;
+                {/* India Office Contact Information */}
+                <div className="space-y-4">
+                  <h5 className="font-semibold text-white text-sm tracking-wide uppercase">
+                    India Office
+                  </h5>
+                  <div className="space-y-3">
+                    {contactInfo.map((contact) => {
+                      const Icon = contact.icon;
+                      return (
+                        <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" />
+                          <span className="text-sm leading-relaxed">
+                            {contact.label}
+                          </span>
+                        </a>
+                      );
+                    })}
+                  </div>
+                </div>
+
+                {/* Social Links */}
+                <div className="flex gap-4 pt-4">
+                  {socialLinks.map((social) => {
+                    const Icon = social.icon;
                     return (
                       <a
-                        key={contact.label}
-                        href={contact.url}
-                        className="flex items-start gap-3 text-[#CCCCCC] hover:text-white transition-colors duration-200"
+                        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}
                       >
-                        <Icon className="w-4 h-4 text-[#E5195E] mt-0.5 flex-shrink-0" />
-                        <span className="text-sm leading-relaxed">
-                          {contact.label}
-                        </span>
+                        <Icon className="w-4 h-4" />
                       </a>
                     );
                   })}
                 </div>
+              </motion.div>
+
+              {/* Navigation Sections */}
+              <FooterSection
+                title="Explore"
+                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="Company"
+                  links={footerNavigation.Company}
+                  delay={0.3}
+                />
               </div>
 
-              {/* Social Links */}
-              <div className="flex gap-4 pt-4">
-                {socialLinks.map((social) => {
-                  const Icon = social.icon;
-                  return (
-                    <a
-                      key={social.name}
-                      href={social.url}
-                      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}
-                    >
-                      <Icon className="w-4 h-4" />
-                    </a>
-                  );
-                })}
-              </div>
-            </motion.div>
-
-            {/* Navigation Sections */}
-            <FooterSection
-              title="Explore"
-              links={footerNavigation.Explore}
-              delay={0.1}
-            />
-            <FooterSection
-              title="Services"
-              links={footerNavigation.Services}
-              delay={0.2}
-            />
-            <FooterSection
-              title="AI & ML"
-              links={footerNavigation["AI & ML"]}
-              delay={0.3}
-            />
-            <FooterSection
-              title="Solutions"
-              links={footerNavigation.Solutions}
-              delay={0.4}
-            />
-            <FooterSection
-              title="Resources"
-              links={footerNavigation.Resources}
-              delay={0.5}
-            />
-          </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.
+              {/* Combined AI & ML with Resources */}
+              <div className="space-y-8">
+                <FooterSection
+                  title="AI & ML"
+                  links={footerNavigation["AI & ML"]}
+                  delay={0.4}
+                />
+                <FooterSection
+                  title="Resources"
+                  links={footerNavigation.Resources}
+                  delay={0.5}
+                />
               </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>
+              <FooterSection
+                title="Solutions"
+                links={footerNavigation.Solutions}
+                delay={0.6}
+              />
 
-              <div className="text-[#CCCCCC] text-sm text-center lg:text-right">
-                Engineered by WDI — because someone had to do it
-                right. 💻
-              </div>
+              <FooterSection
+                title="Hire Talent"
+                links={footerNavigation.HireTalent}
+                delay={0.7}
+              />
+              <FooterSection
+                title="Countries we serve"
+                links={footerNavigation.NewColumn}
+                delay={0.8}
+              />
             </div>
           </div>
-        </motion.div>
-      </div>
-    </footer>
+
+          {/* Newsletter Subscription Section */}
+          <NewsletterSection />
+        </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

@@ -1,10 +1,10 @@
 import { motion } from "framer-motion";
-import { 
-  CreditCard, 
-  Heart, 
-  ShoppingCart, 
-  GraduationCap, 
-  Truck, 
+import {
+  CreditCard,
+  Heart,
+  ShoppingCart,
+  GraduationCap,
+  Truck,
   Video,
   Building,
   Plane,
@@ -14,39 +14,42 @@ 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;
-  
+
   return (
     <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,10 +62,16 @@ 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" />
-      
+
       <div className="relative z-10 container mx-auto px-6 lg:px-8">
         <motion.div
           initial={{ opacity: 0, y: 30 }}
@@ -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} 
+            <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>
                 ))}
+
+                {/* 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={() => {
-                    navigate("/start-a-project");
-                    setIsMobileMenuOpen(false);
-                  }}
+                  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,16 +75,14 @@ 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"
-                ? "bg-muted border border-border text-foreground"
-                : "bg-accent text-accent-foreground"
-            }`}
+            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"
+              }`}
           >
             <div className="text-xs font-medium mb-1 opacity-70">
               {message.from}
@@ -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,13 +2,14 @@ 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" />
-      
+
       <div className="relative z-10 container mx-auto px-6 lg:px-8">
         <div className="grid lg:grid-cols-2 gap-16 items-center max-w-6xl mx-auto">
           {/* Left Content */}
@@ -24,10 +25,10 @@ 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>
-            
+
             <div className="space-y-6">
               <div className="flex items-center gap-4">
                 <div className="w-12 h-12 bg-white/10 backdrop-blur-sm rounded-lg border border-white/20 flex items-center justify-center">
@@ -38,7 +39,7 @@ export const SplitCallToAction = () => {
                   <div className="text-muted-foreground text-sm">No sales pitch, just honest advice</div>
                 </div>
               </div>
-              
+
               <div className="flex items-center gap-4">
                 <div className="w-12 h-12 bg-white/10 backdrop-blur-sm rounded-lg border border-white/20 flex items-center justify-center">
                   <Clock className="w-6 h-6 text-accent" />
@@ -48,7 +49,7 @@ export const SplitCallToAction = () => {
                   <div className="text-muted-foreground text-sm">Available across all time zones</div>
                 </div>
               </div>
-              
+
               <div className="flex items-center gap-4">
                 <div className="w-12 h-12 bg-white/10 backdrop-blur-sm rounded-lg border border-white/20 flex items-center justify-center">
                   <Zap className="w-6 h-6 text-accent" />
@@ -60,7 +61,7 @@ export const SplitCallToAction = () => {
               </div>
             </div>
           </motion.div>
-          
+
           {/* Right CTA */}
           <motion.div
             initial={{ opacity: 0, x: 50 }}
@@ -81,18 +82,18 @@ export const SplitCallToAction = () => {
                   Let's discuss your project and explore how we can help you succeed.
                 </p>
               </div>
-              
+
               <div className="space-y-8">
-                <Button 
-                  size="lg" 
+                <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
                 </Button>
               </div>
-              
+
               <div className="mt-8 pt-8 border-t border-border">
                 <div className="grid grid-cols-3 gap-4 text-center text-sm">
                   <div>

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}
@@ -26,4 +29,4 @@ const ShimmerButton = React.forwardRef<HTMLButtonElement, ShimmerButtonProps>(
 
 ShimmerButton.displayName = "ShimmerButton";
 
-export { ShimmerButton };
+export { ShimmerButton };

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>
-      <App />
+       <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/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,14 +650,12 @@ 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"
-                  } 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`}
+                    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">
                       <div className="flex items-center gap-4 mb-4 justify-center lg:justify-start">
@@ -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) => (
-              <motion.div
-                key={index}
-                initial={{ opacity: 0, y: 20 }}
-                whileInView={{ opacity: 1, y: 0 }}
-                transition={{ duration: 0.5, delay: index * 0.1 }}
-                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">
-                    <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"
-                    />
-                  </div>
-                  <h4 className="font-semibold text-foreground text-sm mb-1">
-                    {tech.name}
-                  </h4>
-                  <p className="text-xs text-muted-foreground">
-                    {tech.category}
-                  </p>
-                </Card>
-              </motion.div>
-            ))}
+          <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.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"
+                        }`}
+                    >
+                      <ImageWithFallback
+                        src={tech.logo}
+                        alt={tech.name}
+                        className="w-8 h-8 object-contain"
+                      />
+                    </div>
+
+                    <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>
+              );
+            })}
           </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) => (
-              <motion.div
-                key={index}
-                initial={{ opacity: 0, y: 20 }}
-                whileInView={{ opacity: 1, y: 0 }}
-                transition={{ duration: 0.5, delay: index * 0.1 }}
-                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">
-                    <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"
-                    />
-                  </div>
-                  <h4 className="font-semibold text-foreground text-sm mb-1">
-                    {db.name}
-                  </h4>
-                  <p className="text-xs text-muted-foreground">{db.category}</p>
-                </Card>
-              </motion.div>
-            ))}
+          <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.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"
+                        }`}
+                    >
+                      <ImageWithFallback
+                        src={tech.logo}
+                        alt={tech.name}
+                        className="w-8 h-8 object-contain"
+                      />
+                    </div>
+
+                    <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>
+              );
+            })}
           </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, 
+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
@@ -44,12 +94,12 @@ const HeroWithCTA = () => {
                 <span className="text-white">Innovating the Future of </span>
                 <span className="text-[#E5195E]">Digital Solutions</span>
               </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>
-            
+
             {/* CTAs */}
             <motion.div
               initial={{ opacity: 0, y: 20 }}
@@ -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,15 +116,15 @@ 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>
               </Button>
             </motion.div>
           </motion.div>
-          
+
           {/* Right side with company intro */}
           <motion.div
             initial={{ opacity: 0, x: 50 }}
@@ -107,7 +157,7 @@ const WhyChooseWDISection = () => {
       icon: Lightbulb
     },
     {
-      id: "expertise", 
+      id: "expertise",
       title: "Expertise",
       description: "A team of seasoned professionals with deep industry knowledge.",
       icon: Award
@@ -140,10 +190,9 @@ const WhyChooseWDISection = () => {
             <span className="text-white">Why Choose </span>
             <span className="text-[#E5195E]">WDI?</span>
           </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"
@@ -171,11 +220,11 @@ const WhyChooseWDISection = () => {
                     <div className="mb-6">
                       <IconComponent className="w-12 h-12 text-accent" />
                     </div>
-                    
+
                     <h3 className="text-xl font-semibold text-white mb-4 leading-tight">
                       {strength.title}
                     </h3>
-                    
+
                     <p className="text-gray-400 leading-relaxed">
                       {strength.description}
                     </p>
@@ -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 (
@@ -213,9 +262,9 @@ const ImpactNumbersSection = () => {
             <span className="text-white">Our Impact in </span>
             <span className="text-[#E5195E]">Numbers</span>
           </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",
@@ -305,7 +355,7 @@ const LearnMoreSection = () => {
             Explore different aspects of our company and what makes us unique
           </p>
         </motion.div>
-        
+
         <motion.div
           initial={{ opacity: 0, y: 40 }}
           whileInView={{ opacity: 1, y: 0 }}
@@ -320,18 +370,18 @@ 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">
                     <div className="w-12 h-12 bg-accent/20 rounded-lg flex items-center justify-center">
                       <IconComponent className="w-6 h-6 text-accent" />
                     </div>
-                    
+
                     <div>
                       <h3 className="text-xl font-semibold text-white mb-4">
                         {section.title}
@@ -340,7 +390,7 @@ const LearnMoreSection = () => {
                         {section.description}
                       </p>
                     </div>
-                    
+
                     <div className="flex items-center gap-2 text-accent font-medium mt-auto">
                       <span>Learn More</span>
                       <ArrowRight className="w-4 h-4" />
@@ -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 }}
@@ -390,11 +442,11 @@ const TestimonialSection = () => {
                   ))}
                 </div>
               </div>
-              
+
               <blockquote className="text-2xl text-white leading-relaxed mb-8 italic">
                 "WDI has been instrumental in transforming our digital infrastructure. Their innovative approach and technical expertise exceeded our expectations."
               </blockquote>
-              
+
               <div className="flex items-center gap-4">
                 <div className="w-12 h-12 bg-accent/20 rounded-full flex items-center justify-center">
                   <Users className="w-6 h-6 text-accent" />
@@ -406,7 +458,7 @@ const TestimonialSection = () => {
               </div>
             </CardContent>
           </Card>
-        </motion.div>
+        </motion.div> */}
       </div>
     </section>
   );
@@ -446,9 +498,9 @@ const MissionSection = () => {
             <span className="text-white">Our </span>
             <span className="text-[#E5195E]">Mission</span>
           </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">
@@ -516,36 +569,37 @@ const InlineCTA = () => {
                 </div>
               </div>
             </div>
-            
+
             {/* Main Heading */}
             <h2 className="text-3xl lg:text-4xl font-semibold leading-tight">
               <span className="text-white">Join hundreds of successful companies who have chosen </span>
               <span className="text-[#E5195E]">WDI</span>
               <span className="text-white"> as their technology partner</span>
             </h2>
-            
+
             {/* Subtitle */}
             <p className="text-xl text-gray-300 leading-relaxed max-w-2xl">
               Let's build something amazing together.
             </p>
-            
+
             {/* CTA Buttons */}
             <div className="flex flex-col sm:flex-row items-start gap-4">
-              <ShimmerButton 
+              <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" />
                   <span>Contact Us Today</span>
                 </div>
               </ShimmerButton>
-              
+
               <Button
                 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 />
@@ -594,12 +648,12 @@ export const AboutWDI = () => {
       <MissionSection />
       <ProcessSection />
       <InlineCTA />
-      <FAQSection 
+      <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,14 +633,12 @@ 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"
-                  } 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`}
+                    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">
                       <div className="flex items-center gap-4 mb-4 justify-center lg:justify-start">
@@ -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) => (
-              <motion.div
-                key={index}
-                initial={{ opacity: 0, y: 20 }}
-                whileInView={{ opacity: 1, y: 0 }}
-                transition={{ duration: 0.5, delay: index * 0.1 }}
-                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">
-                    <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"
-                    />
-                  </div>
-                  <h4 className="font-semibold text-foreground text-sm mb-1">
-                    {tech.name}
-                  </h4>
-                  <p className="text-xs text-muted-foreground">
-                    {tech.category}
-                  </p>
-                </Card>
-              </motion.div>
-            ))}
+            {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.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"
+                        }`}
+                    >
+                      <ImageWithFallback
+                        src={tech.logo}
+                        alt={tech.name}
+                        className="w-8 h-8 object-contain"
+                      />
+                    </div>
+
+                    <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>
+              );
+            })}
           </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

@@ -10,16 +10,64 @@ import { SplitCallToAction } from "../components/SplitCallToAction";
 import { Card, CardContent } from "../components/ui/card";
 import { Badge } from "../components/ui/badge";
 import { Button } from "../components/ui/button";
-import { 
-  Sprout, CloudRain, BarChart3, Thermometer, Eye, 
-  Database, Bot, Target, CheckCircle, Star, 
+import {
+  Sprout, CloudRain, BarChart3, Thermometer, Eye,
+  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 }}
@@ -32,7 +80,7 @@ const ProblemSolutionBlock = () => {
             <span className="text-white">Addressing the Core Challenges of </span>
             <span className="text-[#E5195E]">AgriTech Platforms</span>
           </h2>
-          
+
           <div className="grid lg:grid-cols-2 gap-12 items-center">
             <motion.div
               initial={{ opacity: 0, x: -30 }}
@@ -53,7 +101,7 @@ const ProblemSolutionBlock = () => {
                 </p>
               </div>
             </motion.div>
-            
+
             <motion.div
               initial={{ opacity: 0, x: 30 }}
               whileInView={{ opacity: 1, x: 0 }}
@@ -137,7 +185,7 @@ const IconWithDescriptionGrid = () => {
             Comprehensive tools to create intelligent agricultural solutions that maximize yields and promote sustainability.
           </p>
         </motion.div>
-        
+
         <div className="grid md:grid-cols-2 lg:grid-cols-3 gap-8">
           {features.map((feature, index) => {
             const IconComponent = feature.icon;
@@ -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"
               >
@@ -214,7 +262,7 @@ const ThreeColumnFeatureBlock = () => {
             Leverage our expertise to create agricultural technology solutions that truly transform farming operations.
           </p>
         </motion.div>
-        
+
         <div className="grid md:grid-cols-2 lg:grid-cols-4 gap-8">
           {advantages.map((advantage, index) => {
             const IconComponent = advantage.icon;
@@ -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"
               >
@@ -281,7 +329,7 @@ const CaseStudyHighlightGrid = () => {
             Real results from our AgriTech platform implementations that transformed agricultural operations.
           </p>
         </motion.div>
-        
+
         <div className="grid lg:grid-cols-2 gap-8">
           {caseStudies.map((study, index) => (
             <motion.div
@@ -354,15 +402,16 @@ const agriTechFAQs = [
 export const AgriTechPlatforms = () => {
   return (
     <div className="min-h-screen bg-[#0E0E0E]">
-      <Navigation />
-      
+      {/* <Navigation /> */}
+
       <HeroBanner
         category="Industrial & Emerging Tech"
         title="AgriTech Platforms"
         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",
@@ -371,30 +420,30 @@ export const AgriTechPlatforms = () => {
       />
 
       <ProblemSolutionBlock />
-      
+
       <IconWithDescriptionGrid />
-      
+
       <ThreeColumnFeatureBlock />
-      
+
       <div className="bg-[#0E0E0E]">
         <ProcessSection />
       </div>
-      
+
       <CaseStudyHighlightGrid />
-      
+
       <div className="bg-[#0E0E0E]">
-        <FAQSection 
+        <FAQSection
           title="AgriTech Platform FAQs"
           subtitle="Get answers to common questions about our agricultural technology development services."
           faqs={agriTechFAQs}
         />
       </div>
-      
+
       <div className="bg-black">
         <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,14 +555,12 @@ 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"
-                  } 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`}
+                    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">
@@ -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
+import {
+  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 */}
@@ -50,12 +119,14 @@ const HeroWithCTA = () => {
                 <span className="text-[#E5195E]">Innovation</span>
                 <span className="text-white"> for Modern Business</span>
               </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>
-            
+
             {/* CTAs */}
             <motion.div
               initial={{ opacity: 0, y: 20 }}
@@ -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,15 +147,15 @@ 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>
               </Button>
             </motion.div>
           </motion.div>
-          
+
           {/* Right side with stats */}
           <motion.div
             initial={{ opacity: 0, x: 50 }}
@@ -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,10 +247,12 @@ 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>
-        
+
         <motion.div
           initial={{ opacity: 0, y: 40 }}
           whileInView={{ opacity: 1, y: 0 }}
@@ -161,7 +262,7 @@ const HorizontalTagScroller = () => {
         >
           <div className="absolute left-0 top-0 bottom-0 w-20 bg-gradient-to-r from-card to-transparent z-10 pointer-events-none"></div>
           <div className="absolute right-0 top-0 bottom-0 w-20 bg-gradient-to-l from-card to-transparent z-10 pointer-events-none"></div>
-          
+
           <div className="flex animate-marquee hover:animate-marquee-paused">
             {/* First set */}
             {technologies.map((tech, index) => {
@@ -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">
@@ -188,7 +291,7 @@ const HorizontalTagScroller = () => {
                 </motion.div>
               );
             })}
-            
+
             {/* Second and third sets for seamless loop */}
             {[...technologies, ...technologies].map((tech, index) => {
               const IconComponent = tech.icon;
@@ -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", 
+      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 (
@@ -266,9 +374,10 @@ const SideBySideContentWithIcons = () => {
             <span className="text-[#E5195E]">WDI</span>
             <span className="text-white"> for AI Solutions</span>
           </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"
@@ -297,7 +406,7 @@ const SideBySideContentWithIcons = () => {
                     <div className="mb-6">
                       <IconComponent className="w-10 h-10 text-accent mx-auto" />
                     </div>
-                    
+
                     <h3 className="text-lg font-semibold text-white leading-tight">
                       {advantage.title}
                     </h3>
@@ -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", 
+      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,10 +482,12 @@ 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>
-        
+
         <motion.div
           initial={{ opacity: 0, y: 40 }}
           whileInView={{ opacity: 1, y: 0 }}
@@ -385,18 +502,18 @@ 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">
                     <div className="w-12 h-12 bg-accent/20 rounded-lg flex items-center justify-center">
                       <IconComponent className="w-6 h-6 text-accent" />
                     </div>
-                    
+
                     <div>
                       <h3 className="text-xl font-semibold text-white mb-4">
                         {service.title}
@@ -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,37 +558,43 @@ 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>
-            
+
             {/* Main Heading */}
             <h2 className="text-3xl lg:text-4xl font-semibold leading-tight">
               <span className="text-white">Transform Your Business with </span>
               <span className="text-[#E5195E]">AI Innovation</span>
             </h2>
-            
+
             {/* 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 
+              <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" />
                   <span>Start Your AI Journey</span>
                 </div>
               </ShimmerButton>
-              
+
               {/* 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,15 +613,15 @@ 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", 
+      title: "ML Engineers",
       icon: Cpu,
       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,10 +656,10 @@ 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>
-        
+
         <motion.div
           initial={{ opacity: 0, y: 40 }}
           whileInView={{ opacity: 1, y: 0 }}
@@ -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">
@@ -569,28 +697,32 @@ const HireDevelopersSection = () => {
                           </div>
                         </div>
                       </div>
-                      
+
                       <h3 className="text-xl font-semibold text-foreground mb-4 leading-tight">
                         {specialist.title}
                       </h3>
                     </div>
-                    
+
                     {/* Skills */}
                     <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>
                         ))}
                       </div>
                     </div>
-                    
+
                     {/* CTA */}
                     <div className="p-8 pt-0 mt-auto space-y-3">
-                      <ShimmerButton 
+                      <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 />
@@ -644,12 +781,12 @@ export function ArtificialIntelligenceServices() {
       <ProcessSection />
       <InlineCTA />
       <HireDevelopersSection />
-      <FAQSection 
+      <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"
     }
   ]
@@ -286,7 +288,7 @@ export const AutomationReshapingBusiness = () => {
   const handleShare = (platform: string) => {
     const url = encodeURIComponent(window.location.href);
     const title = encodeURIComponent(articleData.title);
-    
+
     let shareUrl = '';
     switch (platform) {
       case 'linkedin':
@@ -299,27 +301,29 @@ export const AutomationReshapingBusiness = () => {
         shareUrl = `https://wa.me/?text=${title} ${url}`;
         break;
     }
-    
+
     if (shareUrl) {
       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">
         <div className="container mx-auto px-6 lg:px-8">
           <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>
@@ -375,13 +379,13 @@ export const AutomationReshapingBusiness = () => {
       <section className="py-16 bg-card/50">
         <div className="container mx-auto px-6 lg:px-8">
           <div className="grid lg:grid-cols-10 gap-12 max-w-7xl mx-auto">
-            
+
             {/* Article Content - 70% */}
             <article className="lg:col-span-7">
               <Card className="bg-background/50 border-white/10">
                 <CardContent className="p-8 lg:p-12">
                   {/* Article Body */}
-                  <div 
+                  <div
                     className="prose prose-invert prose-lg max-w-none
                       prose-headings:text-white prose-headings:font-semibold
                       prose-h2:text-3xl prose-h2:mt-12 prose-h2:mb-6
@@ -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>
@@ -476,17 +480,17 @@ export const AutomationReshapingBusiness = () => {
 
             {/* Sidebar - 30% */}
             <aside className="lg:col-span-3 space-y-8">
-              
+
               {/* Related Articles */}
               <Card className="bg-background/50 border-white/10">
                 <CardContent className="p-6">
                   <h3 className="text-xl font-semibold text-white mb-6">You Might Also Like</h3>
                   <div className="space-y-6">
                     {articleData.relatedArticles.map((article) => (
-                      <div 
-                        key={article.id} 
+                      <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
@@ -506,13 +510,13 @@ export const AutomationReshapingBusiness = () => {
                       </div>
                     ))}
                   </div>
-                  
+
                   <Separator className="my-6" />
-                  
-                  <Button 
-                    variant="outline" 
+
+                  <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" />
@@ -525,12 +529,12 @@ export const AutomationReshapingBusiness = () => {
                 <CardContent className="p-6">
                   <h3 className="text-xl font-semibold text-white mb-4">About WDI</h3>
                   <p className="text-muted-foreground text-sm leading-relaxed mb-4">
-                    Web Development Institute helps startups and enterprises build scalable, secure digital products. 
+                    Web Development Institute helps startups and enterprises build scalable, secure digital products.
                     With 25+ years of experience, we've delivered 200+ successful projects across 15+ countries.
                   </p>
-                  <Button 
+                  <Button
                     className="w-full bg-[#E5195E] hover:bg-[#E5195E]/90 text-white"
-                    onClick={() => navigateTo('/contact')}
+                    onClick={() => navigate('/contact')}
                   >
                     Get In Touch
                   </Button>
@@ -550,23 +554,23 @@ export const AutomationReshapingBusiness = () => {
                 Enjoyed this article? Let's talk.
               </h2>
               <p className="text-muted-foreground mb-8 max-w-2xl mx-auto">
-                Ready to automate your business operations and drive efficiency? Our team of experts is here to help you 
+                Ready to automate your business operations and drive efficiency? Our team of experts is here to help you
                 implement intelligent automation solutions that transform your business processes.
               </p>
               <div className="flex flex-col sm:flex-row gap-4 justify-center">
-                <Button 
-                  size="lg" 
+                <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" />
                 </Button>
-                <Button 
-                  size="lg" 
-                  variant="outline" 
+                <Button
+                  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

@@ -1,4 +1,4 @@
-import React from "react";
+import React from "react";    
 import { Navigation } from "../components/Navigation";
 import { Footer } from "../components/Footer";
 import { Button } from "../components/ui/button";
@@ -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("");
@@ -16,12 +31,12 @@ export const Blog = () => {
 
   const categories = [
     "All Categories",
-    "Healthcare AI", 
+    "Healthcare AI",
     "Fintech",
     "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()) ||
-                         post.excerpt.toLowerCase().includes(searchTerm.toLowerCase());
-    const matchesCategory = selectedCategory === "all" || post.category === selectedCategory;
-    const matchesTag = selectedTag === "all" || post.tags.some(tag => tag === selectedTag);
-    
+  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);
+
     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>
@@ -188,15 +278,24 @@ export const Blog = () => {
                 />
               </div>
             </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,54 +328,69 @@ 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) => (
-              <Card 
-                key={post.id} 
+              <Card
+                key={post.id}
                 className="bg-card/50 border-white/10 hover:border-[#E5195E]/30 transition-all duration-300 group cursor-pointer overflow-hidden"
                 onClick={() => handlePostClick(post)}
               >
                 <div className="aspect-video overflow-hidden">
-                  <img 
-                    src={post.image} 
+                  <img
+                    src={post.image}
                     alt={post.title}
                     className="w-full h-full object-cover group-hover:scale-105 transition-transform duration-300"
                   />
                 </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">
                     {post.title}
                   </h3>
-                  
+
                   <p className="text-muted-foreground mb-4 line-clamp-3">
                     {post.excerpt}
                   </p>
-                  
+
                   <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>
                     ))}
                   </div>
-                  
+
                   <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,68 +404,84 @@ 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>
-          
+
           <div className="grid md:grid-cols-2 lg:grid-cols-3 gap-8">
             {filteredPosts.map((post) => (
-              <Card 
-                key={post.id} 
+              <Card
+                key={post.id}
                 className="bg-background/50 border-white/10 hover:border-[#E5195E]/30 transition-all duration-300 group cursor-pointer overflow-hidden"
                 onClick={() => handlePostClick(post)}
               >
                 <div className="aspect-video overflow-hidden">
-                  <img 
-                    src={post.image} 
+                  <img
+                    src={post.image}
                     alt={post.title}
                     className="w-full h-full object-cover group-hover:scale-105 transition-transform duration-300"
                   />
                 </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">
                     {post.title}
                   </h3>
-                  
+
                   <p className="text-muted-foreground mb-4 line-clamp-3">
                     {post.excerpt}
                   </p>
-                  
+
                   <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>
                     ))}
                   </div>
-                  
+
                   <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>
               </Card>
             ))}
           </div>
-          
+
           {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,14 +491,17 @@ 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">
-              <Input 
-                type="email" 
+              <Input
+                type="email"
                 placeholder="Enter your email address"
                 className="flex-1 bg-card/50 border-white/10"
               />
@@ -382,22 +521,23 @@ 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" 
+              <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" />
               </Button>
-              <Button 
-                size="lg" 
-                variant="outline" 
+              <Button
+                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/Careers.tsx

@@ -5,12 +5,12 @@ 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 { 
-  ArrowRight, 
-  MapPin, 
-  Clock, 
-  Users, 
-  Mail, 
+import {
+  ArrowRight,
+  MapPin,
+  Clock,
+  Users,
+  Mail,
   Code,
   Palette,
   Settings,
@@ -21,81 +21,130 @@ 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", 
+      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');
     if (element) {
-      element.scrollIntoView({ 
+      element.scrollIntoView({
         behavior: 'smooth',
         block: 'start'
       });
@@ -111,20 +160,67 @@ I am interested in exploring career opportunities at WDI. Please find my resume
 
 Best regards,
 [Your Name]`;
-    
+
     const mailtoLink = `mailto:hr@wdipl.com?subject=${encodeURIComponent(subject)}&body=${encodeURIComponent(body)}`;
     window.open(mailtoLink, '_blank');
   };
 
   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">
         <div className="absolute inset-0 bg-gradient-to-br from-[#E5195E]/5 via-background to-background" />
-        
-        <motion.div 
+
+        <motion.div
           initial={{ opacity: 0, y: 30 }}
           animate={{ opacity: 1, y: 0 }}
           transition={{ duration: 0.8 }}
@@ -160,7 +256,7 @@ Best regards,
               Discover exciting opportunities to grow your career with our talented team.
             </p>
           </motion.div>
-          
+
           <motion.div
             initial={{ opacity: 0, y: 40 }}
             whileInView={{ opacity: 1, y: 0 }}
@@ -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">
@@ -210,10 +306,10 @@ Best regards,
                             </div>
                           </div>
                         </div>
-                        
+
                         {/* Apply Button */}
                         <div className="flex justify-center lg:justify-end">
-                          <Button 
+                          <Button
                             className="bg-[#E5195E] hover:bg-[#E5195E]/90 text-white px-8 py-3"
                             onClick={scrollToSendCV}
                           >
@@ -245,11 +341,11 @@ Best regards,
               <span className="text-white">Want to Work With Us </span>
               <span className="text-[#E5195E]">Anyway?</span>
             </h2>
-            
+
             <p className="text-xl text-gray-300 leading-relaxed mb-12">
               Share your CV with us. We'll reach out if something matches.
             </p>
-            
+
             {/* HR Email Display */}
             <motion.div
               initial={{ opacity: 0, y: 20 }}
@@ -262,14 +358,14 @@ Best regards,
                 <Mail className="w-6 h-6 text-[#E5195E]" />
                 <h3 className="text-xl font-semibold text-white">HR Email</h3>
               </div>
-              <a 
+              <a
                 href="mailto:hr@wdipl.com"
                 className="text-2xl text-[#E5195E] hover:text-[#E5195E]/80 transition-colors duration-300 font-medium"
               >
                 hr@wdipl.com
               </a>
             </motion.div>
-            
+
             {/* Send CV Button */}
             {/* <motion.div
               initial={{ opacity: 0, y: 20 }}
@@ -307,11 +403,11 @@ Best regards,
               { number: "98%", label: "Employee Satisfaction", color: "from-purple-400 to-purple-600" },
               { number: "4.9/5", label: "Company Rating", color: "from-[#E5195E] to-[#FF6B9D]" }
             ].map((stat, index) => (
-              <motion.div 
+              <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 }}
                 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 matchesIndustry = selectedIndustry === "All Industries" || study.industry === selectedIndustry;
-    const matchesCategory = selectedCategory === "All Categories" || study.category === selectedCategory;
+  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 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 
+
+        <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,33 +449,33 @@ 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">
-              <Button 
+            <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" />
               </Button>
-              <Button 
+              <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");
@@ -16,11 +34,11 @@ export const ClientTestimonials = () => {
     "All Industries",
     "Healthcare",
     "FinTech",
-    "E-commerce", 
+    "E-commerce",
     "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,124 +524,172 @@ 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>
                 ))}
               </SelectContent>
             </Select>
           </div>
-          
+
           <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) => {
-                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">
-                    <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" />
-                        ))}
-                      </div>
-                      
-                      <div className="relative mb-6">
-                        <Quote className="w-8 h-8 text-[#E5195E] absolute -top-2 -left-2" />
-                        <blockquote className="text-muted-foreground leading-relaxed italic pl-6">
-                          "{testimonial.quote}"
-                        </blockquote>
-                      </div>
-                      
-                      <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>
+              {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"
+                    >
+                      <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"
+                            />
+                          ))}
                         </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>
+
+                        <div className="relative mb-6">
+                          <Quote className="w-8 h-8 text-[#E5195E] absolute -top-2 -left-2" />
+                          <blockquote className="text-muted-foreground leading-relaxed italic pl-6">
+                            "{testimonial.quote}"
+                          </blockquote>
                         </div>
-                        {testimonial.hasVideo && (
-                          <Button variant="ghost" size="sm" className="text-[#E5195E] hover:bg-[#E5195E]/10">
-                            <Play className="w-4 h-4 mr-1" />
-                            Watch Video
-                          </Button>
-                        )}
-                      </div>
-                    </CardContent>
-                  </Card>
-                );
-              })}
+
+                        <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>
+                          </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>
+                          </div>
+                          {testimonial.hasVideo && (
+                            <Button
+                              variant="ghost"
+                              size="sm"
+                              className="text-[#E5195E] hover:bg-[#E5195E]/10"
+                            >
+                              <Play className="w-4 h-4 mr-1" />
+                              Watch Video
+                            </Button>
+                          )}
+                        </div>
+                      </CardContent>
+                    </Card>
+                  );
+                })}
             </div>
           </div>
         </section>
       )}
 
       {/* 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) => {
-                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">
-                    <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" />
-                        ))}
-                      </div>
-                      
-                      <div className="relative mb-4">
-                        <Quote className="w-6 h-6 text-[#E5195E] absolute -top-1 -left-1" />
-                        <blockquote className="text-muted-foreground text-sm leading-relaxed italic pl-4">
-                          "{testimonial.quote}"
-                        </blockquote>
-                      </div>
-                      
-                      <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>
+              {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"
+                    >
+                      <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"
+                            />
+                          ))}
                         </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>
+
+                        <div className="relative mb-4">
+                          <Quote className="w-6 h-6 text-[#E5195E] absolute -top-1 -left-1" />
+                          <blockquote className="text-muted-foreground text-sm leading-relaxed italic pl-4">
+                            "{testimonial.quote}"
+                          </blockquote>
                         </div>
-                        {testimonial.hasVideo && (
-                          <Button variant="ghost" size="sm" className="text-[#E5195E] hover:bg-[#E5195E]/10 p-1">
-                            <Play className="w-3 h-3" />
-                          </Button>
-                        )}
-                      </div>
-                    </CardContent>
-                  </Card>
-                );
-              })}
+
+                        <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>
+                          </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>
+                          </div>
+                          {testimonial.hasVideo && (
+                            <Button
+                              variant="ghost"
+                              size="sm"
+                              className="text-[#E5195E] hover:bg-[#E5195E]/10 p-1"
+                            >
+                              <Play className="w-3 h-3" />
+                            </Button>
+                          )}
+                        </div>
+                      </CardContent>
+                    </Card>
+                  );
+                })}
             </div>
           </div>
         </section>
@@ -551,9 +700,11 @@ 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>
-              <Button 
-                variant="outline" 
+              <p className="text-muted-foreground mb-4">
+                No testimonials found matching your criteria.
+              </p>
+              <Button
+                variant="outline"
                 onClick={() => {
                   setSelectedIndustry("all");
                   setSelectedService("all");
@@ -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"
     },
     {
@@ -211,7 +213,7 @@ const articleData = {
       id: "automation-reshaping-business",
       title: "5 Ways Automation is Reshaping Business Operations",
       excerpt: "Discover how intelligent automation is transforming modern business processes and operations.",
-      readTime: "10 min read", 
+      readTime: "10 min read",
       image: "https://images.unsplash.com/photo-1485827404703-89b55fcc595e?w=400&h=250&fit=crop&auto=format",
       category: "Automation"
     }
@@ -222,7 +224,7 @@ export const ComplianceReadyFintech = () => {
   const handleShare = (platform: string) => {
     const url = encodeURIComponent(window.location.href);
     const title = encodeURIComponent(articleData.title);
-    
+
     let shareUrl = '';
     switch (platform) {
       case 'linkedin':
@@ -235,27 +237,27 @@ export const ComplianceReadyFintech = () => {
         shareUrl = `https://wa.me/?text=${title} ${url}`;
         break;
     }
-    
+
     if (shareUrl) {
       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">
         <div className="container mx-auto px-6 lg:px-8">
           <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>
@@ -311,13 +313,13 @@ export const ComplianceReadyFintech = () => {
       <section className="py-16 bg-card/50">
         <div className="container mx-auto px-6 lg:px-8">
           <div className="grid lg:grid-cols-10 gap-12 max-w-7xl mx-auto">
-            
+
             {/* Article Content - 70% */}
             <article className="lg:col-span-7">
               <Card className="bg-background/50 border-white/10">
                 <CardContent className="p-8 lg:p-12">
                   {/* Article Body */}
-                  <div 
+                  <div
                     className="prose prose-invert prose-lg max-w-none
                       prose-headings:text-white prose-headings:font-semibold
                       prose-h2:text-3xl prose-h2:mt-12 prose-h2:mb-6
@@ -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>
@@ -412,17 +414,17 @@ export const ComplianceReadyFintech = () => {
 
             {/* Sidebar - 30% */}
             <aside className="lg:col-span-3 space-y-8">
-              
+
               {/* Related Articles */}
               <Card className="bg-background/50 border-white/10">
                 <CardContent className="p-6">
                   <h3 className="text-xl font-semibold text-white mb-6">You Might Also Like</h3>
                   <div className="space-y-6">
                     {articleData.relatedArticles.map((article) => (
-                      <div 
-                        key={article.id} 
+                      <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
@@ -442,13 +444,13 @@ export const ComplianceReadyFintech = () => {
                       </div>
                     ))}
                   </div>
-                  
+
                   <Separator className="my-6" />
-                  
-                  <Button 
-                    variant="outline" 
+
+                  <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" />
@@ -461,12 +463,12 @@ export const ComplianceReadyFintech = () => {
                 <CardContent className="p-6">
                   <h3 className="text-xl font-semibold text-white mb-4">About WDI</h3>
                   <p className="text-muted-foreground text-sm leading-relaxed mb-4">
-                    Web Development Institute helps startups and enterprises build scalable, secure digital products. 
+                    Web Development Institute helps startups and enterprises build scalable, secure digital products.
                     With 25+ years of experience, we've delivered 200+ successful projects across 15+ countries.
                   </p>
-                  <Button 
+                  <Button
                     className="w-full bg-[#E5195E] hover:bg-[#E5195E]/90 text-white"
-                    onClick={() => navigateTo('/contact')}
+                    onClick={() => navigate('/contact')}
                   >
                     Get In Touch
                   </Button>
@@ -486,23 +488,23 @@ export const ComplianceReadyFintech = () => {
                 Enjoyed this article? Let's talk.
               </h2>
               <p className="text-muted-foreground mb-8 max-w-2xl mx-auto">
-                Ready to build a compliance-ready fintech platform? Our team of experts is here to help you navigate 
+                Ready to build a compliance-ready fintech platform? Our team of experts is here to help you navigate
                 regulatory requirements while delivering innovative financial technology solutions.
               </p>
               <div className="flex flex-col sm:flex-row gap-4 justify-center">
-                <Button 
-                  size="lg" 
+                <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" />
                 </Button>
-                <Button 
-                  size="lg" 
-                  variant="outline" 
+                <Button
+                  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>
   );
 };