130 lines
3.7 KiB
TypeScript
130 lines
3.7 KiB
TypeScript
import {
|
|
CheckIcon,
|
|
HeartHandshakeIcon,
|
|
MessageSquareIcon,
|
|
PackageIcon,
|
|
RocketIcon,
|
|
SparklesIcon,
|
|
StarIcon,
|
|
ZapIcon,
|
|
} from 'lucide-react';
|
|
import Link from 'next/link';
|
|
import { cn } from '@/lib/utils';
|
|
|
|
const perks = [
|
|
{
|
|
icon: PackageIcon,
|
|
title: 'Latest Docker Images',
|
|
description: 'Access to bleeding-edge builds on every commit',
|
|
href: '/docs/self-hosting/supporter-access-latest-docker-images',
|
|
highlight: true,
|
|
},
|
|
{
|
|
icon: MessageSquareIcon,
|
|
title: 'Prioritized Support',
|
|
description: 'Get help faster with priority Discord support',
|
|
highlight: true,
|
|
},
|
|
{
|
|
icon: RocketIcon,
|
|
title: 'Feature Requests',
|
|
description: 'Your ideas get prioritized in our roadmap',
|
|
highlight: true,
|
|
},
|
|
{
|
|
icon: StarIcon,
|
|
title: 'Exclusive Discord Role',
|
|
description: 'Special badge and recognition in our community',
|
|
},
|
|
{
|
|
icon: SparklesIcon,
|
|
title: 'Early Access',
|
|
description: 'Try new features before public release',
|
|
},
|
|
{
|
|
icon: ZapIcon,
|
|
title: 'Direct Impact',
|
|
description: 'Your support directly funds development',
|
|
},
|
|
];
|
|
|
|
export function SupporterPerks({ className }: { className?: string }) {
|
|
return (
|
|
<div
|
|
className={cn(
|
|
'col gap-4 rounded-xl border bg-card p-6',
|
|
'sticky top-24',
|
|
className
|
|
)}
|
|
>
|
|
<div className="col mb-2 gap-2">
|
|
<div className="row items-center gap-2">
|
|
<HeartHandshakeIcon className="size-5 text-primary" />
|
|
<h3 className="font-semibold text-lg">Supporter Perks</h3>
|
|
</div>
|
|
<p className="text-muted-foreground text-sm">
|
|
Everything you get when you support OpenPanel
|
|
</p>
|
|
</div>
|
|
|
|
<div className="col gap-3">
|
|
{perks.map((perk, index) => {
|
|
const Icon = perk.icon;
|
|
return (
|
|
<div
|
|
className={cn(
|
|
'col gap-1.5 rounded-lg border p-3 transition-colors',
|
|
perk.highlight
|
|
? 'border-primary/20 bg-primary/5'
|
|
: 'border-border bg-background'
|
|
)}
|
|
key={index}
|
|
>
|
|
<div className="row items-start gap-2">
|
|
<Icon
|
|
className={cn(
|
|
'mt-0.5 size-4 shrink-0',
|
|
perk.highlight ? 'text-primary' : 'text-muted-foreground'
|
|
)}
|
|
/>
|
|
<div className="col min-w-0 flex-1 gap-0.5">
|
|
<div className="row items-center gap-2">
|
|
<h4
|
|
className={cn(
|
|
'font-medium text-sm',
|
|
perk.highlight && 'text-primary'
|
|
)}
|
|
>
|
|
{perk.title}
|
|
</h4>
|
|
{perk.highlight && (
|
|
<CheckIcon className="size-3.5 shrink-0 text-primary" />
|
|
)}
|
|
</div>
|
|
<p className="text-muted-foreground text-xs">
|
|
{perk.description}
|
|
</p>
|
|
{perk.href && (
|
|
<Link
|
|
className="mt-1 text-primary text-xs hover:underline"
|
|
href={perk.href}
|
|
>
|
|
Learn more →
|
|
</Link>
|
|
)}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
);
|
|
})}
|
|
</div>
|
|
|
|
<div className="mt-4 border-t pt-4">
|
|
<p className="text-center text-muted-foreground text-xs">
|
|
Starting at <strong className="text-foreground">$20/month</strong>
|
|
</p>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|