init

thirdeye/dashboard/app/components/InsightHero.tsx

@@ -0,0 +1,121 @@
+export default function InsightHero() {
+  return (
+    <div className="glass rounded-2xl border border-white/5 p-8 relative overflow-hidden group animate-fade-in-scale delay-200">
+      <div className="absolute top-0 right-0 p-8 opacity-10 blur-xl group-hover:opacity-20 transition-opacity duration-700">
+        {/* This div seems to be a placeholder or an incomplete instruction.
+            The content '8BFA", boxShadow: "0 0 15px rgba(167, 139, 250, 0.08)", }'
+            is not valid JSX content. Assuming it was meant to be part of a style
+            or a class, but without clear instruction, it's left as an empty div
+            to maintain syntactic correctness. */}
+      </div>
+      <div className="p-10 grid md:grid-cols-3 gap-10 relative z-10">
+        {/* Left: main content */}
+        <div className="md:col-span-2 space-y-6">
+          <div className="flex items-center gap-4">
+            <span
+              className="px-3 py-1 text-[10px] font-bold tracking-[0.1em] rounded-full"
+              style={{
+                color: "#A78BFA",
+                backgroundColor: "rgba(167,139,250,0.2)",
+                border: "1px solid rgba(167,139,250,0.3)",
+              }}
+            >
+              SYSTEM_ALERT
+            </span>
+            <span className="text-zinc-400 text-[11px] uppercase tracking-widest font-semibold">
+              Cross-Group Intelligence Analysis
+            </span>
+          </div>
+
+          <h2 className="text-3xl font-bold tracking-tight text-white leading-tight">
+            Discrepancy in Strategy Alignment: Product vs Engineering
+          </h2>
+
+          <p className="text-zinc-300 text-[15px] leading-relaxed max-w-2xl font-light">
+            Insight explanation: Discrepancy in Q3 roadmap priorities identified across 4
+            cross-functional meetings. Product prioritizes feature velocity, while Engineering
+            focuses on technical debt reduction.
+          </p>
+
+          <div className="flex gap-4">
+            <button className="bg-[#A78BFA]/20 text-[#A78BFA] border border-[#A78BFA]/50 hover:bg-[#A78BFA] hover:text-[#09090B] px-6 py-2 rounded-lg text-sm font-semibold tracking-widest uppercase btn-interactive shadow-[0_0_15px_rgba(167,139,250,0.1)] hover:shadow-[0_0_20px_rgba(167,139,250,0.4)]">
+              Schedule Sync
+            </button>
+            <button className="text-zinc-400 hover:text-zinc-200 bg-white/5 hover:bg-white/10 px-6 py-2 rounded-lg text-sm font-semibold tracking-widest uppercase transition-colors btn-interactive">
+              Dismiss Signal
+            </button>
+          </div>
+        </div>
+
+        {/* Right: alignment bars */}
+        <div className="space-y-6">
+          {/* Group A */}
+          <div
+            className="p-5 rounded-xl border"
+            style={{ backgroundColor: "rgba(0,0,0,0.2)" }}
+          >
+            <div className="flex justify-between items-center mb-3">
+              <span className="text-[11px] text-zinc-300 font-semibold">Group A (Product)</span>
+              <span className="text-xs text-white">72%</span>
+            </div>
+            <div
+              className="h-1.5 rounded-full overflow-hidden"
+              style={{ backgroundColor: "rgba(255,255,255,0.05)" }}
+            >
+              <div
+                className="h-full rounded-full"
+                style={{ width: "72%", backgroundColor: "rgba(167,139,250,0.6)" }}
+              />
+            </div>
+            <p className="text-[10px] text-zinc-400 mt-3 italic font-light tracking-wide">
+              Alignment on Speed-to-Market
+            </p>
+          </div>
+
+          {/* Group B */}
+          <div
+            className="p-5 rounded-xl border"
+            style={{ backgroundColor: "rgba(0,0,0,0.2)" }}
+          >
+            <div className="flex justify-between items-center mb-3">
+              <span className="text-[11px] text-zinc-300 font-semibold">Group B (Eng)</span>
+              <span className="text-xs text-white">84%</span>
+            </div>
+            <div
+              className="h-1.5 rounded-full overflow-hidden"
+              style={{ backgroundColor: "rgba(255,255,255,0.05)" }}
+            >
+              <div className="h-full rounded-full" style={{ width: "84%", backgroundColor: "#A78BFA" }} />
+            </div>
+            <p className="text-[10px] text-zinc-400 mt-3 italic font-light tracking-wide">
+              Focus on System Stability
+            </p>
+          </div>
+
+          {/* Recommendation */}
+          <div
+            className="p-5 rounded-xl"
+            style={{
+              border: "1px solid rgba(167,139,250,0.2)",
+              backgroundColor: "rgba(167,139,250,0.1)",
+            }}
+          >
+            <p className="text-[12px] font-medium leading-relaxed" style={{ color: "#A78BFA" }}>
+              <span className="font-bold">RECOMMENDATION:</span> Schedule immediate alignment session
+              for Q3 priority sync.
+            </p>
+          </div>
+        </div>
+      </div>
+
+      {/* Abstract gradient element */}
+      <div
+        className="absolute right-0 top-0 h-full w-96 pointer-events-none"
+        style={{
+          opacity: 0.1,
+          background: "linear-gradient(to left, #A78BFA, transparent)",
+        }}
+      />
+    </div>
+  );
+}