From b486879519a334f02445ceb860cfd586e5e3cd3c Mon Sep 17 00:00:00 2001
From: Ram Sharan Rimal <rsr0012@uah.edu>
Date: Thu, 9 Jan 2025 09:43:49 -0600
Subject: [PATCH 1/5] replace button with link element

---
 overrides/home/component.tsx | 14 +++++++-------
 overrides/home/index.scss    | 36 ++++++++++++++++++++++++++++++++++++
 2 files changed, 43 insertions(+), 7 deletions(-)
 create mode 100644 overrides/home/index.scss

diff --git a/overrides/home/component.tsx b/overrides/home/component.tsx
index 1881d9458..c4d2130a6 100644
--- a/overrides/home/component.tsx
+++ b/overrides/home/component.tsx
@@ -1,5 +1,5 @@
 import React from "$veda-ui/react";
-import { NavLink } from "$veda-ui/react-router-dom";
+import { Link } from "$veda-ui/react-router-dom";
 import styled from "$veda-ui/styled-components";
 import { glsp, themeVal, media } from "$veda-ui/@devseed-ui/theme-provider";
 import { Button } from "$veda-ui/@devseed-ui/button";
@@ -17,6 +17,7 @@ import {
   Grid,
 } from '$veda-ui/@trussworks/react-uswds';
 
+import './index.scss';
 
 import Partners from "./partners";
 import Banner from './banner';
