Finished feature 582

src/assets/images/svg/building-shield.svg

@@ -0,0 +1,10 @@
+<svg width="21" height="18" viewBox="0 0 21 18" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g clip-path="url(#clip0_1318_8059)">
+<path d="M0 1.6875C0 0.755508 0.755508 0 1.6875 0H11.8125C12.7441 0 13.5 0.755508 13.5 1.6875V7.27734L12.0094 7.875H9.5625C9.25313 7.875 9 8.12813 9 8.4375V10.6875C9 10.7191 9.00352 10.7473 9.00703 10.7789C9.08789 12.8215 9.8543 15.8695 12.477 17.8629C12.273 17.9508 12.048 18 11.8125 18H8.4375V15.1875C8.4375 14.2559 7.68164 13.5 6.75 13.5C5.81836 13.5 5.0625 14.2559 5.0625 15.1875V18H1.6875C0.755508 18 0 17.2441 0 16.3125V1.6875ZM2.8125 7.875C2.50172 7.875 2.25 8.12813 2.25 8.4375V9.5625C2.25 9.87187 2.50172 10.125 2.8125 10.125H3.9375C4.24687 10.125 4.5 9.87187 4.5 9.5625V8.4375C4.5 8.12813 4.24687 7.875 3.9375 7.875H2.8125ZM5.625 9.5625C5.625 9.87187 5.87813 10.125 6.1875 10.125H7.3125C7.62187 10.125 7.875 9.87187 7.875 9.5625V8.4375C7.875 8.12813 7.62187 7.875 7.3125 7.875H6.1875C5.87813 7.875 5.625 8.12813 5.625 8.4375V9.5625ZM2.25 5.0625C2.25 5.37187 2.50172 5.625 2.8125 5.625H3.9375C4.24687 5.625 4.5 5.37187 4.5 5.0625V3.9375C4.5 3.62812 4.24687 3.375 3.9375 3.375H2.8125C2.50172 3.375 2.25 3.62812 2.25 3.9375V5.0625ZM6.1875 3.375C5.87813 3.375 5.625 3.62812 5.625 3.9375V5.0625C5.625 5.37187 5.87813 5.625 6.1875 5.625H7.3125C7.62187 5.625 7.875 5.37187 7.875 5.0625V3.9375C7.875 3.62812 7.62187 3.375 7.3125 3.375H6.1875ZM9 5.0625C9 5.37187 9.25313 5.625 9.5625 5.625H10.6875C10.9969 5.625 11.25 5.37187 11.25 5.0625V3.9375C11.25 3.62812 10.9969 3.375 10.6875 3.375H9.5625C9.25313 3.375 9 3.62812 9 3.9375V5.0625ZM14.8746 7.93477C15.075 7.85391 15.3 7.85391 15.5004 7.93477L19.7191 9.62227C20.0391 9.75234 20.25 10.0617 20.25 10.4062C20.25 12.6316 19.3395 16.3406 15.5109 17.9367C15.3035 18.0211 15.0715 18.0211 14.8641 17.9367C11.0355 16.3406 10.125 12.6316 10.125 10.4062C10.125 10.0617 10.3043 9.75234 10.6559 9.62227L14.8746 7.93477ZM15.1875 9.62578V16.2316C17.5852 15.0715 18.4043 12.7512 18.5414 10.9371L15.1875 9.62578Z" fill="#D4D4D4"/>
+</g>
+<defs>
+<clipPath id="clip0_1318_8059">
+<rect width="20.25" height="18" fill="white"/>
+</clipPath>
+</defs>
+</svg>

src/assets/images/svg/dollar.svg

