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

Pages 33 to 46

Browse Source
This commit is contained in:
Tejas Patil
2026-04-07 15:12:01 +05:30
parent e61e710fe1
commit e0230929ab
14 changed files with 923 additions and 391 deletions
Download Patch File Download Diff File Expand all files Collapse all files

63
components/DedicatedTeamPricing.tsx
View File

@@ -32,7 +32,7 @@ const pricingTiers: PricingTier[] = [
backendDevs: "Shared",
qaTesters: "Part-time",
leadTime: "< 3 Days",
minEngagement: "1 Month"
minEngagement: "1 Month",
},
{
name: "Medium",
@@ -47,7 +47,7 @@ const pricingTiers: PricingTier[] = [
backendDevs: "Shared",
qaTesters: "Shared",
leadTime: "< 2 Weeks",
minEngagement: "2 Months"
minEngagement: "2 Months",
},
{
name: "Large",
@@ -61,27 +61,27 @@ const pricingTiers: PricingTier[] = [
backendDevs: "Full-time",
qaTesters: "Full-time",
leadTime: "< 4 Weeks",
minEngagement: "3 Months"
}
minEngagement: "3 Months",
},
];
const includedFeatures = [
{
left: "Access to WDI Code Library",
right: "Direct Communication"
right: "Direct Communication",
},
{
left: "Time Zone Overlap: 3 Hours",
right: "Resource Replacement (within 1 week)"
right: "Resource Replacement (within 1 week)",
},
{
left: "No Obligation Trial (conditional)",
right: "IPR & Code Ownership"
right: "IPR & Code Ownership",
},
{
left: "Termination Notice: 1 Month",
right: "Performance Guarantee"
}
right: "Performance Guarantee",
},
];
const comparisonRows = [
@@ -92,14 +92,17 @@ const comparisonRows = [
{ label: "Backend Developers", key: "backendDevs" as keyof PricingTier },
{ label: "QA Testers", key: "qaTesters" as keyof PricingTier },
{ label: "Lead Time to Start", key: "leadTime" as keyof PricingTier },
{ label: "Minimum Engagement Period", key: "minEngagement" as keyof PricingTier }
{
label: "Minimum Engagement Period",
key: "minEngagement" as keyof PricingTier,
},
];
export const DedicatedTeamPricing = () => {
return (
<section className="relative py-20 bg-background overflow-hidden">
<GridPattern strokeDasharray="4 2" />
<div className="relative z-10 container mx-auto px-6 lg:px-8">
{/* Header */}
<motion.div
@@ -116,7 +119,8 @@ export const DedicatedTeamPricing = () => {
</h2>
</div>
<p className="text-muted-foreground text-lg max-w-2xl mx-auto font-manrope">
Scale your development with flexible team structures tailored to your project needs
Scale your AI mobile and web development with flexible team
structures tailored to your project needs.
</p>
</motion.div>
@@ -136,9 +140,9 @@ export const DedicatedTeamPricing = () => {
transition={{ duration: 0.5, delay: index * 0.1 }}
viewport={{ once: true }}
className={`relative bg-card/50 backdrop-blur-sm border rounded-[20px] p-6 transition-all duration-300 ${
tier.isPopular
? 'border-blue-500/50 shadow-xl shadow-blue-500/10 scale-105'
: 'border-border/50 hover:border-accent/30'
tier.isPopular
? "border-blue-500/50 shadow-xl shadow-blue-500/10 scale-105"
: "border-border/50 hover:border-accent/30"
}`}
>
{tier.isPopular && (
@@ -148,7 +152,7 @@ export const DedicatedTeamPricing = () => {
</Badge>
</div>
)}
<div className="text-center mb-6">
<h3 className="text-2xl font-semibold text-foreground mb-2 font-manrope">
{tier.name}
@@ -185,7 +189,10 @@ export const DedicatedTeamPricing = () => {
<tr className="border-b border-border/50 bg-card/50">
<th className="p-6 text-left font-semibold text-foreground font-manrope"></th>
{pricingTiers.map((tier) => (
<th key={tier.name} className="p-6 text-center font-semibold text-foreground font-manrope">
<th
key={tier.name}
className="p-6 text-center font-semibold text-foreground font-manrope"
>
{tier.name}
</th>
))}
@@ -206,13 +213,20 @@ export const DedicatedTeamPricing = () => {
<td className="p-6 font-medium text-muted-foreground font-manrope align-top">
<div className="md:hidden mb-3">{row.label}</div>
<div className="hidden md:block">{row.label}</div>
{/* Mobile: Stack values vertically with tier name */}
<div className="grid grid-cols-1 md:hidden gap-3 mt-3">
{pricingTiers.map((tier) => (
<div key={tier.name} className="flex justify-between items-center bg-card/30 rounded-lg p-3">
<span className="text-sm text-muted-foreground font-manrope">{tier.name}:</span>
<span className="text-foreground font-manrope text-right">{tier[row.key]}</span>
<div
key={tier.name}
className="flex justify-between items-center bg-card/30 rounded-lg p-3"
>
<span className="text-sm text-muted-foreground font-manrope">
{tier.name}:
</span>
<span className="text-foreground font-manrope text-right">
{tier[row.key]}
</span>
</div>
))}
</div>
@@ -220,7 +234,10 @@ export const DedicatedTeamPricing = () => {
{/* Desktop: Show values in columns */}
{pricingTiers.map((tier) => (
<td key={tier.name} className="hidden md:table-cell p-6 text-center text-foreground font-manrope align-top">
<td
key={tier.name}
className="hidden md:table-cell p-6 text-center text-foreground font-manrope align-top"
>
{tier[row.key]}
</td>
))}
@@ -249,7 +266,7 @@ export const DedicatedTeamPricing = () => {
Included in All Plans
</h3>
</div>
<div className="grid md:grid-cols-2 gap-6">
{includedFeatures.map((feature, index) => (
<div key={index} className="space-y-3">