fix: Add cards to Infrastructure Overview

pages/core-api/api-overview.md → pages/core-api/api-overview.mdx

@@ -1,31 +1,48 @@
-# Safe{Core} Infrastructure
-
-The Safe{Core} Infrastructure consists of the following services:
-
-## Safe Transaction Service
-
-The Safe Transaction Service tracks transactions related to Safe contracts using tracing on Mainnet, Sepolia, and Gnosis Chain. It uses event indexing for the other chains. For each [supported network](./transaction-service-supported-networks.md) there is one instance of the Transaction Service.
-
-- Learn about the [tech stack and how to run the service](./api-safe-transaction-service.mdx).
-- Learn about the [Safe Transaction Service API](./transaction-service-overview.mdx).
-- Check the [API Reference](./transaction-service-reference.mdx).
-- Check the [GitHub repository](https://github.com/safe-global/safe-transaction-service) (Python).
-
-## Safe Events Service
-
-The Events Service handles Safe indexing events and delivers them as HTTP webhooks, connection to the events queue processed by the Transaction Service. The service's database stores the configuration of webhook destinations.
-
-- Check the [GitHub repository](https://github.com/safe-global/safe-events-service) (NodeJS).
+import { Grid } from '@mui/material'
+import CustomCard from '../../components/CustomCard'
+import SafeCoreSDK from '../../assets/svg/ic-sdk.svg'
+import SafeCoreAPI from '../../assets/svg/ic-api.svg'
+
+
+# Safe\{Core\} Infrastructure
+
+The Safe\{Core\} Infrastructure consists of the following services:
+
+<Grid
+  container
+  spacing={2}
+  display='flex'
+  alignContent='flex-start'
+  mt={3}
+>
+  <Grid item xs={12} md={6}>
+    <CustomCard
+      title={'Safe Transaction Service'}
+      description={'The Safe Transaction Service tracks transactions related to Safe contracts using tracing on Mainnet, Sepolia, and Gnosis Chain. It uses event indexing for the other chains. For each supported network there is one instance of the Transaction Service.'}
+      url={'./transaction-service-overview'}
+      icon={<SafeCoreAPI />}
+      newTab={false}
+    />
+  </Grid>
+  <Grid item xs={12} md={6}>
+    <CustomCard
+      title={'Safe Events Service'}
+      description={'The Events Service handles Safe indexing events and delivers them as HTTP webhooks, connection to the events queue processed by the Transaction Service. The service\'s database stores the configuration of webhook destinations.'}
+      url={'https://github.com/safe-global/safe-events-service'}
+      icon={<SafeCoreSDK />}
+      />
+  </Grid>
+</Grid>
 
 ## Architecture
 
-Safe{Wallet} uses these services to offer functionality to end customers via the web and mobile applications. The [Safe Client Gateway](https://github.com/safe-global/safe-client-gateway-nest) acts as a facade between the end customer and the Safe{Core} services and the [Safe Config Service](https://github.com/safe-global/safe-config-service) stores all supported networks and chain-specific variables.
+Safe\{Wallet\} uses these services to offer functionality to end customers via the web and mobile applications. The [Safe Client Gateway](https://github.com/safe-global/safe-client-gateway-nest) acts as a facade between the end customer and the Safe\{Core\} services and the [Safe Config Service](https://github.com/safe-global/safe-config-service) stores all supported networks and chain-specific variables.
 
 Safe's production setup consists of several instances of the Transaction Service orchestrated by the Config Service, which are later consumed by the Safe Client Gateway. The Events Service notifies the Safe Client Gateway when new events are indexed, helping to improve the user experience.
 
 ![Overview of the backend services and their components.](../../assets/diagram-services.png)
 
-## Integration Flow for Safe{Wallet} and Safe{Core}
+## Integration Flow for Safe\{Wallet\} and Safe\{Core\}
 
 - The Client Gateway leverages the Config Service to find the Transaction Service instance required for a specific request.
 - The Client Gateway forwards the request to the specified Transaction Service instance for the supported networks (determined by the Config Service).
@@ -64,4 +81,4 @@ Even though the Config Service and Transaction Service instances are reachable b
 
 ## Running locally
 
-[Safe Infrastructure](https://github.com/safe-global/safe-infrastructure) repository and the [running services locally](https://github.com/safe-global/safe-infrastructure/blob/main/docs/running_locally.md) guide show how to run Safe's infrastructure ([Safe{Wallet}](https://app.safe.global) and Safe{Core}). Note that these documents are examples of how these services run, and the configuration should adapt to the needs of a specific use case.
+[Safe Infrastructure](https://github.com/safe-global/safe-infrastructure) repository and the [running services locally](https://github.com/safe-global/safe-infrastructure/blob/main/docs/running_locally.md) guide show how to run Safe's infrastructure ([Safe\{Wallet\}](https://app.safe.global) and Safe\{Core\}). Note that these documents are examples of how these services run, and the configuration should adapt to the needs of a specific use case.

pages/core-api/transaction-service-overview.mdx

@@ -16,3 +16,8 @@ Additionally, the Safe\{Core\} SDK provides the [API Kit](../sdk/api-kit), a Typ
 ## Getting started
 
 Are you new to our API and not sure where to get started? We recommend heading over to the [guides](../core-api/transaction-service-guides/transactions.mdx) on the Safe Transaction Service API.
+
+## Resources
+
+- Learn about the [Safe Transaction Service tech stack and how to run it](./api-safe-transaction-service.mdx).
+- Check the Safe Transaction Service [GitHub repository](https://github.com/safe-global/safe-transaction-service) (Python).