Add files via upload

src/componants/home/thismonthsection/ThisMonthSection.jsx

@@ -0,0 +1,37 @@
+import { useTranslation } from "react-i18next";
+import { Link } from "react-router-dom";
+import { productsData } from "src/Data/productsData";
+import ProductsSlider from "../../Shared/MidComponents/ProductsSlider/ProductsSlider";
+import SectionTitle from "../../Shared/MiniComponents/SectionTitle/SectionTitle";
+import s from "./ThisMonthSection.module.scss";
+
+const ThisMonthSection = () => {
+  const { t } = useTranslation();
+  const thisMonthSection = "sectionTitles.thisMonthSection";
+
+  return (
+    <section className={s.thisMonthSection}>
+      <div className={s.wrapper}>
+        <SectionTitle
+          eventName={t(`${thisMonthSection}.title`)}
+          sectionName={t(`${thisMonthSection}.bestSelling`)}
+        />
+
+        <Link to="/products" className={s.viewAllBtn}>
+          {t("buttons.viewAll")}
+        </Link>
+      </div>
+
+      <ProductsSlider filterFun={filterThisMonthProducts} loading="lazy" />
+    </section>
+  );
+};
+export default ThisMonthSection;
+
+function filterThisMonthProducts() {
+  const filteredProducts = productsData.filter(
+    (productData) => productData.sold > 1000
+  );
+
+  return filteredProducts;
+}

src/componants/home/thismonthsection/ThisMonthSection.module.scss

@@ -0,0 +1,57 @@
+@import "src/Styles/mixins";
+
+.thisMonthSection {
+  margin-bottom: 170px;
+}
+
+@include small {
+  .thisMonthSection {
+    margin-bottom: 100px;
+  }
+}
+
+.wrapper {
+  display: flex;
+  justify-content: space-between;
+  align-items: flex-end;
+  gap: 30px;
+  margin-bottom: 20px;
+}
+
+@include small {
+  .wrapper {
+    flex-direction: column;
+    align-items: flex-start;
+  }
+}
+
+.viewAllBtn {
+  -webkit-tap-highlight-color: transparent;
+  border: none;
+  outline: none;
+  cursor: pointer;
+  width: fit-content;
+  height: fit-content;
+  background: var(--dark-red);
+  color: var(--white);
+  padding: 12px 48px;
+  border-radius: 4px;
+  letter-spacing: 0em;
+  font-weight: 500;
+  text-wrap: nowrap;
+  outline: solid 2px transparent;
+  outline-offset: -2px;
+  transition: background .2s;
+
+  &:focus-visible {
+    transition: var(--outline-transition);
+    outline-color: var(--tomato);
+    color: var(--very-dark-gray);
+    background: transparent;
+    color: var(--tomato);
+  }
+
+  &:not(:focus-visible):hover {
+    background: var(--tomato);
+  }
+}