Glassmorphism Minimal Metrics

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