Updated landing page data distribution

src/components/LandingPageComponents/CarouselMain/CarouselMain.jsx

@@ -8,12 +8,23 @@ import "./carousel.css";
 import "./card.module.css";
 import styles from "./card.module.css";
 
+const titles = [
+ "Ancestors: The Humankind Odyssey",
+ "Manifold Garden",
+ "Prey",
+ "Rebel Galaxy",
+ "Wolfenstein: The Old Blood",
+ "Battlefield™ 2042",
+];
+
 const CarouselMain = () => {
  const data = useSelector((state) => state.landingPageData);
- const carouselData = [];
- for (let i = 0; i < 6; i++) {
- carouselData.push(data[i]);
- }
+ const carouselData = data.filter((el) => {
+ if (titles.includes(el.title)) {
+ return el;
+ }
+ return false;
+ });
 
  return (
  <div className={styles.main}>

src/pages/LandingPage/LandingPage.jsx

@@ -19,6 +19,20 @@ const LandingPage = () => {
  const mostPopularData = landingPageData.slice(10, 15);
  const newToStoreData = landingPageData.slice(15, 20);
 
+ const secondaryCardData1 = landingPageData.filter((el) => {
+ if (el.title === "Corruption 2029" || el.title === "Anno 1701") {
+ return el;
+ }
+ return false;
+ });
+
+ const secondaryCardData2 = landingPageData.filter((el) => {
+ if (el.title === "Tribes of Midgard" || el.title === "One Hand Clapping") {
+ return el;
+ }
+ return false;
+ });
+
  return (
  <>
  <Header />
@@ -38,9 +52,7 @@ const LandingPage = () => {
  </div>
 
  <div className={styles.secondaryCardContainer}>
- <SecondaryCardContainer
- data={[landingPageData[24], landingPageData[25]]}
- />
+ <SecondaryCardContainer data={secondaryCardData1} />
  </div>
 
  <div className={styles.freeCardContainer}>
@@ -68,9 +80,7 @@ const LandingPage = () => {
  </div>
 
  <div className={styles.secondaryCardContainer}>
- <SecondaryCardContainer
- data={[landingPageData[20], landingPageData[19]]}
- />
+ <SecondaryCardContainer data={secondaryCardData2} />
  </div>
 
  <div className={styles.mainCardContainer}>