api integrate of start-a-project form , captcha pending
This commit is contained in:
priyanshuvish
@@ -1,15 +1,15 @@
|
||||
import { useState, useRef, useEffect, useCallback } from "react";
|
||||
import { motion, AnimatePresence } from "framer-motion";
|
||||
import {
|
||||
ChevronDown,
|
||||
Menu,
|
||||
X,
|
||||
Code,
|
||||
Smartphone,
|
||||
Globe,
|
||||
Palette,
|
||||
Brain,
|
||||
Users,
|
||||
import {
|
||||
ChevronDown,
|
||||
Menu,
|
||||
X,
|
||||
Code,
|
||||
Smartphone,
|
||||
Globe,
|
||||
Palette,
|
||||
Brain,
|
||||
Users,
|
||||
Building2,
|
||||
Monitor,
|
||||
ShoppingCart,
|
||||
@@ -78,21 +78,21 @@ import {
|
||||
ArrowRight,
|
||||
Calculator,
|
||||
Calendar,
|
||||
FileEdit
|
||||
FileEdit,
|
||||
} from "lucide-react";
|
||||
import { Button } from "./ui/button";
|
||||
import BlackLogo14 from "../imports/BlackLogo14";
|
||||
import BlackLogo14 from "../assets/BlackLogo14";
|
||||
import { navigateTo } from "../App";
|
||||
|
||||
const navigationData = {
|
||||
main_navigation: [
|
||||
"Services",
|
||||
"Services",
|
||||
"AI & ML",
|
||||
"Solutions",
|
||||
"Industries",
|
||||
"Industries",
|
||||
"Hire Talent",
|
||||
"Company",
|
||||
"Resources"
|
||||
"Resources",
|
||||
],
|
||||
services: [
|
||||
{
|
||||
@@ -101,35 +101,74 @@ const navigationData = {
|
||||
href: "/services/mobile-app-development",
|
||||
sub_services: [
|
||||
{ name: "iOS App Development", href: "/services/ios-app-development" },
|
||||
{ name: "Android App Development", href: "/services/android-app-development" },
|
||||
{ name: "Cross-Platform App Development", href: "/services/cross-platform-app-development" },
|
||||
{ name: "Native App Development", href: "/services/native-app-development" },
|
||||
{ name: "Progressive Web Apps (PWAs)", href: "/services/pwa-development" },
|
||||
{ name: "App Development for Wearables & Devices", href: "/services/wearable-device-development" }
|
||||
]
|
||||
{
|
||||
name: "Android App Development",
|
||||
href: "/services/android-app-development",
|
||||
},
|
||||
{
|
||||
name: "Cross-Platform App Development",
|
||||
href: "/services/cross-platform-app-development",
|
||||
},
|
||||
{
|
||||
name: "Native App Development",
|
||||
href: "/services/native-app-development",
|
||||
},
|
||||
{
|
||||
name: "Progressive Web Apps (PWAs)",
|
||||
href: "/services/pwa-development",
|
||||
},
|
||||
{
|
||||
name: "App Development for Wearables & Devices",
|
||||
href: "/services/wearable-device-development",
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
category: "Web & Cloud Solutions",
|
||||
icon: Globe,
|
||||
href: "/web-cloud",
|
||||
sub_services: [
|
||||
{ name: "Custom Web Application Development", href: "/services/custom-web-app-development" },
|
||||
{ name: "SaaS Product Engineering", href: "/services/saas-product-engineering" },
|
||||
{
|
||||
name: "Custom Web Application Development",
|
||||
href: "/services/custom-web-app-development",
|
||||
},
|
||||
{
|
||||
name: "SaaS Product Engineering",
|
||||
href: "/services/saas-product-engineering",
|
||||
},
|
||||
{ name: "eCommerce Platforms", href: "/services/ecommerce-platforms" },
|
||||
{ name: "Admin Panels & Dashboards", href: "/services/admin-panels-dashboards" },
|
||||
{ name: "API & Backend Development", href: "/services/api-backend-development" }
|
||||
]
|
||||
{
|
||||
name: "Admin Panels & Dashboards",
|
||||
href: "/services/admin-panels-dashboards",
|
||||
},
|
||||
{
|
||||
name: "API & Backend Development",
|
||||
href: "/services/api-backend-development",
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
category: "Software Engineering",
|
||||
category: "Software Engineering",
|
||||
icon: Code2,
|
||||
href: "/software-engineering",
|
||||
sub_services: [
|
||||
{ name: "Enterprise Software Solutions", href: "/services/enterprise-software-solutions" },
|
||||
{ name: "System Architecture & DevOps", href: "/services/system-architecture-devops" },
|
||||
{ name: "Third-Party Integrations", href: "/services/third-party-integrations" },
|
||||
{ name: "Product Modernization", href: "/services/product-modernization" }
|
||||
]
|
||||
{
|
||||
name: "Enterprise Software Solutions",
|
||||
href: "/services/enterprise-software-solutions",
|
||||
},
|
||||
{
|
||||
name: "System Architecture & DevOps",
|
||||
href: "/services/system-architecture-devops",
|
||||
},
|
||||
{
|
||||
name: "Third-Party Integrations",
|
||||
href: "/services/third-party-integrations",
|
||||
},
|
||||
{
|
||||
name: "Product Modernization",
|
||||
href: "/services/product-modernization",
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
category: "Design & Experience",
|
||||
@@ -137,11 +176,20 @@ const navigationData = {
|
||||
href: "/design-experience",
|
||||
sub_services: [
|
||||
{ name: "UI/UX Design", href: "/services/ui-ux-design" },
|
||||
{ name: "Clickable Prototypes", href: "/services/clickable-prototypes" },
|
||||
{ name: "Design Thinking Workshops", href: "/services/design-thinking-workshops" },
|
||||
{ name: "User Research & Testing", href: "/services/user-research-testing" }
|
||||
]
|
||||
}
|
||||
{
|
||||
name: "Clickable Prototypes",
|
||||
href: "/services/clickable-prototypes",
|
||||
},
|
||||
{
|
||||
name: "Design Thinking Workshops",
|
||||
href: "/services/design-thinking-workshops",
|
||||
},
|
||||
{
|
||||
name: "User Research & Testing",
|
||||
href: "/services/user-research-testing",
|
||||
},
|
||||
],
|
||||
},
|
||||
],
|
||||
ai_data_intelligence: [
|
||||
{
|
||||
@@ -149,136 +197,320 @@ const navigationData = {
|
||||
icon: Bot,
|
||||
href: "/artificial-intelligence",
|
||||
sub_services: [
|
||||
{ name: "AI Strategy & Consulting", href: "/services/ai-strategy-consulting" },
|
||||
{ name: "AI-Powered Automation & Workflows", href: "/services/ai-automation-workflows" },
|
||||
{ name: "AI Integration into Digital Products", href: "/services/ai-integration-digital-products" },
|
||||
{ name: "Gen AI Integration into Digital Products", href: "/services/gen-ai-integration-digital-products" },
|
||||
{ name: "AI Chatbots & Virtual Assistants", href: "/services/ai-chatbots-virtual-assistants" },
|
||||
{ name: "AI Model Deployment & Maintenance", href: "/services/ai-model-deployment-mlops" }
|
||||
]
|
||||
{
|
||||
name: "AI Strategy & Consulting",
|
||||
href: "/services/ai-strategy-consulting",
|
||||
},
|
||||
{
|
||||
name: "AI-Powered Automation & Workflows",
|
||||
href: "/services/ai-automation-workflows",
|
||||
},
|
||||
{
|
||||
name: "AI Integration into Digital Products",
|
||||
href: "/services/ai-integration-digital-products",
|
||||
},
|
||||
{
|
||||
name: "Gen AI Integration into Digital Products",
|
||||
href: "/services/gen-ai-integration-digital-products",
|
||||
},
|
||||
{
|
||||
name: "AI Chatbots & Virtual Assistants",
|
||||
href: "/services/ai-chatbots-virtual-assistants",
|
||||
},
|
||||
{
|
||||
name: "AI Model Deployment & Maintenance",
|
||||
href: "/services/ai-model-deployment-mlops",
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
category: "Machine Learning Solutions",
|
||||
category: "Machine Learning Solutions",
|
||||
icon: Brain,
|
||||
href: "/machine-learning",
|
||||
sub_services: [
|
||||
{ name: "Custom ML Model Development", href: "/services/custom-ml-model-development" },
|
||||
{ name: "Predictive Analytics & Forecasting", href: "/services/predictive-analytics-forecasting" },
|
||||
{ name: "Computer Vision Applications", href: "/services/computer-vision-applications" },
|
||||
{ name: "NLP & Text Analytics", href: "/services/nlp-text-analytics" },
|
||||
{ name: "Recommendation Engines", href: "/services/recommendation-engines" }
|
||||
]
|
||||
}
|
||||
{
|
||||
name: "Custom ML Model Development",
|
||||
href: "/services/custom-ml-model-development",
|
||||
},
|
||||
{
|
||||
name: "Predictive Analytics & Forecasting",
|
||||
href: "/services/predictive-analytics-forecasting",
|
||||
},
|
||||
{
|
||||
name: "Computer Vision Applications",
|
||||
href: "/services/computer-vision-applications",
|
||||
},
|
||||
{ name: "NLP & Text Analytics", href: "/services/nlp-text-analytics" },
|
||||
{
|
||||
name: "Recommendation Engines",
|
||||
href: "/services/recommendation-engines",
|
||||
},
|
||||
],
|
||||
},
|
||||
],
|
||||
solutions: [
|
||||
{ text: "Digital Product Development", icon: Rocket, href: "/solutions/digital-product-development" },
|
||||
{ text: "MVP & Startup Launch Packages", icon: Zap, href: "/solutions/mvp-startup-launch-packages" },
|
||||
{ text: "Legacy System Rebuilds", icon: RefreshCw, href: "/solutions/legacy-system-rebuilds" },
|
||||
{ text: "Dedicated Offshore Development Centers (ODC)", icon: Building2, href: "/solutions/dedicated-offshore-odc" },
|
||||
{ text: "Business Process Automation", icon: Cog, href: "/solutions/business-process-automation" },
|
||||
{ text: "Compliance-Ready Systems (HIPAA, GDPR, etc.)", icon: Shield, href: "/solutions/compliance-ready-systems" }
|
||||
{
|
||||
text: "Digital Product Development",
|
||||
icon: Rocket,
|
||||
href: "/solutions/digital-product-development",
|
||||
},
|
||||
{
|
||||
text: "MVP & Startup Launch Packages",
|
||||
icon: Zap,
|
||||
href: "/solutions/mvp-startup-launch-packages",
|
||||
},
|
||||
{
|
||||
text: "Legacy System Rebuilds",
|
||||
icon: RefreshCw,
|
||||
href: "/solutions/legacy-system-rebuilds",
|
||||
},
|
||||
{
|
||||
text: "Dedicated Offshore Development Centers (ODC)",
|
||||
icon: Building2,
|
||||
href: "/solutions/dedicated-offshore-odc",
|
||||
},
|
||||
{
|
||||
text: "Business Process Automation",
|
||||
icon: Cog,
|
||||
href: "/solutions/business-process-automation",
|
||||
},
|
||||
{
|
||||
text: "Compliance-Ready Systems (HIPAA, GDPR, etc.)",
|
||||
icon: Shield,
|
||||
href: "/solutions/compliance-ready-systems",
|
||||
},
|
||||
],
|
||||
industries: [
|
||||
{
|
||||
group: "Financial Services",
|
||||
icon: DollarSign,
|
||||
items: [
|
||||
{ name: "FinTech & Banking Apps", href: "/industries/fintech-banking-apps" },
|
||||
{ name: "WealthTech Platforms", href: "/industries/financial-services/wealthtech-platforms" },
|
||||
{ name: "Real Estate Tech", href: "/industries/financial-services/real-estate-tech" }
|
||||
]
|
||||
{
|
||||
name: "FinTech & Banking Apps",
|
||||
href: "/industries/fintech-banking-apps",
|
||||
},
|
||||
{
|
||||
name: "WealthTech Platforms",
|
||||
href: "/industries/financial-services/wealthtech-platforms",
|
||||
},
|
||||
{
|
||||
name: "Real Estate Tech",
|
||||
href: "/industries/financial-services/real-estate-tech",
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
group: "Healthcare & Wellness",
|
||||
icon: Stethoscope,
|
||||
items: [
|
||||
{ name: "HealthTech Applications", href: "/industries/healthcare/healthtech-applications" },
|
||||
{ name: "Medical Compliance Solutions", href: "/industries/healthcare/medical-compliance-solutions" },
|
||||
{ name: "Fitness & Wellness Platforms", href: "/industries/healthcare/fitness-wellness-platforms" }
|
||||
]
|
||||
{
|
||||
name: "HealthTech Applications",
|
||||
href: "/industries/healthcare/healthtech-applications",
|
||||
},
|
||||
{
|
||||
name: "Medical Compliance Solutions",
|
||||
href: "/industries/healthcare/medical-compliance-solutions",
|
||||
},
|
||||
{
|
||||
name: "Fitness & Wellness Platforms",
|
||||
href: "/industries/healthcare/fitness-wellness-platforms",
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
group: "Learning & Education",
|
||||
group: "Learning & Education",
|
||||
icon: GraduationCap,
|
||||
items: [
|
||||
{ name: "EdTech Platforms", href: "/industries/education/edtech-platforms" },
|
||||
{ name: "Virtual Classrooms & LMS", href: "/industries/education/virtual-classrooms-lms" },
|
||||
{ name: "Microlearning Apps", href: "/industries/education/microlearning-apps" }
|
||||
]
|
||||
{
|
||||
name: "EdTech Platforms",
|
||||
href: "/industries/education/edtech-platforms",
|
||||
},
|
||||
{
|
||||
name: "Virtual Classrooms & LMS",
|
||||
href: "/industries/education/virtual-classrooms-lms",
|
||||
},
|
||||
{
|
||||
name: "Microlearning Apps",
|
||||
href: "/industries/education/microlearning-apps",
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
group: "Commerce & Consumer",
|
||||
icon: ShoppingBag,
|
||||
items: [
|
||||
{ name: "eCommerce & Marketplaces", href: "/industries/commerce/ecommerce-marketplaces" },
|
||||
{ name: "Food Ordering & Delivery", href: "/industries/commerce/food-ordering-delivery" },
|
||||
{ name: "Travel & Booking Systems", href: "/industries/commerce/travel-booking-systems" },
|
||||
{ name: "Event & Ticketing Solutions", href: "/industries/commerce/event-ticketing-solutions" }
|
||||
]
|
||||
{
|
||||
name: "eCommerce & Marketplaces",
|
||||
href: "/industries/commerce/ecommerce-marketplaces",
|
||||
},
|
||||
{
|
||||
name: "Food Ordering & Delivery",
|
||||
href: "/industries/commerce/food-ordering-delivery",
|
||||
},
|
||||
{
|
||||
name: "Travel & Booking Systems",
|
||||
href: "/industries/commerce/travel-booking-systems",
|
||||
},
|
||||
{
|
||||
name: "Event & Ticketing Solutions",
|
||||
href: "/industries/commerce/event-ticketing-solutions",
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
group: "Media & Community",
|
||||
icon: Gamepad2,
|
||||
items: [
|
||||
{ name: "OTT & Streaming Apps", href: "/industries/media/ott-streaming-apps" },
|
||||
{ name: "Social Platforms & Networks", href: "/industries/media/social-platforms-networks" },
|
||||
{ name: "Sports & Fan Engagement", href: "/industries/media/sports-fan-engagement" }
|
||||
]
|
||||
{
|
||||
name: "OTT & Streaming Apps",
|
||||
href: "/industries/media/ott-streaming-apps",
|
||||
},
|
||||
{
|
||||
name: "Social Platforms & Networks",
|
||||
href: "/industries/media/social-platforms-networks",
|
||||
},
|
||||
{
|
||||
name: "Sports & Fan Engagement",
|
||||
href: "/industries/media/sports-fan-engagement",
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
group: "Mobility & Logistics",
|
||||
icon: Truck,
|
||||
items: [
|
||||
{ name: "Transportation Apps", href: "/industries/mobility/transportation-apps" },
|
||||
{ name: "On-Demand Services", href: "/industries/mobility/on-demand-services" },
|
||||
{ name: "Supply Chain & Fleet Management", href: "/industries/mobility/supply-chain-fleet-management" }
|
||||
]
|
||||
{
|
||||
name: "Transportation Apps",
|
||||
href: "/industries/mobility/transportation-apps",
|
||||
},
|
||||
{
|
||||
name: "On-Demand Services",
|
||||
href: "/industries/mobility/on-demand-services",
|
||||
},
|
||||
{
|
||||
name: "Supply Chain & Fleet Management",
|
||||
href: "/industries/mobility/supply-chain-fleet-management",
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
group: "Industrial & Emerging Tech",
|
||||
icon: Factory,
|
||||
items: [
|
||||
{ name: "Manufacturing Automation", href: "/industries/industrial/manufacturing-automation" },
|
||||
{ name: "AgriTech Platforms", href: "/industries/industrial/agritech-platforms" },
|
||||
{ name: "Oil & Gas Monitoring Systems", href: "/industries/industrial/oil-gas-monitoring-systems" }
|
||||
]
|
||||
}
|
||||
{
|
||||
name: "Manufacturing Automation",
|
||||
href: "/industries/industrial/manufacturing-automation",
|
||||
},
|
||||
{
|
||||
name: "AgriTech Platforms",
|
||||
href: "/industries/industrial/agritech-platforms",
|
||||
},
|
||||
{
|
||||
name: "Oil & Gas Monitoring Systems",
|
||||
href: "/industries/industrial/oil-gas-monitoring-systems",
|
||||
},
|
||||
],
|
||||
},
|
||||
],
|
||||
hire_talent: [
|
||||
{ text: "Hire Mobile App Developers", icon: Smartphone, href: "/hire-talent/mobile-app-developers" },
|
||||
{ text: "Hire Full Stack Developers", icon: Code, href: "/hire-talent/full-stack-developers" },
|
||||
{ text: "Hire Frontend Developers", icon: Monitor, href: "/hire-talent/frontend-developers" },
|
||||
{ text: "Hire Backend Developers", icon: Database, href: "/hire-talent/backend-developers" },
|
||||
{ text: "Hire UI/UX Designers", icon: Palette, href: "/hire-talent/ui-ux-designers" },
|
||||
{ text: "Hire QA Engineers", icon: TestTube, href: "/hire-talent/qa-engineers" },
|
||||
{ text: "Dedicated Development Teams", icon: Users, href: "/dedicated-development-teams" },
|
||||
{
|
||||
text: "Hire Mobile App Developers",
|
||||
icon: Smartphone,
|
||||
href: "/hire-talent/mobile-app-developers",
|
||||
},
|
||||
{
|
||||
text: "Hire Full Stack Developers",
|
||||
icon: Code,
|
||||
href: "/hire-talent/full-stack-developers",
|
||||
},
|
||||
{
|
||||
text: "Hire Frontend Developers",
|
||||
icon: Monitor,
|
||||
href: "/hire-talent/frontend-developers",
|
||||
},
|
||||
{
|
||||
text: "Hire Backend Developers",
|
||||
icon: Database,
|
||||
href: "/hire-talent/backend-developers",
|
||||
},
|
||||
{
|
||||
text: "Hire UI/UX Designers",
|
||||
icon: Palette,
|
||||
href: "/hire-talent/ui-ux-designers",
|
||||
},
|
||||
{
|
||||
text: "Hire QA Engineers",
|
||||
icon: TestTube,
|
||||
href: "/hire-talent/qa-engineers",
|
||||
},
|
||||
{
|
||||
text: "Dedicated Development Teams",
|
||||
icon: Users,
|
||||
href: "/dedicated-development-teams",
|
||||
},
|
||||
{ text: "Engagement Models", icon: Settings, href: "/engagement-models" },
|
||||
{ text: "Team Augmentation Services", icon: Zap, href: "/team-augmentation-services" }
|
||||
{
|
||||
text: "Team Augmentation Services",
|
||||
icon: Zap,
|
||||
href: "/team-augmentation-services",
|
||||
},
|
||||
],
|
||||
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: "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" }
|
||||
{ text: "Press & Media", icon: Newspaper, href: "/company/press-media" },
|
||||
],
|
||||
resources: [
|
||||
{ text: "Articles", icon: BookOpen, href: "/resources/blog" },
|
||||
{ text: "Case Studies", icon: FileText, href: "/case-studies" },
|
||||
{ text: "Client Testimonials", icon: Star, href: "/resources/client-testimonials" },
|
||||
{ text: "Whitepapers & Insights", icon: FileCheck, href: "/resources/whitepapers-insights" },
|
||||
{ text: "FAQs", icon: HelpCircle, href: "/resources/faqs" }
|
||||
{
|
||||
text: "Client Testimonials",
|
||||
icon: Star,
|
||||
href: "/resources/client-testimonials",
|
||||
},
|
||||
{
|
||||
text: "Whitepapers & Insights",
|
||||
icon: FileCheck,
|
||||
href: "/resources/whitepapers-insights",
|
||||
},
|
||||
{ text: "FAQs", icon: HelpCircle, href: "/resources/faqs" },
|
||||
],
|
||||
contact: [
|
||||
{ text: "Contact Form", icon: Mail, href: "/contact" },
|
||||
{ text: "Request a Proposal", icon: FileCheck, href: "/contact/request-a-proposal" },
|
||||
{ text: "Schedule a Discovery Call", icon: Phone, href: "/contact/schedule-a-discovery-call" },
|
||||
{ text: "Office Locations", icon: MapPin, href: "/contact/office-locations" },
|
||||
{ text: "Client Support", icon: Headphones, href: "/contact/client-support" },
|
||||
{ text: "Send your CV to HR", icon: UserPlus, href: "/contact/send-your-cv" }
|
||||
]
|
||||
{
|
||||
text: "Request a Proposal",
|
||||
icon: FileCheck,
|
||||
href: "/contact/request-a-proposal",
|
||||
},
|
||||
{
|
||||
text: "Schedule a Discovery Call",
|
||||
icon: Phone,
|
||||
href: "/contact/schedule-a-discovery-call",
|
||||
},
|
||||
{
|
||||
text: "Office Locations",
|
||||
icon: MapPin,
|
||||
href: "/contact/office-locations",
|
||||
},
|
||||
{
|
||||
text: "Client Support",
|
||||
icon: Headphones,
|
||||
href: "/contact/client-support",
|
||||
},
|
||||
{
|
||||
text: "Send your CV to HR",
|
||||
icon: UserPlus,
|
||||
href: "/contact/send-your-cv",
|
||||
},
|
||||
],
|
||||
};
|
||||
|
||||
// CTA configurations for each mega menu type - UPDATED ALL TO LINK TO START A PROJECT PAGE
|
||||
@@ -288,57 +520,57 @@ const megaMenuCTAs = {
|
||||
subtitle: "Get a custom quote for your project",
|
||||
buttonText: "Get Started",
|
||||
href: "/start-a-project",
|
||||
icon: Calculator
|
||||
icon: Calculator,
|
||||
},
|
||||
"AI & ML": {
|
||||
title: "AI Strategy Session",
|
||||
subtitle: "Discover AI opportunities for your business",
|
||||
buttonText: "Book Session",
|
||||
href: "/start-a-project",
|
||||
icon: Bot
|
||||
icon: Bot,
|
||||
},
|
||||
Solutions: {
|
||||
title: "Solution Consultation",
|
||||
subtitle: "Find the perfect solution for your business",
|
||||
buttonText: "Consult Now",
|
||||
href: "/start-a-project",
|
||||
icon: Lightbulb
|
||||
icon: Lightbulb,
|
||||
},
|
||||
Industries: {
|
||||
title: "Industry Expertise",
|
||||
subtitle: "Learn how we transform your industry",
|
||||
buttonText: "Explore",
|
||||
href: "/start-a-project",
|
||||
icon: Building2
|
||||
icon: Building2,
|
||||
},
|
||||
"Hire Talent": {
|
||||
title: "Team Assessment",
|
||||
subtitle: "Get matched with the right talent",
|
||||
buttonText: "Start Hiring",
|
||||
href: "/start-a-project",
|
||||
icon: Users
|
||||
icon: Users,
|
||||
},
|
||||
Company: {
|
||||
title: "Schedule a Call",
|
||||
subtitle: "Let's discuss your project requirements",
|
||||
buttonText: "Book Call",
|
||||
href: "/start-a-project",
|
||||
icon: Calendar
|
||||
icon: Calendar,
|
||||
},
|
||||
Resources: {
|
||||
title: "Free Consultation",
|
||||
subtitle: "Get expert insights for your project",
|
||||
buttonText: "Get Started",
|
||||
href: "/start-a-project",
|
||||
icon: FileEdit
|
||||
icon: FileEdit,
|
||||
},
|
||||
Contact: {
|
||||
title: "Start Your Project",
|
||||
subtitle: "Ready to bring your idea to life?",
|
||||
buttonText: "Get Started",
|
||||
href: "/start-a-project",
|
||||
icon: Rocket
|
||||
}
|
||||
icon: Rocket,
|
||||
},
|
||||
};
|
||||
|
||||
// Horizontal CTA Component matching reference design
|
||||
@@ -356,7 +588,9 @@ const MegaMenuCTA = ({ type }: { type: string }) => {
|
||||
<div className="flex items-center justify-between">
|
||||
<div className="flex-1">
|
||||
<h3 className="text-white font-semibold text-lg mb-1">{cta.title}</h3>
|
||||
<p className="text-gray-400 text-sm leading-relaxed">{cta.subtitle}</p>
|
||||
<p className="text-gray-400 text-sm leading-relaxed">
|
||||
{cta.subtitle}
|
||||
</p>
|
||||
</div>
|
||||
<div className="ml-6">
|
||||
<Button
|
||||
@@ -380,7 +614,13 @@ interface MegaMenuProps {
|
||||
timeoutRef?: React.MutableRefObject<NodeJS.Timeout | undefined>;
|
||||
}
|
||||
|
||||
const MegaMenu = ({ isOpen, onClose, onCancelClose, type, timeoutRef }: MegaMenuProps) => {
|
||||
const MegaMenu = ({
|
||||
isOpen,
|
||||
onClose,
|
||||
onCancelClose,
|
||||
type,
|
||||
timeoutRef,
|
||||
}: MegaMenuProps) => {
|
||||
if (!isOpen) return null;
|
||||
|
||||
const navigate = (path: string) => {
|
||||
@@ -399,7 +639,7 @@ const MegaMenu = ({ isOpen, onClose, onCancelClose, type, timeoutRef }: 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
|
||||
<h4
|
||||
className="font-semibold text-white text-sm cursor-pointer hover:text-[#E5195E] transition-colors"
|
||||
onClick={() => service.href && navigate(service.href)}
|
||||
>
|
||||
@@ -409,8 +649,8 @@ const MegaMenu = ({ isOpen, onClose, onCancelClose, type, timeoutRef }: MegaMenu
|
||||
<ul className="space-y-3">
|
||||
{service.sub_services.map((subService) => (
|
||||
<li key={subService.name}>
|
||||
<a
|
||||
href="#"
|
||||
<a
|
||||
href="#"
|
||||
className="text-[#CCCCCC] hover:text-white text-sm transition-colors duration-200 block py-1 hover:translate-x-1 transform"
|
||||
onClick={(e) => {
|
||||
e.preventDefault();
|
||||
@@ -443,7 +683,7 @@ const MegaMenu = ({ isOpen, onClose, onCancelClose, type, timeoutRef }: 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
|
||||
<h4
|
||||
className="font-semibold text-white text-lg cursor-pointer hover:text-[#E5195E] transition-colors"
|
||||
onClick={() => category.href && navigate(category.href)}
|
||||
>
|
||||
@@ -453,8 +693,8 @@ const MegaMenu = ({ isOpen, onClose, onCancelClose, type, timeoutRef }: MegaMenu
|
||||
<ul className="space-y-3">
|
||||
{category.sub_services.map((service) => (
|
||||
<li key={service.name}>
|
||||
<a
|
||||
href="#"
|
||||
<a
|
||||
href="#"
|
||||
className="text-[#CCCCCC] hover:text-white text-sm transition-colors duration-200 block py-1 hover:translate-x-1 transform"
|
||||
onClick={(e) => {
|
||||
e.preventDefault();
|
||||
@@ -482,9 +722,9 @@ const MegaMenu = ({ isOpen, onClose, onCancelClose, type, timeoutRef }: MegaMenu
|
||||
{navigationData.solutions.map((solution) => {
|
||||
const Icon = solution.icon;
|
||||
return (
|
||||
<a
|
||||
<a
|
||||
key={solution.text}
|
||||
href="#"
|
||||
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"
|
||||
onClick={(e) => {
|
||||
e.preventDefault();
|
||||
@@ -523,8 +763,8 @@ const MegaMenu = ({ isOpen, onClose, onCancelClose, type, timeoutRef }: MegaMenu
|
||||
<ul className="space-y-2">
|
||||
{industry.items.map((item) => (
|
||||
<li key={item.name}>
|
||||
<a
|
||||
href="#"
|
||||
<a
|
||||
href="#"
|
||||
className="text-[#CCCCCC] hover:text-white text-sm transition-colors duration-200 block py-1 hover:translate-x-1 transform"
|
||||
onClick={(e) => {
|
||||
e.preventDefault();
|
||||
@@ -552,9 +792,9 @@ const MegaMenu = ({ isOpen, onClose, onCancelClose, type, timeoutRef }: MegaMenu
|
||||
{items.map((item) => {
|
||||
const Icon = item.icon;
|
||||
return (
|
||||
<a
|
||||
<a
|
||||
key={item.text}
|
||||
href="#"
|
||||
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"
|
||||
onClick={(e) => {
|
||||
e.preventDefault();
|
||||
@@ -577,22 +817,22 @@ const MegaMenu = ({ isOpen, onClose, onCancelClose, type, timeoutRef }: MegaMenu
|
||||
|
||||
const getMenuContent = () => {
|
||||
switch (type) {
|
||||
case 'Services':
|
||||
case "Services":
|
||||
return renderServicesMenu();
|
||||
case 'AI & ML':
|
||||
case "AI & ML":
|
||||
return renderAIMenu();
|
||||
case 'Solutions':
|
||||
case "Solutions":
|
||||
return renderSolutionsMenu();
|
||||
case 'Industries':
|
||||
case "Industries":
|
||||
return renderIndustriesMenu();
|
||||
case 'Hire Talent':
|
||||
return renderGenericMenu(navigationData.hire_talent, 'Hire Talent');
|
||||
case 'Company':
|
||||
return renderGenericMenu(navigationData.company, 'Company');
|
||||
case 'Resources':
|
||||
return renderGenericMenu(navigationData.resources, 'Resources');
|
||||
case 'Contact':
|
||||
return renderGenericMenu(navigationData.contact, 'Contact');
|
||||
case "Hire Talent":
|
||||
return renderGenericMenu(navigationData.hire_talent, "Hire Talent");
|
||||
case "Company":
|
||||
return renderGenericMenu(navigationData.company, "Company");
|
||||
case "Resources":
|
||||
return renderGenericMenu(navigationData.resources, "Resources");
|
||||
case "Contact":
|
||||
return renderGenericMenu(navigationData.contact, "Contact");
|
||||
default:
|
||||
return null;
|
||||
}
|
||||
@@ -605,19 +845,19 @@ const MegaMenu = ({ isOpen, onClose, onCancelClose, type, timeoutRef }: MegaMenu
|
||||
exit={{ opacity: 0, y: -20 }}
|
||||
transition={{ duration: 0.2 }}
|
||||
className="absolute top-full left-0 w-full bg-[#121212] backdrop-blur-xl border-t border-white/10 shadow-xl z-50 nav-mega-menu"
|
||||
style={{ minHeight: '400px' }}
|
||||
style={{ minHeight: "400px" }}
|
||||
onMouseEnter={onCancelClose}
|
||||
onMouseLeave={onClose}
|
||||
>
|
||||
<div className="absolute inset-0 bg-gradient-to-b from-[#121212] to-[#0E0E0E] opacity-95" />
|
||||
<div
|
||||
<div
|
||||
className="absolute inset-0 opacity-5"
|
||||
style={{
|
||||
backgroundImage: `radial-gradient(circle at 1px 1px, rgba(255,255,255,0.1) 1px, transparent 0)`,
|
||||
backgroundSize: '20px 20px'
|
||||
backgroundSize: "20px 20px",
|
||||
}}
|
||||
/>
|
||||
|
||||
|
||||
<div className="relative z-10 container mx-auto px-6 lg:px-8 py-12">
|
||||
{getMenuContent()}
|
||||
</div>
|
||||
@@ -639,7 +879,17 @@ export const Navigation = () => {
|
||||
if (timeoutRef.current) {
|
||||
clearTimeout(timeoutRef.current);
|
||||
}
|
||||
if (['Services', 'AI & ML', 'Solutions', 'Industries', 'Hire Talent', 'Company', 'Resources'].includes(item)) {
|
||||
if (
|
||||
[
|
||||
"Services",
|
||||
"AI & ML",
|
||||
"Solutions",
|
||||
"Industries",
|
||||
"Hire Talent",
|
||||
"Company",
|
||||
"Resources",
|
||||
].includes(item)
|
||||
) {
|
||||
setActiveMenu(item);
|
||||
}
|
||||
}, []);
|
||||
@@ -656,21 +906,36 @@ export const Navigation = () => {
|
||||
}
|
||||
}, []);
|
||||
|
||||
const handleNavItemMouseEnter = useCallback((item: string) => {
|
||||
cancelClose();
|
||||
openMenu(item);
|
||||
}, [cancelClose, openMenu]);
|
||||
const handleNavItemMouseEnter = useCallback(
|
||||
(item: string) => {
|
||||
cancelClose();
|
||||
openMenu(item);
|
||||
},
|
||||
[cancelClose, openMenu]
|
||||
);
|
||||
|
||||
const handleNavItemMouseLeave = useCallback(() => {
|
||||
closeMenu();
|
||||
}, [closeMenu]);
|
||||
|
||||
const handleNavMouseLeave = useCallback((e: React.MouseEvent) => {
|
||||
const relatedTarget = e.relatedTarget as Element;
|
||||
if (!navRef.current?.contains(relatedTarget)) {
|
||||
closeMenu();
|
||||
}
|
||||
}, [closeMenu]);
|
||||
// const handleNavMouseLeave = useCallback((e: React.MouseEvent) => {
|
||||
// const relatedTarget = e.relatedTarget as Element;
|
||||
// if (!navRef.current?.contains(relatedTarget)) {
|
||||
// closeMenu();
|
||||
// }
|
||||
// }, [closeMenu]);
|
||||
const handleNavMouseLeave = useCallback(
|
||||
(e: React.MouseEvent) => {
|
||||
const relatedTarget = e.relatedTarget;
|
||||
if (
|
||||
relatedTarget instanceof Node &&
|
||||
!navRef.current?.contains(relatedTarget)
|
||||
) {
|
||||
closeMenu();
|
||||
}
|
||||
},
|
||||
[closeMenu]
|
||||
);
|
||||
|
||||
const handleNavMouseEnter = useCallback(() => {
|
||||
cancelClose();
|
||||
@@ -685,35 +950,43 @@ export const Navigation = () => {
|
||||
}, []);
|
||||
|
||||
const hasDropdown = (item: string) => {
|
||||
return ['Services', 'AI & ML', 'Solutions', 'Industries', 'Hire Talent', 'Company', 'Resources'].includes(item);
|
||||
return [
|
||||
"Services",
|
||||
"AI & ML",
|
||||
"Solutions",
|
||||
"Industries",
|
||||
"Hire Talent",
|
||||
"Company",
|
||||
"Resources",
|
||||
].includes(item);
|
||||
};
|
||||
|
||||
// Function to get main category page route for navigation items
|
||||
const getMainCategoryRoute = (item: string) => {
|
||||
switch (item) {
|
||||
case 'Services':
|
||||
return '/services';
|
||||
case 'Company':
|
||||
return '/company';
|
||||
case 'Resources':
|
||||
return '/resources';
|
||||
case 'Contact':
|
||||
return '/contact';
|
||||
case 'Hire Talent':
|
||||
return '/hire-talent';
|
||||
case 'AI & ML':
|
||||
return '/artificial-intelligence';
|
||||
case 'Solutions':
|
||||
return '/solutions/digital-product-development'; // Default to first solution
|
||||
case 'Industries':
|
||||
return '/industries/fintech-banking-apps'; // Default to first industry
|
||||
case "Services":
|
||||
return "/services";
|
||||
case "Company":
|
||||
return "/company";
|
||||
case "Resources":
|
||||
return "/resources";
|
||||
case "Contact":
|
||||
return "/contact";
|
||||
case "Hire Talent":
|
||||
return "/hire-talent";
|
||||
case "AI & ML":
|
||||
return "/artificial-intelligence";
|
||||
case "Solutions":
|
||||
return "/solutions/digital-product-development"; // Default to first solution
|
||||
case "Industries":
|
||||
return "/industries/fintech-banking-apps"; // Default to first industry
|
||||
default:
|
||||
return null;
|
||||
}
|
||||
};
|
||||
|
||||
return (
|
||||
<nav
|
||||
<nav
|
||||
ref={navRef}
|
||||
className="fixed top-0 left-0 right-0 z-50 bg-[#0E0E0E]/90 backdrop-blur-lg border-b border-white/10"
|
||||
onMouseLeave={handleNavMouseLeave}
|
||||
@@ -722,12 +995,12 @@ 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="#"
|
||||
<a
|
||||
href="#"
|
||||
className="flex items-center"
|
||||
onClick={(e) => {
|
||||
e.preventDefault();
|
||||
navigate('/');
|
||||
navigate("/");
|
||||
}}
|
||||
>
|
||||
<div className="w-10 h-10">
|
||||
@@ -745,7 +1018,7 @@ export const Navigation = () => {
|
||||
onMouseLeave={handleNavItemMouseLeave}
|
||||
>
|
||||
<a
|
||||
href={`#${item.toLowerCase().replace(/\s+/g, '-')}`}
|
||||
href={`#${item.toLowerCase().replace(/\s+/g, "-")}`}
|
||||
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();
|
||||
@@ -757,7 +1030,11 @@ export const Navigation = () => {
|
||||
>
|
||||
{item}
|
||||
{hasDropdown(item) && (
|
||||
<ChevronDown className={`w-4 h-4 transition-transform duration-200 ${activeMenu === item ? 'rotate-180' : ''}`} />
|
||||
<ChevronDown
|
||||
className={`w-4 h-4 transition-transform duration-200 ${
|
||||
activeMenu === item ? "rotate-180" : ""
|
||||
}`}
|
||||
/>
|
||||
)}
|
||||
</a>
|
||||
</div>
|
||||
@@ -765,8 +1042,8 @@ export const Navigation = () => {
|
||||
</div>
|
||||
|
||||
<div className="flex items-center space-x-4">
|
||||
<Button
|
||||
onClick={() => navigate('/start-a-project')}
|
||||
<Button
|
||||
onClick={() => navigate("/start-a-project")}
|
||||
className="hidden lg:flex"
|
||||
>
|
||||
Get Started
|
||||
@@ -777,7 +1054,11 @@ export const Navigation = () => {
|
||||
className="lg:hidden text-[#CCCCCC] hover:text-white transition-colors"
|
||||
onClick={() => setIsMobileMenuOpen(!isMobileMenuOpen)}
|
||||
>
|
||||
{isMobileMenuOpen ? <X className="w-6 h-6" /> : <Menu className="w-6 h-6" />}
|
||||
{isMobileMenuOpen ? (
|
||||
<X className="w-6 h-6" />
|
||||
) : (
|
||||
<Menu className="w-6 h-6" />
|
||||
)}
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
@@ -824,9 +1105,9 @@ export const Navigation = () => {
|
||||
{item}
|
||||
</a>
|
||||
))}
|
||||
<Button
|
||||
<Button
|
||||
onClick={() => {
|
||||
navigate('/start-a-project');
|
||||
navigate("/start-a-project");
|
||||
setIsMobileMenuOpen(false);
|
||||
}}
|
||||
className="w-full mt-4"
|
||||
@@ -840,4 +1121,4 @@ export const Navigation = () => {
|
||||
</AnimatePresence>
|
||||
</nav>
|
||||
);
|
||||
};
|
||||
};
|
||||
|
||||
Reference in New Issue
Block a user