Add files via upload

src/componants/footer/websitesocial-media/DownloadAppInfo.jsx

@@ -0,0 +1,64 @@
+import { useTranslation } from "react-i18next";
+import { appStore, googlePlay, qrCode } from "src/Assets/Images/Images";
+import { mySocialMedia } from "src/Data/staticData";
+import SvgIcon from "../../Shared/MiniComponents/SvgIcon";
+import ToolTip from "../../Shared/MiniComponents/ToolTip";
+import s from "./DownloadAppInfo.module.scss";
+
+const DownloadAppInfo = () => {
+  const { t } = useTranslation();
+
+  return (
+    <>
+      <b>{t("footer.section5.downloadApp")}</b>
+      <p>{t("footer.section5.saveThreeDollars")}</p>
+
+      <div className={s.appInfo}>
+        <div className={s.qrCode}>
+          <img
+            src={qrCode}
+            alt="QR Code"
+            title="qr code"
+            tabIndex="0"
+            loading="lazy"
+            decoding="async"
+          />
+        </div>
+
+        <div className={s.downloadButtons}>
+          <button type="button">
+            <img
+              src={googlePlay}
+              alt="Download app at Google play"
+              loading="lazy"
+              decoding="async"
+            />
+          </button>
+
+          <button type="button">
+            <img
+              src={appStore}
+              alt="Download app at App store"
+              loading="lazy"
+              decoding="async"
+            />
+          </button>
+        </div>
+      </div>
+
+      <div className={s.socialMedia}>
+        {mySocialMedia.map((item) => {
+          const nameTrans = t(`common.${item.name.toLowerCase()}`);
+
+          return (
+            <a href={item.link} target="_blank" title={nameTrans} key={item.id}>
+              <SvgIcon name={item.icon} />
+              <ToolTip left="50%" top="48px" content={nameTrans} />
+            </a>
+          );
+        })}
+      </div>
+    </>
+  );
+};
+export default DownloadAppInfo;

src/componants/footer/websitesocial-media/DownloadAppInfo.module.scss

@@ -0,0 +1,87 @@
+@import "src/Styles/mixins";
+
+.appInfo {
+  display: flex;
+  margin: 8px 0 20px;
+}
+
+.qrCode {
+  --size: 76px;
+  min-width: var(--size);
+  min-height: var(--size);
+  max-width: var(--size);
+  max-height: var(--size);
+  margin-inline-end: 16px;
+  user-select: none;
+}
+
+.qrCode img:focus-visible {
+  outline: solid 2px var(--orange-degree2);
+}
+
+.downloadButtons>button {
+  display: block;
+  background-color: transparent;
+  border: none;
+  outline: none;
+  width: 104px;
+  height: 30px;
+  border-radius: 4px;
+  border: solid 1px var(--white);
+  cursor: pointer;
+
+  &:not(:last-child) {
+    margin-bottom: 16px;
+  }
+
+  &:focus-visible {
+    border-color: var(--orange-degree2);
+  }
+}
+
+.downloadButtons>button>img {
+  border-radius: inherit;
+  scale: .8;
+}
+
+.socialMedia {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+}
+
+.socialMedia>a {
+  width: 40px;
+  height: 40px;
+  border-radius: 6px;
+  filter: grayscale(1);
+  -webkit-filter: grayscale(1);
+  -moz-filter: grayscale(1);
+  -ms-filter: grayscale(1);
+  -o-filter: grayscale(1);
+  @include center-x-y;
+  position: relative;
+
+  &:focus-visible {
+    transition: opacity .3s, filter .3s .2s;
+    outline: solid 2px var(--orange-degree2);
+    filter: grayscale(0);
+    -webkit-filter: grayscale(0);
+    -moz-filter: grayscale(0);
+    -ms-filter: grayscale(0);
+    -o-filter: grayscale(0);
+    opacity: 1;
+  }
+}
+
+.socialMedia>a:not([title="instagram" i]):focus-visible svg {
+  fill: var(--orange-degree2);
+}
+
+.socialMedia>a[title="instagram" i]:focus-visible svg {
+  stroke: var(--orange-degree2);
+
+  & path {
+    stroke: var(--orange-degree2);
+  }
+}