update

mlflow · Dec 18, 2023 · dece40d · dece40d
1 parent 70de5cd
commit dece40d
Show file tree

Hide file tree

Showing 4 changed files with 260 additions and 129 deletions.
diff --git a/website/src/components/community-section/CommunityCard.tsx b/website/src/components/community-section/CommunityCard.tsx
@@ -4,7 +4,7 @@ import "./CommunityCard.css";
 type CommunityCardProps = {
   className: string;
   title: string;
-  content: string;
+  content: React.ReactNode;
   dotPositions: Set<"top" | "bottom" | "left" | "right">;
 };
 const CommunityCard = ({
@@ -49,7 +49,7 @@ const CommunityCard = ({
     <div className={`community-card ${className}`}>
       {dots}
       <h3>{title}</h3>
-      <p>{content}</p>
+      {content}
     </div>
   );
 };

diff --git a/website/src/components/community-section/MLflowLogoAndCards.tsx b/website/src/components/community-section/MLflowLogoAndCards.tsx
@@ -4,6 +4,28 @@ import "./MLflowLogoAndCards.css";
 
 const MOBILE_LAYOUT_BREAKPOINT = 996;
 
+const Arrow = () => {
+  return (
+    <svg
+      width="16"
+      height="16"
+      viewBox="0 0 16 16"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <g clip-path="url(#clip0_1072_1492)">
+        <rect width="16" height="16" rx="8" fill="#43EDBC" />
+        <path d="M8 4L12 8M12 8L8 12M12 8H3.5" stroke="#0C1519" />
+      </g>
+      <defs>
+        <clipPath id="clip0_1072_1492">
+          <rect width="16" height="16" rx="8" fill="white" />
+        </clipPath>
+      </defs>
+    </svg>
+  );
+};
+
 const MLflowLogo = ({ displaySideDots }: { displaySideDots: boolean }) => {
   return (
     <svg
@@ -117,36 +139,102 @@ const LineConnector = ({
 };
 
 const GetConnectedCard = ({ isMobile }: { isMobile: boolean }) => {
+  const content = (
+    <ul
+      style={{
+        listStyleType: "none",
+        padding: 0,
+      }}
+    >
+      <li
+        style={{
+          display: "flex",
+          alignItems: "center",
+          gap: 8,
+        }}
+      >
+        <Arrow />
+        Join 10,000+ ML practitioners in Slack
+      </li>
+      <li
+        style={{
+          display: "flex",
+          alignItems: "center",
+          gap: 8,
+        }}
+      >
+        <Arrow />
+        Learn hwo to contribute
+      </li>
+    </ul>
+  );
   return isMobile ? (
     <CommunityCard
       className="community-card-mobile"
       title="Get connected"
-      content="Test"
+      content={content}
       dotPositions={new Set(["top", "bottom"])}
     />
   ) : (
     <CommunityCard
       className="community-card-inline"
       title="Get connected"
-      content="Test"
+      content={content}
       dotPositions={new Set(["right"])}
     />
   );
 };
 
 const FollowAlongCard = ({ isMobile }: { isMobile: boolean }) => {
+  const content = (
+    <ul
+      style={{
+        listStyleType: "none",
+        padding: 0,
+      }}
+    >
+      <li
+        style={{
+          display: "flex",
+          alignItems: "center",
+          gap: 8,
+        }}
+      >
+        <Arrow />
+        View code on GitHub
+      </li>
+      <li
+        style={{
+          display: "flex",
+          alignItems: "center",
+          gap: 8,
+        }}
+      >
+        <Arrow /> Follow us on X (formerly knows as Twitter)
+      </li>
+      <li
+        style={{
+          display: "flex",
+          alignItems: "center",
+          gap: 8,
+        }}
+      >
+        <Arrow /> Follow us on LinkedIn
+      </li>
+    </ul>
+  );
   return isMobile ? (
     <CommunityCard
       className="community-card-mobile"
       title="Follow along"
-      content="Test"
+      content={content}
       dotPositions={new Set(["top", "bottom"])}
     />
   ) : (
     <CommunityCard
       className="community-card-inline"
       title="Follow along"
-      content="Test"
+      content={content}
       dotPositions={new Set(["left"])}
     />
   );
@@ -157,7 +245,36 @@ const SubscribeCard = ({ isMobile }: { isMobile: boolean }) => {
     <CommunityCard
       className={isMobile ? "community-card-mobile" : "community-card-block"}
       title="Subscribe to our emails"
-      content="Test"
+      content={
+        <div
+          style={{
+            display: "flex",
+            gap: 8,
+          }}
+        >
+          <input
+            style={{
+              padding: 8,
+              width: "100%",
+              backgroundColor: "var(--ifm-color-secondary)",
+              color: "black",
+              border: "none",
+            }}
+            placeholder="Email address"
+          />
+          <button
+            className="button button--secondary"
+            style={
+              {
+                // border: "1px solid black",
+                // backgroundColor: "transparent",
+              }
+            }
+          >
+            Submit
+          </button>
+        </div>
+      }
       dotPositions={new Set(["top"])}
     />
   );