converted slug into reusable components

Signed-off-by: heyhiru <hirentimbadiya74@gmail.com>

client/src/components/Lobby.jsx

@@ -1,6 +1,7 @@
 import { useSocket } from '@/context/SocketProvider';
 import { useRouter } from 'next/router';
-import React, { useCallback, useEffect, useState } from 'react'
+import React, { useCallback, useEffect, useState } from 'react';
+import VideoCallIcon from '@mui/icons-material/VideoCall';
 
 const LobbyScreen = () => {
     const [email, setEmail] = useState("");
@@ -29,7 +30,12 @@ const LobbyScreen = () => {
 
     return (
         <div className='flex flex-col items-center justify-center h-screen bg-gray-100'>
-            <h1 className='text-3xl font-semibold mb-5 mt-5 '>Lobby</h1>
+            <h1 className='text-5xl font-[15px] mb-5 mt-5 text-center font-josefin italic'>Video<VideoCallIcon sx={{ fontSize: 70, color: 'rgb(30,220,30)' }} />Peers</h1>
+            <p className='text-2xl mt-2 mb-4 text-center md:max-w-[400px] max-w-[300px] text-gray-600'>
+                Peer-to-Peer video calls, powered by <b>WebRTC!</b>
+                <br />
+                Bring People Closer Together.
+            </p>
             <div className='bg-white p-6 rounded shadow-md'>
                 <form className='flex flex-col items-center justify-center'
                     onSubmit={handleSubmitForm}
@@ -38,6 +44,7 @@ const LobbyScreen = () => {
                     <input
                         type="email"
                         id='email'
+                        required
                         value={email}
                         autoComplete='off'
                         onChange={(e) => setEmail(e.target.value)}
@@ -45,14 +52,15 @@ const LobbyScreen = () => {
                     <br />
                     <label htmlFor="room">Room Number</label>
                     <input
-                        type="text"
+                        type="number"
                         id='room'
+                        required
                         autoComplete='off'
                         value={room}
                         onChange={(e) => setRoom(e.target.value)}
                     />
                     <br />
-                    <button  className='bg-blue-500 hover:bg-blue-600'>
+                    <button className='bg-blue-500 hover:bg-blue-600'>
                         Join
                     </button>
                 </form>