Add a single featured article to the bottom of the homepage grid

Move the WideCard component to display a single featured article at the end of the homepage grid layout, consuming two columns on smaller screens.

Replit-Commit-Author: Agent
Replit-Commit-Session-Id: 517dfa7b-26ac-463d-a6e1-a58c6df97188
Replit-Commit-Checkpoint-Type: full_checkpoint
Replit-Commit-Event-Id: eab6ad47-19af-45fd-9e98-a28298c6a4e4
Replit-Commit-Screenshot-Url: https://storage.googleapis.com/screenshot-production-us-central1/f209e72a-0939-48fa-84fc-57854de71967/517dfa7b-26ac-463d-a6e1-a58c6df97188/0ZGabQy
Replit-Helium-Checkpoint-Created: true
This commit is contained in:
sebastjanartic 2026-02-28 22:29:16 +00:00
parent b73903f4a6
commit d58ee4c679

View File

@ -523,14 +523,6 @@ export default function Home() {
<FeaturedCarousel articles={articles} popular={popular} galleryImages={galleryImages} focalPoints={focalPoints} /> <FeaturedCarousel articles={articles} popular={popular} galleryImages={galleryImages} focalPoints={focalPoints} />
{widePickedArticles.length > 0 && (
<div className="grid grid-cols-1 lg:grid-cols-2 gap-4">
{widePickedArticles.map((a) => (
<WideCard key={`wide-${a.id}`} article={a} focalPoints={focalPoints} />
))}
</div>
)}
{gridRows.map((row, ri) => ( {gridRows.map((row, ri) => (
<div key={ri} className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-4"> <div key={ri} className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-4">
{row.map((item, ci) => {row.map((item, ci) =>
@ -540,6 +532,11 @@ export default function Home() {
? <MediumCard key={item.article.id} article={item.article} focalPoints={focalPoints} /> ? <MediumCard key={item.article.id} article={item.article} focalPoints={focalPoints} />
: null : null
)} )}
{ri === gridRows.length - 1 && widePickedArticles.length > 0 && (
<div className="sm:col-span-2">
<WideCard article={widePickedArticles[0]} focalPoints={focalPoints} />
</div>
)}
</div> </div>
))} ))}