Untitled

src\components\Footer
import * as React from 'react';
import {
  Main,
  FirstBlock,
  FooterMain,
  FooterMainBlock,
  FooterWrapper,
  FooterContainer,
  FeaturesList,
  FooterNav,
  FooterNavList,
  LinkFooter,
} from './Footer.styled';

import { FooterTitle } from './FooterTitle';
import { SubscribeForm } from './SubscribeForm/SubscribeForm';
import { SocialLinks } from './SocialLinks/SocialLinks';
import { FooterDown } from './FooterCopyright';

export const Footer = () => {
  return (
    <FooterContainer>
      <Main>
        <FooterWrapper>
          <FooterMain>
            <FooterMainBlock>
              <FirstBlock>
                <FooterTitle />
                <FeaturesList>
                  <li>Database of recipes that can be replenished</li>
                  <li>Flexible search for desired and unwanted ingredients</li>
                  <li>Ability to add your own recipes with photos</li>
                  <li>Convenient and easy to use</li>
                </FeaturesList>
              </FirstBlock>
              <FooterNav>
                <FooterNavList>
                  <li>
                    <LinkFooter to="/ingredients">Ingredients</LinkFooter>
                  </li>
                  <li>
                    <LinkFooter to="/add-recipes">Add recipes</LinkFooter>
                  </li>
                  <li>
                    <LinkFooter to="/my-recipes">My recipes</LinkFooter>
                  </li>
                  <li>
                    <LinkFooter to="/favorite">Favorite</LinkFooter>
                  </li>
                  <li>
                    <LinkFooter to="/shopping-list">Shopping list</LinkFooter>
                  </li>
                </FooterNavList>
              </FooterNav>
              <SubscribeForm />
            </FooterMainBlock>
          </FooterMain>
          <SocialLinks />
        </FooterWrapper>
        <FooterDown />
      </Main>
    </FooterContainer>
  );
};

src\components\Footer\FooterCopyright.jsx
import { DownContainer } from './Footer.styled';
import SpinachMobile1x from './images/spinach-main-bg/SpinachDesktop1x.png';

export const FooterDown = () => {
  return (
    <DownContainer>
      <span>© 2023 All Rights Reserved.</span>
      <span> Terms of Service</span>
      <span>
        <img src={SpinachMobile1x} alt="Spinach Background" />
      </span>
    </DownContainer>
  );
};

export const DownContainer = styled.div`
  position: relative;
  display: flex;
  width: 100%;
  justify-content: center;
  align-items: center;
  color: ${({ theme }) => theme.colors.black[400]};
  background-color: ${({ theme }) => theme.colors.white[100]};
  font-family: Poppins;
  font-size: 10px;
  line-height: 10px;
  letter-spacing: -0.01em;
  padding: 28px 73px;

  & > :first-of-type {
    margin-right: 14px;
    font-weight: ${({ theme }) => theme.fontWeights.medium};
  }
  & span {
    font-family: inherit;
    font-weight: ${({ theme }) => theme.fontWeights.regular};
    font-size: ${({ theme }) => theme.fontSizes[0]};
    line-height: ${({ theme }) => theme.fontSizes[0]};
    letter-spacing: -0.01em;
    opacity: 0.5;
  }

  & img {
    // position: absolute;
    // left: 305px;
    transform: rotate(24deg);
}

  @media only screen and (min-width: ${theme.breakpoints[1]}) and (max-width: ${theme.breakpoints[2]}) {
    height: 78px;
    & > :first-of-type {
      margin-right: 28px;
    }
    & span {
      font-size: 14px;
      line-height: 14px;
    }
  }
  @media only screen and (min-width: ${theme.breakpoints[2]}) {
    height: 114px;
    & span {
      font-size: 14px;
      line-height: 14px;
    }
    & > :first-of-type {
      margin-right: 40px;
    }
  }
`;