update

website/src/components/AutoScroll.tsx

@@ -13,7 +13,7 @@ const AutoScroll = ({ images }: { images: string[] }) => {
                   src={image}
                   alt={image}
                   className={styles.svg}
-                  style={{ maxWidth: "150px", padding: "0 30px" }}
+                  style={{ maxWidth: "120px", padding: "0 30px" }}
                 />
               </div>
             ))}

website/src/css/custom.css

@@ -92,3 +92,10 @@
     margin-left: 20px;
   }
 }
+
+@media screen and (max-width: 996px) {
+  .media-img {
+    width: 100%;
+    margin-top: 20px;
+  }
+}

website/src/pages/index.tsx

@@ -25,6 +25,43 @@ function Card({
   );
 }
 
+function Arrow(): JSX.Element {
+  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>
+  );
+}
+
+function CTA({ text }: { text: string }): JSX.Element {
+  return (
+    <div
+      style={{
+        display: "flex",
+        alignItems: "center",
+        gap: "8px",
+      }}
+    >
+      <Arrow />
+      {text}
+    </div>
+  );
+}
+
 function MediaCard({
   items,
   src,
@@ -198,9 +235,9 @@ function ReleaseNote({ release }: { release: Post }): JSX.Element {
             day: "numeric",
           })}
         </p>
-        <br />
         <h3>{title}</h3>
-        <div className="avatar">
+        <p>{LOREM}</p>
+        {/* <div className="avatar">
           <a
             className="avatar__photo-link avatar__photo avatar__photo--md"
             href={author.url}
@@ -212,7 +249,9 @@ function ReleaseNote({ release }: { release: Post }): JSX.Element {
               by <strong>{author.name}</strong>
             </small>
           </div>
-        </div>
+        </div> */}
+
+        <CTA text="Read this release note" />
       </div>
     </div>
   );
@@ -338,10 +377,15 @@ function CardTile({ tile }: { tile: Card[][] }): JSX.Element {
               <div className="card">
                 <div className="card__header">
                   {img && <img src={img} />}
-                  <h3>{title}</h3>
+                  <span style={{ color: "var(--ifm-color-success)" }}>
+                    RESOURCE TYPE
+                  </span>
+                  {/* <h3>{title}</h3> */}
                 </div>
                 <div className="card__body">
                   <p>{content}</p>
+
+                  <CTA text="Read the docs" />
                 </div>
               </div>
             </div>
@@ -544,10 +588,19 @@ export default function Home(): JSX.Element {
               Get Started
             </a>
             <a
-              className="button button--primary button--md"
+              className="button button--outline button--primary button--md"
               style={{ borderRadius: 120 }}
             >
-              See the latest release
+              <div
+                style={{
+                  display: "flex",
+                  alignItems: "center",
+                  gap: "8px",
+                }}
+              >
+                See the latest release
+                <Arrow />
+              </div>
             </a>
           </div>
         </div>
@@ -951,6 +1004,9 @@ export default function Home(): JSX.Element {
           Get Started with MLflow
         </a>
       </div>
+      <div style={{ display: "flex", justifyContent: "center" }}>
+        <CTA text="Learn how to contribute" />
+      </div>
 
       <Spacer height={200} />
     </Layout>