fork refine

documentation/src/components/tutorial-card/index.js

@@ -0,0 +1,16 @@
+import React from "react";
+import Link from "@docusaurus/Link";
+import useBaseUrl from "@docusaurus/useBaseUrl";
+
+import styles from "./styles.module.css";
+
+const Card = ({ iconPath, title, direction }) => (
+    <Link to={useBaseUrl(direction)} className={styles.link}>
+        <div className={styles.card}>
+            <img src={iconPath} alt={title} width="64" height="64" />
+            <span>{title}</span>
+        </div>
+    </Link>
+);
+
+export default Card;

documentation/src/components/tutorial-card/styles.module.css

@@ -0,0 +1,30 @@
+.card {
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+    padding: 24px;
+    height: 100%;
+    border-radius: 16px;
+    border: 1px solid var(--ifm-color-emphasis-200);
+    transition: all 0.2s;
+    text-align: center;
+    height: 160px;
+    background: var(--tutorial-card-bg);
+}
+
+.card:hover {
+    background: var(--tutorial-card-bg-hover);
+    box-shadow: 4px 8px 16px rgba(42, 42, 66, 0.25);
+}
+
+.link {
+    text-decoration: none !important;
+}
+
+.card span {
+    margin-top: 8px;
+    color: var(--ifm-font-color-base);
+    font-weight: 700;
+    font-family: "Montserrat";
+}