integrations landing page revamp

docs/integrations/data-ingestion/etl-tools/airbyte-and-clickhouse.md

@@ -18,11 +18,11 @@ import airbyte06 from '@site/static/images/integrations/data-ingestion/etl-tools
 import airbyte07 from '@site/static/images/integrations/data-ingestion/etl-tools/airbyte_07.png';
 import airbyte08 from '@site/static/images/integrations/data-ingestion/etl-tools/airbyte_08.png';
 import airbyte09 from '@site/static/images/integrations/data-ingestion/etl-tools/airbyte_09.png';
-import CommunityMaintainedBadge from '@theme/badges/CommunityMaintained';
+import PartnerBadge from '@theme/badges/PartnerBadge';
 
 # Connect Airbyte to ClickHouse
 
-<CommunityMaintainedBadge/>
+<PartnerBadge/>
 
 :::note
 Please note that the Airbyte source and destination for ClickHouse are currently in Alpha status and not suitable for moving large datasets (> 10 million rows)

docs/integrations/data-ingestion/etl-tools/bladepipe-and-clickhouse.md

@@ -18,11 +18,11 @@ import bp_ck_6 from '@site/static/images/integrations/data-ingestion/etl-tools/b
 import bp_ck_7 from '@site/static/images/integrations/data-ingestion/etl-tools/bp_ck_7.png';
 import bp_ck_8 from '@site/static/images/integrations/data-ingestion/etl-tools/bp_ck_8.png';
 import bp_ck_9 from '@site/static/images/integrations/data-ingestion/etl-tools/bp_ck_9.png';
-import CommunityMaintainedBadge from '@theme/badges/CommunityMaintained';
+import PartnerBadge from '@theme/badges/PartnerBadge';
 
 # Connect BladePipe to ClickHouse
 
-<CommunityMaintainedBadge/>
+<PartnerBadge/>
 
 <a href="https://www.bladepipe.com/" target="_blank">BladePipe</a> is a real-time end-to-end data integration tool with sub-second latency, boosting seamless data flow across platforms. 
 

docs/integrations/data-ingestion/etl-tools/dlt-and-clickhouse.md

@@ -7,11 +7,11 @@ slug: /integrations/data-ingestion/etl-tools/dlt-and-clickhouse
 doc_type: 'guide'
 ---
 
-import CommunityMaintainedBadge from '@theme/badges/CommunityMaintained';
+import PartnerBadge from '@theme/badges/PartnerBadge';
 
 # Connect dlt to ClickHouse
 
-<CommunityMaintainedBadge/>
+<PartnerBadge/>
 
 <a href="https://dlthub.com/docs/intro" target="_blank">dlt</a>  is an open-source library that you can add to your Python scripts to load data from various and often messy data sources into well-structured, live datasets.
 

docs/integrations/data-ingestion/etl-tools/vector-to-clickhouse.md

@@ -11,11 +11,11 @@ doc_type: 'guide'
 import Image from '@theme/IdealImage';
 import vector01 from '@site/static/images/integrations/data-ingestion/etl-tools/vector_01.png';
 import vector02 from '@site/static/images/integrations/data-ingestion/etl-tools/vector_02.png';
-import CommunityMaintainedBadge from '@theme/badges/CommunityMaintained';
+import PartnerBadge from '@theme/badges/PartnerBadge';
 
 # Integrating Vector with ClickHouse
 
-<CommunityMaintainedBadge/>
+<PartnerBadge/>
 
 Being able to analyze your logs in real time is critical for production applications. Have you ever wondered if ClickHouse is good at storing and analyzing log data? Just checkout <a href="https://eng.uber.com/logging/" target="_blank">Uber's experience</a> with converting their logging infrastructure from ELK to ClickHouse.
 

docs/integrations/data-visualization/community_integrations/rocketbi-and-clickhouse.md

@@ -30,7 +30,7 @@ import rocketbi_17 from '@site/static/images/integrations/data-visualization/roc
 import rocketbi_18 from '@site/static/images/integrations/data-visualization/rocketbi_18.png';
 import CommunityMaintainedBadge from '@theme/badges/CommunityMaintained';
 
-# Goal: build your first dashboard
+# Goal: build your first dashboard with Rocket.BI
 
 <CommunityMaintainedBadge/>
 

docs/integrations/language-clients/python/index.md

@@ -1,9 +1,9 @@
 ---
-title: 'Python'
 keywords: ['clickhouse', 'python', 'client', 'connect', 'integrate']
-description: 'Options for connecting to ClickHouse from Python'
 slug: /integrations/python
-doc_type: 'reference'
+description: 'The ClickHouse Connect project suite for connecting Python to ClickHouse'
+title: 'Python Integration with ClickHouse Connect'
+doc_type: 'guide'
 ---
 
 import Tabs from '@theme/Tabs';

docs/integrations/tools/data-integration/retool/index.md

