feat: add login screen for mobile version

package.json

@@ -52,8 +52,10 @@
     "normalize.css": "8.0.1",
     "react": "18.2.0",
     "react-dom": "18.2.0",
+    "react-hook-form": "7.53.0",
     "react-i18next": "13.5.0",
     "react-router-dom": "6.22.1",
+    "zod": "3.23.8",
     "zustand": "4.5.1"
   },
   "devDependencies": {

src/components/Icon/data.ts

@@ -5,6 +5,7 @@ import Circle from './icons/circle.svg?react';
 import Close from './icons/close.svg?react';
 import Discord from './icons/discord.svg?react';
 import TriangleDropArrow from './icons/drop-down.svg?react';
+import Email from './icons/email.svg?react';
 import Facebook from './icons/facebook.svg?react';
 import Hamburguer from './icons/hamburguer.svg?react';
 import Instagram from './icons/instagram.svg?react';
@@ -30,6 +31,7 @@ export const icons = {
   circle: Circle,
   close: Close,
   discord: Discord,
+  email: Email,
   facebook: Facebook,
   hamburguer: Hamburguer,
   instagram: Instagram,

src/pages/home/home.tsx

@@ -1,5 +1,6 @@
 import { ReactNode } from 'react';
 
+import Login from '~pages/login/login';
 import isEmpty from 'lodash.isempty';
 
 import { useSocialMediaStore } from '~stores/useSocialMediaStore/useSocialMediaStore';
@@ -21,6 +22,7 @@ function Home(): ReactNode {
     <>
       <div className={scss.header}>
         <Header />
+        <Login />
       </div>
       <main className={scss.content}>
         <aside className={scss.aside}>