first commit

frontend/app/home/components/MethodologySection.tsx

@@ -0,0 +1,97 @@
+"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>
+  );
+}