Add files via upload

src/componants/home/featuredsection/FeaturedSection.jsx

@@ -0,0 +1,20 @@
+import { useTranslation } from "react-i18next";
+import SectionTitle from "../../Shared/MiniComponents/SectionTitle/SectionTitle";
+import s from "./FeaturedSection.module.scss";
+import FeaturedSectionPosters from "./FeaturedSectionPosters";
+
+const FeaturedSection = () => {
+  const { t } = useTranslation();
+  const featuredSection = "sectionTitles.featuredSection";
+
+  return (
+    <section className={s.featuredSection}>
+      <SectionTitle
+        eventName={t(`${featuredSection}.title`)}
+        sectionName={t(`${featuredSection}.newArrival`)}
+      />
+      <FeaturedSectionPosters />
+    </section>
+  );
+};
+export default FeaturedSection;

src/componants/home/featuredsection/FeaturedSection.module.scss

@@ -0,0 +1,41 @@
+@import "src/Styles/mixins";
+
+.featuredSection {
+  margin-bottom: 170px;
+}
+
+@include small {
+  .featuredSection {
+    margin-bottom: 100px;
+  }
+}
+
+.wrapper {
+  display: flex;
+  justify-content: space-between;
+  align-items: flex-end;
+  gap: 30px;
+  margin-bottom: 40px;
+}
+
+@include small {
+  .wrapper {
+    flex-direction: column;
+    align-items: flex-start;
+  }
+}
+
+.viewAllBtn {
+  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;
+}

src/componants/home/featuredsection/FeaturedSectionFeatures.jsx

@@ -0,0 +1,30 @@
+import { useTranslation } from "react-i18next";
+import { featuresSectionData } from "src/Data/staticData";
+import { camelCase } from "src/Functions/helper";
+import Feature from "../../Shared/MiniComponents/Feature/Feature";
+import s from "./FeaturedSectionFeatures.module.scss";
+
+const FeaturedSectionFeatures = () => {
+  const featureSection = "aboutPage.featuresSectionData";
+  const { t } = useTranslation();
+
+  return (
+    <div className={s.features}>
+      {featuresSectionData?.map(({ iconImg, iconAlt, id }) => {
+        const featuresTransData = `${featureSection}.${camelCase(iconAlt)}`;
+
+        return (
+          <Feature
+            iconImg={iconImg}
+            iconAlt={t(`${featuresTransData}.iconAlt`)}
+            title={t(`${featuresTransData}.title`)}
+            description={t(`${featuresTransData}.description`)}
+            key={id}
+            loading="lazy"
+          />
+        );
+      })}
+    </div>
+  );
+};
+export default FeaturedSectionFeatures;

src/componants/home/featuredsection/FeaturedSectionFeatures.module.scss

@@ -0,0 +1,24 @@
+@import "src/Styles/mixins";
+
+.features {
+  display: flex;
+  align-items: center;
+  margin-bottom: 120px;
+  gap: 30px;
+}
+
+@include medium {
+  .features {
+    flex-direction: column;
+    align-items: center;
+    gap: 40px;
+  }
+}
+
+// Multi language styles
+@include large {
+  :where([lang=fr], [lang=ru], [lang=hu], [lang=ar]) .features {
+    flex-direction: column;
+    align-items: center;
+  }
+}

src/componants/home/featuredsection/FeaturedSectionPosters.jsx

@@ -0,0 +1,58 @@
+import { useTranslation } from "react-i18next";
+import {
+  perfumeGucci,
+  ps5,
+  speakers,
+  womanWithHat,
+} from "src/Assets/Images/Images";
+import HorizontalPoster from "../../Shared/Posters/HorizontalPoster";
+import MediumPoster from "../../Shared/Posters/MediumPoster";
+import SmallPoster from "../../Shared/Posters/SmallPoster";
+import s from "./FeaturedSectionPosters.module.scss";
+
+const FeaturedSectionPosters = () => {
+  const { t } = useTranslation();
+  const medPosterTitleTrans = t("featuredSection.mediumPoster.title");
+  const medPosterDescTrans = t("featuredSection.mediumPoster.description");
+
+  const smallPoster1TitleTrans = t("featuredSection.smallPoster1.title");
+  const smallPoster1DescTrans = t("featuredSection.smallPoster1.description");
+  const smallPoster2TitleTrans = t("featuredSection.smallPoster2.title");
+  const smallPoster2DescTrans = t("featuredSection.smallPoster2.description");
+
+  const horizontalPosterTitleTrans = t("featuredSection.horizontalPoster.title");
+  const horizontalPosterDescTrans = t("featuredSection.horizontalPoster.description");
+
+  return (
+    <div className={s.posters}>
+      <MediumPoster
+        title={medPosterTitleTrans}
+        description={medPosterDescTrans}
+        posterUrl={ps5}
+      />
+
+      <div className={s.smallPosters}>
+        <HorizontalPoster
+          title={horizontalPosterTitleTrans}
+          description={horizontalPosterDescTrans}
+          posterUrl={womanWithHat}
+        />
+
+        <div className={s.smallerPosters}>
+          <SmallPoster
+            title={smallPoster1TitleTrans}
+            description={smallPoster1DescTrans}
+            posterUrl={speakers}
+          />
+
+          <SmallPoster
+            title={smallPoster2TitleTrans}
+            description={smallPoster2DescTrans}
+            posterUrl={perfumeGucci}
+          />
+        </div>
+      </div>
+    </div>
+  );
+};
+export default FeaturedSectionPosters;

src/componants/home/featuredsection/FeaturedSectionPosters.module.scss

@@ -0,0 +1,45 @@
+@import "src/Styles/mixins";
+
+.posters {
+  margin: 50px 0 100px;
+  display: flex;
+  width: 100%;
+}
+
+@media (max-width: 1300px) {
+  .posters {
+    display: block;
+  }
+}
+
+.posters>* {
+  display: flex;
+  flex-direction: column;
+  flex: 1;
+}
+
+.smallPosters {
+  margin-inline-start: 30px;
+}
+
+@media (max-width: 1300px) {
+  .smallPosters {
+    margin-inline-start: 0;
+    margin-top: 30px;
+  }
+}
+
+.smallerPosters {
+  display: flex;
+  align-items: center;
+  width: 100%;
+  margin-top: 30px;
+  display: flex;
+  gap: 30px;
+}
+
+@include small {
+  .smallerPosters {
+    flex-direction: column;
+  }
+}