fix top page design

ut-code · Nov 27, 2023 · d49b40f · d49b40f
1 parent b24bef7
commit d49b40f
Show file tree

Hide file tree

Showing 5 changed files with 158 additions and 47 deletions.
diff --git a/learn/public/logo_kanji.svg b/learn/public/logo_kanji.svg
diff --git a/learn/public/logo_keyboard.svg b/learn/public/logo_keyboard.svg
diff --git a/learn/public/logo_read.svg b/learn/public/logo_read.svg
diff --git a/learn/public/logo_touch.svg b/learn/public/logo_touch.svg
diff --git a/learn/src/pages/index.tsx b/learn/src/pages/index.tsx
@@ -9,6 +9,7 @@ import {
   Box,
   Typography,
   Grid,
+  Container,
 } from "@mui/material";
 
 function NavigationCard({
@@ -24,17 +25,30 @@ function NavigationCard({
 }): JSX.Element {
   const router = useRouter();
   return (
-    <Card sx={{ maxWidth: 400 }}>
+    <Card sx={{ height: "100%" }}>
       <CardActionArea
         onClick={async () => {
           await router.push(linkUrl);
         }}
+        sx={{ height: "100%" }}
       >
-        <CardMedia component="img" image={imgPath} />
-        <CardContent>
-          <Typography variant="h5" component="div">
-            {title}
-          </Typography>
+        <CardContent sx={{ padding: "50px" }}>
+          <Box
+            sx={{ display: "flex", marginBottom: "40px", alignItems: "center" }}
+          >
+            <Typography
+              variant="h5"
+              component="div"
+              sx={{ fontWeight: "bold" }}
+            >
+              {title}
+            </Typography>
+            <CardMedia
+              component="img"
+              image={imgPath}
+              sx={{ width: 100, marginLeft: "auto" }}
+            />
+          </Box>
           <Typography variant="body1" component="div" p={1}>
             {description}
           </Typography>
@@ -47,48 +61,50 @@ function NavigationCard({
 export default function Home(): JSX.Element {
   return (
     <Layout>
-      <Box m={2}>
-        <Typography variant="h5" component="h1">
-          ようこそ
-        </Typography>
-        <Typography variant="body1" component="p">
-          ここでは、チュートリアル形式で点字について学ぶことができます。
-        </Typography>
-      </Box>
-      <Grid container spacing={2}>
-        <Grid item xs={12} sm={6}>
-          <NavigationCard
-            title="点字キーボード"
-            linkUrl="/keyboard"
-            imgPath={url("/logo.svg")}
-            description="パソコンのキーボードを用いて ⠿ のような 6 点式点字を入力する練習ツールです。"
-          />
-        </Grid>
-        <Grid item xs={12} sm={6}>
-          <NavigationCard
-            title="Web 点字器"
-            linkUrl="/touch"
-            imgPath={url("/logo.svg")}
-            description="点字から墨字（ひらがな表記）への翻訳をクイズを通して学びます。"
-          />
-        </Grid>
-        <Grid item xs={12} sm={6}>
-          <NavigationCard
-            title="漢点字学習コーナー"
-            linkUrl="/kanji"
-            imgPath={url("/logo.svg")}
-            description="点字の漢字バージョンを「Web点字器」の形式で学びます。"
-          />
-        </Grid>
-        <Grid item xs={12} sm={6}>
-          <NavigationCard
-            title="点字読みコーナー"
-            linkUrl="/read"
-            imgPath={url("/logo.svg")}
-            description="点字の読み方をクイズで学びます。"
-          />
+      <Container sx={{ width: "75%", maxWidth: "1000px" }}>
+        <Box m={2}>
+          <Typography variant="h5" component="h1">
+            ようこそ
+          </Typography>
+          <Typography variant="body1" component="p">
+            ここでは、チュートリアル形式で点字について学ぶことができます。
+          </Typography>
+        </Box>
+        <Grid container spacing={10}>
+          <Grid item xs={6}>
+            <NavigationCard
+              title="点字キーボード"
+              linkUrl="/keyboard"
+              imgPath={url("/logo_keyboard.svg")}
+              description="パソコンのキーボードを用いて ⠿ のような 6 点式点字を入力する練習ツールです。"
+            />
+          </Grid>
+          <Grid item xs={6}>
+            <NavigationCard
+              title="Web 点字器"
+              linkUrl="/touch"
+              imgPath={url("/logo_touch.svg")}
+              description="点字から墨字（ひらがな表記）への翻訳をクイズを通して学びます。"
+            />
+          </Grid>
+          <Grid item xs={6}>
+            <NavigationCard
+              title="漢点字学習コーナー"
+              linkUrl="/kanji"
+              imgPath={url("/logo_kanji.svg")}
+              description="点字の漢字バージョンを「Web点字器」の形式で学びます。"
+            />
+          </Grid>
+          <Grid item xs={6}>
+            <NavigationCard
+              title="点字読みコーナー"
+              linkUrl="/read"
+              imgPath={url("/logo_read.svg")}
+              description="点字の読み方をクイズで学びます。"
+            />
+          </Grid>
         </Grid>
-      </Grid>
+      </Container>
     </Layout>
   );
 }