From e4d4abe43f2728d6c2caca6562118c647db488cc Mon Sep 17 00:00:00 2001
From: Rama Priyanto <priyantorama12@gmail.com>
Date: Mon, 30 Jun 2025 14:42:32 +0700
Subject: [PATCH] fix:banner overlay

---
 components/landing/HeaderNews.tsx | 14 ++++++++++----
 1 file changed, 10 insertions(+), 4 deletions(-)

diff --git a/components/landing/HeaderNews.tsx b/components/landing/HeaderNews.tsx
index 5d34a19..3cb6676 100644
--- a/components/landing/HeaderNews.tsx
+++ b/components/landing/HeaderNews.tsx
@@ -152,8 +152,12 @@ export default function HeaderNews() {
                       <div className="absolute inset-0 bg-black/20 flex items-center justify-center text-white text-lg font-semibold"></div>
                     </div>
 
-                    <CardFooter className="mb-1 max-h-[50px] before:bg-white/10 border-white/20 border-1 overflow-hidden py-1 absolute bottom-0 before:rounded-xl rounded-large  w-[calc(100%_-_8px)] shadow-small ml-1 z-10">
-                      <div className="text-white py-1">
+                    <CardFooter className="relative mb-1 border-white/20 border overflow-hidden py-1 absolute bottom-0 w-[calc(100%_-_8px)] shadow-small ml-1 z-10 rounded-large">
+                      {/* Overlay: memberikan latar gelap transparan */}
+                      <div className="absolute inset-0 bg-black/50 backdrop-blur-sm rounded-large z-0" />
+
+                      {/* Konten teks */}
+                      <div className="relative z-10 text-white py-1 w-full">
                         <Link
                           href={`news/detail/${newsItem.id}-${newsItem?.slug}`}
                         >
@@ -303,8 +307,10 @@ export default function HeaderNews() {
                       <div className="absolute inset-0 bg-black/20 flex items-center justify-center text-white text-lg font-semibold"></div>
                     </div>
 
-                    <CardFooter className="mb-1 max-h-[20vh] before:bg-white/10 border-white/20 border-1 overflow-hidden py-1 md:absolute before:rounded-xl rounded-large bottom-1 w-[calc(100%_-_8px)] shadow-small ml-1 z-10">
-                      <div className="text-white">
+                    <CardFooter className="relative mb-1 max-h-[20vh] border-white/20 border overflow-hidden py-1 md:absolute rounded-large bottom-1 w-[calc(100%_-_8px)] shadow-small ml-1 z-10">
+                      <div className="absolute inset-0 bg-black/50 backdrop-blur-sm rounded-large z-0" />
+
+                      <div className="relative z-10 text-white">
                         <Link
                           href={`news/detail/${newsItem.id}-${newsItem?.slug}`}
                         >