WDIPL/Wdipl-react
2
0
Fork 0
Code Issues Pull Requests 2 Actions Packages Projects Releases Wiki Activity

All changes, done like fully react router uses, services, al/ml and solution page section alignment and missing section done!

Browse Source
This commit is contained in:
priyanshuvish
2025-09-23 20:13:31 +05:30
parent 5f5ddb1cd6
commit e78c8672e9
158 changed files with 2444 additions and 2093 deletions
Download Patch File Download Diff File Expand all files Collapse all files

843
App.tsx
View File

@@ -1,845 +1,34 @@
import { useEffect, useState } from "react"; // App.tsx
import { CarouselTestimonials } from "./components/CarouselTestimonials";
import { CaseStudyHighlight } from "./components/CaseStudyHighlight";
import { ClientLogos } from "./components/ClientLogos";
import { Footer } from "./components/Footer";
import { HeroSection } from "./components/HeroSection";
import { HorizontalTagScroller } from "./components/HorizontalTagScroller";
import { InlineCTA } from "./components/InlineCTA";
import { Navigation } from "./components/Navigation"; import { Navigation } from "./components/Navigation";
import { ProcessSection } from "./components/ProcessSection"; import { Footer } from "./components/Footer";
import { ResourceCards } from "./components/ResourceCards";
import { SplitCallToAction } from "./components/SplitCallToAction";
import { Button } from "./components/ui/button";
import { WhyChooseWDI } from "./components/WhyChooseWDI";
// Main Category Pages
import { ArtificialIntelligenceServices } from "./pages/ArtificialIntelligenceServices";
import { ContactMain } from "./pages/ContactMain";
import { DesignExperience } from "./pages/DesignExperience";
import { Industries } from "./pages/Industries";
import { MachineLearning } from "./pages/MachineLearning";
import { Resources } from "./pages/Resources";
import { Services } from "./pages/Services";
import { SoftwareEngineering } from "./pages/SoftwareEngineering";
import { Solutions } from "./pages/Solutions";
import { WebCloudServices } from "./pages/WebCloudServices";
// Service Pages
import { AdminPanelsDashboards } from "./pages/AdminPanelsDashboards";
import { AIAutomationWorkflows } from "./pages/AIAutomationWorkflows";
import { AIChatbotsVirtualAssistants } from "./pages/AIChatbotsVirtualAssistants";
import { AIIntegrationDigitalProducts } from "./pages/AIIntegrationDigitalProducts";
import { AIModelDeploymentMLOps } from "./pages/AIModelDeploymentMLOps";
import { AIStrategyConsulting } from "./pages/AIStrategyConsulting";
import { AndroidAppDevelopment } from "./pages/AndroidAppDevelopment";
import { APIBackendDevelopment } from "./pages/APIBackendDevelopment";
import { ClickablePrototypes } from "./pages/ClickablePrototypes";
import { ComputerVisionApplications } from "./pages/ComputerVisionApplications";
import { CrossPlatformAppDevelopment } from "./pages/CrossPlatformAppDevelopment";
import { CustomMLModelDevelopment } from "./pages/CustomMLModelDevelopment";
import { CustomWebAppDevelopment } from "./pages/CustomWebAppDevelopment";
import { DesignThinkingWorkshops } from "./pages/DesignThinkingWorkshops";
import { EcommercePlatforms } from "./pages/EcommercePlatforms";
import { EnterpriseSoftwareSolutions } from "./pages/EnterpriseSoftwareSolutions";
import { GenAIIntegrationDigitalProducts } from "./pages/GenAIIntegrationDigitalProducts";
import { IOSAppDevelopment } from "./pages/iOSAppDevelopment";
import { MobileAppDevelopment } from "./pages/MobileAppDevelopment";
import { NativeAppDevelopment } from "./pages/NativeAppDevelopment";
import { NLPTextAnalytics } from "./pages/NLPTextAnalytics";
import { PredictiveAnalyticsForecasting } from "./pages/PredictiveAnalyticsForecasting";
import { ProductModernization } from "./pages/ProductModernization";
import { PWADevelopment } from "./pages/PWADevelopment";
import { RecommendationEngines } from "./pages/RecommendationEngines";
import { SaaSProductEngineering } from "./pages/SaaSProductEngineering";
import { SystemArchitectureDevOps } from "./pages/SystemArchitectureDevOps";
import { ThirdPartyIntegrations } from "./pages/ThirdPartyIntegrations";
import { UIUXDesign } from "./pages/UIUXDesign";
import { UserResearchTesting } from "./pages/UserResearchTesting";
import { WearableDeviceDevelopment } from "./pages/WearableDeviceDevelopment";
// Solution Pages
import { BusinessProcessAutomation } from "./pages/BusinessProcessAutomation";
import { ComplianceReadySystems } from "./pages/ComplianceReadySystems";
import { DedicatedOffshoreODC } from "./pages/DedicatedOffshoreODC";
import { DigitalProductDevelopment } from "./pages/DigitalProductDevelopment";
import { LegacySystemRebuilds } from "./pages/LegacySystemRebuilds";
import { MVPStartupLaunchPackages } from "./pages/MVPStartupLaunchPackages";
// Industry Pages - Financial Services
import { FinTechBankingApps } from "./pages/FinTechBankingApps";
import { RealEstateTech } from "./pages/RealEstateTech";
import { WealthTechPlatforms } from "./pages/WealthTechPlatforms";
// Industry Pages - Healthcare & Wellness
import { FitnessWellnessPlatforms } from "./pages/FitnessWellnessPlatforms";
import { HealthTechApplications } from "./pages/HealthTechApplications";
import { MedicalComplianceSolutions } from "./pages/MedicalComplianceSolutions";
// Industry Pages - Learning & Education
import { EdTechPlatforms } from "./pages/EdTechPlatforms";
import { MicrolearningApps } from "./pages/MicrolearningApps";
import { VirtualClassroomsLMS } from "./pages/VirtualClassroomsLMS";
// Industry Pages - Commerce & Consumer
import { EcommerceMarketplaces } from "./pages/EcommerceMarketplaces";
import { EventTicketingSolutions } from "./pages/EventTicketingSolutions";
import { FoodOrderingDelivery } from "./pages/FoodOrderingDelivery";
import { TravelBookingSystems } from "./pages/TravelBookingSystems";
// Industry Pages - Media & Community
import { OTTStreamingApps } from "./pages/OTTStreamingApps";
import { SocialPlatformsNetworks } from "./pages/SocialPlatformsNetworks";
import { SportsFanEngagement } from "./pages/SportsFanEngagement";
// Industry Pages - Mobility & Logistics
import { OnDemandServices } from "./pages/OnDemandServices";
import { SupplyChainFleetManagement } from "./pages/SupplyChainFleetManagement";
import { TransportationApps } from "./pages/TransportationApps";
// Industry Pages - Industrial & Emerging Tech
import { AgriTechPlatforms } from "./pages/AgriTechPlatforms";
import { ManufacturingAutomation } from "./pages/ManufacturingAutomation";
import { OilGasMonitoringSystems } from "./pages/OilGasMonitoringSystems";
// Company Pages
import { AboutWDI } from "./pages/AboutWDI";
import { AwardsCertifications } from "./pages/AwardsCertifications";
import { Careers } from "./pages/Careers";
import { CultureValues } from "./pages/CultureValues";
import { LeadershipTeam } from "./pages/LeadershipTeam";
import { OurHistory } from "./pages/OurHistory";
import { PressMedia } from "./pages/PressMedia";
// Hire Talent Pages
import { DedicatedDevelopmentTeams } from "./pages/DedicatedDevelopmentTeams";
import { EngagementModels } from "./pages/EngagementModels";
import { HireBackendDevelopers } from "./pages/HireBackendDevelopers";
import { HireFrontendDevelopers } from "./pages/HireFrontendDevelopers";
import { HireFullStackDevelopers } from "./pages/HireFullStackDevelopers";
import { HireMobileAppDevelopers } from "./pages/HireMobileAppDevelopers";
import { HireQAEngineers } from "./pages/HireQAEngineers";
import { HireTalent } from "./pages/HireTalent";
import { HireUIUXDesigners } from "./pages/HireUIUXDesigners";
import { TeamAugmentationServices } from "./pages/TeamAugmentationServices";
// Resource Pages
import { Blog } from "./pages/Blog";
import { CaseStudies } from "./pages/CaseStudies";
import { ClientTestimonials } from "./pages/ClientTestimonials";
import { FAQs } from "./pages/FAQs";
import { WhitepapersInsights } from "./pages/WhitepapersInsights";
// Contact Pages
import { motion } from "framer-motion";
import { ChevronRight } from "lucide-react";
import { Helmet } from "react-helmet-async";
import { CookieConsent } from "./components/CookieConsent"; import { CookieConsent } from "./components/CookieConsent";
import { ArticleDetail } from "./pages/ArticleDetail"; import { AppRouter } from "./src/Router";
import { AutomationReshapingBusiness } from "./pages/AutomationReshapingBusiness"; import { useLocation } from "react-router-dom";
import { BuildingYourAPIStack } from "./pages/BuildingYourAPIStack"; import { useEffect } from "react";
import { ClientSupport } from "./pages/ClientSupport";
import { ComplianceReadyFintech } from "./pages/ComplianceReadyFintech";
import { Contact } from "./pages/Contact";
import { FutureOfAIHealthcare } from "./pages/FutureOfAIHealthcare";
import { GoodTimesProject } from "./pages/GoodTimesProject";
import { LegacySystemScaling } from "./pages/LegacySystemScaling";
import { MigratingToLinear101 } from "./pages/MigratingToLinear101";
import { OfficeLocations } from "./pages/OfficeLocations";
import { ProspertyProject } from "./pages/ProspertyProject";
import { RanOutOfProject } from "./pages/RanOutOfProject";
import { RegroupProject } from "./pages/RegroupProject";
import { RequestProposal } from "./pages/RequestProposal";
import { ScheduleDiscoveryCall } from "./pages/ScheduleDiscoveryCall";
import { SeezunProject } from "./pages/SeezunProject";
import { SendYourCV } from "./pages/SendYourCV";
import { StartAProject } from "./pages/StartAProject";
import { TanamiProject } from "./pages/TanamiProject";
import { ThankYou } from "./pages/ThankYou";
import { TradersCircuitProject } from "./pages/TradersCircuitProject";
import { UXReviewPresentations } from "./pages/UXReviewPresentations";
import { WokaProject } from "./pages/WokaProject";
import { VIB360Project } from "./pages/VIB360Project";
import { AmbleProject } from "./pages/AmbleProject";
import { AmozProject } from "./pages/AmozProject";
import { SimpliTendProject } from "./pages/SimpliTendProject";
import { CaseStudyComingSoon } from "./pages/CaseStudyComingSoon";
import { HireiOSAppDevelopers } from "./pages/HireiOSAppDevelopers";
import { HireAndroidAppDevelopers } from "./pages/HireAndroidAppDevelopers";
import { HireCrossPlatformDevelopers } from "./pages/HireCrossPlatformDevelopers";
import { HireNativeAppDevelopers } from "./pages/HireNativeAppDevelopers";
import { HirePWADevelopers } from "./pages/HirePWADevelopers";
import { HireWearableAppDevelopers } from "./pages/HireWearableAppDevelopers";
import { HireCustomWebAppDevelopers } from "./pages/HireCustomWebAppDevelopers";
import { HireSaaSProductDevelopers } from "./pages/HireSaaSProductDevelopers";
import { HireEcommercePlatformDevelopers } from "./pages/HireEcommercePlatformDevelopers";
import { HireAdminPanelDevelopers } from "./pages/HireAdminPanelDevelopers";
import { HireAPIBackendDevelopers } from "./pages/HireAPIBackendDevelopers";
import { HireEnterpriseSoftwareDevelopers } from "./pages/HireEnterpriseSoftwareDevelopers";
import { HireSystemArchitectureDevOpsDevelopers } from "./pages/HireSystemArchitectureDevOpsDevelopers";
import { HireProductModernizationDevelopers } from "./pages/HireProductModernizationDevelopers";
import { HireThirdPartyIntegrationsDevelopers } from "./pages/HireThirdPartyIntegrationsDevelopers";
import { HireClickablePrototypesDevelopers } from "./pages/HireClickablePrototypesDevelopers";
import { HireDesignThinkingWorkshopsDevelopers } from "./pages/HireDesignThinkingWorkshopsDevelopers";
import { HireUserResearchTestingDevelopers } from "./pages/HireUserResearchTestingDevelopers";
// Create a global navigation context
let setCurrentPath: ((path: string) => void) | null = null;
// Smooth scroll to top function // Smooth scroll to top function
const scrollToTop = () => { const scrollToTop = () => {
const scrollStep = -window.scrollY / (300 / 15); // Duration in ms / frame rate window.scrollTo({ top: 0, behavior: 'smooth' });
const scrollInterval = () => {
if (window.scrollY !== 0) {
window.scrollBy(0, scrollStep);
window.requestAnimationFrame(scrollInterval);
}
};
window.requestAnimationFrame(scrollInterval);
}; };
export const navigateTo = (path: string) => { function App() {
if (setCurrentPath) { const location = useLocation();
// 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,
);
// Scroll to top on route change
useEffect(() => { useEffect(() => {
// Set the global navigation function
setCurrentPath = setCurrentPathState;
const handlePopState = () => {
setCurrentPathState(window.location.pathname);
};
window.addEventListener("popstate", handlePopState);
return () => {
window.removeEventListener("popstate", handlePopState);
setCurrentPath = null;
};
}, []);
// Scroll to top whenever the path changes - but only after a delay to ensure rendering
useEffect(() => {
// Use a timeout to ensure the new page has rendered before scrolling
const scrollTimeout = setTimeout(() => {
scrollToTop(); scrollToTop();
}, 100); }, [location.pathname]);
return () => clearTimeout(scrollTimeout); return (
}, [currentPath]); <div className="min-h-screen bg-background">
return { currentPath };
};
const services = [
{
title: "Mobile App Development",
icon: (
<path
strokeLinecap="round"
strokeLinejoin="round"
strokeWidth={1.5}
d="M12 18h.01M8 21h8a2 2 0 002-2V5a2 2 0 00-2-2H8a2 2 0 00-2 2v14a2 2 0 002 2z"
/>
),
description: "Native & cross-platform apps with pixel-perfect UIs and seamless user experiences.",
link: "/services/mobile-app-development"
},
{
title: "Web Platforms & SaaS",
icon: (
<path
strokeLinecap="round"
strokeLinejoin="round"
strokeWidth={1.5}
d="M10 20l4-16m4 4l4 4-4 4M6 16l-4-4 4-4"
/>
),
description: "Scalable, secure, and SEO-optimized web applications built for performance.",
link: "/web-cloud"
},
{
title: "AI & ML Solutions",
icon: (
<path
strokeLinecap="round"
strokeLinejoin="round"
strokeWidth={1.5}
d="M9.663 17h4.673M12 3v1m6.364 1.636l-.707.707M21 12h-1M4 12H3m3.343-5.657l-.707-.707m2.828 9.9a5 5 0 117.072 0l-.548.547A3.374 3.374 0 0014 18.469V19a2 2 0 11-4 0v-.531c0-.895-.356-1.754-.988-2.386l-.548-.547z"
/>
),
description: "Intelligent features powered by cutting-edge algorithms and machine learning.",
link: "/artificial-intelligence"
},
{
title: "DevOps & Cloud",
icon: (
<path
strokeLinecap="round"
strokeLinejoin="round"
strokeWidth={1.5}
d="M5 12h14M5 12a2 2 0 01-2-2V6a2 2 0 012-2h14a2 2 0 012 2v4a2 2 0 01-2 2M5 12a2 2 0 00-2 2v4a2 2 0 002 2h14a2 2 0 002-2v-4a2 2 0 00-2-2m-2-4h.01M17 16h.01"
/>
),
description: "CI/CD pipelines and managed cloud infrastructure for seamless deployment.",
link: "/services/system-architecture-devops"
},
{
title: "Product Design & UX",
icon: (
<path
strokeLinecap="round"
strokeLinejoin="round"
strokeWidth={1.5}
d="M7 21a4 4 0 01-4-4V5a2 2 0 012-2h4a2 2 0 012 2v12a4 4 0 01-4 4zM21 5a2 2 0 00-2-2h-4a2 2 0 00-2 2v12a4 4 0 004 4h4a2 2 0 002-2V5z"
/>
),
description: "Human-centered UX with delightful micro-interactions and intuitive interfaces.",
link: "/design-experience"
},
{
title: "Security & Compliance",
icon: (
<path
strokeLinecap="round"
strokeLinejoin="round"
strokeWidth={1.5}
d="M9 12l2 2 4-4m5.618-4.016A11.955 11.955 0 0112 2.944a11.955 11.955 0 01-8.618 3.04A12.02 12.02 0 003 9c0 5.591 3.824 10.29 9 11.622 5.176-1.332 9-6.03 9-11.622 0-1.042-.133-2.052-.382-3.016z"
/>
),
description: "Pen-testing, auditing, and regulatory alignment for enterprise-grade security.",
link: "/solutions/compliance-ready-systems"
}
];
// Placeholder component for pages that don't exist yet
const PlaceholderPage = ({
title = "Coming Soon",
}: {
title?: string;
}) => (
<div className="dark min-h-screen bg-background">
<Navigation /> <Navigation />
<div className="pt-24 pb-16 bg-background"> <main>
<div className="container mx-auto px-6 lg:px-8"> <AppRouter />
<div className="max-w-4xl mx-auto text-center"> </main>
<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 /> <Footer />
</div>
);
// Homepage component - ENSURED ALL SECTIONS USE DARK BACKGROUNDS
const Homepage = () => (
<div className="dark min-h-screen bg-background">
<Helmet>
{/* Page Title and Meta Description */}
<title>Mobile App Development Services | WDI - iOS & Android App Development</title>
<meta
name="description"
content="Professional mobile app development services at WDI. Build secure, scalable iOS and Android apps with expert developers. Cross-platform solutions available."
/>
{/* Canonical Link */}
<link rel="canonical" href="https://www.wdipl.com/" />
{/* Open Graph Tags (for Facebook, LinkedIn) */}
<meta property="og:title" content="Mobile App Development Services | WDI - iOS & Android App Development" />
<meta
property="og:description"
content="Professional mobile app development services at WDI. Build secure, scalable iOS and Android apps with expert developers. Cross-platform solutions available."
/>
<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="Mobile App Development Services | WDI - iOS & Android App Development" />
<meta
name="twitter:description"
content="Professional mobile app development services at WDI. Build secure, scalable iOS and Android apps with expert developers. Cross-platform solutions available."
/>
<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 - 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> */}
<section className="py-20 bg-background">
<div className="container mx-auto px-6 lg:px-8">
<motion.div
initial={{ opacity: 0, y: 30 }}
whileInView={{ opacity: 1, y: 0 }}
transition={{ duration: 0.8 }}
viewport={{ once: true }}
className="text-left mb-20"
>
<div className="text-center">
<h2 className="text-3xl sm:text-4xl font-semibold tracking-tight text-white">What We Do</h2>
<p className="mt-4 text-gray-400 max-w-2xl mx-auto">
End-to-end solutions for every stage of your product lifecycle.
</p>
</div>
</motion.div>
<motion.div
initial={{ opacity: 0, y: 40 }}
whileInView={{ opacity: 1, y: 0 }}
transition={{ duration: 0.8, delay: 0.2 }}
viewport={{ once: true }}
className="grid md:grid-cols-2 lg:grid-cols-3 gap-8"
>
{services.map((service, index) => {
const IconComponent = service.icon;
return (
<motion.div
key={index}
initial={{ opacity: 0, y: 20 }}
whileInView={{ opacity: 1, y: 0 }}
transition={{ duration: 0.5, delay: index * 0.01 }}
viewport={{ once: true }}
whileHover={{ y: -5 }}
className="group cursor-pointer"
onClick={() => navigateTo(service.link)}
>
<div className="bg-gray-900/50 backdrop-blur-sm rounded-2xl border border-gray-800 p-8 hover:border-accent/30 transition-all duration-300 shadow-lg hover:shadow-xl h-full">
<div className="flex flex-col items-start space-y-6">
<div className="w-12 h-12 bg-accent/20 rounded-lg flex items-center justify-center">
{/* <IconComponent className="w-6 h-6 text-accent" /> */}
<svg
className="w-6 h-6 text-accent"
fill="none"
stroke="currentColor"
viewBox="0 0 24 24"
>
{service.icon}
</svg>
</div>
<div>
<h3 className="text-xl font-semibold text-white mb-4">
{service.title}
</h3>
<p className="text-gray-400 leading-relaxed">
{service.description}
</p>
</div>
<div className="flex items-center gap-2 text-accent font-medium">
<span>Explore Services</span>
<ChevronRight className="w-4 h-4" />
</div>
</div>
</div>
</motion.div>
);
})}
</motion.div>
</div>
</section>
{/* Why Choose WDI - Dark background */}
<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,
// New hire pages
"/hire-talent/ios-app-developers": HireiOSAppDevelopers,
"/hire-talent/android-app-developers": HireAndroidAppDevelopers,
"/hire-talent/cross-platform-developers": HireCrossPlatformDevelopers,
"/hire-talent/native-app-developers": HireNativeAppDevelopers,
"/hire-talent/pwa-developers": HirePWADevelopers,
"/hire-talent/wearable-app-developers": HireWearableAppDevelopers,
"/hire-talent/custom-web-app-developers": HireCustomWebAppDevelopers,
"/hire-talent/saas-product-developers": HireSaaSProductDevelopers,
"/hire-talent/ecommerce-platform-developers": HireEcommercePlatformDevelopers,
"/hire-talent/admin-panel-developers": HireAdminPanelDevelopers,
"/hire-talent/api-backend-developers": HireAPIBackendDevelopers,
"/hire-talent/enterprise-software-developers": HireEnterpriseSoftwareDevelopers,
"/hire-talent/system-architecture-developers": HireSystemArchitectureDevOpsDevelopers,
"/hire-talent/third-party-integration-developers": HireThirdPartyIntegrationsDevelopers,
"/hire-talent/product-modernization-developers": HireProductModernizationDevelopers,
"/hire-talent/clickable-prototypes-developers": HireClickablePrototypesDevelopers,
"/hire-talent/design-thinking-workshops-developers": HireDesignThinkingWorkshopsDevelopers,
"/hire-talent/user-research-testing-developers": HireUserResearchTestingDevelopers,
//Comming Soon / Placeholder Pages
"/comming-soon": () => <CaseStudyComingSoon projectTitle="Coming Soon Project" />,
// 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,
"/projects/vib360": VIB360Project,
"/projects/amble": AmbleProject,
"/projects/amoz": AmozProject,
"/projects/simpletend": SimpliTendProject,
// 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 /> <CookieConsent />
</div> </div>
); );
} }
// Handle dynamic article routes export default App;
if (currentPath.startsWith("/articles/")) {
return (
<div className="min-h-screen bg-background">
<ArticleDetail />
<CookieConsent />
</div>
);
}
// Handle dynamic insight routes
if (currentPath.startsWith("/insights/")) {
const slug = currentPath.replace("/insights/", "");
let InsightComponent;
switch (slug) {
case "ux-review-presentations":
InsightComponent = UXReviewPresentations;
break;
case "migrating-to-linear-101":
InsightComponent = MigratingToLinear101;
break;
case "building-your-api-stack":
InsightComponent = BuildingYourAPIStack;
break;
default:
InsightComponent = null;
}
if (InsightComponent) {
return (
<div className="min-h-screen bg-background">
<InsightComponent />
<CookieConsent />
</div>
);
}
}
// Default to homepage for root path and unmatched paths
return (
<div className="min-h-screen bg-background">
<Homepage />
<CookieConsent />
</div>
);
}

15
components/CaseStudyHighlight.tsx
View File

