Home page edits

camunda · Dec 19, 2024 · 801e64c · 801e64c
1 parent 8744d11
commit 801e64c
Show file tree

Hide file tree

Showing 8 changed files with 147 additions and 81 deletions.
diff --git a/docs/components/connectors/connectors-start.md b/docs/components/connectors/connectors-start.md
diff --git a/docs/components/connectors/custom-built-connectors/connector-template-generator.md b/docs/components/connectors/custom-built-connectors/connector-template-generator.md
@@ -1,7 +1,7 @@
 ---
 id: connector-template-generator
-title: Generate a Connector template
-description: Learn how to generate Connector templates for easier custom Connector creation.
+title: Generate a connector template
+description: Learn how to generate connector templates for easier custom Connector creation.
 ---
 
 You can configure and automatically generate a custom [Connector template](/components/connectors/custom-built-connectors/connector-templates.md) in Web Modeler.

diff --git a/docs/components/connectors/img/Untitled-1.png b/docs/components/connectors/img/Untitled-1.png
diff --git a/docs/components/connectors/img/connector-openai.png b/docs/components/connectors/img/connector-openai.png
diff --git a/docs/components/connectors/img/icon-marketplace.png b/docs/components/connectors/img/icon-marketplace.png
diff --git a/docs/components/connectors/introduction.md b/docs/components/connectors/introduction.md
@@ -9,50 +9,86 @@ import "./out-of-the-box-connectors/connectors-table.css";
 import IconPlayImg from './img/icon-play.png';
 import IconConnectorImg from './img/icon-connectors.png';
 import IconConnectorTypesImg from './img/icon-connector-types.png';
-import AmazonEventbridgeImg from "./img/connector-amazon-eventbridge.png";
 import IconConnectorSdkImg from './img/icon-connector-sdk.png';
 import IconConnectorTemplateImg from './img/icon-connector-template.png';
 import IconConnectorCustomImg from './img/icon-connector-custom.png';
 import OverviewImg from './img/connector-overview.png';
+import AmazonEventbridgeImg from "./img/connector-amazon-eventbridge.png";
+import OpenaiImg from "./img/connector-openai.png";
+import MarketplaceImg from "./img/icon-marketplace.png";
 
-<p><img src={OverviewImg} alt="Get started" style={{border:0,padding:0,paddingLeft:20,margin:0,float: 'right', width: '40%'}}/>Camunda 8 Connectors are reusable building blocks you can use to easily connect processes to external systems, applications, and data.</p>
+<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>
 
 For example:
 
 - 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.
-- In microservices orchestration, use a [Kafka](/components/connectors/out-of-the-box-connectors/kafka.md) Connector to add real-time messaging to your automated processes.
+- In microservices orchestration, use a [Kafka](/components/connectors/out-of-the-box-connectors/kafka.md) connector to add real-time messaging to your automated processes.
 
 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.
 
-## Get started with Connectors
+## Get started with connectors
 
-Learn how to start using Connectors in your processes and about the different types of Connector available.
+Learn how to start using connectors in your processes and about the different types of connector.
 
 <div class="connector-grid">
-  <a href="../connectors-start" class="connector-card" title="Get started with Connectors">
-    <img src={IconPlayImg} alt="Get started"/>
-    <h3>Get started with Connectors</h3>
-    <p>Learn how to start using Connectors in your processes.</p>
+  <a href="../use-connectors" class="connector-card" title="How to use Connectors">
+      <img src={IconPlayImg} alt="Get started"/>
+    <h3>How to use Connectors</h3>
+    <p>Create a connector task and start using connector secrets.</p>
   </a>
     <a href="../connector-types" class="connector-card" title="Connector types">
     <img src={IconConnectorTypesImg} alt="Connector types"/>
     <h3>Connector types</h3>
-    <p>Different types of Connector include <a href="../use-connectors/inbound" title="Inbound Connectors">Inbound</a>, <a href="../use-connectors/outbound" title="Outbound Connectors">Outbound</a>, and Protocol.</p>
+    <p>Learn about <a href="../use-connectors/inbound" title="Inbound Connectors">Inbound</a> and <a href="../use-connectors/outbound" title="Outbound Connectors">Outbound</a> connector types.</p>
   </a>
-  <a href="../use-connectors" class="connector-card" title="How to use Connectors">
+    <a href="../out-of-the-box-connectors/available-connectors-overview" class="connector-card" title="Get started with Connectors">
     <img src={IconConnectorImg} alt="How to use Connectors"/>
-    <h3>How to use Connectors</h3>
-    <p>How to create a Connector Task and use secrets.</p>
+    <h3>Camunda connectors</h3>
+    <p>Explore our library of prebuilt Camunda connectors.</p>
   </a>
 </div>
 
