Compare commits
No commits in common. "v0.4.0" and "main" have entirely different histories.
20 changed files with 172 additions and 188 deletions
Binary file not shown.
|
Before Width: | Height: | Size: 2.3 MiB After Width: | Height: | Size: 4.4 MiB |
|
|
@ -25,14 +25,14 @@ function Header() {
|
|||
<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-zinc-400">
|
||||
<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-zinc-400">
|
||||
<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
|
||||
|
|
@ -41,16 +41,16 @@ function Header() {
|
|||
</div>
|
||||
<div className="max-lg:mt-16 lg:col-span-1">
|
||||
<Subheading>The Numbers</Subheading>
|
||||
<hr className="mt-6 border-t border-zinc-800" />
|
||||
<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-zinc-800 pb-4">
|
||||
<dt className="text-sm/6 text-zinc-400">Lines of code</dt>
|
||||
<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-zinc-800 pb-4">
|
||||
<dt className="text-sm/6 text-zinc-400">
|
||||
<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">
|
||||
|
|
@ -59,13 +59,13 @@ function Header() {
|
|||
</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-zinc-400">Docker pulls</dt>
|
||||
<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={48.8} decimals={1} />k
|
||||
</dd>
|
||||
</div>
|
||||
<div className="flex flex-col gap-y-2">
|
||||
<dt className="text-sm/6 text-zinc-400">Contributors</dt>
|
||||
<dt className="text-sm/6 text-gray-600">Contributors</dt>
|
||||
<dd className="order-first text-6xl font-medium tracking-tight">
|
||||
>
|
||||
<AnimatedNumber start={0} end={15} />
|
||||
|
|
@ -91,7 +91,7 @@ function FrequentlyAskedQuestions() {
|
|||
<dt className="text-sm font-semibold">
|
||||
Do you intend to replace Steam?
|
||||
</dt>
|
||||
<dd className="mt-4 text-sm/6 text-zinc-400">
|
||||
<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
|
||||
|
|
@ -102,7 +102,7 @@ function FrequentlyAskedQuestions() {
|
|||
<dt className="text-sm font-semibold">
|
||||
Will Drop ever cost money or require a subscription?
|
||||
</dt>
|
||||
<dd className="mt-4 text-sm/6 text-zinc-400">
|
||||
<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.
|
||||
|
|
@ -114,7 +114,7 @@ function FrequentlyAskedQuestions() {
|
|||
</dl>
|
||||
<dl>
|
||||
<dt className="text-sm font-semibold">Is Drop legal?</dt>
|
||||
<dd className="mt-4 text-sm/6 text-zinc-400">
|
||||
<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
|
||||
|
|
@ -126,7 +126,7 @@ function FrequentlyAskedQuestions() {
|
|||
</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-zinc-400">
|
||||
<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
|
||||
|
|
|
|||
|
|
@ -15,7 +15,7 @@ export default function RootLayout({
|
|||
}>) {
|
||||
return (
|
||||
<html lang="en">
|
||||
<body className="text-zinc-100 bg-zinc-950 antialiased">
|
||||
<body className="text-gray-950 antialiased">
|
||||
{children}
|
||||
</body>
|
||||
</html>
|
||||
|
|
|
|||
|
|
@ -61,7 +61,7 @@ export default async function BlogPost({
|
|||
className="aspect-square size-6 rounded-full object-cover"
|
||||
/>
|
||||
)}
|
||||
<div className="text-sm/5 text-zinc-300">{author.name}</div>
|
||||
<div className="text-sm/5 text-gray-700">{author.name}</div>
|
||||
</div>
|
||||
)}
|
||||
{
|
||||
|
|
@ -69,7 +69,7 @@ export default async function BlogPost({
|
|||
{tags.map((tag) => (
|
||||
<div
|
||||
key={tag}
|
||||
className="rounded-full border border-dotted border-zinc-800 bg-zinc-900 px-2 text-sm/6 font-medium text-zinc-400"
|
||||
className="rounded-full border border-dotted border-gray-300 bg-gray-50 px-2 text-sm/6 font-medium text-gray-500"
|
||||
>
|
||||
{tag}
|
||||
</div>
|
||||
|
|
@ -77,7 +77,7 @@ export default async function BlogPost({
|
|||
</div>
|
||||
}
|
||||
</div>
|
||||
<div className="text-zinc-400">
|
||||
<div className="text-gray-700">
|
||||
<div className="max-w-2xl xl:mx-auto">
|
||||
{post.image && (
|
||||
<img
|
||||
|
|
|
|||
|
|
@ -17,7 +17,7 @@ export default function About() {
|
|||
<Container>
|
||||
<Navbar />
|
||||
</Container>
|
||||
<main className="grid min-h-full place-items-center px-6 py-24 sm:py-32 lg:px-8">
|
||||
<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>
|
||||
|
|
|
|||
|
|
@ -5,8 +5,8 @@ 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 { ArrowDownCircleIcon } from '@heroicons/react/24/solid'
|
||||
import type { Metadata } from 'next'
|
||||
|
||||
export const metadata: Metadata = {
|
||||
|
|
@ -21,18 +21,16 @@ function Hero() {
|
|||
<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-zinc-100 sm:text-8xl/[0.8] md:text-9xl/[0.8]">
|
||||
<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-zinc-100/75 sm:text-2xl/8">
|
||||
<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="https://docs.droposs.org/docs/guides/quickstart">
|
||||
Get started
|
||||
</Button>
|
||||
<Button variant="outline" href="/about">
|
||||
<Button href="https://docs.droposs.org/docs/guides/quickstart">Get started</Button>
|
||||
<Button variant="secondary" href="/about">
|
||||
About
|
||||
</Button>
|
||||
</div>
|
||||
|
|
@ -44,49 +42,18 @@ function Hero() {
|
|||
|
||||
function FeatureSection() {
|
||||
return (
|
||||
<div className="py-24 sm:py-32">
|
||||
<div className="mx-auto max-w-7xl px-6 lg:px-8">
|
||||
<div className="mx-auto max-w-2xl sm:text-center">
|
||||
<Subheading>Drop OSS</Subheading>
|
||||
<Heading as="h3" className="mt-2 max-w-4xl">
|
||||
The ultimate self-hosted game manager.
|
||||
</Heading>
|
||||
|
||||
<p className="mt-6 text-lg/8 text-zinc-400">
|
||||
Drop is built from the ground up to be flexible, fast, and
|
||||
beautiful. It's designed to scale with your library, and handle
|
||||
thousands of games.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<div className="relative overflow-hidden pt-16">
|
||||
<div className="mx-auto max-w-7xl px-6 lg:px-8">
|
||||
<img
|
||||
alt="App screenshot"
|
||||
src="/gallery/store.png"
|
||||
width={1920}
|
||||
height={1071}
|
||||
className="mb-[-5%] rounded-xl shadow-2xl ring-1 ring-gray-900/10"
|
||||
/>
|
||||
<div aria-hidden="true" className="relative">
|
||||
<div className="absolute -inset-x-20 bottom-0 bg-linear-to-t from-zinc-950 pt-[7%]" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="mx-auto mt-16 max-w-7xl px-6 sm:mt-20 md:mt-24 lg:px-8">
|
||||
<dl className="mx-auto grid max-w-2xl grid-cols-1 gap-x-6 gap-y-10 text-base/7 text-zinc-400 sm:grid-cols-2 lg:mx-0 lg:max-w-none lg:grid-cols-3 lg:gap-x-8 lg:gap-y-16">
|
||||
<div className="relative pl-9">
|
||||
<dt className="inline font-semibold text-zinc-100">
|
||||
<ArrowDownCircleIcon
|
||||
aria-hidden="true"
|
||||
className="absolute top-1 left-1 size-5 text-blue-600"
|
||||
/>
|
||||
ADASDASD
|
||||
</dt>{' '}
|
||||
<dd className="inline">ASDASDASDAS</dd>
|
||||
</div>
|
||||
</dl>
|
||||
</div>
|
||||
<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>
|
||||
)
|
||||
}
|
||||
|
|
@ -165,7 +132,7 @@ export default function Home() {
|
|||
<div className="overflow-hidden">
|
||||
<Hero />
|
||||
<main>
|
||||
<div className="bg-linear-to-b pb-16">
|
||||
<div className="bg-linear-to-b from-white from-50% to-gray-100 py-32">
|
||||
<FeatureSection />
|
||||
<BentoSection />
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -26,7 +26,7 @@ function CTA() {
|
|||
|
||||
<div className="mt-12 grid grid-cols-1 gap-12 lg:grid-cols-2">
|
||||
<div className="max-w-lg">
|
||||
<p className="text-sm/6 text-zinc-400">
|
||||
<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
|
||||
|
|
@ -45,6 +45,7 @@ function CTA() {
|
|||
<Button
|
||||
className="w-full sm:w-auto"
|
||||
href="/about#team"
|
||||
variant="secondary"
|
||||
>
|
||||
Team →
|
||||
</Button>
|
||||
|
|
|
|||
|
|
@ -29,21 +29,28 @@ export function BentoCard({
|
|||
data-dark={dark ? 'true' : undefined}
|
||||
className={clsx(
|
||||
className,
|
||||
'group relative flex flex-col overflow-hidden rounded-lg ring-1',
|
||||
'bg-zinc-900 ring-white/15',
|
||||
'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-white">
|
||||
<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-400">
|
||||
<p className="mt-2 max-w-[600px] text-sm/6 text-gray-600 group-data-dark:text-gray-400">
|
||||
{description}
|
||||
</p>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -5,22 +5,22 @@ import { Link } from './link'
|
|||
const variants = {
|
||||
primary: clsx(
|
||||
'inline-flex items-center justify-center px-4 py-[calc(--spacing(2)-1px)]',
|
||||
'rounded-lg border border-transparent bg-gray-950 shadow-md',
|
||||
'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-lg border border-transparent bg-white/15 shadow-md ring-1 ring-[#D15052]/15',
|
||||
'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-zinc-100',
|
||||
'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-4 py-[calc(--spacing(1.5)-1px)]',
|
||||
'rounded-lg border border-transparent shadow-sm ring-1 ring-white/5',
|
||||
'text-sm font-medium whitespace-nowrap text-zinc-100',
|
||||
'data-disabled:bg-transparent data-disabled:opacity-40 data-hover:bg-zinc-900',
|
||||
'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',
|
||||
),
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -39,7 +39,7 @@ function GameVaultLogo() {
|
|||
return (
|
||||
<div className="inline-flex items-center gap-x-2 text-xl font-bold">
|
||||
<img src="/icons/gamevault.png" alt="GameVault Logo" className="size-8" />
|
||||
<span className="relative whitespace-nowrap text-zinc-100">
|
||||
<span className="relative whitespace-nowrap text-purple-900">
|
||||
<svg
|
||||
aria-hidden="true"
|
||||
viewBox="0 0 418 42"
|
||||
|
|
@ -56,7 +56,7 @@ function GameVaultLogo() {
|
|||
|
||||
function GameVaultPlus() {
|
||||
return (
|
||||
<div className="inline-flex items-center gap-x-1 rounded-full bg-zinc-800 px-2 py-1 text-xs">
|
||||
<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"
|
||||
|
|
@ -69,7 +69,7 @@ function GameVaultPlus() {
|
|||
|
||||
function ComingSoon() {
|
||||
return (
|
||||
<div className="inline-flex items-center gap-x-1 rounded-full bg-zinc-900 px-2 py-1 text-xs">
|
||||
<div className="inline-flex items-center gap-x-1 rounded-full bg-gray-100 px-2 py-1 text-xs">
|
||||
coming soon™
|
||||
</div>
|
||||
)
|
||||
|
|
@ -121,7 +121,6 @@ const projects: Array<{
|
|||
'Installer/setup games': true,
|
||||
'Portable games': true,
|
||||
'Archives support': 'All 7-zip formats',
|
||||
'Automatic import': 'Bulk-import tool',
|
||||
},
|
||||
Metadata: {
|
||||
'Additional with plugins': false,
|
||||
|
|
@ -231,7 +230,7 @@ const projects: Array<{
|
|||
'Non-versioned layout': true,
|
||||
'Automatic import': true,
|
||||
'Archives support': 'All 7-zip formats',
|
||||
'Portable games': true,
|
||||
'Portable games': true
|
||||
},
|
||||
Metadata: {
|
||||
IGDB: true,
|
||||
|
|
@ -280,14 +279,14 @@ function Header() {
|
|||
)
|
||||
}
|
||||
|
||||
function ProjectCards() {
|
||||
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) => (
|
||||
<ProjectCard key={tierIndex} tier={tier} />
|
||||
<PricingCard key={tierIndex} tier={tier} />
|
||||
))}
|
||||
</div>
|
||||
</Container>
|
||||
|
|
@ -295,22 +294,22 @@ function ProjectCards() {
|
|||
)
|
||||
}
|
||||
|
||||
function ProjectCard({ tier }: { tier: (typeof projects)[number] }) {
|
||||
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-white/5 max-lg:mx-auto max-lg:w-full max-lg:max-w-md">
|
||||
<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-zinc-900 p-10 pb-9 shadow-2xl ring-1 ring-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-zinc-100/75">{tier.description}</p>
|
||||
<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-zinc-100">
|
||||
<h3 className="text-sm/6 font-medium text-gray-950">
|
||||
Key features:
|
||||
</h3>
|
||||
<ul className="mt-3 space-y-3">
|
||||
|
|
@ -325,10 +324,10 @@ function ProjectCard({ tier }: { tier: (typeof projects)[number] }) {
|
|||
)
|
||||
}
|
||||
|
||||
function ProjectTable({
|
||||
selectedProject,
|
||||
function PricingTable({
|
||||
selectedTier: selectedProject,
|
||||
}: {
|
||||
selectedProject: (typeof projects)[number]
|
||||
selectedTier: (typeof projects)[number]
|
||||
}) {
|
||||
function onlyUnique<T>(value: T, index: number, array: Array<T>) {
|
||||
return array.indexOf(value) === index
|
||||
|
|
@ -386,7 +385,7 @@ function ProjectTable({
|
|||
<Menu>
|
||||
<MenuButton className="flex items-center justify-between gap-2 font-medium">
|
||||
{selectedProject.name}
|
||||
<ChevronUpDownIcon className="size-4 fill-zinc-100" />
|
||||
<ChevronUpDownIcon className="size-4 fill-gray-900" />
|
||||
</MenuButton>
|
||||
<MenuItems
|
||||
anchor="bottom start"
|
||||
|
|
@ -445,7 +444,7 @@ function ProjectTable({
|
|||
colSpan={4}
|
||||
className="px-0 pt-10 pb-0 group-first-of-type:pt-5"
|
||||
>
|
||||
<div className="-mx-4 rounded-lg bg-zinc-900 px-4 py-3 text-sm/6 font-semibold">
|
||||
<div className="-mx-4 rounded-lg bg-gray-50 px-4 py-3 text-sm/6 font-semibold">
|
||||
{section}
|
||||
</div>
|
||||
</th>
|
||||
|
|
@ -453,11 +452,11 @@ function ProjectTable({
|
|||
{features[section].map((name) => (
|
||||
<tr
|
||||
key={name}
|
||||
className="border-b border-zinc-800 last:border-none"
|
||||
className="border-b border-gray-100 last:border-none"
|
||||
>
|
||||
<th
|
||||
scope="row"
|
||||
className="px-0 py-4 text-sm/6 font-normal text-zinc-200"
|
||||
className="px-0 py-4 text-sm/6 font-normal text-gray-600"
|
||||
>
|
||||
{name}
|
||||
</th>
|
||||
|
|
@ -489,7 +488,7 @@ function ProjectTable({
|
|||
</span>
|
||||
</>
|
||||
) : (
|
||||
<div className="text-xs text-zinc-400">{value}</div>
|
||||
<div className="text-xs">{value}</div>
|
||||
)}
|
||||
</td>
|
||||
)
|
||||
|
|
@ -515,10 +514,10 @@ function FeatureItem({
|
|||
return (
|
||||
<li
|
||||
data-disabled={disabled ? true : undefined}
|
||||
className="flex items-center gap-4 text-sm/6 text-zinc-100/75 data-disabled:text-zinc-100/40"
|
||||
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-zinc-100/25" />
|
||||
<PlusIcon className="size-3.75 shrink-0 fill-gray-950/25" />
|
||||
</span>
|
||||
{disabled && <span className="sr-only">Coming soon:</span>}
|
||||
{description}
|
||||
|
|
@ -554,8 +553,8 @@ export default function Pricing() {
|
|||
<Navbar />
|
||||
</Container>
|
||||
<Header />
|
||||
<ProjectCards />
|
||||
<ProjectTable selectedProject={tier} />
|
||||
<PricingCards />
|
||||
<PricingTable selectedTier={tier} />
|
||||
<Footer />
|
||||
</main>
|
||||
)
|
||||
|
|
|
|||
|
|
@ -226,14 +226,14 @@ function DownloadCard({
|
|||
return (
|
||||
<div className="-m-2 grid grid-cols-1 rounded-4xl shadow-[inset_0_0_2px_1px_#ffffff4d] ring-1 ring-black/5 max-lg:mx-auto max-lg:w-full max-lg:max-w-md">
|
||||
<div className="grid grid-cols-1 rounded-4xl p-2 shadow-md shadow-black/5">
|
||||
<div className="flex h-full flex-col justify-between rounded-3xl bg-zinc-900/50 p-10 pb-9 shadow-2xl ring-1 ring-white/5">
|
||||
<div 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-zinc-100/75">
|
||||
<p className="mt-3 text-sm/6 text-gray-950/75">
|
||||
{data.description}
|
||||
</p>
|
||||
</div>
|
||||
|
|
@ -266,11 +266,11 @@ export default function DownloadCards() {
|
|||
<Container>
|
||||
<div className="flex flex-col items-center">
|
||||
<Listbox value={currentVersion} onChange={setCurrentVersion}>
|
||||
<Label className="block text-sm/6 font-medium text-zinc-100">
|
||||
<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-zinc-900 py-1.5 pr-2 pl-3 text-left text-zinc-100 outline-1 -outline-offset-1 outline-zinc-800 focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-blue-600 sm:text-sm/6">
|
||||
<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>
|
||||
|
|
@ -282,13 +282,13 @@ export default function DownloadCards() {
|
|||
|
||||
<ListboxOptions
|
||||
transition
|
||||
className="absolute z-10 mt-1 max-h-60 w-full overflow-auto rounded-md bg-zinc-900 py-1 text-base shadow-lg outline-1 outline-white/5 data-leave:transition data-leave:duration-100 data-leave:ease-in data-closed:data-leave:opacity-0 sm:text-sm"
|
||||
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-zinc-100 select-none data-focus:bg-blue-600 data-focus:text-white data-focus:outline-hidden"
|
||||
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}
|
||||
|
|
|
|||
|
|
@ -12,11 +12,11 @@ function CallToAction() {
|
|||
<div className="relative pt-20 pb-16 text-center sm:py-24">
|
||||
<hgroup>
|
||||
<Subheading>Get started</Subheading>
|
||||
<p className="mt-6 text-3xl font-medium tracking-tight text-white sm:text-5xl">
|
||||
<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-zinc-400">
|
||||
<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>
|
||||
|
|
@ -33,7 +33,7 @@ function CallToAction() {
|
|||
}
|
||||
|
||||
function SitemapHeading({ children }: { children: React.ReactNode }) {
|
||||
return <h3 className="text-sm/6 font-medium text-zinc-100/50">{children}</h3>
|
||||
return <h3 className="text-sm/6 font-medium text-gray-950/50">{children}</h3>
|
||||
}
|
||||
|
||||
function SitemapLinks({ children }: { children: React.ReactNode }) {
|
||||
|
|
@ -45,7 +45,7 @@ function SitemapLink(props: React.ComponentPropsWithoutRef<typeof Link>) {
|
|||
<li>
|
||||
<Link
|
||||
{...props}
|
||||
className="font-medium text-zinc-100 data-hover:text-zinc-100/75"
|
||||
className="font-medium text-gray-950 data-hover:text-gray-950/75"
|
||||
/>
|
||||
</li>
|
||||
)
|
||||
|
|
@ -164,8 +164,8 @@ function SocialLinks() {
|
|||
|
||||
function Copyright() {
|
||||
return (
|
||||
<div className="text-xs text-zinc-400">
|
||||
© {new Date().getFullYear()} Drop OSS. Website licensed under AGPLv3 and
|
||||
<div className="text-xs text-gray-500">
|
||||
© {new Date().getFullYear()} Drop OSS. Licensed under AGPLv3 and
|
||||
Tailwind UI Plus (where applicable).
|
||||
</div>
|
||||
)
|
||||
|
|
@ -173,37 +173,39 @@ function Copyright() {
|
|||
|
||||
export function Footer() {
|
||||
return (
|
||||
<footer className="relative m-2 overflow-hidden rounded-4xl">
|
||||
<Gradient className="absolute inset-0 rounded-4xl" />
|
||||
<Container>
|
||||
<CallToAction />
|
||||
<PlusGrid className="pb-16">
|
||||
<PlusGridRow>
|
||||
<div className="grid grid-cols-2 gap-y-10 pb-6 lg:grid-cols-6 lg:gap-8">
|
||||
<div className="col-span-2 flex">
|
||||
<PlusGridItem className="pt-6 lg:pb-6">
|
||||
<Logo className="h-9" />
|
||||
<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="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 className="flex">
|
||||
<PlusGridItem className="flex items-center gap-8 py-3">
|
||||
<SocialLinks />
|
||||
</PlusGridItem>
|
||||
</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>
|
||||
</PlusGridRow>
|
||||
</PlusGrid>
|
||||
</Container>
|
||||
</Gradient>
|
||||
</footer>
|
||||
)
|
||||
}
|
||||
|
|
|
|||
|
|
@ -9,7 +9,7 @@ export function Gradient({
|
|||
{...props}
|
||||
className={clsx(
|
||||
className,
|
||||
'bg-linear-115 from-blue-900 from-28% via-sky-800 via-70% to-cyan-900 sm:bg-linear-145 opacity-30',
|
||||
'bg-linear-115 from-blue-100 from-28% via-sky-200 via-70% to-cyan-100 sm:bg-linear-145',
|
||||
)}
|
||||
/>
|
||||
)
|
||||
|
|
@ -21,7 +21,7 @@ export function GradientBackground() {
|
|||
<div
|
||||
className={clsx(
|
||||
'absolute -top-44 -right-60 h-60 w-xl transform-gpu md:right-0',
|
||||
'bg-linear-115 from-blue-700 from-28% via-sky-800 via-70% to-blue-600',
|
||||
'bg-linear-115 from-blue-200 from-28% via-sky-100 via-70% to-blue-200',
|
||||
'rotate-[-10deg] rounded-full blur-3xl',
|
||||
)}
|
||||
/>
|
||||
|
|
|
|||
|
|
@ -6,22 +6,22 @@ const components: MDXComponents = {
|
|||
<p className="my-8 text-base/8 first:mt-0 last:mb-0">{children}</p>
|
||||
),
|
||||
h1: ({ children }) => (
|
||||
<h2 className="mt-12 mb-10 text-4xl/8 font-medium tracking-tight text-zinc-100 first:mt-0 last:mb-0">
|
||||
<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-zinc-100 first:mt-0 last:mb-0">
|
||||
<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-zinc-100 first:mt-0 last:mb-0">
|
||||
<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-zinc-700 pl-6 text-base/8 text-zinc-100 first:mt-0 last:mb-0">
|
||||
<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>
|
||||
),
|
||||
|
|
@ -32,9 +32,9 @@ const components: MDXComponents = {
|
|||
className="w-full rounded-2xl"
|
||||
/>
|
||||
),
|
||||
hr: () => <hr className="my-8 border-t border-zinc-800" />,
|
||||
hr: () => <hr className="my-8 border-t border-gray-200" />,
|
||||
strong: ({ children }) => (
|
||||
<strong className="font-semibold text-zinc-100">{children}</strong>
|
||||
<strong className="font-semibold text-gray-950">{children}</strong>
|
||||
),
|
||||
code: ({ children }) => (
|
||||
<>
|
||||
|
|
@ -60,7 +60,7 @@ const components: MDXComponents = {
|
|||
return (
|
||||
<Link
|
||||
{...props}
|
||||
className="font-medium text-blue-400 underline decoration-blue-400 underline-offset-4 data-hover:decoration-blue-600"
|
||||
className="font-medium text-blue-600 underline decoration-blue-400 underline-offset-4 data-hover:decoration-blue-600"
|
||||
>
|
||||
{props.children}
|
||||
</Link>
|
||||
|
|
|
|||
|
|
@ -27,7 +27,7 @@ function DesktopNav() {
|
|||
<PlusGridItem key={href} className="relative flex">
|
||||
<Link
|
||||
href={href}
|
||||
className="flex items-center px-4 py-3 text-base font-medium text-zinc-100 bg-blend-multiply data-hover:bg-white/2.5"
|
||||
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>
|
||||
|
|
@ -40,7 +40,7 @@ function DesktopNav() {
|
|||
function MobileNavButton() {
|
||||
return (
|
||||
<DisclosureButton
|
||||
className="flex size-12 items-center justify-center self-center rounded-lg data-hover:bg-white/5 lg:hidden"
|
||||
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" />
|
||||
|
|
@ -63,15 +63,15 @@ function MobileNav() {
|
|||
}}
|
||||
key={href}
|
||||
>
|
||||
<Link href={href} className="text-base font-medium text-zinc-100">
|
||||
<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-white/5" />
|
||||
<div className="absolute inset-x-0 top-2 border-t border-white/5" />
|
||||
<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>
|
||||
)
|
||||
|
|
|
|||
|
|
@ -26,14 +26,14 @@ function FeaturedPosts() {
|
|||
const postAuthors = fetchPostAuthors()
|
||||
|
||||
return (
|
||||
<div className="mt-16 pb-14">
|
||||
<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-zinc-900 p-2 shadow-md ring-1 shadow-white/5 ring-white/5"
|
||||
className="relative flex flex-col rounded-3xl bg-white p-2 shadow-md ring-1 shadow-black/5 ring-black/5"
|
||||
>
|
||||
{post.image && (
|
||||
<img
|
||||
|
|
@ -43,7 +43,7 @@ function FeaturedPosts() {
|
|||
/>
|
||||
)}
|
||||
<div className="flex flex-1 flex-col p-8">
|
||||
<div className="text-sm/5 text-zinc-400">
|
||||
<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">
|
||||
|
|
@ -52,7 +52,7 @@ function FeaturedPosts() {
|
|||
{post.title}
|
||||
</Link>
|
||||
</div>
|
||||
<div className="mt-2 flex-1 text-sm/6 text-zinc-400">
|
||||
<div className="mt-2 flex-1 text-sm/6 text-gray-500">
|
||||
{post.excerpt}
|
||||
</div>
|
||||
{postAuthors[post.author ?? ''] && (
|
||||
|
|
@ -62,7 +62,7 @@ function FeaturedPosts() {
|
|||
src={postAuthors[post.author ?? ''].avatar}
|
||||
className="aspect-square size-6 rounded-full object-cover"
|
||||
/>
|
||||
<div className="text-sm/5 text-zinc-300">
|
||||
<div className="text-sm/5 text-gray-700">
|
||||
{postAuthors[post.author ?? ''].name}
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -94,7 +94,7 @@ function Posts({ page, category }: { page: number; category?: string }) {
|
|||
{posts.map((post) => (
|
||||
<div
|
||||
key={post._meta.path}
|
||||
className="relative grid grid-cols-1 border-b border-b-zinc-900 py-10 first:border-t first:border-t-zinc-900 max-sm:gap-3 sm:grid-cols-3"
|
||||
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">
|
||||
|
|
@ -109,7 +109,7 @@ function Posts({ page, category }: { page: number; category?: string }) {
|
|||
className="aspect-square size-6 rounded-full object-cover"
|
||||
/>
|
||||
}
|
||||
<div className="text-sm/5 text-zinc-300">
|
||||
<div className="text-sm/5 text-gray-700">
|
||||
{postAuthors[post.author ?? ''].name}
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -117,7 +117,7 @@ function Posts({ page, category }: { page: number; category?: string }) {
|
|||
</div>
|
||||
<div className="sm:col-span-2 sm:max-w-2xl">
|
||||
<h2 className="text-sm/5 font-medium">{post.title}</h2>
|
||||
<p className="mt-3 text-sm/6 text-zinc-300">{post.excerpt}</p>
|
||||
<p className="mt-3 text-sm/6 text-gray-500">{post.excerpt}</p>
|
||||
<div className="mt-4">
|
||||
<Link
|
||||
href={post.url}
|
||||
|
|
@ -180,9 +180,9 @@ function Pagination({
|
|||
data-active={i + 1 === page ? true : undefined}
|
||||
className={clsx(
|
||||
'size-7 rounded-lg text-center text-sm/7 font-medium',
|
||||
'data-hover:bg-zinc-900',
|
||||
'data-active:shadow-sm data-active:ring-1 data-active:ring-white/10',
|
||||
'data-active:data-hover:bg-zinc-900',
|
||||
'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}
|
||||
|
|
|
|||
|
|
@ -28,10 +28,10 @@ export function PlusGridRow({
|
|||
aria-hidden="true"
|
||||
className="absolute inset-y-0 left-1/2 -z-10 w-screen -translate-x-1/2"
|
||||
>
|
||||
<div className="absolute inset-x-0 top-0 border-t border-white/5"></div>
|
||||
<div className="absolute inset-x-0 top-2 border-t border-white/5"></div>
|
||||
<div className="absolute inset-x-0 bottom-0 hidden border-b border-white/5 group-last/row:block"></div>
|
||||
<div className="absolute inset-x-0 bottom-2 hidden border-b border-white/5 group-last/row:block"></div>
|
||||
<div 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>
|
||||
|
|
@ -83,7 +83,7 @@ export function PlusGridIcon({
|
|||
aria-hidden="true"
|
||||
className={clsx(
|
||||
className,
|
||||
'absolute size-[15px] fill-white/10',
|
||||
'absolute size-[15px] fill-black/10',
|
||||
yClass,
|
||||
xClass,
|
||||
)}
|
||||
|
|
|
|||
|
|
@ -76,10 +76,19 @@ function SponsorCard({
|
|||
ref={ref}
|
||||
style={{ opacity }}
|
||||
{...props}
|
||||
className="relative flex w-64 rounded-3xl sm:w-72 bg-black"
|
||||
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="pb-3 border-b border-white/20">
|
||||
<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">
|
||||
|
|
@ -263,8 +272,8 @@ export function Sponsors() {
|
|||
data-active={activeIndex === i ? true : undefined}
|
||||
aria-label={`Scroll to sponsorship from ${name}`}
|
||||
className={clsx(
|
||||
'size-2.5 cursor-pointer rounded-full border border-transparent bg-zinc-600 transition',
|
||||
'data-active:bg-blue-700 data-hover:bg-zinc-900',
|
||||
'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',
|
||||
)}
|
||||
/>
|
||||
|
|
|
|||
|
|
@ -27,8 +27,8 @@ function Person({
|
|||
<img alt="" src={img} className="size-12 rounded-full" />
|
||||
<div className="text-sm/6">
|
||||
<h3 className="font-medium group-hover:underline">{name}</h3>
|
||||
<p className="text-zinc-400">{description}</p>
|
||||
<p className="text-xs font-semibold text-blue-600/80">
|
||||
<p className="text-gray-500">{description}</p>
|
||||
<p className="text-xs font-semibold text-gray-400 uppercase">
|
||||
{contributions} contribution(s)
|
||||
</p>
|
||||
</div>
|
||||
|
|
@ -105,14 +105,14 @@ export function Team() {
|
|||
</Lead>
|
||||
<div className="mt-12 grid grid-cols-1 gap-12 lg:grid-cols-2">
|
||||
<div className="max-w-lg">
|
||||
<p className="text-sm/6 text-zinc-400">
|
||||
<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-zinc-400">
|
||||
<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
|
||||
|
|
@ -124,9 +124,8 @@ export function Team() {
|
|||
className="w-full sm:w-auto"
|
||||
href="https://developer.droposs.org/contributing"
|
||||
target="_blank"
|
||||
variant="outline"
|
||||
>
|
||||
Contribute →
|
||||
Contribute
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -134,7 +133,7 @@ export function Team() {
|
|||
<Subheading id="team" as="h3" className="mt-24">
|
||||
The team
|
||||
</Subheading>
|
||||
<hr className="mt-6 border-t border-zinc-800" />
|
||||
<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"
|
||||
|
|
|
|||
|
|
@ -19,7 +19,7 @@ export function Heading({
|
|||
data-dark={dark ? 'true' : undefined}
|
||||
className={clsx(
|
||||
className,
|
||||
'text-4xl font-medium tracking-tighter text-pretty text-white sm:text-6xl',
|
||||
'text-4xl font-medium tracking-tighter text-pretty text-gray-950 data-dark:text-white sm:text-6xl',
|
||||
)}
|
||||
/>
|
||||
)
|
||||
|
|
@ -37,7 +37,7 @@ export function Subheading({
|
|||
data-dark={dark ? 'true' : undefined}
|
||||
className={clsx(
|
||||
className,
|
||||
'font-mono text-xs/5 font-semibold tracking-widest uppercase text-zinc-500',
|
||||
'font-mono text-xs/5 font-semibold tracking-widest text-gray-500 uppercase data-dark:text-gray-400',
|
||||
)}
|
||||
/>
|
||||
)
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue