front/src/pages/Express/Express.tsx

import { Box, Card, CardContent, Chip, Divider, LinearProgress, Stack, Typography } from "@mui/material";
import MainContainer from "../../components/Container/MainContainer";
import { ChecklistSharp, DeveloperBoard, FlashOn, LineAxis, Settings, SettingsTwoTone, UploadFile } from "@mui/icons-material";
import { useCallback, useEffect, useState } from "react";
import { Link, useNavigate, useNavigation } from "react-router-dom";

const Express = () => {
  const navigate = useNavigate()

  return (
    <>
      <MainContainer>
        <Box
          sx={{
            justifyContent: "center",
            display: "flex",
            height: "99%",
            alignItems: "center",
          }}
        >
          <Stack sx={{ height: '30vh', borderRadius: '12px', gap: "30px", minWidth: "20vw", maxWidth:"300px"}}>
          <Card variant="outlined" onClick={() => navigate("/Inference")}>
            <Box>
              <CardContent sx={{ display: "flex", justifyItems: "center", flexDirection: "row-reverse", alignItems:"center", justifyContent: "flex-end", userSelect: "none", gap:"30px"}}>
              <Box sx={{ display: "flex", flexDirection:"column" }}>
                <Typography variant="h5">Express generation</Typography>
                <Typography variant="body1" fontStyle={"italic"}>TAL-Noisemaker synthesizer and recommended config is used</Typography>
              </Box>
                <FlashOn sx={{ fontSize: "40px", color: "inherit" }} />
              </CardContent>
            </Box>
          </Card>
          <Box></Box>
          <Divider>Or</Divider>
          <Card variant="outlined" onClick={() => navigate("/")}>
            <Box sx={{ display: "inherit"}}>
              <CardContent sx={{ display: "flex", justifyItems: "center", flexDirection: "row-reverse", alignItems:"center", justifyContent: "flex-end", gap:"30px", userSelect: "none"}}>
              <Box sx={{ display: "flex", flexDirection:"column" }}>
                <Typography variant="h5">Custom generation</Typography>
                <Typography variant="body1" fontStyle={"italic"}>Bring your own VST and customize your model</Typography>
              </Box>
                <Settings sx={{ fontSize: "40px", color: "inherit" }} />
              </CardContent>
            </Box>
          </Card>
        </Stack>
        </Box>
      </MainContainer>
    </>
  );
};

export default Express;