Static pages responsive

src/components/About/AboutComponent.js

 import SectionImage2 from "../../assets/images/about/about-2.png";
 import CheckOffersButton from "./CheckOffersButton/CheckOffersButton";
 import { AboutComponentContainer } from "./AboutComponent.styled";
+import useIsMobile from "../../hooks/useIsMobile";
 
 const AboutComponent = forwardRef((props, ref) => {
+  const { isMobile } = useIsMobile();
   const { t } = useTranslation();
   return (
     <AboutComponentContainer ref={ref}>
         image={SectionImage2}
         reverse
       />
-      <CheckOffersButton />
+      {!isMobile && <CheckOffersButton />}
     </AboutComponentContainer>
   );
 });

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

 
 export const AboutHeaderContainer = styled(Box)`
   margin: 72px;
+
+  @media (max-width: 1200px) {
+    margin: 36px;
+  }
+
+  @media (max-width: 600px) {
+    margin: 52px 36px 36px 36px;
+  }
 `;
 export const AboutHeaderTitle = styled(Typography)`
   font-family: ${selectedTheme.fonts.textFont};
   font-size: 72px;
   line-height: 98px;
   color: ${selectedTheme.colors.primaryPurple};
+
+  @media (max-width: 600px) {
+    font-size: 36px;
+    line-height: 49px;
+  }
 `;
 export const AboutHeaderParagraph = styled(Typography)`
   font-family: ${selectedTheme.fonts.textFont};
   font-size: 16px;
   line-height: 22px;
   color: ${selectedTheme.colors.primaryGrayText};
+
+  @media (max-width: 600px) {
+    font-size: 14px;
+  }
 `;
 export const AboutHeaderLine = styled(Box)`
-    border-top: 1px solid ${selectedTheme.colors.iconYellowColor};
-    width: 90px;
-    margin-bottom: 26px;
+  border-top: 1px solid ${selectedTheme.colors.iconYellowColor};
+  width: 90px;
+  margin-bottom: 26px;
+
+  @media (max-width: 600px) {
+    width: 54px;
+  }
 `;

src/components/About/AboutSection/AboutSection.js

   AboutSectionText,
   AboutSectionTextContainer,
   AboutSectionTitle,
+  CheckButton,
 } from "./AboutSection.styled";
 
 const AboutSection = (props) => {
+  console.log(props);
   return (
     <AboutSectionContainer reverse={props.reverse}>
       <AboutSectionTextContainer>
-        <AboutSectionTitle>{props.title}</AboutSectionTitle>
-        <AboutSectionText>{props.text}</AboutSectionText>
+        <AboutSectionTitle reverse={props.reverse}>
+          {props.title}
+        </AboutSectionTitle>
+        <AboutSectionText reverse={props.reverse}>
+          {props.text}
+        </AboutSectionText>
       </AboutSectionTextContainer>
-      <AboutSectionImage src={props.image} />
+      {props.reverse && <CheckButton />}
+      <AboutSectionImage src={props.image} reverse={props.reverse} />
     </AboutSectionContainer>
   );
 };

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

 import { Box, Typography } from "@mui/material";
 import styled from "styled-components";
 import selectedTheme from "../../../themes";
+import CheckOffersButton from "../CheckOffersButton/CheckOffersButton";
 
 export const AboutSectionContainer = styled(Box)`
   ${(props) =>
   flex-direction: ${(props) => (props.reverse ? "row-reverse" : "row")};
   gap: 144px;
   margin-bottom: 72px;
+
+  @media (max-width: 1069px) {
+    flex-direction: column;
+  }
+
+  @media (max-width: 1200px) {
+    ${(props) =>
+      props.reverse
+        ? `
+    margin-right: 36px
+  `
+        : `margin-left: 36px`};
+  }
+
+  @media (max-width: 1319px) {
+    gap: 54px;
+  }
+
+  @media (max-width: 600px) {
+    flex-direction: column;
+    margin-left: 0;
+    margin-right: 0;
+    margin-bottom: 36px;
+    gap: 27px;
+    ${(props) => props.reverse && `text-align: right;`}
+  }
 `;
 export const AboutSectionTitle = styled(Typography)`
   font-family: ${selectedTheme.fonts.textFont};
   line-height: 33px;
   color: ${selectedTheme.colors.primaryPurple};
   margin-bottom: 18px;
+
+  @media (max-width: 1069px) {
+    ${(props) => props.reverse && `margin-left: 36px;`}
+  }
+
+  @media (max-width: 600px) {
+    font-size: 18px;
+  }
 `;
 export const AboutSectionText = styled(Typography)`
   font-family: ${selectedTheme.fonts.textFont};
   font-size: 16px;
   line-height: 22px;
   color: ${selectedTheme.colors.primaryGrayText};
+
+  @media (max-width: 1069px) {
+    ${(props) => props.reverse && `margin-left: 36px;`}
+  }
+
+  @media (max-width: 1160px) {
+    ${(props) => props.reverse && `padding-bottom: 20px;`}
+  }
+
+  @media (max-width: 600px) {
+    font-size: 14px;
+    ${(props) => props.reverse && `padding-bottom: 0;`}
+  }
 `;
 export const AboutSectionImage = styled.img`
   display: flex;
   width: 648px;
   height: 345px;
   object-fit: cover;
+
+  @media (max-width: 1069px) {
+    width: 100%;
+    ${(props) => props.reverse && `padding-bottom: 36px`}
+  }
+
+  @media (max-width: 600px) {
+    width: 100%;
+    ${(props) =>
+      !props.reverse ? `padding-left: 36px` : `padding-right: 36px`}
+  }
 `;
 export const AboutSectionTextContainer = styled(Box)`
   display: flex;
   flex: 1;
   flex-direction: column;
+
+  @media (max-width: 600px) {
+    margin: 0 36px;
+  }
 `;
