96 lines
3.3 KiB
TypeScript
96 lines
3.3 KiB
TypeScript
"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>
|
|
);
|
|
}
|