Primary Heading
+Secondary Heading
+ +// Body text +Regular body text
+Muted text
+ +// Accent text +WDI Pink Accent +Accent Color +``` + +### 4. Card Components +```tsx +// Dark cards +Card Title
+Card description
+
+
+// ✅ CORRECT - Dark backgrounds
+
+
+
+```
+
+### Text Color Adjustments:
+```tsx
+// ❌ WRONG - Dark text on dark background
+
+
+ {text}
+
+
+ );
+};
\ No newline at end of file
diff --git a/components/AppSuccessMetrics.tsx b/components/AppSuccessMetrics.tsx
new file mode 100644
index 0000000..6667850
--- /dev/null
+++ b/components/AppSuccessMetrics.tsx
@@ -0,0 +1,139 @@
+import React from "react";
+import { motion } from "framer-motion";
+import { ImageWithFallback } from "./figma/ImageWithFallback";
+// import successMetricsImage from 'figma:asset/619c58bb9b76889672d43420adc0dd6ef9ef21f6.png';
+
+const successMetricsImage =
+ "https://images.unsplash.com/photo-1559757148-5c350d0d3c56?w=400&h=300&fit=crop&auto=format";
+
+const AppSuccessMetrics = () => {
+ const metrics = [
+ {
+ value: "75+",
+ label: "App Developed",
+ description: "Successful mobile applications delivered",
+ },
+ {
+ value: "25+",
+ label: "App Deployed",
+ description: "Live applications in production",
+ },
+ {
+ value: "3M+",
+ label: "App downloads",
+ description: "Total downloads across all platforms",
+ },
+ ];
+
+ return (
+
+
+ );
+};
+
+export { AppSuccessMetrics };
diff --git a/components/CarouselTestimonials.tsx b/components/CarouselTestimonials.tsx
new file mode 100644
index 0000000..3a448d1
--- /dev/null
+++ b/components/CarouselTestimonials.tsx
@@ -0,0 +1,292 @@
+import React, { useState, useEffect, useRef } from "react";
+import { motion, AnimatePresence } from "framer-motion";
+import { ChevronLeft, ChevronRight } from "lucide-react";
+import { Card, CardContent } from "./ui/card";
+import { Button } from "./ui/button";
+import { Star } from "lucide-react";
+import { ImageWithFallback } from "./figma/ImageWithFallback";
+
+// High-quality Clutch logo placeholder
+const clutchLogo = "https://images.unsplash.com/photo-1560472354-b33ff0c44a43?w=120&h=60&fit=crop&auto=format";
+
+
+const testimonials = [
+ {
+ id: 1,
+ name: "Sarah Chen",
+ position: "CTO",
+ company: "FinTech Innovations",
+ image: "https://images.unsplash.com/photo-1494790108755-2616b332c5cd?w=150&h=150&fit=crop&auto=format",
+ rating: 5,
+ text: "WDI transformed our legacy banking system into a modern, scalable platform. Their expertise in financial technology is unmatched.",
+ projectType: "Banking Platform Modernization"
+ },
+ {
+ id: 2,
+ name: "Michael Rodriguez",
+ position: "Founder & CEO",
+ company: "HealthTech Solutions",
+ image: "https://images.unsplash.com/photo-1472099645785-5658abf4ff4e?w=150&h=150&fit=crop&auto=format",
+ rating: 5,
+ text: "The mobile health app WDI developed has revolutionized patient care delivery. Exceptional attention to healthcare compliance and user experience.",
+ projectType: "Healthcare Mobile App"
+ },
+ {
+ id: 3,
+ name: "Emily Watson",
+ position: "VP of Digital Strategy",
+ company: "RetailMax Corp",
+ image: "https://images.unsplash.com/photo-1580489944761-15a19d654956?w=150&h=150&fit=crop&auto=format",
+ rating: 5,
+ text: "Our e-commerce platform's performance improved by 300% after WDI's optimization. Their technical expertise is outstanding.",
+ projectType: "E-commerce Platform Enhancement"
+ },
+ {
+ id: 4,
+ name: "James Thompson",
+ position: "Chief Innovation Officer",
+ company: "EduTech Pioneers",
+ image: "https://images.unsplash.com/photo-1507003211169-0a1dd7228f2d?w=150&h=150&fit=crop&auto=format",
+ rating: 5,
+ text: "WDI's AI-powered learning platform has transformed how our students engage with content. Incredible innovation and execution.",
+ projectType: "AI-Powered EdTech Platform"
+ },
+ {
+ id: 5,
+ name: "Lisa Park",
+ position: "Operations Director",
+ company: "LogiFlow Systems",
+ image: "https://images.unsplash.com/photo-1438761681033-6461ffad8d80?w=150&h=150&fit=crop&auto=format",
+ rating: 5,
+ text: "The supply chain management system WDI built has streamlined our operations and reduced costs by 40%. Highly recommended.",
+ projectType: "Supply Chain Management System"
+ }
+];
+
+export const CarouselTestimonials = () => {
+ const [currentIndex, setCurrentIndex] = useState(0);
+ const [isAutoPlaying, setIsAutoPlaying] = useState(true);
+ const intervalRef = useRef(null);
+
+ // Auto-play functionality
+ useEffect(() => {
+ if (isAutoPlaying) {
+ intervalRef.current = setInterval(() => {
+ setCurrentIndex((prevIndex) =>
+ prevIndex === testimonials.length - 1 ? 0 : prevIndex + 1
+ );
+ }, 5000);
+ }
+
+ return () => {
+ if (intervalRef.current) {
+ clearInterval(intervalRef.current);
+ }
+ };
+ }, [isAutoPlaying]);
+
+ const goToPrevious = () => {
+ setIsAutoPlaying(false);
+ setCurrentIndex(currentIndex === 0 ? testimonials.length - 1 : currentIndex - 1);
+ };
+
+ const goToNext = () => {
+ setIsAutoPlaying(false);
+ setCurrentIndex(currentIndex === testimonials.length - 1 ? 0 : currentIndex + 1);
+ };
+
+ const goToSlide = (index: number) => {
+ setIsAutoPlaying(false);
+ setCurrentIndex(index);
+ };
+
+ // Resume auto-play after user interaction
+ useEffect(() => {
+ if (!isAutoPlaying) {
+ const resumeTimer = setTimeout(() => {
+ setIsAutoPlaying(true);
+ }, 10000); // Resume after 10 seconds
+
+ return () => clearTimeout(resumeTimer);
+ }
+ }, [isAutoPlaying]);
+
+ return (
+
+
+ );
+};
\ No newline at end of file
diff --git a/components/CaseStudyHighlight.tsx b/components/CaseStudyHighlight.tsx
new file mode 100644
index 0000000..57d0996
--- /dev/null
+++ b/components/CaseStudyHighlight.tsx
@@ -0,0 +1,274 @@
+import React from "react";
+import { motion } from "framer-motion";
+import { Card, CardContent } from "./ui/card";
+import { Button } from "./ui/button";
+import { Badge } from "./ui/badge";
+import { ArrowRight, ExternalLink, TrendingUp, Users, Clock, Star } from "lucide-react";
+import { ImageWithFallback } from "./figma/ImageWithFallback";
+import { navigateTo } from "../App";
+
+// High-quality project images
+const regroupImage = "https://images.unsplash.com/photo-1551650975-87deedd944c3?w=600&h=400&fit=crop&auto=format";
+const seezunImage = "https://images.unsplash.com/photo-1512941937669-90a1b58e7e9c?w=600&h=400&fit=crop&auto=format";
+const wokaAwardImage = "https://images.unsplash.com/photo-1517077304055-6e89abbf09b0?w=600&h=400&fit=crop&auto=format";
+
+const caseStudies = [
+ {
+ id: 1,
+ title: "Regroup",
+ subtitle: "Social Networking Revolution",
+ description: "A comprehensive social platform that connects communities worldwide with advanced messaging, group management, and content sharing capabilities.",
+ image: regroupImage,
+ category: "Social Platform",
+ client: "Regroup Technologies",
+ duration: "8 months",
+ teamSize: "12 developers",
+ technologies: ["React Native", "Node.js", "MongoDB", "WebRTC", "AWS"],
+ results: [
+ { metric: "User Engagement", value: "+240%" },
+ { metric: "Active Communities", value: "50K+" },
+ { metric: "Daily Messages", value: "2.5M+" }
+ ],
+ awards: ["Best Social App 2023", "Innovation Award"],
+ link: "/projects/regroup",
+ featured: true
+ },
+ {
+ id: 2,
+ title: "Seezun",
+ subtitle: "Next-Gen E-commerce Platform",
+ description: "Revolutionary e-commerce solution with AI-powered recommendations, seamless checkout, and integrated inventory management for modern retailers.",
+ image: seezunImage,
+ category: "E-commerce",
+ client: "Seezun Retail",
+ duration: "6 months",
+ teamSize: "8 developers",
+ technologies: ["React", "Python", "PostgreSQL", "Redis", "Stripe"],
+ results: [
+ { metric: "Conversion Rate", value: "+180%" },
+ { metric: "Page Load Speed", value: "2.1s" },
+ { metric: "Customer Satisfaction", value: "4.9/5" }
+ ],
+ awards: ["E-commerce Excellence Award"],
+ link: "/projects/seezun",
+ featured: true
+ },
+ {
+ id: 3,
+ title: "Woka",
+ subtitle: "Award-Winning Fitness App",
+ description: "Comprehensive fitness and wellness platform with personalized workout plans, nutrition tracking, and community features that won multiple industry awards.",
+ image: wokaAwardImage,
+ category: "Health & Fitness",
+ client: "Woka Wellness",
+ duration: "10 months",
+ teamSize: "15 developers",
+ technologies: ["Flutter", "Firebase", "TensorFlow", "Apple HealthKit", "Google Fit"],
+ results: [
+ { metric: "User Retention", value: "+320%" },
+ { metric: "Workout Completions", value: "1M+" },
+ { metric: "App Store Rating", value: "4.8/5" }
+ ],
+ awards: ["App of the Year 2023", "Health Innovation Award", "User Choice Award"],
+ link: "/projects/woka",
+ featured: true
+ }
+];
+
+export const CaseStudyHighlight = () => {
+ return (
+
+
+ );
+};
\ No newline at end of file
diff --git a/components/ClientLogos.tsx b/components/ClientLogos.tsx
new file mode 100644
index 0000000..0f2a7cf
--- /dev/null
+++ b/components/ClientLogos.tsx
@@ -0,0 +1,246 @@
+import { motion } from "framer-motion";
+import { GridPattern } from "./GridPattern";
+
+const companyLogos = [
+ { name: "TechFlow Solutions", logo: null, width: "140" },
+ { name: "DataSync Pro", logo: null, width: "120" },
+ { name: "CloudNova Systems", logo: null, width: "140" },
+ { name: "AMOZ", logo: null, width: "90" },
+ { name: "SimpliTend", logo: null, width: "120" },
+ { name: "Seezun", logo: null, width: "100" },
+ { name: "TradersCircuit", logo: null, width: "140" },
+ { name: "FreeU", logo: null, width: "90" },
+ { name: "Amble", logo: null, width: "100" },
+ { name: "Lean In World", logo: null, width: "130" },
+ { name: "WOKA", logo: null, width: "90" },
+ { name: "SSA", logo: null, width: "80" },
+ { name: "Dorf Ketal", logo: null, width: "120" },
+ { name: "Agromate", logo: null, width: "120" },
+ { name: "Regroup", logo: null, width: "110" },
+ { name: "CAD IT Solutions", logo: null, width: "150" },
+ { name: "Tanami Capital", logo: null, width: "140" },
+ { name: "SuperMoney Advisor", logo: null, width: "170" },
+ { name: "Prosperty Platform", logo: null, width: "160" },
+ { name: "Moving Cargo", logo: null, width: "130" },
+ { name: "GSF Mobile", logo: null, width: "120" },
+ { name: "Farm Feeder", logo: null, width: "120" },
+ { name: "Melbourne City Card", logo: null, width: "170" },
+ { name: "ByteForge Labs", logo: null, width: "130" },
+ { name: "CodeCraft Studio", logo: null, width: "140" },
+ { name: "DevStream Tech", logo: null, width: "130" },
+ { name: "NextGen Solutions", logo: null, width: "150" },
+ { name: "ProdPush Platform", logo: null, width: "140" },
+ { name: "ScaleUp Ventures", logo: null, width: "140" },
+ { name: "AlphaVision Labs", logo: null, width: "140" },
+ { name: "CloudSync Systems", logo: null, width: "140" },
+ { name: "TechNova Group", logo: null, width: "130" },
+ { name: "DataFlow Pro", logo: null, width: "120" },
+ { name: "InnovateLab", logo: null, width: "120" }
+];
+
+const countryFlags = [
+ {
+ name: "United States",
+ alt: "United States flag icon",
+ flagSvg: (
+
+ )
+ },
+ {
+ name: "United Kingdom",
+ alt: "United Kingdom flag icon",
+ flagSvg: (
+
+ )
+ },
+ {
+ name: "India",
+ alt: "India flag icon",
+ flagSvg: (
+
+ )
+ },
+ {
+ name: "Canada",
+ alt: "Canada flag icon",
+ flagSvg: (
+
+ )
+ },
+ {
+ name: "Australia",
+ alt: "Australia flag icon",
+ flagSvg: (
+
+ )
+ }
+];
+
+const ProjectImageCircles = () => (
+
+
+);
+
+const LogoCard = ({ name, width }: { name: string; width: string }) => (
+
+ {[...logos, ...logos].map((company, index) => (
+
+);
+
+export const ClientLogos = () => {
+ return (
+
+
+ );
+};
\ No newline at end of file
diff --git a/components/CookieConsent.tsx b/components/CookieConsent.tsx
new file mode 100644
index 0000000..6709f19
--- /dev/null
+++ b/components/CookieConsent.tsx
@@ -0,0 +1,205 @@
+import React, { useState, useEffect } from 'react';
+import { motion, AnimatePresence } from 'framer-motion';
+import { X, Cookie, Shield, Settings } from 'lucide-react';
+import { Button } from './ui/button';
+
+export const CookieConsent = () => {
+ const [isVisible, setIsVisible] = useState(false);
+ const [showSettings, setShowSettings] = useState(false);
+
+ useEffect(() => {
+ // Check if user has already made a choice
+ const consent = localStorage.getItem('cookieConsent');
+ if (!consent) {
+ // Show banner after a short delay
+ const timer = setTimeout(() => {
+ setIsVisible(true);
+ }, 1000);
+ return () => clearTimeout(timer);
+ }
+ }, []);
+
+ const handleAcceptAll = () => {
+ localStorage.setItem('cookieConsent', 'accepted');
+ localStorage.setItem('cookiePreferences', JSON.stringify({
+ necessary: true,
+ analytics: true,
+ marketing: true,
+ functional: true
+ }));
+ setIsVisible(false);
+ };
+
+ const handleDeclineAll = () => {
+ localStorage.setItem('cookieConsent', 'declined');
+ localStorage.setItem('cookiePreferences', JSON.stringify({
+ necessary: true,
+ analytics: false,
+ marketing: false,
+ functional: false
+ }));
+ setIsVisible(false);
+ };
+
+ const handleSavePreferences = () => {
+ localStorage.setItem('cookieConsent', 'customized');
+ // In a real app, you would save the specific preferences here
+ setIsVisible(false);
+ setShowSettings(false);
+ };
+
+ const handleClose = () => {
+ setIsVisible(false);
+ };
+
+ if (!isVisible) return null;
+
+ return (
+
+
+
+
+ );
+};
\ No newline at end of file
diff --git a/components/CountryFlags.tsx b/components/CountryFlags.tsx
new file mode 100644
index 0000000..494467a
--- /dev/null
+++ b/components/CountryFlags.tsx
@@ -0,0 +1,192 @@
+import { motion } from "framer-motion";
+
+const foundersAndCTOs = [
+ {
+ name: "SimpliTend",
+ title: "HealthTech Platform",
+ country: "India",
+ code: "IN",
+ flagEmoji: "🇮🇳",
+ projectType: "Care Management"
+ },
+ {
+ name: "Seezun",
+ title: "Fashion Marketplace",
+ country: "United Kingdom",
+ code: "GB",
+ flagEmoji: "🇬🇧",
+ projectType: "P2P Platform"
+ },
+ {
+ name: "AMOZ",
+ title: "E-commerce Platform",
+ country: "United States",
+ code: "US",
+ flagEmoji: "🇺🇸",
+ projectType: "Digital Commerce"
+ },
+ {
+ name: "TradersCircuit",
+ title: "Trading Platform",
+ country: "United Arab Emirates",
+ code: "AE",
+ flagEmoji: "🇦🇪",
+ projectType: "FinTech"
+ },
+ {
+ name: "FreeU",
+ title: "Social Platform",
+ country: "Australia",
+ code: "AU",
+ flagEmoji: "🇦🇺",
+ projectType: "Community"
+ },
+ {
+ name: "Dorf Ketal",
+ title: "Manufacturing Tech",
+ country: "Germany",
+ code: "DE",
+ flagEmoji: "🇩🇪",
+ projectType: "Industrial IoT"
+ },
+ {
+ name: "WOKA",
+ title: "Learning Platform",
+ country: "Singapore",
+ code: "SG",
+ flagEmoji: "🇸🇬",
+ projectType: "EdTech"
+ },
+ {
+ name: "Regroup",
+ title: "Sports Networking",
+ country: "Canada",
+ code: "CA",
+ flagEmoji: "🇨🇦",
+ projectType: "Social Sports"
+ },
+ {
+ name: "Tanami Capital",
+ title: "Wealth Management",
+ country: "Brazil",
+ code: "BR",
+ flagEmoji: "🇧🇷",
+ projectType: "FinTech"
+ },
+ {
+ name: "SSA",
+ title: "Networking Platform",
+ country: "Japan",
+ code: "JP",
+ flagEmoji: "🇯🇵",
+ projectType: "Professional Network"
+ },
+ {
+ name: "Amble",
+ title: "Travel Platform",
+ country: "France",
+ code: "FR",
+ flagEmoji: "🇫🇷",
+ projectType: "Travel Tech"
+ },
+ {
+ name: "Agromate",
+ title: "AgriTech Solution",
+ country: "Netherlands",
+ code: "NL",
+ flagEmoji: "🇳🇱",
+ projectType: "Agriculture"
+ },
+ {
+ name: "Moving Cargo",
+ title: "Logistics Platform",
+ country: "Sweden",
+ code: "SE",
+ flagEmoji: "🇸🇪",
+ projectType: "Supply Chain"
+ },
+ {
+ name: "Farm Feeder",
+ title: "Agricultural Tech",
+ country: "New Zealand",
+ code: "NZ",
+ flagEmoji: "🇳🇿",
+ projectType: "AgriTech"
+ },
+ {
+ name: "Melbourne City Card",
+ title: "City Services Platform",
+ country: "South Korea",
+ code: "KR",
+ flagEmoji: "🇰🇷",
+ projectType: "Civic Tech"
+ }
+];
+
+export const CountryFlags = () => {
+ return (
+
+
+ );
+};
\ No newline at end of file
diff --git a/components/CustomReCaptcha.tsx b/components/CustomReCaptcha.tsx
new file mode 100644
index 0000000..4c5e377
--- /dev/null
+++ b/components/CustomReCaptcha.tsx
@@ -0,0 +1,160 @@
+import React, { useEffect, useRef, forwardRef, useImperativeHandle } from 'react';
+
+interface CustomReCaptchaProps {
+ siteKey: string;
+ onVerify: (token: string) => void;
+ onExpired?: () => void;
+ onError?: () => void;
+ className?: string;
+}
+
+export interface ReCaptchaRef {
+ reset: () => void;
+ execute: () => void;
+}
+
+declare global {
+ interface Window {
+ grecaptcha: any;
+ }
+}
+
+const CustomReCaptcha = forwardRef(({
+ siteKey,
+ onVerify,
+ onExpired,
+ onError,
+ className = ""
+}, ref) => {
+ const captchaRef = useRef(null);
+ const widgetId = useRef(null);
+ const isLoadedRef = useRef(false);
+
+ useImperativeHandle(ref, () => ({
+ reset: () => {
+ if (window.grecaptcha && widgetId.current !== null) {
+ window.grecaptcha.reset(widgetId.current);
+ }
+ },
+ execute: () => {
+ if (window.grecaptcha && widgetId.current !== null) {
+ window.grecaptcha.execute(widgetId.current);
+ }
+ }
+ }));
+
+ const loadReCaptcha = () => {
+ if (window.grecaptcha) {
+ renderReCaptcha();
+ return;
+ }
+
+ // Load reCAPTCHA script
+ const script = document.createElement('script');
+ script.src = 'https://www.google.com/recaptcha/api.js?onload=onReCaptchaLoad&render=explicit';
+ script.async = true;
+ script.defer = true;
+
+ // Set up callback for when script loads
+ (window as any).onReCaptchaLoad = () => {
+ renderReCaptcha();
+ };
+
+ document.head.appendChild(script);
+ };
+
+ const renderReCaptcha = () => {
+ if (!captchaRef.current || isLoadedRef.current) return;
+
+ try {
+ widgetId.current = window.grecaptcha.render(captchaRef.current, {
+ sitekey: siteKey,
+ callback: onVerify,
+ 'expired-callback': onExpired,
+ 'error-callback': onError,
+ theme: 'dark',
+ size: 'normal'
+ });
+ isLoadedRef.current = true;
+ } catch (error) {
+ console.error('Error rendering reCAPTCHA:', error);
+ if (onError) onError();
+ }
+ };
+
+ useEffect(() => {
+ loadReCaptcha();
+
+ return () => {
+ // Cleanup
+ if (window.grecaptcha && widgetId.current !== null) {
+ try {
+ window.grecaptcha.reset(widgetId.current);
+ } catch (error) {
+ // Ignore cleanup errors
+ }
+ }
+ };
+ }, []);
+
+ // Add styles to document head instead of using styled-jsx
+ useEffect(() => {
+ const styleId = 'custom-recaptcha-styles';
+
+ // Check if styles are already added
+ if (document.getElementById(styleId)) {
+ return;
+ }
+
+ const styleElement = document.createElement('style');
+ styleElement.id = styleId;
+ styleElement.textContent = `
+ .grecaptcha-badge {
+ visibility: hidden;
+ }
+
+ iframe[src*="recaptcha"] {
+ border-radius: 8px !important;
+ overflow: hidden;
+ }
+
+ .g-recaptcha {
+ transform: scale(1);
+ transform-origin: center;
+ }
+
+ .g-recaptcha > div {
+ border-radius: 8px !important;
+ overflow: hidden;
+ box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
+ }
+ `;
+
+ document.head.appendChild(styleElement);
+
+ // Cleanup function to remove styles when component unmounts
+ return () => {
+ const existingStyle = document.getElementById(styleId);
+ if (existingStyle) {
+ document.head.removeChild(existingStyle);
+ }
+ };
+ }, []);
+
+ return (
+ = ({
+ title = "Frequently Asked Questions",
+ subtitle,
+ faqs
+}) => {
+ return (
+
+
+ );
+};
\ No newline at end of file
diff --git a/components/FeaturedCaseStudies.tsx b/components/FeaturedCaseStudies.tsx
new file mode 100644
index 0000000..b84a8cb
--- /dev/null
+++ b/components/FeaturedCaseStudies.tsx
@@ -0,0 +1,497 @@
+import React from "react";
+import { motion } from "framer-motion";
+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,
+ Users,
+ Zap,
+ Eye,
+ ShoppingCart,
+ Heart,
+ Star,
+ Clock,
+ Target,
+ Smartphone,
+ BarChart3,
+ Settings,
+ Network,
+ Search,
+ Calendar,
+ PlayCircle,
+ PartyPopper,
+ PieChart
+} from "lucide-react";
+
+const FeaturedCaseStudies = () => {
+ const caseStudies = [
+ {
+ id: 1,
+ title: "SimplyTend",
+ client: "Simply Tend",
+ description: "SimpliTend is a mobile-first care management platform that connects patients and caregivers through real-time alerts, scheduling, and safety tools—delivered via dual apps and an admin dashboard.",
+ keyAchievement: {
+ number: "95%",
+ metric: "Care Coordination Efficiency",
+ icon: Heart
+ },
+ visual: "https://images.unsplash.com/photo-1559757148-5c350d0d3c56?w=600&h=400&fit=crop&auto=format",
+ tags: ["Mobile App", "Care Management", "Real-Time Alerts", "Scheduling"],
+ gradient: "from-blue-500/20 to-cyan-500/20",
+ accentColor: "blue",
+ featured: true
+ },
+ {
+ id: 2,
+ title: "Seezun",
+ client: "Seezun",
+ description: "Seezun is a trend-driven P2P fashion marketplace enabling users to rent, buy, sell, or lend South Asian ethnicwear via mobile and web platforms.",
+ keyAchievement: {
+ number: "85%",
+ metric: "Brand Recognition",
+ icon: TrendingUp
+ },
+ visual: "https://images.unsplash.com/photo-1441986300917-64674bd600d8?w=600&h=400&fit=crop&auto=format",
+ tags: ["Marketplace", "P2P", "Fashion", "Mobile & Web"],
+ gradient: "from-purple-500/20 to-pink-500/20",
+ accentColor: "purple",
+ featured: false
+ },
+ {
+ id: 3,
+ title: "WOKA",
+ client: "WOKA Creations Pvt. Ltd",
+ description: "WDI transformed WOKA's hybrid app into a high-performance native Android and iOS platform featuring seamless streaming, deep analytics, and robust 120-hour monthly support.",
+ keyAchievement: {
+ number: "300%",
+ metric: "User Retention",
+ icon: Users
+ },
+ visual: "https://images.unsplash.com/photo-1503676260728-1c00da094a0b?w=600&h=400&fit=crop&auto=format",
+ tags: ["Native App", "Streaming", "Analytics", "Support"],
+ gradient: "from-green-500/20 to-emerald-500/20",
+ accentColor: "green",
+ featured: false
+ }
+ ];
+
+ const moreSuccessStories = [
+ {
+ id: 4,
+ title: "TradersCircuit",
+ client: "TradersCircuit",
+ description: "TradersCircuit empowers India's millennials and Gen Z with smarter investments through seamless investment experience and ultra-personalized financial planning.",
+ keyAchievement: {
+ number: "300%",
+ metric: "User Growth",
+ icon: TrendingUp
+ },
+ visual: "https://images.unsplash.com/photo-1611974789855-9c2a0a7236a3?w=600&h=400&fit=crop&auto=format",
+ tags: ["FinTech", "Trading Platform", "Indian Market", "Mobile App"],
+ gradient: "from-green-500/20 to-emerald-500/20",
+ accentColor: "green",
+ featured: false
+ },
+ {
+ id: 5,
+ title: "RanOutOf",
+ client: "Global Ease Solutions",
+ description: "WDI developed a smart grocery planning app with barcode scanning, voice commands, reminders, and a web-based admin CMS for Global Ease Solutions.",
+ keyAchievement: {
+ number: "75%",
+ metric: "Shopping Efficiency",
+ icon: ShoppingCart
+ },
+ visual: "https://images.unsplash.com/photo-1542838132-92c53300491e?w=600&h=400&fit=crop&auto=format",
+ tags: ["Mobile App", "Barcode Scanning", "Voice AI", "Grocery Tech"],
+ gradient: "from-green-500/20 to-emerald-500/20",
+ accentColor: "green",
+ featured: false
+ },
+ {
+ id: 6,
+ title: "Prosperty",
+ client: "Prosperty Ltd",
+ description: "Break the barrier of real estate investing. With Prosperty, you can invest in portions of properties, making portfolio diversification smarter and more accessible.",
+ keyAchievement: {
+ number: "300%",
+ metric: "Portfolio Options",
+ icon: PieChart
+ },
+ visual: "https://images.unsplash.com/photo-1560518883-ce09059eeffa?w=600&h=400&fit=crop&auto=format",
+ tags: ["Real Estate", "Investment", "FinTech", "Portfolio"],
+ gradient: "from-blue-500/20 to-cyan-500/20",
+ accentColor: "blue",
+ featured: false
+ },
+ {
+ id: 7,
+ title: "GoodTimes",
+ client: "GoodTimes Ltd",
+ description: "From casual hangouts to special celebrations, Good Times makes browsing and booking a breeze, so you never miss out.",
+ keyAchievement: {
+ number: "250%",
+ metric: "Event Discovery",
+ icon: PartyPopper
+ },
+ visual: "https://images.unsplash.com/photo-1492684223066-81342ee5ff30?w=600&h=400&fit=crop&auto=format",
+ tags: ["Events", "Booking", "Lifestyle", "Mobile App"],
+ gradient: "from-purple-500/20 to-pink-500/20",
+ accentColor: "purple",
+ featured: false
+ }
+ ];
+
+ return (
+
+
+ );
+};
+
+export default FeaturedCaseStudies;
\ No newline at end of file
diff --git a/components/Footer.tsx b/components/Footer.tsx
new file mode 100644
index 0000000..fd900bf
--- /dev/null
+++ b/components/Footer.tsx
@@ -0,0 +1,426 @@
+import { motion } from "framer-motion";
+import {
+ Mail,
+ Phone,
+ MapPin,
+ Linkedin,
+ Twitter,
+ Github,
+ Youtube,
+} from "lucide-react";
+import { GridPattern } from "./GridPattern";
+import { Button } from "./ui/button";
+import { Input } from "./ui/input";
+import BlackLogo14 from "../imports/BlackLogo14";
+import { navigateTo } from "../App";
+import { useState } from "react";
+
+const footerNavigation = {
+ Explore: [
+ { label: "Home", url: "/home" },
+ { label: "Services", url: "/services" },
+ { label: "Solutions", url: "/solutions" },
+ { label: "Industries", url: "/industries" },
+ { label: "Company", url: "/company" },
+ { label: "Contact", url: "/contact" },
+ ],
+ Resources: [
+ { label: "Articles", url: "/resources/blog" },
+ { label: "Case Studies", url: "/case-studies" },
+ {
+ label: "Client Testimonials",
+ url: "/resources/client-testimonials",
+ },
+ {
+ label: "Whitepapers & Insights",
+ url: "/resources/whitepapers-insights",
+ },
+ { label: "FAQ", url: "/resources/faqs" },
+ ],
+ Services: [
+ {
+ label: "Mobile App Development",
+ url: "/services/mobile-app-development",
+ },
+ {
+ label: "Web & Cloud Solutions",
+ url: "/services/web-cloud-solutions",
+ },
+ {
+ label: "Software Engineering",
+ url: "/services/software-engineering",
+ },
+ {
+ label: "Design & Experience",
+ url: "/services/design-experience",
+ },
+ ],
+ "AI & ML": [
+ {
+ label: "Artificial Intelligence Services",
+ url: "/ai/artificial-intelligence-services",
+ },
+ {
+ label: "Machine Learning Solutions",
+ url: "/ai/machine-learning-solutions",
+ },
+ ],
+ Solutions: [
+ {
+ label: "Digital Product Development",
+ url: "/digital-product-development",
+ },
+ {
+ label: "MVP & Startup Launch Packages",
+ url: "/mvp-startup-launch",
+ },
+ {
+ label: "Legacy System Rebuilds",
+ url: "/legacy-system-rebuilds",
+ },
+ {
+ label: "Dedicated Development Centers",
+ url: "/dedicated-development-centers",
+ },
+ {
+ label: "Business Process Automation",
+ url: "/business-process-automation",
+ },
+ {
+ label: "Compliance-Ready Systems",
+ url: "/compliance-ready-systems",
+ },
+ ],
+};
+
+const socialLinks = [
+ {
+ name: "LinkedIn",
+ icon: Linkedin,
+ url: "https://linkedin.com/company/wdi",
+ },
+ {
+ name: "Twitter",
+ icon: Twitter,
+ url: "https://twitter.com/wdi_dev",
+ },
+ {
+ name: "GitHub",
+ icon: Github,
+ url: "https://github.com/wdi",
+ },
+ {
+ name: "YouTube",
+ icon: Youtube,
+ url: "https://youtube.com/wdi",
+ },
+];
+
+const contactInfo = [
+ {
+ icon: Mail,
+ label: "ideas@wdipl.com",
+ url: "mailto:ideas@wdipl.com",
+ },
+ {
+ icon: Phone,
+ label: "(+91) 7700900039",
+ url: "tel:+917700900039",
+ },
+ {
+ icon: MapPin,
+ label:
+ "614, Palm Spring Centre, Link Road, Malad (West), Mumbai - 400064. India.",
+ url: "#",
+ },
+];
+
+const FooterSection = ({
+ title,
+ links,
+ delay = 0,
+}: {
+ title: string;
+ links: Array<{ label: string; url: string }>;
+ delay?: number;
+}) => (
+
+
+);
+
+// Newsletter subscription component
+const NewsletterSection = () => {
+ const [email, setEmail] = useState("");
+ const [isSubscribed, setIsSubscribed] = useState(false);
+ const [isSubmitting, setIsSubmitting] = useState(false);
+
+ const handleSubscribe = async (e: React.FormEvent) => {
+ e.preventDefault();
+ if (!email) return;
+
+ setIsSubmitting(true);
+
+ // Simulate API call
+ await new Promise((resolve) => setTimeout(resolve, 1000));
+
+ setIsSubscribed(true);
+ setIsSubmitting(false);
+ setEmail("");
+
+ // Reset success message after 3 seconds
+ setTimeout(() => setIsSubscribed(false), 3000);
+ };
+
+ return (
+
+
+ );
+};
+
+export const Footer = () => {
+ return (
+
+ );
+};
\ No newline at end of file
diff --git a/components/GridPattern.tsx b/components/GridPattern.tsx
new file mode 100644
index 0000000..76aadc8
--- /dev/null
+++ b/components/GridPattern.tsx
@@ -0,0 +1,26 @@
+export const GridPattern = ({ strokeDasharray = "4 2" }: { strokeDasharray?: string }) => {
+ return (
+
+ );
+};
\ No newline at end of file
diff --git a/components/HeroBanner.tsx b/components/HeroBanner.tsx
new file mode 100644
index 0000000..289c0fc
--- /dev/null
+++ b/components/HeroBanner.tsx
@@ -0,0 +1,83 @@
+import { Button } from "./ui/button";
+import { GridPattern } from "./GridPattern";
+import { ChevronRight } from "lucide-react";
+import { navigateTo } from "../App";
+
+interface HeroBannerProps {
+ category?: string;
+ title: string;
+ description: string;
+ primaryCTA: {
+ text: string;
+ href: string;
+ };
+ secondaryCTA?: {
+ text: string;
+ href: string;
+ };
+}
+
+export function HeroBanner({
+ category,
+ title,
+ description,
+ primaryCTA,
+ secondaryCTA
+}: HeroBannerProps) {
+ return (
+
+
+ );
+}
\ No newline at end of file
diff --git a/components/HeroSection.tsx b/components/HeroSection.tsx
new file mode 100644
index 0000000..07c6448
--- /dev/null
+++ b/components/HeroSection.tsx
@@ -0,0 +1,90 @@
+import { Button } from "./ui/button";
+import { GridPattern } from "./GridPattern";
+import { SplineFallback } from "./SplineFallback";
+import { Calendar, Briefcase } from "lucide-react";
+import { navigateTo } from "../App";
+
+export function HeroSection() {
+ return (
+
+
+ );
+}
\ No newline at end of file
diff --git a/components/HorizontalTagScroller.tsx b/components/HorizontalTagScroller.tsx
new file mode 100644
index 0000000..02b3621
--- /dev/null
+++ b/components/HorizontalTagScroller.tsx
@@ -0,0 +1,95 @@
+import { motion } from "framer-motion";
+import {
+ CreditCard,
+ Heart,
+ ShoppingCart,
+ GraduationCap,
+ Truck,
+ Video,
+ Building,
+ Plane,
+ Factory,
+ Wheat,
+ Gamepad2,
+ Cloud
+} from "lucide-react";
+import { GridPattern } from "./GridPattern";
+
+const industries = [
+ // First row
+ { name: "FinTech", icon: CreditCard },
+ { name: "HealthTech", icon: Heart },
+ { name: "eCommerce", icon: ShoppingCart },
+ { name: "EdTech", icon: GraduationCap },
+ // 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 }
+];
+
+const IndustryCard = ({ industry, index }: {
+ industry: { name: string; icon: any };
+ index: number;
+}) => {
+ const Icon = industry.icon;
+
+ return (
+
+
+ );
+};
+
+export const HorizontalTagScroller = () => {
+ return (
+
+
+ );
+};
\ No newline at end of file
diff --git a/components/InlineCTA.tsx b/components/InlineCTA.tsx
new file mode 100644
index 0000000..5f15300
--- /dev/null
+++ b/components/InlineCTA.tsx
@@ -0,0 +1,214 @@
+import { motion } from "framer-motion";
+import { Lightbulb, Clock } from "lucide-react";
+import { Button } from "./ui/button";
+import { GridPattern } from "./GridPattern";
+import { navigateTo } from "../App";
+
+export const InlineCTA = () => {
+ return (
+
+
+ );
+};
\ No newline at end of file
diff --git a/components/Navigation.tsx b/components/Navigation.tsx
new file mode 100644
index 0000000..8b05d49
--- /dev/null
+++ b/components/Navigation.tsx
@@ -0,0 +1,843 @@
+import { useState, useRef, useEffect, useCallback } from "react";
+import { motion, AnimatePresence } from "framer-motion";
+import {
+ ChevronDown,
+ Menu,
+ X,
+ Code,
+ Smartphone,
+ Globe,
+ Palette,
+ Brain,
+ Users,
+ Building2,
+ Monitor,
+ ShoppingCart,
+ Server,
+ Wrench,
+ Lightbulb,
+ Database,
+ Eye,
+ MessageSquare,
+ Target,
+ BarChart3,
+ Zap,
+ Rocket,
+ Shield,
+ Cog,
+ HeartHandshake,
+ GraduationCap,
+ Stethoscope,
+ ShoppingBag,
+ Truck,
+ Gamepad2,
+ Factory,
+ DollarSign,
+ Home,
+ BookOpen,
+ Users2,
+ Code2,
+ Laptop,
+ Paintbrush,
+ Bot,
+ RefreshCw,
+ Info,
+ Clock,
+ Award,
+ Briefcase,
+ Heart,
+ Newspaper,
+ FileText,
+ Star,
+ HelpCircle,
+ Mail,
+ FileCheck,
+ Phone,
+ MapPin,
+ Headphones,
+ UserPlus,
+ Apple,
+ GitMerge,
+ Gauge,
+ Chrome,
+ Watch,
+ Cloud,
+ CloudCog,
+ Link,
+ PenTool,
+ MousePointer2,
+ TestTube,
+ PlayCircle,
+ Search,
+ Workflow,
+ Sparkles,
+ Wand2,
+ Activity,
+ TrendingUp,
+ Settings,
+ ArrowRight,
+ Calculator,
+ Calendar,
+ FileEdit
+} from "lucide-react";
+import { Button } from "./ui/button";
+import BlackLogo14 from "../imports/BlackLogo14";
+import { navigateTo } from "../App";
+
+const navigationData = {
+ main_navigation: [
+ "Services",
+ "AI & ML",
+ "Solutions",
+ "Industries",
+ "Hire Talent",
+ "Company",
+ "Resources"
+ ],
+ services: [
+ {
+ category: "Mobile App Development",
+ icon: Smartphone,
+ 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" }
+ ]
+ },
+ {
+ 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: "eCommerce Platforms", href: "/services/ecommerce-platforms" },
+ { name: "Admin Panels & Dashboards", href: "/services/admin-panels-dashboards" },
+ { name: "API & Backend Development", href: "/services/api-backend-development" }
+ ]
+ },
+ {
+ 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" }
+ ]
+ },
+ {
+ category: "Design & Experience",
+ icon: Paintbrush,
+ 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" }
+ ]
+ }
+ ],
+ ai_data_intelligence: [
+ {
+ category: "Artificial Intelligence Services",
+ 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" }
+ ]
+ },
+ {
+ 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" }
+ ]
+ }
+ ],
+ 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" }
+ ],
+ 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" }
+ ]
+ },
+ {
+ 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" }
+ ]
+ },
+ {
+ 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" }
+ ]
+ },
+ {
+ 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" }
+ ]
+ },
+ {
+ 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" }
+ ]
+ },
+ {
+ 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" }
+ ]
+ },
+ {
+ 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" }
+ ]
+ }
+ ],
+ 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: "Engagement Models", icon: Settings, href: "/engagement-models" },
+ { 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: "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: "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" }
+ ],
+ 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" }
+ ]
+};
+
+// CTA configurations for each mega menu type - UPDATED ALL TO LINK TO START A PROJECT PAGE
+const megaMenuCTAs = {
+ Services: {
+ title: "Development Quote",
+ subtitle: "Get a custom quote for your project",
+ buttonText: "Get Started",
+ href: "/start-a-project",
+ icon: Calculator
+ },
+ "AI & ML": {
+ title: "AI Strategy Session",
+ subtitle: "Discover AI opportunities for your business",
+ buttonText: "Book Session",
+ href: "/start-a-project",
+ icon: Bot
+ },
+ Solutions: {
+ title: "Solution Consultation",
+ subtitle: "Find the perfect solution for your business",
+ buttonText: "Consult Now",
+ href: "/start-a-project",
+ icon: Lightbulb
+ },
+ Industries: {
+ title: "Industry Expertise",
+ subtitle: "Learn how we transform your industry",
+ buttonText: "Explore",
+ href: "/start-a-project",
+ icon: Building2
+ },
+ "Hire Talent": {
+ title: "Team Assessment",
+ subtitle: "Get matched with the right talent",
+ buttonText: "Start Hiring",
+ href: "/start-a-project",
+ icon: Users
+ },
+ Company: {
+ title: "Schedule a Call",
+ subtitle: "Let's discuss your project requirements",
+ buttonText: "Book Call",
+ href: "/start-a-project",
+ icon: Calendar
+ },
+ Resources: {
+ title: "Free Consultation",
+ subtitle: "Get expert insights for your project",
+ buttonText: "Get Started",
+ href: "/start-a-project",
+ icon: FileEdit
+ },
+ Contact: {
+ title: "Start Your Project",
+ subtitle: "Ready to bring your idea to life?",
+ buttonText: "Get Started",
+ href: "/start-a-project",
+ icon: Rocket
+ }
+};
+
+// Horizontal CTA Component matching reference design
+const MegaMenuCTA = ({ type }: { type: string }) => {
+ const cta = megaMenuCTAs[type as keyof typeof megaMenuCTAs];
+ if (!cta) return null;
+
+ return (
+
+
+ );
+};
+
+interface MegaMenuProps {
+ isOpen: boolean;
+ onClose: () => void;
+ onCancelClose: () => void;
+ type: string;
+ timeoutRef?: React.MutableRefObject;
+}
+
+const MegaMenu = ({ isOpen, onClose, onCancelClose, type, timeoutRef }: MegaMenuProps) => {
+ if (!isOpen) return null;
+
+ const navigate = (path: string) => {
+ navigateTo(path);
+ onClose();
+ };
+
+ const renderServicesMenu = () => (
+
+
+
+
+
+ );
+};
+
+export const Navigation = () => {
+ const [activeMenu, setActiveMenu] = useState(null);
+ const [isMobileMenuOpen, setIsMobileMenuOpen] = useState(false);
+ const timeoutRef = useRef();
+ const navRef = useRef(null);
+
+ const navigate = (path: string) => {
+ navigateTo(path);
+ };
+
+ const openMenu = useCallback((item: string) => {
+ if (timeoutRef.current) {
+ clearTimeout(timeoutRef.current);
+ }
+ if (['Services', 'AI & ML', 'Solutions', 'Industries', 'Hire Talent', 'Company', 'Resources'].includes(item)) {
+ setActiveMenu(item);
+ }
+ }, []);
+
+ const closeMenu = useCallback(() => {
+ timeoutRef.current = setTimeout(() => {
+ setActiveMenu(null);
+ }, 200);
+ }, []);
+
+ const cancelClose = useCallback(() => {
+ if (timeoutRef.current) {
+ clearTimeout(timeoutRef.current);
+ }
+ }, []);
+
+ 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 handleNavMouseEnter = useCallback(() => {
+ cancelClose();
+ }, [cancelClose]);
+
+ useEffect(() => {
+ return () => {
+ if (timeoutRef.current) {
+ clearTimeout(timeoutRef.current);
+ }
+ };
+ }, []);
+
+ const hasDropdown = (item: string) => {
+ 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
+ default:
+ return null;
+ }
+ };
+
+ return (
+
+ );
+};
\ No newline at end of file
diff --git a/components/ProcessSection.tsx b/components/ProcessSection.tsx
new file mode 100644
index 0000000..8a1cb2e
--- /dev/null
+++ b/components/ProcessSection.tsx
@@ -0,0 +1,280 @@
+import { motion } from "framer-motion";
+import { useRef } from "react";
+import { ArrowRight, FileText, Users, CheckCircle, Rocket, Search, Code, Palette, Monitor } from "lucide-react";
+import { Button } from "./ui/button";
+import { Badge } from "./ui/badge";
+
+const steps = [
+ {
+ id: "step-1",
+ title: "1. Define Scope",
+ description: "We begin by gathering all project inputs, defining clear goals, creating technical documentation, and aligning on expectations.",
+ visual: {
+ type: "icon_or_doc_mockup",
+ style: "minimal_ui"
+ }
+ },
+ {
+ id: "step-2",
+ title: "2. Design UI/UX",
+ description: "Our designers craft user-centric interfaces in Figma with clickable flows, visual systems, and detailed wireframes for all screens.",
+ tags: [
+ { label: "Wireframes", color: "#6366F1" },
+ { label: "Prototyping", color: "#10B981" },
+ { label: "UI System", color: "#F59E0B" }
+ ]
+ },
+ {
+ id: "step-3",
+ title: "3. Develop with Agile Sprints",
+ description: "We use Agile sprints to turn designs into production-ready code, with continuous integration and weekly builds.",
+ tags: [
+ { label: "Frontend", color: "#3B82F6" },
+ { label: "Backend", color: "#0EA5E9" },
+ { label: "APIs", color: "#8B5CF6" }
+ ]
+ },
+ {
+ id: "step-4",
+ title: "4. Test, Launch & Scale",
+ description: "After QA and UAT, we help launch confidently. Then we monitor, iterate, and scale your product to grow with your users.",
+ chat_simulation: [
+ { from: "You", text: "Are we ready to go live?" },
+ { from: "Team", text: "Yes! Final tests passed 🚀" }
+ ]
+ }
+];
+
+// Chat simulation component - Compact version
+const ChatSimulation = ({ messages }: { messages: Array<{ from: string; text: string }> }) => {
+ return (
+
+
+ );
+};
+
+export const ProcessSection = () => {
+ const titleRef = useRef(null);
+
+ return (
+
+
+ );
+};
\ No newline at end of file
diff --git a/components/ResourceCards.tsx b/components/ResourceCards.tsx
new file mode 100644
index 0000000..0ba469a
--- /dev/null
+++ b/components/ResourceCards.tsx
@@ -0,0 +1,169 @@
+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";
+
+const resources = [
+ {
+ title: "UX review presentations",
+ excerpt: "How do you create compelling presentations that wow clients, and actually close projects and deals? Here are the key insights that will elevate your game.",
+ readTime: "8 min read",
+ date: "Dec 15, 2024",
+ image: "https://images.unsplash.com/photo-1560472355-536de3962603?w=800&h=400&fit=crop&auto=format",
+ author: {
+ name: "Olivia Rhye",
+ avatar: "https://images.unsplash.com/photo-1494790108755-2616b612b47c?w=150&h=150&fit=crop&crop=face&auto=format"
+ },
+ category: "Design",
+ slug: "ux-review-presentations"
+ },
+ {
+ title: "Migrating to Linear 101",
+ excerpt: "Linear helps streamline software projects, sprints, tasks, and bug tracking. Here's how to get started and make the most of it.",
+ readTime: "6 min read",
+ date: "Dec 10, 2024",
+ image: "https://images.unsplash.com/photo-1551434678-e076c223a692?w=800&h=400&fit=crop&auto=format",
+ author: {
+ name: "Phoenix Baker",
+ avatar: "https://images.unsplash.com/photo-1472099645785-5658abf4ff4e?w=150&h=150&fit=crop&crop=face&auto=format"
+ },
+ category: "Software Engineering",
+ slug: "migrating-to-linear-101"
+ },
+ {
+ title: "Building your API Stack",
+ excerpt: "The rise of RESTful APIs has been met by a rise in tools for creating, testing, and managing them. Here are the best practices for API development.",
+ readTime: "12 min read",
+ date: "Dec 5, 2024",
+ image: "https://images.unsplash.com/photo-1555949963-ff9fe0c870eb?w=800&h=400&fit=crop&auto=format",
+ author: {
+ name: "Lana Steiner",
+ avatar: "https://images.unsplash.com/photo-1438761681033-6461ffad8d80?w=150&h=150&fit=crop&crop=face&auto=format"
+ },
+ category: "Software Engineering",
+ slug: "building-your-api-stack"
+ }
+];
+
+const ResourceCard = ({ resource, index }: { resource: typeof resources[0]; index: number }) => {
+ return (
+ navigateTo(`/insights/${resource.slug}`)}
+ >
+ {/* Image */}
+
+ );
+};
+
+export const ResourceCards = () => {
+ return (
+
+
+ );
+};
\ No newline at end of file
diff --git a/components/ScrollParallaxProcess.tsx b/components/ScrollParallaxProcess.tsx
new file mode 100644
index 0000000..adffa9c
--- /dev/null
+++ b/components/ScrollParallaxProcess.tsx
@@ -0,0 +1,420 @@
+import { motion, useScroll, useTransform, useSpring } from "framer-motion";
+import { useRef, useEffect, useState } from "react";
+import { FileText, Figma, Code, Rocket, ArrowRight, Smartphone, Monitor, Palette, Database, Cloud, CheckCircle } from "lucide-react";
+import { Button } from "./ui/button";
+import { GridPattern } from "./GridPattern";
+
+const steps = [
+ {
+ id: "discovery",
+ title: "Define the Scope",
+ subtext: "We begin by understanding your vision, identifying key problems, and drafting a well-defined scope with clear goals and deliverables.",
+ icon: FileText,
+ visual: "workspace_parallax",
+ color: "from-blue-500/20 to-cyan-500/20"
+ },
+ {
+ id: "design",
+ title: "Designing the Experience",
+ subtext: "Our designers craft intuitive and stunning user interfaces in Figma, turning requirements into clickable, user-first prototypes.",
+ icon: Figma,
+ visual: "figma_canvas_animation",
+ color: "from-purple-500/20 to-pink-500/20"
+ },
+ {
+ id: "development",
+ title: "Engineering the Solution",
+ subtext: "We bring designs to life with clean, scalable code—choosing the right tech stack to ensure performance and longevity.",
+ icon: Code,
+ visual: "code_editor_animation",
+ color: "from-green-500/20 to-emerald-500/20"
+ },
+ {
+ id: "launch",
+ title: "Launch & Beyond",
+ subtext: "We ship your product with confidence—ensuring QA, deployment, and post-launch support to keep it growing.",
+ icon: Rocket,
+ visual: "launch_animation",
+ color: "from-orange-500/20 to-red-500/20"
+ }
+];
+
+const WorkspaceVisual = ({ inView }: { inView: boolean }) => {
+ return (
+
+ {/* Content */}
+
+ {renderVisual()}
+
+
+ );
+};
+
+export const ScrollParallaxProcess = () => {
+ const containerRef = useRef(null);
+ const { scrollYProgress } = useScroll({
+ target: containerRef,
+ offset: ["start end", "end start"]
+ });
+
+ const springScrollProgress = useSpring(scrollYProgress, {
+ stiffness: 100,
+ damping: 30,
+ restDelta: 0.001
+ });
+
+ const y1 = useTransform(springScrollProgress, [0, 1], [0, -100]);
+ const y2 = useTransform(springScrollProgress, [0, 1], [0, -200]);
+ const y3 = useTransform(springScrollProgress, [0, 1], [0, -50]);
+
+ return (
+
+
+ );
+};
\ No newline at end of file
diff --git a/components/ServicesGrid.tsx b/components/ServicesGrid.tsx
new file mode 100644
index 0000000..b9d173c
--- /dev/null
+++ b/components/ServicesGrid.tsx
@@ -0,0 +1,135 @@
+import { motion } from "framer-motion";
+import { Smartphone, Globe, Palette, Brain, RefreshCw, Users } from "lucide-react";
+import { GridPattern } from "./GridPattern";
+import { navigateTo } from "../App";
+
+const services = [
+ {
+ title: "Mobile App Development",
+ icon: Smartphone,
+ description: "Native and cross-platform mobile solutions",
+ href: "/services/mobile-app-development"
+ },
+ {
+ title: "Web & SaaS Engineering",
+ icon: Globe,
+ description: "Scalable web applications and SaaS platforms"
+ },
+ {
+ title: "UI/UX & Prototyping",
+ icon: Palette,
+ description: "User-centered design and interactive prototypes"
+ },
+ {
+ title: "AI & Data Intelligence",
+ icon: Brain,
+ description: "Machine learning and data-driven solutions"
+ },
+ {
+ title: "Product Modernization",
+ icon: RefreshCw,
+ description: "Legacy system upgrades and optimization"
+ },
+ {
+ title: "Dedicated Development Teams",
+ icon: Users,
+ description: "Extended teams and staff augmentation"
+ },
+];
+
+const ServiceCard = ({ service, index }: { service: typeof services[0]; index: number }) => {
+ const Icon = service.icon;
+
+ const handleClick = () => {
+ if (service.href) {
+ navigateTo(service.href);
+ }
+ };
+
+ return (
+
+
+ );
+};
+
+export const ServicesGrid = () => {
+ return (
+
+
+ );
+};
\ No newline at end of file
diff --git a/components/ServicesSection.tsx b/components/ServicesSection.tsx
new file mode 100644
index 0000000..f1741b5
--- /dev/null
+++ b/components/ServicesSection.tsx
@@ -0,0 +1,125 @@
+export function ServicesSection() {
+ const services = [
+ {
+ title: "Mobile App Development",
+ description: "Native & cross-platform apps with pixel-perfect UIs and seamless user experiences.",
+ icon: (
+
+
+ );
+}
\ No newline at end of file
diff --git a/components/SplineFallback.tsx b/components/SplineFallback.tsx
new file mode 100644
index 0000000..5468b4b
--- /dev/null
+++ b/components/SplineFallback.tsx
@@ -0,0 +1,99 @@
+export function SplineFallback() {
+ return (
+
+
+ );
+};
\ No newline at end of file
diff --git a/components/StepsIllustrated.tsx b/components/StepsIllustrated.tsx
new file mode 100644
index 0000000..5013b78
--- /dev/null
+++ b/components/StepsIllustrated.tsx
@@ -0,0 +1,94 @@
+import { motion } from "framer-motion";
+import { FileText, Palette, Code, Rocket } from "lucide-react";
+import { GridPattern } from "./GridPattern";
+
+const steps = [
+ {
+ title: "Define Scope",
+ description: "We analyze your requirements and create a detailed project roadmap with clear timelines.",
+ icon: FileText,
+ color: "from-blue-500 to-cyan-500"
+ },
+ {
+ title: "Design UI/UX",
+ description: "Our designers create intuitive, user-centered interfaces that align with your brand.",
+ icon: Palette,
+ color: "from-purple-500 to-pink-500"
+ },
+ {
+ title: "Develop with Agile Sprints",
+ description: "We build your product using agile methodology with regular updates and feedback loops.",
+ icon: Code,
+ color: "from-green-500 to-emerald-500"
+ },
+ {
+ title: "Test, Launch & Scale",
+ description: "Comprehensive testing, smooth deployment, and ongoing support for continuous growth.",
+ icon: Rocket,
+ color: "from-[#E5195E] to-orange-500"
+ }
+];
+
+const StepCard = ({ step, index }: { step: typeof steps[0]; index: number }) => {
+ const Icon = step.icon;
+
+ return (
+
+ {/* Connection Line */}
+ {index < steps.length - 1 && (
+
+ )}
+
+
+ );
+};
+
+export const StepsIllustrated = () => {
+ return (
+
+
+ );
+};
\ No newline at end of file
diff --git a/components/WhyChooseWDI.tsx b/components/WhyChooseWDI.tsx
new file mode 100644
index 0000000..abe0997
--- /dev/null
+++ b/components/WhyChooseWDI.tsx
@@ -0,0 +1,72 @@
+import { motion } from "framer-motion";
+import { Wrench, Shield, Zap } from "lucide-react";
+import { GridPattern } from "./GridPattern";
+
+const features = [
+ {
+ icon: Wrench,
+ title: "24+ Years of Product Engineering",
+ description: "Deep expertise in building scalable, production-ready solutions"
+ },
+ {
+ icon: Shield,
+ title: "100% Project Ownership & IP Transfer",
+ description: "Complete intellectual property rights and full project ownership"
+ },
+ {
+ icon: Zap,
+ title: "Agile, Transparent, and Outcome-Driven",
+ description: "Fast delivery with clear communication and measurable results"
+ },
+];
+
+const FeatureCard = ({ feature, index }: { feature: typeof features[0]; index: number }) => {
+ const Icon = feature.icon;
+
+ return (
+
+
+ );
+};
+
+export const WhyChooseWDI = () => {
+ return (
+
+
+ );
+};
\ No newline at end of file
diff --git a/components/figma/ImageWithFallback.tsx b/components/figma/ImageWithFallback.tsx
new file mode 100644
index 0000000..0e26139
--- /dev/null
+++ b/components/figma/ImageWithFallback.tsx
@@ -0,0 +1,27 @@
+import React, { useState } from 'react'
+
+const ERROR_IMG_SRC =
+ 'data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iODgiIGhlaWdodD0iODgiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgc3Ryb2tlPSIjMDAwIiBzdHJva2UtbGluZWpvaW49InJvdW5kIiBvcGFjaXR5PSIuMyIgZmlsbD0ibm9uZSIgc3Ryb2tlLXdpZHRoPSIzLjciPjxyZWN0IHg9IjE2IiB5PSIxNiIgd2lkdGg9IjU2IiBoZWlnaHQ9IjU2IiByeD0iNiIvPjxwYXRoIGQ9Im0xNiA1OCAxNi0xOCAzMiAzMiIvPjxjaXJjbGUgY3g9IjUzIiBjeT0iMzUiIHI9IjciLz48L3N2Zz4KCg=='
+
+export function ImageWithFallback(props: React.ImgHTMLAttributes) {
+ const [didError, setDidError] = useState(false)
+
+ const handleError = () => {
+ setDidError(true)
+ }
+
+ const { src, alt, style, className, ...rest } = props
+
+ return didError ? (
+ 
+ )
+}
diff --git a/components/ui/accordion.tsx b/components/ui/accordion.tsx
new file mode 100644
index 0000000..6e25646
--- /dev/null
+++ b/components/ui/accordion.tsx
@@ -0,0 +1,55 @@
+import * as React from "react"
+import * as AccordionPrimitive from "@radix-ui/react-accordion"
+import { ChevronDown } from "lucide-react"
+
+import { cn } from "./utils"
+
+const Accordion = AccordionPrimitive.Root
+
+const AccordionItem = React.forwardRef<
+ React.ElementRef,
+ React.ComponentPropsWithoutRef
+>(({ className, ...props }, ref) => (
+ ,
+ React.ComponentPropsWithoutRef
+>(({ className, children, ...props }, ref) => (
+
+ svg]:rotate-180",
+ className
+ )}
+ {...props}
+ >
+ {children}
+
+
+))
+AccordionTrigger.displayName = AccordionPrimitive.Trigger.displayName
+
+const AccordionContent = React.forwardRef<
+ React.ElementRef,
+ React.ComponentPropsWithoutRef
+>(({ className, children, ...props }, ref) => (
+
+
+))
+
+AccordionContent.displayName = AccordionPrimitive.Content.displayName
+
+export { Accordion, AccordionItem, AccordionTrigger, AccordionContent }
\ No newline at end of file
diff --git a/components/ui/alert-dialog.tsx b/components/ui/alert-dialog.tsx
new file mode 100644
index 0000000..875b8df
--- /dev/null
+++ b/components/ui/alert-dialog.tsx
@@ -0,0 +1,157 @@
+"use client";
+
+import * as React from "react";
+import * as AlertDialogPrimitive from "@radix-ui/react-alert-dialog";
+
+import { cn } from "./utils";
+import { buttonVariants } from "./button";
+
+function AlertDialog({
+ ...props
+}: React.ComponentProps) {
+ return ) {
+ return (
+ ) {
+ return (
+ ) {
+ return (
+ ) {
+ return (
+
+
+ );
+}
+
+function AlertDialogHeader({
+ className,
+ ...props
+}: React.ComponentProps<"div">) {
+ return (
+
+ );
+}
+
+function AlertDialogFooter({
+ className,
+ ...props
+}: React.ComponentProps<"div">) {
+ return (
+
+ );
+}
+
+function AlertDialogTitle({
+ className,
+ ...props
+}: React.ComponentProps) {
+ return (
+ ) {
+ return (
+ ) {
+ return (
+ ) {
+ return (
+ ) {
+ return (
+
+ );
+}
+
+function AlertTitle({ className, ...props }: React.ComponentProps<"div">) {
+ return (
+
+ );
+}
+
+function AlertDescription({
+ className,
+ ...props
+}: React.ComponentProps<"div">) {
+ return (
+
+ );
+}
+
+export { Alert, AlertTitle, AlertDescription };
diff --git a/components/ui/aspect-ratio.tsx b/components/ui/aspect-ratio.tsx
new file mode 100644
index 0000000..c16d6bc
--- /dev/null
+++ b/components/ui/aspect-ratio.tsx
@@ -0,0 +1,11 @@
+"use client";
+
+import * as AspectRatioPrimitive from "@radix-ui/react-aspect-ratio";
+
+function AspectRatio({
+ ...props
+}: React.ComponentProps) {
+ return ) {
+ return (
+ ) {
+ return (
+ ) {
+ return (
+ & { asChild?: boolean }) {
+ const Comp = asChild ? Slot : "span";
+
+ return (
+ ,
+ VariantProps {
+ asChild?: boolean
+}
+
+const Button = React.forwardRef(
+ ({ className, variant, size, asChild = false, children, ...props }, ref) => {
+ const Comp = asChild ? Slot : "button"
+
+ return (
+
+ {children}
+
+ )
+ }
+)
+Button.displayName = "Button"
+
+export { Button, buttonVariants }
\ No newline at end of file
diff --git a/components/ui/calendar.tsx b/components/ui/calendar.tsx
new file mode 100644
index 0000000..ee7b73f
--- /dev/null
+++ b/components/ui/calendar.tsx
@@ -0,0 +1,75 @@
+"use client";
+
+import * as React from "react";
+import { ChevronLeft, ChevronRight } from "lucide-react";
+import { DayPicker } from "react-day-picker";
+
+import { cn } from "./utils";
+import { buttonVariants } from "./button";
+
+function Calendar({
+ className,
+ classNames,
+ showOutsideDays = true,
+ ...props
+}: React.ComponentProps) {
+ return (
+ .day-range-end)]:rounded-r-md [&:has(>.day-range-start)]:rounded-l-md first:[&:has([aria-selected])]:rounded-l-md last:[&:has([aria-selected])]:rounded-r-md"
+ : "[&:has([aria-selected])]:rounded-md",
+ ),
+ day: cn(
+ buttonVariants({ variant: "ghost" }),
+ "size-8 p-0 font-normal aria-selected:opacity-100",
+ ),
+ day_range_start:
+ "day-range-start aria-selected:bg-primary aria-selected:text-primary-foreground",
+ day_range_end:
+ "day-range-end aria-selected:bg-primary aria-selected:text-primary-foreground",
+ day_selected:
+ "bg-primary text-primary-foreground hover:bg-primary hover:text-primary-foreground focus:bg-primary focus:text-primary-foreground",
+ day_today: "bg-accent text-accent-foreground",
+ day_outside:
+ "day-outside text-muted-foreground aria-selected:text-muted-foreground",
+ day_disabled: "text-muted-foreground opacity-50",
+ day_range_middle:
+ "aria-selected:bg-accent aria-selected:text-accent-foreground",
+ day_hidden: "invisible",
+ ...classNames,
+ }}
+ components={{
+ IconLeft: ({ className, ...props }) => (
+ ;
+type CarouselOptions = UseCarouselParameters[0];
+type CarouselPlugin = UseCarouselParameters[1];
+
+type CarouselProps = {
+ opts?: CarouselOptions;
+ plugins?: CarouselPlugin;
+ orientation?: "horizontal" | "vertical";
+ setApi?: (api: CarouselApi) => void;
+};
+
+type CarouselContextProps = {
+ carouselRef: ReturnType[0];
+ api: ReturnType[1];
+ scrollPrev: () => void;
+ scrollNext: () => void;
+ canScrollPrev: boolean;
+ canScrollNext: boolean;
+} & CarouselProps;
+
+const CarouselContext = React.createContext(null);
+
+function useCarousel() {
+ const context = React.useContext(CarouselContext);
+
+ if (!context) {
+ throw new Error("useCarousel must be used within a ) => {
+ if (event.key === "ArrowLeft") {
+ event.preventDefault();
+ scrollPrev();
+ } else if (event.key === "ArrowRight") {
+ event.preventDefault();
+ scrollNext();
+ }
+ },
+ [scrollPrev, scrollNext],
+ );
+
+ React.useEffect(() => {
+ if (!api || !setApi) return;
+ setApi(api);
+ }, [api, setApi]);
+
+ React.useEffect(() => {
+ if (!api) return;
+ onSelect(api);
+ api.on("reInit", onSelect);
+ api.on("select", onSelect);
+
+ return () => {
+ api?.off("select", onSelect);
+ };
+ }, [api, onSelect]);
+
+ return (
+
+
+ );
+}
+
+function CarouselContent({ className, ...props }: React.ComponentProps<"div">) {
+ const { carouselRef, orientation } = useCarousel();
+
+ return (
+ ) {
+ const { orientation, scrollPrev, canScrollPrev } = useCarousel();
+
+ return (
+
+ );
+}
+
+function CarouselNext({
+ className,
+ variant = "outline",
+ size = "icon",
+ ...props
+}: React.ComponentProps) {
+ const { orientation, scrollNext, canScrollNext } = useCarousel();
+
+ return (
+
+ );
+}
+
+export {
+ type CarouselApi,
+ Carousel,
+ CarouselContent,
+ CarouselItem,
+ CarouselPrevious,
+ CarouselNext,
+};
diff --git a/components/ui/chart.tsx b/components/ui/chart.tsx
new file mode 100644
index 0000000..b49bc36
--- /dev/null
+++ b/components/ui/chart.tsx
@@ -0,0 +1,353 @@
+"use client";
+
+import * as React from "react";
+import * as RechartsPrimitive from "recharts";
+
+import { cn } from "./utils";
+
+// Format: { THEME_NAME: CSS_SELECTOR }
+const THEMES = { light: "", dark: ".dark" } as const;
+
+export type ChartConfig = {
+ [k in string]: {
+ label?: React.ReactNode;
+ icon?: React.ComponentType;
+ } & (
+ | { color?: string; theme?: never }
+ | { color?: never; theme: Record }
+ );
+};
+
+type ChartContextProps = {
+ config: ChartConfig;
+};
+
+const ChartContext = React.createContext(null);
+
+function useChart() {
+ const context = React.useContext(ChartContext);
+
+ if (!context) {
+ throw new Error("useChart must be used within a
+
+ );
+}
+
+const ChartStyle = ({ id, config }: { id: string; config: ChartConfig }) => {
+ const colorConfig = Object.entries(config).filter(
+ ([, config]) => config.theme || config.color,
+ );
+
+ if (!colorConfig.length) {
+ return null;
+ }
+
+ return (
+
+
+ +// ✅ CORRECT - Light text on dark background +
+
+```
+
+## Component Integration
+
+### Using Existing Dark Components:
+```tsx
+// These components already handle dark styling
+
+
+
+ {/* Background Decorative Elements */}
+
+ {/* Section Header */}
+
+
+
+ {/* Main Visual Section */}
+
+
+
+ + Proven Success in{" "} + Mobile Innovation +
++ Our portfolio speaks for itself — from concept to launch, we + deliver exceptional mobile experiences that users love and + businesses rely on. +
+
+ {/* iPhone Mockups Display */}
+
+
+
+ {/* Performance Statistics */}
+
+ {metrics.map((metric, index) => (
+
+ {/* Large Metric Number */}
+
+ ))}
+
+
+
+ {/* Supporting Content */}
+
+
+
+
+ {metric.value}
+
+
+
+ {/* Metric Label */}
+ + {metric.label} +
+ + {/* Metric Description */} ++ {metric.description} +
++ Every project we deliver combines cutting-edge technology with + user-centered design, resulting in mobile applications that not + only meet but exceed expectations across industries and platforms. +
+
+ {/* Subtle gradient orbs for depth */}
+
+
+
+
+
+
+
+
+
+
+
+ + What Our Clients Say +
++ Hear from industry leaders who have transformed their businesses with our innovative solutions. +
+
+ {/* Main Testimonial Display */}
+
+
+ {/* Additional Social Proof */}
+
+
+
+
+
+
+
+
+
+
+
+ {/* Navigation Controls */}
+
+ {/* Client Photo and Info */}
+
+
+
+
+ {/* Testimonial Content */}
+
+
+
+
+
+ {/* Rating Stars */}
+
+ {[...Array(testimonials[currentIndex].rating)].map((_, i) => (
+
+
+
+ + {testimonials[currentIndex].name} +
++ {testimonials[currentIndex].position} +
++ {testimonials[currentIndex].company} +
+
+
+ {testimonials[currentIndex].projectType}
+
+
+
+
+
+ {/* Quote Icon */}
+
+ "
+
+ + {testimonials[currentIndex].text} ++ + {/* Clutch Logo */} +
+
+
+ Verified Review on
+
+
+ {/* Previous Button */}
+
+
+ {/* Dots Indicator */}
+
+
+ {/* Auto-play Indicator */}
+
+ {testimonials.map((_, index) => (
+
+
+ {/* Next Button */}
+
+
+
+
+
+
+
+
+ 98%
+ Client Satisfaction
+
+
+ 150+
+ Projects Delivered
+
+
+ 5.0
+ Average Rating
+
+
+ 24/7
+ Support Available
+
+ {/* Section Header */}
+
+
+ Featured Work
+
+
+
+ {/* Featured Case Studies Grid */}
+
+
+
+ + Success Stories That Define Excellence +
++ Explore our award-winning projects that have transformed businesses and delighted millions of users worldwide. +
+
+ {caseStudies.map((study, index) => (
+ navigateTo(study.link)}
+ >
+
+
+ {/* Image Header */}
+
+
+
+ ))}
+
+
+ {/* Call-to-Action */}
+
+
+
+ {/* Content */}
+
+
+ {study.category}
+
+
+
+ {/* Awards */}
+ {study.awards.length > 0 && (
+
+
+ )}
+
+ {/* Project Title Overlay */}
+
+
+
+
+ + {study.title} +
++ {study.subtitle} +
+
+
+ + {study.description} +
+ + {/* Key Metrics */} +
+ {study.results.slice(0, 3).map((result, idx) => (
+
+
+ {/* Technologies */}
+
+
+ ))}
+
+ {result.value}
+
+
+ {result.metric}
+
+
+
+
+ {/* Project Details */}
+ Technologies:
+
+ {study.technologies.slice(0, 3).map((tech) => (
+
+ {tech}
+
+ ))}
+ {study.technologies.length > 3 && (
+
+ +{study.technologies.length - 3} more
+
+ )}
+
+
+
+
+ {/* Awards List */}
+ {study.awards.length > 0 && (
+
+
+
+
+
+
+ )}
+
+ {/* CTA Button */}
+
+ Awards:
+
+ {study.awards.slice(0, 2).map((award, idx) => (
+
+
+
+ ))}
+
+
+ + Ready to Create Your Success Story? +
++ Join the ranks of industry leaders who have transformed their businesses with our innovative solutions. +
+
+
+
+
+
+ {countryFlags.map((flag, index) => (
+ 0 ? '-8px' : '0',
+ zIndex: countryFlags.length - index
+ }}
+ >
+
+ ))}
+
+
+
+
+ {/* Subtle glow effect */}
+
+
+ {/* Tooltip */}
+
+ {flag.flagSvg}
+
+
+
+
+
+
+ {flag.name}
+
+
+ {name}
+
+
+);
+
+const MarqueeRow = ({ logos }: { logos: typeof companyLogos }) => (
+
+
+
+
+ {/* Project Image Circles */}
+
+ + Trusted by Founders and CTOs Across 15+ Countries +
+
+
+
+ {!showSettings ? (
+ // Main Cookie Consent Banner
+
+
+
+ ) : (
+ // Cookie Settings Panel
+
+ {/* Icon and Message */}
+
+
+
+
+ {/* Action Buttons */}
+
+
+
+
+ + We use cookies to enhance your experience +
++ We use cookies to analyze site performance, deliver personalized content, and improve your browsing experience. + By clicking "Accept All", you consent to our use of cookies.{' '} + + Learn more + +
+
+
+
+
+
+
+ {/* Close Button */}
+
+
+
+ )}
+
+
+
+
+
+
+
+ Cookie Preferences
+
+ {/* Necessary Cookies */}
+
+
+ {/* Settings Action Buttons */}
+
+
+
+ {/* Analytics Cookies */}
+
+
+ Necessary Cookies
+
+
+
+ + These cookies are essential for the website to function properly. They cannot be disabled. +
+
+
+
+ {/* Marketing Cookies */}
+
+
+ Analytics Cookies
+
+
+
+ + Help us understand how visitors interact with our website by collecting anonymous information. +
+
+
+
+
+ Marketing Cookies
+
+
+
+ + Used to track visitors across websites to display relevant advertisements. +
+
+
+
+
+
+ {foundersAndCTOs.map((project, index) => (
+
+
+ ))}
+
+
+ {/* Flag Icon */}
+
+
+
+
+ {/* Project Badge */}
+
+
+ {project.flagEmoji}
+
+
+
+
+
+ {/* Enhanced Tooltip */}
+
+ {project.name}
+
+
+ {project.projectType}
+
+
+
+
+
+
+ {project.name}
+ {project.title}
+
+ {project.flagEmoji}
+ {project.country}
+
+
+
+ );
+});
+
+CustomReCaptcha.displayName = 'CustomReCaptcha';
+
+export default CustomReCaptcha;
\ No newline at end of file
diff --git a/components/FAQSection.tsx b/components/FAQSection.tsx
new file mode 100644
index 0000000..7dbf5b4
--- /dev/null
+++ b/components/FAQSection.tsx
@@ -0,0 +1,79 @@
+import React from "react";
+import { motion } from "framer-motion";
+import { Accordion, AccordionContent, AccordionItem, AccordionTrigger } from "./ui/accordion";
+import { ChevronDown } from "lucide-react";
+
+interface FAQ {
+ question: string;
+ answer: string;
+}
+
+interface FAQSectionProps {
+ title?: string;
+ subtitle?: string;
+ faqs: FAQ[];
+}
+
+export const FAQSection: React.FC
+
+
+
+
+
+
+
+
+ {faqs.map((faq, index) => (
+
+
+
+ {faq.question}
+
+
+ {faq.answer}
+
+
+
+ ))}
+
+
+
+ + {title} +
+ {subtitle && ( ++ {subtitle} +
+ )} +
+ {/* Section Header */}
+
+
+
+
+
+
+ {/* Case Studies Grid - Consistent Dimensions */}
+
+
+
+ {/* Bottom CTA */}
+
+
+
+
+
+
+
+
+ + Featured Success Stories +
++ Discover how we've helped companies across industries achieve remarkable results with our innovative development solutions. +
+
+ {caseStudies.map((study, index) => {
+ const AchievementIcon = study.keyAchievement.icon;
+
+ return (
+
+ {
+ if (study.title === 'Seezun') {
+ navigateTo('/projects/seezun');
+ } else if (study.title === 'WOKA') {
+ navigateTo('/projects/woka');
+ } else if (study.title === 'Tanami') {
+ navigateTo('/projects/tanami');
+ } else {
+ navigateTo('/case-studies');
+ }
+ }}
+ >
+
+ {/* Visual Section - Fixed Height */}
+
+
+
+ );
+ })}
+
+
+ {/* More Success Stories Section */}
+
+
+
+ {/* Content Section - Flexible Height with Consistent Spacing */}
+
+
+
+
+
+
+ )}
+
+ {/* Key Achievement - Overlaid on Visual */}
+
+
+
+
+
+
+
+
+
+
+ {study.keyAchievement.number}
+ {study.keyAchievement.metric}
+
+
+
+ {/* Project Title - Consistent Height */}
+
+
+ {/* CTA Button - Fixed at Bottom */}
+
+
+
+ {/* Client & Description - Consistent Height */}
+ + {study.title} +
+
+
+
+ {/* Tags - Consistent Height */}
+ {study.client}
+ + {study.description} +
+
+
+
+ {study.tags.map((tag) => (
+
+ {tag}
+
+ ))}
+
+
+
+
+
+
+ + More Success Stories +
+ +
+ {moreSuccessStories.map((story, index) => {
+ const AchievementIcon = story.keyAchievement.icon;
+
+ return (
+
+ {
+ if (story.title === 'TradersCircuit') {
+ navigateTo('/projects/traderscircuit');
+ } else if (story.title === 'GoodTimes') {
+ navigateTo('/projects/goodtimes');
+ } else if (story.title === 'Prosperty') {
+ navigateTo('/projects/prosperty');
+ } else if (story.title === 'RanOutOf') {
+ navigateTo('/projects/ranoutof');
+ } else {
+ navigateTo('/case-studies');
+ }
+ }}
+ >
+
+ {/* Visual Section - Fixed Height */}
+
+
+
+ );
+ })}
+
+
+
+
+ {/* Content Section - Flexible Height with Consistent Spacing */}
+
+
+
+
+
+
+
+
+
+
+
+
+ {story.keyAchievement.number}
+ {story.keyAchievement.metric}
+
+
+
+ {/* Project Title - Consistent Height */}
+
+
+ {/* CTA Button - Fixed at Bottom */}
+
+
+
+ {/* Client & Description - Consistent Height */}
+ + {story.title} +
+
+
+
+ {/* Tags - Consistent Height */}
+ {story.client}
+ + {story.description} +
+
+
+
+ {story.tags.map((tag) => (
+
+ {tag}
+
+ ))}
+
+
+
+
+
+
+ + {title} +
+ +
+
+
+
+
+ ) : (
+
+ )}
+
+ + Never Miss an Update +
++ Get the latest insights on digital product + development, AI trends, and startup success stories + delivered to your inbox. +
+ + {isSubscribed ? ( +
+
+ + Welcome to our community of innovators. +
+
+
+
+ {/* Category Badge */}
+ {category && (
+
+
+ {/* Decorative Elements */}
+
+
+
+
+
+ {category}
+
+
+ )}
+
+ {/* Main Title */}
+ + {title} +
+ + {/* Description */} ++ {description} +
+ + {/* CTAs */} +
+
+
+ {secondaryCTA && (
+
+ )}
+
+
+
+
+
+
+ {/* Floating Elements */}
+
+ {/* Animated Badge */}
+
+
+
+
+
+ 🎉
+
+
+ 25+ Years Of Industry Expertise
+
+
+
+
+
+ + Architecting Digital Success for Startups & Enterprises +
+ ++ We design and build secure, AI-powered apps and software tailored for scale, speed, and user engagement. +
+ +
+
+
+
+
+
+ {/* Animated Background Elements */}
+
+
+
+
+
+
+
+ {/* Interactive 3D-like Animation */}
+
+
+
+
+
+
+
+
+
+
+ + {industry.name} +
+
+
+
+
+ {/* 4x3 Grid for larger screens, 2x6 for tablets, 1x12 for mobile */}
+
+ + Tailored Solutions for Your Industry +
++ We serve diverse industries with specialized expertise and domain knowledge +
+
+ {industries.map((industry, index) => (
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ {/* Animated glow effect */}
+
+
+
+ {/* Sparkle effects */}
+
+
+
+ Have an Idea? Let's Talk.
+
+
+
+ Get clarity, timelines, and answers within 24 hours.
+
+
+
+
+
+ 15min
+ Quick Discovery Call
+ 24hrs
+ Detailed Proposal
+ 48hrs
+ Project Kickoff
+
+
+
+
+ {cta.title}
+{cta.subtitle}
+
+
+
+
+
+ );
+
+ const renderAIMenu = () => (
+
+ {navigationData.services.map((service, index) => {
+ const Icon = service.icon;
+ return (
+
+
+
+ );
+ })}
+
+
+
+
+ service.href && navigate(service.href)} + > + {service.category} +
+-
+ {service.sub_services.map((subService) => (
+
- + { + e.preventDefault(); + if (subService.href) { + navigate(subService.href); + } + }} + > + {subService.name} + + + ))} +
+
+ );
+
+ const renderSolutionsMenu = () => (
+
+ {navigationData.ai_data_intelligence.map((category) => {
+ const Icon = category.icon;
+ return (
+
+
+
+ );
+ })}
+
+
+
+
+ category.href && navigate(category.href)} + > + {category.category} +
+-
+ {category.sub_services.map((service) => (
+
- + { + e.preventDefault(); + if (service.href) { + navigate(service.href); + } + }} + > + {service.name} + + + ))} +
+
+ );
+
+ const renderIndustriesMenu = () => (
+
+ {navigationData.solutions.map((solution) => {
+ const Icon = solution.icon;
+ return (
+ {
+ e.preventDefault();
+ if (solution.href) {
+ navigate(solution.href);
+ }
+ }}
+ >
+
+
+
+ {solution.text}
+
+ );
+ })}
+
+
+ );
+
+ const renderGenericMenu = (items: any[], menuType: string) => (
+
+ {navigationData.industries.map((industry) => {
+ const Icon = industry.icon;
+ return (
+
+
+
+ );
+ })}
+
+
+
+
+ + {industry.group} +
+-
+ {industry.items.map((item) => (
+
- + { + e.preventDefault(); + if (item.href) { + navigate(item.href); + } + }} + > + {item.name} + + + ))} +
+
+ );
+
+ const getMenuContent = () => {
+ switch (type) {
+ case 'Services':
+ return renderServicesMenu();
+ case 'AI & ML':
+ return renderAIMenu();
+ case 'Solutions':
+ return renderSolutionsMenu();
+ 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');
+ default:
+ return null;
+ }
+ };
+
+ return (
+
+ {items.map((item) => {
+ const Icon = item.icon;
+ return (
+ {
+ e.preventDefault();
+ if (item.href) {
+ navigate(item.href);
+ }
+ }}
+ >
+
+
+
+ {item.text}
+
+ );
+ })}
+
+ {getMenuContent()}
+
+
+ {messages.map((message, index) => (
+
+
+ ))}
+
+ );
+};
+
+// Document mockup component - Compact version
+const DocumentMockup = () => {
+ return (
+
+
+ {message.from}
+ {message.text}
+
+
+ );
+};
+
+// Process step card component
+const ProcessCard = ({ step, index }: { step: typeof steps[0]; index: number }) => {
+ const cardRef = useRef(null);
+
+ const renderContent = () => {
+ if (step.visual?.type === "icon_or_doc_mockup") {
+ return
+
+
+ {/* Header */}
+
+
+
+
+ {/* Document sections */}
+
+
+ Draft v1.2
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ {step.tags.map((tag, tagIndex) => (
+
+
+ {tag.label}
+
+
+ ))}
+
+ );
+ }
+
+ return null;
+ };
+
+ return (
+
+ {/* Header */}
+
+ {renderContent()}
+
+
+
+
+ {step.title}
+
+
+
+ {step.description}
+
+
+
+ {/* Content */}
+
+ {/* Title Section */}
+
+
+
+
+
+
+ How We Turn an Idea into a{" "}
+ Scalable Product
+
+
+ Our proven process transforms your vision into reality through strategic planning,
+ thoughtful design, and expert engineering—every step of the way.
+
+
+
+ {/* Cards Grid */}
+
+ {steps.map((step, index) => (
+
+
+ {/* Bottom CTA */}
+
+
+
+ {/* Content */}
+
+
+ {resource.category}
+
+
+
+ {/* Date and Read Time */}
+
+
+
+
+ {/* Title */}
+
+
+
+
+ + {resource.title} +
+ + {/* Excerpt */} ++ {resource.excerpt} +
+ + {/* Author */} +
+
+
+
+
+
+ {resource.author.name}
+
+
+ {/* Header */}
+
+
+
+ {/* Resource Cards Grid */}
+
+
+
+
+ + Insights for Founders & Product Leaders +
++ Learn from our experience building 200+ digital products. Practical insights, real case studies, and actionable strategies. +
+
+ {resources.map((resource, index) => (
+
+
+ {/* CTA */}
+
+
+ {/* Floating Documents */}
+
+
+
+ {/* Sticky Notes */}
+
+
+
+
+
+
+ {/* Pointer Highlighting */}
+
+
+
+
+
+ );
+};
+
+const FigmaCanvasVisual = ({ inView }: { inView: boolean }) => {
+ return (
+
+
+ {/* UI Frames */}
+
+
+
+
+
+
+
+
+
+ {/* Design Tools */}
+
+
+
+
+ );
+};
+
+const CodeEditorVisual = ({ inView }: { inView: boolean }) => {
+ const [typedText, setTypedText] = useState("");
+ const codeSnippet = "const app = () => {\n return
+
+
+
+ Hello World
\n}";
+
+ useEffect(() => {
+ if (inView) {
+ let i = 0;
+ const interval = setInterval(() => {
+ if (i < codeSnippet.length) {
+ setTypedText(codeSnippet.slice(0, i + 1));
+ i++;
+ } else {
+ clearInterval(interval);
+ }
+ }, 100);
+ return () => clearInterval(interval);
+ } else {
+ setTypedText("");
+ }
+ }, [inView]);
+
+ return (
+
+
+ {/* Code Editor Interface */}
+
+
+ );
+};
+
+const LaunchVisual = ({ inView }: { inView: boolean }) => {
+ return (
+
+
+
+
+
+
+ {/* Typed Code */}
+
+ {typedText}
+
+
+ {/* Tech Stack Icons */}
+
+
+
+
+
+
+
+
+ {/* Rocket Animation */}
+
+
+
+ {/* Analytics Dashboard */}
+
+
+
+ {/* Success Indicators */}
+
+
+
+
+ );
+};
+
+const ProcessStep = ({ step, index, inView }: { step: typeof steps[0]; index: number; inView: boolean }) => {
+ const Icon = step.icon;
+
+ const renderVisual = () => {
+ switch (step.visual) {
+ case "workspace_parallax":
+ return
+
+
+
+ {step.title}
+
+
+
+ {step.subtext}
+
+
+
+ {/* Visual */}
+
+
+
+
+
+
+ Step {index + 1}
+
+
+
+
+
+
+
+
+
+ + How We Turn an Idea into a{" "} + Scalable Product +
++ Our proven process transforms your vision into reality through strategic planning, + thoughtful design, and expert engineering—every step of the way. +
+
+ {steps.map((step, index) => (
+
+
+ {/* Final CTA */}
+
+
+
+ {/* Hover overlay for clickable services */}
+ {service.href && (
+
+ )}
+
+ {/* Icon container with glassmorphism effect */}
+
+
+ {/* Arrow indicator - only show for clickable services */}
+ {service.href && (
+
+ {/* Icon glow effect */}
+
+
+
+ + {service.title} +
++ {service.description} +
+
+
+ )}
+
+
+
+
+
+
+
+
+ + What We Do +
++ We deliver comprehensive digital solutions that transform ideas into powerful, scalable applications +
+
+ {services.map((service, index) => (
+
+
+
+
+
+
+ {/* Services Grid - Wider container and larger cards */}
+ What We Do
++ End-to-end solutions for every stage of your product lifecycle. +
+
+ {services.map((service, index) => (
+
+
+
+
+ {/* Glassmorphism Icon */}
+
+ ))}
+
+
+
+
+
+ + {service.title.split(' ')[0]} + {service.title.split(' ').slice(1).join(' ') && ` ${service.title.split(' ').slice(1).join(' ')}`} +
++ {service.description} +
+
+ {/* Animated background gradient */}
+
+
+ {/* Grid pattern overlay */}
+
+ );
+}
\ No newline at end of file
diff --git a/components/SplineViewer.tsx b/components/SplineViewer.tsx
new file mode 100644
index 0000000..d7639f3
--- /dev/null
+++ b/components/SplineViewer.tsx
@@ -0,0 +1,7 @@
+// This file is no longer needed as we're using the official Spline component
+// from '@splinetool/react-spline/next' directly in the HeroSection component.
+// Keeping this file empty to avoid any import errors until references are cleaned up.
+
+export function SplineViewer() {
+ return null;
+}
\ No newline at end of file
diff --git a/components/SplitCallToAction.tsx b/components/SplitCallToAction.tsx
new file mode 100644
index 0000000..d8ad6a9
--- /dev/null
+++ b/components/SplitCallToAction.tsx
@@ -0,0 +1,118 @@
+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";
+
+export const SplitCallToAction = () => {
+ return (
+
+
+
+
+ {/* Main 3D scene */}
+
+ {/* Central 3D composition */}
+
+
+ {/* Status indicator */}
+
+ {/* Main floating cube with nested elements */}
+
+
+ {/* Floating particles */}
+
+ {/* Outer cube */}
+
+
+ {/* Orbiting satellites */}
+
+ {/* Middle cube */}
+
+
+ {/* Inner cube */}
+
+
+ {/* Core element */}
+
+
+
+ {/* Satellite 1 */}
+
+
+
+
+
+ {/* Satellite 2 */}
+
+
+
+
+ {/* Satellite 3 */}
+
+
+
+
+ {/* Satellite 4 */}
+
+
+
+
+ {/* Particle 1 */}
+
+
+ {/* Particle 2 */}
+
+
+ {/* Particle 3 */}
+
+
+ {/* Particle 4 */}
+
+
+ {/* Particle 5 */}
+
+
+
+ {/* Light rays */}
+
+
+
+
+
+
+ Interactive 3D Experience
+
+
+ {/* Tech badge */}
+
+ AI Powered
+
+
+
+
+ {/* Left Content */}
+
+
+
+ {/* Right CTA */}
+
+
+
+
+
+
+ + Ready to Build with WDI? +
++ Schedule a no-commitment discovery call with our consulting team. Let's discuss your vision and create a roadmap to success. +
+
+
+
+
+
+
+
+
+
+ Free Consultation
+ No sales pitch, just honest advice
+
+
+
+
+
+
+
+ Flexible Scheduling
+ Available across all time zones
+
+
+
+
+
+
+ Quick Response
+ We'll get back to you within 2 hours
+
+
+
+
+
+
+
+ + Book a Discovery Call +
++ Let's discuss your project and explore how we can help you succeed. +
+
+
+
+
+
+
+
+
+
+
+ 200+
+ Projects
+
+
+ 25+
+ Years
+
+
+ 15+
+ Countries
+
+
+
+
+
+
+
+
+ {index + 1}
+
+ {step.title}
+{step.description}
+
+
+
+
+
+ + How We Turn Your Idea Into a Scalable Product +
++ Our proven 4-step process ensures your project is delivered on time, on budget, and exceeds expectations. +
+
+ {steps.map((step, index) => (
+
+
+
+
+
+ {feature.title}
+{feature.description}
+
+
+
+
+
+ + Why Leading Startups Choose WDI +
+
+ {features.map((feature, index) => (
+
+
+
+ ) : (
+
+ 
+
+ {children}
+
+
+
+ );
+};
\ No newline at end of file
diff --git a/components/ui/breadcrumb.tsx b/components/ui/breadcrumb.tsx
new file mode 100644
index 0000000..8f84d7e
--- /dev/null
+++ b/components/ui/breadcrumb.tsx
@@ -0,0 +1,109 @@
+import * as React from "react";
+import { Slot } from "@radix-ui/react-slot";
+import { ChevronRight, MoreHorizontal } from "lucide-react";
+
+import { cn } from "./utils";
+
+function Breadcrumb({ ...props }: React.ComponentProps<"nav">) {
+ return ;
+}
+
+function BreadcrumbList({ className, ...props }: React.ComponentProps<"ol">) {
+ return (
+
+ {children}
+
+
+
+
+ );
+}
+
+function CarouselItem({ className, ...props }: React.ComponentProps<"div">) {
+ const { orientation } = useCarousel();
+
+ return (
+
+ );
+}
+
+function CarouselPrevious({
+ className,
+ variant = "outline",
+ size = "icon",
+ ...props
+}: React.ComponentProps
+
+ {children}
+
+
+