+export const CheckButton = styled(CheckOffersButton)``;

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

     color: white;
     background-color: ${selectedTheme.colors.primaryPurple} !important;
   }
+
+  @media (max-width: 1160px) {
+    bottom: -16px;
+  }
+
+  @media (max-width: 1200px) {
+    right: 16px;
+  }
+
+  @media (max-width: 600px) {
+    position: relative;
+    bottom: 0;
+    right: 18px;
+    align-self: flex-end;
+  }
 `;

src/components/Footer/AboutFooter.styled.js

   display: flex;
   flex-direction: column;
   padding: 0 72px;
+
+  @media (max-width: 600px) {
+    height: 91px;
+    padding: 0 36px;
+  }
 `;
 export const AboutFooterText = styled(Typography)`
   font-family: ${selectedTheme.fonts.textFont};
   text-align: center;
   position: relative;
   top: 61px;
+
+  @media (max-width: 600px) {
+    font-size: 14px;
+    top: 30px;
+  }
 `;
 export const ButtonContainer = styled(Link)`
   width: fit-content;
   text-align: right;
   position: relative;
   top: 29px;
+
+  @media (max-width: 600px) {
+    top: -38px;
+  }
 `;
 export const LinkText = styled(Typography)`
   font-family: ${selectedTheme.fonts.textFont};
   color: ${selectedTheme.colors.primaryGrayText};
   position: relative;
   top: 8px;
+
+  @media (max-width: 600px) {
+    display: none;
+  }
 `;
 
 export const Arrow = styled(ArrowButton)`

src/components/Header/AboutHeader/AboutHeader.styled.js

 export const LinkRoute = styled(Link)`
   text-decoration: none;
   font-family: ${selectedTheme.fonts.textFont};
-  font-weight: ${props => props.selected ? "600" : "400"};
+  font-weight: ${(props) => (props.selected ? "600" : "400")};
   font-size: 16px;
   line-height: 22px;
   letter-spacing: 0.02em;
   &:hover {
     border-bottom: 1px solid ${selectedTheme.colors.iconYellowColor};
   }
+
+  @media (max-width: 600px) {
+    display: none;
+  }
 `;

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

   ${(props) => !props.highlighted && `margin-top: 36px;`}
   ${(props) =>
     props.highlighted && `box-shadow: 4px 4px 9px rgba(0, 0, 0, 0.12);`}
+
+  @media (max-width: 600px) {
+    min-width: 303px;
+    width: 100%;
+    height: fit-content;
+    padding: 36px 18px;
+    margin-top: 0;
+  }
 `;
 export const PlanTitle = styled(Typography)`
   font-family: ${selectedTheme.fonts.textFont};
   margin-top: 7px;
   color: ${(props) =>
     props.highlighted ? "white" : selectedTheme.colors.primaryGrayText};
+
+  @media (max-width: 600px) {
+    font-size: 14px;
+  }
 `;
 export const PlanPriceContainer = styled(Box)`
   width: 100%;
   flex: 1;
   color: ${(props) =>
     props.highlighted ? "white" : selectedTheme.colors.primaryPurple};
+
+  @media (max-width: 600px) {
+    font-size: 18px;
+  }
 `;
 export const PlanPriceMonthly = styled(Typography)`
   font-family: ${selectedTheme.fonts.textFont};
     props.highlighted
       ? selectedTheme.colors.iconProfileColor
       : selectedTheme.colors.primaryGrayText};
+
+  @media (max-width: 600px) {
+    font-size: 14px;
+  }
 `;
 export const PlanDetail = styled(Box)`
   display: flex;
     props.highlighted
       ? selectedTheme.colors.primaryYellow
       : selectedTheme.colors.primaryPurple};
+
+  @media (max-width: 600px) {
+    font-size: 14px;
+  }
 `;
 export const PlanDetailDescription = styled(Typography)`
   font-family: ${selectedTheme.fonts.textFont};
   line-height: 22px;
   color: ${(props) =>
     props.highlighted ? "white" : selectedTheme.colors.primaryGrayText};
+
+  @media (max-width: 600px) {
+    font-size: 14px;
+    font-weight: 400;
+  }
 `;
 export const Line = styled(Box)`
   width: 100%;
           : selectedTheme.colors.primaryPurple};
     }
   }
+
+  @media (max-width: 600px) {
+    svg {
+      width: 18px;
+      height: 18px;
+    }
+  }
 `;

