feat: render sponsors from shared json

This commit is contained in:
Andras Bacsai
2026-05-24 19:31:25 +02:00
parent 6b0b1b8fa5
commit 90dfc54e19
4 changed files with 138 additions and 491 deletions
+2 -491
View File
@@ -1,6 +1,6 @@
---
title: Coolify Sponsors
description: Meet the companies and organizations sponsoring Coolify development including Hetzner, Logto, Tolgee, and other technology partners.
description: Meet the companies and organizations sponsoring Coolify development including hosting, infrastructure, and developer-tool partners.
full: true
---
@@ -8,493 +8,4 @@ full: true
We have amazing sponsors who support the development of Coolify.
## Huge Sponsors
<div className="not-prose grid gap-4 sm:grid-cols-2 xl:grid-cols-4">
<a href="https://www.mvps.net?ref=coolify.io" className="rounded-lg border border-fd-border bg-fd-card p-6 no-underline transition hover:border-fd-primary/60 hover:bg-fd-muted/40">
<div className="flex h-full min-h-56 flex-col items-center justify-center gap-5 text-center">
<div className="flex h-20 w-full items-center justify-center">
<img src="/docs/images/sponsors/mvps.png" alt="MVPS logo" className="max-h-20 w-full max-w-56 object-contain" />
</div>
<div className="min-w-0">
<p className="m-0 font-semibold text-fd-foreground">MVPS</p>
<p className="m-0 mt-2 line-clamp-3 text-sm leading-6 text-fd-muted-foreground">Cheap VPS servers at the highest possible quality</p>
</div>
</div>
</a>
<a href="https://serpapi.com?ref=coolify.io" className="rounded-lg border border-fd-border bg-fd-card p-6 no-underline transition hover:border-fd-primary/60 hover:bg-fd-muted/40">
<div className="flex h-full min-h-56 flex-col items-center justify-center gap-5 text-center">
<div className="flex h-20 w-full items-center justify-center">
<img src="/docs/images/sponsors/serpapi.png" alt="SerpAPI logo" className="max-h-20 w-full max-w-56 object-contain" />
</div>
<div className="min-w-0">
<p className="m-0 font-semibold text-fd-foreground">SerpAPI</p>
<p className="m-0 mt-2 line-clamp-3 text-sm leading-6 text-fd-muted-foreground">Google Search API — Scrape Google and other search engines from our fast, easy, and complete API</p>
</div>
</div>
</a>
<a href="https://seibert.link/coolifysoftware?ref=coolify.io" className="rounded-lg border border-fd-border bg-fd-card p-6 no-underline transition hover:border-fd-primary/60 hover:bg-fd-muted/40">
<div className="flex h-full min-h-56 flex-col items-center justify-center gap-5 text-center">
<div className="flex h-20 w-full items-center justify-center">
<img src="/docs/images/sponsors/seibert.png" alt="Seibert Group logo" className="max-h-20 w-full max-w-56 object-contain" />
</div>
<div className="min-w-0">
<p className="m-0 font-semibold text-fd-foreground">Seibert Group</p>
<p className="m-0 mt-2 line-clamp-3 text-sm leading-6 text-fd-muted-foreground">Boost productivity company-wide with AI agents like Claude Code</p>
</div>
</div>
</a>
<a href="https://screenshotone.com?ref=coolify.io" className="rounded-lg border border-fd-border bg-fd-card p-6 no-underline transition hover:border-fd-primary/60 hover:bg-fd-muted/40">
<div className="flex h-full min-h-56 flex-col items-center justify-center gap-5 text-center">
<div className="flex h-20 w-full items-center justify-center">
<img src="/docs/images/sponsors/screenshotone.svg" alt="ScreenshotOne logo" className="max-h-20 w-full max-w-56 object-contain" />
</div>
<div className="min-w-0">
<p className="m-0 font-semibold text-fd-foreground">ScreenshotOne</p>
<p className="m-0 mt-2 line-clamp-3 text-sm leading-6 text-fd-muted-foreground">Screenshot API for devs</p>
</div>
</div>
</a>
<a href="https://privatealps.net?ref=coolify.io" className="rounded-lg border border-fd-border bg-fd-card p-6 no-underline transition hover:border-fd-primary/60 hover:bg-fd-muted/40">
<div className="flex h-full min-h-56 flex-col items-center justify-center gap-5 text-center">
<div className="flex h-20 w-full items-center justify-center">
<img src="/docs/images/sponsors/privatealps.png" alt="PrivateAlps logo" className="max-h-20 w-full max-w-56 object-contain" />
</div>
<div className="min-w-0">
<p className="m-0 font-semibold text-fd-foreground">PrivateAlps</p>
<p className="m-0 mt-2 line-clamp-3 text-sm leading-6 text-fd-muted-foreground">Cloud Services Provider, VPS, servers infrastructure for people who care about privacy and control</p>
</div>
</div>
</a>
</div>
## Big Sponsors
<div className="not-prose grid gap-4 sm:grid-cols-2 xl:grid-cols-3">
<a href="https://23m.com?ref=coolify.io" className="rounded-lg border border-fd-border bg-fd-card p-4 no-underline transition hover:border-fd-primary/60 hover:bg-fd-muted/40">
<div className="flex min-w-0 items-center gap-4">
<img src="/docs/images/sponsors/23m.svg" alt="23M logo" className="size-14 shrink-0 rounded-md object-contain" />
<div className="min-w-0">
<p className="m-0 font-semibold text-fd-foreground">23M</p>
<p className="m-0 mt-1 line-clamp-3 text-sm leading-6 text-fd-muted-foreground">Your experts for high-availability hosting solutions!</p>
</div>
</div>
</a>
<a href="https://americancloud.com?ref=coolify.io" className="rounded-lg border border-fd-border bg-fd-card p-4 no-underline transition hover:border-fd-primary/60 hover:bg-fd-muted/40">
<div className="flex min-w-0 items-center gap-4">
<img src="/docs/images/sponsors/americancloud.webp" alt="American Cloud logo" className="size-14 shrink-0 rounded-md object-contain" />
<div className="min-w-0">
<p className="m-0 font-semibold text-fd-foreground">American Cloud</p>
<p className="m-0 mt-1 line-clamp-3 text-sm leading-6 text-fd-muted-foreground">US-based cloud infrastructure services</p>
</div>
</div>
</a>
<a href="https://arcjet.com?ref=coolify.io" className="rounded-lg border border-fd-border bg-fd-card p-4 no-underline transition hover:border-fd-primary/60 hover:bg-fd-muted/40">
<div className="flex min-w-0 items-center gap-4">
<img src="/docs/images/sponsors/arcjet.webp" alt="Arcjet logo" className="size-14 shrink-0 rounded-md object-contain" />
<div className="min-w-0">
<p className="m-0 font-semibold text-fd-foreground">Arcjet</p>
<p className="m-0 mt-1 line-clamp-3 text-sm leading-6 text-fd-muted-foreground">Advanced web security and performance solutions</p>
</div>
</div>
</a>
<a href="https://bc.direct?ref=coolify.io" className="rounded-lg border border-fd-border bg-fd-card p-4 no-underline transition hover:border-fd-primary/60 hover:bg-fd-muted/40">
<div className="flex min-w-0 items-center gap-4">
<img src="/docs/images/sponsors/bc.webp" alt="BC Direct logo" className="size-14 shrink-0 rounded-md object-contain" />
<div className="min-w-0">
<p className="m-0 font-semibold text-fd-foreground">BC Direct</p>
<p className="m-0 mt-1 line-clamp-3 text-sm leading-6 text-fd-muted-foreground">Your trusted technology consulting partner</p>
</div>
</div>
</a>
<a href="https://blacksmith.sh?ref=coolify.io" className="rounded-lg border border-fd-border bg-fd-card p-4 no-underline transition hover:border-fd-primary/60 hover:bg-fd-muted/40">
<div className="flex min-w-0 items-center gap-4">
<img src="/docs/images/sponsors/blacksmith.webp" alt="Blacksmith logo" className="size-14 shrink-0 rounded-md object-contain" />
<div className="min-w-0">
<p className="m-0 font-semibold text-fd-foreground">Blacksmith</p>
<p className="m-0 mt-1 line-clamp-3 text-sm leading-6 text-fd-muted-foreground">Infrastructure automation platform</p>
</div>
</div>
</a>
<a href="https://capture.page/?ref=coolify.io" className="rounded-lg border border-fd-border bg-fd-card p-4 no-underline transition hover:border-fd-primary/60 hover:bg-fd-muted/40">
<div className="flex min-w-0 items-center gap-4">
<img src="/docs/images/sponsors/capture-page.webp" alt="Capture.page logo" className="size-14 shrink-0 rounded-md object-contain" />
<div className="min-w-0">
<p className="m-0 font-semibold text-fd-foreground">Capture.page</p>
<p className="m-0 mt-1 line-clamp-3 text-sm leading-6 text-fd-muted-foreground">Fast & Reliable Screenshot API for Developers</p>
</div>
</div>
</a>
<a href="https://www.bytebase.com?ref=coolify.io" className="rounded-lg border border-fd-border bg-fd-card p-4 no-underline transition hover:border-fd-primary/60 hover:bg-fd-muted/40">
<div className="flex min-w-0 items-center gap-4">
<img src="/docs/images/sponsors/bytebase.png" alt="ByteBase logo" className="size-14 shrink-0 rounded-md object-contain" />
<div className="min-w-0">
<p className="m-0 font-semibold text-fd-foreground">ByteBase</p>
<p className="m-0 mt-1 line-clamp-3 text-sm leading-6 text-fd-muted-foreground">Database CI/CD and Security at Scale</p>
</div>
</div>
</a>
<a href="https://coderabbit.ai?ref=coolify.io" className="rounded-lg border border-fd-border bg-fd-card p-4 no-underline transition hover:border-fd-primary/60 hover:bg-fd-muted/40">
<div className="flex min-w-0 items-center gap-4">
<img src="/docs/images/sponsors/coderabbit.webp" alt="CodeRabbit logo" className="size-14 shrink-0 rounded-md object-contain" />
<div className="min-w-0">
<p className="m-0 font-semibold text-fd-foreground">CodeRabbit</p>
<p className="m-0 mt-1 line-clamp-3 text-sm leading-6 text-fd-muted-foreground">Cut Code Review Time & Bugs in Half</p>
</div>
</div>
</a>
<a href="https://comit.international?ref=coolify.io" className="rounded-lg border border-fd-border bg-fd-card p-4 no-underline transition hover:border-fd-primary/60 hover:bg-fd-muted/40">
<div className="flex min-w-0 items-center gap-4">
<img src="/docs/images/sponsors/comit.webp" alt="COMIT logo" className="size-14 shrink-0 rounded-md object-contain" />
<div className="min-w-0">
<p className="m-0 font-semibold text-fd-foreground">COMIT</p>
<p className="m-0 mt-1 line-clamp-3 text-sm leading-6 text-fd-muted-foreground">New York Times awardwinning contractor</p>
</div>
</div>
</a>
<a href="https://www.trycomp.ai?ref=coolify.io" className="rounded-lg border border-fd-border bg-fd-card p-4 no-underline transition hover:border-fd-primary/60 hover:bg-fd-muted/40">
<div className="flex min-w-0 items-center gap-4">
<img src="/docs/images/sponsors/comp.webp" alt="CompAI logo" className="size-14 shrink-0 rounded-md object-contain" />
<div className="min-w-0">
<p className="m-0 font-semibold text-fd-foreground">CompAI</p>
<p className="m-0 mt-1 line-clamp-3 text-sm leading-6 text-fd-muted-foreground">Open source compliance automation platform</p>
</div>
</div>
</a>
<a href="https://convex.link/coolify.io" className="rounded-lg border border-fd-border bg-fd-card p-4 no-underline transition hover:border-fd-primary/60 hover:bg-fd-muted/40">
<div className="flex min-w-0 items-center gap-4">
<img src="/docs/images/sponsors/convex.webp" alt="Convex logo" className="size-14 shrink-0 rounded-md object-contain" />
<div className="min-w-0">
<p className="m-0 font-semibold text-fd-foreground">Convex</p>
<p className="m-0 mt-1 line-clamp-3 text-sm leading-6 text-fd-muted-foreground">Open-source reactive database for web app developers</p>
</div>
</div>
</a>
<a href="https://darweb.nl/?ref=coolify.io" className="rounded-lg border border-fd-border bg-fd-card p-4 no-underline transition hover:border-fd-primary/60 hover:bg-fd-muted/40">
<div className="flex min-w-0 items-center gap-4">
<img src="/docs/images/sponsors/darweb.webp" alt="Darweb logo" className="size-14 shrink-0 rounded-md object-contain" />
<div className="min-w-0">
<p className="m-0 font-semibold text-fd-foreground">Darweb</p>
<p className="m-0 mt-1 line-clamp-3 text-sm leading-6 text-fd-muted-foreground">3D CPQ solutions for ecommerce design</p>
</div>
</div>
</a>
<a href="https://cloud.dataforest.net/en?ref=coolify.io" className="rounded-lg border border-fd-border bg-fd-card p-4 no-underline transition hover:border-fd-primary/60 hover:bg-fd-muted/40">
<div className="flex min-w-0 items-center gap-4">
<img src="/docs/images/sponsors/dataforest.svg" alt="Dataforest Cloud logo" className="size-14 shrink-0 rounded-md object-contain" />
<div className="min-w-0">
<p className="m-0 font-semibold text-fd-foreground">Dataforest Cloud</p>
<p className="m-0 mt-1 line-clamp-3 text-sm leading-6 text-fd-muted-foreground">Deploy cloud servers as seeds independently in seconds. Enterprise hardware, premium network, 100% made in Germany.</p>
</div>
</div>
</a>
<a href="https://formbricks.com?ref=coolify.io" className="rounded-lg border border-fd-border bg-fd-card p-4 no-underline transition hover:border-fd-primary/60 hover:bg-fd-muted/40">
<div className="flex min-w-0 items-center gap-4">
<img src="/docs/images/sponsors/formbricks.svg" alt="Formbricks logo" className="size-14 shrink-0 rounded-md object-contain" />
<div className="min-w-0">
<p className="m-0 font-semibold text-fd-foreground">Formbricks</p>
<p className="m-0 mt-1 line-clamp-3 text-sm leading-6 text-fd-muted-foreground">The open source feedback platform</p>
</div>
</div>
</a>
<a href="https://billing.goldenvm.com?ref=coolify.io" className="rounded-lg border border-fd-border bg-fd-card p-4 no-underline transition hover:border-fd-primary/60 hover:bg-fd-muted/40">
<div className="flex min-w-0 items-center gap-4">
<img src="/docs/images/sponsors/goldenvm.webp" alt="GoldenVM logo" className="size-14 shrink-0 rounded-md object-contain" />
<div className="min-w-0">
<p className="m-0 font-semibold text-fd-foreground">GoldenVM</p>
<p className="m-0 mt-1 line-clamp-3 text-sm leading-6 text-fd-muted-foreground">Premium virtual machine hosting solutions</p>
</div>
</div>
</a>
<a href="https://www.greptile.com?ref=coolify.io" className="rounded-lg border border-fd-border bg-fd-card p-4 no-underline transition hover:border-fd-primary/60 hover:bg-fd-muted/40">
<div className="flex min-w-0 items-center gap-4">
<img src="/docs/images/sponsors/greptile.svg" alt="Greptile logo" className="size-14 shrink-0 rounded-md object-contain" />
<div className="min-w-0">
<p className="m-0 font-semibold text-fd-foreground">Greptile</p>
<p className="m-0 mt-1 line-clamp-3 text-sm leading-6 text-fd-muted-foreground">The AI Code Reviewer</p>
</div>
</div>
</a>
<a href="http://htznr.li/CoolifyXHetzner" className="rounded-lg border border-fd-border bg-fd-card p-4 no-underline transition hover:border-fd-primary/60 hover:bg-fd-muted/40">
<div className="flex min-w-0 items-center gap-4">
<img src="/docs/images/sponsors/hetzner.webp" alt="Hetzner logo" className="size-14 shrink-0 rounded-md object-contain" />
<div className="min-w-0">
<p className="m-0 font-semibold text-fd-foreground">Hetzner</p>
<p className="m-0 mt-1 line-clamp-3 text-sm leading-6 text-fd-muted-foreground">Server, cloud, hosting, and data center solutions</p>
</div>
</div>
</a>
<a href="https://www.hostinger.com/vps/coolify-hosting?ref=coolify.io" className="rounded-lg border border-fd-border bg-fd-card p-4 no-underline transition hover:border-fd-primary/60 hover:bg-fd-muted/40">
<div className="flex min-w-0 items-center gap-4">
<img src="/docs/images/sponsors/hostinger.webp" alt="Hostinger logo" className="size-14 shrink-0 rounded-md object-contain" />
<div className="min-w-0">
<p className="m-0 font-semibold text-fd-foreground">Hostinger</p>
<p className="m-0 mt-1 line-clamp-3 text-sm leading-6 text-fd-muted-foreground">Web hosting and VPS solutions</p>
</div>
</div>
</a>
<a href="https://jobscollider.com/remote-jobs?ref=coolify.io" className="rounded-lg border border-fd-border bg-fd-card p-4 no-underline transition hover:border-fd-primary/60 hover:bg-fd-muted/40">
<div className="flex min-w-0 items-center gap-4">
<img src="/docs/images/sponsors/jobscollider.webp" alt="JobsCollider logo" className="size-14 shrink-0 rounded-md object-contain" />
<div className="min-w-0">
<p className="m-0 font-semibold text-fd-foreground">JobsCollider</p>
<p className="m-0 mt-1 line-clamp-3 text-sm leading-6 text-fd-muted-foreground">30,000+ remote jobs for developers</p>
</div>
</div>
</a>
<a href="https://juxtdigital.com?ref=coolify.io" className="rounded-lg border border-fd-border bg-fd-card p-4 no-underline transition hover:border-fd-primary/60 hover:bg-fd-muted/40">
<div className="flex min-w-0 items-center gap-4">
<img src="/docs/images/sponsors/juxtdigital.webp" alt="Juxtdigital logo" className="size-14 shrink-0 rounded-md object-contain" />
<div className="min-w-0">
<p className="m-0 font-semibold text-fd-foreground">Juxtdigital</p>
<p className="m-0 mt-1 line-clamp-3 text-sm leading-6 text-fd-muted-foreground">Digital PR & AI Authority Building Agency</p>
</div>
</div>
</a>
<a href="https://liquidweb.com?ref=coolify.io" className="rounded-lg border border-fd-border bg-fd-card p-4 no-underline transition hover:border-fd-primary/60 hover:bg-fd-muted/40">
<div className="flex min-w-0 items-center gap-4">
<img src="/docs/images/sponsors/liquidweb.webp" alt="LiquidWeb logo" className="size-14 shrink-0 rounded-md object-contain" />
<div className="min-w-0">
<p className="m-0 font-semibold text-fd-foreground">LiquidWeb</p>
<p className="m-0 mt-1 line-clamp-3 text-sm leading-6 text-fd-muted-foreground">Premium managed hosting solutions</p>
</div>
</div>
</a>
<a href="https://logto.io?ref=coolify.io" className="rounded-lg border border-fd-border bg-fd-card p-4 no-underline transition hover:border-fd-primary/60 hover:bg-fd-muted/40">
<div className="flex min-w-0 items-center gap-4">
<img src="/docs/images/sponsors/logto.webp" alt="Logto logo" className="size-14 shrink-0 rounded-md object-contain" />
<div className="min-w-0">
<p className="m-0 font-semibold text-fd-foreground">Logto</p>
<p className="m-0 mt-1 line-clamp-3 text-sm leading-6 text-fd-muted-foreground">The better identity infrastructure for developers</p>
</div>
</div>
</a>
<a href="https://lumadock.com/vps-hosting/coolify?utm_source=coolify&amp;utm_medium=sponsorship&amp;utm_campaign=coolify_oss_sponsor_2026&amp;utm_content=github_readme" className="rounded-lg border border-fd-border bg-fd-card p-4 no-underline transition hover:border-fd-primary/60 hover:bg-fd-muted/40">
<div className="flex min-w-0 items-center gap-4">
<img src="/docs/images/sponsors/lumadock.webp" alt="LumaDock logo" className="size-14 shrink-0 rounded-md object-contain" />
<div className="min-w-0">
<p className="m-0 font-semibold text-fd-foreground">LumaDock</p>
<p className="m-0 mt-1 line-clamp-3 text-sm leading-6 text-fd-muted-foreground">Fast and reliable virtual server hosting</p>
</div>
</div>
</a>
<a href="https://macarne.com?ref=coolify.io" className="rounded-lg border border-fd-border bg-fd-card p-4 no-underline transition hover:border-fd-primary/60 hover:bg-fd-muted/40">
<div className="flex min-w-0 items-center gap-4">
<img src="/docs/images/sponsors/macarne.webp" alt="Macarne logo" className="size-14 shrink-0 rounded-md object-contain" />
<div className="min-w-0">
<p className="m-0 font-semibold text-fd-foreground">Macarne</p>
<p className="m-0 mt-1 line-clamp-3 text-sm leading-6 text-fd-muted-foreground">Best IP Transit & Carrier Ethernet Solutions for Simplified Network Connectivity</p>
</div>
</div>
</a>
<a href="https://vibe.mobb.ai/?ref=coolify.io" className="rounded-lg border border-fd-border bg-fd-card p-4 no-underline transition hover:border-fd-primary/60 hover:bg-fd-muted/40">
<div className="flex min-w-0 items-center gap-4">
<img src="/docs/images/sponsors/mobb.svg" alt="Mobb logo" className="size-14 shrink-0 rounded-md object-contain" />
<div className="min-w-0">
<p className="m-0 font-semibold text-fd-foreground">Mobb</p>
<p className="m-0 mt-1 line-clamp-3 text-sm leading-6 text-fd-muted-foreground">Secure Your AI-Generated Code to Unlock Dev Productivity</p>
</div>
</div>
</a>
<a href="https://petrosky.io?ref=coolify.io" className="rounded-lg border border-fd-border bg-fd-card p-4 no-underline transition hover:border-fd-primary/60 hover:bg-fd-muted/40">
<div className="flex min-w-0 items-center gap-4">
<img src="/docs/images/sponsors/petrosky.png" alt="PetroSky Cloud logo" className="size-14 shrink-0 rounded-md object-contain" />
<div className="min-w-0">
<p className="m-0 font-semibold text-fd-foreground">PetroSky Cloud</p>
<p className="m-0 mt-1 line-clamp-3 text-sm leading-6 text-fd-muted-foreground">Open source cloud deployment solutions</p>
</div>
</div>
</a>
<a href="https://pfglabs.com?ref=coolify.io" className="rounded-lg border border-fd-border bg-fd-card p-4 no-underline transition hover:border-fd-primary/60 hover:bg-fd-muted/40">
<div className="flex min-w-0 items-center gap-4">
<img src="/docs/images/sponsors/pfglabs.webp" alt="PFGLabs logo" className="size-14 shrink-0 rounded-md object-contain" />
<div className="min-w-0">
<p className="m-0 font-semibold text-fd-foreground">PFGLabs</p>
<p className="m-0 mt-1 line-clamp-3 text-sm leading-6 text-fd-muted-foreground">Build Real Projects with Golang</p>
</div>
</div>
</a>
<a href="https://ramnode.com/?ref=coolify.io" className="rounded-lg border border-fd-border bg-fd-card p-4 no-underline transition hover:border-fd-primary/60 hover:bg-fd-muted/40">
<div className="flex min-w-0 items-center gap-4">
<img src="/docs/images/sponsors/ramnode.png" alt="Ramnode logo" className="size-14 shrink-0 rounded-md object-contain" />
<div className="min-w-0">
<p className="m-0 font-semibold text-fd-foreground">Ramnode</p>
<p className="m-0 mt-1 line-clamp-3 text-sm leading-6 text-fd-muted-foreground">High Performance Cloud VPS Hosting</p>
</div>
</div>
</a>
<a href="https://saasykit.com?ref=coolify.io" className="rounded-lg border border-fd-border bg-fd-card p-4 no-underline transition hover:border-fd-primary/60 hover:bg-fd-muted/40">
<div className="flex min-w-0 items-center gap-4">
<img src="/docs/images/sponsors/saasykit.webp" alt="SaasyKit logo" className="size-14 shrink-0 rounded-md object-contain" />
<div className="min-w-0">
<p className="m-0 font-semibold text-fd-foreground">SaasyKit</p>
<p className="m-0 mt-1 line-clamp-3 text-sm leading-6 text-fd-muted-foreground">Complete SaaS starter kit for developers</p>
</div>
</div>
</a>
<a href="https://supa.guide?ref=coolify.io" className="rounded-lg border border-fd-border bg-fd-card p-4 no-underline transition hover:border-fd-primary/60 hover:bg-fd-muted/40">
<div className="flex min-w-0 items-center gap-4">
<img src="/docs/images/sponsors/supaguide.webp" alt="SupaGuide logo" className="size-14 shrink-0 rounded-md object-contain" />
<div className="min-w-0">
<p className="m-0 font-semibold text-fd-foreground">SupaGuide</p>
<p className="m-0 mt-1 line-clamp-3 text-sm leading-6 text-fd-muted-foreground">Your comprehensive guide to Supabase</p>
</div>
</div>
</a>
<a href="https://supadata.ai/?ref=coolify.io" className="rounded-lg border border-fd-border bg-fd-card p-4 no-underline transition hover:border-fd-primary/60 hover:bg-fd-muted/40">
<div className="flex min-w-0 items-center gap-4">
<img src="/docs/images/sponsors/supadata.webp" alt="Supadata AI logo" className="size-14 shrink-0 rounded-md object-contain" />
<div className="min-w-0">
<p className="m-0 font-semibold text-fd-foreground">Supadata AI</p>
<p className="m-0 mt-1 line-clamp-3 text-sm leading-6 text-fd-muted-foreground">Scrape YouTube, web, and files. Get AI-ready, clean data</p>
</div>
</div>
</a>
<a href="https://syntax.fm?ref=coolify.io" className="rounded-lg border border-fd-border bg-fd-card p-4 no-underline transition hover:border-fd-primary/60 hover:bg-fd-muted/40">
<div className="flex min-w-0 items-center gap-4">
<img src="/docs/images/sponsors/syntax.webp" alt="Syntax.fm logo" className="size-14 shrink-0 rounded-md object-contain" />
<div className="min-w-0">
<p className="m-0 font-semibold text-fd-foreground">Syntax.fm</p>
<p className="m-0 mt-1 line-clamp-3 text-sm leading-6 text-fd-muted-foreground">Podcast for web developers</p>
</div>
</div>
</a>
<a href="https://www.tigrisdata.com?ref=coolify.io" className="rounded-lg border border-fd-border bg-fd-card p-4 no-underline transition hover:border-fd-primary/60 hover:bg-fd-muted/40">
<div className="flex min-w-0 items-center gap-4">
<img src="/docs/images/sponsors/tigris.webp" alt="Tigris logo" className="size-14 shrink-0 rounded-md object-contain" />
<div className="min-w-0">
<p className="m-0 font-semibold text-fd-foreground">Tigris</p>
<p className="m-0 mt-1 line-clamp-3 text-sm leading-6 text-fd-muted-foreground">Modern developer data platform</p>
</div>
</div>
</a>
<a href="https://tolgee.io?ref=coolify.io" className="rounded-lg border border-fd-border bg-fd-card p-4 no-underline transition hover:border-fd-primary/60 hover:bg-fd-muted/40">
<div className="flex min-w-0 items-center gap-4">
<img src="/docs/images/sponsors/tolgee.webp" alt="Tolgee logo" className="size-14 shrink-0 rounded-md object-contain" />
<div className="min-w-0">
<p className="m-0 font-semibold text-fd-foreground">Tolgee</p>
<p className="m-0 mt-1 line-clamp-3 text-sm leading-6 text-fd-muted-foreground">The open source localization platform</p>
</div>
</div>
</a>
<a href="https://www.ubicloud.com?ref=coolify.io" className="rounded-lg border border-fd-border bg-fd-card p-4 no-underline transition hover:border-fd-primary/60 hover:bg-fd-muted/40">
<div className="flex min-w-0 items-center gap-4">
<img src="/docs/images/sponsors/ubicloud.webp" alt="Ubicloud logo" className="size-14 shrink-0 rounded-md object-contain" />
<div className="min-w-0">
<p className="m-0 font-semibold text-fd-foreground">Ubicloud</p>
<p className="m-0 mt-1 line-clamp-3 text-sm leading-6 text-fd-muted-foreground">Open source cloud infrastructure platform</p>
</div>
</div>
</a>
<a href="https://vpsdime.com?ref=coolify.io" className="rounded-lg border border-fd-border bg-fd-card p-4 no-underline transition hover:border-fd-primary/60 hover:bg-fd-muted/40">
<div className="flex min-w-0 items-center gap-4">
<img src="/docs/images/sponsors/vpsdime.svg" alt="VPSDime logo" className="size-14 shrink-0 rounded-md object-contain" />
<div className="min-w-0">
<p className="m-0 font-semibold text-fd-foreground">VPSDime</p>
<p className="m-0 mt-1 line-clamp-3 text-sm leading-6 text-fd-muted-foreground">Affordable high-performance VPS hosting solutions</p>
</div>
</div>
</a>
<a href="https://www.quantcdn.io/?ref=coolify.io" className="rounded-lg border border-fd-border bg-fd-card p-4 no-underline transition hover:border-fd-primary/60 hover:bg-fd-muted/40">
<div className="flex min-w-0 items-center gap-4">
<img src="/docs/images/sponsors/quant.webp" alt="QuantCDN logo" className="size-14 shrink-0 rounded-md object-contain" />
<div className="min-w-0">
<p className="m-0 font-semibold text-fd-foreground">QuantCDN</p>
<p className="m-0 mt-1 line-clamp-3 text-sm leading-6 text-fd-muted-foreground">Enterprise-grade content delivery network</p>
</div>
</div>
</a>
<a href="https://cloudify.ro/?ref=coolify.io" className="rounded-lg border border-fd-border bg-fd-card p-4 no-underline transition hover:border-fd-primary/60 hover:bg-fd-muted/40">
<div className="flex min-w-0 items-center gap-4">
<img src="/docs/images/sponsors/cloudify.webp" alt="Cloudify logo" className="size-14 shrink-0 rounded-md object-contain" />
<div className="min-w-0">
<p className="m-0 font-semibold text-fd-foreground">Cloudify</p>
<p className="m-0 mt-1 line-clamp-3 text-sm leading-6 text-fd-muted-foreground">Cloud hosting solutions</p>
</div>
</div>
</a>
<a href="https://trieve.ai/?ref=coolify.io" className="rounded-lg border border-fd-border bg-fd-card p-4 no-underline transition hover:border-fd-primary/60 hover:bg-fd-muted/40">
<div className="flex min-w-0 items-center gap-4">
<img src="/docs/images/sponsors/trieve.webp" alt="Trieve logo" className="size-14 shrink-0 rounded-md object-contain" />
<div className="min-w-0">
<p className="m-0 font-semibold text-fd-foreground">Trieve</p>
<p className="m-0 mt-1 line-clamp-3 text-sm leading-6 text-fd-muted-foreground">AI-powered search and analytics</p>
</div>
</div>
</a>
<a href="https://brand.dev/?ref=coolify.io" className="rounded-lg border border-fd-border bg-fd-card p-4 no-underline transition hover:border-fd-primary/60 hover:bg-fd-muted/40">
<div className="flex min-w-0 items-center gap-4">
<img src="/docs/images/sponsors/branddev.webp" alt="Brand.dev logo" className="size-14 shrink-0 rounded-md object-contain" />
<div className="min-w-0">
<p className="m-0 font-semibold text-fd-foreground">Brand.dev</p>
<p className="m-0 mt-1 line-clamp-3 text-sm leading-6 text-fd-muted-foreground">The #1 Brand API for B2B software startups</p>
</div>
</div>
</a>
<a href="https://www.glueops.dev/?ref=coolify.io" className="rounded-lg border border-fd-border bg-fd-card p-4 no-underline transition hover:border-fd-primary/60 hover:bg-fd-muted/40">
<div className="flex min-w-0 items-center gap-4">
<img src="/docs/images/sponsors/glueops.webp" alt="GlueOps logo" className="size-14 shrink-0 rounded-md object-contain" />
<div className="min-w-0">
<p className="m-0 font-semibold text-fd-foreground">GlueOps</p>
<p className="m-0 mt-1 line-clamp-3 text-sm leading-6 text-fd-muted-foreground">DevOps automation and infrastructure management</p>
</div>
</div>
</a>
<a href="https://massivegrid.com/?ref=coolify.io" className="rounded-lg border border-fd-border bg-fd-card p-4 no-underline transition hover:border-fd-primary/60 hover:bg-fd-muted/40">
<div className="flex min-w-0 items-center gap-4">
<img src="/docs/images/sponsors/massivegrid.webp" alt="MassiveGrid logo" className="size-14 shrink-0 rounded-md object-contain" />
<div className="min-w-0">
<p className="m-0 font-semibold text-fd-foreground">MassiveGrid</p>
<p className="m-0 mt-1 line-clamp-3 text-sm leading-6 text-fd-muted-foreground">Enterprise cloud hosting solutions</p>
</div>
</div>
</a>
<a href="https://algora.io/?utm_source=coolify.io" className="rounded-lg border border-fd-border bg-fd-card p-4 no-underline transition hover:border-fd-primary/60 hover:bg-fd-muted/40">
<div className="flex min-w-0 items-center gap-4">
<img src="/docs/images/sponsors/algora.webp" alt="Algora logo" className="size-14 shrink-0 rounded-md object-contain" />
<div className="min-w-0">
<p className="m-0 font-semibold text-fd-foreground">Algora</p>
<p className="m-0 mt-1 line-clamp-3 text-sm leading-6 text-fd-muted-foreground">Open source contribution platform</p>
</div>
</div>
</a>
<a href="https://yaak.app/?ref=coolify.io" className="rounded-lg border border-fd-border bg-fd-card p-4 no-underline transition hover:border-fd-primary/60 hover:bg-fd-muted/40">
<div className="flex min-w-0 items-center gap-4">
<img src="/docs/images/sponsors/yaak.webp" alt="Yaak logo" className="size-14 shrink-0 rounded-md object-contain" />
<div className="min-w-0">
<p className="m-0 font-semibold text-fd-foreground">Yaak</p>
<p className="m-0 mt-1 line-clamp-3 text-sm leading-6 text-fd-muted-foreground">The API client for modern developers</p>
</div>
</div>
</a>
<a href="https://wz-it.com/?ref=coolify.io" className="rounded-lg border border-fd-border bg-fd-card p-4 no-underline transition hover:border-fd-primary/60 hover:bg-fd-muted/40">
<div className="flex min-w-0 items-center gap-4">
<img src="/docs/images/sponsors/wzit.webp" alt="WZ-IT logo" className="size-14 shrink-0 rounded-md object-contain" />
<div className="min-w-0">
<p className="m-0 font-semibold text-fd-foreground">WZ-IT</p>
<p className="m-0 mt-1 line-clamp-3 text-sm leading-6 text-fd-muted-foreground">German agency for customized cloud solutions, migration, managed services and open source hosting</p>
</div>
</div>
</a>
<a href="https://gozunga.com/?ref=coolify.io" className="rounded-lg border border-fd-border bg-fd-card p-4 no-underline transition hover:border-fd-primary/60 hover:bg-fd-muted/40">
<div className="flex min-w-0 items-center gap-4">
<img src="/docs/images/sponsors/gozunga.webp" alt="Gozunga logo" className="size-14 shrink-0 rounded-md object-contain" />
<div className="min-w-0">
<p className="m-0 font-semibold text-fd-foreground">Gozunga</p>
<p className="m-0 mt-1 line-clamp-3 text-sm leading-6 text-fd-muted-foreground">Seriously Simple Cloud Infrastructure</p>
</div>
</div>
</a>
</div>
<div className="not-prose grid gap-4 sm:grid-cols-2 xl:grid-cols-3">
<div className="rounded-lg border border-fd-border bg-fd-card p-4">
<div className="flex min-w-0 items-center gap-4">
<img src="/docs/images/team/coollabs-logo-smaller.webp" alt="Your Company? logo" className="size-14 shrink-0 rounded-md object-contain" />
<div className="min-w-0">
<p className="m-0 font-semibold text-fd-foreground">Your Company?</p>
<p className="m-0 mt-1 line-clamp-3 text-sm leading-6 text-fd-muted-foreground">Will Your Company Be Next?</p>
</div>
</div>
</div>
</div>
<SponsorsList />
+2
View File
@@ -11,6 +11,7 @@ import { CoolifyHome } from './coolify-home';
import { MediaCard, MediaCardGroup } from './media-card';
import { ScreenshotTab, ScreenshotTabs } from './screenshot-tabs';
import { ServicesList } from './services-list';
import { SponsorsList } from './sponsors-list';
import { ZoomImage } from './zoom-image';
function Badge({ text, children }: { type?: string; text?: string; children?: React.ReactNode }) {
@@ -39,6 +40,7 @@ export function getMDXComponents(components?: MDXComponents) {
ScreenshotTab,
ScreenshotTabs,
ServicesList,
SponsorsList,
Step,
Steps,
Tab,
+130
View File
@@ -0,0 +1,130 @@
'use client';
import { useEffect, useMemo, useState } from 'react';
import { SPONSORS_URL, type Sponsor, type SponsorsResponse } from '@/lib/sponsors';
const ref = 'coolify.io';
function addRef(url: string): string {
return url.includes('?') ? `${url}&ref=${ref}&utm_source=${ref}` : `${url}?ref=${ref}&utm_source=${ref}`;
}
function sponsorImageUrl(sponsor: Sponsor): string | undefined {
return sponsor.docsImageUrl ?? sponsor.imageUrl;
}
function SponsorCard({ sponsor, size }: { sponsor: Sponsor; size: 'huge' | 'big' }) {
const imageUrl = sponsorImageUrl(sponsor);
if (size === 'huge') {
return (
<a
href={addRef(sponsor.url)}
className="rounded-lg border border-fd-border bg-fd-card p-6 no-underline transition hover:border-fd-primary/60 hover:bg-fd-muted/40"
target="_blank"
rel="noreferrer noopener"
>
<div className="flex h-full min-h-56 flex-col items-center justify-center gap-5 text-center">
{imageUrl ? (
<div className="flex h-20 w-full items-center justify-center">
<img src={imageUrl} alt={`${sponsor.name} logo`} className="max-h-20 w-full max-w-56 object-contain" />
</div>
) : null}
<div className="min-w-0">
<p className="m-0 font-semibold text-fd-foreground">{sponsor.name}</p>
<p className="m-0 mt-2 line-clamp-3 text-sm leading-6 text-fd-muted-foreground">{sponsor.description}</p>
</div>
</div>
</a>
);
}
return (
<a
href={addRef(sponsor.url)}
className="rounded-lg border border-fd-border bg-fd-card p-4 no-underline transition hover:border-fd-primary/60 hover:bg-fd-muted/40"
target="_blank"
rel="noreferrer noopener"
>
<div className="flex min-w-0 items-center gap-4">
{imageUrl ? <img src={imageUrl} alt={`${sponsor.name} logo`} className="size-14 shrink-0 rounded-md object-contain" /> : null}
<div className="min-w-0">
<p className="m-0 font-semibold text-fd-foreground">{sponsor.name}</p>
<p className="m-0 mt-1 line-clamp-3 text-sm leading-6 text-fd-muted-foreground">{sponsor.description}</p>
</div>
</div>
</a>
);
}
export function SponsorsList() {
const [data, setData] = useState<SponsorsResponse | null>(null);
const [error, setError] = useState<string | null>(null);
useEffect(() => {
const controller = new AbortController();
fetch(SPONSORS_URL, { signal: controller.signal })
.then((response) => {
if (!response.ok) {
throw new Error(`Failed to fetch sponsors: ${response.status}`);
}
return response.json() as Promise<SponsorsResponse>;
})
.then(setData)
.catch((fetchError: unknown) => {
if (fetchError instanceof DOMException && fetchError.name === 'AbortError') {
return;
}
setError(fetchError instanceof Error ? fetchError.message : 'Failed to fetch sponsors');
});
return () => controller.abort();
}, []);
const hugeSponsors = useMemo(() => data?.tiers.huge ?? [], [data]);
const bigSponsors = useMemo(() => data?.tiers.big ?? [], [data]);
if (error) {
return (
<div className="not-prose rounded-lg border border-fd-border bg-fd-card p-4 text-sm text-fd-muted-foreground">
Could not load sponsors. Please try again later.
</div>
);
}
if (!data) {
return (
<div className="not-prose rounded-lg border border-fd-border bg-fd-card p-4 text-sm text-fd-muted-foreground">
Loading sponsors
</div>
);
}
return (
<div className="not-prose space-y-10">
{hugeSponsors.length > 0 ? (
<section className="space-y-4">
<h2 className="text-2xl font-semibold tracking-tight text-fd-foreground">Huge Sponsors</h2>
<div className="grid gap-4 sm:grid-cols-2 xl:grid-cols-4">
{hugeSponsors.map((sponsor) => (
<SponsorCard key={sponsor.name} sponsor={sponsor} size="huge" />
))}
</div>
</section>
) : null}
{bigSponsors.length > 0 ? (
<section className="space-y-4">
<h2 className="text-2xl font-semibold tracking-tight text-fd-foreground">Big Sponsors</h2>
<div className="grid gap-4 sm:grid-cols-2 xl:grid-cols-3">
{bigSponsors.map((sponsor) => (
<SponsorCard key={sponsor.name} sponsor={sponsor} size="big" />
))}
</div>
</section>
) : null}
</div>
);
}
+4
View File
@@ -10,6 +10,9 @@ export type Sponsor = {
imageKey?: string;
imagePath?: string;
imageUrl?: string;
docsImageKey?: string;
docsImagePath?: string;
docsImageUrl?: string;
tier: SponsorTier;
pinned?: boolean;
imageStyle?: string;
@@ -29,6 +32,7 @@ export type SponsorsResponse = {
repository: string;
landing: string;
imagesBaseUrl: string;
docsImagesBaseUrl?: string;
};
tiers: Record<SponsorTier, Sponsor[]>;
};