completed hire talent banner and in homepage added new service section
This commit is contained in:
priyanshuvish
327
App.tsx
327
App.tsx
@@ -1,93 +1,91 @@
|
||||
import { useState, useEffect } from "react";
|
||||
import { Navigation } from "./components/Navigation";
|
||||
import { HeroSection } from "./components/HeroSection";
|
||||
import { ClientLogos } from "./components/ClientLogos";
|
||||
import { ServicesSection } from "./components/ServicesSection";
|
||||
import { WhyChooseWDI } from "./components/WhyChooseWDI";
|
||||
import { HorizontalTagScroller } from "./components/HorizontalTagScroller";
|
||||
import { CaseStudyHighlight } from "./components/CaseStudyHighlight";
|
||||
import { InlineCTA } from "./components/InlineCTA";
|
||||
import { ProcessSection } from "./components/ProcessSection";
|
||||
import { 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";
|
||||
import { Navigation } from "./components/Navigation";
|
||||
import { ProcessSection } from "./components/ProcessSection";
|
||||
import { ResourceCards } from "./components/ResourceCards";
|
||||
import { SplitCallToAction } from "./components/SplitCallToAction";
|
||||
import { Footer } from "./components/Footer";
|
||||
import { Button } from "./components/ui/button";
|
||||
import { WhyChooseWDI } from "./components/WhyChooseWDI";
|
||||
|
||||
// Main Category Pages
|
||||
import { Services } from "./pages/Services";
|
||||
import { Solutions } from "./pages/Solutions";
|
||||
import { Industries } from "./pages/Industries";
|
||||
import { Resources } from "./pages/Resources";
|
||||
import { Company } from "./pages/Company";
|
||||
import { ContactMain } from "./pages/ContactMain";
|
||||
import { WebCloudServices } from "./pages/WebCloudServices";
|
||||
import { SoftwareEngineering } from "./pages/SoftwareEngineering";
|
||||
import { DesignExperience } from "./pages/DesignExperience";
|
||||
import { ArtificialIntelligenceServices } from "./pages/ArtificialIntelligenceServices";
|
||||
import { 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 { MobileAppDevelopment } from "./pages/MobileAppDevelopment";
|
||||
import { IOSAppDevelopment } from "./pages/iOSAppDevelopment";
|
||||
import { AndroidAppDevelopment } from "./pages/AndroidAppDevelopment";
|
||||
import { CrossPlatformAppDevelopment } from "./pages/CrossPlatformAppDevelopment";
|
||||
import { NativeAppDevelopment } from "./pages/NativeAppDevelopment";
|
||||
import { PWADevelopment } from "./pages/PWADevelopment";
|
||||
import { WearableDeviceDevelopment } from "./pages/WearableDeviceDevelopment";
|
||||
import { CustomWebAppDevelopment } from "./pages/CustomWebAppDevelopment";
|
||||
import { SaaSProductEngineering } from "./pages/SaaSProductEngineering";
|
||||
import { EcommercePlatforms } from "./pages/EcommercePlatforms";
|
||||
import { AdminPanelsDashboards } from "./pages/AdminPanelsDashboards";
|
||||
import { 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 { ProductModernization } from "./pages/ProductModernization";
|
||||
import { UIUXDesign } from "./pages/UIUXDesign";
|
||||
import { ClickablePrototypes } from "./pages/ClickablePrototypes";
|
||||
import { DesignThinkingWorkshops } from "./pages/DesignThinkingWorkshops";
|
||||
import { UserResearchTesting } from "./pages/UserResearchTesting";
|
||||
import { AIStrategyConsulting } from "./pages/AIStrategyConsulting";
|
||||
import { AIAutomationWorkflows } from "./pages/AIAutomationWorkflows";
|
||||
import { AIIntegrationDigitalProducts } from "./pages/AIIntegrationDigitalProducts";
|
||||
import { GenAIIntegrationDigitalProducts } from "./pages/GenAIIntegrationDigitalProducts";
|
||||
import { AIChatbotsVirtualAssistants } from "./pages/AIChatbotsVirtualAssistants";
|
||||
import { AIModelDeploymentMLOps } from "./pages/AIModelDeploymentMLOps";
|
||||
import { CustomMLModelDevelopment } from "./pages/CustomMLModelDevelopment";
|
||||
import { PredictiveAnalyticsForecasting } from "./pages/PredictiveAnalyticsForecasting";
|
||||
import { ComputerVisionApplications } from "./pages/ComputerVisionApplications";
|
||||
import { NLPTextAnalytics } from "./pages/NLPTextAnalytics";
|
||||
import { RecommendationEngines } from "./pages/RecommendationEngines";
|
||||
import { WearableDeviceDevelopment } from "./pages/WearableDeviceDevelopment";
|
||||
|
||||
// Solution Pages
|
||||
import { DigitalProductDevelopment } from "./pages/DigitalProductDevelopment";
|
||||
import { MVPStartupLaunchPackages } from "./pages/MVPStartupLaunchPackages";
|
||||
import { LegacySystemRebuilds } from "./pages/LegacySystemRebuilds";
|
||||
import { DedicatedOffshoreODC } from "./pages/DedicatedOffshoreODC";
|
||||
import { BusinessProcessAutomation } from "./pages/BusinessProcessAutomation";
|
||||
import { ComplianceReadySystems } from "./pages/ComplianceReadySystems";
|
||||
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 { WealthTechPlatforms } from "./pages/WealthTechPlatforms";
|
||||
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";
|
||||
import { FitnessWellnessPlatforms } from "./pages/FitnessWellnessPlatforms";
|
||||
|
||||
// Industry Pages - Learning & Education
|
||||
import { EdTechPlatforms } from "./pages/EdTechPlatforms";
|
||||
import { VirtualClassroomsLMS } from "./pages/VirtualClassroomsLMS";
|
||||
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";
|
||||
import { EventTicketingSolutions } from "./pages/EventTicketingSolutions";
|
||||
|
||||
// Industry Pages - Media & Community
|
||||
import { OTTStreamingApps } from "./pages/OTTStreamingApps";
|
||||
@@ -95,70 +93,73 @@ import { SocialPlatformsNetworks } from "./pages/SocialPlatformsNetworks";
|
||||
import { SportsFanEngagement } from "./pages/SportsFanEngagement";
|
||||
|
||||
// Industry Pages - Mobility & Logistics
|
||||
import { TransportationApps } from "./pages/TransportationApps";
|
||||
import { OnDemandServices } from "./pages/OnDemandServices";
|
||||
import { SupplyChainFleetManagement } from "./pages/SupplyChainFleetManagement";
|
||||
import { TransportationApps } from "./pages/TransportationApps";
|
||||
|
||||
// Industry Pages - Industrial & Emerging Tech
|
||||
import { ManufacturingAutomation } from "./pages/ManufacturingAutomation";
|
||||
import { AgriTechPlatforms } from "./pages/AgriTechPlatforms";
|
||||
import { ManufacturingAutomation } from "./pages/ManufacturingAutomation";
|
||||
import { OilGasMonitoringSystems } from "./pages/OilGasMonitoringSystems";
|
||||
|
||||
// Company Pages
|
||||
import { AboutWDI } from "./pages/AboutWDI";
|
||||
import { OurHistory } from "./pages/OurHistory";
|
||||
import { LeadershipTeam } from "./pages/LeadershipTeam";
|
||||
import { AwardsCertifications } from "./pages/AwardsCertifications";
|
||||
import { Careers } from "./pages/Careers";
|
||||
import { CultureValues } from "./pages/CultureValues";
|
||||
import { LeadershipTeam } from "./pages/LeadershipTeam";
|
||||
import { OurHistory } from "./pages/OurHistory";
|
||||
import { PressMedia } from "./pages/PressMedia";
|
||||
|
||||
// Hire Talent Pages
|
||||
import { HireTalent } from "./pages/HireTalent";
|
||||
import { HireMobileAppDevelopers } from "./pages/HireMobileAppDevelopers";
|
||||
import { HireFullStackDevelopers } from "./pages/HireFullStackDevelopers";
|
||||
import { HireFrontendDevelopers } from "./pages/HireFrontendDevelopers";
|
||||
import { HireBackendDevelopers } from "./pages/HireBackendDevelopers";
|
||||
import { HireUIUXDesigners } from "./pages/HireUIUXDesigners";
|
||||
import { HireQAEngineers } from "./pages/HireQAEngineers";
|
||||
import { DedicatedDevelopmentTeams } from "./pages/DedicatedDevelopmentTeams";
|
||||
import { EngagementModels } from "./pages/EngagementModels";
|
||||
import { 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 { WhitepapersInsights } from "./pages/WhitepapersInsights";
|
||||
import { FAQs } from "./pages/FAQs";
|
||||
import { WhitepapersInsights } from "./pages/WhitepapersInsights";
|
||||
|
||||
// Contact Pages
|
||||
import { Contact } from "./pages/Contact";
|
||||
import { RequestProposal } from "./pages/RequestProposal";
|
||||
import { ScheduleDiscoveryCall } from "./pages/ScheduleDiscoveryCall";
|
||||
import { OfficeLocations } from "./pages/OfficeLocations";
|
||||
import { motion } from "framer-motion";
|
||||
import { ChevronRight } from "lucide-react";
|
||||
import { Helmet } from "react-helmet-async";
|
||||
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 { SendYourCV } from "./pages/SendYourCV";
|
||||
import { StartAProject } from "./pages/StartAProject";
|
||||
import { ThankYou } from "./pages/ThankYou";
|
||||
import { RegroupProject } from "./pages/RegroupProject";
|
||||
import { SeezunProject } from "./pages/SeezunProject";
|
||||
import { WokaProject } from "./pages/WokaProject";
|
||||
import { TanamiProject } from "./pages/TanamiProject";
|
||||
import { TradersCircuitProject } from "./pages/TradersCircuitProject";
|
||||
import { 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 { ArticleDetail } from "./pages/ArticleDetail";
|
||||
import { FutureOfAIHealthcare } from "./pages/FutureOfAIHealthcare";
|
||||
import { ComplianceReadyFintech } from "./pages/ComplianceReadyFintech";
|
||||
import { LegacySystemScaling } from "./pages/LegacySystemScaling";
|
||||
import { AutomationReshapingBusiness } from "./pages/AutomationReshapingBusiness";
|
||||
import { 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 { MigratingToLinear101 } from "./pages/MigratingToLinear101";
|
||||
import { BuildingYourAPIStack } from "./pages/BuildingYourAPIStack";
|
||||
import { CookieConsent } from "./components/CookieConsent";
|
||||
import { Helmet } from "react-helmet-async";
|
||||
import { WokaProject } from "./pages/WokaProject";
|
||||
|
||||
|
||||
// Create a global navigation context
|
||||
let setCurrentPath: ((path: string) => void) | null = null;
|
||||
@@ -218,6 +219,88 @@ const useRouter = () => {
|
||||
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",
|
||||
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",
|
||||
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",
|
||||
@@ -309,8 +392,80 @@ const Homepage = () => (
|
||||
</section>
|
||||
|
||||
{/* Services Grid - Dark background */}
|
||||
<section className="bg-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 */}
|
||||
|
||||
Reference in New Issue
Block a user