feat: redesign About page intro section with side by side layout; refs #66

Author: elainefan331

src/pages/AboutPage.tsx

@@ -1,5 +1,5 @@
 import KeyboardArrowRightIcon from "@mui/icons-material/KeyboardArrowRight";
-import { Box, Typography, Container, Button } from "@mui/material";
+import { Box, Typography, Container, Button, Grid } from "@mui/material";
 import { Colors } from "design/theme";
 import React from "react";
 
@@ -8,93 +8,96 @@ const AboutPage: React.FC = () => {
     <Box>
       <Box
         sx={{
-          backgroundColor: Colors.white,
           padding: 3,
         }}
       >
-        <Container
-          maxWidth="md"
-          sx={{
-            textAlign: "center",
-            mt: 3,
-          }}
-        >
-          <Typography
-            variant="h4"
-            sx={{
-              fontWeight: "bold",
-              color: Colors.darkPurple,
-              mb: 2,
-            }}
-          >
-            What is NeuroJSON?
-          </Typography>
-          <Typography
-            variant="body1"
-            paragraph
-            sx={{
-              fontSize: "1.2rem",
-              color: Colors.darkPurple,
-            }}
-          >
-            NeuroJSON aims to develop JSON-based neuroimaging data exchange
-            formats that are readable, searchable, shareable, can be readily
-            validated and served in the web and cloud.
-          </Typography>
-
-          <Box
-            sx={{
-              mt: 4,
-              boxShadow: 3,
-              borderRadius: 2,
-              overflow: "hidden",
-            }}
-          >
-            <video
-              controls
-              width="100%"
-              style={{ maxHeight: "500px", objectFit: "cover" }}
-            >
-              <source
-                src={`${process.env.PUBLIC_URL}/video/introduction_video.mp4`}
-                type="video/mp4"
-              />
-              Your browser does not support the video tag.
-            </video>
-          </Box>
-          <Box
-            sx={{
-              display: "flex",
-              justifyContent: "flex-end",
-              mt: 2,
-            }}
-          >
-            <Button
-              variant="outlined"
-              href="https://neurojson.org/wiki/index.cgi?wiki#code"
-              target="_blank"
-              rel="noopener noreferrer"
-              sx={{
-                color: Colors.purple,
-                borderColor: Colors.purple,
-                fontSize: "small",
-                transition: "all 0.3s ease",
-                mt: 2,
-                "&:hover": {
-                  transform: "scale(1.05)",
-                  borderColor: Colors.purple,
-                },
-              }}
-            >
-              Learn more about NeuroJSON
-              <KeyboardArrowRightIcon />
-            </Button>
-          </Box>
+        <Container maxWidth="lg">
+          <Grid container spacing={4} alignItems="center">
+            {/* Left: Text Content */}
+            <Grid item xs={12} md={6}>
+              <Box
+                sx={{
+                  display: "flex",
+                  flexDirection: "column",
+                }}
+              >
+                <Typography
+                  variant="h4"
+                  sx={{
+                    color: Colors.lightGray,
+                    fontWeight: "bold",
+                    mb: 2,
+                  }}
+                >
+                  About NeuroJSON.io
+                </Typography>
+                <Typography
+                  variant="body1"
+                  paragraph
+                  sx={{
+                    fontSize: "1.2rem",
+                    color: Colors.lightGray,
+                  }}
+                >
+                  NeuroJSON aims to develop JSON-based neuroimaging data
+                  exchange formats that are readable, searchable, shareable, can
+                  be readily validated and served in the web and cloud.
+                </Typography>
+                <Box>
+                  <Button
+                    variant="outlined"
+                    href="https://neurojson.org/wiki/index.cgi?wiki#code"
+                    target="_blank"
+                    rel="noopener noreferrer"
+                    sx={{
+                      color: Colors.white,
+                      borderColor: Colors.white,
+                      fontSize: "small",
+                      transition: "all 0.3s ease",
+                      mt: 2,
+                      "&:hover": {
+                        transform: "scale(1.05)",
+                        borderColor: Colors.white,
+                      },
+                    }}
+                  >
+                    Learn more about NeuroJSON
+                    <KeyboardArrowRightIcon />
+                  </Button>
+                </Box>
+              </Box>
+            </Grid>
+            <Grid item xs={12} md={6}>
+              <Box
+                sx={{
+                  mt: 4,
+                  boxShadow: 3,
+                  borderRadius: 2,
+                  overflow: "hidden",
+                  backgroundColor: Colors.lightGray,
+                  padding: 0.5,
+                }}
+              >
+                <video
+                  controls
+                  width="100%"
+                  style={{ maxHeight: "500px", objectFit: "cover" }}
+                >
+                  <source
+                    src={`${process.env.PUBLIC_URL}/video/introduction_video.mp4`}
+                    type="video/mp4"
+                  />
+                  Your browser does not support the video tag.
+                </video>
+              </Box>
+            </Grid>
+          </Grid>
         </Container>
       </Box>
+
       <Box
         sx={{
-          backgroundColor: Colors.darkPurple,
+          backgroundColor: Colors.white,
           paddingTop: 5,
           paddingBottom: 10,
         }}
@@ -109,7 +112,7 @@ const AboutPage: React.FC = () => {
             variant="h4"
             sx={{
               fontWeight: "bold",
-              color: Colors.lightGray,
+              color: Colors.darkPurple,
             }}
           >
             Getting Started with NeuroJSON