@@ -0,0 +1,3 @@
+<svg width="12" height="18" viewBox="0 0 12 18" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M5.62479 0C6.24706 0 6.74979 0.503789 6.74979 1.125V2.37937C6.80604 2.38676 6.85878 2.39484 6.91503 2.40293C7.28768 2.45848 8.39862 2.63742 8.85565 2.75309C9.42518 2.90566 9.82245 3.51914 9.66776 4.12031C9.51659 4.72148 8.90487 5.08711 8.30018 4.93594C7.97323 4.81992 6.97831 4.68633 6.58456 4.63008C5.45604 4.46133 4.48924 4.5457 3.82479 4.79883C3.18213 5.04492 2.9153 5.39297 2.84463 5.7832C2.77643 6.15938 2.82811 6.37383 2.88999 6.50742C2.95643 6.64805 3.08616 6.80625 3.34456 6.97852C3.9162 7.35469 4.78807 7.60781 5.9201 7.91367L6.01854 7.9418C7.01698 8.2125 8.24042 8.54648 9.14745 9.14766C9.64315 9.47813 10.1107 9.92461 10.399 10.5434C10.6908 11.1691 10.7541 11.8723 10.6205 12.5895C10.3744 13.957 9.42518 14.85 8.31073 15.3141C7.8326 15.5109 7.30526 15.6375 6.74979 15.7008V16.875C6.74979 17.4973 6.24706 18 5.62479 18C5.00253 18 4.49979 17.4973 4.49979 16.875V15.648C4.48573 15.648 4.46815 15.6129 4.45409 15.641H4.44706C3.59276 15.5074 2.18194 15.1383 1.23026 14.7164C0.662486 14.4633 0.4069 13.7988 0.659322 13.2293C0.911744 12.6633 1.57655 12.4066 2.11268 12.6598C2.87909 12.9867 4.08846 13.3066 4.78807 13.4156C5.91307 13.5844 6.83768 13.4859 7.46346 13.2328C8.0576 12.9902 8.32831 12.6387 8.40565 12.2168C8.47245 11.8406 8.42323 11.6262 8.35995 11.4926C8.29315 11.352 8.16307 11.1938 7.90643 11.0215C7.33338 10.6453 6.46151 10.3922 5.32948 10.0863L5.23104 10.0582C4.2326 9.7875 3.00846 9.45352 2.10073 8.85234C1.60467 8.52188 1.13991 8.07539 0.851275 7.45664C0.558424 6.83086 0.494791 6.12773 0.630846 5.37891C0.879752 4.01133 1.86483 3.1391 3.02182 2.69754C3.47956 2.52281 3.97596 2.40785 4.49979 2.34598V1.125C4.49979 0.503789 5.00253 0 5.62479 0Z" fill="#FEB005"/>
+</svg>

src/assets/images/svg/info.svg

@@ -0,0 +1,10 @@
+<svg width="7" height="18" viewBox="0 0 7 18" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g clip-path="url(#clip0_1318_8061)">
+<path d="M5.625 15.7496H4.5V7.87465C4.5 7.25273 3.99621 6.74965 3.375 6.74965H1.125C0.503789 6.74965 0 7.25273 0 7.87465C0 8.49656 0.503789 8.96801 1.125 8.96801H2.25V15.718H1.125C0.503789 15.718 0 16.2211 0 16.843C0 17.4649 0.503789 17.968 1.125 17.968H5.625C6.24621 17.968 6.75 17.4649 6.75 16.843C6.75 16.2211 6.24727 15.7496 5.625 15.7496ZM3.375 4.49965C4.30699 4.49965 5.0625 3.74414 5.0625 2.81215C5.0625 1.88016 4.30664 1.125 3.375 1.125C2.44336 1.125 1.6875 1.88051 1.6875 2.8125C1.6875 3.74449 2.44301 4.49965 3.375 4.49965Z" fill="#D4D4D4"/>
+</g>
+<defs>
+<clipPath id="clip0_1318_8061">
+<rect width="6.75" height="18" fill="white"/>
+</clipPath>
+</defs>
+</svg>

src/components/About/AboutComponent.js

@@ -0,0 +1,35 @@
+import React from "react";
+import PropTypes from "prop-types";
+import AboutHeader from "./AboutHeader/AboutHeader";
+import AboutSection from "./AboutSection/AboutSection";
+import { useTranslation } from "react-i18next";
+import SectionImage1 from "../../assets/images/about/about-1.png";
+import SectionImage2 from "../../assets/images/about/about-2.png";
+import CheckOffersButton from "./CheckOffersButton/CheckOffersButton";
+
+const AboutComponent = () => {
+  const { t } = useTranslation();
+  return (
+    <>
+      <AboutHeader />
+      <AboutSection
+        title={t("about.history.title")}
+        text={t("about.history.text")}
+        image={SectionImage1}
+      />
+      <AboutSection
+        title={t("about.vision.title")}
+        text={t("about.vision.text")}
+        image={SectionImage2}
+        reverse
+      />
+      <CheckOffersButton />
+    </>
+  );
+};
+
+AboutComponent.propTypes = {
+  children: PropTypes.node,
+};
+
+export default AboutComponent;

