Merge pull request #85 from NeuroJSON/staging

About Page: Add feature sections, add convert icon and video, add four preview videos

Author: elainefan331

public/img/about_page/convert.png

@@ -6,15 +6,18 @@ import {
   Button,
   Grid,
   Tooltip,
+  Divider,
 } from "@mui/material";
 import { Colors } from "design/theme";
 import React, { useRef } from "react";
+import { Color } from "three";
 
 const AboutPage: React.FC = () => {
   const searchVideoRef = useRef<HTMLDivElement | null>(null);
   const previewVideoRef = useRef<HTMLDivElement | null>(null);
   const downloadVideoRef = useRef<HTMLDivElement | null>(null);
   const apiVideoRef = useRef<HTMLDivElement | null>(null);
+  const convertVideoRef = useRef<HTMLDivElement | null>(null);
 
   const videoData = [
     {
@@ -45,6 +48,13 @@ const AboutPage: React.FC = () => {
       video: "download_video.mp4",
       ref: downloadVideoRef,
     },
+    {
+      src: "convert.png",
+      alt: "convert icon",
+      tip: "Convert tutotial video",
+      video: "convert.mp4",
+      ref: convertVideoRef,
+    },
   ];
 
   const TutorialVideoItem = ({
@@ -261,21 +271,97 @@ const AboutPage: React.FC = () => {
           >
             Getting Started with NeuroJSON
           </Typography>
-          <Grid container spacing={5} sx={{ mt: 3 }}>
-            <Grid item xs={12} sm={6} ref={searchVideoRef}>
+
+          <Grid container spacing={5} sx={{ mt: 3 }} ref={searchVideoRef}>
+            <Grid item xs={12}>
+              <Divider
+                sx={{
+                  opacity: 1,
+                  mb: 2,
+                  "&::before, &::after": {
+                    // borderTopWidth: 2, // make the line more thicker
+                    // borderColor: Colors.secondaryPurple, // change the default line color
+                  },
+                }}
+              >
+                <Typography
+                  variant="h6"
+                  sx={{ color: Colors.darkPurple, fontWeight: 600 }}
+                >
+                  Search
+                </Typography>
+              </Divider>
+            </Grid>
+            <Grid item xs={12} sm={6}>
               <TutorialVideoItem
                 title="Search tutorial"
                 videoUrl="https://neurojson.io/io/download/static/videos/search_video.mp4"
               />
             </Grid>
-
-            <Grid item xs={12} sm={6} ref={previewVideoRef}>
+          </Grid>
+          <Grid container spacing={5} sx={{ mt: 3 }} ref={previewVideoRef}>
+            <Grid item xs={12}>
+              <Divider
+                sx={{ borderColor: Colors.darkPurple, opacity: 1, mb: 2 }}
+              >
+                <Typography
+                  variant="h6"
+                  sx={{ color: Colors.darkPurple, fontWeight: 600 }}
+                >
+                  Preview
+                </Typography>
+              </Divider>
+            </Grid>
+            <Grid item xs={12} sm={6}>
               <TutorialVideoItem
                 title="Preview tutorial"
                 videoUrl="https://neurojson.io/io/download/static/videos/preview.mp4"
               />
             </Grid>
-
+            <Grid item xs={12} sm={6}>
+              <TutorialVideoItem
+                title="mesh preview tutorial"
+                videoUrl="https://neurojson.io/io/download/static/videos/preview_mesh.mp4"
+              />
+            </Grid>
+            <Grid item xs={12} sm={6}>
+              <TutorialVideoItem
+                title="fnirs preview tutorial"
+                videoUrl="https://neurojson.io/io/download/static/videos/preview_fnirs.mp4"
+              />
+            </Grid>
+            <Grid item xs={12} sm={6}>
+              <TutorialVideoItem
+                title="atlas preview tutorial"
+                videoUrl="https://neurojson.io/io/download/static/videos/preview_atlas.mp4"
+              />
+            </Grid>
+            <Grid item xs={12} sm={6}>
+              <TutorialVideoItem
+                title="mri preview tutorial"
+                videoUrl="https://neurojson.io/io/download/static/videos/preview_mri.mp4"
+              />
+            </Grid>
+          </Grid>
+          <Grid container spacing={5} sx={{ mt: 3 }} ref={downloadVideoRef}>
+            <Grid item xs={12}>
+              <Divider
+                sx={{ borderColor: Colors.darkPurple, opacity: 1, mb: 2 }}
+              >
+                <Typography
+                  variant="h6"
+                  sx={{ color: Colors.darkPurple, fontWeight: 600 }}
+                >
+                  Download
+                </Typography>
+              </Divider>
+            </Grid>
+            <Grid item xs={12} sm={6}>
+              <TutorialVideoItem
+                title="Download tutorial"
+                videoUrl="https://neurojson.io/io/download/static/videos/download.mp4"
+              />
+            </Grid>
             <Grid item xs={12} sm={6} ref={apiVideoRef}>
               <TutorialVideoItem
                 title="Rest API - Python tutorial"
@@ -289,11 +375,27 @@ const AboutPage: React.FC = () => {
                 videoUrl="https://neurojson.io/io/download/static/videos/matlab_api.mp4"
               />
             </Grid>
-
-            <Grid item xs={12} sm={6} ref={downloadVideoRef}>
+          </Grid>
+          <Grid container spacing={5} sx={{ mt: 3 }}>
+            <Grid item xs={12}>
+              <Divider
+                sx={{
+                  opacity: 1,
+                  mb: 2,
+                }}
+              >
+                <Typography
+                  variant="h6"
+                  sx={{ color: Colors.darkPurple, fontWeight: 600 }}
+                >
+                  Convert And Upload
+                </Typography>
+              </Divider>
+            </Grid>
+            <Grid item xs={12} sm={6} ref={convertVideoRef}>
               <TutorialVideoItem
-                title="Download tutorial"
-                videoUrl="https://neurojson.io/io/download/static/videos/download.mp4"
+                title="Convert tutorial"
+                videoUrl="https://neurojson.io/io/download/static/videos/convert.mp4"
               />
             </Grid>
           </Grid>