75 lines
2.5 KiB
TypeScript
75 lines
2.5 KiB
TypeScript
import React from 'react';
|
|
|
|
import { Card, CardContent } from '@/components/ui/card';
|
|
import { cn } from '@/lib/utils';
|
|
|
|
type TenantHeroCardProps = {
|
|
badge?: string;
|
|
title: string;
|
|
description?: string;
|
|
supporting?: string[];
|
|
primaryAction?: React.ReactNode;
|
|
secondaryAction?: React.ReactNode;
|
|
aside?: React.ReactNode;
|
|
children?: React.ReactNode;
|
|
className?: string;
|
|
};
|
|
|
|
export function TenantHeroCard({
|
|
badge,
|
|
title,
|
|
description,
|
|
supporting,
|
|
primaryAction,
|
|
secondaryAction,
|
|
aside,
|
|
children,
|
|
className,
|
|
}: TenantHeroCardProps) {
|
|
return (
|
|
<Card
|
|
className={cn(
|
|
'relative overflow-hidden border border-white/15 bg-white/95 text-slate-900 shadow-2xl shadow-rose-400/10 backdrop-blur-xl',
|
|
'dark:border-white/10 dark:bg-slate-900/95 dark:text-slate-100',
|
|
className
|
|
)}
|
|
>
|
|
<div
|
|
aria-hidden
|
|
className="pointer-events-none absolute inset-0 bg-[radial-gradient(ellipse_at_top,_rgba(255,137,170,0.3),_transparent_60%),radial-gradient(ellipse_at_bottom,_rgba(99,102,241,0.3),_transparent_65%)] motion-safe:animate-[aurora_18s_ease-in-out_infinite]"
|
|
/>
|
|
<div aria-hidden className="absolute inset-0 bg-gradient-to-br from-slate-950/80 via-slate-900/20 to-transparent mix-blend-overlay" />
|
|
|
|
<CardContent className="relative z-10 flex flex-col gap-8 px-6 py-8 lg:flex-row lg:items-start lg:justify-between lg:px-10 lg:py-12">
|
|
<div className="max-w-2xl space-y-6 text-white">
|
|
{badge ? (
|
|
<span className="inline-flex items-center gap-2 rounded-full border border-white/40 bg-white/15 px-4 py-1 text-xs font-semibold uppercase tracking-[0.35em]">
|
|
{badge}
|
|
</span>
|
|
) : null}
|
|
|
|
<div className="space-y-3">
|
|
<h1 className="font-display text-3xl tracking-tight sm:text-4xl">{title}</h1>
|
|
{description ? <p className="text-sm text-white/80 sm:text-base">{description}</p> : null}
|
|
{supporting?.map((paragraph) => (
|
|
<p key={paragraph} className="text-sm text-white/75 sm:text-base">
|
|
{paragraph}
|
|
</p>
|
|
))}
|
|
{children}
|
|
</div>
|
|
|
|
{(primaryAction || secondaryAction) && (
|
|
<div className="flex flex-wrap gap-2">
|
|
{primaryAction}
|
|
{secondaryAction}
|
|
</div>
|
|
)}
|
|
</div>
|
|
|
|
{aside ? <div className="w-full max-w-sm">{aside}</div> : null}
|
|
</CardContent>
|
|
</Card>
|
|
);
|
|
}
|