first commit

frontend/app/home/components/VisibilitySection.tsx

@@ -0,0 +1,95 @@
+"use client";
+
+import { Badge, Card } from "ikoncomponents";
+import { CheckCircle2 } from "lucide-react";
+
+const visibilityPoints = [
+  "AI Health Scores with confidence percentages",
+  "Real-time P/L and budget tracking",
+  "Resource utilization heatmaps",
+  "Portfolio-level performance metrics",
+];
+
+const dashboardStats = [
+  { label: "Active Projects", value: "12" },
+  { label: "Avg Health Score", value: "87%", color: "text-emerald-400" },
+  { label: "Total Budget", value: "$4.2M" },
+  { label: "At Risk", value: "3", color: "text-amber-500" },
+];
+
+export function VisibilitySection() {
+  return (
+    <section className="py-12">
+      <div className="container mx-auto px-4">
+        <div className="grid sm:grid-cols-1 lg:grid-cols-2 gap-12 lg:gap-16 items-center max-w-7xl w-full mx-auto">
+          
+          {/* Left Column */}
+          <div className="space-y-6">
+            <Badge variant="outline" className="px-3 py-1 w-fit border">
+              Executive Dashboard
+            </Badge>
+
+            <div className="space-y-4">
+              <h2 className="text-3xl md:text-4xl lg:text-5xl font-bold tracking-tight">
+                Complete Visibility <br /> at a Glance
+              </h2>
+              <p className="text-gray-400 text-lg max-w-md leading-relaxed">
+                A unified view of project health, financial metrics, and
+                predictive insights designed for strategic decision-making.
+              </p>
+            </div>
+
+            <div className="space-y-3">
+              {visibilityPoints.map((point) => (
+                <div key={point} className="flex items-start gap-3">
+                  <div className="mt-1 flex-shrink-0 w-5 h-5 rounded-full border border-indigo-500/30 flex items-center justify-center">
+                    <CheckCircle2 className="text-indigo-400" size={12} />
+                  </div>
+                  <span className="font-medium">{point}</span>
+                </div>
+              ))}
+            </div>
+          </div>
+
+          {/* Right Column */}
+          <div className="relative">
+            {/* Background glow */}
+            <div className="absolute -inset-6 bg-indigo-500/5 rounded-3xl blur-3xl" />
+
+            <Card className="relative p-6 rounded-2xl shadow-2xl">
+              <div className="flex justify-between items-center mb-6">
+                <h3 className="font-semibold text-lg">
+                  Portfolio Overview
+                </h3>
+                <Badge className="bg-emerald-500/10 text-emerald-400 border-emerald-500/20">
+                  Healthy
+                </Badge>
+              </div>
+
+              <div className="grid sm:grid-cols-2 gap-4">
+                {dashboardStats.map((stat) => (
+                  <div
+                    key={stat.label}
+                    className="border p-4 rounded-xl"
+                  >
+                    <div
+                      className={`text-3xl font-bold mb-1 ${
+                        stat.color ?? ""
+                      }`}
+                    >
+                      {stat.value}
+                    </div>
+                    <div className="text-xs text-gray-500 uppercase tracking-wider font-medium">
+                      {stat.label}
+                    </div>
+                  </div>
+                ))}
+              </div>
+            </Card>
+          </div>
+
+        </div>
+      </div>
+    </section>
+  );
+}