sebastjan/folx-tv
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Enhance homepage layout to emphasize featured content and condense side articles

Browse Source 
Add SideCard component and adjust grid columns in FeaturedCarousel to allocate more space for the main hero section and reduce the size of side articles.

Replit-Commit-Author: Agent
Replit-Commit-Session-Id: 413891e8-d784-4bea-b9f5-91a5a68316b4
Replit-Commit-Checkpoint-Type: full_checkpoint
Replit-Commit-Event-Id: 9dd58143-386e-4f2c-a072-3d4a086000cb
Replit-Commit-Screenshot-Url: https://storage.googleapis.com/screenshot-production-us-central1/f209e72a-0939-48fa-84fc-57854de71967/413891e8-d784-4bea-b9f5-91a5a68316b4/nTLKCC5
Replit-Helium-Checkpoint-Created: true
This commit is contained in:
sebastjanartic 2026-02-28 20:27:39 +00:00
parent 308e602c73
commit cf6a2042cc
2 changed files with 28 additions and 3 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

BIN
attached_assets/image_1772310381166.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 463 KiB

31
client/src/pages/home.tsx
View File

@ -130,6 +130,31 @@ function MediumCard({ article }: { article: Article }) {
);
}
function SideCard({ article }: { article: Article }) {
const isVideo = article.category === "Video";
return (
<Link href={`/article/${article.slug}`}>
<div className="relative group cursor-pointer rounded-lg overflow-hidden bg-card border border-card-border h-full flex flex-col" data-testid={`card-side-${article.id}`}>
<div className="relative flex-shrink-0">
<div className="overflow-hidden">
<img src={thumbUrl(article.coverImage)} alt={article.title} className="w-full aspect-[4/3] object-cover transition-transform duration-500 group-hover:scale-105" style={{ objectPosition: "center 25%" }} loading="lazy" />
</div>
{isVideo && (
<div className="absolute inset-0 flex items-center justify-center">
<div className="w-8 h-8 rounded-full bg-primary/90 flex items-center justify-center group-hover:bg-primary transition-colors">
<Play className="w-3.5 h-3.5 text-white ml-0.5" fill="white" />
</div>
</div>
)}
</div>
<div className="p-2.5 flex flex-col flex-1">
<h3 className="font-semibold text-card-foreground text-xs leading-snug line-clamp-2 group-hover:text-primary transition-colors">{article.title}</h3>
</div>
</div>
</Link>
);
}
function NativeAdCard() {
return (
<div className="relative rounded-lg overflow-hidden h-full bg-card border border-card-border" data-testid="card-native-ad">
@ -210,7 +235,7 @@ function FeaturedCarousel({ articles, popular, galleryImages }: { articles: Arti
return (
<section data-testid="featured-carousel" onMouseEnter={() => setPaused(true)} onMouseLeave={() => setPaused(false)}>
<div className="grid grid-cols-1 lg:grid-cols-6 gap-4">
<div className={wide ? "lg:col-span-5" : "lg:col-span-3"}>
<div className={wide ? "lg:col-span-5" : "lg:col-span-4"}>
{isGalleryPage && galleryImages ? (
<GalleryHeroCard images={galleryImages.slice(0, 30)} />
) : hero ? (
@ -218,9 +243,9 @@ function FeaturedCarousel({ articles, popular, galleryImages }: { articles: Arti
) : null}
</div>
{!wide && (
<div className="lg:col-span-2 grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-1 gap-4">
<div className="lg:col-span-1 grid grid-cols-1 gap-3">
{side.map((a) => (
<MediumCard key={a.id} article={a} />
<SideCard key={a.id} article={a} />
))}
</div>
)}