feat: adjust <a> link title and contact infos

src/components/BaseComponents/Card/index.tsx

@@ -10,6 +10,7 @@ interface IProps extends ICommonProps {
   isDownload?: boolean;
   padding?: number[];
   onClick?: () => void;
+  title?: string;
 }
 const Card: FC<IProps> = ({
   children,
@@ -19,6 +20,7 @@ const Card: FC<IProps> = ({
   isDownload = false,
   style,
   onClick,
+  title,
 }): ReactElement => {
   const p = padding || [28, 24];
   const props = {
@@ -28,7 +30,13 @@ const Card: FC<IProps> = ({
   return (
     <>
       {href ? (
-        <Link onClick={onClick} download={isDownload} to={href} {...props}>
+        <Link
+          title={title}
+          onClick={onClick}
+          download={isDownload}
+          to={href}
+          {...props}
+        >
           {children}
         </Link>
       ) : (

src/components/DocsOverview/index.tsx

@@ -67,7 +67,11 @@ const DocsOverview: FC = (): ReactElement => {
         <div style={{ height: "100%", width: "100%" }}>
           <Row gutter={[12, 12]} className={styles.topCard}>
             <Col {...colLayout3}>
-              <Card href="/guides/products/dc/" padding={[16, 16]}>
+              <Card
+                title={$t("Databend Cloud")}
+                href="/guides/products/dc/"
+                padding={[16, 16]}
+              >
                 <h3>
                   <span>{$t("Databend Cloud")}</span>
                 </h3>
@@ -77,17 +81,25 @@ const DocsOverview: FC = (): ReactElement => {
               </Card>
             </Col>
             <Col {...colLayout3}>
-              <Card href="/guides/products/dee/" padding={[16, 16]}>
+              <Card
+                title={$t("Databend Enterprise")}
+                href="/guides/products/dee/"
+                padding={[16, 16]}
+              >
                 <h3>
-                  <span> {$t("Databend Enterprise")}</span>
+                  <span>{$t("Databend Enterprise")}</span>
                 </h3>
                 <div>
                   {$t("Self-hosted with enterprise features and support.")}
                 </div>
               </Card>
             </Col>
             <Col {...colLayout3}>
-              <Card href="/guides/products/dce/" padding={[16, 16]}>
+              <Card
+                title={$t("Databend Community")}
+                href="/guides/products/dce/"
+                padding={[16, 16]}
+              >
                 <h3>
                   <span>{$t("Databend Community")}</span>
                 </h3>
@@ -189,6 +201,7 @@ const DocsOverview: FC = (): ReactElement => {
             <Col {...colLayout2}>
               <Card padding={[20, 0]} className={styles.cardActiveOut}>
                 <Link
+                  title={$t("Start with Databend Cloud")}
                   to={"/guides/cloud/new-account/"}
                   className={"global-overview-card"}
                 >
@@ -206,17 +219,26 @@ const DocsOverview: FC = (): ReactElement => {
                   <div>{$t("What you need to know:")}</div>
                   <ul>
                     <li>
-                      <Link to={"/guides/products/dc/editions/"}>
+                      <Link
+                        title={$t("Choose Your Edition")}
+                        to={"/guides/products/dc/editions/"}
+                      >
                         {$t("Choose Your Edition")}
                       </Link>
                     </li>
                     <li>
-                      <Link to={"/guides/products/dc/pricing/"}>
+                      <Link
+                        title={$t("Pricing & Plans")}
+                        to={"/guides/products/dc/pricing/"}
+                      >
                         {$t("Pricing & Plans")}
                       </Link>
                     </li>
                     <li>
-                      <Link to={"/guides/cloud/using-databend-cloud/"}>
+                      <Link
+                        title={$t("Using Databend Cloud")}
+                        to={"/guides/cloud/using-databend-cloud/"}
+                      >
                         {$t("Using Databend Cloud")}
                       </Link>
                     </li>
@@ -226,7 +248,11 @@ const DocsOverview: FC = (): ReactElement => {
             </Col>
             <Col {...colLayout2}>
               <Card padding={[20, 0]} className={styles.cardActiveOut}>
-                <Link to={"/guides/deploy/"} className={"global-overview-card"}>
+                <Link
+                  title={$t("Deploy Your Own Instance")}
+                  to={"/guides/deploy/"}
+                  className={"global-overview-card"}
+                >
                   <LightDatabendSingleSvg width={150} />
                   <div>
                     <h5>{$t("Deploy Your Own Instance")}</h5>
@@ -241,17 +267,26 @@ const DocsOverview: FC = (): ReactElement => {
                   <div>{$t("What you need to know:")}</div>
                   <ul>
                     <li>
-                      <Link to={"/guides/deploy/QuickStart/"}>
+                      <Link
+                        title={$t("5-Minute Quick Start")}
+                        to={"/guides/deploy/QuickStart/"}
+                      >
                         {$t("5-Minute Quick Start")}
                       </Link>
                     </li>
                     <li>
-                      <Link to={"/guides/deploy/deploy/download/"}>
+                      <Link
+                        title={$t("Download & Install")}
+                        to={"/guides/deploy/deploy/download/"}
+                      >
                         {$t("Download & Install")}
                       </Link>
                     </li>
                     <li>
-                      <Link to={"/guides/products/dee/license/"}>
+                      <Link
+                        title={$t("Enterprise Features & Licensing")}
+                        to={"/guides/products/dee/license/"}
+                      >
                         {$t("Enterprise Features & Licensing")}
                       </Link>
                     </li>

src/components/DocsOverview/small-card.tsx

@@ -12,7 +12,7 @@ interface IProps {
 const SmallCard: FC<IProps> = ({ icon, text, to }): ReactElement => {
   return (
     <div>
-      <Link to={to} className={styles.smallCard}>
+      <Link title={text} to={to} className={styles.smallCard}>
         <ButtonWithIcon>{icon}</ButtonWithIcon>
         <span>{text}</span>
       </Link>

src/components/DocsOverview/title.tsx

@@ -39,6 +39,7 @@ const Title: FC<IProps> = ({
 
       {link?.text && (
         <Link
+          title={link?.text}
           style={{ marginTop: "12px", display: "inline-block" }}
           to={link?.to}
         >

src/components/JoinCommunity/index.tsx

@@ -16,6 +16,7 @@ import Bili from "@site/static/icons/bili.svg";
 import GongzhonghaoImg from "@site/static/img/databend-gongzhonghao.jpeg";
 import SalesImg from "@site/static/img/sales.jpeg";
 import { Tooltip } from "antd";
+import Contact from "@site/static/icons/contact.svg";
 interface TProps {
   titleAlign?:
     | "start"
@@ -118,7 +119,7 @@ const JoinCommunity: FC<TProps> = ({
       >
         {community.map((item, index) => {
           return (
-            <Link to={item.link} key={index}>
+            <Link title={item.title} to={item.link} key={index}>
               <div className={clsx("community-item", styles.communityItem)}>
                 <div className={clsx("icon", styles.Icon)}>{item.icon}</div>
                 <h6>{item.title}</h6>
@@ -133,7 +134,7 @@ const JoinCommunity: FC<TProps> = ({
             </Link>
           );
         })}
-        {isChina && (
+        {isChina ? (
           <div>
             <h6 style={{ marginBottom: "8px", textAlign: titleAlign }}>微信</h6>
             <div className={clsx("community-group", styles.CommunityGroup)}>
@@ -167,6 +168,36 @@ const JoinCommunity: FC<TProps> = ({
               185 1688 8139
             </div>
           </div>
+        ) : (
+          <div>
+            <h6 style={{ textAlign: titleAlign, marginBottom: "24px" }}>
+              Or simply contact us directly
+            </h6>
+            <div className={clsx("community-group", styles.CommunityGroup)}>
+              <Link
+                title="Contact Us"
+                to="https://www.databend.com/contact-us/"
+                target="_blank"
+              >
+                <div className={clsx("community-item", styles.communityItem)}>
+                  <div className={clsx("icon", styles.Icon)}>
+                    <Contact></Contact>
+                  </div>
+                  <h6>Contact Us</h6>
+                </div>
+              </Link>
+              <Link
+                title="Explore Databend Cloud"
+                to="https://www.databend.com/apply/"
+                target="_blank"
+              >
+                <div className={clsx("community-item", styles.communityItem)}>
+                  <div className={clsx("icon", styles.Icon)}>🚀</div>
+                  <h6>Explore Databend Cloud</h6>
+                </div>
+              </Link>
+            </div>
+          </div>
         )}
       </div>
     </div>

src/components/JoinCommunity/styles.module.scss

@@ -1,57 +1,57 @@
-.Community{
+.Community {
   display: flex;
   gap: 24px;
   flex-direction: column;
   padding-top: 32px;
-  h6{
+  h6 {
     text-align: center;
     margin: 0;
     font-weight: 400;
     color: var(--color-text-1);
   }
-  .CommunityGroup{
-  display: flex;
-  gap: 24px;
-  flex-direction: row;
-  flex-wrap: wrap;
-  .communityItem{
-    padding: 12px;
+  .CommunityGroup {
     display: flex;
-    gap: 8px;
-    align-items: center;
-    background-color: var(--color-fill-0);
-    border-radius: 6px;
-    border: 1px solid var(--color-border);
-    min-width: 340px;
-    width: 100%;
-    h6{
-      margin: 0;
-      color:var(--color-text-0);
-      font-weight: 700;
-    }
-    .Icon{
-      padding: 6px;
+    gap: 24px;
+    flex-direction: row;
+    flex-wrap: wrap;
+    .communityItem {
+      padding: 12px;
       display: flex;
-      color:var(--color-text-0)
-    }
-    &:hover{
-      background-color: var(--color-primary-light-default);
-      border-color: var(--color-primary);
-      .Icon{
-        color: var(--color-primary)!important;
+      gap: 8px;
+      align-items: center;
+      background-color: var(--color-fill-0);
+      border-radius: 6px;
+      border: 1px solid var(--color-border);
+      min-width: 340px;
+      width: 100%;
+      h6 {
+        margin: 0;
+        color: var(--color-text-0);
+        font-weight: 700;
       }
-      h6{
-        text-decoration: none!important;
-        color: var(--color-primary);
+      .Icon {
+        padding: 6px;
+        display: flex;
+        color: var(--color-text-0);
+      }
+      &:hover {
+        background-color: var(--color-primary-light-default);
+        border-color: var(--color-primary);
+        .Icon {
+          color: var(--color-primary) !important;
+        }
+        h6 {
+          text-decoration: none !important;
+          color: var(--color-primary);
+        }
+      }
+      .tag {
+        font-size: 14px;
+        color: var(--color-text-1);
+        background-color: var(--color-fill-1);
+        padding: 0 4px;
+        border-radius: 3px;
       }
     }
-    .tag{
-      font-size: 14px;
-      color: var(--color-text-1);
-      background-color: var(--color-fill-1);
-      padding: 0 4px;
-      border-radius: 3px;
-    }
-  }
   }
-}
+}

src/theme/Footer/index.tsx

@@ -163,11 +163,7 @@ function Footer() {
         })}
       </div>
       <div className={styles.footerCopyright}>
-        <p>
-          Copyright © {year} The Databend Community. Apache, Apache OpenDAL and
-          OpenDAL are either registered trademarks or trademarks of the Apache
-          Software Foundation.
-        </p>
+        <p>Copyright © {year} The Databend Community. All rights reserved.</p>
       </div>
     </footer>
   );

src/theme/MDXComponents/A.js

@@ -7,26 +7,34 @@ function hasProtocolPrefix(str) {
   return str.startsWith("http://") || str.startsWith("https://");
 }
 export default function MDXA(props) {
-  if (
-    props?.href?.includes("https://github.com/databendlabs/databend/pull/") ||
-    props?.href?.includes("https://github.com/databendlabs/databend/pull/")
-  ) {
-    return <Link {...props} />;
+  let title = props?.children;
+  if (typeof title !== "string") {
+    title = "";
+  }
+  if (props?.href?.includes("https://github.com/databendlabs/databend/pull/")) {
+    return <Link title={title} {...props} />;
   }
   if (hasProtocolPrefix(props?.href)) {
     return (
       <Tooltip
         destroyTooltipOnHide
-        overlayClassName={styles.tooltip}
+        classNames={{
+          root: styles.tooltip,
+        }}
         title="Open in the new tab"
       >
         <span className={styles.linkWrap}>
-          <a {...props} target="_blank" rel="noopener noreferrer" />
+          <a
+            {...props}
+            target="_blank"
+            title={title}
+            rel="noopener noreferrer"
+          />
           <LinkSvg />
         </span>
       </Tooltip>
     );
   } else {
-    return <Link {...props} />;
+    return <Link title={title} {...props} />;
   }
 }