Glassmorphism Minimal Metrics

1"use client";
2 
3import { Button } from "@base-ui/react/button";
4import { motion, type Variants } from "framer-motion";
5import { ArrowUpRight, Users, Zap } from "lucide-react";
6 
7const metrics = [
8  {
9    label: "Activated teams",
10    value: "1.2k",
11    delta: "+18%",
12    description: "teams shipping faster",
13  },
14  {
15    label: "Daily automations",
16    value: "58",
17    delta: "+42%",
18    description: "manual tasks replaced",
19  },
20  {
21    label: "Customer NPS",
22    value: "71",
23    delta: "+9",
24    description: "in just three sprints",
25  },
26  {
27    label: "Launch lead time",
28    value: "6d",
29    delta: "-3d",
30    description: "from concept to production",
31  },
32];
33 
34const fadeUp: Variants = {
35  hidden: { opacity: 0, y: 16 },
36  show: { opacity: 1, y: 0, transition: { duration: 0.5, ease: "easeOut" } },
37};
38 
39export function GlassmorphismMinimalMetricsBlockBaseui() {
40  return (
41    <section className="relative overflow-hidden px-6 py-24 lg:py-32">
42      <div className="absolute inset-0 -z-10">
43        <div className="absolute left-0 top-0 h-[380px] w-[380px] rounded-full bg-foreground/[0.03] blur-[120px]" />
44        <div className="absolute right-0 top-1/2 h-[420px] w-[420px] -translate-y-1/2 rounded-full bg-foreground/[0.025] blur-[140px]" />
45      </div>
46 
47      <div className="mx-auto max-w-6xl space-y-12">
48        <motion.div
49          variants={fadeUp}
50          initial="hidden"
51          whileInView="show"
52          viewport={{ once: true, amount: 0.3 }}
53          className="mx-auto max-w-3xl text-center"
54        >
55          <span className="mb-4 inline-flex items-center gap-2 rounded-full border border-border/50 bg-background/55 px-4 py-1.5 text-xs uppercase tracking-[0.2em] text-foreground/70 backdrop-blur">
56            <Zap className="h-3.5 w-3.5" />
57            realtime insights
58          </span>
59          <h2 className="text-4xl font-semibold tracking-tight text-foreground md:text-5xl">
60            A snapshot of momentum that refuses to clutter the dashboard
61          </h2>
62          <p className="mt-5 text-base leading-relaxed text-foreground/70 md:text-lg">
63            Glassy panels surface just the signal, Highlighting the metrics that
64            matter while the rest stays gracefully out of the way.
65          </p>
66        </motion.div>
67 
68        <motion.div
69          initial="hidden"
70          whileInView="show"
71          viewport={{ once: true, amount: 0.2 }}
72          transition={{ staggerChildren: 0.08 }}
73// … truncated