67 lines
4.5 KiB
JavaScript
67 lines
4.5 KiB
JavaScript
import React from 'react'
|
|
import GroupBadgePill from './GroupBadgePill'
|
|
|
|
export default function GroupPromoCard({ group, eyebrow = 'Groups spotlight', title, description, ctaLabel = 'Open group' }) {
|
|
if (!group) return null
|
|
|
|
return (
|
|
<section className="overflow-hidden rounded-[34px] border border-white/10 bg-[radial-gradient(circle_at_top_left,rgba(56,189,248,0.18),transparent_28%),radial-gradient(circle_at_80%_20%,rgba(16,185,129,0.12),transparent_26%),linear-gradient(180deg,rgba(7,16,29,0.98),rgba(2,6,23,0.94))] shadow-[0_30px_90px_rgba(2,6,23,0.45)]">
|
|
<div className="grid gap-6 p-6 lg:grid-cols-[minmax(0,1.3fr)_320px] lg:p-8">
|
|
<div>
|
|
<p className="text-[11px] font-semibold uppercase tracking-[0.28em] text-sky-200/80">{eyebrow}</p>
|
|
<h2 className="mt-3 text-3xl font-semibold tracking-[-0.03em] text-white sm:text-4xl">{title || group.name}</h2>
|
|
<p className="mt-4 max-w-2xl text-sm leading-7 text-slate-300">{description || group.headline || group.bio_excerpt || 'Collective publishing for shared releases, artwork credits, and collaborative identity.'}</p>
|
|
|
|
<div className="mt-5 flex flex-wrap gap-2">
|
|
{(Array.isArray(group.trust_signals) ? group.trust_signals : []).slice(0, 3).map((signal) => (
|
|
<GroupBadgePill key={signal.key} label={signal.label} tone={signal.tone} />
|
|
))}
|
|
{group.is_recruiting ? <GroupBadgePill label="Actively recruiting" tone="emerald" /> : null}
|
|
</div>
|
|
|
|
<div className="mt-6 flex flex-wrap gap-3">
|
|
<a href={group.urls?.public || '/groups'} className="inline-flex items-center gap-2 rounded-full border border-sky-300/20 bg-sky-300/10 px-4 py-2 text-sm font-semibold text-sky-100 transition hover:border-sky-300/40 hover:bg-sky-300/15">
|
|
{ctaLabel}
|
|
<i className="fa-solid fa-arrow-right text-xs" />
|
|
</a>
|
|
<a href="/groups" className="inline-flex items-center gap-2 rounded-full border border-white/10 bg-white/[0.04] px-4 py-2 text-sm font-semibold text-white transition hover:border-white/20 hover:bg-white/[0.07]">
|
|
Browse all groups
|
|
</a>
|
|
</div>
|
|
</div>
|
|
|
|
<div className="rounded-[28px] border border-white/10 bg-black/25 p-5 backdrop-blur-sm">
|
|
<div className="flex items-center gap-4">
|
|
<div className="flex h-16 w-16 shrink-0 items-center justify-center overflow-hidden rounded-2xl border border-white/10 bg-white/[0.04]">
|
|
{group.avatar_url ? <img src={group.avatar_url} alt="" className="h-full w-full object-cover" loading="lazy" /> : <i className="fa-solid fa-people-group text-slate-300" />}
|
|
</div>
|
|
<div className="min-w-0">
|
|
<div className="truncate text-lg font-semibold text-white">{group.name}</div>
|
|
<div className="mt-1 text-sm text-slate-400">{group.owner?.username || group.owner?.name ? `Led by ${group.owner.username || group.owner.name}` : 'Shared publishing identity'}</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div className="mt-5 grid grid-cols-2 gap-3">
|
|
<div className="rounded-2xl border border-white/10 bg-white/[0.03] p-3">
|
|
<div className="text-2xl font-semibold text-white">{Number(group.counts?.artworks || 0).toLocaleString()}</div>
|
|
<div className="text-[11px] uppercase tracking-[0.18em] text-slate-500">Published artworks</div>
|
|
</div>
|
|
<div className="rounded-2xl border border-white/10 bg-white/[0.03] p-3">
|
|
<div className="text-2xl font-semibold text-white">{Number(group.counts?.followers || 0).toLocaleString()}</div>
|
|
<div className="text-[11px] uppercase tracking-[0.18em] text-slate-500">Followers</div>
|
|
</div>
|
|
<div className="rounded-2xl border border-white/10 bg-white/[0.03] p-3">
|
|
<div className="text-2xl font-semibold text-white">{Number(group.counts?.members || 0).toLocaleString()}</div>
|
|
<div className="text-[11px] uppercase tracking-[0.18em] text-slate-500">Members</div>
|
|
</div>
|
|
<div className="rounded-2xl border border-white/10 bg-white/[0.03] p-3">
|
|
<div className="text-2xl font-semibold text-white">{Number(group.counts?.collections || 0).toLocaleString()}</div>
|
|
<div className="text-[11px] uppercase tracking-[0.18em] text-slate-500">Collections</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
)
|
|
}
|