From d49b40f936f7f9eb2f4f8763748139b42eff375e Mon Sep 17 00:00:00 2001
From: brdgb <bridgebhot@gmail.com>
Date: Mon, 27 Nov 2023 22:42:34 +0900
Subject: [PATCH] fix top page design

---
 learn/public/logo_kanji.svg    |  28 +++++++++
 learn/public/logo_keyboard.svg |  27 ++++++++
 learn/public/logo_read.svg     |  10 +++
 learn/public/logo_touch.svg    |  30 +++++++++
 learn/src/pages/index.tsx      | 110 +++++++++++++++++++--------------
 5 files changed, 158 insertions(+), 47 deletions(-)
 create mode 100644 learn/public/logo_kanji.svg
 create mode 100644 learn/public/logo_keyboard.svg
 create mode 100644 learn/public/logo_read.svg
 create mode 100644 learn/public/logo_touch.svg

diff --git a/learn/public/logo_kanji.svg b/learn/public/logo_kanji.svg
new file mode 100644
index 00000000..0da38aff
--- /dev/null
+++ b/learn/public/logo_kanji.svg
@@ -0,0 +1,28 @@
+<svg width="169" height="82" viewBox="0 0 169 82" fill="none" xmlns="http://www.w3.org/2000/svg">
+<circle cx="107.62" cy="6.61957" r="6.61957" fill="#2683DA"/>
+<circle cx="128.802" cy="6.61957" r="6.61957" fill="#2683DA"/>
+<circle cx="108.097" cy="29.6196" r="6.61957" fill="#EAF4FD"/>
+<circle cx="108.097" cy="52.1261" r="6.61957" fill="#EAF4FD"/>
+<circle cx="129.28" cy="29.6196" r="6.61957" fill="#EAF4FD"/>
+<circle cx="129.28" cy="52.1261" r="6.61957" fill="#EAF4FD"/>
+<circle cx="129.764" cy="73.7562" r="6.61957" fill="#2683DA"/>
+<circle cx="108.097" cy="74.6326" r="6.61957" fill="#2683DA"/>
+<path d="M9.32 35.72H27.76V39.84H9.32V35.72ZM2.16 44.68H37.96V49.12H2.16V44.68ZM17.56 42.12H22.48V54.48C22.48 56.96 21.88 58.2 19.96 58.92C18.08 59.56 15.52 59.64 12.12 59.64C11.8 58.28 10.92 56.24 10.16 55C12.72 55.08 15.72 55.08 16.52 55.08C17.32 55.08 17.56 54.88 17.56 54.32V42.12ZM26.2 35.72H27.4L28.4 35.48L31.44 37.8C28.68 40.76 24.72 43.88 20.8 45.76C20.24 44.96 18.96 43.64 18.24 43C21.32 41.4 24.72 38.56 26.2 36.6V35.72ZM2.64 28.4H37.52V38.2H32.76V32.64H7.16V38.2H2.64V28.4ZM30.36 22.32L35.56 23.84C33.72 26.48 31.64 29.2 30 30.96L26.08 29.52C27.6 27.56 29.4 24.56 30.36 22.32ZM5.32 24.28L9.4 22.44C10.84 24 12.44 26.16 13.08 27.72L8.72 29.72C8.16 28.24 6.68 25.96 5.32 24.28ZM15.4 23.4L19.64 21.8C20.92 23.56 22.28 26 22.8 27.6L18.24 29.36C17.84 27.76 16.6 25.24 15.4 23.4Z" fill="#2683DA"/>
+<path d="M79.4369 39.5389C80.2826 40.3294 80.2826 41.6706 79.4369 42.4611L68.6157 52.5763C67.3377 53.7709 65.25 52.8647 65.25 51.1152L65.25 30.8848C65.25 29.1353 67.3377 28.229 68.6157 29.4237L79.4369 39.5389Z" fill="#2683DA"/>
+<g filter="url(#filter0_d_50_1157)">
+<path d="M157 37.2364H143.626L150.439 50.4727L146.907 52L140.093 38.2545L130 47.9273V10L157 37.2364Z" fill="white"/>
+<path d="M157 38.7364H160.599L158.065 36.1803L131.065 8.94397L128.5 6.35624V10V47.9273V51.4423L131.038 49.0103L139.657 40.7508L145.563 52.6661L146.195 53.9418L147.502 53.3768L151.034 51.8496L152.507 51.2129L151.773 49.7862L146.085 38.7364H157Z" stroke="#2683DA" stroke-width="3"/>
+</g>
+<defs>
+<filter id="filter0_d_50_1157" x="123" y="2.71249" width="45.1982" height="61.1712" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+<feFlood flood-opacity="0" result="BackgroundImageFix"/>
+<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
+<feOffset dy="4"/>
+<feGaussianBlur stdDeviation="2"/>
+<feComposite in2="hardAlpha" operator="out"/>
+<feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.25 0"/>
+<feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow_50_1157"/>
+<feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow_50_1157" result="shape"/>
+</filter>
+</defs>
+</svg>
diff --git a/learn/public/logo_keyboard.svg b/learn/public/logo_keyboard.svg
new file mode 100644
index 00000000..8872412d
--- /dev/null
+++ b/learn/public/logo_keyboard.svg
@@ -0,0 +1,27 @@
+<svg width="123" height="71" viewBox="0 0 123 71" fill="none" xmlns="http://www.w3.org/2000/svg">
+<mask id="path-1-inside-1_1_21" fill="white">
+<path d="M0 5C0 2.23858 2.23858 0 5 0H118C120.761 0 123 2.23858 123 5V66C123 68.7614 120.761 71 118 71H5C2.23858 71 0 68.7614 0 66V5Z"/>
+</mask>
+<path d="M0 5C0 2.23858 2.23858 0 5 0H118C120.761 0 123 2.23858 123 5V66C123 68.7614 120.761 71 118 71H5C2.23858 71 0 68.7614 0 66V5Z" fill="#EAF4FD"/>
+<path d="M-3 5C-3 0.581722 0.581722 -3 5 -3H115C119.418 -3 123 0.581722 123 5C123 3.89543 120.761 3 118 3H5C3.89543 3 3 3.89543 3 5H-3ZM123 66C123 70.4183 119.418 74 115 74H5C0.581722 74 -3 70.4183 -3 66H3C3 67.1046 3.89543 68 5 68H118C120.761 68 123 67.1046 123 66ZM5 74C0.581722 74 -3 70.4183 -3 66V5C-3 0.581722 0.581722 -3 5 -3V3C3.89543 3 3 3.89543 3 5V66C3 67.1046 3.89543 68 5 68V74ZM123 0V71V0Z" fill="#2683DA" mask="url(#path-1-inside-1_1_21)"/>
+<circle cx="21.037" cy="20.3827" r="4.38272" fill="#2683DA"/>
+<circle cx="21.037" cy="35.2839" r="4.38272" fill="#2683DA"/>
+<circle cx="35.0617" cy="20.3827" r="4.38272" fill="#2683DA"/>
+<circle cx="35.0617" cy="35.2839" r="4.38272" fill="#2683DA"/>
+<circle cx="21.037" cy="50.1852" r="4.38272" fill="#2683DA"/>
+<g filter="url(#filter0_d_1_21)">
+<path d="M56.5988 11L56.5988 59.0988" stroke="#2683DA"/>
+</g>
+<defs>
+<filter id="filter0_d_1_21" x="52.0988" y="11" width="9" height="56.0988" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+<feFlood flood-opacity="0" result="BackgroundImageFix"/>
+<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
+<feOffset dy="4"/>
+<feGaussianBlur stdDeviation="2"/>
+<feComposite in2="hardAlpha" operator="out"/>
+<feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.25 0"/>
+<feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow_1_21"/>
+<feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow_1_21" result="shape"/>
+</filter>
+</defs>
+</svg>
diff --git a/learn/public/logo_read.svg b/learn/public/logo_read.svg
new file mode 100644
index 00000000..240e092f
--- /dev/null
+++ b/learn/public/logo_read.svg
@@ -0,0 +1,10 @@
+<svg width="134" height="59" viewBox="0 0 134 59" fill="none" xmlns="http://www.w3.org/2000/svg">
+<circle cx="6.61957" cy="6.61957" r="6.61957" fill="#2683DA"/>
+<circle cx="6.61957" cy="29.1261" r="6.61957" fill="#EAF4FD"/>
+<circle cx="27.8022" cy="6.61957" r="6.61957" fill="#EAF4FD"/>
+<circle cx="27.8022" cy="29.1261" r="6.61957" fill="#EAF4FD"/>
+<circle cx="28.287" cy="50.7562" r="6.61957" fill="#EAF4FD"/>
+<circle cx="6.61957" cy="51.6326" r="6.61957" fill="#EAF4FD"/>
+<path d="M113.84 11.84C113.6 12.6 113.44 13.32 113.28 13.96C112.52 17.68 111.84 23.44 111.84 28.4C111.84 34.72 113 39.2 114.32 43.24L109.72 44.6C108.52 41 107.36 35.08 107.36 29.2C107.36 23.96 108.08 18.08 108.52 14.12C108.6 13.32 108.68 12.4 108.64 11.68L113.84 11.84ZM106.68 16.24C114.28 16.24 120.32 15.88 126.44 14.4L126.48 19C121 20 112.6 20.6 106.56 20.6C104.44 20.6 101.32 20.4 99.44 20.32L99.32 15.72C100.76 15.92 104.24 16.24 106.68 16.24ZM123.96 22.12C123.64 22.84 123.04 24.68 122.76 25.52C120.48 32.72 116.36 38.12 112.56 40.92C109.96 42.84 106.48 44.6 103 44.6C100.08 44.6 97.64 42.84 97.64 38.76C97.64 33.12 102.68 27.24 109.04 24.92C111.68 23.96 114.96 23.36 117.96 23.36C125.44 23.36 130.96 27.68 130.96 33.92C130.96 39.6 127.6 45.08 117.8 46.6L115.12 42.36C122.84 41.52 126 37.64 126 33.68C126 30.28 123.08 27.4 117.68 27.4C114.04 27.4 111.16 28.44 109.2 29.32C105.2 31.2 102.36 35.04 102.36 37.72C102.36 39.04 102.88 39.72 104.2 39.72C106.08 39.72 108.76 38.4 111.2 36.12C114.12 33.44 116.84 29.88 118.44 24.36C118.72 23.52 119 21.8 119.04 20.92L123.96 22.12Z" fill="#2683DA"/>
+<path d="M73.4369 27.5389C74.2826 28.3294 74.2826 29.6706 73.4369 30.4611L62.6157 40.5763C61.3377 41.7709 59.25 40.8647 59.25 39.1152L59.25 18.8848C59.25 17.1353 61.3377 16.229 62.6157 17.4237L73.4369 27.5389Z" fill="#2683DA"/>
+</svg>
diff --git a/learn/public/logo_touch.svg b/learn/public/logo_touch.svg
new file mode 100644
index 00000000..5b880a08
--- /dev/null
+++ b/learn/public/logo_touch.svg
@@ -0,0 +1,30 @@
+<svg width="140" height="90" viewBox="0 0 140 90" fill="none" xmlns="http://www.w3.org/2000/svg">
+<circle cx="6.61957" cy="6.61957" r="6.61957" fill="#2683DA"/>
+<circle cx="6.61957" cy="29.1261" r="6.61957" fill="#2683DA"/>
+<circle cx="27.8022" cy="6.61957" r="6.61957" fill="#2683DA"/>
+<circle cx="27.8022" cy="29.1261" r="6.61957" fill="#2683DA"/>
+<circle cx="28.287" cy="50.7562" r="6.61957" fill="#EAF4FD"/>
+<circle cx="6.61957" cy="51.6326" r="6.61957" fill="#2683DA"/>
+<circle cx="76.0971" cy="6.61957" r="6.61957" fill="#EAF4FD"/>
+<circle cx="76.0971" cy="29.1261" r="6.61957" fill="#EAF4FD"/>
+<circle cx="97.2796" cy="6.61957" r="6.61957" fill="#EAF4FD"/>
+<circle cx="97.2796" cy="29.1261" r="6.61957" fill="#EAF4FD"/>
+<circle cx="97.7645" cy="50.7562" r="6.61957" fill="#2683DA"/>
+<circle cx="76.0971" cy="51.6326" r="6.61957" fill="#2683DA"/>
+<g filter="url(#filter0_d_2_5)">
+<path d="M128 63.2364H114.626L121.439 76.4727L117.907 78L111.093 64.2545L101 73.9273V36L128 63.2364Z" fill="white"/>
+<path d="M128 64.7364H131.599L129.065 62.1803L102.065 34.944L99.5 32.3562V36V73.9273V77.4423L102.038 75.0103L110.657 66.7508L116.563 78.6661L117.195 79.9418L118.502 79.3768L122.034 77.8496L123.507 77.2129L122.773 75.7862L117.085 64.7364H128Z" stroke="#2683DA" stroke-width="3"/>
+</g>
+<defs>
+<filter id="filter0_d_2_5" x="94" y="28.7125" width="45.1982" height="61.1712" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+<feFlood flood-opacity="0" result="BackgroundImageFix"/>
+<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
+<feOffset dy="4"/>
+<feGaussianBlur stdDeviation="2"/>
+<feComposite in2="hardAlpha" operator="out"/>
+<feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.25 0"/>
+<feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow_2_5"/>
+<feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow_2_5" result="shape"/>
+</filter>
+</defs>
+</svg>
diff --git a/learn/src/pages/index.tsx b/learn/src/pages/index.tsx
index 6601153c..0820f57b 100644
--- 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>
   );
 }