src/components/About/AboutHeader/AboutHeader.js

@@ -0,0 +1,21 @@
+import React from 'react'
+import PropTypes from 'prop-types'
+import { AboutHeaderContainer, AboutHeaderLine, AboutHeaderParagraph, AboutHeaderTitle } from './AboutHeader.styled'
+import { useTranslation } from 'react-i18next'
+
+const AboutHeader = () => {
+    const {t} = useTranslation();
+  return (
+    <AboutHeaderContainer>
+        <AboutHeaderTitle>{t("about.header.title")}</AboutHeaderTitle>
+        <AboutHeaderLine/>
+        <AboutHeaderParagraph>{t("about.header.paragraph")}</AboutHeaderParagraph>
+    </AboutHeaderContainer>
+  )
+}
+
+AboutHeader.propTypes = {
+    children: PropTypes.node,
+}
+
+export default AboutHeader

src/components/About/AboutHeader/AboutHeader.styled.js

@@ -0,0 +1,27 @@
+import { Box, styled, Typography } from "@mui/material";
+import selectedTheme from "../../../themes";
+
+export const AboutHeaderContainer = styled(Box)`
+  margin: 72px;
+`;
+export const AboutHeaderTitle = styled(Typography)`
+  font-family: "Open Sans";
+  font-style: normal;
+  font-weight: 700;
+  font-size: 72px;
+  line-height: 98px;
+  color: ${selectedTheme.primaryPurple};
+`;
+export const AboutHeaderParagraph = styled(Typography)`
+  font-family: "Open Sans";
+  font-style: normal;
+  font-weight: 400;
+  font-size: 16px;
+  line-height: 22px;
+  color: ${selectedTheme.primaryGrayText};
+`;
+export const AboutHeaderLine = styled(Box)`
+    border-top: 1px solid ${selectedTheme.iconYellowColor};
+    width: 90px;
+    margin-bottom: 26px;
+`;

src/components/About/AboutSection/AboutSection.js

@@ -0,0 +1,31 @@
+import React from "react";
+import PropTypes from "prop-types";
+import {
+  AboutSectionContainer,
+  AboutSectionImage,
+  AboutSectionText,
+  AboutSectionTextContainer,
+  AboutSectionTitle,
+} from "./AboutSection.styled";
+
+const AboutSection = (props) => {
+  return (
+    <AboutSectionContainer reverse={props.reverse}>
+      <AboutSectionTextContainer>
+        <AboutSectionTitle>{props.title}</AboutSectionTitle>
+        <AboutSectionText>{props.text}</AboutSectionText>
+      </AboutSectionTextContainer>
+      <AboutSectionImage src={props.image} />
+    </AboutSectionContainer>
+  );
+};
+
+AboutSection.propTypes = {
+  children: PropTypes.node,
+  title: PropTypes.string,
+  text: PropTypes.string,
+  image: PropTypes.string,
+  reverse: PropTypes.bool,
+};
+
+export default AboutSection;

src/components/About/AboutSection/AboutSection.styled.js

@@ -0,0 +1,44 @@
+import { Box, Typography } from "@mui/material";
+import styled from "styled-components";
+import selectedTheme from "../../../themes";
+
+export const AboutSectionContainer = styled(Box)`
+  ${(props) =>
+    props.reverse
+      ? `
+    margin-right: 72px
+  `
+      : `margin-left: 72px`};
+  display: flex;
+  flex-direction: ${(props) => (props.reverse ? "row-reverse" : "row")};
+  gap: 144px;
+  margin-bottom: 72px;
+`;
+export const AboutSectionTitle = styled(Typography)`
+  font-family: "Open Sans";
+  font-style: normal;
+  font-weight: 600;
+  font-size: 24px;
+  line-height: 33px;
+  color: ${selectedTheme.primaryPurple};
+  margin-bottom: 18px;
+`;
+export const AboutSectionText = styled(Typography)`
+  font-family: "Open Sans";
+  font-style: normal;
+  font-weight: 400;
+  font-size: 16px;
+  line-height: 22px;
+  color: ${selectedTheme.primaryGrayText};
+`;
+export const AboutSectionImage = styled.img`
+  display: flex;
+  flex: 1;
+  width: 648px;
+  height: 345px;
+`;
+export const AboutSectionTextContainer = styled(Box)`
+  display: flex;
+  flex: 1;
+  flex-direction: column;
+`;

