Press n or j to go to the next uncovered block, b, p or k for the previous block.
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 | 2x 9x 9x 9x 1x 1x 9x | /**
* PartnerShowcaseCard Component
* Displays partner logo prominently for homepage showcase
* Shows tier and start date, links to company website
*/
import { Card } from '@/components/public/ui/card';
import { format } from 'date-fns';
import { buildCdnImageUrl } from '@/utils/cdnImage';
interface PartnerShowcaseCardProps {
companyName: string;
logoUrl?: string;
partnershipLevel: 'STRATEGIC' | 'PLATINUM' | 'GOLD' | 'SILVER' | 'BRONZE';
partnershipStartDate: string;
website?: string;
}
export const PartnerShowcaseCard = ({
companyName,
logoUrl,
partnershipStartDate,
website,
}: PartnerShowcaseCardProps) => {
const initials = companyName.substring(0, 2).toUpperCase();
const formattedDate = format(new Date(partnershipStartDate), 'MMM yyyy');
const handleClick = () => {
Eif (website) {
window.open(website, '_blank', 'noopener,noreferrer');
}
};
return (
<Card
className={`flex-shrink-0 w-80 h-48 p-4 bg-zinc-700 border-zinc-600 hover:border-zinc-500 transition-colors ${
website ? 'cursor-pointer' : 'cursor-default opacity-70'
}`}
onClick={handleClick}
>
<div className="flex flex-col items-center justify-center h-full gap-2">
{/* Logo */}
<div className="flex-1 w-full max-h-32 flex items-center justify-center">
{logoUrl ? (
<img
src={buildCdnImageUrl(logoUrl, { h: 256, fit: 'inside' }) ?? logoUrl}
alt={companyName}
loading="lazy"
className="max-w-full max-h-32 object-contain"
/>
) : (
<div className="w-48 h-24 flex items-center justify-center rounded bg-primary">
<span className="text-4xl font-semibold text-primary-foreground">{initials}</span>
</div>
)}
</div>
{/* Date */}
<div className="flex items-center text-sm">
<span className="text-zinc-400">since {formattedDate}</span>
</div>
</div>
</Card>
);
};
|