Resolves issue #133 fixes explore products image cutoff

[Codensity30]

Added text over the image to make it responsive.

[AmanNegi]

Nice work! @Codensity30. Looks good but the orientation of other things looks off.

Earlier

---

Now

Could you fix this issue, with the orientation of the products? Try to maintain the aspect ratio, as the image should not span across the whole height.

[Codensity30]

I actually wasn't able to see the products that's the reason why the orientation seems to be off.

Though I've started the backend as per the guidelines and the request to fetch products is made to the backend, I've verified this as the useEffect in the component logs a statement.

useEffect(() => {
    getFourItems().then((e) => {
      setProducts(e);
      console.log("Set List to ", e);
    });
  }, []);

and this is the log

I need to fix this first only that I can work on the orientation.

[AmanNegi]

That's because no product is added to your local host yet. Feel free to use the remote development server:

VITE_API_URL="https://agromillets.adaptable.app/api"

[Codensity30]

I've fixed let me know if this looks fine

Also, I've found one more bug in responsiveness

I think there is extra padding, if you want I can fix this

[AmanNegi]

Looks great, just a little more margin from the left side, so that the spacing from the left equals the spacing after the products (towards the right). The image height should be equal to the height taken by the products.

Earlier the spacing was equal from left-right and the product image was medium-sized and somewhat square.

Reference

[Codensity30]

Finally, I fixed this height disorder, it took much longer than expected because you have used fixed sizes rather than tailwind classes which I've fixed various classes, styling, and all.

[AmanNegi]

@Codensity30 Thanks a lot for cleaning and fixing things up! 💚 Merging your PR right away.

~ Keep Contributing ~