@@ -112,14 +113,13 @@ export default function HomeComponent() {
             </Grid>
           </Grid>
           <Buttons className="margin-top-4">
-            <Button
-              forwardedAs={NavLink}
+            <Link
+              
               to="/about"
-              size="xlarge"
-              variation="primary-outline"
+              className="link"
             >
-                Learn More <CollecticonArrowRight />
-            </Button>
+                Learn More <div className="arrow"> <CollecticonArrowRight /></div>
+            </Link>
           </Buttons>
         </Grid>
       </GridContainer>
diff --git a/overrides/home/index.scss b/overrides/home/index.scss
new file mode 100644
index 000000000..09ca39e75
--- /dev/null
+++ b/overrides/home/index.scss
@@ -0,0 +1,36 @@
+/* Base style for the link */
+.link {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  color: rgb(18, 41, 97);
+  border: 1px solid rgb(18, 41, 97);
+  padding: 0px 20px;
+  border-radius: 5px;
+  text-transform: uppercase;
+  font-size: 16px;
+  font-weight: 500;
+  font-family: 'Inter', sans-serif;
+  height: 3rem;
+  background-color: transparent;
+  transition: background-color 0.24s ease-in-out;
+  opacity: 1;
+  text-decoration: none;
+  
+  /* Hover effect */
+  &:hover {
+    background-color: rgba(8, 42, 100, 0.08);
+  }
+
+  /* Active effect */
+  &:active, 
+  &.active {
+    background-color: rgba(8, 42, 100, 0.08);
+  }
+}
+
+/* Optional styles for the arrow */
+.arrow {
+  display: flex;
+  margin: 0px 4px;
+}
\ No newline at end of file

From a9955929f3d15ffd97c545ca25c808809b87b316 Mon Sep 17 00:00:00 2001
From: Ram Sharan Rimal <rsr0012@uah.edu>
Date: Thu, 9 Jan 2025 09:45:17 -0600
Subject: [PATCH 2/5] fix tab role for carousel items

---
 overrides/home/carousel/carousel-item.tsx | 9 +++++++--
 1 file changed, 7 insertions(+), 2 deletions(-)

diff --git a/overrides/home/carousel/carousel-item.tsx b/overrides/home/carousel/carousel-item.tsx
index bea7f95ca..cafb155d6 100644
--- a/overrides/home/carousel/carousel-item.tsx
+++ b/overrides/home/carousel/carousel-item.tsx
@@ -45,7 +45,11 @@ export function ItemPanel({ item, linkComponent: LinkComponent }) {
 }
 
 export default function CarouselItem({ item, itemIdx, onTitleClick, shouldProgress, progressDone, progressPercentage, selected, linkComponent: LinkComponent }) {
-  return <Card 
+  return<li
+    role="tab"
+    className="usa-card tablet:grid-col-4"  
+    >
+  <Card 
     gridLayout={{ tablet: { col: 4 } }} 
     containerProps={{className:`hover:bg-base-lightest padding-x-1 radius-0 border-0 animation--transition ${(selected || shouldProgress)? 'opacity-100':'opacity-50'}`}}>
     <ProgressBar shouldProgress={shouldProgress} progressDone={progressDone} progressPercentage={progressPercentage}selected={selected} />
@@ -71,6 +75,7 @@ export default function CarouselItem({ item, itemIdx, onTitleClick, shouldProgre
         <span className="padding-left-1">Read more</span>
         </LinkComponent>
       </CardFooter>
-  </Card>
+    </Card>
+    </li>
 }
 

From a4575b510192af8ecf8207e2b79532437bcec751 Mon Sep 17 00:00:00 2001
From: Ram Sharan Rimal <rsr0012@uah.edu>
Date: Thu, 9 Jan 2025 09:45:48 -0600
Subject: [PATCH 3/5] make heading element in sequential order

---
 overrides/home/carousel/carousel-item.tsx | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/overrides/home/carousel/carousel-item.tsx b/overrides/home/carousel/carousel-item.tsx
index cafb155d6..1bffce938 100644
--- a/overrides/home/carousel/carousel-item.tsx
+++ b/overrides/home/carousel/carousel-item.tsx
@@ -54,9 +54,9 @@ export default function CarouselItem({ item, itemIdx, onTitleClick, shouldProgre
     containerProps={{className:`hover:bg-base-lightest padding-x-1 radius-0 border-0 animation--transition ${(selected || shouldProgress)? 'opacity-100':'opacity-50'}`}}>
     <ProgressBar shouldProgress={shouldProgress} progressDone={progressDone} progressPercentage={progressPercentage}selected={selected} />
     <CardBody className="padding-left-0 position-relative">
-      <h3 className="tablet:margin-top-1 carousel--title text-bold veda-color--base">
+      <h2 className="tablet:margin-top-1 carousel--title text-bold veda-color--base">
         {item.title}
-      </h3>
+      </h2>
       <p className="margin-top-2 flex-align-self-stretch">{item.description}</p>
       <Button
         unstyled={true}

From 61d2cd673ab6298f30ff6a4db37a3b12372efaa9 Mon Sep 17 00:00:00 2001
From: Ram Sharan Rimal <rsr0012@uah.edu>
Date: Thu, 9 Jan 2025 11:33:09 -0600
Subject: [PATCH 4/5] fix role for list elements

---
 overrides/home/carousel/carousel-item.tsx | 22 ++++++++++------------
 1 file changed, 10 insertions(+), 12 deletions(-)

diff --git a/overrides/home/carousel/carousel-item.tsx b/overrides/home/carousel/carousel-item.tsx
index 1bffce938..b1d26c952 100644
--- a/overrides/home/carousel/carousel-item.tsx
+++ b/overrides/home/carousel/carousel-item.tsx
@@ -45,13 +45,13 @@ export function ItemPanel({ item, linkComponent: LinkComponent }) {
 }
 
 export default function CarouselItem({ item, itemIdx, onTitleClick, shouldProgress, progressDone, progressPercentage, selected, linkComponent: LinkComponent }) {
-  return<li
-    role="tab"
-    className="usa-card tablet:grid-col-4"  
-    >
-  <Card 
+  return <Card 
     gridLayout={{ tablet: { col: 4 } }} 
-    containerProps={{className:`hover:bg-base-lightest padding-x-1 radius-0 border-0 animation--transition ${(selected || shouldProgress)? 'opacity-100':'opacity-50'}`}}>
+    role='tab'
+    aria-selected={selected.toString()}
+    aria-label={`Slide ${itemIdx+1}`}
+    aria-controls={`carousel-item-${itemIdx + 1}`} 
+    containerProps={{className:`∫ padding-x-1 radius-0 border-0 animation--transition ${(selected || shouldProgress)? 'opacity-100':'opacity-83'} `}}>
     <ProgressBar shouldProgress={shouldProgress} progressDone={progressDone} progressPercentage={progressPercentage}selected={selected} />
     <CardBody className="padding-left-0 position-relative">
       <h2 className="tablet:margin-top-1 carousel--title text-bold veda-color--base">
@@ -63,10 +63,7 @@ export default function CarouselItem({ item, itemIdx, onTitleClick, shouldProgre
         className="position-absolute top-0 left-0 width-full height-full blocklink"
         onClick={() => { onTitleClick(item); } }
         type="button"
-        role="tab"
-        aria-label={`Slide ${itemIdx+1}`}
-        aria-selected={selected.toString()}
-        aria-controls={`carousel-item-${itemIdx+1}`} 
+        aria-label={`Open details for ${item.title}`}
         children={undefined} />
     </CardBody>
     <CardFooter className="padding-left-0 padding-top-1">
@@ -75,7 +72,8 @@ export default function CarouselItem({ item, itemIdx, onTitleClick, shouldProgre
         <span className="padding-left-1">Read more</span>
         </LinkComponent>
       </CardFooter>
-    </Card>
-    </li>
+      </Card>
+     
+   
 }
 

From a92edaef3066aa3eb9ed93ef932fd5e9e1d582ea Mon Sep 17 00:00:00 2001
From: Ram Sharan Rimal <rsr0012@uah.edu>
Date: Thu, 9 Jan 2025 12:05:30 -0600
Subject: [PATCH 5/5] remove special character

---
 overrides/home/carousel/carousel-item.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/overrides/home/carousel/carousel-item.tsx b/overrides/home/carousel/carousel-item.tsx
index b1d26c952..73b047201 100644
--- a/overrides/home/carousel/carousel-item.tsx
+++ b/overrides/home/carousel/carousel-item.tsx
@@ -51,7 +51,7 @@ export default function CarouselItem({ item, itemIdx, onTitleClick, shouldProgre
     aria-selected={selected.toString()}
     aria-label={`Slide ${itemIdx+1}`}
     aria-controls={`carousel-item-${itemIdx + 1}`} 
-    containerProps={{className:`∫ padding-x-1 radius-0 border-0 animation--transition ${(selected || shouldProgress)? 'opacity-100':'opacity-83'} `}}>
+    containerProps={{className:`padding-x-1 radius-0 border-0 animation--transition ${(selected || shouldProgress)? 'opacity-100':'opacity-83'} `}}>
     <ProgressBar shouldProgress={shouldProgress} progressDone={progressDone} progressPercentage={progressPercentage}selected={selected} />
     <CardBody className="padding-left-0 position-relative">
       <h2 className="tablet:margin-top-1 carousel--title text-bold veda-color--base">