feat: ecosystem layout

src/components/Home/Ecosystem/Card.module.css

@@ -0,0 +1,86 @@
+.container {
+  --expanded-logo-container-height: 13rem;
+  --collapsed-logo-container-height: 3rem;
+  --expanded-overlay-height: 15rem;
+  --collapsed-overlay-height: 5rem;
+
+  composes: box from '@shared/atoms/Box.module.css';
+
+  height: 23rem;
+}
+
+.logoContainer {
+  width: 100%;
+  height: var(--expanded-logo-container-height);
+  margin-left: auto;
+  margin-right: auto;
+  margin-bottom: calc(var(--spacer) / 2);
+  transition: all 0.3s;
+}
+
+.logo {
+  object-fit: contain;
+  width: 100%;
+  height: 100%;
+  transition: all 0.3s;
+}
+
+.overlayContainer {
+  position: relative;
+  height: var(--collapsed-overlay-height);
+  overflow-y: hidden;
+  transition: transform 0.3s;
+}
+
+.overlay {
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  height: var(--expanded-overlay-height);
+  position: absolute;
+  width: 100%;
+  top: 0;
+  transition: transform 0.3s;
+  transform: translate3d(0, 33%, 0);
+}
+
+.title {
+  display: block;
+  font-size: var(--font-size-large);
+  margin-bottom: calc(var(--spacer) / 2);
+  transform: translate3d(0, -100%, 0);
+  transition: transform 0.3s;
+}
+
+.details {
+  display: flex;
+  flex-direction: column;
+  justify-content: space-between;
+  flex-grow: 1;
+  opacity: 0;
+  transition: opacity 0.5s 0.1s;
+}
+
+.description {
+  margin: 0;
+}
+
+.container:hover .overlay,
+.container:hover .title {
+  transform: translate3d(0, 0, 0);
+}
+
+.container:hover .overlayContainer {
+  height: var(--expanded-overlay-height);
+  transition: all 0.3s;
+}
+
+.container:hover .details {
+  opacity: 1;
+}
+
+.container:hover .logoContainer {
+  height: var(--collapsed-logo-container-height);
+  width: 50%;
+  transition: all 0.3s;
+}

src/components/Home/Ecosystem/Card.tsx

@@ -0,0 +1,38 @@
+import Markdown from '@components/@shared/Markdown'
+import styles from './Card.module.css'
+import Button from '@components/@shared/atoms/Button'
+
+export default function Card({
+  description,
+  image,
+  link,
+  title
+}: {
+  description: string
+  image: string
+  link: string
+  title: string
+}) {
+  return (
+    <div className={styles.container}>
+      <div className={styles.logoContainer}>
+        <img
+          className={styles.logo}
+          alt={`${title} logo`}
+          src={`/images/ecosystem/${image}`}
+        />
+      </div>
+      <div className={styles.overlayContainer}>
+        <div className={styles.overlay}>
+          <h1 className={styles.title}>{title}</h1>
+          <div className={styles.details}>
+            <Markdown className={styles.description} text={description} />
+            <Button href={link} style="primary" size="small">
+              Go to Portal
+            </Button>
+          </div>
+        </div>
+      </div>
+    </div>
+  )
+}

src/components/Home/Ecosystem/index.module.css

@@ -0,0 +1,3 @@
+.container {
+  composes: assetList from '@shared/AssetList/index.module.css';
+}

src/components/Home/Ecosystem/index.tsx

@@ -0,0 +1,24 @@
+import { useMarketMetadata } from '@context/MarketMetadata'
+import Card from './Card'
+import styles from './index.module.css'
+
+export default function Ecosystem() {
+  const { siteContent } = useMarketMetadata()
+  const ecosystemList = siteContent?.menu?.find(
+    (item) => item.name.toLowerCase() === 'ecosystem'
+  )?.subItems
+
+  return (
+    <div className={styles.container}>
+      {ecosystemList?.map((portal) => (
+        <Card
+          key={portal.name}
+          description={portal.description}
+          image={portal.image}
+          link={portal.link}
+          title={portal.name}
+        />
+      ))}
+    </div>
+  )
+}

src/components/Home/index.tsx

@@ -9,6 +9,7 @@ import { useAddressConfig } from '@hooks/useAddressConfig'
 import TopSales from './TopSales'
 import TopTags from './TopTags'
 import HomeContent from './Content'
+import Ecosystem from './Ecosystem'
 
 interface FeaturedSection {
   title: string
@@ -78,6 +79,7 @@ export default function HomePage(): ReactElement {
 
   return (
     <>
+      <Ecosystem />
       {hasFeaturedAssets() && (
         <>
           {queryFeatured.map((section, i) => (