add About seciton

Author: megane42

src/App.css

@@ -1,5 +0,0 @@
-h1 {
-  font-family: "Instrument Serif", serif;
-  font-weight: 400;
-  letter-spacing: 16px;
-}

src/components/ImageCanvas/index.tsx

@@ -17,7 +17,7 @@ const ImageCanvas = ({ imageUrl, isDefault, onCanvasReady, sx }: ImageCanvasProp
         position: 'relative',
         overflow: 'hidden',
         borderRadius: 0,
-        width: 'fit-content',
+        width: '100%',
         height: 'auto',
         boxShadow: 0,
         ...sx,
@@ -27,7 +27,7 @@ const ImageCanvas = ({ imageUrl, isDefault, onCanvasReady, sx }: ImageCanvasProp
         ref={canvasRef}
         style={{
           display: 'block',
-          maxWidth: '100%',
+          width: '100%',
           height: 'auto'
         }}
       />

src/pages/HomePage/index.tsx

@@ -1,4 +1,4 @@
-import { Box, Container } from '@mui/material';
+import { Box, Container, ListItemText, ListItem, List, Typography, Link } from '@mui/material';
 import { useState } from 'react';
 import CameraOpenButton from "@/components/CameraOpenButton";
 import ImageCanvas from '@/components/ImageCanvas';
@@ -11,22 +11,49 @@ const HomePage = () => {
   const [canvas, setCanvas] = useState<HTMLCanvasElement | undefined>();
 
   return (
-    <Container sx={{ display: "flex", flexDirection: "column", alignItems: "center" }}>
-      <h1>Hitbox Generator</h1>
+    <Container maxWidth="sm" sx={{ display: "flex", flexDirection: "column", gap: 8, mt: 4 }}>
       <Box sx={{ display: "flex", flexDirection: "column", gap: 2 }}>
-        <Box sx={{ maxWidth: '600px'}}>
-          <ImageCanvas
-            imageUrl={imageUrl}
-            isDefault={isDefault}
-            onCanvasReady={setCanvas}
-          />
+        <Typography variant="h1" component="h1">
+          Hitbox Generator
+        </Typography>
+          <Box sx={{ display: "flex", flexDirection: "column", gap: 2 }}>
+          <Box sx={{ width: "100%" }}>
+            <ImageCanvas
+              imageUrl={imageUrl}
+              isDefault={isDefault}
+              onCanvasReady={setCanvas}
+            />
+          </Box>
+          <Box sx={{ display: "flex", gap: 2 }}>
+            <CameraOpenButton text="Open Camera" onImageTaken={onImageGiven} />
+            <ImageSelectButton text="Select Image" onImageSelect={onImageGiven} />
+          </Box>
+          <Box sx={{ display: "flex", gap: 2 }}>
+            <ShareButton text="Share" canvas={canvas}/>
+          </Box>
         </Box>
-        <Box sx={{ display: "flex", gap: 2 }}>
-          <CameraOpenButton text="Open Camera" onImageTaken={onImageGiven} />
-          <ImageSelectButton text="Select Image" onImageSelect={onImageGiven} />
-        </Box>
-        <Box sx={{ display: "flex", gap: 2 }}>
-          <ShareButton text="Share" canvas={canvas}/>
+      </Box>
+
+      <Box sx={{ display: "flex", flexDirection: "column", gap: 2 }}>
+        <Typography variant="h2" component="h2">
+          About
+        </Typography>
+        <Box sx={{ display: "flex", flexDirection: "column" }}>
+          <List sx={{ listStyleType: 'disc', p: 0, pl: 2 }}>
+            <ListItem sx={{ display: 'list-item', p: 0 }}>
+              <ListItemText primary="All image processing is done on the device. Therefore, no image is sent to the server. / 画像処理は全て手元の端末上で行われます。つまり、画像は一切サーバーに送信されません。" />
+            </ListItem>
+            <ListItem sx={{ display: 'list-item', p: 0 }}>
+              <ListItemText primary="For any issues that may occur in this application, the author is not responsible. / このアプリケーションで発生したいかなる問題についても、作者は責任を負いません。" />
+            </ListItem>
+            <ListItem sx={{ display: 'list-item', p: 0 }}>
+              <ListItemText primary={
+                <Link href="https://streamlinehq.com" target="_blank" rel="noopener noreferrer">
+                  Free icons from Streamline. / アイコンは Streamline のものを使用しています。
+                </Link>
+              } />
+            </ListItem>
+          </List>
         </Box>
       </Box>
     </Container>

src/theme.ts

@@ -6,6 +6,22 @@ const theme = createTheme({
       main: '#000000',
     },
   },
+  typography: {
+    fontFamily: 'Yu Mincho',
+    h1: {
+      fontFamily: 'Instrument Serif, Yu Mincho',
+      fontSize: '2rem',
+      fontWeight: 400,
+      letterSpacing: '16px',
+      lineHeight: '1.5',
+    },
+    h2: {
+      fontFamily: 'Instrument Serif, Yu Mincho',
+      fontSize: '1.5rem',
+      fontWeight: 400,
+      letterSpacing: '16px',
+    },
+  },
 });
 
 export default theme;