All changes, done like fully react router uses, services, al/ml and solution page section alignment and missing section done!
This commit is contained in:
priyanshuvish
849
App.tsx
849
App.tsx
@@ -1,845 +1,34 @@
|
||||
import { useEffect, useState } from "react";
|
||||
import { CarouselTestimonials } from "./components/CarouselTestimonials";
|
||||
import { CaseStudyHighlight } from "./components/CaseStudyHighlight";
|
||||
import { ClientLogos } from "./components/ClientLogos";
|
||||
import { Footer } from "./components/Footer";
|
||||
import { HeroSection } from "./components/HeroSection";
|
||||
import { HorizontalTagScroller } from "./components/HorizontalTagScroller";
|
||||
import { InlineCTA } from "./components/InlineCTA";
|
||||
// App.tsx
|
||||
import { Navigation } from "./components/Navigation";
|
||||
import { ProcessSection } from "./components/ProcessSection";
|
||||
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 { Footer } from "./components/Footer";
|
||||
import { CookieConsent } from "./components/CookieConsent";
|
||||
import { ArticleDetail } from "./pages/ArticleDetail";
|
||||
import { AutomationReshapingBusiness } from "./pages/AutomationReshapingBusiness";
|
||||
import { BuildingYourAPIStack } from "./pages/BuildingYourAPIStack";
|
||||
import { ClientSupport } from "./pages/ClientSupport";
|
||||
import { 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;
|
||||
import { AppRouter } from "./src/Router";
|
||||
import { useLocation } from "react-router-dom";
|
||||
import { useEffect } from "react";
|
||||
|
||||
// Smooth scroll to top function
|
||||
const scrollToTop = () => {
|
||||
const scrollStep = -window.scrollY / (300 / 15); // Duration in ms / frame rate
|
||||
const scrollInterval = () => {
|
||||
if (window.scrollY !== 0) {
|
||||
window.scrollBy(0, scrollStep);
|
||||
window.requestAnimationFrame(scrollInterval);
|
||||
}
|
||||
};
|
||||
window.requestAnimationFrame(scrollInterval);
|
||||
window.scrollTo({ top: 0, behavior: 'smooth' });
|
||||
};
|
||||
|
||||
export const navigateTo = (path: string) => {
|
||||
if (setCurrentPath) {
|
||||
// First update the URL and path
|
||||
window.history.pushState({}, "", path);
|
||||
setCurrentPath(path);
|
||||
}
|
||||
};
|
||||
|
||||
// Simple routing logic with better state management
|
||||
const useRouter = () => {
|
||||
const [currentPath, setCurrentPathState] = useState(
|
||||
window.location.pathname,
|
||||
);
|
||||
function App() {
|
||||
const location = useLocation();
|
||||
|
||||
// Scroll to top on route change
|
||||
useEffect(() => {
|
||||
// Set the global navigation function
|
||||
setCurrentPath = setCurrentPathState;
|
||||
scrollToTop();
|
||||
}, [location.pathname]);
|
||||
|
||||
const handlePopState = () => {
|
||||
setCurrentPathState(window.location.pathname);
|
||||
};
|
||||
|
||||
window.addEventListener("popstate", handlePopState);
|
||||
|
||||
return () => {
|
||||
window.removeEventListener("popstate", handlePopState);
|
||||
setCurrentPath = null;
|
||||
};
|
||||
}, []);
|
||||
|
||||
// Scroll to top whenever the path changes - but only after a delay to ensure rendering
|
||||
useEffect(() => {
|
||||
// Use a timeout to ensure the new page has rendered before scrolling
|
||||
const scrollTimeout = setTimeout(() => {
|
||||
scrollToTop();
|
||||
}, 100);
|
||||
|
||||
return () => clearTimeout(scrollTimeout);
|
||||
}, [currentPath]);
|
||||
|
||||
return { currentPath };
|
||||
};
|
||||
|
||||
|
||||
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 />
|
||||
<div className="pt-24 pb-16 bg-background">
|
||||
<div className="container mx-auto px-6 lg:px-8">
|
||||
<div className="max-w-4xl mx-auto text-center">
|
||||
<h1 className="text-4xl md:text-6xl font-bold mb-6 bg-gradient-to-r from-white via-white to-white/80 bg-clip-text text-transparent">
|
||||
{title}
|
||||
</h1>
|
||||
<p className="text-lg text-muted-foreground mb-8">
|
||||
This page is currently under development. Please
|
||||
check back soon!
|
||||
</p>
|
||||
<Button onClick={() => navigateTo("/")} size="lg">
|
||||
Return to Homepage
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<Footer />
|
||||
</div>
|
||||
);
|
||||
|
||||
// Homepage component - ENSURED ALL SECTIONS USE DARK BACKGROUNDS
|
||||
const Homepage = () => (
|
||||
<div className="dark min-h-screen bg-background">
|
||||
<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 />
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
// Handle dynamic article routes
|
||||
if (currentPath.startsWith("/articles/")) {
|
||||
return (
|
||||
<div className="min-h-screen bg-background">
|
||||
<ArticleDetail />
|
||||
<CookieConsent />
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
// Handle dynamic insight routes
|
||||
if (currentPath.startsWith("/insights/")) {
|
||||
const slug = currentPath.replace("/insights/", "");
|
||||
let InsightComponent;
|
||||
|
||||
switch (slug) {
|
||||
case "ux-review-presentations":
|
||||
InsightComponent = UXReviewPresentations;
|
||||
break;
|
||||
case "migrating-to-linear-101":
|
||||
InsightComponent = MigratingToLinear101;
|
||||
break;
|
||||
case "building-your-api-stack":
|
||||
InsightComponent = BuildingYourAPIStack;
|
||||
break;
|
||||
default:
|
||||
InsightComponent = null;
|
||||
}
|
||||
|
||||
if (InsightComponent) {
|
||||
return (
|
||||
<div className="min-h-screen bg-background">
|
||||
<InsightComponent />
|
||||
<CookieConsent />
|
||||
</div>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
// Default to homepage for root path and unmatched paths
|
||||
return (
|
||||
<div className="min-h-screen bg-background">
|
||||
<Homepage />
|
||||
<Navigation />
|
||||
<main>
|
||||
<AppRouter />
|
||||
</main>
|
||||
<Footer />
|
||||
<CookieConsent />
|
||||
</div>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
export default App;
|
||||
Reference in New Issue
Block a user