src/components/About/CheckOffersButton/CheckOffersButton.js

@@ -0,0 +1,23 @@
+import React from "react";
+import PropTypes from "prop-types";
+import { CheckOffersButtonContainer } from "./CheckOffersButton.styled";
+import selectedTheme from "../../../themes";
+import { useTranslation } from "react-i18next";
+
+const CheckOffersButton = () => {
+    const {t} = useTranslation();
+  return (
+    <CheckOffersButtonContainer
+      buttoncolor={selectedTheme.primaryPurple}
+      variant="outlined"
+    >
+      {t("about.searchOffers")}
+    </CheckOffersButtonContainer>
+  );
+};
+
+CheckOffersButton.propTypes = {
+  children: PropTypes.node,
+};
+
+export default CheckOffersButton;

src/components/About/CheckOffersButton/CheckOffersButton.styled.js

@@ -0,0 +1,25 @@
+import styled from "styled-components";
+import selectedTheme from "../../../themes";
+import { PrimaryButton } from "../../Buttons/PrimaryButton/PrimaryButton";
+
+export const CheckOffersButtonContainer = styled(PrimaryButton)`
+  position: absolute;
+  bottom: 44px;
+  right: 36px;
+  width: 180px;
+  height: 49px;
+  & button {
+    color: ${selectedTheme.primaryPurple};
+    font-family: "Open Sans";
+    font-style: normal;
+    font-weight: 600;
+    font-size: 12px;
+    line-height: 16px;
+    letter-spacing: 1.5px;
+    text-transform: uppercase;
+  }
+  & button:hover {
+    color: white;
+    background-color: ${selectedTheme.primaryPurple} !important;
+  }
+`;

src/components/Popovers/HeaderPopover/HeaderPopover.js

@@ -78,12 +78,14 @@ const HeaderPopover = (props) => {
           </PopoverButton>
         )}
       </PopoverButtonsContainer>
