Fix tutorials docs component (#24)

docs/docs/tutorials/intro.mdx

@@ -2,9 +2,22 @@
 sidebar_position: 1
 ---
 
-import {WebDevCardsRow} from '@site/src/components/WebDevCards';
+import {CardView} from '@site/src/components/CardView';
 
-# Welcome to PeriFlow Tutorials
+# 📘 Welcome to PeriFlow Tutorials
 
-<WebDevCardsRow />
+In this tutorials, we'll guide you through the process of deploying your model using either **PeriFlow Container** or **PeriFlow Cloud**.
+Depending on your preferences and requirements, you can choose the option that best suits your needs.
 
+## Deploying with PeriFlow Container
+
+If you opt for PeriFlow Container, our serving system comes packaged as a Docker image, simplifying the process of running PeriFlow within a containerized environment.
+This allows you to deploy your model with PeriFlow in your own infrastructure.
+
+## Deploying with PeriFlow Cloud
+
+For those who prefer a more hands-off approach, we offer PeriFlow as a managed service through PeriFlow Cloud.
+With this option, we take care of all the difficulties of serving your model.
+You can focus on your application while we handle the complexities of deployment and maintenance.
+
+<CardView />

docs/src/components/CardView/index.tsx

@@ -0,0 +1,74 @@
+import React from 'react';
+import Link from '@docusaurus/Link';
+import styles from './styles.module.css';
+import {useColorMode} from '@docusaurus/theme-common';
+
+import cloud_img from '@site/static/img/docs/tutorials/cloud.png';
+import container_img from '@site/static/img/docs/tutorials/container.png';
+
+
+const CardDatas = [
+  {
+    name: 'PeriFlow Cloud',
+    png: cloud_img,
+    url: {
+      page: 'cloud/how_to_use_your_checkpoint',
+    },
+    description: 'Use PeriFlow as a managed cloud service.'
+  },
+  {
+    name: 'PeriFlow Container',
+    png: container_img,
+    url: {
+      page: 'container/how_to_run_periflow_container',
+    },
+    description: 'Use PeriFlow in the form of a Docker image.'
+  },
+];
+
+interface CardProps {
+  name: string;
+  png: string;
+  url: {
+    page: string;
+  };
+  description: string;
+}
+
+const Card: React.FC<CardProps> = props => {
+  const {colorMode, setColorMode} = useColorMode();
+
+  return (
+    <div className="col col--6 margin-bottom--lg">
+      <div
+        className={`${styles.cardContainer} ${
+          colorMode === 'light' ? styles.cardContainerLight : styles.cardContainerDark
+        }`}
+      >
+        <Link to={props.url.page} style={{textDecoration: "none"}}>
+          <div className={styles.cardImage}>
+            <img src={props.png} className={styles.featurePng}/>
+          </div>
+          <div
+            className={`${styles.cardBody} ${
+              colorMode === 'light' ? styles.cardBodyLight : styles.cardBodyDark
+            }`}
+          >
+            <h3>{props.name}</h3>
+            <p>{props.description}</p>
+          </div>
+        </Link>
+      </div>
+    </div>
+  );
+}
+
+export function CardView(): JSX.Element {
+  return (
+    <div className="row">
+      {CardDatas.map((special) => (
+        <Card key={special.name} {...special} />
+      ))}
+    </div>
+  );
+}

docs/src/components/CardView/styles.module.css

@@ -0,0 +1,53 @@
+.featurePng {
+  height: 90%;
+  width: 90%;
+  display: block;
+  margin: 1rem auto;
+  border-radius: 0.5rem;
+}
+
+.cardContainer {
+  max-width: 40rem;
+  max-height: 25rem;
+  border-radius: 0.3rem;
+  display: flex;
+  flex-direction: column;
+  overflow: hidden;
+}
+
+.cardContainerLight {
+  background-color: #ffffff;
+  box-shadow: 0.1rem 0.1rem 0.1rem 0.1rem #dceafb;
+}
+
+.cardContainerLight:hover {
+  background-color: #dceafb;
+}
+
+.cardContainerDark {
+  background-color: #282a36;
+  box-shadow: 0.1rem 0.1rem 0.1rem 0.1rem #3e4152;
+}
+
+.cardContainerDark:hover {
+  background-color: #3e4152;
+}
+
+.cardBody {
+  color: #000000;
+  padding: 1rem 2rem;
+}
+
+.cardBodyLight {
+  color: #000000;
+  padding: 1rem 2rem;
+}
+
+.cardBodyDark {
+  color: #ffffff;
+  padding: 1rem 2rem;
+}
+
+.cardImage {
+  padding-top: 0;
+}