78 lines
2.9 KiB
JavaScript
78 lines
2.9 KiB
JavaScript
import React from "react";
|
|
import {
|
|
ArrowPathIcon,
|
|
CloudArrowUpIcon,
|
|
LockClosedIcon,
|
|
} from "@heroicons/react/20/solid";
|
|
|
|
const systems = [
|
|
{
|
|
name: "Mac",
|
|
description:
|
|
"Commodo nec sagittis tortor mauris sed. Turpis tortor quis scelerisque diam id accumsan nullam tempus. Pulvinar etiam lacus volutpat eu. Phasellus praesent ligula sit faucibus.",
|
|
href: "#",
|
|
icon: CloudArrowUpIcon,
|
|
},
|
|
{
|
|
name: "Windows",
|
|
description:
|
|
"Pellentesque enim a commodo malesuada turpis eleifend risus. Facilisis donec placerat sapien consequat tempor fermentum nibh.",
|
|
href: "#",
|
|
icon: LockClosedIcon,
|
|
},
|
|
{
|
|
name: "Linux",
|
|
description:
|
|
"Pellentesque sit elit congue ante nec amet. Dolor aenean curabitur viverra suspendisse iaculis eget. Nec mollis placerat ultricies euismod ut condimentum.",
|
|
href: "#",
|
|
icon: ArrowPathIcon,
|
|
},
|
|
];
|
|
|
|
export default function HomepageDownloads() {
|
|
return (
|
|
<div className="bg-white dark:bg-gray-900 py-12 sm:py-16">
|
|
<div className="mx-auto max-w-7xl px-6 lg:px-8">
|
|
<div className="mx-auto max-w-2xl lg:text-center">
|
|
<h2 className="text-base font-semibold leading-7 text-indigo-600 dark:text-indigo-400">
|
|
Run AI on any OS
|
|
</h2>
|
|
<p className="mt-2 text-3xl font-bold tracking-tight text-gray-900 dark:text-white sm:text-4xl">
|
|
Downloads
|
|
</p>
|
|
<p className="mt-6 text-lg leading-8 text-gray-600 dark:text-gray-300">
|
|
Jan is compatible with all major operating systems. Download the
|
|
latest stable versions here.
|
|
</p>
|
|
</div>
|
|
<div className="mx-auto mt-16 max-w-2xl sm:mt-20 lg:mt-24 lg:max-w-none">
|
|
<dl className="grid max-w-xl grid-cols-1 gap-x-8 gap-y-16 lg:max-w-none lg:grid-cols-3">
|
|
{systems.map((system) => (
|
|
<div key={system.name} className="flex flex-col">
|
|
<dt className="flex items-center gap-x-3 text-base font-semibold leading-7 text-gray-900 dark: text-white">
|
|
<system.icon
|
|
className="h-5 w-5 flex-none text-indigo-600 dark:text-indigo-400"
|
|
aria-hidden="true"
|
|
/>
|
|
{system.name}
|
|
</dt>
|
|
<dd className="mt-4 flex flex-auto flex-col text-base leading-7 text-gray-600 dark:text-gray-300">
|
|
<p className="flex-auto">{system.description}</p>
|
|
<p className="mt-6">
|
|
<a
|
|
href={system.href}
|
|
className="text-sm font-semibold leading-6 text-indigo-600 dark:text-indigo-400"
|
|
>
|
|
Learn more <span aria-hidden="true">→</span>
|
|
</a>
|
|
</p>
|
|
</dd>
|
|
</div>
|
|
))}
|
|
</dl>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|