98 lines
2.9 KiB
TypeScript
98 lines
2.9 KiB
TypeScript
"use client";
|
|
|
|
import { Badge, Card } from "ikoncomponents";
|
|
import { CheckCircle2, GitBranch, CalendarDays } from "lucide-react";
|
|
|
|
const methodologyData = [
|
|
{
|
|
title: "Agile & Scrum",
|
|
description:
|
|
"Sprint planning, velocity tracking, and automated burndown charts.",
|
|
icon: GitBranch,
|
|
iconColor: "text-indigo-400",
|
|
iconBg: "bg-indigo-500/10",
|
|
features: [
|
|
"Kanban Boards",
|
|
"Sprint Backlogs",
|
|
"Velocity Metrics",
|
|
"WIP Limits",
|
|
],
|
|
},
|
|
{
|
|
title: "Waterfall & Gantt",
|
|
description: "Dynamic Gantt charts with drag-and-drop dependency mapping.",
|
|
icon: CalendarDays,
|
|
iconColor: "text-blue-400",
|
|
iconBg: "bg-blue-500/10",
|
|
features: ["Timeline Views", "Dependencies", "Milestones", "Critical Path"],
|
|
},
|
|
];
|
|
|
|
export function MethodologySection() {
|
|
return (
|
|
<section className="py-12">
|
|
<div className="container mx-auto px-4">
|
|
{/* Header */}
|
|
<div className="text-center space-y-4 mb-12">
|
|
<Badge variant="outline" className="border px-4 py-1">
|
|
Flexible Workflows
|
|
</Badge>
|
|
|
|
<h2 className="text-3xl md:text-4xl lg:text-5xl font-bold tracking-tight">
|
|
Your Methodology, Your Way
|
|
</h2>
|
|
|
|
<p className="text-gray-400 max-w-2xl mx-auto text-lg">
|
|
Support diverse team workflows across Agile and Waterfall in one
|
|
unified interface.
|
|
</p>
|
|
</div>
|
|
|
|
{/* Cards Grid */}
|
|
<div className="grid lg:grid-cols-2 gap-6 max-w-7xl mx-auto">
|
|
{methodologyData.map((item, idx) => (
|
|
<Card
|
|
key={idx}
|
|
className="p-6 rounded-2xl hover:border-white/10 transition-all"
|
|
>
|
|
{/* Top Section */}
|
|
<div className="flex items-start gap-5 mb-6">
|
|
<div className={`p-4 rounded-xl ${item.iconBg}`}>
|
|
<item.icon className={item.iconColor} size={28} />
|
|
</div>
|
|
|
|
<div>
|
|
<h3 className="text-xl lg:text-2xl font-bold mb-1">
|
|
{item.title}
|
|
</h3>
|
|
<p className="text-gray-400 leading-relaxed">
|
|
{item.description}
|
|
</p>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Features */}
|
|
<div className="grid sm:grid-cols-2 gap-y-3 gap-x-4">
|
|
{item.features.map((feature) => (
|
|
<div
|
|
key={feature}
|
|
className="flex items-center gap-3"
|
|
>
|
|
<CheckCircle2
|
|
className="text-emerald-500 shrink-0"
|
|
size={18}
|
|
/>
|
|
<span className="text-sm font-medium">
|
|
{feature}
|
|
</span>
|
|
</div>
|
|
))}
|
|
</div>
|
|
</Card>
|
|
))}
|
|
</div>
|
|
</div>
|
|
</section>
|
|
);
|
|
}
|