initial commit: rocket.new export of broadcastbeat
This commit is contained in:
149
src/app/show-coverage/page.tsx
Normal file
149
src/app/show-coverage/page.tsx
Normal file
@@ -0,0 +1,149 @@
|
||||
import React from "react";
|
||||
import type { Metadata } from "next";
|
||||
import Link from "next/link";
|
||||
import Header from "@/components/Header";
|
||||
import Footer from "@/components/Footer";
|
||||
import AppImage from "@/components/ui/AppImage";
|
||||
import { getArticlesBySection } from "@/lib/articles/sampleArticles";
|
||||
|
||||
export const metadata: Metadata = {
|
||||
title: "NAB Show, IBC & Broadcast Event Coverage — BroadcastBeat",
|
||||
description:
|
||||
"Live coverage and news from NAB Show, IBC, Cine Gear, SXSW, and all major broadcast industry events. Booth previews, product launches, and show floor reports.",
|
||||
alternates: { canonical: "/show-coverage" },
|
||||
openGraph: {
|
||||
title: "NAB Show, IBC & Broadcast Event Coverage — BroadcastBeat",
|
||||
description:
|
||||
"Live coverage and news from NAB Show, IBC, Cine Gear, SXSW, and all major broadcast industry events.",
|
||||
url: "/show-coverage",
|
||||
type: "website",
|
||||
},
|
||||
};
|
||||
|
||||
export default function ShowCoveragePage() {
|
||||
const articles = getArticlesBySection("show-coverage");
|
||||
const nabArticles = articles.filter((a) => a.tags.includes("NAB 2026"));
|
||||
|
||||
return (
|
||||
<div className="min-h-screen bg-background">
|
||||
<Header />
|
||||
{/* DO NOT OVERRIDE — Show Coverage page hero */}
|
||||
<div className="bg-[#111] border-b border-[#222] py-8">
|
||||
<div className="max-w-container mx-auto px-4">
|
||||
<div className="flex items-center gap-3 mb-2">
|
||||
<span className="section-label">Show Coverage</span>
|
||||
<div className="flex-1 h-px bg-[#2a2a2a]" />
|
||||
</div>
|
||||
<h1 className="font-heading text-white text-3xl font-bold">Show & Event Coverage</h1>
|
||||
<p className="text-[#777] font-body text-sm mt-2">Complete coverage of NAB Show, IBC, and all major broadcast industry events</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<main className="max-w-container mx-auto px-4 py-8">
|
||||
{/* NAB Show spotlight */}
|
||||
<div className="mb-10">
|
||||
<div className="flex items-center gap-3 mb-5">
|
||||
<span className="section-label">NAB Show 2026</span>
|
||||
<div className="flex-1 h-px bg-[#2a2a2a]" />
|
||||
<Link href="/show-coverage#nab" className="text-[#3b82f6] font-body text-xs hover:underline">View All NAB Coverage →</Link>
|
||||
</div>
|
||||
{/* DO NOT OVERRIDE — NAB spotlight grid */}
|
||||
<div className="grid grid-cols-1 lg:grid-cols-12 gap-4">
|
||||
{nabArticles[0] && (
|
||||
<Link
|
||||
href={`/articles/${nabArticles[0].slug}`}
|
||||
className="lg:col-span-7 relative overflow-hidden group block rounded-sm"
|
||||
style={{ minHeight: 280 }}>
|
||||
<div className="relative h-[280px] lg:h-full lg:min-h-[320px]">
|
||||
<AppImage
|
||||
src={nabArticles[0].image}
|
||||
alt={nabArticles[0].alt}
|
||||
fill
|
||||
className="object-cover group-hover:scale-105 transition-transform duration-500"
|
||||
sizes="(max-width: 1024px) 100vw, 58vw"
|
||||
/>
|
||||
<div className="hero-overlay absolute inset-0" />
|
||||
<div className="absolute inset-0 flex flex-col justify-end p-5">
|
||||
<span className="inline-block bg-[#cc0000] text-white font-body text-[10px] font-bold px-2 py-0.5 tracking-wider uppercase mb-2 w-fit">
|
||||
NAB 2026
|
||||
</span>
|
||||
<h2 className="font-heading text-white text-xl font-bold leading-tight mb-2 max-w-xl">
|
||||
{nabArticles[0].title}
|
||||
</h2>
|
||||
<p className="text-white/80 font-body text-sm leading-relaxed max-w-lg hidden sm:block">
|
||||
{nabArticles[0].excerpt}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</Link>
|
||||
)}
|
||||
<div className="lg:col-span-5 space-y-3">
|
||||
{nabArticles.slice(1, 4).map((article) => (
|
||||
<Link
|
||||
key={article.slug}
|
||||
href={`/articles/${article.slug}`}
|
||||
className="flex gap-3 bg-[#111] border border-[#222] p-3 group hover:border-[#3b82f6] transition-colors">
|
||||
<div className="flex-shrink-0 w-[90px] h-[60px] relative overflow-hidden rounded-sm">
|
||||
<AppImage
|
||||
src={article.image}
|
||||
alt={article.alt}
|
||||
fill
|
||||
className="object-cover"
|
||||
sizes="90px"
|
||||
/>
|
||||
</div>
|
||||
<div className="flex-1 min-w-0">
|
||||
<span className="text-[#cc0000] font-body text-[9px] font-bold uppercase tracking-wider">NAB 2026</span>
|
||||
<h3 className="font-heading text-[#e0e0e0] text-xs font-bold leading-snug mt-0.5 group-hover:text-[#3b82f6] transition-colors line-clamp-2">
|
||||
{article.title}
|
||||
</h3>
|
||||
<span className="text-[#555] font-body text-[10px]">{article.date}</span>
|
||||
</div>
|
||||
</Link>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* All show coverage */}
|
||||
<div>
|
||||
<div className="flex items-center gap-3 mb-5">
|
||||
<span className="section-label">All Coverage</span>
|
||||
<div className="flex-1 h-px bg-[#2a2a2a]" />
|
||||
</div>
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-5">
|
||||
{articles.map((article) => (
|
||||
<Link
|
||||
key={article.slug}
|
||||
href={`/articles/${article.slug}`}
|
||||
className="bg-[#111] border border-[#222] overflow-hidden group hover:border-[#3b82f6] transition-colors">
|
||||
<div className="relative h-[180px] overflow-hidden">
|
||||
<AppImage
|
||||
src={article.image}
|
||||
alt={article.alt}
|
||||
fill
|
||||
className="object-cover group-hover:scale-105 transition-transform duration-300"
|
||||
sizes="(max-width: 768px) 100vw, (max-width: 1024px) 50vw, 33vw"
|
||||
/>
|
||||
<div className="absolute top-2 left-2">
|
||||
<span className="bg-[#cc0000] text-white font-body text-[9px] font-bold px-2 py-0.5 tracking-wider uppercase">
|
||||
{article.category}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
<div className="p-3">
|
||||
<span className="text-[#555] font-body text-[11px]">{article.date}</span>
|
||||
<h2 className="font-heading text-[#e0e0e0] text-sm font-bold leading-snug mt-1 mb-2 group-hover:text-[#3b82f6] transition-colors line-clamp-2">
|
||||
{article.title}
|
||||
</h2>
|
||||
<p className="text-[#666] font-body text-xs leading-relaxed line-clamp-2">{article.excerpt}</p>
|
||||
</div>
|
||||
</Link>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</main>
|
||||
<Footer />
|
||||
</div>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user