From c477d2bbff8a9f11cb7de717451c5a3093a48093 Mon Sep 17 00:00:00 2001
From: innovatixhub <innovatixhub@gmail.com>
Date: Tue, 26 Nov 2024 06:07:08 -0800
Subject: [PATCH] Add files via upload

---
 .../shared/poster/HorizontalPoster.jsx        |  26 +++
 .../poster/HorizontalPoster.module.scss       | 100 ++++++++++++
 src/componants/shared/poster/MediumPoster.jsx |  26 +++
 .../shared/poster/MediumPoster.module.scss    | 131 +++++++++++++++
 src/componants/shared/poster/SmallPoster.jsx  |  21 +++
 .../shared/poster/SmallPoster.module.scss     | 149 ++++++++++++++++++
 6 files changed, 453 insertions(+)
 create mode 100644 src/componants/shared/poster/HorizontalPoster.jsx
 create mode 100644 src/componants/shared/poster/HorizontalPoster.module.scss
 create mode 100644 src/componants/shared/poster/MediumPoster.jsx
 create mode 100644 src/componants/shared/poster/MediumPoster.module.scss
 create mode 100644 src/componants/shared/poster/SmallPoster.jsx
 create mode 100644 src/componants/shared/poster/SmallPoster.module.scss

diff --git a/src/componants/shared/poster/HorizontalPoster.jsx b/src/componants/shared/poster/HorizontalPoster.jsx
new file mode 100644
index 0000000..99c385d
--- /dev/null
+++ b/src/componants/shared/poster/HorizontalPoster.jsx
@@ -0,0 +1,26 @@
+import { useEffect, useRef } from "react";
+import { useTranslation } from "react-i18next";
+import { Link } from "react-router-dom";
+import s from "./HorizontalPoster.module.scss";
+
+const HorizontalPoster = ({ title, description, posterUrl }) => {
+  const { t } = useTranslation();
+  const horPosterRef = useRef();
+
+  useEffect(() => {
+    horPosterRef.current.style.backgroundImage = `url(${posterUrl})`;
+  }, []);
+
+  return (
+    <div className={s.HorPoster} ref={horPosterRef} dir="ltr">
+      <div className={s.content}>
+        <b>{title}</b>
+        <p>{description}</p>
+        <Link to="/products" className={s.shopNow}>
+          <span>{t("buttons.buyNow")}</span>
+        </Link>
+      </div>
+    </div>
+  );
+};
+export default HorizontalPoster;
diff --git a/src/componants/shared/poster/HorizontalPoster.module.scss b/src/componants/shared/poster/HorizontalPoster.module.scss
new file mode 100644
index 0000000..fcbc1d1
--- /dev/null
+++ b/src/componants/shared/poster/HorizontalPoster.module.scss
@@ -0,0 +1,100 @@
+@import "src/Styles/mixins";
+
+.HorPoster {
+  width: 100%;
+  height: 284px;
+  border-radius: 4px;
+  position: relative;
+  z-index: 1;
+  padding: 30px 20px;
+  display: flex;
+  align-items: flex-end;
+  background-repeat: no-repeat;
+  background-size: contain;
+  background-position: bottom right;
+  background-color: #0D0D0D;
+}
+
+@include small {
+  .HorPoster {
+    padding-top: 30px;
+  }
+}
+
+.content {
+  width: 255px;
+}
+
+.content>b {
+  color: var(--white);
+  font: 600 1.5rem/24px "Inter", sans-serif;
+}
+
+.content>p {
+  margin: 6px 0 12px;
+  color: var(--secondary-white);
+  font-size: .8rem;
+  line-height: 18px;
+}
+
+.shopNow {
+  -webkit-tap-highlight-color: transparent;
+  outline: none;
+  display: flex;
+  align-items: center;
+  cursor: pointer;
+  padding: 2px;
+  color: var(--secondary-white);
+  font-size: 1rem;
+  width: fit-content;
+  position: relative;
+
+  &:not(:focus-visible):hover::before {
+    height: calc(100% + 10px);
+    opacity: .3;
+    transition: height .2s, opacity .2s;
+  }
+
+  &:focus-visible {
+    color: var(--orange-degree2);
+
+    &::before {
+      background-color: var(--orange-degree2);
+    }
+  }
+}
+
+@include small {
+  .shopNow {
+    font-size: .9rem;
+  }
+}
+
+.shopNow::before {
+  content: '';
+  position: absolute;
+  left: 0;
+  bottom: -5px;
+  width: 100%;
+  height: 2px;
+  background-color: var(--secondary-white);
+  transition: height .3s, opacity .2s .2s;
+}
+
+.content :where(b, p)::selection,
+.shopNow::selection {
+  background-color: var(--white) !important;
+}
+
+// Arabic styles
+[lang=ar] .HorPoster {
+  justify-content: flex-end;
+  background-position: -130px bottom;
+}
+
+[lang=ar] .content {
+  direction: rtl;
+  background-color: #00000062;
+  padding: 14px;
+  width: 280px;
+}
\ No newline at end of file
diff --git a/src/componants/shared/poster/MediumPoster.jsx b/src/componants/shared/poster/MediumPoster.jsx
new file mode 100644
index 0000000..d2485e2
--- /dev/null
+++ b/src/componants/shared/poster/MediumPoster.jsx
@@ -0,0 +1,26 @@
+import { useEffect, useRef } from "react";
+import { useTranslation } from "react-i18next";
+import { Link } from "react-router-dom";
+import s from "./MediumPoster.module.scss";
+
+const MediumPoster = ({ title, description, posterUrl }) => {
+  const { t } = useTranslation();
+  const midPosterRef = useRef();
+
+  useEffect(() => {
+    midPosterRef.current.style.backgroundImage = `url(${posterUrl})`;
+  }, []);
+
+  return (
+    <div className={s.midPoster} ref={midPosterRef} dir="ltr">
+      <div className={s.content}>
+        <b>{title}</b>
+        <p>{description}</p>
+        <Link to="/products" className={s.shopNow}>
+          <span>{t("buttons.buyNow")}</span>
+        </Link>
+      </div>
+    </div>
+  );
+};
+export default MediumPoster;
diff --git a/src/componants/shared/poster/MediumPoster.module.scss b/src/componants/shared/poster/MediumPoster.module.scss
new file mode 100644
index 0000000..2ac728b
--- /dev/null
+++ b/src/componants/shared/poster/MediumPoster.module.scss
@@ -0,0 +1,131 @@
+@import "src/Styles/mixins";
+
+.midPoster {
+  background-color: var(--black);
+  height: 600px;
+  border-radius: 4px;
+  position: relative;
+  z-index: 1;
+  padding: 40px 30px 0;
+  padding-top: 60px;
+  display: flex;
+  justify-content: flex-end;
+  background-repeat: no-repeat;
+  background-size: contain;
+  background-position: bottom;
+  background-origin: content-box;
+}
+
+@include small {
+  .midPoster {
+    padding-top: 30px;
+  }
+}
+
+@include very-small {
+  .midPoster {
+    padding: 20px 20px 0;
+  }
+}
+
+@media (max-width: 600px) {
+  .midPoster {
+    height: 500px;
+  }
+}
+
+@media (max-width: 500px) {
+  .midPoster {
+    height: 400px;
+  }
+}
+
+@media (max-width: 400px) {
+  .midPoster {
+    height: 340px;
+  }
+}
+
+.content {
+  width: 242px;
+  margin-bottom: 30px;
+}
+
+.content>b {
+  color: var(--white);
+  font: 600 1.5rem/24px "Inter", sans-serif;
+}
+
+.content>p {
+  margin: 6px 0 12px;
+  color: var(--secondary-white);
+  font-size: .8rem;
+  line-height: 18px;
+}
+
+.shopNow {
+  -webkit-tap-highlight-color: transparent;
+  outline: none;
+  display: flex;
+  align-items: center;
+  cursor: pointer;
+  padding: 2px;
+  color: var(--secondary-white);
+  font-size: 1rem;
+  width: fit-content;
+  position: relative;
+
+  &:not(:focus-visible):hover::before {
+    height: calc(100% + 10px);
+    opacity: .3;
+    transition: height .2s, opacity .2s;
+  }
+
+  &:focus-visible {
+    color: var(--orange-degree2);
+
+    &::before {
+      background-color: var(--orange-degree2);
+    }
+  }
+}
+
+@include small {
+  .shopNow {
+    font-size: .9rem;
+  }
+}
+
+.shopNow::before {
+  content: '';
+  position: absolute;
+  left: 0;
+  bottom: -5px;
+  width: 100%;
+  height: 2px;
+  background-color: var(--secondary-white);
+  transition: height .3s, opacity .2s .2s;
+}
+
+.content :where(b, p)::selection,
+.shopNow::selection {
+  background-color: var(--white) !important;
+}
+
+// Arabic styles
+[lang=ar] .midPoster {
+  align-items: flex-end;
+}
+
+[lang=ar] .content {
+  direction: rtl;
+  background-color: #000000aa;
+  padding: 14px;
+  width: 280px;
+}
+
+@include small {
+  [lang=ar] .content {
+    width: 100%;
+  }
+}
\ No newline at end of file
diff --git a/src/componants/shared/poster/SmallPoster.jsx b/src/componants/shared/poster/SmallPoster.jsx
new file mode 100644
index 0000000..26b4a63
--- /dev/null
+++ b/src/componants/shared/poster/SmallPoster.jsx
@@ -0,0 +1,21 @@
+import { useTranslation } from "react-i18next";
+import { Link } from "react-router-dom";
+import s from "./SmallPoster.module.scss";
+
+const SmallPoster = ({ title, description, posterUrl }) => {
+  const { t } = useTranslation();
+
+  return (
+    <div className={s.smallPoster} dir="ltr">
+      <img src={posterUrl} alt="product's poster" loading="lazy" />
+      <div className={s.content}>
+        <b>{title}</b>
+        <p>{description}</p>
+        <Link to="/products" className={s.shopNow}>
+          <span>{t("buttons.buyNow")}</span>
+        </Link>
+      </div>
+    </div>
+  );
+};
+export default SmallPoster;
diff --git a/src/componants/shared/poster/SmallPoster.module.scss b/src/componants/shared/poster/SmallPoster.module.scss
new file mode 100644
index 0000000..83d7fb9
--- /dev/null
+++ b/src/componants/shared/poster/SmallPoster.module.scss
@@ -0,0 +1,149 @@
+@import "src/Styles/mixins";
+
+.smallPoster {
+  background-color: var(--black);
+  min-width: 270px;
+  min-height: 284px;
+  flex: 1;
+  border-radius: 4px;
+  position: relative;
+  z-index: 3;
+  padding: 40px 30px 0;
+  padding-top: 60px;
+  display: flex;
+  align-items: flex-end;
+  background-repeat: no-repeat;
+  background-size: contain;
+  background-position: bottom;
+  background-origin: content-box;
+}
+
+@include small {
+  .smallPoster {
+    padding-top: 30px;
+    width: 100%;
+  }
+}
+
+@include very-small {
+  .smallPoster {
+    padding: 20px 20px 0;
+  }
+}
+
+.smallPoster::after {
+  content: '';
+  position: absolute;
+  left: 0;
+  top: 0;
+  width: 100%;
+  height: 100%;
+  background-image: radial-gradient(circle at 50% 50%, #242424, #1d1d1d);
+  z-index: 1;
+}
+
+.smallPoster>img {
+  position: absolute;
+  object-fit: cover;
+  left: 50%;
+  top: 50%;
+  translate: -50% -50%;
+  z-index: 2;
+  width: 190px;
+  height: 221px;
+  user-select: none;
+  filter: grayscale(1);
+  -webkit-filter: grayscale(1);
+  -ms-filter: grayscale(1);
+  -o-filter: grayscale(1);
+  -moz-filter: grayscale(1);
+  transition: filter .2s;
+}
+
+.smallPoster:hover>img {
+  filter: grayscale(0);
+  -webkit-filter: grayscale(0);
+  -ms-filter: grayscale(0);
+  -o-filter: grayscale(0);
+  -moz-filter: grayscale(0);
+}
+
+.content {
+  width: 242px;
+  margin-bottom: 30px;
+  z-index: 3;
+}
+
+.content>b {
+  color: var(--white);
+  font: 600 1.5rem/24px "Inter", sans-serif;
+}
+
+.content>p {
+  margin: 6px 0 12px;
+  color: var(--secondary-white);
+  font-size: .8rem;
+  line-height: 18px;
+}
+
+.shopNow {
+  -webkit-tap-highlight-color: transparent;
+  outline: none;
+  display: flex;
+  align-items: center;
+  cursor: pointer;
+  padding: 2px;
+  color: var(--secondary-white);
+  font-size: 1rem;
+  width: fit-content;
+  position: relative;
+
+  &:not(:focus-visible):hover::before {
+    height: calc(100% + 10px);
+    opacity: .3;
+    transition: height .2s, opacity .2s;
+  }
+
+  &:focus-visible {
+    color: var(--orange-degree2);
+
+    &::before {
+      background-color: var(--orange-degree2);
+    }
+  }
+}
+
+@include small {
+  .shopNow {
+    font-size: .9rem;
+  }
+}
+
+.shopNow::before {
+  content: '';
+  position: absolute;
+  left: 0;
+  bottom: -5px;
+  width: 100%;
+  height: 2px;
+  background-color: var(--secondary-white);
+  transition: height .3s, opacity .2s .2s;
+}
+
+.content :where(b, p)::selection,
+.shopNow::selection {
+  background-color: var(--white) !important;
+}
+
+// Arabic styles
+[lang=ar] .smallPoster {
+  justify-content: flex-end;
+  background-position: -130px bottom;
+}
+
+[lang=ar] .content {
+  direction: rtl;
+  background-color: #000000aa;
+  padding: 14px;
+  width: 280px;
+}
\ No newline at end of file