80 lines
3.6 KiB
TypeScript
80 lines
3.6 KiB
TypeScript
import React from 'react';
|
|
import { PRICING_TIERS } from '../constants';
|
|
|
|
export const PricingTiers: React.FC = () => {
|
|
return (
|
|
<section id="editions" className="py-16 md:py-20 px-6 border-t hairline bg-white">
|
|
<div className="max-w-6xl mx-auto">
|
|
<div className="mb-10">
|
|
<div className="mono text-[11px] uppercase tracking-[0.18em] text-slate-500 mb-2">Editions & services</div>
|
|
<h2 className="text-3xl md:text-4xl font-extrabold tracking-tight text-slate-900">Choose an engagement</h2>
|
|
<p className="text-slate-700 mt-3 max-w-2xl">
|
|
The public drops are free. Paid editions fund ongoing work and include the working files. Custom dossiers are limited in capacity.
|
|
</p>
|
|
</div>
|
|
|
|
<div className="grid md:grid-cols-3 gap-6">
|
|
{PRICING_TIERS.map((tier) => (
|
|
<div
|
|
key={tier.name}
|
|
className={`rounded-xl border hairline p-7 flex flex-col ${
|
|
tier.variant === 'premium' ? 'bg-slate-900 text-white shadow-sm' : 'bg-white text-slate-900'
|
|
}`}
|
|
>
|
|
<div className="mb-6">
|
|
<div className={`mono text-[11px] uppercase tracking-[0.18em] ${tier.variant === 'premium' ? 'text-white/70' : 'text-slate-500'}`}>
|
|
{tier.name}
|
|
</div>
|
|
<div className="mt-3 text-3xl font-extrabold">{tier.price}</div>
|
|
<p className={`mt-3 text-sm leading-relaxed ${tier.variant === 'premium' ? 'text-white/80' : 'text-slate-700'}`}>
|
|
{tier.description}
|
|
</p>
|
|
</div>
|
|
|
|
<ul className={`flex-1 space-y-3 text-sm ${tier.variant === 'premium' ? 'text-white/85' : 'text-slate-700'}`}>
|
|
{tier.features.map((f, i) => (
|
|
<li key={i} className="flex items-start gap-3">
|
|
<span className={`${tier.variant === 'premium' ? 'text-white' : 'text-red-ink'} mt-0.5 font-bold`}>✓</span>
|
|
<span>{f}</span>
|
|
</li>
|
|
))}
|
|
</ul>
|
|
{(() => {
|
|
const enabled = (tier.enabled !== false) && !!tier.actionUrl;
|
|
const isMailto = (tier.actionUrl || '').startsWith('mailto');
|
|
|
|
return (
|
|
<div className="mt-8">
|
|
<button
|
|
type="button"
|
|
disabled={!enabled}
|
|
onClick={() => {
|
|
if (!enabled || !tier.actionUrl) return;
|
|
window.open(tier.actionUrl, isMailto ? '_self' : '_blank', isMailto ? undefined : 'noopener,noreferrer');
|
|
}}
|
|
className={`w-full rounded-md py-3 text-sm font-semibold transition-colors ${
|
|
!enabled
|
|
? 'bg-slate-200 text-slate-500 cursor-not-allowed'
|
|
: tier.variant === 'premium'
|
|
? 'bg-white text-slate-900 hover:bg-slate-100'
|
|
: 'bg-slate-900 text-white hover:bg-slate-800'
|
|
}`}
|
|
title={!enabled ? (tier.disabledHint || 'Not available yet') : undefined}
|
|
>
|
|
{tier.cta}
|
|
</button>
|
|
|
|
{!enabled && tier.disabledHint ? (
|
|
<div className="mt-2 text-xs text-slate-500 leading-relaxed">{tier.disabledHint}</div>
|
|
) : null}
|
|
</div>
|
|
);
|
|
})()}
|
|
|
|
</div>
|
|
))}
|
|
</div>
|
|
</div>
|
|
</section>
|
|
);
|
|
};
|