@@ -14,11 +14,11 @@ import retool_02 from '@site/static/images/integrations/tools/data-integration/r
 import retool_03 from '@site/static/images/integrations/tools/data-integration/retool/retool_03.png';
 import retool_04 from '@site/static/images/integrations/tools/data-integration/retool/retool_04.png';
 import retool_05 from '@site/static/images/integrations/tools/data-integration/retool/retool_05.png';
-import CommunityMaintainedBadge from '@theme/badges/CommunityMaintained';
+import PartnerBadge from '@theme/badges/PartnerBadge';
 
 # Connecting Retool to ClickHouse
 
-<CommunityMaintainedBadge/>
+<PartnerBadge/>
 
 ## 1. Gather your connection details {#1-gather-your-connection-details}
 <ConnectionDetails />

docs/integrations/tools/data-integration/splunk/index.md

@@ -20,11 +20,11 @@ import splunk_009 from '@site/static/images/integrations/tools/data-integration/
 import splunk_010 from '@site/static/images/integrations/tools/data-integration/splunk/splunk_010.png';
 import splunk_011 from '@site/static/images/integrations/tools/data-integration/splunk/splunk_011.png';
 import splunk_012 from '@site/static/images/integrations/tools/data-integration/splunk/splunk_012.png';
-import ClickHouseSupportedBadge from '@theme/badges/ClickHouseSupported';
+import PartnerBadge from '@theme/badges/PartnerBadge';
 
 # Storing ClickHouse Cloud Audit logs into Splunk
 
-<ClickHouseSupportedBadge/>
+<PartnerBadge/>
 
 [Splunk](https://www.splunk.com/) is a data analytics and monitoring platform.
 

src/components/CUICard/CUICard.tsx

@@ -0,0 +1,56 @@
+import React, { HTMLAttributes } from 'react'
+import styles from './styles.module.scss'
+
+type CardComponent = React.FunctionComponent<HTMLAttributes<HTMLDivElement>> & {
+  Header: React.FunctionComponent<HTMLAttributes<HTMLDivElement>>
+  Body: React.FunctionComponent<HTMLAttributes<HTMLDivElement>>
+  Footer: React.FunctionComponent<HTMLAttributes<HTMLDivElement>>
+}
+
+const CUICard: CardComponent = ({
+  children,
+  className,
+  ...props
+}): JSX.Element => (
+  <div
+    className={styles.cuiCard}
+    {...props}>
+    {children}
+  </div>
+)
+
+const Header = ({
+  children,
+  className,
+  ...props
+}: HTMLAttributes<HTMLDivElement>) => (
+  <div className={styles.cardHeader} {...props}>
+    {children}
+  </div>
+)
+
+CUICard.Header = Header
+
+const Body = ({
+  children,
+  className,
+  ...props
+}: HTMLAttributes<HTMLDivElement>) => (
+  <div className={styles.cardBody} {...props}>
+    {children}
+  </div>
+)
+CUICard.Body = Body
+
+const Footer = ({
+  children,
+  className,
+  ...props
+}: HTMLAttributes<HTMLDivElement>) => (
+  <div className={styles.cardFooter} {...props}>
+    {children}
+  </div>
+)
+CUICard.Footer = Footer
+
+export default CUICard

src/components/CUICard/index.tsx

@@ -0,0 +1 @@
+export { default } from './CUICard';

src/components/CUICard/styles.module.scss

@@ -0,0 +1,60 @@
+// CUICard styles - to be added
+
+.cuiCard {
+  border-radius: .5rem;
+  background: #323230;
+  display: flex;
+  flex-direction: column;
+  aspect-ratio: 1;
+  width: 100%;
+  border: 1px solid rgba(65, 65, 65, .8);
+  padding: 1rem;
+  box-sizing: border-box;
+  justify-content: center;
+  align-items: center;
+  text-align: center;
+}
+
+[data-theme='light'] .cuiCard {
+  background: #F6F7FA;
+  border-color: var(--ifm-color-emphasis-300);
+}
+
+.cardBody {
+  display: flex;
+  flex-direction: column;
+  width: 100%;
+  height: 100%;
+  box-sizing: border-box;
+  position: relative;
+  justify-content: center;
+  align-items: center;
+  gap: 0.75rem;
+}
+
+.cardHeader {
+  flex-shrink: 0;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+
+.cardHeader img {
+  width: 5rem;
+  height: 5rem;
+  object-fit: contain;
+  max-width: 75%;
+  max-height: 75%;
+}
+
+.cardFooter {
+  line-height: 1.2;
+  font-size: clamp(0.65rem, 2vw, 0.85rem);
+  font-weight: 600;
+  text-align: center;
+  word-wrap: break-word;
+  overflow-wrap: break-word;
+  hyphens: auto;
+  flex-shrink: 1;
+  min-height: 0;
+}