Add Image Zoom (#510)

src/pages/_app.jsx

@@ -14,6 +14,7 @@ import {ToastContainer} from "react-toastify";
 import 'react-toastify/dist/ReactToastify.css';
 import {dom} from "@fortawesome/fontawesome-svg-core";
 import {AnnouncementBannerProvider} from "@/components/announcement-banner/AnnouncementBannerProvider";
+import {ImageZoom} from "@/components/ImageZoom";
 
 function onRouteChange() {
   useMobileNavigationStore.getState().close()
@@ -42,6 +43,7 @@ export default function App({ Component, pageProps }) {
           </MDXProvider>
       </AnnouncementBannerProvider>
       <ToastContainer />
+      <ImageZoom />
     </>
   )
 }

src/styles/tailwind.css

@@ -120,4 +120,97 @@
 
 .Toastify__close-button {
   color: var(--toastify-text-color-light) !important;
+}
+
+/* Image Zoom / Lightbox Styles */
+.imagewrapper,
+.imagewrapper-big {
+  cursor: zoom-in;
+}
+
+.image-zoom-overlay {
+  position: fixed;
+  inset: 0;
+  z-index: 9999;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background-color: rgba(0, 0, 0, 0.9);
+  backdrop-filter: blur(4px);
+  animation: fadeIn 0.2s ease-out;
+}
+
+.image-zoom-overlay.closing {
+  animation: fadeOut 0.2s ease-out;
+}
+
+.image-zoom-content {
+  max-width: 80vw;
+  max-height: 80vh;
+  object-fit: contain;
+  border-radius: 4px;
+  box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.5);
+  animation: zoomIn 0.2s ease-out;
+  cursor: zoom-out;
+}
+
+.image-zoom-content.closing {
+  animation: zoomOut 0.2s ease-out;
+}
+
+.image-zoom-close {
+  position: absolute;
+  top: 1rem;
+  right: 1rem;
+  padding: 0.5rem;
+  color: white;
+  background-color: rgba(255, 255, 255, 0.1);
+  border: none;
+  border-radius: 50%;
+  cursor: pointer;
+  transition: background-color 0.2s ease;
+}
+
+.image-zoom-close:hover {
+  background-color: rgba(255, 255, 255, 0.2);
+}
+
+@keyframes fadeIn {
+  from {
+    opacity: 0;
+  }
+  to {
+    opacity: 1;
+  }
+}
+
+@keyframes fadeOut {
+  from {
+    opacity: 1;
+  }
+  to {
+    opacity: 0;
+  }
+}
+
+@keyframes zoomIn {
+  from {
+    transform: scale(0.9);
+    opacity: 0;
+  }
+  to {
+    transform: scale(1);
+    opacity: 1;
+  }
+}
+
+@keyframes zoomOut {
+  from {
+    transform: scale(1);
+    opacity: 1;
+  }
+  to {
+    transform: scale(0.9);
+    opacity: 0;
+  }
 }