Feature/#3 top page

public/images/cattumaguro.png:Zone.Identifier

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

src/components/Signinbutton.tsx

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

src/components/Signupbutton.tsx

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

src/components/Todoadd.tsx

@@ -0,0 +1,37 @@
+import { Paper, TextField, Typography } from "@mui/material";
+import DatePick from "./DatePick";
+import Request from "./Request";
+
+export function TodoAdd() {
+    return (
+        <Paper
+            elevation={3}
+            sx={{
+                p: 4,
+                width: "80%",
+                height: "40%",
+                m: "5px auto",
+            }}
+        >
+            <Typography
+                variant={"h5"}
+                sx={{ backgroundColor: "#ffffff", textAlign: "center" }}
+            >
+                Add Todo
+            </Typography>
+            <TextField
+                id="outlined-multiline-flexible"
+                label="Todo"
+                multiline
+                maxRows={4}
+                sx={{
+                    width: "100%",
+                    textAlign: "center",
+                    m: "0 auto",
+                }}
+            />
+            <DatePick />
+            <Request />
+        </Paper>
+    );
+}

src/pages/top.tsx

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

src/styles/globals.css

@@ -1,6 +1,6 @@
-@tailwind base;
+/* @tailwind base;
 @tailwind components;
-@tailwind utilities;
+@tailwind utilities; */
 
 :root {
   --foreground-rgb: 0, 0, 0;