1404 lines
57 KiB
TypeScript
1404 lines
57 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 { navigateTo } from "@/App";
|
||
import { Helmet } from "react-helmet-async";
|
||
|
||
// Digital Product Development Hero Section
|
||
const DigitalProductDevelopmentHero = () => {
|
||
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.
|
||
</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={() => navigateTo("/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>
|
||
</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>
|
||
</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>
|
||
</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>
|
||
</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>
|
||
</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 = () => {
|
||
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 roadmap for success.
|
||
</p>
|
||
|
||
<ShimmerButton
|
||
className="text-xl px-10 py-5 rounded-2xl shadow-lg hover:shadow-xl"
|
||
onClick={() => navigateTo("/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 based on project complexity, but generally ranges from 3-9 months for most digital products. A simple MVP can be delivered in 6-12 weeks, while complex enterprise applications may take 6-12 months. Our 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 2 weeks, so you can see progress and provide feedback throughout the development process. We'll provide a detailed timeline during our initial consultation based on your specific requirements.",
|
||
},
|
||
{
|
||
question:
|
||
"How do you ensure user feedback is incorporated into the design?",
|
||
answer:
|
||
"User feedback is central to our design process. We incorporate it through: User research and persona development at the start, interactive prototypes for early validation, usability testing sessions with real users, A/B testing for design decisions, and continuous feedback loops throughout development. We conduct user interviews, surveys, and testing sessions at key milestones. Our design team creates clickable prototypes that allow stakeholders and users to experience the product before development begins. We also implement analytics and feedback systems in the live product to gather ongoing user insights. Regular design reviews ensure user feedback drives iterations and improvements throughout the project lifecycle.",
|
||
},
|
||
{
|
||
question:
|
||
"What technologies do you specialize in for product development?",
|
||
answer:
|
||
"We specialize in modern, scalable technologies including: Frontend - React, Next.js, Vue.js, Angular for web; React Native, Flutter for mobile. Backend - Node.js, Python (Django/Flask), .NET, Java, PHP. Databases - PostgreSQL, MongoDB, MySQL, Redis. Cloud - AWS, Google Cloud, Azure with containerization using Docker and Kubernetes. We also work with headless CMS solutions, API integrations, payment gateways, and emerging technologies like AI/ML integration. Our technology choices are always driven by your specific requirements, scalability needs, and long-term maintenance considerations. We'll recommend the best tech stack during our discovery phase based on your project goals and constraints.",
|
||
},
|
||
{
|
||
question: "Do you offer post-launch maintenance and support?",
|
||
answer:
|
||
"Yes, we provide comprehensive post-launch support including: Technical maintenance (bug fixes, security updates, performance optimization), feature enhancements and new functionality development, 24/7 monitoring and support, regular backups and security audits, analytics and performance reporting, and user support integration. Our support packages range from basic maintenance to full ongoing development partnerships. We offer different service levels including emergency support, planned maintenance windows, and proactive monitoring. We also provide training for your team, documentation, and knowledge transfer to ensure you can manage aspects of the product internally if desired. Our goal is to ensure your product remains secure, performant, and continues to evolve with your 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 = () => {
|
||
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 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={() => navigateTo("/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>
|
||
);
|
||
};
|