Added captions to the carousel. Added double carousel option.

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' },
   ]}
 >
 

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); }}

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;
+}

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>
+  );
+}

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;
+}