From 4551f2492db83994feb05ff215741def6f21954e Mon Sep 17 00:00:00 2001
From: carlos <409925519@qq.com>
Date: Fri, 3 Mar 2023 18:02:49 +0800
Subject: [PATCH] docs: Add Blog Contact us module

Add Blog Contact us module
---
 .../components/CustomBlog/BlogPostDetails.js  |  2 +
 .../components/CustomBlog/Connectwithus.js    | 59 +++++++++++++++++++
 .../components/CustomBlog/styles.module.scss  | 49 ++++++++++++++-
 3 files changed, 108 insertions(+), 2 deletions(-)
 create mode 100644 website/src/components/CustomBlog/Connectwithus.js

diff --git a/website/src/components/CustomBlog/BlogPostDetails.js b/website/src/components/CustomBlog/BlogPostDetails.js
index 5b718c46b8492..7ab09de6927a5 100644
--- a/website/src/components/CustomBlog/BlogPostDetails.js
+++ b/website/src/components/CustomBlog/BlogPostDetails.js
@@ -6,6 +6,7 @@ import { ArrowLeft, ArrowRight, Return, Pencil} from "../Icons";
 import Link from "@docusaurus/Link";
 import useBaseUrl from "@docusaurus/useBaseUrl";
 import AvatarGroup from "../BaseComponents/AvatarGroup";
+import Connectwithus from "./Connectwithus";
 
 const BlogPostNav = ({ nextPost, prevPost }) => {
   return (
@@ -103,6 +104,7 @@ const BlogPostDetails = (props) => {
               ) : (
                 <></>
               )}
+              <Connectwithus/>
               <div className={styles.tagsBox}>
               <h5>Tags:</h5>
               {metadata.tags.map((tag,index) => {
diff --git a/website/src/components/CustomBlog/Connectwithus.js b/website/src/components/CustomBlog/Connectwithus.js
new file mode 100644
index 0000000000000..b7a46ce29fd5f
--- /dev/null
+++ b/website/src/components/CustomBlog/Connectwithus.js
@@ -0,0 +1,59 @@
+import React from "react";
+import styles from "./styles.module.scss";
+import clsx from "clsx";
+import { Github, Twitter, Slack } from "../Icons";
+import Link from "@docusaurus/Link";
+
+const Connectwithus = () => {
+  const items = [
+    {
+      name: "GitHub Discussions",
+      icon: <Github />,
+      des: "Feature requests, bug reports, and contributions",
+      link: "https://github.com/datafuselabs/databend/discussions",
+    },
+    {
+      name: "Follow our twitter",
+      icon: <Twitter />,
+      des: "Feature requests, bug reports, and contributions",
+      link: "https://twitter.com/DatabendLabs",
+    },
+    {
+      name: "Slack Channel",
+      icon: <Slack />,
+      des: "Chat with the community",
+      link: "https://link.databend.rs/join-slack",
+    },
+  ];
+
+  return (
+    <div className={clsx(styles.Connectwithus)}>
+      <h2>🎈Connect With Us</h2>
+      <p>
+        We'd love to hear from you. Feel free to run the code and see if
+        Databend works for you. Submit an issue with your problem if you need
+        help.
+      </p>
+      <p>
+        <a href="https://github.com/datafuselabs/">DatafuseLabs Community</a> is
+        open to everyone who loves data warehouses. Please join the community
+        and share your thoughts.
+      </p>
+      <ul className={clsx(styles.Connecttype)}>
+        {items.map((item, index) => {
+          return (
+            <li key={index}>
+              <Link to={item.link}>
+              {item.icon}
+              <h6>{item.name}</h6>
+              <p>{item.des}</p>
+              </Link>
+            </li>
+          );
+        })}
+      </ul>
+    </div>
+  );
+};
+
+export default Connectwithus;
diff --git a/website/src/components/CustomBlog/styles.module.scss b/website/src/components/CustomBlog/styles.module.scss
index 82dcc8127a210..4796c8a1f2dae 100644
--- a/website/src/components/CustomBlog/styles.module.scss
+++ b/website/src/components/CustomBlog/styles.module.scss
@@ -354,6 +354,52 @@
                         }
                     }
 
+                    .Connectwithus{
+                        padding: 24px;
+                        background-image: linear-gradient(194.35deg, rgba(1, 118, 248, 0.12) 19.68%, rgba(255, 255, 255, 0) 78.88%);
+                        background-color: var(--color-bg-1);
+                        border-radius: 12px;
+                        box-shadow: 0 12px 16px rgb(1 14 41 / 3%), 0 4px 6px rgb(1 14 41 / 3%);
+                        margin: 20px 0;
+                        margin-top: 40px;
+                        .Connecttype{
+                            display: flex;
+                            gap: 12px;
+                            flex-wrap: wrap;
+                            padding: 0;
+                            margin: 0;
+                            li{
+                                margin: 0;
+                                list-style: none;
+                                background-color: var(--color-bg-1);
+                                padding: 12px;
+                                flex: 1;
+                                border-radius: 6px;
+                                transition: all 0.2s;
+                                border: 0.5px solid transparent;
+                                a{
+                                    text-decoration: none;
+                                    color: var(--color-text-0);
+                                    p{
+                                        font-size: 14px;
+                                        font-weight: 400;
+                                    }
+                                }
+                                &:hover{
+                                    border-color: var(--color-primary);
+                                    transform: translateY(-4px);
+                                    cursor: pointer;
+                                    box-shadow: 0 12px 16px rgb(1 14 41 / 3%), 0 4px 6px rgb(1 14 41 / 3%);
+                                }
+                                @include media{
+                                    flex: none;
+                                    width: 100%;
+                                    border-color: var(--color-border);
+                                }
+                            }
+                        }
+                    }
+
                     .PostNav{
                         display: flex;
                         gap: 12px;
@@ -395,8 +441,7 @@
                         align-items: center;
                         flex-wrap: wrap;
                         gap: 8px;
-                        padding: 32px 0;
-                        padding-bottom: 24px;
+                        padding: 20px 0;
 
                         h5,a{
                             display: flex;