home page is done

src/components/home/Card.jsx

@@ -0,0 +1,77 @@
+import React from 'react';
+import { URLs } from "../../__data__/urls";
+
+import styled from "styled-components";
+
+const Card = (props) => {
+    const interlocutorId = props.id
+
+    const hexToRgb = (hex) => {
+        hex = hex.replace(/^#/, '');
+
+        let r = parseInt(hex.slice(0, 2), 16);
+        let g = parseInt(hex.slice(2, 4), 16);
+        let b = parseInt(hex.slice(4, 6), 16);
+
+        return `${r}, ${g}, ${b}`;
+    }
+
+    const handleClick = (event, id) => {
+        localStorage.setItem('interlocutorId', id);
+    };
+
+    const StyledCard = styled.div`
+        box-shadow: 0 10px 40px rgba(176, 175, 189, 0.85);
+
+        padding: 2vw;
+
+        display: flex;
+        flex-direction: column;
+
+        border-radius: 2vw;
+
+        align-items: flex-start;
+        justify-content: space-between;
+
+        background-color: ${props => props.color 
+                ? `rgba(${hexToRgb(props.color)}, 0.63)` 
+                : 'rgba(255, 255, 255, 0.63)'};
+
+        transition: box-shadow 0.3s ease-in;
+        
+        div, h2 {
+            transition: color 0.3s ease-in;
+        }
+
+        &:hover {
+            box-shadow: 0 10px 40px rgb(${hexToRgb(props.color)});
+            cursor: pointer;
+            
+            div, h2 {
+                color: white;
+            }
+        }
+
+        @media only screen and (max-width: 800px) {
+            flex-direction: column;
+            
+            border-radius: 2vh;
+            padding: 3vw;
+        }
+    `
+
+  return (
+      <a
+          href={URLs.chat.url}
+          className="ChatCard"
+          onClick={(event) => handleClick(event, interlocutorId)}
+      >
+          <StyledCard color={props.color}>
+              <h2>{props.name}</h2>
+              <div className="lastMessageStyle">{props.lastMessage}</div>
+          </StyledCard>
+      </a>
+  );
+};
+
+export default Card;

src/components/home/ChatsList.jsx

@@ -0,0 +1,41 @@
+import React from 'react';
+import Card from "./Card.jsx";
+
+const ChatsList = (props) => {
+    const { chats } = props;
+
+    const colorMap = {
+        orange: 'FFA500FF',
+        aqua: '00FFFFFF',
+        crimson: 'DC143CFF',
+        red: 'FF0000FF',
+        violet: '8A2BE2FF',
+        seagreen: '20B2AAFF',
+        green: 'ADFF2FFF',
+        blue: '0000FFFF',
+        pink: 'FF1493FF',
+        cyan: '72FAFAFF'
+    }
+
+    function getColor(chatId) {
+        const keys = Object.keys(colorMap);
+        const index = chatId % keys.length;
+        return colorMap[keys[index]];
+    }
+
+  return (
+      <div className="ChatsList">
+          {chats.map((item, index) => (
+              <Card
+                  key={index}
+                  name={item.name}
+                  lastMessage={item.lastMessage}
+                  id={item.id}
+                  color={getColor(item.id)}
+              />
+          ))}
+      </div>
+  );
+};
+
+export default ChatsList;

src/components/home/HomeTitle.jsx

@@ -0,0 +1,14 @@
+import React from 'react';
+import chatIcon from './../../../images/chat.svg';
+import { URLs } from "../../__data__/urls";
+
+const HomeTitle = () => {
+  return (
+      <a className="homeTitleWrapper" href={URLs.baseUrl}>
+          <h1 className="montecarlo-regular homeTitle">Enterfront</h1>
+          <img src={chatIcon} alt="Chat Icon" className="chatIcon"/>
+      </a>
+  );
+};
+
+export default HomeTitle;

src/components/home/css/card.css

@@ -0,0 +1,46 @@
+.ChatsList {
+    display: flex;
+    flex-wrap: wrap;
+    justify-content: center;
+
+    margin: 3rem;
+}
+
+.ChatCard {
+    margin-bottom: 40px;
+    max-width: 30vw;
+    min-width: 20vw;
+
+    margin-left: 1.2vw;
+    margin-right: 1.2vw;
+
+    border-radius: 2vw;
+
+    transition: transform 0.2s ease-in;
+}
+
+.lastMessageStyle {
+    width: 80%;
+
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+}
+
+@media only screen and (max-width: 800px) {
+    .ChatCard {
+        width: 30vw;
+        max-width: 30vw;
+
+        margin-left: 4vw;
+        margin-right: 4vw;
+    }
+
+    .ChatsList {
+        margin: 10vw;
+    }
+}
+
+.ChatCard:hover {
+    transform: translate(2px, -10px);
+}

src/components/home/css/homeTitle.css

@@ -0,0 +1,25 @@
+.homeTitleWrapper {
+    display: flex;
+    flex-direction: row;
+}
+
+.homeTitle {
+    font-size: 5vw;
+    transition: color 0.3s ease-in;
+}
+
+.homeTitleWrapper:hover h1 {
+    color: orange;
+}
+
+
+@media only screen and (max-width: 800px) {
+    .homeTitle {
+        font-size: 8vh;
+    }
+}
+
+.chatIcon {
+    width: 6vw;
+    margin-left: 3vw;
+}

src/components/home/index.css

@@ -0,0 +1,2 @@
+@import url("./css/card.css");
+@import url("./css/homeTitle.css");