extended-13

1<script setup lang="ts">
2import { cn } from "@/lib/utils";
3import { Card, CardDescription, CardHeader, CardTitle } from "@/registry/default/ui/card";
4 
5const cards = [
6  {
7    title: "Smart Analytics Dashboard",
8    description:
9      "Get real-time insights with customizable widgets and interactive data visualization tools.",
10    class: "col-span-1 lg:col-span-2",
11    img: "/img/long-jobs.webp",
12  },
13  {
14    title: "Cross-Platform Integration",
15    description:
16      "Seamlessly connect with your favorite tools and services through our extensive API ecosystem.",
17    class: "col-span-1 lg:col-span-2",
18    img: "/img/multi-users.webp",
19  },
20  {
21    title: "Advanced Security Suite",
22    description:
23      "Enterprise-grade security with end-to-end encryption and multi-factor authentication.",
24    class: "col-span-1 lg:col-span-2",
25    img: "/img/tasks-scheduler.webp",
26  },
27  {
28    title: "Automated Workflow Builder",
29    description:
30      "Create custom workflows with drag-and-drop interface and no-code automation tools.",
31    class: "col-span-1 lg:col-span-3",
32    img: "/img/scenarios.webp",
33  },
34  {
35    title: "AI-Powered Insights",
36    description:
37      "Leverage machine learning to predict trends and provide actionable business recommendations.",
38    class: "col-span-1 lg:col-span-3",
39    img: "/img/explore.webp",
40  },
41];
42</script>
43 
44<template>
45  <div class="grid grid-cols-1 gap-4 sm:grid-cols-2 lg:grid-cols-6">
46    <Card v-for="card in cards" :key="card.title" :class="cn('gap-2 p-2', card.class)">
47      <div
48        class="flex h-56 w-full items-center justify-center overflow-hidden rounded-md border bg-stone-900"
49      >
50        <img :src="card.img" alt="card image" class="h-auto w-auto object-cover" />
51      </div>
52      <CardHeader class="p-2">
53        <CardTitle class="text-lg font-semibold">{{ card.title }}</CardTitle>
54        <CardDescription class="text-sm/relaxed">
55          {{ card.description }}
56        </CardDescription>
57      </CardHeader>
58    </Card>
59  </div>
60</template>