28 lines
1.7 KiB
JavaScript
28 lines
1.7 KiB
JavaScript
import React from 'react'
|
|
|
|
export default function GroupStudioPromoCard({ title, description, bullets = [], primaryLabel, primaryHref, secondaryLabel, secondaryHref }) {
|
|
return (
|
|
<section className="rounded-[30px] border border-white/10 bg-[radial-gradient(circle_at_top_left,rgba(56,189,248,0.14),transparent_34%),linear-gradient(180deg,rgba(255,255,255,0.05),rgba(255,255,255,0.02))] p-6 shadow-[0_18px_55px_rgba(2,6,23,0.28)]">
|
|
<div className="text-[11px] font-semibold uppercase tracking-[0.24em] text-sky-200/80">Studio groups</div>
|
|
<h2 className="mt-2 text-2xl font-semibold text-white">{title}</h2>
|
|
<p className="mt-3 max-w-2xl text-sm leading-6 text-slate-300">{description}</p>
|
|
|
|
{bullets.length > 0 ? (
|
|
<div className="mt-5 grid gap-3 md:grid-cols-3">
|
|
{bullets.map((bullet) => (
|
|
<div key={bullet.title} className="rounded-[22px] border border-white/10 bg-black/20 p-4">
|
|
<div className="text-sm font-semibold text-white">{bullet.title}</div>
|
|
<div className="mt-2 text-sm leading-6 text-slate-400">{bullet.body}</div>
|
|
</div>
|
|
))}
|
|
</div>
|
|
) : null}
|
|
|
|
<div className="mt-5 flex flex-wrap gap-3">
|
|
{primaryHref ? <a href={primaryHref} className="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/35 hover:bg-sky-300/15">{primaryLabel}</a> : null}
|
|
{secondaryHref ? <a href={secondaryHref} className="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]">{secondaryLabel}</a> : null}
|
|
</div>
|
|
</section>
|
|
)
|
|
}
|