Add icons

docs/components/connectors/introduction.md

@@ -29,11 +29,11 @@ import AutomationImg from "./img/connector-automation.png";
 
 Connectors are often configured as a [BPMN process](/components/concepts/processes.md) task, with the required integration parameters already set up for easy configuration. This helps remove the need for you to write custom integration programming code.
 
-**[Find a Camunda connector >](/components/connectors/out-of-the-box-connectors/available-connectors-overview.md)**
+<a class="button button--outline button--secondary button--md button--hero get-started" title="Find a Camunda connector" href="../out-of-the-box-connectors/available-connectors-overview" style={{marginBottom: '40px'}}>Find a Camunda connector ></a>
 
 ## Get started
 
-Learn how to start using connectors in your processes and about the different types of connector.
+New to connectors? Learn how to start using connectors in your processes and about the different types of connector.
 
 <div class="connector-grid">
   <a href="../use-connectors" class="connector-card" title="How to use Connectors">
@@ -55,7 +55,7 @@ Learn how to start using connectors in your processes and about the different ty
 
 ## Custom connectors
 
-Build and deploy your own connectors using connector templates or the connector SDK.
+Build and deploy your own connectors using connector templates and the connector SDK.
 
 <div class="connector-grid">
   <a href="../custom-built-connectors/build-connector" class="connector-card" title="Custom Connectors">
@@ -77,7 +77,7 @@ Build and deploy your own connectors using connector templates or the connector
 
 ## Featured connectors
 
-Learn more about how to use some of our newest and most popular connectors.
+Get help with some of our newest and most popular connectors.
 
 <div class="connector-grid">
   <a href="../out-of-the-box-connectors/openai" class="connector-card" title="OpenAI">
@@ -125,7 +125,7 @@ Learn more about how to use some of our newest and most popular connectors.
 
 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 button--hero get-started" title="Explore Camunda Marketplace" href="https://marketplace.camunda.com/">Explore Camunda Marketplace</a>
+<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>

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

@@ -6,7 +6,7 @@ description: Take a closer look at the Connectors available in Camunda 8.
 
 import SearchableTable from './connectors-table.js';
 
-Explore our library of prebuilt Camunda Connectors for SaaS and [Self-Managed](/self-managed/connectors-deployment/install-and-start.md).
+Get help with our library of prebuilt Camunda Connectors for SaaS and [Self-Managed](/self-managed/connectors-deployment/install-and-start.md).
 
 <SearchableTable />
 

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

@@ -19,6 +19,22 @@ import GoogleDriveImg from "../img/connector-google-drive.png";
 import GoogleMapsImg from "../img/connector-google-maps.png";
 import GoogleSheetsImg from "../img/connector-google-sheets.png";
 import GraphqlImg from "../img/connector-graphql.png";
