feat: Refactor product image display with new ProductGallery component

[rikp777]

Partly resolves #242

This PR introduces a new <ProductGallery> component to handle all product image displays, cleaning up the main product page.

• New Component: The ProductGallery can show images as both thumbnails and a main gallery view.

Help Needed:

I've run into an issue with SwiperJS. It doesn't behave as expected, and I'd be grateful for any suggestions or help on how to fix this. I've included an allImages variable to make it simple to test the component with a larger set of images.

[zackha]

hey @rikp777,

Thank you, this is really well done 🙌.
However, I noticed a few issues (I’ll also attach a screenshot):

1. When the page loads, it starts from the last image.
2. Some images are being listed multiple times.
3. The small thumbnail section on the left overflows the screen.
4. There are unwanted spaces on the left and right sides of the large images.
5. Because of these issues, the layout feels a bit outside the overall design concept.

Apart from that, moving the product images into a separate component was a really helpful and thoughtful approach 👏.

product.image.display.mov

[rikp777]

I've pushed the latest updates to the ProductGallery component to finalize the click-versus-drag functionality. The design required a unique combination of a centered "peek-a-boo" carousel for desktop and a standard full-width slider for mobile. After attempting to configure Swiper.js to meet these specific needs, it became clear that it would be more straightforward to build our own solution. While it took some time to implement from scratch, it was ultimately easier than trying to override the library's core behavior. This new approach gives us complete control over the functionality.

I've focused mainly on getting the functionality and logic right. Styling isn't my strongest point, so please feel free to jump in and make any adjustments you think are necessary 😉.

Let me know what you think about the changes!