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

303
pages/EngagementModels.tsx
View File

@@ -4,34 +4,78 @@ import { Footer } from "../components/Footer";
import { Button } from "../components/ui/button";
import { Badge } from "../components/ui/badge";
import { Card, CardContent } from "../components/ui/card";
import { ArrowRight, DollarSign, Clock, Users, Target, Zap, Shield, CheckCircle, Star } from "lucide-react";
import {
ArrowRight,
DollarSign,
Clock,
Users,
Target,
Zap,
Shield,
CheckCircle,
Star,
} from "lucide-react";
import { navigateTo } from "@/App";
export const EngagementModels = () => {
const models = [
{
icon: DollarSign,
title: "Fixed Price Model",
description: "Ideal for projects with well-defined requirements, scope, and deliverables. We agree on a fixed price and timeline upfront, ensuring budget predictability.",
bestFor: ["MVPs", "Specific feature development", "Clear scope projects", "Smaller applications"],
benefits: ["Predictable costs", "Clearly defined deliverables", "Minimal financial risk"],
color: "from-blue-400 to-blue-600"
description:
"Ideal for projects with well-defined requirements, scope, and deliverables. We agree on a fixed price and timeline upfront, ensuring budget predictability.",
bestFor: [
"MVPs",
"Specific feature development",
"Clear scope projects",
"Smaller applications",
],
benefits: [
"Predictable costs",
"Clearly defined deliverables",
"Minimal financial risk",
],
color: "from-blue-400 to-blue-600",
},
{
icon: Clock,
title: "Time & Material (T&M) Model",
description: "Perfect for projects with evolving requirements, dynamic scope, or long-term development. You pay for the actual time and resources spent, offering maximum flexibility.",
bestFor: ["Complex projects", "Agile development", "Ongoing support", "R&D initiatives"],
benefits: ["High flexibility for changes", "Transparent billing", "Adaptability to market shifts", "Continuous refinement"],
color: "from-green-400 to-green-600"
description:
"Perfect for projects with evolving requirements, dynamic scope, or long-term development. You pay for the actual time and resources spent, offering maximum flexibility.",
bestFor: [
"Complex projects",
"Agile development",
"Ongoing support",
"R&D initiatives",
],
benefits: [
"High flexibility for changes",
"Transparent billing",
"Adaptability to market shifts",
"Continuous refinement",
],
color: "from-green-400 to-green-600",
},
{
icon: Users,
title: "Dedicated Team Model",
description: "Gain a fully integrated team of WDI professionals working exclusively on your project. You have direct control over the team, processes, and project direction, similar to an in-house extension.",
bestFor: ["Long-term projects", "Ongoing product development", "Scaling existing teams", "Building robust, complex solutions"],
benefits: ["Full control", "Seamless integration", "Undivided attention", "Access to diverse skill sets", "Cost-efficiency"],
color: "from-[#E5195E] to-[#FF6B9D]"
}
description:
"Gain a fully integrated team of WDI professionals working exclusively on your project. You have direct control over the team, processes, and project direction, similar to an in-house extension.",
bestFor: [
"Long-term projects",
"Ongoing product development",
"Scaling existing teams",
"Building robust, complex solutions",
],
benefits: [
"Full control",
"Seamless integration",
"Undivided attention",
"Access to diverse skill sets",
"Cost-efficiency",
],
color: "from-[#E5195E] to-[#FF6B9D]",
},
];
const comparisonFeatures = [
@@ -39,84 +83,98 @@ export const EngagementModels = () => {
feature: "Budget Predictability",
fixedPrice: "High",
timeAndMaterial: "Medium",
dedicatedTeam: "Medium-High"
dedicatedTeam: "Medium-High",
},
{
feature: "Flexibility for Changes",
fixedPrice: "Low",
timeAndMaterial: "High",
dedicatedTeam: "High"
dedicatedTeam: "High",
},
{
feature: "Direct Team Control",
fixedPrice: "Low",
timeAndMaterial: "Medium",
dedicatedTeam: "High"
dedicatedTeam: "High",
},
{
feature: "Best for Long-term Projects",
fixedPrice: "Low",
timeAndMaterial: "Medium",
dedicatedTeam: "High"
dedicatedTeam: "High",
},
{
feature: "Quick Start",
fixedPrice: "High",
timeAndMaterial: "Medium",
dedicatedTeam: "Medium"
}
dedicatedTeam: "Medium",
},
];
const testimonials = [
{
quote: "The Time & Material model was perfect for our evolving startup needs. We could adapt quickly while maintaining transparent costs throughout the development process.",
quote:
"The Time & Material model was perfect for our evolving startup needs. We could adapt quickly while maintaining transparent costs throughout the development process.",
author: "Sarah Kim",
role: "Founder, StartupFlow",
rating: 5
rating: 5,
},
{
quote: "Fixed Price model gave us exactly what we needed - predictable costs and clear deliverables for our MVP launch. WDI delivered on time and within budget.",
quote:
"Fixed Price model gave us exactly what we needed - predictable costs and clear deliverables for our MVP launch. WDI delivered on time and within budget.",
author: "Michael Rodriguez",
role: "Product Manager, TechVision",
rating: 5
}
rating: 5,
},
];
return (
<div className="dark min-h-screen bg-background">
<Navigation />
{/* Hero Section */}
<section className="relative pt-24 pb-16 overflow-hidden">
<div className="absolute inset-0 bg-gradient-to-br from-[#E5195E]/10 via-background to-background" />
<div
<div
className="absolute inset-0 opacity-30"
style={{
backgroundImage: `radial-gradient(circle at 1px 1px, rgba(255,255,255,0.15) 1px, transparent 0)`,
backgroundSize: '40px 40px'
backgroundSize: "40px 40px",
}}
/>
<div className="relative container mx-auto px-6 lg:px-8">
<div className="max-w-4xl mx-auto text-center">
<Badge variant="outline" className="mb-6 border-[#E5195E]/20 text-[#E5195E]">
<Badge
variant="outline"
className="mb-6 border-[#E5195E]/20 text-[#E5195E]"
>
Tailored Solutions for Your Business
</Badge>
<h1 className="text-4xl md:text-6xl lg:text-7xl font-bold mb-6 bg-gradient-to-r from-white via-white to-white/80 bg-clip-text text-transparent">
Engagement Models: Tailored Solutions for Your
<span className="bg-gradient-to-r from-[#E5195E] to-[#FF6B9D] bg-clip-text text-transparent"> Project Success</span>
Engagement Models: Tailored Solutions for Your
<span className="bg-gradient-to-r from-[#E5195E] to-[#FF6B9D] bg-clip-text text-transparent">
{" "}
Project Success
</span>
</h1>
<p className="text-lg md:text-xl text-muted-foreground mb-8 max-w-3xl mx-auto leading-relaxed">
Choose the Model That Fits Your Project, Budget, and Goals Perfectly. At WDI, we understand that every project is unique, with distinct requirements and budgetary considerations.
Choose the Model That Fits Your Project, Budget, and Goals
Perfectly. At WDI, we understand that every project is unique,
with distinct requirements and budgetary considerations.
</p>
<div className="flex flex-col sm:flex-row gap-4 justify-center">
<Button size="lg" className="bg-[#E5195E] hover:bg-[#E5195E]/90 text-white">
<Button
size="lg"
className="bg-[#E5195E] hover:bg-[#E5195E]/90 text-white"
onClick={() => navigateTo("/start-a-project")}
>
Let's Discuss Your Project
<ArrowRight className="ml-2 w-4 h-4" />
</Button>
<Button size="lg" variant="outline" className="border-white/20 text-white hover:bg-white/10">
{/* <Button size="lg" variant="outline" className="border-white/20 text-white hover:bg-white/10">
Get a Personalized Proposal
</Button>
</Button> */}
</div>
</div>
</div>
@@ -127,7 +185,10 @@ export const EngagementModels = () => {
<div className="container mx-auto px-6 lg:px-8">
<div className="max-w-4xl mx-auto text-center">
<p className="text-lg text-muted-foreground leading-relaxed">
That's why we offer a range of flexible engagement models designed to provide optimal value, transparency, and control. Whether you have a clearly defined scope or need an agile approach, we have a model to suit your needs.
That's why we offer a range of flexible engagement models designed
to provide optimal value, transparency, and control. Whether you
have a clearly defined scope or need an agile approach, we have a
model to suit your needs.
</p>
</div>
</div>
@@ -141,60 +202,83 @@ export const EngagementModels = () => {
Our Core Engagement Models
</h2>
<p className="text-muted-foreground max-w-2xl mx-auto">
Flexible approaches designed to meet your specific project needs and goals
Flexible approaches designed to meet your specific project needs
and goals
</p>
</div>
<div className="space-y-8">
{models.map((model, index) => (
<Card key={index} className="bg-card/50 border-white/10 hover:border-[#E5195E]/30 transition-all duration-300 group">
<Card
key={index}
className="bg-card/50 border-white/10 hover:border-[#E5195E]/30 transition-all duration-300 group"
>
<CardContent className="p-8">
<div className="grid lg:grid-cols-3 gap-8 items-start">
{/* Model Overview */}
<div className="lg:col-span-2">
<div className="flex items-center gap-4 mb-6">
<div className={`w-12 h-12 rounded-xl bg-gradient-to-br ${model.color} flex items-center justify-center`}>
<div
className={`w-12 h-12 rounded-xl bg-gradient-to-br ${model.color} flex items-center justify-center`}
>
<model.icon className="w-6 h-6 text-white" />
</div>
<h3 className="text-2xl font-bold text-white group-hover:text-[#E5195E] transition-colors duration-300">
{model.title}
</h3>
</div>
<p className="text-muted-foreground mb-6 leading-relaxed">
{model.description}
</p>
<div className="grid md:grid-cols-2 gap-6">
<div>
<h4 className="text-white font-semibold mb-3">Best For:</h4>
<h4 className="text-white font-semibold mb-3">
Best For:
</h4>
<ul className="space-y-2">
{model.bestFor.map((item, itemIndex) => (
<li key={itemIndex} className="flex items-center gap-2">
<li
key={itemIndex}
className="flex items-center gap-2"
>
<CheckCircle className="w-4 h-4 text-[#E5195E] flex-shrink-0" />
<span className="text-muted-foreground text-sm">{item}</span>
<span className="text-muted-foreground text-sm">
{item}
</span>
</li>
))}
</ul>
</div>
<div>
<h4 className="text-white font-semibold mb-3">Benefits:</h4>
<h4 className="text-white font-semibold mb-3">
Benefits:
</h4>
<ul className="space-y-2">
{model.benefits.map((benefit, benefitIndex) => (
<li key={benefitIndex} className="flex items-center gap-2">
<li
key={benefitIndex}
className="flex items-center gap-2"
>
<Target className="w-4 h-4 text-[#E5195E] flex-shrink-0" />
<span className="text-muted-foreground text-sm">{benefit}</span>
<span className="text-muted-foreground text-sm">
{benefit}
</span>
</li>
))}
</ul>
</div>
</div>
</div>
{/* CTA */}
<div className="flex justify-center lg:justify-end">
<Button className="bg-[#E5195E] hover:bg-[#E5195E]/90 text-white">
<Button
className="bg-[#E5195E] hover:bg-[#E5195E]/90 text-white"
onClick={() => navigateTo("/start-a-project")}
>
Learn More
<ArrowRight className="ml-2 w-4 h-4" />
</Button>
@@ -215,10 +299,11 @@ export const EngagementModels = () => {
Model Comparison
</h2>
<p className="text-muted-foreground max-w-2xl mx-auto">
Compare our engagement models to find the perfect fit for your project
Compare our engagement models to find the perfect fit for your
project
</p>
</div>
<div className="max-w-4xl mx-auto">
<Card className="bg-background/50 border-white/10 overflow-hidden">
<CardContent className="p-0">
@@ -226,28 +311,68 @@ export const EngagementModels = () => {
<table className="w-full">
<thead>
<tr className="border-b border-white/10">
<th className="text-left p-6 text-white font-semibold">Feature</th>
<th className="text-center p-6 text-white font-semibold">Fixed Price</th>
<th className="text-center p-6 text-white font-semibold">Time & Material</th>
<th className="text-center p-6 text-white font-semibold">Dedicated Team</th>
<th className="text-left p-6 text-white font-semibold">
Feature
</th>
<th className="text-center p-6 text-white font-semibold">
Fixed Price
</th>
<th className="text-center p-6 text-white font-semibold">
Time & Material
</th>
<th className="text-center p-6 text-white font-semibold">
Dedicated Team
</th>
</tr>
</thead>
<tbody>
{comparisonFeatures.map((feature, index) => (
<tr key={index} className="border-b border-white/5 hover:bg-white/5">
<td className="p-6 text-muted-foreground">{feature.feature}</td>
<tr
key={index}
className="border-b border-white/5 hover:bg-white/5"
>
<td className="p-6 text-muted-foreground">
{feature.feature}
</td>
<td className="p-6 text-center">
<Badge variant="outline" className={`border-blue-500/30 text-blue-400 ${feature.fixedPrice === 'High' ? 'bg-blue-500/10' : feature.fixedPrice === 'Medium' ? 'bg-yellow-500/10' : 'bg-red-500/10'}`}>
<Badge
variant="outline"
className={`border-blue-500/30 text-blue-400 ${
feature.fixedPrice === "High"
? "bg-blue-500/10"
: feature.fixedPrice === "Medium"
? "bg-yellow-500/10"
: "bg-red-500/10"
}`}
>
{feature.fixedPrice}
</Badge>
</td>
<td className="p-6 text-center">
<Badge variant="outline" className={`border-green-500/30 text-green-400 ${feature.timeAndMaterial === 'High' ? 'bg-green-500/10' : feature.timeAndMaterial === 'Medium' ? 'bg-yellow-500/10' : 'bg-red-500/10'}`}>
<Badge
variant="outline"
className={`border-green-500/30 text-green-400 ${
feature.timeAndMaterial === "High"
? "bg-green-500/10"
: feature.timeAndMaterial === "Medium"
? "bg-yellow-500/10"
: "bg-red-500/10"
}`}
>
{feature.timeAndMaterial}
</Badge>
</td>
<td className="p-6 text-center">
<Badge variant="outline" className={`border-[#E5195E]/30 text-[#E5195E] ${feature.dedicatedTeam === 'High' ? 'bg-[#E5195E]/10' : feature.dedicatedTeam.includes('Medium') ? 'bg-yellow-500/10' : 'bg-red-500/10'}`}>
<Badge
variant="outline"
className={`border-[#E5195E]/30 text-[#E5195E] ${
feature.dedicatedTeam === "High"
? "bg-[#E5195E]/10"
: feature.dedicatedTeam.includes("Medium")
? "bg-yellow-500/10"
: "bg-red-500/10"
}`}
>
{feature.dedicatedTeam}
</Badge>
</td>
@@ -270,9 +395,12 @@ export const EngagementModels = () => {
Choosing the Right Model
</h2>
<p className="text-lg text-muted-foreground mb-8 leading-relaxed">
Our experts will consult with you to analyze your project's specific needs, objectives, budget, and desired level of control to recommend the most suitable engagement model for optimal success.
Our experts will consult with you to analyze your project's
specific needs, objectives, budget, and desired level of control
to recommend the most suitable engagement model for optimal
success.
</p>
<Card className="bg-card/50 border-white/10 text-left">
<CardContent className="p-8">
<div className="grid md:grid-cols-3 gap-8">
@@ -280,24 +408,36 @@ export const EngagementModels = () => {
<div className="w-16 h-16 rounded-full bg-gradient-to-br from-blue-400 to-blue-600 flex items-center justify-center mx-auto mb-4">
<Target className="w-8 h-8 text-white" />
</div>
<h3 className="text-white font-semibold mb-2">Project Analysis</h3>
<p className="text-muted-foreground text-sm">We assess your requirements, scope, and timeline</p>
<h3 className="text-white font-semibold mb-2">
Project Analysis
</h3>
<p className="text-muted-foreground text-sm">
We assess your requirements, scope, and timeline
</p>
</div>
<div className="text-center">
<div className="w-16 h-16 rounded-full bg-gradient-to-br from-green-400 to-green-600 flex items-center justify-center mx-auto mb-4">
<Users className="w-8 h-8 text-white" />
</div>
<h3 className="text-white font-semibold mb-2">Expert Consultation</h3>
<p className="text-muted-foreground text-sm">Our team provides personalized recommendations</p>
<h3 className="text-white font-semibold mb-2">
Expert Consultation
</h3>
<p className="text-muted-foreground text-sm">
Our team provides personalized recommendations
</p>
</div>
<div className="text-center">
<div className="w-16 h-16 rounded-full bg-gradient-to-br from-[#E5195E] to-[#FF6B9D] flex items-center justify-center mx-auto mb-4">
<Zap className="w-8 h-8 text-white" />
</div>
<h3 className="text-white font-semibold mb-2">Optimal Success</h3>
<p className="text-muted-foreground text-sm">Achieve your goals with the perfect model</p>
<h3 className="text-white font-semibold mb-2">
Optimal Success
</h3>
<p className="text-muted-foreground text-sm">
Achieve your goals with the perfect model
</p>
</div>
</div>
</CardContent>
@@ -351,14 +491,23 @@ export const EngagementModels = () => {
Ready to Find Your Perfect Model?
</h2>
<p className="text-lg text-muted-foreground mb-8 max-w-2xl mx-auto">
Let our experts help you choose the engagement model that best fits your project needs and goals.
Let our experts help you choose the engagement model that best
fits your project needs and goals.
</p>
<div className="flex flex-col sm:flex-row gap-4 justify-center">
<Button size="lg" className="bg-[#E5195E] hover:bg-[#E5195E]/90 text-white">
<Button
size="lg"
className="bg-[#E5195E] hover:bg-[#E5195E]/90 text-white"
onClick={() => navigateTo("/start-a-project")}
>
Start Your Consultation
<ArrowRight className="ml-2 w-4 h-4" />
</Button>
<Button size="lg" variant="outline" className="border-white/20 text-white hover:bg-white/10">
<Button
size="lg"
variant="outline"
className="border-white/20 text-white hover:bg-white/10"
>
Compare Models
</Button>
</div>
@@ -369,4 +518,4 @@ export const EngagementModels = () => {
<Footer />
</div>
);
};
};