@@ -3,12 +3,12 @@ import { ArrowRight, ExternalLink } from "lucide-react";
import { Button } from "./ui/button"; import { Button } from "./ui/button";
import { GridPattern } from "./GridPattern"; import { GridPattern } from "./GridPattern";
import { ImageWithFallback } from "./figma/ImageWithFallback"; import { ImageWithFallback } from "./figma/ImageWithFallback";
import { navigateTo } from "../App";
import regroupImage from '../src/images/regroup.webp'; 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 wokaImage from '../src/images/woka.webp';
import wokaAwardImage from '../src/images/woka.webp'; import wokaAwardImage from '../src/images/woka.webp';
import tanamiImage from '../src/images/tanami.webp'; import tanamiImage from '../src/images/tanami.webp';
import { useNavigate } from "react-router-dom";
const featuredCaseStudy = { const featuredCaseStudy = {
title: "Woka", title: "Woka",
@@ -63,6 +63,8 @@ const SmallCaseStudyCard = ({ study, index }: { study: typeof caseStudies[0]; in
} }
}; };
const navigate = useNavigate();
return ( return (
<motion.div <motion.div
initial={{ opacity: 0, y: 50 }} initial={{ opacity: 0, y: 50 }}
@@ -70,7 +72,7 @@ const SmallCaseStudyCard = ({ study, index }: { study: typeof caseStudies[0]; in
transition={{ duration: 0.6, delay: index * 0.01 }} transition={{ duration: 0.6, delay: index * 0.01 }}
viewport={{ once: true }} 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" 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]"> <div className="relative aspect-[4/3] overflow-hidden bg-muted/30 px-2 rounded-[10px]">
<ImageWithFallback <ImageWithFallback
@@ -114,7 +116,7 @@ const SmallCaseStudyCard = ({ study, index }: { study: typeof caseStudies[0]; in
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="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"
onClick={(e) => { onClick={(e) => {
e.stopPropagation(); e.stopPropagation();
navigateTo(getNavigationPath(study.title)); navigate(getNavigationPath(study.title));
}} }}
> >
View Case Study <ArrowRight className="w-4 h-4" /> View Case Study <ArrowRight className="w-4 h-4" />
@@ -125,6 +127,7 @@ const SmallCaseStudyCard = ({ study, index }: { study: typeof caseStudies[0]; in
}; };
export const CaseStudyHighlight = () => { export const CaseStudyHighlight = () => {
const navigate = useNavigate();
return ( return (
<section className="relative py-20 bg-background overflow-hidden"> <section className="relative py-20 bg-background overflow-hidden">
<GridPattern strokeDasharray="4 2" /> <GridPattern strokeDasharray="4 2" />
@@ -151,7 +154,7 @@ export const CaseStudyHighlight = () => {
transition={{ duration: 0.8 }} transition={{ duration: 0.8 }}
viewport={{ once: true }} 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" 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 lg:grid-cols-3 gap-0">
<div className="lg:col-span-2 relative aspect-[16/10] sm:aspect-[16/9] overflow-hidden bg-muted/30 px-2 rounded-[10px]"> <div className="lg:col-span-2 relative aspect-[16/10] sm:aspect-[16/9] overflow-hidden bg-muted/30 px-2 rounded-[10px]">
@@ -199,7 +202,7 @@ export const CaseStudyHighlight = () => {
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="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"
onClick={(e) => { onClick={(e) => {
e.stopPropagation(); e.stopPropagation();
navigateTo('/projects/woka'); navigate('/projects/woka');
}} }}
> >
View Full Case Study <ArrowRight className="w-5 h-5" /> View Full Case Study <ArrowRight className="w-5 h-5" />
@@ -222,7 +225,7 @@ export const CaseStudyHighlight = () => {
className="text-center" className="text-center"
> >
<Button <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]" 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" /> View All Case Studies <ExternalLink className="w-4 h-4 ml-2" />

40
components/FeaturedCaseStudies.tsx
View File

@@ -4,7 +4,6 @@ import { Button } from "./ui/button";
import { Badge } from "./ui/badge"; import { Badge } from "./ui/badge";
import { Card, CardContent } from "./ui/card"; import { Card, CardContent } from "./ui/card";
import { ImageWithFallback } from "./figma/ImageWithFallback"; import { ImageWithFallback } from "./figma/ImageWithFallback";
import { navigateTo } from "../App";
import { import {
ArrowRight, ArrowRight,
TrendingUp, TrendingUp,
@@ -33,6 +32,7 @@ import wokasideawardLocalImage from '../src/images/woka-side-award.webp';
import traderCircuitLocalImage from '../src/images/traders-circuit.webp'; import traderCircuitLocalImage from '../src/images/traders-circuit.webp';
import goodTimesLocalImage from '../src/images/goodtimes.webp'; import goodTimesLocalImage from '../src/images/goodtimes.webp';
import prospertyLocalImage from '../src/images/prosperty.webp'; import prospertyLocalImage from '../src/images/prosperty.webp';
import { useNavigate } from "react-router-dom";
const FeaturedCaseStudies = () => { const FeaturedCaseStudies = () => {
const caseStudies = [ const caseStudies = [
@@ -153,6 +153,8 @@ const FeaturedCaseStudies = () => {
} }
]; ];
const navigate = useNavigate();
return ( return (
<section className="py-20 bg-black"> <section className="py-20 bg-black">
<div className="container mx-auto px-6 lg:px-8"> <div className="container mx-auto px-6 lg:px-8">
@@ -205,13 +207,13 @@ const FeaturedCaseStudies = () => {
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" 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={() => { onClick={() => {
if (study.title === 'Seezun') { if (study.title === 'Seezun') {
navigateTo('/projects/seezun'); navigate('/projects/seezun');
} else if (study.title === 'WOKA') { } else if (study.title === 'WOKA') {
navigateTo('/projects/woka'); navigate('/projects/woka');
} else if (study.title === 'Tanami') { } else if (study.title === 'Tanami') {
navigateTo('/projects/tanami'); navigate('/projects/tanami');
} else { } else {
navigateTo('/case-studies'); navigate('/case-studies');
} }
}} }}
> >
@@ -307,13 +309,13 @@ const FeaturedCaseStudies = () => {
onClick={(e) => { onClick={(e) => {
e.stopPropagation(); e.stopPropagation();
if (study.title === 'Seezun') { if (study.title === 'Seezun') {
navigateTo('/projects/seezun'); navigate('/projects/seezun');
} else if (study.title === 'WOKA') { } else if (study.title === 'WOKA') {
navigateTo('/projects/woka'); navigate('/projects/woka');
} else if (study.title === 'Tanami') { } else if (study.title === 'Tanami') {
navigateTo('/projects/tanami'); navigate('/projects/tanami');
} else { } else {
navigateTo('/case-studies'); navigate('/case-studies');
} }
}} }}
> >
@@ -359,15 +361,15 @@ const FeaturedCaseStudies = () => {
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" 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={() => { onClick={() => {
if (story.title === 'TradersCircuit') { if (story.title === 'TradersCircuit') {
navigateTo('/projects/traderscircuit'); navigate('/projects/traderscircuit');
} else if (story.title === 'GoodTimes') { } else if (story.title === 'GoodTimes') {
navigateTo('/projects/goodtimes'); navigate('/projects/goodtimes');
} else if (story.title === 'Prosperty') { } else if (story.title === 'Prosperty') {
navigateTo('/projects/prosperty'); navigate('/projects/prosperty');
} else if (story.title === 'RanOutOf') { } else if (story.title === 'RanOutOf') {
navigateTo('/projects/ranoutof'); navigate('/projects/ranoutof');
} else { } else {
navigateTo('/case-studies'); navigate('/case-studies');
} }
}} }}
> >
@@ -453,15 +455,15 @@ const FeaturedCaseStudies = () => {
onClick={(e) => { onClick={(e) => {
e.stopPropagation(); e.stopPropagation();
if (story.title === 'TradersCircuit') { if (story.title === 'TradersCircuit') {
navigateTo('/projects/traderscircuit'); navigate('/projects/traderscircuit');
} else if (story.title === 'GoodTimes') { } else if (story.title === 'GoodTimes') {
navigateTo('/projects/goodtimes'); navigate('/projects/goodtimes');
} else if (story.title === 'Prosperty') { } else if (story.title === 'Prosperty') {
navigateTo('/projects/prosperty'); navigate('/projects/prosperty');
} else if (story.title === 'RanOutOf') { } else if (story.title === 'RanOutOf') {
navigateTo('/projects/ranoutof'); navigate('/projects/ranoutof');
} else { } else {
navigateTo('/case-studies'); navigate('/case-studies');
} }
}} }}
> >

19
components/Footer.tsx
View File

@@ -12,9 +12,9 @@ import { GridPattern } from "./GridPattern";
import { Button } from "./ui/button"; import { Button } from "./ui/button";
import { Input } from "./ui/input"; import { Input } from "./ui/input";
import BlackLogo14 from "../assets/BlackLogo14"; import BlackLogo14 from "../assets/BlackLogo14";
import { navigateTo } from "../App";
import { useState } from "react"; import { useState } from "react";
import GlobalOffices from "./GlobalOffices"; import GlobalOffices from "./GlobalOffices";
import { useNavigate } from "react-router-dom";
const footerNavigation = { const footerNavigation = {
Explore: [ Explore: [
@@ -179,10 +179,13 @@ const contactInfo = [
icon: MapPin, icon: MapPin,
label: label:
"614, Palm Spring Centre, Link Road, Malad (West), Mumbai - 400064. India.", "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 = ({ const FooterSection = ({
title, title,
links, links,
@@ -191,7 +194,10 @@ const FooterSection = ({
title: string; title: string;
links: Array<{ label: string; url: string }>; links: Array<{ label: string; url: string }>;
delay?: number; delay?: number;
}) => ( }) => {
const navigate = useNavigate();
return (
<motion.div <motion.div
initial={{ opacity: 0, y: 30 }} initial={{ opacity: 0, y: 30 }}
whileInView={{ opacity: 1, y: 0 }} whileInView={{ opacity: 1, y: 0 }}
@@ -209,7 +215,7 @@ const FooterSection = ({
href={link.url || '#'} href={link.url || '#'}
onClick={(e) => { onClick={(e) => {
e.preventDefault(); e.preventDefault();
navigateTo(link.url); navigate(link.url);
}} }}
className="text-[#CCCCCC] hover:text-white transition-colors duration-200 text-sm block py-1 hover:translate-x-1 transform cursor-pointer" className="text-[#CCCCCC] hover:text-white transition-colors duration-200 text-sm block py-1 hover:translate-x-1 transform cursor-pointer"
> >
@@ -220,6 +226,7 @@ const FooterSection = ({
</ul> </ul>
</motion.div> </motion.div>
); );
};
// Newsletter subscription component // Newsletter subscription component
const NewsletterSection = () => { const NewsletterSection = () => {
@@ -356,6 +363,8 @@ export const Footer = () => {
<a <a
key={contact.label} key={contact.label}
href={contact.url} 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" 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" /> <Icon className="w-4 h-4 text-[#E5195E] mt-0.5 flex-shrink-0" />
@@ -376,6 +385,8 @@ export const Footer = () => {
<a <a
key={social.name} key={social.name}
href={social.url} 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" 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} aria-label={social.name}
> >

2
components/GlobalOffices.tsx
View File

@@ -36,7 +36,7 @@ const offices = [
export default function GlobalOffices() { export default function GlobalOffices() {
return ( return (
<section className="bg-wdi-grey text-white py-20 lg:px-8 container mx-auto"> <section className="text-white py-20 lg:px-8 container mx-auto">
{/* Section Heading */} {/* Section Heading */}
<motion.h2 <motion.h2
initial={{ opacity: 0, y: 30 }} initial={{ opacity: 0, y: 30 }}

7
components/HeroBanner.tsx
View File

@@ -1,7 +1,7 @@
import { Button } from "./ui/button"; import { Button } from "./ui/button";
import { GridPattern } from "./GridPattern"; import { GridPattern } from "./GridPattern";
import { ChevronRight } from "lucide-react"; import { ChevronRight } from "lucide-react";
import { navigateTo } from "../App"; import { useNavigate } from "react-router-dom";
interface HeroBannerProps { interface HeroBannerProps {
category?: string; category?: string;
@@ -24,6 +24,7 @@ export function HeroBanner({
primaryCTA, primaryCTA,
secondaryCTA secondaryCTA
}: HeroBannerProps) { }: HeroBannerProps) {
const navigate = useNavigate();
return ( return (
<section className="relative py-20 lg:py-32 bg-[#0E0E0E] overflow-hidden"> <section className="relative py-20 lg:py-32 bg-[#0E0E0E] overflow-hidden">
<GridPattern /> <GridPattern />
@@ -54,7 +55,7 @@ export function HeroBanner({
<Button <Button
size="lg" 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" 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} {primaryCTA.text}
</Button> </Button>
@@ -64,7 +65,7 @@ export function HeroBanner({
variant="secondary" variant="secondary"
size="lg" 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" 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} {secondaryCTA.text}
<ChevronRight className="w-4 h-4 ml-2" /> <ChevronRight className="w-4 h-4 ml-2" />

7
components/HeroSection.tsx
View File

@@ -1,11 +1,12 @@
import { Button } from "./ui/button"; import { Button } from "./ui/button";
import { GridPattern } from "./GridPattern"; import { GridPattern } from "./GridPattern";
import { Calendar, Briefcase } from "lucide-react"; import { Calendar, Briefcase } from "lucide-react";
import { navigateTo } from "../App";
import { motion } from "framer-motion"; import { motion } from "framer-motion";
import Spline from "@splinetool/react-spline"; import Spline from "@splinetool/react-spline";
import { useNavigate } from "react-router-dom";
export function HeroSection() { export function HeroSection() {
const navigate = useNavigate();
return ( return (
<section <section
id="hero" id="hero"
@@ -91,7 +92,7 @@ export function HeroSection() {
<Button <Button
size="lg" size="lg"
className="whitespace-nowrap" className="whitespace-nowrap"
onClick={() => navigateTo("/start-a-project")} onClick={() => navigate("/start-a-project")}
> >
<Calendar className="w-4 h-4" /> <Calendar className="w-4 h-4" />
Book a Free Consultation Book a Free Consultation
@@ -101,7 +102,7 @@ export function HeroSection() {
variant="secondary" variant="secondary"
size="lg" size="lg"
className="whitespace-nowrap" className="whitespace-nowrap"
onClick={() => navigateTo("/services")} onClick={() => navigate("/services")}
> >
<Briefcase className="w-4 h-4" /> <Briefcase className="w-4 h-4" />
Explore Services Explore Services

5
components/HireDeveloperSection.tsx
View File

@@ -3,7 +3,7 @@ import { Badge } from "@/components/ui/badge";
import { Card, CardContent } from "@/components/ui/card"; import { Card, CardContent } from "@/components/ui/card";
import { Button } from "@/components/ui/button"; import { Button } from "@/components/ui/button";
import { UserPlus, ArrowRight } from "lucide-react"; import { UserPlus, ArrowRight } from "lucide-react";
import { navigateTo } from "@/App"; import { useNavigate } from "react-router-dom";
import { ShimmerButton } from "./ui/shimmer-button"; import { ShimmerButton } from "./ui/shimmer-button";
const HireDeveloperSection = ({ const HireDeveloperSection = ({
@@ -13,6 +13,7 @@ const HireDeveloperSection = ({
buttonText, buttonText,
buttonLink, buttonLink,
}) => { }) => {
const navigate = useNavigate();
return ( return (
<section className="py-32 bg-black"> <section className="py-32 bg-black">
<div className="container mx-auto px-6 lg:px-8"> <div className="container mx-auto px-6 lg:px-8">
@@ -104,7 +105,7 @@ const HireDeveloperSection = ({
viewport={{ once: true }} viewport={{ once: true }}
className="flex flex-col sm:flex-row gap-4 justify-center" className="flex flex-col sm:flex-row gap-4 justify-center"
> >
<ShimmerButton className="px-8 py-4" onClick={() => navigateTo(buttonLink)}> <ShimmerButton className="px-8 py-4" onClick={() => navigate(buttonLink)}>
<div className="inline-flex items-center gap-2"> <div className="inline-flex items-center gap-2">
<UserPlus className="w-5 h-5 flex-shrink-0" /> <UserPlus className="w-5 h-5 flex-shrink-0" />
<span>{buttonText}</span> <span>{buttonText}</span>

7
components/HireTalentHeroBanner.tsx
View File

@@ -1,6 +1,6 @@
import { useNavigate } from "react-router-dom";
import { Button } from "./ui/button"; import { Button } from "./ui/button";
import { ShimmerButton } from "./ui/shimmer-button"; import { ShimmerButton } from "./ui/shimmer-button";
import { navigateTo } from "../App";
import { DashboardVector } from "./vectors/DashboardVector"; import { DashboardVector } from "./vectors/DashboardVector";
import { motion } from "framer-motion"; import { motion } from "framer-motion";
@@ -31,6 +31,7 @@ export function HireTalentHeroBanner({
useVectors = false, useVectors = false,
vectorComponent: VectorComponent vectorComponent: VectorComponent
}: HireTalentHeroBannerProps) { }: HireTalentHeroBannerProps) {
const navigate = useNavigate();
return ( return (
<section className="relative py-20 overflow-hidden bg-black"> <section className="relative py-20 overflow-hidden bg-black">
<div className="container mx-auto px-6 lg:px-8"> <div className="container mx-auto px-6 lg:px-8">
@@ -74,7 +75,7 @@ export function HireTalentHeroBanner({
> >
<ShimmerButton <ShimmerButton
className="text-lg px-8 py-4 font-manrope" className="text-lg px-8 py-4 font-manrope"
onClick={() => navigateTo(primaryCTA.href)} onClick={() => navigate(primaryCTA.href)}
> >
<div className="inline-flex items-center gap-2"> <div className="inline-flex items-center gap-2">
{primaryCTA.icon && <primaryCTA.icon className="w-5 h-5 flex-shrink-0" />} {primaryCTA.icon && <primaryCTA.icon className="w-5 h-5 flex-shrink-0" />}
@@ -87,7 +88,7 @@ export function HireTalentHeroBanner({
variant="outline" variant="outline"
size="lg" 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" 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={() => navigateTo(secondaryCTA.href)} onClick={() => navigate(secondaryCTA.href)}
> >
<div className="inline-flex items-center gap-2"> <div className="inline-flex items-center gap-2">
{secondaryCTA.icon && <secondaryCTA.icon className="w-5 h-5 flex-shrink-0" />} {secondaryCTA.icon && <secondaryCTA.icon className="w-5 h-5 flex-shrink-0" />}

41
components/HorizontalTagScroller.tsx
View File

@@ -14,28 +14,30 @@ import {
Cloud Cloud
} from "lucide-react"; } from "lucide-react";
import { GridPattern } from "./GridPattern"; import { GridPattern } from "./GridPattern";
import { useNavigate } from "react-router-dom";
const industries = [ const industries = [
// First row // First row
{ name: "FinTech", icon: CreditCard }, { name: "FinTech", icon: CreditCard, link: "/industries/fintech-banking-apps" },
{ name: "HealthTech", icon: Heart }, { name: "HealthTech", icon: Heart, link: "/industries/healthcare/healthtech-applications" },
{ name: "eCommerce", icon: ShoppingCart }, { name: "eCommerce", icon: ShoppingCart, link: "/industries/commerce/ecommerce-marketplaces" },
{ name: "EdTech", icon: GraduationCap }, { name: "EdTech", icon: GraduationCap, link: "/industries/education/edtech-platforms" },
// Second row // Second row
{ name: "Logistics", icon: Truck }, { name: "Logistics", icon: Truck, link: "/industries/mobility/transportation-apps" },
{ name: "Media & OTT", icon: Video }, { name: "Media & OTT", icon: Video, link: "/industries/media/ott-streaming-apps" },
{ name: "Real Estate", icon: Building }, { name: "Real Estate", icon: Building, link: "/industries/financial-services/real-estate-tech" },
{ name: "Travel", icon: Plane }, { name: "Travel", icon: Plane, link: "/industries/commerce/travel-booking-systems" },
// Third row (we'll make it 3x4 instead to fit all 12) // Third row
{ name: "Manufacturing", icon: Factory }, { name: "Manufacturing", icon: Factory, link: "/industries/industrial/manufacturing-automation" },
{ name: "AgriTech", icon: Wheat }, { name: "AgriTech", icon: Wheat, link: "/industries/industrial/agritech-platforms" },
{ name: "Gaming", icon: Gamepad2 }, { name: "Gaming", icon: Gamepad2, link: "/industries/media/sports-fan-engagement" },
{ name: "SaaS", icon: Cloud } { name: "SaaS", icon: Cloud, link: "/industries/financial-services/wealthtech-platforms" }
]; ];
const IndustryCard = ({ industry, index }: { const IndustryCard = ({ industry, index, onClick }: {
industry: { name: string; icon: any }; industry: { name: string; icon: any; link: string };
index: number; index: number;
onClick: (link: string) => void;
}) => { }) => {
const Icon = industry.icon; const Icon = industry.icon;
@@ -47,6 +49,7 @@ const IndustryCard = ({ industry, index }: {
viewport={{ once: true }} viewport={{ once: true }}
whileHover={{ y: -5, scale: 1.02 }} 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" 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"> <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]" /> <Icon className="w-8 h-8 text-[#E5195E]" />
@@ -59,6 +62,12 @@ const IndustryCard = ({ industry, index }: {
}; };
export const HorizontalTagScroller = () => { export const HorizontalTagScroller = () => {
const navigate = useNavigate();
const handleIndustryClick = (link: string) => {
navigate(link);
};
return ( return (
<section className="relative py-20 bg-[#0E0E0E] overflow-hidden"> <section className="relative py-20 bg-[#0E0E0E] overflow-hidden">
<GridPattern strokeDasharray="4 2" /> <GridPattern strokeDasharray="4 2" />
@@ -79,13 +88,13 @@ export const HorizontalTagScroller = () => {
</p> </p>
</motion.div> </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"> <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) => ( {industries.map((industry, index) => (
<IndustryCard <IndustryCard
key={industry.name} key={industry.name}
industry={industry} industry={industry}
index={index} index={index}
onClick={handleIndustryClick}
/> />
))} ))}
</div> </div>

5
components/InlineCTA.tsx
View File

@@ -2,9 +2,10 @@ import { motion } from "framer-motion";
import { Lightbulb, Clock } from "lucide-react"; import { Lightbulb, Clock } from "lucide-react";
import { Button } from "./ui/button"; import { Button } from "./ui/button";
import { GridPattern } from "./GridPattern"; import { GridPattern } from "./GridPattern";
import { navigateTo } from "../App"; import { useNavigate } from "react-router-dom";
export const InlineCTA = () => { export const InlineCTA = () => {
const navigate = useNavigate();
return ( return (
<section className="relative py-20 overflow-hidden"> <section className="relative py-20 overflow-hidden">
<GridPattern strokeDasharray="4 2" /> <GridPattern strokeDasharray="4 2" />
@@ -145,7 +146,7 @@ export const InlineCTA = () => {
<Button <Button
size="lg" 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" 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 <motion.div
animate={{ animate={{

142
components/Navigation.tsx
View File

@@ -82,7 +82,7 @@ import {
} from "lucide-react"; } from "lucide-react";
import { Button } from "./ui/button"; import { Button } from "./ui/button";
import BlackLogo14 from "../assets/BlackLogo14"; import BlackLogo14 from "../assets/BlackLogo14";
import { navigateTo } from "../App"; import { useLocation, useNavigate } from "react-router-dom";
const navigationData = { const navigationData = {
main_navigation: [ main_navigation: [
@@ -457,16 +457,8 @@ const navigationData = {
], ],
company: [ company: [
{ text: "About WDI", icon: Info, href: "/company/about-wdi" }, { 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: "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: "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: [ resources: [
{ text: "Blogs", icon: BookOpen, href: "/resources/blog" }, { text: "Blogs", icon: BookOpen, href: "/resources/blog" },
@@ -513,7 +505,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 = { const megaMenuCTAs = {
Services: { Services: {
title: "Development Quote", title: "Development Quote",
@@ -575,6 +567,7 @@ const megaMenuCTAs = {
// Horizontal CTA Component matching reference design // Horizontal CTA Component matching reference design
const MegaMenuCTA = ({ type }: { type: string }) => { const MegaMenuCTA = ({ type }: { type: string }) => {
const navigate = useNavigate();
const cta = megaMenuCTAs[type as keyof typeof megaMenuCTAs]; const cta = megaMenuCTAs[type as keyof typeof megaMenuCTAs];
if (!cta) return null; if (!cta) return null;
@@ -595,7 +588,7 @@ const MegaMenuCTA = ({ type }: { type: string }) => {
<div className="ml-6"> <div className="ml-6">
<Button <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" 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} {cta.buttonText}
<ArrowRight className="w-4 h-4 ml-2 group-hover:translate-x-1 transition-transform" /> <ArrowRight className="w-4 h-4 ml-2 group-hover:translate-x-1 transition-transform" />
@@ -621,10 +614,12 @@ const MegaMenu = ({
type, type,
timeoutRef, timeoutRef,
}: MegaMenuProps) => { }: MegaMenuProps) => {
const navigate = useNavigate();
if (!isOpen) return null; if (!isOpen) return null;
const navigate = (path: string) => { const handleNavigate = (path: string) => {
navigateTo(path); navigate(path);
onClose(); onClose();
}; };
@@ -639,24 +634,26 @@ const MegaMenu = ({
<div className="w-10 h-10 rounded-xl bg-[#E5195E]/20 flex items-center justify-center"> <div className="w-10 h-10 rounded-xl bg-[#E5195E]/20 flex items-center justify-center">
<Icon className="w-5 h-5 text-[#E5195E]" /> <Icon className="w-5 h-5 text-[#E5195E]" />
</div> </div>
<h4 <a
href={service.href}
className="font-semibold text-white text-sm cursor-pointer hover:text-[#E5195E] transition-colors" className="font-semibold text-white text-sm cursor-pointer hover:text-[#E5195E] transition-colors"
onClick={() => service.href && navigate(service.href)} onClick={(e) => {
e.preventDefault();
service.href && handleNavigate(service.href);
}}
> >
{service.category} {service.category}
</h4> </a>
</div> </div>
<ul className="space-y-3"> <ul className="space-y-3">
{service.sub_services.map((subService) => ( {service.sub_services.map((subService) => (
<li key={subService.name}> <li key={subService.name}>
<a <a
href={subService.href || '#'} // Use actual href instead of # href={subService.href}
className="text-[#CCCCCC] hover:text-white text-sm transition-colors duration-200 block py-1 hover:translate-x-1 transform" 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) => { onClick={(e) => {
e.preventDefault(); e.preventDefault();
if (subService.href) { subService.href && handleNavigate(subService.href);
navigate(subService.href);
}
}} }}
> >
{subService.name} {subService.name}
@@ -683,24 +680,26 @@ const MegaMenu = ({
<div className="w-10 h-10 rounded-xl bg-[#E5195E]/20 flex items-center justify-center"> <div className="w-10 h-10 rounded-xl bg-[#E5195E]/20 flex items-center justify-center">
<Icon className="w-5 h-5 text-[#E5195E]" /> <Icon className="w-5 h-5 text-[#E5195E]" />
</div> </div>
<h4 <a
href={category.href}
className="font-semibold text-white text-lg cursor-pointer hover:text-[#E5195E] transition-colors" className="font-semibold text-white text-lg cursor-pointer hover:text-[#E5195E] transition-colors"
onClick={() => category.href && navigate(category.href)} onClick={(e) => {
e.preventDefault();
category.href && handleNavigate(category.href);
}}
> >
{category.category} {category.category}
</h4> </a>
</div> </div>
<ul className="space-y-3"> <ul className="space-y-3">
{category.sub_services.map((service) => ( {category.sub_services.map((service) => (
<li key={service.name}> <li key={service.name}>
<a <a
href={service.href || '#'} // Use actual href instead of # href={service.href}
className="text-[#CCCCCC] hover:text-white text-sm transition-colors duration-200 block py-1 hover:translate-x-1 transform" 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) => { onClick={(e) => {
e.preventDefault(); e.preventDefault();
if (service.href) { service.href && handleNavigate(service.href);
navigate(service.href);
}
}} }}
> >
{service.name} {service.name}
@@ -724,13 +723,11 @@ const MegaMenu = ({
return ( return (
<a <a
key={solution.text} key={solution.text}
href={solution.href || '#'} // Use actual href instead of # 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" 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) => { onClick={(e) => {
e.preventDefault(); e.preventDefault();
if (solution.href) { solution.href && handleNavigate(solution.href);
navigate(solution.href);
}
}} }}
> >
<div className="w-8 h-8 rounded-lg bg-[#E5195E]/20 flex items-center justify-center group-hover:scale-110 transition-transform"> <div className="w-8 h-8 rounded-lg bg-[#E5195E]/20 flex items-center justify-center group-hover:scale-110 transition-transform">
@@ -764,13 +761,11 @@ const MegaMenu = ({
{industry.items.map((item) => ( {industry.items.map((item) => (
<li key={item.name}> <li key={item.name}>
<a <a
href={item.href || '#'} // Use actual href instead of # href={item.href}
className="text-[#CCCCCC] hover:text-white text-sm transition-colors duration-200 block py-1 hover:translate-x-1 transform" 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) => { onClick={(e) => {
e.preventDefault(); e.preventDefault();
if (item.href) { item.href && handleNavigate(item.href);
navigate(item.href);
}
}} }}
> >
{item.name} {item.name}
@@ -794,13 +789,11 @@ const MegaMenu = ({
return ( return (
<a <a
key={item.text} key={item.text}
href={item.href || '#'} // Use actual href instead of # href={item.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" 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) => { onClick={(e) => {
e.preventDefault(); e.preventDefault();
if (item.href) { item.href && handleNavigate(item.href);
navigate(item.href);
}
}} }}
> >
<div className="w-8 h-8 rounded-lg bg-[#E5195E]/20 flex items-center justify-center group-hover:scale-110 transition-transform"> <div className="w-8 h-8 rounded-lg bg-[#E5195E]/20 flex items-center justify-center group-hover:scale-110 transition-transform">
@@ -870,10 +863,7 @@ export const Navigation = () => {
const [isMobileMenuOpen, setIsMobileMenuOpen] = useState(false); const [isMobileMenuOpen, setIsMobileMenuOpen] = useState(false);
const timeoutRef = useRef<NodeJS.Timeout>(); const timeoutRef = useRef<NodeJS.Timeout>();
const navRef = useRef<HTMLElement>(null); const navRef = useRef<HTMLElement>(null);
const navigate = useNavigate();
const navigate = (path: string) => {
navigateTo(path);
};
const openMenu = useCallback((item: string) => { const openMenu = useCallback((item: string) => {
if (timeoutRef.current) { if (timeoutRef.current) {
@@ -918,12 +908,6 @@ export const Navigation = () => {
closeMenu(); closeMenu();
}, [closeMenu]); }, [closeMenu]);
// const handleNavMouseLeave = useCallback((e: React.MouseEvent) => {
// const relatedTarget = e.relatedTarget as Element;
// if (!navRef.current?.contains(relatedTarget)) {
// closeMenu();
// }
// }, [closeMenu]);
const handleNavMouseLeave = useCallback( const handleNavMouseLeave = useCallback(
(e: React.MouseEvent) => { (e: React.MouseEvent) => {
const relatedTarget = e.relatedTarget; const relatedTarget = e.relatedTarget;
@@ -977,14 +961,20 @@ export const Navigation = () => {
case "AI & ML": case "AI & ML":
return "/artificial-intelligence"; return "/artificial-intelligence";
case "Solutions": case "Solutions":
return "/solutions/digital-product-development"; // Default to first solution return "/solutions/digital-product-development";
case "Industries": case "Industries":
return "/industries/fintech-banking-apps"; // Default to first industry return "/industries/fintech-banking-apps";
default: default:
return null; return "/";
} }
}; };
const handleNavigation = (path: string) => {
navigate(path);
setIsMobileMenuOpen(false);
setActiveMenu(null);
};
return ( return (
<nav <nav
ref={navRef} ref={navRef}
@@ -995,22 +985,17 @@ export const Navigation = () => {
<div className="container mx-auto px-6 lg:px-8"> <div className="container mx-auto px-6 lg:px-8">
<div className="flex items-center justify-between h-20"> <div className="flex items-center justify-between h-20">
<div className="flex items-center"> <div className="flex items-center">
<a <button
href="#"
className="flex items-center" className="flex items-center"
onClick={(e) => { onClick={() => handleNavigation("/")}
e.preventDefault();
navigate("/");
}}
> >
<div className="w-10 h-10"> <div className="w-10 h-10">
<BlackLogo14 /> <BlackLogo14 />
</div> </div>
</a> </button>
</div> </div>
<div className="hidden lg:flex items-center space-x-6 xl:space-x-8"> <div className="hidden lg:flex items-center space-x-6 xl:space-x-8">
{navigationData.main_navigation.map((item) => ( {navigationData.main_navigation.map((item) => (
<div <div
key={item} key={item}
@@ -1019,20 +1004,18 @@ export const Navigation = () => {
onMouseLeave={handleNavItemMouseLeave} onMouseLeave={handleNavItemMouseLeave}
> >
<a <a
href={getMainCategoryRoute(item) || '#'} // Use actual route instead of # 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" 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) => { onClick={(e) => {
e.preventDefault(); e.preventDefault();
const route = getMainCategoryRoute(item); handleNavigation(getMainCategoryRoute(item));
if (route) {
navigate(route);
}
}} }}
> >
{item} {item}
{hasDropdown(item) && ( {hasDropdown(item) && (
<ChevronDown <ChevronDown
className={`w-4 h-4 transition-transform duration-200 ${activeMenu === item ? "rotate-180" : "" className={`w-4 h-4 transition-transform duration-200 ${
activeMenu === item ? "rotate-180" : ""
}`} }`}
/> />
)} )}
@@ -1043,7 +1026,7 @@ export const Navigation = () => {
<div className="flex items-center space-x-4"> <div className="flex items-center space-x-4">
<Button <Button
onClick={() => navigate("/start-a-project")} onClick={() => handleNavigation("/start-a-project")}
className="hidden lg:flex" className="hidden lg:flex"
> >
Get Started Get Started
@@ -1091,25 +1074,18 @@ export const Navigation = () => {
{navigationData.main_navigation.map((item) => ( {navigationData.main_navigation.map((item) => (
<a <a
key={item} key={item}
href={getMainCategoryRoute(item) || '#'} href={getMainCategoryRoute(item)}
className="block text-[#CCCCCC] hover:text-white transition-colors py-2 font-medium" className="block text-[#CCCCCC] hover:text-white transition-colors py-2 font-medium text-left w-full"
onClick={(e) => { onClick={(e) => {
e.preventDefault(); e.preventDefault();
const route = getMainCategoryRoute(item); handleNavigation(getMainCategoryRoute(item));
if (route) {
navigate(route);
setIsMobileMenuOpen(false);
}
}} }}
> >
{item} {item}
</a> </a>
))} ))}
<Button <Button
onClick={() => { onClick={() => handleNavigation("/start-a-project")}
navigate("/start-a-project");
setIsMobileMenuOpen(false);
}}
className="w-full mt-4" className="w-full mt-4"
> >
Get Started Get Started

5
components/ProcessSection.tsx
View File

@@ -13,7 +13,7 @@ import {
} from "lucide-react"; } from "lucide-react";
import { Button } from "./ui/button"; import { Button } from "./ui/button";
import { Badge } from "./ui/badge"; import { Badge } from "./ui/badge";
import { navigateTo } from "@/App"; import { useNavigate } from "react-router-dom";
const steps = [ const steps = [
{ {
@@ -252,6 +252,7 @@ const ProcessCard = ({
export const ProcessSection = () => { export const ProcessSection = () => {
const titleRef = useRef(null); const titleRef = useRef(null);
const navigate = useNavigate();
return ( return (
<section className="relative overflow-hidden py-20 bg-background"> <section className="relative overflow-hidden py-20 bg-background">
@@ -299,7 +300,7 @@ export const ProcessSection = () => {
<Button <Button
size="lg" size="lg"
className="bg-accent hover:bg-accent/90 text-accent-foreground border-0 rounded-lg px-8 py-4 group text-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"> <span className="flex items-center gap-2">
Start Your Project Today Start Your Project Today

10
components/ResourceCards.tsx
View File

@@ -2,7 +2,7 @@ import { motion } from "framer-motion";
import { ArrowRight, Calendar, Clock } from "lucide-react"; import { ArrowRight, Calendar, Clock } from "lucide-react";
import { Button } from "./ui/button"; import { Button } from "./ui/button";
import { ImageWithFallback } from "./figma/ImageWithFallback"; import { ImageWithFallback } from "./figma/ImageWithFallback";
import { navigateTo } from "../App"; import { useNavigate } from "react-router-dom";
const resources = [ const resources = [
{ {
@@ -62,6 +62,7 @@ const ResourceCard = ({
resource: (typeof resources)[0]; resource: (typeof resources)[0];
index: number; index: number;
}) => { }) => {
const navigate = useNavigate();
return ( return (
<motion.article <motion.article
initial={{ opacity: 0, y: 50 }} initial={{ opacity: 0, y: 50 }}
@@ -69,7 +70,7 @@ const ResourceCard = ({
transition={{ duration: 0.6, delay: index * 0.2 }} transition={{ duration: 0.6, delay: index * 0.2 }}
viewport={{ once: true }} 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" 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 */} {/* Image */}
<div className="aspect-[16/9] overflow-hidden relative"> <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" className="text-accent hover:text-accent-foreground hover:bg-accent/10 p-2 h-auto group-hover:translate-x-1 transition-transform"
onClick={(e) => { onClick={(e) => {
e.stopPropagation(); e.stopPropagation();
navigateTo(`/insights/${resource.slug}`); navigate(`/insights/${resource.slug}`);
}} }}
> >
<ArrowRight className="w-4 h-4" /> <ArrowRight className="w-4 h-4" />
@@ -140,6 +141,7 @@ const ResourceCard = ({
}; };
export const ResourceCards = () => { export const ResourceCards = () => {
const navigate = useNavigate();
return ( return (
<section className="relative py-20 overflow-hidden"> <section className="relative py-20 overflow-hidden">
<div className="container mx-auto px-6 lg:px-8"> <div className="container mx-auto px-6 lg:px-8">
@@ -181,7 +183,7 @@ export const ResourceCards = () => {
> >
<Button <Button
className="bg-accent hover:bg-accent/90 text-accent-foreground border-0 rounded-lg px-6 py-3" 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" /> View All Resources <ArrowRight className="w-4 h-4 ml-2" />
</Button> </Button>

6
components/ServicesGrid.tsx
View File

@@ -1,7 +1,7 @@
import { motion } from "framer-motion"; import { motion } from "framer-motion";
import { Smartphone, Globe, Palette, Brain, RefreshCw, Users } from "lucide-react"; import { Smartphone, Globe, Palette, Brain, RefreshCw, Users } from "lucide-react";
import { GridPattern } from "./GridPattern"; import { GridPattern } from "./GridPattern";
import { navigateTo } from "../App"; import { useNavigate } from "react-router-dom";
const services = [ const services = [
{ {
@@ -42,10 +42,10 @@ const ServiceCard = ({ service, index }: { service: typeof services[0]; index: n
const handleClick = () => { const handleClick = () => {
if (service.href) { if (service.href) {
navigateTo(service.href); navigate(service.href);
} }
}; };
const navigate = useNavigate();
return ( return (
<motion.div <motion.div
initial={{ opacity: 0, y: 50 }} initial={{ opacity: 0, y: 50 }}

5
components/SplitCallToAction.tsx
View File

@@ -2,9 +2,10 @@ import { motion } from "framer-motion";
import { Phone, Clock, Zap, Calendar, MessageSquare } from "lucide-react"; import { Phone, Clock, Zap, Calendar, MessageSquare } from "lucide-react";
import { Button } from "./ui/button"; import { Button } from "./ui/button";
import { GridPattern } from "./GridPattern"; import { GridPattern } from "./GridPattern";
import { navigateTo } from "../App"; import { useNavigate } from "react-router-dom";
export const SplitCallToAction = () => { export const SplitCallToAction = () => {
const navigate = useNavigate();
return ( return (
<section className="relative py-20 overflow-hidden"> <section className="relative py-20 overflow-hidden">
<GridPattern strokeDasharray="4 2" /> <GridPattern strokeDasharray="4 2" />
@@ -86,7 +87,7 @@ export const SplitCallToAction = () => {
<Button <Button
size="lg" size="lg"
className="w-full bg-accent hover:bg-accent/90 text-accent-foreground py-4 text-lg border-0 rounded-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" /> <Phone className="w-5 h-5 mr-2" />
Schedule Free Call Schedule Free Call

20
pages/AIAutomationWorkflows.tsx
View File

@@ -45,11 +45,13 @@ import { Badge } from "../components/ui/badge";
import { Button } from "../components/ui/button"; import { Button } from "../components/ui/button";
import { Card, CardContent } from "../components/ui/card"; import { Card, CardContent } from "../components/ui/card";
import { ShimmerButton } from "../components/ui/shimmer-button"; import { ShimmerButton } from "../components/ui/shimmer-button";
import { navigateTo } from "@/App";
import { Helmet } from "react-helmet-async"; import { Helmet } from "react-helmet-async";
import { AIStrategyTargetAudience } from "./AIStrategyConsulting";
import { useNavigate } from "react-router-dom";
// AI Automation & Workflows Hero Section // AI Automation & Workflows Hero Section
const AutomationHeroWithCTA = () => { const AutomationHeroWithCTA = () => {
const navigate = useNavigate();
return ( return (
<section className="relative py-20 overflow-hidden bg-black"> <section className="relative py-20 overflow-hidden bg-black">
<Helmet> <Helmet>
@@ -138,7 +140,7 @@ const AutomationHeroWithCTA = () => {
> >
<ShimmerButton <ShimmerButton
className="text-lg px-8 py-4" 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"> <div className="inline-flex items-center gap-2">
<Zap className="w-5 h-5 flex-shrink-0" /> <Zap className="w-5 h-5 flex-shrink-0" />
@@ -1168,6 +1170,7 @@ const AutomationCaseStudies = () => {
// Mid-Page CTA // Mid-Page CTA
const AutomationInlineCTA = () => { const AutomationInlineCTA = () => {
const navigate = useNavigate();
return ( return (
<section className="py-20 bg-black"> <section className="py-20 bg-black">
<div className="container mx-auto px-6 lg:px-8"> <div className="container mx-auto px-6 lg:px-8">
@@ -1206,7 +1209,7 @@ const AutomationInlineCTA = () => {
<ShimmerButton <ShimmerButton
className="text-xl px-10 py-5 rounded-2xl shadow-lg hover:shadow-xl" 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"> <div className="inline-flex items-center gap-3">
<Search className="w-6 h-6 flex-shrink-0" /> <Search className="w-6 h-6 flex-shrink-0" />
@@ -1473,6 +1476,7 @@ const AutomationFAQs = () => {
// Final CTA Section // Final CTA Section
const AutomationFinalCTA = () => { const AutomationFinalCTA = () => {
const navigate = useNavigate();
return ( return (
<section className="py-20 relative overflow-hidden"> <section className="py-20 relative overflow-hidden">
<div className="container mx-auto px-6 lg:px-8 relative z-10"> <div className="container mx-auto px-6 lg:px-8 relative z-10">
@@ -1525,7 +1529,7 @@ const AutomationFinalCTA = () => {
> >
<ShimmerButton <ShimmerButton
className="px-12 py-6 text-xl rounded-2xl shadow-2xl hover:shadow-accent/25" 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"> <div className="inline-flex items-center gap-3">
<Workflow className="w-6 h-6 flex-shrink-0" /> <Workflow className="w-6 h-6 flex-shrink-0" />
@@ -1554,7 +1558,7 @@ const AutomationFinalCTA = () => {
export const AIAutomationWorkflows = () => { export const AIAutomationWorkflows = () => {
return ( return (
<div className="dark min-h-screen"> <div className="dark min-h-screen">
<Navigation /> {/* <Navigation /> */}
{/* Hero Section */} {/* Hero Section */}
<section className="bg-black"> <section className="bg-black">
@@ -1578,7 +1582,7 @@ export const AIAutomationWorkflows = () => {
{/* Tech Stack */} {/* Tech Stack */}
<section className="bg-card"> <section className="bg-card">
<AutomationTechStack /> <AIStrategyTargetAudience />
</section> </section>
{/* Case Studies */} {/* Case Studies */}
@@ -1607,8 +1611,8 @@ export const AIAutomationWorkflows = () => {
</section> </section>
{/* Footer */} {/* Footer */}
<section className="bg-card"> <section className="bg-background">
<Footer /> {/* <Footer /> */}
</section> </section>
</div> </div>
); );

18
pages/AIChatbotsVirtualAssistants.tsx
View File

@@ -43,11 +43,13 @@ import { Badge } from "../components/ui/badge";
import { Button } from "../components/ui/button"; import { Button } from "../components/ui/button";
import { Card, CardContent } from "../components/ui/card"; import { Card, CardContent } from "../components/ui/card";
import { ShimmerButton } from "../components/ui/shimmer-button"; import { ShimmerButton } from "../components/ui/shimmer-button";
import { navigateTo } from "@/App";
import { Helmet } from "react-helmet-async"; import { Helmet } from "react-helmet-async";
import { AIStrategyTargetAudience } from "./AIStrategyConsulting";
import { useNavigate } from "react-router-dom";
// AI Chatbots & Virtual Assistants Hero Section // AI Chatbots & Virtual Assistants Hero Section
const ChatbotsHeroWithCTA = () => { const ChatbotsHeroWithCTA = () => {
const navigate = useNavigate();
return ( return (
<section className="relative py-20 overflow-hidden bg-black"> <section className="relative py-20 overflow-hidden bg-black">
<Helmet> <Helmet>
@@ -136,7 +138,7 @@ const ChatbotsHeroWithCTA = () => {
> >
<ShimmerButton <ShimmerButton
className="text-lg px-8 py-4" 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"> <div className="inline-flex items-center gap-2">
<Bot className="w-5 h-5 flex-shrink-0" /> <Bot className="w-5 h-5 flex-shrink-0" />
@@ -1108,6 +1110,7 @@ const ChatbotCaseStudies = () => {
// Mid-Page CTA // Mid-Page CTA
const ChatbotInlineCTA = () => { const ChatbotInlineCTA = () => {
const navigate = useNavigate();
return ( return (
<section className="py-20 bg-black"> <section className="py-20 bg-black">
<div className="container mx-auto px-6 lg:px-8"> <div className="container mx-auto px-6 lg:px-8">
@@ -1146,7 +1149,7 @@ const ChatbotInlineCTA = () => {
<ShimmerButton <ShimmerButton
className="text-xl px-10 py-5 rounded-2xl shadow-lg hover:shadow-xl" 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"> <div className="inline-flex items-center gap-3">
<MessageSquare className="w-6 h-6 flex-shrink-0" /> <MessageSquare className="w-6 h-6 flex-shrink-0" />
@@ -1413,6 +1416,7 @@ const ChatbotFAQs = () => {
// Final CTA Section // Final CTA Section
const ChatbotFinalCTA = () => { const ChatbotFinalCTA = () => {
const navigate = useNavigate();
return ( return (
<section className="py-20 relative overflow-hidden"> <section className="py-20 relative overflow-hidden">
<div className="container mx-auto px-6 lg:px-8 relative z-10"> <div className="container mx-auto px-6 lg:px-8 relative z-10">
@@ -1465,7 +1469,7 @@ const ChatbotFinalCTA = () => {
> >
<ShimmerButton <ShimmerButton
className="px-12 py-6 text-xl rounded-2xl shadow-2xl hover:shadow-accent/25" 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"> <div className="inline-flex items-center gap-3">
<MessageSquare className="w-6 h-6 flex-shrink-0" /> <MessageSquare className="w-6 h-6 flex-shrink-0" />
@@ -1494,7 +1498,7 @@ const ChatbotFinalCTA = () => {
export const AIChatbotsVirtualAssistants = () => { export const AIChatbotsVirtualAssistants = () => {
return ( return (
<div className="dark min-h-screen"> <div className="dark min-h-screen">
<Navigation /> {/* <Navigation /> */}
{/* Hero Section */} {/* Hero Section */}
<section className="bg-black"> <section className="bg-black">
@@ -1518,7 +1522,7 @@ export const AIChatbotsVirtualAssistants = () => {
{/* Tech Stack */} {/* Tech Stack */}
<section className="bg-card"> <section className="bg-card">
<ChatbotTechStack /> <AIStrategyTargetAudience />
</section> </section>
{/* Case Studies */} {/* Case Studies */}
@@ -1548,7 +1552,7 @@ export const AIChatbotsVirtualAssistants = () => {
{/* Footer */} {/* Footer */}
<section className="bg-card"> <section className="bg-card">
<Footer /> {/* <Footer /> */}
</section> </section>
</div> </div>
); );

20
pages/AIIntegrationDigitalProducts.tsx
View File

@@ -41,11 +41,13 @@ import { Badge } from "../components/ui/badge";
import { Button } from "../components/ui/button"; import { Button } from "../components/ui/button";
import { Card, CardContent } from "../components/ui/card"; import { Card, CardContent } from "../components/ui/card";
import { ShimmerButton } from "../components/ui/shimmer-button"; import { ShimmerButton } from "../components/ui/shimmer-button";
import { navigateTo } from "@/App"; import { useNavigate } from "react-router-dom";
import { Helmet } from "react-helmet-async"; import { Helmet } from "react-helmet-async";
import { AIStrategyTargetAudience } from "./AIStrategyConsulting";
// AI Integration Hero Section // AI Integration Hero Section
const AIIntegrationHeroWithCTA = () => { const AIIntegrationHeroWithCTA = () => {
const navigate = useNavigate();
return ( return (
<section className="relative py-20 overflow-hidden bg-black"> <section className="relative py-20 overflow-hidden bg-black">
<Helmet> <Helmet>
@@ -134,7 +136,7 @@ const AIIntegrationHeroWithCTA = () => {
> >
<ShimmerButton <ShimmerButton
className="text-lg px-8 py-4" 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"> <div className="inline-flex items-center gap-2">
<Sparkles className="w-5 h-5 flex-shrink-0" /> <Sparkles className="w-5 h-5 flex-shrink-0" />
@@ -1166,6 +1168,7 @@ const AIIntegrationCaseStudies = () => {
// Mid-Page CTA // Mid-Page CTA
const AIIntegrationInlineCTA = () => { const AIIntegrationInlineCTA = () => {
const navigate = useNavigate();
return ( return (
<section className="py-20 bg-black"> <section className="py-20 bg-black">
<div className="container mx-auto px-6 lg:px-8"> <div className="container mx-auto px-6 lg:px-8">
@@ -1204,7 +1207,7 @@ const AIIntegrationInlineCTA = () => {
<ShimmerButton <ShimmerButton
className="text-xl px-10 py-5 rounded-2xl shadow-lg hover:shadow-xl" 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"> <div className="inline-flex items-center gap-3">
<Brain className="w-6 h-6 flex-shrink-0" /> <Brain className="w-6 h-6 flex-shrink-0" />
@@ -1471,6 +1474,7 @@ const AIIntegrationFAQs = () => {
// Final CTA Section // Final CTA Section
const AIIntegrationFinalCTA = () => { const AIIntegrationFinalCTA = () => {
const navigate = useNavigate();
return ( return (
<section className="py-20 relative overflow-hidden"> <section className="py-20 relative overflow-hidden">
<div className="container mx-auto px-6 lg:px-8 relative z-10"> <div className="container mx-auto px-6 lg:px-8 relative z-10">
@@ -1523,7 +1527,7 @@ const AIIntegrationFinalCTA = () => {
> >
<ShimmerButton <ShimmerButton
className="px-12 py-6 text-xl rounded-2xl shadow-2xl hover:shadow-accent/25" 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"> <div className="inline-flex items-center gap-3">
<Rocket className="w-6 h-6 flex-shrink-0" /> <Rocket className="w-6 h-6 flex-shrink-0" />
@@ -1552,7 +1556,7 @@ const AIIntegrationFinalCTA = () => {
export const AIIntegrationDigitalProducts = () => { export const AIIntegrationDigitalProducts = () => {
return ( return (
<div className="dark min-h-screen"> <div className="dark min-h-screen">
<Navigation /> {/* <Navigation /> */}
{/* Hero Section */} {/* Hero Section */}
<section className="bg-black"> <section className="bg-black">
@@ -1576,7 +1580,7 @@ export const AIIntegrationDigitalProducts = () => {
{/* Tech Stack */} {/* Tech Stack */}
<section className="bg-card"> <section className="bg-card">
<AIIntegrationTechStack /> <AIStrategyTargetAudience />
</section> </section>
{/* Case Studies */} {/* Case Studies */}
@@ -1605,8 +1609,8 @@ export const AIIntegrationDigitalProducts = () => {
</section> </section>
{/* Footer */} {/* Footer */}
<section className="bg-card"> <section className="bg-background">
<Footer /> {/* <Footer /> */}
</section> </section>
</div> </div>
); );

18
pages/AIModelDeploymentMLOps.tsx
View File

@@ -43,11 +43,13 @@ import { Badge } from "../components/ui/badge";
import { Button } from "../components/ui/button"; import { Button } from "../components/ui/button";
import { Card, CardContent } from "../components/ui/card"; import { Card, CardContent } from "../components/ui/card";
import { ShimmerButton } from "../components/ui/shimmer-button"; import { ShimmerButton } from "../components/ui/shimmer-button";
import { navigateTo } from "@/App"; import { useNavigate } from "react-router-dom";
import { Helmet } from "react-helmet-async"; import { Helmet } from "react-helmet-async";
import { AIStrategyTargetAudience } from "./AIStrategyConsulting";
// AI Model Deployment & MLOps Hero Section // AI Model Deployment & MLOps Hero Section
const MLOpsHeroWithCTA = () => { const MLOpsHeroWithCTA = () => {
const navigate = useNavigate();
return ( return (
<section className="relative py-20 overflow-hidden bg-black"> <section className="relative py-20 overflow-hidden bg-black">
<Helmet> <Helmet>
@@ -136,7 +138,7 @@ const MLOpsHeroWithCTA = () => {
> >
<ShimmerButton <ShimmerButton
className="text-lg px-8 py-4" 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"> <div className="inline-flex items-center gap-2">
<Rocket className="w-5 h-5 flex-shrink-0" /> <Rocket className="w-5 h-5 flex-shrink-0" />
@@ -1130,6 +1132,7 @@ const MLOpsCaseStudies = () => {
// Mid-Page CTA // Mid-Page CTA
const MLOpsInlineCTA = () => { const MLOpsInlineCTA = () => {
const navigate = useNavigate();
return ( return (
<section className="py-20 bg-black"> <section className="py-20 bg-black">
<div className="container mx-auto px-6 lg:px-8"> <div className="container mx-auto px-6 lg:px-8">
@@ -1168,7 +1171,7 @@ const MLOpsInlineCTA = () => {
<ShimmerButton <ShimmerButton
className="text-xl px-10 py-5 rounded-2xl shadow-lg hover:shadow-xl" 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"> <div className="inline-flex items-center gap-3">
<MessageSquare className="w-6 h-6 flex-shrink-0" /> <MessageSquare className="w-6 h-6 flex-shrink-0" />
@@ -1435,6 +1438,7 @@ const MLOpsFAQs = () => {
// Final CTA Section // Final CTA Section
const MLOpsFinalCTA = () => { const MLOpsFinalCTA = () => {
const navigate = useNavigate();
return ( return (
<section className="py-20 relative overflow-hidden"> <section className="py-20 relative overflow-hidden">
<div className="container mx-auto px-6 lg:px-8 relative z-10"> <div className="container mx-auto px-6 lg:px-8 relative z-10">
@@ -1488,7 +1492,7 @@ const MLOpsFinalCTA = () => {
> >
<ShimmerButton <ShimmerButton
className="px-12 py-6 text-xl rounded-2xl shadow-2xl hover:shadow-accent/25" 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"> <div className="inline-flex items-center gap-3">
<Rocket className="w-6 h-6 flex-shrink-0" /> <Rocket className="w-6 h-6 flex-shrink-0" />
@@ -1518,7 +1522,7 @@ const MLOpsFinalCTA = () => {
export const AIModelDeploymentMLOps = () => { export const AIModelDeploymentMLOps = () => {
return ( return (
<div className="dark min-h-screen"> <div className="dark min-h-screen">
<Navigation /> {/* <Navigation /> */}
{/* Hero Section */} {/* Hero Section */}
<section className="bg-black"> <section className="bg-black">
@@ -1542,7 +1546,7 @@ export const AIModelDeploymentMLOps = () => {
{/* Tech Stack */} {/* Tech Stack */}
<section className="bg-card"> <section className="bg-card">
<MLOpsTechStack /> <AIStrategyTargetAudience />
</section> </section>
{/* Case Studies */} {/* Case Studies */}
@@ -1572,7 +1576,7 @@ export const AIModelDeploymentMLOps = () => {
{/* Footer */} {/* Footer */}
<section className="bg-card"> <section className="bg-card">
<Footer /> {/* <Footer /> */}
</section> </section>
</div> </div>
); );

19
pages/AIStrategyConsulting.tsx
View File

@@ -32,11 +32,12 @@ import { Badge } from "../components/ui/badge";
import { Button } from "../components/ui/button"; import { Button } from "../components/ui/button";
import { Card, CardContent } from "../components/ui/card"; import { Card, CardContent } from "../components/ui/card";
import { ShimmerButton } from "../components/ui/shimmer-button"; import { ShimmerButton } from "../components/ui/shimmer-button";
import { navigateTo } from "@/App"; import { useNavigate } from "react-router-dom";
import { Helmet } from "react-helmet-async"; import { Helmet } from "react-helmet-async";
// AI Strategy & Consulting Hero Section // AI Strategy & Consulting Hero Section
const AIStrategyHeroWithCTA = () => { const AIStrategyHeroWithCTA = () => {
const navigate = useNavigate();
return ( return (
<section className="relative py-20 overflow-hidden bg-black"> <section className="relative py-20 overflow-hidden bg-black">
<Helmet> <Helmet>
@@ -122,7 +123,7 @@ const AIStrategyHeroWithCTA = () => {
className="flex flex-col sm:flex-row gap-4" className="flex flex-col sm:flex-row gap-4"
> >
<ShimmerButton className="text-lg px-8 py-4" <ShimmerButton className="text-lg px-8 py-4"
onClick={() => navigateTo("/start-a-project")} onClick={() => navigate("/start-a-project")}
> >
<div className="inline-flex items-center gap-2"> <div className="inline-flex items-center gap-2">
<Brain className="w-5 h-5 flex-shrink-0" /> <Brain className="w-5 h-5 flex-shrink-0" />
@@ -782,7 +783,7 @@ const AIStrategyOfferings = () => {
}; };
// Target Audience // Target Audience
const AIStrategyTargetAudience = () => { export const AIStrategyTargetAudience = () => {
const audiences = [ const audiences = [
{ title: "CTOs", icon: Code, description: "Technical leaders driving AI transformation initiatives" }, { title: "CTOs", icon: Code, description: "Technical leaders driving AI transformation initiatives" },
{ title: "Product Leaders", icon: Rocket, description: "Product managers integrating AI into product strategy" }, { title: "Product Leaders", icon: Rocket, description: "Product managers integrating AI into product strategy" },
@@ -968,6 +969,7 @@ const AIStrategyCaseStudies = () => {
// Mid-Page CTA // Mid-Page CTA
const AIStrategyInlineCTA = () => { const AIStrategyInlineCTA = () => {
const navigate = useNavigate();
return ( return (
<section className="py-20 bg-black"> <section className="py-20 bg-black">
<div className="container mx-auto px-6 lg:px-8"> <div className="container mx-auto px-6 lg:px-8">
@@ -1002,7 +1004,7 @@ const AIStrategyInlineCTA = () => {
</p> </p>
<ShimmerButton className="text-xl px-10 py-5 rounded-2xl shadow-lg hover:shadow-xl" <ShimmerButton className="text-xl px-10 py-5 rounded-2xl shadow-lg hover:shadow-xl"
onClick={() => navigateTo("/start-a-project")} onClick={() => navigate("/start-a-project")}
> >
<div className="inline-flex items-center gap-3"> <div className="inline-flex items-center gap-3">
<MessageSquare className="w-6 h-6 flex-shrink-0" /> <MessageSquare className="w-6 h-6 flex-shrink-0" />
@@ -1220,6 +1222,7 @@ const AIStrategyFAQs = () => {
// Final CTA Section // Final CTA Section
const AIStrategyFinalCTA = () => { const AIStrategyFinalCTA = () => {
const navigate = useNavigate();
return ( return (
<section className="py-20 relative overflow-hidden"> <section className="py-20 relative overflow-hidden">
<div className="container mx-auto px-6 lg:px-8 relative z-10"> <div className="container mx-auto px-6 lg:px-8 relative z-10">
@@ -1268,7 +1271,7 @@ const AIStrategyFinalCTA = () => {
className="space-y-8" className="space-y-8"
> >
<ShimmerButton className="px-12 py-6 text-xl rounded-2xl shadow-2xl hover:shadow-accent/25" <ShimmerButton className="px-12 py-6 text-xl rounded-2xl shadow-2xl hover:shadow-accent/25"
onClick={() => navigateTo("/start-a-project")} onClick={() => navigate("/start-a-project")}
> >
<div className="inline-flex items-center gap-3"> <div className="inline-flex items-center gap-3">
<Rocket className="w-6 h-6 flex-shrink-0" /> <Rocket className="w-6 h-6 flex-shrink-0" />
@@ -1297,7 +1300,7 @@ const AIStrategyFinalCTA = () => {
export const AIStrategyConsulting = () => { export const AIStrategyConsulting = () => {
return ( return (
<div className="dark min-h-screen"> <div className="dark min-h-screen">
<Navigation /> {/* <Navigation /> */}
{/* Hero Section */} {/* Hero Section */}
<section className="bg-black"> <section className="bg-black">
@@ -1350,8 +1353,8 @@ export const AIStrategyConsulting = () => {
</section> </section>
{/* Footer */} {/* Footer */}
<section className="bg-card"> <section className="bg-background">
<Footer /> {/* <Footer /> */}
</section> </section>
</div> </div>
); );

38
pages/APIBackendDevelopment.tsx
View File

@@ -45,11 +45,12 @@ import { Button } from "../components/ui/button";
import { Card, CardContent } from "../components/ui/card"; import { Card, CardContent } from "../components/ui/card";
import { ShimmerButton } from "../components/ui/shimmer-button"; import { ShimmerButton } from "../components/ui/shimmer-button";
import iotDeviceImage from "../src/images/iot-device.webp"; import iotDeviceImage from "../src/images/iot-device.webp";
import { navigateTo } from "@/App"; import { useNavigate } from "react-router-dom";
import { Helmet } from "react-helmet-async"; import { Helmet } from "react-helmet-async";
// API & Backend Development Hero Section // API & Backend Development Hero Section
const APIHeroWithCTA = () => { const APIHeroWithCTA = () => {
const navigate = useNavigate();
return ( return (
<section className="relative py-20 overflow-hidden bg-black"> <section className="relative py-20 overflow-hidden bg-black">
<Helmet> <Helmet>
@@ -139,7 +140,7 @@ const APIHeroWithCTA = () => {
> >
<ShimmerButton <ShimmerButton
className="text-lg px-8 py-4" 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"> <div className="inline-flex items-center gap-2">
<Server className="w-5 h-5 flex-shrink-0" /> <Server className="w-5 h-5 flex-shrink-0" />
@@ -1397,6 +1398,7 @@ const APICaseStudies = () => {
// Mid-Page CTA // Mid-Page CTA
const APIInlineCTA = () => { const APIInlineCTA = () => {
const navigate = useNavigate();
return ( return (
<section className="py-20"> <section className="py-20">
<div className="container mx-auto px-6 lg:px-8"> <div className="container mx-auto px-6 lg:px-8">
@@ -1435,7 +1437,7 @@ const APIInlineCTA = () => {
<ShimmerButton <ShimmerButton
className="text-xl px-10 py-5 rounded-2xl shadow-lg hover:shadow-xl" 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"> <div className="inline-flex items-center gap-3">
<MessageSquare className="w-6 h-6 flex-shrink-0" /> <MessageSquare className="w-6 h-6 flex-shrink-0" />
@@ -1451,6 +1453,7 @@ const APIInlineCTA = () => {
// Hire Backend Developers // Hire Backend Developers
const HireBackendDevelopers = () => { const HireBackendDevelopers = () => {
const navigate = useNavigate();
const developerTypes = [ const developerTypes = [
{ {
title: "Node.js Developers", title: "Node.js Developers",
@@ -1581,7 +1584,7 @@ const HireBackendDevelopers = () => {
> >
<div className="flex flex-col sm:flex-row gap-4 justify-center"> <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={() => navigateTo("/hire-talent/api-backend-developers")} onClick={() => navigate("/hire-talent/api-backend-developers")}
> >
<div className="inline-flex items-center gap-2"> <div className="inline-flex items-center gap-2">
<Users className="w-5 h-5 flex-shrink-0" /> <Users className="w-5 h-5 flex-shrink-0" />
@@ -1678,6 +1681,7 @@ const APIFAQs = () => {
// Final CTA Section // Final CTA Section
const APIFinalCTA = () => { const APIFinalCTA = () => {
const navigate = useNavigate();
return ( return (
<section className="py-20 relative overflow-hidden"> <section className="py-20 relative overflow-hidden">
<div className="container mx-auto px-6 lg:px-8 relative z-10"> <div className="container mx-auto px-6 lg:px-8 relative z-10">
@@ -1730,7 +1734,7 @@ const APIFinalCTA = () => {
> >
<ShimmerButton <ShimmerButton
className="px-12 py-6 text-xl rounded-2xl shadow-2xl hover:shadow-accent/25" 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"> <div className="inline-flex items-center gap-3">
<Rocket className="w-6 h-6 flex-shrink-0" /> <Rocket className="w-6 h-6 flex-shrink-0" />
@@ -1760,7 +1764,7 @@ const APIFinalCTA = () => {
export const APIBackendDevelopment = () => { export const APIBackendDevelopment = () => {
return ( return (
<div className="dark min-h-screen"> <div className="dark min-h-screen">
<Navigation /> {/* <Navigation /> */}
{/* Hero Section */} {/* Hero Section */}
<section className="bg-black"> <section className="bg-black">
@@ -1772,6 +1776,11 @@ export const APIBackendDevelopment = () => {
<APIBenefits /> <APIBenefits />
</section> </section>
{/* Case Studies */}
<section className="bg-background">
<APICaseStudies />
</section>
{/* Development Process */} {/* Development Process */}
<section className="bg-card"> <section className="bg-card">
<APIProcess /> <APIProcess />
@@ -1787,15 +1796,10 @@ export const APIBackendDevelopment = () => {
<APITechStack /> <APITechStack />
</section> </section>
{/* Case Studies */}
<section className="bg-background">
<APICaseStudies />
</section>
{/* Mid-Page CTA */} {/* Mid-Page CTA */}
<section className="bg-card"> {/* <section className="bg-card">
<APIInlineCTA /> <APIInlineCTA />
</section> </section> */}
{/* Hire Developers */} {/* Hire Developers */}
<section className="bg-background"> <section className="bg-background">
@@ -1803,9 +1807,9 @@ export const APIBackendDevelopment = () => {
</section> </section>
{/* FAQs */} {/* FAQs */}
<section className="bg-card"> {/* <section className="bg-card">
<APIFAQs /> <APIFAQs />
</section> </section> */}
{/* Final CTA */} {/* Final CTA */}
<section className="bg-background"> <section className="bg-background">
@@ -1813,8 +1817,8 @@ export const APIBackendDevelopment = () => {
</section> </section>
{/* Footer */} {/* Footer */}
<section className="bg-card"> <section className="bg-background">
<Footer /> {/* <Footer /> */}
</section> </section>
</div> </div>
); );

21
pages/AboutWDI.tsx
View File

@@ -9,7 +9,6 @@ import { ShimmerButton } from "../components/ui/shimmer-button";
import { Badge } from "../components/ui/badge"; import { Badge } from "../components/ui/badge";
import { Card, CardContent } from "../components/ui/card"; import { Card, CardContent } from "../components/ui/card";
import { GridPattern } from "../components/GridPattern"; import { GridPattern } from "../components/GridPattern";
import { navigateTo } from "../App";
import { import {
ArrowRight, Users, Globe, Award, Target, Heart, Lightbulb, ArrowRight, Users, Globe, Award, Target, Heart, Lightbulb,
Rocket, TrendingUp, CheckCircle, Star, Coffee, Monitor, Rocket, TrendingUp, CheckCircle, Star, Coffee, Monitor,
@@ -18,9 +17,11 @@ import {
} from "lucide-react"; } from "lucide-react";
import { Helmet } from "react-helmet-async"; import { Helmet } from "react-helmet-async";
import { CarouselTestimonials } from "@/components/CarouselTestimonials"; import { CarouselTestimonials } from "@/components/CarouselTestimonials";
import { useNavigate } from "react-router-dom";
// Enhanced Hero Section // Enhanced Hero Section
const HeroWithCTA = () => { const HeroWithCTA = () => {
const navigate = useNavigate();
return ( return (
<section className="relative py-20 overflow-hidden bg-black"> <section className="relative py-20 overflow-hidden bg-black">
<Helmet> <Helmet>
@@ -106,7 +107,7 @@ const HeroWithCTA = () => {
transition={{ duration: 0.8, delay: 0.3 }} transition={{ duration: 0.8, delay: 0.3 }}
className="flex flex-col sm:flex-row gap-4" 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"> <div className="inline-flex items-center gap-2">
<Briefcase className="w-4 h-4 flex-shrink-0" /> <Briefcase className="w-4 h-4 flex-shrink-0" />
<span>Explore Our Services</span> <span>Explore Our Services</span>
@@ -116,7 +117,7 @@ const HeroWithCTA = () => {
variant="secondary" variant="secondary"
size="lg" size="lg"
className="text-lg px-8 py-4 h-auto" className="text-lg px-8 py-4 h-auto"
onClick={() => navigateTo('/case-studies')} onClick={() => navigate('/case-studies')}
> >
<Eye className="w-4 h-4 flex-shrink-0" /> <Eye className="w-4 h-4 flex-shrink-0" />
<span>View Our Portfolio</span> <span>View Our Portfolio</span>
@@ -298,6 +299,7 @@ const ImpactNumbersSection = () => {
// Learn More About WDI Section // Learn More About WDI Section
const LearnMoreSection = () => { const LearnMoreSection = () => {
const navigate = useNavigate();
const sections = [ const sections = [
{ {
title: "Our History", title: "Our History",
@@ -373,7 +375,7 @@ const LearnMoreSection = () => {
viewport={{ once: true }} viewport={{ once: true }}
whileHover={{ y: -5 }} whileHover={{ y: -5 }}
className="group cursor-pointer" 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="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="flex flex-col items-start space-y-6">
@@ -541,6 +543,7 @@ const MissionSection = () => {
// Updated CTA Section // Updated CTA Section
const InlineCTA = () => { const InlineCTA = () => {
const navigate = useNavigate();
return ( return (
<section className="py-20 bg-black"> <section className="py-20 bg-black">
<div className="container mx-auto px-6 lg:px-8"> <div className="container mx-auto px-6 lg:px-8">
@@ -584,8 +587,8 @@ const InlineCTA = () => {
<div className="flex flex-col sm:flex-row items-start gap-4"> <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" 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={() => navigateTo("/start-a-project")} onClick={() => navigate("/start-a-project")}
> >
<div className="inline-flex items-center gap-3"> <div className="inline-flex items-center gap-3">
<Mail className="w-6 h-6 flex-shrink-0" /> <Mail className="w-6 h-6 flex-shrink-0" />
@@ -597,7 +600,7 @@ const InlineCTA = () => {
variant="secondary" variant="secondary"
size="lg" size="lg"
className="text-xl px-10 py-5 rounded-2xl h-[56px]" 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" /> <Briefcase className="w-6 h-6 flex-shrink-0" />
<span>Explore Our Services</span> <span>Explore Our Services</span>
@@ -637,7 +640,7 @@ const aboutWDIFAQs = [
export const AboutWDI = () => { export const AboutWDI = () => {
return ( return (
<div className="dark min-h-screen bg-background"> <div className="dark min-h-screen bg-background">
<Navigation /> {/* {/* <Navigation /> */}
<HeroWithCTA /> <HeroWithCTA />
<WhyChooseWDISection /> <WhyChooseWDISection />
<ImpactNumbersSection /> <ImpactNumbersSection />
@@ -651,7 +654,7 @@ export const AboutWDI = () => {
subtitle="Get answers to common questions about our company and mission." subtitle="Get answers to common questions about our company and mission."
faqs={aboutWDIFAQs} faqs={aboutWDIFAQs}
/> />
<Footer /> {/* <Footer /> */}
</div> </div>
); );
}; };

9
pages/AboutWDIMain.tsx
View File

@@ -5,9 +5,10 @@ import { Button } from "../components/ui/button";
import { Badge } from "../components/ui/badge"; import { Badge } from "../components/ui/badge";
import { Card, CardContent } from "../components/ui/card"; import { Card, CardContent } from "../components/ui/card";
import { ArrowRight, Lightbulb, Users2, Target, TrendingUp, Clock, Award, Briefcase, Heart, Newspaper, Star } from "lucide-react"; 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 = () => { export const AboutWDIMain = () => {
const navigate = useNavigate();
const keyHighlights = [ const keyHighlights = [
{ {
icon: Lightbulb, icon: Lightbulb,
@@ -86,7 +87,7 @@ export const AboutWDIMain = () => {
return ( return (
<div className="dark min-h-screen bg-background"> <div className="dark min-h-screen bg-background">
<Navigation /> {/* <Navigation /> */}
{/* Hero Section */} {/* Hero Section */}
<section className="relative pt-24 pb-16 overflow-hidden"> <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"> <div className="grid md:grid-cols-2 lg:grid-cols-3 gap-8">
{subPages.map((page, index) => ( {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"> <CardContent className="p-6">
<page.icon className="w-8 h-8 text-[#E5195E] mb-4 group-hover:scale-110 transition-transform duration-300" /> <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"> <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> </div>
</section> </section>
<Footer /> {/* <Footer /> */}
</div> </div>
); );
}; };

38
pages/AdminPanelsDashboards.tsx
View File

@@ -48,11 +48,12 @@ import { Button } from "../components/ui/button";
import { Card, CardContent } from "../components/ui/card"; import { Card, CardContent } from "../components/ui/card";
import { ShimmerButton } from "../components/ui/shimmer-button"; import { ShimmerButton } from "../components/ui/shimmer-button";
import healthcareImage from "../src/images/healthcare.webp"; import healthcareImage from "../src/images/healthcare.webp";
import { navigateTo } from "@/App";
import { Helmet } from "react-helmet-async"; import { Helmet } from "react-helmet-async";
import { useNavigate } from "react-router-dom";
// Admin Panels & Dashboards Hero Section // Admin Panels & Dashboards Hero Section
const AdminHeroWithCTA = () => { const AdminHeroWithCTA = () => {
const navigate = useNavigate();
return ( return (
<section className="relative py-20 overflow-hidden bg-black"> <section className="relative py-20 overflow-hidden bg-black">
<Helmet> <Helmet>
@@ -143,7 +144,7 @@ const AdminHeroWithCTA = () => {
> >
<ShimmerButton <ShimmerButton
className="text-lg px-8 py-4" 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"> <div className="inline-flex items-center gap-2">
<Monitor className="w-5 h-5 flex-shrink-0" /> <Monitor className="w-5 h-5 flex-shrink-0" />
@@ -1219,6 +1220,7 @@ const AdminCaseStudies = () => {
// Mid-Page CTA // Mid-Page CTA
const AdminInlineCTA = () => { const AdminInlineCTA = () => {
const navigate = useNavigate();
return ( return (
<section className="py-20"> <section className="py-20">
<div className="container mx-auto px-6 lg:px-8"> <div className="container mx-auto px-6 lg:px-8">
@@ -1257,7 +1259,7 @@ const AdminInlineCTA = () => {
<ShimmerButton <ShimmerButton
className="text-xl px-10 py-5 rounded-2xl shadow-lg hover:shadow-xl" 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"> <div className="inline-flex items-center gap-3">
<MessageSquare className="w-6 h-6 flex-shrink-0" /> <MessageSquare className="w-6 h-6 flex-shrink-0" />
@@ -1273,6 +1275,7 @@ const AdminInlineCTA = () => {
// Hire UI/UX Designers // Hire UI/UX Designers
const HireDevelopers = () => { const HireDevelopers = () => {
const navigate = useNavigate();
const developerTypes = [ const developerTypes = [
{ {
title: "Frontend Developers (React, Angular, Vue)", title: "Frontend Developers (React, Angular, Vue)",
@@ -1373,7 +1376,7 @@ const HireDevelopers = () => {
> >
<div className="flex flex-col sm:flex-row gap-4 justify-center"> <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={() => navigateTo("/hire-talent/admin-panel-developers")} onClick={() => navigate("/hire-talent/admin-panel-developers")}
> >
<div className="inline-flex items-center gap-2"> <div className="inline-flex items-center gap-2">
<Code className="w-5 h-5 flex-shrink-0" /> <Code className="w-5 h-5 flex-shrink-0" />
@@ -1471,6 +1474,7 @@ const AdminFAQs = () => {
// Final CTA Section // Final CTA Section
const AdminFinalCTA = () => { const AdminFinalCTA = () => {
const navigate = useNavigate();
return ( return (
<section className="py-20 relative overflow-hidden"> <section className="py-20 relative overflow-hidden">
<div className="container mx-auto px-6 lg:px-8 relative z-10"> <div className="container mx-auto px-6 lg:px-8 relative z-10">
@@ -1523,7 +1527,7 @@ const AdminFinalCTA = () => {
> >
<ShimmerButton <ShimmerButton
className="px-12 py-6 text-xl rounded-2xl shadow-2xl hover:shadow-accent/25" 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"> <div className="inline-flex items-center gap-3">
<TrendingUp className="w-6 h-6 flex-shrink-0" /> <TrendingUp className="w-6 h-6 flex-shrink-0" />
@@ -1552,7 +1556,7 @@ const AdminFinalCTA = () => {
export const AdminPanelsDashboards = () => { export const AdminPanelsDashboards = () => {
return ( return (
<div className="dark min-h-screen"> <div className="dark min-h-screen">
<Navigation /> {/* <Navigation /> */}
{/* Hero Section */} {/* Hero Section */}
<section className="bg-black"> <section className="bg-black">
@@ -1564,6 +1568,11 @@ export const AdminPanelsDashboards = () => {
<AdminBenefits /> <AdminBenefits />
</section> </section>
{/* Case Studies */}
<section className="bg-background">
<AdminCaseStudies />
</section>
{/* Development Process */} {/* Development Process */}
<section className="bg-card"> <section className="bg-card">
<AdminProcess /> <AdminProcess />
@@ -1579,15 +1588,10 @@ export const AdminPanelsDashboards = () => {
<AdminTechStack /> <AdminTechStack />
</section> </section>
{/* Case Studies */}
<section className="bg-background">
<AdminCaseStudies />
</section>
{/* Mid-Page CTA */} {/* Mid-Page CTA */}
<section className="bg-card"> {/* <section className="bg-card">
<AdminInlineCTA /> <AdminInlineCTA />
</section> </section> */}
{/* Hire Designers */} {/* Hire Designers */}
<section className="bg-background"> <section className="bg-background">
@@ -1595,9 +1599,9 @@ export const AdminPanelsDashboards = () => {
</section> </section>
{/* FAQs */} {/* FAQs */}
<section className="bg-card"> {/* <section className="bg-card">
<AdminFAQs /> <AdminFAQs />
</section> </section> */}
{/* Final CTA */} {/* Final CTA */}
<section className="bg-background"> <section className="bg-background">
@@ -1605,8 +1609,8 @@ export const AdminPanelsDashboards = () => {
</section> </section>
{/* Footer */} {/* Footer */}
<section className="bg-card"> <section className="bg-background">
<Footer /> {/* <Footer /> */}
</section> </section>
</div> </div>
); );

4
pages/AgriTechPlatforms.tsx
View File

@@ -402,7 +402,7 @@ const agriTechFAQs = [
export const AgriTechPlatforms = () => { export const AgriTechPlatforms = () => {
return ( return (
<div className="min-h-screen bg-[#0E0E0E]"> <div className="min-h-screen bg-[#0E0E0E]">
<Navigation /> {/* <Navigation /> */}
<HeroBanner <HeroBanner
category="Industrial & Emerging Tech" category="Industrial & Emerging Tech"
@@ -443,7 +443,7 @@ export const AgriTechPlatforms = () => {
<SplitCallToAction /> <SplitCallToAction />
</div> </div>
<Footer /> {/* <Footer /> */}
</div> </div>
); );
}; };

15
pages/AmbleProject.tsx
View File

@@ -5,13 +5,14 @@ import { Button } from "../components/ui/button";
import { Badge } from "../components/ui/badge"; import { Badge } from "../components/ui/badge";
import { Card, CardContent } from "../components/ui/card"; import { Card, CardContent } from "../components/ui/card";
import { ArrowRight, Calendar, Users, Smartphone, Globe, Check, Star, TrendingUp, MapPin, Shield, Navigation as NavigationIcon, Zap, Heart, Target, AlertCircle, Clock, UserCheck } from "lucide-react"; import { ArrowRight, Calendar, Users, Smartphone, Globe, Check, Star, TrendingUp, MapPin, Shield, Navigation as NavigationIcon, Zap, Heart, Target, AlertCircle, Clock, UserCheck } from "lucide-react";
import { navigateTo } from "../App";
import { ImageWithFallback } from "../components/figma/ImageWithFallback"; import { ImageWithFallback } from "../components/figma/ImageWithFallback";
import { useNavigate } from "react-router-dom";
export const AmbleProject = () => { export const AmbleProject = () => {
const navigate = useNavigate();
return ( return (
<div className="dark min-h-screen bg-background"> <div className="dark min-h-screen bg-background">
<Navigation /> {/* <Navigation /> */}
{/* Hero Section */} {/* Hero Section */}
<section className="pt-24 pb-16 bg-background relative overflow-hidden"> <section className="pt-24 pb-16 bg-background relative overflow-hidden">
@@ -88,7 +89,7 @@ export const AmbleProject = () => {
<Button <Button
size="lg" size="lg"
className="bg-[#E5195E] hover:bg-[#E5195E]/90 text-white font-manrope" className="bg-[#E5195E] hover:bg-[#E5195E]/90 text-white font-manrope"
onClick={() => navigateTo('/start-a-project')} onClick={() => navigate('/start-a-project')}
> >
Build Your Navigation App Build Your Navigation App
<ArrowRight className="w-5 h-5 ml-2" /> <ArrowRight className="w-5 h-5 ml-2" />
@@ -97,7 +98,7 @@ export const AmbleProject = () => {
size="lg" size="lg"
variant="outline" variant="outline"
className="border-white/20 text-white hover:bg-white/10 font-manrope" className="border-white/20 text-white hover:bg-white/10 font-manrope"
onClick={() => navigateTo('/case-studies')} onClick={() => navigate('/case-studies')}
> >
View More Cases View More Cases
</Button> </Button>
@@ -604,7 +605,7 @@ export const AmbleProject = () => {
<Button <Button
size="lg" size="lg"
className="bg-[#E5195E] hover:bg-[#E5195E]/90 text-white px-8 py-3 font-manrope" className="bg-[#E5195E] hover:bg-[#E5195E]/90 text-white px-8 py-3 font-manrope"
onClick={() => navigateTo('/start-a-project')} onClick={() => navigate('/start-a-project')}
> >
Start Your Project Start Your Project
<ArrowRight className="w-5 h-5 ml-2" /> <ArrowRight className="w-5 h-5 ml-2" />
@@ -613,7 +614,7 @@ export const AmbleProject = () => {
size="lg" size="lg"
variant="outline" variant="outline"
className="border-white/20 text-white hover:bg-white/10 px-8 py-3 font-manrope" className="border-white/20 text-white hover:bg-white/10 px-8 py-3 font-manrope"
onClick={() => navigateTo('/case-studies')} onClick={() => navigate('/case-studies')}
> >
View More Cases View More Cases
</Button> </Button>
@@ -622,7 +623,7 @@ export const AmbleProject = () => {
</div> </div>
</section> </section>
<Footer /> {/* <Footer /> */}
</div> </div>
); );
}; };

15
pages/AmozProject.tsx
View File

@@ -5,13 +5,14 @@ import { Button } from "../components/ui/button";
import { Badge } from "../components/ui/badge"; import { Badge } from "../components/ui/badge";
import { Card, CardContent } from "../components/ui/card"; 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 { ArrowRight, Calendar, Users, Smartphone, Globe, Check, Star, TrendingUp, ShoppingBag, Brain, Zap, MessageCircle, Target, AlertCircle, Clock, DollarSign, Play, Shield, CreditCard } from "lucide-react";
import { navigateTo } from "../App";
import { ImageWithFallback } from "../components/figma/ImageWithFallback"; import { ImageWithFallback } from "../components/figma/ImageWithFallback";
import { useNavigate } from "react-router-dom";
export const AmozProject = () => { export const AmozProject = () => {
const navigate = useNavigate();
return ( return (
<div className="dark min-h-screen bg-background"> <div className="dark min-h-screen bg-background">
<Navigation /> {/* <Navigation /> */}
{/* Hero Section */} {/* Hero Section */}
<section className="pt-24 pb-16 bg-background relative overflow-hidden"> <section className="pt-24 pb-16 bg-background relative overflow-hidden">
@@ -88,7 +89,7 @@ export const AmozProject = () => {
<Button <Button
size="lg" size="lg"
className="bg-[#E5195E] hover:bg-[#E5195E]/90 text-white font-manrope" className="bg-[#E5195E] hover:bg-[#E5195E]/90 text-white font-manrope"
onClick={() => navigateTo('/start-a-project')} onClick={() => navigate('/start-a-project')}
> >
Build Your AI Commerce Platform Build Your AI Commerce Platform
<ArrowRight className="w-5 h-5 ml-2" /> <ArrowRight className="w-5 h-5 ml-2" />
@@ -97,7 +98,7 @@ export const AmozProject = () => {
size="lg" size="lg"
variant="outline" variant="outline"
className="border-white/20 text-white hover:bg-white/10 font-manrope" className="border-white/20 text-white hover:bg-white/10 font-manrope"
onClick={() => navigateTo('/case-studies')} onClick={() => navigate('/case-studies')}
> >
View More Cases View More Cases
</Button> </Button>
@@ -610,7 +611,7 @@ export const AmozProject = () => {
<Button <Button
size="lg" size="lg"
className="bg-[#E5195E] hover:bg-[#E5195E]/90 text-white px-8 py-3 font-manrope" className="bg-[#E5195E] hover:bg-[#E5195E]/90 text-white px-8 py-3 font-manrope"
onClick={() => navigateTo('/start-a-project')} onClick={() => navigate('/start-a-project')}
> >
Start Your Project Start Your Project
<ArrowRight className="w-5 h-5 ml-2" /> <ArrowRight className="w-5 h-5 ml-2" />
@@ -619,7 +620,7 @@ export const AmozProject = () => {
size="lg" size="lg"
variant="outline" variant="outline"
className="border-white/20 text-white hover:bg-white/10 px-8 py-3 font-manrope" className="border-white/20 text-white hover:bg-white/10 px-8 py-3 font-manrope"
onClick={() => navigateTo('/case-studies')} onClick={() => navigate('/case-studies')}
> >
View More Cases View More Cases
</Button> </Button>
@@ -628,7 +629,7 @@ export const AmozProject = () => {
</div> </div>
</section> </section>
<Footer /> {/* <Footer /> */}
</div> </div>
); );
}; };

41
pages/AndroidAppDevelopment.tsx
View File

@@ -39,7 +39,7 @@ import { Button } from "../components/ui/button";
import { Card, CardContent } from "../components/ui/card"; import { Card, CardContent } from "../components/ui/card";
import { ShimmerButton } from "../components/ui/shimmer-button"; import { ShimmerButton } from "../components/ui/shimmer-button";
import androidVectorImage from "../src/images/android-vector.png"; 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 { Helmet } from "react-helmet-async";
import ranoutofImage from "../src/images/ranoutof.webp" import ranoutofImage from "../src/images/ranoutof.webp"
import tradersCircuitImage from "../src/images/traders-circuit.webp"; import tradersCircuitImage from "../src/images/traders-circuit.webp";
@@ -49,6 +49,7 @@ import awsLogoImage from "../src/images/aws-logo.png";
// Android Hero Section with Android device mockups and Android vector // Android Hero Section with Android device mockups and Android vector
const AndroidHeroWithCTA = () => { const AndroidHeroWithCTA = () => {
const navigate = useNavigate();
return ( return (
<section className="relative py-20 overflow-hidden bg-black"> <section className="relative py-20 overflow-hidden bg-black">
<Helmet> <Helmet>
@@ -169,7 +170,7 @@ const AndroidHeroWithCTA = () => {
> >
<ShimmerButton <ShimmerButton
className="text-lg px-8 py-4" 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"> <div className="inline-flex items-center gap-2">
<svg <svg
@@ -782,6 +783,7 @@ const AndroidTechStack = () => {
// Android Case Studies // Android Case Studies
const AndroidCaseStudies = () => { const AndroidCaseStudies = () => {
const navigate = useNavigate();
const caseStudies = [ const caseStudies = [
{ {
title: "Household Management Revolution", title: "Household Management Revolution",
@@ -905,7 +907,7 @@ const AndroidCaseStudies = () => {
variant="ghost" variant="ghost"
size="sm" 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" className="w-full justify-between text-accent hover:text-accent hover:bg-accent/10 group-hover:translate-x-1 transition-all duration-300"
onClick={() => navigateTo(study.buttonLink)} onClick={() => navigate(study.buttonLink)}
> >
<span className="text-sm font-medium"> <span className="text-sm font-medium">
VIEW CASE STUDY VIEW CASE STUDY
@@ -925,6 +927,7 @@ const AndroidCaseStudies = () => {
// Mid-Page CTA // Mid-Page CTA
const AndroidInlineCTA = () => { const AndroidInlineCTA = () => {
const navigate = useNavigate();
return ( return (
<section className="py-20 bg-black"> <section className="py-20 bg-black">
<div className="container mx-auto px-6 lg:px-8"> <div className="container mx-auto px-6 lg:px-8">
@@ -969,7 +972,7 @@ const AndroidInlineCTA = () => {
<ShimmerButton <ShimmerButton
className="text-xl px-10 py-5 rounded-2xl shadow-lg hover:shadow-xl" 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"> <div className="inline-flex items-center gap-3">
<svg <svg
@@ -997,6 +1000,7 @@ const AndroidInlineCTA = () => {
// Hire Android Developers Section // Hire Android Developers Section
const HireAndroidDevelopers = () => { const HireAndroidDevelopers = () => {
const navigate = useNavigate();
const developerTypes = [ const developerTypes = [
{ {
title: "Senior Android Developer", title: "Senior Android Developer",
@@ -1115,7 +1119,7 @@ const HireAndroidDevelopers = () => {
> >
<ShimmerButton <ShimmerButton
className="px-8 py-4" className="px-8 py-4"
onClick={() => navigateTo("/hire-talent/android-app-developers")} onClick={() => navigate("/hire-talent/android-app-developers")}
> >
<div className="inline-flex items-center gap-2"> <div className="inline-flex items-center gap-2">
<UserPlus className="w-5 h-5 flex-shrink-0" /> <UserPlus className="w-5 h-5 flex-shrink-0" />
@@ -1213,6 +1217,7 @@ const AndroidFAQs = () => {
// Final CTA Section // Final CTA Section
const AndroidFinalCTA = () => { const AndroidFinalCTA = () => {
const navigate = useNavigate();
return ( return (
<section className="py-20 relative overflow-hidden"> <section className="py-20 relative overflow-hidden">
<div className="container mx-auto px-6 lg:px-8 relative z-10"> <div className="container mx-auto px-6 lg:px-8 relative z-10">
@@ -1277,7 +1282,7 @@ const AndroidFinalCTA = () => {
> >
<ShimmerButton <ShimmerButton
className="px-12 py-6 text-xl rounded-2xl shadow-2xl hover:shadow-accent/25" 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"> <div className="inline-flex items-center gap-3">
<svg <svg
@@ -1318,7 +1323,7 @@ const AndroidFinalCTA = () => {
export const AndroidAppDevelopment = () => { export const AndroidAppDevelopment = () => {
return ( return (
<div className="dark min-h-screen"> <div className="dark min-h-screen">
<Navigation /> {/* <Navigation /> */}
{/* Hero Section */} {/* Hero Section */}
<section className="bg-black"> <section className="bg-black">
@@ -1330,6 +1335,11 @@ export const AndroidAppDevelopment = () => {
<AndroidKeyBenefits /> <AndroidKeyBenefits />
</section> </section>
{/* Case Studies */}
<section className="bg-background">
<AndroidCaseStudies />
</section>
{/* Development Process */} {/* Development Process */}
<section className="bg-card"> <section className="bg-card">
<AndroidProcessTimeline /> <AndroidProcessTimeline />
@@ -1345,15 +1355,10 @@ export const AndroidAppDevelopment = () => {
<AndroidTechStack /> <AndroidTechStack />
</section> </section>
{/* Case Studies */}
<section className="bg-background">
<AndroidCaseStudies />
</section>
{/* Mid-Page CTA */} {/* Mid-Page CTA */}
<section className="bg-card"> {/* <section className="bg-card">
<AndroidInlineCTA /> <AndroidInlineCTA />
</section> </section> */}
{/* Hire Android Developers */} {/* Hire Android Developers */}
<section className="bg-background"> <section className="bg-background">
@@ -1361,9 +1366,9 @@ export const AndroidAppDevelopment = () => {
</section> </section>
{/* FAQs */} {/* FAQs */}
<section className="bg-card"> {/* <section className="bg-card">
<AndroidFAQs /> <AndroidFAQs />
</section> </section> */}
{/* Final CTA */} {/* Final CTA */}
<section className="bg-background"> <section className="bg-background">
@@ -1371,8 +1376,8 @@ export const AndroidAppDevelopment = () => {
</section> </section>
{/* Footer */} {/* Footer */}
<section className="bg-card"> <section className="bg-background">
<Footer /> {/* <Footer /> */}
</section> </section>
</div> </div>
); );

22
pages/ArticleDetail.tsx
View File

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

23
pages/ArtificialIntelligenceServices.tsx
View File

@@ -15,7 +15,6 @@ import {
UserPlus, UserPlus,
Zap, Zap,
} from "lucide-react"; } from "lucide-react";
import { navigateTo } from "../App";
import { FAQSection } from "../components/FAQSection"; import { FAQSection } from "../components/FAQSection";
import { Footer } from "../components/Footer"; import { Footer } from "../components/Footer";
import { Navigation } from "../components/Navigation"; import { Navigation } from "../components/Navigation";
@@ -25,9 +24,11 @@ import { Button } from "../components/ui/button";
import { Card, CardContent } from "../components/ui/card"; import { Card, CardContent } from "../components/ui/card";
import { ShimmerButton } from "../components/ui/shimmer-button"; import { ShimmerButton } from "../components/ui/shimmer-button";
import { Helmet } from "react-helmet-async"; import { Helmet } from "react-helmet-async";
import { useNavigate } from "react-router-dom";
// Enhanced Hero Section // Enhanced Hero Section
const HeroWithCTA = () => { const HeroWithCTA = () => {
const navigate = useNavigate();
return ( return (
<section className="relative py-20 overflow-hidden bg-black"> <section className="relative py-20 overflow-hidden bg-black">
<Helmet> <Helmet>
@@ -120,8 +121,8 @@ const HeroWithCTA = () => {
> >
<ShimmerButton <ShimmerButton
className="text-lg px-8 py-4" className="text-lg px-8 py-4"
// onClick={() => navigateTo('/contact/schedule-a-discovery-call')} // onClick={() => navigate('/contact/schedule-a-discovery-call')}
onClick={() => navigateTo("/start-a-project")} onClick={() => navigate("/start-a-project")}
> >
<div className="inline-flex items-center gap-2"> <div className="inline-flex items-center gap-2">
<Calendar className="w-4 h-4 flex-shrink-0" /> <Calendar className="w-4 h-4 flex-shrink-0" />
@@ -132,7 +133,7 @@ const HeroWithCTA = () => {
variant="secondary" variant="secondary"
size="lg" size="lg"
className="text-lg px-8 py-4 h-auto" className="text-lg px-8 py-4 h-auto"
onClick={() => navigateTo("/case-studies")} onClick={() => navigate("/case-studies")}
> >
<Eye className="w-4 h-4 flex-shrink-0" /> <Eye className="w-4 h-4 flex-shrink-0" />
<span>View AI Case Studies</span> <span>View AI Case Studies</span>
@@ -405,6 +406,7 @@ const SideBySideContentWithIcons = () => {
// Service Categories Grid // Service Categories Grid
const TabbedServiceDisplay = () => { const TabbedServiceDisplay = () => {
const navigate = useNavigate();
const services = [ const services = [
{ {
title: "AI Strategy & Consulting", title: "AI Strategy & Consulting",
@@ -486,7 +488,7 @@ const TabbedServiceDisplay = () => {
viewport={{ once: true }} viewport={{ once: true }}
whileHover={{ y: -5 }} whileHover={{ y: -5 }}
className="group cursor-pointer" 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="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="flex flex-col items-start space-y-6">
@@ -515,6 +517,7 @@ const TabbedServiceDisplay = () => {
// Updated CTA Section with new design // Updated CTA Section with new design
const InlineCTA = () => { const InlineCTA = () => {
const navigate = useNavigate();
return ( return (
<section className="py-20 bg-black"> <section className="py-20 bg-black">
<div className="container mx-auto px-6 lg:px-8"> <div className="container mx-auto px-6 lg:px-8">
@@ -560,8 +563,8 @@ const InlineCTA = () => {
<div className="flex flex-col items-start gap-4"> <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" 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={() => navigateTo("/start-a-project")} onClick={() => navigate("/start-a-project")}
> >
<div className="inline-flex items-center gap-3"> <div className="inline-flex items-center gap-3">
<Bot className="w-6 h-6 flex-shrink-0" /> <Bot className="w-6 h-6 flex-shrink-0" />
@@ -701,7 +704,7 @@ const HireDevelopersSection = () => {
<div className="p-8 pt-0 mt-auto space-y-3"> <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" 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"> <div className="inline-flex items-center justify-center gap-2">
<UserPlus className="w-4 h-4 flex-shrink-0" /> <UserPlus className="w-4 h-4 flex-shrink-0" />
@@ -752,7 +755,7 @@ const aiServicesFAQs = [
export function ArtificialIntelligenceServices() { export function ArtificialIntelligenceServices() {
return ( return (
<div className="dark min-h-screen bg-background"> <div className="dark min-h-screen bg-background">
<Navigation /> {/* <Navigation /> */}
<HeroWithCTA /> <HeroWithCTA />
<HorizontalTagScroller /> <HorizontalTagScroller />
<SideBySideContentWithIcons /> <SideBySideContentWithIcons />
@@ -765,7 +768,7 @@ export function ArtificialIntelligenceServices() {
subtitle="Get answers to common questions about our artificial intelligence services." subtitle="Get answers to common questions about our artificial intelligence services."
faqs={aiServicesFAQs} faqs={aiServicesFAQs}
/> />
<Footer /> {/* <Footer /> */}
</div> </div>
); );
} }

22
pages/AutomationReshapingBusiness.tsx
View File

@@ -7,8 +7,8 @@ import { Card, CardContent } from "../components/ui/card";
import { Avatar, AvatarFallback, AvatarImage } from "../components/ui/avatar"; import { Avatar, AvatarFallback, AvatarImage } from "../components/ui/avatar";
import { Separator } from "../components/ui/separator"; import { Separator } from "../components/ui/separator";
import { Calendar, Clock, User, ArrowRight, Share2, Linkedin, Twitter, ExternalLink, Tag } from "lucide-react"; import { Calendar, Clock, User, ArrowRight, Share2, Linkedin, Twitter, ExternalLink, Tag } from "lucide-react";
import { navigateTo } from "../App";
import { ImageWithFallback } from "../components/figma/ImageWithFallback"; import { ImageWithFallback } from "../components/figma/ImageWithFallback";
import { useNavigate } from "react-router-dom";
const articleData = { const articleData = {
id: "automation-reshaping-business", id: "automation-reshaping-business",
@@ -305,9 +305,11 @@ export const AutomationReshapingBusiness = () => {
} }
}; };
const navigate = useNavigate();
return ( return (
<div className="dark min-h-screen bg-background"> <div className="dark min-h-screen bg-background">
<Navigation /> {/* <Navigation /> */}
{/* Hero Section */} {/* Hero Section */}
<section className="pt-24 pb-16 bg-background"> <section className="pt-24 pb-16 bg-background">
@@ -315,11 +317,11 @@ export const AutomationReshapingBusiness = () => {
<div className="max-w-4xl mx-auto"> <div className="max-w-4xl mx-auto">
{/* Breadcrumb */} {/* Breadcrumb */}
<div className="flex items-center gap-2 text-sm text-muted-foreground mb-8"> <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 Home
</button> </button>
<span>/</span> <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 Blog
</button> </button>
<span>/</span> <span>/</span>
@@ -486,7 +488,7 @@ export const AutomationReshapingBusiness = () => {
<div <div
key={article.id} key={article.id}
className="group cursor-pointer" 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"> <div className="aspect-[16/10] overflow-hidden rounded-lg mb-3">
<ImageWithFallback <ImageWithFallback
@@ -512,7 +514,7 @@ export const AutomationReshapingBusiness = () => {
<Button <Button
variant="outline" variant="outline"
className="w-full border-white/20 text-white hover:bg-white/10" className="w-full border-white/20 text-white hover:bg-white/10"
onClick={() => navigateTo('/resources/blog')} onClick={() => navigate('/resources/blog')}
> >
View All Articles View All Articles
<ArrowRight className="w-4 h-4 ml-2" /> <ArrowRight className="w-4 h-4 ml-2" />
@@ -530,7 +532,7 @@ export const AutomationReshapingBusiness = () => {
</p> </p>
<Button <Button
className="w-full bg-[#E5195E] hover:bg-[#E5195E]/90 text-white" className="w-full bg-[#E5195E] hover:bg-[#E5195E]/90 text-white"
onClick={() => navigateTo('/contact')} onClick={() => navigate('/contact')}
> >
Get In Touch Get In Touch
</Button> </Button>
@@ -557,7 +559,7 @@ export const AutomationReshapingBusiness = () => {
<Button <Button
size="lg" size="lg"
className="bg-[#E5195E] hover:bg-[#E5195E]/90 text-white" className="bg-[#E5195E] hover:bg-[#E5195E]/90 text-white"
onClick={() => navigateTo('/contact')} onClick={() => navigate('/contact')}
> >
Start Your Automation Journey Start Your Automation Journey
<ArrowRight className="ml-2 w-4 h-4" /> <ArrowRight className="ml-2 w-4 h-4" />
@@ -566,7 +568,7 @@ export const AutomationReshapingBusiness = () => {
size="lg" size="lg"
variant="outline" variant="outline"
className="border-white/20 text-white hover:bg-white/10" className="border-white/20 text-white hover:bg-white/10"
onClick={() => navigateTo('/resources/blog')} onClick={() => navigate('/resources/blog')}
> >
Read More Articles Read More Articles
</Button> </Button>
@@ -576,7 +578,7 @@ export const AutomationReshapingBusiness = () => {
</div> </div>
</section> </section>
<Footer /> {/* <Footer /> */}
</div> </div>
); );
}; };

4
pages/AwardsCertifications.tsx
View File

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

17
pages/Blog.tsx
View File

@@ -20,8 +20,8 @@ import {
ArrowRight, ArrowRight,
BookOpen, BookOpen,
} from "lucide-react"; } from "lucide-react";
import { navigateTo } from "../App";
import { Helmet } from "react-helmet-async"; import { Helmet } from "react-helmet-async";
import { useNavigate } from "react-router-dom";
export const Blog = () => { export const Blog = () => {
const [searchTerm, setSearchTerm] = useState(""); const [searchTerm, setSearchTerm] = useState("");
@@ -175,20 +175,21 @@ export const Blog = () => {
return matchesSearch && matchesCategory && matchesTag; return matchesSearch && matchesCategory && matchesTag;
}); });
const navigate = useNavigate();
const handlePostClick = (post: any) => { const handlePostClick = (post: any) => {
if (typeof post.id === "string") { if (typeof post.id === "string") {
// Navigate to dedicated article page // Navigate to dedicated article page
navigateTo(`/articles/${post.id}`); navigate(`/articles/${post.id}`);
} else { } else {
// For placeholder posts, navigate to generic article detail // For placeholder posts, navigate to generic article detail
navigateTo("/articles/generic-article"); navigate("/articles/generic-article");
} }
}; };
return ( return (
<div className="dark min-h-screen bg-background"> <div className="dark min-h-screen bg-background">
<Navigation /> {/* <Navigation /> */}
{/* Hero Section */} {/* Hero Section */}
<section className="pt-24 pb-16 bg-background"> <section className="pt-24 pb-16 bg-background">
@@ -529,7 +530,7 @@ export const Blog = () => {
<Button <Button
size="lg" size="lg"
className="bg-[#E5195E] hover:bg-[#E5195E]/90 text-white" className="bg-[#E5195E] hover:bg-[#E5195E]/90 text-white"
onClick={() => navigateTo("/resources/blog")} onClick={() => navigate("/resources/blog")}
> >
Explore All Articles Explore All Articles
<ArrowRight className="ml-2 w-4 h-4" /> <ArrowRight className="ml-2 w-4 h-4" />
@@ -538,8 +539,8 @@ export const Blog = () => {
size="lg" size="lg"
variant="outline" variant="outline"
className="border-white/20 text-white hover:bg-white/10" className="border-white/20 text-white hover:bg-white/10"
// onClick={() => navigateTo('/contact')} // onClick={() => navigate('/contact')}
onClick={() => navigateTo("/start-a-project")} onClick={() => navigate("/start-a-project")}
> >
Contact Our Experts Contact Our Experts
</Button> </Button>
@@ -548,7 +549,7 @@ export const Blog = () => {
</div> </div>
</section> </section>
<Footer /> {/* <Footer /> */}
</div> </div>
); );
}; };

22
pages/BuildingYourAPIStack.tsx
View File

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

15
pages/BusinessProcessAutomation.tsx
View File

@@ -41,11 +41,12 @@ import { Badge } from "../components/ui/badge";
import { Button } from "../components/ui/button"; import { Button } from "../components/ui/button";
import { Card, CardContent } from "../components/ui/card"; import { Card, CardContent } from "../components/ui/card";
import { ShimmerButton } from "../components/ui/shimmer-button"; import { ShimmerButton } from "../components/ui/shimmer-button";
import { navigateTo } from "@/App"; import { useNavigate } from "react-router-dom";
import { Helmet } from "react-helmet-async"; import { Helmet } from "react-helmet-async";
// Business Process Automation Hero Section // Business Process Automation Hero Section
const BusinessProcessAutomationHero = () => { const BusinessProcessAutomationHero = () => {
const navigate = useNavigate();
return ( return (
<section className="relative py-20 overflow-hidden bg-black"> <section className="relative py-20 overflow-hidden bg-black">
<Helmet> <Helmet>
@@ -136,7 +137,7 @@ const BusinessProcessAutomationHero = () => {
> >
<ShimmerButton <ShimmerButton
className="text-lg px-8 py-4" 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"> <div className="inline-flex items-center gap-2">
<MessageSquare className="w-5 h-5 flex-shrink-0" /> <MessageSquare className="w-5 h-5 flex-shrink-0" />
@@ -1288,6 +1289,7 @@ const BusinessProcessAutomationCaseStudies = () => {
// Mid-Page Lead Capture CTA // Mid-Page Lead Capture CTA
const BusinessProcessAutomationInlineCTA = () => { const BusinessProcessAutomationInlineCTA = () => {
const navigate = useNavigate();
return ( return (
<section className="py-20"> <section className="py-20">
<div className="container mx-auto px-6 lg:px-8"> <div className="container mx-auto px-6 lg:px-8">
@@ -1326,7 +1328,7 @@ const BusinessProcessAutomationInlineCTA = () => {
<ShimmerButton <ShimmerButton
className="text-xl px-10 py-5 rounded-2xl shadow-lg hover:shadow-xl" 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"> <div className="inline-flex items-center gap-3">
<Search className="w-6 h-6 flex-shrink-0" /> <Search className="w-6 h-6 flex-shrink-0" />
@@ -1413,6 +1415,7 @@ const BusinessProcessAutomationFAQs = () => {
// Final CTA Section // Final CTA Section
const BusinessProcessAutomationFinalCTA = () => { const BusinessProcessAutomationFinalCTA = () => {
const navigate = useNavigate();
return ( return (
<section className="py-20 relative overflow-hidden"> <section className="py-20 relative overflow-hidden">
<div className="container mx-auto px-6 lg:px-8 relative z-10"> <div className="container mx-auto px-6 lg:px-8 relative z-10">
@@ -1466,7 +1469,7 @@ const BusinessProcessAutomationFinalCTA = () => {
> >
<ShimmerButton <ShimmerButton
className="px-12 py-6 text-xl rounded-2xl shadow-2xl hover:shadow-accent/25" 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"> <div className="inline-flex items-center gap-3">
<Calendar className="w-6 h-6 flex-shrink-0" /> <Calendar className="w-6 h-6 flex-shrink-0" />
@@ -1496,7 +1499,7 @@ const BusinessProcessAutomationFinalCTA = () => {
export const BusinessProcessAutomation = () => { export const BusinessProcessAutomation = () => {
return ( return (
<div className="dark min-h-screen"> <div className="dark min-h-screen">
<Navigation /> {/* <Navigation /> */}
{/* Hero Section */} {/* Hero Section */}
<section className="bg-black"> <section className="bg-black">
@@ -1550,7 +1553,7 @@ export const BusinessProcessAutomation = () => {
{/* Footer */} {/* Footer */}
<section className="bg-card"> <section className="bg-card">
<Footer /> {/* <Footer /> */}
</section> </section>
</div> </div>
); );

4
pages/Careers.tsx
View File

@@ -166,7 +166,7 @@ Best regards,
`} `}
</script> </script>
</Helmet> </Helmet>
<Navigation /> {/* <Navigation /> */}
{/* Hero Section */} {/* Hero Section */}
<section className="relative pt-24 pb-20 overflow-hidden bg-black"> <section className="relative pt-24 pb-20 overflow-hidden bg-black">
@@ -373,7 +373,7 @@ Best regards,
</div> </div>
</section> </section>
<Footer /> {/* <Footer /> */}
</div> </div>
); );
}; };

16
pages/CaseStudies.tsx
View File

@@ -22,7 +22,6 @@ import {
} from "lucide-react"; } from "lucide-react";
import { useState } from "react"; import { useState } from "react";
import { Helmet } from "react-helmet-async"; import { Helmet } from "react-helmet-async";
import { navigateTo } from "../App";
import { ImageWithFallback } from "../components/figma/ImageWithFallback"; import { ImageWithFallback } from "../components/figma/ImageWithFallback";
import { Footer } from "../components/Footer"; import { Footer } from "../components/Footer";
import { Navigation } from "../components/Navigation"; import { Navigation } from "../components/Navigation";
@@ -46,6 +45,7 @@ import simplitendCase from "../src/images/simplitendCase.webp";
import amozCase from "../src/images/amozCase.webp"; import amozCase from "../src/images/amozCase.webp";
import farmCase from "../src/images/farmCase.webp"; import farmCase from "../src/images/farmCase.webp";
import leanCase from "../src/images/leanCase.webp"; import leanCase from "../src/images/leanCase.webp";
import { useNavigate } from "react-router-dom";
const caseStudies = [ const caseStudies = [
@@ -231,9 +231,11 @@ export const CaseStudies = () => {
return matchesSearch && matchesIndustry && matchesCategory && matchesFeatured; return matchesSearch && matchesIndustry && matchesCategory && matchesFeatured;
}); });
const navigate = useNavigate();
return ( return (
<div className="dark min-h-screen bg-background"> <div className="dark min-h-screen bg-background">
<Navigation /> {/* <Navigation /> */}
{/* Hero Section */} {/* Hero Section */}
<section className="relative pt-24 pb-20 overflow-hidden bg-black"> <section className="relative pt-24 pb-20 overflow-hidden bg-black">
@@ -393,12 +395,12 @@ export const CaseStudies = () => {
viewport={{ once: true }} viewport={{ once: true }}
whileHover={{ y: -8, scale: 1.02 }} whileHover={{ y: -8, scale: 1.02 }}
className="group cursor-pointer" className="group cursor-pointer"
onClick={() => navigateTo(study.link)} 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" <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"
onClick={(e) => { onClick={(e) => {
e.stopPropagation(); e.stopPropagation();
navigateTo(study.link); navigate(study.link);
}} }}
> >
<CardContent className="CardContentOverride p-0 pb-0 h-full"> <CardContent className="CardContentOverride p-0 pb-0 h-full">
@@ -465,7 +467,7 @@ export const CaseStudies = () => {
<Button <Button
size="lg" size="lg"
className="bg-accent hover:bg-accent/90 text-white" className="bg-accent hover:bg-accent/90 text-white"
onClick={() => navigateTo("/start-a-project")} onClick={() => navigate("/start-a-project")}
> >
Start Your Project Start Your Project
<ArrowUpRight className="w-4 h-4 ml-2" /> <ArrowUpRight className="w-4 h-4 ml-2" />
@@ -473,7 +475,7 @@ export const CaseStudies = () => {
<Button <Button
size="lg" size="lg"
variant="outline" variant="outline"
onClick={() => navigateTo("/contact-us")} onClick={() => navigate("/contact-us")}
> >
Schedule Consultation Schedule Consultation
<ArrowRight className="w-4 h-4 ml-2" /> <ArrowRight className="w-4 h-4 ml-2" />
@@ -483,7 +485,7 @@ export const CaseStudies = () => {
</div> </div>
</section> </section>
<Footer /> {/* <Footer /> */}
</div> </div>
); );
}; };

14
pages/CaseStudyComingSoon.tsx
View File

@@ -26,12 +26,12 @@ import {
Database, Database,
Zap Zap
} from 'lucide-react'; } from 'lucide-react';
import { navigateTo } from '../App';
import { Navigation } from '@/components/Navigation'; import { Navigation } from '@/components/Navigation';
import { Badge } from '@/components/ui/badge'; import { Badge } from '@/components/ui/badge';
import { Card, CardContent } from '@/components/ui/card'; import { Card, CardContent } from '@/components/ui/card';
import { Button } from '@/components/ui/button'; import { Button } from '@/components/ui/button';
import { Footer } from '@/components/Footer'; import { Footer } from '@/components/Footer';
import { useNavigate } from 'react-router-dom';
interface CaseStudyComingSoonProps { interface CaseStudyComingSoonProps {
projectTitle?: string; projectTitle?: string;
@@ -78,11 +78,13 @@ export const CaseStudyComingSoon: React.FC<CaseStudyComingSoonProps> = ({
return icons[industry as keyof typeof icons] || Building2; return icons[industry as keyof typeof icons] || Building2;
}; };
const navigate = useNavigate();
const IconComponent = getIndustryIcon(industry); const IconComponent = getIndustryIcon(industry);
return ( return (
<div className="dark min-h-screen bg-background"> <div className="dark min-h-screen bg-background">
<Navigation /> {/* <Navigation /> */}
{/* Hero Section */} {/* Hero Section */}
<section className="pt-24 pb-16 bg-background relative overflow-hidden"> <section className="pt-24 pb-16 bg-background relative overflow-hidden">
@@ -300,7 +302,7 @@ export const CaseStudyComingSoon: React.FC<CaseStudyComingSoonProps> = ({
Join our mailing list to be the first to know when this case study goes live. Join our mailing list to be the first to know when this case study goes live.
</p> </p>
<Button <Button
onClick={() => navigateTo('/contact-us')} onClick={() => navigate('/contact-us')}
className="bg-[#E5195E] hover:bg-[#E5195E]/90 text-white border-none font-manrope" className="bg-[#E5195E] hover:bg-[#E5195E]/90 text-white border-none font-manrope"
> >
Notify Me Notify Me
@@ -325,7 +327,7 @@ export const CaseStudyComingSoon: React.FC<CaseStudyComingSoonProps> = ({
<Button <Button
size="lg" size="lg"
className="bg-[#E5195E] hover:bg-[#E5195E]/90 text-white border-none font-manrope" className="bg-[#E5195E] hover:bg-[#E5195E]/90 text-white border-none font-manrope"
onClick={() => navigateTo('/case-studies')} onClick={() => navigate('/case-studies')}
> >
View All Case Studies View All Case Studies
<ArrowRight className="w-5 h-5 ml-2" /> <ArrowRight className="w-5 h-5 ml-2" />
@@ -334,7 +336,7 @@ export const CaseStudyComingSoon: React.FC<CaseStudyComingSoonProps> = ({
size="lg" size="lg"
variant="outline" variant="outline"
className="border-white/20 text-white hover:bg-white/10 font-manrope" className="border-white/20 text-white hover:bg-white/10 font-manrope"
onClick={() => navigateTo('/start-a-project')} onClick={() => navigate('/start-a-project')}
> >
Start Your Project Start Your Project
</Button> </Button>
@@ -343,7 +345,7 @@ export const CaseStudyComingSoon: React.FC<CaseStudyComingSoonProps> = ({
</div> </div>
</section> </section>
<Footer /> {/* <Footer /> */}
</div> </div>
); );
}; };

38
pages/ClickablePrototypes.tsx
View File

@@ -42,11 +42,12 @@ import { Badge } from "../components/ui/badge";
import { Button } from "../components/ui/button"; import { Button } from "../components/ui/button";
import { Card, CardContent } from "../components/ui/card"; import { Card, CardContent } from "../components/ui/card";
import { ShimmerButton } from "../components/ui/shimmer-button"; import { ShimmerButton } from "../components/ui/shimmer-button";
import { navigateTo } from "@/App"; import { useNavigate } from "react-router-dom";
import { Helmet } from "react-helmet-async"; import { Helmet } from "react-helmet-async";
// Clickable Prototypes Hero Section // Clickable Prototypes Hero Section
const PrototypesHeroWithCTA = () => { const PrototypesHeroWithCTA = () => {
const navigate = useNavigate();
return ( return (
<section className="relative py-20 overflow-hidden bg-black"> <section className="relative py-20 overflow-hidden bg-black">
<Helmet> <Helmet>
@@ -136,7 +137,7 @@ const PrototypesHeroWithCTA = () => {
> >
<ShimmerButton <ShimmerButton
className="text-lg px-8 py-4" 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"> <div className="inline-flex items-center gap-2">
<PlayCircle className="w-5 h-5 flex-shrink-0" /> <PlayCircle className="w-5 h-5 flex-shrink-0" />
@@ -1031,6 +1032,7 @@ const PrototypingCaseStudies = () => {
// Mid-Page CTA // Mid-Page CTA
const PrototypingInlineCTA = () => { const PrototypingInlineCTA = () => {
const navigate = useNavigate();
return ( return (
<section className="py-20"> <section className="py-20">
<div className="container mx-auto px-6 lg:px-8"> <div className="container mx-auto px-6 lg:px-8">
@@ -1069,7 +1071,7 @@ const PrototypingInlineCTA = () => {
<ShimmerButton <ShimmerButton
className="text-xl px-10 py-5 rounded-2xl shadow-lg hover:shadow-xl" 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"> <div className="inline-flex items-center gap-3">
<MessageCircle className="w-6 h-6 flex-shrink-0" /> <MessageCircle className="w-6 h-6 flex-shrink-0" />
@@ -1085,6 +1087,7 @@ const PrototypingInlineCTA = () => {
// Hire UI/UX Designers for Prototypes // Hire UI/UX Designers for Prototypes
const HirePrototypeDesigners = () => { const HirePrototypeDesigners = () => {
const navigate = useNavigate();
const designerTypes = [ const designerTypes = [
{ {
title: "Prototype Specialists", title: "Prototype Specialists",
@@ -1235,7 +1238,7 @@ const HirePrototypeDesigners = () => {
> >
<div className="flex flex-col sm:flex-row gap-4 justify-center"> <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={() => navigateTo("/hire-talent/clickable-prototypes-developers")} onClick={() => navigate("/hire-talent/clickable-prototypes-developers")}
> >
<div className="inline-flex items-center gap-2"> <div className="inline-flex items-center gap-2">
<Users className="w-5 h-5 flex-shrink-0" /> <Users className="w-5 h-5 flex-shrink-0" />
@@ -1333,6 +1336,7 @@ const PrototypingFAQs = () => {
// Final CTA Section // Final CTA Section
const PrototypingFinalCTA = () => { const PrototypingFinalCTA = () => {
const navigate = useNavigate();
return ( return (
<section className="py-20 relative overflow-hidden"> <section className="py-20 relative overflow-hidden">
<div className="container mx-auto px-6 lg:px-8 relative z-10"> <div className="container mx-auto px-6 lg:px-8 relative z-10">
@@ -1385,7 +1389,7 @@ const PrototypingFinalCTA = () => {
> >
<ShimmerButton <ShimmerButton
className="px-12 py-6 text-xl rounded-2xl shadow-2xl hover:shadow-accent/25" 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"> <div className="inline-flex items-center gap-3">
<Rocket className="w-6 h-6 flex-shrink-0" /> <Rocket className="w-6 h-6 flex-shrink-0" />
@@ -1414,7 +1418,7 @@ const PrototypingFinalCTA = () => {
export const ClickablePrototypes = () => { export const ClickablePrototypes = () => {
return ( return (
<div className="dark min-h-screen"> <div className="dark min-h-screen">
<Navigation /> {/* <Navigation /> */}
{/* Hero Section */} {/* Hero Section */}
<section className="bg-black"> <section className="bg-black">
@@ -1426,6 +1430,11 @@ export const ClickablePrototypes = () => {
<PrototypeBenefits /> <PrototypeBenefits />
</section> </section>
{/* Case Studies */}
<section className="bg-background">
<PrototypingCaseStudies />
</section>
{/* Prototyping Process */} {/* Prototyping Process */}
<section className="bg-card"> <section className="bg-card">
<PrototypingProcess /> <PrototypingProcess />
@@ -1441,15 +1450,10 @@ export const ClickablePrototypes = () => {
<PrototypingTools /> <PrototypingTools />
</section> </section>
{/* Case Studies */}
<section className="bg-background">
<PrototypingCaseStudies />
</section>
{/* Mid-Page CTA */} {/* Mid-Page CTA */}
<section className="bg-card"> {/* <section className="bg-card">
<PrototypingInlineCTA /> <PrototypingInlineCTA />
</section> </section> */}
{/* Hire Designers */} {/* Hire Designers */}
<section className="bg-background"> <section className="bg-background">
@@ -1457,9 +1461,9 @@ export const ClickablePrototypes = () => {
</section> </section>
{/* FAQs */} {/* FAQs */}
<section className="bg-card"> {/* <section className="bg-card">
<PrototypingFAQs /> <PrototypingFAQs />
</section> </section> */}
{/* Final CTA */} {/* Final CTA */}
<section className="bg-background"> <section className="bg-background">
@@ -1467,8 +1471,8 @@ export const ClickablePrototypes = () => {
</section> </section>
{/* Footer */} {/* Footer */}
<section className="bg-card"> <section className="bg-background">
<Footer /> {/* <Footer /> */}
</section> </section>
</div> </div>
); );

4
pages/ClientSupport.tsx
View File

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

10
pages/ClientTestimonials.tsx
View File

@@ -23,8 +23,8 @@ import {
Users, Users,
Award, Award,
} from "lucide-react"; } from "lucide-react";
import { navigateTo } from "../App";
import { Helmet } from "react-helmet-async"; import { Helmet } from "react-helmet-async";
import { useNavigate } from "react-router-dom";
export const ClientTestimonials = () => { export const ClientTestimonials = () => {
const [selectedIndustry, setSelectedIndustry] = useState("all"); const [selectedIndustry, setSelectedIndustry] = useState("all");
@@ -387,9 +387,11 @@ export const ClientTestimonials = () => {
return icons[industry as keyof typeof icons] || Building2; return icons[industry as keyof typeof icons] || Building2;
}; };
const navigate = useNavigate();
return ( return (
<div className="dark min-h-screen bg-background"> <div className="dark min-h-screen bg-background">
<Navigation /> {/* <Navigation /> */}
{/* Hero Section */} {/* Hero Section */}
<section className="pt-24 pb-16 bg-background"> <section className="pt-24 pb-16 bg-background">
@@ -735,7 +737,7 @@ export const ClientTestimonials = () => {
<Button <Button
size="lg" size="lg"
className="bg-[#E5195E] hover:bg-[#E5195E]/90 text-white" className="bg-[#E5195E] hover:bg-[#E5195E]/90 text-white"
onClick={() => navigateTo("/start-a-project")} onClick={() => navigate("/start-a-project")}
> >
Become Our Next Success Story Become Our Next Success Story
<ArrowRight className="ml-2 w-4 h-4" /> <ArrowRight className="ml-2 w-4 h-4" />
@@ -752,7 +754,7 @@ export const ClientTestimonials = () => {
</div> </div>
</section> </section>
<Footer /> {/* <Footer /> */}
</div> </div>
); );
}; };

20
pages/Company.tsx
View File

@@ -10,7 +10,6 @@ import { Badge } from "../components/ui/badge";
import { Card, CardContent } from "../components/ui/card"; import { Card, CardContent } from "../components/ui/card";
import { Accordion, AccordionContent, AccordionItem, AccordionTrigger } from "../components/ui/accordion"; import { Accordion, AccordionContent, AccordionItem, AccordionTrigger } from "../components/ui/accordion";
import { GridPattern } from "../components/GridPattern"; import { GridPattern } from "../components/GridPattern";
import { navigateTo } from "../App";
import { import {
Users, Heart, Shield, Target, Lightbulb, Award, TrendingUp, Clock, Users, Heart, Shield, Target, Lightbulb, Award, TrendingUp, Clock,
Newspaper, ArrowRight, Building, Globe, CheckCircle, Coffee, Newspaper, ArrowRight, Building, Globe, CheckCircle, Coffee,
@@ -18,9 +17,11 @@ import {
ChevronRight ChevronRight
} from "lucide-react"; } from "lucide-react";
import { Helmet } from "react-helmet-async"; import { Helmet } from "react-helmet-async";
import { useNavigate } from "react-router-dom";
// Enhanced Hero Section // Enhanced Hero Section
const HeroWithCTA = () => { const HeroWithCTA = () => {
const navigate = useNavigate();
return ( return (
<section className="relative py-20 overflow-hidden bg-black"> <section className="relative py-20 overflow-hidden bg-black">
<Helmet> <Helmet>
@@ -107,7 +108,7 @@ const HeroWithCTA = () => {
transition={{ duration: 0.8, delay: 0.3 }} transition={{ duration: 0.8, delay: 0.3 }}
className="flex flex-col sm:flex-row gap-4" 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"> <div className="inline-flex items-center gap-2">
<Clock className="w-4 h-4 flex-shrink-0" /> <Clock className="w-4 h-4 flex-shrink-0" />
<span>Our Story</span> <span>Our Story</span>
@@ -117,7 +118,7 @@ const HeroWithCTA = () => {
variant="secondary" variant="secondary"
size="lg" size="lg"
className="text-lg px-8 py-4" 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" /> <Users className="w-4 h-4 flex-shrink-0" />
<span>Meet Our Leaders</span> <span>Meet Our Leaders</span>
@@ -481,6 +482,7 @@ const SideBySideContentWithIcons = () => {
// Company Sections Grid - Updated to remove About WDI card // Company Sections Grid - Updated to remove About WDI card
const TabbedServiceDisplay = () => { const TabbedServiceDisplay = () => {
const navigate = useNavigate();
const sections = [ const sections = [
{ {
title: "Our History", title: "Our History",
@@ -556,7 +558,7 @@ const TabbedServiceDisplay = () => {
viewport={{ once: true }} viewport={{ once: true }}
whileHover={{ y: -5 }} whileHover={{ y: -5 }}
className="group cursor-pointer" 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="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="flex flex-col items-start space-y-6">
@@ -590,6 +592,7 @@ const TabbedServiceDisplay = () => {
// Updated CTA Section with new design // Updated CTA Section with new design
const InlineCTA = () => { const InlineCTA = () => {
const navigate = useNavigate();
return ( return (
<section className="py-20 bg-background"> <section className="py-20 bg-background">
<div className="container mx-auto px-6 lg:px-8"> <div className="container mx-auto px-6 lg:px-8">
@@ -633,7 +636,7 @@ const InlineCTA = () => {
<div className="flex flex-col items-start gap-4"> <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" 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"> <div className="inline-flex items-center gap-3">
<Briefcase className="w-6 h-6 flex-shrink-0" /> <Briefcase className="w-6 h-6 flex-shrink-0" />
@@ -655,6 +658,7 @@ const InlineCTA = () => {
// Press and Recognition Section // Press and Recognition Section
const PressRecognitionSection = () => { const PressRecognitionSection = () => {
const navigate = useNavigate();
const press = [ const press = [
{ {
title: "Innovation Leader 2024", title: "Innovation Leader 2024",
@@ -759,7 +763,7 @@ const PressRecognitionSection = () => {
<div className="p-8 pt-0 mt-auto space-y-3"> <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" 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"> <div className="inline-flex items-center justify-center gap-2">
<Eye className="w-4 h-4 flex-shrink-0" /> <Eye className="w-4 h-4 flex-shrink-0" />
@@ -846,7 +850,7 @@ const FAQSection = () => {
export function Company() { export function Company() {
return ( return (
<div className="dark min-h-screen bg-background"> <div className="dark min-h-screen bg-background">
<Navigation /> {/* <Navigation /> */}
<HeroWithCTA /> <HeroWithCTA />
<AboutWDISection /> <AboutWDISection />
<HorizontalTagScroller /> <HorizontalTagScroller />
@@ -855,7 +859,7 @@ export function Company() {
<InlineCTA /> <InlineCTA />
<PressRecognitionSection /> <PressRecognitionSection />
<FAQSection /> <FAQSection />
<Footer /> {/* <Footer /> */}
</div> </div>
); );
} }

22
pages/ComplianceReadyFintech.tsx
View File

@@ -7,8 +7,8 @@ import { Card, CardContent } from "../components/ui/card";
import { Avatar, AvatarFallback, AvatarImage } from "../components/ui/avatar"; import { Avatar, AvatarFallback, AvatarImage } from "../components/ui/avatar";
import { Separator } from "../components/ui/separator"; import { Separator } from "../components/ui/separator";
import { Calendar, Clock, User, ArrowRight, Share2, Linkedin, Twitter, ExternalLink, Tag } from "lucide-react"; import { Calendar, Clock, User, ArrowRight, Share2, Linkedin, Twitter, ExternalLink, Tag } from "lucide-react";
import { navigateTo } from "../App";
import { ImageWithFallback } from "../components/figma/ImageWithFallback"; import { ImageWithFallback } from "../components/figma/ImageWithFallback";
import { useNavigate } from "react-router-dom";
const articleData = { const articleData = {
id: "compliance-ready-systems-fintech", id: "compliance-ready-systems-fintech",
@@ -240,10 +240,10 @@ export const ComplianceReadyFintech = () => {
window.open(shareUrl, '_blank', 'width=600,height=400'); window.open(shareUrl, '_blank', 'width=600,height=400');
} }
}; };
const navigate = useNavigate();
return ( return (
<div className="dark min-h-screen bg-background"> <div className="dark min-h-screen bg-background">
<Navigation /> {/* <Navigation /> */}
{/* Hero Section */} {/* Hero Section */}
<section className="pt-24 pb-16 bg-background"> <section className="pt-24 pb-16 bg-background">
@@ -251,11 +251,11 @@ export const ComplianceReadyFintech = () => {
<div className="max-w-4xl mx-auto"> <div className="max-w-4xl mx-auto">
{/* Breadcrumb */} {/* Breadcrumb */}
<div className="flex items-center gap-2 text-sm text-muted-foreground mb-8"> <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 Home
</button> </button>
<span>/</span> <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 Blog
</button> </button>
<span>/</span> <span>/</span>
@@ -422,7 +422,7 @@ export const ComplianceReadyFintech = () => {
<div <div
key={article.id} key={article.id}
className="group cursor-pointer" 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"> <div className="aspect-[16/10] overflow-hidden rounded-lg mb-3">
<ImageWithFallback <ImageWithFallback
@@ -448,7 +448,7 @@ export const ComplianceReadyFintech = () => {
<Button <Button
variant="outline" variant="outline"
className="w-full border-white/20 text-white hover:bg-white/10" className="w-full border-white/20 text-white hover:bg-white/10"
onClick={() => navigateTo('/resources/blog')} onClick={() => navigate('/resources/blog')}
> >
View All Articles View All Articles
<ArrowRight className="w-4 h-4 ml-2" /> <ArrowRight className="w-4 h-4 ml-2" />
@@ -466,7 +466,7 @@ export const ComplianceReadyFintech = () => {
</p> </p>
<Button <Button
className="w-full bg-[#E5195E] hover:bg-[#E5195E]/90 text-white" className="w-full bg-[#E5195E] hover:bg-[#E5195E]/90 text-white"
onClick={() => navigateTo('/contact')} onClick={() => navigate('/contact')}
> >
Get In Touch Get In Touch
</Button> </Button>
@@ -493,7 +493,7 @@ export const ComplianceReadyFintech = () => {
<Button <Button
size="lg" size="lg"
className="bg-[#E5195E] hover:bg-[#E5195E]/90 text-white" className="bg-[#E5195E] hover:bg-[#E5195E]/90 text-white"
onClick={() => navigateTo('/contact')} onClick={() => navigate('/contact')}
> >
Start Your Fintech Project Start Your Fintech Project
<ArrowRight className="ml-2 w-4 h-4" /> <ArrowRight className="ml-2 w-4 h-4" />
@@ -502,7 +502,7 @@ export const ComplianceReadyFintech = () => {
size="lg" size="lg"
variant="outline" variant="outline"
className="border-white/20 text-white hover:bg-white/10" className="border-white/20 text-white hover:bg-white/10"
onClick={() => navigateTo('/resources/blog')} onClick={() => navigate('/resources/blog')}
> >
Read More Articles Read More Articles
</Button> </Button>
@@ -512,7 +512,7 @@ export const ComplianceReadyFintech = () => {
</div> </div>
</section> </section>
<Footer /> {/* <Footer /> */}
</div> </div>
); );
}; };

15
pages/ComplianceReadySystems.tsx
View File

@@ -39,11 +39,12 @@ import { Badge } from "../components/ui/badge";
import { Button } from "../components/ui/button"; import { Button } from "../components/ui/button";
import { Card, CardContent } from "../components/ui/card"; import { Card, CardContent } from "../components/ui/card";
import { ShimmerButton } from "../components/ui/shimmer-button"; import { ShimmerButton } from "../components/ui/shimmer-button";
import { navigateTo } from "@/App"; import { useNavigate } from "react-router-dom";
import { Helmet } from "react-helmet-async"; import { Helmet } from "react-helmet-async";
// Compliance-Ready Systems Hero Section // Compliance-Ready Systems Hero Section
const ComplianceReadySystemsHero = () => { const ComplianceReadySystemsHero = () => {
const navigate = useNavigate();
return ( return (
<section className="relative py-20 overflow-hidden bg-black"> <section className="relative py-20 overflow-hidden bg-black">
<Helmet> <Helmet>
@@ -135,7 +136,7 @@ const ComplianceReadySystemsHero = () => {
> >
<ShimmerButton <ShimmerButton
className="text-lg px-8 py-4" 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"> <div className="inline-flex items-center gap-2">
<MessageSquare className="w-5 h-5 flex-shrink-0" /> <MessageSquare className="w-5 h-5 flex-shrink-0" />
@@ -1275,6 +1276,7 @@ const ComplianceReadySystemsCaseStudies = () => {
// Mid-Page Lead Capture CTA // Mid-Page Lead Capture CTA
const ComplianceReadySystemsInlineCTA = () => { const ComplianceReadySystemsInlineCTA = () => {
const navigate = useNavigate();
return ( return (
<section className="py-20"> <section className="py-20">
<div className="container mx-auto px-6 lg:px-8"> <div className="container mx-auto px-6 lg:px-8">
@@ -1312,7 +1314,7 @@ const ComplianceReadySystemsInlineCTA = () => {
<ShimmerButton <ShimmerButton
className="text-xl px-10 py-5 rounded-2xl shadow-lg hover:shadow-xl" 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"> <div className="inline-flex items-center gap-3">
<Search className="w-6 h-6 flex-shrink-0" /> <Search className="w-6 h-6 flex-shrink-0" />
@@ -1405,6 +1407,7 @@ const ComplianceReadySystemsFAQs = () => {
// Final CTA Section // Final CTA Section
const ComplianceReadySystemsFinalCTA = () => { const ComplianceReadySystemsFinalCTA = () => {
const navigate = useNavigate();
return ( return (
<section className="py-20 relative overflow-hidden"> <section className="py-20 relative overflow-hidden">
<div className="container mx-auto px-6 lg:px-8 relative z-10"> <div className="container mx-auto px-6 lg:px-8 relative z-10">
@@ -1458,7 +1461,7 @@ const ComplianceReadySystemsFinalCTA = () => {
> >
<ShimmerButton <ShimmerButton
className="px-12 py-6 text-xl rounded-2xl shadow-2xl hover:shadow-accent/25" 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"> <div className="inline-flex items-center gap-3">
<Calendar className="w-6 h-6 flex-shrink-0" /> <Calendar className="w-6 h-6 flex-shrink-0" />
@@ -1488,7 +1491,7 @@ const ComplianceReadySystemsFinalCTA = () => {
export const ComplianceReadySystems = () => { export const ComplianceReadySystems = () => {
return ( return (
<div className="dark min-h-screen"> <div className="dark min-h-screen">
<Navigation /> {/* <Navigation /> */}
{/* Hero Section */} {/* Hero Section */}
<section className="bg-black"> <section className="bg-black">
@@ -1542,7 +1545,7 @@ export const ComplianceReadySystems = () => {
{/* Footer */} {/* Footer */}
<section className="bg-card"> <section className="bg-card">
<Footer /> {/* <Footer /> */}
</section> </section>
</div> </div>
); );

34
pages/ComputerVisionApplications.tsx
View File

@@ -48,11 +48,13 @@ import { Badge } from "../components/ui/badge";
import { Button } from "../components/ui/button"; import { Button } from "../components/ui/button";
import { Card, CardContent } from "../components/ui/card"; import { Card, CardContent } from "../components/ui/card";
import { ShimmerButton } from "../components/ui/shimmer-button"; import { ShimmerButton } from "../components/ui/shimmer-button";
import { navigateTo } from "@/App"; import { useNavigate } from "react-router-dom";
import { Helmet } from "react-helmet-async"; import { Helmet } from "react-helmet-async";
import { AIStrategyTargetAudience } from "./AIStrategyConsulting";
// Computer Vision Applications Hero Section // Computer Vision Applications Hero Section
const ComputerVisionHeroWithCTA = () => { const ComputerVisionHeroWithCTA = () => {
const navigate = useNavigate();
return ( return (
<section className="relative py-20 overflow-hidden bg-black"> <section className="relative py-20 overflow-hidden bg-black">
<Helmet> <Helmet>
@@ -141,7 +143,7 @@ const ComputerVisionHeroWithCTA = () => {
> >
<ShimmerButton <ShimmerButton
className="text-lg px-8 py-4" 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"> <div className="inline-flex items-center gap-2">
<Eye className="w-5 h-5 flex-shrink-0" /> <Eye className="w-5 h-5 flex-shrink-0" />
@@ -674,13 +676,11 @@ const ComputerVisionProcess = () => {
whileInView={{ opacity: 1, x: 0 }} whileInView={{ opacity: 1, x: 0 }}
transition={{ duration: 0.8, delay: index * 0.2 }} transition={{ duration: 0.8, delay: index * 0.2 }}
viewport={{ once: true }} viewport={{ once: true }}
className={`flex items-center ${ className={`flex items-center ${isEven ? "lg:flex-row" : "lg:flex-row-reverse"
isEven ? "lg:flex-row" : "lg:flex-row-reverse"
} flex-col lg:gap-16 gap-8`} } flex-col lg:gap-16 gap-8`}
> >
<div <div
className={`flex-1 ${ className={`flex-1 ${isEven ? "lg:text-right" : "lg:text-left"
isEven ? "lg:text-right" : "lg:text-left"
} text-center 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="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">
@@ -981,8 +981,7 @@ const ComputerVisionTechStack = () => {
> >
<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"> <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 <div
className={`w-12 h-12 rounded-lg flex items-center justify-center mx-auto mb-3 ${ className={`w-12 h-12 rounded-lg flex items-center justify-center mx-auto mb-3 ${colorClasses[tech.color as keyof typeof colorClasses] ||
colorClasses[tech.color as keyof typeof colorClasses] ||
"bg-accent/20 text-accent border-accent/30" "bg-accent/20 text-accent border-accent/30"
}`} }`}
> >
@@ -1145,6 +1144,7 @@ const ComputerVisionCaseStudies = () => {
// Mid-Page CTA // Mid-Page CTA
const ComputerVisionInlineCTA = () => { const ComputerVisionInlineCTA = () => {
const navigate = useNavigate();
return ( return (
<section className="py-20 bg-black"> <section className="py-20 bg-black">
<div className="container mx-auto px-6 lg:px-8"> <div className="container mx-auto px-6 lg:px-8">
@@ -1182,7 +1182,7 @@ const ComputerVisionInlineCTA = () => {
<ShimmerButton <ShimmerButton
className="text-xl px-10 py-5 rounded-2xl shadow-lg hover:shadow-xl" 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"> <div className="inline-flex items-center gap-3">
<MessageSquare className="w-6 h-6 flex-shrink-0" /> <MessageSquare className="w-6 h-6 flex-shrink-0" />
@@ -1448,6 +1448,7 @@ const ComputerVisionFAQs = () => {
// Final CTA Section // Final CTA Section
const ComputerVisionFinalCTA = () => { const ComputerVisionFinalCTA = () => {
const navigate = useNavigate();
return ( return (
<section className="py-20 relative overflow-hidden"> <section className="py-20 relative overflow-hidden">
<div className="container mx-auto px-6 lg:px-8 relative z-10"> <div className="container mx-auto px-6 lg:px-8 relative z-10">
@@ -1500,7 +1501,7 @@ const ComputerVisionFinalCTA = () => {
> >
<ShimmerButton <ShimmerButton
className="px-12 py-6 text-xl rounded-2xl shadow-2xl hover:shadow-accent/25" 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"> <div className="inline-flex items-center gap-3">
<Scan className="w-6 h-6 flex-shrink-0" /> <Scan className="w-6 h-6 flex-shrink-0" />
@@ -1530,7 +1531,7 @@ const ComputerVisionFinalCTA = () => {
export const ComputerVisionApplications = () => { export const ComputerVisionApplications = () => {
return ( return (
<div className="dark min-h-screen"> <div className="dark min-h-screen">
<Navigation /> {/* <Navigation /> */}
{/* Hero Section */} {/* Hero Section */}
<section className="bg-black"> <section className="bg-black">
@@ -1542,6 +1543,11 @@ export const ComputerVisionApplications = () => {
<ComputerVisionBenefits /> <ComputerVisionBenefits />
</section> </section>
{/* Tech Stack */}
<section className="bg-card">
<ComputerVisionTechStack />
</section>
{/* Development Process */} {/* Development Process */}
<section className="bg-card"> <section className="bg-card">
<ComputerVisionProcess /> <ComputerVisionProcess />
@@ -1552,9 +1558,9 @@ export const ComputerVisionApplications = () => {
<CVApplicationsList /> <CVApplicationsList />
</section> </section>
{/* Tech Stack */} {/* Target Audience */}
<section className="bg-card"> <section className="bg-card">
<ComputerVisionTechStack /> <AIStrategyTargetAudience />
</section> </section>
{/* Case Studies */} {/* Case Studies */}
@@ -1584,7 +1590,7 @@ export const ComputerVisionApplications = () => {
{/* Footer */} {/* Footer */}
<section className="bg-card"> <section className="bg-card">
<Footer /> {/* <Footer /> */}
</section> </section>
</div> </div>
); );

16
pages/Contact.tsx
View File

@@ -9,7 +9,7 @@ import { Textarea } from "../components/ui/textarea";
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "../components/ui/select"; import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "../components/ui/select";
import { Checkbox } from "../components/ui/checkbox"; import { Checkbox } from "../components/ui/checkbox";
import { Mail, Phone, MapPin, Clock, Send, ArrowRight, MessageSquare, FileCheck, Calendar, Headphones, UserPlus } from "lucide-react"; import { Mail, Phone, MapPin, Clock, Send, ArrowRight, MessageSquare, FileCheck, Calendar, Headphones, UserPlus } from "lucide-react";
import { navigateTo } from "../App"; import { useNavigate } from "react-router-dom";
export const Contact = () => { export const Contact = () => {
const [formData, setFormData] = useState({ const [formData, setFormData] = useState({
@@ -53,6 +53,8 @@ export const Contact = () => {
{ icon: UserPlus, title: "Send your CV to HR", description: "Submit your resume for career opportunities", href: "/contact/send-your-cv" } { icon: UserPlus, title: "Send your CV to HR", description: "Submit your resume for career opportunities", href: "/contact/send-your-cv" }
]; ];
const navigate = useNavigate();
const handleInputChange = (field: string, value: string | boolean) => { const handleInputChange = (field: string, value: string | boolean) => {
setFormData(prev => ({ ...prev, [field]: value })); setFormData(prev => ({ ...prev, [field]: value }));
}; };
@@ -112,12 +114,12 @@ export const Contact = () => {
setIsSubmitting(false); setIsSubmitting(false);
// Redirect to Thank You page // Redirect to Thank You page
navigateTo('/thank-you'); navigate('/thank-you');
}; };
return ( return (
<div className="dark min-h-screen bg-background"> <div className="dark min-h-screen bg-background">
<Navigation /> {/* <Navigation /> */}
<section className="pt-24 pb-16 bg-background"> <section className="pt-24 pb-16 bg-background">
<div className="container mx-auto px-6 lg:px-8"> <div className="container mx-auto px-6 lg:px-8">
@@ -255,7 +257,7 @@ export const Contact = () => {
{contactPages.map((page, index) => { {contactPages.map((page, index) => {
const Icon = page.icon; const Icon = page.icon;
return ( return (
<Card key={index} className="bg-background/50 border-white/10 hover:border-[#E5195E]/30 transition-all duration-300 cursor-pointer" onClick={() => navigateTo(page.href)}> <Card key={index} className="bg-background/50 border-white/10 hover:border-[#E5195E]/30 transition-all duration-300 cursor-pointer" onClick={() => navigate(page.href)}>
<CardContent className="p-4"> <CardContent className="p-4">
<div className="flex items-center gap-3"> <div className="flex items-center gap-3">
<Icon className="w-5 h-5 text-[#E5195E]" /> <Icon className="w-5 h-5 text-[#E5195E]" />
@@ -283,10 +285,10 @@ export const Contact = () => {
<strong>Privacy Statement:</strong> Your information is secure with us. We respect your privacy and will only use your data to respond to your inquiry. <strong>Privacy Statement:</strong> Your information is secure with us. We respect your privacy and will only use your data to respond to your inquiry.
</p> </p>
<div className="flex flex-col sm:flex-row gap-4 justify-center"> <div className="flex flex-col sm:flex-row gap-4 justify-center">
<Button variant="outline" className="border-white/20 text-white hover:bg-white/10" onClick={() => navigateTo('/services')}> <Button variant="outline" className="border-white/20 text-white hover:bg-white/10" onClick={() => navigate('/services')}>
Explore our services Explore our services
</Button> </Button>
<Button variant="outline" className="border-white/20 text-white hover:bg-white/10" onClick={() => navigateTo('/resources/client-testimonials')}> <Button variant="outline" className="border-white/20 text-white hover:bg-white/10" onClick={() => navigate('/resources/client-testimonials')}>
Read our testimonials Read our testimonials
</Button> </Button>
</div> </div>
@@ -294,7 +296,7 @@ export const Contact = () => {
</div> </div>
</section> </section>
<Footer /> {/* <Footer /> */}
</div> </div>
); );
}; };

60
pages/ContactMain.tsx
View File

@@ -1,29 +1,35 @@
import React from "react";
import { motion } from "framer-motion"; 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 { 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 { Accordion, AccordionContent, AccordionItem, AccordionTrigger } from "../components/ui/accordion";
import { GridPattern } from "../components/GridPattern";
import { navigateTo } from "../App";
import { import {
Mail, FileCheck, Phone, UserPlus, Headphones, MapPin, MessageSquare, Calendar,
Calendar, ArrowRight, Globe, Clock, Users, Target, Send, Clock,
Coffee, Monitor, Shield, Award, Rocket FileCheck,
Globe,
Headphones,
Mail,
MapPin, MessageSquare,
Phone,
Rocket,
Send,
Shield,
Target,
UserPlus,
Users
} from "lucide-react"; } from "lucide-react";
import { FAQSection } from "../components/FAQSection";
import { Footer } from "../components/Footer";
import { Navigation } from "../components/Navigation";
import { Button } from "../components/ui/button";
import { Card, CardContent } from "../components/ui/card";
import { Checkbox } from "../components/ui/checkbox";
import { Input } from "../components/ui/input";
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "../components/ui/select";
import { ShimmerButton } from "../components/ui/shimmer-button";
import { Textarea } from "../components/ui/textarea";
import { useNavigate } from "react-router-dom";
// Enhanced Hero Section // Enhanced Hero Section
const HeroWithCTA = () => { const HeroWithCTA = () => {
const navigate = useNavigate();
return ( return (
<section className="relative py-20 overflow-hidden bg-black"> <section className="relative py-20 overflow-hidden bg-black">
<div className="container mx-auto px-6 lg:px-8"> <div className="container mx-auto px-6 lg:px-8">
@@ -64,7 +70,7 @@ const HeroWithCTA = () => {
transition={{ duration: 0.8, delay: 0.3 }} transition={{ duration: 0.8, delay: 0.3 }}
className="flex flex-col sm:flex-row gap-4" className="flex flex-col sm:flex-row gap-4"
> >
<ShimmerButton className="text-lg px-8 py-4" onClick={() => navigateTo('#contact-form')}> <ShimmerButton className="text-lg px-8 py-4" onClick={() => navigate('#contact-form')}>
<div className="inline-flex items-center gap-2"> <div className="inline-flex items-center gap-2">
<MessageSquare className="w-4 h-4 flex-shrink-0" /> <MessageSquare className="w-4 h-4 flex-shrink-0" />
<span>Send a Message</span> <span>Send a Message</span>
@@ -74,7 +80,7 @@ const HeroWithCTA = () => {
variant="secondary" variant="secondary"
size="lg" size="lg"
className="text-lg px-8 py-4" className="text-lg px-8 py-4"
onClick={() => navigateTo('/contact/schedule-a-discovery-call')} onClick={() => navigate('/contact/schedule-a-discovery-call')}
> >
<Phone className="w-4 h-4 flex-shrink-0" /> <Phone className="w-4 h-4 flex-shrink-0" />
<span>Schedule a Call</span> <span>Schedule a Call</span>
@@ -429,6 +435,7 @@ const ContactFormSection = () => {
// Updated CTA Section with new design // Updated CTA Section with new design
const InlineCTA = () => { const InlineCTA = () => {
const navigate = useNavigate();
return ( return (
<section className="py-20 bg-black"> <section className="py-20 bg-black">
<div className="container mx-auto px-6 lg:px-8"> <div className="container mx-auto px-6 lg:px-8">
@@ -471,7 +478,7 @@ const InlineCTA = () => {
<div className="flex flex-col items-start gap-4"> <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" 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')}
> >
<div className="inline-flex items-center gap-3"> <div className="inline-flex items-center gap-3">
<Calendar className="w-6 h-6 flex-shrink-0" /> <Calendar className="w-6 h-6 flex-shrink-0" />
@@ -493,6 +500,7 @@ const InlineCTA = () => {
// Office Locations Section // Office Locations Section
const OfficeLocationsSection = () => { const OfficeLocationsSection = () => {
const navigate = useNavigate();
const offices = [ const offices = [
{ {
title: "New York, USA", title: "New York, USA",
@@ -599,7 +607,7 @@ const OfficeLocationsSection = () => {
<div className="p-8 pt-0 mt-auto space-y-3"> <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" className="w-full py-3 text-sm rounded-xl shadow-lg hover:shadow-xl"
onClick={() => navigateTo(office.link)} onClick={() => navigate(office.link)}
> >
<div className="inline-flex items-center justify-center gap-2"> <div className="inline-flex items-center justify-center gap-2">
<MapPin className="w-4 h-4 flex-shrink-0" /> <MapPin className="w-4 h-4 flex-shrink-0" />
@@ -645,7 +653,7 @@ const contactFAQs = [
export function ContactMain() { export function ContactMain() {
return ( return (
<div className="dark min-h-screen bg-background"> <div className="dark min-h-screen bg-background">
<Navigation /> {/* <Navigation /> */}
<HeroWithCTA /> <HeroWithCTA />
<HorizontalTagScroller /> <HorizontalTagScroller />
<SideBySideContentWithIcons /> <SideBySideContentWithIcons />
@@ -657,7 +665,7 @@ export function ContactMain() {
subtitle="Get answers to common questions about reaching out to WDI." subtitle="Get answers to common questions about reaching out to WDI."
faqs={contactFAQs} faqs={contactFAQs}
/> />
<Footer /> {/* <Footer /> */}
</div> </div>
); );
} }

141
pages/CrossPlatformAppDevelopment.tsx
View File

@@ -41,14 +41,16 @@ import {
TabsList, TabsList,
TabsTrigger, TabsTrigger,
} from "../components/ui/tabs"; } from "../components/ui/tabs";
import { navigateTo } from "@/App"; import { useNavigate } from "react-router-dom";
import { Helmet } from "react-helmet-async"; import { Helmet } from "react-helmet-async";
import ranoutofImage from "../src/images/ranoutof.webp" import ranoutofImage from "../src/images/ranoutof.webp"
import seezunImage from "../src/images/seezun.webp"; import seezunImage from "../src/images/seezun.webp";
import regroupImage from "../src/images/regroup.webp"; import regroupImage from "../src/images/regroup.webp";
import awsLogoImage from "../src/images/aws-logo.png";
// Cross-Platform Hero Section // Cross-Platform Hero Section
const CrossPlatformHeroWithCTA = () => { const CrossPlatformHeroWithCTA = () => {
const navigate = useNavigate();
return ( return (
<section className="relative py-20 overflow-hidden bg-black"> <section className="relative py-20 overflow-hidden bg-black">
<Helmet> <Helmet>
@@ -138,7 +140,7 @@ const CrossPlatformHeroWithCTA = () => {
> >
<ShimmerButton <ShimmerButton
className="text-lg px-8 py-4" 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"> <div className="inline-flex items-center gap-2">
<Share2 className="w-5 h-5 flex-shrink-0" /> <Share2 className="w-5 h-5 flex-shrink-0" />
@@ -825,6 +827,7 @@ const CrossPlatformServices = () => {
// Cross-Platform Case Studies // Cross-Platform Case Studies
const CrossPlatformCaseStudies = () => { const CrossPlatformCaseStudies = () => {
const navigate = useNavigate();
const caseStudies = [ const caseStudies = [
{ {
title: "Household Management Revolution", title: "Household Management Revolution",
@@ -948,7 +951,7 @@ const CrossPlatformCaseStudies = () => {
variant="ghost" variant="ghost"
size="sm" 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" className="w-full justify-between text-accent hover:text-accent hover:bg-accent/10 group-hover:translate-x-1 transition-all duration-300"
onClick={() => navigateTo(study.buttonLink)} onClick={() => navigate(study.buttonLink)}
> >
<span className="text-sm font-medium"> <span className="text-sm font-medium">
VIEW CASE STUDY VIEW CASE STUDY
@@ -968,6 +971,7 @@ const CrossPlatformCaseStudies = () => {
// Mid-Page CTA // Mid-Page CTA
const CrossPlatformInlineCTA = () => { const CrossPlatformInlineCTA = () => {
const navigate = useNavigate();
return ( return (
<section className="py-20 bg-black"> <section className="py-20 bg-black">
<div className="container mx-auto px-6 lg:px-8"> <div className="container mx-auto px-6 lg:px-8">
@@ -1006,7 +1010,7 @@ const CrossPlatformInlineCTA = () => {
<ShimmerButton <ShimmerButton
className="text-xl px-10 py-5 rounded-2xl shadow-lg hover:shadow-xl" 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"> <div className="inline-flex items-center gap-3">
<Target className="w-6 h-6 flex-shrink-0" /> <Target className="w-6 h-6 flex-shrink-0" />
@@ -1019,9 +1023,98 @@ const CrossPlatformInlineCTA = () => {
</section> </section>
); );
}; };
// CrossPlatformTechStack
const CrossPlatformTechStack = () => {
const technologies = [
{
name: "React Native",
logo: "https://cdn.jsdelivr.net/gh/devicons/devicon/icons/react/react-original.svg",
},
{
name: "Flutter",
logo: "https://cdn.jsdelivr.net/gh/devicons/devicon/icons/flutter/flutter-original.svg",
},
{
name: "Xamarin",
logo: "https://cdn.jsdelivr.net/gh/devicons/devicon/icons/xamarin/xamarin-original.svg",
},
{
name: "Ionic",
logo: "https://cdn.jsdelivr.net/gh/devicons/devicon/icons/ionic/ionic-original.svg",
},
{
name: "Firebase",
logo: "https://cdn.jsdelivr.net/gh/devicons/devicon/icons/firebase/firebase-plain.svg",
},
{
name: "AWS",
logo: awsLogoImage,
},
{
name: "GraphQL / Apollo",
logo: "https://cdn.jsdelivr.net/gh/devicons/devicon/icons/graphql/graphql-plain.svg",
},
{
name: "TypeScript",
logo: "https://cdn.jsdelivr.net/gh/devicons/devicon/icons/typescript/typescript-original.svg",
},
];
return (
<section className="py-32 bg-black">
<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-20"
>
<h2 className="text-4xl lg:text-5xl font-semibold text-white mb-6">
Cross-Platform App Development Technologies
</h2>
<p className="text-xl text-gray-300 leading-relaxed">
We build seamless apps for iOS, Android, and the web using
cutting-edge cross-platform frameworks and tools.
</p>
</motion.div>
<div className="grid grid-cols-2 md:grid-cols-4 gap-8 max-w-4xl mx-auto">
{technologies.map((tech, index) => (
<motion.div
key={index}
initial={{ opacity: 0, scale: 0.8 }}
whileInView={{ opacity: 1, scale: 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"
>
<div className="w-20 h-20 bg-gray-900/50 rounded-2xl flex items-center justify-center border border-gray-800 group-hover:border-accent/30 transition-all duration-300 shadow-lg group-hover:shadow-xl mb-4">
<ImageWithFallback
src={tech.logo}
alt={tech.name}
className="w-12 h-12 object-contain"
/>
</div>
<span className="text-gray-300 text-sm group-hover:text-white transition-colors duration-300">
{tech.name}
</span>
</motion.div>
))}
</div>
</div>
</section>
);
};
export default CrossPlatformTechStack;
// Hire Cross-Platform Developers // Hire Cross-Platform Developers
const HireCrossPlatformDevelopers = () => { const HireCrossPlatformDevelopers = () => {
const navigate = useNavigate();
const developerTypes = [ const developerTypes = [
{ {
title: "Senior Flutter Developer", title: "Senior Flutter Developer",
@@ -1128,7 +1221,7 @@ const HireCrossPlatformDevelopers = () => {
className="flex flex-col sm:flex-row gap-4 justify-center" className="flex flex-col sm:flex-row gap-4 justify-center"
> >
<ShimmerButton className="px-8 py-4" <ShimmerButton className="px-8 py-4"
onClick={() => navigateTo("/hire-talent/cross-platform-developers")} onClick={() => navigate("/hire-talent/cross-platform-developers")}
> >
<div className="inline-flex items-center gap-2"> <div className="inline-flex items-center gap-2">
<UserPlus className="w-5 h-5 flex-shrink-0" /> <UserPlus className="w-5 h-5 flex-shrink-0" />
@@ -1224,6 +1317,7 @@ const CrossPlatformFAQs = () => {
// Final CTA Section // Final CTA Section
const CrossPlatformFinalCTA = () => { const CrossPlatformFinalCTA = () => {
const navigate = useNavigate();
return ( return (
<section className="py-20 relative overflow-hidden"> <section className="py-20 relative overflow-hidden">
<div className="container mx-auto px-6 lg:px-8 relative z-10"> <div className="container mx-auto px-6 lg:px-8 relative z-10">
@@ -1282,7 +1376,7 @@ const CrossPlatformFinalCTA = () => {
> >
<ShimmerButton <ShimmerButton
className="px-12 py-6 text-xl rounded-2xl shadow-2xl hover:shadow-accent/25" 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"> <div className="inline-flex items-center gap-3">
<Rocket className="w-6 h-6 flex-shrink-0" /> <Rocket className="w-6 h-6 flex-shrink-0" />
@@ -1311,7 +1405,7 @@ const CrossPlatformFinalCTA = () => {
export const CrossPlatformAppDevelopment = () => { export const CrossPlatformAppDevelopment = () => {
return ( return (
<div className="dark min-h-screen"> <div className="dark min-h-screen">
<Navigation /> {/* <Navigation /> */}
{/* Hero Section */} {/* Hero Section */}
<section className="bg-black"> <section className="bg-black">
@@ -1323,29 +1417,34 @@ export const CrossPlatformAppDevelopment = () => {
<CrossPlatformBenefits /> <CrossPlatformBenefits />
</section> </section>
{/* Case Studies */}
<section className="bg-black">
<CrossPlatformCaseStudies />
</section>
{/* Technologies */} {/* Technologies */}
<section className="bg-card"> <section className="bg-background">
<CrossPlatformTechnologies /> <CrossPlatformTechnologies />
</section> </section>
{/* Development Process */} {/* Development Process */}
<section className="bg-background"> <section className="bg-black">
<CrossPlatformProcess /> <CrossPlatformProcess />
</section> </section>
{/* Services */} {/* Services */}
<section className="bg-card"> <section className="bg-background">
<CrossPlatformServices /> <CrossPlatformServices />
</section> </section>
{/* Case Studies */}
<section className="bg-background">
<CrossPlatformCaseStudies />
</section>
{/* Mid-Page CTA */} {/* Mid-Page CTA */}
<section className="bg-card"> {/* <section className="bg-card">
<CrossPlatformInlineCTA /> <CrossPlatformInlineCTA />
</section> */}
{/* cross platform tech */}
<section className="bg-black">
<CrossPlatformTechStack />
</section> </section>
{/* Hire Developers */} {/* Hire Developers */}
@@ -1354,18 +1453,18 @@ export const CrossPlatformAppDevelopment = () => {
</section> </section>
{/* FAQs */} {/* FAQs */}
<section className="bg-card"> {/* <section className="bg-card">
<CrossPlatformFAQs /> <CrossPlatformFAQs />
</section> </section> */}
{/* Final CTA */} {/* Final CTA */}
<section className="bg-background"> <section className="bg-black">
<CrossPlatformFinalCTA /> <CrossPlatformFinalCTA />
</section> </section>
{/* Footer */} {/* Footer */}
<section className="bg-card"> <section className="bg-background">
<Footer /> {/* <Footer /> */}
</section> </section>
</div> </div>
); );

4
pages/CultureValues.tsx
View File

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

25
pages/CustomMLModelDevelopment.tsx
View File

@@ -42,11 +42,13 @@ import { Badge } from "../components/ui/badge";
import { Button } from "../components/ui/button"; import { Button } from "../components/ui/button";
import { Card, CardContent } from "../components/ui/card"; import { Card, CardContent } from "../components/ui/card";
import { ShimmerButton } from "../components/ui/shimmer-button"; import { ShimmerButton } from "../components/ui/shimmer-button";
import { navigateTo } from "@/App"; import { useNavigate } from "react-router-dom";
import { Helmet } from "react-helmet-async"; import { Helmet } from "react-helmet-async";
import { AIStrategyTargetAudience } from "./AIStrategyConsulting";
// Custom ML Model Development Hero Section // Custom ML Model Development Hero Section
const CustomMLHeroWithCTA = () => { const CustomMLHeroWithCTA = () => {
const navigate = useNavigate();
return ( return (
<section className="relative py-20 overflow-hidden bg-black"> <section className="relative py-20 overflow-hidden bg-black">
<Helmet> <Helmet>
@@ -135,7 +137,7 @@ const CustomMLHeroWithCTA = () => {
> >
<ShimmerButton <ShimmerButton
className="text-lg px-8 py-4" 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"> <div className="inline-flex items-center gap-2">
<Brain className="w-5 h-5 flex-shrink-0" /> <Brain className="w-5 h-5 flex-shrink-0" />
@@ -1126,6 +1128,7 @@ const CustomMLCaseStudies = () => {
// Mid-Page CTA // Mid-Page CTA
const CustomMLInlineCTA = () => { const CustomMLInlineCTA = () => {
const navigate = useNavigate();
return ( return (
<section className="py-20 bg-black"> <section className="py-20 bg-black">
<div className="container mx-auto px-6 lg:px-8"> <div className="container mx-auto px-6 lg:px-8">
@@ -1164,7 +1167,7 @@ const CustomMLInlineCTA = () => {
<ShimmerButton <ShimmerButton
className="text-xl px-10 py-5 rounded-2xl shadow-lg hover:shadow-xl" 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"> <div className="inline-flex items-center gap-3">
<MessageSquare className="w-6 h-6 flex-shrink-0" /> <MessageSquare className="w-6 h-6 flex-shrink-0" />
@@ -1431,6 +1434,7 @@ const CustomMLFAQs = () => {
// Final CTA Section // Final CTA Section
const CustomMLFinalCTA = () => { const CustomMLFinalCTA = () => {
const navigate = useNavigate();
return ( return (
<section className="py-20 relative overflow-hidden"> <section className="py-20 relative overflow-hidden">
<div className="container mx-auto px-6 lg:px-8 relative z-10"> <div className="container mx-auto px-6 lg:px-8 relative z-10">
@@ -1483,7 +1487,7 @@ const CustomMLFinalCTA = () => {
> >
<ShimmerButton <ShimmerButton
className="px-12 py-6 text-xl rounded-2xl shadow-2xl hover:shadow-accent/25" 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"> <div className="inline-flex items-center gap-3">
<Brain className="w-6 h-6 flex-shrink-0" /> <Brain className="w-6 h-6 flex-shrink-0" />
@@ -1513,7 +1517,7 @@ const CustomMLFinalCTA = () => {
export const CustomMLModelDevelopment = () => { export const CustomMLModelDevelopment = () => {
return ( return (
<div className="dark min-h-screen"> <div className="dark min-h-screen">
<Navigation /> {/* <Navigation /> */}
{/* Hero Section */} {/* Hero Section */}
<section className="bg-black"> <section className="bg-black">
@@ -1525,6 +1529,11 @@ export const CustomMLModelDevelopment = () => {
<CustomMLBenefits /> <CustomMLBenefits />
</section> </section>
{/* Tech Stack */}
<section className="bg-card">
<CustomMLTechStack />
</section>
{/* Development Process */} {/* Development Process */}
<section className="bg-card"> <section className="bg-card">
<CustomMLDevelopmentProcess /> <CustomMLDevelopmentProcess />
@@ -1535,9 +1544,9 @@ export const CustomMLModelDevelopment = () => {
<CustomMLServices /> <CustomMLServices />
</section> </section>
{/* Tech Stack */} {/* Target Audience */}
<section className="bg-card"> <section className="bg-card">
<CustomMLTechStack /> <AIStrategyTargetAudience />
</section> </section>
{/* Case Studies */} {/* Case Studies */}
@@ -1567,7 +1576,7 @@ export const CustomMLModelDevelopment = () => {
{/* Footer */} {/* Footer */}
<section className="bg-card"> <section className="bg-card">
<Footer /> {/* <Footer /> */}
</section> </section>
</div> </div>
); );

37
pages/CustomWebAppDevelopment.tsx
View File

@@ -46,11 +46,12 @@ import { Card, CardContent } from "../components/ui/card";
import { ShimmerButton } from "../components/ui/shimmer-button"; import { ShimmerButton } from "../components/ui/shimmer-button";
import patientManagementPortal from "../src/images/patient-management-portal.webp"; import patientManagementPortal from "../src/images/patient-management-portal.webp";
import awsLogo from "../src/images/aws-logo.png"; import awsLogo from "../src/images/aws-logo.png";
import { navigateTo } from "@/App"; import { useNavigate } from "react-router-dom";
import { Helmet } from "react-helmet-async"; import { Helmet } from "react-helmet-async";
// Custom Web App Development Hero Section // Custom Web App Development Hero Section
const CustomWebAppHeroWithCTA = () => { const CustomWebAppHeroWithCTA = () => {
const navigate = useNavigate();
return ( return (
<section className="relative py-20 overflow-hidden bg-black"> <section className="relative py-20 overflow-hidden bg-black">
<Helmet> <Helmet>
@@ -140,7 +141,7 @@ const CustomWebAppHeroWithCTA = () => {
> >
<ShimmerButton <ShimmerButton
className="text-lg px-8 py-4" 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"> <div className="inline-flex items-center gap-2">
<MessageSquare className="w-5 h-5 flex-shrink-0" /> <MessageSquare className="w-5 h-5 flex-shrink-0" />
@@ -1023,6 +1024,7 @@ const WebAppCaseStudies = () => {
// Mid-Page CTA // Mid-Page CTA
const WebAppInlineCTA = () => { const WebAppInlineCTA = () => {
const navigate = useNavigate();
return ( return (
<section className="py-20"> <section className="py-20">
<div className="container mx-auto px-6 lg:px-8"> <div className="container mx-auto px-6 lg:px-8">
@@ -1061,7 +1063,7 @@ const WebAppInlineCTA = () => {
<ShimmerButton <ShimmerButton
className="text-xl px-10 py-5 rounded-2xl shadow-lg hover:shadow-xl" 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"> <div className="inline-flex items-center gap-3">
<MessageSquare className="w-6 h-6 flex-shrink-0" /> <MessageSquare className="w-6 h-6 flex-shrink-0" />
@@ -1077,6 +1079,7 @@ const WebAppInlineCTA = () => {
// Hire Web App Developers // Hire Web App Developers
const HireWebDevelopers = () => { const HireWebDevelopers = () => {
const navigate = useNavigate();
const developerTypes = [ const developerTypes = [
{ {
title: "Frontend Specialists", title: "Frontend Specialists",
@@ -1208,7 +1211,7 @@ const HireWebDevelopers = () => {
> >
<div className="flex flex-col sm:flex-row gap-4 justify-center"> <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={() => navigateTo("/hire-talent/custom-web-app-developers")} onClick={() => navigate("/hire-talent/custom-web-app-developers")}
> >
<div className="inline-flex items-center gap-2"> <div className="inline-flex items-center gap-2">
<Users className="w-5 h-5 flex-shrink-0" /> <Users className="w-5 h-5 flex-shrink-0" />
@@ -1234,6 +1237,7 @@ const HireWebDevelopers = () => {
// Custom Web App FAQs // Custom Web App FAQs
const CustomWebAppFAQs = () => { const CustomWebAppFAQs = () => {
const navigate = useNavigate();
const faqs = [ const faqs = [
{ {
question: "How long does it take to develop a custom web app?", question: "How long does it take to develop a custom web app?",
@@ -1305,6 +1309,7 @@ const CustomWebAppFAQs = () => {
// Final CTA Section // Final CTA Section
const CustomWebAppFinalCTA = () => { const CustomWebAppFinalCTA = () => {
const navigate = useNavigate();
return ( return (
<section className="py-20 relative overflow-hidden"> <section className="py-20 relative overflow-hidden">
<div className="container mx-auto px-6 lg:px-8 relative z-10"> <div className="container mx-auto px-6 lg:px-8 relative z-10">
@@ -1357,7 +1362,7 @@ const CustomWebAppFinalCTA = () => {
> >
<ShimmerButton <ShimmerButton
className="px-12 py-6 text-xl rounded-2xl shadow-2xl hover:shadow-accent/25" 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"> <div className="inline-flex items-center gap-3">
<Rocket className="w-6 h-6 flex-shrink-0" /> <Rocket className="w-6 h-6 flex-shrink-0" />
@@ -1386,7 +1391,7 @@ const CustomWebAppFinalCTA = () => {
export const CustomWebAppDevelopment = () => { export const CustomWebAppDevelopment = () => {
return ( return (
<div className="dark min-h-screen"> <div className="dark min-h-screen">
<Navigation /> {/* <Navigation /> */}
{/* Hero Section */} {/* Hero Section */}
<section className="bg-black"> <section className="bg-black">
@@ -1398,6 +1403,11 @@ export const CustomWebAppDevelopment = () => {
<CustomWebAppBenefits /> <CustomWebAppBenefits />
</section> </section>
{/* Case Studies */}
<section className="bg-background">
<WebAppCaseStudies />
</section>
{/* Development Process */} {/* Development Process */}
<section className="bg-card"> <section className="bg-card">
<CustomWebAppProcess /> <CustomWebAppProcess />
@@ -1413,15 +1423,10 @@ export const CustomWebAppDevelopment = () => {
<WebAppTechStack /> <WebAppTechStack />
</section> </section>
{/* Case Studies */}
<section className="bg-background">
<WebAppCaseStudies />
</section>
{/* Mid-Page CTA */} {/* Mid-Page CTA */}
<section className="bg-card"> {/* <section className="bg-card">
<WebAppInlineCTA /> <WebAppInlineCTA />
</section> </section> */}
{/* Hire Developers */} {/* Hire Developers */}
<section className="bg-background"> <section className="bg-background">
@@ -1429,9 +1434,9 @@ export const CustomWebAppDevelopment = () => {
</section> </section>
{/* FAQs */} {/* FAQs */}
<section className="bg-card"> {/* <section className="bg-card">
<CustomWebAppFAQs /> <CustomWebAppFAQs />
</section> </section> */}
{/* Final CTA */} {/* Final CTA */}
<section className="bg-background"> <section className="bg-background">
@@ -1440,7 +1445,7 @@ export const CustomWebAppDevelopment = () => {
{/* Footer */} {/* Footer */}
<section > <section >
<Footer /> {/* <Footer /> */}
</section> </section>
</div> </div>
); );

10
pages/DedicatedDevelopmentTeams.tsx
View File

@@ -18,7 +18,7 @@ import {
Star, Star,
UsersRound, UsersRound,
} from "lucide-react"; } from "lucide-react";
import { navigateTo } from "@/App"; import { useNavigate } from "react-router-dom";
import { Helmet } from "react-helmet-async"; import { Helmet } from "react-helmet-async";
import { TeamCollaborationVector } from "@/components/vectors"; import { TeamCollaborationVector } from "@/components/vectors";
import { HireTalentHeroBanner } from "@/components/HireTalentHeroBanner"; import { HireTalentHeroBanner } from "@/components/HireTalentHeroBanner";
@@ -138,9 +138,11 @@ export const DedicatedDevelopmentTeams = () => {
}, },
]; ];
const navigate = useNavigate();
return ( return (
<div className="dark min-h-screen bg-background"> <div className="dark min-h-screen bg-background">
<Navigation /> {/* <Navigation /> */}
<Helmet> <Helmet>
{/* Page Title and Meta Description */} {/* Page Title and Meta Description */}
@@ -370,7 +372,7 @@ export const DedicatedDevelopmentTeams = () => {
<Button <Button
size="lg" size="lg"
className="bg-[#E5195E] hover:bg-[#E5195E]/90 text-white" className="bg-[#E5195E] hover:bg-[#E5195E]/90 text-white"
onClick={() => navigateTo("/start-a-project")} onClick={() => navigate("/start-a-project")}
> >
Start Building Your Team Start Building Your Team
<ArrowRight className="ml-2 w-4 h-4" /> <ArrowRight className="ml-2 w-4 h-4" />
@@ -387,7 +389,7 @@ export const DedicatedDevelopmentTeams = () => {
</div> </div>
</section> </section>
<Footer /> {/* <Footer /> */}
</div> </div>
); );
}; };

15
pages/DedicatedOffshoreODC.tsx
View File

@@ -42,11 +42,12 @@ import { Badge } from "../components/ui/badge";
import { Button } from "../components/ui/button"; import { Button } from "../components/ui/button";
import { Card, CardContent } from "../components/ui/card"; import { Card, CardContent } from "../components/ui/card";
import { ShimmerButton } from "../components/ui/shimmer-button"; import { ShimmerButton } from "../components/ui/shimmer-button";
import { navigateTo } from "@/App"; import { useNavigate } from "react-router-dom";
import { Helmet } from "react-helmet-async"; import { Helmet } from "react-helmet-async";
// Dedicated Offshore Development Centers Hero Section // Dedicated Offshore Development Centers Hero Section
const DedicatedOffshoreODCHero = () => { const DedicatedOffshoreODCHero = () => {
const navigate = useNavigate();
return ( return (
<section className="relative py-20 overflow-hidden bg-black"> <section className="relative py-20 overflow-hidden bg-black">
<Helmet> <Helmet>
@@ -136,7 +137,7 @@ const DedicatedOffshoreODCHero = () => {
> >
<ShimmerButton <ShimmerButton
className="text-lg px-8 py-4" 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"> <div className="inline-flex items-center gap-2">
<MessageSquare className="w-5 h-5 flex-shrink-0" /> <MessageSquare className="w-5 h-5 flex-shrink-0" />
@@ -1257,6 +1258,7 @@ const DedicatedOffshoreODCCaseStudies = () => {
// Mid-Page Lead Capture CTA // Mid-Page Lead Capture CTA
const DedicatedOffshoreODCInlineCTA = () => { const DedicatedOffshoreODCInlineCTA = () => {
const navigate = useNavigate();
return ( return (
<section className="py-20"> <section className="py-20">
<div className="container mx-auto px-6 lg:px-8"> <div className="container mx-auto px-6 lg:px-8">
@@ -1295,7 +1297,7 @@ const DedicatedOffshoreODCInlineCTA = () => {
<ShimmerButton <ShimmerButton
className="text-xl px-10 py-5 rounded-2xl shadow-lg hover:shadow-xl" 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"> <div className="inline-flex items-center gap-3">
<Wand2 className="w-6 h-6 flex-shrink-0" /> <Wand2 className="w-6 h-6 flex-shrink-0" />
@@ -1387,6 +1389,7 @@ const DedicatedOffshoreODCFAQs = () => {
// Final CTA Section // Final CTA Section
const DedicatedOffshoreODCFinalCTA = () => { const DedicatedOffshoreODCFinalCTA = () => {
const navigate = useNavigate();
return ( return (
<section className="py-20 relative overflow-hidden"> <section className="py-20 relative overflow-hidden">
<div className="container mx-auto px-6 lg:px-8 relative z-10"> <div className="container mx-auto px-6 lg:px-8 relative z-10">
@@ -1440,7 +1443,7 @@ const DedicatedOffshoreODCFinalCTA = () => {
> >
<ShimmerButton <ShimmerButton
className="px-12 py-6 text-xl rounded-2xl shadow-2xl hover:shadow-accent/25" 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"> <div className="inline-flex items-center gap-3">
<Calendar className="w-6 h-6 flex-shrink-0" /> <Calendar className="w-6 h-6 flex-shrink-0" />
@@ -1470,7 +1473,7 @@ const DedicatedOffshoreODCFinalCTA = () => {
export const DedicatedOffshoreODC = () => { export const DedicatedOffshoreODC = () => {
return ( return (
<div className="dark min-h-screen"> <div className="dark min-h-screen">
<Navigation /> {/* <Navigation /> */}
{/* Hero Section */} {/* Hero Section */}
<section className="bg-black"> <section className="bg-black">
@@ -1524,7 +1527,7 @@ export const DedicatedOffshoreODC = () => {
{/* Footer */} {/* Footer */}
<section className="bg-card"> <section className="bg-card">
<Footer /> {/* <Footer /> */}
</section> </section>
</div> </div>
); );

22
pages/DesignExperience.tsx
View File

@@ -13,7 +13,6 @@ import {
UserPlus, UserPlus,
Users Users
} from "lucide-react"; } from "lucide-react";
import { navigateTo } from "../App";
import { FAQSection } from "../components/FAQSection"; import { FAQSection } from "../components/FAQSection";
import { Footer } from "../components/Footer"; import { Footer } from "../components/Footer";
import { Navigation } from "../components/Navigation"; import { Navigation } from "../components/Navigation";
@@ -23,9 +22,11 @@ import { Button } from "../components/ui/button";
import { Card, CardContent } from "../components/ui/card"; import { Card, CardContent } from "../components/ui/card";
import { ShimmerButton } from "../components/ui/shimmer-button"; import { ShimmerButton } from "../components/ui/shimmer-button";
import { Helmet } from "react-helmet-async"; import { Helmet } from "react-helmet-async";
import { useNavigate } from "react-router-dom";
// Enhanced Hero Section // Enhanced Hero Section
const HeroWithCTA = () => { const HeroWithCTA = () => {
const navigate = useNavigate();
return ( return (
<section className="relative py-20 overflow-hidden bg-black"> <section className="relative py-20 overflow-hidden bg-black">
<Helmet> <Helmet>
@@ -119,7 +120,7 @@ const HeroWithCTA = () => {
> >
<ShimmerButton <ShimmerButton
className="h-14 px-8 text-lg font-medium rounded-lg shadow-lg hover:shadow-xl transition-all duration-300" className="h-14 px-8 text-lg font-medium rounded-lg shadow-lg hover:shadow-xl transition-all duration-300"
onClick={() => navigateTo('/start-a-project')} onClick={() => navigate('/start-a-project')}
> >
<div className="inline-flex items-center gap-2"> <div className="inline-flex items-center gap-2">
<Calendar className="w-5 h-5 flex-shrink-0" /> <Calendar className="w-5 h-5 flex-shrink-0" />
@@ -129,7 +130,7 @@ const HeroWithCTA = () => {
<Button <Button
variant="secondary" variant="secondary"
className="h-14 px-8 text-lg font-medium rounded-lg bg-white/10 hover:bg-white/20 text-white border-white/20 hover:border-white/30 shadow-lg hover:shadow-xl transition-all duration-300" className="h-14 px-8 text-lg font-medium rounded-lg bg-white/10 hover:bg-white/20 text-white border-white/20 hover:border-white/30 shadow-lg hover:shadow-xl transition-all duration-300"
onClick={() => navigateTo('/case-studies')} onClick={() => navigate('/case-studies')}
> >
<Eye className="w-5 h-5 flex-shrink-0" /> <Eye className="w-5 h-5 flex-shrink-0" />
<span>View Design Portfolio</span> <span>View Design Portfolio</span>
@@ -360,6 +361,7 @@ const SideBySideContentWithIcons = () => {
// Service Categories Grid // Service Categories Grid
const TabbedServiceDisplay = () => { const TabbedServiceDisplay = () => {
const navigate = useNavigate();
const services = [ const services = [
{ {
title: "UI/UX Design", title: "UI/UX Design",
@@ -435,7 +437,7 @@ const TabbedServiceDisplay = () => {
viewport={{ once: true }} viewport={{ once: true }}
whileHover={{ y: -5 }} whileHover={{ y: -5 }}
className="group cursor-pointer" 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="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="flex flex-col items-start space-y-6">
@@ -464,6 +466,7 @@ const TabbedServiceDisplay = () => {
// Updated CTA Section with new design // Updated CTA Section with new design
const InlineCTA = () => { const InlineCTA = () => {
const navigate = useNavigate();
return ( return (
<section className="py-20 bg-black"> <section className="py-20 bg-black">
<div className="container mx-auto px-6 lg:px-8"> <div className="container mx-auto px-6 lg:px-8">
@@ -506,8 +509,8 @@ const InlineCTA = () => {
<div className="flex flex-col items-center gap-4"> <div className="flex flex-col items-center gap-4">
<ShimmerButton <ShimmerButton
className="text-xl px-10 py-5 rounded-2xl shadow-lg hover:shadow-xl bg-[#E5195E] hover:bg-[#E5195E]/90" 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={() => navigateTo("/start-a-project")} onClick={() => navigate("/start-a-project")}
> >
<div className="inline-flex items-center gap-3"> <div className="inline-flex items-center gap-3">
<PenTool className="w-6 h-6 flex-shrink-0" /> <PenTool className="w-6 h-6 flex-shrink-0" />
@@ -529,6 +532,7 @@ const InlineCTA = () => {
// Design Specialists Section // Design Specialists Section
const HireDevelopersSection = () => { const HireDevelopersSection = () => {
const navigate = useNavigate();
const specialists = [ const specialists = [
{ {
title: "UI/UX Designers", title: "UI/UX Designers",
@@ -637,7 +641,7 @@ const HireDevelopersSection = () => {
<div className="p-8 pt-0 mt-auto space-y-3"> <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" 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"> <div className="inline-flex items-center justify-center gap-2">
<UserPlus className="w-4 h-4 flex-shrink-0" /> <UserPlus className="w-4 h-4 flex-shrink-0" />
@@ -683,7 +687,7 @@ const designExperienceFAQs = [
export function DesignExperience() { export function DesignExperience() {
return ( return (
<div className="dark min-h-screen bg-background"> <div className="dark min-h-screen bg-background">
<Navigation /> {/* <Navigation /> */}
<HeroWithCTA /> <HeroWithCTA />
<HorizontalTagScroller /> <HorizontalTagScroller />
<SideBySideContentWithIcons /> <SideBySideContentWithIcons />
@@ -696,7 +700,7 @@ export function DesignExperience() {
subtitle="Get answers to common questions about our design and user experience services." subtitle="Get answers to common questions about our design and user experience services."
faqs={designExperienceFAQs} faqs={designExperienceFAQs}
/> />
<Footer /> {/* <Footer /> */}
</div> </div>
); );
} }

43
pages/DesignThinkingWorkshops.tsx
View File

@@ -42,11 +42,12 @@ import { Badge } from "../components/ui/badge";
import { Button } from "../components/ui/button"; import { Button } from "../components/ui/button";
import { Card, CardContent } from "../components/ui/card"; import { Card, CardContent } from "../components/ui/card";
import { ShimmerButton } from "../components/ui/shimmer-button"; import { ShimmerButton } from "../components/ui/shimmer-button";
import { navigateTo } from "@/App"; import { useNavigate } from "react-router-dom";
import { Helmet } from "react-helmet-async"; import { Helmet } from "react-helmet-async";
// Design Thinking Workshops Hero Section // Design Thinking Workshops Hero Section
const WorkshopsHeroWithCTA = () => { const WorkshopsHeroWithCTA = () => {
const navigate = useNavigate();
return ( return (
<section className="relative py-20 overflow-hidden bg-black"> <section className="relative py-20 overflow-hidden bg-black">
<Helmet> <Helmet>
@@ -137,7 +138,7 @@ const WorkshopsHeroWithCTA = () => {
> >
<ShimmerButton <ShimmerButton
className="text-lg px-8 py-4" 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"> <div className="inline-flex items-center gap-2">
<Calendar className="w-5 h-5 flex-shrink-0" /> <Calendar className="w-5 h-5 flex-shrink-0" />
@@ -914,6 +915,7 @@ const TargetAudience = () => {
// Workshop Case Studies // Workshop Case Studies
const WorkshopCaseStudies = () => { const WorkshopCaseStudies = () => {
const navigate = useNavigate();
const caseStudies = [ const caseStudies = [
{ {
title: "FinTech Product Strategy Workshop", title: "FinTech Product Strategy Workshop",
@@ -1050,6 +1052,7 @@ const WorkshopCaseStudies = () => {
// Mid-Page CTA // Mid-Page CTA
const WorkshopInlineCTA = () => { const WorkshopInlineCTA = () => {
const navigate = useNavigate();
return ( return (
<section className="py-20 bg-black"> <section className="py-20 bg-black">
<div className="container mx-auto px-6 lg:px-8"> <div className="container mx-auto px-6 lg:px-8">
@@ -1088,7 +1091,7 @@ const WorkshopInlineCTA = () => {
<ShimmerButton <ShimmerButton
className="text-xl px-10 py-5 rounded-2xl shadow-lg hover:shadow-xl" 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"> <div className="inline-flex items-center gap-3">
<Send className="w-6 h-6 flex-shrink-0" /> <Send className="w-6 h-6 flex-shrink-0" />
@@ -1104,6 +1107,7 @@ const WorkshopInlineCTA = () => {
// Hire Design Thinking Facilitators // Hire Design Thinking Facilitators
const HireFacilitators = () => { const HireFacilitators = () => {
const navigate = useNavigate();
const facilitatorTypes = [ const facilitatorTypes = [
{ {
title: "Senior UX Strategists", title: "Senior UX Strategists",
@@ -1254,7 +1258,7 @@ const HireFacilitators = () => {
> >
<div className="flex flex-col sm:flex-row gap-4 justify-center"> <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={() => navigateTo("/hire-talent/design-thinking-workshops-developers")} onClick={() => navigate("/hire-talent/design-thinking-workshops-developers")}
> >
<div className="inline-flex items-center gap-2"> <div className="inline-flex items-center gap-2">
<UserPlus className="w-5 h-5 flex-shrink-0" /> <UserPlus className="w-5 h-5 flex-shrink-0" />
@@ -1351,6 +1355,7 @@ const WorkshopFAQs = () => {
// Final CTA Section // Final CTA Section
const WorkshopFinalCTA = () => { const WorkshopFinalCTA = () => {
const navigate = useNavigate();
return ( return (
<section className="py-20 relative overflow-hidden"> <section className="py-20 relative overflow-hidden">
<div className="container mx-auto px-6 lg:px-8 relative z-10"> <div className="container mx-auto px-6 lg:px-8 relative z-10">
@@ -1403,7 +1408,7 @@ const WorkshopFinalCTA = () => {
> >
<ShimmerButton <ShimmerButton
className="px-12 py-6 text-xl rounded-2xl shadow-2xl hover:shadow-accent/25" 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"> <div className="inline-flex items-center gap-3">
<Users className="w-6 h-6 flex-shrink-0" /> <Users className="w-6 h-6 flex-shrink-0" />
@@ -1433,7 +1438,7 @@ const WorkshopFinalCTA = () => {
export const DesignThinkingWorkshops = () => { export const DesignThinkingWorkshops = () => {
return ( return (
<div className="dark min-h-screen"> <div className="dark min-h-screen">
<Navigation /> {/* <Navigation /> */}
{/* Hero Section */} {/* Hero Section */}
<section className="bg-black"> <section className="bg-black">
@@ -1441,12 +1446,17 @@ export const DesignThinkingWorkshops = () => {
</section> </section>
{/* Benefits */} {/* Benefits */}
<section className="bg-background"> <section className="bg-card">
<WorkshopBenefits /> <WorkshopBenefits />
</section> </section>
{/* Case Studies */}
<section className="bg-background">
<WorkshopCaseStudies />
</section>
{/* Design Thinking Approach */} {/* Design Thinking Approach */}
<section className="bg-card"> <section className="bg-background">
<DesignThinkingApproach /> <DesignThinkingApproach />
</section> </section>
@@ -1460,15 +1470,10 @@ export const DesignThinkingWorkshops = () => {
<TargetAudience /> <TargetAudience />
</section> </section>
{/* Case Studies */}
<section className="bg-background">
<WorkshopCaseStudies />
</section>
{/* Mid-Page CTA */} {/* Mid-Page CTA */}
<section className="bg-card"> {/* <section className="bg-card">
<WorkshopInlineCTA /> <WorkshopInlineCTA />
</section> </section> */}
{/* Hire Facilitators */} {/* Hire Facilitators */}
<section className="bg-background"> <section className="bg-background">
@@ -1476,9 +1481,9 @@ export const DesignThinkingWorkshops = () => {
</section> </section>
{/* FAQs */} {/* FAQs */}
<section className="bg-card"> {/* <section className="bg-card">
<WorkshopFAQs /> <WorkshopFAQs />
</section> </section> */}
{/* Final CTA */} {/* Final CTA */}
<section className="bg-background"> <section className="bg-background">
@@ -1486,8 +1491,8 @@ export const DesignThinkingWorkshops = () => {
</section> </section>
{/* Footer */} {/* Footer */}
<section className="bg-card"> <section className="bg-background">
<Footer /> {/* <Footer /> */}
</section> </section>
</div> </div>
); );

15
pages/DigitalProductDevelopment.tsx
View File

@@ -35,11 +35,12 @@ import { Badge } from "../components/ui/badge";
import { Button } from "../components/ui/button"; import { Button } from "../components/ui/button";
import { Card, CardContent } from "../components/ui/card"; import { Card, CardContent } from "../components/ui/card";
import { ShimmerButton } from "../components/ui/shimmer-button"; import { ShimmerButton } from "../components/ui/shimmer-button";
import { navigateTo } from "@/App"; import { useNavigate } from "react-router-dom";
import { Helmet } from "react-helmet-async"; import { Helmet } from "react-helmet-async";
// Digital Product Development Hero Section // Digital Product Development Hero Section
const DigitalProductDevelopmentHero = () => { const DigitalProductDevelopmentHero = () => {
const navigate = useNavigate();
return ( return (
<section className="relative py-20 overflow-hidden bg-black"> <section className="relative py-20 overflow-hidden bg-black">
<Helmet> <Helmet>
@@ -129,7 +130,7 @@ const DigitalProductDevelopmentHero = () => {
> >
<ShimmerButton <ShimmerButton
className="text-lg px-8 py-4" 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"> <div className="inline-flex items-center gap-2">
<MessageSquare className="w-5 h-5 flex-shrink-0" /> <MessageSquare className="w-5 h-5 flex-shrink-0" />
@@ -1134,6 +1135,7 @@ const DigitalProductCaseStudies = () => {
// Mid-Page Lead Capture CTA // Mid-Page Lead Capture CTA
const DigitalProductInlineCTA = () => { const DigitalProductInlineCTA = () => {
const navigate = useNavigate();
return ( return (
<section className="py-20"> <section className="py-20">
<div className="container mx-auto px-6 lg:px-8"> <div className="container mx-auto px-6 lg:px-8">
@@ -1171,7 +1173,7 @@ const DigitalProductInlineCTA = () => {
<ShimmerButton <ShimmerButton
className="text-xl px-10 py-5 rounded-2xl shadow-lg hover:shadow-xl" 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"> <div className="inline-flex items-center gap-3">
<Calendar className="w-6 h-6 flex-shrink-0" /> <Calendar className="w-6 h-6 flex-shrink-0" />
@@ -1261,6 +1263,7 @@ const DigitalProductFAQs = () => {
// Final CTA Section // Final CTA Section
const DigitalProductFinalCTA = () => { const DigitalProductFinalCTA = () => {
const navigate = useNavigate();
return ( return (
<section className="py-20 relative overflow-hidden bg-black"> <section className="py-20 relative overflow-hidden bg-black">
<div className="container mx-auto px-6 lg:px-8 relative z-10"> <div className="container mx-auto px-6 lg:px-8 relative z-10">
@@ -1313,7 +1316,7 @@ const DigitalProductFinalCTA = () => {
> >
<ShimmerButton <ShimmerButton
className="px-12 py-6 text-xl rounded-2xl shadow-2xl hover:shadow-accent/25" 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"> <div className="inline-flex items-center gap-3">
<Calendar className="w-6 h-6 flex-shrink-0" /> <Calendar className="w-6 h-6 flex-shrink-0" />
@@ -1342,7 +1345,7 @@ const DigitalProductFinalCTA = () => {
export const DigitalProductDevelopment = () => { export const DigitalProductDevelopment = () => {
return ( return (
<div className="dark min-h-screen"> <div className="dark min-h-screen">
<Navigation /> {/* <Navigation /> */}
{/* Hero Section */} {/* Hero Section */}
<section className="bg-black"> <section className="bg-black">
@@ -1396,7 +1399,7 @@ export const DigitalProductDevelopment = () => {
{/* Footer */} {/* Footer */}
<section className="bg-card"> <section className="bg-card">
<Footer /> {/* <Footer /> */}
</section> </section>
</div> </div>
); );

4
pages/EcommerceMarketplaces.tsx
View File

@@ -467,7 +467,7 @@ const ecommerceFAQs = [
export const EcommerceMarketplaces = () => { export const EcommerceMarketplaces = () => {
return ( return (
<div className="min-h-screen bg-[#0E0E0E]"> <div className="min-h-screen bg-[#0E0E0E]">
<Navigation /> {/* <Navigation /> */}
<HeroBanner <HeroBanner
category="Commerce & Consumer" category="Commerce & Consumer"
@@ -508,7 +508,7 @@ export const EcommerceMarketplaces = () => {
<SplitCallToAction /> <SplitCallToAction />
</div> </div>
<Footer /> {/* <Footer /> */}
</div> </div>
); );
}; };

38
pages/EcommercePlatforms.tsx
View File

@@ -47,11 +47,12 @@ import { Button } from "../components/ui/button";
import { Card, CardContent } from "../components/ui/card"; import { Card, CardContent } from "../components/ui/card";
import { ShimmerButton } from "../components/ui/shimmer-button"; import { ShimmerButton } from "../components/ui/shimmer-button";
import multiVendorImage from "../src/images/multifood.webp"; import multiVendorImage from "../src/images/multifood.webp";
import { navigateTo } from "@/App"; import { useNavigate } from "react-router-dom";
import { Helmet } from "react-helmet-async"; import { Helmet } from "react-helmet-async";
// eCommerce Platforms Hero Section // eCommerce Platforms Hero Section
const EcommerceHeroWithCTA = () => { const EcommerceHeroWithCTA = () => {
const navigate = useNavigate();
return ( return (
<section className="relative py-20 overflow-hidden bg-black"> <section className="relative py-20 overflow-hidden bg-black">
<Helmet> <Helmet>
@@ -141,7 +142,7 @@ const EcommerceHeroWithCTA = () => {
> >
<ShimmerButton <ShimmerButton
className="text-lg px-8 py-4" 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"> <div className="inline-flex items-center gap-2">
<Store className="w-5 h-5 flex-shrink-0" /> <Store className="w-5 h-5 flex-shrink-0" />
@@ -1192,6 +1193,7 @@ const EcommerceCaseStudies = () => {
// Mid-Page CTA // Mid-Page CTA
const EcommerceInlineCTA = () => { const EcommerceInlineCTA = () => {
const navigate = useNavigate();
return ( return (
<section className="py-20"> <section className="py-20">
<div className="container mx-auto px-6 lg:px-8"> <div className="container mx-auto px-6 lg:px-8">
@@ -1230,7 +1232,7 @@ const EcommerceInlineCTA = () => {
<ShimmerButton <ShimmerButton
className="text-xl px-10 py-5 rounded-2xl shadow-lg hover:shadow-xl" 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"> <div className="inline-flex items-center gap-3">
<MessageSquare className="w-6 h-6 flex-shrink-0" /> <MessageSquare className="w-6 h-6 flex-shrink-0" />
@@ -1246,6 +1248,7 @@ const EcommerceInlineCTA = () => {
// Hire eCommerce Developers // Hire eCommerce Developers
const HireEcommerceDevelopers = () => { const HireEcommerceDevelopers = () => {
const navigate = useNavigate();
const developerTypes = [ const developerTypes = [
{ {
title: "Shopify Experts", title: "Shopify Experts",
@@ -1374,7 +1377,7 @@ const HireEcommerceDevelopers = () => {
> >
<div className="flex flex-col sm:flex-row gap-4 justify-center"> <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={() => navigateTo("/hire-talent/ecommerce-platform-developers")} onClick={() => navigate("/hire-talent/ecommerce-platform-developers")}
> >
<div className="inline-flex items-center gap-2"> <div className="inline-flex items-center gap-2">
<Users className="w-5 h-5 flex-shrink-0" /> <Users className="w-5 h-5 flex-shrink-0" />
@@ -1471,6 +1474,7 @@ const EcommerceFAQs = () => {
// Final CTA Section // Final CTA Section
const EcommerceFinalCTA = () => { const EcommerceFinalCTA = () => {
const navigate = useNavigate();
return ( return (
<section className="py-20 relative overflow-hidden"> <section className="py-20 relative overflow-hidden">
<div className="container mx-auto px-6 lg:px-8 relative z-10"> <div className="container mx-auto px-6 lg:px-8 relative z-10">
@@ -1523,7 +1527,7 @@ const EcommerceFinalCTA = () => {
> >
<ShimmerButton <ShimmerButton
className="px-12 py-6 text-xl rounded-2xl shadow-2xl hover:shadow-accent/25" 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"> <div className="inline-flex items-center gap-3">
<Rocket className="w-6 h-6 flex-shrink-0" /> <Rocket className="w-6 h-6 flex-shrink-0" />
@@ -1552,7 +1556,7 @@ const EcommerceFinalCTA = () => {
export const EcommercePlatforms = () => { export const EcommercePlatforms = () => {
return ( return (
<div className="dark min-h-screen"> <div className="dark min-h-screen">
<Navigation /> {/* <Navigation /> */}
{/* Hero Section */} {/* Hero Section */}
<section className="bg-black"> <section className="bg-black">
@@ -1564,6 +1568,11 @@ export const EcommercePlatforms = () => {
<EcommerceBenefits /> <EcommerceBenefits />
</section> </section>
{/* Case Studies */}
<section className="bg-background">
<EcommerceCaseStudies />
</section>
{/* Development Process */} {/* Development Process */}
<section className="bg-card"> <section className="bg-card">
<EcommerceProcess /> <EcommerceProcess />
@@ -1579,15 +1588,10 @@ export const EcommercePlatforms = () => {
<EcommerceTechStack /> <EcommerceTechStack />
</section> </section>
{/* Case Studies */}
<section className="bg-background">
<EcommerceCaseStudies />
</section>
{/* Mid-Page CTA */} {/* Mid-Page CTA */}
<section className="bg-card"> {/* <section className="bg-card">
<EcommerceInlineCTA /> <EcommerceInlineCTA />
</section> </section> */}
{/* Hire Developers */} {/* Hire Developers */}
<section className="bg-background"> <section className="bg-background">
@@ -1595,9 +1599,9 @@ export const EcommercePlatforms = () => {
</section> </section>
{/* FAQs */} {/* FAQs */}
<section className="bg-card"> {/* <section className="bg-card">
<EcommerceFAQs /> <EcommerceFAQs />
</section> </section> */}
{/* Final CTA */} {/* Final CTA */}
<section className="bg-background"> <section className="bg-background">
@@ -1605,8 +1609,8 @@ export const EcommercePlatforms = () => {
</section> </section>
{/* Footer */} {/* Footer */}
<section className="bg-card"> <section className="bg-background">
<Footer /> {/* <Footer /> */}
</section> </section>
</div> </div>
); );

4
pages/EdTechPlatforms.tsx
View File

@@ -402,7 +402,7 @@ const edtechFAQs = [
export const EdTechPlatforms = () => { export const EdTechPlatforms = () => {
return ( return (
<div className="min-h-screen bg-[#0E0E0E]"> <div className="min-h-screen bg-[#0E0E0E]">
<Navigation /> {/* <Navigation /> */}
<HeroBanner <HeroBanner
category="Learning & Education" category="Learning & Education"
@@ -443,7 +443,7 @@ export const EdTechPlatforms = () => {
<SplitCallToAction /> <SplitCallToAction />
</div> </div>
<Footer /> {/* <Footer /> */}
</div> </div>
); );
}; };

11
pages/EngagementModels.tsx
View File

@@ -15,12 +15,13 @@ import {
CheckCircle, CheckCircle,
Star, Star,
} from "lucide-react"; } from "lucide-react";
import { navigateTo } from "@/App"; import { useNavigate } from "react-router-dom";
import { Helmet } from "react-helmet-async"; import { Helmet } from "react-helmet-async";
import { EngagementModelsVector } from "@/components/vectors"; import { EngagementModelsVector } from "@/components/vectors";
import { HireTalentHeroBanner } from "@/components/HireTalentHeroBanner"; import { HireTalentHeroBanner } from "@/components/HireTalentHeroBanner";
export const EngagementModels = () => { export const EngagementModels = () => {
const navigate = useNavigate();
const models = [ const models = [
{ {
icon: DollarSign, icon: DollarSign,
@@ -151,7 +152,7 @@ export const EngagementModels = () => {
return ( return (
<div className="dark min-h-screen bg-background"> <div className="dark min-h-screen bg-background">
<Navigation /> {/* <Navigation /> */}
<Helmet> <Helmet>
{/* Page Title and Meta Description */} {/* Page Title and Meta Description */}
@@ -307,7 +308,7 @@ export const EngagementModels = () => {
<div className="flex justify-center lg:justify-end"> <div className="flex justify-center lg:justify-end">
<Button <Button
className="bg-[#E5195E] hover:bg-[#E5195E]/90 text-white" className="bg-[#E5195E] hover:bg-[#E5195E]/90 text-white"
onClick={() => navigateTo("/start-a-project")} onClick={() => navigate("/start-a-project")}
> >
Learn More Learn More
<ArrowRight className="ml-2 w-4 h-4" /> <ArrowRight className="ml-2 w-4 h-4" />
@@ -525,7 +526,7 @@ export const EngagementModels = () => {
<Button <Button
size="lg" size="lg"
className="bg-[#E5195E] hover:bg-[#E5195E]/90 text-white" className="bg-[#E5195E] hover:bg-[#E5195E]/90 text-white"
onClick={() => navigateTo("/start-a-project")} onClick={() => navigate("/start-a-project")}
> >
Start Your Consultation Start Your Consultation
<ArrowRight className="ml-2 w-4 h-4" /> <ArrowRight className="ml-2 w-4 h-4" />
@@ -542,7 +543,7 @@ export const EngagementModels = () => {
</div> </div>
</section> </section>
<Footer /> {/* <Footer /> */}
</div> </div>
); );
}; };

36
pages/EnterpriseSoftwareSolutions.tsx
View File

@@ -46,11 +46,12 @@ import { Button } from "../components/ui/button";
import { Card, CardContent } from "../components/ui/card"; import { Card, CardContent } from "../components/ui/card";
import { ShimmerButton } from "../components/ui/shimmer-button"; import { ShimmerButton } from "../components/ui/shimmer-button";
import awsLogo from "../src/images/aws-logo.png"; import awsLogo from "../src/images/aws-logo.png";
import { navigateTo } from "@/App"; import { useNavigate } from "react-router-dom";
import { Helmet } from "react-helmet-async"; import { Helmet } from "react-helmet-async";
// Enterprise Software Solutions Hero Section // Enterprise Software Solutions Hero Section
const EnterpriseHeroWithCTA = () => { const EnterpriseHeroWithCTA = () => {
const navigate = useNavigate();
return ( return (
<section className="relative py-20 overflow-hidden bg-black"> <section className="relative py-20 overflow-hidden bg-black">
<Helmet> <Helmet>
@@ -141,7 +142,7 @@ const EnterpriseHeroWithCTA = () => {
> >
<ShimmerButton <ShimmerButton
className="text-lg px-8 py-4" 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"> <div className="inline-flex items-center gap-2">
<Building2 className="w-5 h-5 flex-shrink-0" /> <Building2 className="w-5 h-5 flex-shrink-0" />
@@ -1353,6 +1354,7 @@ const EnterpriseCaseStudies = () => {
// Mid-Page CTA // Mid-Page CTA
const EnterpriseInlineCTA = () => { const EnterpriseInlineCTA = () => {
const navigate = useNavigate();
return ( return (
<section className="py-20"> <section className="py-20">
<div className="container mx-auto px-6 lg:px-8"> <div className="container mx-auto px-6 lg:px-8">
@@ -1391,7 +1393,7 @@ const EnterpriseInlineCTA = () => {
<ShimmerButton <ShimmerButton
className="text-xl px-10 py-5 rounded-2xl shadow-lg hover:shadow-xl" 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"> <div className="inline-flex items-center gap-3">
<MessageSquare className="w-6 h-6 flex-shrink-0" /> <MessageSquare className="w-6 h-6 flex-shrink-0" />
@@ -1407,6 +1409,7 @@ const EnterpriseInlineCTA = () => {
// Hire Enterprise Talent // Hire Enterprise Talent
const HireEnterpriseTalent = () => { const HireEnterpriseTalent = () => {
const navigate = useNavigate();
const talentTypes = [ const talentTypes = [
{ {
title: "Enterprise Architects", title: "Enterprise Architects",
@@ -1542,7 +1545,7 @@ const HireEnterpriseTalent = () => {
> >
<div className="flex flex-col sm:flex-row gap-4 justify-center"> <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={() => navigateTo("/hire-talent/enterprise-software-developers")} onClick={() => navigate("/hire-talent/enterprise-software-developers")}
> >
<div className="inline-flex items-center gap-2"> <div className="inline-flex items-center gap-2">
<Users className="w-5 h-5 flex-shrink-0" /> <Users className="w-5 h-5 flex-shrink-0" />
@@ -1641,6 +1644,7 @@ const EnterpriseFAQs = () => {
// Final CTA Section // Final CTA Section
const EnterpriseFinalCTA = () => { const EnterpriseFinalCTA = () => {
const navigate = useNavigate();
return ( return (
<section className="py-20 relative overflow-hidden"> <section className="py-20 relative overflow-hidden">
<div className="container mx-auto px-6 lg:px-8 relative z-10"> <div className="container mx-auto px-6 lg:px-8 relative z-10">
@@ -1693,7 +1697,7 @@ const EnterpriseFinalCTA = () => {
> >
<ShimmerButton <ShimmerButton
className="px-12 py-6 text-xl rounded-2xl shadow-2xl hover:shadow-accent/25" 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"> <div className="inline-flex items-center gap-3">
<Rocket className="w-6 h-6 flex-shrink-0" /> <Rocket className="w-6 h-6 flex-shrink-0" />
@@ -1722,7 +1726,7 @@ const EnterpriseFinalCTA = () => {
export const EnterpriseSoftwareSolutions = () => { export const EnterpriseSoftwareSolutions = () => {
return ( return (
<div className="dark min-h-screen"> <div className="dark min-h-screen">
<Navigation /> {/* <Navigation /> */}
{/* Hero Section */} {/* Hero Section */}
<section className="bg-black"> <section className="bg-black">
@@ -1734,6 +1738,11 @@ export const EnterpriseSoftwareSolutions = () => {
<EnterpriseBenefits /> <EnterpriseBenefits />
</section> </section>
{/* Case Studies */}
<section className="bg-background">
<EnterpriseCaseStudies />
</section>
{/* Development Process */} {/* Development Process */}
<section className="bg-card"> <section className="bg-card">
<EnterpriseProcess /> <EnterpriseProcess />
@@ -1749,15 +1758,10 @@ export const EnterpriseSoftwareSolutions = () => {
<EnterpriseTechStack /> <EnterpriseTechStack />
</section> </section>
{/* Case Studies */}
<section className="bg-background">
<EnterpriseCaseStudies />
</section>
{/* Mid-Page CTA */} {/* Mid-Page CTA */}
<section className="bg-card"> {/* <section className="bg-card">
<EnterpriseInlineCTA /> <EnterpriseInlineCTA />
</section> </section> */}
{/* Hire Talent */} {/* Hire Talent */}
<section className="bg-background"> <section className="bg-background">
@@ -1765,9 +1769,9 @@ export const EnterpriseSoftwareSolutions = () => {
</section> </section>
{/* FAQs */} {/* FAQs */}
<section className="bg-card"> {/* <section className="bg-card">
<EnterpriseFAQs /> <EnterpriseFAQs />
</section> </section> */}
{/* Final CTA */} {/* Final CTA */}
<section className="bg-background"> <section className="bg-background">
@@ -1776,7 +1780,7 @@ export const EnterpriseSoftwareSolutions = () => {
{/* Footer */} {/* Footer */}
<section> <section>
<Footer /> {/* <Footer /> */}
</section> </section>
</div> </div>
); );

4
pages/EventTicketingSolutions.tsx
View File

@@ -470,7 +470,7 @@ const eventTicketingFAQs = [
export const EventTicketingSolutions = () => { export const EventTicketingSolutions = () => {
return ( return (
<div className="min-h-screen bg-[#0E0E0E]"> <div className="min-h-screen bg-[#0E0E0E]">
<Navigation /> {/* <Navigation /> */}
<HeroBanner <HeroBanner
category="Commerce & Consumer" category="Commerce & Consumer"
@@ -511,7 +511,7 @@ export const EventTicketingSolutions = () => {
<SplitCallToAction /> <SplitCallToAction />
</div> </div>
<Footer /> {/* <Footer /> */}
</div> </div>
); );
}; };

9
pages/FAQs.tsx
View File

@@ -19,11 +19,12 @@ import {
Phone, Phone,
Mail, Mail,
} from "lucide-react"; } from "lucide-react";
import { navigateTo } from "../App";
import { Helmet } from "react-helmet-async"; import { Helmet } from "react-helmet-async";
import { useNavigate } from "react-router-dom";
export const FAQs = () => { export const FAQs = () => {
const [searchTerm, setSearchTerm] = useState(""); const [searchTerm, setSearchTerm] = useState("");
const navigate = useNavigate();
const faqCategories = [ const faqCategories = [
{ {
@@ -187,7 +188,7 @@ export const FAQs = () => {
return ( return (
<div className="dark min-h-screen bg-background"> <div className="dark min-h-screen bg-background">
<Navigation /> {/* <Navigation /> */}
{/* Hero Section */} {/* Hero Section */}
<section className="pt-24 pb-16 bg-background"> <section className="pt-24 pb-16 bg-background">
@@ -484,7 +485,7 @@ export const FAQs = () => {
<Button <Button
size="lg" size="lg"
className="bg-[#E5195E] hover:bg-[#E5195E]/90 text-white" className="bg-[#E5195E] hover:bg-[#E5195E]/90 text-white"
onClick={() => navigateTo("/start-a-project")} onClick={() => navigate("/start-a-project")}
> >
Couldn't find your answer? Contact us directly Couldn't find your answer? Contact us directly
<ArrowRight className="ml-2 w-4 h-4" /> <ArrowRight className="ml-2 w-4 h-4" />
@@ -501,7 +502,7 @@ export const FAQs = () => {
</div> </div>
</section> </section>
<Footer /> {/* <Footer /> */}
</div> </div>
); );
}; };

17
pages/FinTechBankingApps.tsx
View File

@@ -55,11 +55,12 @@ import { Badge } from "../components/ui/badge";
import { Button } from "../components/ui/button"; import { Button } from "../components/ui/button";
import { Card, CardContent } from "../components/ui/card"; import { Card, CardContent } from "../components/ui/card";
import { ShimmerButton } from "../components/ui/shimmer-button"; import { ShimmerButton } from "../components/ui/shimmer-button";
import { navigateTo } from "@/App"; import { useNavigate } from "react-router-dom";
import { Helmet } from "react-helmet-async"; import { Helmet } from "react-helmet-async";
// FinTech & Banking Apps Hero Section // FinTech & Banking Apps Hero Section
const FinTechBankingAppsHero = () => { const FinTechBankingAppsHero = () => {
const navigate = useNavigate();
return ( return (
<section className="relative py-20 overflow-hidden bg-black"> <section className="relative py-20 overflow-hidden bg-black">
<Helmet> <Helmet>
@@ -150,7 +151,7 @@ const FinTechBankingAppsHero = () => {
> >
<ShimmerButton <ShimmerButton
className="text-lg px-8 py-4" 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"> <div className="inline-flex items-center gap-2">
<MessageSquare className="w-5 h-5 flex-shrink-0" /> <MessageSquare className="w-5 h-5 flex-shrink-0" />
@@ -293,7 +294,7 @@ const FinTechBankingAppsHero = () => {
initial={{ opacity: 0, scale: 0 }} initial={{ opacity: 0, scale: 0 }}
animate={{ opacity: 1, scale: 1 }} animate={{ opacity: 1, scale: 1 }}
transition={{ duration: 0.5, delay: 2.0 + i * 0.1 }} transition={{ duration: 0.5, delay: 2.0 + i * 0.1 }}
className="text-center" className="text-center flex-column items-center justify-self-center"
> >
<div <div
className={`w-12 h-12 rounded-2xl flex items-center justify-center mb-2 ${action.color === "blue" className={`w-12 h-12 rounded-2xl flex items-center justify-center mb-2 ${action.color === "blue"
@@ -1382,6 +1383,7 @@ const FinTechBankingAppsAwards = () => {
// Mid-Page Lead Capture CTA // Mid-Page Lead Capture CTA
const FinTechBankingAppsInlineCTA = () => { const FinTechBankingAppsInlineCTA = () => {
const navigate = useNavigate();
return ( return (
<section className="py-20"> <section className="py-20">
<div className="container mx-auto px-6 lg:px-8"> <div className="container mx-auto px-6 lg:px-8">
@@ -1422,7 +1424,7 @@ const FinTechBankingAppsInlineCTA = () => {
<ShimmerButton <ShimmerButton
className="text-xl px-10 py-5 rounded-2xl shadow-lg hover:shadow-xl" 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"> <div className="inline-flex items-center gap-3">
<MessageSquare className="w-6 h-6 flex-shrink-0" /> <MessageSquare className="w-6 h-6 flex-shrink-0" />
@@ -1519,6 +1521,7 @@ const FinTechBankingAppsFAQs = () => {
// Final CTA Section // Final CTA Section
const FinTechBankingAppsFinalCTA = () => { const FinTechBankingAppsFinalCTA = () => {
const navigate = useNavigate();
return ( return (
<section className="py-20 relative overflow-hidden"> <section className="py-20 relative overflow-hidden">
<div className="container mx-auto px-6 lg:px-8 relative z-10"> <div className="container mx-auto px-6 lg:px-8 relative z-10">
@@ -1572,7 +1575,7 @@ const FinTechBankingAppsFinalCTA = () => {
> >
<ShimmerButton <ShimmerButton
className="px-12 py-6 text-xl rounded-2xl shadow-2xl hover:shadow-accent/25" 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"> <div className="inline-flex items-center gap-3">
<Calendar className="w-6 h-6 flex-shrink-0" /> <Calendar className="w-6 h-6 flex-shrink-0" />
@@ -1601,7 +1604,7 @@ const FinTechBankingAppsFinalCTA = () => {
export const FinTechBankingApps = () => { export const FinTechBankingApps = () => {
return ( return (
<div className="dark min-h-screen"> <div className="dark min-h-screen">
<Navigation /> {/* <Navigation /> */}
{/* Hero Section */} {/* Hero Section */}
<section className="bg-black"> <section className="bg-black">
@@ -1660,7 +1663,7 @@ export const FinTechBankingApps = () => {
{/* Footer */} {/* Footer */}
<section className="bg-background"> <section className="bg-background">
<Footer /> {/* <Footer /> */}
</section> </section>
</div> </div>
); );

9
pages/FitnessWellnessPlatforms.tsx
View File

@@ -16,11 +16,12 @@ import { Navigation } from "../components/Navigation";
import { Badge } from "../components/ui/badge"; import { Badge } from "../components/ui/badge";
import { Button } from "../components/ui/button"; import { Button } from "../components/ui/button";
import { ShimmerButton } from "../components/ui/shimmer-button"; import { ShimmerButton } from "../components/ui/shimmer-button";
import { navigateTo } from "@/App"; import { useNavigate } from "react-router-dom";
import { Helmet } from "react-helmet-async"; import { Helmet } from "react-helmet-async";
// Fitness & Wellness Hero Section // Fitness & Wellness Hero Section
const FitnessWellnessHero = () => { const FitnessWellnessHero = () => {
const navigate = useNavigate();
return ( return (
<section className="relative py-20 overflow-hidden bg-black"> <section className="relative py-20 overflow-hidden bg-black">
<Helmet> <Helmet>
@@ -108,7 +109,7 @@ const FitnessWellnessHero = () => {
> >
<ShimmerButton <ShimmerButton
className="text-lg px-8 py-4" 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"> <div className="inline-flex items-center gap-2">
<MessageSquare className="w-5 h-5 flex-shrink-0" /> <MessageSquare className="w-5 h-5 flex-shrink-0" />
@@ -387,7 +388,7 @@ const FitnessWellnessHero = () => {
export const FitnessWellnessPlatforms = () => { export const FitnessWellnessPlatforms = () => {
return ( return (
<div className="dark min-h-screen"> <div className="dark min-h-screen">
<Navigation /> {/* <Navigation /> */}
<section className="bg-black"> <section className="bg-black">
<FitnessWellnessHero /> <FitnessWellnessHero />
@@ -396,7 +397,7 @@ export const FitnessWellnessPlatforms = () => {
{/* Additional sections would go here following the same pattern as other industry pages */} {/* Additional sections would go here following the same pattern as other industry pages */}
<section className="bg-card"> <section className="bg-card">
<Footer /> {/* <Footer /> */}
</section> </section>
</div> </div>
); );

4
pages/FoodOrderingDelivery.tsx
View File

@@ -464,7 +464,7 @@ const foodDeliveryFAQs = [
export const FoodOrderingDelivery = () => { export const FoodOrderingDelivery = () => {
return ( return (
<div className="min-h-screen bg-[#0E0E0E]"> <div className="min-h-screen bg-[#0E0E0E]">
<Navigation /> {/* <Navigation /> */}
<HeroBanner <HeroBanner
category="Commerce & Consumer" category="Commerce & Consumer"
@@ -505,7 +505,7 @@ export const FoodOrderingDelivery = () => {
<SplitCallToAction /> <SplitCallToAction />
</div> </div>
<Footer /> {/* <Footer /> */}
</div> </div>
); );
}; };

22
pages/FutureOfAIHealthcare.tsx
View File

@@ -7,8 +7,8 @@ import { Card, CardContent } from "../components/ui/card";
import { Avatar, AvatarFallback, AvatarImage } from "../components/ui/avatar"; import { Avatar, AvatarFallback, AvatarImage } from "../components/ui/avatar";
import { Separator } from "../components/ui/separator"; import { Separator } from "../components/ui/separator";
import { Calendar, Clock, User, ArrowRight, Share2, Linkedin, Twitter, ExternalLink, Tag } from "lucide-react"; import { Calendar, Clock, User, ArrowRight, Share2, Linkedin, Twitter, ExternalLink, Tag } from "lucide-react";
import { navigateTo } from "../App";
import { ImageWithFallback } from "../components/figma/ImageWithFallback"; import { ImageWithFallback } from "../components/figma/ImageWithFallback";
import { useNavigate } from "react-router-dom";
const articleData = { const articleData = {
id: "future-of-ai-healthcare", id: "future-of-ai-healthcare",
@@ -161,9 +161,11 @@ export const FutureOfAIHealthcare = () => {
} }
}; };
const navigate = useNavigate();
return ( return (
<div className="dark min-h-screen bg-background"> <div className="dark min-h-screen bg-background">
<Navigation /> {/* <Navigation /> */}
{/* Hero Section */} {/* Hero Section */}
<section className="pt-24 pb-16 bg-background"> <section className="pt-24 pb-16 bg-background">
@@ -171,11 +173,11 @@ export const FutureOfAIHealthcare = () => {
<div className="max-w-4xl mx-auto"> <div className="max-w-4xl mx-auto">
{/* Breadcrumb */} {/* Breadcrumb */}
<div className="flex items-center gap-2 text-sm text-muted-foreground mb-8"> <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 Home
</button> </button>
<span>/</span> <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 Blog
</button> </button>
<span>/</span> <span>/</span>
@@ -342,7 +344,7 @@ export const FutureOfAIHealthcare = () => {
<div <div
key={article.id} key={article.id}
className="group cursor-pointer" 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"> <div className="aspect-[16/10] overflow-hidden rounded-lg mb-3">
<ImageWithFallback <ImageWithFallback
@@ -368,7 +370,7 @@ export const FutureOfAIHealthcare = () => {
<Button <Button
variant="outline" variant="outline"
className="w-full border-white/20 text-white hover:bg-white/10" className="w-full border-white/20 text-white hover:bg-white/10"
onClick={() => navigateTo('/resources/blog')} onClick={() => navigate('/resources/blog')}
> >
View All Articles View All Articles
<ArrowRight className="w-4 h-4 ml-2" /> <ArrowRight className="w-4 h-4 ml-2" />
@@ -386,7 +388,7 @@ export const FutureOfAIHealthcare = () => {
</p> </p>
<Button <Button
className="w-full bg-[#E5195E] hover:bg-[#E5195E]/90 text-white" className="w-full bg-[#E5195E] hover:bg-[#E5195E]/90 text-white"
onClick={() => navigateTo('/contact')} onClick={() => navigate('/contact')}
> >
Get In Touch Get In Touch
</Button> </Button>
@@ -413,7 +415,7 @@ export const FutureOfAIHealthcare = () => {
<Button <Button
size="lg" size="lg"
className="bg-[#E5195E] hover:bg-[#E5195E]/90 text-white" className="bg-[#E5195E] hover:bg-[#E5195E]/90 text-white"
onClick={() => navigateTo('/contact')} onClick={() => navigate('/contact')}
> >
Start Your AI Project Start Your AI Project
<ArrowRight className="ml-2 w-4 h-4" /> <ArrowRight className="ml-2 w-4 h-4" />
@@ -422,7 +424,7 @@ export const FutureOfAIHealthcare = () => {
size="lg" size="lg"
variant="outline" variant="outline"
className="border-white/20 text-white hover:bg-white/10" className="border-white/20 text-white hover:bg-white/10"
onClick={() => navigateTo('/resources/blog')} onClick={() => navigate('/resources/blog')}
> >
Read More Articles Read More Articles
</Button> </Button>
@@ -432,7 +434,7 @@ export const FutureOfAIHealthcare = () => {
</div> </div>
</section> </section>
<Footer /> {/* <Footer /> */}
</div> </div>
); );
}; };

18
pages/GenAIIntegrationDigitalProducts.tsx
View File

@@ -42,11 +42,13 @@ import { Badge } from "../components/ui/badge";
import { Button } from "../components/ui/button"; import { Button } from "../components/ui/button";
import { Card, CardContent } from "../components/ui/card"; import { Card, CardContent } from "../components/ui/card";
import { ShimmerButton } from "../components/ui/shimmer-button"; import { ShimmerButton } from "../components/ui/shimmer-button";
import { navigateTo } from "@/App"; import { useNavigate } from "react-router-dom";
import { Helmet } from "react-helmet-async"; import { Helmet } from "react-helmet-async";
import { AIStrategyTargetAudience } from "./AIStrategyConsulting";
// Gen AI Integration Hero Section // Gen AI Integration Hero Section
const GenAIIntegrationHeroWithCTA = () => { const GenAIIntegrationHeroWithCTA = () => {
const navigate = useNavigate();
return ( return (
<section className="relative py-20 overflow-hidden bg-black"> <section className="relative py-20 overflow-hidden bg-black">
<Helmet> <Helmet>
@@ -135,7 +137,7 @@ const GenAIIntegrationHeroWithCTA = () => {
> >
<ShimmerButton <ShimmerButton
className="text-lg px-8 py-4" 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"> <div className="inline-flex items-center gap-2">
<Sparkles className="w-5 h-5 flex-shrink-0" /> <Sparkles className="w-5 h-5 flex-shrink-0" />
@@ -1173,6 +1175,7 @@ const GenAICaseStudies = () => {
// Mid-Page CTA // Mid-Page CTA
const GenAIInlineCTA = () => { const GenAIInlineCTA = () => {
const navigate = useNavigate();
return ( return (
<section className="py-20 bg-black"> <section className="py-20 bg-black">
<div className="container mx-auto px-6 lg:px-8"> <div className="container mx-auto px-6 lg:px-8">
@@ -1211,7 +1214,7 @@ const GenAIInlineCTA = () => {
<ShimmerButton <ShimmerButton
className="text-xl px-10 py-5 rounded-2xl shadow-lg hover:shadow-xl" 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"> <div className="inline-flex items-center gap-3">
<Lightbulb className="w-6 h-6 flex-shrink-0" /> <Lightbulb className="w-6 h-6 flex-shrink-0" />
@@ -1480,6 +1483,7 @@ const GenAIFAQs = () => {
// Final CTA Section // Final CTA Section
const GenAIFinalCTA = () => { const GenAIFinalCTA = () => {
const navigate = useNavigate();
return ( return (
<section className="py-20 relative overflow-hidden"> <section className="py-20 relative overflow-hidden">
<div className="container mx-auto px-6 lg:px-8 relative z-10"> <div className="container mx-auto px-6 lg:px-8 relative z-10">
@@ -1532,7 +1536,7 @@ const GenAIFinalCTA = () => {
> >
<ShimmerButton <ShimmerButton
className="px-12 py-6 text-xl rounded-2xl shadow-2xl hover:shadow-accent/25" 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"> <div className="inline-flex items-center gap-3">
<Sparkles className="w-6 h-6 flex-shrink-0" /> <Sparkles className="w-6 h-6 flex-shrink-0" />
@@ -1561,7 +1565,7 @@ const GenAIFinalCTA = () => {
export const GenAIIntegrationDigitalProducts = () => { export const GenAIIntegrationDigitalProducts = () => {
return ( return (
<div className="dark min-h-screen"> <div className="dark min-h-screen">
<Navigation /> {/* <Navigation /> */}
{/* Hero Section */} {/* Hero Section */}
<section className="bg-black"> <section className="bg-black">
@@ -1585,7 +1589,7 @@ export const GenAIIntegrationDigitalProducts = () => {
{/* Tech Stack */} {/* Tech Stack */}
<section className="bg-card"> <section className="bg-card">
<GenAITechStack /> <AIStrategyTargetAudience />
</section> </section>
{/* Case Studies */} {/* Case Studies */}
@@ -1615,7 +1619,7 @@ export const GenAIIntegrationDigitalProducts = () => {
{/* Footer */} {/* Footer */}
<section className="bg-card"> <section className="bg-card">
<Footer /> {/* <Footer /> */}
</section> </section>
</div> </div>
); );

13
pages/GoodTimesProject.tsx
View File

@@ -5,10 +5,10 @@ import { Footer } from "../components/Footer";
import { Button } from "../components/ui/button"; import { Button } from "../components/ui/button";
import { GridPattern } from "../components/GridPattern"; import { GridPattern } from "../components/GridPattern";
import { ImageWithFallback } from "../components/figma/ImageWithFallback"; import { ImageWithFallback } from "../components/figma/ImageWithFallback";
import { navigateTo } from "../App";
import { Badge } from "@/components/ui/badge"; import { Badge } from "@/components/ui/badge";
import { Card, CardContent } from "@/components/ui/card"; import { Card, CardContent } from "@/components/ui/card";
import goodTimesLogo from "../src/images/good-times-logo.webp"; import goodTimesLogo from "../src/images/good-times-logo.webp";
import { useNavigate } from "react-router-dom";
// Technology to icon mapping // Technology to icon mapping
const getTechIcon = (tech: string) => { const getTechIcon = (tech: string) => {
@@ -202,9 +202,10 @@ const futureRoadmap = [
]; ];
export const GoodTimesProject = () => { export const GoodTimesProject = () => {
const navigate = useNavigate();
return ( return (
<div className="dark min-h-screen bg-background"> <div className="dark min-h-screen bg-background">
<Navigation /> {/* <Navigation /> */}
{/* Section 1: Hero with Heading, Subheading, and Image */} {/* Section 1: Hero with Heading, Subheading, and Image */}
<section className="relative pt-32 pb-24 bg-background overflow-hidden"> <section className="relative pt-32 pb-24 bg-background overflow-hidden">
@@ -220,7 +221,7 @@ export const GoodTimesProject = () => {
> >
<Button <Button
variant="ghost" variant="ghost"
onClick={() => navigateTo('/case-studies')} onClick={() => navigate('/case-studies')}
className="text-muted-foreground hover:text-foreground flex items-center gap-2 px-0 hover:bg-transparent" className="text-muted-foreground hover:text-foreground flex items-center gap-2 px-0 hover:bg-transparent"
> >
<ArrowLeft className="w-4 h-4" /> <ArrowLeft className="w-4 h-4" />
@@ -1056,7 +1057,7 @@ export const GoodTimesProject = () => {
<div className="flex flex-col sm:flex-row gap-4 justify-center"> <div className="flex flex-col sm:flex-row gap-4 justify-center">
<Button <Button
size="lg" size="lg"
onClick={() => navigateTo('/contact-us')} onClick={() => navigate('/contact-us')}
className="bg-accent hover:bg-accent/90 text-accent-foreground" className="bg-accent hover:bg-accent/90 text-accent-foreground"
> >
Contact Our Team Contact Our Team
@@ -1065,7 +1066,7 @@ export const GoodTimesProject = () => {
<Button <Button
size="lg" size="lg"
variant="outline" variant="outline"
onClick={() => navigateTo('/case-studies')} onClick={() => navigate('/case-studies')}
className="border-accent/30 text-accent hover:bg-accent/10" className="border-accent/30 text-accent hover:bg-accent/10"
> >
View More Case Studies View More Case Studies
@@ -1076,7 +1077,7 @@ export const GoodTimesProject = () => {
</div> </div>
</section> </section>
<Footer /> {/* <Footer /> */}
</div> </div>
); );
}; };

15
pages/HealthTechApplications.tsx
View File

@@ -45,11 +45,12 @@ import { Badge } from "../components/ui/badge";
import { Button } from "../components/ui/button"; import { Button } from "../components/ui/button";
import { Card, CardContent } from "../components/ui/card"; import { Card, CardContent } from "../components/ui/card";
import { ShimmerButton } from "../components/ui/shimmer-button"; import { ShimmerButton } from "../components/ui/shimmer-button";
import { navigateTo } from "@/App"; import { useNavigate } from "react-router-dom";
import { Helmet } from "react-helmet-async"; import { Helmet } from "react-helmet-async";
// HealthTech Hero Section // HealthTech Hero Section
const HealthTechHero = () => { const HealthTechHero = () => {
const navigate = useNavigate();
return ( return (
<section className="relative py-20 overflow-hidden bg-black"> <section className="relative py-20 overflow-hidden bg-black">
<Helmet> <Helmet>
@@ -140,7 +141,7 @@ const HealthTechHero = () => {
> >
<ShimmerButton <ShimmerButton
className="text-lg px-8 py-4" 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"> <div className="inline-flex items-center gap-2">
<MessageSquare className="w-5 h-5 flex-shrink-0" /> <MessageSquare className="w-5 h-5 flex-shrink-0" />
@@ -1224,6 +1225,7 @@ const HealthTechTestimonials = () => {
// Mid-Page Lead Capture CTA // Mid-Page Lead Capture CTA
const HealthTechInlineCTA = () => { const HealthTechInlineCTA = () => {
const navigate = useNavigate();
return ( return (
<section className="py-20"> <section className="py-20">
<div className="container mx-auto px-6 lg:px-8"> <div className="container mx-auto px-6 lg:px-8">
@@ -1262,7 +1264,7 @@ const HealthTechInlineCTA = () => {
<ShimmerButton <ShimmerButton
className="text-xl px-10 py-5 rounded-2xl shadow-lg hover:shadow-xl" 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"> <div className="inline-flex items-center gap-3">
<MessageSquare className="w-6 h-6 flex-shrink-0" /> <MessageSquare className="w-6 h-6 flex-shrink-0" />
@@ -1359,6 +1361,7 @@ const HealthTechFAQs = () => {
// Final CTA Section // Final CTA Section
const HealthTechFinalCTA = () => { const HealthTechFinalCTA = () => {
const navigate = useNavigate();
return ( return (
<section className="py-20 relative overflow-hidden"> <section className="py-20 relative overflow-hidden">
<div className="container mx-auto px-6 lg:px-8 relative z-10"> <div className="container mx-auto px-6 lg:px-8 relative z-10">
@@ -1412,7 +1415,7 @@ const HealthTechFinalCTA = () => {
> >
<ShimmerButton <ShimmerButton
className="px-12 py-6 text-xl rounded-2xl shadow-2xl hover:shadow-accent/25" 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"> <div className="inline-flex items-center gap-3">
<Calendar className="w-6 h-6 flex-shrink-0" /> <Calendar className="w-6 h-6 flex-shrink-0" />
@@ -1441,7 +1444,7 @@ const HealthTechFinalCTA = () => {
export const HealthTechApplications = () => { export const HealthTechApplications = () => {
return ( return (
<div className="dark min-h-screen"> <div className="dark min-h-screen">
<Navigation /> {/* <Navigation /> */}
{/* Hero Section */} {/* Hero Section */}
<section className="bg-black"> <section className="bg-black">
@@ -1495,7 +1498,7 @@ export const HealthTechApplications = () => {
{/* Footer */} {/* Footer */}
<section className="bg-card"> <section className="bg-card">
<Footer /> {/* <Footer /> */}
</section> </section>
</div> </div>
); );

4
pages/HireAPIBackendDevelopers.tsx
View File

@@ -139,7 +139,7 @@ const hireAPIBackendDevelopersData = {
export function HireAPIBackendDevelopers() { export function HireAPIBackendDevelopers() {
return ( return (
<div className="dark min-h-screen bg-background"> <div className="dark min-h-screen bg-background">
<Navigation /> {/* <Navigation /> */}
{/* Hero Section with BackendVector */} {/* Hero Section with BackendVector */}
<HireTalentHeroBanner <HireTalentHeroBanner
@@ -189,7 +189,7 @@ export function HireAPIBackendDevelopers() {
<SplitCallToAction /> <SplitCallToAction />
</section> </section>
<Footer /> {/* <Footer /> */}
</div> </div>
); );
} }

4
pages/HireAdminPanelDevelopers.tsx
View File

@@ -139,7 +139,7 @@ const hireAdminPanelDevelopersData = {
export function HireAdminPanelDevelopers() { export function HireAdminPanelDevelopers() {
return ( return (
<div className="dark min-h-screen bg-background"> <div className="dark min-h-screen bg-background">
<Navigation /> {/* <Navigation /> */}
{/* Hero Section with DashboardVector */} {/* Hero Section with DashboardVector */}
<HireTalentHeroBanner <HireTalentHeroBanner
@@ -189,7 +189,7 @@ export function HireAdminPanelDevelopers() {
<SplitCallToAction /> <SplitCallToAction />
</section> </section>
<Footer /> {/* <Footer /> */}
</div> </div>
); );
} }

4
pages/HireAndroidAppDevelopers.tsx
View File

@@ -139,7 +139,7 @@ const hireAndroidAppDevelopersData = {
export function HireAndroidAppDevelopers() { export function HireAndroidAppDevelopers() {
return ( return (
<div className="dark min-h-screen bg-background"> <div className="dark min-h-screen bg-background">
<Navigation /> {/* <Navigation /> */}
{/* Hero Section with MobileAppVector */} {/* Hero Section with MobileAppVector */}
<HireTalentHeroBanner <HireTalentHeroBanner
@@ -189,7 +189,7 @@ export function HireAndroidAppDevelopers() {
<SplitCallToAction /> <SplitCallToAction />
</section> </section>
<Footer /> {/* <Footer /> */}
</div> </div>
); );
} }

9
pages/HireBackendDevelopers.tsx
View File

@@ -17,12 +17,13 @@ import {
Code, Code,
Users, Users,
} from "lucide-react"; } from "lucide-react";
import { navigateTo } from "@/App"; import { useNavigate } from "react-router-dom";
import { Helmet } from "react-helmet-async"; import { Helmet } from "react-helmet-async";
import { BackendVector } from "@/components/vectors"; import { BackendVector } from "@/components/vectors";
import { HireTalentHeroBanner } from "@/components/HireTalentHeroBanner"; import { HireTalentHeroBanner } from "@/components/HireTalentHeroBanner";
export const HireBackendDevelopers = () => { export const HireBackendDevelopers = () => {
const navigate = useNavigate();
const expertise = [ const expertise = [
{ {
category: "Languages & Frameworks", category: "Languages & Frameworks",
@@ -215,7 +216,7 @@ export const HireBackendDevelopers = () => {
return ( return (
<div className="dark min-h-screen bg-background"> <div className="dark min-h-screen bg-background">
<Navigation /> {/* <Navigation /> */}
<Helmet> <Helmet>
{/* Page Title and Meta Description */} {/* Page Title and Meta Description */}
@@ -494,7 +495,7 @@ export const HireBackendDevelopers = () => {
<Button <Button
size="lg" size="lg"
className="bg-[#E5195E] hover:bg-[#E5195E]/90 text-white" className="bg-[#E5195E] hover:bg-[#E5195E]/90 text-white"
onClick={() => navigateTo("/start-a-project")} onClick={() => navigate("/start-a-project")}
> >
Start Your Project Start Your Project
<ArrowRight className="ml-2 w-4 h-4" /> <ArrowRight className="ml-2 w-4 h-4" />
@@ -511,7 +512,7 @@ export const HireBackendDevelopers = () => {
</div> </div>
</section> </section>
<Footer /> {/* <Footer /> */}
</div> </div>
); );
}; };

4
pages/HireClickablePrototypesDevelopers.tsx
View File

@@ -139,7 +139,7 @@ const hireClickablePrototypesDevelopersData = {
export function HireClickablePrototypesDevelopers() { export function HireClickablePrototypesDevelopers() {
return ( return (
<div className="dark min-h-screen bg-background"> <div className="dark min-h-screen bg-background">
<Navigation /> {/* <Navigation /> */}
{/* Hero Section with ProjectTimelineVector */} {/* Hero Section with ProjectTimelineVector */}
<HireTalentHeroBanner <HireTalentHeroBanner
@@ -189,7 +189,7 @@ export function HireClickablePrototypesDevelopers() {
<SplitCallToAction /> <SplitCallToAction />
</section> </section>
<Footer /> {/* <Footer /> */}
</div> </div>
); );
} }

4
pages/HireCrossPlatformDevelopers.tsx
View File

@@ -139,7 +139,7 @@ const hireCrossPlatformDevelopersData = {
export function HireCrossPlatformDevelopers() { export function HireCrossPlatformDevelopers() {
return ( return (
<div className="dark min-h-screen bg-background"> <div className="dark min-h-screen bg-background">
<Navigation /> {/* <Navigation /> */}
{/* Hero Section with TechStackVisualization */} {/* Hero Section with TechStackVisualization */}
<HireTalentHeroBanner <HireTalentHeroBanner
@@ -189,7 +189,7 @@ export function HireCrossPlatformDevelopers() {
<SplitCallToAction /> <SplitCallToAction />
</section> </section>
<Footer /> {/* <Footer /> */}
</div> </div>
); );
} }

4
pages/HireCustomWebAppDevelopers.tsx
View File

@@ -139,7 +139,7 @@ const hireCustomWebAppDevelopersData = {
export function HireCustomWebAppDevelopers() { export function HireCustomWebAppDevelopers() {
return ( return (
<div className="dark min-h-screen bg-background"> <div className="dark min-h-screen bg-background">
<Navigation /> {/* <Navigation /> */}
{/* Hero Section with FrontendVector */} {/* Hero Section with FrontendVector */}
<HireTalentHeroBanner <HireTalentHeroBanner
@@ -189,7 +189,7 @@ export function HireCustomWebAppDevelopers() {
<SplitCallToAction /> <SplitCallToAction />
</section> </section>
<Footer /> {/* <Footer /> */}
</div> </div>
); );
} }

4
pages/HireDesignThinkingWorkshopsDevelopers.tsx
View File

@@ -139,7 +139,7 @@ const hireDesignThinkingWorkshopsDevelopersData = {
export function HireDesignThinkingWorkshopsDevelopers() { export function HireDesignThinkingWorkshopsDevelopers() {
return ( return (
<div className="dark min-h-screen bg-background"> <div className="dark min-h-screen bg-background">
<Navigation /> {/* <Navigation /> */}
{/* Hero Section with TeamCollaborationVector */} {/* Hero Section with TeamCollaborationVector */}
<HireTalentHeroBanner <HireTalentHeroBanner
@@ -189,7 +189,7 @@ export function HireDesignThinkingWorkshopsDevelopers() {
<SplitCallToAction /> <SplitCallToAction />
</section> </section>
<Footer /> {/* <Footer /> */}
</div> </div>
); );
} }

4
pages/HireEcommercePlatformDevelopers.tsx
View File

@@ -139,7 +139,7 @@ const hireEcommercePlatformDevelopersData = {
export function HireEcommercePlatformDevelopers() { export function HireEcommercePlatformDevelopers() {
return ( return (
<div className="dark min-h-screen bg-background"> <div className="dark min-h-screen bg-background">
<Navigation /> {/* <Navigation /> */}
{/* Hero Section with FullStackVector */} {/* Hero Section with FullStackVector */}
<HireTalentHeroBanner <HireTalentHeroBanner
@@ -189,7 +189,7 @@ export function HireEcommercePlatformDevelopers() {
<SplitCallToAction /> <SplitCallToAction />
</section> </section>
<Footer /> {/* <Footer /> */}
</div> </div>
); );
} }

4
pages/HireEnterpriseSoftwareDevelopers.tsx
View File

@@ -139,7 +139,7 @@ const hireEnterpriseSoftwareDevelopersData = {
export function HireEnterpriseSoftwareDevelopers() { export function HireEnterpriseSoftwareDevelopers() {
return ( return (
<div className="dark min-h-screen bg-background"> <div className="dark min-h-screen bg-background">
<Navigation /> {/* <Navigation /> */}
{/* Hero Section with FullStackVector */} {/* Hero Section with FullStackVector */}
<HireTalentHeroBanner <HireTalentHeroBanner
@@ -189,7 +189,7 @@ export function HireEnterpriseSoftwareDevelopers() {
<SplitCallToAction /> <SplitCallToAction />
</section> </section>
<Footer /> {/* <Footer /> */}
</div> </div>
); );
} }

9
pages/HireFrontendDevelopers.tsx
View File

@@ -16,12 +16,13 @@ import {
Star, Star,
Palette, Palette,
} from "lucide-react"; } from "lucide-react";
import { navigateTo } from "@/App"; import { useNavigate } from "react-router-dom";
import { Helmet } from "react-helmet-async"; import { Helmet } from "react-helmet-async";
import { FrontendVector } from "@/components/vectors"; import { FrontendVector } from "@/components/vectors";
import { HireTalentHeroBanner } from "@/components/HireTalentHeroBanner"; import { HireTalentHeroBanner } from "@/components/HireTalentHeroBanner";
export const HireFrontendDevelopers = () => { export const HireFrontendDevelopers = () => {
const navigate = useNavigate();
const expertise = [ const expertise = [
{ {
category: "JavaScript Frameworks", category: "JavaScript Frameworks",
@@ -148,7 +149,7 @@ export const HireFrontendDevelopers = () => {
return ( return (
<div className="dark min-h-screen bg-background"> <div className="dark min-h-screen bg-background">
<Navigation /> {/* <Navigation /> */}
<Helmet> <Helmet>
{/* Page Title and Meta Description */} {/* Page Title and Meta Description */}
@@ -383,7 +384,7 @@ export const HireFrontendDevelopers = () => {
<Button <Button
size="lg" size="lg"
className="bg-[#E5195E] hover:bg-[#E5195E]/90 text-white" className="bg-[#E5195E] hover:bg-[#E5195E]/90 text-white"
onClick={() => navigateTo("/start-a-project")} onClick={() => navigate("/start-a-project")}
> >
Get Started Today Get Started Today
<ArrowRight className="ml-2 w-4 h-4" /> <ArrowRight className="ml-2 w-4 h-4" />
@@ -400,7 +401,7 @@ export const HireFrontendDevelopers = () => {
</div> </div>
</section> </section>
<Footer /> {/* <Footer /> */}
</div> </div>
); );
}; };

9
pages/HireFullStackDevelopers.tsx
View File

@@ -18,12 +18,13 @@ import {
Star, Star,
Layers, Layers,
} from "lucide-react"; } from "lucide-react";
import { navigateTo } from "@/App"; import { useNavigate } from "react-router-dom";
import { Helmet } from "react-helmet-async"; import { Helmet } from "react-helmet-async";
import { HireTalentHeroBanner } from "@/components/HireTalentHeroBanner"; import { HireTalentHeroBanner } from "@/components/HireTalentHeroBanner";
import { DeveloperSkillsVector } from "@/components/vectors"; import { DeveloperSkillsVector } from "@/components/vectors";
export const HireFullStackDevelopers = () => { export const HireFullStackDevelopers = () => {
const navigate = useNavigate();
const expertise = [ const expertise = [
{ {
category: "Frontend Technologies", category: "Frontend Technologies",
@@ -157,7 +158,7 @@ export const HireFullStackDevelopers = () => {
return ( return (
<div className="dark min-h-screen bg-background"> <div className="dark min-h-screen bg-background">
<Navigation /> {/* <Navigation /> */}
<Helmet> <Helmet>
{/* Page Title and Meta Description */} {/* Page Title and Meta Description */}
@@ -434,7 +435,7 @@ export const HireFullStackDevelopers = () => {
<Button <Button
size="lg" size="lg"
className="bg-[#E5195E] hover:bg-[#E5195E]/90 text-white" className="bg-[#E5195E] hover:bg-[#E5195E]/90 text-white"
onClick={() => navigateTo("/start-a-project")} onClick={() => navigate("/start-a-project")}
> >
Start Your Project Start Your Project
<ArrowRight className="ml-2 w-4 h-4" /> <ArrowRight className="ml-2 w-4 h-4" />
@@ -451,7 +452,7 @@ export const HireFullStackDevelopers = () => {
</div> </div>
</section> </section>
<Footer /> {/* <Footer /> */}
</div> </div>
); );
}; };

9
pages/HireMobileAppDevelopers.tsx
View File

@@ -5,12 +5,13 @@ import { Button } from "../components/ui/button";
import { Badge } from "../components/ui/badge"; import { Badge } from "../components/ui/badge";
import { Card, CardContent } from "../components/ui/card"; import { Card, CardContent } from "../components/ui/card";
import { ArrowRight, Smartphone, Apple, Code, Zap, Shield, Target, Users, CheckCircle, Star } from "lucide-react"; import { ArrowRight, Smartphone, Apple, Code, Zap, Shield, Target, Users, CheckCircle, Star } from "lucide-react";
import { navigateTo } from "@/App"; import { useNavigate } from "react-router-dom";
import { Helmet } from "react-helmet-async"; import { Helmet } from "react-helmet-async";
import { HireTalentHeroBanner } from "@/components/HireTalentHeroBanner"; import { HireTalentHeroBanner } from "@/components/HireTalentHeroBanner";
import { MobileAppVector } from "@/components/vectors"; import { MobileAppVector } from "@/components/vectors";
export const HireMobileAppDevelopers = () => { export const HireMobileAppDevelopers = () => {
const navigate = useNavigate();
const expertise = [ const expertise = [
{ {
icon: Apple, icon: Apple,
@@ -115,7 +116,7 @@ export const HireMobileAppDevelopers = () => {
return ( return (
<div className="dark min-h-screen bg-background"> <div className="dark min-h-screen bg-background">
<Navigation /> {/* <Navigation /> */}
<Helmet> <Helmet>
{/* Page Title and Meta Description */} {/* Page Title and Meta Description */}
<title>Hire Mobile App Developers | Expert Talent at WDI</title> <title>Hire Mobile App Developers | Expert Talent at WDI</title>
@@ -326,7 +327,7 @@ export const HireMobileAppDevelopers = () => {
</p> </p>
<div className="flex flex-col sm:flex-row gap-4 justify-center"> <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={() => navigateTo("/start-a-project")} onClick={() => navigate("/start-a-project")}
> >
Get Started Today Get Started Today
<ArrowRight className="ml-2 w-4 h-4" /> <ArrowRight className="ml-2 w-4 h-4" />
@@ -339,7 +340,7 @@ export const HireMobileAppDevelopers = () => {
</div> </div>
</section> </section>
<Footer /> {/* <Footer /> */}
</div> </div>
); );
}; };

4
pages/HireNativeAppDevelopers.tsx
View File

@@ -139,7 +139,7 @@ const hireNativeAppDevelopersData = {
export function HireNativeAppDevelopers() { export function HireNativeAppDevelopers() {
return ( return (
<div className="dark min-h-screen bg-background"> <div className="dark min-h-screen bg-background">
<Navigation /> {/* <Navigation /> */}
{/* Hero Section with DeveloperSkillsVector */} {/* Hero Section with DeveloperSkillsVector */}
<HireTalentHeroBanner <HireTalentHeroBanner
@@ -189,7 +189,7 @@ export function HireNativeAppDevelopers() {
<SplitCallToAction /> <SplitCallToAction />
</section> </section>
<Footer /> {/* <Footer /> */}
</div> </div>
); );
} }

4
pages/HirePWADevelopers.tsx
View File

@@ -139,7 +139,7 @@ const hirePWADevelopersData = {
export function HirePWADevelopers() { export function HirePWADevelopers() {
return ( return (
<div className="dark min-h-screen bg-background"> <div className="dark min-h-screen bg-background">
<Navigation /> {/* <Navigation /> */}
{/* Hero Section with FrontendVector */} {/* Hero Section with FrontendVector */}
<HireTalentHeroBanner <HireTalentHeroBanner
@@ -189,7 +189,7 @@ export function HirePWADevelopers() {
<SplitCallToAction /> <SplitCallToAction />
</section> </section>
<Footer /> {/* <Footer /> */}
</div> </div>
); );
} }

4
pages/HireProductModernizationDevelopers.tsx
View File

@@ -139,7 +139,7 @@ const hireProductModernizationDevelopersData = {
export function HireProductModernizationDevelopers() { export function HireProductModernizationDevelopers() {
return ( return (
<div className="dark min-h-screen bg-background"> <div className="dark min-h-screen bg-background">
<Navigation /> {/* <Navigation /> */}
{/* Hero Section with ProjectTimelineVector */} {/* Hero Section with ProjectTimelineVector */}
<HireTalentHeroBanner <HireTalentHeroBanner
@@ -189,7 +189,7 @@ export function HireProductModernizationDevelopers() {
<SplitCallToAction /> <SplitCallToAction />
</section> </section>
<Footer /> {/* <Footer /> */}
</div> </div>
); );
} }

9
pages/HireQAEngineers.tsx
View File

@@ -17,12 +17,13 @@ import {
Activity, Activity,
Search, Search,
} from "lucide-react"; } from "lucide-react";
import { navigateTo } from "@/App"; import { useNavigate } from "react-router-dom";
import { Helmet } from "react-helmet-async"; import { Helmet } from "react-helmet-async";
import { QATestingVector } from "@/components/vectors"; import { QATestingVector } from "@/components/vectors";
import { HireTalentHeroBanner } from "@/components/HireTalentHeroBanner"; import { HireTalentHeroBanner } from "@/components/HireTalentHeroBanner";
export const HireQAEngineers = () => { export const HireQAEngineers = () => {
const navigate = useNavigate();
const expertise = [ const expertise = [
{ {
category: "Manual Testing", category: "Manual Testing",
@@ -222,7 +223,7 @@ export const HireQAEngineers = () => {
return ( return (
<div className="dark min-h-screen bg-background"> <div className="dark min-h-screen bg-background">
<Navigation /> {/* <Navigation /> */}
<Helmet> <Helmet>
{/* Page Title and Meta Description */} {/* Page Title and Meta Description */}
@@ -410,7 +411,7 @@ export const HireQAEngineers = () => {
<Button <Button
size="lg" size="lg"
className="bg-[#E5195E] hover:bg-[#E5195E]/90 text-white" className="bg-[#E5195E] hover:bg-[#E5195E]/90 text-white"
onClick={() => navigateTo("/start-a-project")} onClick={() => navigate("/start-a-project")}
> >
Start Quality Assurance Start Quality Assurance
<ArrowRight className="ml-2 w-4 h-4" /> <ArrowRight className="ml-2 w-4 h-4" />
@@ -427,7 +428,7 @@ export const HireQAEngineers = () => {
</div> </div>
</section> </section>
<Footer /> {/* <Footer /> */}
</div> </div>
); );
}; };

4
pages/HireSaaSProductDevelopers.tsx
View File

@@ -139,7 +139,7 @@ const hireSaaSProductDevelopersData = {
export function HireSaaSProductDevelopers() { export function HireSaaSProductDevelopers() {
return ( return (
<div className="dark min-h-screen bg-background"> <div className="dark min-h-screen bg-background">
<Navigation /> {/* <Navigation /> */}
{/* Hero Section with TechStackVisualization */} {/* Hero Section with TechStackVisualization */}
<HireTalentHeroBanner <HireTalentHeroBanner
@@ -189,7 +189,7 @@ export function HireSaaSProductDevelopers() {
<SplitCallToAction /> <SplitCallToAction />
</section> </section>
<Footer /> {/* <Footer /> */}
</div> </div>
); );
} }

4
pages/HireSystemArchitectureDevOpsDevelopers.tsx
View File

@@ -139,7 +139,7 @@ const hireSystemArchitectureDevOpsDevelopersData = {
export function HireSystemArchitectureDevOpsDevelopers() { export function HireSystemArchitectureDevOpsDevelopers() {
return ( return (
<div className="dark min-h-screen bg-background"> <div className="dark min-h-screen bg-background">
<Navigation /> {/* <Navigation /> */}
{/* Hero Section with BackendVector */} {/* Hero Section with BackendVector */}
<HireTalentHeroBanner <HireTalentHeroBanner
@@ -189,7 +189,7 @@ export function HireSystemArchitectureDevOpsDevelopers() {
<SplitCallToAction /> <SplitCallToAction />
</section> </section>
<Footer /> {/* <Footer /> */}
</div> </div>
); );
} }

13
pages/HireTalent.tsx
View File

@@ -5,10 +5,11 @@ import { Button } from "../components/ui/button";
import { Badge } from "../components/ui/badge"; import { Badge } from "../components/ui/badge";
import { Card, CardContent } from "../components/ui/card"; import { Card, CardContent } from "../components/ui/card";
import { ArrowRight, Users, Clock, Target, DollarSign, Shield, Zap, CheckCircle, Smartphone, Code, Monitor, Database, Palette, TestTube } from "lucide-react"; import { ArrowRight, Users, Clock, Target, DollarSign, Shield, Zap, CheckCircle, Smartphone, Code, Monitor, Database, Palette, TestTube } from "lucide-react";
import { navigateTo } from "../App";
import { Helmet } from "react-helmet-async"; import { Helmet } from "react-helmet-async";
import { useNavigate } from "react-router-dom";
export const HireTalent = () => { export const HireTalent = () => {
const navigate = useNavigate();
const talentCategories = [ const talentCategories = [
{ {
title: "Mobile App Developers", title: "Mobile App Developers",
@@ -107,7 +108,7 @@ export const HireTalent = () => {
return ( return (
<div className="dark min-h-screen bg-background"> <div className="dark min-h-screen bg-background">
<Navigation /> {/* <Navigation /> */}
{/* Hero Section */} {/* Hero Section */}
<section className="relative pt-24 pb-16 overflow-hidden"> <section className="relative pt-24 pb-16 overflow-hidden">
@@ -180,7 +181,7 @@ export const HireTalent = () => {
Connecting You with Exceptional Tech Professionals, Effortlessly. In today's fast-paced digital landscape, access to top-tier technical talent is crucial for success. Connecting You with Exceptional Tech Professionals, Effortlessly. In today's fast-paced digital landscape, access to top-tier technical talent is crucial for success.
</p> </p>
<div className="flex flex-col sm:flex-row gap-4 justify-center" <div className="flex flex-col sm:flex-row gap-4 justify-center"
onClick={() => navigateTo("/start-a-project")} onClick={() => navigate("/start-a-project")}
> >
<Button size="lg" className="bg-[#E5195E] hover:bg-[#E5195E]/90 text-white"> <Button size="lg" className="bg-[#E5195E] hover:bg-[#E5195E]/90 text-white">
Tell Us Your Hiring Needs Tell Us Your Hiring Needs
@@ -249,7 +250,7 @@ export const HireTalent = () => {
<div className="grid md:grid-cols-2 lg:grid-cols-3 gap-8"> <div className="grid md:grid-cols-2 lg:grid-cols-3 gap-8">
{talentCategories.map((category, index) => ( {talentCategories.map((category, index) => (
<Card key={index} className="bg-background/50 border-white/10 hover:border-[#E5195E]/30 transition-all duration-300 group cursor-pointer" onClick={() => navigateTo(category.href)}> <Card key={index} className="bg-background/50 border-white/10 hover:border-[#E5195E]/30 transition-all duration-300 group cursor-pointer" onClick={() => navigate(category.href)}>
<CardContent className="p-8"> <CardContent className="p-8">
<category.icon className="w-12 h-12 text-[#E5195E] mb-6 group-hover:scale-110 transition-transform duration-300" /> <category.icon className="w-12 h-12 text-[#E5195E] mb-6 group-hover:scale-110 transition-transform duration-300" />
@@ -358,7 +359,7 @@ export const HireTalent = () => {
</p> </p>
<div className="flex flex-col sm:flex-row gap-4 justify-center"> <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={() => navigateTo("/start-a-project")} onClick={() => navigate("/start-a-project")}
> >
Start Hiring Now Start Hiring Now
<ArrowRight className="ml-2 w-4 h-4" /> <ArrowRight className="ml-2 w-4 h-4" />
@@ -371,7 +372,7 @@ export const HireTalent = () => {
</div> </div>
</section> </section>
<Footer /> {/* <Footer /> */}
</div> </div>
); );
}; };

4
pages/HireThirdPartyIntegrationsDevelopers.tsx
View File

@@ -139,7 +139,7 @@ const hireThirdPartyIntegrationsDevelopersData = {
export function HireThirdPartyIntegrationsDevelopers() { export function HireThirdPartyIntegrationsDevelopers() {
return ( return (
<div className="dark min-h-screen bg-background"> <div className="dark min-h-screen bg-background">
<Navigation /> {/* <Navigation /> */}
{/* Hero Section with TeamCollaborationVector */} {/* Hero Section with TeamCollaborationVector */}
<HireTalentHeroBanner <HireTalentHeroBanner
@@ -189,7 +189,7 @@ export function HireThirdPartyIntegrationsDevelopers() {
<SplitCallToAction /> <SplitCallToAction />
</section> </section>
<Footer /> {/* <Footer /> */}
</div> </div>
); );
} }

9
pages/HireUIUXDesigners.tsx
View File

@@ -16,12 +16,13 @@ import {
MousePointer2, MousePointer2,
TestTube, TestTube,
} from "lucide-react"; } from "lucide-react";
import { navigateTo } from "@/App"; import { useNavigate } from "react-router-dom";
import { Helmet } from "react-helmet-async"; import { Helmet } from "react-helmet-async";
import { UIUXVector } from "@/components/vectors"; import { UIUXVector } from "@/components/vectors";
import { HireTalentHeroBanner } from "@/components/HireTalentHeroBanner"; import { HireTalentHeroBanner } from "@/components/HireTalentHeroBanner";
export const HireUIUXDesigners = () => { export const HireUIUXDesigners = () => {
const navigate = useNavigate();
const expertise = [ const expertise = [
{ {
category: "User Research & Analysis", category: "User Research & Analysis",
@@ -199,7 +200,7 @@ export const HireUIUXDesigners = () => {
return ( return (
<div className="dark min-h-screen bg-background"> <div className="dark min-h-screen bg-background">
<Navigation /> {/* <Navigation /> */}
<Helmet> <Helmet>
{/* Page Title and Meta Description */} {/* Page Title and Meta Description */}
@@ -475,7 +476,7 @@ export const HireUIUXDesigners = () => {
<Button <Button
size="lg" size="lg"
className="bg-[#E5195E] hover:bg-[#E5195E]/90 text-white" className="bg-[#E5195E] hover:bg-[#E5195E]/90 text-white"
onClick={() => navigateTo("/start-a-project")} onClick={() => navigate("/start-a-project")}
> >
Start Your Design Journey Start Your Design Journey
<ArrowRight className="ml-2 w-4 h-4" /> <ArrowRight className="ml-2 w-4 h-4" />
@@ -492,7 +493,7 @@ export const HireUIUXDesigners = () => {
</div> </div>
</section> </section>
<Footer /> {/* <Footer /> */}
</div> </div>
); );
}; };

4
pages/HireUserResearchTestingDevelopers.tsx
View File

@@ -139,7 +139,7 @@ const hireUserResearchTestingDevelopersData = {
export function HireUserResearchTestingDevelopers() { export function HireUserResearchTestingDevelopers() {
return ( return (
<div className="dark min-h-screen bg-background"> <div className="dark min-h-screen bg-background">
<Navigation /> {/* <Navigation /> */}
{/* Hero Section with DeveloperSkillsVector */} {/* Hero Section with DeveloperSkillsVector */}
<HireTalentHeroBanner <HireTalentHeroBanner
@@ -189,7 +189,7 @@ export function HireUserResearchTestingDevelopers() {
<SplitCallToAction /> <SplitCallToAction />
</section> </section>
<Footer /> {/* <Footer /> */}
</div> </div>
); );
} }

4
pages/HireWearableAppDevelopers.tsx
View File

@@ -139,7 +139,7 @@ const hireWearableAppDevelopersData = {
export function HireWearableAppDevelopers() { export function HireWearableAppDevelopers() {
return ( return (
<div className="dark min-h-screen bg-background"> <div className="dark min-h-screen bg-background">
<Navigation /> {/* <Navigation /> */}
{/* Hero Section with TechStackVisualization */} {/* Hero Section with TechStackVisualization */}
<HireTalentHeroBanner <HireTalentHeroBanner
@@ -189,7 +189,7 @@ export function HireWearableAppDevelopers() {
<SplitCallToAction /> <SplitCallToAction />
</section> </section>
<Footer /> {/* <Footer /> */}
</div> </div>
); );
} }

4
pages/HireiOSAppDevelopers.tsx
View File

@@ -139,7 +139,7 @@ const hireiOSAppDevelopersData = {
export function HireiOSAppDevelopers() { export function HireiOSAppDevelopers() {
return ( return (
<div className="dark min-h-screen bg-background"> <div className="dark min-h-screen bg-background">
<Navigation /> {/* <Navigation /> */}
{/* Hero Section with MobileAppVector */} {/* Hero Section with MobileAppVector */}
<HireTalentHeroBanner <HireTalentHeroBanner
@@ -189,7 +189,7 @@ export function HireiOSAppDevelopers() {
<SplitCallToAction /> <SplitCallToAction />
</section> </section>
<Footer /> {/* <Footer /> */}
</div> </div>
); );
} }

288
pages/Homepage.tsx Normal file
View File

@@ -0,0 +1,288 @@
import { CarouselTestimonials } from "@/components/CarouselTestimonials";
import { CaseStudyHighlight } from "@/components/CaseStudyHighlight";
import { Footer } from "@/components/Footer";
import { HorizontalTagScroller } from "@/components/HorizontalTagScroller";
import { InlineCTA } from "@/components/InlineCTA";
import { ProcessSection } from "@/components/ProcessSection";
import { ResourceCards } from "@/components/ResourceCards";
import { SplitCallToAction } from "@/components/SplitCallToAction";
import { WhyChooseWDI } from "@/components/WhyChooseWDI";
import { ChevronRight } from "lucide-react";
import { motion } from "framer-motion";
import { Helmet } from "react-helmet-async";
import { Navigation } from "@/components/Navigation";
import { HeroSection } from "@/components/HeroSection";
import { ClientLogos } from "@/components/ClientLogos";
import { useNavigate } from "react-router-dom";
const services = [
{
title: "Mobile App Development",
icon: (
<path
strokeLinecap="round"
strokeLinejoin="round"
strokeWidth={1.5}
d="M12 18h.01M8 21h8a2 2 0 002-2V5a2 2 0 00-2-2H8a2 2 0 00-2 2v14a2 2 0 002 2z"
/>
),
description: "Native & cross-platform apps with pixel-perfect UIs and seamless user experiences.",
link: "/services/mobile-app-development"
},
{
title: "Web Platforms & SaaS",
icon: (
<path
strokeLinecap="round"
strokeLinejoin="round"
strokeWidth={1.5}
d="M10 20l4-16m4 4l4 4-4 4M6 16l-4-4 4-4"
/>
),
description: "Scalable, secure, and SEO-optimized web applications built for performance.",
link: "/web-cloud"
},
{
title: "AI & ML Solutions",
icon: (
<path
strokeLinecap="round"
strokeLinejoin="round"
strokeWidth={1.5}
d="M9.663 17h4.673M12 3v1m6.364 1.636l-.707.707M21 12h-1M4 12H3m3.343-5.657l-.707-.707m2.828 9.9a5 5 0 117.072 0l-.548.547A3.374 3.374 0 0014 18.469V19a2 2 0 11-4 0v-.531c0-.895-.356-1.754-.988-2.386l-.548-.547z"
/>
),
description: "Intelligent features powered by cutting-edge algorithms and machine learning.",
link: "/artificial-intelligence"
},
{
title: "DevOps & Cloud",
icon: (
<path
strokeLinecap="round"
strokeLinejoin="round"
strokeWidth={1.5}
d="M5 12h14M5 12a2 2 0 01-2-2V6a2 2 0 012-2h14a2 2 0 012 2v4a2 2 0 01-2 2M5 12a2 2 0 00-2 2v4a2 2 0 002 2h14a2 2 0 002-2v-4a2 2 0 00-2-2m-2-4h.01M17 16h.01"
/>
),
description: "CI/CD pipelines and managed cloud infrastructure for seamless deployment.",
link: "/services/system-architecture-devops"
},
{
title: "Product Design & UX",
icon: (
<path
strokeLinecap="round"
strokeLinejoin="round"
strokeWidth={1.5}
d="M7 21a4 4 0 01-4-4V5a2 2 0 012-2h4a2 2 0 012 2v12a4 4 0 01-4 4zM21 5a2 2 0 00-2-2h-4a2 2 0 00-2 2v12a4 4 0 004 4h4a2 2 0 002-2V5z"
/>
),
description: "Human-centered UX with delightful micro-interactions and intuitive interfaces.",
link: "/design-experience"
},
{
title: "Security & Compliance",
icon: (
<path
strokeLinecap="round"
strokeLinejoin="round"
strokeWidth={1.5}
d="M9 12l2 2 4-4m5.618-4.016A11.955 11.955 0 0112 2.944a11.955 11.955 0 01-8.618 3.04A12.02 12.02 0 003 9c0 5.591 3.824 10.29 9 11.622 5.176-1.332 9-6.03 9-11.622 0-1.042-.133-2.052-.382-3.016z"
/>
),
description: "Pen-testing, auditing, and regulatory alignment for enterprise-grade security.",
link: "/solutions/compliance-ready-systems"
}
];
export const Homepage = () => {
const navigate = useNavigate();
return (
<div className="dark min-h-screen bg-background">
<Helmet>
{/* Page Title and Meta Description */}
<title>Mobile App Development Services | WDI - iOS & Android App Development</title>
<meta
name="description"
content="Professional mobile app development services at WDI. Build secure, scalable iOS and Android apps with expert developers. Cross-platform solutions available."
/>
{/* Canonical Link */}
<link rel="canonical" href="https://www.wdipl.com/" />
{/* Open Graph Tags (for Facebook, LinkedIn) */}
<meta property="og:title" content="Mobile App Development Services | WDI - iOS & Android App Development" />
<meta
property="og:description"
content="Professional mobile app development services at WDI. Build secure, scalable iOS and Android apps with expert developers. Cross-platform solutions available."
/>
<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="Mobile App Development Services | WDI - iOS & Android App Development" />
<meta
name="twitter:description"
content="Professional mobile app development services at WDI. Build secure, scalable iOS and Android apps with expert developers. Cross-platform solutions available."
/>
<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 - 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> */}
<section className="py-20 bg-background">
<div className="container mx-auto px-6 lg:px-8">
<motion.div
initial={{ opacity: 0, y: 30 }}
whileInView={{ opacity: 1, y: 0 }}
transition={{ duration: 0.8 }}
viewport={{ once: true }}
className="text-left mb-20"
>
<div className="text-center">
<h2 className="text-3xl sm:text-4xl font-semibold tracking-tight text-white">What We Do</h2>
<p className="mt-4 text-gray-400 max-w-2xl mx-auto">
End-to-end solutions for every stage of your product lifecycle.
</p>
</div>
</motion.div>
<motion.div
initial={{ opacity: 0, y: 40 }}
whileInView={{ opacity: 1, y: 0 }}
transition={{ duration: 0.8, delay: 0.2 }}
viewport={{ once: true }}
className="grid md:grid-cols-2 lg:grid-cols-3 gap-8"
>
{services.map((service, index) => {
const IconComponent = service.icon;
return (
<motion.div
key={index}
initial={{ opacity: 0, y: 20 }}
whileInView={{ opacity: 1, y: 0 }}
transition={{ duration: 0.5, delay: index * 0.01 }}
viewport={{ once: true }}
whileHover={{ y: -5 }}
className="group cursor-pointer"
onClick={() => 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" /> */}
<svg
className="w-6 h-6 text-accent"
fill="none"
stroke="currentColor"
viewBox="0 0 24 24"
>
{service.icon}
</svg>
</div>
<div>
<h3 className="text-xl font-semibold text-white mb-4">
{service.title}
</h3>
<p className="text-gray-400 leading-relaxed">
{service.description}
</p>
</div>
<div className="flex items-center gap-2 text-accent font-medium">
<span>Explore Services</span>
<ChevronRight className="w-4 h-4" />
</div>
</div>
</div>
</motion.div>
);
})}
</motion.div>
</div>
</section>
{/* Why Choose WDI - Dark background */}
<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>
);
};

17
pages/Industries.tsx
View File

@@ -8,16 +8,17 @@ import { Button } from "../components/ui/button";
import { ShimmerButton } from "../components/ui/shimmer-button"; import { ShimmerButton } from "../components/ui/shimmer-button";
import { Badge } from "../components/ui/badge"; import { Badge } from "../components/ui/badge";
import { Card, CardContent } from "../components/ui/card"; import { Card, CardContent } from "../components/ui/card";
import { navigateTo } from "../App";
import { import {
DollarSign, Stethoscope, GraduationCap, ShoppingCart, Monitor, DollarSign, Stethoscope, GraduationCap, ShoppingCart, Monitor,
Truck, Factory, Users, Star, ArrowRight, ChevronRight, Clock, Truck, Factory, Users, Star, ArrowRight, ChevronRight, Clock,
TrendingUp, Building, Cpu, Calendar, Eye, Target, Zap, TrendingUp, Building, Cpu, Calendar, Eye, Target, Zap,
CheckCircle, Lightbulb, Award, Handshake, Heart CheckCircle, Lightbulb, Award, Handshake, Heart
} from "lucide-react"; } from "lucide-react";
import { useNavigate } from "react-router-dom";
// Enhanced Hero Section // Enhanced Hero Section
const HeroWithCTA = () => { const HeroWithCTA = () => {
const navigate = useNavigate();
return ( return (
<section className="relative py-20 overflow-hidden bg-black"> <section className="relative py-20 overflow-hidden bg-black">
<div className="container mx-auto px-6 lg:px-8"> <div className="container mx-auto px-6 lg:px-8">
@@ -57,7 +58,7 @@ const HeroWithCTA = () => {
transition={{ duration: 0.8, delay: 0.3 }} transition={{ duration: 0.8, delay: 0.3 }}
className="flex flex-col sm:flex-row gap-4" 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')}>
<div className="inline-flex items-center gap-2"> <div className="inline-flex items-center gap-2">
<Calendar className="w-4 h-4 flex-shrink-0" /> <Calendar className="w-4 h-4 flex-shrink-0" />
<span>Discuss Your Industry</span> <span>Discuss Your Industry</span>
@@ -67,7 +68,7 @@ const HeroWithCTA = () => {
variant="secondary" variant="secondary"
size="lg" size="lg"
className="text-lg px-8 py-4" className="text-lg px-8 py-4"
onClick={() => navigateTo('/case-studies')} onClick={() => navigate('/case-studies')}
> >
<Eye className="w-4 h-4 flex-shrink-0" /> <Eye className="w-4 h-4 flex-shrink-0" />
<span>View Success Stories</span> <span>View Success Stories</span>
@@ -117,6 +118,7 @@ const HeroWithCTA = () => {
// Industry Categories Grid // Industry Categories Grid
const IndustryGrid = () => { const IndustryGrid = () => {
const navigate = useNavigate();
const industries = [ const industries = [
{ {
title: "Financial Services", title: "Financial Services",
@@ -228,7 +230,7 @@ const IndustryGrid = () => {
viewport={{ once: true }} viewport={{ once: true }}
whileHover={{ y: -5 }} whileHover={{ y: -5 }}
className="group cursor-pointer" className="group cursor-pointer"
onClick={() => navigateTo(industry.link)} onClick={() => navigate(industry.link)}
> >
<Card className="bg-gray-900/50 backdrop-blur-sm rounded-2xl border border-gray-800 hover:border-accent/30 transition-all duration-300 shadow-lg hover:shadow-xl h-full overflow-hidden"> <Card className="bg-gray-900/50 backdrop-blur-sm rounded-2xl border border-gray-800 hover:border-accent/30 transition-all duration-300 shadow-lg hover:shadow-xl h-full overflow-hidden">
<CardContent className="p-0 flex flex-col h-full"> <CardContent className="p-0 flex flex-col h-full">
@@ -369,6 +371,7 @@ const WhyChooseWDI = () => {
// Updated CTA Section // Updated CTA Section
const InlineCTA = () => { const InlineCTA = () => {
const navigate = useNavigate();
return ( return (
<section className="py-20 bg-gray-950/50 relative overflow-hidden"> <section className="py-20 bg-gray-950/50 relative overflow-hidden">
{/* Add subtle decorative elements matching site theme */} {/* Add subtle decorative elements matching site theme */}
@@ -412,7 +415,7 @@ const InlineCTA = () => {
</p> </p>
{/* CTA Button */} {/* CTA Button */}
<ShimmerButton className="text-xl px-10 py-5 rounded-2xl shadow-lg hover:shadow-xl" onClick={() => navigateTo('/contact/schedule-a-discovery-call')}> <ShimmerButton className="text-xl px-10 py-5 rounded-2xl shadow-lg hover:shadow-xl" onClick={() => navigate('/contact/schedule-a-discovery-call')}>
<div className="inline-flex items-center gap-3"> <div className="inline-flex items-center gap-3">
<Calendar className="w-6 h-6 flex-shrink-0" /> <Calendar className="w-6 h-6 flex-shrink-0" />
<span>Schedule Industry Consultation</span> <span>Schedule Industry Consultation</span>
@@ -452,7 +455,7 @@ const industriesFAQs = [
export function Industries() { export function Industries() {
return ( return (
<div className="dark min-h-screen bg-background"> <div className="dark min-h-screen bg-background">
<Navigation /> {/* <Navigation /> */}
<HeroWithCTA /> <HeroWithCTA />
<IndustryGrid /> <IndustryGrid />
<WhyChooseWDI /> <WhyChooseWDI />
@@ -463,7 +466,7 @@ export function Industries() {
subtitle="Get answers to common questions about our industry-specific solutions and expertise." subtitle="Get answers to common questions about our industry-specific solutions and expertise."
faqs={industriesFAQs} faqs={industriesFAQs}
/> />
<Footer /> {/* <Footer /> */}
</div> </div>
); );
} }

9
pages/LeadershipTeam.tsx
View File

@@ -4,7 +4,7 @@ import { Footer } from "../components/Footer";
import { Button } from "../components/ui/button"; import { Button } from "../components/ui/button";
import { Badge } from "../components/ui/badge"; import { Badge } from "../components/ui/badge";
import { ArrowRight, Linkedin, Twitter, Mail } from "lucide-react"; import { ArrowRight, Linkedin, Twitter, Mail } from "lucide-react";
import { navigateTo } from "@/App"; import { useNavigate } from "react-router-dom";
import riteshImage from "../src/images/ritesh-pandey.png"; import riteshImage from "../src/images/ritesh-pandey.png";
import manavImage from "../src/images/manav-sain.png"; import manavImage from "../src/images/manav-sain.png";
import sudhirImage from "../src/images/sudhir-malya.jpg"; import sudhirImage from "../src/images/sudhir-malya.jpg";
@@ -14,6 +14,7 @@ import tanveerImage from "../src/images/tanveer.jpg";
import { Helmet } from "react-helmet-async"; import { Helmet } from "react-helmet-async";
export const LeadershipTeam = () => { export const LeadershipTeam = () => {
const navigate = useNavigate();
const leaders = [ const leaders = [
{ {
name: "Ritesh Pandey", name: "Ritesh Pandey",
@@ -176,7 +177,7 @@ export const LeadershipTeam = () => {
`} `}
</script> </script>
</Helmet> </Helmet>
<Navigation /> {/* <Navigation /> */}
{/* Hero Section */} {/* Hero Section */}
<section className="relative pt-24 pb-16 overflow-hidden"> <section className="relative pt-24 pb-16 overflow-hidden">
@@ -372,7 +373,7 @@ export const LeadershipTeam = () => {
size="lg" size="lg"
variant="outline" variant="outline"
className="border-white/20 text-white hover:bg-white/10" className="border-white/20 text-white hover:bg-white/10"
onClick={() => navigateTo("/start-a-project")} onClick={() => navigate("/start-a-project")}
> >
Start a Project Start a Project
</Button> </Button>
@@ -381,7 +382,7 @@ export const LeadershipTeam = () => {
</div> </div>
</section> </section>
<Footer /> {/* <Footer /> */}
</div> </div>
); );
}; };

15
pages/LegacySystemRebuilds.tsx
View File

@@ -42,11 +42,12 @@ import { Badge } from "../components/ui/badge";
import { Button } from "../components/ui/button"; import { Button } from "../components/ui/button";
import { Card, CardContent } from "../components/ui/card"; import { Card, CardContent } from "../components/ui/card";
import { ShimmerButton } from "../components/ui/shimmer-button"; import { ShimmerButton } from "../components/ui/shimmer-button";
import { navigateTo } from "@/App"; import { useNavigate } from "react-router-dom";
import { Helmet } from "react-helmet-async"; import { Helmet } from "react-helmet-async";
// Legacy System Rebuilds Hero Section // Legacy System Rebuilds Hero Section
const LegacySystemRebuildsHero = () => { const LegacySystemRebuildsHero = () => {
const navigate = useNavigate();
return ( return (
<section className="relative py-20 overflow-hidden bg-black"> <section className="relative py-20 overflow-hidden bg-black">
<Helmet> <Helmet>
@@ -137,7 +138,7 @@ const LegacySystemRebuildsHero = () => {
> >
<ShimmerButton <ShimmerButton
className="text-lg px-8 py-4" 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"> <div className="inline-flex items-center gap-2">
<MessageSquare className="w-5 h-5 flex-shrink-0" /> <MessageSquare className="w-5 h-5 flex-shrink-0" />
@@ -1249,6 +1250,7 @@ const LegacySystemCaseStudies = () => {
// Mid-Page Lead Capture CTA // Mid-Page Lead Capture CTA
const LegacySystemInlineCTA = () => { const LegacySystemInlineCTA = () => {
const navigate = useNavigate();
return ( return (
<section className="py-20"> <section className="py-20">
<div className="container mx-auto px-6 lg:px-8"> <div className="container mx-auto px-6 lg:px-8">
@@ -1287,7 +1289,7 @@ const LegacySystemInlineCTA = () => {
<ShimmerButton <ShimmerButton
className="text-xl px-10 py-5 rounded-2xl shadow-lg hover:shadow-xl" 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"> <div className="inline-flex items-center gap-3">
<Search className="w-6 h-6 flex-shrink-0" /> <Search className="w-6 h-6 flex-shrink-0" />
@@ -1375,6 +1377,7 @@ const LegacySystemFAQs = () => {
// Final CTA Section // Final CTA Section
const LegacySystemFinalCTA = () => { const LegacySystemFinalCTA = () => {
const navigate = useNavigate();
return ( return (
<section className="py-20 relative overflow-hidden"> <section className="py-20 relative overflow-hidden">
<div className="container mx-auto px-6 lg:px-8 relative z-10"> <div className="container mx-auto px-6 lg:px-8 relative z-10">
@@ -1427,7 +1430,7 @@ const LegacySystemFinalCTA = () => {
> >
<ShimmerButton <ShimmerButton
className="px-12 py-6 text-xl rounded-2xl shadow-2xl hover:shadow-accent/25" 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"> <div className="inline-flex items-center gap-3">
<Calendar className="w-6 h-6 flex-shrink-0" /> <Calendar className="w-6 h-6 flex-shrink-0" />
@@ -1456,7 +1459,7 @@ const LegacySystemFinalCTA = () => {
export const LegacySystemRebuilds = () => { export const LegacySystemRebuilds = () => {
return ( return (
<div className="dark min-h-screen"> <div className="dark min-h-screen">
<Navigation /> {/* <Navigation /> */}
{/* Hero Section */} {/* Hero Section */}
<section className="bg-black"> <section className="bg-black">
@@ -1510,7 +1513,7 @@ export const LegacySystemRebuilds = () => {
{/* Footer */} {/* Footer */}
<section className="bg-card"> <section className="bg-card">
<Footer /> {/* <Footer /> */}
</section> </section>
</div> </div>
); );

Some files were not shown because too many files have changed in this diff Show More