myproject/my-app/src/app/pages/SetName/SetName.css

+*
+{
+    margin: 0;
+    padding: 0;
+    box-sizing: border-box;
+    font-family: 'Poppins', sans-serif;
+}
+
+.SetName-Body
+{
+    z-index: 2000;
+    display: flex;
+    position: absolute;
+    justify-content: center;
+    align-items: center;
+    min-height: 100vh;
+    width: 100vw;
+    background-size: cover;
+    background: url('../../public/SetbackGround.jpg') no-repeat center;
+}
+
+.login-box
+{
+    position: relative;
+    width: 400px;
+    height: 450px;
+    background-color: transparent;
+    border: 2px solid rgba(255, 255 , 255, .5);
+    border-radius: 20px;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    backdrop-filter: blur(15px);
+}
+
+h2
+{
+    font-size: 2em;
+    color: white;
+    text-align: center;
+}
+
+.input-box
+{
+    position: relative;
+    width: 310px;
+    margin: 30px 0;
+    border-bottom: 2px solid white;
+}
+
+.input-box label
+{
+    position: absolute;
+    top: 50%;
+    left: 5px;
+    transform: translateY(-50%);
+    font-size: 1em;
+    color: white;
+    pointer-events: none;
+    transition: .5s;
+}
+
+.input-box input:focus~label,
+.input-box input:valid~label
+{
+    top: -5px;
+}
+
+.input-box input
+{
+    width: 100%;
+    height: 50px;
+    border: none;
+    outline: none;
+    background-color: transparent;
+    color: white;
+    font-size: 1em;
+    padding: 0 35px 0 5px;
+}
+
+.input-box .icon
+{
+    position: absolute;
+    right: 8px;
+    color: white;
+    font-size: .9em;
+    line-height: 57px;
+}
+
+.SetName-button
+{
+    outline: none;
+    border: none;
+    width: 100%;
+    height: 50px;
+    background-color: white;
+    border-radius: 40px;
+    cursor: pointer;
+    color: black;
+    font-size: 1em;
+    font-weight: bold;
+}
+
+.SetName-button:hover
+{
+    background-color: lightgray;
+}

myproject/my-app/src/app/pages/SetName/SetName.tsx

+'use client';
+
+import "./SetName.css"
+import { MdPerson } from "react-icons/md";
+import { useRouter } from "next/compat/router";
+import { useState } from "react";
+
+export function SetName({ onLogin }: { onLogin: (name: string) => void }) {
+    const [userName, setUserName] = useState('');
+
+    const handleSubmit = async (e: React.FormEvent) => {
+        e.preventDefault();
+
+        e.preventDefault();
+        if(userName.trim()) {
+            onLogin(userName);
+        }
+    }
+    return (
+        <div className="SetName-Body">
+            <div className="login-box">
+                <form onSubmit={handleSubmit}>
+                    <h2>Login</h2>
+                    <div className="input-box">
+                        <span className="icon">
+                            <MdPerson />
+                        </span>
+                        <input
+                            required
+                            value={userName}
+                            onChange={(e) => setUserName(e.target.value)} />
+                        <label>Name</label>
+                    </div>
+                    <div>
+                        <button className="SetName-button" type="submit">Login in</button>
+                    </div>
+                </form>
+            </div>
+        </div>
+    );
+}
\ No newline at end of file