Bento Demo

1import { CalendarIcon, FileTextIcon } from "@radix-ui/react-icons"
2import { BellIcon, Share2Icon } from "lucide-react"
3 
4import { cn } from "@/lib/utils"
5import { Calendar } from "@/components/ui/calendar"
6import AnimatedBeamMultipleOutputDemo from "@/registry/example/animated-beam-multiple-outputs"
7import AnimatedListDemo from "@/registry/example/animated-list-demo"
8import { BentoCard, BentoGrid } from "@/registry/magicui/bento-grid"
9import { Marquee } from "@/registry/magicui/marquee"
10 
11const files = [
12  {
13    name: "bitcoin.pdf",
14    body: "Bitcoin is a cryptocurrency invented in 2008 by an unknown person or group of people using the name Satoshi Nakamoto.",
15  },
16  {
17    name: "finances.xlsx",
18    body: "A spreadsheet or worksheet is a file made of rows and columns that help sort data, arrange data easily, and calculate numerical data.",
19  },
20  {
21    name: "logo.svg",
22    body: "Scalable Vector Graphics is an Extensible Markup Language-based vector image format for two-dimensional graphics with support for interactivity and animation.",
23  },
24  {
25    name: "keys.gpg",
26    body: "GPG keys are used to encrypt and decrypt email, files, directories, and whole disk partitions and to authenticate messages.",
27  },
28  {
29    name: "seed.txt",
30    body: "A seed phrase, seed recovery phrase or backup seed phrase is a list of words which store all the information needed to recover Bitcoin funds on-chain.",
31  },
32]
33 
34const features = [
35  {
36    Icon: FileTextIcon,
37    name: "Save your files",
38    description: "We automatically save your files as you type.",
39    href: "#",
40    cta: "Learn more",
41    className: "col-span-3 lg:col-span-1",
42    background: (
43      <Marquee
44        pauseOnHover
45        className="absolute top-10 [mask-image:linear-gradient(to_top,transparent_40%,#000_100%)] [--duration:20s]"
46      >
47        {files.map((f, idx) => (
48          <figure
49            key={idx}
50            className={cn(
51              "relative w-32 cursor-pointer overflow-hidden rounded-xl border p-4",
52              "border-gray-950/[.1] bg-gray-950/[.01] hover:bg-gray-950/[.05]",
53              "dark:border-gray-50/[.1] dark:bg-gray-50/[.10] dark:hover:bg-gray-50/[.15]",
54              "transform-gpu blur-[1px] transition-all duration-300 ease-out hover:blur-none"
55            )}
56          >
57            <div className="flex flex-row items-center gap-2">
58              <div className="flex flex-col">
59                <figcaption className="text-sm font-medium dark:text-white">
60// … truncated