-## Camunda Connectors
+## Custom connectors
 
-Ready to start using Connectors in your processes? Explore our library of prebuilt Camunda 8 Connectors.
+Build and deploy your own connectors using connector templates or the connector SDK.
 
-**[Explore Connectors A-Z >](/docs/components/connectors/out-of-the-box-connectors/available-connectors-overview.md)**
+<div class="connector-grid">
+  <a href="../custom-built-connectors/build-connector" class="connector-card" title="Custom Connectors">
+    <img src={IconConnectorCustomImg} alt="Custom Connectors icon" class="connector-card-image"/>
+    <h3>Custom connectors</h3>
+    <p>Learn how to build and deploy your own custom connectors.</p>
+  </a>
+  <a href="../custom-built-connectors/connector-templates" class="connector-card" title="Connector templates">
+    <img src={IconConnectorTemplateImg} alt="Connector templates icon" class="connector-card-image"/>
+    <h3>Connector templates</h3>
+    <p>Create, generate, and manage connector templates.</p>
+  </a>
+    <a href="../custom-built-connectors/connector-sdk" class="connector-card" title="Connector SDK">
+    <img src={IconConnectorSdkImg} alt="Connector SDK icon" class="connector-card-image"/>
+    <h3>Connector SDK</h3>
+    <p>Use the SDK to create your own custom Java connectors.</p>
+  </a>
+</div>
 
-<!-- #### Popular Connectors
+## Popular Connectors
+
+<div class="connector-grid">
+  <a href="../custom-built-connectors/build-connector" class="connector-card" title="OpenAI connector">
+    <img src={OpenaiImg} alt="OpenAI icon" class="connector-card-image"/>
+    <h3>OpenAI</h3>
+    <p>Add ChatGPT and OpenAI's Moderation API to your business processes.</p>
+  </a>
+  <a href="../custom-built-connectors/connector-templates" class="connector-card" title="Connector templates">
+    <img src={IconConnectorTemplateImg} alt="Connector templates icon" class="connector-card-image"/>
+    <h3>Connector templates</h3>
+    <p>Create and work with connector templates.</p>
+  </a>
+    <a href="../custom-built-connectors/connector-sdk" class="connector-card" title="Connector SDK">
+    <img src={IconConnectorSdkImg} alt="Connector SDK icon" class="connector-card-image"/>
+    <h3>Connector SDK</h3>
+    <p>Use the SDK to create your own custom Java connectors.</p>
+  </a>
+</div>
 
 <div class="connector-small-grid">
   <a href="path/to/connector1" class="connector-small-link">
@@ -72,29 +108,32 @@ Ready to start using Connectors in your processes? Explore our library of prebui
   </a>
   <a href="path/to/connector4" class="connector-small-link">
     <div class="connector-small">
-      <img src={AmazonEventbridgeImg} alt="Get started"/>Amazon Eventbridge
+      <img src={AmazonEventbridgeImg} alt="Get started"/>Amazon 
     </div>
   </a>
-</div> -->
+    <a href="path/to/connector4" class="connector-small-link">
+    <div class="connector-small">
+      <img src={AmazonEventbridgeImg} alt="Get started"/>Amazon 
+    </div>
+  </a>
+    <a href="path/to/connector4" class="connector-small-link">
+    <div class="connector-small">
+      <img src={AmazonEventbridgeImg} alt="Get started"/>Amazon 
+    </div>
+  </a>
+</div>
 
-## Custom Connectors
+<div class="banner-column-container" style={{background: '#000'}} >
+<div class="banner-column-left">
 
-Build and deploy your own Connectors using Connector templates or the Connector SDK.
+<a title="Explore Camunda Marketplace" href="https://marketplace.camunda.com/"><img src={MarketplaceImg} alt="Get started" /></a>
 
-<div class="connector-grid">
-  <a href="../custom-built-connectors/build-connector" class="connector-card" title="Custom Connectors">
-    <img src={IconConnectorCustomImg} alt="Custom Connectors icon" class="connector-card-image"/>
-    <h3>Custom Connectors</h3>
-    <p>Learn how to build and deploy your own custom Connectors.</p>
-  </a>
-  <a href="../custom-built-connectors/connector-templates" class="connector-card" title="Connector templates">
-    <img src={IconConnectorTemplateImg} alt="Connector templates icon" class="connector-card-image"/>
-    <h3>Connector templates</h3>
-    <p>Create and work with connector templates.</p>
-  </a>
-    <a href="../custom-built-connectors/connector-sdk" class="connector-card" title="Connector SDK">
-    <img src={IconConnectorSdkImg} alt="Connector SDK icon" class="connector-card-image"/>
-    <h3>Connector SDK</h3>
-    <p> Use the Connector SDK to develop custom Connectors in Java.</p>
-  </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 button--hero get-started" title="Explore Camunda Marketplace" href="https://marketplace.camunda.com/">Explore Camunda Marketplace</a>
+
+</div>
 </div>
