feat: add dynamic hero preview and update component

Add a new getHeroPreview data fetch function in lib/data/stories.ts to load homepage hero stories, update the home page to fetch this data and pass it to the Hero component, and modify the Hero component to accept optional stories prop that falls back to the static HERO_PREVIEW when no dynamic stories are provided.

Author: kelvinkipruto

app/page.tsx

@@ -8,7 +8,12 @@ import { WhatsappBanner } from "@/components/home/WhatsappBanner";
 import { Impact } from "@/components/ui/Impact";
 import { CONTENT_DESKS } from "@/lib/content-desks";
 import { getContentDesks } from "@/lib/data/desks";
-import { getLatest, getSpotlight, getTrending } from "@/lib/data/stories";
+import {
+  getHeroPreview,
+  getLatest,
+  getSpotlight,
+  getTrending,
+} from "@/lib/data/stories";
 import {
   LATEST_FEATURE,
   LATEST_GRID,
@@ -21,16 +26,17 @@ import {
 export default async function Home() {
   // Pages own fetching; fall back to the static content when Hasura is
   // unreachable or unconfigured. Fetched in parallel — each falls back alone.
-  const [desks, spotlight, trending, latest] = await Promise.all([
+  const [desks, heroPreview, spotlight, trending, latest] = await Promise.all([
     getContentDesks().catch(() => null),
+    getHeroPreview().catch(() => null),
     getSpotlight().catch(() => null),
     getTrending().catch(() => null),
     getLatest().catch(() => null),
   ]);
 
   return (
     <>
-      <Hero />
+      <Hero stories={heroPreview ?? undefined} />
       <Impact />
       <Spotlight
         stories={

components/home/Hero.tsx

@@ -10,6 +10,10 @@ import { DateRow } from "@/components/ui/MetaRow";
 import { Container } from "@/components/ui/SectionHeading";
 import { HERO, HERO_PREVIEW, type Story } from "@/lib/home-content";
 
+interface HeroProps {
+  stories?: Story[];
+}
+
 const HERO_GRADIENT =
   "linear-gradient(100.768deg, rgba(4, 26, 109, 0.9) 45.439%, rgba(102, 102, 102, 0) 66.403%)";
 
@@ -49,7 +53,8 @@ function calcDotCount(s: SwiperType): number {
   return Math.max(1, s.slides.length - visible + 1);
 }
 
-export function Hero() {
+export function Hero({ stories }: HeroProps = {}) {
+  const preview = stories?.length ? stories : HERO_PREVIEW;
   const [swiperInstance, setSwiperInstance] = useState<SwiperType | null>(null);
   const [activeIndex, setActiveIndex] = useState(0);
   const [dotCount, setDotCount] = useState(0);
@@ -110,7 +115,7 @@ export function Hero() {
             onRealIndexChange={(s: SwiperType) => setActiveIndex(s.realIndex)}
             onResize={(s: SwiperType) => setDotCount(calcDotCount(s))}
           >
-            {HERO_PREVIEW.map((story) => (
+            {preview.map((story) => (
               <SwiperSlide
                 key={`${story.image}-${story.date}`}
                 className="!w-auto"
@@ -122,7 +127,7 @@ export function Hero() {
         </div>
 
         <div className={`mt-4 flex items-center gap-2 ${INDENT}`}>
-          {HERO_PREVIEW.slice(0, dotCount).map((story, i) => (
+          {preview.slice(0, dotCount).map((story, i) => (
             <button
               key={`dot-${story.image}-${story.date}`}
               type="button"

lib/data/stories.ts

@@ -59,3 +59,7 @@ export function getTrending(): Promise<Story[]> {
 export function getLatest(): Promise<Story[]> {
   return getContentListStories("Top news");
 }
+
+export function getHeroPreview(): Promise<Story[]> {
+  return getContentListStories("Homepage — Hero");
+}