Marketing Website

frontend/src/marketing/components/MetricsBar.tsx

@@ -0,0 +1,30 @@
+import React from "react";
+
+interface Metric {
+  label: string;
+  value: string;
+}
+
+interface MetricsBarProps {
+  metrics: Metric[];
+}
+
+const MetricsBar: React.FC<MetricsBarProps> = ({ metrics }) => {
+  return (
+    <div className="max-w-5xl mx-auto -mt-12 sm:-mt-16 px-6">
+      <div className="grid grid-cols-1 sm:grid-cols-3 gap-4 rounded-2xl border border-white/10 bg-slate-950/70 backdrop-blur-2xl p-6">
+        {metrics.map((metric) => (
+          <div key={metric.label} className="text-center sm:text-left">
+            <div className="text-3xl font-semibold text-white">{metric.value}</div>
+            <div className="text-sm uppercase tracking-[0.2em] text-white/50 mt-2">
+              {metric.label}
+            </div>
+          </div>
+        ))}
+      </div>
+    </div>
+  );
+};
+
+export default MetricsBar;
+