Add files via upload

innovatixhub · Nov 26, 2024 · c477d2b · c477d2b
1 parent 8b26b2f
commit c477d2b
Show file tree

Hide file tree

Showing 6 changed files with 453 additions and 0 deletions.
diff --git a/src/componants/shared/poster/HorizontalPoster.jsx 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
@@ -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;
+}
diff --git a/src/componants/shared/poster/MediumPoster.jsx 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
@@ -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%;
+  }
+}
diff --git a/src/componants/shared/poster/SmallPoster.jsx 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;