+      {props.children}
     </HeaderPopoverContainer>
   );
 };
 
 HeaderPopover.propTypes = {
   title: PropTypes.string,
+  children: PropTypes.node,
   items: PropTypes.array,
   buttonText: PropTypes.string,
   isProfile: PropTypes.bool,

src/components/Popovers/HeaderPopover/HeaderPopover.styled.js

@@ -40,9 +40,13 @@ export const PopoverListItemProfileAvatar = styled(ProfileAvatar)`
 export const PopoverListItemAvatarContainer = styled(ListItemAvatar)``;
 export const PopoverButton = styled(Button)`
   color: ${selectedTheme.primaryPurple};
-  font-weight: 500;
+  font-family: "Open Sans";
+  font-weight: 600;
+  font-size: 12px;
   text-align: right;
-  height: 20px;
+  letter-spacing: 1.5px;
+  text-transform: uppercase;
+  padding: 0;
 `;
 export const PopoverListItemTextContainer = styled(ListItemText)`
   & span {
@@ -70,7 +74,7 @@ export const EyeIcon = styled(Eye)`
 `;
 export const PopoverButtonsContainer = styled(Box)`
   flex-direction: column;
-  display: ${props => props.hideButtons ? 'none' : 'flex'};
+  display: ${(props) => (props.hideButtons ? "none" : "flex")};
   align-items: flex-end;
 `;
 export const PopoverNoItemsText = styled(Typography)`

src/components/Popovers/MyProfile/AboutButton/AboutButton.js

@@ -0,0 +1,37 @@
+import React from "react";
+import PropTypes from "prop-types";
+import { useTranslation } from "react-i18next";
+import { ABOUT_PAGE } from "../../../../constants/pages";
+import { GrayButton } from "../MyProfile.styled";
+import { PopoverButton } from "../../HeaderPopover/HeaderPopover.styled";
+import { InfoIcon } from "./AboutButton.styled";
+import { useHistory } from "react-router-dom";
+
+const AboutButton = () => {
+  const { t } = useTranslation();
+  const history = useHistory();
+  const seeAbout = () => {
+    history.push(ABOUT_PAGE);
+  };
+  return (
+    <GrayButton>
+      <PopoverButton
+        sx={{
+          mr: 2,
+          mb: 2,
+        }}
+        variant="text"
+        endIcon={<InfoIcon />}
+        onClick={seeAbout}
+      >
+        {t("header.about")}
+      </PopoverButton>
+    </GrayButton>
+  );
+};
+
+AboutButton.propTypes = {
+  children: PropTypes.node,
+};
+
+export default AboutButton;

src/components/Popovers/MyProfile/AboutButton/AboutButton.styled.js

@@ -0,0 +1,8 @@
+import styled from "styled-components";
+import { ReactComponent as Info } from "../../../../assets/images/svg/info.svg";
+
+export const InfoIcon = styled(Info)`
+  margin-left: 14px;
+  position: relative;
+  right: 10px;
+`

src/components/Popovers/MyProfile/LogoutButton/LogoutButton.js

@@ -0,0 +1,43 @@
+import React from "react";
+import PropTypes from "prop-types";
+import { LogoutIcon, MiddleButton } from "./LogoutButton.styled";
+import { PopoverButton } from "../../HeaderPopover/HeaderPopover.styled";
+import { useDispatch } from "react-redux";
+import { LOGIN_PAGE } from "../../../../constants/pages";
+import { logoutUser } from "../../../../store/actions/login/loginActions";
+import selectedTheme from "../../../../themes";
+import { useTranslation } from "react-i18next";
+import { useHistory } from "react-router-dom";
+
+const LogoutButton = () => {
+  const dispatch = useDispatch();
+  const { t } = useTranslation();
+  const history = useHistory();
+  const handleLogoutSuccess = () => {
+    history.replace(LOGIN_PAGE);
+  };
+  const handleLogout = () => {
+    dispatch(logoutUser(handleLogoutSuccess));
+  };
+  return (
+    <MiddleButton>
+      <PopoverButton
+        sx={{
+          mr: 2,
+          mb: 2,
+        }}
+        variant="text"
+        endIcon={<LogoutIcon color={selectedTheme.iconYellowColor} />}
+        onClick={handleLogout}
+      >
+        {t("header.logout")}
+      </PopoverButton>
+    </MiddleButton>
+  );
+};
+
+LogoutButton.propTypes = {
+  children: PropTypes.node,
+};
+
+export default LogoutButton;

src/components/Popovers/MyProfile/LogoutButton/LogoutButton.styled.js

@@ -0,0 +1,19 @@
+import { Box } from "@mui/material";
+import styled from "styled-components";
+import { ReactComponent as Logout } from "../../../../assets/images/svg/log-out.svg";
+
+
+export const MiddleButton = styled(Box)`
+  margin: 0 16px;
+  padding-top: 14px;
+  padding-bottom: -2px;
+  border-top: 1px solid rgba(77, 77, 77, 0.12);
+  border-bottom: 1px solid rgba(77, 77, 77, 0.12);
+  text-align: right;
+  & button {
+    margin-right: 0;
+    position: relative;
+    top: 2px;
+  }
+`;
+export const LogoutIcon = styled(Logout)``;

src/components/Popovers/MyProfile/MyProfile.js

@@ -1,5 +1,9 @@
 import React, { useEffect, useState } from "react";
-import { LogoutIcon, ProfileImgPIB } from "./MyProfile.styled";
+import {
+  DollarIcon,
+  GrayButtonsContainer,
+  ProfileImgPIB,
+} from "./MyProfile.styled";
 import HeaderPopover from "../HeaderPopover/HeaderPopover";
 import { useTranslation } from "react-i18next";
 import { useDispatch, useSelector } from "react-redux";
@@ -8,10 +12,12 @@ import { selectUserId } from "../../../store/selectors/loginSelectors";
 import { fetchMineProfile } from "../../../store/actions/profile/profileActions";
 import selectedTheme from "../../../themes";
 import { EyeIcon } from "../HeaderPopover/HeaderPopover.styled";
-import { logoutUser } from "../../../store/actions/login/loginActions";
 import { useHistory } from "react-router-dom";
-import { LOGIN_PAGE } from "../../../constants/pages";
 import PropTypes from "prop-types";
+import { PRICES_PAGE } from "../../../constants/pages";
+import LogoutButton from "./LogoutButton/LogoutButton";
+import AboutButton from "./AboutButton/AboutButton";
+import PrivacyPolicyButton from "./PrivacyPolicyButton/PrivacyPolicyButton";
 
 export const MyProfile = (props) => {
   const { t } = useTranslation();
@@ -42,16 +48,15 @@ export const MyProfile = (props) => {
       ]);
     }
   }, [profile]);
-  const handleLogoutSuccess = () => {
-    history.replace(LOGIN_PAGE);
-  };
-  const handleLogout = () => {
-    dispatch(logoutUser(handleLogoutSuccess));
-  };
   const seeMyProfile = () => {
     history.push(`/profile/${userId}`);
     props.closePopover();
   };
+  const seePrices = () => {
+    history.push(PRICES_PAGE);
+  };
+
+
   return (
     <HeaderPopover
       title={t("header.myProfile")}
@@ -60,10 +65,16 @@ export const MyProfile = (props) => {
       buttonIcon={<EyeIcon color={selectedTheme.iconYellowColor} />}
       isProfile
       buttonOnClick={() => seeMyProfile()}
-      secondButtonIcon={<LogoutIcon color={selectedTheme.iconYellowColor} />}
-      secondButtonText={t("header.logout")}
-      secondButtonOnClick={handleLogout}
-    />
+      secondButtonIcon={<DollarIcon />}
+      secondButtonText={t("header.prices")}
+      secondButtonOnClick={seePrices}
+    >
+      <LogoutButton />
+      <GrayButtonsContainer>
+        <AboutButton />
+        <PrivacyPolicyButton />
+      </GrayButtonsContainer>
+    </HeaderPopover>
   );
 };
 

src/components/Popovers/MyProfile/MyProfile.styled.js

@@ -1,7 +1,8 @@
-import { TextField, Avatar } from "@mui/material";
+import { TextField, Avatar, Box } from "@mui/material";
 import styled from "styled-components";
 import PIB from "@mui/icons-material/AdminPanelSettingsOutlined";
-import { ReactComponent as Logout } from "../../../assets/images/svg/log-out.svg";
+import { ReactComponent as Dollar } from "../../../assets/images/svg/dollar.svg";
+import selectedTheme from "../../../themes";
 
 export const ProfileImgPIB = styled(PIB)`
   width: 1rem;
@@ -9,6 +10,7 @@ export const ProfileImgPIB = styled(PIB)`
   margin-right: 0.36rem;
 `;
 
+
 export const ProfileAvatar = styled(Avatar)`
   width: 63px;
   height: 63px;
@@ -30,4 +32,19 @@ export const SearchInput = styled(TextField)`
     width: 36%;
   }
 `;
-export const LogoutIcon = styled(Logout)``;
+export const GrayButton = styled(Box)`
+  text-align: right;
+  & button {
+    margin-bottom: 5.5px;
+    margin-top: 5.5px;
+    color: ${selectedTheme.primaryGrayText};
+  }
+`;
+export const GrayButtonsContainer = styled(Box)`
+  margin: 16px 0;
+`;
+export const DollarIcon = styled(Dollar)`
+  position: relative;
+  left: -4px;
+  margin-left: 10px;
+`

src/components/Popovers/MyProfile/PrivacyPolicyButton/PrivacyPolicyButton.js

@@ -0,0 +1,37 @@
+import React from "react";
+import PropTypes from "prop-types";
+import { GrayButton } from "../MyProfile.styled";
+import { PopoverButton } from "../../HeaderPopover/HeaderPopover.styled";
+import { BuildingShieldIcon } from "./PrivacyPolicyButton.styled";
+import { POLICY_PRIVACY_PAGE } from "../../../../constants/pages";
+import { useTranslation } from "react-i18next";
+import { useHistory } from "react-router-dom";
+
+const PrivacyPolicyButton = () => {
+  const { t } = useTranslation();
+  const history = useHistory();
+  const seePrivacy = () => {
+    history.push(POLICY_PRIVACY_PAGE);
+  };
+  return (
+    <GrayButton>
+      <PopoverButton
+        sx={{
+          mr: 2,
+          mb: 2,
+        }}
+        variant="text"
+        endIcon={<BuildingShieldIcon />}
+        onClick={seePrivacy}
+      >
+        {t("header.privacy")}
+      </PopoverButton>
+    </GrayButton>
+  );
+};
+
+PrivacyPolicyButton.propTypes = {
+  children: PropTypes.node,
+};
+
+export default PrivacyPolicyButton;

src/components/Popovers/MyProfile/PrivacyPolicyButton/PrivacyPolicyButton.styled.js

@@ -0,0 +1,6 @@
+import styled from "styled-components";
+import { ReactComponent as BuildingShield } from "../../../../assets/images/svg/building-shield.svg";
+
+export const BuildingShieldIcon = styled(BuildingShield)`
+
+`

src/i18n/resources/rs.js

@@ -180,6 +180,9 @@ export default {
     navMenu: "Navigacioni Meni",
     noItems: "Trenutno nema ni jedne stavke...",
     logout: "Odjavite se",
+    about: "O TRAMPI",
+    prices: "CENOVNIK",
+    privacy: "POLITIKA PRIVATNOSTI"
   },
   reviews: {
     title: "Ova kompanija još uvek nema ocenu.",
@@ -254,4 +257,19 @@ export default {
       altText: "Nažalost nemate ni jednu objavu"
     }
   },
+  about: {
+    header: {
+      title: "O Trampi",
+      paragraph: "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec ac augue tortor. Nulla facilisi. Cras vestibulum risus eget tincidunt egestas. Duis blandit enim sit amet dui vehicula luctus. Suspendisse id blandit arcu, vitae consequat nisi. Duis ut vestibulum tellus. Curabitur eu fringilla nisi."
+    },
+    history: {
+      title: "Istorija",
+      text: "Suspendisse non semper ligula. Nam nec neque non justo vehicula hendrerit vel ut ligula. Pellentesque venenatis leo at nisl facilisis euismod. Quisque at cursus quam. Praesent gravida metus erat, nec tempus nibh accumsan sed. Duis non ornare ipsum. Suspendisse justo metus, cursus eget efficitur vitae, imperdiet id neque. Ut vel commodo nunc. Morbi iaculis, arcu in commodo sollicitudin, est nisl feugiat mi, euismod accumsan odio ligula nec diam. Vestibulum eros est, ornare et varius sit amet, placerat sed nibh. Mauris elementum rutrum feugiat. Quisque consectetur, dui sed pharetra eleifend, augue nibh rhoncus felis, et feugiat tortor felis blandit dui. Ut gravida lacinia feugiat. In hac habitasse platea dictumst. Mauris cursus lectus ac libero ultrices lacinia. Sed vel nibh tincidunt, tristique arcu fermentum, sollicitudin lorem."
+    },
+    vision: {
+      title: "Naša vizija",
+      text: "Aenean ut risus faucibus, tempor urna id, luctus urna. Nam placerat scelerisque hendrerit. Nam tortor augue, porta sed nulla vitae, rutrum rhoncus arcu. Ut in leo turpis. Pellentesque eu laoreet orci. Nam id nisi mauris. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Integer nulla leo, consequat a lacus in, sollicitudin sollicitudin ex. Nunc blandit tincidunt turpis nec vestibulum. Interdum et malesuada fames ac ante ipsum primis in faucibus. Morbi tincidunt ipsum eget velit venenatis, quis sollicitudin nulla dapibus."
+    },
+    searchOffers: "Pretražite oglase"
+  }
 };

src/pages/About/AboutPage.js

@@ -1,17 +1,18 @@
-import React from 'react'
-import PropTypes from 'prop-types'
-import { AboutPageContainer } from './AboutPage.styled'
+import React from "react";
+import PropTypes from "prop-types";
+import AboutComponent from "../../components/About/AboutComponent";
+import { AboutPageContainer } from "./AboutPage.styled";
 
 const AboutPage = () => {
   return (
     <AboutPageContainer>
-        About page
+      <AboutComponent />
     </AboutPageContainer>
-  )
-}
+  );
+};
 
 AboutPage.propTypes = {
-    children: PropTypes.node,
-}
+  children: PropTypes.node,
+};
 
-export default AboutPage
+export default AboutPage;

src/pages/About/AboutPage.styled.js

@@ -3,4 +3,8 @@ import styled from "styled-components";
 
 export const AboutPageContainer = styled(Box)`
     margin-top: 80px;
+    position: relative;
+    @media (max-width: 600px) {
+        margin-top: 53px;
+    }
 `