From 7c7f9e4f13e109ff637d6aa6baf807810c62704b Mon Sep 17 00:00:00 2001
From: cagsun <mail@cagsun.com>
Date: Fri, 27 Jun 2025 00:53:43 +0200
Subject: [PATCH] Added captions to the carousel. Added double carousel option.

---
 docs/Build_Guide/first2.md                    |  4 ++--
 src/components/ImageCarousel.js               | 10 ++++++++-
 src/components/ImageCarousel.module.css       | 21 +++++++++++++++++++
 src/components/StepWithDoubleCarousel.js      | 18 ++++++++++++++++
 .../StepWithDoubleCarousel.module.css         | 20 ++++++++++++++++++
 5 files changed, 70 insertions(+), 3 deletions(-)
 create mode 100644 src/components/StepWithDoubleCarousel.js
 create mode 100644 src/components/StepWithDoubleCarousel.module.css

diff --git a/docs/Build_Guide/first2.md b/docs/Build_Guide/first2.md
index cdc75f8..cdffe1f 100644
--- a/docs/Build_Guide/first2.md
+++ b/docs/Build_Guide/first2.md
@@ -12,11 +12,11 @@ import StepWithCarousel from '@site/src/components/StepWithCarousel';
 <StepWithCarousel
   images={[
     { src: '/img/step1/1_box.webp', caption: 'Unboxing' },
-	{ src: '/img/step1/2_toptray.webp', caption: 'Customise tray walls to make it more like a sink' },
+	{ src: '/img/step1/2_toptray.webp', caption: 'Customised tray walls laid out' },
 	{ src: '/img/step1/2_mark.webp', caption: 'Mark the required holes for the new combination' },
 	{ src: '/img/step1/3_plastic_piece.webp', caption: 'Use provided plastic pieces to fit the additional holes' },
 	{ src: '/img/step1/4_top_done.webp', caption: 'When done, top tray looks like this' },
-	{ src: '/img/step1/6_trays.webp', caption: 'Rest of the trays adjusted like this' },
+	{ src: '/img/step1/6_trays.webp', caption: 'Rest of the trays adjusted would look like this' },
   ]}
 >
 
diff --git a/src/components/ImageCarousel.js b/src/components/ImageCarousel.js
index 3b9b4dd..1c194aa 100644
--- a/src/components/ImageCarousel.js
+++ b/src/components/ImageCarousel.js
@@ -41,6 +41,9 @@ export default function ImageCarousel({ images }) {
           className={styles.mainImage}
           onClick={() => setIsOpen(true)}
         />
+		{currentImage.caption && (
+		    <div className={styles.caption}>{currentImage.caption}</div>
+		)}
         <div className={styles.thumbnails}>
           {images.map((img, i) => (
             <img
@@ -63,7 +66,12 @@ export default function ImageCarousel({ images }) {
           >
             &#10094;
           </button>
-          <img src={currentImage.src} alt={currentImage.caption} className={styles.lightboxImage} />
+			<div className={styles.lightboxContent}>
+	        	<img src={currentImage.src} alt={currentImage.caption} className={styles.lightboxImage} />
+				{currentImage.caption && (
+	          	 <div className={styles.lightboxCaption}>{currentImage.caption}</div>
+	        )}
+	      </div>	
           <button
             className={`${styles.navButton} ${styles.right}`}
             onClick={(e) => { e.stopPropagation(); setCurrentIndex((prev) => (prev + 1) % images.length); }}
diff --git a/src/components/ImageCarousel.module.css b/src/components/ImageCarousel.module.css
index ea5c6f1..d28750d 100644
--- a/src/components/ImageCarousel.module.css
+++ b/src/components/ImageCarousel.module.css
@@ -95,3 +95,24 @@
 .right {
   right: 20px;
 }
+.caption {
+  margin-top: 0.5rem;
+  font-size: 0.8rem;
+  color: #1c1e21;
+  text-align: center;
+  max-width: 90%;
+}
+
+.lightboxContent {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 0.5rem;
+}
+
+.lightboxCaption {
+  color: #ccc;
+  font-size: 0.9rem;
+  text-align: center;
+  max-width: 80vw;
+}
diff --git a/src/components/StepWithDoubleCarousel.js b/src/components/StepWithDoubleCarousel.js
new file mode 100644
index 0000000..97151c1
--- /dev/null
+++ b/src/components/StepWithDoubleCarousel.js
@@ -0,0 +1,18 @@
+import React from 'react';
+import ImageCarousel from './ImageCarousel';
+import styles from './StepWithDoubleCarousel.module.css';
+
+export default function StepWithDoubleCarousel({ stepTitle, stepDescription, carousel1Images, carousel2Images }) {
+  return (
+    <div className={styles.container}>
+      <div className={styles.leftColumn}>
+        <h2>{stepTitle}</h2>
+        <p>{stepDescription}</p>
+      </div>
+      <div className={styles.rightColumn}>
+        <ImageCarousel images={carousel1Images} />
+        <ImageCarousel images={carousel2Images} />
+      </div>
+    </div>
+  );
+}
diff --git a/src/components/StepWithDoubleCarousel.module.css b/src/components/StepWithDoubleCarousel.module.css
new file mode 100644
index 0000000..4aa19ab
--- /dev/null
+++ b/src/components/StepWithDoubleCarousel.module.css
@@ -0,0 +1,20 @@
+.container {
+  display: flex;
+  flex-direction: row;
+  gap: 2rem;
+  margin: 2rem 0;
+  flex-wrap: wrap;
+}
+
+.leftColumn {
+  flex: 1;
+  min-width: 300px;
+}
+
+.rightColumn {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  gap: 2rem;
+  min-width: 300px;
+}