homepage bento: hero shrinks into 1fr+300px grid w/ banner at top right
The 21:9 hero used to span full width and the Blackmagic 300x600 sat next to the 3-up rail beneath it. Layout request: shrink the hero horizontally (keep aspect ratio — height shrinks proportionally) so the 300x600 lifts up alongside the hero itself, with the 3-up rail still under the hero in the left column. Same outer grid, just hero+rail now live together in the left column. Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
This commit is contained in:
Ryan Salazar
@@ -78,81 +78,86 @@ export default async function FeaturedBento() {
|
||||
</Link>
|
||||
</div>
|
||||
|
||||
{/* Cinematic 21:9 hero — full width, image fills, gradient + overlaid title */}
|
||||
<Link
|
||||
href={`/news/${hero.wp_slug}`}
|
||||
className="group block relative overflow-hidden rounded border border-[#252525] bg-[#0b0f17] hover:border-[var(--color-text-info,#60a5fa)] transition-colors"
|
||||
>
|
||||
<div className="relative aspect-[21/9] md:aspect-[21/8] bg-[#111]">
|
||||
<img
|
||||
src={img(hero)}
|
||||
alt={hero.featured_image_alt || hero.title}
|
||||
className="w-full h-full object-cover"
|
||||
/>
|
||||
<div className="absolute inset-0 bg-gradient-to-t from-black via-black/65 to-transparent" />
|
||||
{/* Two-column outer grid: left column holds the 21:9 hero + 3-up rail;
|
||||
right column is the Blackmagic 300x600. The hero now sits NARROWER
|
||||
(constrained to the 1fr-300px column) but keeps its 21:9 / 21:8
|
||||
aspect ratio — height shrinks proportionally. Banner moves UP to
|
||||
start at the very top of the row, baseline-aligned with the hero.
|
||||
Mobile collapses to single column (banner hidden via lg:block). */}
|
||||
<div className="grid grid-cols-1 lg:grid-cols-[minmax(0,1fr)_300px] gap-4 items-start">
|
||||
<div className="flex flex-col gap-4 min-w-0">
|
||||
{/* Cinematic 21:9 hero — fills left column, aspect ratio preserved */}
|
||||
<Link
|
||||
href={`/news/${hero.wp_slug}`}
|
||||
className="group block relative overflow-hidden rounded border border-[#252525] bg-[#0b0f17] hover:border-[var(--color-text-info,#60a5fa)] transition-colors"
|
||||
>
|
||||
<div className="relative aspect-[21/9] md:aspect-[21/8] bg-[#111]">
|
||||
<img
|
||||
src={img(hero)}
|
||||
alt={hero.featured_image_alt || hero.title}
|
||||
className="w-full h-full object-cover"
|
||||
/>
|
||||
<div className="absolute inset-0 bg-gradient-to-t from-black via-black/65 to-transparent" />
|
||||
|
||||
<span className="absolute top-4 left-4 inline-flex items-center gap-1.5 bg-[var(--color-text-info,#60a5fa)] text-black px-3 py-1 rounded font-mono text-[11px] uppercase tracking-widest font-bold shadow-md">
|
||||
<svg width="11" height="11" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true">
|
||||
<path d="M12 2l2.6 7.6H22l-6.2 4.5L18.4 22 12 17.3 5.6 22l2.6-7.9L2 9.6h7.4z" />
|
||||
</svg>
|
||||
Feature Story
|
||||
</span>
|
||||
<span className="absolute top-4 left-4 inline-flex items-center gap-1.5 bg-[var(--color-text-info,#60a5fa)] text-black px-3 py-1 rounded font-mono text-[11px] uppercase tracking-widest font-bold shadow-md">
|
||||
<svg width="11" height="11" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true">
|
||||
<path d="M12 2l2.6 7.6H22l-6.2 4.5L18.4 22 12 17.3 5.6 22l2.6-7.9L2 9.6h7.4z" />
|
||||
</svg>
|
||||
Feature Story
|
||||
</span>
|
||||
|
||||
<div className="absolute bottom-0 left-0 right-0 p-6 md:p-10">
|
||||
{hero.category && (
|
||||
<div className="text-[10px] font-mono uppercase tracking-widest text-[var(--color-text-info,#60a5fa)] mb-2">
|
||||
{hero.category}
|
||||
</div>
|
||||
)}
|
||||
<h3 className="font-serif text-2xl md:text-4xl lg:text-5xl text-white leading-tight max-w-3xl group-hover:text-[var(--color-text-info,#60a5fa)] transition-colors">
|
||||
{hero.title}
|
||||
</h3>
|
||||
{hero.excerpt && (
|
||||
<p className="font-serif text-base md:text-lg text-[#cbd5e1] mt-3 max-w-2xl line-clamp-2">
|
||||
{cleanExcerpt(hero.excerpt)}
|
||||
</p>
|
||||
)}
|
||||
<div className="mt-4 flex flex-wrap items-center gap-3 text-[11px] font-mono text-[#9ca3af]">
|
||||
<span>{hero.author_name || "Broadcast Beat"}</span>
|
||||
<StarRating seed={hero.wp_slug} publishedAt={hero.wp_published_at} size="sm" />
|
||||
<span aria-hidden="true" className="text-[var(--color-text-info,#60a5fa)] ml-2">→ Read full story</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</Link>
|
||||
|
||||
{/* Row below the hero — 3-up rail (left) + Blackmagic 300x600 (right).
|
||||
Right column is locked to 300px so its edge aligns with the right
|
||||
edge of the 21:9 hero above; SidebarAdStack downstream skips this
|
||||
banner so it doesn't double-render. */}
|
||||
<div className="grid grid-cols-1 lg:grid-cols-[minmax(0,1fr)_300px] gap-4 mt-4 items-start">
|
||||
<div className="grid grid-cols-3 gap-3">
|
||||
{rail.map((r) => (
|
||||
<Link
|
||||
key={r.wp_slug}
|
||||
href={`/news/${r.wp_slug}`}
|
||||
className="group block rounded border border-[#252525] bg-[#0b0f17] overflow-hidden hover:border-[var(--color-text-info,#60a5fa)] transition-colors"
|
||||
>
|
||||
<div className="aspect-[16/10] bg-[#111] relative">
|
||||
<img
|
||||
src={img(r)}
|
||||
alt={r.featured_image_alt || r.title}
|
||||
className="w-full h-full object-cover"
|
||||
/>
|
||||
</div>
|
||||
<div className="p-3">
|
||||
<div className="text-[9px] font-mono uppercase tracking-wider text-[var(--color-text-info,#60a5fa)] mb-1">
|
||||
{r.category || "News"}
|
||||
<div className="absolute bottom-0 left-0 right-0 p-6 md:p-10">
|
||||
{hero.category && (
|
||||
<div className="text-[10px] font-mono uppercase tracking-widest text-[var(--color-text-info,#60a5fa)] mb-2">
|
||||
{hero.category}
|
||||
</div>
|
||||
)}
|
||||
<h3 className="font-serif text-2xl md:text-4xl lg:text-5xl text-white leading-tight max-w-3xl group-hover:text-[var(--color-text-info,#60a5fa)] transition-colors">
|
||||
{hero.title}
|
||||
</h3>
|
||||
{hero.excerpt && (
|
||||
<p className="font-serif text-base md:text-lg text-[#cbd5e1] mt-3 max-w-2xl line-clamp-2">
|
||||
{cleanExcerpt(hero.excerpt)}
|
||||
</p>
|
||||
)}
|
||||
<div className="mt-4 flex flex-wrap items-center gap-3 text-[11px] font-mono text-[#9ca3af]">
|
||||
<span>{hero.author_name || "Broadcast Beat"}</span>
|
||||
<StarRating seed={hero.wp_slug} publishedAt={hero.wp_published_at} size="sm" />
|
||||
<span aria-hidden="true" className="text-[var(--color-text-info,#60a5fa)] ml-2">→ Read full story</span>
|
||||
</div>
|
||||
<h4 className="font-serif text-sm leading-tight text-[#e5e7eb] group-hover:text-[var(--color-text-info,#60a5fa)] line-clamp-3">
|
||||
{r.title}
|
||||
</h4>
|
||||
<div className="mt-2">
|
||||
<StarRating seed={r.wp_slug} publishedAt={r.wp_published_at} size="sm" showCount={false} />
|
||||
</div>
|
||||
</div>
|
||||
</Link>
|
||||
|
||||
{/* 3-up rail directly under the hero, still in the left column */}
|
||||
<div className="grid grid-cols-3 gap-3">
|
||||
{rail.map((r) => (
|
||||
<Link
|
||||
key={r.wp_slug}
|
||||
href={`/news/${r.wp_slug}`}
|
||||
className="group block rounded border border-[#252525] bg-[#0b0f17] overflow-hidden hover:border-[var(--color-text-info,#60a5fa)] transition-colors"
|
||||
>
|
||||
<div className="aspect-[16/10] bg-[#111] relative">
|
||||
<img
|
||||
src={img(r)}
|
||||
alt={r.featured_image_alt || r.title}
|
||||
className="w-full h-full object-cover"
|
||||
/>
|
||||
</div>
|
||||
<div className="p-3">
|
||||
<div className="text-[9px] font-mono uppercase tracking-wider text-[var(--color-text-info,#60a5fa)] mb-1">
|
||||
{r.category || "News"}
|
||||
</div>
|
||||
<h4 className="font-serif text-sm leading-tight text-[#e5e7eb] group-hover:text-[var(--color-text-info,#60a5fa)] line-clamp-3">
|
||||
{r.title}
|
||||
</h4>
|
||||
<div className="mt-2">
|
||||
<StarRating seed={r.wp_slug} publishedAt={r.wp_published_at} size="sm" showCount={false} />
|
||||
</div>
|
||||
</div>
|
||||
</Link>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
<aside className="hidden lg:block" aria-label="Premium sponsor">
|
||||
{heroAd ? (
|
||||
|
||||
Reference in New Issue
Block a user