Finished features 583 and 584

src/assets/images/svg/send.svg

@@ -0,0 +1,4 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M22 2L11 13" stroke="#5A3984" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M22 2L15 22L11 13L2 9L22 2Z" stroke="#5A3984" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>

src/assets/images/svg/shopping-cart.svg

@@ -0,0 +1,5 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M9 22C9.55228 22 10 21.5523 10 21C10 20.4477 9.55228 20 9 20C8.44772 20 8 20.4477 8 21C8 21.5523 8.44772 22 9 22Z" stroke="#5A3984" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M20 22C20.5523 22 21 21.5523 21 21C21 20.4477 20.5523 20 20 20C19.4477 20 19 20.4477 19 21C19 21.5523 19.4477 22 20 22Z" stroke="#5A3984" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M1 1H5L7.68 14.39C7.77144 14.8504 8.02191 15.264 8.38755 15.5583C8.75318 15.8526 9.2107 16.009 9.68 16H19.4C19.8693 16.009 20.3268 15.8526 20.6925 15.5583C21.0581 15.264 21.3086 14.8504 21.4 14.39L23 6H6" stroke="#5A3984" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>

src/components/About/AboutHeader/AboutHeader.js

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

src/components/About/CheckOffersButton/CheckOffersButton.js

@@ -3,13 +3,20 @@ import PropTypes from "prop-types";
 import { CheckOffersButtonContainer } from "./CheckOffersButton.styled";
 import selectedTheme from "../../../themes";
 import { useTranslation } from "react-i18next";
