CTA Banner

1"use client";
2 
3import type * as React from "react";
4import { cn } from "@/lib/utils";
5 
6interface CTABannerProps extends React.HTMLAttributes<HTMLDivElement> {
7  description?: string;
8  primaryAction?: { label: string; onClick?: () => void };
9  secondaryAction?: { label: string; onClick?: () => void };
10  title: string;
11  variant?: "default" | "highlight";
12}
13 
14export function CTABanner({
15  title,
16  description,
17  primaryAction,
18  secondaryAction,
19  variant = "default",
20  className,
21  ...props
22}: CTABannerProps) {
23  return (
24    <div
25      data-slot="tron-cta-banner"
26      className={cn(
27        "group relative overflow-hidden rounded border bg-card/80 px-6 py-8 text-center backdrop-blur-sm",
28        variant === "highlight"
29          ? "border-primary/50 shadow-[0_0_40px_rgba(var(--primary-rgb,0,180,255),0.08)]"
30          : "border-primary/20",
31        className
32      )}
33      {...props}
34    >
35      {/* Scanline overlay */}
36      <div className="pointer-events-none absolute inset-0 bg-[repeating-linear-gradient(0deg,transparent,transparent_2px,rgba(0,0,0,0.03)_2px,rgba(0,0,0,0.03)_4px)]" />
37 
38      {/* Animated top border glow */}
39      <div className="pointer-events-none absolute top-0 right-0 left-0 h-px">
40        <div
41          className="h-full w-1/3 bg-gradient-to-r from-transparent via-primary/60 to-transparent"
42          style={{ animation: "ctaSweep 4s ease-in-out infinite" }}
43        />
44      </div>
45 
46      <style jsx>{`
47        @keyframes ctaSweep {
48          0%, 100% { margin-left: -10%; }
49          50% { margin-left: 77%; }
50        }
51      `}</style>
52 
53      {/* Content */}
54      <div className="relative">
55        <h3 className="font-bold font-display text-foreground text-lg uppercase tracking-wider md:text-xl">
56          {title}
57        </h3>
58        {description ? (
59          <p className="mx-auto mt-2 max-w-md text-foreground/60 text-sm">
60            {description}
61          </p>
62        ) : null}
63 
64        {/* Actions */}
65        {primaryAction || secondaryAction ? (
66          <div className="mt-5 flex items-center justify-center gap-3">
67            {primaryAction ? (
68              <button
69                type="button"
70                onClick={primaryAction.onClick}
71                className="rounded border border-primary bg-primary/20 px-5 py-2 font-mono text-[10px] text-primary uppercase tracking-widest shadow-[0_0_12px_rgba(var(--primary-rgb,0,180,255),0.15)] transition-all duration-300 hover:bg-primary/30"
72              >
73// … truncated