feat: add login page

application/frontend/src/pages/Home/Home.styles.ts

@@ -0,0 +1,50 @@
+import { Box, Card, Typography } from "@mui/material"
+import { styled } from "@mui/material/styles"
+
+export const RootContainer = styled(Box)({
+  display: "flex",
+  height: "100vh",
+  width: "100%",
+})
+
+export const ImageContainer = styled(Box)({
+  width: "50%",
+  backgroundImage: `url(src/assets/loginpage.svg)`,
+  backgroundSize: "cover",
+  backgroundPosition: "center",
+})
+
+export const ContentContainer = styled(Box)({
+  width: "50%",
+  padding: "20px",
+  display: "flex",
+  flexDirection: "column",
+})
+
+export const SearchContainer = styled(Box)({
+  marginBottom: "20px",
+})
+
+export const ProfileCard = styled(Card)({
+  marginBottom: "20px",
+})
+
+export const HeaderSection = styled(Box)({
+  display: "flex",
+  alignItems: "center",
+  justifyContent: "space-between",
+  gap: "16px",
+  marginTop: "49px",
+})
+
+export const TitleSection = styled(Box)({
+  display: "flex",
+  alignItems: "center",
+  gap: "16px",
+  flex: 1,
+})
+
+export const StyledTitle = styled(Typography)({
+  fontSize: "34px",
+  fontWeight: 600,
+})

application/frontend/src/pages/Home/Home.tsx

@@ -1,3 +1,74 @@
-export const Home = () => {
-  return <>Welcome</>
+import React, { useState } from "react"
+import { useTranslation } from "react-i18next"
+
+import SearchIcon from "@mui/icons-material/Search"
+import { CardContent, Grid, Typography } from "@mui/material"
+
+import { SearchBar } from "src/components/SearchBar"
+
+import {
+  ContentContainer,
+  HeaderSection,
+  ImageContainer,
+  ProfileCard,
+  RootContainer,
+  SearchContainer,
+  StyledTitle,
+  TitleSection,
+} from "./Home.styles"
+
+export const Home: React.FC = () => {
+  const [searchQuery, setSearchQuery] = useState<string>("")
+  const { t } = useTranslation()
+
+  const handleSearchChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+    setSearchQuery(e.target.value)
+  }
+
+  const handleClearSearch = () => {
+    setSearchQuery("")
+  }
+
+  return (
+    <RootContainer>
+      <ImageContainer />
+
+      <ContentContainer>
+        <HeaderSection>
+          <TitleSection>
+            <StyledTitle>{t("selectUser")}</StyledTitle>
+          </TitleSection>
+        </HeaderSection>
+        <SearchContainer>
+          <SearchBar
+            searchQuery={searchQuery}
+            onSearchChange={handleSearchChange}
+            onClearSearch={handleClearSearch}
+            variant="outlined"
+            startIcon={<SearchIcon />}
+            placeholder={t("search")}
+          />
+        </SearchContainer>
+
+        <Grid container spacing={2}>
+          {[1, 2, 3].map((profile) => (
+            <Grid item xs={12} sm={6} md={4} key={profile}>
+              <ProfileCard>
+                <CardContent>
+                  <Typography variant="h5" component="div">
+                    Профиль {profile}
+                  </Typography>
+                  <Typography variant="body2" color="text.secondary">
+                    Краткое описание профиля {profile}.
+                  </Typography>
+                </CardContent>
+              </ProfileCard>
+            </Grid>
+          ))}
+        </Grid>
+      </ContentContainer>
+    </RootContainer>
+  )
 }
+
+export default Home