Add source and 特定商取引法に基づく表記 on footer

ItsukiKigoshi · Nov 17, 2023 · 6ee607f · 6ee607f
1 parent e7d6e23
commit 6ee607f
Show file tree

Hide file tree

Showing 5 changed files with 56 additions and 8 deletions.
diff --git a/components/footer.tsx b/components/footer.tsx
@@ -0,0 +1,18 @@
+import { Box, Typography } from "@mui/material";
+import * as React from "react";
+
+export default function Footer() {
+  return (
+    <Box>
+      <Typography>
+        <a
+          href="https://github.com/ItsukiKigoshi/itsukikigoshi.github.io"
+          target="_blank"
+        >
+          Source
+        </a>
+        ・<a href="/salespolicy">特定商取引法に基づく表記</a>
+      </Typography>
+    </Box>
+  );
+}
diff --git a/src/app/layout.tsx b/src/app/layout.tsx
@@ -1,6 +1,6 @@
 import type { Metadata } from "next";
 import { Inter } from "next/font/google";
-
+import Footer from "../../components/footer";
 import "./globals.css";
 
 const inter = Inter({ subsets: ["latin"] });
@@ -18,7 +18,6 @@ export default function RootLayout({
   return (
     <html lang="en">
       <body className={inter.className}>{children}</body>
-      {/* Add Footer w/ 特定商取引法に基づく表示 & link to the source */}
     </html>
   );
 }
diff --git a/src/app/page.tsx b/src/app/page.tsx
@@ -4,19 +4,16 @@ import TwitterIcon from "@mui/icons-material/Twitter";
 import InstagramIcon from "@mui/icons-material/Instagram";
 import GitHubIcon from "@mui/icons-material/GitHub";
 import LinkedInIcon from "@mui/icons-material/LinkedIn";
-import Typography from "@mui/material/Typography";
-import Box from "@mui/material/Box";
-import Stack from "@mui/material/Stack";
-import Avatar from "@mui/material/Avatar";
-import Button from "@mui/material/Button";
+import { Typography, Box, Stack, Avatar, Button } from "@mui/material";
+import Footer from "../../components/footer";
 
 export default function App() {
   return (
     <Box
       sx={{
         display: "grid",
         placeItems: "center", // Center the content horizontally and vertically
-        minHeight: "80vh", // Set a minimum height to fill the entire viewport
+        minHeight: "100vh", // Set a minimum height to fill the entire viewport
       }}
     >
       <Box
@@ -79,6 +76,7 @@ export default function App() {
         Hire Me
       </Button>
       */}
+      <Footer></Footer>
     </Box>
   );
 }
diff --git a/src/app/salespolicy/page.tsx b/src/app/salespolicy/page.tsx
@@ -0,0 +1,33 @@
+import * as React from "react";
+import CottageIcon from "@mui/icons-material/Cottage";
+import { Typography, Box, Button } from "@mui/material";
+
+export default function App() {
+  return (
+    <Box
+      sx={{
+        display: "grid",
+        placeItems: "center", // Center the content horizontally and vertically
+        minHeight: "80vh", // Set a minimum height to fill the entire viewport
+      }}
+    >
+      {/* The codes below should be more readable */}
+      <Typography sx={{ fontSize: 28 }}>特定商取引法に基づく表記</Typography>
+      <Typography>販売業社の名称/運営統括責任者: Itsuki KIGOSHI</Typography>
+      <Typography>所在地/住所: 請求があったら遅滞なく開示します</Typography>
+      <Typography>e-mail: itsukikigoshi+githubio@gmail.com</Typography>
+      <Typography>引渡時期: 注文後すぐにご利用いただけます</Typography>
+      <Typography>追加手数料等の追加料金: なし</Typography>
+      <Typography>決済手段: クレジットカード</Typography>
+      <Typography>決済期間: 直ちに処理されます</Typography>
+      <Typography>販売価格: なし</Typography>
+      <Typography>
+        返金ポリシー: 注文日より10日以内に代表（e-mail:
+        itsukikigoshi+githubio@gmail.com）までご連絡頂いた場合に限り，返金を受け付けます．
+      </Typography>
+      <Button href="/" variant="contained" startIcon={<CottageIcon />}>
+        Go Back to Home
+      </Button>
+    </Box>
+  );
+}
diff --git a/src/components/footer.tsx b/src/components/footer.tsx