Convert banner to react component

docs/components/connectors/introduction.md

@@ -22,6 +22,8 @@ import GraphqlImg from "./img/connector-graphql.png";
 import AsanaImg from "./img/connector-asana.png";
 import AutomationImg from "./img/connector-automation.png";
 
+import Marketplace from './react-components/\_banner-marketplace.md'
+
 <p><img src={OverviewImg} alt="Get started" style={{border:0,padding:0,paddingLeft:20,margin:0,float: 'right', width: '40%'}}/>Camunda connectors are reusable building blocks you can use to easily connect processes to external systems, applications, and data.</p>
 
 - Use a [Slack](/components/connectors/out-of-the-box-connectors/slack.md) or [Microsoft Teams](/components/connectors/out-of-the-box-connectors/microsoft-teams.md) Connector to notify people of pending or completed processes in a human task orchestration onboarding flow.
@@ -54,7 +56,7 @@ New to connectors? Learn how to start using connectors in your processes and abo
 </div>
 
 :::info
-Get started quickly by learning how to [integrate a Camunda connector](/guides/configuring-out-of-the-box-connector.md).
+Get started quickly by learning how you can [integrate the Sendgrid connector](/guides/configuring-out-of-the-box-connector.md).
 :::
 
 ## Custom connectors
@@ -119,17 +121,4 @@ Get help with some of our newest and most popular connectors.
   </a>
 </div>
 
-<div class="banner-column-container">
-<div class="banner-column-left">
-
-<a title="Explore Camunda Marketplace" href="https://marketplace.camunda.com/"><img src={MarketplaceImg} alt="Get started" /></a>
-
-</div>
-<div class="banner-column-right">
-
-Visit the Camunda Marketplace to explore connectors built by the Camunda Engineering team, our global network of partners, and our active developer community.
-
-<a class="button button--outline button--secondary button--md sign-up" style={{marginLeft: '0'}} title="Explore Camunda Marketplace" href="https://marketplace.camunda.com/">Explore Camunda Marketplace</a>
-
-</div>
-</div>
+<Marketplace/>

docs/components/connectors/out-of-the-box-connectors/available-connectors-overview.md

@@ -5,6 +5,7 @@ description: Take a closer look at the Connectors available in Camunda 8.
 ---
 
 import SearchableTable from './connectors-table.js';
+import Marketplace from '../react-components/\_banner-marketplace.md'
 
 Get help with our library of prebuilt Camunda Connectors for SaaS and [Self-Managed](/self-managed/connectors-deployment/install-and-start.md).
 
@@ -13,3 +14,5 @@ Get help with our library of prebuilt Camunda Connectors for SaaS and [Self-Mana
 :::tip
 Don't see the Connector you need? Build your own [custom Connector](/components/connectors/custom-built-connectors/build-connector.md), or explore the [Camunda MarketPlace](https://marketplace.camunda.com/) for more Connectors developed by Camunda, Partners, and the Community.
 :::
+
+<Marketplace/>

docs/components/connectors/out-of-the-box-connectors/connectors-table.css

@@ -193,7 +193,7 @@ a.connector-small-link {
 .banner-column-container {
   display: flex;
   border-radius: 4px;
-  margin-top: 60px;
+  margin-top: 30px;
   margin-bottom: 30px;
   background-color: #000;
 }

docs/components/connectors/react-components/_banner-marketplace.md

@@ -0,0 +1,16 @@
+import MarketplaceImg from "./icon-marketplace.png";
+
+<div class="banner-column-container">
+<div class="banner-column-left">
+
+<a title="Explore Camunda Marketplace" href="https://marketplace.camunda.com/"><img src={MarketplaceImg} alt="Get started" /></a>
+
+</div>
+<div class="banner-column-right">
+
+Visit the Camunda Marketplace to explore connectors built by the Camunda Engineering team, our global network of partners, and our active developer community.
+
+<a class="button button--outline button--secondary button--md sign-up" style={{marginLeft: '0'}} title="Explore Camunda Marketplace" href="https://marketplace.camunda.com/">Explore Camunda Marketplace</a>
+
+</div>
+</div>