From d88ba77e4cd791e314d4992f050977eff0db1069 Mon Sep 17 00:00:00 2001
From: Gjore Milevski <dzole0311@gmail.com>
Date: Fri, 22 Nov 2024 09:20:45 +0100
Subject: [PATCH 1/3] Add showcase for text over carousel image

---
 overrides/home/carousel/index.tsx | 23 +++++++++++++++++++++++
 overrides/home/carousel/items.js  |  4 +++-
 2 files changed, 26 insertions(+), 1 deletion(-)

diff --git a/overrides/home/carousel/index.tsx b/overrides/home/carousel/index.tsx
index ae691462c..348e50946 100644
--- a/overrides/home/carousel/index.tsx
+++ b/overrides/home/carousel/index.tsx
@@ -60,6 +60,29 @@ export function DesktopCarousel () {
             classNames="imagetransition"
           >
             <div className="carousel--height width-full position-absolute left-0 top-0 shadow-1">
+              { (itemInProgress.imageOverlayText1 || itemInProgress.imageOverlayText2) && (
+                  <div
+                    className="position-absolute text-lower-left"
+                    style={{
+                      bottom: '10px',
+                      left: '10px',
+                      color: '#fff',
+                      background: 'rgba(0, 0, 0, 0.5)',
+                      padding: '10px',
+                      borderRadius: '4px',
+                      fontSize: '1.2rem',
+                      fontWeight: 'bold',
+                      lineHeight: '1.5'
+                    }}
+                  >
+                    {itemInProgress.imageOverlayText1 && (
+                      <span style={{ display: 'block' }}>{itemInProgress.imageOverlayText1}</span>
+                    )}
+                    {itemInProgress.imageOverlayText2 && (
+                      <span style={{ display: 'block' }}>{itemInProgress.imageOverlayText2}</span>
+                    )}
+                  </div>
+                )}
               <img className="carousel--content-image" src={itemInProgress.image} alt={itemInProgress.imageAlt} />
             </div>
           </CSSTransition>
diff --git a/overrides/home/carousel/items.js b/overrides/home/carousel/items.js
index 05e822ed1..de773723f 100644
--- a/overrides/home/carousel/items.js
+++ b/overrides/home/carousel/items.js
@@ -4,7 +4,9 @@ export default [
       title: 'U.S. Greenhouse Gas Center',
       description: "The U.S. Greenhouse Gas Center (US GHG Center) is a multi-agency effort consolidating greenhouse gas information from observations and models.",
       image: new URL('../media/ghgc-v2.jpg', import.meta.url).href,
-      imageAlt: 'Earth with Greenhouse Gas Emissions shaded in red'
+      imageAlt: 'Earth with Greenhouse Gas Emissions shaded in red',
+      imageOverlayText1: 'U.S. Greenhouse Gas Center',
+      imageOverlayText2: 'Example second line text'
     },
     {
       link: 'https://earth.gov/sealevel',

From 0560f611657cbedee4014700704d24e961cbc188 Mon Sep 17 00:00:00 2001
From: Gjore Milevski <dzole0311@gmail.com>
Date: Fri, 22 Nov 2024 09:37:15 +0100
Subject: [PATCH 2/3] Add for tablet as well

---
 overrides/home/carousel/index.tsx | 24 +++++++++++++++++++++---
 1 file changed, 21 insertions(+), 3 deletions(-)

diff --git a/overrides/home/carousel/index.tsx b/overrides/home/carousel/index.tsx
index 348e50946..ac058f41d 100644
--- a/overrides/home/carousel/index.tsx
+++ b/overrides/home/carousel/index.tsx
@@ -69,10 +69,8 @@ export function DesktopCarousel () {
                       color: '#fff',
                       background: 'rgba(0, 0, 0, 0.5)',
                       padding: '10px',
-                      borderRadius: '4px',
                       fontSize: '1.2rem',
                       fontWeight: 'bold',
-                      lineHeight: '1.5'
                     }}
                   >
                     {itemInProgress.imageOverlayText1 && (
@@ -111,7 +109,27 @@ function TabletCarousel() {
     <Grid row className="margin-top-2">
         {CarouselItems.map((item) => {
           return <Grid col={12} key={item.title} className="margin-bottom-4">
-              <div>
+              <div className='position-relative'>
+              { (item.imageOverlayText1 || item.imageOverlayText2) && (
+                <div
+                  className="position-absolute text-lower-left"
+                  style={{
+                    bottom: '10px',
+                    left: '10px',
+                    color: '#fff',
+                    padding: '10px',
+                    fontSize: '3vw',
+                    fontWeight: 'bold',
+                  }}
+                >
+                  {item.imageOverlayText1 && (
+                    <span style={{ display: 'block' }}>{item.imageOverlayText1}</span>
+                  )}
+                  {item.imageOverlayText2 && (
+                    <span style={{ display: 'block' }}>{item.imageOverlayText2}</span>
+                  )}
+                </div>
+              )}
               <img className="carousel--content-image" src={item.image} />
               </div>
               <h3 className="margin-top-1">{item.title}</h3>

From ce7759f8b5ff54192fbe8f7be4920b57430ca4b7 Mon Sep 17 00:00:00 2001
From: Gjore Milevski <dzole0311@gmail.com>
Date: Fri, 22 Nov 2024 09:43:11 +0100
Subject: [PATCH 3/3] Clean up

---
 overrides/home/carousel/index.tsx | 77 +++++++++++++++++++------------
 overrides/home/carousel/items.js  |  4 +-
 2 files changed, 50 insertions(+), 31 deletions(-)

diff --git a/overrides/home/carousel/index.tsx b/overrides/home/carousel/index.tsx
index ac058f41d..91cb16d58 100644
--- a/overrides/home/carousel/index.tsx
+++ b/overrides/home/carousel/index.tsx
@@ -61,26 +61,17 @@ export function DesktopCarousel () {
           >
             <div className="carousel--height width-full position-absolute left-0 top-0 shadow-1">
               { (itemInProgress.imageOverlayText1 || itemInProgress.imageOverlayText2) && (
-                  <div
-                    className="position-absolute text-lower-left"
-                    style={{
-                      bottom: '10px',
-                      left: '10px',
-                      color: '#fff',
-                      background: 'rgba(0, 0, 0, 0.5)',
-                      padding: '10px',
-                      fontSize: '1.2rem',
-                      fontWeight: 'bold',
-                    }}
-                  >
-                    {itemInProgress.imageOverlayText1 && (
-                      <span style={{ display: 'block' }}>{itemInProgress.imageOverlayText1}</span>
-                    )}
-                    {itemInProgress.imageOverlayText2 && (
-                      <span style={{ display: 'block' }}>{itemInProgress.imageOverlayText2}</span>
-                    )}
-                  </div>
-                )}
+                <div
+                  className="position-absolute text-lower-left"
+                  style={{
+                    bottom: '10px',
+                    left: '10px',
+                  }}
+                >
+                  {itemInProgress.imageOverlayText1 && <TitleOverImage1 text={itemInProgress.imageOverlayText1} fontSize="1.2rem" />}
+                  {itemInProgress.imageOverlayText2 && <TitleOverImage2 text={itemInProgress.imageOverlayText2} fontSize="1.2rem" />}
+                </div>
+              )}
               <img className="carousel--content-image" src={itemInProgress.image} alt={itemInProgress.imageAlt} />
             </div>
           </CSSTransition>
@@ -116,18 +107,10 @@ function TabletCarousel() {
                   style={{
                     bottom: '10px',
                     left: '10px',
-                    color: '#fff',
-                    padding: '10px',
-                    fontSize: '3vw',
-                    fontWeight: 'bold',
                   }}
                 >
-                  {item.imageOverlayText1 && (
-                    <span style={{ display: 'block' }}>{item.imageOverlayText1}</span>
-                  )}
-                  {item.imageOverlayText2 && (
-                    <span style={{ display: 'block' }}>{item.imageOverlayText2}</span>
-                  )}
+                  {item.imageOverlayText1 && <TitleOverImage1 text={item.imageOverlayText1} fontSize="3vw" />}
+                  {item.imageOverlayText2 && <TitleOverImage2 text={item.imageOverlayText2} fontSize="3vw" />}
                 </div>
               )}
               <img className="carousel--content-image" src={item.image} />
@@ -140,6 +123,40 @@ function TabletCarousel() {
   </GridContainer>
 }
 
+export function TitleOverImage1({ text, fontSize }) {
+  return (
+    <span
+      style={{
+        display: 'block',
+        color: '#fff',
+        background: 'rgba(0, 0, 0, 0.5)',
+        padding: '10px',
+        borderRadius: '4px',
+        fontSize: fontSize || '1.2rem',
+        fontWeight: 'bold',
+      }}
+    >
+      {text}
+    </span>
+  );
+}
+
+export function TitleOverImage2({ text, fontSize }) {
+  return (
+    <span
+      style={{
+        display: 'block',
+        color: '#fff',
+        background: 'rgba(0, 0, 0, 0.5)',
+        padding: '10px',
+        fontSize: fontSize || '1.2rem',
+        fontWeight: 'bold',
+      }}
+    >
+      {text}
+    </span>
+  );
+}
 
 export default function Carousel() {
   const { isMediumUp } = useMediaQuery();
diff --git a/overrides/home/carousel/items.js b/overrides/home/carousel/items.js
index de773723f..67233dd64 100644
--- a/overrides/home/carousel/items.js
+++ b/overrides/home/carousel/items.js
@@ -13,7 +13,9 @@ export default [
       title: 'Global Sea Level Change Portal',
       description: 'The Global Sea Level Change Portal is an international collaboration that offers essential information on current and projected sea level rise to inform coastal communities across the globe.',
       image: new URL('../media/global_slr_v2.jpg', import.meta.url).href,
-      imageAlt: 'Satellite image of coastline'
+      imageAlt: 'Satellite image of coastline',
+      imageOverlayText1: 'Global Sea Level Change Portal',
+      imageOverlayText2: 'Example second line text'
     },
     {
     link: 'https://earth.gov/sealevel/us/',