WDIPL/Wdipl-react
2
0
Fork 0
Code Issues Pull Requests 2 Actions Packages Projects Releases Wiki Activity

almost all linking done exept underdevelopment pages or not developed

Browse Source
This commit is contained in:
priyanshuvish
2025-07-22 16:14:11 +05:30
parent 5a3ef848f7
commit 07c8fe0b72
80 changed files with 13140 additions and 5842 deletions
Download Patch File Download Diff File Expand all files Collapse all files

418
pages/DigitalProductDevelopment.tsx
View File

@@ -20,16 +20,22 @@ import {
Target,
Users,
X,
Zap
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 {
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";
// Digital Product Development Hero Section
const DigitalProductDevelopmentHero = () => {
@@ -49,7 +55,9 @@ const DigitalProductDevelopmentHero = () => {
animate={{ opacity: 1, y: 0 }}
transition={{ duration: 0.6 }}
>
<span className="text-white/70 text-sm font-medium">Solutions</span>
<span className="text-white/70 text-sm font-medium">
Solutions
</span>
</motion.div>
{/* Main Heading */}
@@ -57,12 +65,13 @@ const DigitalProductDevelopmentHero = () => {
<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.
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 }}
@@ -70,7 +79,10 @@ const DigitalProductDevelopmentHero = () => {
transition={{ duration: 0.8, delay: 0.3 }}
className="flex flex-col sm:flex-row gap-4"
>
<ShimmerButton className="text-lg px-8 py-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>
@@ -88,7 +100,7 @@ const DigitalProductDevelopmentHero = () => {
</Button>
</motion.div>
</motion.div>
{/* Right side with Digital Product Development Visualization */}
<motion.div
initial={{ opacity: 0, x: 50 }}
@@ -128,9 +140,11 @@ const DigitalProductDevelopmentHero = () => {
<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 className="text-gray-400 text-xs">
Product Blueprint
</div>
</div>
{/* Interface Elements */}
<motion.div
initial={{ opacity: 0, y: 20 }}
@@ -144,16 +158,16 @@ const DigitalProductDevelopmentHero = () => {
<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>
@@ -163,7 +177,7 @@ const DigitalProductDevelopmentHero = () => {
</div>
</motion.div>
</div>
{/* Development Team Collaboration */}
<motion.div
initial={{ opacity: 0, y: 20 }}
@@ -174,26 +188,34 @@ const DigitalProductDevelopmentHero = () => {
<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>
<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">
<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" }
{ 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 }}
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">
@@ -202,50 +224,62 @@ const DigitalProductDevelopmentHero = () => {
</motion.div>
))}
</div>
{/* Progress Indicators */}
<div className="space-y-2">
<motion.div
initial={{ opacity: 0, width: 0 }}
animate={{ opacity: 1, width: '85%' }}
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>
<span className="text-blue-300 text-xs">
Design Phase
</span>
</div>
<span className="text-blue-300 text-xs font-mono">85%</span>
<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%' }}
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>
<span className="text-green-300 text-xs">
Development
</span>
</div>
<span className="text-green-300 text-xs font-mono">60%</span>
<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%' }}
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>
<span className="text-orange-300 text-xs">
Testing
</span>
</div>
<span className="text-orange-300 text-xs font-mono">30%</span>
<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 }}
@@ -254,7 +288,9 @@ const DigitalProductDevelopmentHero = () => {
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-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">
@@ -263,7 +299,7 @@ const DigitalProductDevelopmentHero = () => {
</div>
</motion.div>
</motion.div>
{/* Floating Development Elements */}
<motion.div
initial={{ opacity: 0, scale: 0.8 }}
@@ -275,7 +311,7 @@ const DigitalProductDevelopmentHero = () => {
<Code className="w-6 h-6 text-purple-400" />
</div>
</motion.div>
{/* Digital Screens Connection */}
<motion.div
initial={{ opacity: 0 }}
@@ -305,7 +341,7 @@ const DigitalProductDevelopmentHero = () => {
></motion.div>
</div>
</motion.div>
{/* Innovation Badge */}
<motion.div
initial={{ opacity: 0, scale: 0 }}
@@ -321,7 +357,7 @@ const DigitalProductDevelopmentHero = () => {
</div>
</motion.div>
</motion.div>
{/* Product Development Features */}
<motion.div
initial={{ opacity: 0, y: 30 }}
@@ -329,15 +365,24 @@ const DigitalProductDevelopmentHero = () => {
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">
<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">
<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">
<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>
@@ -367,7 +412,7 @@ const DigitalProductChallenge = () => {
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
@@ -382,18 +427,28 @@ const DigitalProductChallenge = () => {
<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>
<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>
<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>
<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>
<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" />
@@ -422,10 +477,17 @@ const DigitalProductChallenge = () => {
<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>
<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>
<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" />
@@ -433,15 +495,21 @@ const DigitalProductChallenge = () => {
</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>
<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>
<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>
<span>
Agile methodology with transparent communication
</span>
</li>
</ul>
</div>
@@ -461,33 +529,38 @@ const DigitalProductIncludes = () => {
{
icon: Search,
title: "Discovery & Strategy",
description: "Market research, user personas, competitive analysis, feature prioritization."
description:
"Market research, user personas, competitive analysis, feature prioritization.",
},
{
icon: Palette,
title: "UI/UX Design",
description: "Wireframing, prototyping, user testing, visual design, interaction 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."
description:
"Front-end, back-end, database architecture, API integrations.",
},
{
icon: Shield,
title: "Quality Assurance",
description: "Rigorous testing, bug fixing, performance optimization."
description: "Rigorous testing, bug fixing, performance optimization.",
},
{
icon: CloudCog,
title: "Deployment & Support",
description: "Cloud deployment, maintenance, updates, analytics integration."
description:
"Cloud deployment, maintenance, updates, analytics integration.",
},
{
icon: Users,
title: "Project Management",
description: "Agile methodologies, transparent communication, roadmap planning."
}
description:
"Agile methodologies, transparent communication, roadmap planning.",
},
];
return (
@@ -504,7 +577,7 @@ const DigitalProductIncludes = () => {
Comprehensive Digital Product Development Services
</h2>
</motion.div>
<motion.div
initial={{ opacity: 0, y: 40 }}
whileInView={{ opacity: 1, y: 0 }}
@@ -552,28 +625,33 @@ const DigitalProductBenefits = () => {
{
icon: Target,
title: "Market-Driven Innovation",
description: "Develop products precisely tailored to user needs and market demands."
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."
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."
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."
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."
}
description:
"Expert guidance and rigorous testing minimize post-launch issues.",
},
];
return (
@@ -590,7 +668,7 @@ const DigitalProductBenefits = () => {
Build Products That Succeed with WDI
</h2>
</motion.div>
<motion.div
initial={{ opacity: 0, y: 40 }}
whileInView={{ opacity: 1, y: 0 }}
@@ -675,34 +753,39 @@ const DigitalProductProcess = () => {
const steps = [
{
title: "Discovery & Planning",
description: "Deep dive into your vision, market, and user needs to define product strategy.",
icon: Search
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: "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
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
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
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
}
icon: RefreshCw,
},
];
return (
@@ -723,12 +806,12 @@ const DigitalProductProcess = () => {
<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}
@@ -736,15 +819,23 @@ const DigitalProductProcess = () => {
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`}
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={`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 className="text-2xl font-bold text-accent">
0{index + 1}
</div>
</div>
<h3 className="text-2xl font-semibold text-white mb-4">
{step.title}
@@ -754,10 +845,10 @@ const DigitalProductProcess = () => {
</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>
);
@@ -775,23 +866,27 @@ const DigitalProductAudience = () => {
{
icon: Rocket,
title: "Startups",
description: "Looking to build their first flagship product and establish market presence."
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."
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."
description:
"Seeking to digitalize internal processes or customer interactions.",
},
{
icon: Lightbulb,
title: "Entrepreneurs",
description: "With innovative ideas needing expert execution and market validation."
}
description:
"With innovative ideas needing expert execution and market validation.",
},
];
return (
@@ -808,7 +903,7 @@ const DigitalProductAudience = () => {
Ideal For...
</h2>
</motion.div>
<motion.div
initial={{ opacity: 0, y: 40 }}
whileInView={{ opacity: 1, y: 0 }}
@@ -856,30 +951,36 @@ const DigitalProductCaseStudies = () => {
{
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",
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"
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",
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"
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",
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"
}
gradient: "from-purple-500/20 to-pink-500/20",
},
];
return (
@@ -896,7 +997,7 @@ const DigitalProductCaseStudies = () => {
Digital Products We've Helped Bring to Life
</h2>
</motion.div>
<motion.div
initial={{ opacity: 0, y: 40 }}
whileInView={{ opacity: 1, y: 0 }}
@@ -925,19 +1026,24 @@ const DigitalProductCaseStudies = () => {
<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">
<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`}>
<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}
@@ -945,7 +1051,7 @@ const DigitalProductCaseStudies = () => {
/>
</div>
</div>
<div className="px-8 pb-6">
<p className="text-gray-300 text-sm leading-relaxed mb-4">
{study.description}
@@ -957,14 +1063,16 @@ const DigitalProductCaseStudies = () => {
</div>
</div>
</div>
<div className="p-8 pt-0 mt-auto">
<Button
variant="ghost"
<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>
<span className="text-sm font-medium">
VIEW FULL CASE STUDY
</span>
<ArrowRight className="w-4 h-4" />
</Button>
</div>
@@ -1000,20 +1108,25 @@ const DigitalProductInlineCTA = () => {
<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>
<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">
<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>
@@ -1030,21 +1143,28 @@ const DigitalProductInlineCTA = () => {
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:
"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:
"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:
"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."
}
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 (
@@ -1061,7 +1181,7 @@ const DigitalProductFAQs = () => {
Frequently Asked Questions
</h2>
</motion.div>
<motion.div
initial={{ opacity: 0, y: 40 }}
whileInView={{ opacity: 1, y: 0 }}
@@ -1071,13 +1191,15 @@ const DigitalProductFAQs = () => {
>
<Accordion type="single" collapsible className="space-y-8">
{faqs.map((faq, index) => (
<AccordionItem
key={index}
value={`item-${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>
<span className="font-semibold text-foreground">
{faq.question}
</span>
</AccordionTrigger>
<AccordionContent className="text-muted-foreground pb-10 text-lg leading-relaxed">
{faq.answer}
@@ -1113,7 +1235,9 @@ const DigitalProductFinalCTA = () => {
<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>
<span className="text-white text-base font-medium">
Digital Product Excellence
</span>
</div>
</div>
</motion.div>
@@ -1122,7 +1246,7 @@ const DigitalProductFinalCTA = () => {
Innovate, Design, Develop:{" "}
<span className="text-accent">Partner with WDI</span>
</h2>
<motion.p
initial={{ opacity: 0, y: 20 }}
whileInView={{ opacity: 1, y: 0 }}
@@ -1130,7 +1254,8 @@ const DigitalProductFinalCTA = () => {
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.
From groundbreaking concepts to polished, high-performing products,
WDI is your trusted partner for digital product excellence.
</motion.p>
<motion.div
@@ -1140,7 +1265,10 @@ const DigitalProductFinalCTA = () => {
viewport={{ once: true }}
className="space-y-8"
>
<ShimmerButton className="px-12 py-6 text-xl rounded-2xl shadow-2xl hover:shadow-accent/25">
<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>
@@ -1169,61 +1297,61 @@ 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>
);
};
};