Add council food images

client/src/components/Council.jsx

@@ -25,26 +25,31 @@ function Council({ options }) {
  alignItems: "center",
  };
 
+ const foodStyle = {
+ width: "120px",
+ height: "120px",
+ };
+
  const calculateShadow = (index, total) => {
  const middleIndex = (total - 1) / 2;
- const distance = 5; // Shadow distance
+ const distanceIncrement = 2; // Increment for distance per index away from the middle
+
+ // Calculate the distance based on the index's distance from the middle
+ const distance = Math.abs(index - middleIndex) * distanceIncrement;
 
- // Determine the shadow direction based on the index
  let x = 0;
- let y = 0;
 
  if (index < middleIndex) {
  x = -distance; // Left shadow
  } else if (index > middleIndex) {
  x = distance; // Right shadow
  }
 
- return `${x}px ${y}px 5px rgba(0,0,0,0.5)`;
+ return `${x}px 3px 5px rgba(0,0,0,0.5)`;
  };
-
  const foodItemStyle = (index, total) => {
  const archHeightVW = 3;
- const verticalOffsetVW = 7;
+ const verticalOffsetVW = 6.5;
 
  const middleIndex = (total - 1) / 2;
 
@@ -71,7 +76,10 @@ function Council({ options }) {
  key={index}
  style={foodItemStyle(index, foods.length)}
  >
- {food}
+ <img
+ src={`/images/foods/${food}.png`}
+ style={foodStyle}
+ />
  </div>
  ))}
  </div>