ux: dark-theme conversion + forum hero + ticker cleanup
- /manufacturers index + DirectoryClient: convert white/light-ink theme to BB dark theme so it stops standing out against the rest of the site - /manufacturers/[slug]: same conversion, includes the new executives card grid and Headquarters block - /nab-2026: same conversion, including hero gradient and sponsor tile borders (amber on dark instead of amber on white) - Forum: remove "Top Performing Threads" widget from both /forum and /forum/[slug] (display only — TopThreadsWidget component preserved in case admins want to re-enable later) - Forum hero: vertical padding py-10 → py-5, tagline reduced from three sentences to one. Adds a "Sign in to post" or "Start a thread" CTA in the hero's top-right depending on auth state. - Recent Forum Posts ticker: drop replies entirely, surface only thread titles so breadth of conversation shows instead of the loudest threads dominating with reply chatter.
This commit is contained in:
Ryan Salazar
@@ -87,23 +87,23 @@ export default async function NabHub() {
|
||||
const articles = (rawArticles || []) as ArticleRow[];
|
||||
|
||||
return (
|
||||
<div className="min-h-screen bg-white">
|
||||
<div className="min-h-screen bg-[#0d0d0d]">
|
||||
<Header />
|
||||
<CompanyMentionsHover />
|
||||
|
||||
{/* Hero */}
|
||||
<section className="bg-gradient-to-br from-amber-50 to-white border-b border-ink/10">
|
||||
<section className="bg-gradient-to-br from-amber-500/10 to-[#0d0d0d] border-b border-[#252525]">
|
||||
<div className="max-w-6xl mx-auto px-4 py-10">
|
||||
<div className="flex items-baseline gap-3 mb-2">
|
||||
<span className="text-[10px] font-bold uppercase tracking-widest bg-amber-100 text-amber-800 px-2 py-0.5 rounded">
|
||||
<span className="text-[10px] font-bold uppercase tracking-widest bg-amber-500/20 text-amber-300 px-2 py-0.5 rounded">
|
||||
Live coverage hub
|
||||
</span>
|
||||
<span className="text-xs text-ink/50">April 11–16, 2026 · Las Vegas</span>
|
||||
<span className="text-xs text-[#888]">April 11–16, 2026 · Las Vegas</span>
|
||||
</div>
|
||||
<h1 className="text-3xl md:text-5xl font-display font-bold text-ink mb-3">
|
||||
<h1 className="text-3xl md:text-5xl font-display font-bold text-[#e0e0e0] mb-3">
|
||||
NAB Show 2026
|
||||
</h1>
|
||||
<p className="text-ink/70 text-base max-w-3xl">
|
||||
<p className="text-[#aaa] text-base max-w-3xl">
|
||||
{exhibitors.length.toLocaleString()} exhibitors confirmed.
|
||||
{sponsorRows.length > 0 && <> {sponsorRows.length} are Broadcast Beat coverage partners.</>}
|
||||
{" "}Browse the directory, read the latest product news, and find every booth.
|
||||
@@ -117,10 +117,10 @@ export default async function NabHub() {
|
||||
{sponsorRows.length > 0 && (
|
||||
<section>
|
||||
<header className="flex items-baseline justify-between mb-4">
|
||||
<h2 className="text-xl font-display font-bold text-ink">
|
||||
<h2 className="text-xl font-display font-bold text-[#e0e0e0]">
|
||||
Coverage Partners at NAB
|
||||
</h2>
|
||||
<span className="text-xs text-ink/50">{sponsorRows.length} exhibiting partner{sponsorRows.length === 1 ? "" : "s"}</span>
|
||||
<span className="text-xs text-[#888]">{sponsorRows.length} exhibiting partner{sponsorRows.length === 1 ? "" : "s"}</span>
|
||||
</header>
|
||||
<div className="grid grid-cols-2 sm:grid-cols-3 md:grid-cols-4 lg:grid-cols-6 gap-3">
|
||||
{sponsorRows.map((e) => (
|
||||
@@ -128,18 +128,18 @@ export default async function NabHub() {
|
||||
key={e.slug}
|
||||
href={`/manufacturers/${e.slug}`}
|
||||
data-company-slug={e.slug}
|
||||
className="bg-white border-2 border-emerald-300 rounded-lg p-3 hover:border-emerald-500 hover:shadow-md transition-all flex flex-col items-center text-center gap-2"
|
||||
className="bg-[#0d0d0d] border-2 border-emerald-500/40 rounded-lg p-3 hover:border-emerald-500/70 hover:shadow-md transition-all flex flex-col items-center text-center gap-2"
|
||||
>
|
||||
<div className="w-full h-16 flex items-center justify-center bg-ink/5 rounded">
|
||||
<div className="w-full h-16 flex items-center justify-center bg-[#1a1a1a] rounded">
|
||||
{e.logo_url ? (
|
||||
/* eslint-disable-next-line @next/next/no-img-element */
|
||||
<img src={e.logo_url} alt={`${e.company_name} logo`} className="max-h-12 max-w-full object-contain" loading="lazy" />
|
||||
) : (
|
||||
<span className="text-2xl font-bold text-ink/40">{e.company_name.charAt(0).toUpperCase()}</span>
|
||||
<span className="text-2xl font-bold text-[#666]">{e.company_name.charAt(0).toUpperCase()}</span>
|
||||
)}
|
||||
</div>
|
||||
<span className="font-semibold text-ink text-xs truncate w-full">{e.company_name}</span>
|
||||
<span className="text-[9px] font-bold uppercase tracking-wider bg-emerald-100 text-emerald-700 px-1.5 py-0.5 rounded">Sponsor</span>
|
||||
<span className="font-semibold text-[#e0e0e0] text-xs truncate w-full">{e.company_name}</span>
|
||||
<span className="text-[9px] font-bold uppercase tracking-wider bg-emerald-100 text-emerald-300 px-1.5 py-0.5 rounded">Sponsor</span>
|
||||
</Link>
|
||||
))}
|
||||
</div>
|
||||
@@ -150,10 +150,10 @@ export default async function NabHub() {
|
||||
{articles.length > 0 && (
|
||||
<section>
|
||||
<header className="flex items-baseline justify-between mb-4">
|
||||
<h2 className="text-xl font-display font-bold text-ink">
|
||||
<h2 className="text-xl font-display font-bold text-[#e0e0e0]">
|
||||
Latest from the show floor
|
||||
</h2>
|
||||
<Link href="/news?search=NAB+2026" className="text-xs text-brand-primary hover:underline">
|
||||
<Link href="/news?search=NAB+2026" className="text-xs text-[#3b82f6] hover:underline">
|
||||
See all NAB coverage →
|
||||
</Link>
|
||||
</header>
|
||||
@@ -162,7 +162,7 @@ export default async function NabHub() {
|
||||
<Link
|
||||
key={a.wp_slug}
|
||||
href={`/news/${a.wp_slug}`}
|
||||
className="group bg-white border border-ink/10 rounded-lg overflow-hidden hover:border-brand-primary hover:shadow-sm transition-all"
|
||||
className="group bg-[#0d0d0d] border border-[#252525] rounded-lg overflow-hidden hover:border-[#3b82f6] hover:shadow-sm transition-all"
|
||||
>
|
||||
{a.featured_image && (
|
||||
/* eslint-disable-next-line @next/next/no-img-element */
|
||||
@@ -174,11 +174,11 @@ export default async function NabHub() {
|
||||
/>
|
||||
)}
|
||||
<div className="p-3">
|
||||
<h3 className="font-semibold text-ink text-sm leading-snug group-hover:text-brand-primary line-clamp-3 mb-1">
|
||||
<h3 className="font-semibold text-[#e0e0e0] text-sm leading-snug group-hover:text-[#3b82f6] line-clamp-3 mb-1">
|
||||
{a.title}
|
||||
</h3>
|
||||
{a.wp_published_at && (
|
||||
<p className="text-[10px] text-ink/50">
|
||||
<p className="text-[10px] text-[#888]">
|
||||
{new Date(a.wp_published_at).toLocaleDateString("en-US", { month: "short", day: "numeric" })}
|
||||
</p>
|
||||
)}
|
||||
@@ -192,10 +192,10 @@ export default async function NabHub() {
|
||||
{/* Full exhibitor list */}
|
||||
<section>
|
||||
<header className="flex items-baseline justify-between mb-4">
|
||||
<h2 className="text-xl font-display font-bold text-ink">
|
||||
<h2 className="text-xl font-display font-bold text-[#e0e0e0]">
|
||||
All NAB 2026 exhibitors
|
||||
</h2>
|
||||
<Link href="/manufacturers" className="text-xs text-brand-primary hover:underline">
|
||||
<Link href="/manufacturers" className="text-xs text-[#3b82f6] hover:underline">
|
||||
Full directory →
|
||||
</Link>
|
||||
</header>
|
||||
@@ -205,24 +205,24 @@ export default async function NabHub() {
|
||||
key={e.slug}
|
||||
href={`/manufacturers/${e.slug}`}
|
||||
data-company-slug={e.slug}
|
||||
className="bg-white border border-ink/10 rounded-md p-2.5 hover:border-brand-primary transition-all flex items-center gap-2.5"
|
||||
className="bg-[#0d0d0d] border border-[#252525] rounded-md p-2.5 hover:border-[#3b82f6] transition-all flex items-center gap-2.5"
|
||||
>
|
||||
{e.logo_url ? (
|
||||
/* eslint-disable-next-line @next/next/no-img-element */
|
||||
<img src={e.logo_url} alt="" className="w-10 h-10 rounded bg-ink/5 object-contain flex-shrink-0" loading="lazy" />
|
||||
<img src={e.logo_url} alt="" className="w-10 h-10 rounded bg-[#1a1a1a] object-contain flex-shrink-0" loading="lazy" />
|
||||
) : (
|
||||
<div className="w-10 h-10 rounded bg-ink/5 flex items-center justify-center text-ink/40 font-bold text-sm flex-shrink-0">
|
||||
<div className="w-10 h-10 rounded bg-[#1a1a1a] flex items-center justify-center text-[#666] font-bold text-sm flex-shrink-0">
|
||||
{e.company_name.charAt(0).toUpperCase()}
|
||||
</div>
|
||||
)}
|
||||
<span className="font-medium text-ink text-xs truncate">{e.company_name}</span>
|
||||
<span className="font-medium text-[#e0e0e0] text-xs truncate">{e.company_name}</span>
|
||||
</Link>
|
||||
))}
|
||||
</div>
|
||||
{otherRows.length > 200 && (
|
||||
<p className="text-center text-xs text-ink/50 mt-4">
|
||||
<p className="text-center text-xs text-[#888] mt-4">
|
||||
Showing 200 of {otherRows.length.toLocaleString()} exhibitors.{" "}
|
||||
<Link href="/manufacturers" className="text-brand-primary hover:underline">Browse the full directory →</Link>
|
||||
<Link href="/manufacturers" className="text-[#3b82f6] hover:underline">Browse the full directory →</Link>
|
||||
</p>
|
||||
)}
|
||||
</section>
|
||||
|
||||
Reference in New Issue
Block a user