From 0290718ee04a6322e9e16d0fd1ca6ed39d4d8745 Mon Sep 17 00:00:00 2001
From: DecDuck <declanahofmeyr@gmail.com>
Date: Sun, 21 Jun 2026 11:31:21 +1000
Subject: [PATCH] Fix droposs.org build, finish website (#429)

* Fix compile issues

* Finish up website
---
 sites/promo/src/app/page.tsx                | 86 +++++++++++++++++++--
 sites/promo/src/components/bento-card.tsx   |  6 ++
 sites/promo/src/components/logo-cluster.tsx |  2 +-
 sites/promo/src/components/sponsors.tsx     |  1 +
 4 files changed, 88 insertions(+), 7 deletions(-)

diff --git a/sites/promo/src/app/page.tsx b/sites/promo/src/app/page.tsx
index b9bf0c03..0be8da72 100644
--- a/sites/promo/src/app/page.tsx
+++ b/sites/promo/src/app/page.tsx
@@ -6,7 +6,14 @@ import { Gradient } from '@/components/gradient'
 import { LogoCluster } from '@/components/logo-cluster'
 import { Navbar } from '@/components/navbar'
 import { Heading, Subheading } from '@/components/text'
-import { ArrowDownCircleIcon } from '@heroicons/react/24/solid'
+import {
+  BuildingStorefrontIcon,
+  CloudArrowDownIcon,
+  ComputerDesktopIcon,
+  PencilSquareIcon,
+  ServerStackIcon,
+  ShieldCheckIcon,
+} from '@heroicons/react/24/solid'
 import type { Metadata } from 'next'
 
 export const metadata: Metadata = {
@@ -54,7 +61,7 @@ function FeatureSection() {
 
           <p className="mt-6 text-lg/8 text-zinc-400">
             Drop is built from the ground up to be flexible, fast, and
-            beautiful. It's designed to scale with your library, and handle
+            beautiful. It&apos;s designed to scale with your library, and handle
             thousands of games.
           </p>
         </div>
@@ -77,13 +84,80 @@ function FeatureSection() {
         <dl className="mx-auto grid max-w-2xl grid-cols-1 gap-x-6 gap-y-10 text-base/7 text-zinc-400 sm:grid-cols-2 lg:mx-0 lg:max-w-none lg:grid-cols-3 lg:gap-x-8 lg:gap-y-16">
           <div className="relative pl-9">
             <dt className="inline font-semibold text-zinc-100">
-              <ArrowDownCircleIcon
+              <ServerStackIcon
                 aria-hidden="true"
                 className="absolute top-1 left-1 size-5 text-blue-600"
               />
-              ADASDASD
+              Self-hosted &amp; open-source.
             </dt>{' '}
-            <dd className="inline">ASDASDASDAS</dd>
+            <dd className="inline">
+              Run Drop entirely on your own hardware. Your library, your data,
+              your rules &mdash; all under the AGPLv3.
+            </dd>
+          </div>
+          <div className="relative pl-9">
+            <dt className="inline font-semibold text-zinc-100">
+              <PencilSquareIcon
+                aria-hidden="true"
+                className="absolute top-1 left-1 size-5 text-blue-600"
+              />
+              Rich metadata editing.
+            </dt>{' '}
+            <dd className="inline">
+              Customise names, descriptions, and icons with full Markdown and
+              image support.
+            </dd>
+          </div>
+          <div className="relative pl-9">
+            <dt className="inline font-semibold text-zinc-100">
+              <CloudArrowDownIcon
+                aria-hidden="true"
+                className="absolute top-1 left-1 size-5 text-blue-600"
+              />
+              Automatic imports.
+            </dt>{' '}
+            <dd className="inline">
+              Pull cover art and game details straight from IGDB, GiantBomb, and
+              PCGamingWiki.
+            </dd>
+          </div>
+          <div className="relative pl-9">
+            <dt className="inline font-semibold text-zinc-100">
+              <BuildingStorefrontIcon
+                aria-hidden="true"
+                className="absolute top-1 left-1 size-5 text-blue-600"
+              />
+              A built-in store.
+            </dt>{' '}
+            <dd className="inline">
+              Let users browse, filter, and collect games through a fully
+              featured store.
+            </dd>
+          </div>
+          <div className="relative pl-9">
+            <dt className="inline font-semibold text-zinc-100">
+              <ShieldCheckIcon
+                aria-hidden="true"
+                className="absolute top-1 left-1 size-5 text-blue-600"
+              />
+              Flexible authentication.
+            </dt>{' '}
+            <dd className="inline">
+              Use simple accounts or hook into your existing SSO.
+            </dd>
+          </div>
+          <div className="relative pl-9">
+            <dt className="inline font-semibold text-zinc-100">
+              <ComputerDesktopIcon
+                aria-hidden="true"
+                className="absolute top-1 left-1 size-5 text-blue-600"
+              />
+              Native desktop client.
+            </dt>{' '}
+            <dd className="inline">
+              Download, install, and play your whole library through a
+              cross-platform desktop client.
+            </dd>
           </div>
         </dl>
       </div>
@@ -127,7 +201,7 @@ function BentoSection() {
         <BentoCard
           eyebrow="Authentication"
           title="Flexible authentication"
-          description="Drop supports both simple and SSO authentication, with more features like SCIM on the way."
+          description="Drop supports both simple and SSO authentication, so users can sign in however suits them."
           graphic={
             <div className="flex h-full w-full items-center justify-center p-4">
               <div className="bg-position-center h-full w-full grow rounded-lg bg-[url(/screenshots/authentication.png)] bg-cover bg-no-repeat" />
diff --git a/sites/promo/src/components/bento-card.tsx b/sites/promo/src/components/bento-card.tsx
index 1fe8263f..f7d457b6 100644
--- a/sites/promo/src/components/bento-card.tsx
+++ b/sites/promo/src/components/bento-card.tsx
@@ -35,6 +35,12 @@ export function BentoCard({
     >
       <div className="relative h-80 shrink-0">
         {graphic}
+        {fade.includes('top') && (
+          <div className="absolute inset-0 bg-linear-to-b from-zinc-900 to-50%" />
+        )}
+        {fade.includes('bottom') && (
+          <div className="absolute inset-0 bg-linear-to-t from-zinc-900 to-50%" />
+        )}
       </div>
       <div className="relative p-10">
         <Subheading as="h3" dark={dark}>
diff --git a/sites/promo/src/components/logo-cluster.tsx b/sites/promo/src/components/logo-cluster.tsx
index ddfb901a..0c9216b7 100644
--- a/sites/promo/src/components/logo-cluster.tsx
+++ b/sites/promo/src/components/logo-cluster.tsx
@@ -46,7 +46,7 @@ function Circles() {
       <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 className="absolute inset-0 bg-linear-to-t from-zinc-900 to-35%" />
     </div>
   )
 }
diff --git a/sites/promo/src/components/sponsors.tsx b/sites/promo/src/components/sponsors.tsx
index 0c656027..a696c8b9 100644
--- a/sites/promo/src/components/sponsors.tsx
+++ b/sites/promo/src/components/sponsors.tsx
@@ -79,6 +79,7 @@ function SponsorCard({
       className="relative flex w-64 rounded-3xl sm:w-72 bg-black"
     >
       <figure className="relative p-10">
+        <img alt={name} src={img} className="mb-4 size-12 rounded-full" />
         <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">