Loading...
Loading...
A promotional alert banner with gradient background, call-to-action button, and eye-catching design.
interface AlertPromoProps {
message: string;
cta: string;
onCtaClick?: () => void;
onDismiss?: () => void;
}
export function AlertPromo({ message, cta, onCtaClick, onDismiss }: AlertPromoProps) {
return (
<div className="relative overflow-hidden rounded-xl bg-gradient-to-r from-violet-600 via-purple-600 to-indigo-700 p-0.5 shadow-xl">
<div className="rounded-xl bg-gradient-to-r from-violet-600 via-purple-600 to-indigo-700 p-5">
<div className="flex items-center gap-4 flex-wrap">
<div className="flex-1 min-w-[200px]">
<div className="flex items-center gap-2 mb-1">
<svg className="w-5 h-5 text-yellow-300" fill="currentColor" viewBox="0 0 20 20">
<path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z" />
</svg>
<span className="text-white/80 text-xs font-semibold uppercase tracking-wider">Limited Offer</span>
</div>
<p className="text-white font-medium text-sm">{message}</p>
</div>
<button
onClick={onCtaClick}
className="shrink-0 px-5 py-2.5 bg-white text-purple-700 font-semibold rounded-lg text-sm hover:bg-purple-50 transition-colors shadow-lg"
>
{cta}
</button>
{onDismiss && (
<button
onClick={onDismiss}
className="shrink-0 text-white/60 hover:text-white transition-colors p-1"
aria-label="Dismiss"
>
<svg className="w-5 h-5" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={2}>
<path strokeLinecap="round" strokeLinejoin="round" d="M6 18L18 6M6 6l12 12" />
</svg>
</button>
)}
</div>
</div>
</div>
);
}