From 3722a34fab43fa54d3bd8bd6d4cf78fb6c4f114b Mon Sep 17 00:00:00 2001 From: "Ryan Salazar (via Claude)" Date: Sat, 16 May 2026 00:37:59 +0000 Subject: [PATCH] home: merge FeatureStoryHero design into FeaturedBentoFromDb MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit 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 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) --- src/app/home-page/page.tsx | 10 +-- src/components/FeatureStoryHero.tsx | 105 ------------------------ src/components/FeaturedBentoFromDb.tsx | 109 ++++++++++++++----------- 3 files changed, 61 insertions(+), 163 deletions(-) delete mode 100644 src/components/FeatureStoryHero.tsx diff --git a/src/app/home-page/page.tsx b/src/app/home-page/page.tsx index cf0d957..adafffe 100644 --- a/src/app/home-page/page.tsx +++ b/src/app/home-page/page.tsx @@ -3,7 +3,6 @@ import type { Metadata } from "next"; import Header from "@/components/Header"; import Footer from "@/components/Footer"; import FeaturedBentoFromDb from '@/components/FeaturedBentoFromDb'; -import FeatureStoryHero from '@/components/FeatureStoryHero'; import FeaturedCarouselServer from '@/components/FeaturedCarouselServer'; import TrendsSidebar from '@/components/TrendsSidebar'; import LiveWireTicker from '@/components/LiveWireTicker'; @@ -157,14 +156,7 @@ export default function HomePage() { - {/* Top feature story hero — single prominent card above the bento */} - - }> - - - - - {/* Featured articles bento */} + {/* Featured: cinematic hero + 4-up rail below (FeaturedBentoFromDb) */} }> diff --git a/src/components/FeatureStoryHero.tsx b/src/components/FeatureStoryHero.tsx deleted file mode 100644 index b5ee249..0000000 --- a/src/components/FeatureStoryHero.tsx +++ /dev/null @@ -1,105 +0,0 @@ -import Link from "next/link"; -import { createClient } from "@supabase/supabase-js"; -import { rewriteLegacyImageUrl } from "@/lib/legacy-image"; - -export const dynamic = "force-dynamic"; - -interface Row { - wp_slug: string; - title: string; - excerpt: string | null; - category: string | null; - featured_image: string | null; - featured_image_alt: string | null; - author_name: string | null; - wp_published_at: string | null; -} - -export default async function FeatureStoryHero() { - const sb = createClient( - process.env.NEXT_PUBLIC_SUPABASE_URL!, - process.env.NEXT_PUBLIC_SUPABASE_ANON_KEY!, - { - db: { schema: (process.env.NEXT_PUBLIC_SUPABASE_SCHEMA || "bb") as "public" }, - auth: { persistSession: false }, - } - ); - - const { data } = await sb - .from("wp_imported_posts") - .select( - "wp_slug, title, excerpt, category, featured_image, featured_image_alt, author_name, wp_published_at", - ) - .eq("status", "published") - .ilike("category", "featured") - .order("featured", { ascending: false }) - .order("wp_published_at", { ascending: false, nullsFirst: false }) - .limit(1); - - const story = data?.[0] as Row | undefined; - if (!story) return null; - - const image = story.featured_image - ? rewriteLegacyImageUrl(story.featured_image) - : "/assets/images/article-placeholder.svg"; - - return ( -
- -
- {story.featured_image_alt -
- - - - Feature Story - - -
- {story.category && ( -
- {story.category} -
- )} -

- {story.title} -

- {story.excerpt && ( -

- {story.excerpt} -

- )} -
- {story.author_name || "Staff Reporter"} - {story.wp_published_at && ( - <> - · - - {new Date(story.wp_published_at).toLocaleDateString("en-US", { - month: "short", - day: "numeric", - year: "numeric", - })} - - - )} - -
-
-
- -
- ); -} diff --git a/src/components/FeaturedBentoFromDb.tsx b/src/components/FeaturedBentoFromDb.tsx index e4fb61c..360d25e 100644 --- a/src/components/FeaturedBentoFromDb.tsx +++ b/src/components/FeaturedBentoFromDb.tsx @@ -69,67 +69,78 @@ export default async function FeaturedBento() { -
- -
- {hero.featured_image_alt -
- - Featured - - - {hero.category || "News"} - -
-
-
-

+ {/* Cinematic 21:9 hero — full width, image fills, gradient + overlaid title */} + +
+ {hero.featured_image_alt +
+ + + + Feature Story + + +
+ {hero.category && ( +
+ {hero.category} +
+ )} +

{hero.title}

{hero.excerpt && ( -

+

{hero.excerpt}

)} -
+
{hero.author_name || "Staff Reporter"} · {ago(hero.wp_published_at)} +
- - -
- {rail.map((r) => ( - -
- {r.featured_image_alt -
-
-
- {r.category || "News"} -
-

- {r.title} -

-
- {ago(r.wp_published_at)} -
-
- - ))}
+ + + {/* 4-up rail BELOW the hero, vertical cards */} +
+ {rail.map((r) => ( + +
+ {r.featured_image_alt +
+
+
+ {r.category || "News"} +
+

+ {r.title} +

+
+ {ago(r.wp_published_at)} +
+
+ + ))}
);