+import { useHistory } from "react-router-dom";
+import { HOME_PAGE } from "../../../constants/pages";
 
 const CheckOffersButton = () => {
-    const {t} = useTranslation();
+  const { t } = useTranslation();
+  const history = useHistory();
+  const handleClick = () => {
+    history.push(HOME_PAGE);
+  };
   return (
     <CheckOffersButtonContainer
       buttoncolor={selectedTheme.primaryPurple}
       variant="outlined"
+      onClick={handleClick}
     >
       {t("about.searchOffers")}
     </CheckOffersButtonContainer>

src/components/Prices/Plan/Plan.js

@@ -0,0 +1,118 @@
+import React, { useMemo } from "react";
+import PropTypes from "prop-types";
+import {
+  BuyButton,
+  Line,
+  PlanContainer,
+  PlanDetail,
+  PlanDetailDescription,
+  PlanDetailTitle,
+  PlanIcon,
+  PlanPrice,
+  PlanPriceContainer,
+  PlanPriceMonthly,
+  PlanTitle,
+  PlanTitleDescription,
+} from "./Plan.styled";
+import selectedTheme from "../../../themes";
+import { useTranslation } from "react-i18next";
+
+const Plan = (props) => {
+  const { t } = useTranslation();
+  const i18String = useMemo(() => {
+    return `plan.${props.typeOfPlan}.`;
+  }, [props.typeOfPlan]);
+  return (
+    <PlanContainer highlighted={props.highlighted}>
+      <PlanTitle highlighted={props.highlighted}>
+        {t(`${i18String}title`)}
+      </PlanTitle>
+
+      <PlanTitleDescription highlighted={props.highlighted}>
+        {t(`${i18String}description`)}
+      </PlanTitleDescription>
+
+      <PlanPriceContainer highlighted={props.highlighted}>
+        <PlanPrice highlighted={props.highlighted}> {props.price}</PlanPrice>
+        <PlanPriceMonthly highlighted={props.highlighted}>
+          {t("plan.monthly")}
+        </PlanPriceMonthly>
+      </PlanPriceContainer>
+
+      {/* Below are details about plan */}
+      <PlanDetail highlighted={props.highlighted}>
+        <PlanDetailTitle highlighted={props.highlighted}>
+          {t(`${i18String}firstQuantity`)}
+        </PlanDetailTitle>
+        <PlanDetailDescription highlighted={props.highlighted}>
+          {t(`${i18String}firstDetail`)}
+        </PlanDetailDescription>
+      </PlanDetail>
+      <Line />
+      <PlanDetail highlighted={props.highlighted}>
+        <PlanDetailTitle highlighted={props.highlighted}>
+          {t(`${i18String}secondQuantity`)}
+        </PlanDetailTitle>
+        <PlanDetailDescription highlighted={props.highlighted}>
+          {t(`${i18String}secondDetail`)}
+        </PlanDetailDescription>
+      </PlanDetail>
+      <Line />
+      <PlanDetail highlighted={props.highlighted}>
+        <PlanDetailTitle highlighted={props.highlighted}>
+          {t(`${i18String}thirdQuantity`)}
+        </PlanDetailTitle>
+        <PlanDetailDescription highlighted={props.highlighted}>
+          {t(`${i18String}thirdDetail`)}
+        </PlanDetailDescription>
+      </PlanDetail>
+      <Line />
+      <PlanDetail highlighted={props.highlighted}>
+        <PlanDetailTitle highlighted={props.highlighted}>
+          {t(`${i18String}forthQuantity`)}
+        </PlanDetailTitle>
+        <PlanDetailDescription highlighted={props.highlighted}>
+          {t(`${i18String}forthDetail`)}
+        </PlanDetailDescription>
+      </PlanDetail>
+      <Line />
+      <PlanDetail highlighted={props.highlighted}>
+        <PlanDetailDescription highlighted={props.highlighted}>
+          {t(`${i18String}fifthDetail`)}
+        </PlanDetailDescription>
+      </PlanDetail>
+      {/* ^^^^^^^^^^ */}
+
+      <BuyButton
+        highlighted={props.highlighted}
+        variant="contained"
+        width="180px"
+        height="48px"
+        buttoncolor={
+          props.highlighted
+            ? selectedTheme.primaryYellow
+            : selectedTheme.primaryPurple
+        }
+        textcolor={
+          props.highlighted ? selectedTheme.selectOptionTextColor : "white"
+        }
+      >
+        {t("plan.buy")}
+      </BuyButton>
+
+      <PlanIcon highlighted={props.highlighted}>
+        {props.planIcon}
+      </PlanIcon>
+    </PlanContainer>
+  );
+};
+
+Plan.propTypes = {
+  children: PropTypes.node,
+  highlighted: PropTypes.bool,
+  typeOfPlan: PropTypes.string,
+  price: PropTypes.string,
+  planIcon: PropTypes.node,
+};
+
+export default Plan;

src/components/Prices/Plan/Plan.styled.js

@@ -0,0 +1,133 @@
+import { Box, Typography } from "@mui/material";
+import styled from "styled-components";
+import selectedTheme from "../../../themes";
+import { PrimaryButton } from "../../Buttons/PrimaryButton/PrimaryButton";
+
+export const PlanContainer = styled(Box)`
+  width: 408px;
+  height: 512px;
+  border: 1px solid ${selectedTheme.primaryPurple};
+  border-radius: 4px;
+  position: relative;
+  padding: 36px;
+  background-color: ${(props) =>
+    props.highlighted ? selectedTheme.primaryPurple : "white"};
+
+  ${(props) => !props.highlighted && `margin-top: 36px;`}
+  ${(props) =>
+    props.highlighted && `box-shadow: 4px 4px 9px rgba(0, 0, 0, 0.12);`}
+`;
+export const PlanTitle = styled(Typography)`
+  font-family: "Open Sans";
+  font-weight: 600;
+  font-size: 24px;
+  line-height: 33px;
+  align-items: center;
+  text-align: center;
+  text-transform: uppercase;
+  width: 100%;
+  color: ${(props) =>
+    props.highlighted
+      ? selectedTheme.primaryYellow
+      : selectedTheme.primaryPurple};
+`;
+export const PlanTitleDescription = styled(Typography)`
+  font-family: "Open Sans";
+  font-style: normal;
+  font-weight: 400;
+  font-size: 16px;
+  line-height: 22px;
+  width: 100%;
+  text-align: center;
+  margin-top: 7px;
+  color: ${(props) =>
+    props.highlighted ? "white" : selectedTheme.primaryGrayText};
+`;
+export const PlanPriceContainer = styled(Box)`
+  width: 100%;
+  text-align: center;
+  margin: 36px 0;
+  display: flex;
+  gap: 9px;
+`;
+export const PlanPrice = styled(Typography)`
+  font-family: "Open Sans";
+  font-style: normal;
+  font-weight: 600;
+  font-size: 24px;
+  line-height: 33px;
+  text-align: right;
+  flex: 1;
+  color: ${(props) =>
+    props.highlighted ? "white" : selectedTheme.primaryPurple};
+`;
+export const PlanPriceMonthly = styled(Typography)`
+  font-family: "Open Sans";
+  font-style: normal;
+  font-weight: 600;
+  font-size: 24px;
+  line-height: 33px;
+  text-align: left;
+  flex: 1;
+  color: ${(props) =>
+    props.highlighted
+      ? selectedTheme.iconProfileColor
+      : selectedTheme.primaryGrayText};
+`;
+export const PlanDetail = styled(Box)`
+  display: flex;
+  flex-direction: row;
+  gap: 6px;
+`;
+export const PlanDetailTitle = styled(Typography)`
+  font-family: "Open Sans";
+  font-style: normal;
+  font-weight: 600;
+  font-size: 16px;
+  line-height: 22px;
+  color: ${(props) =>
+    props.highlighted
+      ? selectedTheme.primaryYellow
+      : selectedTheme.primaryPurple};
+`;
+export const PlanDetailDescription = styled(Typography)`
+  font-family: "Open Sans";
+  font-style: normal;
+  font-weight: 100;
+  font-size: 16px;
+  line-height: 22px;
+  color: ${(props) =>
+    props.highlighted ? "white" : selectedTheme.primaryGrayText};
+`;
+export const Line = styled(Box)`
+  width: 100%;
+  height: 1px;
+  border-top: 1px solid ${selectedTheme.primaryIconBackgroundColor};
+  margin: 9px 0;
+`;
+export const BuyButton = styled(PrimaryButton)`
+  text-align: center;
+  margin-top: 18px;
+  font-family: "Open Sans";
+  font-style: normal;
+  font-weight: 600;
+  font-size: 12px;
+  line-height: 16px;
+  letter-spacing: 1.5px;
+  text-transform: uppercase;
+`;
+export const PlanIcon = styled(Box)`
+  position: absolute;
+  top: 40px;
+  right: 36px;
+  & svg {
+    width: 24px;
+    height: 24px;
+    & path {
+      stroke: ${(props) =>
+        props.highlighted
+          ? selectedTheme.primaryYellow
+          : selectedTheme.primaryPurple};
+    }
+  }
+`;

src/components/Prices/PricesComponent.js

@@ -0,0 +1,47 @@
+import React from "react";
+import PropTypes from "prop-types";
+import {
+  CartIcon,
+  PlansContainer,
+  PricesAltText,
+  PricesComponentContainer,
+  SendIcon,
+  TruckIcon,
+} from "./PricesComponent.styled";
+import PricesHeader from "./PricesHeader/PricesHeader";
+import Plan from "./Plan/Plan";
+import { useTranslation } from "react-i18next";
+
+const PricesComponent = () => {
+  const { t } = useTranslation();
+  return (
+    <PricesComponentContainer>
+      <PricesHeader />
+      <PlansContainer>
+        <Plan
+          typeOfPlan={"beginner"}
+          price="4,000 RSD"
+          planIcon={<CartIcon />}
+        />
+        <Plan
+          typeOfPlan={"entrepreneur"}
+          price="10,000 RSD"
+          highlighted
+          planIcon={<TruckIcon />}
+        />
+        <Plan
+          typeOfPlan={"businessman"}
+          price="25,000 RSD"
+          planIcon={<SendIcon />}
+        />
+      </PlansContainer>
+      <PricesAltText>{t("prices.altText")}</PricesAltText>
+    </PricesComponentContainer>
+  );
+};
+
+PricesComponent.propTypes = {
+  children: PropTypes.node,
+};
+
+export default PricesComponent;

src/components/Prices/PricesComponent.styled.js

@@ -0,0 +1,30 @@
+import { Box, Typography } from "@mui/material";
+import styled from "styled-components";
+import { ReactComponent as Truck } from "../../assets/images/svg/truck.svg";
+import { ReactComponent as Send } from "../../assets/images/svg/send.svg";
+import { ReactComponent as Cart } from "../../assets/images/svg/shopping-cart.svg";
+import selectedTheme from "../../themes";
+
+export const PricesComponentContainer = styled(Box)`
+  margin: 72px;
+`;
+export const PlansContainer = styled(Box)`
+  display: flex;
+  flex-direction: row;
+  gap: 50px;
+  margin-top: 46px;
+  margin-bottom: 36px;
+`;
+export const TruckIcon = styled(Truck)``;
+export const CartIcon = styled(Cart)``;
+export const SendIcon = styled(Send)``;
+export const PricesAltText = styled(Typography)`
+  font-family: "Open Sans";
+  font-style: normal;
+  font-weight: 400;
+  font-size: 16px;
+  line-height: 22px;
+  display: flex;
+  align-items: center;
+  color: ${selectedTheme.primaryGrayText};
+`;

src/components/Prices/PricesHeader/PricesHeader.js

@@ -0,0 +1,23 @@
+import React from "react";
+import PropTypes from "prop-types";
+import { Arrow, ButtonContainer, LinkText, PricesHeaderContainer, PricesHeaderTitle } from "./PricesHeader.styled";
+import { useTranslation } from "react-i18next";
+
+const PricesHeader = () => {
+  const { t } = useTranslation();
+  return (
+    <PricesHeaderContainer>
+      <PricesHeaderTitle>{t("prices.header.title")}</PricesHeaderTitle>
+      <ButtonContainer>
+        <LinkText>{t("prices.header.link")}</LinkText>
+        <Arrow />
+      </ButtonContainer>
+    </PricesHeaderContainer>
+  );
+};
+
+PricesHeader.propTypes = {
+  children: PropTypes.node,
+};
+
+export default PricesHeader;

src/components/Prices/PricesHeader/PricesHeader.styled.js

@@ -0,0 +1,42 @@
+import { Box, Link, Typography } from "@mui/material";
+import styled from "styled-components";
+import selectedTheme from "../../../themes";
+import { ArrowButton } from "../../Buttons/ArrowButton/ArrowButton";
+
+export const PricesHeaderTitle = styled(Typography)`
+  font-family: "Open Sans";
+  font-style: normal;
+  font-weight: 700;
+  font-size: 72px;
+  line-height: 98px;
+  color: ${selectedTheme.primaryPurple};
+  display: flex;
+  flex: 1;
+`;
+export const PricesHeaderContainer = styled(Box)`
+  display: flex;
+  flex-direction: row;
+  width: 100%;
+  justify-content: space-between;
+`;
+export const ButtonContainer = styled(Link)`
+  width: fit-content;
+  cursor: pointer;
+  display: flex;
+  justify-content: start;
+  align-items: center;
+  gap: 12px;
+  text-decoration: none;
+  color: ${selectedTheme.primaryPurple};
+`;
+export const LinkText = styled(Typography)`
+  border-bottom: 1px dotted ${selectedTheme.primaryPurple};
+  font-family: "Open Sans";
+  line-height: 22px;
+  font-size: 16px;
+  color: ${selectedTheme.primaryPurple};
+  padding-bottom: 5px;
+`;
+export const Arrow = styled(ArrowButton)`
+  transform: rotate(45deg);
+`;

src/components/PrivacyPolicy/PrivacyPolicyComponent.js

@@ -0,0 +1,37 @@
+import React from "react";
+import PropTypes from "prop-types";
+import PrivacyPolicyHeader from "./PrivacyPolicyHeader/PrivacyPolicyHeader";
+import { PrivacyPolicyContainer } from "./PrivacyPolicyComponent.styled";
+import PrivacyPolicySection from "./PrivacyPolicySection/PrivacyPolicySection";
+import { useTranslation } from "react-i18next";
+
+const PrivacyPolicyComponent = () => {
+  const { t } = useTranslation();
+  return (
+    <PrivacyPolicyContainer>
+      <PrivacyPolicyHeader />
+      <PrivacyPolicySection
+        title={t("privacyPolicy.firstSection.title")}
+        text={t("privacyPolicy.firstSection.text")}
+      />
+      <PrivacyPolicySection
+        title={t("privacyPolicy.secondSection.title")}
+        text={t("privacyPolicy.secondSection.text")}
+      />
+      <PrivacyPolicySection
+        title={t("privacyPolicy.thirdSection.title")}
+        text={t("privacyPolicy.thirdSection.text")}
+      />
+      <PrivacyPolicySection
+        title={t("privacyPolicy.forthSection.title")}
+        text={t("privacyPolicy.forthSection.text")}
+      />
+    </PrivacyPolicyContainer>
+  );
+};
+
+PrivacyPolicyComponent.propTypes = {
+  children: PropTypes.node,
+};
+
+export default PrivacyPolicyComponent;

src/components/PrivacyPolicy/PrivacyPolicyComponent.styled.js

@@ -0,0 +1,6 @@
+import { Box } from "@mui/material";
+import styled from "styled-components";
+
+export const PrivacyPolicyContainer = styled(Box)`
+    margin: 72px;
+`

src/components/PrivacyPolicy/PrivacyPolicyHeader/PrivacyPolicyHeader.js

@@ -0,0 +1,22 @@
+import React from "react";
+import PropTypes from "prop-types";
+import { useTranslation } from "react-i18next";
+import { PrivacyPolicyContainer } from "../../../pages/PrivacyPolicy/PrivacyPolicyPage.styled";
+import { PrivacyPolicyHeaderLine, PrivacyPolicyHeaderParagraph, PrivacyPolicyHeaderTitle } from "./PrivacyPolicyHeader.styled";
+
+const PrivacyPolicyHeader = () => {
+  const { t } = useTranslation();
+  return (
+    <PrivacyPolicyContainer>
+      <PrivacyPolicyHeaderTitle>{t("privacyPolicy.header.title")}</PrivacyPolicyHeaderTitle>
+      <PrivacyPolicyHeaderLine />
+      <PrivacyPolicyHeaderParagraph>{t("privacyPolicy.header.paragraph")}</PrivacyPolicyHeaderParagraph>
+    </PrivacyPolicyContainer>
+  );
+};
+
+PrivacyPolicyHeader.propTypes = {
+  children: PropTypes.node,
+};
+
+export default PrivacyPolicyHeader;

src/components/PrivacyPolicy/PrivacyPolicyHeader/PrivacyPolicyHeader.styled.js

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

src/components/PrivacyPolicy/PrivacyPolicySection/PrivacyPolicySection.js

@@ -0,0 +1,23 @@
+import React from "react";
+import PropTypes from "prop-types";
+import {
+  PrivacyPolicySectionContainer,
+  PrivacyPolicySectionText,
+  PrivacyPolicySectionTitle,
+} from "./PrivacyPolicySection.styled";
+
+const PrivacyPolicySection = (props) => {
+  return (
+    <PrivacyPolicySectionContainer>
+      <PrivacyPolicySectionTitle>{props.title}</PrivacyPolicySectionTitle>
+      <PrivacyPolicySectionText>{props.text}</PrivacyPolicySectionText>
+    </PrivacyPolicySectionContainer>
+  );
+};
+
+PrivacyPolicySection.propTypes = {
+  title: PropTypes.string,
+  text: PropTypes.string,
+};
+
+export default PrivacyPolicySection;

src/components/PrivacyPolicy/PrivacyPolicySection/PrivacyPolicySection.styled.js

@@ -0,0 +1,24 @@
+import { Box, Typography } from "@mui/material";
+import styled from "styled-components";
+import selectedTheme from "../../../themes";
+
+export const PrivacyPolicySectionContainer = styled(Box)`
+    margin-top: 25px;
+`;
+export const PrivacyPolicySectionTitle = 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 PrivacyPolicySectionText = styled(Typography)`
+  font-family: "Open Sans";
+  font-style: normal;
+  font-weight: 400;
+  font-size: 16px;
+  line-height: 22px;
+  color: ${selectedTheme.primaryGrayText};
+`;

src/i18n/resources/rs.js

@@ -75,7 +75,7 @@ export default {
     good: "dobra",
     strong: "jaka",
     strongPassword:
-      "Lozinka mora imati barem jedan veliki karakter, jedan mali karakter i jedan znak!",
+      "Lozinka mora imati barem jedan veliki karakter, jedan mali karakter, jedan znak i jedan broj!",
   },
   register: {
     title: "Registruj se",
@@ -184,7 +184,7 @@ export default {
     logout: "Odjavite se",
     about: "O TRAMPI",
     prices: "CENOVNIK",
-    privacy: "POLITIKA PRIVATNOSTI"
+    privacy: "POLITIKA PRIVATNOSTI",
   },
   reviews: {
     title: "Ova kompanija još uvek nema ocenu.",
@@ -263,16 +263,94 @@ export default {
   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."
+      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."
+      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."
+      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"
-  }
+    searchOffers: "Pretražite oglase",
+  },
+  privacyPolicy: {
+    header: {
+      title: "Politika Privatnosti",
+      paragraph:
+        "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.",
+    },
+    firstSection: {
+      title: "I stavka",
+      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.",
+    },
+    secondSection: {
+      title: "II stavka",
+      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.",
+    },
+    thirdSection: {
+      title: "III stavka",
+      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.",
+    },
+    forthSection: {
+      title: "IV stavka",
+      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.",
+    },
+  },
+  prices: {
+    header: {
+      title: "Cenovnik",
+      link: "Pročitajte opširnije o našim ponudama",
+    },
+    altText:
+      " 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.",
+  },
+  plan: {
+    monthly: "/ mesečno",
+    buy: "KUPI",
+    beginner: {
+      title: "POČETNIK",
+      description: "Pellentesque venenatis leo at",
+      firstDetail: "Suspendisse non semper ligula",
+      secondDetail: "Nam nec neque non justo",
+      thirdDetail: "Mauris elementum",
+      forthDetail: "Ut gravida lacinia feugiat",
+      fifthDetail: "Sed vel nibh tincidunt",
+      firstQuantity: "25",
+      secondQuantity: "10",
+      thirdQuantity: "100",
+      forthQuantity: "100",
+      fifthQuantity: "",
+    },
+    businessman: {
+      title: "BIZNISMEN",
+      description: "Pellentesque venenatis leo at",
+      firstDetail: "Suspendisse non semper ligula",
+      secondDetail: "Nam nec neque non justo",
+      thirdDetail: "Mauris elementum",
+      forthDetail: "Ut gravida lacinia feugiat",
+      fifthDetail: "Sed vel nibh tincidunt",
+      firstQuantity: "500",
+      secondQuantity: "NEOGRANIČENO",
+      thirdQuantity: "NEOGRANIČENO",
+      forthQuantity: "NEOGRANIČENO",
+      fifthQuantity: "",
+    },
+    entrepreneur: {
+      title: "PREDUZETNIK",
+      description: "Pellentesque venenatis leo at",
+      firstDetail: "Suspendisse non semper ligula",
+      secondDetail: "Nam nec neque non justo",
+      thirdDetail: "Mauris elementum",
+      forthDetail: "Ut gravida lacinia feugiat",
+      fifthDetail: "Sed vel nibh tincidunt",
+      firstQuantity: "100",
+      secondQuantity: "20",
+      thirdQuantity: "NEOGRANIČENO",
+      forthQuantity: "NEOGRANIČENO",
+      fifthQuantity: "",
+    },
+  },
 };

src/pages/About/AboutPage.styled.js

@@ -1,8 +1,10 @@
 import { Box } from "@mui/system";
 import styled from "styled-components";
+import selectedTheme from "../../themes";
 
 export const AboutPageContainer = styled(Box)`
     margin-top: 80px;
+    background-color: ${selectedTheme.staticBackgroundColor};
     position: relative;
     @media (max-width: 600px) {
         margin-top: 53px;

src/pages/Prices/PricesPage.js

@@ -1,11 +1,12 @@
 import React from 'react'
 import PropTypes from 'prop-types'
 import { PricesPageContainer } from './PricesPage.styled'
+import PricesComponent from '../../components/Prices/PricesComponent'
 
 const PricesPage = () => {
   return (
     <PricesPageContainer>
-        Prices page
+        <PricesComponent />
     </PricesPageContainer>
   )
 }

src/pages/Prices/PricesPage.styled.js

@@ -2,5 +2,10 @@ import { Box } from "@mui/material";
 import styled from "styled-components";
 
 export const PricesPageContainer = styled(Box)`
-
+    margin-top: 80px;
+    background-color: white;
+    
+    @media (max-width: 600px) {
+        margin-top: 55px;
+    }
 `

src/pages/PrivacyPolicy/PrivacyPolicyPage.js

@@ -1,11 +1,12 @@
 import React from 'react'
 import PropTypes from 'prop-types'
 import { PrivacyPolicyContainer } from './PrivacyPolicyPage.styled'
+import PrivacyPolicyComponent from '../../components/PrivacyPolicy/PrivacyPolicyComponent'
 
 const PrivacyPolicyPage = () => {
   return (
     <PrivacyPolicyContainer>
-        Privacy Policy Page
+        <PrivacyPolicyComponent />
     </PrivacyPolicyContainer>
   )
 }

src/pages/PrivacyPolicy/PrivacyPolicyPage.styled.js

@@ -1,5 +1,11 @@
 import { Box, styled } from "@mui/material";
+import selectedTheme from "../../themes";
 
 export const PrivacyPolicyContainer = styled(Box)`
-
+    margin-top: 80px;
+    position: relative;
+    background-color: ${selectedTheme.staticBackgroundColor};
+    @media (max-width: 600px) {
+        margin-top: 53px;
+    }
 `

src/pages/RegisterPages/Register/FirstPart/FirstPartOfRegistration.js

@@ -51,9 +51,9 @@ const FirstPartOfRegistration = (props) => {
         formik.setFieldTouched("password", true);
       }
     } else {
-      formik.handleSubmit(event)
+      formik.handleSubmit(event);
     }
-  }
+  };
 
   const handleClickShowPassword = () => {
     setShowPassword((prevState) => !prevState);
@@ -105,9 +105,8 @@ const FirstPartOfRegistration = (props) => {
       ) : formik.errors.password && formik.touched.password ? (
         <ErrorMessage>{formik.errors.password}</ErrorMessage>
       ) : (
-        <></>
+        props.error && <ErrorMessage>{props.errorMessage}</ErrorMessage>
       )}
-      {props.error && <ErrorMessage>{props.errorMessage}</ErrorMessage>}
 
       <PrimaryButton
         type="submit"

src/pages/RegisterPages/Register/Register.js

@@ -60,7 +60,7 @@ const Register = () => {
       }
     } else if (
       error?.error?.response?.data?.toString() ===
-      "Company with PIB already exists"
+      "User with PIB already exists!"
     ) {
       setInformations({ mail, password, image });
       setCurrentStep(2);

src/store/saga/registerSaga.js

@@ -45,7 +45,7 @@ function* fetchRegisterUser({ payload }) {
     ) {
       type = "mail";
     } else if (
-      e?.response?.data?.toString() === "Company with PIB already exists"
+      e?.response?.data?.toString() === "User with PIB already exists!"
     ) {
       type = "PIB";
     }

src/themes/primaryTheme/primaryThemeColors.js

@@ -32,5 +32,6 @@ export const primaryThemeColors = {
     filterSkeletonBackground: "#E4E4E4",
     filterSkeletonBackgroundSecond: "#D4D4D4",
     filterSkeletonItems: "#D4D4D4",
-    filterSkeletonItemsSecond: "#DDDDDD"
+    filterSkeletonItemsSecond: "#DDDDDD",
+    staticBackgroundColor: "#F3EFF8"
 }