バナーCTA

1export function CtaBanner001() {
2  return (
3    <section className="bg-background py-6">
4      <div className="mx-auto max-w-7xl px-4 sm:px-6 lg:px-8">
5        <div className="flex flex-col items-center justify-between gap-6 border-y border-border/50 py-8 sm:flex-row lg:py-10">
6          {/* Left - Content */}
7          <div className="flex flex-col items-center gap-4 sm:flex-row sm:items-center sm:gap-8">
8            {/* Icon/Badge */}
9            <div className="flex h-12 w-12 items-center justify-center border border-border">
10              <svg
11                className="h-5 w-5 text-muted-foreground"
12                fill="none"
13                stroke="currentColor"
14                viewBox="0 0 24 24"
15              >
16                <path
17                  strokeLinecap="round"
18                  strokeLinejoin="round"
19                  strokeWidth={1.5}
20                  d="M13 10V3L4 14h7v7l9-11h-7z"
21                />
22              </svg>
23            </div>
24
25            {/* Text */}
26            <div className="text-center sm:text-left">
27              <p className="text-sm font-light tracking-wide text-foreground">
28                New feature available
29              </p>
30              <p className="mt-1 text-xs tracking-wide text-muted-foreground/60">
31                Check out our latest updates and improvements
32              </p>
33            </div>
34          </div>
35
36          {/* Right - CTA */}
37          <div className="flex items-center gap-4">
38            <button className="border border-border px-6 py-3 text-[11px] font-medium uppercase tracking-[0.2em] text-muted-foreground transition-all hover:border-foreground/50 hover:text-foreground">
39              Dismiss
40            </button>
41            <button className="border border-foreground bg-foreground px-6 py-3 text-[11px] font-medium uppercase tracking-[0.2em] text-background transition-all hover:bg-transparent hover:text-foreground">
42              Explore
43            </button>
44          </div>
45        </div>
46      </div>
47    </section>
48  );
49}