mirror of
https://github.com/coollabsio/coolify-docs.git
synced 2026-06-19 07:35:55 +00:00
ui(sponsors): polish sponsor cards
This commit is contained in:
ShadowArcanist
@@ -19,19 +19,25 @@ function SponsorCard({ sponsor, size }: { sponsor: Sponsor; size: 'huge' | 'big'
|
||||
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"
|
||||
className="sponsor-card sponsor-card-huge group flex min-h-80 w-full flex-col items-center justify-center rounded-lg border border-fd-border bg-fd-background/80 p-8 text-center no-underline shadow-sm transition duration-200 hover:-translate-y-1"
|
||||
target="_blank"
|
||||
rel="noreferrer noopener"
|
||||
>
|
||||
<div className="flex h-full min-h-56 flex-col items-center justify-center gap-5 text-center">
|
||||
<div className="flex h-full flex-col items-center justify-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 className="flex h-24 w-full items-center justify-center">
|
||||
<img
|
||||
src={imageUrl}
|
||||
alt={`${sponsor.name} logo`}
|
||||
className="max-h-24 max-w-72 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>
|
||||
<p className="m-0 mt-6 text-lg font-bold text-fd-foreground">{sponsor.name}</p>
|
||||
<p className="m-0 mx-auto mt-3 max-w-72 break-words [overflow-wrap:anywhere] line-clamp-3 text-sm leading-6 text-fd-muted-foreground">
|
||||
{sponsor.description}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</a>
|
||||
@@ -41,15 +47,25 @@ function SponsorCard({ sponsor, size }: { sponsor: Sponsor; size: 'huge' | 'big'
|
||||
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"
|
||||
className="sponsor-card group flex min-h-52 w-full flex-col items-center justify-center rounded-lg border border-fd-border bg-fd-background/70 p-5 text-center no-underline shadow-sm transition duration-200 hover:-translate-y-1"
|
||||
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="flex min-w-0 flex-col items-center">
|
||||
{imageUrl ? (
|
||||
<div className="flex h-16 w-full shrink-0 items-center justify-center">
|
||||
<img
|
||||
src={imageUrl}
|
||||
alt={`${sponsor.name} logo`}
|
||||
className="max-h-14 max-w-40 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-1 line-clamp-3 text-sm leading-6 text-fd-muted-foreground">{sponsor.description}</p>
|
||||
<p className="m-0 mt-4 text-base font-bold text-fd-foreground">{sponsor.name}</p>
|
||||
<p className="m-0 mx-auto mt-2 max-w-64 break-words [overflow-wrap:anywhere] line-clamp-2 text-sm leading-6 text-fd-muted-foreground">
|
||||
{sponsor.description}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</a>
|
||||
@@ -88,7 +104,7 @@ export function SponsorsList() {
|
||||
|
||||
if (error) {
|
||||
return (
|
||||
<div className="not-prose rounded-lg border border-fd-border bg-fd-card p-4 text-sm text-fd-muted-foreground">
|
||||
<div className="mt-12 rounded-lg border border-fd-border bg-fd-background/70 p-5 text-center text-sm text-fd-muted-foreground">
|
||||
Could not load sponsors. Please try again later.
|
||||
</div>
|
||||
);
|
||||
@@ -96,18 +112,60 @@ export function SponsorsList() {
|
||||
|
||||
if (!data) {
|
||||
return (
|
||||
<div className="not-prose rounded-lg border border-fd-border bg-fd-card p-4 text-sm text-fd-muted-foreground">
|
||||
<div className="mt-12 rounded-lg border border-fd-border bg-fd-background/70 p-5 text-center text-sm text-fd-muted-foreground">
|
||||
Loading sponsors…
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="not-prose space-y-10">
|
||||
<div className="mt-12 space-y-10">
|
||||
<style>
|
||||
{`
|
||||
[data-sponsors-page] .sponsor-card {
|
||||
background-clip: padding-box;
|
||||
}
|
||||
|
||||
[data-sponsors-page] .sponsor-card-huge {
|
||||
box-shadow:
|
||||
inset 0 1px 0 rgb(255 255 255 / 0.04),
|
||||
0 10px 24px rgb(0 0 0 / 0.08);
|
||||
}
|
||||
|
||||
[data-sponsors-page] .sponsor-card-huge img {
|
||||
filter: drop-shadow(0 8px 18px rgb(0 0 0 / 0.12));
|
||||
}
|
||||
|
||||
[data-sponsors-page] .sponsor-card:hover {
|
||||
border-color: transparent;
|
||||
background:
|
||||
linear-gradient(rgb(10 10 10 / 0.94), rgb(10 10 10 / 0.94)) padding-box,
|
||||
linear-gradient(135deg, #9a86ff 0%, #7a5cf0 48%, #6643dd 100%) border-box;
|
||||
box-shadow:
|
||||
inset 0 1px 0 rgb(255 255 255 / 0.08),
|
||||
0 0 0 1px rgb(139 115 255 / 0.14),
|
||||
0 12px 28px rgb(94 62 216 / 0.26),
|
||||
0 2px 14px rgb(255 255 255 / 0.04);
|
||||
}
|
||||
|
||||
html:not(.dark) [data-sponsors-page] .sponsor-card:hover {
|
||||
background:
|
||||
linear-gradient(rgb(255 255 255 / 0.96), rgb(255 255 255 / 0.96)) padding-box,
|
||||
linear-gradient(135deg, #9a86ff 0%, #7a5cf0 48%, #6643dd 100%) border-box;
|
||||
box-shadow:
|
||||
inset 0 1px 0 rgb(255 255 255 / 0.75),
|
||||
0 0 0 1px rgb(139 115 255 / 0.14),
|
||||
0 12px 28px rgb(94 62 216 / 0.18),
|
||||
0 2px 10px rgb(0 0 0 / 0.06);
|
||||
}
|
||||
`}
|
||||
</style>
|
||||
{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">
|
||||
<section>
|
||||
<h2 className="m-0 text-center text-xl font-bold tracking-normal text-fd-foreground">
|
||||
Huge Sponsors
|
||||
</h2>
|
||||
<div className="mx-auto mt-5 grid max-w-5xl gap-5 sm:grid-cols-2 xl:grid-cols-3">
|
||||
{hugeSponsors.map((sponsor) => (
|
||||
<SponsorCard key={sponsor.name} sponsor={sponsor} size="huge" />
|
||||
))}
|
||||
@@ -116,9 +174,11 @@ export function SponsorsList() {
|
||||
) : 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">
|
||||
<section className="border-t border-fd-border/70 pt-10">
|
||||
<h2 className="m-0 text-center text-xl font-bold tracking-normal text-fd-foreground">
|
||||
Big Sponsors
|
||||
</h2>
|
||||
<div className="mx-auto mt-5 grid max-w-5xl gap-5 sm:grid-cols-2 xl:grid-cols-3">
|
||||
{bigSponsors.map((sponsor) => (
|
||||
<SponsorCard key={sponsor.name} sponsor={sponsor} size="big" />
|
||||
))}
|
||||
|
||||
Reference in New Issue
Block a user