add:sign in page #2

src/components/Signinbutton.tsx

@@ -0,0 +1,29 @@
+import { Button } from "@mui/material";
+import {
+  Box,
+  Paper,
+  Stack,
+  TextField,
+  Typography,
+  Direction,
+} from "@mui/material";
+import { useState } from "react";
+
+export default function SigninButton() {
+  return (
+    <h2 style={{ 
+      textAlign: "center",}}>
+    <Box component="div" p={2} >
+    <Button
+      sx={{
+        width: "20%",
+        alignItems: "center"
+      }}
+      variant="text"
+    >
+      sign in
+    </Button>
+    </Box>
+          </h2>
+  );
+}

src/components/Signupbutton.tsx

@@ -0,0 +1,41 @@
+import { Button } from "@mui/material";
+import {
+  Box,
+  Paper,
+  Stack,
+  TextField,
+  Direction,
+  Typography,
+} from "@mui/material";
+import React from "react";
+
+
+import FemaleWorkerCheckingData from "../images/female-worker-checking-data.png";
+
+
+export default function SignupButton() {
+  return (
+
+
+
+
+
+
+
+
+  <h2 style={{ textAlign: "center" }}>
+  <Box component="div" p={2}>
+
+    <Button
+     color="primary"
+      sx={{
+        width: "20%",
+        alignItems: "center"      }}
+      variant="text"
+    >
+      sign up
+    </Button>
+    </Box>
+          </h2>
+  );
+}

src/images/cattumaguro.png:Zone.Identifier

@@ -0,0 +1,3 @@
+[ZoneTransfer]
+ZoneId=3
+HostUrl=https://cdn.discordapp.com/attachments/1104767562471964784/1109454765433311322/118_2.png

src/pages/signin.tsx

@@ -0,0 +1,77 @@
+import { AdditiveAnimationBlendMode, GridHelper, PlaneHelper } from "three";
+import React, { useState } from "react";
+import {
+  Box,
+  Button,
+  Paper,
+  Stack,
+  TextField,
+  Typography,
+} from "@mui/material";
+import LockOutlinedIcon from "@mui/icons-material/LockOutlined";
+import { Diversity1 } from "@mui/icons-material";
+export const Login = () => {
+  const [isRevealPassword, setIsRevealPassword] = useState(false);
+  const titleClass: string = "title";
+  return (
+    <Box
+      component="div"
+      sx={{ width: "100vw", height: "100vh", backgroundColor: "#FFFDE2" }}
+      display="flex"
+    >
+      <Paper
+        sx={{
+          width: "50%",
+          margin: "auto",
+          marginY: "auto",
+          p: 3,
+          backgroundColor: "#FFFDcc",
+        }}
+      >
+        <Typography
+          color="primary"
+          sx={{
+            //  color: "#03A40",
+            textAlign: "center",
+            fontWeight: "bold",
+          }}
+          variant="h4"
+          fontWeight=""
+        >
+          SIGN IN
+        </Typography>
+        <Stack>
+          <Stack p={2} spacing={2} sx={{ justifyContent: "center" }}>
+            <TextField
+              sx={{ backgroundColor: "#FFFDED" }}
+              placeholder="必須"
+              required
+              id="outlined-required"
+              label="メールアドレス"
+            />
+            <TextField
+              required
+              label=" パスワード　(パスワードは半角16文字以上で入力してください。) "
+              type="password"
+              placeholder="必須"
+              sx={{ backgroundColor: "#FFFDED" }}
+            />
+          </Stack>
+          <h2 style={{ textAlign: "center" }}>
+            <Box component="div" p={2}>
+              <Button
+                sx={{
+                  width: "20%",
+                }}
+                variant="contained"
+              >
+                送信
+              </Button>
+            </Box>
+          </h2>
+        </Stack>
+      </Paper>
+    </Box>
+  );
+};
+export default Login;

src/pages/toppage.tsx

@@ -0,0 +1,49 @@
+import { Box } from "@mui/material";
+import SigninButton from "../components/Signinbutton";
+import SignupButton from "../components/Signupbutton";
+import { Button, Paper, Stack, TextField, Typography } from "@mui/material";
+import { Style } from "@mui/icons-material";
+import Image from "next/image";
+import cattumaguro from "../images/cattumaguro.png";
+import { isTemplateSpan } from "typescript";
+
+export default function Toppage() {
+  return (
+      <div>
+
+      <Paper
+        sx={{
+            width: "100vw",
+            height: "100vh",
+            margin: "auto",
+            marginY: "auto",
+            p: 3,
+            backgroundColor: "#FFFDE2",
+        }}
+      >
+        <Box component="div" p={10}>
+          <Typography
+            color="primary"
+            sx={{
+                textAlign: "center",
+                fontWeight: "bold",
+            }}
+            variant="h4"
+            fontWeight=""
+          >
+            にゃーーーーーん
+          </Typography>
+        </Box>
+
+        <SigninButton />
+        <SignupButton />
+<Image
+  src={cattumaguro}
+  alt="cattumaguro.png"
+  height={300}
+  width={300}
+/>
+      </Paper>
+    </div>
+  );
+}