minimal-card

1import {
2  MinimalCard,
3  MinimalCardDescription,
4  MinimalCardImage,
5  MinimalCardTitle,
6} from "@/components/ui/minimal-card"
7 
8export function MinimalCardDemo() {
9  const cards = [
10    {
11      title: "Sick title",
12      description:
13        "How to design with gestures and motion that feel intuitive and natural.",
14    },
15    {
16      title: "Sick title",
17      description:
18        "How to design with gestures and motion that feel intuitive and natural.",
19    },
20    {
21      title: "Sick title",
22      description:
23        "How to design with gestures and motion that feel intuitive and natural.",
24    },
25    {
26      title: "Sick title",
27      description:
28        "How to design with gestures and motion that feel intuitive and natural.",
29    },
30    {
31      title: "Sick title",
32      description:
33        "How to design with gestures and motion that feel intuitive and natural.",
34    },
35  ]
36  return (
37    <div className="w-full max-w-4xl">
38      <div className="min-h-[500px] p-4  flex flex-col justify-center  rounded-lg space-y-4">
39        <div className="relative grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-2 gap-6">
40          {cards.map((card) => (
41            <MinimalCard>
42              <MinimalCardImage src="/basic-img.png" alt={card.title} />
43              <MinimalCardTitle>{card.title}</MinimalCardTitle>
44              <MinimalCardDescription>
45                {card.description}
46              </MinimalCardDescription>
47            </MinimalCard>
48          ))}
49        </div>
50      </div>
51    </div>
52  )
53}