docs: refresh guides Getting Started cards

Author: BohuTANG

src/components/DocsOverview/index.tsx

@@ -45,6 +45,7 @@ import {
 } from "databend-logos";
 import Link from "@docusaurus/Link";
 import clsx from "clsx";
+import { useHistory } from "@docusaurus/router";
 const colLayout = { xl: 8, xxl: 8, lg: 8, md: 8, sm: 12, xs: 12 };
 const colLayout2 = { xl: 12, xxl: 12, lg: 24, md: 24, sm: 24, xs: 24 };
 const colLayout3 = { xl: 8, xxl: 8, lg: 8, md: 8, sm: 12, xs: 24 };
@@ -55,6 +56,7 @@ const DocsOverview: FC = (): ReactElement => {
       customFields: { homeLink, isChina },
     },
   } = useDocusaurusContext();
+  const history = useHistory();
   return (
     <div className={styles.outWrap}>
 
@@ -129,15 +131,26 @@ const DocsOverview: FC = (): ReactElement => {
       <ContentCardWrap
         className={clsx(styles.commomCard, styles.gettingStart)}
         title={$t("Getting Started")}
+        description={$t(
+          "Choose Cloud (managed) or Enterprise (self-hosted)."
+        )}
       >
         <div style={{ width: "100%" }}>
           <Row gutter={[20, 20]}>
             <Col {...colLayout2}>
               <Card padding={[24, 24]} className={clsx(styles.cardActiveOut, styles.productCard)}>
-                <Link
-                  title={$t("Databend Cloud")}
-                  to={"/guides/cloud/"}
-                  className={styles.productCardLink}
+                <div
+                  className={styles.productCardContainer}
+                  role="link"
+                  tabIndex={0}
+                  aria-label={$t("Databend Cloud")}
+                  onClick={() => history.push("/guides/cloud/")}
+                  onKeyDown={(e) => {
+                    if (e.key === "Enter" || e.key === " ") {
+                      e.preventDefault();
+                      history.push("/guides/cloud/");
+                    }
+                  }}
                 >
                   <div className={styles.productCardHeader}>
                     <LightDatabendCloudSingleSvg width={120} />
@@ -155,40 +168,81 @@ const DocsOverview: FC = (): ReactElement => {
                       <span className={styles.metricLabel}>{$t("Cold Start")}</span>
                     </div>
                     <div className={styles.metric}>
-                      <span className={styles.metricValue}>&gt;50%</span>
-                      <span className={styles.metricLabel}>{$t("Cost Savings")}</span>
+                      <span className={styles.metricValue}>$200</span>
+                      <span className={styles.metricLabel}>{$t("Free Credits")}</span>
                     </div>
                     <div className={styles.metric}>
-                      <span className={styles.metricValue}>99.95%</span>
-                      <span className={styles.metricLabel}>SLA</span>
+                      <span className={styles.metricValue}>SOC 2</span>
+                      <span className={styles.metricLabel}>{$t("Type II")}</span>
                     </div>
                   </div>
-                </Link>
+                  <div className={styles.productCardCtas}>
+                    <Link
+                      className={styles.productCardCtaPrimary}
+                      to="https://app.databend.com"
+                      target="_blank"
+                      rel="noopener noreferrer"
+                      onClick={(e) => e.stopPropagation()}
+                      onKeyDown={(e) => e.stopPropagation()}
+                    >
+                      {$t("Start Free")} →
+                    </Link>
+                  </div>
+                </div>
               </Card>
             </Col>
             <Col {...colLayout2}>
               <Card padding={[24, 24]} className={clsx(styles.cardActiveOut, styles.productCard)}>
-                <Link
-                  title={$t("Self-Hosted")}
-                  to={"/guides/self-hosted/"}
-                  className={styles.productCardLink}
+                <div
+                  className={styles.productCardContainer}
+                  role="link"
+                  tabIndex={0}
+                  aria-label={$t("Databend Enterprise")}
+                  onClick={() => history.push("/guides/self-hosted/editions/enterprise/")}
+                  onKeyDown={(e) => {
+                    if (e.key === "Enter" || e.key === " ") {
+                      e.preventDefault();
+                      history.push("/guides/self-hosted/editions/enterprise/");
+                    }
+                  }}
                 >
                   <div className={styles.productCardHeader}>
                     <LightDatabendSingleSvg width={120} />
                     <div className={styles.productCardTitle}>
-                      <h5>Databend Self-Hosted</h5>
-                      <span className={styles.productCardBadgeAlt}>{$t("Open Source")}</span>
+                      <h5>Databend Enterprise</h5>
+                      <span className={styles.productCardBadgeAlt}>{$t("Enterprise")}</span>
                     </div>
                   </div>
                   <p className={styles.productCardDesc}>
-                    {$t("Deploy on your infrastructure. Full control over data and environment.")}
+                    {$t("Self-hosted on the open-source core, with enterprise support.")}
                   </p>
-                  <div className={styles.productCardTags}>
-                    <span className={styles.tag}>🦀 Rust</span>
-                    <span className={styles.tag}>Apache 2.0</span>
-                    <span className={styles.tag}>☁️ Cloud-Native</span>
+                  <div className={styles.productCardMetrics}>
+                    <div className={styles.metric}>
+                      <span className={styles.metricValue}>{$t("Deploy")}</span>
+                      <span className={styles.metricLabel}>{$t("Your Infra")}</span>
+                    </div>
+                    <div className={styles.metric}>
+                      <span className={styles.metricValue}>{$t("Control")}</span>
+                      <span className={styles.metricLabel}>{$t("Your Data")}</span>
+                    </div>
+                    <div className={styles.metric}>
+                      <span className={styles.metricValue}>{$t("Support")}</span>
+                      <span className={styles.metricLabel}>{$t("Enterprise")}</span>
+                    </div>
+                  </div>
+                  <div className={styles.productCardCtas}>
+                    <Link
+                      className={styles.productCardCtaSecondary}
+                      to="https://www.databend.com/contact-us/"
+                      target="_blank"
+                      rel="noopener noreferrer"
+                      onClick={(e) => e.stopPropagation()}
+                      onKeyDown={(e) => e.stopPropagation()}
+                    >
+                      {$t("Contact Sales")} →
+                    </Link>
                   </div>
-                </Link>
+                </div>
               </Card>
             </Col>
           </Row>

src/components/DocsOverview/styles.module.scss

@@ -127,6 +127,18 @@
   color: inherit !important;
 }
 
+.productCardContainer {
+  display: block;
+  height: 100%;
+  cursor: pointer;
+}
+
+.productCardContainer:focus-visible {
+  outline: 2px solid #0070f3;
+  outline-offset: 4px;
+  border-radius: 8px;
+}
+
 .productCardHeader {
   display: flex;
   align-items: center;
@@ -182,6 +194,35 @@
   border-top: 1px solid var(--color-border);
 }
 
+.productCardCtas {
+  margin-top: 16px;
+  display: flex;
+  justify-content: center;
+}
+
+.productCardCtaPrimary {
+  display: inline-block;
+  padding: 10px 16px;
+  border-radius: 8px;
+  font-size: 14px;
+  font-weight: 600;
+  color: #fff !important;
+  background: linear-gradient(135deg, #0070f3, #00a8ff);
+  text-decoration: none !important;
+}
+
+.productCardCtaSecondary {
+  display: inline-block;
+  padding: 10px 16px;
+  border-radius: 8px;
+  font-size: 14px;
+  font-weight: 600;
+  color: hsl(var(--foreground)) !important;
+  background: var(--color-fill-0);
+  border: 1px solid var(--color-border);
+  text-decoration: none !important;
+}
+
 .metric {
   display: flex;
   flex-direction: column;