localadministrator/avbeat-com
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

about/show-coverage: redesign with sidebar (300x600 + rotating 300x250s)

Browse Source 
Switch the bare single-column layouts on these pages to a two-column
grid that pulls in <SidebarAdStack /> on the right (pinned 300x600 +
every 300x250 rotated). Header keeps the leaderboard above. The
in-content 728x90 banners added earlier are removed since the sidebar
now carries the ad load (avoids stacking two of the same unit on the
page).

Pages updated:
  - /show-coverage/[slug]   event detail
  - /about
  - /about/contact
  - /about/team
  - /about/advertise (also gets a real-banner grid in "Available units":
    the actual 728x90, 300x600, and 300x250 sample creatives are
    rendered next to each unit's description, so advertisers see what
    the inventory looks like in production rather than just a label).

The /about pages also got a small refresh: serif H1 + accent-blue
"Broadcast Beat" eyebrow line + bordered content blocks, bringing the
look closer to the cinematic homepage.

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
This commit is contained in:
Ryan Salazar
2026-05-20 05:43:02 +00:00
parent 4e1e5c22e8
commit d2d941c576
5 changed files with 311 additions and 138 deletions
Download Patch File Download Diff File Expand all files Collapse all files

105
src/app/about/contact/page.tsx
View File

@@ -1,45 +1,86 @@
import Header from "@/components/Header";
import Footer from "@/components/Footer";
import AdImage from "@/components/AdImage";
import { ADS_728X90, shuffle } from "@/lib/ads";
import SidebarAdStack from "@/components/SidebarAdStack";
export const metadata = { title: "Contact — Broadcast Beat" };
const CONTACTS = [
{
title: "Editorial",
body: (
<a className="text-[var(--color-text-info,#60a5fa)] hover:underline" href="mailto:editor@broadcastbeat.com">editor@broadcastbeat.com</a>
),
hint: "Story tips, corrections, interview requests.",
},
{
title: "Press releases",
body: (
<>
Route PR-firm submissions through{" "}
<a className="text-[var(--color-text-info,#60a5fa)] hover:underline" href="https://distribution.relevantmediaproperties.com">distribution.relevantmediaproperties.com</a>.
</>
),
hint: "Routed submissions land in our editorial queue with provenance.",
},
{
title: "Advertising",
body: (
<>
<a className="text-[var(--color-text-info,#60a5fa)] hover:underline" href="mailto:advertising@broadcastbeat.com">advertising@broadcastbeat.com</a> — see the{" "}
<a className="text-[var(--color-text-info,#60a5fa)] hover:underline" href="/about/advertise">media kit</a>.
</>
),
hint: "728×90, 300×600, 300×250 inventory; CTR + impression reports monthly.",
},
{
title: "Publisher",
body: (
<>
Ryan Salazar ·{" "}
<a className="text-[var(--color-text-info,#60a5fa)] hover:underline" href="mailto:ryan.salazar@relevantmediaproperties.com">ryan.salazar@relevantmediaproperties.com</a>
</>
),
hint: "Partnerships, M&A, syndication, network membership.",
},
];
export default function ContactPage() {
return (
<div className="min-h-screen bg-background">
<Header />
<main className="mx-auto max-w-2xl px-6 py-12 text-[#e5e7eb]">
<h1 className="font-serif text-4xl font-bold tracking-tight mb-6">Contact</h1>
<dl className="space-y-5 text-[15px]">
<div>
<dt className="text-xs font-mono uppercase tracking-wider text-[#6b7280] mb-1">Editorial</dt>
<dd><a className="text-[var(--color-text-info,#60a5fa)] hover:underline" href="mailto:editor@broadcastbeat.com">editor@broadcastbeat.com</a></dd>
</div>
<div>
<dt className="text-xs font-mono uppercase tracking-wider text-[#6b7280] mb-1">Press releases (PR firms)</dt>
<dd>
Route submissions through{" "}
<a className="text-[var(--color-text-info,#60a5fa)] hover:underline" href="https://distribution.relevantmediaproperties.com">distribution.relevantmediaproperties.com</a>.
</dd>
</div>
<div>
<dt className="text-xs font-mono uppercase tracking-wider text-[#6b7280] mb-1">Advertising</dt>
<dd><a className="text-[var(--color-text-info,#60a5fa)] hover:underline" href="mailto:advertising@broadcastbeat.com">advertising@broadcastbeat.com</a> — see <a className="text-[var(--color-text-info,#60a5fa)] hover:underline" href="/about/advertise">media kit</a>.</dd>
</div>
<div>
<dt className="text-xs font-mono uppercase tracking-wider text-[#6b7280] mb-1">Publisher</dt>
<dd>Ryan Salazar · <a className="text-[var(--color-text-info,#60a5fa)] hover:underline" href="mailto:ryan.salazar@relevantmediaproperties.com">ryan.salazar@relevantmediaproperties.com</a></dd>
</div>
</dl>
<div className="mx-auto max-w-6xl px-6 py-12 text-[#e5e7eb]">
<div className="lg:grid lg:grid-cols-[1fr,300px] lg:gap-10">
<main>
<header className="mb-8 border-b border-[#252525] pb-6">
<div className="text-[10px] font-mono uppercase tracking-[0.22em] text-[var(--color-text-info,#60a5fa)] mb-2">
Broadcast Beat
</div>
<h1 className="font-serif text-4xl md:text-5xl font-bold tracking-tight">Contact</h1>
<p className="mt-3 text-[#9ca3af] text-base">
Pitches, press, partnerships — pick the right desk and we'll get back fast.
</p>
</header>
{/* In-content 728x90 banner */}
{ADS_728X90.length > 0 && (
<div className="mt-12 hidden md:flex justify-center" aria-label="Advertisement">
<AdImage ad={shuffle(ADS_728X90)[0]} page="contact" />
</div>
)}
</main>
<ul className="grid grid-cols-1 md:grid-cols-2 gap-4">
{CONTACTS.map((c) => (
<li key={c.title} className="rounded border border-[#252525] bg-[#0b0f17] p-5 hover:border-[var(--color-text-info,#60a5fa)]/60 transition-colors">
<div className="text-[10px] font-mono uppercase tracking-[0.18em] text-[var(--color-text-info,#60a5fa)] mb-2">
{c.title}
</div>
<div className="text-[15px] leading-relaxed">{c.body}</div>
<div className="mt-3 text-xs text-[#6b7280]">{c.hint}</div>
</li>
))}
</ul>
</main>
<aside className="mt-10 lg:mt-0" aria-label="Advertisements">
<div className="lg:sticky lg:top-24">
<SidebarAdStack />
</div>
</aside>
</div>
</div>
<Footer />
</div>
);