Bento Vertical Demo

1import {
2  BellIcon,
3  CalendarIcon,
4  FileTextIcon,
5  GlobeIcon,
6  InputIcon,
7} from "@radix-ui/react-icons"
8 
9import { BentoCard, BentoGrid } from "@/registry/magicui/bento-grid"
10 
11const features = [
12  {
13    Icon: FileTextIcon,
14    name: "Save your files",
15    description: "We automatically save your files as you type.",
16    href: "/",
17    cta: "Learn more",
18    background: (
19      <img alt="" className="absolute -top-20 -right-20 opacity-60" />
20    ),
21    className: "lg:row-start-1 lg:row-end-4 lg:col-start-2 lg:col-end-3",
22  },
23  {
24    Icon: InputIcon,
25    name: "Full text search",
26    description: "Search through all your files in one place.",
27    href: "/",
28    cta: "Learn more",
29    background: (
30      <img alt="" className="absolute -top-20 -right-20 opacity-60" />
31    ),
32    className: "lg:col-start-1 lg:col-end-2 lg:row-start-1 lg:row-end-3",
33  },
34  {
35    Icon: GlobeIcon,
36    name: "Multilingual",
37    description: "Supports 100+ languages and counting.",
38    href: "/",
39    cta: "Learn more",
40    background: (
41      <img alt="" className="absolute -top-20 -right-20 opacity-60" />
42    ),
43    className: "lg:col-start-1 lg:col-end-2 lg:row-start-3 lg:row-end-4",
44  },
45  {
46    Icon: CalendarIcon,
47    name: "Calendar",
48    description: "Use the calendar to filter your files by date.",
49    href: "/",
50    cta: "Learn more",
51    background: (
52      <img alt="" className="absolute -top-20 -right-20 opacity-60" />
53    ),
54    className: "lg:col-start-3 lg:col-end-3 lg:row-start-1 lg:row-end-2",
55  },
56  {
57    Icon: BellIcon,
58    name: "Notifications",
59    description:
60      "Get notified when someone shares a file or mentions you in a comment.",
61    href: "/",
62    cta: "Learn more",
63    background: (
64      <img alt="" className="absolute -top-20 -right-20 opacity-60" />
65    ),
66    className: "lg:col-start-3 lg:col-end-3 lg:row-start-2 lg:row-end-4",
67  },
68]
69 
70export default function BentoDemo() {
71  return (
72    <BentoGrid className="lg:grid-rows-3">
73      {features.map((feature) => (
74        <BentoCard key={feature.name} {...feature} />
75      ))}
76    </BentoGrid>
77  )
78}