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

home: merge FeatureStoryHero design into FeaturedBentoFromDb

Browse Source 
Replace the bento's old hero+side-rail layout with a full-width cinematic
21:9 hero on top + 4-up vertical-card rail below. Single DB query, single
component. Standalone FeatureStoryHero component removed (was rendered
above the bento; design now lives inside the bento itself).

- FeaturedBentoFromDb.tsx: new hero (gradient overlay, Feature Story badge,
  large overlaid title, "Read full story" cue) + 4-card grid below
- home-page/page.tsx: drop <FeatureStoryHero /> import + JSX block
- src/components/FeatureStoryHero.tsx: deleted (composition replaced by
  inline JSX in the bento for single-query efficiency)

Accent uses var(--color-text-info, #60a5fa) — the existing blue from the
codebase, matching the rest of the post-Slice-4-revert site.

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
This commit is contained in:
Ryan Salazar (via Claude)
2026-05-16 00:37:59 +00:00
parent 0db3ea34e3
commit 3722a34fab
3 changed files with 61 additions and 163 deletions
Download Patch File Download Diff File Expand all files Collapse all files

109
src/components/FeaturedBentoFromDb.tsx
View File

@@ -69,67 +69,78 @@ export default async function FeaturedBento() {
</Link>
</div>
<div className="grid grid-cols-1 lg:grid-cols-3 gap-4">
<Link
href={`/news/${hero.wp_slug}`}
className="lg:col-span-2 group block rounded border border-[#252525] bg-[#0b0f17] overflow-hidden hover:border-[var(--color-text-info,#60a5fa)] transition-colors"
>
<div className="relative aspect-[16/9] bg-[#111]">
<img
src={img(hero)}
alt={hero.featured_image_alt || hero.title}
className="w-full h-full object-cover"
/>
<div className="absolute top-2 left-2 flex gap-1 text-[10px] font-mono">
<span className="bg-[var(--color-text-info,#60a5fa)] text-black px-2 py-0.5 rounded uppercase tracking-wider font-semibold">
Featured
</span>
<span className="bg-black/60 text-white px-2 py-0.5 rounded uppercase tracking-wider">
{hero.category || "News"}
</span>
</div>
</div>
<div className="p-5">
<h3 className="font-serif text-2xl md:text-3xl leading-snug text-[#e5e7eb] group-hover:text-[var(--color-text-info,#60a5fa)]">
{/* 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" />
<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-[15px] text-[#b0b0b0] mt-3 line-clamp-3">
<p className="font-serif text-base md:text-lg text-[#cbd5e1] mt-3 max-w-2xl line-clamp-2">
{hero.excerpt}
</p>
)}
<div className="mt-4 text-[11px] font-mono text-[#6b7280] flex items-center gap-2">
<div className="mt-4 flex flex-wrap items-center gap-3 text-[11px] font-mono text-[#9ca3af]">
<span>{hero.author_name || "Staff Reporter"}</span>
<span>·</span>
<span>{ago(hero.wp_published_at)}</span>
<span aria-hidden="true" className="text-[var(--color-text-info,#60a5fa)] ml-2">→ Read full story</span>
</div>
</div>
</Link>
<div className="grid grid-cols-1 gap-3">
{rail.map((r) => (
<Link
key={r.wp_slug}
href={`/news/${r.wp_slug}`}
className="group flex gap-3 rounded border border-[#252525] bg-[#0b0f17] overflow-hidden hover:border-[var(--color-text-info,#60a5fa)] transition-colors"
>
<div className="shrink-0 w-[120px] aspect-square bg-[#111] relative">
<img src={img(r)} alt={r.featured_image_alt || r.title} className="w-full h-full object-cover" />
</div>
<div className="flex-1 p-2 pr-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="text-[10px] font-mono text-[#6b7280] mt-2">
{ago(r.wp_published_at)}
</div>
</div>
</Link>
))}
</div>
</Link>
{/* 4-up rail BELOW the hero, vertical cards */}
<div className="grid grid-cols-2 md:grid-cols-4 gap-4 mt-4">
{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="text-[10px] font-mono text-[#6b7280] mt-2">
{ago(r.wp_published_at)}
</div>
</div>
</Link>
))}
</div>
</section>
);