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

Author: rayraycodes

src/components/pages/Impact.tsx

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

src/components/pages/StoriesOfAdventure.tsx

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