feat: add section dividers to separate features in about page

Author: elainefan331

src/components/Routes.tsx

@@ -33,8 +33,8 @@ const Routes = () => (
         {/* Dataset Details Page */}
         <Route
           path={`${RoutesEnum.DATABASES}/:dbName/:docId`}
-          element={<DatasetDetailPage />}
-          // element={<UpdatedDatasetDetailPage />}
+          // element={<DatasetDetailPage />}
+          element={<UpdatedDatasetDetailPage />}
         />
 
         {/* Search Page */}

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<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: "download.png",
+      alt: "download icon",
+      tip: "Download tutotial video",
+      video: "download_video.mp4",
+      ref: convertVideoRef,
+    },
   ];
 
   const TutorialVideoItem = ({
@@ -261,21 +271,67 @@ const AboutPage: React.FC = () => {
           >
             Getting Started with NeuroJSON
           </Typography>
+
           <Grid container spacing={5} sx={{ mt: 3 }}>
+            <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} ref={searchVideoRef}>
               <TutorialVideoItem
                 title="Search tutorial"
                 videoUrl="https://neurojson.io/io/download/static/videos/search_video.mp4"
               />
             </Grid>
-
+          </Grid>
+          <Grid container spacing={5} sx={{ mt: 3 }}>
+            <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} ref={previewVideoRef}>
               <TutorialVideoItem
                 title="Preview tutorial"
                 videoUrl="https://neurojson.io/io/download/static/videos/preview.mp4"
               />
             </Grid>
-
+          </Grid>
+          <Grid container spacing={5} sx={{ mt: 3 }}>
+            <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} ref={apiVideoRef}>
               <TutorialVideoItem
                 title="Rest API - Python tutorial"
@@ -297,6 +353,29 @@ const AboutPage: React.FC = () => {
               />
             </Grid>
           </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="Convert tutorial"
+                videoUrl="https://neurojson.io/io/download/static/videos/search_video.mp4"
+              />
+            </Grid>
+          </Grid>
         </Container>
       </Box>
     </Box>