Improve repo tooling (#398)

* add basic git files to root * make server part of monorepo * import promo * import libraries base * import docs * import desktop * move docs and promo
2026-08-24 15:22:05 +10:00 · 2026-04-20 11:44:38 +10:00
parent 5bbe406e4c
commit ff1144e016
177 changed files with 22218 additions and 37822 deletions
@@ -0,0 +1,33 @@
+'use client'
+
+import {
+  motion,
+  useInView,
+  useMotionValue,
+  useSpring,
+  useTransform,
+} from 'framer-motion'
+import { useEffect, useRef } from 'react'
+
+export function AnimatedNumber({
+  start,
+  end,
+  decimals = 0,
+}: {
+  start: number
+  end: number
+  decimals?: number
+}) {
+  let ref = useRef(null)
+  let isInView = useInView(ref, { once: true, amount: 0.5 })
+
+  let value = useMotionValue(start)
+  let spring = useSpring(value, { damping: 30, stiffness: 100 })
+  let display = useTransform(spring, (num) => num.toFixed(decimals))
+
+  useEffect(() => {
+    value.set(isInView ? end : start)
+  }, [start, end, isInView, value])
+
+  return <motion.span ref={ref}>{display}</motion.span>
+}
@@ -0,0 +1,52 @@
+'use client'
+
+import { clsx } from 'clsx'
+import { motion } from 'framer-motion'
+import { Subheading } from './text'
+
+export function BentoCard({
+  dark = false,
+  className = '',
+  eyebrow,
+  title,
+  description,
+  graphic,
+  fade = [],
+}: {
+  dark?: boolean
+  className?: string
+  eyebrow: React.ReactNode
+  title: React.ReactNode
+  description: React.ReactNode
+  graphic: React.ReactNode
+  fade?: ('top' | 'bottom')[]
+}) {
+  return (
+    <motion.div
+      initial="idle"
+      whileHover="active"
+      variants={{ idle: {}, active: {} }}
+      data-dark={dark ? 'true' : undefined}
+      className={clsx(
+        className,
+        'group relative flex flex-col overflow-hidden rounded-lg ring-1',
+        'bg-zinc-900 ring-white/15',
+      )}
+    >
+      <div className="relative h-80 shrink-0">
+        {graphic}
+      </div>
+      <div className="relative p-10">
+        <Subheading as="h3" dark={dark}>
+          {eyebrow}
+        </Subheading>
+        <p className="mt-1 text-2xl/8 font-medium tracking-tight text-white">
+          {title}
+        </p>
+        <p className="mt-2 max-w-[600px] text-sm/6 text-gray-400">
+          {description}
+        </p>
+      </div>
+    </motion.div>
+  )
+}
@@ -0,0 +1,46 @@
+import * as Headless from '@headlessui/react'
+import { clsx } from 'clsx'
+import { Link } from './link'
+
+const variants = {
+  primary: clsx(
+    'inline-flex items-center justify-center px-4 py-[calc(--spacing(2)-1px)]',
+    'rounded-lg border border-transparent bg-gray-950 shadow-md',
+    'text-base font-medium whitespace-nowrap text-white',
+    'data-disabled:bg-gray-950 data-disabled:opacity-40 data-hover:bg-gray-800',
+  ),
+  secondary: clsx(
+    'relative inline-flex items-center justify-center px-4 py-[calc(--spacing(2)-1px)]',
+    'rounded-lg border border-transparent bg-white/15 shadow-md ring-1 ring-[#D15052]/15',
+    'after:absolute after:inset-0 after:rounded-full after:shadow-[inset_0_0_2px_1px_#ffffff4d]',
+    'text-base font-medium whitespace-nowrap text-zinc-100',
+    'data-disabled:bg-white/15 data-disabled:opacity-40 data-hover:bg-white/20',
+  ),
+  outline: clsx(
+    'inline-flex items-center justify-center px-4 py-[calc(--spacing(1.5)-1px)]',
+    'rounded-lg border border-transparent shadow-sm ring-1 ring-white/5',
+    'text-sm font-medium whitespace-nowrap text-zinc-100',
+    'data-disabled:bg-transparent data-disabled:opacity-40 data-hover:bg-zinc-900',
+  ),
+}
+
+type ButtonProps = {
+  variant?: keyof typeof variants
+} & (
+  | React.ComponentPropsWithoutRef<typeof Link>
+  | (Headless.ButtonProps & { href?: undefined })
+)
+
+export function Button({
+  variant = 'primary',
+  className,
+  ...props
+}: ButtonProps) {
+  className = clsx(className, variants[variant])
+
+  if (typeof props.href === 'undefined') {
+    return <Headless.Button {...props} className={className} />
+  }
+
+  return <Link {...props} className={className} />
+}
@@ -0,0 +1,562 @@
+'use client'
+
+import { Button } from '@/components/button'
+import { Container } from '@/components/container'
+import { Footer } from '@/components/footer'
+import { Gradient, GradientBackground } from '@/components/gradient'
+import { Link } from '@/components/link'
+import { Mark } from '@/components/logo'
+import { Navbar } from '@/components/navbar'
+import { Heading, Lead, Subheading } from '@/components/text'
+import { Menu, MenuButton, MenuItem, MenuItems } from '@headlessui/react'
+import {
+  CheckIcon,
+  ChevronUpDownIcon,
+  MinusIcon,
+} from '@heroicons/react/16/solid'
+import { useSearchParams } from 'next/navigation'
+import type React from 'react'
+function DropLogo() {
+  return (
+    <div className="relative -mb-1 inline-flex items-center justify-center gap-x-1">
+      <svg
+        aria-hidden="true"
+        viewBox="0 0 418 42"
+        className="absolute inset-0 h-full w-full scale-75 fill-blue-300/30"
+        preserveAspectRatio="none"
+      >
+        <path d="M203.371.916c-26.013-2.078-76.686 1.963-124.73 9.946L67.3 12.749C35.421 18.062 18.2 21.766 6.004 25.934 1.244 27.561.828 27.778.874 28.61c.07 1.214.828 1.121 9.595-1.176 9.072-2.377 17.15-3.92 39.246-7.496C123.565 7.986 157.869 4.492 195.942 5.046c7.461.108 19.25 1.696 19.17 2.582-.107 1.183-7.874 4.31-25.75 10.366-21.992 7.45-35.43 12.534-36.701 13.884-2.173 2.308-.202 4.407 4.442 4.734 2.654.187 3.263.157 15.593-.78 35.401-2.686 57.944-3.488 88.365-3.143 46.327.526 75.721 2.23 130.788 7.584 19.787 1.924 20.814 1.98 24.557 1.332l.066-.011c1.201-.203 1.53-1.825.399-2.335-2.911-1.31-4.893-1.604-22.048-3.261-57.509-5.556-87.871-7.36-132.059-7.842-23.239-.254-33.617-.116-50.627.674-11.629.54-42.371 2.494-46.696 2.967-2.359.259 8.133-3.625 26.504-9.81 23.239-7.825 27.934-10.149 28.304-14.005.417-4.348-3.529-6-16.878-7.066Z" />
+      </svg>
+      <Mark aria-hidden="true" className="h-6" />
+      <span className="font-display text-xl font-bold text-blue-400 uppercase">
+        Drop
+      </span>
+    </div>
+  )
+}
+
+function GameVaultLogo() {
+  return (
+    <div className="inline-flex items-center gap-x-2 text-xl font-bold">
+      <img src="/icons/gamevault.png" alt="GameVault Logo" className="size-8" />
+      <span className="relative whitespace-nowrap text-zinc-100">
+        <svg
+          aria-hidden="true"
+          viewBox="0 0 418 42"
+          className="absolute top-2/3 left-0 h-[0.58em] w-full fill-purple-900 opacity-30"
+          preserveAspectRatio="none"
+        >
+          <path d="M203.371.916c-26.013-2.078-76.686 1.963-124.73 9.946L67.3 12.749C35.421 18.062 18.2 21.766 6.004 25.934 1.244 27.561.828 27.778.874 28.61c.07 1.214.828 1.121 9.595-1.176 9.072-2.377 17.15-3.92 39.246-7.496C123.565 7.986 157.869 4.492 195.942 5.046c7.461.108 19.25 1.696 19.17 2.582-.107 1.183-7.874 4.31-25.75 10.366-21.992 7.45-35.43 12.534-36.701 13.884-2.173 2.308-.202 4.407 4.442 4.734 2.654.187 3.263.157 15.593-.78 35.401-2.686 57.944-3.488 88.365-3.143 46.327.526 75.721 2.23 130.788 7.584 19.787 1.924 20.814 1.98 24.557 1.332l.066-.011c1.201-.203 1.53-1.825.399-2.335-2.911-1.31-4.893-1.604-22.048-3.261-57.509-5.556-87.871-7.36-132.059-7.842-23.239-.254-33.617-.116-50.627.674-11.629.54-42.371 2.494-46.696 2.967-2.359.259 8.133-3.625 26.504-9.81 23.239-7.825 27.934-10.149 28.304-14.005.417-4.348-3.529-6-16.878-7.066Z"></path>
+        </svg>
+        <span className="relative">GameVault</span>
+      </span>
+    </div>
+  )
+}
+
+function GameVaultPlus() {
+  return (
+    <div className="inline-flex items-center gap-x-1 rounded-full bg-zinc-800 px-2 py-1 text-xs">
+      <img
+        src="/icons/gamevault-plus.png"
+        alt="GameVault+ icon"
+        className="size-4"
+      />
+      GameVault+
+    </div>
+  )
+}
+
+function ComingSoon() {
+  return (
+    <div className="inline-flex items-center gap-x-1 rounded-full bg-zinc-900 px-2 py-1 text-xs">
+      coming soon&trade;
+    </div>
+  )
+}
+
+function RomMLogo() {
+  return (
+    <div className={'inline-flex items-center gap-x-2'}>
+      <img src="/icons/rommicon.svg" className="size-8" alt="RomM icon" />
+      <img src="/icons/rommmark.png" className="h-4" alt="RomM workmark" />
+    </div>
+  )
+}
+
+const projects: Array<{
+  name: string
+  slug: string
+  logo: () => React.JSX.Element
+  description: string
+  href: string
+  highlights: Array<{ description: string; disabled?: boolean; paid?: boolean }>
+  features: {
+    [key: string]: {
+      [key: string]: number | string | boolean | (() => React.JSX.Element)
+    }
+  }
+}> = [
+  {
+    name: 'Drop OSS' as const,
+    slug: 'drop',
+    logo: DropLogo,
+    description: 'An open-source and free self-hosted Steam alternative.',
+    href: '/',
+    highlights: [
+      { description: 'First-class Linux support' },
+      { description: 'Game versioning' },
+      { description: 'Multiple metadata sources' },
+      { description: 'Cloud saves & playtime tracking', disabled: true },
+      {
+        description: 'Overlay network for Steam-like play together',
+        disabled: true,
+      },
+    ],
+    features: {
+      Library: {
+        'Multiple libraries': true,
+        'Versioned layout': true,
+        'Non-versioned layout': true,
+        'Installer/setup games': true,
+        'Portable games': true,
+        'Archives support': 'All 7-zip formats',
+        'Automatic import': 'Bulk-import tool',
+      },
+      Metadata: {
+        'Additional with plugins': false,
+        IGDB: true,
+        GiantBomb: true,
+        PCGamingWiki: true,
+        Manual: true,
+        Steam: true,
+      },
+      Clients: {
+        Windows: true,
+        Linux: true,
+        macOS: true,
+        Android: ComingSoon,
+      },
+      Authentication: {
+        Simple: true,
+        SSO: true,
+      },
+      Cloud: {
+        'Cloud saves': ComingSoon,
+        'Steamworks-compatible networking': ComingSoon,
+        'Dedicated server discovery': ComingSoon,
+      },
+      'Client Features': {
+        'Proton compatible for Linux': true,
+        'Multi-server': ComingSoon,
+        'In-game overlay': ComingSoon,
+      },
+      Additional: {
+        'User collections': true,
+        'Server news': true,
+      },
+    },
+  },
+  {
+    name: 'GameVault' as const,
+    slug: 'gamevault',
+    logo: GameVaultLogo,
+    description:
+      'A source-available, mature Steam-like experience for your home server.',
+    href: 'https://gamevau.lt/',
+    highlights: [
+      { description: 'Native Windows app' },
+      { description: 'Published on Microsoft Store' },
+      { description: 'Playtime tracking' },
+      { description: 'Cloud saves', paid: true },
+      { description: 'Third-party integrations', paid: true },
+    ],
+    features: {
+      Library: {
+        'Multiple libraries': 'Using Docker volumes or symlinks',
+        'Automatic import': true,
+        'Non-versioned layout': true,
+        'Installer/setup games': true,
+        'Portable games': true,
+        'Archives support': 'All 7-zip formats',
+      },
+      Metadata: {
+        'Additional with plugins': true,
+        IGDB: true,
+        Manual: true,
+        VNDB: 'Community plugin',
+      },
+      Clients: {
+        Windows: true,
+        Linux: true,
+        macOS: true,
+      },
+      Authentication: {
+        Simple: true,
+        SSO: true,
+      },
+      Cloud: {
+        'Cloud saves': GameVaultPlus,
+      },
+      'Client Features': {
+        'Multi-server': true,
+        Theming: GameVaultPlus,
+        'Multi-profile usage': GameVaultPlus,
+        'Playnite integration': GameVaultPlus,
+        'Steam integration': GameVaultPlus,
+        'Discord integration': GameVaultPlus,
+      },
+      Additional: {
+        'Parental controls': true,
+        'Server news': true,
+      },
+    },
+  },
+  {
+    name: 'RomM' as const,
+    slug: 'romm',
+    logo: RomMLogo,
+    description:
+      'An open-source, self-hosted rom manager, with built-in large emulator support.',
+    href: 'https://romm.app/',
+    highlights: [
+      { description: '400+ supported platforms' },
+      { description: 'Web-based (EmulatorJS) emulation' },
+      { description: 'Multiple metadata sources' },
+      { description: 'Android app' },
+      { description: 'Cloud sync', disabled: true },
+    ],
+    features: {
+      Library: {
+        'Non-versioned layout': true,
+        'Automatic import': true,
+        'Archives support': 'All 7-zip formats',
+        'Portable games': true,
+      },
+      Metadata: {
+        IGDB: true,
+        Hasheous: true,
+        SteamGridDB: true,
+        Retroachievements: true,
+        PlayMatch: true,
+        ScreenScraper: true,
+        LaunchBox: true,
+      },
+      Clients: {
+        Browser: true,
+        Android: true,
+        muOS: true,
+      },
+      'Client Features': {
+        'Playnite integration': true,
+      },
+      Authentication: {
+        Simple: true,
+        SSO: true,
+      },
+      Cloud: {
+        'Cloud saves': ComingSoon,
+      },
+    },
+  },
+]
+
+function Header() {
+  return (
+    <Container className="mt-16">
+      <Heading as="h1" className="leading-12">
+        What&apos;s the{' '}
+        <span className="rounded-xl bg-zinc-900 px-3 py-2 font-mono text-zinc-300">
+          git&nbsp;diff
+        </span>
+        ?
+      </Heading>
+      <Lead className="mt-6 max-w-3xl">
+        A breakdown between the different projects available to you, put
+        together by the Drop OSS project.
+      </Lead>
+      <Subheading className="mt-2">Last updated 19-01-2026</Subheading>
+    </Container>
+  )
+}
+
+function ProjectCards() {
+  return (
+    <div className="relative py-24">
+      <Gradient className="absolute inset-x-2 top-48 bottom-0 rounded-4xl ring-1 ring-black/5 ring-inset" />
+      <Container className="relative">
+        <div className="grid grid-cols-1 gap-8 lg:grid-cols-3">
+          {projects.map((tier, tierIndex) => (
+            <ProjectCard key={tierIndex} tier={tier} />
+          ))}
+        </div>
+      </Container>
+    </div>
+  )
+}
+
+function ProjectCard({ tier }: { tier: (typeof projects)[number] }) {
+  return (
+    <div className="-m-2 grid grid-cols-1 rounded-4xl shadow-[inset_0_0_2px_1px_#ffffff4d] ring-1 ring-white/5 max-lg:mx-auto max-lg:w-full max-lg:max-w-md">
+      <div className="grid grid-cols-1 rounded-4xl p-2 shadow-md shadow-black/5">
+        <div className="rounded-3xl bg-zinc-900 p-10 pb-9 shadow-2xl ring-1 ring-black/5">
+          <div className="flex w-full items-center justify-center pb-8">
+            {tier.logo()}
+          </div>
+
+          <Subheading>{tier.name}</Subheading>
+          <p className="mt-2 text-sm/6 text-zinc-100/75">{tier.description}</p>
+          <div className="mt-8">
+            <Button href={tier.href}>Learn more &rarr;</Button>
+          </div>
+          <div className="mt-8">
+            <h3 className="text-sm/6 font-medium text-zinc-100">
+              Key features:
+            </h3>
+            <ul className="mt-3 space-y-3">
+              {tier.highlights.map((props, featureIndex) => (
+                <FeatureItem key={featureIndex} {...props} />
+              ))}
+            </ul>
+          </div>
+        </div>
+      </div>
+    </div>
+  )
+}
+
+function ProjectTable({
+  selectedProject,
+}: {
+  selectedProject: (typeof projects)[number]
+}) {
+  function onlyUnique<T>(value: T, index: number, array: Array<T>) {
+    return array.indexOf(value) === index
+  }
+
+  const sections = projects
+    .map((e) => Object.keys(e.features))
+    .flat()
+    .filter(onlyUnique)
+  const features: { [key: string]: string[] } = {}
+  for (const section of sections) {
+    const uniqueFeatures = projects
+      .filter((e) => e.features[section])
+      .map((e) => Object.keys(e.features[section]))
+      .flat()
+      .filter(onlyUnique)
+    features[section] = uniqueFeatures
+  }
+  return (
+    <Container className="py-24">
+      <table className="w-full text-left">
+        <caption className="sr-only">Project comparison</caption>
+        <colgroup>
+          <col className="w-3/5 sm:w-2/5" />
+          <col
+            data-selected={selectedProject === projects[0] ? true : undefined}
+            className="w-2/5 data-selected:table-column max-sm:hidden sm:w-1/5"
+          />
+          <col
+            data-selected={selectedProject === projects[1] ? true : undefined}
+            className="w-2/5 data-selected:table-column max-sm:hidden sm:w-1/5"
+          />
+          <col
+            data-selected={selectedProject === projects[2] ? true : undefined}
+            className="w-2/5 data-selected:table-column max-sm:hidden sm:w-1/5"
+          />
+        </colgroup>
+        <thead>
+          <tr className="max-sm:hidden">
+            <td className="p-0" />
+            {projects.map((project) => (
+              <th
+                key={project.slug}
+                scope="col"
+                data-selected={selectedProject === project ? true : undefined}
+                className="p-0 data-selected:table-cell max-sm:hidden"
+              >
+                <Subheading as="div">{project.name}</Subheading>
+              </th>
+            ))}
+          </tr>
+          <tr className="sm:hidden">
+            <td className="p-0">
+              <div className="relative inline-block">
+                <Menu>
+                  <MenuButton className="flex items-center justify-between gap-2 font-medium">
+                    {selectedProject.name}
+                    <ChevronUpDownIcon className="size-4 fill-zinc-100" />
+                  </MenuButton>
+                  <MenuItems
+                    anchor="bottom start"
+                    className="min-w-(--button-width) rounded-lg bg-white p-1 shadow-lg ring-1 ring-gray-200 [--anchor-gap:6px] [--anchor-offset:-4px] [--anchor-padding:10px]"
+                  >
+                    {projects.map((tier) => (
+                      <MenuItem key={tier.slug}>
+                        <Link
+                          scroll={false}
+                          href={`/comparison?tier=${tier.slug}`}
+                          data-selected={
+                            tier === selectedProject ? true : undefined
+                          }
+                          className="group flex items-center gap-2 rounded-md px-2 py-1 data-focus:bg-gray-200"
+                        >
+                          {tier.name}
+                          <CheckIcon className="hidden size-4 group-data-selected:block" />
+                        </Link>
+                      </MenuItem>
+                    ))}
+                  </MenuItems>
+                </Menu>
+                <div className="pointer-events-none absolute inset-y-0 right-0 flex items-center">
+                  <ChevronUpDownIcon className="size-4 fill-gray-900" />
+                </div>
+              </div>
+            </td>
+            <td colSpan={3} className="p-0 text-right">
+              <Button variant="outline" href={selectedProject.href}>
+                Get started
+              </Button>
+            </td>
+          </tr>
+          <tr className="max-sm:hidden">
+            <th className="p-0" scope="row">
+              <span className="sr-only">Get started</span>
+            </th>
+            {projects.map((tier) => (
+              <td
+                key={tier.slug}
+                data-selected={selectedProject === tier ? true : undefined}
+                className="px-0 pt-4 pb-0 data-selected:table-cell max-sm:hidden"
+              >
+                <Button variant="outline" href={tier.href}>
+                  Get started
+                </Button>
+              </td>
+            ))}
+          </tr>
+        </thead>
+        {sections.map((section) => (
+          <tbody key={section} className="group">
+            <tr>
+              <th
+                scope="colgroup"
+                colSpan={4}
+                className="px-0 pt-10 pb-0 group-first-of-type:pt-5"
+              >
+                <div className="-mx-4 rounded-lg bg-zinc-900 px-4 py-3 text-sm/6 font-semibold">
+                  {section}
+                </div>
+              </th>
+            </tr>
+            {features[section].map((name) => (
+              <tr
+                key={name}
+                className="border-b border-zinc-800 last:border-none"
+              >
+                <th
+                  scope="row"
+                  className="px-0 py-4 text-sm/6 font-normal text-zinc-200"
+                >
+                  {name}
+                </th>
+                {projects.map((project) => {
+                  let value = project.features[section]?.[name]
+
+                  return (
+                    <td
+                      key={project.slug}
+                      data-selected={
+                        selectedProject === project ? true : undefined
+                      }
+                      className="p-4 data-selected:table-cell max-sm:hidden"
+                    >
+                      {typeof value === 'function' ? (
+                        <>{value()}</>
+                      ) : value === true ? (
+                        <>
+                          <CheckIcon className="size-4 fill-green-600" />
+                          <span className="sr-only">
+                            Included in {project.name}
+                          </span>
+                        </>
+                      ) : value === false || value === undefined ? (
+                        <>
+                          <MinusIcon className="size-4 fill-gray-400" />
+                          <span className="sr-only">
+                            Not included in {project.name}
+                          </span>
+                        </>
+                      ) : (
+                        <div className="text-xs text-zinc-400">{value}</div>
+                      )}
+                    </td>
+                  )
+                })}
+              </tr>
+            ))}
+          </tbody>
+        ))}
+      </table>
+    </Container>
+  )
+}
+
+function FeatureItem({
+  description,
+  disabled = false,
+  paid = false,
+}: {
+  description: string
+  disabled?: boolean
+  paid?: boolean
+}) {
+  return (
+    <li
+      data-disabled={disabled ? true : undefined}
+      className="flex items-center gap-4 text-sm/6 text-zinc-100/75 data-disabled:text-zinc-100/40"
+    >
+      <span className="inline-flex h-6 items-center self-start">
+        <PlusIcon className="size-3.75 shrink-0 fill-zinc-100/25" />
+      </span>
+      {disabled && <span className="sr-only">Coming soon:</span>}
+      {description}
+      {disabled && (
+        <span className="text-right text-xs text-blue-300">
+          coming soon&trade;
+        </span>
+      )}
+      {paid && <GameVaultPlus />}
+    </li>
+  )
+}
+
+function PlusIcon(props: React.ComponentPropsWithoutRef<'svg'>) {
+  return (
+    <svg viewBox="0 0 15 15" aria-hidden="true" {...props}>
+      <path clipRule="evenodd" d="M8 0H7v7H0v1h7v7h1V8h7V7H8V0z" />
+    </svg>
+  )
+}
+
+export default function Pricing() {
+  let params = useSearchParams()
+  let tier =
+    typeof params.get('tier') === 'string'
+      ? projects.find(({ slug }) => slug === params.get('tier'))!
+      : projects[0]
+
+  return (
+    <main className="overflow-hidden">
+      <GradientBackground />
+      <Container>
+        <Navbar />
+      </Container>
+      <Header />
+      <ProjectCards />
+      <ProjectTable selectedProject={tier} />
+      <Footer />
+    </main>
+  )
+}
@@ -0,0 +1,17 @@
+import { clsx } from 'clsx'
+
+export function Container({
+  className,
+  children,
+  id,
+}: {
+  className?: string
+  children: React.ReactNode
+  id?: string
+}) {
+  return (
+    <div className={clsx(className, 'px-6 lg:px-8')} id={id}>
+      <div className="mx-auto max-w-2xl lg:max-w-7xl">{children}</div>
+    </div>
+  )
+}
@@ -0,0 +1,9 @@
+'use client'
+
+import { MDXContent } from '@content-collections/mdx/react'
+import type { Post } from 'content-collections'
+import { useMDXComponents } from './mdx-components'
+
+export default function Content({ content }: { content: Post }) {
+  return <MDXContent code={content.mdx} components={useMDXComponents()} />
+}
@@ -0,0 +1,322 @@
+'use client'
+
+import {
+  Label,
+  Listbox,
+  ListboxButton,
+  ListboxOption,
+  ListboxOptions,
+} from '@headlessui/react'
+import { CheckIcon, ChevronUpDownIcon } from '@heroicons/react/16/solid'
+import Link from 'next/link'
+import { useState, type JSX } from 'react'
+import { Button } from './button'
+import { Container } from './container'
+import { Heading } from './text'
+
+type Version = 'v0.2.0' | 'v0.3.0' | 'v0.3.1' | 'v0.3.2' | 'v0.3.3' | 'v0.3.4'
+type Platforms = 'Windows' | 'Linux' | 'macOS'
+type Arch = 'x86' | 'ARM'
+
+const releasePages: { [key in Version]: string } = {
+  'v0.2.0': 'https://github.com/Drop-OSS/drop-app/releases/tag/v0.2.0-beta',
+  'v0.3.0': 'https://github.com/Drop-OSS/drop-app/releases/tag/v0.3.0',
+  'v0.3.1': 'https://github.com/Drop-OSS/drop-app/releases/tag/v0.3.1',
+  'v0.3.2': 'https://github.com/Drop-OSS/drop-app/releases/tag/v0.3.2',
+  'v0.3.3': 'https://github.com/Drop-OSS/drop-app/releases/tag/v0.3.3',
+  'v0.3.4': 'https://github.com/Drop-OSS/drop-app/releases/tag/v0.3.4',
+}
+
+function WindowsIcon() {
+  return (
+    <svg
+      viewBox="0 0 20 20"
+      version="1.1"
+      xmlns="http://www.w3.org/2000/svg"
+      className="size-12"
+    >
+      <g
+        id="Page-1"
+        stroke="none"
+        strokeWidth="1"
+        fill="none"
+        fillRule="evenodd"
+      >
+        <g
+          id="Dribbble-Light-Preview"
+          transform="translate(-60.000000, -7439.000000)"
+          fill="currentColor"
+        >
+          <g id="icons" transform="translate(56.000000, 160.000000)">
+            <path
+              d="M13.1458647,7289.43426 C13.1508772,7291.43316 13.1568922,7294.82929 13.1619048,7297.46884 C16.7759398,7297.95757 20.3899749,7298.4613 23.997995,7299 C23.997995,7295.84873 24.002005,7292.71146 23.997995,7289.71311 C20.3809524,7289.71311 16.7649123,7289.43426 13.1458647,7289.43426 M4,7289.43526 L4,7296.22153 C6.72581454,7296.58933 9.45162907,7296.94113 12.1724311,7297.34291 C12.1774436,7294.71736 12.1704261,7292.0908 12.1704261,7289.46524 C9.44661654,7289.47024 6.72380952,7289.42627 4,7289.43526 M4,7281.84344 L4,7288.61071 C6.72581454,7288.61771 9.45162907,7288.57673 12.1774436,7288.57973 C12.1754386,7285.96017 12.1754386,7283.34361 12.1724311,7280.72405 C9.44461153,7281.06486 6.71679198,7281.42567 4,7281.84344 M24,7288.47179 C20.3879699,7288.48578 16.7759398,7288.54075 13.1619048,7288.55175 C13.1598997,7285.88921 13.1598997,7283.22967 13.1619048,7280.56914 C16.7689223,7280.01844 20.3839599,7279.50072 23.997995,7279 C24,7282.15826 23.997995,7285.31353 24,7288.47179"
+              id="windows-[#174]"
+            ></path>
+          </g>
+        </g>
+      </g>
+    </svg>
+  )
+}
+
+function LinuxIcon() {
+  return (
+    <svg
+      fill="currentColor"
+      version="1.1"
+      id="Layer_1"
+      xmlns="http://www.w3.org/2000/svg"
+      viewBox="0 0 304.998 304.998"
+      className="size-12"
+    >
+      <g id="XMLID_91_">
+        <path
+          id="XMLID_92_"
+          d="M274.659,244.888c-8.944-3.663-12.77-8.524-12.4-15.777c0.381-8.466-4.422-14.667-6.703-17.117   c1.378-5.264,5.405-23.474,0.004-39.291c-5.804-16.93-23.524-42.787-41.808-68.204c-7.485-10.438-7.839-21.784-8.248-34.922   c-0.392-12.531-0.834-26.735-7.822-42.525C190.084,9.859,174.838,0,155.851,0c-11.295,0-22.889,3.53-31.811,9.684   c-18.27,12.609-15.855,40.1-14.257,58.291c0.219,2.491,0.425,4.844,0.545,6.853c1.064,17.816,0.096,27.206-1.17,30.06   c-0.819,1.865-4.851,7.173-9.118,12.793c-4.413,5.812-9.416,12.4-13.517,18.539c-4.893,7.387-8.843,18.678-12.663,29.597   c-2.795,7.99-5.435,15.537-8.005,20.047c-4.871,8.676-3.659,16.766-2.647,20.505c-1.844,1.281-4.508,3.803-6.757,8.557   c-2.718,5.8-8.233,8.917-19.701,11.122c-5.27,1.078-8.904,3.294-10.804,6.586c-2.765,4.791-1.259,10.811,0.115,14.925   c2.03,6.048,0.765,9.876-1.535,16.826c-0.53,1.604-1.131,3.42-1.74,5.423c-0.959,3.161-0.613,6.035,1.026,8.542   c4.331,6.621,16.969,8.956,29.979,10.492c7.768,0.922,16.27,4.029,24.493,7.035c8.057,2.944,16.388,5.989,23.961,6.913   c1.151,0.145,2.291,0.218,3.39,0.218c11.434,0,16.6-7.587,18.238-10.704c4.107-0.838,18.272-3.522,32.871-3.882   c14.576-0.416,28.679,2.462,32.674,3.357c1.256,2.404,4.567,7.895,9.845,10.724c2.901,1.586,6.938,2.495,11.073,2.495   c0.001,0,0,0,0.001,0c4.416,0,12.817-1.044,19.466-8.039c6.632-7.028,23.202-16,35.302-22.551c2.7-1.462,5.226-2.83,7.441-4.065   c6.797-3.768,10.506-9.152,10.175-14.771C282.445,250.905,279.356,246.811,274.659,244.888z M124.189,243.535   c-0.846-5.96-8.513-11.871-17.392-18.715c-7.26-5.597-15.489-11.94-17.756-17.312c-4.685-11.082-0.992-30.568,5.447-40.602   c3.182-5.024,5.781-12.643,8.295-20.011c2.714-7.956,5.521-16.182,8.66-19.783c4.971-5.622,9.565-16.561,10.379-25.182   c4.655,4.444,11.876,10.083,18.547,10.083c1.027,0,2.024-0.134,2.977-0.403c4.564-1.318,11.277-5.197,17.769-8.947   c5.597-3.234,12.499-7.222,15.096-7.585c4.453,6.394,30.328,63.655,32.972,82.044c2.092,14.55-0.118,26.578-1.229,31.289   c-0.894-0.122-1.96-0.221-3.08-0.221c-7.207,0-9.115,3.934-9.612,6.283c-1.278,6.103-1.413,25.618-1.427,30.003   c-2.606,3.311-15.785,18.903-34.706,21.706c-7.707,1.12-14.904,1.688-21.39,1.688c-5.544,0-9.082-0.428-10.551-0.651l-9.508-10.879   C121.429,254.489,125.177,250.583,124.189,243.535z M136.254,64.149c-0.297,0.128-0.589,0.265-0.876,0.411   c-0.029-0.644-0.096-1.297-0.199-1.952c-1.038-5.975-5-10.312-9.419-10.312c-0.327,0-0.656,0.025-1.017,0.08   c-2.629,0.438-4.691,2.413-5.821,5.213c0.991-6.144,4.472-10.693,8.602-10.693c4.85,0,8.947,6.536,8.947,14.272   C136.471,62.143,136.4,63.113,136.254,64.149z M173.94,68.756c0.444-1.414,0.684-2.944,0.684-4.532   c0-7.014-4.45-12.509-10.131-12.509c-5.552,0-10.069,5.611-10.069,12.509c0,0.47,0.023,0.941,0.067,1.411   c-0.294-0.113-0.581-0.223-0.861-0.329c-0.639-1.935-0.962-3.954-0.962-6.015c0-8.387,5.36-15.211,11.95-15.211   c6.589,0,11.95,6.824,11.95,15.211C176.568,62.78,175.605,66.11,173.94,68.756z M169.081,85.08   c-0.095,0.424-0.297,0.612-2.531,1.774c-1.128,0.587-2.532,1.318-4.289,2.388l-1.174,0.711c-4.718,2.86-15.765,9.559-18.764,9.952   c-2.037,0.274-3.297-0.516-6.13-2.441c-0.639-0.435-1.319-0.897-2.044-1.362c-5.107-3.351-8.392-7.042-8.763-8.485   c1.665-1.287,5.792-4.508,7.905-6.415c4.289-3.988,8.605-6.668,10.741-6.668c0.113,0,0.215,0.008,0.321,0.028   c2.51,0.443,8.701,2.914,13.223,4.718c2.09,0.834,3.895,1.554,5.165,2.01C166.742,82.664,168.828,84.422,169.081,85.08z    M205.028,271.45c2.257-10.181,4.857-24.031,4.436-32.196c-0.097-1.855-0.261-3.874-0.42-5.826   c-0.297-3.65-0.738-9.075-0.283-10.684c0.09-0.042,0.19-0.078,0.301-0.109c0.019,4.668,1.033,13.979,8.479,17.226   c2.219,0.968,4.755,1.458,7.537,1.458c7.459,0,15.735-3.659,19.125-7.049c1.996-1.996,3.675-4.438,4.851-6.372   c0.257,0.753,0.415,1.737,0.332,3.005c-0.443,6.885,2.903,16.019,9.271,19.385l0.927,0.487c2.268,1.19,8.292,4.353,8.389,5.853   c-0.001,0.001-0.051,0.177-0.387,0.489c-1.509,1.379-6.82,4.091-11.956,6.714c-9.111,4.652-19.438,9.925-24.076,14.803   c-6.53,6.872-13.916,11.488-18.376,11.488c-0.537,0-1.026-0.068-1.461-0.206C206.873,288.406,202.886,281.417,205.028,271.45z    M39.917,245.477c-0.494-2.312-0.884-4.137-0.465-5.905c0.304-1.31,6.771-2.714,9.533-3.313c3.883-0.843,7.899-1.714,10.525-3.308   c3.551-2.151,5.474-6.118,7.17-9.618c1.228-2.531,2.496-5.148,4.005-6.007c0.085-0.05,0.215-0.108,0.463-0.108   c2.827,0,8.759,5.943,12.177,11.262c0.867,1.341,2.473,4.028,4.331,7.139c5.557,9.298,13.166,22.033,17.14,26.301   c3.581,3.837,9.378,11.214,7.952,17.541c-1.044,4.909-6.602,8.901-7.913,9.784c-0.476,0.108-1.065,0.163-1.758,0.163   c-7.606,0-22.662-6.328-30.751-9.728l-1.197-0.503c-4.517-1.894-11.891-3.087-19.022-4.241c-5.674-0.919-13.444-2.176-14.732-3.312   c-1.044-1.171,0.167-4.978,1.235-8.337c0.769-2.414,1.563-4.91,1.998-7.523C41.225,251.596,40.499,248.203,39.917,245.477z"
+        />
+      </g>
+    </svg>
+  )
+}
+
+function macOSIcon() {
+  return (
+    <svg
+      viewBox="-1.5 0 20 20"
+      version="1.1"
+      xmlns="http://www.w3.org/2000/svg"
+      className="size-14"
+    >
+      <g
+        id="Page-1"
+        stroke="none"
+        strokeWidth="1"
+        fill="none"
+        fillRule="evenodd"
+      >
+        <g
+          id="Dribbble-Light-Preview"
+          transform="translate(-102.000000, -7439.000000)"
+          fill="currentColor"
+        >
+          <g id="icons" transform="translate(56.000000, 160.000000)">
+            <path
+              d="M57.5708873,7282.19296 C58.2999598,7281.34797 58.7914012,7280.17098 58.6569121,7279 C57.6062792,7279.04 56.3352055,7279.67099 55.5818643,7280.51498 C54.905374,7281.26397 54.3148354,7282.46095 54.4735932,7283.60894 C55.6455696,7283.69593 56.8418148,7283.03894 57.5708873,7282.19296 M60.1989864,7289.62485 C60.2283111,7292.65181 62.9696641,7293.65879 63,7293.67179 C62.9777537,7293.74279 62.562152,7295.10677 61.5560117,7296.51675 C60.6853718,7297.73474 59.7823735,7298.94772 58.3596204,7298.97372 C56.9621472,7298.99872 56.5121648,7298.17973 54.9134635,7298.17973 C53.3157735,7298.17973 52.8162425,7298.94772 51.4935978,7298.99872 C50.1203933,7299.04772 49.0738052,7297.68074 48.197098,7296.46676 C46.4032359,7293.98379 45.0330649,7289.44985 46.8734421,7286.3899 C47.7875635,7284.87092 49.4206455,7283.90793 51.1942837,7283.88393 C52.5422083,7283.85893 53.8153044,7284.75292 54.6394294,7284.75292 C55.4635543,7284.75292 57.0106846,7283.67793 58.6366882,7283.83593 C59.3172232,7283.86293 61.2283842,7284.09893 62.4549652,7285.8199 C62.355868,7285.8789 60.1747177,7287.09489 60.1989864,7289.62485"
+              id="apple-[#173]"
+            ></path>
+          </g>
+        </g>
+      </g>
+    </svg>
+  )
+}
+
+const downloads: {
+  [key in Platforms]: {
+    name: string
+    description: string
+    icon: () => JSX.Element
+    downloads: { [key in Version]: { [key in Arch]: string | undefined } }
+  }
+} = {
+  Windows: {
+    name: 'Windows',
+    description:
+      'A setup executable to install the Drop Desktop Client on your Windows system.',
+    icon: WindowsIcon,
+    downloads: {
+      'v0.2.0': {
+        x86: 'https://github.com/Drop-OSS/drop-app/releases/download/v0.2.0-beta/Drop.Desktop.Client_0.2.0-beta_x64-setup.exe',
+        ARM: undefined,
+      },
+      'v0.3.0': {
+        x86: 'https://github.com/Drop-OSS/drop-app/releases/download/v0.3.0/Drop.Desktop.Client_0.3.0_x64-setup.exe',
+        ARM: undefined,
+      },
+      'v0.3.1': {
+        x86: 'https://github.com/Drop-OSS/drop-app/releases/download/v0.3.1/Drop.Desktop.Client_0.3.1_x64-setup.exe',
+        ARM: undefined,
+      },
+      'v0.3.2': {
+        x86: 'https://github.com/Drop-OSS/drop-app/releases/download/v0.3.2/Drop.Desktop.Client_0.3.2_x64-setup.exe',
+        ARM: undefined,
+      },
+      'v0.3.3': {
+        x86: 'https://github.com/Drop-OSS/drop-app/releases/download/v0.3.3/Drop.Desktop.Client_0.3.3_x64-setup.exe',
+        ARM: undefined,
+      },
+      'v0.3.4': {
+        x86: 'https://github.com/Drop-OSS/drop-app/releases/download/v0.3.4/Drop.Desktop.Client_0.3.4_x64-setup.exe',
+        ARM: undefined,
+      },
+    },
+  },
+  Linux: {
+    name: 'Linux',
+    description:
+      'A .deb file that can be installed on Debian-based systems, or repackaged to another distro. Other Linux downloads are available on the GitHub releases page.',
+    icon: LinuxIcon,
+    downloads: {
+      'v0.2.0': {
+        x86: 'https://github.com/Drop-OSS/drop-app/releases/download/v0.2.0-beta/Drop.Desktop.Client_0.2.0-beta_amd64.deb',
+        ARM: undefined,
+      },
+      'v0.3.0': {
+        x86: 'https://github.com/Drop-OSS/drop-app/releases/download/v0.3.0/Drop.Desktop.Client_0.3.0_amd64.deb',
+        ARM: 'https://github.com/Drop-OSS/drop-app/releases/download/v0.3.0/Drop.Desktop.Client_0.3.0_arm64.deb',
+      },
+      'v0.3.1': {
+        x86: 'https://github.com/Drop-OSS/drop-app/releases/download/v0.3.1/Drop.Desktop.Client_0.3.1_amd64.deb',
+        ARM: 'https://github.com/Drop-OSS/drop-app/releases/download/v0.3.1/Drop.Desktop.Client_0.3.1_arm64.deb',
+      },
+      'v0.3.2': {
+        x86: 'https://github.com/Drop-OSS/drop-app/releases/download/v0.3.2/Drop.Desktop.Client_0.3.2_amd64.deb',
+        ARM: 'https://github.com/Drop-OSS/drop-app/releases/download/v0.3.2/Drop.Desktop.Client_0.3.2_arm64.deb',
+      },
+      'v0.3.3': {
+        x86: 'https://github.com/Drop-OSS/drop-app/releases/download/v0.3.3/Drop.Desktop.Client_0.3.3_amd64.deb',
+        ARM: 'https://github.com/Drop-OSS/drop-app/releases/download/v0.3.3/Drop.Desktop.Client_0.3.3_arm64.deb',
+      },
+      'v0.3.4': {
+        x86: 'https://github.com/Drop-OSS/drop-app/releases/download/v0.3.4/Drop.Desktop.Client_0.3.4_amd64.deb',
+        ARM: 'https://github.com/Drop-OSS/drop-app/releases/download/v0.3.4/Drop.Desktop.Client_0.3.4_arm64.deb',
+      },
+    },
+  },
+  macOS: {
+    name: 'macOS',
+    description: 'A self-signed .dmg to install on your macOS system.',
+    icon: macOSIcon,
+    downloads: {
+      'v0.2.0': {
+        x86: undefined,
+        ARM: undefined,
+      },
+      'v0.3.0': {
+        x86: 'https://github.com/Drop-OSS/drop-app/releases/download/v0.3.0/Drop.Desktop.Client_0.3.0_x64.dmg',
+        ARM: 'https://github.com/Drop-OSS/drop-app/releases/download/v0.3.0/Drop.Desktop.Client_0.3.0_aarch64.dmg',
+      },
+      'v0.3.1': {
+        x86: 'https://github.com/Drop-OSS/drop-app/releases/download/v0.3.1/Drop.Desktop.Client_0.3.1_x64.dmg',
+        ARM: 'https://github.com/Drop-OSS/drop-app/releases/download/v0.3.1/Drop.Desktop.Client_0.3.1_aarch64.dmg',
+      },
+      'v0.3.2': {
+        x86: 'https://github.com/Drop-OSS/drop-app/releases/download/v0.3.2/Drop.Desktop.Client_0.3.2_x64.dmg',
+        ARM: 'https://github.com/Drop-OSS/drop-app/releases/download/v0.3.2/Drop.Desktop.Client_0.3.2_aarch64.dmg',
+      },
+      'v0.3.3': {
+        x86: 'https://github.com/Drop-OSS/drop-app/releases/download/v0.3.3/Drop.Desktop.Client_0.3.3_x64.dmg',
+        ARM: 'https://github.com/Drop-OSS/drop-app/releases/download/v0.3.3/Drop.Desktop.Client_0.3.3_aarch64.dmg',
+      },
+      'v0.3.4': {
+        x86: 'https://github.com/Drop-OSS/drop-app/releases/download/v0.3.4/Drop.Desktop.Client_0.3.4_x64.dmg',
+        ARM: 'https://github.com/Drop-OSS/drop-app/releases/download/v0.3.4/Drop.Desktop.Client_0.3.4_aarch64.dmg',
+      },
+    },
+  },
+}
+
+function DownloadCard({
+  version,
+  data,
+}: {
+  version: Version
+  data: (typeof downloads)[Platforms]
+}) {
+  return (
+    <div className="-m-2 grid grid-cols-1 rounded-4xl shadow-[inset_0_0_2px_1px_#ffffff4d] ring-1 ring-black/5 max-lg:mx-auto max-lg:w-full max-lg:max-w-md">
+      <div className="grid grid-cols-1 rounded-4xl p-2 shadow-md shadow-black/5">
+        <div className="flex h-full flex-col justify-between rounded-3xl bg-zinc-900/50 p-10 pb-9 shadow-2xl ring-1 ring-white/5">
+          <div>
+            <div className="flex w-full items-center justify-center gap-x-4">
+              {data.icon()}
+              <Heading>{data.name}</Heading>
+            </div>
+
+            <p className="mt-3 text-sm/6 text-zinc-100/75">
+              {data.description}
+            </p>
+          </div>
+          <div className="mt-8 flex w-full items-center justify-center gap-x-3">
+            {Object.entries(data.downloads[version])
+              .filter(([, link]) => link)
+              .map(([arch, link]) => (
+                <Button key={arch} href={link} variant="outline">
+                  Download {arch} &rarr;
+                </Button>
+              ))}
+          </div>
+        </div>
+      </div>
+    </div>
+  )
+}
+
+export default function DownloadCards() {
+  const [currentVersion, setCurrentVersion] = useState<Version>(
+    Object.keys(releasePages).at(-1)! as Version,
+  )
+
+  return (
+    <div className="relative py-24">
+      <pre className="hidden" id="download-matrix">
+        {JSON.stringify(downloads)}
+      </pre>
+
+      <Container>
+        <div className="flex flex-col items-center">
+          <Listbox value={currentVersion} onChange={setCurrentVersion}>
+            <Label className="block text-sm/6 font-medium text-zinc-100">
+              Version
+            </Label>
+            <div className="relative mt-2">
+              <ListboxButton className="grid w-full min-w-[10rem] cursor-default grid-cols-1 rounded-md bg-zinc-900 py-1.5 pr-2 pl-3 text-left text-zinc-100 outline-1 -outline-offset-1 outline-zinc-800 focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-blue-600 sm:text-sm/6">
+                <span className="col-start-1 row-start-1 truncate pr-6">
+                  {currentVersion}
+                </span>
+                <ChevronUpDownIcon
+                  aria-hidden="true"
+                  className="col-start-1 row-start-1 size-5 self-center justify-self-end text-gray-500 sm:size-4"
+                />
+              </ListboxButton>
+
+              <ListboxOptions
+                transition
+                className="absolute z-10 mt-1 max-h-60 w-full overflow-auto rounded-md bg-zinc-900 py-1 text-base shadow-lg outline-1 outline-white/5 data-leave:transition data-leave:duration-100 data-leave:ease-in data-closed:data-leave:opacity-0 sm:text-sm"
+              >
+                {Object.keys(releasePages).map((version) => (
+                  <ListboxOption
+                    key={version}
+                    value={version}
+                    className="group relative cursor-default py-2 pr-9 pl-3 text-zinc-100 select-none data-focus:bg-blue-600 data-focus:text-white data-focus:outline-hidden"
+                  >
+                    <span className="block truncate font-normal group-data-selected:font-semibold">
+                      {version}
+                    </span>
+
+                    <span className="absolute inset-y-0 right-0 flex items-center pr-4 text-blue-600 group-not-data-selected:hidden group-data-focus:text-white">
+                      <CheckIcon aria-hidden="true" className="size-5" />
+                    </span>
+                  </ListboxOption>
+                ))}
+              </ListboxOptions>
+            </div>
+          </Listbox>
+        </div>
+        <div className="mt-10 grid grid-cols-1 gap-8 lg:grid-cols-3">
+          {Object.entries(downloads).map(([platform, data]) => (
+            <DownloadCard key={platform} data={data} version={currentVersion} />
+          ))}
+        </div>
+        <div className="mt-6 flex justify-center">
+          <Link
+            href={releasePages[currentVersion]}
+            className="text-xs font-semibold text-gray-500 hover:text-gray-600 hover:underline"
+          >
+            Open GitHub releases page &rarr;
+          </Link>
+        </div>
+      </Container>
+    </div>
+  )
+}
@@ -0,0 +1,209 @@
+import { PlusGrid, PlusGridItem, PlusGridRow } from '@/components/plus-grid'
+import { allPosts } from 'content-collections'
+import { Button } from './button'
+import { Container } from './container'
+import { Gradient } from './gradient'
+import { Link } from './link'
+import { Logo } from './logo'
+import { Subheading } from './text'
+
+function CallToAction() {
+  return (
+    <div className="relative pt-20 pb-16 text-center sm:py-24">
+      <hgroup>
+        <Subheading>Get started</Subheading>
+        <p className="mt-6 text-3xl font-medium tracking-tight text-white sm:text-5xl">
+          Ready to dive in?
+        </p>
+      </hgroup>
+      <p className="mx-auto mt-6 max-w-xs text-sm/6 text-zinc-400">
+        Get started hosting Drop in 10 minutes or less, and explore all the
+        features it has to offer.
+      </p>
+      <div className="mt-6">
+        <Button
+          className="w-full sm:w-auto"
+          href="https://docs.droposs.org/docs/guides/quickstart"
+        >
+          Quickstart &rarr;
+        </Button>
+      </div>
+    </div>
+  )
+}
+
+function SitemapHeading({ children }: { children: React.ReactNode }) {
+  return <h3 className="text-sm/6 font-medium text-zinc-100/50">{children}</h3>
+}
+
+function SitemapLinks({ children }: { children: React.ReactNode }) {
+  return <ul className="mt-6 space-y-4 text-sm/6">{children}</ul>
+}
+
+function SitemapLink(props: React.ComponentPropsWithoutRef<typeof Link>) {
+  return (
+    <li>
+      <Link
+        {...props}
+        className="font-medium text-zinc-100 data-hover:text-zinc-100/75"
+      />
+    </li>
+  )
+}
+
+function Sitemap() {
+  const posts = allPosts.slice(0, 3)
+  return (
+    <>
+      <div>
+        <SitemapHeading>Project</SitemapHeading>
+        <SitemapLinks>
+          <SitemapLink href="/about">About</SitemapLink>
+          <SitemapLink href="/sponsors">Sponsors</SitemapLink>
+        </SitemapLinks>
+      </div>
+      <div>
+        <SitemapHeading>Documentation</SitemapHeading>
+        <SitemapLinks>
+          <SitemapLink href="https://docs.droposs.org/">
+            Self-hosters
+          </SitemapLink>
+          <SitemapLink href="https://developer.droposs.org/">
+            Developers
+          </SitemapLink>
+        </SitemapLinks>
+      </div>
+      <div>
+        <SitemapHeading>Support</SitemapHeading>
+        <SitemapLinks>
+          <SitemapLink href="https://discord.gg/ACq4qZp4a9">
+            Discord
+          </SitemapLink>
+          <SitemapLink href="https://github.com/orgs/Drop-OSS/discussions">
+            GitHub Discussions
+          </SitemapLink>
+        </SitemapLinks>
+      </div>
+      {
+        <div>
+          <SitemapHeading>News</SitemapHeading>
+          <SitemapLinks>
+            {posts.map((post) => (
+              <SitemapLink key={post._meta.path} href={post.url}>
+                {post.title}
+              </SitemapLink>
+            ))}
+          </SitemapLinks>
+        </div>
+      }
+    </>
+  )
+}
+
+function SocialGithub(props: React.ComponentPropsWithoutRef<'svg'>) {
+  return (
+    <svg
+      {...props}
+      viewBox="0 0 20 20"
+      version="1.1"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <g
+        id="Page-1"
+        stroke="none"
+        strokeWidth="1"
+        fill="none"
+        fillRule="evenodd"
+      >
+        <g transform="translate(-140.000000, -7559.000000)" fill="#000000">
+          <g id="icons" transform="translate(56.000000, 160.000000)">
+            <path d="M94,7399 C99.523,7399 104,7403.59 104,7409.253 C104,7413.782 101.138,7417.624 97.167,7418.981 C96.66,7419.082 96.48,7418.762 96.48,7418.489 C96.48,7418.151 96.492,7417.047 96.492,7415.675 C96.492,7414.719 96.172,7414.095 95.813,7413.777 C98.04,7413.523 100.38,7412.656 100.38,7408.718 C100.38,7407.598 99.992,7406.684 99.35,7405.966 C99.454,7405.707 99.797,7404.664 99.252,7403.252 C99.252,7403.252 98.414,7402.977 96.505,7404.303 C95.706,7404.076 94.85,7403.962 94,7403.958 C93.15,7403.962 92.295,7404.076 91.497,7404.303 C89.586,7402.977 88.746,7403.252 88.746,7403.252 C88.203,7404.664 88.546,7405.707 88.649,7405.966 C88.01,7406.684 87.619,7407.598 87.619,7408.718 C87.619,7412.646 89.954,7413.526 92.175,7413.785 C91.889,7414.041 91.63,7414.493 91.54,7415.156 C90.97,7415.418 89.522,7415.871 88.63,7414.304 C88.63,7414.304 88.101,7413.319 87.097,7413.247 C87.097,7413.247 86.122,7413.234 87.029,7413.87 C87.029,7413.87 87.684,7414.185 88.139,7415.37 C88.139,7415.37 88.726,7417.2 91.508,7416.58 C91.513,7417.437 91.522,7418.245 91.522,7418.489 C91.522,7418.76 91.338,7419.077 90.839,7418.982 C86.865,7417.627 84,7413.783 84,7409.253 C84,7403.59 88.478,7399 94,7399"></path>
+          </g>
+        </g>
+      </g>
+    </svg>
+  )
+}
+
+function SocialDiscord(props: React.ComponentPropsWithoutRef<'svg'>) {
+  return (
+    <svg
+      fill="currentColor"
+      viewBox="0 0 32 32"
+      version="1.1"
+      xmlns="http://www.w3.org/2000/svg"
+      {...props}
+    >
+      <path d="M20.992 20.163c-1.511-0.099-2.699-1.349-2.699-2.877 0-0.051 0.001-0.102 0.004-0.153l-0 0.007c-0.003-0.048-0.005-0.104-0.005-0.161 0-1.525 1.19-2.771 2.692-2.862l0.008-0c1.509 0.082 2.701 1.325 2.701 2.847 0 0.062-0.002 0.123-0.006 0.184l0-0.008c0.003 0.050 0.005 0.109 0.005 0.168 0 1.523-1.191 2.768-2.693 2.854l-0.008 0zM11.026 20.163c-1.511-0.099-2.699-1.349-2.699-2.877 0-0.051 0.001-0.102 0.004-0.153l-0 0.007c-0.003-0.048-0.005-0.104-0.005-0.161 0-1.525 1.19-2.771 2.692-2.862l0.008-0c1.509 0.082 2.701 1.325 2.701 2.847 0 0.062-0.002 0.123-0.006 0.184l0-0.008c0.003 0.048 0.005 0.104 0.005 0.161 0 1.525-1.19 2.771-2.692 2.862l-0.008 0zM26.393 6.465c-1.763-0.832-3.811-1.49-5.955-1.871l-0.149-0.022c-0.005-0.001-0.011-0.002-0.017-0.002-0.035 0-0.065 0.019-0.081 0.047l-0 0c-0.234 0.411-0.488 0.924-0.717 1.45l-0.043 0.111c-1.030-0.165-2.218-0.259-3.428-0.259s-2.398 0.094-3.557 0.275l0.129-0.017c-0.27-0.63-0.528-1.142-0.813-1.638l0.041 0.077c-0.017-0.029-0.048-0.047-0.083-0.047-0.005 0-0.011 0-0.016 0.001l0.001-0c-2.293 0.403-4.342 1.060-6.256 1.957l0.151-0.064c-0.017 0.007-0.031 0.019-0.040 0.034l-0 0c-2.854 4.041-4.562 9.069-4.562 14.496 0 0.907 0.048 1.802 0.141 2.684l-0.009-0.11c0.003 0.029 0.018 0.053 0.039 0.070l0 0c2.14 1.601 4.628 2.891 7.313 3.738l0.176 0.048c0.008 0.003 0.018 0.004 0.028 0.004 0.032 0 0.060-0.015 0.077-0.038l0-0c0.535-0.72 1.044-1.536 1.485-2.392l0.047-0.1c0.006-0.012 0.010-0.027 0.010-0.043 0-0.041-0.026-0.075-0.062-0.089l-0.001-0c-0.912-0.352-1.683-0.727-2.417-1.157l0.077 0.042c-0.029-0.017-0.048-0.048-0.048-0.083 0-0.031 0.015-0.059 0.038-0.076l0-0c0.157-0.118 0.315-0.24 0.465-0.364 0.016-0.013 0.037-0.021 0.059-0.021 0.014 0 0.027 0.003 0.038 0.008l-0.001-0c2.208 1.061 4.8 1.681 7.536 1.681s5.329-0.62 7.643-1.727l-0.107 0.046c0.012-0.006 0.025-0.009 0.040-0.009 0.022 0 0.043 0.008 0.059 0.021l-0-0c0.15 0.124 0.307 0.248 0.466 0.365 0.023 0.018 0.038 0.046 0.038 0.077 0 0.035-0.019 0.065-0.046 0.082l-0 0c-0.661 0.395-1.432 0.769-2.235 1.078l-0.105 0.036c-0.036 0.014-0.062 0.049-0.062 0.089 0 0.016 0.004 0.031 0.011 0.044l-0-0.001c0.501 0.96 1.009 1.775 1.571 2.548l-0.040-0.057c0.017 0.024 0.046 0.040 0.077 0.040 0.010 0 0.020-0.002 0.029-0.004l-0.001 0c2.865-0.892 5.358-2.182 7.566-3.832l-0.065 0.047c0.022-0.016 0.036-0.041 0.039-0.069l0-0c0.087-0.784 0.136-1.694 0.136-2.615 0-5.415-1.712-10.43-4.623-14.534l0.052 0.078c-0.008-0.016-0.022-0.029-0.038-0.036l-0-0z" />
+    </svg>
+  )
+}
+
+function SocialLinks() {
+  return (
+    <>
+      <Link
+        href="https://github.com/Drop-OSS"
+        target="_blank"
+        aria-label="Check us out on GitHub"
+        className="text-gray-950 data-hover:text-gray-950/75"
+      >
+        <SocialGithub className="size-4" />
+      </Link>
+      <Link
+        href="https://discord.gg/ACq4qZp4a9"
+        target="_blank"
+        aria-label="Join our Discord server"
+        className="text-gray-950 data-hover:text-gray-950/75"
+      >
+        <SocialDiscord className="size-4" />
+      </Link>
+    </>
+  )
+}
+
+function Copyright() {
+  return (
+    <div className="text-xs text-zinc-400">
+      &copy; {new Date().getFullYear()} Drop OSS. Website licensed under AGPLv3 and
+      Tailwind UI Plus (where applicable).
+    </div>
+  )
+}
+
+export function Footer() {
+  return (
+    <footer className="relative m-2 overflow-hidden rounded-4xl">
+      <Gradient className="absolute inset-0 rounded-4xl" />
+      <Container>
+        <CallToAction />
+        <PlusGrid className="pb-16">
+          <PlusGridRow>
+            <div className="grid grid-cols-2 gap-y-10 pb-6 lg:grid-cols-6 lg:gap-8">
+              <div className="col-span-2 flex">
+                <PlusGridItem className="pt-6 lg:pb-6">
+                  <Logo className="h-9" />
+                </PlusGridItem>
+              </div>
+              <div className="col-span-2 grid grid-cols-2 gap-x-8 gap-y-12 lg:col-span-4 lg:grid-cols-subgrid lg:pt-6">
+                <Sitemap />
+              </div>
+            </div>
+          </PlusGridRow>
+          <PlusGridRow className="flex justify-between">
+            <div>
+              <PlusGridItem className="py-3">
+                <Copyright />
+              </PlusGridItem>
+            </div>
+            <div className="flex">
+              <PlusGridItem className="flex items-center gap-8 py-3">
+                <SocialLinks />
+              </PlusGridItem>
+            </div>
+          </PlusGridRow>
+        </PlusGrid>
+      </Container>
+    </footer>
+  )
+}
@@ -0,0 +1,147 @@
+'use client'
+
+import { Dialog, DialogBackdrop, DialogPanel } from '@headlessui/react'
+import { XMarkIcon } from '@heroicons/react/24/solid'
+import { useState } from 'react'
+import { Container } from './container'
+
+const files: Array<{
+  url: string
+  name: string
+  description: string
+  column?: number
+}> = [
+  {
+    url: '/gallery/store.png',
+    name: 'Store',
+    description:
+      'A store page with ~20 games imported and slightly customised metadata.',
+  },
+  {
+    url: '/gallery/storepage.png',
+    name: 'Store page - Enshrouded',
+    description: 'An example store page of Enshrouded.',
+  },
+  {
+    url: '/gallery/storepagemobile.png',
+    name: 'Mobile store page - Enshrouded',
+    description: 'A mobile view of the example store page of Enshrouded',
+  },
+  {
+    url: '/gallery/developermobile.png',
+    name: 'Company page - Keen Games',
+    description:
+      'An example company page that lists their games. Can be filtered by developed or published.',
+  },
+  {
+    url: '/gallery/devices.png',
+    name: 'Devices page',
+    description: 'A list of authorised devices connected to your account.',
+  },
+  {
+    url: '/gallery/companyadmin.png',
+    name: 'Company - Admin Dashboard',
+    description:
+      'Page to edit and customise company metadata, and add/remove games to it.',
+  },
+  {
+    url: '/gallery/importgameadmin.png',
+    name: 'Import game - Admin Dashboard',
+    description:
+      'Importing a game with metadata from configured metadata providers.',
+    column: 0,
+  },
+  {
+    url: '/gallery/importversionadmin.png',
+    name: 'Import version - Admin Dashboard',
+    description:
+      'Importing an example version, with the auto-suggested executable name.',
+    column: 1,
+  },
+]
+
+export function Gallery() {
+  const [currentModal, setCurrentModal] = useState<string | undefined>()
+  function resetModal() {
+    setCurrentModal(undefined)
+  }
+
+  return (
+    <Container className="py-10">
+      <div
+        role="list"
+        className="grid grid-cols-1 gap-4 sm:grid-cols-3 md:grid-cols-4"
+      >
+        {[0, 1, 2, 3].map((index) => (
+          <div key={index} className="flex flex-col gap-y-4">
+            {files
+              .filter((v, i) =>
+                v.column !== undefined ? index == v.column : i % 4 == index,
+              )
+              .map((file) => (
+                <div key={file.url} className="relative w-full">
+                  <div className="group overflow-hidden rounded-lg bg-gray-100 focus-within:outline-2 focus-within:outline-offset-2 focus-within:outline-blue-600">
+                    <img
+                      alt=""
+                      src={file.url}
+                      className="pointer-events-none aspect-10/7 aspect-auto rounded-lg object-cover outline -outline-offset-1 outline-black/5 group-hover:opacity-75"
+                    />
+                    <button
+                      type="button"
+                      className="absolute inset-0 focus:outline-hidden"
+                      onClick={() => setCurrentModal(file.url)}
+                    >
+                      <span className="sr-only">
+                        View details for {file.name}
+                      </span>
+                    </button>
+                  </div>
+                  <p className="pointer-events-none mt-2 block truncate text-sm font-medium text-gray-900">
+                    {file.name}
+                  </p>
+                  <p className="pointer-events-none block text-xs font-medium text-gray-500">
+                    {file.description}
+                  </p>
+                </div>
+              ))}
+          </div>
+        ))}
+      </div>
+      <GalleryModal img={currentModal} close={resetModal} />
+    </Container>
+  )
+}
+
+export default function GalleryModal({
+  img,
+  close,
+}: {
+  img?: string
+  close: () => void
+}) {
+  return (
+    <Dialog open={!!img} onClose={close} className="relative z-10">
+      <DialogBackdrop
+        transition
+        className="fixed inset-0 bg-gray-500/75 transition-opacity data-closed:opacity-0 data-enter:duration-300 data-enter:ease-out data-leave:duration-200 data-leave:ease-in"
+      />
+
+      <div className="fixed inset-0 z-10 h-screen w-screen">
+        <div className="flex min-h-full items-end justify-center p-4 text-center sm:items-center sm:p-0">
+          <DialogPanel
+            transition
+            className="relative m-8 transform overflow-hidden rounded-lg bg-white text-left shadow-xl transition-all data-closed:translate-y-4 data-closed:opacity-0 data-enter:duration-300 data-enter:ease-out data-leave:duration-200 data-leave:ease-in data-closed:sm:translate-y-0 data-closed:sm:scale-95"
+          >
+            <img src={img} alt="" className="max-h-[90vh] w-full" />
+            <button
+              className="absolute top-0 right-0 m-4 cursor-pointer rounded-xl bg-zinc-900 p-2 text-zinc-100 outline outline-zinc-700 hover:text-zinc-400"
+              onClick={close}
+            >
+              <XMarkIcon className="size-4" />
+            </button>
+          </DialogPanel>
+        </div>
+      </div>
+    </Dialog>
+  )
+}
@@ -0,0 +1,30 @@
+import { clsx } from 'clsx'
+
+export function Gradient({
+  className,
+  ...props
+}: React.ComponentPropsWithoutRef<'div'>) {
+  return (
+    <div
+      {...props}
+      className={clsx(
+        className,
+        'bg-linear-115 from-blue-900 from-28% via-sky-800 via-70% to-cyan-900 sm:bg-linear-145 opacity-30',
+      )}
+    />
+  )
+}
+
+export function GradientBackground() {
+  return (
+    <div className="relative mx-auto max-w-7xl">
+      <div
+        className={clsx(
+          'absolute -top-44 -right-60 h-60 w-xl transform-gpu md:right-0',
+          'bg-linear-115 from-blue-700 from-28% via-sky-800 via-70% to-blue-600',
+          'rotate-[-10deg] rounded-full blur-3xl',
+        )}
+      />
+    </div>
+  )
+}
@@ -0,0 +1,14 @@
+import * as Headless from '@headlessui/react'
+import NextLink, { type LinkProps } from 'next/link'
+import { forwardRef } from 'react'
+
+export const Link = forwardRef(function Link(
+  props: LinkProps & React.ComponentPropsWithoutRef<'a'>,
+  ref: React.ForwardedRef<HTMLAnchorElement>,
+) {
+  return (
+    <Headless.DataInteractive>
+      <NextLink ref={ref} {...props} />
+    </Headless.DataInteractive>
+  )
+})
@@ -0,0 +1,93 @@
+'use client'
+
+import { CheckIcon } from '@heroicons/react/16/solid'
+import { clsx } from 'clsx'
+import { motion } from 'framer-motion'
+
+const transition = {
+  duration: 0.75,
+  repeat: Infinity,
+  repeatDelay: 1.25,
+}
+
+function Rings() {
+  return (
+    <svg
+      viewBox="0 0 500 500"
+      fill="none"
+      className={clsx(
+        'col-start-1 row-start-1 size-full',
+        'mask-[linear-gradient(to_bottom,black_90%,transparent),radial-gradient(circle,rgba(0,0,0,1)_0%,rgba(0,0,0,0)_100%)] mask-intersect',
+      )}
+    >
+      {Array.from(Array(42).keys()).map((n) => (
+        <motion.circle
+          variants={{
+            idle: {
+              scale: 1,
+              strokeOpacity: 0.15,
+            },
+            active: {
+              scale: [1, 1.08, 1],
+              strokeOpacity: [0.15, 0.3, 0.15],
+              transition: { ...transition, delay: n * 0.05 },
+            },
+          }}
+          key={n}
+          cx="250"
+          cy="250"
+          r={n * 14 + 4}
+          className="stroke-white"
+        />
+      ))}
+    </svg>
+  )
+}
+
+function Checkmark() {
+  return (
+    <div className="z-10 col-start-1 row-start-1 flex items-center justify-center">
+      <motion.div
+        variants={{
+          idle: { scale: 1 },
+          active: {
+            scale: [1, 1.15, 1],
+            transition: { ...transition, duration: 0.75 },
+          },
+        }}
+        className="flex size-6 items-center justify-center rounded-full bg-linear-to-t from-green-500 to-green-300 shadow-sm"
+      >
+        <CheckIcon className="size-4 fill-white" />
+      </motion.div>
+    </div>
+  )
+}
+
+function Photos() {
+  return (
+    <div className="z-10 col-start-1 row-start-1">
+      <div className="mx-auto flex size-full max-w-md items-center justify-around">
+        <img
+          alt=""
+          src="/linked-avatars/customer.jpg"
+          className="size-20 rounded-full bg-white/15 ring-4 ring-white/10"
+        />
+        <img
+          alt=""
+          src="/linked-avatars/manager.jpg"
+          className="size-20 rounded-full bg-white/15 ring-4 ring-white/10"
+        />
+      </div>
+    </div>
+  )
+}
+
+export function LinkedAvatars() {
+  return (
+    <div aria-hidden="true" className="isolate mx-auto grid h-full grid-cols-1">
+      <Rings />
+      <Photos />
+      <Checkmark />
+    </div>
+  )
+}
@@ -0,0 +1,143 @@
+'use client'
+
+import { clsx } from 'clsx'
+import { motion } from 'framer-motion'
+import { Mark } from './logo'
+
+function Circle({
+  size,
+  delay,
+  opacity,
+}: {
+  size: number
+  delay: number
+  opacity: string
+}) {
+  return (
+    <motion.div
+      variants={{
+        idle: { width: `${size}px`, height: `${size}px` },
+        active: {
+          width: [`${size}px`, `${size + 10}px`, `${size}px`],
+          height: [`${size}px`, `${size + 10}px`, `${size}px`],
+          transition: {
+            duration: 0.75,
+            repeat: Infinity,
+            repeatDelay: 1.25,
+            ease: 'easeInOut',
+            delay,
+          },
+        },
+      }}
+      style={{ '--opacity': opacity } as React.CSSProperties}
+      className={clsx(
+        'absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 rounded-full',
+        'bg-[radial-gradient(circle,transparent_25%,color-mix(in_srgb,var(--color-blue-500)_var(--opacity),transparent)_100%)]',
+        'ring-1 ring-blue-500/8 ring-inset',
+      )}
+    />
+  )
+}
+
+function Circles() {
+  return (
+    <div className="absolute inset-0">
+      <Circle size={528} opacity="3%" delay={0.45} />
+      <Circle size={400} opacity="5%" delay={0.3} />
+      <Circle size={272} opacity="5%" delay={0.15} />
+      <Circle size={144} opacity="10%" delay={0} />
+      <div className="absolute inset-0 bg-linear-to-t from-white to-35%" />
+    </div>
+  )
+}
+
+function MainLogo() {
+  return (
+    <div className="absolute top-32 left-44 flex size-16 items-center justify-center rounded-full bg-white shadow-sm ring-1 ring-black/5">
+      <Mark className="h-9" />
+    </div>
+  )
+}
+
+function Logo({
+  src,
+  left,
+  top,
+  hover,
+}: {
+  src: string
+  left: number
+  top: number
+  hover: { x: number; y: number; rotate: number; delay: number }
+}) {
+  return (
+    <motion.img
+      variants={{
+        idle: { x: 0, y: 0, rotate: 0 },
+        active: {
+          x: [0, hover.x, 0],
+          y: [0, hover.y, 0],
+          rotate: [0, hover.rotate, 0],
+          transition: {
+            duration: 0.75,
+            repeat: Infinity,
+            repeatDelay: 1.25,
+            ease: 'easeInOut',
+            delay: hover.delay,
+          },
+        },
+      }}
+      alt=""
+      src={src}
+      style={{ left, top } as React.CSSProperties}
+      className="absolute size-16 rounded-full bg-white shadow-sm ring-1 ring-black/5"
+    />
+  )
+}
+
+export function LogoCluster() {
+  return (
+    <div aria-hidden="true" className="relative h-full overflow-hidden">
+      <Circles />
+      <div className="absolute left-1/2 h-full w-104 -translate-x-1/2">
+        <MainLogo />
+        <Logo
+          src="/icons/igdb.svg"
+          left={96}
+          top={176}
+          hover={{ x: 6, y: 1, rotate: 5, delay: 0.38 }}
+        />
+        <Logo
+          src="/icons/giantbomb.svg"
+          left={255}
+          top={210}
+          hover={{ x: 4, y: -5, rotate: 6, delay: 0.3 }}
+        />
+        <Logo
+          src="/icons/pcgamingwiki.svg"
+          left={144}
+          top={40}
+          hover={{ x: 3, y: 5, rotate: 7, delay: 0.2 }}
+        />
+        {/*<Logo
+          src="/logo-cluster/linkedin.svg"
+          left={285}
+          top={20}
+          hover={{ x: -2, y: -5, rotate: -6, delay: 0.15 }}
+        />
+        <Logo
+          src="/logo-cluster/upwork.svg"
+          left={36}
+          top={56}
+          hover={{ x: -4, y: -5, rotate: -6, delay: 0.35 }}
+        />
+        <Logo
+          src="/logo-cluster/we-work-remotely.svg"
+          left={360}
+          top={144}
+          hover={{ x: -3, y: 5, rotate: 3, delay: 0.15 }}
+        /> */}
+      </div>
+    </div>
+  )
+}
@@ -0,0 +1,130 @@
+import { clsx } from 'clsx'
+import { Mark } from './logo'
+
+function Row({ children }: { children: React.ReactNode }) {
+  return (
+    <div className="group relative">
+      <div className="absolute inset-x-0 top-1/2 h-0.5 bg-linear-to-r from-white/15 from-[2px] to-[2px] bg-size-[12px_100%]" />
+      <div className="absolute inset-x-0 bottom-0 h-0.5 bg-linear-to-r from-white/5 from-[2px] to-[2px] bg-size-[12px_100%] group-last:hidden" />
+      {children}
+    </div>
+  )
+}
+
+function Logo({
+  label,
+  src,
+  className,
+}: {
+  label: string
+  src: string
+  className: string
+}) {
+  return (
+    <div
+      className={clsx(
+        className,
+        'absolute top-2 grid grid-cols-[1rem_1fr] items-center gap-2 px-3 py-1 whitespace-nowrap',
+        'rounded-full bg-linear-to-t from-gray-800 from-50% to-gray-700 ring-1 ring-white/10 ring-inset',
+        '[--move-x-from:-100%] [--move-x-to:calc(100%+100cqw)] [animation-iteration-count:infinite] [animation-name:move-x] [animation-play-state:paused] [animation-timing-function:linear] group-hover:[animation-play-state:running]',
+      )}
+    >
+      <img alt="" src={src} className="size-4" />
+      <span className="text-sm/6 font-medium text-white">{label}</span>
+    </div>
+  )
+}
+
+export function LogoTimeline() {
+  return (
+    <div aria-hidden="true" className="relative h-full overflow-hidden">
+      <div className="absolute inset-0 top-8 z-10 flex items-center justify-center">
+        <div
+          className="absolute inset-0 backdrop-blur-md"
+          style={{
+            maskImage: `url('data:image/svg+xml,<svg width="96" height="96" viewBox="0 0 96 96" fill="none" xmlns="http://www.w3.org/2000/svg"><rect width="96" height="96" rx="12" fill="black"/></svg>')`,
+            maskPosition: 'center',
+            maskRepeat: 'no-repeat',
+          }}
+        />
+        <div className="relative flex size-24 items-center justify-center rounded-xl bg-linear-to-t from-white/5 to-white/25 shadow-sm ring-1 ring-white/10 outline outline-offset-[-5px] outline-white/5 ring-inset">
+          <Mark className="h-9" />
+        </div>
+      </div>
+      <div className="@container absolute inset-0 grid grid-cols-1 pt-8">
+        <Row>
+          <Logo
+            label="Loom"
+            src="/logo-timeline/loom.svg"
+            className="[animation-delay:-26s] [animation-duration:30s]"
+          />
+          <Logo
+            label="Gmail"
+            src="/logo-timeline/gmail.svg"
+            className="[animation-delay:-8s] [animation-duration:30s]"
+          />
+        </Row>
+        <Row>
+          <Logo
+            label="Asana"
+            src="/logo-timeline/asana.svg"
+            className="[animation-delay:-40s] [animation-duration:40s]"
+          />
+          <Logo
+            label="Microsoft Teams"
+            src="/logo-timeline/microsoft-teams.svg"
+            className="[animation-delay:-20s] [animation-duration:40s]"
+          />
+        </Row>
+        <Row>
+          <Logo
+            label="Google Calendar"
+            src="/logo-timeline/google-calendar.svg"
+            className="[animation-delay:-10s] [animation-duration:40s]"
+          />
+          <Logo
+            label="Google Drive"
+            src="/logo-timeline/google-drive.svg"
+            className="[animation-delay:-32s] [animation-duration:40s]"
+          />
+        </Row>
+        <Row>
+          <Logo
+            label="Basecamp"
+            src="/logo-timeline/basecamp.svg"
+            className="[animation-delay:-45s] [animation-duration:45s]"
+          />
+          <Logo
+            label="Discord"
+            src="/logo-timeline/discord.svg"
+            className="[animation-delay:-23s] [animation-duration:45s]"
+          />
+        </Row>
+        <Row>
+          <Logo
+            label="Hubspot"
+            src="/logo-timeline/hubspot.svg"
+            className="[animation-delay:-55s] [animation-duration:60s]"
+          />
+          <Logo
+            label="Slack"
+            src="/logo-timeline/slack.svg"
+            className="[animation-delay:-20s] [animation-duration:60s]"
+          />
+        </Row>
+        <Row>
+          <Logo
+            label="Adobe Creative Cloud"
+            src="/logo-timeline/adobe-creative-cloud.svg"
+            className="[animation-delay:-9s] [animation-duration:40s]"
+          />
+          <Logo
+            label="Zoom"
+            src="/logo-timeline/zoom.svg"
+            className="[animation-delay:-28s] [animation-duration:40s]"
+          />
+        </Row>
+      </div>
+    </div>
+  )
+}
@@ -0,0 +1,36 @@
+export function Logo({ className }: { className?: string }) {
+  return (
+    <div className="inline-flex items-center gap-x-1 mt-1">
+      <svg
+        className={className}
+        viewBox="0 0 24 24"
+        fill="none"
+        xmlns="http://www.w3.org/2000/svg"
+      >
+        <path
+          d="M4 13.5C4 11.0008 5.38798 8.76189 7.00766 7C8.43926 5.44272 10.0519 4.25811 11.0471 3.5959C11.6287 3.20893 12.3713 3.20893 12.9529 3.5959C13.9481 4.25811 15.5607 5.44272 16.9923 7C18.612 8.76189 20 11.0008 20 13.5C20 17.9183 16.4183 21.5 12 21.5C7.58172 21.5 4 17.9183 4 13.5Z"
+          stroke="#60a5fa"
+          strokeWidth="2"
+        />
+      </svg>
+      <span className="text-lg font-semibold">Drop OSS</span>
+    </div>
+  )
+}
+
+export function Mark({ className }: { className?: string }) {
+  return (
+    <svg
+      className={className}
+      viewBox="0 0 24 24"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <path
+        d="M4 13.5C4 11.0008 5.38798 8.76189 7.00766 7C8.43926 5.44272 10.0519 4.25811 11.0471 3.5959C11.6287 3.20893 12.3713 3.20893 12.9529 3.5959C13.9481 4.25811 15.5607 5.44272 16.9923 7C18.612 8.76189 20 11.0008 20 13.5C20 17.9183 16.4183 21.5 12 21.5C7.58172 21.5 4 17.9183 4 13.5Z"
+        stroke="#60a5fa"
+        strokeWidth="2"
+      />
+    </svg>
+  )
+}
@@ -0,0 +1,58 @@
+'use client'
+
+import { motion } from 'framer-motion'
+
+function Marker({
+  src,
+  top,
+  offset,
+  delay,
+}: {
+  src: string
+  top: number
+  offset: number
+  delay: number
+}) {
+  return (
+    <motion.div
+      variants={{
+        idle: { scale: 0, opacity: 0, rotateX: 0, rotate: 0, y: 0 },
+        active: { y: [-20, 0, 4, 0], scale: [0.75, 1], opacity: [0, 1] },
+      }}
+      transition={{ duration: 0.25, delay, ease: 'easeOut' }}
+      style={{ '--offset': `${offset}px`, top } as React.CSSProperties}
+      className="absolute left-[calc(50%+var(--offset))] size-[38px] drop-shadow-[0_3px_1px_rgba(0,0,0,.15)]"
+    >
+      <svg fill="none" viewBox="0 0 38 38" className="absolute size-full">
+        <path
+          d="M29.607 5.193c5.858 5.857 5.858 15.355 0 21.213l-9.9 9.9-.707.706-.708-.708-9.899-9.898c-5.857-5.858-5.857-15.356 0-21.213 5.858-5.858 15.356-5.858 21.214 0Z"
+          className="fill-black/5"
+        />
+        <path
+          d="m28.9 25.698-9.9 9.9-9.9-9.9C3.634 20.232 3.634 11.367 9.1 5.9 14.569.432 23.433.432 28.9 5.9c5.467 5.468 5.467 14.332 0 19.8Z"
+          className="fill-white"
+        />
+      </svg>
+      <img
+        alt=""
+        src={src}
+        className="absolute top-[4px] left-[7px] size-6 rounded-full"
+      />
+    </motion.div>
+  )
+}
+
+export function Map() {
+  return (
+    <div aria-hidden="true" className="relative size-full">
+      <div className="absolute inset-0 bg-[url(/map.png)] mask-[linear-gradient(to_bottom,black_50%,transparent)] bg-size-[530px_430px] bg-position-[center_-75px] bg-no-repeat" />
+      <div className="absolute inset-0">
+        <Marker src="/map/1.jpg" top={96} offset={-128} delay={0.15} />
+        <Marker src="/map/2.jpg" top={160} offset={-16} delay={0.4} />
+        <Marker src="/map/3.jpg" top={144} offset={96} delay={0.3} />
+        <Marker src="/map/4.jpg" top={192} offset={64} delay={0.6} />
+        <Marker src="/map/5.jpg" top={224} offset={-32} delay={0.8} />
+      </div>
+    </div>
+  )
+}
@@ -0,0 +1,73 @@
+import type { MDXComponents } from 'mdx/types';
+import Link from 'next/link'
+
+const components: MDXComponents = {
+  p: ({ children }) => (
+    <p className="my-8 text-base/8 first:mt-0 last:mb-0">{children}</p>
+  ),
+  h1: ({ children }) => (
+    <h2 className="mt-12 mb-10 text-4xl/8 font-medium tracking-tight text-zinc-100 first:mt-0 last:mb-0">
+      {children}
+    </h2>
+  ),
+  h2: ({ children }) => (
+    <h2 className="mt-12 mb-10 text-2xl/8 font-medium tracking-tight text-zinc-100 first:mt-0 last:mb-0">
+      {children}
+    </h2>
+  ),
+  h3: ({ children }) => (
+    <h3 className="mt-12 mb-10 text-xl/8 font-medium tracking-tight text-zinc-100 first:mt-0 last:mb-0">
+      {children}
+    </h3>
+  ),
+  blockquote: ({ children }) => (
+    <blockquote className="my-10 border-l-2 border-l-zinc-700 pl-6 text-base/8 text-zinc-100 first:mt-0 last:mb-0">
+      {children}
+    </blockquote>
+  ),
+  image: (props) => (
+    // eslint-disable-next-line jsx-a11y/alt-text
+    <img
+      {...(props as { alt: string; src: string })}
+      className="w-full rounded-2xl"
+    />
+  ),
+  hr: () => <hr className="my-8 border-t border-zinc-800" />,
+  strong: ({ children }) => (
+    <strong className="font-semibold text-zinc-100">{children}</strong>
+  ),
+  code: ({ children }) => (
+    <>
+      <code className="text-[15px]/8 font-semibold text-zinc-300 bg-zinc-800 p-4 rounded-xl w-full">
+        {children}
+      </code>
+    </>
+  ),
+  ul: ({ children }) => (
+    <ul className="list-disc pl-4 text-base/8 marker:text-gray-400">
+      {children}
+    </ul>
+  ),
+  ol: ({ children }) => (
+    <ol className="list-decimal pl-4 text-base/8 marker:text-gray-400">
+      {children}
+    </ol>
+  ),
+  li: ({ children }) => {
+    return <li className="my-2 pl-2 has-[br]:mb-8">{children}</li>
+  },
+  a: (props) => {
+    return (
+      <Link
+        {...props}
+        className="font-medium text-blue-400 underline decoration-blue-400 underline-offset-4 data-hover:decoration-blue-600"
+      >
+        {props.children}
+      </Link>
+    )
+  },
+}
+
+export function useMDXComponents(): MDXComponents {
+  return components
+}
@@ -0,0 +1,104 @@
+'use client'
+
+import {
+  Disclosure,
+  DisclosureButton,
+  DisclosurePanel,
+} from '@headlessui/react'
+import { Bars2Icon } from '@heroicons/react/24/solid'
+import { motion } from 'framer-motion'
+import { Link } from './link'
+import { Logo } from './logo'
+import { PlusGrid, PlusGridItem, PlusGridRow } from './plus-grid'
+
+const links = [
+  { href: '/about', label: 'About' },
+  { href: '/gallery', label: 'Gallery' },
+  { href: '/comparison', label: 'Comparison' },
+  { href: '/news', label: 'News' },
+  { href: '/sponsors', label: 'Sponsors' },
+  { href: '/download', label: 'Download' },
+]
+
+function DesktopNav() {
+  return (
+    <nav className="relative hidden lg:flex">
+      {links.map(({ href, label }) => (
+        <PlusGridItem key={href} className="relative flex">
+          <Link
+            href={href}
+            className="flex items-center px-4 py-3 text-base font-medium text-zinc-100 bg-blend-multiply data-hover:bg-white/2.5"
+          >
+            {label}
+          </Link>
+        </PlusGridItem>
+      ))}
+    </nav>
+  )
+}
+
+function MobileNavButton() {
+  return (
+    <DisclosureButton
+      className="flex size-12 items-center justify-center self-center rounded-lg data-hover:bg-white/5 lg:hidden"
+      aria-label="Open main menu"
+    >
+      <Bars2Icon className="size-6" />
+    </DisclosureButton>
+  )
+}
+
+function MobileNav() {
+  return (
+    <DisclosurePanel className="lg:hidden">
+      <div className="flex flex-col gap-6 py-4">
+        {links.map(({ href, label }, linkIndex) => (
+          <motion.div
+            initial={{ opacity: 0, rotateX: -90 }}
+            animate={{ opacity: 1, rotateX: 0 }}
+            transition={{
+              duration: 0.15,
+              ease: 'easeInOut',
+              rotateX: { duration: 0.3, delay: linkIndex * 0.1 },
+            }}
+            key={href}
+          >
+            <Link href={href} className="text-base font-medium text-zinc-100">
+              {label}
+            </Link>
+          </motion.div>
+        ))}
+      </div>
+      <div className="absolute left-1/2 w-screen -translate-x-1/2">
+        <div className="absolute inset-x-0 top-0 border-t border-white/5" />
+        <div className="absolute inset-x-0 top-2 border-t border-white/5" />
+      </div>
+    </DisclosurePanel>
+  )
+}
+
+export function Navbar({ banner }: { banner?: React.ReactNode }) {
+  return (
+    <Disclosure as="header" className="pt-12 sm:pt-16">
+      <PlusGrid>
+        <PlusGridRow className="relative flex justify-between">
+          <div className="relative flex gap-6">
+            <PlusGridItem className="py-3">
+              <Link href="/" title="Home">
+                <Logo className="h-9" />
+              </Link>
+            </PlusGridItem>
+            {banner && (
+              <div className="relative hidden items-center py-3 lg:flex">
+                {banner}
+              </div>
+            )}
+          </div>
+          <DesktopNav />
+          <MobileNavButton />
+        </PlusGridRow>
+      </PlusGrid>
+      <MobileNav />
+    </Disclosure>
+  )
+}
@@ -0,0 +1,231 @@
+'use client'
+
+import { Button } from '@/components/button'
+import { Container } from '@/components/container'
+import { Footer } from '@/components/footer'
+import { GradientBackground } from '@/components/gradient'
+import { Link } from '@/components/link'
+import { Navbar } from '@/components/navbar'
+import { fetchPostAuthors } from '@/components/post'
+import { Heading, Lead, Subheading } from '@/components/text'
+import { ChevronLeftIcon, ChevronRightIcon } from '@heroicons/react/16/solid'
+import { clsx } from 'clsx'
+import { allPosts } from 'content-collections'
+import dayjs from 'dayjs'
+import { notFound, useSearchParams } from 'next/navigation'
+
+const postsPerPage = 5
+
+function FeaturedPosts() {
+  const featuredPosts = allPosts.slice(0, 3)
+
+  if (featuredPosts.length === 0) {
+    return
+  }
+
+  const postAuthors = fetchPostAuthors()
+
+  return (
+    <div className="mt-16 pb-14">
+      <Container>
+        <h2 className="text-2xl font-medium tracking-tight">Featured</h2>
+        <div className="mt-6 grid grid-cols-1 gap-8 lg:grid-cols-3">
+          {featuredPosts.map((post) => (
+            <div
+              key={post._meta.path}
+              className="relative flex flex-col rounded-3xl bg-zinc-900 p-2 shadow-md ring-1 shadow-white/5 ring-white/5"
+            >
+              {post.image && (
+                <img
+                  alt={post.title}
+                  src={post.image}
+                  className="aspect-3/2 w-full rounded-2xl object-cover"
+                />
+              )}
+              <div className="flex flex-1 flex-col p-8">
+                <div className="text-sm/5 text-zinc-400">
+                  {dayjs(post.date).format('dddd, MMMM D, YYYY')}
+                </div>
+                <div className="mt-2 text-base/7 font-medium">
+                  <Link href={post.url}>
+                    <span className="absolute inset-0" />
+                    {post.title}
+                  </Link>
+                </div>
+                <div className="mt-2 flex-1 text-sm/6 text-zinc-400">
+                  {post.excerpt}
+                </div>
+                {postAuthors[post.author ?? ''] && (
+                  <div className="mt-6 flex items-center gap-3">
+                    <img
+                      alt=""
+                      src={postAuthors[post.author ?? ''].avatar}
+                      className="aspect-square size-6 rounded-full object-cover"
+                    />
+                    <div className="text-sm/5 text-zinc-300">
+                      {postAuthors[post.author ?? ''].name}
+                    </div>
+                  </div>
+                )}
+              </div>
+            </div>
+          ))}
+        </div>
+      </Container>
+    </div>
+  )
+}
+
+function Posts({ page, category }: { page: number; category?: string }) {
+  let posts = allPosts.slice((page - 1) * postsPerPage, page * postsPerPage)
+
+  if (posts.length === 0 && (page > 1 || category)) {
+    notFound()
+  }
+
+  if (posts.length === 0) {
+    return <p className="mt-6 text-gray-500">No posts found.</p>
+  }
+
+  const postAuthors = fetchPostAuthors()
+
+  return (
+    <div className="mt-6">
+      {posts.map((post) => (
+        <div
+          key={post._meta.path}
+          className="relative grid grid-cols-1 border-b border-b-zinc-900 py-10 first:border-t first:border-t-zinc-900 max-sm:gap-3 sm:grid-cols-3"
+        >
+          <div>
+            <div className="text-sm/5 max-sm:text-gray-700 sm:font-medium">
+              {dayjs(post.date).format('dddd, MMMM D, YYYY')}
+            </div>
+            {postAuthors[post.author ?? ''] && (
+              <div className="mt-2.5 flex items-center gap-3">
+                {
+                  <img
+                    alt=""
+                    src={postAuthors[post.author ?? ''].avatar}
+                    className="aspect-square size-6 rounded-full object-cover"
+                  />
+                }
+                <div className="text-sm/5 text-zinc-300">
+                  {postAuthors[post.author ?? ''].name}
+                </div>
+              </div>
+            )}
+          </div>
+          <div className="sm:col-span-2 sm:max-w-2xl">
+            <h2 className="text-sm/5 font-medium">{post.title}</h2>
+            <p className="mt-3 text-sm/6 text-zinc-300">{post.excerpt}</p>
+            <div className="mt-4">
+              <Link
+                href={post.url}
+                className="flex items-center gap-1 text-sm/5 font-medium"
+              >
+                <span className="absolute inset-0" />
+                Read more
+                <ChevronRightIcon className="size-4 fill-gray-400" />
+              </Link>
+            </div>
+          </div>
+        </div>
+      ))}
+    </div>
+  )
+}
+
+function Pagination({
+  page,
+  category,
+}: {
+  page: number
+  category?: string
+}) {
+  function url(page: number) {
+    let params = new URLSearchParams()
+
+    if (category) params.set('category', category)
+    if (page > 1) params.set('page', page.toString())
+
+    return params.size !== 0 ? `/news?${params.toString()}` : '/news'
+  }
+
+  let totalPosts = allPosts.length
+  let hasPreviousPage = page - 1
+  let previousPageUrl = hasPreviousPage ? url(page - 1) : undefined
+  let hasNextPage = page * postsPerPage < totalPosts
+  let nextPageUrl = hasNextPage ? url(page + 1) : undefined
+  let pageCount = Math.ceil(totalPosts / postsPerPage)
+
+  if (pageCount < 2) {
+    return
+  }
+
+  return (
+    <div className="mt-6 flex items-center justify-between gap-2">
+      <Button
+        variant="outline"
+        href={previousPageUrl}
+        disabled={!previousPageUrl}
+      >
+        <ChevronLeftIcon className="size-4" />
+        Previous
+      </Button>
+      <div className="flex gap-2 max-sm:hidden">
+        {Array.from({ length: pageCount }, (_, i) => (
+          <Link
+            key={i + 1}
+            href={url(i + 1)}
+            data-active={i + 1 === page ? true : undefined}
+            className={clsx(
+              'size-7 rounded-lg text-center text-sm/7 font-medium',
+              'data-hover:bg-zinc-900',
+              'data-active:shadow-sm data-active:ring-1 data-active:ring-white/10',
+              'data-active:data-hover:bg-zinc-900',
+            )}
+          >
+            {i + 1}
+          </Link>
+        ))}
+      </div>
+      <Button variant="outline" href={nextPageUrl} disabled={!nextPageUrl}>
+        Next
+        <ChevronRightIcon className="size-4" />
+      </Button>
+    </div>
+  )
+}
+
+export default function News() {
+  const paramsPage = useSearchParams().get('page');
+  let page =
+    paramsPage
+      ? typeof paramsPage === 'string' && parseInt(paramsPage) > 1
+        ? parseInt(paramsPage)
+        : notFound()
+      : 1
+
+  return (
+    <main className="overflow-hidden">
+      <GradientBackground />
+      <Container>
+        <Navbar />
+        <Subheading className="mt-16">News</Subheading>
+        <Heading as="h1" className="mt-2">
+          What&apos;s about to drop?
+        </Heading>
+        <Lead className="mt-6 max-w-3xl">
+          Check out what&apos;s new and what&apos;s upcoming in Drop through our
+          hand-written articles by the core team of Drop.
+        </Lead>
+      </Container>
+      {page === 1 && <FeaturedPosts />}
+      <Container className="pb-24">
+        <Posts page={page} />
+        <Pagination page={page} />
+      </Container>
+      <Footer />
+    </main>
+  )
+}
@@ -0,0 +1,94 @@
+import { clsx } from 'clsx'
+
+export function PlusGrid({
+  className = '',
+  children,
+}: {
+  className?: string
+  children: React.ReactNode
+}) {
+  return <div className={className}>{children}</div>
+}
+
+export function PlusGridRow({
+  className = '',
+  children,
+}: {
+  className?: string
+  children: React.ReactNode
+}) {
+  return (
+    <div
+      className={clsx(
+        className,
+        'group/row relative isolate pt-[calc(--spacing(2)+1px)] last:pb-[calc(--spacing(2)+1px)]',
+      )}
+    >
+      <div
+        aria-hidden="true"
+        className="absolute inset-y-0 left-1/2 -z-10 w-screen -translate-x-1/2"
+      >
+        <div className="absolute inset-x-0 top-0 border-t border-white/5"></div>
+        <div className="absolute inset-x-0 top-2 border-t border-white/5"></div>
+        <div className="absolute inset-x-0 bottom-0 hidden border-b border-white/5 group-last/row:block"></div>
+        <div className="absolute inset-x-0 bottom-2 hidden border-b border-white/5 group-last/row:block"></div>
+      </div>
+      {children}
+    </div>
+  )
+}
+
+export function PlusGridItem({
+  className = '',
+  children,
+}: {
+  className?: string
+  children: React.ReactNode
+}) {
+  return (
+    <div className={clsx(className, 'group/item relative')}>
+      <PlusGridIcon
+        placement="top left"
+        className="hidden group-first/item:block"
+      />
+      <PlusGridIcon placement="top right" />
+      <PlusGridIcon
+        placement="bottom left"
+        className="hidden group-first/item:group-last/row:block"
+      />
+      <PlusGridIcon
+        placement="bottom right"
+        className="hidden group-last/row:block"
+      />
+      {children}
+    </div>
+  )
+}
+
+export function PlusGridIcon({
+  className = '',
+  placement,
+}: {
+  className?: string
+  placement: `${'top' | 'bottom'} ${'right' | 'left'}`
+}) {
+  let [yAxis, xAxis] = placement.split(' ')
+
+  let yClass = yAxis === 'top' ? '-top-2' : '-bottom-2'
+  let xClass = xAxis === 'left' ? '-left-2' : '-right-2'
+
+  return (
+    <svg
+      viewBox="0 0 15 15"
+      aria-hidden="true"
+      className={clsx(
+        className,
+        'absolute size-[15px] fill-white/10',
+        yClass,
+        xClass,
+      )}
+    >
+      <path d="M8 0H7V7H0V8H7V15H8V8H15V7H8V0Z" />
+    </svg>
+  )
+}
@@ -0,0 +1,13 @@
+export function fetchPostAuthors(): {
+  [key: string]: {
+    name: string
+    avatar: string
+  }
+} {
+  return {
+    decduck: {
+      name: 'DecDuck',
+      avatar: '/avatars/decduck.jpg',
+    },
+  }
+}
@@ -0,0 +1,31 @@
+import { clsx } from 'clsx'
+
+export function Screenshot({
+  width,
+  height,
+  src,
+  className,
+}: {
+  width: number
+  height: number
+  src: string
+  className?: string
+}) {
+  return (
+    <div
+      style={{ '--width': width, '--height': height } as React.CSSProperties}
+      className={clsx(
+        className,
+        'relative aspect-[var(--width)/var(--height)] [--radius:var(--radius-xl)]',
+      )}
+    >
+      <div className="absolute -inset-(--padding) rounded-[calc(var(--radius)+var(--padding))] shadow-xs ring-1 ring-black/5 [--padding:--spacing(2)]" />
+      <img
+        alt=""
+        src={src}
+        className="h-full rounded-(--radius) shadow-2xl ring-1 ring-black/10"
+      />
+      <span className='absolute bottom-0 left-0 text-xs text-zinc-300 text-center bg-zinc-900 rounded-(--radius) px-1 py-0.5'>All games and other content shown in screenshots are examples, without actual content.</span>
+    </div>
+  )
+}
@@ -0,0 +1,277 @@
+'use client'
+
+import * as Headless from '@headlessui/react'
+import { ArrowLongRightIcon } from '@heroicons/react/20/solid'
+import { clsx } from 'clsx'
+import {
+  MotionValue,
+  motion,
+  useMotionValueEvent,
+  useScroll,
+  useSpring,
+  type HTMLMotionProps,
+} from 'framer-motion'
+import {
+  useCallback,
+  useEffect,
+  useLayoutEffect,
+  useRef,
+  useState,
+} from 'react'
+import useMeasure, { type RectReadOnly } from 'react-use-measure'
+import { Container } from './container'
+import { Link } from './link'
+import { Heading, Subheading } from './text'
+
+function SponsorCard({
+  name,
+  from,
+  img,
+  bounds,
+  scrollX,
+  ...props
+}: {
+  img: string
+  name: string
+  from: string
+  bounds: RectReadOnly
+  scrollX: MotionValue<number>
+} & HTMLMotionProps<'div'>) {
+  let ref = useRef<HTMLDivElement | null>(null)
+
+  let computeOpacity = useCallback(() => {
+    let element = ref.current
+    if (!element || bounds.width === 0) return 1
+
+    let rect = element.getBoundingClientRect()
+
+    if (rect.left < bounds.left) {
+      let diff = bounds.left - rect.left
+      let percent = diff / rect.width
+      return Math.max(0.5, 1 - percent)
+    } else if (rect.right > bounds.right) {
+      let diff = rect.right - bounds.right
+      let percent = diff / rect.width
+      return Math.max(0.5, 1 - percent)
+    } else {
+      return 1
+    }
+  }, [ref, bounds.width, bounds.left, bounds.right])
+
+  let opacity = useSpring(computeOpacity(), {
+    stiffness: 154,
+    damping: 23,
+  })
+
+  useLayoutEffect(() => {
+    opacity.set(computeOpacity())
+  }, [computeOpacity, opacity])
+
+  useMotionValueEvent(scrollX, 'change', () => {
+    opacity.set(computeOpacity())
+  })
+
+  return (
+    <motion.div
+      ref={ref}
+      style={{ opacity }}
+      {...props}
+      className="relative flex w-64 rounded-3xl sm:w-72 bg-black"
+    >
+      <figure className="relative p-10">
+        <figcaption className="pb-3 border-b border-white/20">
+          <p className="text-sm/6 font-medium text-white">{name}</p>
+          <p className="text-sm/6 font-medium">
+            <span className="bg-linear-to-r from-sky-300 from-28% via-blue-200 via-70% to-cyan-300 bg-clip-text text-transparent">
+              {from}
+            </span>
+          </p>
+        </figcaption>
+      </figure>
+    </motion.div>
+  )
+}
+
+function CallToAction() {
+  return <div />
+  return (
+    <div>
+      <p className="max-w-sm text-sm/6 text-gray-600">
+        Join the best sellers in the business and start using Radiant to hit
+        your targets today.
+      </p>
+      <div className="mt-2">
+        <Link
+          href="#"
+          className="inline-flex items-center gap-2 text-sm/6 font-medium text-pink-600"
+        >
+          Get started
+          <ArrowLongRightIcon className="size-5" />
+        </Link>
+      </div>
+    </div>
+  )
+}
+
+type Sponsor = {
+  name: string
+  image: string
+  from: string
+}
+
+export function Sponsors() {
+  let scrollRef = useRef<HTMLDivElement | null>(null)
+  let { scrollX } = useScroll({ container: scrollRef })
+  let [setReferenceWindowRef, bounds] = useMeasure()
+  let [activeIndex, setActiveIndex] = useState(0)
+
+  useMotionValueEvent(scrollX, 'change', (x) => {
+    setActiveIndex(Math.floor(x / scrollRef.current!.children[0].clientWidth))
+  })
+
+  function scrollTo(index: number) {
+    let gap = 32
+    let width = (scrollRef.current!.children[0] as HTMLElement).offsetWidth
+    scrollRef.current!.scrollTo({ left: (width + gap) * index })
+  }
+
+  const [sponsors, setSponsors] = useState<Array<Sponsor> | null>(null)
+
+  useEffect(() => {
+    ;(async () => {
+      const cached = window.localStorage.getItem('sponsors')
+      if (cached) {
+        const cachedData = JSON.parse(cached)
+        if (cachedData.created + 1000 * 60 * 60 * 24 * 1 > Date.now()) {
+          setSponsors(cachedData.sponsors)
+          return
+        }
+      }
+
+      const openCollective: Array<{
+        role: 'BACKER'
+        image: string
+        name: string
+        totalAmountDonated: number
+      }> = await (
+        await fetch('https://opencollective.com/drop-oss/members/all.json')
+      ).json()
+
+      const ocSponsors = openCollective
+        .filter((e) => e.role === 'BACKER')
+        .sort((a, b) => b.totalAmountDonated - a.totalAmountDonated)
+        .map(
+          (v) =>
+            ({
+              name: v.name,
+              image: v.image ?? '/avatars/sponsor.png',
+              from: 'OpenCollective',
+            }) satisfies Sponsor,
+        )
+
+      /*
+      const octokit = new Octokit({})
+      const data: {
+        user: {
+          sponsors: {
+            edges: Array<Array<{ node: { avatarUrl: string; name: string } }>>
+          }
+        }
+      } = await octokit.graphql(`{
+  user(login: "DecDuck") {
+    sponsors(first: 100) {
+      edges {
+        node {
+          ... on User {
+            id
+            name
+            url
+            avatarUrl
+          }
+        }
+      }
+    }
+  }
+}`)
+
+      const githubSponsors = data.user.sponsors.edges
+        .flat()
+        .map((e) => e.node)
+        .map(
+          (e) =>
+            ({
+              image: e.avatarUrl,
+              name: e.name,
+              from: 'GitHub Sponsors',
+            }) satisfies Sponsor,
+        )
+            */
+
+      const githubSponsors: Sponsor[] = []
+
+      const sponsors = [...githubSponsors, ...ocSponsors]
+      window.localStorage.setItem(
+        'sponsors',
+        JSON.stringify({ created: Date.now(), sponsors }),
+      )
+      setSponsors(sponsors)
+    })()
+  }, [])
+
+  return (
+    <div className="mt-32 overflow-hidden">
+      <Container>
+        <div ref={setReferenceWindowRef}>
+          <Subheading>Financial</Subheading>
+          <Heading as="h3" className="mt-2">
+            The people who make this possible.
+          </Heading>
+        </div>
+      </Container>
+      <div
+        ref={scrollRef}
+        className={clsx([
+          'mt-16 flex gap-8 px-(--scroll-padding)',
+          '[scrollbar-width:none] [&::-webkit-scrollbar]:hidden',
+          'snap-x snap-mandatory overflow-x-auto overscroll-x-contain scroll-smooth',
+          '[--scroll-padding:max(--spacing(6),calc((100vw-(var(--container-2xl)))/2))] lg:[--scroll-padding:max(--spacing(8),calc((100vw-(var(--container-7xl)))/2))]',
+        ])}
+      >
+        {sponsors &&
+          sponsors.map(({ image, name, from }, testimonialIndex) => (
+            <SponsorCard
+              key={testimonialIndex}
+              name={name}
+              from={from}
+              img={image}
+              bounds={bounds}
+              scrollX={scrollX}
+              onClick={() => scrollTo(testimonialIndex)}
+            />
+          ))}
+        <div className="w-2xl shrink-0 sm:w-216" />
+      </div>
+      <Container className="mt-16">
+        <div className="flex justify-between">
+          <CallToAction />
+          <div className="hidden sm:flex sm:gap-2">
+            {sponsors &&
+              sponsors.map(({ name }, i) => (
+                <Headless.Button
+                  key={i}
+                  onClick={() => scrollTo(i)}
+                  data-active={activeIndex === i ? true : undefined}
+                  aria-label={`Scroll to sponsorship from ${name}`}
+                  className={clsx(
+                    'size-2.5 cursor-pointer rounded-full border border-transparent bg-zinc-600 transition',
+                    'data-active:bg-blue-700 data-hover:bg-zinc-900',
+                    'forced-colors:data-active:bg-[Highlight] forced-colors:data-focus:outline-offset-4',
+                  )}
+                />
+              ))}
+          </div>
+        </div>
+      </Container>
+    </div>
+  )
+}
@@ -0,0 +1,155 @@
+'use client'
+
+import Link from 'next/link'
+import { useEffect, useState } from 'react'
+import { Button } from './button'
+import { Container } from './container'
+import { Heading, Lead, Subheading } from './text'
+
+function Person({
+  name,
+  description,
+  img,
+  contributions,
+}: {
+  name: string
+  description: string
+  img: string
+  contributions: number
+}) {
+  return (
+    <li>
+      <Link
+        href={`https://github.com/${name}`}
+        target="_blank"
+        className="group flex items-center gap-4"
+      >
+        <img alt="" src={img} className="size-12 rounded-full" />
+        <div className="text-sm/6">
+          <h3 className="font-medium group-hover:underline">{name}</h3>
+          <p className="text-zinc-400">{description}</p>
+          <p className="text-xs font-semibold text-blue-600/80">
+            {contributions} contribution(s)
+          </p>
+        </div>
+      </Link>
+    </li>
+  )
+}
+
+type TeamObject = {
+  login: string
+  avatar_url: string
+  contributions: number
+  type: 'User'
+}
+
+const descriptionOverride: { [key: string]: string } = {
+  DecDuck: 'Lead Maintainer',
+  quexeky: 'Maintainer',
+}
+
+export function Team() {
+  const [team, setTeam] = useState<Array<TeamObject> | null>(null)
+
+  useEffect(() => {
+    ;(async () => {
+      const cached = window.localStorage.getItem('team')
+      if (cached) {
+        const cachedData = JSON.parse(cached)
+        if (cachedData.created + 1000 * 60 * 60 * 24 * 1 > Date.now()) {
+          setTeam(cachedData.team)
+          return
+        }
+      }
+
+      const dropTeam: Array<TeamObject> = await (
+        await fetch('https://api.github.com/repos/Drop-OSS/drop/contributors')
+      ).json()
+      const dropAppTeam: Array<TeamObject> = await (
+        await fetch(
+          'https://api.github.com/repos/Drop-OSS/drop-app/contributors',
+        )
+      ).json()
+
+      const teamObj: { [key: string]: TeamObject } = {}
+      for (const user of [...dropTeam, ...dropAppTeam]) {
+        if (user.login === 'weblate' || user.type !== 'User') continue
+        if (teamObj[user.login]) {
+          teamObj[user.login].contributions += user.contributions
+        } else {
+          teamObj[user.login] = user
+        }
+      }
+      const team = Object.values(teamObj).sort(
+        (a, b) => b.contributions - a.contributions,
+      )
+
+      window.localStorage.setItem(
+        'team',
+        JSON.stringify({ team, created: Date.now() }),
+      )
+      setTeam(team)
+    })()
+  }, [])
+
+  return (
+    <Container className="mt-32">
+      <Subheading>Meet the developers</Subheading>
+      <Heading as="h3" className="mt-2">
+        Who&apos;s behind Drop?
+      </Heading>
+      <Lead className="mt-6 max-w-3xl">
+        Drop OSS was started by privacy and FOSS advocates who know a little
+        code.
+      </Lead>
+      <div className="mt-12 grid grid-cols-1 gap-12 lg:grid-cols-2">
+        <div className="max-w-lg">
+          <p className="text-sm/6 text-zinc-400">
+            Drop OSS was started, mostly on a whim, in response to frustrations
+            with the controlled nature of DRM games, and the missing comforts of
+            DRM-free games. Since then, we&apos;ve put together a small circle
+            of dedicated maintainers and contributors to develop Drop and all
+            its amazing features.
+          </p>
+          <p className="mt-8 text-sm/6 text-zinc-400">
+            If you know a little code, you can help out! We heavily encourage
+            contributions, especially if you&apos;re passionate about the
+            project and enjoy writing code. We use a variety of stacks across
+            the various projects we maintain, but we predominantly use Vue,
+            Rust, and Typescript.
+          </p>
+          <div className="mt-6">
+            <Button
+              className="w-full sm:w-auto"
+              href="https://developer.droposs.org/contributing"
+              target="_blank"
+              variant="outline"
+            >
+              Contribute &rarr;
+            </Button>
+          </div>
+        </div>
+      </div>
+      <Subheading id="team" as="h3" className="mt-24">
+        The team
+      </Subheading>
+      <hr className="mt-6 border-t border-zinc-800" />
+      <ul
+        role="list"
+        className="mx-auto mt-16 grid grid-cols-1 gap-8 sm:grid-cols-3 lg:grid-cols-4"
+      >
+        {team &&
+          team.map((member) => (
+            <Person
+              key={member.login}
+              name={member.login}
+              description={`${descriptionOverride[member.login] ?? 'Contributor'}`}
+              contributions={member.contributions}
+              img={member.avatar_url}
+            />
+          ))}
+      </ul>
+    </Container>
+  )
+}
@@ -0,0 +1,56 @@
+import { clsx } from 'clsx'
+
+type HeadingProps = {
+  as?: 'div' | 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6'
+  dark?: boolean
+} & React.ComponentPropsWithoutRef<
+  'div' | 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6'
+>
+
+export function Heading({
+  className,
+  as: Element = 'h2',
+  dark = false,
+  ...props
+}: HeadingProps) {
+  return (
+    <Element
+      {...props}
+      data-dark={dark ? 'true' : undefined}
+      className={clsx(
+        className,
+        'text-4xl font-medium tracking-tighter text-pretty text-white sm:text-6xl',
+      )}
+    />
+  )
+}
+
+export function Subheading({
+  className,
+  as: Element = 'h2',
+  dark = false,
+  ...props
+}: HeadingProps) {
+  return (
+    <Element
+      {...props}
+      data-dark={dark ? 'true' : undefined}
+      className={clsx(
+        className,
+        'font-mono text-xs/5 font-semibold tracking-widest uppercase text-zinc-500',
+      )}
+    />
+  )
+}
+
+export function Lead({
+  className,
+  ...props
+}: React.ComponentPropsWithoutRef<'p'>) {
+  return (
+    <p
+      className={clsx(className, 'text-2xl font-medium text-gray-500')}
+      {...props}
+    />
+  )
+}