mirror of
https://github.com/Drop-OSS/drop.git
synced 2026-07-14 14:46:41 +10:00
move to new website, wiped history
This commit is contained in:
DecDuck
@@ -0,0 +1,171 @@
|
||||
import { AnimatedNumber } from '@/components/animated-number'
|
||||
import { Container } from '@/components/container'
|
||||
import { Footer } from '@/components/footer'
|
||||
import { GradientBackground } from '@/components/gradient'
|
||||
import { Navbar } from '@/components/navbar'
|
||||
import { Team } from '@/components/team'
|
||||
import { Heading, Lead, Subheading } from '@/components/text'
|
||||
import type { Metadata } from 'next'
|
||||
import Link from 'next/link'
|
||||
|
||||
export const metadata: Metadata = {
|
||||
title: 'About',
|
||||
description:
|
||||
'About Drop OSS - what we do, what we believe, and what we aim to achieve.',
|
||||
}
|
||||
|
||||
function Header() {
|
||||
return (
|
||||
<Container className="mt-16">
|
||||
<Heading as="h1">An open Steam.</Heading>
|
||||
<Lead className="mt-6 max-w-3xl">
|
||||
We're building an open-source alternative to platforms like Steam
|
||||
and Epic Games, enabling anyone to have full control over their gaming.
|
||||
</Lead>
|
||||
<section className="mt-16 grid grid-cols-1 lg:grid-cols-2 lg:gap-12">
|
||||
<div className="max-w-lg">
|
||||
<h2 className="text-2xl font-medium tracking-tight">Our mission</h2>
|
||||
<p className="mt-6 text-sm/6 text-gray-600">
|
||||
We aim to build a "Steam-like experience for DRM-free
|
||||
games". One of the major sticking points of DRM games, and why
|
||||
platforms like Steam have done so well, is that they provide awesome
|
||||
features like worldwide play-together, social features, and useful
|
||||
overlays and tools. We aim to replicate this for <i>any</i> game.
|
||||
</p>
|
||||
<p className="mt-8 text-sm/6 text-gray-600">
|
||||
Don't get us wrong, we don't think Steam or Valve is bad.
|
||||
They are unusually consumer-friendly, and provide a great service.
|
||||
They will always have a place, providing a marketplace for DRM
|
||||
games. Drop aims to be the alternative.
|
||||
</p>
|
||||
</div>
|
||||
<div className="max-lg:mt-16 lg:col-span-1">
|
||||
<Subheading>The Numbers</Subheading>
|
||||
<hr className="mt-6 border-t border-gray-200" />
|
||||
<dl className="mt-6 grid grid-cols-1 gap-x-8 gap-y-4 sm:grid-cols-2">
|
||||
<div className="flex flex-col gap-y-2 border-b border-dotted border-gray-200 pb-4">
|
||||
<dt className="text-sm/6 text-gray-600">Lines of code</dt>
|
||||
<dd className="order-first text-6xl font-medium tracking-tight">
|
||||
<AnimatedNumber start={10} end={40} />k
|
||||
</dd>
|
||||
</div>
|
||||
<div className="flex flex-col gap-y-2 border-b border-dotted border-gray-200 pb-4">
|
||||
<dt className="text-sm/6 text-gray-600">
|
||||
Individual open-source projects
|
||||
</dt>
|
||||
<dd className="order-first text-6xl font-medium tracking-tight">
|
||||
>
|
||||
<AnimatedNumber start={0} end={5} />
|
||||
</dd>
|
||||
</div>
|
||||
<div className="flex flex-col gap-y-2 max-sm:border-b max-sm:border-dotted max-sm:border-gray-200 max-sm:pb-4">
|
||||
<dt className="text-sm/6 text-gray-600">Docker pulls</dt>
|
||||
<dd className="order-first text-6xl font-medium tracking-tight">
|
||||
<AnimatedNumber start={0} end={12.2} decimals={1} />k
|
||||
</dd>
|
||||
</div>
|
||||
<div className="flex flex-col gap-y-2">
|
||||
<dt className="text-sm/6 text-gray-600">Contributors</dt>
|
||||
<dd className="order-first text-6xl font-medium tracking-tight">
|
||||
>
|
||||
<AnimatedNumber start={0} end={10} />
|
||||
</dd>
|
||||
</div>
|
||||
</dl>
|
||||
</div>
|
||||
</section>
|
||||
</Container>
|
||||
)
|
||||
}
|
||||
|
||||
function FrequentlyAskedQuestions() {
|
||||
return (
|
||||
<Container className="mt-32">
|
||||
<section id="faqs" className="scroll-mt-8">
|
||||
<Subheading className="">Frequently asked questions</Subheading>
|
||||
<Heading as="div" className="mt-2">
|
||||
Your questions answered.
|
||||
</Heading>
|
||||
<div className="mt-16 mb-32 max-w-xl space-y-12">
|
||||
<dl>
|
||||
<dt className="text-sm font-semibold">
|
||||
Do you intend to replace Steam?
|
||||
</dt>
|
||||
<dd className="mt-4 text-sm/6 text-gray-600">
|
||||
No. Drop is not a replacement for Steam, in the sense that we will
|
||||
ever offer a marketplace for developers to sell games. Drop can
|
||||
replace Steam <i>for an individual</i>, if they only played
|
||||
DRM-free games that they bought from outside of Steam (like GOG).
|
||||
</dd>
|
||||
</dl>
|
||||
<dl>
|
||||
<dt className="text-sm font-semibold">
|
||||
Will Drop ever cost money or require a subscription?
|
||||
</dt>
|
||||
<dd className="mt-4 text-sm/6 text-gray-600">
|
||||
We believe in <strong>paying for services, not code</strong>. All
|
||||
our projects are and always will be open source (AGPLv3), and we
|
||||
endeavour to allow users to self-host as much of it as possible.
|
||||
Where that is not possible, we may launch a subscription service -
|
||||
likely as a feature for multiplayer, to play between self-hosted
|
||||
Drop instances. Naturally, this service will also be available to
|
||||
self-host.
|
||||
</dd>
|
||||
</dl>
|
||||
<dl>
|
||||
<dt className="text-sm font-semibold">Is Drop legal?</dt>
|
||||
<dd className="mt-4 text-sm/6 text-gray-600">
|
||||
Yes. Officially, Drop is <strong>only</strong> for DRM-free games,
|
||||
like the ones you purchase from GOG or download from itch.io,{' '}
|
||||
<strong>and</strong> that you have a license to redistribute. We
|
||||
cannot control whether you use Drop with cracked, pirated, or
|
||||
DRM-bypassed games or not, and do not condone the use of
|
||||
torrenting and automation software to automatically download
|
||||
games.
|
||||
</dd>
|
||||
</dl>
|
||||
<dl>
|
||||
<dt className="text-sm font-semibold">How can I support Drop or get involved?</dt>
|
||||
<dd className="mt-4 text-sm/6 text-gray-600">
|
||||
Thank you for helping us out! If you're looking to contribute
|
||||
code, check out our{' '}
|
||||
<Link
|
||||
href="https://developer.droposs.org/contributing"
|
||||
className="text-blue-500 hover:underline"
|
||||
target="_blank"
|
||||
>
|
||||
developer contributing guide
|
||||
</Link>
|
||||
. If you're looking to contribute financially, you can join
|
||||
our{' '}
|
||||
<Link
|
||||
href="https://opencollective.com/drop-oss"
|
||||
className="text-blue-500 hover:underline"
|
||||
target="_blank"
|
||||
>
|
||||
OpenCollective
|
||||
</Link>
|
||||
, or click on individual contributors above and add to their
|
||||
personal pockets.
|
||||
</dd>
|
||||
</dl>
|
||||
</div>
|
||||
</section>
|
||||
</Container>
|
||||
)
|
||||
}
|
||||
|
||||
export default function About() {
|
||||
return (
|
||||
<main className="overflow-hidden">
|
||||
<GradientBackground />
|
||||
<Container>
|
||||
<Navbar />
|
||||
</Container>
|
||||
<Header />
|
||||
<Team />
|
||||
<FrequentlyAskedQuestions />
|
||||
<Footer />
|
||||
</main>
|
||||
)
|
||||
}
|
||||
@@ -0,0 +1,14 @@
|
||||
import Comparison from "@/components/comparison";
|
||||
import type { Metadata } from "next";
|
||||
import { Suspense } from "react";
|
||||
|
||||
export const metadata: Metadata = {
|
||||
title: 'Comparison',
|
||||
description:
|
||||
'A breakdown of the different projects you may be interested in, and the pros & cons of each.',
|
||||
}
|
||||
|
||||
|
||||
export default function ComparisonPage() {
|
||||
return <Suspense><Comparison /></Suspense>
|
||||
}
|
||||
@@ -0,0 +1,42 @@
|
||||
import { Container } from '@/components/container'
|
||||
import DownloadCards from '@/components/downloads'
|
||||
import { Footer } from '@/components/footer'
|
||||
import { GradientBackground } from '@/components/gradient'
|
||||
import { Navbar } from '@/components/navbar'
|
||||
import { Heading, Lead, Subheading } from '@/components/text'
|
||||
import type { Metadata } from 'next'
|
||||
|
||||
export const metadata: Metadata = {
|
||||
title: 'Download',
|
||||
description: 'Download the latest version of the Drop client.',
|
||||
}
|
||||
|
||||
function Header() {
|
||||
return (
|
||||
<Container className="mt-16">
|
||||
<Heading as="h1" className="leading-12">
|
||||
Download
|
||||
</Heading>
|
||||
<Lead className="mt-6 max-w-3xl">
|
||||
Download the latest version of the Drop Desktop Client for your platform.
|
||||
</Lead>
|
||||
<Subheading className="mt-2">Last updated 05-09-2025</Subheading>
|
||||
</Container>
|
||||
)
|
||||
}
|
||||
|
||||
export default function DownloadPage() {
|
||||
return (
|
||||
<main className="overflow-hidden">
|
||||
<GradientBackground />
|
||||
<Container>
|
||||
<Navbar />
|
||||
</Container>
|
||||
<Header />
|
||||
|
||||
<DownloadCards />
|
||||
|
||||
<Footer />
|
||||
</main>
|
||||
)
|
||||
}
|
||||
Binary file not shown.
|
After Width: | Height: | Size: 15 KiB |
@@ -0,0 +1,25 @@
|
||||
import { Container } from '@/components/container'
|
||||
import { Footer } from '@/components/footer'
|
||||
import { Gallery } from '@/components/gallery-modal'
|
||||
import { GradientBackground } from '@/components/gradient'
|
||||
import { Navbar } from '@/components/navbar'
|
||||
import type { Metadata } from 'next'
|
||||
|
||||
export const metadata: Metadata = {
|
||||
title: 'Gallery',
|
||||
description: 'A collection of screenshots, across all components of Drop.',
|
||||
}
|
||||
|
||||
|
||||
export default function About() {
|
||||
return (
|
||||
<main className="overflow-hidden">
|
||||
<GradientBackground />
|
||||
<Container>
|
||||
<Navbar />
|
||||
</Container>
|
||||
<Gallery />
|
||||
<Footer />
|
||||
</main>
|
||||
)
|
||||
}
|
||||
@@ -0,0 +1,23 @@
|
||||
import '@/styles/tailwind.css'
|
||||
import type { Metadata } from 'next'
|
||||
|
||||
export const metadata: Metadata = {
|
||||
title: {
|
||||
template: '%s - Drop OSS',
|
||||
default: 'Drop - An open Steam',
|
||||
},
|
||||
}
|
||||
|
||||
export default function RootLayout({
|
||||
children,
|
||||
}: Readonly<{
|
||||
children: React.ReactNode
|
||||
}>) {
|
||||
return (
|
||||
<html lang="en">
|
||||
<body className="text-gray-950 antialiased">
|
||||
{children}
|
||||
</body>
|
||||
</html>
|
||||
)
|
||||
}
|
||||
@@ -0,0 +1,104 @@
|
||||
import { Button } from '@/components/button'
|
||||
import { Container } from '@/components/container'
|
||||
import Content from '@/components/content'
|
||||
import { Footer } from '@/components/footer'
|
||||
import { GradientBackground } from '@/components/gradient'
|
||||
import { Navbar } from '@/components/navbar'
|
||||
import { fetchPostAuthors } from '@/components/post'
|
||||
import { Heading, Subheading } from '@/components/text'
|
||||
import { ChevronLeftIcon } from '@heroicons/react/16/solid'
|
||||
import { allPosts } from 'content-collections'
|
||||
import dayjs from 'dayjs'
|
||||
import { notFound } from 'next/navigation'
|
||||
|
||||
export const generateStaticParams = async () =>
|
||||
allPosts.map((post) => ({ slug: post._meta.path }))
|
||||
|
||||
export const generateMetadata = async ({
|
||||
params,
|
||||
}: {
|
||||
params: Promise<{ slug: string }>
|
||||
}) => {
|
||||
const aParams = await params
|
||||
const post = allPosts.find((post) => post._meta.path === aParams.slug)
|
||||
if (!post) notFound()
|
||||
return { title: post.title, description: post.excerpt }
|
||||
}
|
||||
|
||||
export default async function BlogPost({
|
||||
params,
|
||||
}: {
|
||||
params: Promise<{ slug: string }>
|
||||
}) {
|
||||
const aParams = await params
|
||||
const post = allPosts.find((post) => post._meta.path === aParams.slug)
|
||||
if (!post) notFound()
|
||||
|
||||
const postAuthors = fetchPostAuthors()
|
||||
|
||||
const author = post.author ? postAuthors[post.author] : undefined
|
||||
const tags = (post.tags ?? '').split(',').map((e) => e.trim())
|
||||
|
||||
return (
|
||||
<main className="overflow-hidden">
|
||||
<GradientBackground />
|
||||
<Container>
|
||||
<Navbar />
|
||||
<Subheading className="mt-16">
|
||||
{dayjs(post.date).format('dddd, MMMM D, YYYY')}
|
||||
</Subheading>
|
||||
<Heading as="h1" className="mt-2">
|
||||
{post.title}
|
||||
</Heading>
|
||||
<div className="mt-16 grid grid-cols-1 gap-8 pb-24 lg:grid-cols-[15rem_1fr] xl:grid-cols-[15rem_1fr_15rem]">
|
||||
<div className="flex flex-wrap items-center gap-8 max-lg:justify-between lg:flex-col lg:items-start">
|
||||
{author && (
|
||||
<div className="flex items-center gap-3">
|
||||
{author.avatar && (
|
||||
<img
|
||||
alt=""
|
||||
src={author.avatar}
|
||||
className="aspect-square size-6 rounded-full object-cover"
|
||||
/>
|
||||
)}
|
||||
<div className="text-sm/5 text-gray-700">{author.name}</div>
|
||||
</div>
|
||||
)}
|
||||
{
|
||||
<div className="flex flex-wrap gap-2">
|
||||
{tags.map((tag) => (
|
||||
<div
|
||||
key={tag}
|
||||
className="rounded-full border border-dotted border-gray-300 bg-gray-50 px-2 text-sm/6 font-medium text-gray-500"
|
||||
>
|
||||
{tag}
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
}
|
||||
</div>
|
||||
<div className="text-gray-700">
|
||||
<div className="max-w-2xl xl:mx-auto">
|
||||
{post.image && (
|
||||
<img
|
||||
alt={post.title}
|
||||
src={post.image}
|
||||
className="mb-10 aspect-3/2 w-full rounded-2xl object-cover shadow-xl"
|
||||
/>
|
||||
)}
|
||||
<Content content={post} />
|
||||
|
||||
<div className="mt-10">
|
||||
<Button variant="outline" href="/news">
|
||||
<ChevronLeftIcon className="size-4" />
|
||||
Back to news
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</Container>
|
||||
<Footer />
|
||||
</main>
|
||||
)
|
||||
}
|
||||
@@ -0,0 +1,12 @@
|
||||
import News from '@/components/news'
|
||||
import type { Metadata } from 'next'
|
||||
import { Suspense } from 'react'
|
||||
|
||||
export const metadata: Metadata = {
|
||||
title: 'News',
|
||||
description: 'Stay up to date with updates and information about Drop.',
|
||||
}
|
||||
|
||||
export default function NewsPage() {
|
||||
return <Suspense><News /></Suspense>
|
||||
}
|
||||
@@ -0,0 +1,34 @@
|
||||
import { Container } from '@/components/container'
|
||||
import { Footer } from '@/components/footer'
|
||||
import { GradientBackground } from '@/components/gradient'
|
||||
import { Navbar } from '@/components/navbar'
|
||||
import { Heading, Subheading } from '@/components/text'
|
||||
import type { Metadata } from 'next'
|
||||
|
||||
export const metadata: Metadata = {
|
||||
title: 'Not Found',
|
||||
description: "We couldn't find this page, or doesn't exist.",
|
||||
}
|
||||
|
||||
export default function About() {
|
||||
return (
|
||||
<main className="overflow-hidden">
|
||||
<GradientBackground />
|
||||
<Container>
|
||||
<Navbar />
|
||||
</Container>
|
||||
<main className="grid min-h-full place-items-center bg-white px-6 py-24 sm:py-32 lg:px-8">
|
||||
<div className="text-center">
|
||||
<Subheading>404</Subheading>
|
||||
<Heading>
|
||||
Page not found
|
||||
</Heading>
|
||||
<p className="mt-6 text-lg font-medium text-pretty text-gray-500 sm:text-xl/8">
|
||||
Sorry, we couldn't find the page you're looking for.
|
||||
</p>
|
||||
</div>
|
||||
</main>
|
||||
<Footer />
|
||||
</main>
|
||||
)
|
||||
}
|
||||
@@ -0,0 +1,143 @@
|
||||
import { BentoCard } from '@/components/bento-card'
|
||||
import { Button } from '@/components/button'
|
||||
import { Container } from '@/components/container'
|
||||
import { Footer } from '@/components/footer'
|
||||
import { Gradient } from '@/components/gradient'
|
||||
import { LogoCluster } from '@/components/logo-cluster'
|
||||
import { Navbar } from '@/components/navbar'
|
||||
import { Screenshot } from '@/components/screenshot'
|
||||
import { Heading, Subheading } from '@/components/text'
|
||||
import type { Metadata } from 'next'
|
||||
|
||||
export const metadata: Metadata = {
|
||||
description:
|
||||
'Radiant helps you sell more by revealing sensitive information about your customers.',
|
||||
}
|
||||
|
||||
function Hero() {
|
||||
return (
|
||||
<div className="relative">
|
||||
<Gradient className="absolute inset-2 bottom-0 rounded-4xl ring-1 ring-black/5 ring-inset" />
|
||||
<Container className="relative">
|
||||
<Navbar />
|
||||
<div className="pt-16 pb-24 sm:pt-24 sm:pb-32 md:pt-32 md:pb-48">
|
||||
<h1 className="font-display text-6xl/[0.9] font-medium tracking-tight text-balance text-gray-950 sm:text-8xl/[0.8] md:text-9xl/[0.8]">
|
||||
An open Steam.
|
||||
</h1>
|
||||
<p className="mt-8 max-w-lg text-xl/7 font-medium text-gray-950/75 sm:text-2xl/8">
|
||||
Drop is an open-source, self-hosted alternative to platforms like
|
||||
Steam and Epic.
|
||||
</p>
|
||||
<div className="mt-12 flex flex-col gap-x-6 gap-y-4 sm:flex-row">
|
||||
<Button href="#">Get started</Button>
|
||||
<Button variant="secondary" href="/about">
|
||||
About
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
</Container>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
function FeatureSection() {
|
||||
return (
|
||||
<div className="overflow-hidden">
|
||||
<Container className="pb-24">
|
||||
<Heading as="h2" className="max-w-3xl">
|
||||
A better experience for DRM‑free games.
|
||||
</Heading>
|
||||
<Screenshot
|
||||
width={3408}
|
||||
height={1846}
|
||||
src="/screenshots/app.webp"
|
||||
className="mt-16 h-144 sm:h-auto sm:w-304"
|
||||
/>
|
||||
</Container>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
function BentoSection() {
|
||||
return (
|
||||
<Container>
|
||||
<Subheading>Features</Subheading>
|
||||
<Heading as="h3" className="mt-2 max-w-3xl">
|
||||
Upgrade your games library.
|
||||
</Heading>
|
||||
|
||||
<div className="mt-10 grid grid-cols-1 gap-4 sm:mt-16 lg:grid-cols-6 lg:grid-rows-2">
|
||||
<BentoCard
|
||||
eyebrow="Metadata"
|
||||
title="Rich metadata editing"
|
||||
description="Drop has a rich metadata editor - you can use Markdown, images, and update icons, descriptions, and names."
|
||||
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/metadata.webp)] bg-cover bg-no-repeat" />
|
||||
</div>
|
||||
}
|
||||
fade={['bottom']}
|
||||
className="max-lg:rounded-t-4xl lg:col-span-3 lg:rounded-tl-4xl"
|
||||
/>
|
||||
<BentoCard
|
||||
eyebrow="Store"
|
||||
title="Let your users discover games"
|
||||
description="Drop has a fully featured store, where your users can discover and filter your game library, and create collections of their favourite games."
|
||||
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/storepage.png)] bg-cover bg-no-repeat" />
|
||||
</div>
|
||||
}
|
||||
fade={['bottom']}
|
||||
className="lg:col-span-3 lg:rounded-tr-4xl"
|
||||
/>
|
||||
<BentoCard
|
||||
eyebrow="Authentication"
|
||||
title="Flexible authentication"
|
||||
description="Drop supports both simple and SSO authentication, with more features like SCIM on the way."
|
||||
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" />
|
||||
</div>
|
||||
}
|
||||
fade={['bottom']}
|
||||
className="lg:col-span-2 lg:rounded-bl-4xl"
|
||||
/>
|
||||
<BentoCard
|
||||
eyebrow="Metadata"
|
||||
title="Automatically import metadata"
|
||||
description="Drop can import metadata for your games from platforms like IGDB, GiantBomb, and PCGamingWiki."
|
||||
graphic={<LogoCluster />}
|
||||
className="lg:col-span-2"
|
||||
/>
|
||||
<BentoCard
|
||||
eyebrow="News"
|
||||
title="Keep your users up-to-date with server news"
|
||||
description="Admins can write news articles that appear in-browser and client, to keep users up-to-date."
|
||||
fade={['bottom']}
|
||||
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/news.png)] bg-cover bg-no-repeat" />
|
||||
</div>
|
||||
}
|
||||
className="max-lg:rounded-b-4xl lg:col-span-2 lg:rounded-br-4xl"
|
||||
/>
|
||||
</div>
|
||||
</Container>
|
||||
)
|
||||
}
|
||||
|
||||
export default function Home() {
|
||||
return (
|
||||
<div className="overflow-hidden">
|
||||
<Hero />
|
||||
<main>
|
||||
<div className="bg-linear-to-b from-white from-50% to-gray-100 py-32">
|
||||
<FeatureSection />
|
||||
<BentoSection />
|
||||
</div>
|
||||
</main>
|
||||
<Footer />
|
||||
</div>
|
||||
)
|
||||
}
|
||||
@@ -0,0 +1,73 @@
|
||||
import { Button } from '@/components/button'
|
||||
import { Container } from '@/components/container'
|
||||
import { Footer } from '@/components/footer'
|
||||
import { GradientBackground } from '@/components/gradient'
|
||||
import { Navbar } from '@/components/navbar'
|
||||
import { Sponsors } from '@/components/sponsors'
|
||||
import { Heading, Lead, Subheading } from '@/components/text'
|
||||
import type { Metadata } from 'next'
|
||||
|
||||
export const metadata: Metadata = {
|
||||
title: 'Sponsors',
|
||||
description: 'Thanking the people who contribute financially to the project.',
|
||||
}
|
||||
|
||||
function CTA() {
|
||||
return (
|
||||
<Container className="py-32">
|
||||
<Subheading>Contribute</Subheading>
|
||||
<Heading as="h3" className="mt-2">
|
||||
How can I help out?
|
||||
</Heading>
|
||||
<Lead className="mt-6 max-w-3xl">
|
||||
Sign up to our OpenCollective, or become a GitHub sponsor to give back
|
||||
to the project.
|
||||
</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-gray-600">
|
||||
If you're looking to give back to the project financially -
|
||||
first off, thank you. It really does help a lot. There are two
|
||||
options for contributing: our OpenCollective, which funds
|
||||
project-only expenses, like infrastructure and domain names, and
|
||||
GitHub Sponsors, which goes directly to developers, and help them
|
||||
pay the bills and keep them motivated.
|
||||
</p>
|
||||
<div className="mt-6 space-x-4">
|
||||
<Button
|
||||
className="w-full sm:w-auto"
|
||||
href="https://opencollective.com/drop-oss"
|
||||
target="_blank"
|
||||
>
|
||||
OpenCollective →
|
||||
</Button>
|
||||
<Button
|
||||
className="w-full sm:w-auto"
|
||||
href="/about#team"
|
||||
variant="secondary"
|
||||
>
|
||||
Team →
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</Container>
|
||||
)
|
||||
}
|
||||
|
||||
export default function About() {
|
||||
return (
|
||||
<main className="overflow-hidden">
|
||||
<GradientBackground />
|
||||
<Container>
|
||||
<Navbar />
|
||||
</Container>
|
||||
|
||||
<Sponsors />
|
||||
<CTA />
|
||||
|
||||
<Footer />
|
||||
</main>
|
||||
)
|
||||
}
|
||||
@@ -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,59 @@
|
||||
'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',
|
||||
'bg-white shadow-xs ring-1 ring-black/5',
|
||||
'data-dark:bg-gray-800 data-dark:ring-white/15',
|
||||
)}
|
||||
>
|
||||
<div className="relative h-80 shrink-0">
|
||||
{graphic}
|
||||
{fade.includes('top') && (
|
||||
<div className="absolute inset-0 bg-linear-to-b from-white to-50% group-data-dark:from-gray-800 group-data-dark:from-[-25%]" />
|
||||
)}
|
||||
{fade.includes('bottom') && (
|
||||
<div className="absolute inset-0 bg-linear-to-t from-white to-20% group-data-dark:from-gray-800 group-data-dark:from-[-25%]" />
|
||||
)}
|
||||
</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-gray-950 group-data-dark:text-white">
|
||||
{title}
|
||||
</p>
|
||||
<p className="mt-2 max-w-[600px] text-sm/6 text-gray-600 group-data-dark: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-full 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-full 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-gray-950',
|
||||
'data-disabled:bg-white/15 data-disabled:opacity-40 data-hover:bg-white/20',
|
||||
),
|
||||
outline: clsx(
|
||||
'inline-flex items-center justify-center px-2 py-[calc(--spacing(1.5)-1px)]',
|
||||
'rounded-lg border border-transparent shadow-sm ring-1 ring-black/10',
|
||||
'text-sm font-medium whitespace-nowrap text-gray-950',
|
||||
'data-disabled:bg-transparent data-disabled:opacity-40 data-hover:bg-gray-50',
|
||||
),
|
||||
}
|
||||
|
||||
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,554 @@
|
||||
'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-purple-900">
|
||||
<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-gray-100 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-gray-100 px-2 py-1 text-xs">
|
||||
coming soon™
|
||||
</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': '.zip',
|
||||
},
|
||||
Metadata: {
|
||||
IGDB: true,
|
||||
GiantBomb: true,
|
||||
PCGamingWiki: true,
|
||||
Manual: 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':
|
||||
'.7z .xz .bz2 .gz .tar .zip .wim .ar .arj .cab .chm .cpio .cramfs .dmg .ext .fat .gpt .hfs .ihex .iso .lzh .lzma .mbr .msi .nsis .ntfs .qcow2 .rar .rpm .squashfs .udf .uefi .vdi .vhd .vmdk .wim .xar .z'
|
||||
.split(' ')
|
||||
.sort()
|
||||
.join(' '),
|
||||
},
|
||||
Metadata: {
|
||||
IGDB: true,
|
||||
Manual: true,
|
||||
},
|
||||
Clients: {
|
||||
Windows: true,
|
||||
Linux: 'Possible, unsupported',
|
||||
macOS: 'Possible, unsupported',
|
||||
},
|
||||
Authentication: {
|
||||
Simple: true,
|
||||
SSO: true,
|
||||
},
|
||||
Cloud: {
|
||||
'Cloud saves': GameVaultPlus,
|
||||
},
|
||||
'Client Features': {
|
||||
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,
|
||||
},
|
||||
Metadata: {
|
||||
IGDB: true,
|
||||
Hasheous: true,
|
||||
SteamGridDB: true,
|
||||
Retroachievements: true,
|
||||
PlayMatch: true,
|
||||
ScreenScraper: true,
|
||||
LaunchBox: true,
|
||||
},
|
||||
Clients: {
|
||||
Browser: true,
|
||||
Android: true,
|
||||
muOS: true,
|
||||
},
|
||||
Authentication: {
|
||||
Simple: true,
|
||||
SSO: true,
|
||||
},
|
||||
Cloud: {
|
||||
'Cloud saves': ComingSoon,
|
||||
},
|
||||
},
|
||||
},
|
||||
]
|
||||
|
||||
function Header() {
|
||||
return (
|
||||
<Container className="mt-16">
|
||||
<Heading as="h1" className="leading-12">
|
||||
What's the{' '}
|
||||
<span className="rounded-xl bg-zinc-900 px-3 py-2 font-mono text-zinc-300">
|
||||
git 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 02-09-2025</Subheading>
|
||||
</Container>
|
||||
)
|
||||
}
|
||||
|
||||
function PricingCards() {
|
||||
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) => (
|
||||
<PricingCard key={tierIndex} tier={tier} />
|
||||
))}
|
||||
</div>
|
||||
</Container>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
function PricingCard({ 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-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="rounded-3xl bg-white 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-gray-950/75">{tier.description}</p>
|
||||
<div className="mt-8">
|
||||
<Button href={tier.href}>Learn more →</Button>
|
||||
</div>
|
||||
<div className="mt-8">
|
||||
<h3 className="text-sm/6 font-medium text-gray-950">
|
||||
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 PricingTable({
|
||||
selectedTier: selectedProject,
|
||||
}: {
|
||||
selectedTier: (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">Pricing plan 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-gray-900" />
|
||||
</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-gray-50 px-4 py-3 text-sm/6 font-semibold">
|
||||
{section}
|
||||
</div>
|
||||
</th>
|
||||
</tr>
|
||||
{features[section].map((name) => (
|
||||
<tr
|
||||
key={name}
|
||||
className="border-b border-gray-100 last:border-none"
|
||||
>
|
||||
<th
|
||||
scope="row"
|
||||
className="px-0 py-4 text-sm/6 font-normal text-gray-600"
|
||||
>
|
||||
{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">{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-gray-950/75 data-disabled:text-gray-950/25"
|
||||
>
|
||||
<span className="inline-flex h-6 items-center self-start">
|
||||
<PlusIcon className="size-3.75 shrink-0 fill-gray-950/25" />
|
||||
</span>
|
||||
{disabled && <span className="sr-only">Coming soon:</span>}
|
||||
{description}
|
||||
{disabled && (
|
||||
<span className="text-right text-xs text-blue-300">
|
||||
coming soon™
|
||||
</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 />
|
||||
<PricingCards />
|
||||
<PricingTable selectedTier={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,302 @@
|
||||
'use client'
|
||||
|
||||
import {
|
||||
Label,
|
||||
Listbox,
|
||||
ListboxButton,
|
||||
ListboxOption,
|
||||
ListboxOptions,
|
||||
} from '@headlessui/react'
|
||||
import { CheckIcon, ChevronUpDownIcon } from '@heroicons/react/16/solid'
|
||||
import { useState, type JSX } from 'react'
|
||||
import { Button } from './button'
|
||||
import { Container } from './container'
|
||||
import { Heading } from './text'
|
||||
import Link from 'next/link'
|
||||
|
||||
type Version = 'v0.2.0' | 'v0.3.0' | 'v0.3.1' | 'v0.3.2' | 'v0.3.3'
|
||||
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',
|
||||
}
|
||||
|
||||
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,
|
||||
},
|
||||
},
|
||||
},
|
||||
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_aarch64.dmg',
|
||||
},
|
||||
},
|
||||
},
|
||||
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',
|
||||
},
|
||||
},
|
||||
},
|
||||
}
|
||||
|
||||
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-white p-10 pb-9 shadow-2xl ring-1 ring-black/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-gray-950/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} →
|
||||
</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">
|
||||
<Container>
|
||||
<div className="flex flex-col items-center">
|
||||
<Listbox value={currentVersion} onChange={setCurrentVersion}>
|
||||
<Label className="block text-sm/6 font-medium text-gray-900">
|
||||
Version
|
||||
</Label>
|
||||
<div className="relative mt-2">
|
||||
<ListboxButton className="grid w-full min-w-[10rem] cursor-default grid-cols-1 rounded-md bg-white py-1.5 pr-2 pl-3 text-left text-gray-900 outline-1 -outline-offset-1 outline-gray-300 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-white py-1 text-base shadow-lg outline-1 outline-black/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-gray-900 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 →
|
||||
</Link>
|
||||
</div>
|
||||
</Container>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
@@ -0,0 +1,211 @@
|
||||
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-gray-950 sm:text-5xl">
|
||||
Ready to dive in?
|
||||
</p>
|
||||
</hgroup>
|
||||
<p className="mx-auto mt-6 max-w-xs text-sm/6 text-gray-500">
|
||||
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 →
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
function SitemapHeading({ children }: { children: React.ReactNode }) {
|
||||
return <h3 className="text-sm/6 font-medium text-gray-950/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-gray-950 data-hover:text-gray-950/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-gray-500">
|
||||
© {new Date().getFullYear()} Drop OSS. Licensed under AGPLv3 and
|
||||
Tailwind UI Plus (where applicable).
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
export function Footer() {
|
||||
return (
|
||||
<footer>
|
||||
<Gradient className="relative">
|
||||
<div className="absolute inset-2 rounded-4xl bg-white/80" />
|
||||
<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>
|
||||
</Gradient>
|
||||
</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-100 from-28% via-sky-200 via-70% to-cyan-100 sm:bg-linear-145',
|
||||
)}
|
||||
/>
|
||||
)
|
||||
}
|
||||
|
||||
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-200 from-28% via-sky-100 via-70% to-blue-200',
|
||||
'rotate-[-10deg] rounded-full blur-3xl',
|
||||
)}
|
||||
/>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
File diff suppressed because it is too large
Load Diff
@@ -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-gray-950 first:mt-0 last:mb-0">
|
||||
{children}
|
||||
</h2>
|
||||
),
|
||||
h2: ({ children }) => (
|
||||
<h2 className="mt-12 mb-10 text-2xl/8 font-medium tracking-tight text-gray-950 first:mt-0 last:mb-0">
|
||||
{children}
|
||||
</h2>
|
||||
),
|
||||
h3: ({ children }) => (
|
||||
<h3 className="mt-12 mb-10 text-xl/8 font-medium tracking-tight text-gray-950 first:mt-0 last:mb-0">
|
||||
{children}
|
||||
</h3>
|
||||
),
|
||||
blockquote: ({ children }) => (
|
||||
<blockquote className="my-10 border-l-2 border-l-gray-300 pl-6 text-base/8 text-gray-950 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-gray-200" />,
|
||||
strong: ({ children }) => (
|
||||
<strong className="font-semibold text-gray-950">{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-600 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-gray-950 bg-blend-multiply data-hover:bg-black/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-black/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-gray-950">
|
||||
{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-black/5" />
|
||||
<div className="absolute inset-x-0 top-2 border-t border-black/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 bg-linear-to-t from-gray-100 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-white p-2 shadow-md ring-1 shadow-black/5 ring-black/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-gray-700">
|
||||
{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-gray-500">
|
||||
{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-gray-700">
|
||||
{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-gray-100 py-10 first:border-t first:border-t-gray-200 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-gray-700">
|
||||
{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-gray-500">{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-gray-100',
|
||||
'data-active:shadow-sm data-active:ring-1 data-active:ring-black/10',
|
||||
'data-active:data-hover:bg-gray-50',
|
||||
)}
|
||||
>
|
||||
{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's about to drop?
|
||||
</Heading>
|
||||
<Lead className="mt-6 max-w-3xl">
|
||||
Check out what's new and what'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-black/5"></div>
|
||||
<div className="absolute inset-x-0 top-2 border-t border-black/5"></div>
|
||||
<div className="absolute inset-x-0 bottom-0 hidden border-b border-black/5 group-last/row:block"></div>
|
||||
<div className="absolute inset-x-0 bottom-2 hidden border-b border-black/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-black/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,283 @@
|
||||
'use client'
|
||||
|
||||
import * as Headless from '@headlessui/react'
|
||||
import { ArrowLongRightIcon } from '@heroicons/react/20/solid'
|
||||
import { Octokit } from '@octokit/core'
|
||||
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 aspect-9/16 w-64 shrink-0 snap-start scroll-ml-(--scroll-padding) flex-col justify-end overflow-hidden rounded-3xl sm:aspect-3/4 sm:w-72"
|
||||
>
|
||||
<img
|
||||
alt=""
|
||||
src={img}
|
||||
className="absolute inset-x-0 top-0 aspect-square w-full object-contain"
|
||||
/>
|
||||
<div
|
||||
aria-hidden="true"
|
||||
className="absolute inset-0 rounded-3xl bg-linear-to-t from-black from-[calc(7/16*100%)] ring-1 ring-gray-950/10 ring-inset sm:from-25%"
|
||||
/>
|
||||
<figure className="relative p-10">
|
||||
<figcaption className="mt-6 border-t border-white/20 pt-6">
|
||||
<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 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-gray-300 transition',
|
||||
'data-active:bg-gray-400 data-hover:bg-gray-400',
|
||||
'forced-colors:data-active:bg-[Highlight] forced-colors:data-focus:outline-offset-4',
|
||||
)}
|
||||
/>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</Container>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
@@ -0,0 +1,154 @@
|
||||
'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-gray-500">{description}</p>
|
||||
<p className="text-xs font-semibold text-gray-400 uppercase">
|
||||
{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'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-gray-600">
|
||||
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'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-gray-600">
|
||||
If you know a little code, you can help out! We heavily encourage
|
||||
contributions, especially if you'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"
|
||||
>
|
||||
Contribute
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<Subheading id="team" as="h3" className="mt-24">
|
||||
The team
|
||||
</Subheading>
|
||||
<hr className="mt-6 border-t border-gray-200" />
|
||||
<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-gray-950 data-dark: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 text-gray-500 uppercase data-dark:text-gray-400',
|
||||
)}
|
||||
/>
|
||||
)
|
||||
}
|
||||
|
||||
export function Lead({
|
||||
className,
|
||||
...props
|
||||
}: React.ComponentPropsWithoutRef<'p'>) {
|
||||
return (
|
||||
<p
|
||||
className={clsx(className, 'text-2xl font-medium text-gray-500')}
|
||||
{...props}
|
||||
/>
|
||||
)
|
||||
}
|
||||
@@ -0,0 +1,16 @@
|
||||
@import 'tailwindcss';
|
||||
|
||||
@theme {
|
||||
--font-sans: Inter, system-ui, sans-serif;
|
||||
|
||||
--radius-4xl: 2rem;
|
||||
}
|
||||
|
||||
@keyframes move-x {
|
||||
0% {
|
||||
transform: translateX(var(--move-x-from));
|
||||
}
|
||||
100% {
|
||||
transform: translateX(var(--move-x-to));
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user