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

106
src/app/about/page.tsx
View File

@@ -1,5 +1,6 @@
import Header from "@/components/Header";
import Footer from "@/components/Footer";
import SidebarAdStack from "@/components/SidebarAdStack";
export const metadata = {
title: "About Broadcast Beat",
@@ -10,31 +11,90 @@ export default function AboutPage() {
return (
<div className="min-h-screen bg-background">
<Header />
<main className="mx-auto max-w-3xl px-6 py-12 text-[#e5e7eb]">
<h1 className="font-serif text-4xl font-bold tracking-tight mb-6">About Broadcast Beat</h1>
<div className="space-y-5 text-[#d1d5db] text-[15px] leading-relaxed">
<p>
Broadcast Beat is an independent trade publication covering broadcast,
live production, streaming, and post-production technology. We
report on the equipment, services, and people that move the
professional video industry forward.
</p>
<p>
We cover the major industry shows — NAB, IBC, BroadcastAsia, MPTS,
and others — track product launches and acquisitions, and publish
interviews with the engineers, post supervisors, and executives
building the next generation of workflows.
</p>
<p>
Editorial decisions are made independently of advertising. We do
not accept payment for editorial coverage. Vendor-supplied press
releases routed through our distribution platform are rewritten
by our staff or AI assistants according to our editorial style
guide; the original submission is preserved on file.
</p>
<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">About</h1>
<p className="mt-3 text-[#9ca3af] text-base max-w-2xl">
An independent trade publication covering broadcast, live production, streaming, and post-production technology.
</p>
</header>
<div className="grid grid-cols-1 md:grid-cols-3 gap-4 mb-10">
<Stat label="Years covering the industry" value="20+" />
<Stat label="Shows tracked annually" value="14+" />
<Stat label="Stories archived" value="29k+" />
</div>
<section className="space-y-6 text-[#d1d5db] text-[15px] leading-relaxed">
<Block title="What we cover">
Broadcast Beat reports on the equipment, services, and people
that move the professional video industry forward. We follow
product launches, executive moves, acquisitions, and the live
production / IP / cloud workflows reshaping how content gets
made and delivered.
</Block>
<Block title="Where we go">
We cover the major industry shows in person and remotely — NAB
Show, IBC, BroadcastAsia, MPTS, InfoComm, and more — track
product launches and acquisitions year-round, and publish
interviews with the engineers, post supervisors, and executives
building the next generation of workflows.
</Block>
<Block title="How we work">
Editorial decisions are made independently of advertising. We
do not accept payment for editorial coverage. Vendor-supplied
press releases routed through our distribution platform are
rewritten by our staff or AI assistants according to our
editorial style guide; the original submission is preserved on
file. Our AI personas are clearly labeled wherever they appear.
</Block>
<Block title="Get involved">
For editorial pitches: <a className="text-[var(--color-text-info,#60a5fa)] hover:underline" href="mailto:editor@broadcastbeat.com">editor@broadcastbeat.com</a>.
{" "}For advertising: <a className="text-[var(--color-text-info,#60a5fa)] hover:underline" href="/about/advertise">see the media kit</a>.
{" "}For our team: <a className="text-[var(--color-text-info,#60a5fa)] hover:underline" href="/about/team">meet the editorial team</a>.
</Block>
</section>
</main>
{/* Sidebar: 300x600 + rotating 300x250s */}
<aside className="mt-10 lg:mt-0" aria-label="Advertisements">
<div className="lg:sticky lg:top-24">
<SidebarAdStack />
</div>
</aside>
</div>
</main>
</div>
<Footer />
</div>
);
}
function Stat({ label, value }: { label: string; value: string }) {
return (
<div className="rounded border border-[#252525] bg-[#0b0f17] p-4">
<div className="font-serif text-3xl text-white">{value}</div>
<div className="mt-1 text-[10px] font-mono uppercase tracking-[0.16em] text-[#6b7280]">
{label}
</div>
</div>
);
}
function Block({ title, children }: { title: string; children: React.ReactNode }) {
return (
<div className="rounded border border-[#1e1e1e] bg-[#0b0f17]/70 p-5">
<h2 className="font-mono text-xs uppercase tracking-[0.18em] text-[var(--color-text-info,#60a5fa)] mb-2">
{title}
</h2>
<p className="text-[15px] leading-relaxed">{children}</p>
</div>
);
}