1451 lines
59 KiB
TypeScript
1451 lines
59 KiB
TypeScript
import { motion } from "framer-motion";
|
||
import {
|
||
AlertTriangle,
|
||
ArrowRight,
|
||
Building,
|
||
Calendar,
|
||
CheckCircle,
|
||
CloudCog,
|
||
Code,
|
||
Eye,
|
||
Lightbulb,
|
||
MessageSquare,
|
||
Monitor,
|
||
Palette,
|
||
RefreshCw,
|
||
Rocket,
|
||
Search,
|
||
Shield,
|
||
Star,
|
||
Target,
|
||
Users,
|
||
X,
|
||
Zap,
|
||
} from "lucide-react";
|
||
import { ImageWithFallback } from "../components/figma/ImageWithFallback";
|
||
import { Footer } from "../components/Footer";
|
||
import { Navigation } from "../components/Navigation";
|
||
import {
|
||
Accordion,
|
||
AccordionContent,
|
||
AccordionItem,
|
||
AccordionTrigger,
|
||
} from "../components/ui/accordion";
|
||
import { Badge } from "../components/ui/badge";
|
||
import { Button } from "../components/ui/button";
|
||
import { Card, CardContent } from "../components/ui/card";
|
||
import { ShimmerButton } from "../components/ui/shimmer-button";
|
||
import { useNavigate } from "react-router-dom";
|
||
import { Helmet } from "react-helmet-async";
|
||
|
||
// Digital Product Development Hero Section
|
||
const DigitalProductDevelopmentHero = () => {
|
||
const navigate = useNavigate();
|
||
return (
|
||
<section className="relative py-20 overflow-hidden bg-black">
|
||
<Helmet>
|
||
{/* Page Title and Meta Description */}
|
||
<title>
|
||
Digital Product Development Services | WDI – Innovate & Grow
|
||
</title>
|
||
<meta
|
||
name="description"
|
||
content="WDI offers expert digital product development services to turn your ideas into powerful digital solutions. Build, scale, and innovate with WDI today."
|
||
/>
|
||
|
||
{/* Canonical Link */}
|
||
<link
|
||
rel="canonical"
|
||
href="https://www.wdipl.com/solutions/digital-product-development"
|
||
/>
|
||
|
||
{/* Open Graph Tags (for Facebook, LinkedIn) */}
|
||
<meta
|
||
property="og:title"
|
||
content="Digital Product Development Services | WDI – Innovate & Grow"
|
||
/>
|
||
<meta
|
||
property="og:description"
|
||
content="WDI offers expert digital product development services to turn your ideas into powerful digital solutions. Build, scale, and innovate with WDI today."
|
||
/>
|
||
<meta property="og:url" content="https://www.wdipl.com/services" />
|
||
<meta property="og:type" content="website" />
|
||
<meta
|
||
property="og:image"
|
||
content="https://www.wdipl.com/your-preview-image.jpg"
|
||
/>
|
||
|
||
{/* Twitter Card Tags */}
|
||
<meta name="twitter:card" content="summary_large_image" />
|
||
<meta
|
||
name="twitter:title"
|
||
content="Digital Product Development Services | WDI – Innovate & Grow"
|
||
/>
|
||
<meta
|
||
name="twitter:description"
|
||
content="WDI offers expert digital product development services to turn your ideas into powerful digital solutions. Build, scale, and innovate with WDI today."
|
||
/>
|
||
<meta
|
||
name="twitter:image"
|
||
content="https://www.wdipl.com/your-preview-image.jpg"
|
||
/>
|
||
|
||
{/* Social Profiles (using JSON-LD Schema) */}
|
||
<script type="application/ld+json">
|
||
{`
|
||
{
|
||
"@context": "https://schema.org",
|
||
"@type": "Organization",
|
||
"name": "WDI",
|
||
"url": "https://www.wdipl.com",
|
||
"sameAs": [
|
||
"https://www.facebook.com/wdideas",
|
||
"https://www.linkedin.com/in/website-developers-india/",
|
||
"https://www.instagram.com/wdipl/"
|
||
]
|
||
}
|
||
`}
|
||
</script>
|
||
</Helmet>
|
||
<div className="container mx-auto px-6 lg:px-8">
|
||
<div className="grid lg:grid-cols-2 gap-16 items-center min-h-[90vh]">
|
||
<motion.div
|
||
initial={{ opacity: 0, x: -50 }}
|
||
animate={{ opacity: 1, x: 0 }}
|
||
transition={{ duration: 0.8 }}
|
||
className="space-y-8"
|
||
>
|
||
{/* Solutions Label */}
|
||
<motion.div
|
||
initial={{ opacity: 0, y: 20 }}
|
||
animate={{ opacity: 1, y: 0 }}
|
||
transition={{ duration: 0.6 }}
|
||
>
|
||
<span className="text-white/70 text-sm font-medium">
|
||
Solutions
|
||
</span>
|
||
</motion.div>
|
||
|
||
{/* Main Heading */}
|
||
<div className="space-y-6">
|
||
<h1 className="text-4xl md:text-5xl lg:text-6xl font-semibold text-white leading-tight">
|
||
Digital Product Development
|
||
</h1>
|
||
|
||
<p className="text-lg text-gray-300 leading-relaxed max-w-lg">
|
||
Transform your vision into market‑ready digital products that
|
||
captivate users and drive business growth with AI‑driven app
|
||
development.
|
||
</p>
|
||
</div>
|
||
|
||
{/* CTAs */}
|
||
<motion.div
|
||
initial={{ opacity: 0, y: 20 }}
|
||
animate={{ opacity: 1, y: 0 }}
|
||
transition={{ duration: 0.8, delay: 0.3 }}
|
||
className="flex flex-col sm:flex-row gap-4"
|
||
>
|
||
<ShimmerButton
|
||
className="text-lg px-8 py-4"
|
||
onClick={() => navigate("/start-a-project")}
|
||
>
|
||
<div className="inline-flex items-center gap-2">
|
||
<MessageSquare className="w-5 h-5 flex-shrink-0" />
|
||
<span>Get a Free Consultation</span>
|
||
</div>
|
||
</ShimmerButton>
|
||
<Button
|
||
variant="outline"
|
||
size="lg"
|
||
className="text-lg px-8 py-4 h-auto border-gray-600 text-gray-300 hover:bg-gray-800 hover:text-white"
|
||
>
|
||
<div className="inline-flex items-center gap-2">
|
||
<Eye className="w-5 h-5 flex-shrink-0" />
|
||
<span>View Our Product Portfolio</span>
|
||
</div>
|
||
</Button>
|
||
</motion.div>
|
||
</motion.div>
|
||
|
||
{/* Right side with Digital Product Development Visualization */}
|
||
<motion.div
|
||
initial={{ opacity: 0, x: 50 }}
|
||
animate={{ opacity: 1, x: 0 }}
|
||
transition={{ duration: 0.8, delay: 0.2 }}
|
||
className="relative flex flex-col items-center"
|
||
>
|
||
{/* Digital Product Blueprint Scene */}
|
||
<div className="relative w-full max-w-2xl mx-auto">
|
||
<motion.div
|
||
initial={{ opacity: 0, y: 30 }}
|
||
animate={{ opacity: 1, y: 0 }}
|
||
transition={{ duration: 0.8, delay: 0.4 }}
|
||
className="relative"
|
||
>
|
||
{/* Main Product Development Dashboard */}
|
||
<motion.div
|
||
initial={{ opacity: 0, scale: 0.8 }}
|
||
animate={{ opacity: 1, scale: 1 }}
|
||
transition={{ duration: 0.8, delay: 0.6 }}
|
||
className="relative bg-gray-900 rounded-2xl p-8 mx-auto max-w-lg shadow-2xl border border-gray-700"
|
||
>
|
||
{/* Digital Interface Preview */}
|
||
<div className="relative mb-8">
|
||
{/* App/Web Interface Mockup */}
|
||
<motion.div
|
||
initial={{ opacity: 0, scale: 0 }}
|
||
animate={{ opacity: 1, scale: 1 }}
|
||
transition={{ duration: 0.8, delay: 1.0 }}
|
||
className="relative bg-black/50 rounded-lg p-4 border border-gray-600"
|
||
>
|
||
<div className="space-y-4">
|
||
{/* Header Bar */}
|
||
<div className="flex items-center justify-between">
|
||
<div className="flex gap-2">
|
||
<div className="w-3 h-3 bg-red-400 rounded-full"></div>
|
||
<div className="w-3 h-3 bg-yellow-400 rounded-full"></div>
|
||
<div className="w-3 h-3 bg-green-400 rounded-full"></div>
|
||
</div>
|
||
<div className="text-gray-400 text-xs">
|
||
Product Blueprint
|
||
</div>
|
||
</div>
|
||
|
||
{/* Interface Elements */}
|
||
<motion.div
|
||
initial={{ opacity: 0, y: 20 }}
|
||
animate={{ opacity: 1, y: 0 }}
|
||
transition={{ duration: 0.8, delay: 1.2 }}
|
||
className="space-y-3"
|
||
>
|
||
{/* Navigation */}
|
||
<div className="flex gap-2">
|
||
<div className="w-16 h-2 bg-blue-400/50 rounded"></div>
|
||
<div className="w-12 h-2 bg-purple-400/50 rounded"></div>
|
||
<div className="w-14 h-2 bg-green-400/50 rounded"></div>
|
||
</div>
|
||
|
||
{/* Hero Section */}
|
||
<div className="w-full h-8 bg-gradient-to-r from-blue-400/30 to-purple-400/30 rounded"></div>
|
||
|
||
{/* Content Cards */}
|
||
<div className="grid grid-cols-2 gap-2">
|
||
<div className="w-full h-6 bg-gray-600/50 rounded"></div>
|
||
<div className="w-full h-6 bg-gray-600/50 rounded"></div>
|
||
</div>
|
||
|
||
{/* Interactive Elements */}
|
||
<div className="flex justify-between items-center">
|
||
<div className="w-20 h-3 bg-accent/50 rounded"></div>
|
||
<div className="w-8 h-3 bg-green-400/50 rounded-full"></div>
|
||
</div>
|
||
</motion.div>
|
||
</div>
|
||
</motion.div>
|
||
</div>
|
||
|
||
{/* Development Team Collaboration */}
|
||
<motion.div
|
||
initial={{ opacity: 0, y: 20 }}
|
||
animate={{ opacity: 1, y: 0 }}
|
||
transition={{ duration: 0.8, delay: 1.4 }}
|
||
className="bg-black/50 rounded-lg p-4 border border-gray-700 mb-6"
|
||
>
|
||
<div className="flex items-center justify-between mb-3">
|
||
<div className="flex items-center gap-2">
|
||
<Users className="w-4 h-4 text-blue-400" />
|
||
<span className="text-blue-400 text-xs font-mono">
|
||
Team Collaboration
|
||
</span>
|
||
</div>
|
||
<Badge
|
||
variant="secondary"
|
||
className="bg-green-500/20 text-green-300 border-green-500/30 text-xs"
|
||
>
|
||
Active
|
||
</Badge>
|
||
</div>
|
||
|
||
{/* Team Members */}
|
||
<div className="flex items-center gap-2 mb-3">
|
||
{[
|
||
{ role: "Designer", color: "bg-purple-400" },
|
||
{ role: "Developer", color: "bg-blue-400" },
|
||
{ role: "PM", color: "bg-green-400" },
|
||
{ role: "QA", color: "bg-orange-400" },
|
||
].map((member, index) => (
|
||
<motion.div
|
||
key={index}
|
||
initial={{ opacity: 0, scale: 0 }}
|
||
animate={{ opacity: 1, scale: 1 }}
|
||
transition={{
|
||
duration: 0.3,
|
||
delay: 1.6 + index * 0.1,
|
||
}}
|
||
className={`w-6 h-6 ${member.color} rounded-full flex items-center justify-center`}
|
||
>
|
||
<span className="text-white text-xs font-bold">
|
||
{member.role.charAt(0)}
|
||
</span>
|
||
</motion.div>
|
||
))}
|
||
</div>
|
||
|
||
{/* Progress Indicators */}
|
||
<div className="space-y-2">
|
||
<motion.div
|
||
initial={{ opacity: 0, width: 0 }}
|
||
animate={{ opacity: 1, width: "85%" }}
|
||
transition={{ duration: 1, delay: 2.0 }}
|
||
className="flex items-center justify-between"
|
||
>
|
||
<div className="flex items-center gap-2">
|
||
<div className="w-2 h-2 bg-blue-400 rounded-full"></div>
|
||
<span className="text-blue-300 text-xs">
|
||
Design Phase
|
||
</span>
|
||
</div>
|
||
<span className="text-blue-300 text-xs font-mono">
|
||
85%
|
||
</span>
|
||
</motion.div>
|
||
|
||
<motion.div
|
||
initial={{ opacity: 0, width: 0 }}
|
||
animate={{ opacity: 1, width: "60%" }}
|
||
transition={{ duration: 1, delay: 2.2 }}
|
||
className="flex items-center justify-between"
|
||
>
|
||
<div className="flex items-center gap-2">
|
||
<div className="w-2 h-2 bg-green-400 rounded-full"></div>
|
||
<span className="text-green-300 text-xs">
|
||
Development
|
||
</span>
|
||
</div>
|
||
<span className="text-green-300 text-xs font-mono">
|
||
60%
|
||
</span>
|
||
</motion.div>
|
||
|
||
<motion.div
|
||
initial={{ opacity: 0, width: 0 }}
|
||
animate={{ opacity: 1, width: "30%" }}
|
||
transition={{ duration: 1, delay: 2.4 }}
|
||
className="flex items-center justify-between"
|
||
>
|
||
<div className="flex items-center gap-2">
|
||
<div className="w-2 h-2 bg-orange-400 rounded-full"></div>
|
||
<span className="text-orange-300 text-xs">
|
||
Testing
|
||
</span>
|
||
</div>
|
||
<span className="text-orange-300 text-xs font-mono">
|
||
30%
|
||
</span>
|
||
</motion.div>
|
||
</div>
|
||
</motion.div>
|
||
|
||
{/* Success Metrics */}
|
||
<motion.div
|
||
initial={{ opacity: 0, y: 10 }}
|
||
animate={{ opacity: 1, y: 0 }}
|
||
transition={{ duration: 0.6, delay: 2.6 }}
|
||
className="grid grid-cols-2 gap-3"
|
||
>
|
||
<div className="p-3 bg-gradient-to-br from-green-500/20 to-emerald-500/20 rounded-lg border border-green-500/30">
|
||
<div className="text-green-400 text-lg font-bold">
|
||
95%
|
||
</div>
|
||
<div className="text-white text-xs">Success Rate</div>
|
||
</div>
|
||
<div className="p-3 bg-gradient-to-br from-blue-500/20 to-cyan-500/20 rounded-lg border border-blue-500/30">
|
||
<div className="text-blue-400 text-lg font-bold">3x</div>
|
||
<div className="text-white text-xs">Faster Launch</div>
|
||
</div>
|
||
</motion.div>
|
||
</motion.div>
|
||
|
||
{/* Floating Development Elements */}
|
||
<motion.div
|
||
initial={{ opacity: 0, scale: 0.8 }}
|
||
animate={{ opacity: 1, scale: 1 }}
|
||
transition={{ duration: 0.8, delay: 2.8 }}
|
||
className="absolute -bottom-6 -left-6 transform -rotate-12"
|
||
>
|
||
<div className="w-14 h-14 bg-gradient-to-br from-purple-500/20 to-pink-500/20 rounded-full flex items-center justify-center border border-purple-500/30">
|
||
<Code className="w-6 h-6 text-purple-400" />
|
||
</div>
|
||
</motion.div>
|
||
|
||
{/* Digital Screens Connection */}
|
||
<motion.div
|
||
initial={{ opacity: 0 }}
|
||
animate={{ opacity: 1 }}
|
||
transition={{ duration: 0.8, delay: 3.0 }}
|
||
className="absolute -top-8 -right-8 space-y-2"
|
||
>
|
||
<div className="flex items-center gap-2 text-cyan-400 text-sm">
|
||
<Monitor className="w-4 h-4" />
|
||
<span>Multi-Platform</span>
|
||
</div>
|
||
<div className="flex gap-1">
|
||
<motion.div
|
||
animate={{ opacity: [0.3, 1, 0.3] }}
|
||
transition={{ duration: 2, repeat: Infinity }}
|
||
className="w-2 h-2 bg-cyan-400 rounded-full"
|
||
></motion.div>
|
||
<motion.div
|
||
animate={{ opacity: [0.3, 1, 0.3] }}
|
||
transition={{ duration: 2, repeat: Infinity, delay: 0.5 }}
|
||
className="w-2 h-2 bg-purple-400 rounded-full"
|
||
></motion.div>
|
||
<motion.div
|
||
animate={{ opacity: [0.3, 1, 0.3] }}
|
||
transition={{ duration: 2, repeat: Infinity, delay: 1 }}
|
||
className="w-2 h-2 bg-green-400 rounded-full"
|
||
></motion.div>
|
||
</div>
|
||
</motion.div>
|
||
|
||
{/* Innovation Badge */}
|
||
<motion.div
|
||
initial={{ opacity: 0, scale: 0 }}
|
||
animate={{ opacity: 1, scale: 1 }}
|
||
transition={{ duration: 0.6, delay: 3.2 }}
|
||
className="absolute top-1/4 left-1/4 transform -translate-x-1/2 -translate-y-1/2"
|
||
>
|
||
<div className="w-16 h-16 bg-accent/10 backdrop-blur-sm rounded-full flex items-center justify-center shadow-xl">
|
||
<div className="text-center">
|
||
<div className="text-accent text-sm font-bold">End</div>
|
||
<div className="text-white text-xs">to End</div>
|
||
</div>
|
||
</div>
|
||
</motion.div>
|
||
</motion.div>
|
||
|
||
{/* Product Development Features */}
|
||
<motion.div
|
||
initial={{ opacity: 0, y: 30 }}
|
||
animate={{ opacity: 1, y: 0 }}
|
||
transition={{ duration: 0.8, delay: 3.4 }}
|
||
className="flex justify-center gap-4 flex-wrap mt-8"
|
||
>
|
||
<Badge
|
||
variant="secondary"
|
||
className="bg-blue-500/20 text-blue-300 border-blue-500/30"
|
||
>
|
||
<Palette className="w-3 h-3 mr-1" />
|
||
Design
|
||
</Badge>
|
||
<Badge
|
||
variant="secondary"
|
||
className="bg-green-500/20 text-green-300 border-green-500/30"
|
||
>
|
||
<Code className="w-3 h-3 mr-1" />
|
||
Development
|
||
</Badge>
|
||
<Badge
|
||
variant="secondary"
|
||
className="bg-purple-500/20 text-purple-300 border-purple-500/30"
|
||
>
|
||
<Rocket className="w-3 h-3 mr-1" />
|
||
Launch
|
||
</Badge>
|
||
</motion.div>
|
||
</div>
|
||
</motion.div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
);
|
||
};
|
||
|
||
// The Challenge We Solve
|
||
const DigitalProductChallenge = () => {
|
||
return (
|
||
<section className="py-32">
|
||
<div className="container mx-auto px-6 lg:px-8">
|
||
<div className="max-w-6xl mx-auto">
|
||
<motion.div
|
||
initial={{ opacity: 0, y: 30 }}
|
||
whileInView={{ opacity: 1, y: 0 }}
|
||
transition={{ duration: 0.8 }}
|
||
viewport={{ once: true }}
|
||
className="text-center mb-16"
|
||
>
|
||
<h2 className="text-4xl lg:text-5xl font-semibold text-foreground mb-8">
|
||
From Idea to Impact: Navigating the Product Journey
|
||
</h2>
|
||
<p className="mt-4 text-gray-400 max-w-2xl mx-auto">
|
||
A structured end‑to‑end process that turns your vision into
|
||
market‑ready digital product development outcomes, from concept
|
||
and validation through design, development, and launch.
|
||
</p>
|
||
</motion.div>
|
||
|
||
<div className="grid md:grid-cols-2 gap-12 items-center">
|
||
{/* Problem */}
|
||
<motion.div
|
||
initial={{ opacity: 0, x: -30 }}
|
||
whileInView={{ opacity: 1, x: 0 }}
|
||
transition={{ duration: 0.8, delay: 0.2 }}
|
||
viewport={{ once: true }}
|
||
>
|
||
<Card className="bg-red-500/5 border-red-500/20 p-8 rounded-2xl">
|
||
<CardContent className="p-0">
|
||
<div className="flex items-center gap-4 mb-6">
|
||
<div className="w-12 h-12 bg-red-500/20 rounded-xl flex items-center justify-center">
|
||
<AlertTriangle className="w-6 h-6 text-red-400" />
|
||
</div>
|
||
<h3 className="text-2xl font-semibold text-foreground">
|
||
The Problem
|
||
</h3>
|
||
</div>
|
||
<div className="space-y-4 text-muted-foreground">
|
||
<p>
|
||
Businesses often struggle to bridge the gap between
|
||
innovative ideas and a successful, user-friendly digital
|
||
product. This involves complex challenges in:
|
||
</p>
|
||
<ul className="space-y-2">
|
||
<li className="flex items-start gap-2">
|
||
<X className="w-4 h-4 text-red-400 mt-1 flex-shrink-0" />
|
||
<span>
|
||
Design complexity and user experience challenges
|
||
</span>
|
||
</li>
|
||
<li className="flex items-start gap-2">
|
||
<X className="w-4 h-4 text-red-400 mt-1 flex-shrink-0" />
|
||
<span>
|
||
Technology selection and scalability concerns
|
||
</span>
|
||
</li>
|
||
<li className="flex items-start gap-2">
|
||
<X className="w-4 h-4 text-red-400 mt-1 flex-shrink-0" />
|
||
<span>Market fit validation and user adoption</span>
|
||
</li>
|
||
<li className="flex items-start gap-2">
|
||
<X className="w-4 h-4 text-red-400 mt-1 flex-shrink-0" />
|
||
<span>Resource management and timeline pressures</span>
|
||
</li>
|
||
</ul>
|
||
</div>
|
||
</CardContent>
|
||
</Card>
|
||
</motion.div>
|
||
|
||
{/* Solution */}
|
||
<motion.div
|
||
initial={{ opacity: 0, x: 30 }}
|
||
whileInView={{ opacity: 1, x: 0 }}
|
||
transition={{ duration: 0.8, delay: 0.4 }}
|
||
viewport={{ once: true }}
|
||
>
|
||
<Card className="bg-green-500/5 border-green-500/20 p-8 rounded-2xl">
|
||
<CardContent className="p-0">
|
||
<div className="flex items-center gap-4 mb-6">
|
||
<div className="w-12 h-12 bg-green-500/20 rounded-xl flex items-center justify-center">
|
||
<CheckCircle className="w-6 h-6 text-green-400" />
|
||
</div>
|
||
<h3 className="text-2xl font-semibold text-foreground">
|
||
Our Solution
|
||
</h3>
|
||
</div>
|
||
<div className="space-y-4 text-muted-foreground">
|
||
<p>
|
||
WDI offers end-to-end digital product development, guiding
|
||
you through every phase from ideation and strategy to
|
||
design, development, and launch, ensuring your product
|
||
stands out and delivers real value.
|
||
</p>
|
||
<ul className="space-y-2">
|
||
<li className="flex items-start gap-2">
|
||
<CheckCircle className="w-4 h-4 text-green-400 mt-1 flex-shrink-0" />
|
||
<span>Comprehensive strategy and market research</span>
|
||
</li>
|
||
<li className="flex items-start gap-2">
|
||
<CheckCircle className="w-4 h-4 text-green-400 mt-1 flex-shrink-0" />
|
||
<span>
|
||
User-centered design and development approach
|
||
</span>
|
||
</li>
|
||
<li className="flex items-start gap-2">
|
||
<CheckCircle className="w-4 h-4 text-green-400 mt-1 flex-shrink-0" />
|
||
<span>
|
||
Scalable architecture and future-proof technology
|
||
</span>
|
||
</li>
|
||
<li className="flex items-start gap-2">
|
||
<CheckCircle className="w-4 h-4 text-green-400 mt-1 flex-shrink-0" />
|
||
<span>
|
||
Agile methodology with transparent communication
|
||
</span>
|
||
</li>
|
||
</ul>
|
||
</div>
|
||
</CardContent>
|
||
</Card>
|
||
</motion.div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
);
|
||
};
|
||
|
||
// What's Included in This Solution
|
||
const DigitalProductIncludes = () => {
|
||
const includes = [
|
||
{
|
||
icon: Search,
|
||
title: "Discovery & Strategy",
|
||
description:
|
||
"Market research, user personas, competitive analysis, feature prioritization.",
|
||
},
|
||
{
|
||
icon: Palette,
|
||
title: "UI/UX Design",
|
||
description:
|
||
"Wireframing, prototyping, user testing, visual design, interaction design.",
|
||
},
|
||
{
|
||
icon: Code,
|
||
title: "Full-Stack Development",
|
||
description:
|
||
"Front-end, back-end, database architecture, API integrations.",
|
||
},
|
||
{
|
||
icon: Shield,
|
||
title: "Quality Assurance",
|
||
description: "Rigorous testing, bug fixing, performance optimization.",
|
||
},
|
||
{
|
||
icon: CloudCog,
|
||
title: "Deployment & Support",
|
||
description:
|
||
"Cloud deployment, maintenance, updates, analytics integration.",
|
||
},
|
||
{
|
||
icon: Users,
|
||
title: "Project Management",
|
||
description:
|
||
"Agile methodologies, transparent communication, roadmap planning.",
|
||
},
|
||
];
|
||
|
||
return (
|
||
<section className="py-32 bg-black">
|
||
<div className="container mx-auto px-6 lg:px-8">
|
||
<motion.div
|
||
initial={{ opacity: 0, y: 30 }}
|
||
whileInView={{ opacity: 1, y: 0 }}
|
||
transition={{ duration: 0.8 }}
|
||
viewport={{ once: true }}
|
||
className="text-center mb-20"
|
||
>
|
||
<h2 className="text-4xl lg:text-5xl font-semibold text-white mb-6">
|
||
Comprehensive Digital Product Development Services
|
||
</h2>
|
||
<p className="mt-4 text-gray-400 max-w-2xl mx-auto">
|
||
End‑to‑end digital product development services that turn your
|
||
vision into market‑ready applications, from strategy and design
|
||
through development, testing, and launch.
|
||
</p>
|
||
</motion.div>
|
||
|
||
<motion.div
|
||
initial={{ opacity: 0, y: 40 }}
|
||
whileInView={{ opacity: 1, y: 0 }}
|
||
transition={{ duration: 0.8, delay: 0.2 }}
|
||
viewport={{ once: true }}
|
||
className="grid md:grid-cols-2 lg:grid-cols-3 gap-8"
|
||
>
|
||
{includes.map((item, index) => {
|
||
const IconComponent = item.icon;
|
||
return (
|
||
<motion.div
|
||
key={index}
|
||
initial={{ opacity: 0, y: 20 }}
|
||
whileInView={{ opacity: 1, y: 0 }}
|
||
transition={{ duration: 0.5, delay: index * 0.01 }}
|
||
viewport={{ once: true }}
|
||
whileHover={{ y: -5 }}
|
||
className="group"
|
||
>
|
||
<Card className="bg-gray-900/50 backdrop-blur-md border-gray-800 hover:border-accent/30 transition-all duration-300 shadow-lg hover:shadow-xl rounded-2xl h-full">
|
||
<CardContent className="p-8 text-center">
|
||
<div className="w-16 h-16 bg-accent/20 rounded-2xl flex items-center justify-center mx-auto mb-6">
|
||
<IconComponent className="w-8 h-8 text-accent" />
|
||
</div>
|
||
<h3 className="text-xl font-semibold text-white mb-4">
|
||
{item.title}
|
||
</h3>
|
||
<p className="text-gray-300 leading-relaxed">
|
||
{item.description}
|
||
</p>
|
||
</CardContent>
|
||
</Card>
|
||
</motion.div>
|
||
);
|
||
})}
|
||
</motion.div>
|
||
</div>
|
||
</section>
|
||
);
|
||
};
|
||
|
||
// Key Benefits & Outcomes
|
||
const DigitalProductBenefits = () => {
|
||
const benefits = [
|
||
{
|
||
icon: Target,
|
||
title: "Market-Driven Innovation",
|
||
description:
|
||
"Develop products precisely tailored to user needs and market demands.",
|
||
},
|
||
{
|
||
icon: Users,
|
||
title: "Seamless User Experiences",
|
||
description:
|
||
"Create intuitive and engaging interfaces that foster user loyalty.",
|
||
},
|
||
{
|
||
icon: Building,
|
||
title: "Scalable & Robust Architecture",
|
||
description:
|
||
"Future-proof your product with high-performance, maintainable code.",
|
||
},
|
||
{
|
||
icon: Zap,
|
||
title: "Accelerated Time-to-Market",
|
||
description:
|
||
"Efficient processes ensure your product launches on schedule.",
|
||
},
|
||
{
|
||
icon: Shield,
|
||
title: "Reduced Development Risk",
|
||
description:
|
||
"Expert guidance and rigorous testing minimize post-launch issues.",
|
||
},
|
||
];
|
||
|
||
return (
|
||
<section className="py-32">
|
||
<div className="container mx-auto px-6 lg:px-8">
|
||
<motion.div
|
||
initial={{ opacity: 0, y: 30 }}
|
||
whileInView={{ opacity: 1, y: 0 }}
|
||
transition={{ duration: 0.8 }}
|
||
viewport={{ once: true }}
|
||
className="text-center mb-20"
|
||
>
|
||
<h2 className="text-4xl lg:text-5xl font-semibold text-foreground mb-6">
|
||
Build Products That Succeed with WDI
|
||
</h2>
|
||
<p className="mt-4 text-gray-400 max-w-2xl mx-auto">
|
||
End‑to‑end digital product development partner that helps you build
|
||
and launch products customers love, from idea validation and
|
||
UX‑driven design to scalable engineering and data‑informed growth.
|
||
</p>
|
||
</motion.div>
|
||
|
||
<motion.div
|
||
initial={{ opacity: 0, y: 40 }}
|
||
whileInView={{ opacity: 1, y: 0 }}
|
||
transition={{ duration: 0.8, delay: 0.2 }}
|
||
viewport={{ once: true }}
|
||
className="grid md:grid-cols-2 lg:grid-cols-3 gap-8"
|
||
>
|
||
{benefits.slice(0, 3).map((benefit, index) => {
|
||
const IconComponent = benefit.icon;
|
||
return (
|
||
<motion.div
|
||
key={index}
|
||
initial={{ opacity: 0, y: 20 }}
|
||
whileInView={{ opacity: 1, y: 0 }}
|
||
transition={{ duration: 0.5, delay: index * 0.01 }}
|
||
viewport={{ once: true }}
|
||
whileHover={{ y: -5 }}
|
||
className="group"
|
||
>
|
||
<Card className="bg-card/20 backdrop-blur-md border-white/10 hover:border-accent/30 transition-all duration-300 shadow-lg hover:shadow-xl rounded-2xl h-full">
|
||
<CardContent className="p-8 text-center">
|
||
<div className="w-16 h-16 bg-accent/20 rounded-2xl flex items-center justify-center mx-auto mb-6">
|
||
<IconComponent className="w-8 h-8 text-accent" />
|
||
</div>
|
||
<h3 className="text-xl font-semibold text-foreground mb-4">
|
||
{benefit.title}
|
||
</h3>
|
||
<p className="text-muted-foreground leading-relaxed">
|
||
{benefit.description}
|
||
</p>
|
||
</CardContent>
|
||
</Card>
|
||
</motion.div>
|
||
);
|
||
})}
|
||
</motion.div>
|
||
|
||
{/* Second row with remaining benefits */}
|
||
<motion.div
|
||
initial={{ opacity: 0, y: 40 }}
|
||
whileInView={{ opacity: 1, y: 0 }}
|
||
transition={{ duration: 0.8, delay: 0.4 }}
|
||
viewport={{ once: true }}
|
||
className="grid md:grid-cols-2 gap-8 max-w-2xl mx-auto mt-8"
|
||
>
|
||
{benefits.slice(3).map((benefit, index) => {
|
||
const IconComponent = benefit.icon;
|
||
return (
|
||
<motion.div
|
||
key={index + 3}
|
||
initial={{ opacity: 0, y: 20 }}
|
||
whileInView={{ opacity: 1, y: 0 }}
|
||
transition={{ duration: 0.5, delay: (index + 3) * 0.1 }}
|
||
viewport={{ once: true }}
|
||
whileHover={{ y: -5 }}
|
||
className="group"
|
||
>
|
||
<Card className="bg-card/20 backdrop-blur-md border-white/10 hover:border-accent/30 transition-all duration-300 shadow-lg hover:shadow-xl rounded-2xl h-full">
|
||
<CardContent className="p-8 text-center">
|
||
<div className="w-16 h-16 bg-accent/20 rounded-2xl flex items-center justify-center mx-auto mb-6">
|
||
<IconComponent className="w-8 h-8 text-accent" />
|
||
</div>
|
||
<h3 className="text-xl font-semibold text-foreground mb-4">
|
||
{benefit.title}
|
||
</h3>
|
||
<p className="text-muted-foreground leading-relaxed">
|
||
{benefit.description}
|
||
</p>
|
||
</CardContent>
|
||
</Card>
|
||
</motion.div>
|
||
);
|
||
})}
|
||
</motion.div>
|
||
</div>
|
||
</section>
|
||
);
|
||
};
|
||
|
||
// Our Process for Digital Product Development
|
||
const DigitalProductProcess = () => {
|
||
const steps = [
|
||
{
|
||
title: "Discovery & Planning",
|
||
description:
|
||
"Deep dive into your vision, market, and user needs to define product strategy.",
|
||
icon: Search,
|
||
},
|
||
{
|
||
title: "Design & Prototyping",
|
||
description:
|
||
"Craft compelling UI/UX, create interactive prototypes for validation.",
|
||
icon: Palette,
|
||
},
|
||
{
|
||
title: "Development & Iteration",
|
||
description:
|
||
"Build features in agile sprints, with continuous feedback cycles.",
|
||
icon: Code,
|
||
},
|
||
{
|
||
title: "Testing & Quality Assurance",
|
||
description:
|
||
"Comprehensive testing to ensure functionality, performance, and security.",
|
||
icon: Shield,
|
||
},
|
||
{
|
||
title: "Deployment & Launch",
|
||
description:
|
||
"Strategic rollout and monitoring to ensure a smooth market entry.",
|
||
icon: Rocket,
|
||
},
|
||
{
|
||
title: "Post-Launch Support & Evolution",
|
||
description: "Ongoing maintenance, updates, and feature enhancements.",
|
||
icon: RefreshCw,
|
||
},
|
||
];
|
||
|
||
return (
|
||
<section className="py-32 bg-black">
|
||
<div className="container mx-auto px-6 lg:px-8">
|
||
<motion.div
|
||
initial={{ opacity: 0, y: 30 }}
|
||
whileInView={{ opacity: 1, y: 0 }}
|
||
transition={{ duration: 0.8 }}
|
||
viewport={{ once: true }}
|
||
className="text-center mb-20"
|
||
>
|
||
<h2 className="text-4xl lg:text-5xl font-semibold text-white mb-6">
|
||
Our Collaborative Product Journey
|
||
</h2>
|
||
<p className="mt-4 text-gray-400 max-w-2xl mx-auto">
|
||
A transparent, team‑driven process that takes your product from
|
||
vision to value, with close collaboration between you, designers,
|
||
and engineers at every stage.
|
||
</p>
|
||
</motion.div>
|
||
|
||
<div className="relative">
|
||
{/* Timeline line */}
|
||
<div className="absolute left-1/2 transform -translate-x-1/2 h-full w-0.5 bg-gradient-to-b from-accent via-accent/50 to-transparent hidden lg:block"></div>
|
||
|
||
<div className="space-y-16">
|
||
{steps.map((step, index) => {
|
||
const IconComponent = step.icon;
|
||
const isEven = index % 2 === 0;
|
||
|
||
return (
|
||
<motion.div
|
||
key={index}
|
||
initial={{ opacity: 0, x: isEven ? -50 : 50 }}
|
||
whileInView={{ opacity: 1, x: 0 }}
|
||
transition={{ duration: 0.8, delay: index * 0.2 }}
|
||
viewport={{ once: true }}
|
||
className={`flex items-center ${
|
||
isEven ? "lg:flex-row" : "lg:flex-row-reverse"
|
||
} flex-col lg:gap-16 gap-8`}
|
||
>
|
||
<div
|
||
className={`flex-1 ${
|
||
isEven ? "lg:text-right" : "lg:text-left"
|
||
} text-center lg:text-left`}
|
||
>
|
||
<div className="bg-gray-900/50 backdrop-blur-md rounded-2xl border border-gray-800 p-8 hover:border-accent/30 transition-all duration-300 shadow-lg hover:shadow-xl">
|
||
<div className="flex items-center gap-4 mb-4 justify-center lg:justify-start">
|
||
<div className="w-12 h-12 bg-accent/20 rounded-xl flex items-center justify-center">
|
||
<IconComponent className="w-6 h-6 text-accent" />
|
||
</div>
|
||
<div className="text-2xl font-bold text-accent">
|
||
0{index + 1}
|
||
</div>
|
||
</div>
|
||
<h3 className="text-2xl font-semibold text-white mb-4">
|
||
{step.title}
|
||
</h3>
|
||
<p className="text-gray-300 leading-relaxed">
|
||
{step.description}
|
||
</p>
|
||
</div>
|
||
</div>
|
||
|
||
{/* Timeline dot */}
|
||
<div className="w-4 h-4 bg-accent rounded-full border-4 border-black z-10 hidden lg:block"></div>
|
||
|
||
<div className="flex-1 hidden lg:block"></div>
|
||
</motion.div>
|
||
);
|
||
})}
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
);
|
||
};
|
||
|
||
// Who Benefits from This Solution
|
||
const DigitalProductAudience = () => {
|
||
const audiences = [
|
||
{
|
||
icon: Rocket,
|
||
title: "Startups",
|
||
description:
|
||
"Looking to build their first flagship product and establish market presence.",
|
||
},
|
||
{
|
||
icon: Building,
|
||
title: "Established Businesses",
|
||
description:
|
||
"Aiming to launch new digital services or enhance existing ones.",
|
||
},
|
||
{
|
||
icon: RefreshCw,
|
||
title: "Companies Digitalizing",
|
||
description:
|
||
"Seeking to digitalize internal processes or customer interactions.",
|
||
},
|
||
{
|
||
icon: Lightbulb,
|
||
title: "Entrepreneurs",
|
||
description:
|
||
"With innovative ideas needing expert execution and market validation.",
|
||
},
|
||
];
|
||
|
||
return (
|
||
<section className="py-32">
|
||
<div className="container mx-auto px-6 lg:px-8">
|
||
<motion.div
|
||
initial={{ opacity: 0, y: 30 }}
|
||
whileInView={{ opacity: 1, y: 0 }}
|
||
transition={{ duration: 0.8 }}
|
||
viewport={{ once: true }}
|
||
className="text-center mb-20"
|
||
>
|
||
<h2 className="text-4xl lg:text-5xl font-semibold text-foreground mb-6">
|
||
Ideal For...
|
||
</h2>
|
||
</motion.div>
|
||
|
||
<motion.div
|
||
initial={{ opacity: 0, y: 40 }}
|
||
whileInView={{ opacity: 1, y: 0 }}
|
||
transition={{ duration: 0.8, delay: 0.2 }}
|
||
viewport={{ once: true }}
|
||
className="grid md:grid-cols-2 lg:grid-cols-4 gap-8"
|
||
>
|
||
{audiences.map((audience, index) => {
|
||
const IconComponent = audience.icon;
|
||
return (
|
||
<motion.div
|
||
key={index}
|
||
initial={{ opacity: 0, y: 20 }}
|
||
whileInView={{ opacity: 1, y: 0 }}
|
||
transition={{ duration: 0.5, delay: index * 0.01 }}
|
||
viewport={{ once: true }}
|
||
whileHover={{ y: -5 }}
|
||
className="group"
|
||
>
|
||
<Card className="bg-card/20 backdrop-blur-md border-white/10 hover:border-accent/30 transition-all duration-300 shadow-lg hover:shadow-xl rounded-2xl h-full">
|
||
<CardContent className="p-8 text-center">
|
||
<div className="w-16 h-16 bg-accent/20 rounded-2xl flex items-center justify-center mx-auto mb-6">
|
||
<IconComponent className="w-8 h-8 text-accent" />
|
||
</div>
|
||
<h3 className="text-xl font-semibold text-foreground mb-4">
|
||
{audience.title}
|
||
</h3>
|
||
<p className="text-muted-foreground leading-relaxed">
|
||
{audience.description}
|
||
</p>
|
||
</CardContent>
|
||
</Card>
|
||
</motion.div>
|
||
);
|
||
})}
|
||
</motion.div>
|
||
</div>
|
||
</section>
|
||
);
|
||
};
|
||
|
||
// Case Studies
|
||
const DigitalProductCaseStudies = () => {
|
||
const caseStudies = [
|
||
{
|
||
title: "FinTech Mobile App Redesign",
|
||
client: "Banking Institution",
|
||
description:
|
||
"Helped a banking client launch a new mobile app with enhanced user experience and security features, resulting in 40% increase in daily active users and 50% improvement in customer satisfaction scores.",
|
||
image:
|
||
"https://images.unsplash.com/photo-1563013544-824ae1b704d3?w=400&h=300&fit=crop&auto=format",
|
||
results: "40% DAU increase, 50% satisfaction improvement",
|
||
engagement: "FinTech transformation success",
|
||
gradient: "from-blue-500/20 to-cyan-500/20",
|
||
},
|
||
{
|
||
title: "E-learning Platform Development",
|
||
client: "Education Technology Company",
|
||
description:
|
||
"Built a comprehensive e-learning system from scratch, supporting 10,000+ simultaneous users with interactive features, video streaming, and progress tracking, achieving 95% user retention rate.",
|
||
image:
|
||
"https://images.unsplash.com/photo-1522202176988-66273c2fd55f?w=400&h=300&fit=crop&auto=format",
|
||
results: "10K+ concurrent users, 95% retention",
|
||
engagement: "Educational platform innovation",
|
||
gradient: "from-green-500/20 to-emerald-500/20",
|
||
},
|
||
{
|
||
title: "Healthcare Management System",
|
||
client: "Healthcare Provider",
|
||
description:
|
||
"Developed an integrated healthcare management platform that streamlined patient care workflows, reduced administrative overhead by 60%, and improved patient engagement through digital touchpoints.",
|
||
image:
|
||
"https://images.unsplash.com/photo-1576091160399-112ba8d25d1f?w=400&h=300&fit=crop&auto=format",
|
||
results: "60% admin reduction, enhanced patient care",
|
||
engagement: "Healthcare digital transformation",
|
||
gradient: "from-purple-500/20 to-pink-500/20",
|
||
},
|
||
];
|
||
|
||
return (
|
||
<section className="py-32 bg-black">
|
||
<div className="container mx-auto px-6 lg:px-8">
|
||
<motion.div
|
||
initial={{ opacity: 0, y: 30 }}
|
||
whileInView={{ opacity: 1, y: 0 }}
|
||
transition={{ duration: 0.8 }}
|
||
viewport={{ once: true }}
|
||
className="text-center mb-20"
|
||
>
|
||
<h2 className="text-4xl lg:text-5xl font-semibold text-white mb-8">
|
||
Digital Products We've Helped Bring to Life
|
||
</h2>
|
||
<p className="mt-4 text-gray-400 max-w-2xl mx-auto">
|
||
A showcase of the apps, platforms, and SaaS products we’ve co‑built
|
||
with clients from concept to successful launch and growth.
|
||
</p>
|
||
</motion.div>
|
||
|
||
<motion.div
|
||
initial={{ opacity: 0, y: 40 }}
|
||
whileInView={{ opacity: 1, y: 0 }}
|
||
transition={{ duration: 0.8, delay: 0.2 }}
|
||
viewport={{ once: true }}
|
||
className="grid md:grid-cols-2 lg:grid-cols-3 gap-8"
|
||
>
|
||
{caseStudies.map((study, index) => (
|
||
<motion.div
|
||
key={index}
|
||
initial={{ opacity: 0, y: 20 }}
|
||
whileInView={{ opacity: 1, y: 0 }}
|
||
transition={{ duration: 0.5, delay: index * 0.01 }}
|
||
viewport={{ once: true }}
|
||
whileHover={{ y: -8, scale: 1.02 }}
|
||
className="group cursor-pointer"
|
||
>
|
||
<Card className="bg-gray-900/50 backdrop-blur-md border-gray-800 hover:border-accent/30 transition-all duration-300 shadow-lg hover:shadow-xl rounded-2xl overflow-hidden h-full">
|
||
<CardContent className="p-0 flex flex-col h-full">
|
||
<div className="p-8 pb-6">
|
||
<div className="flex items-start gap-4 mb-6">
|
||
<div className="w-12 h-12 bg-accent/20 rounded-xl flex items-center justify-center">
|
||
<Rocket className="w-6 h-6 text-accent" />
|
||
</div>
|
||
<div className="flex-1">
|
||
<div className="text-xs text-gray-400 mb-2 uppercase tracking-wider">
|
||
{study.client}
|
||
</div>
|
||
<Badge
|
||
variant="secondary"
|
||
className="text-xs bg-accent/20 text-accent border-accent/30"
|
||
>
|
||
{study.results}
|
||
</Badge>
|
||
</div>
|
||
</div>
|
||
|
||
<h3 className="text-xl font-semibold text-white mb-4 leading-tight">
|
||
{study.title}
|
||
</h3>
|
||
</div>
|
||
|
||
<div className="px-8 pb-6 flex-1">
|
||
<div
|
||
className={`relative rounded-xl overflow-hidden bg-gradient-to-br ${study.gradient} p-4 border border-white/10`}
|
||
>
|
||
<ImageWithFallback
|
||
src={study.image}
|
||
alt={study.title}
|
||
className="w-full h-48 object-cover rounded-lg shadow-lg"
|
||
/>
|
||
</div>
|
||
</div>
|
||
|
||
<div className="px-8 pb-6">
|
||
<p className="text-gray-300 text-sm leading-relaxed mb-4">
|
||
{study.description}
|
||
</p>
|
||
<div className="flex gap-4 text-xs text-gray-400">
|
||
<div className="flex items-center gap-1">
|
||
<Star className="w-3 h-3" />
|
||
{study.engagement}
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div className="p-8 pt-0 mt-auto">
|
||
<Button
|
||
variant="ghost"
|
||
size="sm"
|
||
className="w-full justify-between text-accent hover:text-accent hover:bg-accent/10 group-hover:translate-x-1 transition-all duration-300 h-auto py-3"
|
||
>
|
||
<span className="text-sm font-medium">
|
||
VIEW FULL CASE STUDY
|
||
</span>
|
||
<ArrowRight className="w-4 h-4" />
|
||
</Button>
|
||
</div>
|
||
</CardContent>
|
||
</Card>
|
||
</motion.div>
|
||
))}
|
||
</motion.div>
|
||
</div>
|
||
</section>
|
||
);
|
||
};
|
||
|
||
// Mid-Page Lead Capture CTA
|
||
const DigitalProductInlineCTA = () => {
|
||
const navigate = useNavigate();
|
||
return (
|
||
<section className="py-20">
|
||
<div className="container mx-auto px-6 lg:px-8">
|
||
<motion.div
|
||
initial={{ opacity: 0, y: 50 }}
|
||
whileInView={{ opacity: 1, y: 0 }}
|
||
transition={{ duration: 0.8 }}
|
||
viewport={{ once: true }}
|
||
className="text-center max-w-4xl mx-auto"
|
||
>
|
||
<motion.div
|
||
initial={{ opacity: 0, y: 30 }}
|
||
whileInView={{ opacity: 1, y: 0 }}
|
||
transition={{ duration: 0.8, delay: 0.2 }}
|
||
viewport={{ once: true }}
|
||
className="space-y-8"
|
||
>
|
||
<div className="inline-block p-[2px] rounded-full bg-gradient-to-r from-accent via-blue-500 to-green-500">
|
||
<div className="bg-background rounded-full px-6 py-3 flex items-center gap-2">
|
||
<Rocket className="w-5 h-5 text-foreground" />
|
||
<span className="text-foreground text-base font-medium">
|
||
Product Development
|
||
</span>
|
||
</div>
|
||
</div>
|
||
|
||
<h2 className="text-4xl lg:text-5xl font-semibold text-foreground leading-tight">
|
||
Ready to Build Your Next{" "}
|
||
<span className="text-accent">Breakthrough Product?</span>
|
||
</h2>
|
||
|
||
<p className="text-xl text-muted-foreground leading-relaxed max-w-2xl mx-auto">
|
||
Let’s discuss your vision and create a clear roadmap for your
|
||
digital product development journey.
|
||
</p>
|
||
|
||
<ShimmerButton
|
||
className="text-xl px-10 py-5 rounded-2xl shadow-lg hover:shadow-xl"
|
||
onClick={() => navigate("/start-a-project")}
|
||
>
|
||
<div className="inline-flex items-center gap-3">
|
||
<Calendar className="w-6 h-6 flex-shrink-0" />
|
||
<span>Start Your Product Journey</span>
|
||
</div>
|
||
</ShimmerButton>
|
||
</motion.div>
|
||
</motion.div>
|
||
</div>
|
||
</section>
|
||
);
|
||
};
|
||
|
||
// FAQs
|
||
const DigitalProductFAQs = () => {
|
||
const faqs = [
|
||
{
|
||
question:
|
||
"What is your typical timeline for digital product development?",
|
||
answer:
|
||
"Our typical timeline varies by project complexity but generally ranges from 3–9 months for most digital product development projects. A simple MVP can be ready in 6–12 weeks, while complex enterprise applications may take 6–12 months.\n\nOur process includes: Discovery & Planning (2–3 weeks), Design & Prototyping (3–4 weeks), Development (8–20 weeks depending on features), Testing & QA (2–3 weeks), and Deployment (1 week). We work in agile sprints, delivering working features every two weeks, so you can see progress and provide feedback throughout the digital product development lifecycle. We’ll provide a detailed, customized timeline during the initial consultation based on your requirements.",
|
||
},
|
||
{
|
||
question:
|
||
"How do you ensure user feedback is incorporated into the design?",
|
||
answer:
|
||
"User feedback is central to our digital product development approach. We integrate it through: user research and persona development at the start, interactive prototypes for early validation, usability testing with real users, A/B testing for key decisions, and continuous feedback loops throughout development.\n\nWe conduct user interviews, surveys, and testing at key milestones and create clickable prototypes you and your users can experience before full build-out. Once live, we embed analytics and feedback mechanisms to capture ongoing behavior and insights. Regular design and product reviews ensure user input directly shapes iterations and refinements.",
|
||
},
|
||
{
|
||
question:
|
||
"What technologies do you specialize in for product development?",
|
||
answer:
|
||
"We specialize in modern, scalable stacks for digital product development, including:\n\nFrontend: React, Next.js, Vue.js, Angular (web); React Native, Flutter (mobile).\n\nBackend: Node.js, Python (Django/Flask), .NET, Java, PHP.\n\nDatabases: PostgreSQL, MongoDB, MySQL, Redis.\n\nCloud & DevOps: AWS, Google Cloud, Azure, Docker, Kubernetes.\n\nWe also work with headless CMS, API integrations, payment gateways, and AI/ML features. Our strategy is to choose the right stack based on your product goals, scalability, and long-term maintenance—not just what’s trending.",
|
||
},
|
||
{
|
||
question: "Do you offer post-launch maintenance and support?",
|
||
answer:
|
||
"Yes, we offer comprehensive post-launch support as part of our digital product development service. This includes: technical maintenance (bug fixes, security patches, performance tuning), feature enhancements, 24/7 monitoring, regular backups and security audits, and analytics and performance reporting.\n\nWe provide flexible support packages from basic maintenance to ongoing development partnerships, plus emergency response, scheduled maintenance windows, and proactive monitoring. We also deliver training, documentation, and knowledge transfer so your team can manage parts of the product internally. Our goal is to keep your digital product secure, fast, and aligned with your evolving business needs.",
|
||
},
|
||
];
|
||
|
||
return (
|
||
<section className="py-32">
|
||
<div className="container mx-auto px-6 lg:px-8">
|
||
<motion.div
|
||
initial={{ opacity: 0, y: 30 }}
|
||
whileInView={{ opacity: 1, y: 0 }}
|
||
transition={{ duration: 0.8 }}
|
||
viewport={{ once: true }}
|
||
className="text-center mb-20"
|
||
>
|
||
<h2 className="text-4xl lg:text-5xl font-semibold text-foreground mb-6">
|
||
Frequently Asked Questions
|
||
</h2>
|
||
</motion.div>
|
||
|
||
<motion.div
|
||
initial={{ opacity: 0, y: 40 }}
|
||
whileInView={{ opacity: 1, y: 0 }}
|
||
transition={{ duration: 0.8, delay: 0.2 }}
|
||
viewport={{ once: true }}
|
||
className="max-w-4xl mx-auto"
|
||
>
|
||
<Accordion type="single" collapsible className="space-y-8">
|
||
{faqs.map((faq, index) => (
|
||
<AccordionItem
|
||
key={index}
|
||
value={`item-${index}`}
|
||
className="bg-card/20 backdrop-blur-md rounded-2xl border border-white/10 px-10 shadow-lg"
|
||
>
|
||
<AccordionTrigger className="text-left hover:no-underline py-10 text-xl">
|
||
<span className="font-semibold text-foreground">
|
||
{faq.question}
|
||
</span>
|
||
</AccordionTrigger>
|
||
<AccordionContent className="text-muted-foreground pb-10 text-lg leading-relaxed">
|
||
{faq.answer}
|
||
</AccordionContent>
|
||
</AccordionItem>
|
||
))}
|
||
</Accordion>
|
||
</motion.div>
|
||
</div>
|
||
</section>
|
||
);
|
||
};
|
||
|
||
// Final CTA Section
|
||
const DigitalProductFinalCTA = () => {
|
||
const navigate = useNavigate();
|
||
return (
|
||
<section className="py-20 relative overflow-hidden bg-black">
|
||
<div className="container mx-auto px-6 lg:px-8 relative z-10">
|
||
<motion.div
|
||
initial={{ opacity: 0, y: 50 }}
|
||
whileInView={{ opacity: 1, y: 0 }}
|
||
transition={{ duration: 0.8 }}
|
||
viewport={{ once: true }}
|
||
className="text-center max-w-4xl mx-auto"
|
||
>
|
||
<motion.div
|
||
initial={{ opacity: 0, y: 20 }}
|
||
whileInView={{ opacity: 1, y: 0 }}
|
||
transition={{ duration: 0.6 }}
|
||
viewport={{ once: true }}
|
||
className="mb-8"
|
||
>
|
||
<div className="inline-block p-[2px] rounded-full bg-gradient-to-r from-accent via-blue-500 to-green-500">
|
||
<div className="bg-black rounded-full px-6 py-3 flex items-center gap-2">
|
||
<Rocket className="w-5 h-5 text-white" />
|
||
<span className="text-white text-base font-medium">
|
||
Digital Product Excellence
|
||
</span>
|
||
</div>
|
||
</div>
|
||
</motion.div>
|
||
|
||
<h2 className="text-4xl lg:text-5xl font-semibold text-white mb-6 leading-tight">
|
||
Innovate, Design, Develop:{" "}
|
||
<span className="text-accent">Partner with WDI</span>
|
||
</h2>
|
||
|
||
<motion.p
|
||
initial={{ opacity: 0, y: 20 }}
|
||
whileInView={{ opacity: 1, y: 0 }}
|
||
transition={{ duration: 0.8, delay: 0.3 }}
|
||
viewport={{ once: true }}
|
||
className="text-xl text-gray-300 mb-12 max-w-2xl mx-auto leading-relaxed"
|
||
>
|
||
From groundbreaking concepts to polished, high‑performing products,
|
||
WDI is your trusted partner for digital product development
|
||
excellence.
|
||
</motion.p>
|
||
|
||
<motion.div
|
||
initial={{ opacity: 0, y: 40 }}
|
||
whileInView={{ opacity: 1, y: 0 }}
|
||
transition={{ duration: 0.8, delay: 0.4 }}
|
||
viewport={{ once: true }}
|
||
className="space-y-8"
|
||
>
|
||
<ShimmerButton
|
||
className="px-12 py-6 text-xl rounded-2xl shadow-2xl hover:shadow-accent/25"
|
||
onClick={() => navigate("/start-a-project")}
|
||
>
|
||
<div className="inline-flex items-center gap-3">
|
||
<Calendar className="w-6 h-6 flex-shrink-0" />
|
||
<span>Book Your Discovery Call</span>
|
||
</div>
|
||
</ShimmerButton>
|
||
|
||
<p className="text-gray-400 text-sm">
|
||
Strategy • Design • Development • Launch • Support
|
||
</p>
|
||
</motion.div>
|
||
</motion.div>
|
||
</div>
|
||
|
||
{/* Background Decorative Elements */}
|
||
<div className="absolute top-0 left-0 w-full h-full pointer-events-none overflow-hidden">
|
||
<div className="absolute top-20 left-20 w-60 h-60 bg-accent/5 rounded-full blur-3xl"></div>
|
||
<div className="absolute bottom-20 right-20 w-60 h-60 bg-blue-500/5 rounded-full blur-3xl"></div>
|
||
<div className="absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2 w-80 h-80 bg-green-500/3 rounded-full blur-3xl"></div>
|
||
</div>
|
||
</section>
|
||
);
|
||
};
|
||
|
||
// Main Digital Product Development Page
|
||
export const DigitalProductDevelopment = () => {
|
||
return (
|
||
<div className="dark min-h-screen">
|
||
{/* <Navigation /> */}
|
||
|
||
{/* Hero Section */}
|
||
<section className="bg-black">
|
||
<DigitalProductDevelopmentHero />
|
||
</section>
|
||
|
||
{/* Challenge */}
|
||
<section className="bg-background">
|
||
<DigitalProductChallenge />
|
||
</section>
|
||
|
||
{/* What's Included */}
|
||
<section className="bg-card">
|
||
<DigitalProductIncludes />
|
||
</section>
|
||
|
||
{/* Benefits */}
|
||
<section className="bg-background">
|
||
<DigitalProductBenefits />
|
||
</section>
|
||
|
||
{/* Process */}
|
||
<section className="bg-card">
|
||
<DigitalProductProcess />
|
||
</section>
|
||
|
||
{/* Target Audience */}
|
||
<section className="bg-background">
|
||
<DigitalProductAudience />
|
||
</section>
|
||
|
||
{/* Case Studies */}
|
||
<section className="bg-card">
|
||
<DigitalProductCaseStudies />
|
||
</section>
|
||
|
||
{/* Mid-Page CTA */}
|
||
<section className="bg-background">
|
||
<DigitalProductInlineCTA />
|
||
</section>
|
||
|
||
{/* FAQs */}
|
||
<section className="bg-card">
|
||
<DigitalProductFAQs />
|
||
</section>
|
||
|
||
{/* Final CTA */}
|
||
<section className="bg-background">
|
||
<DigitalProductFinalCTA />
|
||
</section>
|
||
|
||
{/* Footer */}
|
||
<section className="bg-card">{/* <Footer /> */}</section>
|
||
</div>
|
||
);
|
||
};
|