Changes on sidebar styles, and content of pages

src/components/ImageCarousel.js

@@ -0,0 +1,44 @@
+// src/components/ImageCarousel.js
+import React from 'react';
+import clsx from 'clsx';
+import styles from './ImageCarousel.module.css';
+
+export default function ImageCarousel({ images }) {
+  const [current, setCurrent] = React.useState(0);
+
+  if (!images || images.length === 0) return null;
+
+  return (
+    <div className={styles.carousel}>
+      <div className={styles.viewport}>
+        {images.map((img, idx) => (
+          <div
+            key={idx}
+            className={clsx(styles.slide, { [styles.active]: idx === current })}
+          >
+            <img src={img.src} alt={img.alt || `Slide ${idx + 1}`} />
+            {img.caption && <div className={styles.caption}>{img.caption}</div>}
+          </div>
+        ))}
+      </div>
+
+      <div className={styles.thumbnails}>
+        {images.map((img, idx) => (
+          <button
+            key={idx}
+            onClick={() => setCurrent(idx)}
+            className={clsx(styles.thumbnailWrapper, {
+              [styles.activeThumbnail]: idx === current,
+            })}
+          >
+            <img
+              src={img.src}
+              alt={`Thumbnail ${idx + 1}`}
+              className={styles.thumbnail}
+            />
+          </button>
+        ))}
+      </div>
+    </div>
+  );
+}