src/components/Prices/PricesComponent.styled.js

 export const PricesComponentContainer = styled(Box)`
   padding: 72px;
   background: white;
+
+  @media (max-width: 600px) {
+    padding: 36px;
+  }
 `;
 export const PlansContainer = styled(Box)`
   display: flex;
   gap: 50px;
   margin-top: 46px;
   margin-bottom: 36px;
+
+  @media (max-width: 600px) {
+    flex-direction: column;
+    gap: 27px;
+  }
 `;
 export const TruckIcon = styled(Truck)``;
 export const CartIcon = styled(Cart)``;
 export const SendIcon = styled(Send)``;
+
 export const PricesAltText = styled(Typography)`
   font-family: ${selectedTheme.fonts.textFont};
   font-style: normal;

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

   color: ${selectedTheme.colors.primaryPurple};
   display: flex;
   flex: 1;
+
+  @media (max-width: 600px) {
+    font-size: 36px;
+    line-height: 49px;
+  }
 `;
 export const PricesHeaderLine = styled(Box)`
-    border-top: 1px solid ${selectedTheme.colors.iconYellowColor};
-    width: 90px;
-    margin-bottom: 26px;
+  border-top: 1px solid ${selectedTheme.colors.iconYellowColor};
+  width: 90px;
+  margin-bottom: 26px;
+
+  @media (max-width: 600px) {
+    width: 54px;
+  }
 `;
 export const PricesHeaderContainer = styled(Box)`
   display: flex;

src/components/PrivacyPolicy/PrivacyPolicyComponent.styled.js

 import styled from "styled-components";
 
 export const PrivacyPolicyContainer = styled(Box)`
-    margin: 72px;
-`
+  margin: 72px;
+
+  @media (max-width: 600px) {
+    margin: 36px 36px 69px 36px;
+  }
+`;

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

   font-size: 72px;
   line-height: 98px;
   color: ${selectedTheme.colors.primaryPurple};
+
+  @media (max-width: 600px) {
+    font-size: 36px;
+    line-height: 49px;
+  }
 `;
 export const PrivacyPolicyHeaderParagraph = styled(Typography)`
   font-family: ${selectedTheme.fonts.textFont};
   font-size: 16px;
   line-height: 22px;
   color: ${selectedTheme.colors.primaryGrayText};
+
+  @media (max-width: 600px) {
+    font-size: 14px;
+  }
 `;
 export const PrivacyPolicyHeaderLine = styled(Box)`
-    border-top: 1px solid ${selectedTheme.colors.iconYellowColor};
-    width: 90px;
-    margin-bottom: 26px;
+  border-top: 1px solid ${selectedTheme.colors.iconYellowColor};
+  width: 90px;
+  margin-bottom: 26px;
+
+  @media (max-width: 600px) {
+    width: 54px;
+  }
 `;

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

 import selectedTheme from "../../../themes";
 
 export const PrivacyPolicySectionContainer = styled(Box)`
-    margin-top: 25px;
+  margin-top: 25px;
 `;
 export const PrivacyPolicySectionTitle = styled(Typography)`
   font-family: ${selectedTheme.fonts.textFont};
   line-height: 33px;
   color: ${selectedTheme.colors.primaryPurple};
   margin-bottom: 18px;
+
+  @media (max-width: 600px) {
+    font-size: 18px;
+  }
 `;
 export const PrivacyPolicySectionText = styled(Typography)`
   font-family: ${selectedTheme.fonts.textFont};
   font-size: 16px;
   line-height: 22px;
   color: ${selectedTheme.colors.primaryGrayText};
+
+  @media (max-width: 600px) {
+    font-size: 14px;
+  }
 `;

src/store/saga/locationsSaga.js

   try {
     const data = yield call(attemptFetchLocations);
     if (!data?.data) throw new Error();
-    yield put(setLocations(data.data.value));
+    yield put(setLocations(data.data));
     yield put(fetchLocationsSuccess());
   } catch (e) {
     yield put(fetchLocationsError());