inicila commit

2026-04-18 15:27:52 +00:00 · 2026-03-25 14:32:19 +01:00
parent 6ed240b62b
commit 2f9ace4b1c
9 changed files with 671 additions and 85 deletions
@@ -0,0 +1,73 @@
+import Image from "next/image";
+import Link from "next/link";
+
+export type TvonePublicationBannerProps = {
+  /** When set, the whole slot links here (campaign URL). */
+  href?: string;
+  /** Optional creative — leaderboard-style wide image (e.g. 970×90 or similar). */
+  imageSrc?: string;
+  imageAlt?: string;
+  /** Short line shown when no image (placeholder for unsold inventory). */
+  title?: string;
+  subtitle?: string;
+  /** Small label above the slot (legal / transparency). */
+  slotLabel?: string;
+};
+
+export function TvonePublicationBanner({
+  href = "#publicidade",
+  imageSrc,
+  imageAlt = "Publicidade",
+  title = "Espaço publicitário",
+  subtitle = "Reserve este espaço para a sua marca. Contacte a nossa equipa comercial.",
+  slotLabel = "Publicidade",
+}: TvonePublicationBannerProps) {
+  const inner = imageSrc ? (
+    <Image
+      src={imageSrc}
+      alt={imageAlt}
+      width={1200}
+      height={120}
+      className="h-auto w-full max-h-[120px] object-cover object-center md:max-h-[140px]"
+      sizes="100vw"
+      priority
+    />
+  ) : (
+    <div className="flex min-h-[88px] w-full flex-col items-center justify-center gap-1 bg-[#f0f0f3] px-4 py-5 text-center md:min-h-[100px] md:flex-row md:justify-between md:text-left">
+      <div>
+        <p className="text-sm font-semibold text-neutral-800">{title}</p>
+        <p className="mt-0.5 max-w-xl text-xs text-neutral-600 md:text-sm">{subtitle}</p>
+      </div>
+      <span className="mt-2 shrink-0 rounded-full border border-neutral-300 bg-white px-3 py-1 text-[11px] font-medium text-neutral-700 md:mt-0">
+        Espaço disponível
+      </span>
+    </div>
+  );
+
+  return (
+    <aside
+      className="w-full border-y border-neutral-200/90 bg-white"
+      aria-label={slotLabel}
+    >
+      <div className="mx-auto w-full max-w-[1200px] px-0">
+        <div className="flex items-center gap-2 px-4 pt-2 pb-1">
+          <span className="text-[10px] font-semibold uppercase tracking-wider text-neutral-400">{slotLabel}</span>
+        </div>
+        <div className="overflow-hidden">
+          {href ? (
+            <Link
+              href={href}
+              className="block w-full outline-none transition-opacity hover:opacity-95 focus-visible:ring-2 focus-visible:ring-[#0066cc] focus-visible:ring-offset-2"
+              target={href.startsWith("http") ? "_blank" : undefined}
+              rel={href.startsWith("http") ? "noopener noreferrer" : undefined}
+            >
+              {inner}
+            </Link>
+          ) : (
+            inner
+          )}
+        </div>
+      </div>
+    </aside>
+  );
+}