Merge pull request #454 from diggsweden/DIGG-351

Digg 351
diggsweden · Sep 25, 2024 · 3cead09 · 3cead09
2 parents 0bd5f0b + 8a574e3
commit 3cead09
Showing 1 changed file with 9 additions and 5 deletions.
diff --git a/components/layout/Hero/index.tsx b/components/layout/Hero/index.tsx
@@ -45,7 +45,7 @@ export const Hero: FC<HeroProps> = ({
       }`}
     >
       {image && (
-        <div className="absolute left-none top-none h-full w-full">
+        <div className="inset-0 absolute h-full w-full">
           <CustomImage
             width={1920}
             image={image}
@@ -54,13 +54,17 @@ export const Hero: FC<HeroProps> = ({
             aria-label="Hero image"
             priority={true}
           />
+          <div className="inset-0 absolute top-none h-full w-full bg-blackOpaque3 opacity-10"></div>
         </div>
       )}
+
+      {/* Content on top of the overlay */}
       <Container>
-        <div className="relative z-10">
+        <div className="relative z-10 text-center text-white">
           <div
-            className={`${isFrontpage && search && "mx-auto text-center"}
-            ${search ? "text-brown-100" : "bg-white p-xl"} max-w-md`}
+            className={`${isFrontpage && search && "mx-auto"} ${
+              search ? "text-brown-100" : "bg-white p-xl"
+            } max-w-md`}
           >
             {heading && (
               <Heading level={1} size="lg" className="mb-none">
@@ -73,7 +77,7 @@ export const Hero: FC<HeroProps> = ({
               </Preamble>
             )}
             {search && (
-              <div id="SearchHero" className="mt-xl" aria-label="Hero search">
+              <div id="SearchHero" className="mt-xl">
                 <form
                   className="datapage-form"
                   method="GET"