Skip to content

Commit 215815b

Browse files
committed
Enhance date visibility on story thumbnails with badge design
- Added semi-transparent black badge background with backdrop blur - Increased date text size and weight (font-semibold) - Larger icon size (18px) for better visibility - Darker gradient overlay for better contrast - Rounded pill shape for modern badge appearance - Dates now prominently displayed on all story thumbnails in Stories of Adventure and Stories of Impact
1 parent b5bcfb1 commit 215815b

2 files changed

Lines changed: 8 additions & 8 deletions

File tree

src/components/pages/Impact.tsx

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -133,11 +133,11 @@ export function Impact() {
133133
alt={`${story.title} - Story thumbnail`}
134134
className="w-full h-full object-cover group-hover:scale-110 transition-transform duration-500"
135135
/>
136-
<div className="absolute inset-0 bg-gradient-to-t from-black/60 via-black/20 to-transparent" />
136+
<div className="absolute inset-0 bg-gradient-to-t from-black/70 via-black/30 to-transparent" />
137137
<div className="absolute bottom-4 left-4 right-4">
138-
<div className="flex items-center gap-2 text-white text-sm font-medium mb-2">
139-
<story.icon size={16} className="drop-shadow-lg" />
140-
<span className="drop-shadow-lg">{story.date}</span>
138+
<div className="flex items-center gap-2 bg-black/40 backdrop-blur-sm px-3 py-1.5 rounded-full w-fit">
139+
<story.icon size={18} className="text-white drop-shadow-lg" />
140+
<span className="text-white text-sm font-semibold drop-shadow-lg">{story.date}</span>
141141
</div>
142142
</div>
143143
</div>

src/components/pages/StoriesOfAdventure.tsx

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -233,11 +233,11 @@ export function StoriesOfAdventure() {
233233
alt={`${story.title} - Story thumbnail`}
234234
className="w-full h-full object-cover group-hover:scale-110 transition-transform duration-500"
235235
/>
236-
<div className="absolute inset-0 bg-gradient-to-t from-black/60 via-black/20 to-transparent" />
236+
<div className="absolute inset-0 bg-gradient-to-t from-black/70 via-black/30 to-transparent" />
237237
<div className="absolute bottom-4 left-4 right-4">
238-
<div className="flex items-center gap-2 text-white text-sm font-medium mb-2">
239-
<story.icon size={16} className="drop-shadow-lg" />
240-
<span className="drop-shadow-lg">{story.date}</span>
238+
<div className="flex items-center gap-2 bg-black/40 backdrop-blur-sm px-3 py-1.5 rounded-full w-fit">
239+
<story.icon size={18} className="text-white drop-shadow-lg" />
240+
<span className="text-white text-sm font-semibold drop-shadow-lg">{story.date}</span>
241241
</div>
242242
</div>
243243
</div>

0 commit comments

Comments
 (0)