Stablecoins page updates

src/components/CalloutBannerSSR.tsx

@@ -0,0 +1,48 @@
+import { Image, type ImageProps } from "@/components/Image"
+
+import { cn } from "@/lib/utils/cn"
+
+export type CalloutBannerProps = React.HTMLAttributes<HTMLDivElement> & {
+  image: ImageProps["src"]
+  imageWidth?: number
+  title: string
+  description: string
+  alt: string
+}
+
+const CalloutBannerSSR = ({
+  image,
+  imageWidth,
+  title,
+  description,
+  alt,
+  children,
+  className,
+  ...props
+}: CalloutBannerProps) => (
+  <aside
+    className={cn(
+      "flex flex-col rounded p-8 sm:p-12 lg:flex-row-reverse",
+      "bg-gradient-to-r from-accent-a/10 to-accent-c/10 dark:from-accent-a/20 dark:to-accent-c-hover/20",
+      className
+    )}
+    {...props}
+  >
+    <div className="flex">
+      <Image
+        src={image}
+        alt={alt}
+        width={imageWidth}
+        className="-my-24 mx-auto object-contain max-lg:mb-0"
+      />
+    </div>
+
+    <div className="flex w-full flex-shrink-0 flex-grow basis-1/2 flex-col justify-center sm:ps-4 lg:w-[inherit] lg:ps-8">
+      <h2 className="mb-8 text-2xl leading-xs sm:text-[2rem]">{title}</h2>
+      <p className="mb-8 w-[90%] text-xl text-body-medium">{description}</p>
+      {children}
+    </div>
+  </aside>
+)
+
+export default CalloutBannerSSR

src/components/DataProductCard.tsx

@@ -4,6 +4,8 @@ import { StaticImageData } from "next/image"
 import { Image } from "@/components/Image"
 import { Flex } from "@/components/ui/flex"
 
+import { cn } from "@/lib/utils/cn"
+
 import InlineLink from "./ui/Link"
 import { LinkBox, LinkOverlay } from "./ui/link-box"
 
@@ -15,32 +17,37 @@ export interface DataRow {
 
 export type DataProductCardProps = {
   url: string
-  background: string
   image: StaticImageData
   imgWidth: number
   alt?: string
   name: string
   description?: string
   data?: Array<DataRow>
+  className?: string
 }
 
 const DataProductCard = ({
   url,
-  background,
   image,
   imgWidth,
   alt,
   name,
   description,
   data,
+  className,
 }: DataProductCardProps) => {
   return (
-    <LinkBox className="flex flex-col overflow-hidden rounded border shadow-table-box transition-transform duration-100 ease-linear hover:scale-[1.02] hover:bg-background-highlight focus:scale-[1.02] focus:bg-background-highlight">
+    <LinkBox
+      className={cn(
+        "flex flex-col overflow-hidden rounded border shadow-table-box transition-transform duration-100 ease-linear hover:scale-[1.02] hover:bg-background-highlight focus:scale-[1.02] focus:bg-background-highlight",
+        className
+      )}
+    >
       <Flex
         className={
           "min-h-[200px] items-center justify-center shadow-[rgb(0_0_0/_10%)_0px_-1px_0px_inset]"
         }
-        style={{ background }}
+        data-label="banner"
       >
         <Image
           alt={alt ? alt : `${name} logo`}

src/components/ProductList.tsx

@@ -16,6 +16,7 @@ type Content = {
   image?: ImageProps["src"]
   alt: string
   id?: string
+  className?: string
 }
 
 export type ProductListProps = {
@@ -39,13 +40,26 @@ const ProductList = ({ actionLabel, content, category }: ProductListProps) => {
       )}
       <List aria-labelledby={CATEGORY_NAME} className="m-0 mb-4">
         {content.map(
-          ({ title, description, link, image, alt, id, contentItems }, idx) => (
+          (
+            {
+              title,
+              description,
+              link,
+              image,
+              alt,
+              id,
+              contentItems,
+              className,
+            },
+            idx
+          ) => (
             <ListItem
               key={id || idx}
               color="text"
               className={cn(
                 "mb-0 mt-8 flex pb-4",
-                idx !== content.length - 1 && "border-b"
+                idx !== content.length - 1 && "border-b",
+                className
               )}
             >
               <div className="w-20">

src/components/StablecoinAccordion/index.tsx

@@ -1,3 +1,5 @@
+"use client"
+
 import { MdArrowForward } from "react-icons/md"
 
 import { ChildOnlyProp, TranslationKey } from "@/lib/types"

src/components/StablecoinAccordion/useStablecoinAccordion.ts

@@ -5,7 +5,6 @@ import aaveImg from "@/public/images/dapps/aave.png"
 // -- borrow
 import compoundImg from "@/public/images/dapps/compound.png"
 // -- earn
-import gitcoinImg from "@/public/images/dapps/gitcoin.png"
 import matchaImg from "@/public/images/dapps/matcha.png"
 import summerfiImg from "@/public/images/dapps/summerfi.png"
 // Static assets
@@ -66,13 +65,6 @@ export const useStablecoinAccordion = () => {
   ]
 
   const earn: Array<CardProps> = [
-    {
-      title: t("page-stablecoins-accordion-earn-project-bounties"),
-      image: gitcoinImg,
-      link: "https://gitcoin.co/explorer",
-      description: t("page-stablecoins-accordion-earn-project-1-description"),
-      alt: t("gitcoin-logo"),
-    },
     {
       title: t("page-stablecoins-accordion-earn-project-bug-bounties"),
       image: ethImg,