diff --git a/docs/components/connectors/out-of-the-box-connectors/connectors-table.css b/docs/components/connectors/out-of-the-box-connectors/connectors-table.css
@@ -134,11 +134,11 @@ a.connector-card {
 }
 
 .connector-small-grid {
-  display: flex;
-  flex-wrap: wrap;
-  gap: 15px;
+  display: grid;
+  grid-template-columns: repeat(3, 1fr);
+  gap: 20px;
+  margin-top: 25px;
   margin-bottom: 30px;
-  margin-top: 20px;
 }
 
 .connector-small {
@@ -147,7 +147,7 @@ a.connector-card {
   padding: 10px;
   border: 1px solid #d9d9d9;
   border-radius: 4px;
-  width: fit-content;
+
   margin-bottom: 4px;
 }
 .connector-small img {
@@ -168,14 +168,60 @@ a.connector-small-link {
   color: inherit;
 }
 
+@media (max-width: 1200px) {
+  .connector-small-grid {
+    grid-template-columns: repeat(3, 1fr);
+  }
+}
+
 @media (max-width: 1024px) {
   .connector-grid {
     grid-template-columns: repeat(2, 1fr);
   }
+  .connector-small-grid {
+    grid-template-columns: repeat(3, 1fr);
+  }
 }
 
 @media (max-width: 768px) {
   .connector-grid {
     grid-template-columns: 1fr;
   }
+  .connector-small-grid {
+    grid-template-columns: 1fr;
+  }
+}
+
+/* double column div layout  */
+.banner-column-container {
+  display: flex;
+  border-radius: 4px;
+  margin-top: 60px;
+  margin-bottom: 30px;
+}
+.banner-column-left {
+  flex: 1;
+  padding: 40px 10px 40px 30px;
+}
+.banner-column-right {
+  flex: 3;
+  padding: 40px 30px 40px 0px;
+  color: white;
+}
+.banner-column-left img {
+  border: none;
+  padding: 0;
+  margin: 0;
+  width: 160px;
+}
+@media (max-width: 768px) {
+  .banner-column-container {
+    flex-direction: column;
+  }
+  .banner-column-right {
+    padding: 0px 30px 40px 30px;
+  }
+  .banner-column-left {
+    padding: 40px 30px 20px 30px;
+  }
 }
diff --git a/sidebars.js b/sidebars.js
@@ -310,31 +310,20 @@ module.exports = {
       items: [
         {
           type: "category",
-          label: "Get started with Connectors",
+          label: "How to use connectors",
           link: {
             type: "doc",
-            id: "components/connectors/connectors-start",
+            id: "components/connectors/use-connectors/index",
           },
           items: [
             "components/connectors/connector-types",
-
-            {
-              type: "category",
-              label: "How to use Connectors",
-              link: {
-                type: "doc",
-                id: "components/connectors/use-connectors/index",
-              },
-              items: [
-                "components/connectors/use-connectors/inbound",
-                "components/connectors/use-connectors/outbound",
-              ],
-            },
+            "components/connectors/use-connectors/inbound",
+            "components/connectors/use-connectors/outbound",
           ],
         },
         {
           type: "category",
-          label: "Camunda Connectors",
+          label: "Camunda connectors",
           link: {
             type: "doc",
             id: "components/connectors/out-of-the-box-connectors/available-connectors-overview",
@@ -397,15 +386,24 @@ module.exports = {
         },
         {
           type: "category",
-          label: "Custom Connectors",
+          label: "Custom connectors",
           link: {
             type: "doc",
             id: "components/connectors/custom-built-connectors/build-connector",
           },
           items: [
-            "components/connectors/custom-built-connectors/connector-templates",
-            "components/connectors/manage-connector-templates",
-            "components/connectors/custom-built-connectors/connector-template-generator",
+            {
+              type: "category",
+              label: "Connector templates",
+              link: {
+                type: "doc",
+                id: "components/connectors/custom-built-connectors/connector-templates",
+              },
+              items: [
+                "components/connectors/custom-built-connectors/connector-template-generator",
+                "components/connectors/manage-connector-templates",
+              ],
+            },
             "components/connectors/custom-built-connectors/connector-sdk",
           ],
         },