Merge pull request #126 from akshat-chd/Home_edit

Fixed the home page

Author: Kanavpreet-Singh

src/components/Home/CardItem.js

@@ -6,8 +6,8 @@ const CardItem = (props) => {
 
   const imageStyle = {
     objectFit: 'cover',
-    width: '100%',
-    height: '100%',
+    width: '90%',
+    height: '90%',
   };
 
   const cardStyle = {

src/pages/home/Cards.js

@@ -1,93 +1,65 @@
-import React from 'react'
-import CardItem from '../../components/Home/CardItem'
-import Slider from 'react-slick';
-import "../../styles/pages/Home/Cards.css"
-import Wordle from "../../assets/games/Wordle/wordlejpg.png"
-import flagGame from "../../assets/games/flag guess/flagger.png"
-import magicSquare from "../../assets/numberblocks.png"
+import React from "react";
+import Slider from "react-slick";
+import "../../styles/pages/Home/Cards.css";
+
+// ✅ this is your central data file
+import { activities, games } from "../../data/content";
+
+// ✅ your existing card
+import CardItem from "../../components/Home/CardItem";
 
 const Cards = () => {
-    // Slick settings for the carousel
-    const settings = {
-        dots: true,
-        infinite: true,
-        speed: 500,
-        slidesToShow: 3,  // Number of cards to show at once
-        slidesToScroll: 1,
-        responsive: [
-            {
-                breakpoint: 1024,
-                settings: {
-                    slidesToShow: 2,
-                    slidesToScroll: 1,
-                    infinite: true,
-                    dots: true
-                }
-            },
-            {
-                breakpoint: 600,
-                settings: {
-                    slidesToShow: 1,
-                    slidesToScroll: 1,
-                }
-            }
-        ]
-    };
+  const settings = {
+    dots: true,
+    infinite: true,
+    speed: 500,
+    slidesToShow: 3,
+    slidesToScroll: 1,
+    responsive: [
+      {
+        breakpoint: 1024,
+        settings: { slidesToShow: 2, slidesToScroll: 1, dots: true },
+      },
+      {
+        breakpoint: 600,
+        settings: { slidesToShow: 1, slidesToScroll: 1 },
+      },
+    ],
+  };
+
+  // ✅ combine all games + activities from your data file
+  const allItems = [
+    ...games.map((g) => ({
+      src: g.icon,
+      text: g.description,
+      title: g.title,
+      path: `/games/${g.urlTerm}`,
+    })),
+    ...activities.map((a) => ({
+      src: a.icon,
+      text: a.description,
+      title: a.title,
+      path: `/activities/${a.urlTerm}`,
+    })),
+  ];
 
-    return (
-        <div className='container'>
-            <Slider {...settings}>
-                <CardItem
-                    src={Wordle}
-                    text="Wordle Game"
-                    label="Puzzle"
-                    path='/games/Wordle'
-                    title='Wordle' />
-                <CardItem
-                    src={"https://img.freepik.com/free-vector/detailed-click-collect-sign_52683-53160.jpg?size=626&ext=jpg"}
-                    text="Jitter Click Game"
-                    label="Puzzle"
-                    path='/games/jitter-game'
-                    title='Jitter' />
-                <CardItem
-                    src={magicSquare}
-                    text="The Magic Squares Game"
-                    label="Puzzle"
-                    path='/games/magicsquares'
-                    title='MagicSquare' />
-                <CardItem
-                    src={"https://cdn-icons-png.flaticon.com/512/2076/2076261.png"}
-                    text="TicTacToe with a twist"
-                    label="Puzzle"
-                    path='/games/tic-tac-toe'
-                    title='tic-tac-toe' />
-                <CardItem
-                    src={flagGame}
-                    text="Learn Geography Fun Way"
-                    label="Guess The Flag"
-                    path='/games/GuessTheFlag'
-                    title='Guess The Flag' />
-                <CardItem
-                    src={"https://cdn-icons-png.flaticon.com/512/2541/2541991.png"}
-                    text="Get random quotes"
-                    label="Random Quotes"
-                    path='/activities/random-quotes'
-                    title='Random Quotes' />
-                <CardItem
-                    src={"https://aws.astrotalk.com/assets/images/wheel_of_fortune.webp"}
-                    text="Know your fortune"
-                    label="Fortune Cards"
-                    path='/activities/get-your-fortune'
-                    title='Fortune Cards' />
-                <CardItem
-                    src={"https://img.freepik.com/free-photo/marketing-research-concept-with-magnifying-glass-wooden-cubes-red-table-flat-lay_176474-9480.jpg?w=826&t=st=1698234200~exp=1698234800~hmac=06d4ff5d91bc832f3c7a656d2b3a1a792a66a1eab8161ae9086e29a67599154f"}
-                    text="Get any Definition"
-                    label="Search Words"
-                    path='/activities/search-any-word'
-                    title='Search Words' />
-            </Slider>
-        </div>
-    )
-}
+  return (
+    <div className="container">
+      <Slider {...settings}>
+        {allItems.map((item) => (
+          <div key={item.path} style={{ display: "flex", justifyContent: "center" }}>
+            <CardItem
+              src={item.src}
+              text={item.text}
+              label={item.title}
+              path={item.path}
+              title={item.title}
+            />
+          </div>
+        ))}
+      </Slider>
+    </div>
+  );
+};
 
-export default Cards
+export default Cards;

src/styles/pages/Home/CardItem.css

@@ -1,14 +1,14 @@
 .card-image{
     width: 266px;
-    height: 35vh; 
+    height: 36vh; 
     display: flex;
     justify-content: center;
     overflow: hidden;
     /* padding: 0 !important; */
 }
 .card-body{
-    width: 266px;
-    height: 22vh; 
+    width: 290px;
+    height: 28vh; 
     display: flex;
     flex-direction: column;
     justify-content: center;

src/styles/pages/Home/Cards.css

@@ -78,10 +78,10 @@ h1 {
   bottom: 0;
   left: 0;
   display: block;
-  width: 100%;
-  max-width: 100%;
-  height: 100%;
-  max-height: 100%;
+  width: 80%;
+  max-width: 50%;
+  height: 80%;
+  max-height: 50%;
   object-fit: cover;
   transition: all 0.2s linear;
 }