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
845
App.tsx
845
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;
|
||||
|
||||
const handlePopState = () => {
|
||||
setCurrentPathState(window.location.pathname);
|
||||
};
|
||||
|
||||
window.addEventListener("popstate", handlePopState);
|
||||
|
||||
return () => {
|
||||
window.removeEventListener("popstate", handlePopState);
|
||||
setCurrentPath = null;
|
||||
};
|
||||
}, []);
|
||||
|
||||
// Scroll to top whenever the path changes - but only after a delay to ensure rendering
|
||||
useEffect(() => {
|
||||
// Use a timeout to ensure the new page has rendered before scrolling
|
||||
const scrollTimeout = setTimeout(() => {
|
||||
scrollToTop();
|
||||
}, 100);
|
||||
}, [location.pathname]);
|
||||
|
||||
return () => clearTimeout(scrollTimeout);
|
||||
}, [currentPath]);
|
||||
|
||||
return { currentPath };
|
||||
};
|
||||
|
||||
|
||||
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">
|
||||
return (
|
||||
<div className="min-h-screen bg-background">
|
||||
<Navigation />
|
||||
<div className="pt-24 pb-16 bg-background">
|
||||
<div className="container mx-auto px-6 lg:px-8">
|
||||
<div className="max-w-4xl mx-auto text-center">
|
||||
<h1 className="text-4xl md:text-6xl font-bold mb-6 bg-gradient-to-r from-white via-white to-white/80 bg-clip-text text-transparent">
|
||||
{title}
|
||||
</h1>
|
||||
<p className="text-lg text-muted-foreground mb-8">
|
||||
This page is currently under development. Please
|
||||
check back soon!
|
||||
</p>
|
||||
<Button onClick={() => navigateTo("/")} size="lg">
|
||||
Return to Homepage
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<main>
|
||||
<AppRouter />
|
||||
</main>
|
||||
<Footer />
|
||||
</div>
|
||||
);
|
||||
|
||||
// Homepage component - ENSURED ALL SECTIONS USE DARK BACKGROUNDS
|
||||
const Homepage = () => (
|
||||
<div className="dark min-h-screen bg-background">
|
||||
<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 />
|
||||
<CookieConsent />
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
export default App;
|
||||
@@ -3,12 +3,12 @@ import { ArrowRight, ExternalLink } from "lucide-react";
|
||||
import { Button } from "./ui/button";
|
||||
import { GridPattern } from "./GridPattern";
|
||||
import { ImageWithFallback } from "./figma/ImageWithFallback";
|
||||
import { navigateTo } from "../App";
|
||||
import regroupImage from '../src/images/regroup.webp';
|
||||
import seezunImage from '../src/images/seezun.webp';
|
||||
// import wokaImage from '../src/images/woka.webp';
|
||||
import wokaAwardImage from '../src/images/woka.webp';
|
||||
import tanamiImage from '../src/images/tanami.webp';
|
||||
import { useNavigate } from "react-router-dom";
|
||||
|
||||
const featuredCaseStudy = {
|
||||
title: "Woka",
|
||||
@@ -63,6 +63,8 @@ const SmallCaseStudyCard = ({ study, index }: { study: typeof caseStudies[0]; in
|
||||
}
|
||||
};
|
||||
|
||||
const navigate = useNavigate();
|
||||
|
||||
return (
|
||||
<motion.div
|
||||
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 }}
|
||||
viewport={{ once: true }}
|
||||
className="group bg-card rounded-[10px] overflow-hidden hover:bg-card/80 hover:shadow-lg hover:scale-[1.02] transition-all duration-300 cursor-pointer border border-transparent hover:border-border/50"
|
||||
onClick={() => navigateTo(getNavigationPath(study.title))}
|
||||
onClick={() => navigate(getNavigationPath(study.title))}
|
||||
>
|
||||
<div className="relative aspect-[4/3] overflow-hidden bg-muted/30 px-2 rounded-[10px]">
|
||||
<ImageWithFallback
|
||||
@@ -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"
|
||||
onClick={(e) => {
|
||||
e.stopPropagation();
|
||||
navigateTo(getNavigationPath(study.title));
|
||||
navigate(getNavigationPath(study.title));
|
||||
}}
|
||||
>
|
||||
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 = () => {
|
||||
const navigate = useNavigate();
|
||||
return (
|
||||
<section className="relative py-20 bg-background overflow-hidden">
|
||||
<GridPattern strokeDasharray="4 2" />
|
||||
@@ -151,7 +154,7 @@ export const CaseStudyHighlight = () => {
|
||||
transition={{ duration: 0.8 }}
|
||||
viewport={{ once: true }}
|
||||
className="bg-card rounded-[10px] overflow-hidden mb-12 group cursor-pointer hover:bg-card/80 hover:shadow-xl hover:scale-[1.01] transition-all duration-300 border border-transparent hover:border-accent/20"
|
||||
onClick={() => navigateTo('/projects/woka')}
|
||||
onClick={() => navigate('/projects/woka')}
|
||||
>
|
||||
<div className="grid lg:grid-cols-3 gap-0">
|
||||
<div className="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"
|
||||
onClick={(e) => {
|
||||
e.stopPropagation();
|
||||
navigateTo('/projects/woka');
|
||||
navigate('/projects/woka');
|
||||
}}
|
||||
>
|
||||
View Full Case Study <ArrowRight className="w-5 h-5" />
|
||||
@@ -222,7 +225,7 @@ export const CaseStudyHighlight = () => {
|
||||
className="text-center"
|
||||
>
|
||||
<Button
|
||||
onClick={() => navigateTo('/case-studies')}
|
||||
onClick={() => navigate('/case-studies')}
|
||||
className="bg-accent hover:bg-accent/90 text-accent-foreground px-8 py-3 rounded-[10px]"
|
||||
>
|
||||
View All Case Studies <ExternalLink className="w-4 h-4 ml-2" />
|
||||
|
||||
@@ -4,7 +4,6 @@ import { Button } from "./ui/button";
|
||||
import { Badge } from "./ui/badge";
|
||||
import { Card, CardContent } from "./ui/card";
|
||||
import { ImageWithFallback } from "./figma/ImageWithFallback";
|
||||
import { navigateTo } from "../App";
|
||||
import {
|
||||
ArrowRight,
|
||||
TrendingUp,
|
||||
@@ -33,6 +32,7 @@ import wokasideawardLocalImage from '../src/images/woka-side-award.webp';
|
||||
import traderCircuitLocalImage from '../src/images/traders-circuit.webp';
|
||||
import goodTimesLocalImage from '../src/images/goodtimes.webp';
|
||||
import prospertyLocalImage from '../src/images/prosperty.webp';
|
||||
import { useNavigate } from "react-router-dom";
|
||||
|
||||
const FeaturedCaseStudies = () => {
|
||||
const caseStudies = [
|
||||
@@ -153,6 +153,8 @@ const FeaturedCaseStudies = () => {
|
||||
}
|
||||
];
|
||||
|
||||
const navigate = useNavigate();
|
||||
|
||||
return (
|
||||
<section className="py-20 bg-black">
|
||||
<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"
|
||||
onClick={() => {
|
||||
if (study.title === 'Seezun') {
|
||||
navigateTo('/projects/seezun');
|
||||
navigate('/projects/seezun');
|
||||
} else if (study.title === 'WOKA') {
|
||||
navigateTo('/projects/woka');
|
||||
navigate('/projects/woka');
|
||||
} else if (study.title === 'Tanami') {
|
||||
navigateTo('/projects/tanami');
|
||||
navigate('/projects/tanami');
|
||||
} else {
|
||||
navigateTo('/case-studies');
|
||||
navigate('/case-studies');
|
||||
}
|
||||
}}
|
||||
>
|
||||
@@ -307,13 +309,13 @@ const FeaturedCaseStudies = () => {
|
||||
onClick={(e) => {
|
||||
e.stopPropagation();
|
||||
if (study.title === 'Seezun') {
|
||||
navigateTo('/projects/seezun');
|
||||
navigate('/projects/seezun');
|
||||
} else if (study.title === 'WOKA') {
|
||||
navigateTo('/projects/woka');
|
||||
navigate('/projects/woka');
|
||||
} else if (study.title === 'Tanami') {
|
||||
navigateTo('/projects/tanami');
|
||||
navigate('/projects/tanami');
|
||||
} 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"
|
||||
onClick={() => {
|
||||
if (story.title === 'TradersCircuit') {
|
||||
navigateTo('/projects/traderscircuit');
|
||||
navigate('/projects/traderscircuit');
|
||||
} else if (story.title === 'GoodTimes') {
|
||||
navigateTo('/projects/goodtimes');
|
||||
navigate('/projects/goodtimes');
|
||||
} else if (story.title === 'Prosperty') {
|
||||
navigateTo('/projects/prosperty');
|
||||
navigate('/projects/prosperty');
|
||||
} else if (story.title === 'RanOutOf') {
|
||||
navigateTo('/projects/ranoutof');
|
||||
navigate('/projects/ranoutof');
|
||||
} else {
|
||||
navigateTo('/case-studies');
|
||||
navigate('/case-studies');
|
||||
}
|
||||
}}
|
||||
>
|
||||
@@ -453,15 +455,15 @@ const FeaturedCaseStudies = () => {
|
||||
onClick={(e) => {
|
||||
e.stopPropagation();
|
||||
if (story.title === 'TradersCircuit') {
|
||||
navigateTo('/projects/traderscircuit');
|
||||
navigate('/projects/traderscircuit');
|
||||
} else if (story.title === 'GoodTimes') {
|
||||
navigateTo('/projects/goodtimes');
|
||||
navigate('/projects/goodtimes');
|
||||
} else if (story.title === 'Prosperty') {
|
||||
navigateTo('/projects/prosperty');
|
||||
navigate('/projects/prosperty');
|
||||
} else if (story.title === 'RanOutOf') {
|
||||
navigateTo('/projects/ranoutof');
|
||||
navigate('/projects/ranoutof');
|
||||
} else {
|
||||
navigateTo('/case-studies');
|
||||
navigate('/case-studies');
|
||||
}
|
||||
}}
|
||||
>
|
||||
|
||||
@@ -12,9 +12,9 @@ import { GridPattern } from "./GridPattern";
|
||||
import { Button } from "./ui/button";
|
||||
import { Input } from "./ui/input";
|
||||
import BlackLogo14 from "../assets/BlackLogo14";
|
||||
import { navigateTo } from "../App";
|
||||
import { useState } from "react";
|
||||
import GlobalOffices from "./GlobalOffices";
|
||||
import { useNavigate } from "react-router-dom";
|
||||
|
||||
const footerNavigation = {
|
||||
Explore: [
|
||||
@@ -179,10 +179,13 @@ const contactInfo = [
|
||||
icon: MapPin,
|
||||
label:
|
||||
"614, Palm Spring Centre, Link Road, Malad (West), Mumbai - 400064. India.",
|
||||
url: "#",
|
||||
url: "https://www.google.com/search?q=614%2C+Palm+Spring+Centre...",
|
||||
blank: true,
|
||||
},
|
||||
];
|
||||
|
||||
|
||||
// FooterSection component with useNavigate inside
|
||||
const FooterSection = ({
|
||||
title,
|
||||
links,
|
||||
@@ -191,7 +194,10 @@ const FooterSection = ({
|
||||
title: string;
|
||||
links: Array<{ label: string; url: string }>;
|
||||
delay?: number;
|
||||
}) => (
|
||||
}) => {
|
||||
const navigate = useNavigate();
|
||||
|
||||
return (
|
||||
<motion.div
|
||||
initial={{ opacity: 0, y: 30 }}
|
||||
whileInView={{ opacity: 1, y: 0 }}
|
||||
@@ -209,7 +215,7 @@ const FooterSection = ({
|
||||
href={link.url || '#'}
|
||||
onClick={(e) => {
|
||||
e.preventDefault();
|
||||
navigateTo(link.url);
|
||||
navigate(link.url);
|
||||
}}
|
||||
className="text-[#CCCCCC] hover:text-white transition-colors duration-200 text-sm block py-1 hover:translate-x-1 transform cursor-pointer"
|
||||
>
|
||||
@@ -219,7 +225,8 @@ const FooterSection = ({
|
||||
))}
|
||||
</ul>
|
||||
</motion.div>
|
||||
);
|
||||
);
|
||||
};
|
||||
|
||||
// Newsletter subscription component
|
||||
const NewsletterSection = () => {
|
||||
@@ -356,6 +363,8 @@ export const Footer = () => {
|
||||
<a
|
||||
key={contact.label}
|
||||
href={contact.url}
|
||||
target={contact.blank ? "_blank" : "_self"}
|
||||
rel={contact.blank ? "noopener noreferrer" : undefined}
|
||||
className="flex items-start gap-3 text-[#CCCCCC] hover:text-white transition-colors duration-200"
|
||||
>
|
||||
<Icon className="w-4 h-4 text-[#E5195E] mt-0.5 flex-shrink-0" />
|
||||
@@ -376,6 +385,8 @@ export const Footer = () => {
|
||||
<a
|
||||
key={social.name}
|
||||
href={social.url}
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
className="w-10 h-10 bg-white/5 rounded-lg flex items-center justify-center text-[#CCCCCC] hover:text-white hover:bg-[#E5195E]/20 transition-all duration-200"
|
||||
aria-label={social.name}
|
||||
>
|
||||
|
||||
@@ -36,7 +36,7 @@ const offices = [
|
||||
|
||||
export default function GlobalOffices() {
|
||||
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 */}
|
||||
<motion.h2
|
||||
initial={{ opacity: 0, y: 30 }}
|
||||
|
||||
@@ -1,7 +1,7 @@
|
||||
import { Button } from "./ui/button";
|
||||
import { GridPattern } from "./GridPattern";
|
||||
import { ChevronRight } from "lucide-react";
|
||||
import { navigateTo } from "../App";
|
||||
import { useNavigate } from "react-router-dom";
|
||||
|
||||
interface HeroBannerProps {
|
||||
category?: string;
|
||||
@@ -24,6 +24,7 @@ export function HeroBanner({
|
||||
primaryCTA,
|
||||
secondaryCTA
|
||||
}: HeroBannerProps) {
|
||||
const navigate = useNavigate();
|
||||
return (
|
||||
<section className="relative py-20 lg:py-32 bg-[#0E0E0E] overflow-hidden">
|
||||
<GridPattern />
|
||||
@@ -54,7 +55,7 @@ export function HeroBanner({
|
||||
<Button
|
||||
size="lg"
|
||||
className="bg-gradient-to-r from-[#E5195E] to-[#C41653] hover:from-[#C41653] hover:to-[#A31348] text-white font-semibold px-8 py-4 h-auto text-base"
|
||||
onClick={() => navigateTo(primaryCTA.href)}
|
||||
onClick={() => navigate(primaryCTA.href)}
|
||||
>
|
||||
{primaryCTA.text}
|
||||
</Button>
|
||||
@@ -64,7 +65,7 @@ export function HeroBanner({
|
||||
variant="secondary"
|
||||
size="lg"
|
||||
className="bg-white/5 hover:bg-white/10 text-white border-white/20 hover:border-white/30 font-medium px-8 py-4 h-auto text-base"
|
||||
onClick={() => navigateTo(secondaryCTA.href)}
|
||||
onClick={() => navigate(secondaryCTA.href)}
|
||||
>
|
||||
{secondaryCTA.text}
|
||||
<ChevronRight className="w-4 h-4 ml-2" />
|
||||
|
||||
@@ -1,11 +1,12 @@
|
||||
import { Button } from "./ui/button";
|
||||
import { GridPattern } from "./GridPattern";
|
||||
import { Calendar, Briefcase } from "lucide-react";
|
||||
import { navigateTo } from "../App";
|
||||
import { motion } from "framer-motion";
|
||||
import Spline from "@splinetool/react-spline";
|
||||
import { useNavigate } from "react-router-dom";
|
||||
|
||||
export function HeroSection() {
|
||||
const navigate = useNavigate();
|
||||
return (
|
||||
<section
|
||||
id="hero"
|
||||
@@ -91,7 +92,7 @@ export function HeroSection() {
|
||||
<Button
|
||||
size="lg"
|
||||
className="whitespace-nowrap"
|
||||
onClick={() => navigateTo("/start-a-project")}
|
||||
onClick={() => navigate("/start-a-project")}
|
||||
>
|
||||
<Calendar className="w-4 h-4" />
|
||||
Book a Free Consultation
|
||||
@@ -101,7 +102,7 @@ export function HeroSection() {
|
||||
variant="secondary"
|
||||
size="lg"
|
||||
className="whitespace-nowrap"
|
||||
onClick={() => navigateTo("/services")}
|
||||
onClick={() => navigate("/services")}
|
||||
>
|
||||
<Briefcase className="w-4 h-4" />
|
||||
Explore Services
|
||||
|
||||
@@ -3,7 +3,7 @@ import { Badge } from "@/components/ui/badge";
|
||||
import { Card, CardContent } from "@/components/ui/card";
|
||||
import { Button } from "@/components/ui/button";
|
||||
import { UserPlus, ArrowRight } from "lucide-react";
|
||||
import { navigateTo } from "@/App";
|
||||
import { useNavigate } from "react-router-dom";
|
||||
import { ShimmerButton } from "./ui/shimmer-button";
|
||||
|
||||
const HireDeveloperSection = ({
|
||||
@@ -13,6 +13,7 @@ const HireDeveloperSection = ({
|
||||
buttonText,
|
||||
buttonLink,
|
||||
}) => {
|
||||
const navigate = useNavigate();
|
||||
return (
|
||||
<section className="py-32 bg-black">
|
||||
<div className="container mx-auto px-6 lg:px-8">
|
||||
@@ -104,7 +105,7 @@ const HireDeveloperSection = ({
|
||||
viewport={{ once: true }}
|
||||
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">
|
||||
<UserPlus className="w-5 h-5 flex-shrink-0" />
|
||||
<span>{buttonText}</span>
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
import { useNavigate } from "react-router-dom";
|
||||
import { Button } from "./ui/button";
|
||||
import { ShimmerButton } from "./ui/shimmer-button";
|
||||
import { navigateTo } from "../App";
|
||||
import { DashboardVector } from "./vectors/DashboardVector";
|
||||
import { motion } from "framer-motion";
|
||||
|
||||
@@ -31,6 +31,7 @@ export function HireTalentHeroBanner({
|
||||
useVectors = false,
|
||||
vectorComponent: VectorComponent
|
||||
}: HireTalentHeroBannerProps) {
|
||||
const navigate = useNavigate();
|
||||
return (
|
||||
<section className="relative py-20 overflow-hidden bg-black">
|
||||
<div className="container mx-auto px-6 lg:px-8">
|
||||
@@ -74,7 +75,7 @@ export function HireTalentHeroBanner({
|
||||
>
|
||||
<ShimmerButton
|
||||
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">
|
||||
{primaryCTA.icon && <primaryCTA.icon className="w-5 h-5 flex-shrink-0" />}
|
||||
@@ -87,7 +88,7 @@ export function HireTalentHeroBanner({
|
||||
variant="outline"
|
||||
size="lg"
|
||||
className="text-lg px-8 py-4 h-auto border-gray-600 text-gray-300 hover:bg-gray-800 hover:text-white font-manrope"
|
||||
onClick={() => navigateTo(secondaryCTA.href)}
|
||||
onClick={() => navigate(secondaryCTA.href)}
|
||||
>
|
||||
<div className="inline-flex items-center gap-2">
|
||||
{secondaryCTA.icon && <secondaryCTA.icon className="w-5 h-5 flex-shrink-0" />}
|
||||
|
||||
@@ -14,28 +14,30 @@ import {
|
||||
Cloud
|
||||
} from "lucide-react";
|
||||
import { GridPattern } from "./GridPattern";
|
||||
import { useNavigate } from "react-router-dom";
|
||||
|
||||
const industries = [
|
||||
// First row
|
||||
{ name: "FinTech", icon: CreditCard },
|
||||
{ name: "HealthTech", icon: Heart },
|
||||
{ name: "eCommerce", icon: ShoppingCart },
|
||||
{ name: "EdTech", icon: GraduationCap },
|
||||
{ name: "FinTech", icon: CreditCard, link: "/industries/fintech-banking-apps" },
|
||||
{ name: "HealthTech", icon: Heart, link: "/industries/healthcare/healthtech-applications" },
|
||||
{ name: "eCommerce", icon: ShoppingCart, link: "/industries/commerce/ecommerce-marketplaces" },
|
||||
{ name: "EdTech", icon: GraduationCap, link: "/industries/education/edtech-platforms" },
|
||||
// Second row
|
||||
{ name: "Logistics", icon: Truck },
|
||||
{ name: "Media & OTT", icon: Video },
|
||||
{ name: "Real Estate", icon: Building },
|
||||
{ name: "Travel", icon: Plane },
|
||||
// Third row (we'll make it 3x4 instead to fit all 12)
|
||||
{ name: "Manufacturing", icon: Factory },
|
||||
{ name: "AgriTech", icon: Wheat },
|
||||
{ name: "Gaming", icon: Gamepad2 },
|
||||
{ name: "SaaS", icon: Cloud }
|
||||
{ name: "Logistics", icon: Truck, link: "/industries/mobility/transportation-apps" },
|
||||
{ name: "Media & OTT", icon: Video, link: "/industries/media/ott-streaming-apps" },
|
||||
{ name: "Real Estate", icon: Building, link: "/industries/financial-services/real-estate-tech" },
|
||||
{ name: "Travel", icon: Plane, link: "/industries/commerce/travel-booking-systems" },
|
||||
// Third row
|
||||
{ name: "Manufacturing", icon: Factory, link: "/industries/industrial/manufacturing-automation" },
|
||||
{ name: "AgriTech", icon: Wheat, link: "/industries/industrial/agritech-platforms" },
|
||||
{ name: "Gaming", icon: Gamepad2, link: "/industries/media/sports-fan-engagement" },
|
||||
{ name: "SaaS", icon: Cloud, link: "/industries/financial-services/wealthtech-platforms" }
|
||||
];
|
||||
|
||||
const IndustryCard = ({ industry, index }: {
|
||||
industry: { name: string; icon: any };
|
||||
const IndustryCard = ({ industry, index, onClick }: {
|
||||
industry: { name: string; icon: any; link: string };
|
||||
index: number;
|
||||
onClick: (link: string) => void;
|
||||
}) => {
|
||||
const Icon = industry.icon;
|
||||
|
||||
@@ -47,6 +49,7 @@ const IndustryCard = ({ industry, index }: {
|
||||
viewport={{ once: true }}
|
||||
whileHover={{ y: -5, scale: 1.02 }}
|
||||
className="group p-6 rounded-xl bg-white/5 backdrop-blur-sm border border-white/10 hover:border-[#E5195E]/50 transition-all duration-300 cursor-pointer text-center"
|
||||
onClick={() => onClick(industry.link)}
|
||||
>
|
||||
<div className="w-16 h-16 mx-auto mb-4 rounded-xl bg-[#E5195E]/10 flex items-center justify-center group-hover:scale-110 group-hover:bg-[#E5195E]/20 transition-all duration-300">
|
||||
<Icon className="w-8 h-8 text-[#E5195E]" />
|
||||
@@ -59,6 +62,12 @@ const IndustryCard = ({ industry, index }: {
|
||||
};
|
||||
|
||||
export const HorizontalTagScroller = () => {
|
||||
const navigate = useNavigate();
|
||||
|
||||
const handleIndustryClick = (link: string) => {
|
||||
navigate(link);
|
||||
};
|
||||
|
||||
return (
|
||||
<section className="relative py-20 bg-[#0E0E0E] overflow-hidden">
|
||||
<GridPattern strokeDasharray="4 2" />
|
||||
@@ -79,13 +88,13 @@ export const HorizontalTagScroller = () => {
|
||||
</p>
|
||||
</motion.div>
|
||||
|
||||
{/* 4x3 Grid for larger screens, 2x6 for tablets, 1x12 for mobile */}
|
||||
<div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-6 max-w-7xl mx-auto">
|
||||
{industries.map((industry, index) => (
|
||||
<IndustryCard
|
||||
key={industry.name}
|
||||
industry={industry}
|
||||
index={index}
|
||||
onClick={handleIndustryClick}
|
||||
/>
|
||||
))}
|
||||
</div>
|
||||
|
||||
@@ -2,9 +2,10 @@ import { motion } from "framer-motion";
|
||||
import { Lightbulb, Clock } from "lucide-react";
|
||||
import { Button } from "./ui/button";
|
||||
import { GridPattern } from "./GridPattern";
|
||||
import { navigateTo } from "../App";
|
||||
import { useNavigate } from "react-router-dom";
|
||||
|
||||
export const InlineCTA = () => {
|
||||
const navigate = useNavigate();
|
||||
return (
|
||||
<section className="relative py-20 overflow-hidden">
|
||||
<GridPattern strokeDasharray="4 2" />
|
||||
@@ -145,7 +146,7 @@ export const InlineCTA = () => {
|
||||
<Button
|
||||
size="lg"
|
||||
className="bg-accent hover:bg-accent/90 text-accent-foreground px-8 py-4 text-lg border-0 rounded-lg shadow-lg hover:shadow-xl transition-all duration-300"
|
||||
onClick={() => navigateTo('/contact')}
|
||||
onClick={() => navigate('/contact')}
|
||||
>
|
||||
<motion.div
|
||||
animate={{
|
||||
|
||||
@@ -82,7 +82,7 @@ import {
|
||||
} from "lucide-react";
|
||||
import { Button } from "./ui/button";
|
||||
import BlackLogo14 from "../assets/BlackLogo14";
|
||||
import { navigateTo } from "../App";
|
||||
import { useLocation, useNavigate } from "react-router-dom";
|
||||
|
||||
const navigationData = {
|
||||
main_navigation: [
|
||||
@@ -457,16 +457,8 @@ const navigationData = {
|
||||
],
|
||||
company: [
|
||||
{ text: "About WDI", icon: Info, href: "/company/about-wdi" },
|
||||
// { text: "Our History", icon: Clock, href: "/company/our-history" },
|
||||
{ text: "Leadership Team", icon: Users2, href: "/company/leadership-team" },
|
||||
// {
|
||||
// text: "Awards & Certifications",
|
||||
// icon: Award,
|
||||
// href: "/company/awards-certifications",
|
||||
// },
|
||||
{ text: "Careers", icon: Briefcase, href: "/company/careers" },
|
||||
// { text: "Culture & Values", icon: Heart, href: "/company/culture-values" },
|
||||
// { text: "Press & Media", icon: Newspaper, href: "/company/press-media" },
|
||||
],
|
||||
resources: [
|
||||
{ text: "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 = {
|
||||
Services: {
|
||||
title: "Development Quote",
|
||||
@@ -575,6 +567,7 @@ const megaMenuCTAs = {
|
||||
|
||||
// Horizontal CTA Component matching reference design
|
||||
const MegaMenuCTA = ({ type }: { type: string }) => {
|
||||
const navigate = useNavigate();
|
||||
const cta = megaMenuCTAs[type as keyof typeof megaMenuCTAs];
|
||||
if (!cta) return null;
|
||||
|
||||
@@ -595,7 +588,7 @@ const MegaMenuCTA = ({ type }: { type: string }) => {
|
||||
<div className="ml-6">
|
||||
<Button
|
||||
className="bg-gradient-to-r from-[#E5195E] to-[#C41653] hover:from-[#C41653] hover:to-[#A31348] text-white font-medium text-sm px-6 py-3 h-auto rounded-xl shadow-lg hover:shadow-xl transition-all duration-200 group"
|
||||
onClick={() => navigateTo(cta.href)}
|
||||
onClick={() => navigate(cta.href)}
|
||||
>
|
||||
{cta.buttonText}
|
||||
<ArrowRight className="w-4 h-4 ml-2 group-hover:translate-x-1 transition-transform" />
|
||||
@@ -621,10 +614,12 @@ const MegaMenu = ({
|
||||
type,
|
||||
timeoutRef,
|
||||
}: MegaMenuProps) => {
|
||||
const navigate = useNavigate();
|
||||
|
||||
if (!isOpen) return null;
|
||||
|
||||
const navigate = (path: string) => {
|
||||
navigateTo(path);
|
||||
const handleNavigate = (path: string) => {
|
||||
navigate(path);
|
||||
onClose();
|
||||
};
|
||||
|
||||
@@ -639,24 +634,26 @@ const MegaMenu = ({
|
||||
<div className="w-10 h-10 rounded-xl bg-[#E5195E]/20 flex items-center justify-center">
|
||||
<Icon className="w-5 h-5 text-[#E5195E]" />
|
||||
</div>
|
||||
<h4
|
||||
<a
|
||||
href={service.href}
|
||||
className="font-semibold text-white text-sm cursor-pointer hover:text-[#E5195E] transition-colors"
|
||||
onClick={() => service.href && navigate(service.href)}
|
||||
onClick={(e) => {
|
||||
e.preventDefault();
|
||||
service.href && handleNavigate(service.href);
|
||||
}}
|
||||
>
|
||||
{service.category}
|
||||
</h4>
|
||||
</a>
|
||||
</div>
|
||||
<ul className="space-y-3">
|
||||
{service.sub_services.map((subService) => (
|
||||
<li key={subService.name}>
|
||||
<a
|
||||
href={subService.href || '#'} // Use actual href instead of #
|
||||
className="text-[#CCCCCC] hover:text-white text-sm transition-colors duration-200 block py-1 hover:translate-x-1 transform"
|
||||
href={subService.href}
|
||||
className="text-[#CCCCCC] hover:text-white text-sm transition-colors duration-200 block py-1 hover:translate-x-1 transform text-left w-full"
|
||||
onClick={(e) => {
|
||||
e.preventDefault();
|
||||
if (subService.href) {
|
||||
navigate(subService.href);
|
||||
}
|
||||
subService.href && handleNavigate(subService.href);
|
||||
}}
|
||||
>
|
||||
{subService.name}
|
||||
@@ -683,24 +680,26 @@ const MegaMenu = ({
|
||||
<div className="w-10 h-10 rounded-xl bg-[#E5195E]/20 flex items-center justify-center">
|
||||
<Icon className="w-5 h-5 text-[#E5195E]" />
|
||||
</div>
|
||||
<h4
|
||||
<a
|
||||
href={category.href}
|
||||
className="font-semibold text-white text-lg cursor-pointer hover:text-[#E5195E] transition-colors"
|
||||
onClick={() => category.href && navigate(category.href)}
|
||||
onClick={(e) => {
|
||||
e.preventDefault();
|
||||
category.href && handleNavigate(category.href);
|
||||
}}
|
||||
>
|
||||
{category.category}
|
||||
</h4>
|
||||
</a>
|
||||
</div>
|
||||
<ul className="space-y-3">
|
||||
{category.sub_services.map((service) => (
|
||||
<li key={service.name}>
|
||||
<a
|
||||
href={service.href || '#'} // Use actual href instead of #
|
||||
className="text-[#CCCCCC] hover:text-white text-sm transition-colors duration-200 block py-1 hover:translate-x-1 transform"
|
||||
href={service.href}
|
||||
className="text-[#CCCCCC] hover:text-white text-sm transition-colors duration-200 block py-1 hover:translate-x-1 transform text-left w-full"
|
||||
onClick={(e) => {
|
||||
e.preventDefault();
|
||||
if (service.href) {
|
||||
navigate(service.href);
|
||||
}
|
||||
service.href && handleNavigate(service.href);
|
||||
}}
|
||||
>
|
||||
{service.name}
|
||||
@@ -724,13 +723,11 @@ const MegaMenu = ({
|
||||
return (
|
||||
<a
|
||||
key={solution.text}
|
||||
href={solution.href || '#'} // Use actual href instead of #
|
||||
className="flex items-center gap-4 text-[#CCCCCC] hover:text-white transition-all duration-200 p-4 rounded-lg hover:bg-white/5 group"
|
||||
href={solution.href}
|
||||
className="flex items-center gap-4 text-[#CCCCCC] hover:text-white transition-all duration-200 p-4 rounded-lg hover:bg-white/5 group w-full text-left"
|
||||
onClick={(e) => {
|
||||
e.preventDefault();
|
||||
if (solution.href) {
|
||||
navigate(solution.href);
|
||||
}
|
||||
solution.href && handleNavigate(solution.href);
|
||||
}}
|
||||
>
|
||||
<div className="w-8 h-8 rounded-lg bg-[#E5195E]/20 flex items-center justify-center group-hover:scale-110 transition-transform">
|
||||
@@ -764,13 +761,11 @@ const MegaMenu = ({
|
||||
{industry.items.map((item) => (
|
||||
<li key={item.name}>
|
||||
<a
|
||||
href={item.href || '#'} // Use actual href instead of #
|
||||
className="text-[#CCCCCC] hover:text-white text-sm transition-colors duration-200 block py-1 hover:translate-x-1 transform"
|
||||
href={item.href}
|
||||
className="text-[#CCCCCC] hover:text-white text-sm transition-colors duration-200 block py-1 hover:translate-x-1 transform text-left w-full"
|
||||
onClick={(e) => {
|
||||
e.preventDefault();
|
||||
if (item.href) {
|
||||
navigate(item.href);
|
||||
}
|
||||
item.href && handleNavigate(item.href);
|
||||
}}
|
||||
>
|
||||
{item.name}
|
||||
@@ -794,13 +789,11 @@ const MegaMenu = ({
|
||||
return (
|
||||
<a
|
||||
key={item.text}
|
||||
href={item.href || '#'} // Use actual href instead of #
|
||||
className="flex items-center gap-4 text-[#CCCCCC] hover:text-white transition-all duration-200 p-4 rounded-lg hover:bg-white/5 group"
|
||||
href={item.href}
|
||||
className="flex items-center gap-4 text-[#CCCCCC] hover:text-white transition-all duration-200 p-4 rounded-lg hover:bg-white/5 group w-full text-left"
|
||||
onClick={(e) => {
|
||||
e.preventDefault();
|
||||
if (item.href) {
|
||||
navigate(item.href);
|
||||
}
|
||||
item.href && handleNavigate(item.href);
|
||||
}}
|
||||
>
|
||||
<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 timeoutRef = useRef<NodeJS.Timeout>();
|
||||
const navRef = useRef<HTMLElement>(null);
|
||||
|
||||
const navigate = (path: string) => {
|
||||
navigateTo(path);
|
||||
};
|
||||
const navigate = useNavigate();
|
||||
|
||||
const openMenu = useCallback((item: string) => {
|
||||
if (timeoutRef.current) {
|
||||
@@ -918,12 +908,6 @@ export const Navigation = () => {
|
||||
closeMenu();
|
||||
}, [closeMenu]);
|
||||
|
||||
// const handleNavMouseLeave = useCallback((e: React.MouseEvent) => {
|
||||
// const relatedTarget = e.relatedTarget as Element;
|
||||
// if (!navRef.current?.contains(relatedTarget)) {
|
||||
// closeMenu();
|
||||
// }
|
||||
// }, [closeMenu]);
|
||||
const handleNavMouseLeave = useCallback(
|
||||
(e: React.MouseEvent) => {
|
||||
const relatedTarget = e.relatedTarget;
|
||||
@@ -977,14 +961,20 @@ export const Navigation = () => {
|
||||
case "AI & ML":
|
||||
return "/artificial-intelligence";
|
||||
case "Solutions":
|
||||
return "/solutions/digital-product-development"; // Default to first solution
|
||||
return "/solutions/digital-product-development";
|
||||
case "Industries":
|
||||
return "/industries/fintech-banking-apps"; // Default to first industry
|
||||
return "/industries/fintech-banking-apps";
|
||||
default:
|
||||
return null;
|
||||
return "/";
|
||||
}
|
||||
};
|
||||
|
||||
const handleNavigation = (path: string) => {
|
||||
navigate(path);
|
||||
setIsMobileMenuOpen(false);
|
||||
setActiveMenu(null);
|
||||
};
|
||||
|
||||
return (
|
||||
<nav
|
||||
ref={navRef}
|
||||
@@ -995,22 +985,17 @@ export const Navigation = () => {
|
||||
<div className="container mx-auto px-6 lg:px-8">
|
||||
<div className="flex items-center justify-between h-20">
|
||||
<div className="flex items-center">
|
||||
<a
|
||||
href="#"
|
||||
<button
|
||||
className="flex items-center"
|
||||
onClick={(e) => {
|
||||
e.preventDefault();
|
||||
navigate("/");
|
||||
}}
|
||||
onClick={() => handleNavigation("/")}
|
||||
>
|
||||
<div className="w-10 h-10">
|
||||
<BlackLogo14 />
|
||||
</div>
|
||||
</a>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div className="hidden lg:flex items-center space-x-6 xl:space-x-8">
|
||||
|
||||
{navigationData.main_navigation.map((item) => (
|
||||
<div
|
||||
key={item}
|
||||
@@ -1019,20 +1004,18 @@ export const Navigation = () => {
|
||||
onMouseLeave={handleNavItemMouseLeave}
|
||||
>
|
||||
<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"
|
||||
onClick={(e) => {
|
||||
e.preventDefault();
|
||||
const route = getMainCategoryRoute(item);
|
||||
if (route) {
|
||||
navigate(route);
|
||||
}
|
||||
handleNavigation(getMainCategoryRoute(item));
|
||||
}}
|
||||
>
|
||||
{item}
|
||||
{hasDropdown(item) && (
|
||||
<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">
|
||||
<Button
|
||||
onClick={() => navigate("/start-a-project")}
|
||||
onClick={() => handleNavigation("/start-a-project")}
|
||||
className="hidden lg:flex"
|
||||
>
|
||||
Get Started
|
||||
@@ -1091,25 +1074,18 @@ export const Navigation = () => {
|
||||
{navigationData.main_navigation.map((item) => (
|
||||
<a
|
||||
key={item}
|
||||
href={getMainCategoryRoute(item) || '#'}
|
||||
className="block text-[#CCCCCC] hover:text-white transition-colors py-2 font-medium"
|
||||
href={getMainCategoryRoute(item)}
|
||||
className="block text-[#CCCCCC] hover:text-white transition-colors py-2 font-medium text-left w-full"
|
||||
onClick={(e) => {
|
||||
e.preventDefault();
|
||||
const route = getMainCategoryRoute(item);
|
||||
if (route) {
|
||||
navigate(route);
|
||||
setIsMobileMenuOpen(false);
|
||||
}
|
||||
handleNavigation(getMainCategoryRoute(item));
|
||||
}}
|
||||
>
|
||||
{item}
|
||||
</a>
|
||||
))}
|
||||
<Button
|
||||
onClick={() => {
|
||||
navigate("/start-a-project");
|
||||
setIsMobileMenuOpen(false);
|
||||
}}
|
||||
onClick={() => handleNavigation("/start-a-project")}
|
||||
className="w-full mt-4"
|
||||
>
|
||||
Get Started
|
||||
|
||||
@@ -13,7 +13,7 @@ import {
|
||||
} from "lucide-react";
|
||||
import { Button } from "./ui/button";
|
||||
import { Badge } from "./ui/badge";
|
||||
import { navigateTo } from "@/App";
|
||||
import { useNavigate } from "react-router-dom";
|
||||
|
||||
const steps = [
|
||||
{
|
||||
@@ -252,6 +252,7 @@ const ProcessCard = ({
|
||||
|
||||
export const ProcessSection = () => {
|
||||
const titleRef = useRef(null);
|
||||
const navigate = useNavigate();
|
||||
|
||||
return (
|
||||
<section className="relative overflow-hidden py-20 bg-background">
|
||||
@@ -299,7 +300,7 @@ export const ProcessSection = () => {
|
||||
<Button
|
||||
size="lg"
|
||||
className="bg-accent hover:bg-accent/90 text-accent-foreground border-0 rounded-lg px-8 py-4 group text-lg"
|
||||
onClick={() => navigateTo("/start-a-project")}
|
||||
onClick={() => navigate("/start-a-project")}
|
||||
>
|
||||
<span className="flex items-center gap-2">
|
||||
Start Your Project Today
|
||||
|
||||
@@ -2,7 +2,7 @@ import { motion } from "framer-motion";
|
||||
import { ArrowRight, Calendar, Clock } from "lucide-react";
|
||||
import { Button } from "./ui/button";
|
||||
import { ImageWithFallback } from "./figma/ImageWithFallback";
|
||||
import { navigateTo } from "../App";
|
||||
import { useNavigate } from "react-router-dom";
|
||||
|
||||
const resources = [
|
||||
{
|
||||
@@ -62,6 +62,7 @@ const ResourceCard = ({
|
||||
resource: (typeof resources)[0];
|
||||
index: number;
|
||||
}) => {
|
||||
const navigate = useNavigate();
|
||||
return (
|
||||
<motion.article
|
||||
initial={{ opacity: 0, y: 50 }}
|
||||
@@ -69,7 +70,7 @@ const ResourceCard = ({
|
||||
transition={{ duration: 0.6, delay: index * 0.2 }}
|
||||
viewport={{ once: true }}
|
||||
className="group bg-card rounded-lg border border-border overflow-hidden hover:border-border/80 transition-all duration-300 hover:shadow-lg cursor-pointer"
|
||||
onClick={() => navigateTo(`/insights/${resource.slug}`)}
|
||||
onClick={() => navigate(`/insights/${resource.slug}`)}
|
||||
>
|
||||
{/* Image */}
|
||||
<div className="aspect-[16/9] overflow-hidden relative">
|
||||
@@ -128,7 +129,7 @@ const ResourceCard = ({
|
||||
className="text-accent hover:text-accent-foreground hover:bg-accent/10 p-2 h-auto group-hover:translate-x-1 transition-transform"
|
||||
onClick={(e) => {
|
||||
e.stopPropagation();
|
||||
navigateTo(`/insights/${resource.slug}`);
|
||||
navigate(`/insights/${resource.slug}`);
|
||||
}}
|
||||
>
|
||||
<ArrowRight className="w-4 h-4" />
|
||||
@@ -140,6 +141,7 @@ const ResourceCard = ({
|
||||
};
|
||||
|
||||
export const ResourceCards = () => {
|
||||
const navigate = useNavigate();
|
||||
return (
|
||||
<section className="relative py-20 overflow-hidden">
|
||||
<div className="container mx-auto px-6 lg:px-8">
|
||||
@@ -181,7 +183,7 @@ export const ResourceCards = () => {
|
||||
>
|
||||
<Button
|
||||
className="bg-accent hover:bg-accent/90 text-accent-foreground border-0 rounded-lg px-6 py-3"
|
||||
onClick={() => navigateTo("/resources")}
|
||||
onClick={() => navigate("/resources")}
|
||||
>
|
||||
View All Resources <ArrowRight className="w-4 h-4 ml-2" />
|
||||
</Button>
|
||||
|
||||
@@ -1,7 +1,7 @@
|
||||
import { motion } from "framer-motion";
|
||||
import { Smartphone, Globe, Palette, Brain, RefreshCw, Users } from "lucide-react";
|
||||
import { GridPattern } from "./GridPattern";
|
||||
import { navigateTo } from "../App";
|
||||
import { useNavigate } from "react-router-dom";
|
||||
|
||||
const services = [
|
||||
{
|
||||
@@ -42,10 +42,10 @@ const ServiceCard = ({ service, index }: { service: typeof services[0]; index: n
|
||||
|
||||
const handleClick = () => {
|
||||
if (service.href) {
|
||||
navigateTo(service.href);
|
||||
navigate(service.href);
|
||||
}
|
||||
};
|
||||
|
||||
const navigate = useNavigate();
|
||||
return (
|
||||
<motion.div
|
||||
initial={{ opacity: 0, y: 50 }}
|
||||
|
||||
@@ -2,9 +2,10 @@ import { motion } from "framer-motion";
|
||||
import { Phone, Clock, Zap, Calendar, MessageSquare } from "lucide-react";
|
||||
import { Button } from "./ui/button";
|
||||
import { GridPattern } from "./GridPattern";
|
||||
import { navigateTo } from "../App";
|
||||
import { useNavigate } from "react-router-dom";
|
||||
|
||||
export const SplitCallToAction = () => {
|
||||
const navigate = useNavigate();
|
||||
return (
|
||||
<section className="relative py-20 overflow-hidden">
|
||||
<GridPattern strokeDasharray="4 2" />
|
||||
@@ -86,7 +87,7 @@ export const SplitCallToAction = () => {
|
||||
<Button
|
||||
size="lg"
|
||||
className="w-full bg-accent hover:bg-accent/90 text-accent-foreground py-4 text-lg border-0 rounded-lg"
|
||||
onClick={() => navigateTo('/start-a-project')}
|
||||
onClick={() => navigate('/start-a-project')}
|
||||
>
|
||||
<Phone className="w-5 h-5 mr-2" />
|
||||
Schedule Free Call
|
||||
|
||||
@@ -45,11 +45,13 @@ import { Badge } from "../components/ui/badge";
|
||||
import { Button } from "../components/ui/button";
|
||||
import { Card, CardContent } from "../components/ui/card";
|
||||
import { ShimmerButton } from "../components/ui/shimmer-button";
|
||||
import { navigateTo } from "@/App";
|
||||
import { Helmet } from "react-helmet-async";
|
||||
import { AIStrategyTargetAudience } from "./AIStrategyConsulting";
|
||||
import { useNavigate } from "react-router-dom";
|
||||
|
||||
// AI Automation & Workflows Hero Section
|
||||
const AutomationHeroWithCTA = () => {
|
||||
const navigate = useNavigate();
|
||||
return (
|
||||
<section className="relative py-20 overflow-hidden bg-black">
|
||||
<Helmet>
|
||||
@@ -138,7 +140,7 @@ const AutomationHeroWithCTA = () => {
|
||||
>
|
||||
<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">
|
||||
<Zap className="w-5 h-5 flex-shrink-0" />
|
||||
@@ -1168,6 +1170,7 @@ const AutomationCaseStudies = () => {
|
||||
|
||||
// Mid-Page CTA
|
||||
const AutomationInlineCTA = () => {
|
||||
const navigate = useNavigate();
|
||||
return (
|
||||
<section className="py-20 bg-black">
|
||||
<div className="container mx-auto px-6 lg:px-8">
|
||||
@@ -1206,7 +1209,7 @@ const AutomationInlineCTA = () => {
|
||||
|
||||
<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">
|
||||
<Search className="w-6 h-6 flex-shrink-0" />
|
||||
@@ -1473,6 +1476,7 @@ const AutomationFAQs = () => {
|
||||
|
||||
// Final CTA Section
|
||||
const AutomationFinalCTA = () => {
|
||||
const navigate = useNavigate();
|
||||
return (
|
||||
<section className="py-20 relative overflow-hidden">
|
||||
<div className="container mx-auto px-6 lg:px-8 relative z-10">
|
||||
@@ -1525,7 +1529,7 @@ const AutomationFinalCTA = () => {
|
||||
>
|
||||
<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">
|
||||
<Workflow className="w-6 h-6 flex-shrink-0" />
|
||||
@@ -1554,7 +1558,7 @@ const AutomationFinalCTA = () => {
|
||||
export const AIAutomationWorkflows = () => {
|
||||
return (
|
||||
<div className="dark min-h-screen">
|
||||
<Navigation />
|
||||
{/* <Navigation /> */}
|
||||
|
||||
{/* Hero Section */}
|
||||
<section className="bg-black">
|
||||
@@ -1578,7 +1582,7 @@ export const AIAutomationWorkflows = () => {
|
||||
|
||||
{/* Tech Stack */}
|
||||
<section className="bg-card">
|
||||
<AutomationTechStack />
|
||||
<AIStrategyTargetAudience />
|
||||
</section>
|
||||
|
||||
{/* Case Studies */}
|
||||
@@ -1607,8 +1611,8 @@ export const AIAutomationWorkflows = () => {
|
||||
</section>
|
||||
|
||||
{/* Footer */}
|
||||
<section className="bg-card">
|
||||
<Footer />
|
||||
<section className="bg-background">
|
||||
{/* <Footer /> */}
|
||||
</section>
|
||||
</div>
|
||||
);
|
||||
|
||||
@@ -43,11 +43,13 @@ import { Badge } from "../components/ui/badge";
|
||||
import { Button } from "../components/ui/button";
|
||||
import { Card, CardContent } from "../components/ui/card";
|
||||
import { ShimmerButton } from "../components/ui/shimmer-button";
|
||||
import { navigateTo } from "@/App";
|
||||
import { Helmet } from "react-helmet-async";
|
||||
import { AIStrategyTargetAudience } from "./AIStrategyConsulting";
|
||||
import { useNavigate } from "react-router-dom";
|
||||
|
||||
// AI Chatbots & Virtual Assistants Hero Section
|
||||
const ChatbotsHeroWithCTA = () => {
|
||||
const navigate = useNavigate();
|
||||
return (
|
||||
<section className="relative py-20 overflow-hidden bg-black">
|
||||
<Helmet>
|
||||
@@ -136,7 +138,7 @@ const ChatbotsHeroWithCTA = () => {
|
||||
>
|
||||
<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">
|
||||
<Bot className="w-5 h-5 flex-shrink-0" />
|
||||
@@ -1108,6 +1110,7 @@ const ChatbotCaseStudies = () => {
|
||||
|
||||
// Mid-Page CTA
|
||||
const ChatbotInlineCTA = () => {
|
||||
const navigate = useNavigate();
|
||||
return (
|
||||
<section className="py-20 bg-black">
|
||||
<div className="container mx-auto px-6 lg:px-8">
|
||||
@@ -1146,7 +1149,7 @@ const ChatbotInlineCTA = () => {
|
||||
|
||||
<ShimmerButton
|
||||
className="text-xl px-10 py-5 rounded-2xl shadow-lg hover:shadow-xl"
|
||||
onClick={() => navigateTo("/start-a-project")}
|
||||
onClick={() => navigate("/start-a-project")}
|
||||
>
|
||||
<div className="inline-flex items-center gap-3">
|
||||
<MessageSquare className="w-6 h-6 flex-shrink-0" />
|
||||
@@ -1413,6 +1416,7 @@ const ChatbotFAQs = () => {
|
||||
|
||||
// Final CTA Section
|
||||
const ChatbotFinalCTA = () => {
|
||||
const navigate = useNavigate();
|
||||
return (
|
||||
<section className="py-20 relative overflow-hidden">
|
||||
<div className="container mx-auto px-6 lg:px-8 relative z-10">
|
||||
@@ -1465,7 +1469,7 @@ const ChatbotFinalCTA = () => {
|
||||
>
|
||||
<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">
|
||||
<MessageSquare className="w-6 h-6 flex-shrink-0" />
|
||||
@@ -1494,7 +1498,7 @@ const ChatbotFinalCTA = () => {
|
||||
export const AIChatbotsVirtualAssistants = () => {
|
||||
return (
|
||||
<div className="dark min-h-screen">
|
||||
<Navigation />
|
||||
{/* <Navigation /> */}
|
||||
|
||||
{/* Hero Section */}
|
||||
<section className="bg-black">
|
||||
@@ -1518,7 +1522,7 @@ export const AIChatbotsVirtualAssistants = () => {
|
||||
|
||||
{/* Tech Stack */}
|
||||
<section className="bg-card">
|
||||
<ChatbotTechStack />
|
||||
<AIStrategyTargetAudience />
|
||||
</section>
|
||||
|
||||
{/* Case Studies */}
|
||||
@@ -1548,7 +1552,7 @@ export const AIChatbotsVirtualAssistants = () => {
|
||||
|
||||
{/* Footer */}
|
||||
<section className="bg-card">
|
||||
<Footer />
|
||||
{/* <Footer /> */}
|
||||
</section>
|
||||
</div>
|
||||
);
|
||||
|
||||
@@ -41,11 +41,13 @@ import { Badge } from "../components/ui/badge";
|
||||
import { Button } from "../components/ui/button";
|
||||
import { Card, CardContent } from "../components/ui/card";
|
||||
import { ShimmerButton } from "../components/ui/shimmer-button";
|
||||
import { navigateTo } from "@/App";
|
||||
import { useNavigate } from "react-router-dom";
|
||||
import { Helmet } from "react-helmet-async";
|
||||
import { AIStrategyTargetAudience } from "./AIStrategyConsulting";
|
||||
|
||||
// AI Integration Hero Section
|
||||
const AIIntegrationHeroWithCTA = () => {
|
||||
const navigate = useNavigate();
|
||||
return (
|
||||
<section className="relative py-20 overflow-hidden bg-black">
|
||||
<Helmet>
|
||||
@@ -134,7 +136,7 @@ const AIIntegrationHeroWithCTA = () => {
|
||||
>
|
||||
<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">
|
||||
<Sparkles className="w-5 h-5 flex-shrink-0" />
|
||||
@@ -1166,6 +1168,7 @@ const AIIntegrationCaseStudies = () => {
|
||||
|
||||
// Mid-Page CTA
|
||||
const AIIntegrationInlineCTA = () => {
|
||||
const navigate = useNavigate();
|
||||
return (
|
||||
<section className="py-20 bg-black">
|
||||
<div className="container mx-auto px-6 lg:px-8">
|
||||
@@ -1204,7 +1207,7 @@ const AIIntegrationInlineCTA = () => {
|
||||
|
||||
<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">
|
||||
<Brain className="w-6 h-6 flex-shrink-0" />
|
||||
@@ -1471,6 +1474,7 @@ const AIIntegrationFAQs = () => {
|
||||
|
||||
// Final CTA Section
|
||||
const AIIntegrationFinalCTA = () => {
|
||||
const navigate = useNavigate();
|
||||
return (
|
||||
<section className="py-20 relative overflow-hidden">
|
||||
<div className="container mx-auto px-6 lg:px-8 relative z-10">
|
||||
@@ -1523,7 +1527,7 @@ const AIIntegrationFinalCTA = () => {
|
||||
>
|
||||
<ShimmerButton
|
||||
className="px-12 py-6 text-xl rounded-2xl shadow-2xl hover:shadow-accent/25"
|
||||
onClick={() => navigateTo("/start-a-project")}
|
||||
onClick={() => navigate("/start-a-project")}
|
||||
>
|
||||
<div className="inline-flex items-center gap-3">
|
||||
<Rocket className="w-6 h-6 flex-shrink-0" />
|
||||
@@ -1552,7 +1556,7 @@ const AIIntegrationFinalCTA = () => {
|
||||
export const AIIntegrationDigitalProducts = () => {
|
||||
return (
|
||||
<div className="dark min-h-screen">
|
||||
<Navigation />
|
||||
{/* <Navigation /> */}
|
||||
|
||||
{/* Hero Section */}
|
||||
<section className="bg-black">
|
||||
@@ -1576,7 +1580,7 @@ export const AIIntegrationDigitalProducts = () => {
|
||||
|
||||
{/* Tech Stack */}
|
||||
<section className="bg-card">
|
||||
<AIIntegrationTechStack />
|
||||
<AIStrategyTargetAudience />
|
||||
</section>
|
||||
|
||||
{/* Case Studies */}
|
||||
@@ -1605,8 +1609,8 @@ export const AIIntegrationDigitalProducts = () => {
|
||||
</section>
|
||||
|
||||
{/* Footer */}
|
||||
<section className="bg-card">
|
||||
<Footer />
|
||||
<section className="bg-background">
|
||||
{/* <Footer /> */}
|
||||
</section>
|
||||
</div>
|
||||
);
|
||||
|
||||
@@ -43,11 +43,13 @@ import { Badge } from "../components/ui/badge";
|
||||
import { Button } from "../components/ui/button";
|
||||
import { Card, CardContent } from "../components/ui/card";
|
||||
import { ShimmerButton } from "../components/ui/shimmer-button";
|
||||
import { navigateTo } from "@/App";
|
||||
import { useNavigate } from "react-router-dom";
|
||||
import { Helmet } from "react-helmet-async";
|
||||
import { AIStrategyTargetAudience } from "./AIStrategyConsulting";
|
||||
|
||||
// AI Model Deployment & MLOps Hero Section
|
||||
const MLOpsHeroWithCTA = () => {
|
||||
const navigate = useNavigate();
|
||||
return (
|
||||
<section className="relative py-20 overflow-hidden bg-black">
|
||||
<Helmet>
|
||||
@@ -136,7 +138,7 @@ const MLOpsHeroWithCTA = () => {
|
||||
>
|
||||
<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">
|
||||
<Rocket className="w-5 h-5 flex-shrink-0" />
|
||||
@@ -1130,6 +1132,7 @@ const MLOpsCaseStudies = () => {
|
||||
|
||||
// Mid-Page CTA
|
||||
const MLOpsInlineCTA = () => {
|
||||
const navigate = useNavigate();
|
||||
return (
|
||||
<section className="py-20 bg-black">
|
||||
<div className="container mx-auto px-6 lg:px-8">
|
||||
@@ -1168,7 +1171,7 @@ const MLOpsInlineCTA = () => {
|
||||
|
||||
<ShimmerButton
|
||||
className="text-xl px-10 py-5 rounded-2xl shadow-lg hover:shadow-xl"
|
||||
onClick={() => navigateTo("/start-a-project")}
|
||||
onClick={() => navigate("/start-a-project")}
|
||||
>
|
||||
<div className="inline-flex items-center gap-3">
|
||||
<MessageSquare className="w-6 h-6 flex-shrink-0" />
|
||||
@@ -1435,6 +1438,7 @@ const MLOpsFAQs = () => {
|
||||
|
||||
// Final CTA Section
|
||||
const MLOpsFinalCTA = () => {
|
||||
const navigate = useNavigate();
|
||||
return (
|
||||
<section className="py-20 relative overflow-hidden">
|
||||
<div className="container mx-auto px-6 lg:px-8 relative z-10">
|
||||
@@ -1488,7 +1492,7 @@ const MLOpsFinalCTA = () => {
|
||||
>
|
||||
<ShimmerButton
|
||||
className="px-12 py-6 text-xl rounded-2xl shadow-2xl hover:shadow-accent/25"
|
||||
onClick={() => navigateTo("/start-a-project")}
|
||||
onClick={() => navigate("/start-a-project")}
|
||||
>
|
||||
<div className="inline-flex items-center gap-3">
|
||||
<Rocket className="w-6 h-6 flex-shrink-0" />
|
||||
@@ -1518,7 +1522,7 @@ const MLOpsFinalCTA = () => {
|
||||
export const AIModelDeploymentMLOps = () => {
|
||||
return (
|
||||
<div className="dark min-h-screen">
|
||||
<Navigation />
|
||||
{/* <Navigation /> */}
|
||||
|
||||
{/* Hero Section */}
|
||||
<section className="bg-black">
|
||||
@@ -1542,7 +1546,7 @@ export const AIModelDeploymentMLOps = () => {
|
||||
|
||||
{/* Tech Stack */}
|
||||
<section className="bg-card">
|
||||
<MLOpsTechStack />
|
||||
<AIStrategyTargetAudience />
|
||||
</section>
|
||||
|
||||
{/* Case Studies */}
|
||||
@@ -1572,7 +1576,7 @@ export const AIModelDeploymentMLOps = () => {
|
||||
|
||||
{/* Footer */}
|
||||
<section className="bg-card">
|
||||
<Footer />
|
||||
{/* <Footer /> */}
|
||||
</section>
|
||||
</div>
|
||||
);
|
||||
|
||||
@@ -32,11 +32,12 @@ import { Badge } from "../components/ui/badge";
|
||||
import { Button } from "../components/ui/button";
|
||||
import { Card, CardContent } from "../components/ui/card";
|
||||
import { ShimmerButton } from "../components/ui/shimmer-button";
|
||||
import { navigateTo } from "@/App";
|
||||
import { useNavigate } from "react-router-dom";
|
||||
import { Helmet } from "react-helmet-async";
|
||||
|
||||
// AI Strategy & Consulting Hero Section
|
||||
const AIStrategyHeroWithCTA = () => {
|
||||
const navigate = useNavigate();
|
||||
return (
|
||||
<section className="relative py-20 overflow-hidden bg-black">
|
||||
<Helmet>
|
||||
@@ -122,7 +123,7 @@ const AIStrategyHeroWithCTA = () => {
|
||||
className="flex flex-col sm:flex-row gap-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">
|
||||
<Brain className="w-5 h-5 flex-shrink-0" />
|
||||
@@ -782,7 +783,7 @@ const AIStrategyOfferings = () => {
|
||||
};
|
||||
|
||||
// Target Audience
|
||||
const AIStrategyTargetAudience = () => {
|
||||
export const AIStrategyTargetAudience = () => {
|
||||
const audiences = [
|
||||
{ title: "CTOs", icon: Code, description: "Technical leaders driving AI transformation initiatives" },
|
||||
{ title: "Product Leaders", icon: Rocket, description: "Product managers integrating AI into product strategy" },
|
||||
@@ -968,6 +969,7 @@ const AIStrategyCaseStudies = () => {
|
||||
|
||||
// Mid-Page CTA
|
||||
const AIStrategyInlineCTA = () => {
|
||||
const navigate = useNavigate();
|
||||
return (
|
||||
<section className="py-20 bg-black">
|
||||
<div className="container mx-auto px-6 lg:px-8">
|
||||
@@ -1002,7 +1004,7 @@ const AIStrategyInlineCTA = () => {
|
||||
</p>
|
||||
|
||||
<ShimmerButton className="text-xl px-10 py-5 rounded-2xl shadow-lg hover:shadow-xl"
|
||||
onClick={() => navigateTo("/start-a-project")}
|
||||
onClick={() => navigate("/start-a-project")}
|
||||
>
|
||||
<div className="inline-flex items-center gap-3">
|
||||
<MessageSquare className="w-6 h-6 flex-shrink-0" />
|
||||
@@ -1220,6 +1222,7 @@ const AIStrategyFAQs = () => {
|
||||
|
||||
// Final CTA Section
|
||||
const AIStrategyFinalCTA = () => {
|
||||
const navigate = useNavigate();
|
||||
return (
|
||||
<section className="py-20 relative overflow-hidden">
|
||||
<div className="container mx-auto px-6 lg:px-8 relative z-10">
|
||||
@@ -1268,7 +1271,7 @@ const AIStrategyFinalCTA = () => {
|
||||
className="space-y-8"
|
||||
>
|
||||
<ShimmerButton className="px-12 py-6 text-xl rounded-2xl shadow-2xl hover:shadow-accent/25"
|
||||
onClick={() => navigateTo("/start-a-project")}
|
||||
onClick={() => navigate("/start-a-project")}
|
||||
>
|
||||
<div className="inline-flex items-center gap-3">
|
||||
<Rocket className="w-6 h-6 flex-shrink-0" />
|
||||
@@ -1297,7 +1300,7 @@ const AIStrategyFinalCTA = () => {
|
||||
export const AIStrategyConsulting = () => {
|
||||
return (
|
||||
<div className="dark min-h-screen">
|
||||
<Navigation />
|
||||
{/* <Navigation /> */}
|
||||
|
||||
{/* Hero Section */}
|
||||
<section className="bg-black">
|
||||
@@ -1350,8 +1353,8 @@ export const AIStrategyConsulting = () => {
|
||||
</section>
|
||||
|
||||
{/* Footer */}
|
||||
<section className="bg-card">
|
||||
<Footer />
|
||||
<section className="bg-background">
|
||||
{/* <Footer /> */}
|
||||
</section>
|
||||
</div>
|
||||
);
|
||||
|
||||
@@ -45,11 +45,12 @@ import { Button } from "../components/ui/button";
|
||||
import { Card, CardContent } from "../components/ui/card";
|
||||
import { ShimmerButton } from "../components/ui/shimmer-button";
|
||||
import iotDeviceImage from "../src/images/iot-device.webp";
|
||||
import { navigateTo } from "@/App";
|
||||
import { useNavigate } from "react-router-dom";
|
||||
import { Helmet } from "react-helmet-async";
|
||||
|
||||
// API & Backend Development Hero Section
|
||||
const APIHeroWithCTA = () => {
|
||||
const navigate = useNavigate();
|
||||
return (
|
||||
<section className="relative py-20 overflow-hidden bg-black">
|
||||
<Helmet>
|
||||
@@ -139,7 +140,7 @@ const APIHeroWithCTA = () => {
|
||||
>
|
||||
<ShimmerButton
|
||||
className="text-lg px-8 py-4"
|
||||
onClick={() => navigateTo("/start-a-project")}
|
||||
onClick={() => navigate("/start-a-project")}
|
||||
>
|
||||
<div className="inline-flex items-center gap-2">
|
||||
<Server className="w-5 h-5 flex-shrink-0" />
|
||||
@@ -1397,6 +1398,7 @@ const APICaseStudies = () => {
|
||||
|
||||
// Mid-Page CTA
|
||||
const APIInlineCTA = () => {
|
||||
const navigate = useNavigate();
|
||||
return (
|
||||
<section className="py-20">
|
||||
<div className="container mx-auto px-6 lg:px-8">
|
||||
@@ -1435,7 +1437,7 @@ const APIInlineCTA = () => {
|
||||
|
||||
<ShimmerButton
|
||||
className="text-xl px-10 py-5 rounded-2xl shadow-lg hover:shadow-xl"
|
||||
onClick={() => navigateTo("/start-a-project")}
|
||||
onClick={() => navigate("/start-a-project")}
|
||||
>
|
||||
<div className="inline-flex items-center gap-3">
|
||||
<MessageSquare className="w-6 h-6 flex-shrink-0" />
|
||||
@@ -1451,6 +1453,7 @@ const APIInlineCTA = () => {
|
||||
|
||||
// Hire Backend Developers
|
||||
const HireBackendDevelopers = () => {
|
||||
const navigate = useNavigate();
|
||||
const developerTypes = [
|
||||
{
|
||||
title: "Node.js Developers",
|
||||
@@ -1581,7 +1584,7 @@ const HireBackendDevelopers = () => {
|
||||
>
|
||||
<div className="flex flex-col sm:flex-row gap-4 justify-center">
|
||||
<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">
|
||||
<Users className="w-5 h-5 flex-shrink-0" />
|
||||
@@ -1678,6 +1681,7 @@ const APIFAQs = () => {
|
||||
|
||||
// Final CTA Section
|
||||
const APIFinalCTA = () => {
|
||||
const navigate = useNavigate();
|
||||
return (
|
||||
<section className="py-20 relative overflow-hidden">
|
||||
<div className="container mx-auto px-6 lg:px-8 relative z-10">
|
||||
@@ -1730,7 +1734,7 @@ const APIFinalCTA = () => {
|
||||
>
|
||||
<ShimmerButton
|
||||
className="px-12 py-6 text-xl rounded-2xl shadow-2xl hover:shadow-accent/25"
|
||||
onClick={() => navigateTo("/start-a-project")}
|
||||
onClick={() => navigate("/start-a-project")}
|
||||
>
|
||||
<div className="inline-flex items-center gap-3">
|
||||
<Rocket className="w-6 h-6 flex-shrink-0" />
|
||||
@@ -1760,7 +1764,7 @@ const APIFinalCTA = () => {
|
||||
export const APIBackendDevelopment = () => {
|
||||
return (
|
||||
<div className="dark min-h-screen">
|
||||
<Navigation />
|
||||
{/* <Navigation /> */}
|
||||
|
||||
{/* Hero Section */}
|
||||
<section className="bg-black">
|
||||
@@ -1772,6 +1776,11 @@ export const APIBackendDevelopment = () => {
|
||||
<APIBenefits />
|
||||
</section>
|
||||
|
||||
{/* Case Studies */}
|
||||
<section className="bg-background">
|
||||
<APICaseStudies />
|
||||
</section>
|
||||
|
||||
{/* Development Process */}
|
||||
<section className="bg-card">
|
||||
<APIProcess />
|
||||
@@ -1787,15 +1796,10 @@ export const APIBackendDevelopment = () => {
|
||||
<APITechStack />
|
||||
</section>
|
||||
|
||||
{/* Case Studies */}
|
||||
<section className="bg-background">
|
||||
<APICaseStudies />
|
||||
</section>
|
||||
|
||||
{/* Mid-Page CTA */}
|
||||
<section className="bg-card">
|
||||
{/* <section className="bg-card">
|
||||
<APIInlineCTA />
|
||||
</section>
|
||||
</section> */}
|
||||
|
||||
{/* Hire Developers */}
|
||||
<section className="bg-background">
|
||||
@@ -1803,9 +1807,9 @@ export const APIBackendDevelopment = () => {
|
||||
</section>
|
||||
|
||||
{/* FAQs */}
|
||||
<section className="bg-card">
|
||||
{/* <section className="bg-card">
|
||||
<APIFAQs />
|
||||
</section>
|
||||
</section> */}
|
||||
|
||||
{/* Final CTA */}
|
||||
<section className="bg-background">
|
||||
@@ -1813,8 +1817,8 @@ export const APIBackendDevelopment = () => {
|
||||
</section>
|
||||
|
||||
{/* Footer */}
|
||||
<section className="bg-card">
|
||||
<Footer />
|
||||
<section className="bg-background">
|
||||
{/* <Footer /> */}
|
||||
</section>
|
||||
</div>
|
||||
);
|
||||
|
||||
@@ -9,7 +9,6 @@ import { ShimmerButton } from "../components/ui/shimmer-button";
|
||||
import { Badge } from "../components/ui/badge";
|
||||
import { Card, CardContent } from "../components/ui/card";
|
||||
import { GridPattern } from "../components/GridPattern";
|
||||
import { navigateTo } from "../App";
|
||||
import {
|
||||
ArrowRight, Users, Globe, Award, Target, Heart, Lightbulb,
|
||||
Rocket, TrendingUp, CheckCircle, Star, Coffee, Monitor,
|
||||
@@ -18,9 +17,11 @@ import {
|
||||
} from "lucide-react";
|
||||
import { Helmet } from "react-helmet-async";
|
||||
import { CarouselTestimonials } from "@/components/CarouselTestimonials";
|
||||
import { useNavigate } from "react-router-dom";
|
||||
|
||||
// Enhanced Hero Section
|
||||
const HeroWithCTA = () => {
|
||||
const navigate = useNavigate();
|
||||
return (
|
||||
<section className="relative py-20 overflow-hidden bg-black">
|
||||
<Helmet>
|
||||
@@ -106,7 +107,7 @@ const HeroWithCTA = () => {
|
||||
transition={{ duration: 0.8, delay: 0.3 }}
|
||||
className="flex flex-col sm:flex-row gap-4"
|
||||
>
|
||||
<ShimmerButton className="text-lg px-8 py-4" onClick={() => navigateTo('/services')}>
|
||||
<ShimmerButton className="text-lg px-8 py-4" onClick={() => navigate('/services')}>
|
||||
<div className="inline-flex items-center gap-2">
|
||||
<Briefcase className="w-4 h-4 flex-shrink-0" />
|
||||
<span>Explore Our Services</span>
|
||||
@@ -116,7 +117,7 @@ const HeroWithCTA = () => {
|
||||
variant="secondary"
|
||||
size="lg"
|
||||
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" />
|
||||
<span>View Our Portfolio</span>
|
||||
@@ -298,6 +299,7 @@ const ImpactNumbersSection = () => {
|
||||
|
||||
// Learn More About WDI Section
|
||||
const LearnMoreSection = () => {
|
||||
const navigate = useNavigate();
|
||||
const sections = [
|
||||
{
|
||||
title: "Our History",
|
||||
@@ -373,7 +375,7 @@ const LearnMoreSection = () => {
|
||||
viewport={{ once: true }}
|
||||
whileHover={{ y: -5 }}
|
||||
className="group cursor-pointer"
|
||||
onClick={() => navigateTo(section.link)}
|
||||
onClick={() => navigate(section.link)}
|
||||
>
|
||||
<div className="bg-gray-900/50 backdrop-blur-sm rounded-2xl border border-gray-800 p-8 hover:border-accent/30 transition-all duration-300 shadow-lg hover:shadow-xl h-full">
|
||||
<div className="flex flex-col items-start space-y-6">
|
||||
@@ -541,6 +543,7 @@ const MissionSection = () => {
|
||||
|
||||
// Updated CTA Section
|
||||
const InlineCTA = () => {
|
||||
const navigate = useNavigate();
|
||||
return (
|
||||
<section className="py-20 bg-black">
|
||||
<div className="container mx-auto px-6 lg:px-8">
|
||||
@@ -584,8 +587,8 @@ const InlineCTA = () => {
|
||||
<div className="flex flex-col sm:flex-row items-start gap-4">
|
||||
<ShimmerButton
|
||||
className="text-xl px-10 py-5 rounded-2xl shadow-lg hover:shadow-xl bg-[#E5195E] hover:bg-[#E5195E]/90"
|
||||
// onClick={() => navigateTo('/contact')}
|
||||
onClick={() => navigateTo("/start-a-project")}
|
||||
// onClick={() => navigate('/contact')}
|
||||
onClick={() => navigate("/start-a-project")}
|
||||
>
|
||||
<div className="inline-flex items-center gap-3">
|
||||
<Mail className="w-6 h-6 flex-shrink-0" />
|
||||
@@ -597,7 +600,7 @@ const InlineCTA = () => {
|
||||
variant="secondary"
|
||||
size="lg"
|
||||
className="text-xl px-10 py-5 rounded-2xl h-[56px]"
|
||||
onClick={() => navigateTo('/services')}
|
||||
onClick={() => navigate('/services')}
|
||||
>
|
||||
<Briefcase className="w-6 h-6 flex-shrink-0" />
|
||||
<span>Explore Our Services</span>
|
||||
@@ -637,7 +640,7 @@ const aboutWDIFAQs = [
|
||||
export const AboutWDI = () => {
|
||||
return (
|
||||
<div className="dark min-h-screen bg-background">
|
||||
<Navigation />
|
||||
{/* {/* <Navigation /> */}
|
||||
<HeroWithCTA />
|
||||
<WhyChooseWDISection />
|
||||
<ImpactNumbersSection />
|
||||
@@ -651,7 +654,7 @@ export const AboutWDI = () => {
|
||||
subtitle="Get answers to common questions about our company and mission."
|
||||
faqs={aboutWDIFAQs}
|
||||
/>
|
||||
<Footer />
|
||||
{/* <Footer /> */}
|
||||
</div>
|
||||
);
|
||||
};
|
||||
@@ -5,9 +5,10 @@ import { Button } from "../components/ui/button";
|
||||
import { Badge } from "../components/ui/badge";
|
||||
import { Card, CardContent } from "../components/ui/card";
|
||||
import { ArrowRight, Lightbulb, Users2, Target, TrendingUp, Clock, Award, Briefcase, Heart, Newspaper, Star } from "lucide-react";
|
||||
import { navigateTo } from "../App";
|
||||
import { useNavigate } from "react-router-dom";
|
||||
|
||||
export const AboutWDIMain = () => {
|
||||
const navigate = useNavigate();
|
||||
const keyHighlights = [
|
||||
{
|
||||
icon: Lightbulb,
|
||||
@@ -86,7 +87,7 @@ export const AboutWDIMain = () => {
|
||||
|
||||
return (
|
||||
<div className="dark min-h-screen bg-background">
|
||||
<Navigation />
|
||||
{/* <Navigation /> */}
|
||||
|
||||
{/* Hero Section */}
|
||||
<section className="relative pt-24 pb-16 overflow-hidden">
|
||||
@@ -204,7 +205,7 @@ export const AboutWDIMain = () => {
|
||||
|
||||
<div className="grid md:grid-cols-2 lg:grid-cols-3 gap-8">
|
||||
{subPages.map((page, index) => (
|
||||
<Card key={index} className="bg-card/50 border-white/10 hover:border-[#E5195E]/30 transition-all duration-300 group cursor-pointer" onClick={() => navigateTo(page.href)}>
|
||||
<Card key={index} className="bg-card/50 border-white/10 hover:border-[#E5195E]/30 transition-all duration-300 group cursor-pointer" onClick={() => navigate(page.href)}>
|
||||
<CardContent className="p-6">
|
||||
<page.icon className="w-8 h-8 text-[#E5195E] mb-4 group-hover:scale-110 transition-transform duration-300" />
|
||||
<h3 className="text-xl font-semibold text-white mb-3 group-hover:text-[#E5195E] transition-colors duration-300">
|
||||
@@ -323,7 +324,7 @@ export const AboutWDIMain = () => {
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<Footer />
|
||||
{/* <Footer /> */}
|
||||
</div>
|
||||
);
|
||||
};
|
||||
@@ -48,11 +48,12 @@ import { Button } from "../components/ui/button";
|
||||
import { Card, CardContent } from "../components/ui/card";
|
||||
import { ShimmerButton } from "../components/ui/shimmer-button";
|
||||
import healthcareImage from "../src/images/healthcare.webp";
|
||||
import { navigateTo } from "@/App";
|
||||
import { Helmet } from "react-helmet-async";
|
||||
import { useNavigate } from "react-router-dom";
|
||||
|
||||
// Admin Panels & Dashboards Hero Section
|
||||
const AdminHeroWithCTA = () => {
|
||||
const navigate = useNavigate();
|
||||
return (
|
||||
<section className="relative py-20 overflow-hidden bg-black">
|
||||
<Helmet>
|
||||
@@ -143,7 +144,7 @@ const AdminHeroWithCTA = () => {
|
||||
>
|
||||
<ShimmerButton
|
||||
className="text-lg px-8 py-4"
|
||||
onClick={() => navigateTo("/start-a-project")}
|
||||
onClick={() => navigate("/start-a-project")}
|
||||
>
|
||||
<div className="inline-flex items-center gap-2">
|
||||
<Monitor className="w-5 h-5 flex-shrink-0" />
|
||||
@@ -1219,6 +1220,7 @@ const AdminCaseStudies = () => {
|
||||
|
||||
// Mid-Page CTA
|
||||
const AdminInlineCTA = () => {
|
||||
const navigate = useNavigate();
|
||||
return (
|
||||
<section className="py-20">
|
||||
<div className="container mx-auto px-6 lg:px-8">
|
||||
@@ -1257,7 +1259,7 @@ const AdminInlineCTA = () => {
|
||||
|
||||
<ShimmerButton
|
||||
className="text-xl px-10 py-5 rounded-2xl shadow-lg hover:shadow-xl"
|
||||
onClick={() => navigateTo("/start-a-project")}
|
||||
onClick={() => navigate("/start-a-project")}
|
||||
>
|
||||
<div className="inline-flex items-center gap-3">
|
||||
<MessageSquare className="w-6 h-6 flex-shrink-0" />
|
||||
@@ -1273,6 +1275,7 @@ const AdminInlineCTA = () => {
|
||||
|
||||
// Hire UI/UX Designers
|
||||
const HireDevelopers = () => {
|
||||
const navigate = useNavigate();
|
||||
const developerTypes = [
|
||||
{
|
||||
title: "Frontend Developers (React, Angular, Vue)",
|
||||
@@ -1373,7 +1376,7 @@ const HireDevelopers = () => {
|
||||
>
|
||||
<div className="flex flex-col sm:flex-row gap-4 justify-center">
|
||||
<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">
|
||||
<Code className="w-5 h-5 flex-shrink-0" />
|
||||
@@ -1471,6 +1474,7 @@ const AdminFAQs = () => {
|
||||
|
||||
// Final CTA Section
|
||||
const AdminFinalCTA = () => {
|
||||
const navigate = useNavigate();
|
||||
return (
|
||||
<section className="py-20 relative overflow-hidden">
|
||||
<div className="container mx-auto px-6 lg:px-8 relative z-10">
|
||||
@@ -1523,7 +1527,7 @@ const AdminFinalCTA = () => {
|
||||
>
|
||||
<ShimmerButton
|
||||
className="px-12 py-6 text-xl rounded-2xl shadow-2xl hover:shadow-accent/25"
|
||||
onClick={() => navigateTo("/start-a-project")}
|
||||
onClick={() => navigate("/start-a-project")}
|
||||
>
|
||||
<div className="inline-flex items-center gap-3">
|
||||
<TrendingUp className="w-6 h-6 flex-shrink-0" />
|
||||
@@ -1552,7 +1556,7 @@ const AdminFinalCTA = () => {
|
||||
export const AdminPanelsDashboards = () => {
|
||||
return (
|
||||
<div className="dark min-h-screen">
|
||||
<Navigation />
|
||||
{/* <Navigation /> */}
|
||||
|
||||
{/* Hero Section */}
|
||||
<section className="bg-black">
|
||||
@@ -1564,6 +1568,11 @@ export const AdminPanelsDashboards = () => {
|
||||
<AdminBenefits />
|
||||
</section>
|
||||
|
||||
{/* Case Studies */}
|
||||
<section className="bg-background">
|
||||
<AdminCaseStudies />
|
||||
</section>
|
||||
|
||||
{/* Development Process */}
|
||||
<section className="bg-card">
|
||||
<AdminProcess />
|
||||
@@ -1579,15 +1588,10 @@ export const AdminPanelsDashboards = () => {
|
||||
<AdminTechStack />
|
||||
</section>
|
||||
|
||||
{/* Case Studies */}
|
||||
<section className="bg-background">
|
||||
<AdminCaseStudies />
|
||||
</section>
|
||||
|
||||
{/* Mid-Page CTA */}
|
||||
<section className="bg-card">
|
||||
{/* <section className="bg-card">
|
||||
<AdminInlineCTA />
|
||||
</section>
|
||||
</section> */}
|
||||
|
||||
{/* Hire Designers */}
|
||||
<section className="bg-background">
|
||||
@@ -1595,9 +1599,9 @@ export const AdminPanelsDashboards = () => {
|
||||
</section>
|
||||
|
||||
{/* FAQs */}
|
||||
<section className="bg-card">
|
||||
{/* <section className="bg-card">
|
||||
<AdminFAQs />
|
||||
</section>
|
||||
</section> */}
|
||||
|
||||
{/* Final CTA */}
|
||||
<section className="bg-background">
|
||||
@@ -1605,8 +1609,8 @@ export const AdminPanelsDashboards = () => {
|
||||
</section>
|
||||
|
||||
{/* Footer */}
|
||||
<section className="bg-card">
|
||||
<Footer />
|
||||
<section className="bg-background">
|
||||
{/* <Footer /> */}
|
||||
</section>
|
||||
</div>
|
||||
);
|
||||
|
||||
@@ -402,7 +402,7 @@ const agriTechFAQs = [
|
||||
export const AgriTechPlatforms = () => {
|
||||
return (
|
||||
<div className="min-h-screen bg-[#0E0E0E]">
|
||||
<Navigation />
|
||||
{/* <Navigation /> */}
|
||||
|
||||
<HeroBanner
|
||||
category="Industrial & Emerging Tech"
|
||||
@@ -443,7 +443,7 @@ export const AgriTechPlatforms = () => {
|
||||
<SplitCallToAction />
|
||||
</div>
|
||||
|
||||
<Footer />
|
||||
{/* <Footer /> */}
|
||||
</div>
|
||||
);
|
||||
};
|
||||
@@ -5,13 +5,14 @@ import { Button } from "../components/ui/button";
|
||||
import { Badge } from "../components/ui/badge";
|
||||
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 { navigateTo } from "../App";
|
||||
import { ImageWithFallback } from "../components/figma/ImageWithFallback";
|
||||
import { useNavigate } from "react-router-dom";
|
||||
|
||||
export const AmbleProject = () => {
|
||||
const navigate = useNavigate();
|
||||
return (
|
||||
<div className="dark min-h-screen bg-background">
|
||||
<Navigation />
|
||||
{/* <Navigation /> */}
|
||||
|
||||
{/* Hero Section */}
|
||||
<section className="pt-24 pb-16 bg-background relative overflow-hidden">
|
||||
@@ -88,7 +89,7 @@ export const AmbleProject = () => {
|
||||
<Button
|
||||
size="lg"
|
||||
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
|
||||
<ArrowRight className="w-5 h-5 ml-2" />
|
||||
@@ -97,7 +98,7 @@ export const AmbleProject = () => {
|
||||
size="lg"
|
||||
variant="outline"
|
||||
className="border-white/20 text-white hover:bg-white/10 font-manrope"
|
||||
onClick={() => navigateTo('/case-studies')}
|
||||
onClick={() => navigate('/case-studies')}
|
||||
>
|
||||
View More Cases
|
||||
</Button>
|
||||
@@ -604,7 +605,7 @@ export const AmbleProject = () => {
|
||||
<Button
|
||||
size="lg"
|
||||
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
|
||||
<ArrowRight className="w-5 h-5 ml-2" />
|
||||
@@ -613,7 +614,7 @@ export const AmbleProject = () => {
|
||||
size="lg"
|
||||
variant="outline"
|
||||
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
|
||||
</Button>
|
||||
@@ -622,7 +623,7 @@ export const AmbleProject = () => {
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<Footer />
|
||||
{/* <Footer /> */}
|
||||
</div>
|
||||
);
|
||||
};
|
||||
@@ -5,13 +5,14 @@ import { Button } from "../components/ui/button";
|
||||
import { Badge } from "../components/ui/badge";
|
||||
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 { navigateTo } from "../App";
|
||||
import { ImageWithFallback } from "../components/figma/ImageWithFallback";
|
||||
import { useNavigate } from "react-router-dom";
|
||||
|
||||
export const AmozProject = () => {
|
||||
const navigate = useNavigate();
|
||||
return (
|
||||
<div className="dark min-h-screen bg-background">
|
||||
<Navigation />
|
||||
{/* <Navigation /> */}
|
||||
|
||||
{/* Hero Section */}
|
||||
<section className="pt-24 pb-16 bg-background relative overflow-hidden">
|
||||
@@ -88,7 +89,7 @@ export const AmozProject = () => {
|
||||
<Button
|
||||
size="lg"
|
||||
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
|
||||
<ArrowRight className="w-5 h-5 ml-2" />
|
||||
@@ -97,7 +98,7 @@ export const AmozProject = () => {
|
||||
size="lg"
|
||||
variant="outline"
|
||||
className="border-white/20 text-white hover:bg-white/10 font-manrope"
|
||||
onClick={() => navigateTo('/case-studies')}
|
||||
onClick={() => navigate('/case-studies')}
|
||||
>
|
||||
View More Cases
|
||||
</Button>
|
||||
@@ -610,7 +611,7 @@ export const AmozProject = () => {
|
||||
<Button
|
||||
size="lg"
|
||||
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
|
||||
<ArrowRight className="w-5 h-5 ml-2" />
|
||||
@@ -619,7 +620,7 @@ export const AmozProject = () => {
|
||||
size="lg"
|
||||
variant="outline"
|
||||
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
|
||||
</Button>
|
||||
@@ -628,7 +629,7 @@ export const AmozProject = () => {
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<Footer />
|
||||
{/* <Footer /> */}
|
||||
</div>
|
||||
);
|
||||
};
|
||||
@@ -39,7 +39,7 @@ import { Button } from "../components/ui/button";
|
||||
import { Card, CardContent } from "../components/ui/card";
|
||||
import { ShimmerButton } from "../components/ui/shimmer-button";
|
||||
import androidVectorImage from "../src/images/android-vector.png";
|
||||
import { navigateTo } from "@/App";
|
||||
import { useNavigate } from "react-router-dom";
|
||||
import { Helmet } from "react-helmet-async";
|
||||
import ranoutofImage from "../src/images/ranoutof.webp"
|
||||
import tradersCircuitImage from "../src/images/traders-circuit.webp";
|
||||
@@ -49,6 +49,7 @@ import awsLogoImage from "../src/images/aws-logo.png";
|
||||
|
||||
// Android Hero Section with Android device mockups and Android vector
|
||||
const AndroidHeroWithCTA = () => {
|
||||
const navigate = useNavigate();
|
||||
return (
|
||||
<section className="relative py-20 overflow-hidden bg-black">
|
||||
<Helmet>
|
||||
@@ -169,7 +170,7 @@ const AndroidHeroWithCTA = () => {
|
||||
>
|
||||
<ShimmerButton
|
||||
className="text-lg px-8 py-4"
|
||||
onClick={() => navigateTo("/start-a-project")}
|
||||
onClick={() => navigate("/start-a-project")}
|
||||
>
|
||||
<div className="inline-flex items-center gap-2">
|
||||
<svg
|
||||
@@ -782,6 +783,7 @@ const AndroidTechStack = () => {
|
||||
|
||||
// Android Case Studies
|
||||
const AndroidCaseStudies = () => {
|
||||
const navigate = useNavigate();
|
||||
const caseStudies = [
|
||||
{
|
||||
title: "Household Management Revolution",
|
||||
@@ -905,7 +907,7 @@ const AndroidCaseStudies = () => {
|
||||
variant="ghost"
|
||||
size="sm"
|
||||
className="w-full justify-between text-accent hover:text-accent hover:bg-accent/10 group-hover:translate-x-1 transition-all duration-300"
|
||||
onClick={() => navigateTo(study.buttonLink)}
|
||||
onClick={() => navigate(study.buttonLink)}
|
||||
>
|
||||
<span className="text-sm font-medium">
|
||||
VIEW CASE STUDY
|
||||
@@ -925,6 +927,7 @@ const AndroidCaseStudies = () => {
|
||||
|
||||
// Mid-Page CTA
|
||||
const AndroidInlineCTA = () => {
|
||||
const navigate = useNavigate();
|
||||
return (
|
||||
<section className="py-20 bg-black">
|
||||
<div className="container mx-auto px-6 lg:px-8">
|
||||
@@ -969,7 +972,7 @@ const AndroidInlineCTA = () => {
|
||||
|
||||
<ShimmerButton
|
||||
className="text-xl px-10 py-5 rounded-2xl shadow-lg hover:shadow-xl"
|
||||
onClick={() => navigateTo("/start-a-project")}
|
||||
onClick={() => navigate("/start-a-project")}
|
||||
>
|
||||
<div className="inline-flex items-center gap-3">
|
||||
<svg
|
||||
@@ -997,6 +1000,7 @@ const AndroidInlineCTA = () => {
|
||||
|
||||
// Hire Android Developers Section
|
||||
const HireAndroidDevelopers = () => {
|
||||
const navigate = useNavigate();
|
||||
const developerTypes = [
|
||||
{
|
||||
title: "Senior Android Developer",
|
||||
@@ -1115,7 +1119,7 @@ const HireAndroidDevelopers = () => {
|
||||
>
|
||||
<ShimmerButton
|
||||
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">
|
||||
<UserPlus className="w-5 h-5 flex-shrink-0" />
|
||||
@@ -1213,6 +1217,7 @@ const AndroidFAQs = () => {
|
||||
|
||||
// Final CTA Section
|
||||
const AndroidFinalCTA = () => {
|
||||
const navigate = useNavigate();
|
||||
return (
|
||||
<section className="py-20 relative overflow-hidden">
|
||||
<div className="container mx-auto px-6 lg:px-8 relative z-10">
|
||||
@@ -1277,7 +1282,7 @@ const AndroidFinalCTA = () => {
|
||||
>
|
||||
<ShimmerButton
|
||||
className="px-12 py-6 text-xl rounded-2xl shadow-2xl hover:shadow-accent/25"
|
||||
onClick={() => navigateTo("/start-a-project")}
|
||||
onClick={() => navigate("/start-a-project")}
|
||||
>
|
||||
<div className="inline-flex items-center gap-3">
|
||||
<svg
|
||||
@@ -1318,7 +1323,7 @@ const AndroidFinalCTA = () => {
|
||||
export const AndroidAppDevelopment = () => {
|
||||
return (
|
||||
<div className="dark min-h-screen">
|
||||
<Navigation />
|
||||
{/* <Navigation /> */}
|
||||
|
||||
{/* Hero Section */}
|
||||
<section className="bg-black">
|
||||
@@ -1330,6 +1335,11 @@ export const AndroidAppDevelopment = () => {
|
||||
<AndroidKeyBenefits />
|
||||
</section>
|
||||
|
||||
{/* Case Studies */}
|
||||
<section className="bg-background">
|
||||
<AndroidCaseStudies />
|
||||
</section>
|
||||
|
||||
{/* Development Process */}
|
||||
<section className="bg-card">
|
||||
<AndroidProcessTimeline />
|
||||
@@ -1345,15 +1355,10 @@ export const AndroidAppDevelopment = () => {
|
||||
<AndroidTechStack />
|
||||
</section>
|
||||
|
||||
{/* Case Studies */}
|
||||
<section className="bg-background">
|
||||
<AndroidCaseStudies />
|
||||
</section>
|
||||
|
||||
{/* Mid-Page CTA */}
|
||||
<section className="bg-card">
|
||||
{/* <section className="bg-card">
|
||||
<AndroidInlineCTA />
|
||||
</section>
|
||||
</section> */}
|
||||
|
||||
{/* Hire Android Developers */}
|
||||
<section className="bg-background">
|
||||
@@ -1361,9 +1366,9 @@ export const AndroidAppDevelopment = () => {
|
||||
</section>
|
||||
|
||||
{/* FAQs */}
|
||||
<section className="bg-card">
|
||||
{/* <section className="bg-card">
|
||||
<AndroidFAQs />
|
||||
</section>
|
||||
</section> */}
|
||||
|
||||
{/* Final CTA */}
|
||||
<section className="bg-background">
|
||||
@@ -1371,8 +1376,8 @@ export const AndroidAppDevelopment = () => {
|
||||
</section>
|
||||
|
||||
{/* Footer */}
|
||||
<section className="bg-card">
|
||||
<Footer />
|
||||
<section className="bg-background">
|
||||
{/* <Footer /> */}
|
||||
</section>
|
||||
</div>
|
||||
);
|
||||
|
||||
@@ -7,8 +7,8 @@ import { Card, CardContent } from "../components/ui/card";
|
||||
import { Avatar, AvatarFallback, AvatarImage } from "../components/ui/avatar";
|
||||
import { Separator } from "../components/ui/separator";
|
||||
import { Calendar, Clock, User, ArrowRight, Share2, Linkedin, Twitter, ExternalLink, Tag } from "lucide-react";
|
||||
import { navigateTo } from "../App";
|
||||
import { ImageWithFallback } from "../components/figma/ImageWithFallback";
|
||||
import { useNavigate } from "react-router-dom";
|
||||
|
||||
// Mock article data - in real implementation, this would come from props or API
|
||||
const articleData = {
|
||||
@@ -116,9 +116,11 @@ export const ArticleDetail = () => {
|
||||
}
|
||||
};
|
||||
|
||||
const navigate = useNavigate();
|
||||
|
||||
return (
|
||||
<div className="dark min-h-screen bg-background">
|
||||
<Navigation />
|
||||
{/* <Navigation /> */}
|
||||
|
||||
{/* Hero Section */}
|
||||
<section className="pt-24 pb-16 bg-background">
|
||||
@@ -126,11 +128,11 @@ export const ArticleDetail = () => {
|
||||
<div className="max-w-4xl mx-auto">
|
||||
{/* Breadcrumb */}
|
||||
<div className="flex items-center gap-2 text-sm text-muted-foreground mb-8">
|
||||
<button onClick={() => navigateTo('/')} className="hover:text-white transition-colors">
|
||||
<button onClick={() => navigate('/')} className="hover:text-white transition-colors">
|
||||
Home
|
||||
</button>
|
||||
<span>/</span>
|
||||
<button onClick={() => navigateTo('/resources/blog')} className="hover:text-white transition-colors">
|
||||
<button onClick={() => navigate('/resources/blog')} className="hover:text-white transition-colors">
|
||||
Blog
|
||||
</button>
|
||||
<span>/</span>
|
||||
@@ -297,7 +299,7 @@ export const ArticleDetail = () => {
|
||||
<div
|
||||
key={article.id}
|
||||
className="group cursor-pointer"
|
||||
onClick={() => navigateTo(`/articles/${article.id}`)}
|
||||
onClick={() => navigate(`/articles/${article.id}`)}
|
||||
>
|
||||
<div className="aspect-[16/10] overflow-hidden rounded-lg mb-3">
|
||||
<ImageWithFallback
|
||||
@@ -323,7 +325,7 @@ export const ArticleDetail = () => {
|
||||
<Button
|
||||
variant="outline"
|
||||
className="w-full border-white/20 text-white hover:bg-white/10"
|
||||
onClick={() => navigateTo('/resources/blog')}
|
||||
onClick={() => navigate('/resources/blog')}
|
||||
>
|
||||
View All Articles
|
||||
<ArrowRight className="w-4 h-4 ml-2" />
|
||||
@@ -341,7 +343,7 @@ export const ArticleDetail = () => {
|
||||
</p>
|
||||
<Button
|
||||
className="w-full bg-[#E5195E] hover:bg-[#E5195E]/90 text-white"
|
||||
onClick={() => navigateTo('/contact')}
|
||||
onClick={() => navigate('/contact')}
|
||||
>
|
||||
Get In Touch
|
||||
</Button>
|
||||
@@ -368,7 +370,7 @@ export const ArticleDetail = () => {
|
||||
<Button
|
||||
size="lg"
|
||||
className="bg-[#E5195E] hover:bg-[#E5195E]/90 text-white"
|
||||
onClick={() => navigateTo('/contact')}
|
||||
onClick={() => navigate('/contact')}
|
||||
>
|
||||
Start Your Project
|
||||
<ArrowRight className="ml-2 w-4 h-4" />
|
||||
@@ -377,7 +379,7 @@ export const ArticleDetail = () => {
|
||||
size="lg"
|
||||
variant="outline"
|
||||
className="border-white/20 text-white hover:bg-white/10"
|
||||
onClick={() => navigateTo('/resources/blog')}
|
||||
onClick={() => navigate('/resources/blog')}
|
||||
>
|
||||
Read More Articles
|
||||
</Button>
|
||||
@@ -387,7 +389,7 @@ export const ArticleDetail = () => {
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<Footer />
|
||||
{/* <Footer /> */}
|
||||
</div>
|
||||
);
|
||||
};
|
||||
@@ -15,7 +15,6 @@ import {
|
||||
UserPlus,
|
||||
Zap,
|
||||
} from "lucide-react";
|
||||
import { navigateTo } from "../App";
|
||||
import { FAQSection } from "../components/FAQSection";
|
||||
import { Footer } from "../components/Footer";
|
||||
import { Navigation } from "../components/Navigation";
|
||||
@@ -25,9 +24,11 @@ import { Button } from "../components/ui/button";
|
||||
import { Card, CardContent } from "../components/ui/card";
|
||||
import { ShimmerButton } from "../components/ui/shimmer-button";
|
||||
import { Helmet } from "react-helmet-async";
|
||||
import { useNavigate } from "react-router-dom";
|
||||
|
||||
// Enhanced Hero Section
|
||||
const HeroWithCTA = () => {
|
||||
const navigate = useNavigate();
|
||||
return (
|
||||
<section className="relative py-20 overflow-hidden bg-black">
|
||||
<Helmet>
|
||||
@@ -120,8 +121,8 @@ const HeroWithCTA = () => {
|
||||
>
|
||||
<ShimmerButton
|
||||
className="text-lg px-8 py-4"
|
||||
// onClick={() => navigateTo('/contact/schedule-a-discovery-call')}
|
||||
onClick={() => navigateTo("/start-a-project")}
|
||||
// onClick={() => navigate('/contact/schedule-a-discovery-call')}
|
||||
onClick={() => navigate("/start-a-project")}
|
||||
>
|
||||
<div className="inline-flex items-center gap-2">
|
||||
<Calendar className="w-4 h-4 flex-shrink-0" />
|
||||
@@ -132,7 +133,7 @@ const HeroWithCTA = () => {
|
||||
variant="secondary"
|
||||
size="lg"
|
||||
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" />
|
||||
<span>View AI Case Studies</span>
|
||||
@@ -405,6 +406,7 @@ const SideBySideContentWithIcons = () => {
|
||||
|
||||
// Service Categories Grid
|
||||
const TabbedServiceDisplay = () => {
|
||||
const navigate = useNavigate();
|
||||
const services = [
|
||||
{
|
||||
title: "AI Strategy & Consulting",
|
||||
@@ -486,7 +488,7 @@ const TabbedServiceDisplay = () => {
|
||||
viewport={{ once: true }}
|
||||
whileHover={{ y: -5 }}
|
||||
className="group cursor-pointer"
|
||||
onClick={() => navigateTo(service.link)}
|
||||
onClick={() => navigate(service.link)}
|
||||
>
|
||||
<div className="bg-gray-900/50 backdrop-blur-sm rounded-2xl border border-gray-800 p-8 hover:border-accent/30 transition-all duration-300 shadow-lg hover:shadow-xl h-full">
|
||||
<div className="flex flex-col items-start space-y-6">
|
||||
@@ -515,6 +517,7 @@ const TabbedServiceDisplay = () => {
|
||||
|
||||
// Updated CTA Section with new design
|
||||
const InlineCTA = () => {
|
||||
const navigate = useNavigate();
|
||||
return (
|
||||
<section className="py-20 bg-black">
|
||||
<div className="container mx-auto px-6 lg:px-8">
|
||||
@@ -560,8 +563,8 @@ const InlineCTA = () => {
|
||||
<div className="flex flex-col items-start gap-4">
|
||||
<ShimmerButton
|
||||
className="text-xl px-10 py-5 rounded-2xl shadow-lg hover:shadow-xl bg-[#E5195E] hover:bg-[#E5195E]/90"
|
||||
// onClick={() => navigateTo("/contact/schedule-a-discovery-call")}
|
||||
onClick={() => navigateTo("/start-a-project")}
|
||||
// onClick={() => navigate("/contact/schedule-a-discovery-call")}
|
||||
onClick={() => navigate("/start-a-project")}
|
||||
>
|
||||
<div className="inline-flex items-center gap-3">
|
||||
<Bot className="w-6 h-6 flex-shrink-0" />
|
||||
@@ -701,7 +704,7 @@ const HireDevelopersSection = () => {
|
||||
<div className="p-8 pt-0 mt-auto space-y-3">
|
||||
<ShimmerButton
|
||||
className="w-full py-3 text-sm rounded-xl shadow-lg hover:shadow-xl"
|
||||
// onClick={() => navigateTo(specialist.link)}
|
||||
// onClick={() => navigate(specialist.link)}
|
||||
>
|
||||
<div className="inline-flex items-center justify-center gap-2">
|
||||
<UserPlus className="w-4 h-4 flex-shrink-0" />
|
||||
@@ -752,7 +755,7 @@ const aiServicesFAQs = [
|
||||
export function ArtificialIntelligenceServices() {
|
||||
return (
|
||||
<div className="dark min-h-screen bg-background">
|
||||
<Navigation />
|
||||
{/* <Navigation /> */}
|
||||
<HeroWithCTA />
|
||||
<HorizontalTagScroller />
|
||||
<SideBySideContentWithIcons />
|
||||
@@ -765,7 +768,7 @@ export function ArtificialIntelligenceServices() {
|
||||
subtitle="Get answers to common questions about our artificial intelligence services."
|
||||
faqs={aiServicesFAQs}
|
||||
/>
|
||||
<Footer />
|
||||
{/* <Footer /> */}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
@@ -7,8 +7,8 @@ import { Card, CardContent } from "../components/ui/card";
|
||||
import { Avatar, AvatarFallback, AvatarImage } from "../components/ui/avatar";
|
||||
import { Separator } from "../components/ui/separator";
|
||||
import { Calendar, Clock, User, ArrowRight, Share2, Linkedin, Twitter, ExternalLink, Tag } from "lucide-react";
|
||||
import { navigateTo } from "../App";
|
||||
import { ImageWithFallback } from "../components/figma/ImageWithFallback";
|
||||
import { useNavigate } from "react-router-dom";
|
||||
|
||||
const articleData = {
|
||||
id: "automation-reshaping-business",
|
||||
@@ -305,9 +305,11 @@ export const AutomationReshapingBusiness = () => {
|
||||
}
|
||||
};
|
||||
|
||||
const navigate = useNavigate();
|
||||
|
||||
return (
|
||||
<div className="dark min-h-screen bg-background">
|
||||
<Navigation />
|
||||
{/* <Navigation /> */}
|
||||
|
||||
{/* Hero Section */}
|
||||
<section className="pt-24 pb-16 bg-background">
|
||||
@@ -315,11 +317,11 @@ export const AutomationReshapingBusiness = () => {
|
||||
<div className="max-w-4xl mx-auto">
|
||||
{/* Breadcrumb */}
|
||||
<div className="flex items-center gap-2 text-sm text-muted-foreground mb-8">
|
||||
<button onClick={() => navigateTo('/')} className="hover:text-white transition-colors">
|
||||
<button onClick={() => navigate('/')} className="hover:text-white transition-colors">
|
||||
Home
|
||||
</button>
|
||||
<span>/</span>
|
||||
<button onClick={() => navigateTo('/resources/blog')} className="hover:text-white transition-colors">
|
||||
<button onClick={() => navigate('/resources/blog')} className="hover:text-white transition-colors">
|
||||
Blog
|
||||
</button>
|
||||
<span>/</span>
|
||||
@@ -486,7 +488,7 @@ export const AutomationReshapingBusiness = () => {
|
||||
<div
|
||||
key={article.id}
|
||||
className="group cursor-pointer"
|
||||
onClick={() => navigateTo(`/articles/${article.id}`)}
|
||||
onClick={() => navigate(`/articles/${article.id}`)}
|
||||
>
|
||||
<div className="aspect-[16/10] overflow-hidden rounded-lg mb-3">
|
||||
<ImageWithFallback
|
||||
@@ -512,7 +514,7 @@ export const AutomationReshapingBusiness = () => {
|
||||
<Button
|
||||
variant="outline"
|
||||
className="w-full border-white/20 text-white hover:bg-white/10"
|
||||
onClick={() => navigateTo('/resources/blog')}
|
||||
onClick={() => navigate('/resources/blog')}
|
||||
>
|
||||
View All Articles
|
||||
<ArrowRight className="w-4 h-4 ml-2" />
|
||||
@@ -530,7 +532,7 @@ export const AutomationReshapingBusiness = () => {
|
||||
</p>
|
||||
<Button
|
||||
className="w-full bg-[#E5195E] hover:bg-[#E5195E]/90 text-white"
|
||||
onClick={() => navigateTo('/contact')}
|
||||
onClick={() => navigate('/contact')}
|
||||
>
|
||||
Get In Touch
|
||||
</Button>
|
||||
@@ -557,7 +559,7 @@ export const AutomationReshapingBusiness = () => {
|
||||
<Button
|
||||
size="lg"
|
||||
className="bg-[#E5195E] hover:bg-[#E5195E]/90 text-white"
|
||||
onClick={() => navigateTo('/contact')}
|
||||
onClick={() => navigate('/contact')}
|
||||
>
|
||||
Start Your Automation Journey
|
||||
<ArrowRight className="ml-2 w-4 h-4" />
|
||||
@@ -566,7 +568,7 @@ export const AutomationReshapingBusiness = () => {
|
||||
size="lg"
|
||||
variant="outline"
|
||||
className="border-white/20 text-white hover:bg-white/10"
|
||||
onClick={() => navigateTo('/resources/blog')}
|
||||
onClick={() => navigate('/resources/blog')}
|
||||
>
|
||||
Read More Articles
|
||||
</Button>
|
||||
@@ -576,7 +578,7 @@ export const AutomationReshapingBusiness = () => {
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<Footer />
|
||||
{/* <Footer /> */}
|
||||
</div>
|
||||
);
|
||||
};
|
||||
@@ -110,7 +110,7 @@ export const AwardsCertifications = () => {
|
||||
|
||||
return (
|
||||
<div className="dark min-h-screen bg-background">
|
||||
<Navigation />
|
||||
{/* <Navigation /> */}
|
||||
|
||||
{/* Hero Section */}
|
||||
<section className="relative pt-24 pb-16 overflow-hidden">
|
||||
@@ -285,7 +285,7 @@ export const AwardsCertifications = () => {
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<Footer />
|
||||
{/* <Footer /> */}
|
||||
</div>
|
||||
);
|
||||
};
|
||||
@@ -20,8 +20,8 @@ import {
|
||||
ArrowRight,
|
||||
BookOpen,
|
||||
} from "lucide-react";
|
||||
import { navigateTo } from "../App";
|
||||
import { Helmet } from "react-helmet-async";
|
||||
import { useNavigate } from "react-router-dom";
|
||||
|
||||
export const Blog = () => {
|
||||
const [searchTerm, setSearchTerm] = useState("");
|
||||
@@ -175,20 +175,21 @@ export const Blog = () => {
|
||||
|
||||
return matchesSearch && matchesCategory && matchesTag;
|
||||
});
|
||||
const navigate = useNavigate();
|
||||
|
||||
const handlePostClick = (post: any) => {
|
||||
if (typeof post.id === "string") {
|
||||
// Navigate to dedicated article page
|
||||
navigateTo(`/articles/${post.id}`);
|
||||
navigate(`/articles/${post.id}`);
|
||||
} else {
|
||||
// For placeholder posts, navigate to generic article detail
|
||||
navigateTo("/articles/generic-article");
|
||||
navigate("/articles/generic-article");
|
||||
}
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="dark min-h-screen bg-background">
|
||||
<Navigation />
|
||||
{/* <Navigation /> */}
|
||||
|
||||
{/* Hero Section */}
|
||||
<section className="pt-24 pb-16 bg-background">
|
||||
@@ -529,7 +530,7 @@ export const Blog = () => {
|
||||
<Button
|
||||
size="lg"
|
||||
className="bg-[#E5195E] hover:bg-[#E5195E]/90 text-white"
|
||||
onClick={() => navigateTo("/resources/blog")}
|
||||
onClick={() => navigate("/resources/blog")}
|
||||
>
|
||||
Explore All Articles
|
||||
<ArrowRight className="ml-2 w-4 h-4" />
|
||||
@@ -538,8 +539,8 @@ export const Blog = () => {
|
||||
size="lg"
|
||||
variant="outline"
|
||||
className="border-white/20 text-white hover:bg-white/10"
|
||||
// onClick={() => navigateTo('/contact')}
|
||||
onClick={() => navigateTo("/start-a-project")}
|
||||
// onClick={() => navigate('/contact')}
|
||||
onClick={() => navigate("/start-a-project")}
|
||||
>
|
||||
Contact Our Experts
|
||||
</Button>
|
||||
@@ -548,7 +549,7 @@ export const Blog = () => {
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<Footer />
|
||||
{/* <Footer /> */}
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
@@ -7,8 +7,8 @@ import { Card, CardContent } from "../components/ui/card";
|
||||
import { Avatar, AvatarFallback, AvatarImage } from "../components/ui/avatar";
|
||||
import { Separator } from "../components/ui/separator";
|
||||
import { Calendar, Clock, User, ArrowRight, Share2, Linkedin, Twitter, ExternalLink, Tag } from "lucide-react";
|
||||
import { navigateTo } from "../App";
|
||||
import { ImageWithFallback } from "../components/figma/ImageWithFallback";
|
||||
import { useNavigate } from "react-router-dom";
|
||||
|
||||
const articleData = {
|
||||
id: "building-your-api-stack",
|
||||
@@ -208,9 +208,11 @@ export const BuildingYourAPIStack = () => {
|
||||
}
|
||||
};
|
||||
|
||||
const navigate = useNavigate();
|
||||
|
||||
return (
|
||||
<div className="dark min-h-screen bg-background">
|
||||
<Navigation />
|
||||
{/* <Navigation /> */}
|
||||
|
||||
{/* Hero Section */}
|
||||
<section className="pt-24 pb-16 bg-background">
|
||||
@@ -218,11 +220,11 @@ export const BuildingYourAPIStack = () => {
|
||||
<div className="max-w-4xl mx-auto">
|
||||
{/* Breadcrumb */}
|
||||
<div className="flex items-center gap-2 text-sm text-muted-foreground mb-8">
|
||||
<button onClick={() => navigateTo('/')} className="hover:text-white transition-colors">
|
||||
<button onClick={() => navigate('/')} className="hover:text-white transition-colors">
|
||||
Home
|
||||
</button>
|
||||
<span>/</span>
|
||||
<button onClick={() => navigateTo('/resources/blog')} className="hover:text-white transition-colors">
|
||||
<button onClick={() => navigate('/resources/blog')} className="hover:text-white transition-colors">
|
||||
Insights
|
||||
</button>
|
||||
<span>/</span>
|
||||
@@ -389,7 +391,7 @@ export const BuildingYourAPIStack = () => {
|
||||
<div
|
||||
key={article.id}
|
||||
className="group cursor-pointer"
|
||||
onClick={() => navigateTo(`/insights/${article.id}`)}
|
||||
onClick={() => navigate(`/insights/${article.id}`)}
|
||||
>
|
||||
<div className="aspect-[16/10] overflow-hidden rounded-lg mb-3">
|
||||
<ImageWithFallback
|
||||
@@ -415,7 +417,7 @@ export const BuildingYourAPIStack = () => {
|
||||
<Button
|
||||
variant="outline"
|
||||
className="w-full border-white/20 text-white hover:bg-white/10"
|
||||
onClick={() => navigateTo('/resources/blog')}
|
||||
onClick={() => navigate('/resources/blog')}
|
||||
>
|
||||
View All Insights
|
||||
<ArrowRight className="w-4 h-4 ml-2" />
|
||||
@@ -433,7 +435,7 @@ export const BuildingYourAPIStack = () => {
|
||||
</p>
|
||||
<Button
|
||||
className="w-full bg-[#E5195E] hover:bg-[#E5195E]/90 text-white"
|
||||
onClick={() => navigateTo('/contact')}
|
||||
onClick={() => navigate('/contact')}
|
||||
>
|
||||
Get In Touch
|
||||
</Button>
|
||||
@@ -460,7 +462,7 @@ export const BuildingYourAPIStack = () => {
|
||||
<Button
|
||||
size="lg"
|
||||
className="bg-[#E5195E] hover:bg-[#E5195E]/90 text-white"
|
||||
onClick={() => navigateTo('/contact')}
|
||||
onClick={() => navigate('/contact')}
|
||||
>
|
||||
Start Your Project
|
||||
<ArrowRight className="ml-2 w-4 h-4" />
|
||||
@@ -469,7 +471,7 @@ export const BuildingYourAPIStack = () => {
|
||||
size="lg"
|
||||
variant="outline"
|
||||
className="border-white/20 text-white hover:bg-white/10"
|
||||
onClick={() => navigateTo('/resources/blog')}
|
||||
onClick={() => navigate('/resources/blog')}
|
||||
>
|
||||
Read More Insights
|
||||
</Button>
|
||||
@@ -479,7 +481,7 @@ export const BuildingYourAPIStack = () => {
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<Footer />
|
||||
{/* <Footer /> */}
|
||||
</div>
|
||||
);
|
||||
};
|
||||
@@ -41,11 +41,12 @@ import { Badge } from "../components/ui/badge";
|
||||
import { Button } from "../components/ui/button";
|
||||
import { Card, CardContent } from "../components/ui/card";
|
||||
import { ShimmerButton } from "../components/ui/shimmer-button";
|
||||
import { navigateTo } from "@/App";
|
||||
import { useNavigate } from "react-router-dom";
|
||||
import { Helmet } from "react-helmet-async";
|
||||
|
||||
// Business Process Automation Hero Section
|
||||
const BusinessProcessAutomationHero = () => {
|
||||
const navigate = useNavigate();
|
||||
return (
|
||||
<section className="relative py-20 overflow-hidden bg-black">
|
||||
<Helmet>
|
||||
@@ -136,7 +137,7 @@ const BusinessProcessAutomationHero = () => {
|
||||
>
|
||||
<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">
|
||||
<MessageSquare className="w-5 h-5 flex-shrink-0" />
|
||||
@@ -1288,6 +1289,7 @@ const BusinessProcessAutomationCaseStudies = () => {
|
||||
|
||||
// Mid-Page Lead Capture CTA
|
||||
const BusinessProcessAutomationInlineCTA = () => {
|
||||
const navigate = useNavigate();
|
||||
return (
|
||||
<section className="py-20">
|
||||
<div className="container mx-auto px-6 lg:px-8">
|
||||
@@ -1326,7 +1328,7 @@ const BusinessProcessAutomationInlineCTA = () => {
|
||||
|
||||
<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">
|
||||
<Search className="w-6 h-6 flex-shrink-0" />
|
||||
@@ -1413,6 +1415,7 @@ const BusinessProcessAutomationFAQs = () => {
|
||||
|
||||
// Final CTA Section
|
||||
const BusinessProcessAutomationFinalCTA = () => {
|
||||
const navigate = useNavigate();
|
||||
return (
|
||||
<section className="py-20 relative overflow-hidden">
|
||||
<div className="container mx-auto px-6 lg:px-8 relative z-10">
|
||||
@@ -1466,7 +1469,7 @@ const BusinessProcessAutomationFinalCTA = () => {
|
||||
>
|
||||
<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">
|
||||
<Calendar className="w-6 h-6 flex-shrink-0" />
|
||||
@@ -1496,7 +1499,7 @@ const BusinessProcessAutomationFinalCTA = () => {
|
||||
export const BusinessProcessAutomation = () => {
|
||||
return (
|
||||
<div className="dark min-h-screen">
|
||||
<Navigation />
|
||||
{/* <Navigation /> */}
|
||||
|
||||
{/* Hero Section */}
|
||||
<section className="bg-black">
|
||||
@@ -1550,7 +1553,7 @@ export const BusinessProcessAutomation = () => {
|
||||
|
||||
{/* Footer */}
|
||||
<section className="bg-card">
|
||||
<Footer />
|
||||
{/* <Footer /> */}
|
||||
</section>
|
||||
</div>
|
||||
);
|
||||
|
||||
@@ -166,7 +166,7 @@ Best regards,
|
||||
`}
|
||||
</script>
|
||||
</Helmet>
|
||||
<Navigation />
|
||||
{/* <Navigation /> */}
|
||||
|
||||
{/* Hero Section */}
|
||||
<section className="relative pt-24 pb-20 overflow-hidden bg-black">
|
||||
@@ -373,7 +373,7 @@ Best regards,
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<Footer />
|
||||
{/* <Footer /> */}
|
||||
</div>
|
||||
);
|
||||
};
|
||||
@@ -22,7 +22,6 @@ import {
|
||||
} from "lucide-react";
|
||||
import { useState } from "react";
|
||||
import { Helmet } from "react-helmet-async";
|
||||
import { navigateTo } from "../App";
|
||||
import { ImageWithFallback } from "../components/figma/ImageWithFallback";
|
||||
import { Footer } from "../components/Footer";
|
||||
import { Navigation } from "../components/Navigation";
|
||||
@@ -46,6 +45,7 @@ import simplitendCase from "../src/images/simplitendCase.webp";
|
||||
import amozCase from "../src/images/amozCase.webp";
|
||||
import farmCase from "../src/images/farmCase.webp";
|
||||
import leanCase from "../src/images/leanCase.webp";
|
||||
import { useNavigate } from "react-router-dom";
|
||||
|
||||
|
||||
const caseStudies = [
|
||||
@@ -231,9 +231,11 @@ export const CaseStudies = () => {
|
||||
return matchesSearch && matchesIndustry && matchesCategory && matchesFeatured;
|
||||
});
|
||||
|
||||
const navigate = useNavigate();
|
||||
|
||||
return (
|
||||
<div className="dark min-h-screen bg-background">
|
||||
<Navigation />
|
||||
{/* <Navigation /> */}
|
||||
|
||||
{/* Hero Section */}
|
||||
<section className="relative pt-24 pb-20 overflow-hidden bg-black">
|
||||
@@ -393,12 +395,12 @@ export const CaseStudies = () => {
|
||||
viewport={{ once: true }}
|
||||
whileHover={{ y: -8, scale: 1.02 }}
|
||||
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"
|
||||
onClick={(e) => {
|
||||
e.stopPropagation();
|
||||
navigateTo(study.link);
|
||||
navigate(study.link);
|
||||
}}
|
||||
>
|
||||
<CardContent className="CardContentOverride p-0 pb-0 h-full">
|
||||
@@ -465,7 +467,7 @@ export const CaseStudies = () => {
|
||||
<Button
|
||||
size="lg"
|
||||
className="bg-accent hover:bg-accent/90 text-white"
|
||||
onClick={() => navigateTo("/start-a-project")}
|
||||
onClick={() => navigate("/start-a-project")}
|
||||
>
|
||||
Start Your Project
|
||||
<ArrowUpRight className="w-4 h-4 ml-2" />
|
||||
@@ -473,7 +475,7 @@ export const CaseStudies = () => {
|
||||
<Button
|
||||
size="lg"
|
||||
variant="outline"
|
||||
onClick={() => navigateTo("/contact-us")}
|
||||
onClick={() => navigate("/contact-us")}
|
||||
>
|
||||
Schedule Consultation
|
||||
<ArrowRight className="w-4 h-4 ml-2" />
|
||||
@@ -483,7 +485,7 @@ export const CaseStudies = () => {
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<Footer />
|
||||
{/* <Footer /> */}
|
||||
</div>
|
||||
);
|
||||
};
|
||||
@@ -26,12 +26,12 @@ import {
|
||||
Database,
|
||||
Zap
|
||||
} from 'lucide-react';
|
||||
import { navigateTo } from '../App';
|
||||
import { Navigation } from '@/components/Navigation';
|
||||
import { Badge } from '@/components/ui/badge';
|
||||
import { Card, CardContent } from '@/components/ui/card';
|
||||
import { Button } from '@/components/ui/button';
|
||||
import { Footer } from '@/components/Footer';
|
||||
import { useNavigate } from 'react-router-dom';
|
||||
|
||||
interface CaseStudyComingSoonProps {
|
||||
projectTitle?: string;
|
||||
@@ -78,11 +78,13 @@ export const CaseStudyComingSoon: React.FC<CaseStudyComingSoonProps> = ({
|
||||
return icons[industry as keyof typeof icons] || Building2;
|
||||
};
|
||||
|
||||
const navigate = useNavigate();
|
||||
|
||||
const IconComponent = getIndustryIcon(industry);
|
||||
|
||||
return (
|
||||
<div className="dark min-h-screen bg-background">
|
||||
<Navigation />
|
||||
{/* <Navigation /> */}
|
||||
|
||||
{/* Hero Section */}
|
||||
<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.
|
||||
</p>
|
||||
<Button
|
||||
onClick={() => navigateTo('/contact-us')}
|
||||
onClick={() => navigate('/contact-us')}
|
||||
className="bg-[#E5195E] hover:bg-[#E5195E]/90 text-white border-none font-manrope"
|
||||
>
|
||||
Notify Me
|
||||
@@ -325,7 +327,7 @@ export const CaseStudyComingSoon: React.FC<CaseStudyComingSoonProps> = ({
|
||||
<Button
|
||||
size="lg"
|
||||
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
|
||||
<ArrowRight className="w-5 h-5 ml-2" />
|
||||
@@ -334,7 +336,7 @@ export const CaseStudyComingSoon: React.FC<CaseStudyComingSoonProps> = ({
|
||||
size="lg"
|
||||
variant="outline"
|
||||
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
|
||||
</Button>
|
||||
@@ -343,7 +345,7 @@ export const CaseStudyComingSoon: React.FC<CaseStudyComingSoonProps> = ({
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<Footer />
|
||||
{/* <Footer /> */}
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
@@ -42,11 +42,12 @@ import { Badge } from "../components/ui/badge";
|
||||
import { Button } from "../components/ui/button";
|
||||
import { Card, CardContent } from "../components/ui/card";
|
||||
import { ShimmerButton } from "../components/ui/shimmer-button";
|
||||
import { navigateTo } from "@/App";
|
||||
import { useNavigate } from "react-router-dom";
|
||||
import { Helmet } from "react-helmet-async";
|
||||
|
||||
// Clickable Prototypes Hero Section
|
||||
const PrototypesHeroWithCTA = () => {
|
||||
const navigate = useNavigate();
|
||||
return (
|
||||
<section className="relative py-20 overflow-hidden bg-black">
|
||||
<Helmet>
|
||||
@@ -136,7 +137,7 @@ const PrototypesHeroWithCTA = () => {
|
||||
>
|
||||
<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">
|
||||
<PlayCircle className="w-5 h-5 flex-shrink-0" />
|
||||
@@ -1031,6 +1032,7 @@ const PrototypingCaseStudies = () => {
|
||||
|
||||
// Mid-Page CTA
|
||||
const PrototypingInlineCTA = () => {
|
||||
const navigate = useNavigate();
|
||||
return (
|
||||
<section className="py-20">
|
||||
<div className="container mx-auto px-6 lg:px-8">
|
||||
@@ -1069,7 +1071,7 @@ const PrototypingInlineCTA = () => {
|
||||
|
||||
<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">
|
||||
<MessageCircle className="w-6 h-6 flex-shrink-0" />
|
||||
@@ -1085,6 +1087,7 @@ const PrototypingInlineCTA = () => {
|
||||
|
||||
// Hire UI/UX Designers for Prototypes
|
||||
const HirePrototypeDesigners = () => {
|
||||
const navigate = useNavigate();
|
||||
const designerTypes = [
|
||||
{
|
||||
title: "Prototype Specialists",
|
||||
@@ -1235,7 +1238,7 @@ const HirePrototypeDesigners = () => {
|
||||
>
|
||||
<div className="flex flex-col sm:flex-row gap-4 justify-center">
|
||||
<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">
|
||||
<Users className="w-5 h-5 flex-shrink-0" />
|
||||
@@ -1333,6 +1336,7 @@ const PrototypingFAQs = () => {
|
||||
|
||||
// Final CTA Section
|
||||
const PrototypingFinalCTA = () => {
|
||||
const navigate = useNavigate();
|
||||
return (
|
||||
<section className="py-20 relative overflow-hidden">
|
||||
<div className="container mx-auto px-6 lg:px-8 relative z-10">
|
||||
@@ -1385,7 +1389,7 @@ const PrototypingFinalCTA = () => {
|
||||
>
|
||||
<ShimmerButton
|
||||
className="px-12 py-6 text-xl rounded-2xl shadow-2xl hover:shadow-accent/25"
|
||||
onClick={() => navigateTo("/start-a-project")}
|
||||
onClick={() => navigate("/start-a-project")}
|
||||
>
|
||||
<div className="inline-flex items-center gap-3">
|
||||
<Rocket className="w-6 h-6 flex-shrink-0" />
|
||||
@@ -1414,7 +1418,7 @@ const PrototypingFinalCTA = () => {
|
||||
export const ClickablePrototypes = () => {
|
||||
return (
|
||||
<div className="dark min-h-screen">
|
||||
<Navigation />
|
||||
{/* <Navigation /> */}
|
||||
|
||||
{/* Hero Section */}
|
||||
<section className="bg-black">
|
||||
@@ -1426,6 +1430,11 @@ export const ClickablePrototypes = () => {
|
||||
<PrototypeBenefits />
|
||||
</section>
|
||||
|
||||
{/* Case Studies */}
|
||||
<section className="bg-background">
|
||||
<PrototypingCaseStudies />
|
||||
</section>
|
||||
|
||||
{/* Prototyping Process */}
|
||||
<section className="bg-card">
|
||||
<PrototypingProcess />
|
||||
@@ -1441,15 +1450,10 @@ export const ClickablePrototypes = () => {
|
||||
<PrototypingTools />
|
||||
</section>
|
||||
|
||||
{/* Case Studies */}
|
||||
<section className="bg-background">
|
||||
<PrototypingCaseStudies />
|
||||
</section>
|
||||
|
||||
{/* Mid-Page CTA */}
|
||||
<section className="bg-card">
|
||||
{/* <section className="bg-card">
|
||||
<PrototypingInlineCTA />
|
||||
</section>
|
||||
</section> */}
|
||||
|
||||
{/* Hire Designers */}
|
||||
<section className="bg-background">
|
||||
@@ -1457,9 +1461,9 @@ export const ClickablePrototypes = () => {
|
||||
</section>
|
||||
|
||||
{/* FAQs */}
|
||||
<section className="bg-card">
|
||||
{/* <section className="bg-card">
|
||||
<PrototypingFAQs />
|
||||
</section>
|
||||
</section> */}
|
||||
|
||||
{/* Final CTA */}
|
||||
<section className="bg-background">
|
||||
@@ -1467,8 +1471,8 @@ export const ClickablePrototypes = () => {
|
||||
</section>
|
||||
|
||||
{/* Footer */}
|
||||
<section className="bg-card">
|
||||
<Footer />
|
||||
<section className="bg-background">
|
||||
{/* <Footer /> */}
|
||||
</section>
|
||||
</div>
|
||||
);
|
||||
|
||||
@@ -240,7 +240,7 @@ export const ClientSupport = () => {
|
||||
|
||||
return (
|
||||
<div className="dark min-h-screen bg-background">
|
||||
<Navigation />
|
||||
{/* <Navigation /> */}
|
||||
|
||||
{/* Hero Section */}
|
||||
<section className="pt-24 pb-16 bg-background">
|
||||
@@ -776,7 +776,7 @@ export const ClientSupport = () => {
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<Footer />
|
||||
{/* <Footer /> */}
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
@@ -23,8 +23,8 @@ import {
|
||||
Users,
|
||||
Award,
|
||||
} from "lucide-react";
|
||||
import { navigateTo } from "../App";
|
||||
import { Helmet } from "react-helmet-async";
|
||||
import { useNavigate } from "react-router-dom";
|
||||
|
||||
export const ClientTestimonials = () => {
|
||||
const [selectedIndustry, setSelectedIndustry] = useState("all");
|
||||
@@ -387,9 +387,11 @@ export const ClientTestimonials = () => {
|
||||
return icons[industry as keyof typeof icons] || Building2;
|
||||
};
|
||||
|
||||
const navigate = useNavigate();
|
||||
|
||||
return (
|
||||
<div className="dark min-h-screen bg-background">
|
||||
<Navigation />
|
||||
{/* <Navigation /> */}
|
||||
|
||||
{/* Hero Section */}
|
||||
<section className="pt-24 pb-16 bg-background">
|
||||
@@ -735,7 +737,7 @@ export const ClientTestimonials = () => {
|
||||
<Button
|
||||
size="lg"
|
||||
className="bg-[#E5195E] hover:bg-[#E5195E]/90 text-white"
|
||||
onClick={() => navigateTo("/start-a-project")}
|
||||
onClick={() => navigate("/start-a-project")}
|
||||
>
|
||||
Become Our Next Success Story
|
||||
<ArrowRight className="ml-2 w-4 h-4" />
|
||||
@@ -752,7 +754,7 @@ export const ClientTestimonials = () => {
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<Footer />
|
||||
{/* <Footer /> */}
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
@@ -10,7 +10,6 @@ import { Badge } from "../components/ui/badge";
|
||||
import { Card, CardContent } from "../components/ui/card";
|
||||
import { Accordion, AccordionContent, AccordionItem, AccordionTrigger } from "../components/ui/accordion";
|
||||
import { GridPattern } from "../components/GridPattern";
|
||||
import { navigateTo } from "../App";
|
||||
import {
|
||||
Users, Heart, Shield, Target, Lightbulb, Award, TrendingUp, Clock,
|
||||
Newspaper, ArrowRight, Building, Globe, CheckCircle, Coffee,
|
||||
@@ -18,9 +17,11 @@ import {
|
||||
ChevronRight
|
||||
} from "lucide-react";
|
||||
import { Helmet } from "react-helmet-async";
|
||||
import { useNavigate } from "react-router-dom";
|
||||
|
||||
// Enhanced Hero Section
|
||||
const HeroWithCTA = () => {
|
||||
const navigate = useNavigate();
|
||||
return (
|
||||
<section className="relative py-20 overflow-hidden bg-black">
|
||||
<Helmet>
|
||||
@@ -107,7 +108,7 @@ const HeroWithCTA = () => {
|
||||
transition={{ duration: 0.8, delay: 0.3 }}
|
||||
className="flex flex-col sm:flex-row gap-4"
|
||||
>
|
||||
<ShimmerButton className="text-lg px-8 py-4" onClick={() => navigateTo('/company/our-history')}>
|
||||
<ShimmerButton className="text-lg px-8 py-4" onClick={() => navigate('/company/our-history')}>
|
||||
<div className="inline-flex items-center gap-2">
|
||||
<Clock className="w-4 h-4 flex-shrink-0" />
|
||||
<span>Our Story</span>
|
||||
@@ -117,7 +118,7 @@ const HeroWithCTA = () => {
|
||||
variant="secondary"
|
||||
size="lg"
|
||||
className="text-lg px-8 py-4"
|
||||
onClick={() => navigateTo('/company/leadership-team')}
|
||||
onClick={() => navigate('/company/leadership-team')}
|
||||
>
|
||||
<Users className="w-4 h-4 flex-shrink-0" />
|
||||
<span>Meet Our Leaders</span>
|
||||
@@ -481,6 +482,7 @@ const SideBySideContentWithIcons = () => {
|
||||
|
||||
// Company Sections Grid - Updated to remove About WDI card
|
||||
const TabbedServiceDisplay = () => {
|
||||
const navigate = useNavigate();
|
||||
const sections = [
|
||||
{
|
||||
title: "Our History",
|
||||
@@ -556,7 +558,7 @@ const TabbedServiceDisplay = () => {
|
||||
viewport={{ once: true }}
|
||||
whileHover={{ y: -5 }}
|
||||
className="group cursor-pointer"
|
||||
onClick={() => navigateTo(section.link)}
|
||||
onClick={() => navigate(section.link)}
|
||||
>
|
||||
<div className="bg-gray-900/50 backdrop-blur-sm rounded-2xl border border-gray-800 p-8 hover:border-accent/30 transition-all duration-300 shadow-lg hover:shadow-xl h-full">
|
||||
<div className="flex flex-col items-start space-y-6">
|
||||
@@ -590,6 +592,7 @@ const TabbedServiceDisplay = () => {
|
||||
|
||||
// Updated CTA Section with new design
|
||||
const InlineCTA = () => {
|
||||
const navigate = useNavigate();
|
||||
return (
|
||||
<section className="py-20 bg-background">
|
||||
<div className="container mx-auto px-6 lg:px-8">
|
||||
@@ -633,7 +636,7 @@ const InlineCTA = () => {
|
||||
<div className="flex flex-col items-start gap-4">
|
||||
<ShimmerButton
|
||||
className="text-xl px-10 py-5 rounded-2xl shadow-lg hover:shadow-xl bg-[#E5195E] hover:bg-[#E5195E]/90"
|
||||
onClick={() => navigateTo('/company/careers')}
|
||||
onClick={() => navigate('/company/careers')}
|
||||
>
|
||||
<div className="inline-flex items-center gap-3">
|
||||
<Briefcase className="w-6 h-6 flex-shrink-0" />
|
||||
@@ -655,6 +658,7 @@ const InlineCTA = () => {
|
||||
|
||||
// Press and Recognition Section
|
||||
const PressRecognitionSection = () => {
|
||||
const navigate = useNavigate();
|
||||
const press = [
|
||||
{
|
||||
title: "Innovation Leader 2024",
|
||||
@@ -759,7 +763,7 @@ const PressRecognitionSection = () => {
|
||||
<div className="p-8 pt-0 mt-auto space-y-3">
|
||||
<ShimmerButton
|
||||
className="w-full py-3 text-sm rounded-xl shadow-lg hover:shadow-xl"
|
||||
onClick={() => navigateTo(item.link)}
|
||||
onClick={() => navigate(item.link)}
|
||||
>
|
||||
<div className="inline-flex items-center justify-center gap-2">
|
||||
<Eye className="w-4 h-4 flex-shrink-0" />
|
||||
@@ -846,7 +850,7 @@ const FAQSection = () => {
|
||||
export function Company() {
|
||||
return (
|
||||
<div className="dark min-h-screen bg-background">
|
||||
<Navigation />
|
||||
{/* <Navigation /> */}
|
||||
<HeroWithCTA />
|
||||
<AboutWDISection />
|
||||
<HorizontalTagScroller />
|
||||
@@ -855,7 +859,7 @@ export function Company() {
|
||||
<InlineCTA />
|
||||
<PressRecognitionSection />
|
||||
<FAQSection />
|
||||
<Footer />
|
||||
{/* <Footer /> */}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -7,8 +7,8 @@ import { Card, CardContent } from "../components/ui/card";
|
||||
import { Avatar, AvatarFallback, AvatarImage } from "../components/ui/avatar";
|
||||
import { Separator } from "../components/ui/separator";
|
||||
import { Calendar, Clock, User, ArrowRight, Share2, Linkedin, Twitter, ExternalLink, Tag } from "lucide-react";
|
||||
import { navigateTo } from "../App";
|
||||
import { ImageWithFallback } from "../components/figma/ImageWithFallback";
|
||||
import { useNavigate } from "react-router-dom";
|
||||
|
||||
const articleData = {
|
||||
id: "compliance-ready-systems-fintech",
|
||||
@@ -240,10 +240,10 @@ export const ComplianceReadyFintech = () => {
|
||||
window.open(shareUrl, '_blank', 'width=600,height=400');
|
||||
}
|
||||
};
|
||||
|
||||
const navigate = useNavigate();
|
||||
return (
|
||||
<div className="dark min-h-screen bg-background">
|
||||
<Navigation />
|
||||
{/* <Navigation /> */}
|
||||
|
||||
{/* Hero Section */}
|
||||
<section className="pt-24 pb-16 bg-background">
|
||||
@@ -251,11 +251,11 @@ export const ComplianceReadyFintech = () => {
|
||||
<div className="max-w-4xl mx-auto">
|
||||
{/* Breadcrumb */}
|
||||
<div className="flex items-center gap-2 text-sm text-muted-foreground mb-8">
|
||||
<button onClick={() => navigateTo('/')} className="hover:text-white transition-colors">
|
||||
<button onClick={() => navigate('/')} className="hover:text-white transition-colors">
|
||||
Home
|
||||
</button>
|
||||
<span>/</span>
|
||||
<button onClick={() => navigateTo('/resources/blog')} className="hover:text-white transition-colors">
|
||||
<button onClick={() => navigate('/resources/blog')} className="hover:text-white transition-colors">
|
||||
Blog
|
||||
</button>
|
||||
<span>/</span>
|
||||
@@ -422,7 +422,7 @@ export const ComplianceReadyFintech = () => {
|
||||
<div
|
||||
key={article.id}
|
||||
className="group cursor-pointer"
|
||||
onClick={() => navigateTo(`/articles/${article.id}`)}
|
||||
onClick={() => navigate(`/articles/${article.id}`)}
|
||||
>
|
||||
<div className="aspect-[16/10] overflow-hidden rounded-lg mb-3">
|
||||
<ImageWithFallback
|
||||
@@ -448,7 +448,7 @@ export const ComplianceReadyFintech = () => {
|
||||
<Button
|
||||
variant="outline"
|
||||
className="w-full border-white/20 text-white hover:bg-white/10"
|
||||
onClick={() => navigateTo('/resources/blog')}
|
||||
onClick={() => navigate('/resources/blog')}
|
||||
>
|
||||
View All Articles
|
||||
<ArrowRight className="w-4 h-4 ml-2" />
|
||||
@@ -466,7 +466,7 @@ export const ComplianceReadyFintech = () => {
|
||||
</p>
|
||||
<Button
|
||||
className="w-full bg-[#E5195E] hover:bg-[#E5195E]/90 text-white"
|
||||
onClick={() => navigateTo('/contact')}
|
||||
onClick={() => navigate('/contact')}
|
||||
>
|
||||
Get In Touch
|
||||
</Button>
|
||||
@@ -493,7 +493,7 @@ export const ComplianceReadyFintech = () => {
|
||||
<Button
|
||||
size="lg"
|
||||
className="bg-[#E5195E] hover:bg-[#E5195E]/90 text-white"
|
||||
onClick={() => navigateTo('/contact')}
|
||||
onClick={() => navigate('/contact')}
|
||||
>
|
||||
Start Your Fintech Project
|
||||
<ArrowRight className="ml-2 w-4 h-4" />
|
||||
@@ -502,7 +502,7 @@ export const ComplianceReadyFintech = () => {
|
||||
size="lg"
|
||||
variant="outline"
|
||||
className="border-white/20 text-white hover:bg-white/10"
|
||||
onClick={() => navigateTo('/resources/blog')}
|
||||
onClick={() => navigate('/resources/blog')}
|
||||
>
|
||||
Read More Articles
|
||||
</Button>
|
||||
@@ -512,7 +512,7 @@ export const ComplianceReadyFintech = () => {
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<Footer />
|
||||
{/* <Footer /> */}
|
||||
</div>
|
||||
);
|
||||
};
|
||||
@@ -39,11 +39,12 @@ import { Badge } from "../components/ui/badge";
|
||||
import { Button } from "../components/ui/button";
|
||||
import { Card, CardContent } from "../components/ui/card";
|
||||
import { ShimmerButton } from "../components/ui/shimmer-button";
|
||||
import { navigateTo } from "@/App";
|
||||
import { useNavigate } from "react-router-dom";
|
||||
import { Helmet } from "react-helmet-async";
|
||||
|
||||
// Compliance-Ready Systems Hero Section
|
||||
const ComplianceReadySystemsHero = () => {
|
||||
const navigate = useNavigate();
|
||||
return (
|
||||
<section className="relative py-20 overflow-hidden bg-black">
|
||||
<Helmet>
|
||||
@@ -135,7 +136,7 @@ const ComplianceReadySystemsHero = () => {
|
||||
>
|
||||
<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">
|
||||
<MessageSquare className="w-5 h-5 flex-shrink-0" />
|
||||
@@ -1275,6 +1276,7 @@ const ComplianceReadySystemsCaseStudies = () => {
|
||||
|
||||
// Mid-Page Lead Capture CTA
|
||||
const ComplianceReadySystemsInlineCTA = () => {
|
||||
const navigate = useNavigate();
|
||||
return (
|
||||
<section className="py-20">
|
||||
<div className="container mx-auto px-6 lg:px-8">
|
||||
@@ -1312,7 +1314,7 @@ const ComplianceReadySystemsInlineCTA = () => {
|
||||
|
||||
<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">
|
||||
<Search className="w-6 h-6 flex-shrink-0" />
|
||||
@@ -1405,6 +1407,7 @@ const ComplianceReadySystemsFAQs = () => {
|
||||
|
||||
// Final CTA Section
|
||||
const ComplianceReadySystemsFinalCTA = () => {
|
||||
const navigate = useNavigate();
|
||||
return (
|
||||
<section className="py-20 relative overflow-hidden">
|
||||
<div className="container mx-auto px-6 lg:px-8 relative z-10">
|
||||
@@ -1458,7 +1461,7 @@ const ComplianceReadySystemsFinalCTA = () => {
|
||||
>
|
||||
<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">
|
||||
<Calendar className="w-6 h-6 flex-shrink-0" />
|
||||
@@ -1488,7 +1491,7 @@ const ComplianceReadySystemsFinalCTA = () => {
|
||||
export const ComplianceReadySystems = () => {
|
||||
return (
|
||||
<div className="dark min-h-screen">
|
||||
<Navigation />
|
||||
{/* <Navigation /> */}
|
||||
|
||||
{/* Hero Section */}
|
||||
<section className="bg-black">
|
||||
@@ -1542,7 +1545,7 @@ export const ComplianceReadySystems = () => {
|
||||
|
||||
{/* Footer */}
|
||||
<section className="bg-card">
|
||||
<Footer />
|
||||
{/* <Footer /> */}
|
||||
</section>
|
||||
</div>
|
||||
);
|
||||
|
||||
@@ -48,11 +48,13 @@ import { Badge } from "../components/ui/badge";
|
||||
import { Button } from "../components/ui/button";
|
||||
import { Card, CardContent } from "../components/ui/card";
|
||||
import { ShimmerButton } from "../components/ui/shimmer-button";
|
||||
import { navigateTo } from "@/App";
|
||||
import { useNavigate } from "react-router-dom";
|
||||
import { Helmet } from "react-helmet-async";
|
||||
import { AIStrategyTargetAudience } from "./AIStrategyConsulting";
|
||||
|
||||
// Computer Vision Applications Hero Section
|
||||
const ComputerVisionHeroWithCTA = () => {
|
||||
const navigate = useNavigate();
|
||||
return (
|
||||
<section className="relative py-20 overflow-hidden bg-black">
|
||||
<Helmet>
|
||||
@@ -141,7 +143,7 @@ const ComputerVisionHeroWithCTA = () => {
|
||||
>
|
||||
<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">
|
||||
<Eye className="w-5 h-5 flex-shrink-0" />
|
||||
@@ -674,13 +676,11 @@ const ComputerVisionProcess = () => {
|
||||
whileInView={{ opacity: 1, x: 0 }}
|
||||
transition={{ duration: 0.8, delay: index * 0.2 }}
|
||||
viewport={{ once: true }}
|
||||
className={`flex items-center ${
|
||||
isEven ? "lg:flex-row" : "lg:flex-row-reverse"
|
||||
className={`flex items-center ${isEven ? "lg:flex-row" : "lg:flex-row-reverse"
|
||||
} flex-col lg:gap-16 gap-8`}
|
||||
>
|
||||
<div
|
||||
className={`flex-1 ${
|
||||
isEven ? "lg:text-right" : "lg:text-left"
|
||||
className={`flex-1 ${isEven ? "lg:text-right" : "lg:text-left"
|
||||
} text-center lg:text-left`}
|
||||
>
|
||||
<div className="bg-gray-900/50 backdrop-blur-md rounded-2xl border border-gray-800 p-8 hover:border-accent/30 transition-all duration-300 shadow-lg hover:shadow-xl">
|
||||
@@ -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">
|
||||
<div
|
||||
className={`w-12 h-12 rounded-lg flex items-center justify-center mx-auto mb-3 ${
|
||||
colorClasses[tech.color as keyof typeof colorClasses] ||
|
||||
className={`w-12 h-12 rounded-lg flex items-center justify-center mx-auto mb-3 ${colorClasses[tech.color as keyof typeof colorClasses] ||
|
||||
"bg-accent/20 text-accent border-accent/30"
|
||||
}`}
|
||||
>
|
||||
@@ -1145,6 +1144,7 @@ const ComputerVisionCaseStudies = () => {
|
||||
|
||||
// Mid-Page CTA
|
||||
const ComputerVisionInlineCTA = () => {
|
||||
const navigate = useNavigate();
|
||||
return (
|
||||
<section className="py-20 bg-black">
|
||||
<div className="container mx-auto px-6 lg:px-8">
|
||||
@@ -1182,7 +1182,7 @@ const ComputerVisionInlineCTA = () => {
|
||||
|
||||
<ShimmerButton
|
||||
className="text-xl px-10 py-5 rounded-2xl shadow-lg hover:shadow-xl"
|
||||
onClick={() => navigateTo("/start-a-project")}
|
||||
onClick={() => navigate("/start-a-project")}
|
||||
>
|
||||
<div className="inline-flex items-center gap-3">
|
||||
<MessageSquare className="w-6 h-6 flex-shrink-0" />
|
||||
@@ -1448,6 +1448,7 @@ const ComputerVisionFAQs = () => {
|
||||
|
||||
// Final CTA Section
|
||||
const ComputerVisionFinalCTA = () => {
|
||||
const navigate = useNavigate();
|
||||
return (
|
||||
<section className="py-20 relative overflow-hidden">
|
||||
<div className="container mx-auto px-6 lg:px-8 relative z-10">
|
||||
@@ -1500,7 +1501,7 @@ const ComputerVisionFinalCTA = () => {
|
||||
>
|
||||
<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">
|
||||
<Scan className="w-6 h-6 flex-shrink-0" />
|
||||
@@ -1530,7 +1531,7 @@ const ComputerVisionFinalCTA = () => {
|
||||
export const ComputerVisionApplications = () => {
|
||||
return (
|
||||
<div className="dark min-h-screen">
|
||||
<Navigation />
|
||||
{/* <Navigation /> */}
|
||||
|
||||
{/* Hero Section */}
|
||||
<section className="bg-black">
|
||||
@@ -1542,6 +1543,11 @@ export const ComputerVisionApplications = () => {
|
||||
<ComputerVisionBenefits />
|
||||
</section>
|
||||
|
||||
{/* Tech Stack */}
|
||||
<section className="bg-card">
|
||||
<ComputerVisionTechStack />
|
||||
</section>
|
||||
|
||||
{/* Development Process */}
|
||||
<section className="bg-card">
|
||||
<ComputerVisionProcess />
|
||||
@@ -1552,9 +1558,9 @@ export const ComputerVisionApplications = () => {
|
||||
<CVApplicationsList />
|
||||
</section>
|
||||
|
||||
{/* Tech Stack */}
|
||||
{/* Target Audience */}
|
||||
<section className="bg-card">
|
||||
<ComputerVisionTechStack />
|
||||
<AIStrategyTargetAudience />
|
||||
</section>
|
||||
|
||||
{/* Case Studies */}
|
||||
@@ -1584,7 +1590,7 @@ export const ComputerVisionApplications = () => {
|
||||
|
||||
{/* Footer */}
|
||||
<section className="bg-card">
|
||||
<Footer />
|
||||
{/* <Footer /> */}
|
||||
</section>
|
||||
</div>
|
||||
);
|
||||
|
||||
@@ -9,7 +9,7 @@ import { Textarea } from "../components/ui/textarea";
|
||||
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "../components/ui/select";
|
||||
import { Checkbox } from "../components/ui/checkbox";
|
||||
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 = () => {
|
||||
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" }
|
||||
];
|
||||
|
||||
const navigate = useNavigate();
|
||||
|
||||
const handleInputChange = (field: string, value: string | boolean) => {
|
||||
setFormData(prev => ({ ...prev, [field]: value }));
|
||||
};
|
||||
@@ -112,12 +114,12 @@ export const Contact = () => {
|
||||
setIsSubmitting(false);
|
||||
|
||||
// Redirect to Thank You page
|
||||
navigateTo('/thank-you');
|
||||
navigate('/thank-you');
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="dark min-h-screen bg-background">
|
||||
<Navigation />
|
||||
{/* <Navigation /> */}
|
||||
|
||||
<section className="pt-24 pb-16 bg-background">
|
||||
<div className="container mx-auto px-6 lg:px-8">
|
||||
@@ -255,7 +257,7 @@ export const Contact = () => {
|
||||
{contactPages.map((page, index) => {
|
||||
const Icon = page.icon;
|
||||
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">
|
||||
<div className="flex items-center gap-3">
|
||||
<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.
|
||||
</p>
|
||||
<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
|
||||
</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
|
||||
</Button>
|
||||
</div>
|
||||
@@ -294,7 +296,7 @@ export const Contact = () => {
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<Footer />
|
||||
{/* <Footer /> */}
|
||||
</div>
|
||||
);
|
||||
};
|
||||
@@ -1,29 +1,35 @@
|
||||
import React from "react";
|
||||
import { motion } from "framer-motion";
|
||||
import { Navigation } from "../components/Navigation";
|
||||
import { Footer } from "../components/Footer";
|
||||
import { ProcessSection } from "../components/ProcessSection";
|
||||
import { FAQSection } from "../components/FAQSection";
|
||||
import { AnimatedGradientText } from "../components/AnimatedGradientText";
|
||||
import { Button } from "../components/ui/button";
|
||||
import { ShimmerButton } from "../components/ui/shimmer-button";
|
||||
import { Badge } from "../components/ui/badge";
|
||||
import { Card, CardContent } from "../components/ui/card";
|
||||
import { 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 {
|
||||
Mail, FileCheck, Phone, UserPlus, Headphones, MapPin, MessageSquare,
|
||||
Calendar, ArrowRight, Globe, Clock, Users, Target, Send,
|
||||
Coffee, Monitor, Shield, Award, Rocket
|
||||
Calendar,
|
||||
Clock,
|
||||
FileCheck,
|
||||
Globe,
|
||||
Headphones,
|
||||
Mail,
|
||||
MapPin, MessageSquare,
|
||||
Phone,
|
||||
Rocket,
|
||||
Send,
|
||||
Shield,
|
||||
Target,
|
||||
UserPlus,
|
||||
Users
|
||||
} 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
|
||||
const HeroWithCTA = () => {
|
||||
const navigate = useNavigate();
|
||||
return (
|
||||
<section className="relative py-20 overflow-hidden bg-black">
|
||||
<div className="container mx-auto px-6 lg:px-8">
|
||||
@@ -64,7 +70,7 @@ const HeroWithCTA = () => {
|
||||
transition={{ duration: 0.8, delay: 0.3 }}
|
||||
className="flex flex-col sm:flex-row gap-4"
|
||||
>
|
||||
<ShimmerButton className="text-lg px-8 py-4" onClick={() => navigateTo('#contact-form')}>
|
||||
<ShimmerButton className="text-lg px-8 py-4" onClick={() => navigate('#contact-form')}>
|
||||
<div className="inline-flex items-center gap-2">
|
||||
<MessageSquare className="w-4 h-4 flex-shrink-0" />
|
||||
<span>Send a Message</span>
|
||||
@@ -74,7 +80,7 @@ const HeroWithCTA = () => {
|
||||
variant="secondary"
|
||||
size="lg"
|
||||
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" />
|
||||
<span>Schedule a Call</span>
|
||||
@@ -429,6 +435,7 @@ const ContactFormSection = () => {
|
||||
|
||||
// Updated CTA Section with new design
|
||||
const InlineCTA = () => {
|
||||
const navigate = useNavigate();
|
||||
return (
|
||||
<section className="py-20 bg-black">
|
||||
<div className="container mx-auto px-6 lg:px-8">
|
||||
@@ -471,7 +478,7 @@ const InlineCTA = () => {
|
||||
<div className="flex flex-col items-start gap-4">
|
||||
<ShimmerButton
|
||||
className="text-xl px-10 py-5 rounded-2xl shadow-lg hover:shadow-xl bg-[#E5195E] hover:bg-[#E5195E]/90"
|
||||
onClick={() => navigateTo('/contact/schedule-a-discovery-call')}
|
||||
onClick={() => navigate('/contact/schedule-a-discovery-call')}
|
||||
>
|
||||
<div className="inline-flex items-center gap-3">
|
||||
<Calendar className="w-6 h-6 flex-shrink-0" />
|
||||
@@ -493,6 +500,7 @@ const InlineCTA = () => {
|
||||
|
||||
// Office Locations Section
|
||||
const OfficeLocationsSection = () => {
|
||||
const navigate = useNavigate();
|
||||
const offices = [
|
||||
{
|
||||
title: "New York, USA",
|
||||
@@ -599,7 +607,7 @@ const OfficeLocationsSection = () => {
|
||||
<div className="p-8 pt-0 mt-auto space-y-3">
|
||||
<ShimmerButton
|
||||
className="w-full py-3 text-sm rounded-xl shadow-lg hover:shadow-xl"
|
||||
onClick={() => navigateTo(office.link)}
|
||||
onClick={() => navigate(office.link)}
|
||||
>
|
||||
<div className="inline-flex items-center justify-center gap-2">
|
||||
<MapPin className="w-4 h-4 flex-shrink-0" />
|
||||
@@ -645,7 +653,7 @@ const contactFAQs = [
|
||||
export function ContactMain() {
|
||||
return (
|
||||
<div className="dark min-h-screen bg-background">
|
||||
<Navigation />
|
||||
{/* <Navigation /> */}
|
||||
<HeroWithCTA />
|
||||
<HorizontalTagScroller />
|
||||
<SideBySideContentWithIcons />
|
||||
@@ -657,7 +665,7 @@ export function ContactMain() {
|
||||
subtitle="Get answers to common questions about reaching out to WDI."
|
||||
faqs={contactFAQs}
|
||||
/>
|
||||
<Footer />
|
||||
{/* <Footer /> */}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -41,14 +41,16 @@ import {
|
||||
TabsList,
|
||||
TabsTrigger,
|
||||
} from "../components/ui/tabs";
|
||||
import { navigateTo } from "@/App";
|
||||
import { useNavigate } from "react-router-dom";
|
||||
import { Helmet } from "react-helmet-async";
|
||||
import ranoutofImage from "../src/images/ranoutof.webp"
|
||||
import seezunImage from "../src/images/seezun.webp";
|
||||
import regroupImage from "../src/images/regroup.webp";
|
||||
import awsLogoImage from "../src/images/aws-logo.png";
|
||||
|
||||
// Cross-Platform Hero Section
|
||||
const CrossPlatformHeroWithCTA = () => {
|
||||
const navigate = useNavigate();
|
||||
return (
|
||||
<section className="relative py-20 overflow-hidden bg-black">
|
||||
<Helmet>
|
||||
@@ -138,7 +140,7 @@ const CrossPlatformHeroWithCTA = () => {
|
||||
>
|
||||
<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">
|
||||
<Share2 className="w-5 h-5 flex-shrink-0" />
|
||||
@@ -825,6 +827,7 @@ const CrossPlatformServices = () => {
|
||||
|
||||
// Cross-Platform Case Studies
|
||||
const CrossPlatformCaseStudies = () => {
|
||||
const navigate = useNavigate();
|
||||
const caseStudies = [
|
||||
{
|
||||
title: "Household Management Revolution",
|
||||
@@ -948,7 +951,7 @@ const CrossPlatformCaseStudies = () => {
|
||||
variant="ghost"
|
||||
size="sm"
|
||||
className="w-full justify-between text-accent hover:text-accent hover:bg-accent/10 group-hover:translate-x-1 transition-all duration-300"
|
||||
onClick={() => navigateTo(study.buttonLink)}
|
||||
onClick={() => navigate(study.buttonLink)}
|
||||
>
|
||||
<span className="text-sm font-medium">
|
||||
VIEW CASE STUDY
|
||||
@@ -968,6 +971,7 @@ const CrossPlatformCaseStudies = () => {
|
||||
|
||||
// Mid-Page CTA
|
||||
const CrossPlatformInlineCTA = () => {
|
||||
const navigate = useNavigate();
|
||||
return (
|
||||
<section className="py-20 bg-black">
|
||||
<div className="container mx-auto px-6 lg:px-8">
|
||||
@@ -1006,7 +1010,7 @@ const CrossPlatformInlineCTA = () => {
|
||||
|
||||
<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">
|
||||
<Target className="w-6 h-6 flex-shrink-0" />
|
||||
@@ -1019,9 +1023,98 @@ const CrossPlatformInlineCTA = () => {
|
||||
</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
|
||||
const HireCrossPlatformDevelopers = () => {
|
||||
const navigate = useNavigate();
|
||||
const developerTypes = [
|
||||
{
|
||||
title: "Senior Flutter Developer",
|
||||
@@ -1128,7 +1221,7 @@ const HireCrossPlatformDevelopers = () => {
|
||||
className="flex flex-col sm:flex-row gap-4 justify-center"
|
||||
>
|
||||
<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">
|
||||
<UserPlus className="w-5 h-5 flex-shrink-0" />
|
||||
@@ -1224,6 +1317,7 @@ const CrossPlatformFAQs = () => {
|
||||
|
||||
// Final CTA Section
|
||||
const CrossPlatformFinalCTA = () => {
|
||||
const navigate = useNavigate();
|
||||
return (
|
||||
<section className="py-20 relative overflow-hidden">
|
||||
<div className="container mx-auto px-6 lg:px-8 relative z-10">
|
||||
@@ -1282,7 +1376,7 @@ const CrossPlatformFinalCTA = () => {
|
||||
>
|
||||
<ShimmerButton
|
||||
className="px-12 py-6 text-xl rounded-2xl shadow-2xl hover:shadow-accent/25"
|
||||
onClick={() => navigateTo("/start-a-project")}
|
||||
onClick={() => navigate("/start-a-project")}
|
||||
>
|
||||
<div className="inline-flex items-center gap-3">
|
||||
<Rocket className="w-6 h-6 flex-shrink-0" />
|
||||
@@ -1311,7 +1405,7 @@ const CrossPlatformFinalCTA = () => {
|
||||
export const CrossPlatformAppDevelopment = () => {
|
||||
return (
|
||||
<div className="dark min-h-screen">
|
||||
<Navigation />
|
||||
{/* <Navigation /> */}
|
||||
|
||||
{/* Hero Section */}
|
||||
<section className="bg-black">
|
||||
@@ -1323,29 +1417,34 @@ export const CrossPlatformAppDevelopment = () => {
|
||||
<CrossPlatformBenefits />
|
||||
</section>
|
||||
|
||||
{/* Case Studies */}
|
||||
<section className="bg-black">
|
||||
<CrossPlatformCaseStudies />
|
||||
</section>
|
||||
|
||||
{/* Technologies */}
|
||||
<section className="bg-card">
|
||||
<section className="bg-background">
|
||||
<CrossPlatformTechnologies />
|
||||
</section>
|
||||
|
||||
{/* Development Process */}
|
||||
<section className="bg-background">
|
||||
<section className="bg-black">
|
||||
<CrossPlatformProcess />
|
||||
</section>
|
||||
|
||||
{/* Services */}
|
||||
<section className="bg-card">
|
||||
<section className="bg-background">
|
||||
<CrossPlatformServices />
|
||||
</section>
|
||||
|
||||
{/* Case Studies */}
|
||||
<section className="bg-background">
|
||||
<CrossPlatformCaseStudies />
|
||||
</section>
|
||||
|
||||
{/* Mid-Page CTA */}
|
||||
<section className="bg-card">
|
||||
{/* <section className="bg-card">
|
||||
<CrossPlatformInlineCTA />
|
||||
</section> */}
|
||||
|
||||
{/* cross platform tech */}
|
||||
<section className="bg-black">
|
||||
<CrossPlatformTechStack />
|
||||
</section>
|
||||
|
||||
{/* Hire Developers */}
|
||||
@@ -1354,18 +1453,18 @@ export const CrossPlatformAppDevelopment = () => {
|
||||
</section>
|
||||
|
||||
{/* FAQs */}
|
||||
<section className="bg-card">
|
||||
{/* <section className="bg-card">
|
||||
<CrossPlatformFAQs />
|
||||
</section>
|
||||
</section> */}
|
||||
|
||||
{/* Final CTA */}
|
||||
<section className="bg-background">
|
||||
<section className="bg-black">
|
||||
<CrossPlatformFinalCTA />
|
||||
</section>
|
||||
|
||||
{/* Footer */}
|
||||
<section className="bg-card">
|
||||
<Footer />
|
||||
<section className="bg-background">
|
||||
{/* <Footer /> */}
|
||||
</section>
|
||||
</div>
|
||||
);
|
||||
|
||||
@@ -70,7 +70,7 @@ export const CultureValues = () => {
|
||||
|
||||
return (
|
||||
<div className="dark min-h-screen bg-background">
|
||||
<Navigation />
|
||||
{/* <Navigation /> */}
|
||||
|
||||
{/* Hero Section */}
|
||||
<section className="relative pt-24 pb-16 overflow-hidden">
|
||||
@@ -310,7 +310,7 @@ export const CultureValues = () => {
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<Footer />
|
||||
{/* <Footer /> */}
|
||||
</div>
|
||||
);
|
||||
};
|
||||
@@ -42,11 +42,13 @@ import { Badge } from "../components/ui/badge";
|
||||
import { Button } from "../components/ui/button";
|
||||
import { Card, CardContent } from "../components/ui/card";
|
||||
import { ShimmerButton } from "../components/ui/shimmer-button";
|
||||
import { navigateTo } from "@/App";
|
||||
import { useNavigate } from "react-router-dom";
|
||||
import { Helmet } from "react-helmet-async";
|
||||
import { AIStrategyTargetAudience } from "./AIStrategyConsulting";
|
||||
|
||||
// Custom ML Model Development Hero Section
|
||||
const CustomMLHeroWithCTA = () => {
|
||||
const navigate = useNavigate();
|
||||
return (
|
||||
<section className="relative py-20 overflow-hidden bg-black">
|
||||
<Helmet>
|
||||
@@ -135,7 +137,7 @@ const CustomMLHeroWithCTA = () => {
|
||||
>
|
||||
<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">
|
||||
<Brain className="w-5 h-5 flex-shrink-0" />
|
||||
@@ -1126,6 +1128,7 @@ const CustomMLCaseStudies = () => {
|
||||
|
||||
// Mid-Page CTA
|
||||
const CustomMLInlineCTA = () => {
|
||||
const navigate = useNavigate();
|
||||
return (
|
||||
<section className="py-20 bg-black">
|
||||
<div className="container mx-auto px-6 lg:px-8">
|
||||
@@ -1164,7 +1167,7 @@ const CustomMLInlineCTA = () => {
|
||||
|
||||
<ShimmerButton
|
||||
className="text-xl px-10 py-5 rounded-2xl shadow-lg hover:shadow-xl"
|
||||
onClick={() => navigateTo("/start-a-project")}
|
||||
onClick={() => navigate("/start-a-project")}
|
||||
>
|
||||
<div className="inline-flex items-center gap-3">
|
||||
<MessageSquare className="w-6 h-6 flex-shrink-0" />
|
||||
@@ -1431,6 +1434,7 @@ const CustomMLFAQs = () => {
|
||||
|
||||
// Final CTA Section
|
||||
const CustomMLFinalCTA = () => {
|
||||
const navigate = useNavigate();
|
||||
return (
|
||||
<section className="py-20 relative overflow-hidden">
|
||||
<div className="container mx-auto px-6 lg:px-8 relative z-10">
|
||||
@@ -1483,7 +1487,7 @@ const CustomMLFinalCTA = () => {
|
||||
>
|
||||
<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">
|
||||
<Brain className="w-6 h-6 flex-shrink-0" />
|
||||
@@ -1513,7 +1517,7 @@ const CustomMLFinalCTA = () => {
|
||||
export const CustomMLModelDevelopment = () => {
|
||||
return (
|
||||
<div className="dark min-h-screen">
|
||||
<Navigation />
|
||||
{/* <Navigation /> */}
|
||||
|
||||
{/* Hero Section */}
|
||||
<section className="bg-black">
|
||||
@@ -1525,6 +1529,11 @@ export const CustomMLModelDevelopment = () => {
|
||||
<CustomMLBenefits />
|
||||
</section>
|
||||
|
||||
{/* Tech Stack */}
|
||||
<section className="bg-card">
|
||||
<CustomMLTechStack />
|
||||
</section>
|
||||
|
||||
{/* Development Process */}
|
||||
<section className="bg-card">
|
||||
<CustomMLDevelopmentProcess />
|
||||
@@ -1535,9 +1544,9 @@ export const CustomMLModelDevelopment = () => {
|
||||
<CustomMLServices />
|
||||
</section>
|
||||
|
||||
{/* Tech Stack */}
|
||||
{/* Target Audience */}
|
||||
<section className="bg-card">
|
||||
<CustomMLTechStack />
|
||||
<AIStrategyTargetAudience />
|
||||
</section>
|
||||
|
||||
{/* Case Studies */}
|
||||
@@ -1567,7 +1576,7 @@ export const CustomMLModelDevelopment = () => {
|
||||
|
||||
{/* Footer */}
|
||||
<section className="bg-card">
|
||||
<Footer />
|
||||
{/* <Footer /> */}
|
||||
</section>
|
||||
</div>
|
||||
);
|
||||
|
||||
@@ -46,11 +46,12 @@ import { Card, CardContent } from "../components/ui/card";
|
||||
import { ShimmerButton } from "../components/ui/shimmer-button";
|
||||
import patientManagementPortal from "../src/images/patient-management-portal.webp";
|
||||
import awsLogo from "../src/images/aws-logo.png";
|
||||
import { navigateTo } from "@/App";
|
||||
import { useNavigate } from "react-router-dom";
|
||||
import { Helmet } from "react-helmet-async";
|
||||
|
||||
// Custom Web App Development Hero Section
|
||||
const CustomWebAppHeroWithCTA = () => {
|
||||
const navigate = useNavigate();
|
||||
return (
|
||||
<section className="relative py-20 overflow-hidden bg-black">
|
||||
<Helmet>
|
||||
@@ -140,7 +141,7 @@ const CustomWebAppHeroWithCTA = () => {
|
||||
>
|
||||
<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">
|
||||
<MessageSquare className="w-5 h-5 flex-shrink-0" />
|
||||
@@ -1023,6 +1024,7 @@ const WebAppCaseStudies = () => {
|
||||
|
||||
// Mid-Page CTA
|
||||
const WebAppInlineCTA = () => {
|
||||
const navigate = useNavigate();
|
||||
return (
|
||||
<section className="py-20">
|
||||
<div className="container mx-auto px-6 lg:px-8">
|
||||
@@ -1061,7 +1063,7 @@ const WebAppInlineCTA = () => {
|
||||
|
||||
<ShimmerButton
|
||||
className="text-xl px-10 py-5 rounded-2xl shadow-lg hover:shadow-xl"
|
||||
onClick={() => navigateTo("/start-a-project")}
|
||||
onClick={() => navigate("/start-a-project")}
|
||||
>
|
||||
<div className="inline-flex items-center gap-3">
|
||||
<MessageSquare className="w-6 h-6 flex-shrink-0" />
|
||||
@@ -1077,6 +1079,7 @@ const WebAppInlineCTA = () => {
|
||||
|
||||
// Hire Web App Developers
|
||||
const HireWebDevelopers = () => {
|
||||
const navigate = useNavigate();
|
||||
const developerTypes = [
|
||||
{
|
||||
title: "Frontend Specialists",
|
||||
@@ -1208,7 +1211,7 @@ const HireWebDevelopers = () => {
|
||||
>
|
||||
<div className="flex flex-col sm:flex-row gap-4 justify-center">
|
||||
<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">
|
||||
<Users className="w-5 h-5 flex-shrink-0" />
|
||||
@@ -1234,6 +1237,7 @@ const HireWebDevelopers = () => {
|
||||
|
||||
// Custom Web App FAQs
|
||||
const CustomWebAppFAQs = () => {
|
||||
const navigate = useNavigate();
|
||||
const faqs = [
|
||||
{
|
||||
question: "How long does it take to develop a custom web app?",
|
||||
@@ -1305,6 +1309,7 @@ const CustomWebAppFAQs = () => {
|
||||
|
||||
// Final CTA Section
|
||||
const CustomWebAppFinalCTA = () => {
|
||||
const navigate = useNavigate();
|
||||
return (
|
||||
<section className="py-20 relative overflow-hidden">
|
||||
<div className="container mx-auto px-6 lg:px-8 relative z-10">
|
||||
@@ -1357,7 +1362,7 @@ const CustomWebAppFinalCTA = () => {
|
||||
>
|
||||
<ShimmerButton
|
||||
className="px-12 py-6 text-xl rounded-2xl shadow-2xl hover:shadow-accent/25"
|
||||
onClick={() => navigateTo("/start-a-project")}
|
||||
onClick={() => navigate("/start-a-project")}
|
||||
>
|
||||
<div className="inline-flex items-center gap-3">
|
||||
<Rocket className="w-6 h-6 flex-shrink-0" />
|
||||
@@ -1386,7 +1391,7 @@ const CustomWebAppFinalCTA = () => {
|
||||
export const CustomWebAppDevelopment = () => {
|
||||
return (
|
||||
<div className="dark min-h-screen">
|
||||
<Navigation />
|
||||
{/* <Navigation /> */}
|
||||
|
||||
{/* Hero Section */}
|
||||
<section className="bg-black">
|
||||
@@ -1398,6 +1403,11 @@ export const CustomWebAppDevelopment = () => {
|
||||
<CustomWebAppBenefits />
|
||||
</section>
|
||||
|
||||
{/* Case Studies */}
|
||||
<section className="bg-background">
|
||||
<WebAppCaseStudies />
|
||||
</section>
|
||||
|
||||
{/* Development Process */}
|
||||
<section className="bg-card">
|
||||
<CustomWebAppProcess />
|
||||
@@ -1413,15 +1423,10 @@ export const CustomWebAppDevelopment = () => {
|
||||
<WebAppTechStack />
|
||||
</section>
|
||||
|
||||
{/* Case Studies */}
|
||||
<section className="bg-background">
|
||||
<WebAppCaseStudies />
|
||||
</section>
|
||||
|
||||
{/* Mid-Page CTA */}
|
||||
<section className="bg-card">
|
||||
{/* <section className="bg-card">
|
||||
<WebAppInlineCTA />
|
||||
</section>
|
||||
</section> */}
|
||||
|
||||
{/* Hire Developers */}
|
||||
<section className="bg-background">
|
||||
@@ -1429,9 +1434,9 @@ export const CustomWebAppDevelopment = () => {
|
||||
</section>
|
||||
|
||||
{/* FAQs */}
|
||||
<section className="bg-card">
|
||||
{/* <section className="bg-card">
|
||||
<CustomWebAppFAQs />
|
||||
</section>
|
||||
</section> */}
|
||||
|
||||
{/* Final CTA */}
|
||||
<section className="bg-background">
|
||||
@@ -1440,7 +1445,7 @@ export const CustomWebAppDevelopment = () => {
|
||||
|
||||
{/* Footer */}
|
||||
<section >
|
||||
<Footer />
|
||||
{/* <Footer /> */}
|
||||
</section>
|
||||
</div>
|
||||
);
|
||||
|
||||
@@ -18,7 +18,7 @@ import {
|
||||
Star,
|
||||
UsersRound,
|
||||
} from "lucide-react";
|
||||
import { navigateTo } from "@/App";
|
||||
import { useNavigate } from "react-router-dom";
|
||||
import { Helmet } from "react-helmet-async";
|
||||
import { TeamCollaborationVector } from "@/components/vectors";
|
||||
import { HireTalentHeroBanner } from "@/components/HireTalentHeroBanner";
|
||||
@@ -138,9 +138,11 @@ export const DedicatedDevelopmentTeams = () => {
|
||||
},
|
||||
];
|
||||
|
||||
const navigate = useNavigate();
|
||||
|
||||
return (
|
||||
<div className="dark min-h-screen bg-background">
|
||||
<Navigation />
|
||||
{/* <Navigation /> */}
|
||||
|
||||
<Helmet>
|
||||
{/* Page Title and Meta Description */}
|
||||
@@ -370,7 +372,7 @@ export const DedicatedDevelopmentTeams = () => {
|
||||
<Button
|
||||
size="lg"
|
||||
className="bg-[#E5195E] hover:bg-[#E5195E]/90 text-white"
|
||||
onClick={() => navigateTo("/start-a-project")}
|
||||
onClick={() => navigate("/start-a-project")}
|
||||
>
|
||||
Start Building Your Team
|
||||
<ArrowRight className="ml-2 w-4 h-4" />
|
||||
@@ -387,7 +389,7 @@ export const DedicatedDevelopmentTeams = () => {
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<Footer />
|
||||
{/* <Footer /> */}
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
@@ -42,11 +42,12 @@ import { Badge } from "../components/ui/badge";
|
||||
import { Button } from "../components/ui/button";
|
||||
import { Card, CardContent } from "../components/ui/card";
|
||||
import { ShimmerButton } from "../components/ui/shimmer-button";
|
||||
import { navigateTo } from "@/App";
|
||||
import { useNavigate } from "react-router-dom";
|
||||
import { Helmet } from "react-helmet-async";
|
||||
|
||||
// Dedicated Offshore Development Centers Hero Section
|
||||
const DedicatedOffshoreODCHero = () => {
|
||||
const navigate = useNavigate();
|
||||
return (
|
||||
<section className="relative py-20 overflow-hidden bg-black">
|
||||
<Helmet>
|
||||
@@ -136,7 +137,7 @@ const DedicatedOffshoreODCHero = () => {
|
||||
>
|
||||
<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">
|
||||
<MessageSquare className="w-5 h-5 flex-shrink-0" />
|
||||
@@ -1257,6 +1258,7 @@ const DedicatedOffshoreODCCaseStudies = () => {
|
||||
|
||||
// Mid-Page Lead Capture CTA
|
||||
const DedicatedOffshoreODCInlineCTA = () => {
|
||||
const navigate = useNavigate();
|
||||
return (
|
||||
<section className="py-20">
|
||||
<div className="container mx-auto px-6 lg:px-8">
|
||||
@@ -1295,7 +1297,7 @@ const DedicatedOffshoreODCInlineCTA = () => {
|
||||
|
||||
<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">
|
||||
<Wand2 className="w-6 h-6 flex-shrink-0" />
|
||||
@@ -1387,6 +1389,7 @@ const DedicatedOffshoreODCFAQs = () => {
|
||||
|
||||
// Final CTA Section
|
||||
const DedicatedOffshoreODCFinalCTA = () => {
|
||||
const navigate = useNavigate();
|
||||
return (
|
||||
<section className="py-20 relative overflow-hidden">
|
||||
<div className="container mx-auto px-6 lg:px-8 relative z-10">
|
||||
@@ -1440,7 +1443,7 @@ const DedicatedOffshoreODCFinalCTA = () => {
|
||||
>
|
||||
<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">
|
||||
<Calendar className="w-6 h-6 flex-shrink-0" />
|
||||
@@ -1470,7 +1473,7 @@ const DedicatedOffshoreODCFinalCTA = () => {
|
||||
export const DedicatedOffshoreODC = () => {
|
||||
return (
|
||||
<div className="dark min-h-screen">
|
||||
<Navigation />
|
||||
{/* <Navigation /> */}
|
||||
|
||||
{/* Hero Section */}
|
||||
<section className="bg-black">
|
||||
@@ -1524,7 +1527,7 @@ export const DedicatedOffshoreODC = () => {
|
||||
|
||||
{/* Footer */}
|
||||
<section className="bg-card">
|
||||
<Footer />
|
||||
{/* <Footer /> */}
|
||||
</section>
|
||||
</div>
|
||||
);
|
||||
|
||||
@@ -13,7 +13,6 @@ import {
|
||||
UserPlus,
|
||||
Users
|
||||
} from "lucide-react";
|
||||
import { navigateTo } from "../App";
|
||||
import { FAQSection } from "../components/FAQSection";
|
||||
import { Footer } from "../components/Footer";
|
||||
import { Navigation } from "../components/Navigation";
|
||||
@@ -23,9 +22,11 @@ import { Button } from "../components/ui/button";
|
||||
import { Card, CardContent } from "../components/ui/card";
|
||||
import { ShimmerButton } from "../components/ui/shimmer-button";
|
||||
import { Helmet } from "react-helmet-async";
|
||||
import { useNavigate } from "react-router-dom";
|
||||
|
||||
// Enhanced Hero Section
|
||||
const HeroWithCTA = () => {
|
||||
const navigate = useNavigate();
|
||||
return (
|
||||
<section className="relative py-20 overflow-hidden bg-black">
|
||||
<Helmet>
|
||||
@@ -119,7 +120,7 @@ const HeroWithCTA = () => {
|
||||
>
|
||||
<ShimmerButton
|
||||
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">
|
||||
<Calendar className="w-5 h-5 flex-shrink-0" />
|
||||
@@ -129,7 +130,7 @@ const HeroWithCTA = () => {
|
||||
<Button
|
||||
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"
|
||||
onClick={() => navigateTo('/case-studies')}
|
||||
onClick={() => navigate('/case-studies')}
|
||||
>
|
||||
<Eye className="w-5 h-5 flex-shrink-0" />
|
||||
<span>View Design Portfolio</span>
|
||||
@@ -360,6 +361,7 @@ const SideBySideContentWithIcons = () => {
|
||||
|
||||
// Service Categories Grid
|
||||
const TabbedServiceDisplay = () => {
|
||||
const navigate = useNavigate();
|
||||
const services = [
|
||||
{
|
||||
title: "UI/UX Design",
|
||||
@@ -435,7 +437,7 @@ const TabbedServiceDisplay = () => {
|
||||
viewport={{ once: true }}
|
||||
whileHover={{ y: -5 }}
|
||||
className="group cursor-pointer"
|
||||
onClick={() => navigateTo(service.link)}
|
||||
onClick={() => navigate(service.link)}
|
||||
>
|
||||
<div className="bg-gray-900/50 backdrop-blur-sm rounded-2xl border border-gray-800 p-8 hover:border-accent/30 transition-all duration-300 shadow-lg hover:shadow-xl h-full">
|
||||
<div className="flex flex-col items-start space-y-6">
|
||||
@@ -464,6 +466,7 @@ const TabbedServiceDisplay = () => {
|
||||
|
||||
// Updated CTA Section with new design
|
||||
const InlineCTA = () => {
|
||||
const navigate = useNavigate();
|
||||
return (
|
||||
<section className="py-20 bg-black">
|
||||
<div className="container mx-auto px-6 lg:px-8">
|
||||
@@ -506,8 +509,8 @@ const InlineCTA = () => {
|
||||
<div className="flex flex-col items-center gap-4">
|
||||
<ShimmerButton
|
||||
className="text-xl px-10 py-5 rounded-2xl shadow-lg hover:shadow-xl bg-[#E5195E] hover:bg-[#E5195E]/90"
|
||||
// onClick={() => navigateTo('/contact/schedule-a-discovery-call')}
|
||||
onClick={() => navigateTo("/start-a-project")}
|
||||
// onClick={() => navigate('/contact/schedule-a-discovery-call')}
|
||||
onClick={() => navigate("/start-a-project")}
|
||||
>
|
||||
<div className="inline-flex items-center gap-3">
|
||||
<PenTool className="w-6 h-6 flex-shrink-0" />
|
||||
@@ -529,6 +532,7 @@ const InlineCTA = () => {
|
||||
|
||||
// Design Specialists Section
|
||||
const HireDevelopersSection = () => {
|
||||
const navigate = useNavigate();
|
||||
const specialists = [
|
||||
{
|
||||
title: "UI/UX Designers",
|
||||
@@ -637,7 +641,7 @@ const HireDevelopersSection = () => {
|
||||
<div className="p-8 pt-0 mt-auto space-y-3">
|
||||
<ShimmerButton
|
||||
className="w-full py-3 text-sm rounded-xl shadow-lg hover:shadow-xl"
|
||||
onClick={() => navigateTo(specialist.link)}
|
||||
onClick={() => navigate(specialist.link)}
|
||||
>
|
||||
<div className="inline-flex items-center justify-center gap-2">
|
||||
<UserPlus className="w-4 h-4 flex-shrink-0" />
|
||||
@@ -683,7 +687,7 @@ const designExperienceFAQs = [
|
||||
export function DesignExperience() {
|
||||
return (
|
||||
<div className="dark min-h-screen bg-background">
|
||||
<Navigation />
|
||||
{/* <Navigation /> */}
|
||||
<HeroWithCTA />
|
||||
<HorizontalTagScroller />
|
||||
<SideBySideContentWithIcons />
|
||||
@@ -696,7 +700,7 @@ export function DesignExperience() {
|
||||
subtitle="Get answers to common questions about our design and user experience services."
|
||||
faqs={designExperienceFAQs}
|
||||
/>
|
||||
<Footer />
|
||||
{/* <Footer /> */}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -42,11 +42,12 @@ import { Badge } from "../components/ui/badge";
|
||||
import { Button } from "../components/ui/button";
|
||||
import { Card, CardContent } from "../components/ui/card";
|
||||
import { ShimmerButton } from "../components/ui/shimmer-button";
|
||||
import { navigateTo } from "@/App";
|
||||
import { useNavigate } from "react-router-dom";
|
||||
import { Helmet } from "react-helmet-async";
|
||||
|
||||
// Design Thinking Workshops Hero Section
|
||||
const WorkshopsHeroWithCTA = () => {
|
||||
const navigate = useNavigate();
|
||||
return (
|
||||
<section className="relative py-20 overflow-hidden bg-black">
|
||||
<Helmet>
|
||||
@@ -137,7 +138,7 @@ const WorkshopsHeroWithCTA = () => {
|
||||
>
|
||||
<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">
|
||||
<Calendar className="w-5 h-5 flex-shrink-0" />
|
||||
@@ -914,6 +915,7 @@ const TargetAudience = () => {
|
||||
|
||||
// Workshop Case Studies
|
||||
const WorkshopCaseStudies = () => {
|
||||
const navigate = useNavigate();
|
||||
const caseStudies = [
|
||||
{
|
||||
title: "FinTech Product Strategy Workshop",
|
||||
@@ -1050,6 +1052,7 @@ const WorkshopCaseStudies = () => {
|
||||
|
||||
// Mid-Page CTA
|
||||
const WorkshopInlineCTA = () => {
|
||||
const navigate = useNavigate();
|
||||
return (
|
||||
<section className="py-20 bg-black">
|
||||
<div className="container mx-auto px-6 lg:px-8">
|
||||
@@ -1088,7 +1091,7 @@ const WorkshopInlineCTA = () => {
|
||||
|
||||
<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">
|
||||
<Send className="w-6 h-6 flex-shrink-0" />
|
||||
@@ -1104,6 +1107,7 @@ const WorkshopInlineCTA = () => {
|
||||
|
||||
// Hire Design Thinking Facilitators
|
||||
const HireFacilitators = () => {
|
||||
const navigate = useNavigate();
|
||||
const facilitatorTypes = [
|
||||
{
|
||||
title: "Senior UX Strategists",
|
||||
@@ -1254,7 +1258,7 @@ const HireFacilitators = () => {
|
||||
>
|
||||
<div className="flex flex-col sm:flex-row gap-4 justify-center">
|
||||
<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">
|
||||
<UserPlus className="w-5 h-5 flex-shrink-0" />
|
||||
@@ -1351,6 +1355,7 @@ const WorkshopFAQs = () => {
|
||||
|
||||
// Final CTA Section
|
||||
const WorkshopFinalCTA = () => {
|
||||
const navigate = useNavigate();
|
||||
return (
|
||||
<section className="py-20 relative overflow-hidden">
|
||||
<div className="container mx-auto px-6 lg:px-8 relative z-10">
|
||||
@@ -1403,7 +1408,7 @@ const WorkshopFinalCTA = () => {
|
||||
>
|
||||
<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">
|
||||
<Users className="w-6 h-6 flex-shrink-0" />
|
||||
@@ -1433,7 +1438,7 @@ const WorkshopFinalCTA = () => {
|
||||
export const DesignThinkingWorkshops = () => {
|
||||
return (
|
||||
<div className="dark min-h-screen">
|
||||
<Navigation />
|
||||
{/* <Navigation /> */}
|
||||
|
||||
{/* Hero Section */}
|
||||
<section className="bg-black">
|
||||
@@ -1441,12 +1446,17 @@ export const DesignThinkingWorkshops = () => {
|
||||
</section>
|
||||
|
||||
{/* Benefits */}
|
||||
<section className="bg-background">
|
||||
<section className="bg-card">
|
||||
<WorkshopBenefits />
|
||||
</section>
|
||||
|
||||
{/* Case Studies */}
|
||||
<section className="bg-background">
|
||||
<WorkshopCaseStudies />
|
||||
</section>
|
||||
|
||||
{/* Design Thinking Approach */}
|
||||
<section className="bg-card">
|
||||
<section className="bg-background">
|
||||
<DesignThinkingApproach />
|
||||
</section>
|
||||
|
||||
@@ -1460,15 +1470,10 @@ export const DesignThinkingWorkshops = () => {
|
||||
<TargetAudience />
|
||||
</section>
|
||||
|
||||
{/* Case Studies */}
|
||||
<section className="bg-background">
|
||||
<WorkshopCaseStudies />
|
||||
</section>
|
||||
|
||||
{/* Mid-Page CTA */}
|
||||
<section className="bg-card">
|
||||
{/* <section className="bg-card">
|
||||
<WorkshopInlineCTA />
|
||||
</section>
|
||||
</section> */}
|
||||
|
||||
{/* Hire Facilitators */}
|
||||
<section className="bg-background">
|
||||
@@ -1476,9 +1481,9 @@ export const DesignThinkingWorkshops = () => {
|
||||
</section>
|
||||
|
||||
{/* FAQs */}
|
||||
<section className="bg-card">
|
||||
{/* <section className="bg-card">
|
||||
<WorkshopFAQs />
|
||||
</section>
|
||||
</section> */}
|
||||
|
||||
{/* Final CTA */}
|
||||
<section className="bg-background">
|
||||
@@ -1486,8 +1491,8 @@ export const DesignThinkingWorkshops = () => {
|
||||
</section>
|
||||
|
||||
{/* Footer */}
|
||||
<section className="bg-card">
|
||||
<Footer />
|
||||
<section className="bg-background">
|
||||
{/* <Footer /> */}
|
||||
</section>
|
||||
</div>
|
||||
);
|
||||
|
||||
@@ -35,11 +35,12 @@ import { Badge } from "../components/ui/badge";
|
||||
import { Button } from "../components/ui/button";
|
||||
import { Card, CardContent } from "../components/ui/card";
|
||||
import { ShimmerButton } from "../components/ui/shimmer-button";
|
||||
import { navigateTo } from "@/App";
|
||||
import { useNavigate } from "react-router-dom";
|
||||
import { Helmet } from "react-helmet-async";
|
||||
|
||||
// Digital Product Development Hero Section
|
||||
const DigitalProductDevelopmentHero = () => {
|
||||
const navigate = useNavigate();
|
||||
return (
|
||||
<section className="relative py-20 overflow-hidden bg-black">
|
||||
<Helmet>
|
||||
@@ -129,7 +130,7 @@ const DigitalProductDevelopmentHero = () => {
|
||||
>
|
||||
<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">
|
||||
<MessageSquare className="w-5 h-5 flex-shrink-0" />
|
||||
@@ -1134,6 +1135,7 @@ const DigitalProductCaseStudies = () => {
|
||||
|
||||
// Mid-Page Lead Capture CTA
|
||||
const DigitalProductInlineCTA = () => {
|
||||
const navigate = useNavigate();
|
||||
return (
|
||||
<section className="py-20">
|
||||
<div className="container mx-auto px-6 lg:px-8">
|
||||
@@ -1171,7 +1173,7 @@ const DigitalProductInlineCTA = () => {
|
||||
|
||||
<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">
|
||||
<Calendar className="w-6 h-6 flex-shrink-0" />
|
||||
@@ -1261,6 +1263,7 @@ const DigitalProductFAQs = () => {
|
||||
|
||||
// Final CTA Section
|
||||
const DigitalProductFinalCTA = () => {
|
||||
const navigate = useNavigate();
|
||||
return (
|
||||
<section className="py-20 relative overflow-hidden bg-black">
|
||||
<div className="container mx-auto px-6 lg:px-8 relative z-10">
|
||||
@@ -1313,7 +1316,7 @@ const DigitalProductFinalCTA = () => {
|
||||
>
|
||||
<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">
|
||||
<Calendar className="w-6 h-6 flex-shrink-0" />
|
||||
@@ -1342,7 +1345,7 @@ const DigitalProductFinalCTA = () => {
|
||||
export const DigitalProductDevelopment = () => {
|
||||
return (
|
||||
<div className="dark min-h-screen">
|
||||
<Navigation />
|
||||
{/* <Navigation /> */}
|
||||
|
||||
{/* Hero Section */}
|
||||
<section className="bg-black">
|
||||
@@ -1396,7 +1399,7 @@ export const DigitalProductDevelopment = () => {
|
||||
|
||||
{/* Footer */}
|
||||
<section className="bg-card">
|
||||
<Footer />
|
||||
{/* <Footer /> */}
|
||||
</section>
|
||||
</div>
|
||||
);
|
||||
|
||||
@@ -467,7 +467,7 @@ const ecommerceFAQs = [
|
||||
export const EcommerceMarketplaces = () => {
|
||||
return (
|
||||
<div className="min-h-screen bg-[#0E0E0E]">
|
||||
<Navigation />
|
||||
{/* <Navigation /> */}
|
||||
|
||||
<HeroBanner
|
||||
category="Commerce & Consumer"
|
||||
@@ -508,7 +508,7 @@ export const EcommerceMarketplaces = () => {
|
||||
<SplitCallToAction />
|
||||
</div>
|
||||
|
||||
<Footer />
|
||||
{/* <Footer /> */}
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
@@ -47,11 +47,12 @@ import { Button } from "../components/ui/button";
|
||||
import { Card, CardContent } from "../components/ui/card";
|
||||
import { ShimmerButton } from "../components/ui/shimmer-button";
|
||||
import multiVendorImage from "../src/images/multifood.webp";
|
||||
import { navigateTo } from "@/App";
|
||||
import { useNavigate } from "react-router-dom";
|
||||
import { Helmet } from "react-helmet-async";
|
||||
|
||||
// eCommerce Platforms Hero Section
|
||||
const EcommerceHeroWithCTA = () => {
|
||||
const navigate = useNavigate();
|
||||
return (
|
||||
<section className="relative py-20 overflow-hidden bg-black">
|
||||
<Helmet>
|
||||
@@ -141,7 +142,7 @@ const EcommerceHeroWithCTA = () => {
|
||||
>
|
||||
<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">
|
||||
<Store className="w-5 h-5 flex-shrink-0" />
|
||||
@@ -1192,6 +1193,7 @@ const EcommerceCaseStudies = () => {
|
||||
|
||||
// Mid-Page CTA
|
||||
const EcommerceInlineCTA = () => {
|
||||
const navigate = useNavigate();
|
||||
return (
|
||||
<section className="py-20">
|
||||
<div className="container mx-auto px-6 lg:px-8">
|
||||
@@ -1230,7 +1232,7 @@ const EcommerceInlineCTA = () => {
|
||||
|
||||
<ShimmerButton
|
||||
className="text-xl px-10 py-5 rounded-2xl shadow-lg hover:shadow-xl"
|
||||
onClick={() => navigateTo("/start-a-project")}
|
||||
onClick={() => navigate("/start-a-project")}
|
||||
>
|
||||
<div className="inline-flex items-center gap-3">
|
||||
<MessageSquare className="w-6 h-6 flex-shrink-0" />
|
||||
@@ -1246,6 +1248,7 @@ const EcommerceInlineCTA = () => {
|
||||
|
||||
// Hire eCommerce Developers
|
||||
const HireEcommerceDevelopers = () => {
|
||||
const navigate = useNavigate();
|
||||
const developerTypes = [
|
||||
{
|
||||
title: "Shopify Experts",
|
||||
@@ -1374,7 +1377,7 @@ const HireEcommerceDevelopers = () => {
|
||||
>
|
||||
<div className="flex flex-col sm:flex-row gap-4 justify-center">
|
||||
<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">
|
||||
<Users className="w-5 h-5 flex-shrink-0" />
|
||||
@@ -1471,6 +1474,7 @@ const EcommerceFAQs = () => {
|
||||
|
||||
// Final CTA Section
|
||||
const EcommerceFinalCTA = () => {
|
||||
const navigate = useNavigate();
|
||||
return (
|
||||
<section className="py-20 relative overflow-hidden">
|
||||
<div className="container mx-auto px-6 lg:px-8 relative z-10">
|
||||
@@ -1523,7 +1527,7 @@ const EcommerceFinalCTA = () => {
|
||||
>
|
||||
<ShimmerButton
|
||||
className="px-12 py-6 text-xl rounded-2xl shadow-2xl hover:shadow-accent/25"
|
||||
onClick={() => navigateTo("/start-a-project")}
|
||||
onClick={() => navigate("/start-a-project")}
|
||||
>
|
||||
<div className="inline-flex items-center gap-3">
|
||||
<Rocket className="w-6 h-6 flex-shrink-0" />
|
||||
@@ -1552,7 +1556,7 @@ const EcommerceFinalCTA = () => {
|
||||
export const EcommercePlatforms = () => {
|
||||
return (
|
||||
<div className="dark min-h-screen">
|
||||
<Navigation />
|
||||
{/* <Navigation /> */}
|
||||
|
||||
{/* Hero Section */}
|
||||
<section className="bg-black">
|
||||
@@ -1564,6 +1568,11 @@ export const EcommercePlatforms = () => {
|
||||
<EcommerceBenefits />
|
||||
</section>
|
||||
|
||||
{/* Case Studies */}
|
||||
<section className="bg-background">
|
||||
<EcommerceCaseStudies />
|
||||
</section>
|
||||
|
||||
{/* Development Process */}
|
||||
<section className="bg-card">
|
||||
<EcommerceProcess />
|
||||
@@ -1579,15 +1588,10 @@ export const EcommercePlatforms = () => {
|
||||
<EcommerceTechStack />
|
||||
</section>
|
||||
|
||||
{/* Case Studies */}
|
||||
<section className="bg-background">
|
||||
<EcommerceCaseStudies />
|
||||
</section>
|
||||
|
||||
{/* Mid-Page CTA */}
|
||||
<section className="bg-card">
|
||||
{/* <section className="bg-card">
|
||||
<EcommerceInlineCTA />
|
||||
</section>
|
||||
</section> */}
|
||||
|
||||
{/* Hire Developers */}
|
||||
<section className="bg-background">
|
||||
@@ -1595,9 +1599,9 @@ export const EcommercePlatforms = () => {
|
||||
</section>
|
||||
|
||||
{/* FAQs */}
|
||||
<section className="bg-card">
|
||||
{/* <section className="bg-card">
|
||||
<EcommerceFAQs />
|
||||
</section>
|
||||
</section> */}
|
||||
|
||||
{/* Final CTA */}
|
||||
<section className="bg-background">
|
||||
@@ -1605,8 +1609,8 @@ export const EcommercePlatforms = () => {
|
||||
</section>
|
||||
|
||||
{/* Footer */}
|
||||
<section className="bg-card">
|
||||
<Footer />
|
||||
<section className="bg-background">
|
||||
{/* <Footer /> */}
|
||||
</section>
|
||||
</div>
|
||||
);
|
||||
|
||||
@@ -402,7 +402,7 @@ const edtechFAQs = [
|
||||
export const EdTechPlatforms = () => {
|
||||
return (
|
||||
<div className="min-h-screen bg-[#0E0E0E]">
|
||||
<Navigation />
|
||||
{/* <Navigation /> */}
|
||||
|
||||
<HeroBanner
|
||||
category="Learning & Education"
|
||||
@@ -443,7 +443,7 @@ export const EdTechPlatforms = () => {
|
||||
<SplitCallToAction />
|
||||
</div>
|
||||
|
||||
<Footer />
|
||||
{/* <Footer /> */}
|
||||
</div>
|
||||
);
|
||||
};
|
||||
@@ -15,12 +15,13 @@ import {
|
||||
CheckCircle,
|
||||
Star,
|
||||
} from "lucide-react";
|
||||
import { navigateTo } from "@/App";
|
||||
import { useNavigate } from "react-router-dom";
|
||||
import { Helmet } from "react-helmet-async";
|
||||
import { EngagementModelsVector } from "@/components/vectors";
|
||||
import { HireTalentHeroBanner } from "@/components/HireTalentHeroBanner";
|
||||
|
||||
export const EngagementModels = () => {
|
||||
const navigate = useNavigate();
|
||||
const models = [
|
||||
{
|
||||
icon: DollarSign,
|
||||
@@ -151,7 +152,7 @@ export const EngagementModels = () => {
|
||||
|
||||
return (
|
||||
<div className="dark min-h-screen bg-background">
|
||||
<Navigation />
|
||||
{/* <Navigation /> */}
|
||||
|
||||
<Helmet>
|
||||
{/* Page Title and Meta Description */}
|
||||
@@ -307,7 +308,7 @@ export const EngagementModels = () => {
|
||||
<div className="flex justify-center lg:justify-end">
|
||||
<Button
|
||||
className="bg-[#E5195E] hover:bg-[#E5195E]/90 text-white"
|
||||
onClick={() => navigateTo("/start-a-project")}
|
||||
onClick={() => navigate("/start-a-project")}
|
||||
>
|
||||
Learn More
|
||||
<ArrowRight className="ml-2 w-4 h-4" />
|
||||
@@ -525,7 +526,7 @@ export const EngagementModels = () => {
|
||||
<Button
|
||||
size="lg"
|
||||
className="bg-[#E5195E] hover:bg-[#E5195E]/90 text-white"
|
||||
onClick={() => navigateTo("/start-a-project")}
|
||||
onClick={() => navigate("/start-a-project")}
|
||||
>
|
||||
Start Your Consultation
|
||||
<ArrowRight className="ml-2 w-4 h-4" />
|
||||
@@ -542,7 +543,7 @@ export const EngagementModels = () => {
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<Footer />
|
||||
{/* <Footer /> */}
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
@@ -46,11 +46,12 @@ import { Button } from "../components/ui/button";
|
||||
import { Card, CardContent } from "../components/ui/card";
|
||||
import { ShimmerButton } from "../components/ui/shimmer-button";
|
||||
import awsLogo from "../src/images/aws-logo.png";
|
||||
import { navigateTo } from "@/App";
|
||||
import { useNavigate } from "react-router-dom";
|
||||
import { Helmet } from "react-helmet-async";
|
||||
|
||||
// Enterprise Software Solutions Hero Section
|
||||
const EnterpriseHeroWithCTA = () => {
|
||||
const navigate = useNavigate();
|
||||
return (
|
||||
<section className="relative py-20 overflow-hidden bg-black">
|
||||
<Helmet>
|
||||
@@ -141,7 +142,7 @@ const EnterpriseHeroWithCTA = () => {
|
||||
>
|
||||
<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">
|
||||
<Building2 className="w-5 h-5 flex-shrink-0" />
|
||||
@@ -1353,6 +1354,7 @@ const EnterpriseCaseStudies = () => {
|
||||
|
||||
// Mid-Page CTA
|
||||
const EnterpriseInlineCTA = () => {
|
||||
const navigate = useNavigate();
|
||||
return (
|
||||
<section className="py-20">
|
||||
<div className="container mx-auto px-6 lg:px-8">
|
||||
@@ -1391,7 +1393,7 @@ const EnterpriseInlineCTA = () => {
|
||||
|
||||
<ShimmerButton
|
||||
className="text-xl px-10 py-5 rounded-2xl shadow-lg hover:shadow-xl"
|
||||
onClick={() => navigateTo("/start-a-project")}
|
||||
onClick={() => navigate("/start-a-project")}
|
||||
>
|
||||
<div className="inline-flex items-center gap-3">
|
||||
<MessageSquare className="w-6 h-6 flex-shrink-0" />
|
||||
@@ -1407,6 +1409,7 @@ const EnterpriseInlineCTA = () => {
|
||||
|
||||
// Hire Enterprise Talent
|
||||
const HireEnterpriseTalent = () => {
|
||||
const navigate = useNavigate();
|
||||
const talentTypes = [
|
||||
{
|
||||
title: "Enterprise Architects",
|
||||
@@ -1542,7 +1545,7 @@ const HireEnterpriseTalent = () => {
|
||||
>
|
||||
<div className="flex flex-col sm:flex-row gap-4 justify-center">
|
||||
<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">
|
||||
<Users className="w-5 h-5 flex-shrink-0" />
|
||||
@@ -1641,6 +1644,7 @@ const EnterpriseFAQs = () => {
|
||||
|
||||
// Final CTA Section
|
||||
const EnterpriseFinalCTA = () => {
|
||||
const navigate = useNavigate();
|
||||
return (
|
||||
<section className="py-20 relative overflow-hidden">
|
||||
<div className="container mx-auto px-6 lg:px-8 relative z-10">
|
||||
@@ -1693,7 +1697,7 @@ const EnterpriseFinalCTA = () => {
|
||||
>
|
||||
<ShimmerButton
|
||||
className="px-12 py-6 text-xl rounded-2xl shadow-2xl hover:shadow-accent/25"
|
||||
onClick={() => navigateTo("/start-a-project")}
|
||||
onClick={() => navigate("/start-a-project")}
|
||||
>
|
||||
<div className="inline-flex items-center gap-3">
|
||||
<Rocket className="w-6 h-6 flex-shrink-0" />
|
||||
@@ -1722,7 +1726,7 @@ const EnterpriseFinalCTA = () => {
|
||||
export const EnterpriseSoftwareSolutions = () => {
|
||||
return (
|
||||
<div className="dark min-h-screen">
|
||||
<Navigation />
|
||||
{/* <Navigation /> */}
|
||||
|
||||
{/* Hero Section */}
|
||||
<section className="bg-black">
|
||||
@@ -1734,6 +1738,11 @@ export const EnterpriseSoftwareSolutions = () => {
|
||||
<EnterpriseBenefits />
|
||||
</section>
|
||||
|
||||
{/* Case Studies */}
|
||||
<section className="bg-background">
|
||||
<EnterpriseCaseStudies />
|
||||
</section>
|
||||
|
||||
{/* Development Process */}
|
||||
<section className="bg-card">
|
||||
<EnterpriseProcess />
|
||||
@@ -1749,15 +1758,10 @@ export const EnterpriseSoftwareSolutions = () => {
|
||||
<EnterpriseTechStack />
|
||||
</section>
|
||||
|
||||
{/* Case Studies */}
|
||||
<section className="bg-background">
|
||||
<EnterpriseCaseStudies />
|
||||
</section>
|
||||
|
||||
{/* Mid-Page CTA */}
|
||||
<section className="bg-card">
|
||||
{/* <section className="bg-card">
|
||||
<EnterpriseInlineCTA />
|
||||
</section>
|
||||
</section> */}
|
||||
|
||||
{/* Hire Talent */}
|
||||
<section className="bg-background">
|
||||
@@ -1765,9 +1769,9 @@ export const EnterpriseSoftwareSolutions = () => {
|
||||
</section>
|
||||
|
||||
{/* FAQs */}
|
||||
<section className="bg-card">
|
||||
{/* <section className="bg-card">
|
||||
<EnterpriseFAQs />
|
||||
</section>
|
||||
</section> */}
|
||||
|
||||
{/* Final CTA */}
|
||||
<section className="bg-background">
|
||||
@@ -1776,7 +1780,7 @@ export const EnterpriseSoftwareSolutions = () => {
|
||||
|
||||
{/* Footer */}
|
||||
<section>
|
||||
<Footer />
|
||||
{/* <Footer /> */}
|
||||
</section>
|
||||
</div>
|
||||
);
|
||||
|
||||
@@ -470,7 +470,7 @@ const eventTicketingFAQs = [
|
||||
export const EventTicketingSolutions = () => {
|
||||
return (
|
||||
<div className="min-h-screen bg-[#0E0E0E]">
|
||||
<Navigation />
|
||||
{/* <Navigation /> */}
|
||||
|
||||
<HeroBanner
|
||||
category="Commerce & Consumer"
|
||||
@@ -511,7 +511,7 @@ export const EventTicketingSolutions = () => {
|
||||
<SplitCallToAction />
|
||||
</div>
|
||||
|
||||
<Footer />
|
||||
{/* <Footer /> */}
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
@@ -19,11 +19,12 @@ import {
|
||||
Phone,
|
||||
Mail,
|
||||
} from "lucide-react";
|
||||
import { navigateTo } from "../App";
|
||||
import { Helmet } from "react-helmet-async";
|
||||
import { useNavigate } from "react-router-dom";
|
||||
|
||||
export const FAQs = () => {
|
||||
const [searchTerm, setSearchTerm] = useState("");
|
||||
const navigate = useNavigate();
|
||||
|
||||
const faqCategories = [
|
||||
{
|
||||
@@ -187,7 +188,7 @@ export const FAQs = () => {
|
||||
|
||||
return (
|
||||
<div className="dark min-h-screen bg-background">
|
||||
<Navigation />
|
||||
{/* <Navigation /> */}
|
||||
|
||||
{/* Hero Section */}
|
||||
<section className="pt-24 pb-16 bg-background">
|
||||
@@ -484,7 +485,7 @@ export const FAQs = () => {
|
||||
<Button
|
||||
size="lg"
|
||||
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
|
||||
<ArrowRight className="ml-2 w-4 h-4" />
|
||||
@@ -501,7 +502,7 @@ export const FAQs = () => {
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<Footer />
|
||||
{/* <Footer /> */}
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
@@ -55,11 +55,12 @@ import { Badge } from "../components/ui/badge";
|
||||
import { Button } from "../components/ui/button";
|
||||
import { Card, CardContent } from "../components/ui/card";
|
||||
import { ShimmerButton } from "../components/ui/shimmer-button";
|
||||
import { navigateTo } from "@/App";
|
||||
import { useNavigate } from "react-router-dom";
|
||||
import { Helmet } from "react-helmet-async";
|
||||
|
||||
// FinTech & Banking Apps Hero Section
|
||||
const FinTechBankingAppsHero = () => {
|
||||
const navigate = useNavigate();
|
||||
return (
|
||||
<section className="relative py-20 overflow-hidden bg-black">
|
||||
<Helmet>
|
||||
@@ -150,7 +151,7 @@ const FinTechBankingAppsHero = () => {
|
||||
>
|
||||
<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">
|
||||
<MessageSquare className="w-5 h-5 flex-shrink-0" />
|
||||
@@ -293,7 +294,7 @@ const FinTechBankingAppsHero = () => {
|
||||
initial={{ opacity: 0, scale: 0 }}
|
||||
animate={{ opacity: 1, scale: 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
|
||||
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
|
||||
const FinTechBankingAppsInlineCTA = () => {
|
||||
const navigate = useNavigate();
|
||||
return (
|
||||
<section className="py-20">
|
||||
<div className="container mx-auto px-6 lg:px-8">
|
||||
@@ -1422,7 +1424,7 @@ const FinTechBankingAppsInlineCTA = () => {
|
||||
|
||||
<ShimmerButton
|
||||
className="text-xl px-10 py-5 rounded-2xl shadow-lg hover:shadow-xl"
|
||||
onClick={() => navigateTo("/start-a-project")}
|
||||
onClick={() => navigate("/start-a-project")}
|
||||
>
|
||||
<div className="inline-flex items-center gap-3">
|
||||
<MessageSquare className="w-6 h-6 flex-shrink-0" />
|
||||
@@ -1519,6 +1521,7 @@ const FinTechBankingAppsFAQs = () => {
|
||||
|
||||
// Final CTA Section
|
||||
const FinTechBankingAppsFinalCTA = () => {
|
||||
const navigate = useNavigate();
|
||||
return (
|
||||
<section className="py-20 relative overflow-hidden">
|
||||
<div className="container mx-auto px-6 lg:px-8 relative z-10">
|
||||
@@ -1572,7 +1575,7 @@ const FinTechBankingAppsFinalCTA = () => {
|
||||
>
|
||||
<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">
|
||||
<Calendar className="w-6 h-6 flex-shrink-0" />
|
||||
@@ -1601,7 +1604,7 @@ const FinTechBankingAppsFinalCTA = () => {
|
||||
export const FinTechBankingApps = () => {
|
||||
return (
|
||||
<div className="dark min-h-screen">
|
||||
<Navigation />
|
||||
{/* <Navigation /> */}
|
||||
|
||||
{/* Hero Section */}
|
||||
<section className="bg-black">
|
||||
@@ -1660,7 +1663,7 @@ export const FinTechBankingApps = () => {
|
||||
|
||||
{/* Footer */}
|
||||
<section className="bg-background">
|
||||
<Footer />
|
||||
{/* <Footer /> */}
|
||||
</section>
|
||||
</div>
|
||||
);
|
||||
|
||||
@@ -16,11 +16,12 @@ import { Navigation } from "../components/Navigation";
|
||||
import { Badge } from "../components/ui/badge";
|
||||
import { Button } from "../components/ui/button";
|
||||
import { ShimmerButton } from "../components/ui/shimmer-button";
|
||||
import { navigateTo } from "@/App";
|
||||
import { useNavigate } from "react-router-dom";
|
||||
import { Helmet } from "react-helmet-async";
|
||||
|
||||
// Fitness & Wellness Hero Section
|
||||
const FitnessWellnessHero = () => {
|
||||
const navigate = useNavigate();
|
||||
return (
|
||||
<section className="relative py-20 overflow-hidden bg-black">
|
||||
<Helmet>
|
||||
@@ -108,7 +109,7 @@ const FitnessWellnessHero = () => {
|
||||
>
|
||||
<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">
|
||||
<MessageSquare className="w-5 h-5 flex-shrink-0" />
|
||||
@@ -387,7 +388,7 @@ const FitnessWellnessHero = () => {
|
||||
export const FitnessWellnessPlatforms = () => {
|
||||
return (
|
||||
<div className="dark min-h-screen">
|
||||
<Navigation />
|
||||
{/* <Navigation /> */}
|
||||
|
||||
<section className="bg-black">
|
||||
<FitnessWellnessHero />
|
||||
@@ -396,7 +397,7 @@ export const FitnessWellnessPlatforms = () => {
|
||||
{/* Additional sections would go here following the same pattern as other industry pages */}
|
||||
|
||||
<section className="bg-card">
|
||||
<Footer />
|
||||
{/* <Footer /> */}
|
||||
</section>
|
||||
</div>
|
||||
);
|
||||
|
||||
@@ -464,7 +464,7 @@ const foodDeliveryFAQs = [
|
||||
export const FoodOrderingDelivery = () => {
|
||||
return (
|
||||
<div className="min-h-screen bg-[#0E0E0E]">
|
||||
<Navigation />
|
||||
{/* <Navigation /> */}
|
||||
|
||||
<HeroBanner
|
||||
category="Commerce & Consumer"
|
||||
@@ -505,7 +505,7 @@ export const FoodOrderingDelivery = () => {
|
||||
<SplitCallToAction />
|
||||
</div>
|
||||
|
||||
<Footer />
|
||||
{/* <Footer /> */}
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
@@ -7,8 +7,8 @@ import { Card, CardContent } from "../components/ui/card";
|
||||
import { Avatar, AvatarFallback, AvatarImage } from "../components/ui/avatar";
|
||||
import { Separator } from "../components/ui/separator";
|
||||
import { Calendar, Clock, User, ArrowRight, Share2, Linkedin, Twitter, ExternalLink, Tag } from "lucide-react";
|
||||
import { navigateTo } from "../App";
|
||||
import { ImageWithFallback } from "../components/figma/ImageWithFallback";
|
||||
import { useNavigate } from "react-router-dom";
|
||||
|
||||
const articleData = {
|
||||
id: "future-of-ai-healthcare",
|
||||
@@ -161,9 +161,11 @@ export const FutureOfAIHealthcare = () => {
|
||||
}
|
||||
};
|
||||
|
||||
const navigate = useNavigate();
|
||||
|
||||
return (
|
||||
<div className="dark min-h-screen bg-background">
|
||||
<Navigation />
|
||||
{/* <Navigation /> */}
|
||||
|
||||
{/* Hero Section */}
|
||||
<section className="pt-24 pb-16 bg-background">
|
||||
@@ -171,11 +173,11 @@ export const FutureOfAIHealthcare = () => {
|
||||
<div className="max-w-4xl mx-auto">
|
||||
{/* Breadcrumb */}
|
||||
<div className="flex items-center gap-2 text-sm text-muted-foreground mb-8">
|
||||
<button onClick={() => navigateTo('/')} className="hover:text-white transition-colors">
|
||||
<button onClick={() => navigate('/')} className="hover:text-white transition-colors">
|
||||
Home
|
||||
</button>
|
||||
<span>/</span>
|
||||
<button onClick={() => navigateTo('/resources/blog')} className="hover:text-white transition-colors">
|
||||
<button onClick={() => navigate('/resources/blog')} className="hover:text-white transition-colors">
|
||||
Blog
|
||||
</button>
|
||||
<span>/</span>
|
||||
@@ -342,7 +344,7 @@ export const FutureOfAIHealthcare = () => {
|
||||
<div
|
||||
key={article.id}
|
||||
className="group cursor-pointer"
|
||||
onClick={() => navigateTo(`/articles/${article.id}`)}
|
||||
onClick={() => navigate(`/articles/${article.id}`)}
|
||||
>
|
||||
<div className="aspect-[16/10] overflow-hidden rounded-lg mb-3">
|
||||
<ImageWithFallback
|
||||
@@ -368,7 +370,7 @@ export const FutureOfAIHealthcare = () => {
|
||||
<Button
|
||||
variant="outline"
|
||||
className="w-full border-white/20 text-white hover:bg-white/10"
|
||||
onClick={() => navigateTo('/resources/blog')}
|
||||
onClick={() => navigate('/resources/blog')}
|
||||
>
|
||||
View All Articles
|
||||
<ArrowRight className="w-4 h-4 ml-2" />
|
||||
@@ -386,7 +388,7 @@ export const FutureOfAIHealthcare = () => {
|
||||
</p>
|
||||
<Button
|
||||
className="w-full bg-[#E5195E] hover:bg-[#E5195E]/90 text-white"
|
||||
onClick={() => navigateTo('/contact')}
|
||||
onClick={() => navigate('/contact')}
|
||||
>
|
||||
Get In Touch
|
||||
</Button>
|
||||
@@ -413,7 +415,7 @@ export const FutureOfAIHealthcare = () => {
|
||||
<Button
|
||||
size="lg"
|
||||
className="bg-[#E5195E] hover:bg-[#E5195E]/90 text-white"
|
||||
onClick={() => navigateTo('/contact')}
|
||||
onClick={() => navigate('/contact')}
|
||||
>
|
||||
Start Your AI Project
|
||||
<ArrowRight className="ml-2 w-4 h-4" />
|
||||
@@ -422,7 +424,7 @@ export const FutureOfAIHealthcare = () => {
|
||||
size="lg"
|
||||
variant="outline"
|
||||
className="border-white/20 text-white hover:bg-white/10"
|
||||
onClick={() => navigateTo('/resources/blog')}
|
||||
onClick={() => navigate('/resources/blog')}
|
||||
>
|
||||
Read More Articles
|
||||
</Button>
|
||||
@@ -432,7 +434,7 @@ export const FutureOfAIHealthcare = () => {
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<Footer />
|
||||
{/* <Footer /> */}
|
||||
</div>
|
||||
);
|
||||
};
|
||||
@@ -42,11 +42,13 @@ import { Badge } from "../components/ui/badge";
|
||||
import { Button } from "../components/ui/button";
|
||||
import { Card, CardContent } from "../components/ui/card";
|
||||
import { ShimmerButton } from "../components/ui/shimmer-button";
|
||||
import { navigateTo } from "@/App";
|
||||
import { useNavigate } from "react-router-dom";
|
||||
import { Helmet } from "react-helmet-async";
|
||||
import { AIStrategyTargetAudience } from "./AIStrategyConsulting";
|
||||
|
||||
// Gen AI Integration Hero Section
|
||||
const GenAIIntegrationHeroWithCTA = () => {
|
||||
const navigate = useNavigate();
|
||||
return (
|
||||
<section className="relative py-20 overflow-hidden bg-black">
|
||||
<Helmet>
|
||||
@@ -135,7 +137,7 @@ const GenAIIntegrationHeroWithCTA = () => {
|
||||
>
|
||||
<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">
|
||||
<Sparkles className="w-5 h-5 flex-shrink-0" />
|
||||
@@ -1173,6 +1175,7 @@ const GenAICaseStudies = () => {
|
||||
|
||||
// Mid-Page CTA
|
||||
const GenAIInlineCTA = () => {
|
||||
const navigate = useNavigate();
|
||||
return (
|
||||
<section className="py-20 bg-black">
|
||||
<div className="container mx-auto px-6 lg:px-8">
|
||||
@@ -1211,7 +1214,7 @@ const GenAIInlineCTA = () => {
|
||||
|
||||
<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">
|
||||
<Lightbulb className="w-6 h-6 flex-shrink-0" />
|
||||
@@ -1480,6 +1483,7 @@ const GenAIFAQs = () => {
|
||||
|
||||
// Final CTA Section
|
||||
const GenAIFinalCTA = () => {
|
||||
const navigate = useNavigate();
|
||||
return (
|
||||
<section className="py-20 relative overflow-hidden">
|
||||
<div className="container mx-auto px-6 lg:px-8 relative z-10">
|
||||
@@ -1532,7 +1536,7 @@ const GenAIFinalCTA = () => {
|
||||
>
|
||||
<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">
|
||||
<Sparkles className="w-6 h-6 flex-shrink-0" />
|
||||
@@ -1561,7 +1565,7 @@ const GenAIFinalCTA = () => {
|
||||
export const GenAIIntegrationDigitalProducts = () => {
|
||||
return (
|
||||
<div className="dark min-h-screen">
|
||||
<Navigation />
|
||||
{/* <Navigation /> */}
|
||||
|
||||
{/* Hero Section */}
|
||||
<section className="bg-black">
|
||||
@@ -1585,7 +1589,7 @@ export const GenAIIntegrationDigitalProducts = () => {
|
||||
|
||||
{/* Tech Stack */}
|
||||
<section className="bg-card">
|
||||
<GenAITechStack />
|
||||
<AIStrategyTargetAudience />
|
||||
</section>
|
||||
|
||||
{/* Case Studies */}
|
||||
@@ -1615,7 +1619,7 @@ export const GenAIIntegrationDigitalProducts = () => {
|
||||
|
||||
{/* Footer */}
|
||||
<section className="bg-card">
|
||||
<Footer />
|
||||
{/* <Footer /> */}
|
||||
</section>
|
||||
</div>
|
||||
);
|
||||
|
||||
@@ -5,10 +5,10 @@ import { Footer } from "../components/Footer";
|
||||
import { Button } from "../components/ui/button";
|
||||
import { GridPattern } from "../components/GridPattern";
|
||||
import { ImageWithFallback } from "../components/figma/ImageWithFallback";
|
||||
import { navigateTo } from "../App";
|
||||
import { Badge } from "@/components/ui/badge";
|
||||
import { Card, CardContent } from "@/components/ui/card";
|
||||
import goodTimesLogo from "../src/images/good-times-logo.webp";
|
||||
import { useNavigate } from "react-router-dom";
|
||||
|
||||
// Technology to icon mapping
|
||||
const getTechIcon = (tech: string) => {
|
||||
@@ -202,9 +202,10 @@ const futureRoadmap = [
|
||||
];
|
||||
|
||||
export const GoodTimesProject = () => {
|
||||
const navigate = useNavigate();
|
||||
return (
|
||||
<div className="dark min-h-screen bg-background">
|
||||
<Navigation />
|
||||
{/* <Navigation /> */}
|
||||
|
||||
{/* Section 1: Hero with Heading, Subheading, and Image */}
|
||||
<section className="relative pt-32 pb-24 bg-background overflow-hidden">
|
||||
@@ -220,7 +221,7 @@ export const GoodTimesProject = () => {
|
||||
>
|
||||
<Button
|
||||
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"
|
||||
>
|
||||
<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">
|
||||
<Button
|
||||
size="lg"
|
||||
onClick={() => navigateTo('/contact-us')}
|
||||
onClick={() => navigate('/contact-us')}
|
||||
className="bg-accent hover:bg-accent/90 text-accent-foreground"
|
||||
>
|
||||
Contact Our Team
|
||||
@@ -1065,7 +1066,7 @@ export const GoodTimesProject = () => {
|
||||
<Button
|
||||
size="lg"
|
||||
variant="outline"
|
||||
onClick={() => navigateTo('/case-studies')}
|
||||
onClick={() => navigate('/case-studies')}
|
||||
className="border-accent/30 text-accent hover:bg-accent/10"
|
||||
>
|
||||
View More Case Studies
|
||||
@@ -1076,7 +1077,7 @@ export const GoodTimesProject = () => {
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<Footer />
|
||||
{/* <Footer /> */}
|
||||
</div>
|
||||
);
|
||||
};
|
||||
@@ -45,11 +45,12 @@ import { Badge } from "../components/ui/badge";
|
||||
import { Button } from "../components/ui/button";
|
||||
import { Card, CardContent } from "../components/ui/card";
|
||||
import { ShimmerButton } from "../components/ui/shimmer-button";
|
||||
import { navigateTo } from "@/App";
|
||||
import { useNavigate } from "react-router-dom";
|
||||
import { Helmet } from "react-helmet-async";
|
||||
|
||||
// HealthTech Hero Section
|
||||
const HealthTechHero = () => {
|
||||
const navigate = useNavigate();
|
||||
return (
|
||||
<section className="relative py-20 overflow-hidden bg-black">
|
||||
<Helmet>
|
||||
@@ -140,7 +141,7 @@ const HealthTechHero = () => {
|
||||
>
|
||||
<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">
|
||||
<MessageSquare className="w-5 h-5 flex-shrink-0" />
|
||||
@@ -1224,6 +1225,7 @@ const HealthTechTestimonials = () => {
|
||||
|
||||
// Mid-Page Lead Capture CTA
|
||||
const HealthTechInlineCTA = () => {
|
||||
const navigate = useNavigate();
|
||||
return (
|
||||
<section className="py-20">
|
||||
<div className="container mx-auto px-6 lg:px-8">
|
||||
@@ -1262,7 +1264,7 @@ const HealthTechInlineCTA = () => {
|
||||
|
||||
<ShimmerButton
|
||||
className="text-xl px-10 py-5 rounded-2xl shadow-lg hover:shadow-xl"
|
||||
onClick={() => navigateTo("/start-a-project")}
|
||||
onClick={() => navigate("/start-a-project")}
|
||||
>
|
||||
<div className="inline-flex items-center gap-3">
|
||||
<MessageSquare className="w-6 h-6 flex-shrink-0" />
|
||||
@@ -1359,6 +1361,7 @@ const HealthTechFAQs = () => {
|
||||
|
||||
// Final CTA Section
|
||||
const HealthTechFinalCTA = () => {
|
||||
const navigate = useNavigate();
|
||||
return (
|
||||
<section className="py-20 relative overflow-hidden">
|
||||
<div className="container mx-auto px-6 lg:px-8 relative z-10">
|
||||
@@ -1412,7 +1415,7 @@ const HealthTechFinalCTA = () => {
|
||||
>
|
||||
<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">
|
||||
<Calendar className="w-6 h-6 flex-shrink-0" />
|
||||
@@ -1441,7 +1444,7 @@ const HealthTechFinalCTA = () => {
|
||||
export const HealthTechApplications = () => {
|
||||
return (
|
||||
<div className="dark min-h-screen">
|
||||
<Navigation />
|
||||
{/* <Navigation /> */}
|
||||
|
||||
{/* Hero Section */}
|
||||
<section className="bg-black">
|
||||
@@ -1495,7 +1498,7 @@ export const HealthTechApplications = () => {
|
||||
|
||||
{/* Footer */}
|
||||
<section className="bg-card">
|
||||
<Footer />
|
||||
{/* <Footer /> */}
|
||||
</section>
|
||||
</div>
|
||||
);
|
||||
|
||||
@@ -139,7 +139,7 @@ const hireAPIBackendDevelopersData = {
|
||||
export function HireAPIBackendDevelopers() {
|
||||
return (
|
||||
<div className="dark min-h-screen bg-background">
|
||||
<Navigation />
|
||||
{/* <Navigation /> */}
|
||||
|
||||
{/* Hero Section with BackendVector */}
|
||||
<HireTalentHeroBanner
|
||||
@@ -189,7 +189,7 @@ export function HireAPIBackendDevelopers() {
|
||||
<SplitCallToAction />
|
||||
</section>
|
||||
|
||||
<Footer />
|
||||
{/* <Footer /> */}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -139,7 +139,7 @@ const hireAdminPanelDevelopersData = {
|
||||
export function HireAdminPanelDevelopers() {
|
||||
return (
|
||||
<div className="dark min-h-screen bg-background">
|
||||
<Navigation />
|
||||
{/* <Navigation /> */}
|
||||
|
||||
{/* Hero Section with DashboardVector */}
|
||||
<HireTalentHeroBanner
|
||||
@@ -189,7 +189,7 @@ export function HireAdminPanelDevelopers() {
|
||||
<SplitCallToAction />
|
||||
</section>
|
||||
|
||||
<Footer />
|
||||
{/* <Footer /> */}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -139,7 +139,7 @@ const hireAndroidAppDevelopersData = {
|
||||
export function HireAndroidAppDevelopers() {
|
||||
return (
|
||||
<div className="dark min-h-screen bg-background">
|
||||
<Navigation />
|
||||
{/* <Navigation /> */}
|
||||
|
||||
{/* Hero Section with MobileAppVector */}
|
||||
<HireTalentHeroBanner
|
||||
@@ -189,7 +189,7 @@ export function HireAndroidAppDevelopers() {
|
||||
<SplitCallToAction />
|
||||
</section>
|
||||
|
||||
<Footer />
|
||||
{/* <Footer /> */}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -17,12 +17,13 @@ import {
|
||||
Code,
|
||||
Users,
|
||||
} from "lucide-react";
|
||||
import { navigateTo } from "@/App";
|
||||
import { useNavigate } from "react-router-dom";
|
||||
import { Helmet } from "react-helmet-async";
|
||||
import { BackendVector } from "@/components/vectors";
|
||||
import { HireTalentHeroBanner } from "@/components/HireTalentHeroBanner";
|
||||
|
||||
export const HireBackendDevelopers = () => {
|
||||
const navigate = useNavigate();
|
||||
const expertise = [
|
||||
{
|
||||
category: "Languages & Frameworks",
|
||||
@@ -215,7 +216,7 @@ export const HireBackendDevelopers = () => {
|
||||
|
||||
return (
|
||||
<div className="dark min-h-screen bg-background">
|
||||
<Navigation />
|
||||
{/* <Navigation /> */}
|
||||
|
||||
<Helmet>
|
||||
{/* Page Title and Meta Description */}
|
||||
@@ -494,7 +495,7 @@ export const HireBackendDevelopers = () => {
|
||||
<Button
|
||||
size="lg"
|
||||
className="bg-[#E5195E] hover:bg-[#E5195E]/90 text-white"
|
||||
onClick={() => navigateTo("/start-a-project")}
|
||||
onClick={() => navigate("/start-a-project")}
|
||||
>
|
||||
Start Your Project
|
||||
<ArrowRight className="ml-2 w-4 h-4" />
|
||||
@@ -511,7 +512,7 @@ export const HireBackendDevelopers = () => {
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<Footer />
|
||||
{/* <Footer /> */}
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
@@ -139,7 +139,7 @@ const hireClickablePrototypesDevelopersData = {
|
||||
export function HireClickablePrototypesDevelopers() {
|
||||
return (
|
||||
<div className="dark min-h-screen bg-background">
|
||||
<Navigation />
|
||||
{/* <Navigation /> */}
|
||||
|
||||
{/* Hero Section with ProjectTimelineVector */}
|
||||
<HireTalentHeroBanner
|
||||
@@ -189,7 +189,7 @@ export function HireClickablePrototypesDevelopers() {
|
||||
<SplitCallToAction />
|
||||
</section>
|
||||
|
||||
<Footer />
|
||||
{/* <Footer /> */}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -139,7 +139,7 @@ const hireCrossPlatformDevelopersData = {
|
||||
export function HireCrossPlatformDevelopers() {
|
||||
return (
|
||||
<div className="dark min-h-screen bg-background">
|
||||
<Navigation />
|
||||
{/* <Navigation /> */}
|
||||
|
||||
{/* Hero Section with TechStackVisualization */}
|
||||
<HireTalentHeroBanner
|
||||
@@ -189,7 +189,7 @@ export function HireCrossPlatformDevelopers() {
|
||||
<SplitCallToAction />
|
||||
</section>
|
||||
|
||||
<Footer />
|
||||
{/* <Footer /> */}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -139,7 +139,7 @@ const hireCustomWebAppDevelopersData = {
|
||||
export function HireCustomWebAppDevelopers() {
|
||||
return (
|
||||
<div className="dark min-h-screen bg-background">
|
||||
<Navigation />
|
||||
{/* <Navigation /> */}
|
||||
|
||||
{/* Hero Section with FrontendVector */}
|
||||
<HireTalentHeroBanner
|
||||
@@ -189,7 +189,7 @@ export function HireCustomWebAppDevelopers() {
|
||||
<SplitCallToAction />
|
||||
</section>
|
||||
|
||||
<Footer />
|
||||
{/* <Footer /> */}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -139,7 +139,7 @@ const hireDesignThinkingWorkshopsDevelopersData = {
|
||||
export function HireDesignThinkingWorkshopsDevelopers() {
|
||||
return (
|
||||
<div className="dark min-h-screen bg-background">
|
||||
<Navigation />
|
||||
{/* <Navigation /> */}
|
||||
|
||||
{/* Hero Section with TeamCollaborationVector */}
|
||||
<HireTalentHeroBanner
|
||||
@@ -189,7 +189,7 @@ export function HireDesignThinkingWorkshopsDevelopers() {
|
||||
<SplitCallToAction />
|
||||
</section>
|
||||
|
||||
<Footer />
|
||||
{/* <Footer /> */}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -139,7 +139,7 @@ const hireEcommercePlatformDevelopersData = {
|
||||
export function HireEcommercePlatformDevelopers() {
|
||||
return (
|
||||
<div className="dark min-h-screen bg-background">
|
||||
<Navigation />
|
||||
{/* <Navigation /> */}
|
||||
|
||||
{/* Hero Section with FullStackVector */}
|
||||
<HireTalentHeroBanner
|
||||
@@ -189,7 +189,7 @@ export function HireEcommercePlatformDevelopers() {
|
||||
<SplitCallToAction />
|
||||
</section>
|
||||
|
||||
<Footer />
|
||||
{/* <Footer /> */}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -139,7 +139,7 @@ const hireEnterpriseSoftwareDevelopersData = {
|
||||
export function HireEnterpriseSoftwareDevelopers() {
|
||||
return (
|
||||
<div className="dark min-h-screen bg-background">
|
||||
<Navigation />
|
||||
{/* <Navigation /> */}
|
||||
|
||||
{/* Hero Section with FullStackVector */}
|
||||
<HireTalentHeroBanner
|
||||
@@ -189,7 +189,7 @@ export function HireEnterpriseSoftwareDevelopers() {
|
||||
<SplitCallToAction />
|
||||
</section>
|
||||
|
||||
<Footer />
|
||||
{/* <Footer /> */}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -16,12 +16,13 @@ import {
|
||||
Star,
|
||||
Palette,
|
||||
} from "lucide-react";
|
||||
import { navigateTo } from "@/App";
|
||||
import { useNavigate } from "react-router-dom";
|
||||
import { Helmet } from "react-helmet-async";
|
||||
import { FrontendVector } from "@/components/vectors";
|
||||
import { HireTalentHeroBanner } from "@/components/HireTalentHeroBanner";
|
||||
|
||||
export const HireFrontendDevelopers = () => {
|
||||
const navigate = useNavigate();
|
||||
const expertise = [
|
||||
{
|
||||
category: "JavaScript Frameworks",
|
||||
@@ -148,7 +149,7 @@ export const HireFrontendDevelopers = () => {
|
||||
|
||||
return (
|
||||
<div className="dark min-h-screen bg-background">
|
||||
<Navigation />
|
||||
{/* <Navigation /> */}
|
||||
|
||||
<Helmet>
|
||||
{/* Page Title and Meta Description */}
|
||||
@@ -383,7 +384,7 @@ export const HireFrontendDevelopers = () => {
|
||||
<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
|
||||
<ArrowRight className="ml-2 w-4 h-4" />
|
||||
@@ -400,7 +401,7 @@ export const HireFrontendDevelopers = () => {
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<Footer />
|
||||
{/* <Footer /> */}
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
@@ -18,12 +18,13 @@ import {
|
||||
Star,
|
||||
Layers,
|
||||
} from "lucide-react";
|
||||
import { navigateTo } from "@/App";
|
||||
import { useNavigate } from "react-router-dom";
|
||||
import { Helmet } from "react-helmet-async";
|
||||
import { HireTalentHeroBanner } from "@/components/HireTalentHeroBanner";
|
||||
import { DeveloperSkillsVector } from "@/components/vectors";
|
||||
|
||||
export const HireFullStackDevelopers = () => {
|
||||
const navigate = useNavigate();
|
||||
const expertise = [
|
||||
{
|
||||
category: "Frontend Technologies",
|
||||
@@ -157,7 +158,7 @@ export const HireFullStackDevelopers = () => {
|
||||
|
||||
return (
|
||||
<div className="dark min-h-screen bg-background">
|
||||
<Navigation />
|
||||
{/* <Navigation /> */}
|
||||
|
||||
<Helmet>
|
||||
{/* Page Title and Meta Description */}
|
||||
@@ -434,7 +435,7 @@ export const HireFullStackDevelopers = () => {
|
||||
<Button
|
||||
size="lg"
|
||||
className="bg-[#E5195E] hover:bg-[#E5195E]/90 text-white"
|
||||
onClick={() => navigateTo("/start-a-project")}
|
||||
onClick={() => navigate("/start-a-project")}
|
||||
>
|
||||
Start Your Project
|
||||
<ArrowRight className="ml-2 w-4 h-4" />
|
||||
@@ -451,7 +452,7 @@ export const HireFullStackDevelopers = () => {
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<Footer />
|
||||
{/* <Footer /> */}
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
@@ -5,12 +5,13 @@ import { Button } from "../components/ui/button";
|
||||
import { Badge } from "../components/ui/badge";
|
||||
import { Card, CardContent } from "../components/ui/card";
|
||||
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 { HireTalentHeroBanner } from "@/components/HireTalentHeroBanner";
|
||||
import { MobileAppVector } from "@/components/vectors";
|
||||
|
||||
export const HireMobileAppDevelopers = () => {
|
||||
const navigate = useNavigate();
|
||||
const expertise = [
|
||||
{
|
||||
icon: Apple,
|
||||
@@ -115,7 +116,7 @@ export const HireMobileAppDevelopers = () => {
|
||||
|
||||
return (
|
||||
<div className="dark min-h-screen bg-background">
|
||||
<Navigation />
|
||||
{/* <Navigation /> */}
|
||||
<Helmet>
|
||||
{/* Page Title and Meta Description */}
|
||||
<title>Hire Mobile App Developers | Expert Talent at WDI</title>
|
||||
@@ -326,7 +327,7 @@ export const HireMobileAppDevelopers = () => {
|
||||
</p>
|
||||
<div className="flex flex-col sm:flex-row gap-4 justify-center">
|
||||
<Button size="lg" className="bg-[#E5195E] hover:bg-[#E5195E]/90 text-white"
|
||||
onClick={() => navigateTo("/start-a-project")}
|
||||
onClick={() => navigate("/start-a-project")}
|
||||
>
|
||||
Get Started Today
|
||||
<ArrowRight className="ml-2 w-4 h-4" />
|
||||
@@ -339,7 +340,7 @@ export const HireMobileAppDevelopers = () => {
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<Footer />
|
||||
{/* <Footer /> */}
|
||||
</div>
|
||||
);
|
||||
};
|
||||
@@ -139,7 +139,7 @@ const hireNativeAppDevelopersData = {
|
||||
export function HireNativeAppDevelopers() {
|
||||
return (
|
||||
<div className="dark min-h-screen bg-background">
|
||||
<Navigation />
|
||||
{/* <Navigation /> */}
|
||||
|
||||
{/* Hero Section with DeveloperSkillsVector */}
|
||||
<HireTalentHeroBanner
|
||||
@@ -189,7 +189,7 @@ export function HireNativeAppDevelopers() {
|
||||
<SplitCallToAction />
|
||||
</section>
|
||||
|
||||
<Footer />
|
||||
{/* <Footer /> */}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -139,7 +139,7 @@ const hirePWADevelopersData = {
|
||||
export function HirePWADevelopers() {
|
||||
return (
|
||||
<div className="dark min-h-screen bg-background">
|
||||
<Navigation />
|
||||
{/* <Navigation /> */}
|
||||
|
||||
{/* Hero Section with FrontendVector */}
|
||||
<HireTalentHeroBanner
|
||||
@@ -189,7 +189,7 @@ export function HirePWADevelopers() {
|
||||
<SplitCallToAction />
|
||||
</section>
|
||||
|
||||
<Footer />
|
||||
{/* <Footer /> */}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -139,7 +139,7 @@ const hireProductModernizationDevelopersData = {
|
||||
export function HireProductModernizationDevelopers() {
|
||||
return (
|
||||
<div className="dark min-h-screen bg-background">
|
||||
<Navigation />
|
||||
{/* <Navigation /> */}
|
||||
|
||||
{/* Hero Section with ProjectTimelineVector */}
|
||||
<HireTalentHeroBanner
|
||||
@@ -189,7 +189,7 @@ export function HireProductModernizationDevelopers() {
|
||||
<SplitCallToAction />
|
||||
</section>
|
||||
|
||||
<Footer />
|
||||
{/* <Footer /> */}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -17,12 +17,13 @@ import {
|
||||
Activity,
|
||||
Search,
|
||||
} from "lucide-react";
|
||||
import { navigateTo } from "@/App";
|
||||
import { useNavigate } from "react-router-dom";
|
||||
import { Helmet } from "react-helmet-async";
|
||||
import { QATestingVector } from "@/components/vectors";
|
||||
import { HireTalentHeroBanner } from "@/components/HireTalentHeroBanner";
|
||||
|
||||
export const HireQAEngineers = () => {
|
||||
const navigate = useNavigate();
|
||||
const expertise = [
|
||||
{
|
||||
category: "Manual Testing",
|
||||
@@ -222,7 +223,7 @@ export const HireQAEngineers = () => {
|
||||
|
||||
return (
|
||||
<div className="dark min-h-screen bg-background">
|
||||
<Navigation />
|
||||
{/* <Navigation /> */}
|
||||
|
||||
<Helmet>
|
||||
{/* Page Title and Meta Description */}
|
||||
@@ -410,7 +411,7 @@ export const HireQAEngineers = () => {
|
||||
<Button
|
||||
size="lg"
|
||||
className="bg-[#E5195E] hover:bg-[#E5195E]/90 text-white"
|
||||
onClick={() => navigateTo("/start-a-project")}
|
||||
onClick={() => navigate("/start-a-project")}
|
||||
>
|
||||
Start Quality Assurance
|
||||
<ArrowRight className="ml-2 w-4 h-4" />
|
||||
@@ -427,7 +428,7 @@ export const HireQAEngineers = () => {
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<Footer />
|
||||
{/* <Footer /> */}
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
@@ -139,7 +139,7 @@ const hireSaaSProductDevelopersData = {
|
||||
export function HireSaaSProductDevelopers() {
|
||||
return (
|
||||
<div className="dark min-h-screen bg-background">
|
||||
<Navigation />
|
||||
{/* <Navigation /> */}
|
||||
|
||||
{/* Hero Section with TechStackVisualization */}
|
||||
<HireTalentHeroBanner
|
||||
@@ -189,7 +189,7 @@ export function HireSaaSProductDevelopers() {
|
||||
<SplitCallToAction />
|
||||
</section>
|
||||
|
||||
<Footer />
|
||||
{/* <Footer /> */}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -139,7 +139,7 @@ const hireSystemArchitectureDevOpsDevelopersData = {
|
||||
export function HireSystemArchitectureDevOpsDevelopers() {
|
||||
return (
|
||||
<div className="dark min-h-screen bg-background">
|
||||
<Navigation />
|
||||
{/* <Navigation /> */}
|
||||
|
||||
{/* Hero Section with BackendVector */}
|
||||
<HireTalentHeroBanner
|
||||
@@ -189,7 +189,7 @@ export function HireSystemArchitectureDevOpsDevelopers() {
|
||||
<SplitCallToAction />
|
||||
</section>
|
||||
|
||||
<Footer />
|
||||
{/* <Footer /> */}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -5,10 +5,11 @@ import { Button } from "../components/ui/button";
|
||||
import { Badge } from "../components/ui/badge";
|
||||
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 { navigateTo } from "../App";
|
||||
import { Helmet } from "react-helmet-async";
|
||||
import { useNavigate } from "react-router-dom";
|
||||
|
||||
export const HireTalent = () => {
|
||||
const navigate = useNavigate();
|
||||
const talentCategories = [
|
||||
{
|
||||
title: "Mobile App Developers",
|
||||
@@ -107,7 +108,7 @@ export const HireTalent = () => {
|
||||
|
||||
return (
|
||||
<div className="dark min-h-screen bg-background">
|
||||
<Navigation />
|
||||
{/* <Navigation /> */}
|
||||
|
||||
{/* Hero Section */}
|
||||
<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.
|
||||
</p>
|
||||
<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">
|
||||
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">
|
||||
{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">
|
||||
<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>
|
||||
<div className="flex flex-col sm:flex-row gap-4 justify-center">
|
||||
<Button size="lg" className="bg-[#E5195E] hover:bg-[#E5195E]/90 text-white"
|
||||
onClick={() => navigateTo("/start-a-project")}
|
||||
onClick={() => navigate("/start-a-project")}
|
||||
>
|
||||
Start Hiring Now
|
||||
<ArrowRight className="ml-2 w-4 h-4" />
|
||||
@@ -371,7 +372,7 @@ export const HireTalent = () => {
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<Footer />
|
||||
{/* <Footer /> */}
|
||||
</div>
|
||||
);
|
||||
};
|
||||
@@ -139,7 +139,7 @@ const hireThirdPartyIntegrationsDevelopersData = {
|
||||
export function HireThirdPartyIntegrationsDevelopers() {
|
||||
return (
|
||||
<div className="dark min-h-screen bg-background">
|
||||
<Navigation />
|
||||
{/* <Navigation /> */}
|
||||
|
||||
{/* Hero Section with TeamCollaborationVector */}
|
||||
<HireTalentHeroBanner
|
||||
@@ -189,7 +189,7 @@ export function HireThirdPartyIntegrationsDevelopers() {
|
||||
<SplitCallToAction />
|
||||
</section>
|
||||
|
||||
<Footer />
|
||||
{/* <Footer /> */}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -16,12 +16,13 @@ import {
|
||||
MousePointer2,
|
||||
TestTube,
|
||||
} from "lucide-react";
|
||||
import { navigateTo } from "@/App";
|
||||
import { useNavigate } from "react-router-dom";
|
||||
import { Helmet } from "react-helmet-async";
|
||||
import { UIUXVector } from "@/components/vectors";
|
||||
import { HireTalentHeroBanner } from "@/components/HireTalentHeroBanner";
|
||||
|
||||
export const HireUIUXDesigners = () => {
|
||||
const navigate = useNavigate();
|
||||
const expertise = [
|
||||
{
|
||||
category: "User Research & Analysis",
|
||||
@@ -199,7 +200,7 @@ export const HireUIUXDesigners = () => {
|
||||
|
||||
return (
|
||||
<div className="dark min-h-screen bg-background">
|
||||
<Navigation />
|
||||
{/* <Navigation /> */}
|
||||
|
||||
<Helmet>
|
||||
{/* Page Title and Meta Description */}
|
||||
@@ -475,7 +476,7 @@ export const HireUIUXDesigners = () => {
|
||||
<Button
|
||||
size="lg"
|
||||
className="bg-[#E5195E] hover:bg-[#E5195E]/90 text-white"
|
||||
onClick={() => navigateTo("/start-a-project")}
|
||||
onClick={() => navigate("/start-a-project")}
|
||||
>
|
||||
Start Your Design Journey
|
||||
<ArrowRight className="ml-2 w-4 h-4" />
|
||||
@@ -492,7 +493,7 @@ export const HireUIUXDesigners = () => {
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<Footer />
|
||||
{/* <Footer /> */}
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
@@ -139,7 +139,7 @@ const hireUserResearchTestingDevelopersData = {
|
||||
export function HireUserResearchTestingDevelopers() {
|
||||
return (
|
||||
<div className="dark min-h-screen bg-background">
|
||||
<Navigation />
|
||||
{/* <Navigation /> */}
|
||||
|
||||
{/* Hero Section with DeveloperSkillsVector */}
|
||||
<HireTalentHeroBanner
|
||||
@@ -189,7 +189,7 @@ export function HireUserResearchTestingDevelopers() {
|
||||
<SplitCallToAction />
|
||||
</section>
|
||||
|
||||
<Footer />
|
||||
{/* <Footer /> */}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -139,7 +139,7 @@ const hireWearableAppDevelopersData = {
|
||||
export function HireWearableAppDevelopers() {
|
||||
return (
|
||||
<div className="dark min-h-screen bg-background">
|
||||
<Navigation />
|
||||
{/* <Navigation /> */}
|
||||
|
||||
{/* Hero Section with TechStackVisualization */}
|
||||
<HireTalentHeroBanner
|
||||
@@ -189,7 +189,7 @@ export function HireWearableAppDevelopers() {
|
||||
<SplitCallToAction />
|
||||
</section>
|
||||
|
||||
<Footer />
|
||||
{/* <Footer /> */}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -139,7 +139,7 @@ const hireiOSAppDevelopersData = {
|
||||
export function HireiOSAppDevelopers() {
|
||||
return (
|
||||
<div className="dark min-h-screen bg-background">
|
||||
<Navigation />
|
||||
{/* <Navigation /> */}
|
||||
|
||||
{/* Hero Section with MobileAppVector */}
|
||||
<HireTalentHeroBanner
|
||||
@@ -189,7 +189,7 @@ export function HireiOSAppDevelopers() {
|
||||
<SplitCallToAction />
|
||||
</section>
|
||||
|
||||
<Footer />
|
||||
{/* <Footer /> */}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
288
pages/Homepage.tsx
Normal file
288
pages/Homepage.tsx
Normal 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>
|
||||
);
|
||||
};
|
||||
@@ -8,16 +8,17 @@ 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 { navigateTo } from "../App";
|
||||
import {
|
||||
DollarSign, Stethoscope, GraduationCap, ShoppingCart, Monitor,
|
||||
Truck, Factory, Users, Star, ArrowRight, ChevronRight, Clock,
|
||||
TrendingUp, Building, Cpu, Calendar, Eye, Target, Zap,
|
||||
CheckCircle, Lightbulb, Award, Handshake, Heart
|
||||
} from "lucide-react";
|
||||
import { useNavigate } from "react-router-dom";
|
||||
|
||||
// Enhanced Hero Section
|
||||
const HeroWithCTA = () => {
|
||||
const navigate = useNavigate();
|
||||
return (
|
||||
<section className="relative py-20 overflow-hidden bg-black">
|
||||
<div className="container mx-auto px-6 lg:px-8">
|
||||
@@ -57,7 +58,7 @@ const HeroWithCTA = () => {
|
||||
transition={{ duration: 0.8, delay: 0.3 }}
|
||||
className="flex flex-col sm:flex-row gap-4"
|
||||
>
|
||||
<ShimmerButton className="text-lg px-8 py-4" onClick={() => navigateTo('/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">
|
||||
<Calendar className="w-4 h-4 flex-shrink-0" />
|
||||
<span>Discuss Your Industry</span>
|
||||
@@ -67,7 +68,7 @@ const HeroWithCTA = () => {
|
||||
variant="secondary"
|
||||
size="lg"
|
||||
className="text-lg px-8 py-4"
|
||||
onClick={() => navigateTo('/case-studies')}
|
||||
onClick={() => navigate('/case-studies')}
|
||||
>
|
||||
<Eye className="w-4 h-4 flex-shrink-0" />
|
||||
<span>View Success Stories</span>
|
||||
@@ -117,6 +118,7 @@ const HeroWithCTA = () => {
|
||||
|
||||
// Industry Categories Grid
|
||||
const IndustryGrid = () => {
|
||||
const navigate = useNavigate();
|
||||
const industries = [
|
||||
{
|
||||
title: "Financial Services",
|
||||
@@ -228,7 +230,7 @@ const IndustryGrid = () => {
|
||||
viewport={{ once: true }}
|
||||
whileHover={{ y: -5 }}
|
||||
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">
|
||||
<CardContent className="p-0 flex flex-col h-full">
|
||||
@@ -369,6 +371,7 @@ const WhyChooseWDI = () => {
|
||||
|
||||
// Updated CTA Section
|
||||
const InlineCTA = () => {
|
||||
const navigate = useNavigate();
|
||||
return (
|
||||
<section className="py-20 bg-gray-950/50 relative overflow-hidden">
|
||||
{/* Add subtle decorative elements matching site theme */}
|
||||
@@ -412,7 +415,7 @@ const InlineCTA = () => {
|
||||
</p>
|
||||
|
||||
{/* 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">
|
||||
<Calendar className="w-6 h-6 flex-shrink-0" />
|
||||
<span>Schedule Industry Consultation</span>
|
||||
@@ -452,7 +455,7 @@ const industriesFAQs = [
|
||||
export function Industries() {
|
||||
return (
|
||||
<div className="dark min-h-screen bg-background">
|
||||
<Navigation />
|
||||
{/* <Navigation /> */}
|
||||
<HeroWithCTA />
|
||||
<IndustryGrid />
|
||||
<WhyChooseWDI />
|
||||
@@ -463,7 +466,7 @@ export function Industries() {
|
||||
subtitle="Get answers to common questions about our industry-specific solutions and expertise."
|
||||
faqs={industriesFAQs}
|
||||
/>
|
||||
<Footer />
|
||||
{/* <Footer /> */}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -4,7 +4,7 @@ import { Footer } from "../components/Footer";
|
||||
import { Button } from "../components/ui/button";
|
||||
import { Badge } from "../components/ui/badge";
|
||||
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 manavImage from "../src/images/manav-sain.png";
|
||||
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";
|
||||
|
||||
export const LeadershipTeam = () => {
|
||||
const navigate = useNavigate();
|
||||
const leaders = [
|
||||
{
|
||||
name: "Ritesh Pandey",
|
||||
@@ -176,7 +177,7 @@ export const LeadershipTeam = () => {
|
||||
`}
|
||||
</script>
|
||||
</Helmet>
|
||||
<Navigation />
|
||||
{/* <Navigation /> */}
|
||||
|
||||
{/* Hero Section */}
|
||||
<section className="relative pt-24 pb-16 overflow-hidden">
|
||||
@@ -372,7 +373,7 @@ export const LeadershipTeam = () => {
|
||||
size="lg"
|
||||
variant="outline"
|
||||
className="border-white/20 text-white hover:bg-white/10"
|
||||
onClick={() => navigateTo("/start-a-project")}
|
||||
onClick={() => navigate("/start-a-project")}
|
||||
>
|
||||
Start a Project
|
||||
</Button>
|
||||
@@ -381,7 +382,7 @@ export const LeadershipTeam = () => {
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<Footer />
|
||||
{/* <Footer /> */}
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
@@ -42,11 +42,12 @@ import { Badge } from "../components/ui/badge";
|
||||
import { Button } from "../components/ui/button";
|
||||
import { Card, CardContent } from "../components/ui/card";
|
||||
import { ShimmerButton } from "../components/ui/shimmer-button";
|
||||
import { navigateTo } from "@/App";
|
||||
import { useNavigate } from "react-router-dom";
|
||||
import { Helmet } from "react-helmet-async";
|
||||
|
||||
// Legacy System Rebuilds Hero Section
|
||||
const LegacySystemRebuildsHero = () => {
|
||||
const navigate = useNavigate();
|
||||
return (
|
||||
<section className="relative py-20 overflow-hidden bg-black">
|
||||
<Helmet>
|
||||
@@ -137,7 +138,7 @@ const LegacySystemRebuildsHero = () => {
|
||||
>
|
||||
<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">
|
||||
<MessageSquare className="w-5 h-5 flex-shrink-0" />
|
||||
@@ -1249,6 +1250,7 @@ const LegacySystemCaseStudies = () => {
|
||||
|
||||
// Mid-Page Lead Capture CTA
|
||||
const LegacySystemInlineCTA = () => {
|
||||
const navigate = useNavigate();
|
||||
return (
|
||||
<section className="py-20">
|
||||
<div className="container mx-auto px-6 lg:px-8">
|
||||
@@ -1287,7 +1289,7 @@ const LegacySystemInlineCTA = () => {
|
||||
|
||||
<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">
|
||||
<Search className="w-6 h-6 flex-shrink-0" />
|
||||
@@ -1375,6 +1377,7 @@ const LegacySystemFAQs = () => {
|
||||
|
||||
// Final CTA Section
|
||||
const LegacySystemFinalCTA = () => {
|
||||
const navigate = useNavigate();
|
||||
return (
|
||||
<section className="py-20 relative overflow-hidden">
|
||||
<div className="container mx-auto px-6 lg:px-8 relative z-10">
|
||||
@@ -1427,7 +1430,7 @@ const LegacySystemFinalCTA = () => {
|
||||
>
|
||||
<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">
|
||||
<Calendar className="w-6 h-6 flex-shrink-0" />
|
||||
@@ -1456,7 +1459,7 @@ const LegacySystemFinalCTA = () => {
|
||||
export const LegacySystemRebuilds = () => {
|
||||
return (
|
||||
<div className="dark min-h-screen">
|
||||
<Navigation />
|
||||
{/* <Navigation /> */}
|
||||
|
||||
{/* Hero Section */}
|
||||
<section className="bg-black">
|
||||
@@ -1510,7 +1513,7 @@ export const LegacySystemRebuilds = () => {
|
||||
|
||||
{/* Footer */}
|
||||
<section className="bg-card">
|
||||
<Footer />
|
||||
{/* <Footer /> */}
|
||||
</section>
|
||||
</div>
|
||||
);
|
||||
|
||||
Some files were not shown because too many files have changed in this diff Show More
Reference in New Issue
Block a user