+import WebhookImg from "../img/connector-webhook.png";
+import HuggingFaceImg from "../img/connector-hugging-face.png";
+import KafkaImg from "../img/connector-kafka.png";
+import Microsoft365Img from "../img/connector-365.png";
+import MicrosoftTeamsImg from "../img/connector-teams.png";
+import OpenaiImg from "../img/connector-openai.png";
+import RestImg from "../img/connector-rest.png";
+import RabbitmqImg from "../img/connector-rabbitmq.png";
+import SalesforceImg from "../img/connector-salesforce.png";
+import SendgridImg from "../img/connector-sendgrid.png";
+import SlackImg from "../img/connector-slack.png";
+import SoapImg from "../img/connector-soap.png";
+import SqlImg from "../img/connector-sql.png";
+import TwilioImg from "../img/connector-twilio.png";
+import UipathImg from "../img/connector-uipath.png";
+import WhatsappImg from "../img/connector-whatsapp.png";
 
 const SearchableTable = () => {
   const [searchTerm, setSearchTerm] = useState("");
@@ -231,158 +247,158 @@ const SearchableTable = () => {
       description:
         "Start a process instance with your custom webhook configuration.",
       type: "Outbound",
-      link: "../http-webhook/",
-      image: AmazonBedrockImg,
+      link: "../../protocol/http-webhook/",
+      image: WebhookImg,
     },
     {
       name: "Hugging Face Connector",
       description: "Interact with Hugging Face models from your BPMN process.",
       type: "Outbound",
       link: "../hugging-face/",
-      image: AmazonBedrockImg,
+      image: HuggingFaceImg,
     },
     {
       name: "Kafka Consumer Connector",
       description: "Consume messages from Kafka from your BPMN process.",
       type: "Inbound",
       link: "../kafka/",
-      image: AmazonBedrockImg,
+      image: KafkaImg,
     },
     {
       name: "Kafka Producer Connector",
       description: "Produce messages to Kafka from your BPMN process.",
       type: "Outbound",
       link: "../kafka/",
-      image: AmazonBedrockImg,
+      image: KafkaImg,
     },
     {
       name: "Microsoft 365 Connector",
       description:
         "Interactions with Microsoft 365 mail from your BPMN process.",
       type: "Outbound",
       link: "../microsoft-o365-mail/",
-      image: AmazonBedrockImg,
+      image: Microsoft365Img,
     },
     {
       name: "Microsoft Teams Connector",
       description: "Interactions with Microsoft Teams from your BPMN process.",
       type: "Outbound",
       link: "../microsoft-teams/",
-      image: AmazonBedrockImg,
+      image: MicrosoftTeamsImg,
     },
     {
       name: "OpenAI Connector",
       description: "Interact with ChatGPT and OpenAI Moderation API.",
       type: "Outbound",
       link: "../openai/",
-      image: AmazonBedrockImg,
+      image: OpenaiImg,
     },
     {
       name: "Polling Connector",
       description:
         "The HTTP Polling Connector polls an endpoint at regular intervals, enabling periodic data fetching as an intermediate step in your BPMN processes.",
       type: "Outbound",
-      link: "../polling/",
-      image: AmazonBedrockImg,
+      link: "../../protocol/polling/",
+      image: RestImg,
     },
     {
       name: "RabbitMQ Consumer Connector",
       description: "Receive messages from RabbitMQ in your BPMN process.",
       type: "Inbound",
       link: "../rabbitmq-outbound/",
-      image: AmazonBedrockImg,
+      image: RabbitmqImg,
     },
     {
       name: "RabbitMQ Producer Connector",
       description: "Send messages to RabbitMQ from your BPMN process.",
       type: "Outbound",
       link: "../rabbitmq-outbound/",
-      image: AmazonBedrockImg,
+      image: RabbitmqImg,
     },
     {
       name: "REST Connector",
       description:
         "Make a request to a REST API and use the response in the next steps of your process.",
       type: "Outbound",
-      link: "../rest/",
-      image: AmazonBedrockImg,
+      link: "../../protocol/rest/",
+      image: RestImg,
     },
     {
       name: "Salesforce Connector",
       description: "Manage your Salesforce instance from your BPMN process.",
       type: "Outbound",
       link: "../salesforce/",
-      image: AmazonBedrockImg,
+      image: SalesforceImg,
     },
     {
       name: "SendGrid Connector",
       description: "Quickly send emails from your BPMN processes.",
       type: "Outbound",
       link: "../sendgrid/",
-      image: AmazonBedrockImg,
+      image: SendgridImg,
     },
     {
       name: "Slack inbound Connector",
       description:
         "Trigger a Slack bot to start a BPMN process with an event or a slash command.",
       type: "Inbound",
       link: "../slack/",
-      image: AmazonBedrockImg,
+      image: SlackImg,
     },
     {
       name: "Slack outbound Connector",
       description:
         "Send messages to channels or users in your Slack workspace from your BPMN process.",
       type: "Outbound",
       link: "../slack/",
-      image: AmazonBedrockImg,
+      image: SlackImg,
     },
     {
       name: "SOAP Connector",
       description:
         "Connect your BPMN process with Simple Object Access Protocol (SOAP) services and interact with SOAP service endpoints.",
       type: "Outbound",
-      link: "../soap/",
-      image: AmazonBedrockImg,
+      link: "../../protocol/soap/",
+      image: SoapImg,
     },
     {
       name: "SQL Connector",
       description:
         "Connect your BPMN process with SQL databases (Microsoft SQL Server, PostgreSQL, MySQL).",
       type: "Outbound",
       link: "../sql/",
-      image: AmazonBedrockImg,
+      image: SqlImg,
     },
     {
       name: "Twilio Connector",
       description:
         "Send and get SMS messages with Twilio service from your BPMN process.",
       type: "Outbound",
       link: "../twilio/",
-      image: AmazonBedrockImg,
+      image: TwilioImg,
     },
     {
       name: "Twilio Webhook Connector",
       description:
         "Start a process instance triggered by a Twilio webhook. Can be used as an intermediate Connector in existing processes.",
       type: "Inbound",
       link: "../twilio/",
-      image: AmazonBedrockImg,
+      image: TwilioImg,
     },
     {
       name: "UiPath Connector",
       description: "Orchestrate your UiPath Bots with Camunda.",
       type: "Outbound",
       link: "../uipath/",
-      image: AmazonBedrockImg,
+      image: UipathImg,
     },
     {
       name: "WhatsApp Connector",
       description:
         "Send messages with WhatsApp Business from your BPMN process.",
       type: "Outbound",
       link: "../whatsapp/",
-      image: AmazonBedrockImg,
+      image: WhatsappImg,
     },
   ];