1import Image from 'next/image'
 2
 3import { Button } from '@/components/Button'
 4import { Heading } from '@/components/Heading'
 5import logoGo from '@/images/logos/go.svg'
 6import logoNode from '@/images/logos/node.svg'
 7import logoPhp from '@/images/logos/php.svg'
 8import logoPython from '@/images/logos/python.svg'
 9import logoRuby from '@/images/logos/ruby.svg'
10
11const libraries = [
12  {
13    href: '#',
14    name: 'PHP',
15    description:
16      'A popular general-purpose scripting language that is especially suited to web development.',
17    logo: logoPhp,
18  },
19  {
20    href: '#',
21    name: 'Ruby',
22    description:
23      'A dynamic, open source programming language with a focus on simplicity and productivity.',
24    logo: logoRuby,
25  },
26  {
27    href: '#',
28    name: 'Node.js',
29    description:
30      'Node.js® is an open-source, cross-platform JavaScript runtime environment.',
31    logo: logoNode,
32  },
33  {
34    href: '#',
35    name: 'Python',
36    description:
37      'Python is a programming language that lets you work quickly and integrate systems more effectively.',
38    logo: logoPython,
39  },
40  {
41    href: '#',
42    name: 'Go',
43    description:
44      'An open-source programming language supported by Google with built-in concurrency.',
45    logo: logoGo,
46  },
47]
48
49export function Libraries() {
50  return (
51    <div className="my-16 xl:max-w-none">
52      <Heading level={2} id="official-libraries">
53        Official libraries
54      </Heading>
55      <div className="not-prose mt-4 grid grid-cols-1 gap-x-6 gap-y-10 border-t border-zinc-900/5 pt-10 dark:border-white/5 sm:grid-cols-2 xl:max-w-none xl:grid-cols-3">
56        {libraries.map((library) => (
57          <div key={library.name} className="flex flex-row-reverse gap-6">
58            <div className="flex-auto">
59              <h3 className="text-sm font-semibold text-zinc-900 dark:text-white">
60                {library.name}
61              </h3>
62              <p className="mt-1 text-sm text-zinc-600 dark:text-zinc-400">
63                {library.description}
64              </p>
65              <p className="mt-4">
66                <Button href={library.href} variant="text" arrow="right">
67                  Read more
68                </Button>
69              </p>
70            </div>
71            <Image
72              src={library.logo}
73              alt=""
74              className="h-12 w-12"
75              unoptimized
76            />
77          </div>
78        ))}
79      </div>
80    </div>
81  )
82}