Make date badge highly visible with increased opacity and z-index

- Increased badge opacity to bg-black/80 for maximum visibility
- Set z-index to z-20 to ensure badge appears above gradient overlay
- Changed font-weight to font-bold for better readability
- Increased padding (px-4 py-2) for larger badge size
- Added shadow-2xl for more prominence
- Reduced gradient overlay opacity to not compete with badge
- Date badges should now be clearly visible on all story thumbnails

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/70 via-black/30 to-transparent" />
-                    <div className="absolute bottom-4 left-4">
-                      <div className="flex items-center gap-2 bg-black/50 backdrop-blur-md px-3 py-1.5 rounded-full shadow-lg">
-                        <story.icon size={18} className="text-white" />
-                        <span className="text-white text-sm font-semibold">{story.date}</span>
+                    <div className="absolute inset-0 bg-gradient-to-t from-black/60 via-black/20 to-transparent z-0" />
+                    <div className="absolute bottom-4 left-4 z-20">
+                      <div className="flex items-center gap-2 bg-black/80 backdrop-blur-sm px-4 py-2 rounded-full shadow-2xl">
+                        <story.icon size={18} className="text-white flex-shrink-0" />
+                        <span className="text-white text-sm font-bold">{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/70 via-black/30 to-transparent" />
-                    <div className="absolute bottom-4 left-4">
-                      <div className="flex items-center gap-2 bg-black/50 backdrop-blur-md px-3 py-1.5 rounded-full shadow-lg">
-                        <story.icon size={18} className="text-white" />
-                        <span className="text-white text-sm font-semibold">{story.date}</span>
+                    <div className="absolute inset-0 bg-gradient-to-t from-black/60 via-black/20 to-transparent z-0" />
+                    <div className="absolute bottom-4 left-4 z-20">
+                      <div className="flex items-center gap-2 bg-black/80 backdrop-blur-sm px-4 py-2 rounded-full shadow-2xl">
+                        <story.icon size={18} className="text-white flex-shrink-0" />
+                        <span className="text-white text-sm font-bold">{story.date}</span>
                       </div>
                     </div>
                   </div>