feat: login screen design (#52)

app/components/LogginCard.tsx

@@ -1,5 +1,4 @@
-import { Slot } from "@radix-ui/react-slot";
-import React, { type ComponentPropsWithRef, forwardRef } from "react";
+import { type ComponentPropsWithRef, forwardRef } from "react";
 import { cn } from "~/libs/utils";
 import { Button } from "./Button";
 import { Card } from "./Card";

app/routes/_index/SignUp.tsx

@@ -1,7 +1,6 @@
 import type { ReactNode } from "react";
 import { type SubmitHandler, useForm } from "react-hook-form";
-import { Button } from "~/components/Button";
-import { Input } from "~/components/Input";
+import { LogginCard } from "~/components/LogginCard";
 import { supabase } from "~/libs/supabase";
 
 interface FormData {
@@ -27,10 +26,10 @@ export function SignUp(): ReactNode {
 	return (
 		<form
 			onSubmit={handleSubmit(onSubmit)}
-			className="grid justify-items-center gap-4"
+			className="grid justify-items-center gap-8"
 		>
-			<Input placeholder="名前" {...register("displayName")} />
-			<Button type="submit">登録</Button>
+			<img src="../../public/logo.svg" alt="RicoShot" className="w-full" />
+			<LogginCard className="w-full rotate-2" />
 		</form>
 	);
 }

app/routes/_index/route.tsx

@@ -16,7 +16,6 @@ export default function Page() {
 			style={{ viewTransitionName: "main" }}
 		>
 			<main className="mx-auto grid w-full max-w-screen-sm gap-y-4">
-				<Heading>ホーム</Heading>
 				{myProfile ? (
 					<ProfileCard className="rotate-2 sm:rotate-1" profile={myProfile} />
 				) : (