extended-34

1<script setup lang="ts">
2import { cn } from "@/lib/utils";
3import { Card, CardContent } from "@/registry/default/ui/card";
4import {
5  LucideArrowRight,
6  LucideChartNoAxesCombined,
7  LucideTrendingUp,
8  LucideUsers,
9} from "lucide-vue-next";
10 
11const cards = [
12  {
13    color: "bg-blue-600",
14    icon: LucideChartNoAxesCombined,
15    value: "27.3%",
16    title: "NPS Improvement",
17    desc: "Our new onboarding flow increased Net Promoter Score by 27.3% in Q2.",
18    cta: "Read full story",
19  },
20  {
21    color: "bg-emerald-600",
22    icon: LucideUsers,
23    value: "8,200",
24    title: "Active Users",
25    desc: "Highest monthly active users since launch. Engagement up 12% MoM.",
26    cta: "See user insights",
27  },
28  {
29    color: "bg-fuchsia-700",
30    icon: LucideTrendingUp,
31    value: "$1.4M",
32    title: "ARR Growth",
33    desc: "Annual recurring revenue grew by $1.4M in the last quarter.",
34    cta: "View ARR breakdown",
35  },
36];
37</script>
38 
39<template>
40  <div class="*:not-first:mt-2">
41    <div class="@container w-full grow">
42      <div class="grid w-full grid-cols-1 gap-8 @3xl:grid-cols-3">
43        <Card
44          v-for="(card, i) in cards"
45          :key="i"
46          :class="cn('overflow-hidden rounded-2xl border-0 p-0 shadow-lg', card.color)"
47        >
48          <CardContent class="relative flex flex-col justify-end overflow-hidden px-0 py-6 pb-0">
49            <div class="mb-3.5 px-6">
50              <component :is="card.icon" class="size-8 text-white/60" />
51            </div>
52 
53            <div class="flex flex-1 flex-col items-start justify-center px-6">
54              <div class="mb-6 text-4xl font-bold text-white">
55                {{ card.value }}
56              </div>
57              <div class="mb-1 text-lg font-semibold text-white">
58                {{ card.title }}
59              </div>
60              <div class="mb-2 text-sm text-white/80">{{ card.desc }}</div>
61            </div>
62 
63            <a
64              href="#"
65              class="group/card mt-6 flex w-full items-center justify-between bg-black/90 px-6 py-4 dark:bg-zinc-800"
66            >
67              <span class="text-sm font-medium text-white">{{ card.cta }}</span>
68              <LucideArrowRight
69                class="h-5 w-5 text-white transition-transform duration-300 group-hover/card:translate-x-1"
70              />
71            </a>
72          </CardContent>
73        </Card>
74      </div>
75    </div>
76    <p class="text-muted-foreground mt-2 text-xs" role="region" aria-live="polite">
77// … truncated