first commit

frontend/app/home/components/FeaturesSection.tsx

@@ -0,0 +1,210 @@
+"use client";
+import { Badge, Card } from "ikoncomponents";
+import {
+  Zap,
+  Users,
+  BarChart3,
+  FileText,
+  Layout,
+  Settings2,
+  Lock,
+  FolderKanban,
+  AlertTriangle,
+  RotateCcw,
+  Binary,
+  Link2,
+  Shield,
+  Brain,
+  TrendingUp,
+  Calendar,
+} from "lucide-react";
+
+const features = [
+  {
+    title: "AI Health Scores",
+    desc: "Real-time project health monitoring powered by machine learning. Predict risks before they happen.",
+    icon: Brain,
+    bg: "bg-purple-600",
+  },
+  {
+    title: "Predictive Analytics",
+    desc: "Forecast completion dates with confidence percentages. Know your slippage risk in advance.",
+    icon: TrendingUp,
+    bg: "bg-indigo-600",
+  },
+  {
+    title: "AI Assessment Tool",
+    desc: "LLM-powered project planning wizard generating BRD, SRS, timeline, budget breakdown, and risk identification.",
+    icon: Zap,
+    bg: "bg-blue-600",
+  },
+  {
+    title: "Project Management",
+    desc: "Complete project lifecycle management with Kanban boards, task tracking, and team collaboration.",
+    icon: Layout,
+    bg: "bg-cyan-600",
+  },
+  {
+    title: "Task Management",
+    desc: "Create, assign, and track tasks with priorities, story points, and sprint integration.",
+    icon: Settings2,
+    bg: "bg-blue-600",
+  },
+  {
+    title: "Sprint Planning",
+    desc: "Sprint velocity tracking, backlog grooming, and automated burndown charts for Agile teams..",
+    icon: Calendar,
+    bg: "bg-sky-600",
+  },
+  {
+    title: "Analytics Dashboard",
+    desc: "Task distribution charts, project metrics, and financial analytics in one unified view.",
+    icon: BarChart3,
+    bg: "bg-emerald-600",
+  },
+  {
+    title: "Reports & Downloads",
+    desc: "Generate downloadable reports filtered by time frame, projects, resources, and finances - export as CSV or PDF.",
+    icon: FileText,
+    bg: "bg-green-600",
+  },
+  {
+    title: "Resource Management",
+    desc: "Full team member lifecycle with CRUD, CSV bulk import, onboard/offboard workflow, and FTE calculation.",
+    icon: Users,
+    bg: "bg-orange-600",
+  },
+  {
+    title: "Project Access Control",
+    desc: "Request, grant, modify, and revoke resource access to projects with approval workflows.",
+    icon: Lock,
+    bg: "bg-amber-600",
+  },
+  {
+    title: "Portfolio Management",
+    desc: "Department-level project grouping for strategic oversight and portfolio performance tracking.",
+    icon: FolderKanban,
+    bg: "bg-rose-600",
+  },
+  {
+    title: "Risk Management",
+    desc: "Risk register with probability/impact scoring, severity levels, and mitigation tracking.",
+    icon: AlertTriangle,
+    bg: "bg-pink-600",
+  },
+  {
+    title: "Change Management",
+    desc: "Variation orders with approval workflow, budget impact tracking, and schedule adjustments.",
+    icon: RotateCcw,
+    bg: "bg-pink-600",
+  },
+  {
+    title: "No-Code Automation",
+    desc: "Create powerful If/Then triggers without writing code. Automate repetitive tasks instantly.",
+    icon: Binary,
+    bg: "bg-violet-600",
+  },
+  {
+    title: "External Integrations",
+    desc: "Connect to HRMS, CRM, ERP systems via REST API, GraphQL, webhooks, or database probes.",
+    icon: Link2,
+    bg: "bg-indigo-600",
+  },
+  {
+    title: "Enterprise Security",
+    desc: "Role-based access control, session management, and secure authentication for 8 stakeholder types.",
+    icon: Shield,
+    bg: "bg-orange-600",
+  },
+];
+
+const categories = [
+  {
+    label: "AI-Powered",
+    dot: "bg-fuchsia-500",
+  },
+  {
+    label: "Core Features",
+    dot: "bg-cyan-500",
+  },
+  {
+    label: "Analytics",
+    dot: "bg-emerald-500",
+  },
+  {
+    label: "Resources",
+    dot: "bg-orange-500",
+  },
+  {
+    label: "Management",
+    dot: "bg-sky-500",
+  },
+  {
+    label: "Automation",
+    dot: "bg-violet-500",
+  },
+  {
+    label: "Security",
+    dot: "bg-orange-500",
+  },
+] as const;
+
+export function FeaturesSection() {
+  return (
+    <section className="py-10 px-4 sm:px-6">
+      <div className="max-w-7xl mx-auto">
+        {/* Header */}
+        <div className="text-center space-y-4 mb-10">
+          <Badge variant="outline" className="border px-4 py-1">
+            Complete Platform
+          </Badge>
+
+          <h2 className="text-3xl sm:text-4xl md:text-5xl font-bold tracking-tight">
+            Everything You Need to Succeed
+          </h2>
+
+          <p className="text-gray-400 max-w-2xl mx-auto text-base sm:text-lg">
+            A comprehensive suite of 16 powerful features designed for modern
+            project management.
+          </p>
+        </div>
+
+        {/* Categories */}
+        <div className="flex flex-wrap justify-center gap-3 mb-8">
+          {categories.map((cat) => (
+            <button
+              key={cat.label}
+              className="px-4 py-1.5 rounded-full text-xs font-medium border border-white/10
+              hover:bg-white/5 transition-colors flex items-center gap-2"
+            >
+              <span className={`w-1.5 h-1.5 rounded-full ${cat.dot}`} />
+              {cat.label}
+            </button>
+          ))}
+        </div>
+
+        {/* Features Grid */}
+        <div className="grid sm:grid-cols-2 lg:grid-cols-4 gap-4">
+          {features.map((feature, idx) => (
+            <Card
+              key={idx}
+              className="p-4 hover:bg-white/10 transition-all group"
+            >
+              <div
+                className={`w-10 h-10 rounded-lg ${feature.bg} flex items-center justify-center group-hover:scale-105 transition-transform`}
+              >
+                <feature.icon size={20} />
+              </div>
+
+              <h4 className="font-semibold">{feature.title}</h4>
+
+              <p className="text-gray-500 text-sm leading-relaxed">
+                {feature.desc}
+              </p>
+            </Card>
+          ))}
+        </div>
+      </div>
+    </section>
+  );
+}