diff --git a/public/img/about_page/convert.png b/public/img/about_page/convert.png new file mode 100644 index 0000000..ac50a93 Binary files /dev/null and b/public/img/about_page/convert.png differ diff --git a/src/pages/AboutPage.tsx b/src/pages/AboutPage.tsx index 49678f8..1e114bf 100644 --- a/src/pages/AboutPage.tsx +++ b/src/pages/AboutPage.tsx @@ -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(null); const previewVideoRef = useRef(null); const downloadVideoRef = useRef(null); const apiVideoRef = useRef(null); + const convertVideoRef = useRef(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 - - + + + + + + Search + + + + - - + + + + + + Preview + + + + - + + + + + + + + + + + + + + + + + + Download + + + + + + { videoUrl="https://neurojson.io/io/download/static/videos/matlab_api.mp4" /> - - + + + + + + Convert And Upload + + + +